:root {
  --navy:#122840;
  --navy-2:#1B3D5C;
  --blue:#5BA8D4;
  --sky:#EEF7FC;
  --bg:#E9EDF3;
  --card:#FFFFFF;
  --text:#142A3F;
  --muted:#627486;
  --line:rgba(18,40,64,.12);
  --green:#25D366;
  --purple:#4F9FCC;
  --red:#D64545;
  --amber:#F4B400;
  --shadow:0 18px 48px rgba(18,40,64,.14);
  --soft-shadow:0 10px 28px rgba(18,40,64,.08);
}

/* Admin mobile client picker fix: prevent stacked/overlapping client cards. */
@media (max-width:760px) {
  .admin-shell > aside.card {
    isolation:isolate;
  }

  .mobile-client-picker {
    position:relative;
    z-index:1;
  }

  .mobile-client-picker > .card-body {
    position:relative;
    z-index:1;
    display:block;
    max-height:58vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:18px;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-client-picker:not([open]) > .card-body {
    display:none;
  }

  .client-accordion-list {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    max-height:none;
    overflow:visible;
    padding:0;
  }

  .client-accordion,
  .client-accordion[open],
  .client-accordion.is-current {
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
  }

  .client-accordion summary {
    min-height:74px;
  }
}

* { box-sizing:border-box; margin:0; padding:0; }
body,
button,
.button,
.tab,
.card-head,
.key-work-card,
.key-work-comment-toggle,
.top-admin-trigger,
.profile-chip,
.client-select-button,
.key-work-column-head,
.key-work-modal-status,
.pill,
.key-work-type-badge,
.key-work-media-badge,
.key-work-media-meta-badge,
.key-work-priority-badge {
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

input,
textarea,
select,
.copy-box,
.key-work-task-body,
.key-work-task-body *,
.key-work-comment,
.key-work-comment *,
.update,
.update *,
.agency-reply-form,
.agency-reply-form *,
.media-links-field,
.media-links-field * {
  user-select:text;
  -webkit-user-select:text;
}

* {
  scrollbar-width:thin;
  scrollbar-color:rgba(91,168,212,.72) rgba(18,40,64,.04);
}

*::-webkit-scrollbar {
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track {
  background:rgba(18,40,64,.04);
  border-radius:999px;
}

*::-webkit-scrollbar-thumb {
  border:2px solid rgba(255,255,255,.88);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(91,168,212,.72),rgba(18,40,64,.35));
}

*::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,rgba(91,168,212,.88),rgba(18,40,64,.48));
}

html { scroll-behavior:smooth; }
section[id],
article[id],
.card[id],
.workroom-panel[id] {
  scroll-margin-top:108px;
}
body {
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(91,168,212,.28), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(91,168,212,.18), transparent 34rem),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.56), transparent 28rem),
    var(--bg);
  color:var(--text);
  font-family:"Plus Jakarta Sans", Arial, sans-serif;
  line-height:1.6;
  padding-bottom:132px;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(rgba(18,40,64,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,40,64,.045) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom, #000, transparent 78%);
}

a { color:inherit; }
.wrap { width:min(1120px, calc(100% - 36px)); margin:0 auto; }
.narrow { width:min(920px, calc(100% - 36px)); }

.header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(18,40,64,.96);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 26px rgba(18,40,64,.25);
}

.header-inner {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  text-decoration:none;
}

.brand img {
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  padding:7px;
  box-shadow:0 12px 26px rgba(91,168,212,.22);
}

.brand small {
  display:block;
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:2.3px;
  text-transform:uppercase;
}

.brand strong {
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.2;
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.admin-refresh-button {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.10);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.admin-refresh-button:hover {
  transform:translateY(-1px);
  background:rgba(91,168,212,.28);
  box-shadow:0 12px 28px rgba(91,168,212,.18);
}

.admin-refresh-button svg {
  width:17px;
  height:17px;
  flex:0 0 17px;
}

.top-admin-menu {
  position:relative;
  border:0;
  background:transparent;
}

.top-admin-trigger {
  display:block;
  border:0;
  padding:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
}

.top-admin-trigger:focus-visible {
  outline:3px solid rgba(91,168,212,.55);
  outline-offset:4px;
}

.top-admin-panel {
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:60;
  width:min(330px, calc(100vw - 28px));
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:22px;
  background:rgba(255,255,255,.98);
  box-shadow:0 24px 60px rgba(18,40,64,.24);
}

.top-admin-panel[hidden] {
  display:none;
}

.menu-dismiss-backdrop {
  position:fixed;
  inset:0;
  z-index:55;
  border:0;
  background:transparent;
  cursor:default;
}

.profile-chip {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff;
  background:transparent;
}

.profile-avatar {
  background:#fff;
  box-shadow:0 0 0 7px rgba(255,255,255,.08);
}

.profile-chip small {
  display:block;
  color:rgba(255,255,255,.64);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.profile-chip strong {
  display:block;
  max-width:160px;
  overflow:hidden;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-avatar,
.author-avatar {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:999px;
  background:#fff;
  color:#083047;
  font-size:12px;
  font-weight:900;
}

.profile-avatar img,
.author-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.client-summary-logo img,
.workspace-client-logo img,
.client-logo-mark {
  object-fit:contain;
  padding:4px;
  background:#fff;
}

.profile-avatar img,
.author-avatar img {
  display:block;
  padding:0;
  background:#fff;
  object-fit:cover;
}

.profile-avatar-large {
  width:54px;
  height:54px;
  font-size:16px;
}

.profile-preview-card {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:18px;
  background:rgba(91,168,212,.08);
}

.profile-preview-card strong,
.author-line strong {
  color:var(--navy);
}

.profile-preview-card small {
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  margin-top:1px;
}

.author-line {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.author-line .author-avatar {
  width:28px;
  height:28px;
  font-size:10px;
}

.accent { height:4px; background:linear-gradient(90deg,var(--blue),#7BC4EA,var(--navy-2)); }

.hero { padding:44px 0 18px; }
.hero-card {
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(18,40,64,.98),rgba(27,61,92,.96)),
    radial-gradient(circle at 80% 0%, rgba(91,168,212,.35), transparent 18rem);
  box-shadow:var(--shadow);
  padding:34px;
  color:#fff;
  animation:riseIn .55s ease both;
}

.hero-card::after {
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  right:-100px;
  top:-120px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(91,168,212,.35), transparent 70%);
  animation:floatGlow 7s ease-in-out infinite;
}

.hero-card > * { position:relative; z-index:1; }
.eyebrow {
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:2.6px;
  text-transform:uppercase;
  margin-bottom:12px;
}

h1 {
  max-width:820px;
  color:#fff;
  font-size:clamp(30px,5vw,54px);
  line-height:1.06;
  letter-spacing:-1.9px;
  margin-bottom:14px;
}

.hero-card p {
  max-width:820px;
  color:rgba(255,255,255,.74);
  font-size:15px;
  margin-bottom:12px;
}

.hero-client-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 13px;
}

.hero-client-meta span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:7px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
}

.hero-client-meta strong {
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
}

.hero-client-meta a {
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
  margin-top:16px;
}

.hero-actions-compact {
  max-width:760px;
}

.portal-login-wrap {
  min-height:calc(100vh - 210px);
  display:grid;
  align-items:center;
}

.portal-login-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:stretch;
}

.portal-login-info-card,
.portal-login-form-card {
  min-height:390px;
}

.portal-login-info-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.portal-login-form-card {
  display:grid;
  align-content:center;
  gap:15px;
}

.portal-login-form-card h2 {
  color:#fff;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.05;
}

.portal-login-form-card label {
  display:grid;
  gap:7px;
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.portal-login-form-card input {
  width:100%;
  border:1px solid rgba(255,255,255,.24);
  border-radius:16px;
  padding:14px 15px;
  background:rgba(255,255,255,.95);
  color:var(--navy);
  font:inherit;
  font-weight:800;
  outline:none;
}

.portal-login-form-card input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(91,168,212,.28);
}

.portal-login-status {
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:800;
}

.portal-login-status.is-error {
  color:#FFD4D4;
}

.button-compact {
  position:relative;
  min-height:38px;
  padding:8px 13px;
  font-size:12px;
}

.button-compact .button-icon {
  width:16px;
  height:16px;
}

.notification-bubble {
  position:absolute;
  top:-7px;
  right:-5px;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:999px;
  background:var(--green);
  color:#073A19;
  font-size:10px;
  font-weight:900;
  box-shadow:0 0 0 3px rgba(18,40,64,.95);
}

.hero-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

.stat-panel {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:18px;
  display:grid;
  gap:12px;
  align-content:center;
}

.hero-status-widget {
  display:grid;
  grid-template-columns:76px 1fr;
  gap:13px;
  align-items:center;
  min-height:118px;
  padding:14px;
  border-radius:22px;
}

.hero-status-link {
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hero-status-link:hover {
  transform:translateY(-2px);
  border-color:rgba(91,168,212,.38);
  box-shadow:0 20px 42px rgba(91,168,212,.13);
}

.hero-approval-notice {
  width:100%;
  display:grid;
  grid-template-columns:76px 1fr;
  align-items:center;
  gap:13px;
  min-height:118px;
  margin:0;
  padding:14px;
  border:1px solid rgba(255,173,66,.46);
  border-radius:22px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.42), transparent 5rem),
    linear-gradient(135deg,rgba(255,143,44,.96),rgba(255,190,87,.84));
  color:#132C44;
  box-shadow:0 20px 44px rgba(255,143,44,.24), inset 0 0 0 1px rgba(255,255,255,.20);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hero-approval-notice:hover {
  transform:translateY(-1px);
  border-color:rgba(255,210,131,.76);
  box-shadow:0 24px 52px rgba(255,143,44,.30), inset 0 0 0 1px rgba(255,255,255,.28);
}

.approval-notice-count {
  width:66px;
  height:66px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  color:#D85F00;
  font-size:30px;
  font-weight:950;
  line-height:1;
  box-shadow:0 16px 30px rgba(126,66,0,.20), inset 0 0 0 1px rgba(255,143,44,.28);
}

.hero-approval-notice strong,
.hero-approval-notice small {
  display:block;
  line-height:1.22;
}

.hero-approval-notice strong {
  font-size:17px;
  font-weight:950;
  color:#142D44;
}

.hero-approval-notice small {
  margin-top:5px;
  color:rgba(20,45,68,.76);
  font-size:13px;
  font-weight:800;
}

.card.section-focus,
.workroom-panel.section-focus,
.section-focus {
  border-color:rgba(37,211,102,.46);
  box-shadow:0 0 0 4px rgba(37,211,102,.14), 0 22px 54px rgba(18,40,64,.14);
  animation:sectionGlowFade 15s ease both;
}

.service-engine {
  border:1px solid rgba(37,211,102,.24);
  background:linear-gradient(135deg,rgba(37,211,102,.16),rgba(255,255,255,.07));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 36px rgba(37,211,102,.10);
}

.service-engine.is-empty {
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  box-shadow:none;
}

.service-engine strong {
  display:block;
  color:#fff;
  font-size:17px;
  line-height:1.18;
  margin-bottom:4px;
}

.service-engine p,
.hero-status-copy,
.hero-progress-widget p,
.finalized-widget p {
  color:rgba(255,255,255,.72);
  font-size:13px;
  margin:0;
}

.service-orbit {
  position:relative;
  width:66px;
  height:66px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(37,211,102,.32) 0 28%, transparent 29%),
    conic-gradient(from 0deg, rgba(37,211,102,1), rgba(123,234,170,.26), rgba(37,211,102,1));
  box-shadow:0 0 0 8px rgba(37,211,102,.08), 0 18px 34px rgba(37,211,102,.18);
  overflow:visible;
}

.service-orbit::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  transform:translate(-50%, -50%);
  border-radius:999px;
  background:var(--navy);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}

.service-orbit .orbit-dot {
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 22px rgba(37,211,102,.95);
  transform-origin:0 0;
  animation:serviceOrbitDot 2.4s linear infinite;
}

.service-orbit .orbit-dot:nth-child(1) { --orbit-angle:0deg; opacity:1; }
.service-orbit .orbit-dot:nth-child(2) { --orbit-angle:128deg; opacity:.78; }
.service-orbit .orbit-dot:nth-child(3) { --orbit-angle:244deg; opacity:.58; }

.service-engine .service-orbit-count {
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  transform:translate(-50%, -50%);
  z-index:2;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  margin:0;
  padding:0;
  text-align:center;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}

.service-engine.is-empty .service-orbit {
  filter:grayscale(1);
  opacity:.62;
  animation:none;
}

.hero-progress-widget {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
}

.progress-ring {
  width:72px;
  height:72px;
  border-radius:999px;
  display:grid;
  place-items:center;
  margin:0;
  background:conic-gradient(var(--blue) calc(var(--progress, 0) * 1%), rgba(255,255,255,.14) 0);
}

.progress-ring span {
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-size:15px;
  font-weight:900;
}

.objective-status-stack {
  display:grid;
  justify-items:end;
  align-content:start;
  gap:8px;
  flex:0 0 154px;
  width:154px;
  min-width:154px;
  max-width:154px;
}

.project-mini-progress {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:6px;
  width:142px;
  min-width:0;
  max-width:142px;
  padding:6px 8px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:999px;
  background:rgba(91,168,212,.09);
  color:var(--navy);
}

.project-mini-progress small {
  display:block;
  min-width:0;
  max-width:100%;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  line-height:1.1;
  white-space:normal;
  text-align:left;
}

.mini-progress-ring {
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:conic-gradient(var(--blue) calc(var(--progress, 0) * 1%), rgba(18,40,64,.10) 0);
}

.mini-progress-ring strong {
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
}

.finalized-widget {
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
}

.finalized-widget strong,
.hero-progress-widget strong {
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.18;
  margin-bottom:4px;
}

.finalized-icon {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:28px;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}

.hero-status-copy strong {
  color:#fff;
}

.button {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 18px;
  border-radius:999px;
  border:0;
  font:inherit;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s, opacity .2s;
}

.button:hover { transform:translateY(-2px); }
.button-primary { background:#fff; color:var(--navy); box-shadow:0 14px 30px rgba(0,0,0,.18); }
.button-dark { background:var(--navy); color:#fff; box-shadow:0 12px 28px rgba(18,40,64,.20); }
.button-purple { background:var(--blue); color:#083047; box-shadow:0 12px 28px rgba(91,168,212,.28); }
.button-approval { background:var(--green); color:#073A19; box-shadow:0 12px 28px rgba(37,211,102,.28); }
.button-whatsapp { background:var(--green); color:#073A19; box-shadow:0 12px 28px rgba(37,211,102,.28); }
.button-ghost { background:rgba(18,40,64,.06); color:var(--navy); }
.button-danger { background:rgba(214,69,69,.10); color:var(--red); }
.golden-approval-button {
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:linear-gradient(135deg,#fff7cf 0%,#ffd66b 36%,#d7a62d 68%,#fff2b4 100%);
  color:#5c3a00;
  border:1px solid rgba(215,166,45,.55);
  box-shadow:0 16px 38px rgba(215,166,45,.30), inset 0 1px 0 rgba(255,255,255,.75);
}

.golden-approval-button::before {
  content:"";
  position:absolute;
  inset:-70% -30%;
  z-index:-1;
  background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.84) 49%,transparent 62%);
  transform:translateX(-60%) rotate(8deg);
  animation:goldenShine 2.8s ease-in-out infinite;
}

.golden-approval-button:hover {
  box-shadow:0 20px 48px rgba(215,166,45,.38), inset 0 1px 0 rgba(255,255,255,.86);
}

.golden-approval-gif {
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 34px;
  margin-top:-18px;
  margin-bottom:-8px;
  margin-left:-4px;
  filter:drop-shadow(0 8px 10px rgba(92,58,0,.22));
  pointer-events:none;
}

.golden-sparkle {
  position:relative;
  width:17px;
  height:17px;
  flex:0 0 17px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,#ffd66b 20% 52%,#a46c00 54% 100%);
  box-shadow:0 0 0 4px rgba(255,214,107,.22), 0 0 18px rgba(255,214,107,.72);
}

.golden-sparkle::before,
.golden-sparkle::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:22px;
  border-radius:999px;
  background:#fff8d9;
  transform:translate(-50%,-50%);
}

.golden-sparkle::after {
  transform:translate(-50%,-50%) rotate(90deg);
}

@keyframes goldenShine {
  0%, 42% { transform:translateX(-72%) rotate(8deg); opacity:.25; }
  62% { transform:translateX(72%) rotate(8deg); opacity:1; }
  100% { transform:translateX(72%) rotate(8deg); opacity:0; }
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.button:disabled {
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

.button-icon {
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.section { margin-top:16px; }
.card {
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--soft-shadow);
  overflow:hidden;
  animation:riseIn .55s ease both;
}

.card-head {
  padding:19px 26px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#fff,#EEF7FC);
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.workspace-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.workspace-chat-button {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  box-shadow:0 12px 28px rgba(18,40,64,.10);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.workspace-chat-button:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(18,40,64,.14);
}

.workspace-chat-button.has-notifications {
  background:linear-gradient(135deg,rgba(41,174,96,.95),rgba(46,204,113,.86));
  color:#fff;
}

.chat-icon-dot {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  line-height:1;
}

.chat-icon-dot svg {
  display:block;
  width:22px;
  height:22px;
}

.workspace-chat-count {
  position:absolute;
  top:-6px;
  right:-6px;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border:2px solid #fff;
  border-radius:999px;
  background:#d64545;
  color:#fff;
  font-size:10px;
  font-weight:1000;
}

.card-head h2 {
  color:var(--navy);
  font-size:clamp(21px,3vw,29px);
  line-height:1.16;
  letter-spacing:-.9px;
}

.admin-shell > aside.card > .card-head h2 {
  display:inline-flex;
  align-items:flex-start;
  gap:7px;
  width:max-content;
  max-width:100%;
}

.card-body { padding:24px 26px 28px; }
.muted { color:var(--muted); font-size:14px; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-1 { display:grid; grid-template-columns:1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.mini-card {
  border:1px solid var(--line);
  border-radius:18px;
  padding:17px;
  background:rgba(255,255,255,.82);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.mini-card:hover {
  transform:translateY(-2px);
  border-color:rgba(91,168,212,.35);
  box-shadow:0 14px 30px rgba(18,40,64,.10);
}

.mini-card h3 {
  color:var(--navy);
  font-size:15px;
  letter-spacing:-.3px;
  margin-bottom:7px;
}

.mini-card p { color:var(--muted); font-size:13.4px; }

.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  max-width:max-content;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(91,168,212,.14);
  color:var(--navy);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}

.pill.done { background:rgba(37,211,102,.16); color:#167A3B; }
.pill.waiting { background:rgba(244,180,0,.18); color:#775500; }
.pill.blocked { background:rgba(214,69,69,.12); color:var(--red); }
.pill.progress { background:rgba(91,168,212,.14); color:var(--navy-2); }
.pill.ended { background:rgba(18,40,64,.10); color:var(--muted); }
.pill.active { background:rgba(37,211,102,.16); color:#167A3B; }
.pill.active::before {
  content:"";
  width:8px;
  height:8px;
  margin-right:7px;
  border-radius:999px;
  background:#25D366;
  box-shadow:0 0 0 4px rgba(37,211,102,.14);
}

.task-list, .service-list, .update-list, .field-list, .objective-list {
  display:grid;
  gap:12px;
  min-width:0;
}

.task, .service, .update, .field, .objective {
  display:grid;
  gap:8px;
  min-width:0;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:#fff;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#updates,
#updatesSection,
#updatesSection *,
.update-list,
.update,
.update p,
.update h3,
.update-feedback,
.update-feedback p,
.client-requirement-box,
.client-requirement-box *,
.client-requirement-form,
.client-requirement-form * {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.checklist-project-group {
  padding:0;
  overflow:hidden;
}

.checklist-project-group summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  cursor:pointer;
  list-style:none;
  min-width:0;
}

.checklist-project-group summary > div,
.task-top > div {
  min-width:0;
  flex:1 1 auto;
}

.task-top {
  min-width:0;
  align-items:flex-start;
}

.task-top > .objective-status-stack {
  flex:0 0 154px;
  width:154px;
  min-width:154px;
  margin-left:auto;
}

.checklist-project-group summary::-webkit-details-marker {
  display:none;
}

.checklist-project-group summary h3 {
  margin:0;
  color:var(--navy);
  font-size:15px;
}

.checklist-project-group .task-list {
  padding:0 16px 16px;
}

.update-response-form,
.client-requirement-form,
.agency-reply-form,
.update-acknowledged,
.update-feedback {
  display:grid;
  gap:9px;
  margin-top:4px;
  padding:12px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:16px;
  background:rgba(91,168,212,.08);
}

.update-response-form label {
  display:grid;
  gap:7px;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.client-requirement-box {
  border:1px solid rgba(18,40,64,.20);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(18,40,64,.98),rgba(31,86,120,.94));
  box-shadow:0 18px 42px rgba(18,40,64,.16);
  overflow:hidden;
}

.client-requirement-modal-trigger {
  width:100%;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:19px 18px;
  color:#fff;
  text-align:left;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.client-requirement-modal-trigger > span:last-child {
  min-width:0;
  flex:1 1 auto;
}

.client-requirement-modal-trigger small {
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.client-requirement-box summary {
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px 18px;
  cursor:pointer;
  color:#fff;
  font-weight:900;
  list-style:none;
  min-width:0;
}

.client-requirement-box summary > span:last-child {
  min-width:0;
  flex:1 1 auto;
}

.client-requirement-box summary small {
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.requirement-plus {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--blue);
  color:#083047;
  padding:0;
  box-shadow:0 0 0 6px rgba(91,168,212,.16);
}

.requirement-plus svg {
  width:18px;
  height:18px;
  display:block;
}

.client-requirement-box summary::-webkit-details-marker {
  display:none;
}

.client-requirement-form,
.agency-reply-form {
  margin:0 14px 14px;
}

.client-requirement-form {
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.96);
}

.client-requirement-form label,
.agency-reply-form label {
  display:grid;
  gap:7px;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.client-requirement-form input,
.client-requirement-form textarea,
.agency-reply-form textarea {
  width:100%;
}

.client-requirement-priority {
  display:grid;
  gap:8px;
  padding:0;
  margin:0;
  border:0;
  min-width:0;
}

.client-requirement-priority legend {
  padding:0;
  color:var(--navy);
  font-size:12px;
  font-weight:1000;
}

.requirement-priority-options,
.requirement-status-badges {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.requirement-priority-option {
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

.requirement-priority-option input {
  position:absolute;
  width:auto;
  height:auto;
  opacity:0;
  pointer-events:none;
}

.requirement-priority-option .key-work-priority-badge {
  border:1px solid rgba(18,40,64,.10);
  transform:translateY(0);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.requirement-priority-option input:checked + .key-work-priority-badge {
  border-color:rgba(91,168,212,.68);
  box-shadow:0 0 0 4px rgba(91,168,212,.16);
  transform:translateY(-1px);
}

.client-requirement-incomplete-toggle {
  display:flex !important;
  align-items:center;
  gap:12px !important;
  padding:12px;
  border:1px solid rgba(244,180,0,.25);
  border-radius:16px;
  background:rgba(244,180,0,.08);
  cursor:pointer;
}

.client-requirement-incomplete-toggle input {
  width:22px;
  height:22px;
  flex:0 0 auto;
  accent-color:#f4b400;
}

.client-requirement-incomplete-toggle span {
  display:grid;
  gap:2px;
  min-width:0;
}

.client-requirement-incomplete-toggle small {
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.requirement-incomplete-badge {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(244,180,0,.24);
  background:rgba(244,180,0,.12);
  color:#8a6500;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.client-requirement-edit-box {
  margin-top:6px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:16px;
  background:rgba(91,168,212,.06);
  overflow:hidden;
}

.client-requirement-edit-box summary {
  padding:11px 13px;
  cursor:pointer;
  color:var(--navy);
  font-size:12px;
  font-weight:1000;
  list-style:none;
}

.client-requirement-edit-box summary::-webkit-details-marker {
  display:none;
}

.client-requirement-edit-form {
  margin:0;
  border:0;
  border-top:1px solid rgba(91,168,212,.16);
  border-radius:0;
  background:rgba(255,255,255,.72);
}

.client-requirement-edit-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.top-requirement-panel {
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(18,40,64,.58);
  backdrop-filter:blur(14px);
}

.top-requirement-panel.show {
  display:flex;
}

.top-requirement-panel[hidden] {
  display:none;
}

.requirement-modal-card {
  position:relative;
  width:min(720px, 100%);
  max-height:min(760px, 92vh);
  overflow:auto;
  padding:28px;
  border-color:rgba(91,168,212,.26);
  background:
    radial-gradient(circle at 8% 0%, rgba(91,168,212,.20), transparent 20rem),
    rgba(255,255,255,.96);
}

.requirement-modal-intro {
  display:grid;
  grid-template-columns:52px 1fr;
  gap:14px;
  align-items:start;
  padding-right:42px;
  margin-bottom:18px;
}

.requirement-modal-intro .dedicated-member-avatar {
  width:52px;
  height:52px;
  border-radius:19px;
  background:#fff;
  box-shadow:0 14px 30px rgba(18,40,64,.12);
}

.requirement-modal-intro h2 {
  margin:2px 0 6px;
  font-size:clamp(25px, 4vw, 36px);
}

.client-requirement-form-top {
  grid-template-columns:1fr;
  align-items:stretch;
  margin:0;
}

.client-requirement-form-top textarea {
  min-height:138px;
}

.update-response-form textarea {
  min-height:78px;
}

.update-acknowledged,
.update-feedback {
  border-color:rgba(37,211,102,.24);
  background:rgba(37,211,102,.09);
}

.update-acknowledged strong,
.update-feedback strong {
  color:#167A3B;
}

.update-acknowledged span,
.update-feedback span {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.subtle-time {
  font-size:12px;
  font-weight:800;
  opacity:.78;
}

.update-acknowledged p,
.update-feedback p {
  margin:0;
  color:var(--navy);
}

.update-feedback-pending {
  border-color:rgba(244,180,0,.25);
  background:rgba(244,180,0,.10);
  color:#775500;
  font-weight:900;
}

.update-key-work-created {
  border-color:rgba(37,211,102,.28);
  background:linear-gradient(135deg, rgba(37,211,102,.14), rgba(90,174,214,.10));
}

.update-key-work-created strong {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.processed-update-details {
  display:block;
  gap:0;
  padding:0;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(37,211,102,.24);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(37,211,102,.12), rgba(91,168,212,.08));
}

.processed-update-details summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) 198px 26px;
  align-items:center;
  gap:12px;
  min-height:76px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
}

.processed-update-details summary::-webkit-details-marker {
  display:none;
}

.processed-update-details summary::after {
  content:"";
  width:9px;
  height:9px;
  justify-self:center;
  align-self:center;
  border-right:2px solid #167A3B;
  border-bottom:2px solid #167A3B;
  transform:rotate(45deg);
  transition:transform .18s ease;
}

.processed-update-details[open] summary::after {
  transform:rotate(225deg);
}

.processed-update-main {
  display:grid;
  min-width:0;
  gap:3px;
}

.processed-update-status {
  width:max-content;
  min-height:24px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(37,211,102,.16);
  color:#167A3B;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.processed-update-details summary strong {
  color:var(--navy);
  font-size:15px;
  font-weight:1000;
  line-height:1.15;
}

.processed-update-details summary small {
  color:var(--muted);
  font-size:11px;
  font-weight:850;
}

.processed-update-summary-actions {
  display:grid;
  grid-template-columns:74px 112px;
  align-items:center;
  justify-content:end;
  gap:10px;
  min-width:0;
  width:198px;
}

.processed-update-summary-actions .compact-delete {
  justify-self:end;
  min-height:40px;
  width:112px;
  min-width:112px;
  padding:10px 12px;
}

.processed-update-body {
  display:grid;
  gap:10px;
  padding:0 16px 16px;
  border-top:1px solid rgba(37,211,102,.18);
  background:rgba(255,255,255,.72);
}

.processed-update-body .update-feedback,
.processed-update-body .agency-reply-form {
  margin:0;
}

.processed-update-client summary {
  grid-template-columns:minmax(0,1fr) 26px;
  min-height:68px;
}

.processed-update-client .processed-update-body {
  padding:14px 16px 16px;
}

.processed-update-client .update-top {
  align-items:flex-start;
}

.processed-update-client .update-feedback,
.processed-update-client .update-acknowledged {
  margin-top:0;
}

.update-history {
  position:relative;
  display:grid;
  gap:12px;
}

.update-day-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:2px 0;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.update-day-divider::before,
.update-day-divider::after {
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,rgba(18,40,64,.14),transparent);
}

.update-day-divider span {
  padding:6px 10px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:999px;
  background:rgba(255,255,255,.82);
}

.update-history.has-more-history::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:86px;
  pointer-events:none;
  border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92) 62%,#fff 100%);
}

.update-history-count {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-align:center;
}

.update-history-nav {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
}

.update-history-nav-top {
  margin-bottom:8px;
}

.update-history-nav-bottom {
  margin-top:-10px;
}

.history-nav-button {
  min-width:190px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 14px 34px rgba(18,40,64,.12);
}

.history-arrow {
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.update-revealed {
  animation:riseIn .22s ease both;
}

.task-top, .service-top, .update-top {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.task h3, .service h3, .update h3, .objective h3 {
  color:var(--navy);
  font-size:15px;
  line-height:1.28;
}

.relationship-banner,
.relationship-admin-note {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px 24px;
  background:rgba(255,255,255,.86);
  box-shadow:var(--soft-shadow);
}

.relationship-admin-note {
  grid-template-columns:150px 1fr;
}

.relationship-banner > div:first-child,
.relationship-admin-note strong {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--navy);
  font-weight:900;
}

.relationship-banner h3 {
  color:var(--navy);
  font-size:22px;
  line-height:1.2;
  margin-bottom:4px;
}

.relationship-banner p,
.relationship-admin-note span {
  color:var(--muted);
  font-size:14.2px;
}

.relationship-dot {
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(37,211,102,.15);
}

.relationship-active {
  border-color:rgba(37,211,102,.34);
  background:
    radial-gradient(circle at 6% 0%, rgba(37,211,102,.20), transparent 18rem),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(37,211,102,.12));
  box-shadow:0 18px 44px rgba(37,211,102,.12), var(--soft-shadow);
}

.relationship-hold {
  border-color:rgba(244,180,0,.34);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,180,0,.10));
}

.relationship-hold .relationship-dot {
  background:var(--amber);
  box-shadow:0 0 0 5px rgba(244,180,0,.16);
}

.relationship-inactive {
  border-color:rgba(214,69,69,.24);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(214,69,69,.07));
}

.relationship-inactive .relationship-dot {
  background:var(--red);
  box-shadow:0 0 0 5px rgba(214,69,69,.12);
}

.relationship-ended {
  border-color:rgba(18,40,64,.16);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(18,40,64,.06));
}

.relationship-ended .relationship-dot {
  background:var(--muted);
  box-shadow:0 0 0 5px rgba(18,40,64,.10);
}

#tab-overview > .notice,
#tab-overview > .relationship-admin-note {
  display:none;
}

.overview-metric-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.overview-metric-grid-single {
  grid-template-columns:minmax(0,1fr);
}

.metrics-hero-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px;
  border:1px solid rgba(215,166,45,.30);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,214,107,.34), transparent 15rem),
    linear-gradient(135deg,#fff,rgba(255,248,215,.72));
  box-shadow:0 18px 42px rgba(215,166,45,.12), var(--soft-shadow);
}

.metrics-hero-card h3 {
  margin:4px 0 6px;
  color:var(--navy);
  font-size:24px;
  line-height:1.12;
}

.golden-metric-emblem {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  min-height:120px;
  padding:18px;
  border:1px solid rgba(215,166,45,.38);
  border-radius:34px;
  background:linear-gradient(135deg,#fff7cf,#ffd66b 46%,#d7a62d);
  color:#5c3a00;
  font-size:16px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 22px 50px rgba(215,166,45,.24), inset 0 1px 0 rgba(255,255,255,.72);
}

.golden-metric-emblem::before,
.golden-metric-emblem::after {
  content:"";
  position:absolute;
  border-radius:999px;
  background:#fff8d9;
  box-shadow:0 0 16px rgba(255,255,255,.85);
}

.golden-metric-emblem::before {
  width:13px;
  height:13px;
  right:22px;
  top:18px;
}

.golden-metric-emblem::after {
  width:9px;
  height:9px;
  left:22px;
  bottom:22px;
}

.metrics-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.metric-card {
  display:grid;
  gap:5px;
  min-height:116px;
  padding:16px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(18,40,64,.07);
}

.metric-card strong {
  color:var(--navy);
  font-size:31px;
  line-height:1;
}

.metric-card span {
  color:var(--navy);
  font-size:13px;
  font-weight:1000;
}

.metric-card small {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

.metric-gold {
  border-color:rgba(215,166,45,.30);
  background:linear-gradient(135deg,#fff,rgba(255,246,205,.86));
}

.metric-blue {
  border-color:rgba(91,168,212,.25);
  background:linear-gradient(135deg,#fff,rgba(232,247,255,.86));
}

.metric-green {
  border-color:rgba(37,211,102,.22);
  background:linear-gradient(135deg,#fff,rgba(37,211,102,.09));
}

.approval-history-panel {
  padding:20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.86);
  box-shadow:var(--soft-shadow);
}

.approval-history-list {
  display:grid;
  gap:10px;
  margin-top:14px;
}

.approval-history-item {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:13px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:18px;
  background:#fff;
}

.approval-history-item.is-premium {
  border-color:rgba(215,166,45,.32);
  background:linear-gradient(135deg,#fff,rgba(255,246,205,.76));
}

.approval-history-type {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(18,40,64,.06);
  color:var(--navy);
  font-size:11px;
  font-weight:1000;
}

.approval-history-item:not(.is-premium) .approval-history-type::before {
  background:var(--green);
  box-shadow:0 0 0 4px rgba(37,211,102,.18);
}

.approval-history-item strong,
.approval-history-item small {
  display:block;
}

.approval-history-item strong {
  color:var(--navy);
  font-size:14px;
  line-height:1.25;
}

.approval-history-item small {
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

.relationship-overview-card {
  display:grid;
  gap:10px;
  min-height:150px;
  border-radius:22px;
}

.relationship-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.relationship-overview-card h3 {
  margin:0;
  color:var(--navy);
  font-size:28px;
  letter-spacing:-.8px;
}

.relationship-overview-card.relationship-active {
  border-color:rgba(37,211,102,.34);
  background:
    radial-gradient(circle at 6% 0%, rgba(37,211,102,.22), transparent 18rem),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(37,211,102,.14));
  box-shadow:0 18px 44px rgba(37,211,102,.12), var(--soft-shadow);
}

.relationship-overview-card.relationship-hold {
  border-color:rgba(244,180,0,.34);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,180,0,.13));
}

.relationship-overview-card.relationship-inactive {
  border-color:rgba(214,69,69,.24);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(214,69,69,.09));
}

.relationship-overview-card.relationship-ended {
  border-color:rgba(18,40,64,.16);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(18,40,64,.07));
}

.relationship-overview-card p {
  max-width:720px;
  color:var(--muted);
  font-size:14px;
}

.admin-progress-card {
  display:grid;
  grid-template-columns:62px 1fr;
  gap:13px;
  align-items:center;
  min-height:150px;
}

.admin-progress-ring {
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:conic-gradient(var(--blue) calc(var(--progress, 0) * 1%), rgba(18,40,64,.10) 0);
  box-shadow:inset 0 0 0 1px rgba(18,40,64,.06), 0 12px 24px rgba(91,168,212,.14);
}

.admin-progress-ring span {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.service-count-badge {
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(37,211,102,.18),rgba(91,168,212,.14));
  border:1px solid rgba(37,211,102,.26);
  box-shadow:0 12px 26px rgba(37,211,102,.12);
}

.service-count-badge span {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#167A3B;
  background:#fff;
  font-size:18px;
  font-weight:900;
}

.admin-progress-card h3 {
  margin:8px 0 2px;
  color:var(--navy);
  font-size:19px;
  letter-spacing:-.5px;
}

.danger-zone {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-color:rgba(214,69,69,.20);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(214,69,69,.06));
}

.tooltip-dot {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:var(--navy);
  background:rgba(18,40,64,.08);
  font-size:12px;
  font-weight:900;
  cursor:help;
}

.service-buttons {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.service-button {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  align-items:flex-start;
  min-height:138px;
  border:1px solid rgba(18,40,64,.11);
  border-radius:20px;
  padding:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(238,247,252,.78));
  color:var(--text);
  text-decoration:none;
  box-shadow:0 14px 32px rgba(18,40,64,.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor:default;
}

.service-button:hover {
  transform:translateY(-1px);
  border-color:rgba(91,168,212,.42);
  box-shadow:0 20px 42px rgba(18,40,64,.13);
}

.service-icon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),#7BC4EA);
  box-shadow:0 12px 26px rgba(91,168,212,.26);
}

.service-icon svg {
  width:25px;
  height:25px;
}

.service-button .service-top {
  align-items:flex-start;
}

.portal-command .card-body {
  padding-right:0;
}

.portal-carousel {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(320px, 84%);
  gap:16px;
  overflow-x:auto;
  padding:2px 26px 14px 0;
  scroll-snap-type:x mandatory;
  scrollbar-color:rgba(18,40,64,.22) transparent;
}

.portal-slide {
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 34px rgba(18,40,64,.09);
  min-height:420px;
}

.project-workroom {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);
  grid-template-areas:
    "projects progress"
    "updates progress";
  gap:16px;
  padding-right:26px;
}

.workroom-panel {
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 34px rgba(18,40,64,.09);
}

.current-work-panel { grid-area:projects; }
.progress-work-panel { grid-area:progress; }
.updates-work-panel { grid-area:updates; }

.highlight-slide {
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(238,247,252,.90));
  border-color:rgba(91,168,212,.34);
}

.slide-head {
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-bottom:16px;
}

.slide-head h3 {
  color:var(--navy);
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.7px;
}

.slide-number {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  font-weight:900;
  font-size:12px;
}

.featured-item {
  background:rgba(255,255,255,.9);
}

.secondary-info {
  opacity:.94;
}

.detail-group {
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  overflow:hidden;
}

.detail-group + .detail-group { margin-top:10px; }

.detail-group summary {
  padding:15px 16px;
  cursor:pointer;
  color:var(--navy);
  font-weight:900;
  list-style:none;
}

.detail-group summary::-webkit-details-marker { display:none; }
.detail-group summary::after {
  content:"+";
  float:right;
  color:var(--blue);
}
.detail-group[open] summary::after { content:"–"; }
.detail-group .field-list { padding:0 16px 16px; }

.meta-line {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}

.progress-bar {
  width:100%;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(18,40,64,.09);
}

.progress-bar span {
  display:block;
  width:calc(var(--task-progress, 0) * 1%);
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),#7BC4EA);
}

.progress-label {
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.field {
  grid-template-columns:minmax(120px,180px) minmax(0,1fr);
  align-items:start;
}

.field > .task-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:14px;
}

.field > .task-top > div:first-child {
  display:grid;
  grid-template-columns:minmax(120px,180px) auto minmax(0,1fr);
  align-items:start;
  gap:10px;
}

.field strong,
.field h3 {
  min-width:0;
  color:var(--navy);
  font-size:15px;
  line-height:1.2;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

.field .meta-line {
  min-width:0;
  align-self:center;
}

.field .meta-line span {
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.field .item-actions {
  grid-column:1 / -1;
  justify-content:flex-start;
}

.client-resource-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.client-id-card {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(91,168,212,.18), transparent 17rem),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(238,247,252,.72));
  box-shadow:0 18px 44px rgba(18,40,64,.10);
}

.dedicated-member-card {
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  margin:4px 0 18px;
  padding:9px 12px 9px 9px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--navy);
  box-shadow:0 12px 28px rgba(18,40,64,.08);
}

.dedicated-member-card.requirement-contact-card,
.dedicated-member-card:has(.requirement-chat-button) {
  flex-wrap:wrap;
  max-width:min(100%, 590px);
}

.dedicated-member-avatar {
  width:38px;
  height:38px;
}

.dedicated-member-avatar svg {
  width:18px;
  height:18px;
}

.requirement-chat-button {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  padding:9px 13px;
  border:1px solid rgba(91,168,212,.28);
  border-radius:999px;
  background:linear-gradient(135deg,#fff,rgba(238,247,252,.94));
  color:var(--navy);
  box-shadow:0 12px 24px rgba(18,40,64,.10);
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.requirement-chat-button:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(18,40,64,.14);
}

.requirement-chat-button svg {
  width:17px;
  height:17px;
}

.dedicated-member-card strong,
.dedicated-member-card small {
  display:block;
  line-height:1.15;
}

.dedicated-member-card strong {
  font-size:13px;
  font-weight:900;
}

.dedicated-member-card small {
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.client-id-card-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:20px;
}

.client-id-card h3 {
  margin:10px 0 4px;
  color:var(--navy);
  font-size:clamp(24px,3vw,34px);
  line-height:1.08;
  letter-spacing:-1px;
}

.client-id-logo {
  width:76px;
  height:76px;
  object-fit:contain;
  border-radius:22px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(18,40,64,.08);
  box-shadow:0 14px 30px rgba(18,40,64,.10);
}

.client-id-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.client-id-grid div {
  display:grid;
  gap:4px;
  min-width:0;
  border:1px solid rgba(18,40,64,.08);
  border-radius:16px;
  padding:13px;
  background:rgba(255,255,255,.72);
}

.client-id-grid strong {
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
}

.client-id-grid span {
  color:var(--navy);
  font-size:13px;
  font-weight:800;
  overflow-wrap:anywhere;
}

.client-detail-card {
  display:grid;
  align-content:start;
  gap:14px;
  min-height:220px;
}

.client-detail-card .slide-head {
  margin-bottom:0;
}

.resource-card-panel {
  border-color:rgba(91,168,212,.28);
  border:1px solid rgba(91,168,212,.28);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(238,247,252,.84));
}

.resource-list {
  gap:14px;
}

.resource-field {
  border-color:rgba(91,168,212,.22);
  background:rgba(255,255,255,.92);
}

.resource-actions {
  display:grid;
  gap:10px;
  min-width:0;
}

.resource-actions .muted {
  overflow-wrap:anywhere;
}

.field-image-row {
  align-items:center;
}

.field-image-preview {
  width:min(180px,100%);
  max-height:120px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:#fff;
  box-shadow:0 10px 24px rgba(18,40,64,.08);
}

.field-image-stack {
  display:grid;
  gap:10px;
  justify-items:start;
}

.field-download {
  min-height:36px;
  padding:8px 13px;
  border-radius:12px;
  font-size:12px;
}

.client-logo-mark {
  display:block;
  width:88px;
  height:88px;
  object-fit:contain;
  margin-bottom:18px;
  padding:12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 14px 34px rgba(0,0,0,.14), inset 0 0 0 1px rgba(18,40,64,.06);
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.drive-upload-inline,
.client-drive-upload-field {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  min-width:0;
}

.drive-upload-inline small,
.client-drive-upload-field small {
  flex:1 1 220px;
  min-width:0;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

.drive-test-status {
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(91,168,212,.24);
  background:rgba(91,168,212,.08);
  color:var(--navy);
  font-size:12px;
  font-weight:800;
}

.drive-test-status span {
  color:var(--muted);
  line-height:1.4;
}

.drive-test-status.is-success {
  border-color:rgba(42,210,120,.34);
  background:rgba(42,210,120,.12);
}

.drive-test-status.is-error {
  border-color:rgba(239,68,68,.30);
  background:rgba(239,68,68,.10);
}

.drive-test-status.is-loading {
  border-color:rgba(91,168,212,.38);
  background:linear-gradient(135deg,rgba(91,168,212,.10),rgba(255,255,255,.84));
}

label {
  display:grid;
  gap:6px;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.copyable-field {
  display:grid;
  gap:7px;
}

.copyable-field-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--navy);
  font-size:12px;
  font-weight:1000;
}

.copy-field-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  padding:6px 10px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(238,247,252,.92),#fff);
  color:var(--navy);
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(18,40,64,.06);
}

.copy-field-button:hover {
  transform:translateY(-1px);
  border-color:rgba(91,168,212,.42);
  box-shadow:0 12px 24px rgba(18,40,64,.10);
}

.input-help {
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}

.label-text {
  color:var(--navy);
}

input, textarea, select {
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 13px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:14px;
  outline:none;
}

textarea { min-height:92px; resize:vertical; }
input:focus, textarea:focus, select:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(91,168,212,.16);
}

input[type="range"] {
  accent-color:var(--blue);
  padding:0;
  border:0;
  box-shadow:none;
  cursor:pointer;
}

input[type="range"]:focus {
  box-shadow:0 0 0 4px rgba(91,168,212,.16);
}

.range-value {
  color:var(--blue);
  font-size:13px;
  font-weight:900;
}

.full { grid-column:1 / -1; }
.admin-shell {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:16px;
  align-items:start;
  padding:28px 0 46px;
}

.client-list {
  display:grid;
  gap:10px;
  margin-top:14px;
}

.mobile-client-picker summary {
  display:none;
}

.client-accordion-list {
  max-height:calc(100vh - 360px);
  overflow:auto;
  padding-right:3px;
}

.client-directory-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.side-actions {
  display:grid;
  gap:9px;
}

.create-client-plus-button {
  display:inline-grid;
  place-items:center;
  width:21px;
  height:21px;
  min-width:21px;
  flex:0 0 21px;
  align-self:flex-start;
  margin:1px 0 0 0;
  border:0;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font:inherit;
  font-size:16px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(91,168,212,.24);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.create-client-plus-button span {
  display:block;
  line-height:1;
  transform:translateY(-.5px);
}

.create-client-plus-button:hover {
  transform:translateY(-1px) scale(1.03);
  background:#4F9FCC;
  box-shadow:0 10px 22px rgba(91,168,212,.34);
}

.logged-actions {
  display:grid;
  gap:9px;
  padding:0 16px 16px;
}

.locked-panel {
  display:grid;
  gap:6px;
  border:1px dashed rgba(18,40,64,.20);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.62);
  color:var(--muted);
}

.locked-panel strong {
  color:var(--navy);
}

.client-row {
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  padding:14px;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.client-row:hover {
  transform:translateY(-2px);
  border-color:rgba(91,168,212,.42);
  box-shadow:0 14px 30px rgba(18,40,64,.09);
}

.client-row strong { display:block; color:var(--navy); }
.client-row span { color:var(--muted); font-size:12px; }

.client-card {
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.9);
  padding:15px;
  display:grid;
  gap:10px;
}

.client-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.client-card h3 {
  color:var(--navy);
  font-size:15px;
  line-height:1.25;
}

.client-accordion {
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.9);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.client-accordion[open] {
  border-color:rgba(91,168,212,.40);
  box-shadow:0 14px 30px rgba(18,40,64,.09);
}

.client-accordion.is-current {
  border-color:rgba(91,168,212,.62);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(238,247,252,.94));
  box-shadow:0 18px 38px rgba(91,168,212,.17);
}

.client-accordion.is-disabled {
  opacity:.58;
  filter:saturate(.65);
}

.client-accordion.is-disabled summary {
  cursor:not-allowed;
}

.inactive-admin-panel,
.inactive-client-note {
  border-color:rgba(244,180,0,.24);
  background:linear-gradient(135deg,#fff,rgba(244,180,0,.12));
}

.client-accordion summary {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:14px 48px 14px 14px;
  cursor:pointer;
  list-style:none;
}

.client-select-button {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-width:0;
  padding:14px 48px 14px 14px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
}

.client-accordion summary::-webkit-details-marker { display:none; }

.client-summary-main {
  display:grid;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  padding-right:0;
}

.client-summary-topline {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:8px;
  min-width:0;
}

.client-summary-topline h3 {
  min-width:0;
  max-width:138px;
  font-size:14px;
  line-height:1.08;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow-wrap:anywhere;
  word-break:normal;
}

.client-summary-inline-status {
  position:static;
  display:inline-flex;
  width:max-content;
  justify-self:start;
  transform:scale(.88);
  transform-origin:left center;
  pointer-events:none;
}

.client-summary-bottomline {
  display:flex;
  align-items:center;
  min-height:22px;
  padding-left:36px;
}

.client-summary-logo,
.workspace-client-logo {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid rgba(91,168,212,.24);
  border-radius:14px;
  background:linear-gradient(135deg,#fff,rgba(238,247,252,.92));
  color:var(--navy);
  font-weight:900;
  box-shadow:0 10px 22px rgba(18,40,64,.08);
}

.client-summary-logo {
  width:28px;
  height:28px;
  border-radius:999px;
  font-size:10px;
  box-shadow:0 6px 14px rgba(18,40,64,.08);
}

.workspace-client-logo {
  width:48px;
  height:48px;
  border-radius:16px;
  font-size:13px;
}

.client-summary-logo img,
.workspace-client-logo img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  background:#fff;
}

.client-summary-logo img {
  padding:3px;
}

.workspace-title-lockup {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.workspace-title-lockup > span:last-child {
  display:grid;
  gap:2px;
}

.workspace-title-lockup small {
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.client-summary-status {
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:block;
  pointer-events:none;
}

.client-notification-badge {
  min-width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0 7px;
  border-radius:999px;
  background:var(--green);
  color:#073A19;
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 0 4px rgba(37,211,102,.14), 0 10px 24px rgba(37,211,102,.24);
  animation:clientBadgePulse 1.8s ease-in-out infinite;
  pointer-events:auto;
}

.client-accordion summary h3 {
  color:var(--navy);
  font-size:13.5px;
  line-height:1.08;
}

.client-summary-main [data-client-last-update] {
  display:block;
  overflow:hidden;
  max-width:132px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.16;
  white-space:normal;
}

.client-accordion-body {
  display:grid;
  gap:10px;
  padding:0 14px 14px;
}

.client-accordion:not(.is-current) .client-accordion-body {
  display:none;
}

.client-card-hint {
  border:1px solid rgba(91,168,212,.20);
  border-radius:14px;
  padding:10px 12px;
  color:var(--muted);
  background:rgba(91,168,212,.08);
  font-size:12px;
}

.client-card-message {
  display:grid;
  gap:3px;
  border-color:rgba(37,211,102,.26);
  background:linear-gradient(135deg,rgba(37,211,102,.14),rgba(91,168,212,.10));
  color:var(--navy);
}

.client-card-message strong {
  color:#167A3B;
  font-size:12px;
}

.client-card-message span {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.client-card-quiet {
  color:var(--muted);
  background:rgba(18,40,64,.045);
  border-color:rgba(18,40,64,.08);
}

.client-link {
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:11px;
  color:var(--muted);
  word-break:break-all;
  border-radius:12px;
  background:rgba(18,40,64,.055);
  padding:9px 10px;
}

.tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.tab {
  border:0;
  border-radius:999px;
  padding:10px 14px;
  background:rgba(18,40,64,.07);
  color:var(--navy);
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.tab.active { background:var(--navy); color:#fff; }
.admin-panel { display:none; }
.admin-panel.active { display:block; }

#workspaceCard > .card-body {
  min-height:0;
}

.admin-panel.active:not(#tab-key-work) {
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
}

.admin-panel.active:not(#tab-key-work)::-webkit-scrollbar {
  width:7px;
}

.admin-panel.active:not(#tab-key-work)::-webkit-scrollbar-thumb {
  background:rgba(91,168,212,.34);
  border-radius:999px;
}

.key-work-admin-description-preview {
  max-height:160px;
  overflow:auto;
  border:1px solid rgba(91,168,212,.18);
  background:rgba(238,247,252,.54);
}

.description-link-chips {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:-4px;
}

.description-link-chips.is-empty {
  display:none;
}

.description-link-chips a {
  display:inline-grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  max-width:min(100%, 340px);
  padding:7px 9px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(238,247,252,.88),rgba(255,255,255,.96));
  color:var(--navy);
  text-decoration:none;
  box-shadow:0 8px 18px rgba(18,40,64,.05);
}

.description-link-chips a span {
  padding:3px 7px;
  border-radius:999px;
  background:rgba(91,168,212,.14);
  color:var(--navy);
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
}

.description-link-chips a small {
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.attachment-chip-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.attachment-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:min(100%, 420px);
  padding:7px 9px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(238,247,252,.92),rgba(255,255,255,.98));
  box-shadow:0 10px 22px rgba(18,40,64,.06);
}

.attachment-chip > a:first-child {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-width:0;
  color:var(--navy);
  text-decoration:none;
}

.attachment-chip strong,
.attachment-chip small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.attachment-chip strong {
  font-size:12px;
  font-weight:1000;
}

.attachment-chip small {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.attachment-chip-download {
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--navy);
  font-size:11px;
  font-weight:1000;
  text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(91,168,212,.22);
}

.attachment-chip-download .button-icon {
  width:14px;
  height:14px;
}

.tabs::after {
  content:"";
  flex:0 0 24px;
}

.add-item-panel {
  background:rgba(255,255,255,.72);
  border:1px solid rgba(91,168,212,.20);
  padding:4px;
}

.checklist-action-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}

.checklist-action-grid .detail-group {
  margin-top:16px;
}

.checklist-action-grid .detail-group[open] {
  grid-column:1 / -1;
}

.checklist-action-grid .detail-group[open] ~ .detail-group:not([open]),
.checklist-action-grid .detail-group:not([open]):has(~ .detail-group[open]) {
  display:none;
}

.add-item-panel summary {
  font-weight:900;
  color:var(--navy);
}

.add-item-form {
  margin-top:16px;
  padding:0 14px 16px;
}

.item-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
  align-items:end;
}

.progress-editor {
  flex:1 1 100%;
  display:grid;
  gap:8px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:16px;
  padding:12px;
  background:rgba(91,168,212,.08);
}

.status-editor {
  flex:0 1 260px;
  max-width:310px;
  display:grid;
  gap:7px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:16px;
  padding:12px;
  background:rgba(91,168,212,.08);
}

.status-editor span {
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.visibility-editor {
  flex-basis:260px;
}

.compact-delete {
  flex:0 0 auto;
  min-width:116px;
  min-height:44px;
  padding-inline:16px;
  border-radius:16px;
}

.compact-delete .button-icon {
  width:16px;
  height:16px;
}

.field-mode-helper {
  display:none;
  border:1px dashed rgba(91,168,212,.36);
  border-radius:16px;
  padding:12px 14px;
  color:var(--muted);
  background:rgba(91,168,212,.08);
  font-size:13px;
}

.is-soft-hidden {
  display:none;
}

.progress-editor-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--navy);
  font-size:12px;
}

.progress-editor-top span {
  color:var(--blue);
  font-weight:900;
}

.notice {
  border:1px solid rgba(91,168,212,.22);
  background:rgba(91,168,212,.10);
  border-radius:18px;
  padding:16px;
  color:var(--muted);
  font-size:14px;
}

.empty {
  border:1px dashed rgba(18,40,64,.20);
  border-radius:18px;
  padding:18px;
  color:var(--muted);
  background:rgba(255,255,255,.58);
}

.footer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:35;
  padding:24px 0;
  background:var(--navy);
  color:rgba(255,255,255,.55);
  font-size:12px;
  box-shadow:0 -12px 34px rgba(18,40,64,.18);
}

.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.footer a { color:var(--blue); text-decoration:none; font-weight:800; }

.copy-box {
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:12px;
  white-space:pre-wrap;
  word-break:break-word;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#0E1F33;
  color:#EAF6FF;
}

.support-float {
  position:fixed;
  right:22px;
  bottom:82px;
  z-index:45;
  display:grid;
  grid-template-columns:26px 1fr;
  gap:0 10px;
  align-items:center;
  min-width:138px;
  padding:13px 16px;
  border-radius:999px;
  color:#073A19;
  background:var(--green);
  box-shadow:0 16px 40px rgba(37,211,102,.34);
  text-decoration:none;
  animation:pulseSupport 2.8s ease-in-out infinite;
}

.support-float svg {
  width:24px;
  height:24px;
  grid-row:1 / span 2;
}

.support-float span {
  font-size:10px;
  font-weight:900;
  letter-spacing:1.7px;
  text-transform:uppercase;
  opacity:.72;
}

.support-float strong {
  font-size:14px;
  line-height:1.1;
}

.key-work-floating-notice {
  position:fixed;
  right:22px;
  bottom:154px;
  z-index:58;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
  align-items:center;
  width:min(318px, calc(100vw - 44px));
  padding:13px 15px;
  border:1px solid rgba(91,168,212,.26);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  color:var(--navy);
  box-shadow:0 20px 48px rgba(18,40,64,.20);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px) scale(.98);
  transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
}

.key-work-floating-notice.show {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.key-work-floating-notice:hover {
  transform:translateY(-2px) scale(1);
  box-shadow:0 24px 56px rgba(18,40,64,.24);
}

.key-work-floating-notice-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  box-shadow:0 12px 26px rgba(91,168,212,.26);
}

.key-work-floating-notice-icon svg {
  width:20px;
  height:20px;
}

.key-work-floating-notice strong,
.key-work-floating-notice small {
  display:block;
  text-align:left;
}

.key-work-floating-notice strong {
  font-size:13px;
  line-height:1.15;
}

.key-work-floating-notice small {
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}

.back-to-top {
  position:fixed;
  left:50%;
  bottom:86px;
  z-index:44;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  color:#fff;
  background:rgba(18,40,64,.92);
  box-shadow:0 16px 40px rgba(18,40,64,.24);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, 14px);
  transition:opacity .22s ease, transform .22s ease, background .22s ease;
}

.back-to-top.show {
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0);
}

.back-to-top:hover {
  background:var(--blue);
  color:#083047;
}

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  place-items:center;
  padding:22px;
  background:rgba(18,40,64,.48);
  backdrop-filter:blur(8px);
}

.modal-backdrop.show {
  display:grid;
}

body.modal-scroll-locked {
  overflow:hidden;
}

.modal-card {
  width:min(520px,100%);
  border:1px solid rgba(255,255,255,.45);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 28px 70px rgba(18,40,64,.28);
  padding:24px;
  animation:riseIn .22s ease both;
}

.modal-card-wide {
  width:min(980px,100%);
}

.team-manager {
  display:grid;
  gap:18px;
}

.team-user-list {
  display:grid;
  gap:12px;
}

.integration-status-card {
  display:grid;
  gap:6px;
  margin-bottom:18px;
  padding:16px 18px;
  border:1px solid rgba(91,168,212,.26);
  border-radius:22px;
  background:linear-gradient(135deg,#fff,rgba(238,247,252,.9));
  box-shadow:var(--soft-shadow);
}

.integration-status-card.has-error {
  border-color:rgba(225, 82, 82, .34);
  background:linear-gradient(135deg,#fff7f7,rgba(255,255,255,.96));
}

.integration-alert {
  display:grid;
  gap:4px;
  margin-top:10px;
  padding:12px 14px;
  border-radius:16px;
  background:#fff1f1;
  border:1px solid rgba(225,82,82,.24);
  color:#8f2727;
}

.integration-alert span,
.integration-alert small {
  color:#9e4a4a;
}

.integration-ok {
  display:inline-flex;
  width:max-content;
  margin-top:8px;
  padding:7px 10px;
  border-radius:999px;
  background:#e8f8ef;
  color:#207849;
  font-size:.82rem;
  font-weight:800;
}

.inline-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.access-actions-card,
.client-assignment-card {
  align-items:flex-start;
}

.assignment-manager {
  display:grid;
  gap:12px;
  width:100%;
}

.assignment-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:12px;
  align-items:stretch;
}

.assignment-row {
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  min-height:118px;
  padding:16px 14px 14px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:20px;
  background:#fff;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.assignment-main {
  position:absolute;
  inset:0;
  cursor:pointer;
}

.assignment-row:hover {
  transform:translateY(-2px);
  border-color:rgba(91,168,212,.46);
  box-shadow:0 14px 28px rgba(18,53,83,.1);
}

.assignment-row.is-assigned {
  border-color:rgba(91,168,212,.65);
  background:linear-gradient(135deg,#fff,rgba(232,247,255,.92));
  box-shadow:0 16px 34px rgba(91,168,212,.16);
}

.assignment-main input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.assignment-check {
  position:absolute;
  right:12px;
  top:12px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(91,168,212,.32);
  background:#f2f7fb;
  color:transparent;
  font-weight:900;
  z-index:1;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.assignment-row.is-assigned .assignment-check {
  background:#5ba8d4;
  border-color:#5ba8d4;
  color:#fff;
  transform:scale(1.04);
}

.assignment-row.is-primary {
  border-color:rgba(41,174,96,.58);
  background:
    radial-gradient(circle at 100% 0%, rgba(41,174,96,.14), transparent 8rem),
    linear-gradient(135deg,#fff,rgba(232,247,255,.92));
}

.assignment-copy {
  min-width:0;
  padding-right:28px;
}

.assignment-copy strong {
  display:block;
  font-size:.9rem;
  line-height:1.2;
  word-break:break-word;
}

.assignment-row small {
  display:block;
  color:var(--muted);
  margin-top:2px;
  font-size:.72rem;
  line-height:1.35;
  word-break:break-word;
}

.assignment-primary-toggle {
  position:relative;
  z-index:2;
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(238,247,252,.86);
  color:var(--navy);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.assignment-primary-toggle input {
  width:16px;
  height:16px;
  accent-color:var(--blue);
}

.assignment-primary-toggle:has(input:checked) {
  background:rgba(41,174,96,.14);
  color:#17683b;
}

.assignment-primary-toggle:has(input:disabled) {
  opacity:.5;
  cursor:not-allowed;
}

.key-work-shell {
  display:grid;
  gap:12px;
}

.key-work-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:20px;
  background:linear-gradient(135deg,#fff,rgba(238,247,252,.78));
}

.key-work-client-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:252px;
  padding:8px 10px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  cursor:pointer;
  box-shadow:0 10px 24px rgba(18,40,64,.06);
}

.key-work-client-toggle.is-visible {
  border-color:rgba(37,211,102,.28);
  background:linear-gradient(135deg,#fff,rgba(37,211,102,.10));
}

.key-work-client-toggle.is-hidden {
  border-color:rgba(214,69,69,.25);
  background:linear-gradient(135deg,#fff,rgba(214,69,69,.08));
}

.key-work-toggle-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.key-work-toggle-status::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 4px currentColor;
  opacity:.78;
}

.key-work-client-toggle.is-visible .key-work-toggle-status {
  background:rgba(37,211,102,.16);
  color:#167A3B;
}

.key-work-client-toggle.is-hidden .key-work-toggle-status {
  background:rgba(214,69,69,.12);
  color:#B12E2E;
}

.key-work-client-toggle.is-visible .key-work-toggle-status::before {
  box-shadow:0 0 0 4px rgba(37,211,102,.16);
}

.key-work-client-toggle.is-hidden .key-work-toggle-status::before {
  box-shadow:0 0 0 4px rgba(214,69,69,.14);
}

.key-work-client-toggle strong,
.key-work-client-toggle small {
  display:block;
}

.key-work-client-toggle strong {
  color:var(--navy);
  font-size:11px;
  font-weight:900;
  line-height:1.15;
}

.key-work-client-toggle small {
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.key-work-client-toggle input {
  width:38px;
  height:22px;
  flex:0 0 auto;
  accent-color:var(--blue);
  cursor:pointer;
}

.key-work-head h3 {
  margin:0;
  color:var(--navy);
  font-size:clamp(21px,2vw,28px);
  line-height:1.08;
  letter-spacing:-.7px;
}

.key-work-head-tools {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.key-work-view-switch {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 28px rgba(18,40,64,.07);
}

.mobile-client-picker-badge {
  display:none;
}

.key-work-view-switch button {
  min-height:34px;
  padding:8px 13px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--navy);
  font-size:12px;
  font-weight:950;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}

.key-work-view-switch button.active {
  background:var(--navy);
  color:#fff;
  box-shadow:0 10px 22px rgba(18,40,64,.16);
}

.key-work-bottom-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  bottom:0;
  z-index:12;
  flex:0 0 auto;
  min-height:58px;
  margin-top:auto;
  padding:8px 2px 2px;
  background:linear-gradient(180deg,rgba(245,250,255,0),rgba(245,250,255,.94) 30%,rgba(245,250,255,.99));
  backdrop-filter:blur(10px);
}

.key-work-help-tooltip {
  display:inline-grid;
  vertical-align:middle;
  margin-left:4px;
}

.key-work-board {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(292px,1fr);
  gap:14px;
  height:520px;
  max-height:58vh;
  overflow-x:auto;
  padding:4px 2px 14px;
  scroll-snap-type:x proximity;
}

.client-key-work-view-shell {
  display:grid;
  gap:14px;
}

.client-key-work-view-shell .key-work-view-switch {
  justify-self:start;
}

.key-work-calendar {
  display:grid;
  gap:8px;
  flex:1 1 auto;
  min-height:0;
  max-height:min(620px, calc(100vh - 320px));
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 12px 12px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.90), rgba(239,249,255,.78));
  box-shadow:0 16px 38px rgba(18,40,64,.08);
}

.key-work-files-panel {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:12px;
  flex:1 1 auto;
  min-height:0;
  height:min(620px, calc(100vh - 320px));
  max-height:min(620px, calc(100vh - 320px));
  overflow:hidden;
  padding:12px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,249,255,.80));
  box-shadow:0 16px 38px rgba(18,40,64,.08);
}

.key-work-files-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 2px 8px;
  border-bottom:1px solid rgba(18,40,64,.08);
}

.key-work-files-summary h4 {
  margin:3px 0 0;
  color:var(--navy);
  font-size:20px;
  line-height:1.05;
  letter-spacing:-.4px;
}

.key-work-files-summary small {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-align:right;
  max-width:360px;
}

.key-work-folder-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

.key-work-file-folder {
  min-width:0;
  border:1px solid rgba(91,168,212,.22);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  overflow:hidden;
}

.key-work-file-folder summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  cursor:pointer;
  list-style:none;
}

.key-work-file-folder summary::-webkit-details-marker {
  display:none;
}

.key-work-file-folder summary strong,
.key-work-file-card strong {
  color:var(--navy);
  font-weight:1000;
}

.key-work-file-folder summary small,
.key-work-file-card small {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.key-work-file-folder summary b {
  min-width:30px;
  height:30px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  color:#0f7d47;
  background:rgba(34,197,94,.15);
  font-size:12px;
}

.key-work-file-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:9px;
  padding:0 12px 12px;
}

.key-work-file-card {
  display:grid;
  grid-template-rows:auto minmax(48px,auto) auto;
  align-content:start;
  gap:10px;
  padding:10px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,250,255,.88));
  box-shadow:0 8px 18px rgba(18,40,64,.05);
}

.key-work-file-preview {
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  min-height:132px;
  border:1px solid rgba(91,168,212,.18);
  border-radius:14px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--blue);
  background:linear-gradient(145deg,rgba(226,243,253,.86),rgba(255,255,255,.98));
  text-decoration:none;
  isolation:isolate;
}

.key-work-file-preview-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  color:#347aa4;
  background:linear-gradient(145deg,rgba(226,243,253,.88),rgba(255,255,255,.98));
}

.key-work-file-preview-fallback svg {
  width:30px;
  height:30px;
}

.key-work-file-preview-fallback b {
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.key-work-file-preview img {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#eef6fb;
  transition:transform .22s ease,filter .22s ease;
}

.key-work-file-preview:hover img {
  transform:scale(1.025);
  filter:saturate(1.04);
}

.key-work-file-play {
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding-left:3px;
  border-radius:999px;
  color:#fff;
  background:rgba(18,40,64,.82);
  box-shadow:0 10px 28px rgba(18,40,64,.24);
  transform:translate(-50%,-50%);
}

.key-work-file-copy {
  min-width:0;
}

.key-work-file-copy strong {
  display:-webkit-box;
  min-height:2.45em;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-height:1.2;
}

.key-work-file-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:7px;
}

.key-work-file-actions .button {
  width:100%;
  min-width:0;
  min-height:38px;
  padding:8px 9px;
  justify-content:center;
}

.key-work-files-empty {
  min-height:180px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
}

.key-work-files-empty strong {
  display:block;
  color:var(--navy);
  font-size:18px;
}

.key-work-calendar-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  min-height:38px;
}

.key-work-calendar-head h4 {
  margin:0;
  color:var(--navy);
  font-size:22px;
  line-height:1;
  letter-spacing:-.03em;
}

.key-work-calendar-controls {
  display:flex;
  align-items:center;
  gap:6px;
}

.key-work-calendar-controls button {
  min-height:32px;
  padding:6px 10px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(18,40,64,.07);
}

.key-work-calendar-weekdays,
.key-work-calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
}

.key-work-calendar-weekdays span {
  color:var(--muted);
  font-size:11px;
  font-weight:1000;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.key-work-calendar-day {
  min-height:118px;
  display:grid;
  align-content:start;
  gap:7px;
  padding:9px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:18px;
  background:rgba(255,255,255,.76);
  overflow:hidden;
}

.key-work-calendar-day.is-muted {
  opacity:.48;
}

.key-work-calendar-day.is-today {
  border-color:rgba(91,168,212,.50);
  box-shadow:inset 0 0 0 1px rgba(91,168,212,.25);
}

.key-work-calendar-date {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(91,168,212,.12);
  color:var(--navy);
  font-size:12px;
  font-weight:1000;
}

.key-work-calendar-items {
  display:grid;
  gap:6px;
  min-width:0;
}

.key-work-calendar-card {
  display:grid;
  gap:2px;
  width:100%;
  padding:7px 8px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:12px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(18,40,64,.06);
}

.key-work-calendar-card.key-work-status-scheduled {
  border-color:rgba(37,211,102,.26);
  background:linear-gradient(135deg,rgba(226,255,238,.95),rgba(255,255,255,.98));
}

.key-work-calendar-card.key-work-status-scheduled span {
  color:#168943;
}

.key-work-calendar-card.key-work-status-completed {
  border-color:rgba(105,124,145,.18);
  background:linear-gradient(135deg,rgba(238,242,246,.96),rgba(255,255,255,.98));
  opacity:.82;
}

.key-work-calendar-card.key-work-status-completed strong,
.key-work-calendar-card.key-work-status-completed span {
  color:#697c91;
}

.key-work-calendar-card strong,
.key-work-calendar-card span {
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.key-work-calendar-card strong {
  color:var(--navy);
  font-size:11px;
  line-height:1.15;
}

.key-work-calendar-card span {
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}

.media-links-hidden-input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}

.media-links-list {
  display:grid;
  gap:7px;
  margin-top:10px;
}

.media-links-list a {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  padding:8px 10px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:14px;
  background:rgba(255,255,255,.78);
  color:var(--navy);
  text-decoration:none;
  box-shadow:0 8px 18px rgba(18,40,64,.05);
}

.media-links-list a span {
  padding:4px 8px;
  border-radius:999px;
  background:rgba(91,168,212,.13);
  color:var(--navy);
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
}

.media-links-list a small {
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.key-work-column {
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
  max-height:100%;
  padding:12px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:22px;
  background:rgba(255,255,255,.68);
  box-shadow:0 14px 34px rgba(18,40,64,.07);
  scroll-snap-align:start;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.key-work-column.is-over {
  border-color:rgba(91,168,212,.62);
  background:rgba(232,247,255,.82);
  box-shadow:0 18px 40px rgba(91,168,212,.16);
}

.key-work-column-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  margin-bottom:10px;
}

.key-work-column-head strong {
  color:var(--navy);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.key-work-column-head span {
  display:grid;
  place-items:center;
  min-width:28px;
  height:28px;
  border-radius:999px;
  background:#eef7fc;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
}

.key-work-status-not-started .key-work-column-head span { background:rgba(214,69,69,.11); color:#a82e2e; }
.key-work-status-creation .key-work-column-head span { background:rgba(244,180,0,.15); color:#9b6b00; }
.key-work-status-for-approval .key-work-column-head span { background:rgba(183,126,104,.16); color:#8f5946; }
.key-work-status-approved .key-work-column-head span { background:rgba(172,92,202,.14); color:#8841a5; }
.key-work-status-scheduled .key-work-column-head span { background:rgba(91,90,232,.13); color:#4544c0; }
.key-work-status-completed .key-work-column-head span { background:rgba(41,174,96,.14); color:#17683b; }

.key-work-column-body {
  display:grid;
  align-content:start;
  flex:1;
  gap:10px;
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
}

.key-work-column-body::-webkit-scrollbar {
  width:7px;
}

.key-work-column-body::-webkit-scrollbar-thumb {
  background:rgba(91,168,212,.34);
  border-radius:999px;
}

@media (min-width:761px) {
  body {
    padding-bottom:82px;
  }

  article[id],
  .card[id],
  .workroom-panel[id] {
    scroll-margin-top:72px;
  }

  .wrap {
    width:min(1180px, calc(100% - 24px));
  }

  .header-inner {
    min-height:54px;
    gap:12px;
  }

  .brand {
    gap:9px;
  }

  .brand img {
    width:38px;
    height:38px;
    border-radius:10px;
    padding:5px;
    box-shadow:0 8px 18px rgba(91,168,212,.18);
  }

  .brand small {
    font-size:7px;
    letter-spacing:1.4px;
  }

  .brand strong {
    font-size:12px;
    line-height:1.08;
  }

  .admin-refresh-button {
    min-height:34px;
    padding:7px 12px;
    font-size:11px;
  }

  .profile-chip {
    min-height:38px;
    padding:5px 9px;
    gap:8px;
  }

  .profile-chip .profile-avatar,
  .top-admin-trigger .profile-avatar {
    width:28px;
    height:28px;
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
  }

  .profile-chip small {
    font-size:8px;
    line-height:1;
  }

  .profile-chip strong {
    font-size:10px;
    line-height:1.05;
  }

  .accent {
    height:3px;
  }

  .admin-shell {
    grid-template-columns:260px minmax(0,1fr);
    gap:12px;
    padding:12px 0 28px;
  }

  .section {
    margin-top:10px;
  }

  .card {
    border-radius:18px;
  }

  .card-head {
    padding:11px 16px;
    gap:10px;
  }

  .card-head .eyebrow {
    font-size:8px;
    letter-spacing:1.8px;
    line-height:1;
  }

  .card-head h2 {
    font-size:22px;
    line-height:1.08;
  }

  .card-body {
    padding:12px 16px 16px;
  }

  .side-actions {
    gap:7px;
  }

  #loadClientsBtn {
    display:none !important;
  }

  .button {
    min-height:36px;
    padding:8px 14px;
    font-size:11px;
  }

  .client-list {
    gap:8px;
    margin-top:10px;
  }

  .client-accordion-list {
    max-height:calc(100vh - 226px);
  }

  .client-accordion {
    border-radius:16px;
  }

  .client-accordion summary {
    gap:8px;
    padding:10px 34px 10px 10px;
  }

  .client-summary-logo {
    width:24px;
    height:24px;
  }

  .client-summary-topline h3 {
    max-width:172px;
    font-size:12px;
    line-height:1.05;
  }

  .client-summary-bottomline {
    min-height:18px;
    padding-left:32px;
  }

  .client-summary-bottomline span,
  .client-accordion summary small {
    font-size:9px;
    line-height:1.18;
  }

  .client-summary-inline-status,
  .client-summary-status {
    transform:scale(.74);
    transform-origin:left center;
  }

  .client-card-quiet {
    padding:7px 8px;
    font-size:10px;
    line-height:1.25;
  }

  #workspaceCard > .card-head {
    padding:10px 16px;
    align-items:center;
  }

  .workspace-title-lockup {
    gap:9px;
  }

  .workspace-client-logo {
    width:34px;
    height:34px;
    border-radius:12px;
  }

  #workspaceTitle,
  .workspace-title-lockup h1,
  .workspace-title-lockup h2 {
    font-size:24px;
    line-height:1.02;
  }

  .workspace-title-lockup small {
    font-size:9px;
    line-height:1;
  }

  .workspace-actions {
    gap:8px;
  }

  .workspace-chat-button {
    width:38px;
    height:38px;
  }

  .tabs {
    gap:6px;
    margin-bottom:9px;
    padding-bottom:0;
  }

  .tabs::after {
    flex-basis:10px;
  }

  .tab {
    min-height:30px;
    padding:7px 11px;
    font-size:10px;
  }

  .key-work-shell {
    gap:8px;
  }

  .key-work-head {
    padding:8px 10px;
    border-radius:16px;
    gap:10px;
  }

  .key-work-head h3 {
    font-size:24px;
    line-height:1;
    letter-spacing:-.55px;
  }

  .key-work-client-toggle {
    min-width:220px;
    min-height:42px;
    padding:6px 8px;
    border-radius:14px;
    gap:8px;
  }

  .key-work-client-toggle strong {
    font-size:10px;
    line-height:1.05;
  }

  .key-work-client-toggle small {
    display:none;
  }

  .key-work-client-toggle input {
    width:30px;
    height:18px;
  }

  .key-work-toggle-status {
    min-height:20px;
    padding:3px 7px;
    font-size:8px;
  }

  .key-work-toggle-status::before {
    width:6px;
    height:6px;
  }

  .key-work-board {
    grid-auto-columns:minmax(292px, 310px);
    gap:10px;
    height:clamp(360px, calc(100vh - 300px), 440px);
    max-height:none;
    padding:3px 2px 10px;
    overscroll-behavior-inline:contain;
  }

  .key-work-column {
    padding:9px;
    border-radius:18px;
  }

  .key-work-column-head {
    min-height:30px;
    margin-bottom:7px;
    gap:8px;
  }

  .key-work-column-head strong {
    font-size:11px;
    line-height:1.05;
  }

  .key-work-column-head span {
    min-width:24px;
    height:24px;
    font-size:10px;
  }

  .key-work-column-body {
    gap:8px;
    padding-right:3px;
  }

  .key-work-card {
    gap:7px;
    padding:10px;
    border-radius:15px;
  }

  .key-work-card h4 {
    font-size:12px;
    line-height:1.12;
  }

  .key-work-type-badge,
  .key-work-media-badge,
  .key-work-priority-badge {
    min-height:19px;
    padding:3px 7px;
    font-size:8px;
    letter-spacing:.035em;
  }

  .key-work-task-id,
  .key-work-assignee small {
    font-size:9px;
  }

  .key-work-add-button {
    min-height:32px;
    padding:7px 12px;
    font-size:10px;
  }
}

.key-work-add-row {
  display:flex;
  justify-content:flex-start;
  padding:0 2px;
}

.key-work-add-button {
  white-space:nowrap;
  min-height:40px;
  padding:10px 16px;
}

.key-work-type-badge {
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(91,168,212,.12);
  color:#2d719b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.key-work-card-badge-row {
  display:grid;
  align-items:start;
  gap:6px;
  max-width:calc(100% - 38px);
}

.key-work-card-type-line,
.key-work-card-chip-line {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  max-width:100%;
}

.key-work-card.has-unread-key-work-comment .key-work-card-badge-row {
  margin-top:26px;
  max-width:100%;
}

.key-work-empty {
  display:grid;
  place-items:center;
  min-height:86px;
  border:1px dashed rgba(18,40,64,.14);
  border-radius:18px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.key-work-card {
  position:relative;
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid rgba(18,40,64,.10);
  border-left:5px solid var(--blue);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 28px rgba(18,40,64,.08);
  cursor:pointer;
  touch-action:none;
  user-select:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.key-work-pointer-dragging,
.key-work-pointer-dragging * {
  cursor:grabbing !important;
}

body.key-work-pointer-dragging {
  overflow:hidden;
  overscroll-behavior:contain;
}

.key-work-drag-ghost {
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  pointer-events:none;
  opacity:.92;
  transform-origin:center;
  box-shadow:0 24px 55px rgba(18,40,64,.22);
  will-change:transform;
}

.key-work-task-comment-badge {
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:24px;
  padding:4px 8px;
  border:1px solid rgba(41,174,96,.24);
  border-radius:999px;
  background:rgba(41,174,96,.12);
  color:#17683b;
  font-size:11px;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(18,40,64,.08);
}

.key-work-card:hover {
  transform:translateY(-2px);
  border-color:rgba(91,168,212,.34);
  box-shadow:0 16px 34px rgba(18,40,64,.12);
}

.key-work-card.is-dragging {
  opacity:.62;
  transform:rotate(-1deg) scale(.99);
}

.key-work-card h4 {
  margin:0;
  color:var(--navy);
  font-size:14px;
  line-height:1.25;
}

.key-work-task-id {
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:-3px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(18,40,64,.055);
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.03em;
  line-height:1.1;
}

.key-work-card p {
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.key-work-card-first-comment {
  padding:8px 9px;
  border:1px solid rgba(91,168,212,.16);
  border-radius:12px;
  background:rgba(238,247,252,.62);
}

.key-work-card-first-comment strong {
  color:var(--navy);
  font-weight:1000;
}

.key-work-media-badges {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:0;
}

.key-work-card-chip-line .key-work-media-badges {
  display:contents;
}

.key-work-media-badge,
.key-work-media-meta-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:5px 9px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:999px;
  background:rgba(232,247,255,.72);
  color:#245f87;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.01em;
}

.key-work-media-meta-badge {
  min-height:24px;
  padding:4px 8px;
  font-size:11px;
}

.media-icon {
  position:relative;
  width:14px;
  height:14px;
  display:inline-grid;
  place-items:center;
  flex:0 0 14px;
  border-radius:5px;
  background:currentColor;
}

.media-icon::after {
  content:"";
  position:absolute;
  display:block;
}

.media-icon-horizontal-video::after,
.media-icon-vertical-video::after {
  left:5px;
  top:3px;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid #fff;
}

.media-icon-vertical-video {
  width:11px;
  border-radius:6px;
}

.media-icon-image::after {
  left:3px;
  bottom:3px;
  width:8px;
  height:5px;
  border-radius:1px;
  background:#fff;
  clip-path:polygon(0 100%, 34% 42%, 54% 70%, 73% 34%, 100% 100%);
}

.media-icon-carousel {
  background:transparent;
  border:2px solid currentColor;
}

.media-icon-carousel::before {
  content:"";
  position:absolute;
  right:-4px;
  top:2px;
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-radius:4px;
  background:rgba(255,255,255,.82);
}

.media-badge-carousel {
  background:rgba(37,211,102,.12);
  border-color:rgba(37,211,102,.24);
  color:#148C43;
}

.media-badge-horizontal-video {
  background:rgba(91,168,212,.14);
  border-color:rgba(91,168,212,.28);
  color:#246F9D;
}

.media-badge-vertical-video {
  background:rgba(130,87,229,.13);
  border-color:rgba(130,87,229,.24);
  color:#7B4BE0;
}

.media-badge-image {
  background:rgba(91,168,212,.12);
  border-color:rgba(91,168,212,.24);
  color:#246F9D;
}

.key-work-priority-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:5px 9px;
  border:1px solid rgba(18,40,64,.10);
  border-radius:999px;
  background:#f2f7fb;
  color:var(--muted);
  font-size:10px;
  font-weight:1000;
}

.priority-icon {
  position:relative;
  width:14px;
  height:14px;
  display:inline-grid;
  place-items:center;
  flex:0 0 14px;
  color:currentColor;
}

.priority-icon-none::before {
  content:"";
  width:8px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}

.priority-icon-normal::before {
  content:"";
  position:absolute;
  left:3px;
  top:2px;
  width:2px;
  height:11px;
  border-radius:999px;
  background:currentColor;
}

.priority-icon-normal::after {
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:8px;
  height:7px;
  border-radius:2px 4px 4px 2px;
  background:currentColor;
  clip-path:polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
}

.priority-icon-high::before {
  content:"";
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:13px solid currentColor;
}

.priority-icon-high::after {
  content:"!";
  position:absolute;
  top:3px;
  left:0;
  right:0;
  color:#fff;
  font-size:8px;
  font-weight:1000;
  line-height:1;
  text-align:center;
}

.priority-icon-urgent::before {
  content:"";
  width:12px;
  height:14px;
  border-radius:9px 9px 10px 10px;
  background:currentColor;
  clip-path:polygon(52% 0, 78% 31%, 69% 46%, 91% 65%, 76% 100%, 25% 100%, 9% 65%, 31% 45%, 25% 27%);
}

.priority-icon-urgent::after {
  content:"";
  position:absolute;
  bottom:2px;
  width:5px;
  height:7px;
  border-radius:999px;
  background:#fff;
  opacity:.9;
}

.priority-badge-none {
  background:rgba(184,196,207,.16);
  border-color:rgba(184,196,207,.28);
  color:#66788a;
}

.priority-badge-normal {
  background:rgba(91,168,212,.14);
  border-color:rgba(91,168,212,.28);
  color:#2d719b;
}

.priority-badge-high {
  background:rgba(244,180,0,.16);
  border-color:rgba(244,180,0,.30);
  color:#9a6800;
}

.priority-badge-urgent {
  background:rgba(214,69,69,.13);
  border-color:rgba(214,69,69,.26);
  color:#b12e2e;
}

.priority-none { border-left-color:#b8c4cf; }
.priority-normal { border-left-color:#5ba8d4; }
.priority-high { border-left-color:#f4b400; }
.priority-urgent { border-left-color:#d64545; }

.key-work-card.has-golden-approval {
  border-color:rgba(215,166,45,.46);
  border-left-color:#d7a62d;
  background:linear-gradient(135deg,#fff 0%,#fff9df 100%);
  box-shadow:0 16px 38px rgba(215,166,45,.16), 0 10px 28px rgba(18,40,64,.07);
}

.golden-approval-chip {
  position:static;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  padding:4px 9px;
  border:1px solid rgba(215,166,45,.40);
  border-radius:999px;
  background:linear-gradient(135deg,#fff8d7,#ffd66b);
  color:#704900;
  font-size:10px;
  font-weight:1000;
  box-shadow:0 10px 22px rgba(215,166,45,.18);
}

.key-work-card.has-golden-approval.has-unread-key-work-comment .golden-approval-chip {
  right:auto;
}

.golden-approval-chip::before,
.golden-approval-mini::before,
.approval-history-type::before {
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:999px;
  background:#d7a62d;
  box-shadow:0 0 0 4px rgba(255,214,107,.24);
}

.key-work-card-meta,
.key-work-detail-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.key-work-card-meta span,
.key-work-detail-meta > span,
.key-work-detail-meta > .key-work-media-meta-badge,
.key-work-detail-meta > .key-work-assignee-mini {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:#f2f7fb;
}

.key-work-assignee-mini {
  max-width:240px;
}

.key-work-assignee-mini .author-avatar {
  width:22px;
  height:22px;
  flex:0 0 22px;
  font-size:9px;
  box-shadow:0 0 0 1px rgba(18,40,64,.08);
}

.key-work-assignee-mini > span:last-child {
  display:grid;
  min-width:0;
  gap:0;
}

.key-work-assignee-mini strong,
.key-work-assignee-mini small {
  display:block;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.05;
}

.key-work-assignee-mini strong {
  color:var(--navy);
  font-size:11px;
  font-weight:1000;
}

.key-work-assignee-mini small {
  margin-top:1px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
}

.mini-icon {
  width:14px;
  height:14px;
  flex:0 0 auto;
}

.key-work-assignee {
  display:flex;
  align-items:center;
  gap:8px;
}

.key-work-assignee .author-avatar {
  width:26px;
  height:26px;
  font-size:10px;
}

.key-work-assignee small {
  color:var(--navy);
  font-size:11px;
  font-weight:900;
}

.key-work-assignee.is-agency-default small {
  font-size:11px;
}

.key-work-assignee.is-agency-default .author-avatar {
  background:#fff;
  box-shadow:0 0 0 1px rgba(18,40,64,.08), 0 8px 18px rgba(18,40,64,.10);
}

.key-work-modal-card {
  position:relative;
  max-height:88vh;
  overflow:hidden;
  overflow-x:hidden;
  border-radius:24px;
  scrollbar-gutter:stable;
  padding:0;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,rgba(91,168,212,.45),rgba(18,40,64,.16)) border-box;
}

.key-work-admin-task-modal {
  width:min(1240px,calc(100vw - 44px));
}

.key-work-client-task-modal {
  width:min(1180px,calc(100vw - 44px));
}

.key-work-modal-main {
  display:grid;
  grid-template-columns:1fr;
  height:min(820px,88vh);
  min-height:0;
}

.key-work-admin-task-modal.has-comment-rail .key-work-modal-main {
  grid-template-columns:minmax(0,1fr) minmax(300px,340px);
}

.key-work-client-task-modal .key-work-modal-main {
  grid-template-columns:minmax(0,1fr) minmax(310px,350px);
}

.key-work-task-form {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
}

.key-work-form-scroll,
.key-work-client-content-scroll {
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:24px 24px 8px;
  scrollbar-gutter:stable;
}

.key-work-modal-card .modal-head {
  margin:0 0 14px;
  padding:0 56px 6px 0;
  border-bottom:1px solid rgba(18,40,64,.06);
}

.key-work-context-line {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
  margin-bottom:4px;
}

.key-work-client-context {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:min(260px, 100%);
  padding:4px 9px 4px 5px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(238,247,252,.92),rgba(255,255,255,.96));
  color:var(--navy);
  font-size:11px;
  font-weight:1000;
  line-height:1;
  box-shadow:0 10px 24px rgba(18,40,64,.08);
}

.key-work-client-context span:last-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.key-work-context-logo {
  width:24px;
  height:24px;
  min-width:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  color:var(--navy);
  font-size:9px;
  font-weight:1000;
  box-shadow:0 0 0 1px rgba(18,40,64,.08);
}

.key-work-context-logo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.update-response-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
}

.update-response-actions .button {
  flex:1 1 180px;
}

.key-work-modal-card .key-work-floating-close {
  position:absolute;
  top:22px;
  right:22px;
  z-index:20;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.82);
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 42px rgba(18,40,64,.24);
  backdrop-filter:blur(12px);
}

.key-work-modal-card .key-work-floating-close:hover {
  transform:translateY(-1px);
  box-shadow:0 22px 52px rgba(18,40,64,.28);
}

@media (max-width:760px) {
  .key-work-modal-card .key-work-floating-close {
    top:8px;
    right:8px;
    width:34px;
    height:34px;
    font-size:20px;
    z-index:95;
    box-shadow:0 12px 28px rgba(18,40,64,.20);
  }
}

.key-work-form-scroll::-webkit-scrollbar,
.key-work-client-content-scroll::-webkit-scrollbar,
.key-work-comment-list::-webkit-scrollbar {
  width:10px;
}

.key-work-form-scroll::-webkit-scrollbar-track,
.key-work-client-content-scroll::-webkit-scrollbar-track,
.key-work-comment-list::-webkit-scrollbar-track {
  margin:18px 0;
  background:rgba(18,40,64,.05);
  border-radius:999px;
}

.key-work-form-scroll::-webkit-scrollbar-thumb,
.key-work-client-content-scroll::-webkit-scrollbar-thumb,
.key-work-comment-list::-webkit-scrollbar-thumb {
  border:2px solid rgba(255,255,255,.96);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(91,168,212,.72),rgba(18,40,64,.35));
}

.key-work-modal-head {
  grid-column:1 / -1;
  align-items:center;
}

.key-work-modal-title-block {
  min-width:0;
}

.key-work-modal-head-actions {
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.key-work-title-display {
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  color:var(--navy);
  font:inherit;
  font-size:clamp(25px,3vw,38px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-1.1px;
  text-align:left;
  cursor:text;
}

.key-work-title-display:hover {
  color:#17466b;
}

.key-work-title-edit {
  display:none;
}

.key-work-title-create-field {
  display:grid;
  gap:7px;
  width:min(100%, 520px);
  margin-top:14px;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.key-work-modal-card.is-editing-title .key-work-title-display {
  display:none;
}

.key-work-modal-card.is-editing-title .key-work-title-edit {
  display:grid;
  width:min(680px,100%);
}

.key-work-modal-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  margin-top:0;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(18,40,64,.08);
  background:#f2f7fb;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

button.key-work-modal-status {
  cursor:pointer;
  box-shadow:0 8px 18px rgba(18,40,64,.08);
}

button.key-work-modal-status i {
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  font-style:normal;
  font-size:12px;
  line-height:1;
  transition:transform .18s ease;
}

.key-work-status-menu {
  position:relative;
  display:inline-flex;
  z-index:12;
}

.key-work-status-menu.is-open button.key-work-modal-status i {
  transform:rotate(180deg);
}

.key-work-status-options {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:80;
  display:grid;
  gap:7px;
  width:max-content;
  min-width:190px;
  max-width:min(260px, calc(100vw - 32px));
  padding:10px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 60px rgba(18,40,64,.18);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px) scale(.98);
  transition:opacity .16s ease, transform .16s ease;
}

.key-work-status-menu.is-open .key-work-status-options {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.key-work-status-option {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:999px;
  font:inherit;
  font-size:12px;
  font-weight:900;
  text-align:left;
  cursor:pointer;
}

.key-work-status-option span {
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 5px color-mix(in srgb, currentColor 14%, transparent);
}

.key-work-status-option small {
  margin-left:auto;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.key-work-status-option:hover,
.key-work-status-option.is-current {
  border-color:rgba(91,168,212,.38);
  box-shadow:0 10px 20px rgba(18,40,64,.08);
}

.key-work-modal-status span {
  width:9px;
  height:9px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 5px color-mix(in srgb, currentColor 14%, transparent);
}

.task-comment-contact-card {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding:11px 12px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:16px;
  background:rgba(255,255,255,.72);
}

.task-comment-contact-card .author-avatar {
  width:36px;
  height:36px;
  flex:0 0 36px;
}

.task-comment-contact-card strong {
  display:block;
  color:var(--navy);
  font-size:13px;
  line-height:1.15;
}

.task-comment-contact-card small {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}

.key-work-status-chip-not-started { color:#a82e2e; background:rgba(214,69,69,.09); }
.key-work-status-chip-creation { color:#9b6b00; background:rgba(244,180,0,.12); }
.key-work-status-chip-for-approval { color:#8f5946; background:rgba(183,126,104,.13); }
.key-work-status-chip-approved { color:#8841a5; background:rgba(172,92,202,.12); }
.key-work-status-chip-scheduled { color:#4544c0; background:rgba(91,90,232,.11); }
.key-work-status-chip-completed { color:#17683b; background:rgba(41,174,96,.12); }

@media (max-width:860px), (pointer:coarse) {
  .key-work-card {
    touch-action:manipulation;
  }

  .key-work-status-options {
    top:calc(100% + 6px);
    right:-8px;
    min-width:176px;
    max-width:calc(100vw - 28px);
    padding:8px;
    border-radius:18px;
  }

  .key-work-status-option {
    min-height:36px;
    padding:7px 9px;
    font-size:11px;
  }
}

.key-work-artwork-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 12px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:16px;
  background:rgba(91,168,212,.08);
  color:var(--blue);
  font-size:13px;
  font-weight:900;
}

.key-work-artwork-link a {
  color:inherit;
  text-decoration:none;
}

.key-work-artwork-link a:hover {
  text-decoration:underline;
}

.key-work-media-builder {
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid rgba(91,168,212,.20);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(232,247,255,.64),rgba(255,255,255,.92));
}

.key-work-media-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.key-work-media-head p {
  margin:4px 0 0;
}

.key-work-media-items {
  display:grid;
  gap:12px;
}

.key-work-media-editor {
  display:grid;
  gap:12px;
  padding:12px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 30px rgba(18,40,64,.05);
}

.key-work-media-type-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.media-links-details {
  border:1px solid rgba(91,168,212,.20);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(238,247,252,.70),rgba(255,255,255,.94));
  overflow:hidden;
}

.media-links-details summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:10px 12px;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
}

.media-links-details summary::-webkit-details-marker {
  display:none;
}

.media-links-details summary span {
  font-size:12px;
  font-weight:900;
}

.media-links-details summary small {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-align:right;
}

.media-links-details[open] {
  padding-bottom:12px;
}

.media-links-details[open] .media-links-field {
  padding:0 12px;
}

.media-links-field {
  display:grid;
  gap:7px;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.media-links-field textarea {
  min-height:74px;
  font-size:13px;
}

.key-work-media-link-list {
  display:grid;
  gap:7px;
}

.key-work-media-link-pill {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:14px;
  background:rgba(245,248,251,.86);
}

.key-work-media-link-pill span {
  overflow:hidden;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.key-work-media-link-pill button {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:rgba(214,69,69,.10);
  color:#b12e2e;
  cursor:pointer;
}

.key-work-media-editor-footer {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}

.media-delete-all {
  display:none;
}

.media-thumbnail-field.is-hidden {
  display:none !important;
}

.drive-upload-panel {
  border:1px solid rgba(91,168,212,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(238,247,252,.72),rgba(255,255,255,.92));
  overflow:hidden;
}

.drive-upload-panel summary {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  color:var(--navy);
  cursor:pointer;
  font-size:12px;
  font-weight:1000;
  list-style:none;
}

.drive-upload-panel summary::-webkit-details-marker {
  display:none;
}

.drive-dropzone {
  display:grid;
  place-items:center;
  gap:7px;
  margin:0 12px 12px;
  padding:18px 14px;
  border:1px dashed rgba(91,168,212,.52);
  border-radius:16px;
  background:rgba(255,255,255,.82);
  color:var(--navy);
  text-align:center;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.drive-dropzone.is-dragging {
  border-color:var(--blue);
  background:rgba(91,168,212,.14);
  transform:scale(.995);
}

.drive-dropzone-icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(91,168,212,.16);
  color:var(--blue);
}

.drive-dropzone small {
  max-width:420px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

.drive-upload-loader {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 12px 12px;
  padding:12px;
  border-radius:16px;
  background:rgba(18,40,64,.94);
  color:#fff;
}

.drive-upload-loader[hidden] {
  display:none;
}

.drive-upload-loader small {
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.74);
  font-size:11px;
  font-weight:800;
}

.drive-loader-spinner {
  width:24px;
  height:24px;
  flex:0 0 auto;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.28);
  border-top-color:var(--blue);
  animation:spin .85s linear infinite;
}

.key-work-media-editor:has(.media-type-carousel input:checked) .media-delete-all {
  display:inline-flex;
}

.key-work-media-preview-shell,
.key-work-media-preview-list {
  display:grid;
  gap:14px;
}

.key-work-media-empty {
  padding:14px;
  border:1px dashed rgba(91,168,212,.28);
  border-radius:16px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-align:center;
}

.key-work-media-preview-item {
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(18,40,64,.08);
  border-radius:20px;
  background:linear-gradient(135deg,#f7fbfe,#fff);
  box-shadow:0 16px 36px rgba(18,40,64,.08);
}

.key-work-thumbnail-preview {
  width:min(360px, calc(100% - 24px));
  margin:12px auto 0;
  padding:10px;
  display:grid;
  gap:8px;
  place-items:center;
  border:1px solid rgba(91,168,212,.24);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(235,247,254,.72));
}

.key-work-thumbnail-preview > span {
  justify-self:start;
  color:var(--muted);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.key-work-thumbnail-preview img {
  width:100%;
  max-height:220px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
}

.key-work-thumbnail-preview .media-download-button {
  justify-self:center;
}

@media (min-width:761px) {
  .horizontal-video-preview:has(.key-work-thumbnail-preview),
  .vertical-video-preview:has(.key-work-thumbnail-preview) {
    position:relative;
    display:grid;
    grid-template-columns:170px minmax(0, 1fr);
    align-items:center;
    justify-items:center;
    column-gap:16px;
    row-gap:10px;
    overflow:visible;
    padding:14px;
  }

  .horizontal-video-preview:has(.key-work-thumbnail-preview) {
    width:min(920px, 100%);
  }

  .vertical-video-preview:has(.key-work-thumbnail-preview) {
    width:min(540px, 100%);
  }

  .horizontal-video-preview:has(.key-work-thumbnail-preview) .media-embed-frame,
  .vertical-video-preview:has(.key-work-thumbnail-preview) .media-embed-frame {
    position:relative;
    order:2;
    z-index:1;
  }

  .horizontal-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview,
  .vertical-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview {
    position:relative;
    order:1;
    align-self:center;
    z-index:3;
    width:170px;
    margin:0;
    padding:9px;
    gap:6px;
    border-color:rgba(255,255,255,.68);
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,247,254,.82));
    box-shadow:0 16px 34px rgba(18,40,64,.22);
    backdrop-filter:blur(10px);
  }

  .horizontal-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview img,
  .vertical-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview img {
    max-height:142px;
    border-radius:10px;
  }

  .horizontal-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview > span,
  .vertical-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview > span {
    font-size:9px;
  }

  .horizontal-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview .media-download-button,
  .vertical-video-preview:has(.key-work-thumbnail-preview) .key-work-thumbnail-preview .media-download-button {
    min-height:26px;
    padding:5px 9px;
    font-size:10px;
  }

  .horizontal-video-preview:has(.key-work-thumbnail-preview) .single-media-actions,
  .vertical-video-preview:has(.key-work-thumbnail-preview) .single-media-actions {
    order:3;
    grid-column:1 / -1;
    padding:4px 8px 0;
  }
}

.media-embed {
  width:100%;
  height:100%;
  border:0;
  border-radius:18px;
  background:#0e2031;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  display:block;
  overflow:hidden;
}

.media-embed-frame {
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:18px;
  background:#0e2031;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.media-embed-frame .media-embed {
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  border-radius:0;
  box-shadow:none;
}

.media-native-video {
  object-fit:contain;
  background:#050b12;
}

.media-drive-open-button {
  position:absolute;
  right:10px;
  top:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--navy);
  font-size:11px;
  font-weight:1000;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(5,11,18,.18);
  backdrop-filter:blur(10px);
}

.media-drive-open-button:hover {
  transform:translateY(-1px);
}

.media-embed-horizontal {
  aspect-ratio:16 / 9;
  max-height:360px;
}

.media-embed-frame-horizontal {
  aspect-ratio:16 / 9;
  max-height:360px;
}

.vertical-video-preview {
  width:min(320px,100%);
  justify-self:center;
}

.media-embed-vertical {
  aspect-ratio:9 / 16;
  min-height:420px;
}

.media-embed-frame-vertical {
  aspect-ratio:9 / 16;
  min-height:420px;
}

.image-preview img,
.carousel-preview img {
  display:block;
  width:100%;
  max-height:520px;
  object-fit:contain;
  background:#fff;
}

.image-preview {
  max-width:720px;
  justify-self:center;
}

.carousel-preview {
  display:block;
  width:100%;
}

.carousel-shell {
  position:relative;
  overflow:hidden;
  width:100%;
}

.carousel-track {
  --carousel-index:0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 54px 12px 48px;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:48px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.carousel-track::-webkit-scrollbar {
  display:none;
}

.carousel-track figure {
  position:relative;
  flex:0 0 min(76%, 540px);
  display:grid;
  gap:8px;
  margin:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.carousel-track figcaption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.single-media-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:38px;
  padding:6px 8px 10px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.media-download-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(238,247,252,.94),#fff);
  color:var(--navy);
  font-size:11px;
  font-weight:1000;
  line-height:1;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(18,40,64,.06);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.media-download-button:hover {
  transform:translateY(-1px);
  border-color:rgba(91,168,212,.42);
  box-shadow:0 12px 24px rgba(18,40,64,.10);
}

.media-download-button .mini-icon {
  width:14px;
  height:14px;
}

.client-single-media-actions {
  padding-bottom:12px;
}

.carousel-slide-delete,
.carousel-slide-move {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:0;
  border-radius:999px;
  background:rgba(238,247,252,.92);
  color:var(--navy);
  cursor:pointer;
  font-size:18px;
  font-weight:900;
  transition:transform .16s ease, background .16s ease, opacity .16s ease;
}

.carousel-slide-delete {
  color:#b12e2e;
  background:rgba(214,69,69,.10);
}

.carousel-slide-delete:hover,
.carousel-slide-move:hover {
  transform:translateY(-1px);
  background:#fff;
}

.carousel-slide-delete:disabled,
.carousel-slide-move:disabled {
  opacity:.32;
  cursor:not-allowed;
  transform:none;
}

.carousel-track figcaption span {
  min-width:54px;
}

.carousel-nav {
  position:absolute;
  top:50%;
  z-index:3;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--navy);
  box-shadow:0 14px 34px rgba(18,40,64,.18);
  cursor:pointer;
  font-size:28px;
  font-weight:900;
  line-height:1;
  transform:translateY(-50%);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.carousel-nav:hover {
  background:#fff;
  box-shadow:0 18px 42px rgba(18,40,64,.24);
  transform:translateY(-50%) scale(1.04);
}

.carousel-nav:disabled {
  opacity:.34;
  cursor:not-allowed;
  transform:translateY(-50%);
  box-shadow:0 8px 20px rgba(18,40,64,.10);
}

.carousel-nav-prev {
  left:10px;
}

.carousel-nav-next {
  right:10px;
}

.key-work-media-fallback {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:12px 16px;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.client-media-preview {
  margin:16px 0;
}

.choice-field {
  display:grid;
  gap:8px;
  align-content:start;
}

@media (min-width:761px) {
  .key-work-admin-task-modal .form-grid {
    grid-template-columns:minmax(0,1fr) minmax(300px,0.74fr);
    align-items:start;
  }

  .key-work-admin-task-modal .key-work-assignee-field {
    grid-column:1 / 2;
  }

  .key-work-admin-task-modal .key-work-type-field,
  .key-work-admin-task-modal .key-work-schedule-field {
    grid-column:2 / 3;
    align-self:start;
    padding-left:20px;
    border-left:2px solid rgba(91,168,212,.34);
  }

  .key-work-admin-task-modal .key-work-type-field {
    grid-row:2;
  }

  .key-work-admin-task-modal .key-work-schedule-field {
    grid-row:3;
  }

  .key-work-admin-task-modal .key-work-schedule-field .schedule-picker-shell {
    max-width:340px;
  }
}

.choice-title {
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.key-work-choice-grid,
.key-work-assignee-choice-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.key-work-choice,
.key-work-assignee-choice {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:9px 12px;
  border:1px solid rgba(18,40,64,.10);
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(18,40,64,.06);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.key-work-choice:hover,
.key-work-assignee-choice:hover {
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(18,40,64,.10);
}

.key-work-choice input,
.key-work-assignee-choice input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.choice-icon {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(91,168,212,.14);
  color:var(--blue);
  font-size:13px;
  font-weight:1000;
}

.priority-choice.priority-none .choice-icon { background:rgba(184,196,207,.20); color:#66788a; }
.priority-choice.priority-normal .choice-icon { background:rgba(91,168,212,.16); color:#2d719b; }
.priority-choice.priority-high .choice-icon { background:rgba(244,180,0,.18); color:#a46c00; }
.priority-choice.priority-urgent .choice-icon { background:rgba(214,69,69,.16); color:#b12e2e; }

.task-type-choice.type-general-task .choice-icon { background:rgba(91,168,212,.16); color:#2d719b; }
.task-type-choice.type-social-media .choice-icon { background:rgba(139,92,246,.16); color:#6d3ed6; }
.task-type-choice.type-youtube-video .choice-icon { background:rgba(255,0,0,.13); color:#d71920; }

.key-work-choice:has(input:checked),
.key-work-assignee-choice:has(input:checked) {
  border-color:rgba(91,168,212,.62);
  background:linear-gradient(135deg,#fff,rgba(232,247,255,.92));
  box-shadow:0 0 0 4px rgba(91,168,212,.14), 0 12px 26px rgba(18,40,64,.08);
}

.key-work-assignee-choice {
  min-width:92px;
  padding:8px 10px;
}

.key-work-assignee-choice .author-avatar {
  width:28px;
  height:28px;
  font-size:10px;
  background:#fff;
}

.schedule-picker-shell {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:7px 12px 7px 8px;
  border:1px solid rgba(18,40,64,.10);
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 20px rgba(18,40,64,.06);
}

.schedule-picker-button {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:0;
  border-radius:999px;
  background:rgba(91,168,212,.14);
  color:var(--blue);
  cursor:pointer;
}

.schedule-picker-button .mini-icon {
  width:17px;
  height:17px;
}

.schedule-picker-shell span {
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.schedule-picker-input {
  position:absolute;
  left:8px;
  bottom:0;
  width:32px;
  height:32px;
  opacity:0;
  pointer-events:none;
}

.key-work-modal-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  min-height:76px;
  padding:14px 24px;
  border-top:1px solid rgba(18,40,64,.08);
  background:rgba(255,255,255,.96);
  box-shadow:0 -14px 34px rgba(18,40,64,.08);
  backdrop-filter:blur(12px);
}

.key-work-task-visibility-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:210px;
  min-height:46px;
  padding:7px 10px 7px 12px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(232,247,255,.88),rgba(255,255,255,.95));
  cursor:pointer;
  box-shadow:0 10px 22px rgba(18,40,64,.06);
}

.key-work-task-visibility-toggle strong,
.key-work-task-visibility-toggle small {
  display:block;
}

.key-work-task-visibility-toggle strong {
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}

.key-work-task-visibility-toggle small {
  margin-top:1px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.key-work-task-visibility-toggle input {
  position:relative;
  width:46px;
  height:26px;
  flex:0 0 auto;
  margin:0;
  appearance:none;
  border:1px solid rgba(18,40,64,.12);
  border-radius:999px;
  background:#d8e2eb;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}

.key-work-task-visibility-toggle input::after {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 10px rgba(18,40,64,.18);
  transition:transform .16s ease;
}

.key-work-task-visibility-toggle input:checked {
  border-color:rgba(91,168,212,.55);
  background:var(--blue);
}

.key-work-task-visibility-toggle input:checked::after {
  transform:translateX(20px);
}

.key-work-comments {
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.key-work-comment-rail {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:0;
  margin:0;
  padding:24px 18px 18px;
  border-top:0;
  border-left:1px solid rgba(18,40,64,.08);
  background:linear-gradient(180deg,rgba(232,247,255,.58),rgba(255,255,255,.94));
}

.key-work-comments h3 {
  margin:0 0 12px;
  color:var(--navy);
}

.key-work-comment-list {
  display:grid;
  align-content:start;
  gap:10px;
  min-height:0;
  margin:0 0 14px;
  padding-right:4px;
  overflow-y:auto;
}

.key-work-comment {
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  padding:12px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:16px;
  background:#fff;
}

.key-work-comment.from-client {
  background:linear-gradient(135deg,#fff,rgba(232,247,255,.76));
}

.key-work-comment.is-golden-comment {
  border-color:rgba(215,166,45,.42);
  background:linear-gradient(135deg,#fff,rgba(255,246,205,.86));
  box-shadow:0 12px 30px rgba(215,166,45,.14);
  overflow:visible;
  padding-bottom:34px;
}

.key-work-comment-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.key-work-comment strong,
.key-work-comment small {
  display:block;
}

.key-work-comment strong {
  color:var(--navy);
  font-size:13px;
}

.key-work-comment small {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.key-work-comment p {
  margin:6px 0 0;
  color:var(--text);
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
}

.golden-approval-mini {
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:4px 8px;
  border:1px solid rgba(215,166,45,.34);
  border-radius:999px;
  background:rgba(255,214,107,.18);
  color:#704900;
  font-size:10px;
  font-weight:1000;
}

.golden-comment-gif {
  width:25px;
  height:25px;
  flex:0 0 25px;
  object-fit:contain;
  margin:-6px 0 -4px -2px;
  filter:drop-shadow(0 6px 8px rgba(92,58,0,.18));
  pointer-events:none;
}

.golden-comment-mascot {
  position:absolute;
  left:12px;
  bottom:-14px;
  z-index:2;
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 12px 14px rgba(92,58,0,.22));
  pointer-events:none;
}

.comment-read-check {
  appearance:none;
  -webkit-appearance:none;
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(91,168,212,.26);
  border-radius:999px;
  background:#fff;
  color:#5BA8D4;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(18,40,64,.08);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.key-work-comment .comment-read-check {
  border-radius:999px !important;
}

.comment-read-check:hover {
  transform:translateY(-1px);
  border-color:rgba(37,211,102,.45);
  color:#128C45;
}

.comment-read-check.is-read {
  background:linear-gradient(135deg,#25D366,#B7F3CF);
  border-color:rgba(37,211,102,.6);
  color:#073A19;
}

.comment-read-check.is-saving {
  opacity:.7;
  cursor:wait;
}

.comment-read-check .mini-icon {
  width:16px;
  height:16px;
  display:block;
}

.comment-read-receipts {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.comment-read-receipts.is-empty {
  opacity:.68;
}

.comment-read-avatars {
  display:flex;
  align-items:center;
}

.read-receipt-avatar {
  width:20px;
  height:20px;
  min-width:20px;
  max-width:20px;
  min-height:20px;
  max-height:20px;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin-left:-5px;
  border:2px solid #fff;
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-size:8px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(18,40,64,.12);
}

.read-receipt-avatar:first-child {
  margin-left:0;
}

.key-work-comment .read-receipt-avatar img,
.comment-read-receipts .read-receipt-avatar img,
.read-receipt-avatar img {
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:20px !important;
  max-height:20px !important;
  object-fit:cover;
  padding:0 !important;
  border:0;
  border-radius:999px;
  background:#fff;
}

.client-read-receipt {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.key-work-comment-form {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
}

.key-work-comment-rail .key-work-comment-form {
  grid-template-columns:1fr;
}

.key-work-comment-rail .key-work-comment-form textarea {
  min-height:116px;
}

.comment-attachment-field {
  display:grid;
  gap:8px;
  min-width:0;
}

.comment-attachment-field .button {
  justify-self:start;
  min-height:42px;
  padding-inline:16px;
}

.comment-attachment-chips {
  margin-top:0;
}

.comment-upload-loader {
  margin:0;
  border-radius:18px;
  color:var(--navy);
  background:rgba(91,168,212,.12);
  border:1px solid rgba(91,168,212,.24);
}

.comment-upload-loader small {
  color:var(--muted);
}

.comment-delete-button {
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#d54d4d;
  background:rgba(255,87,87,.10);
  cursor:pointer;
  flex:0 0 auto;
}

.comment-delete-button:hover {
  background:rgba(255,87,87,.18);
}

.comment-delete-button .button-icon {
  width:15px;
  height:15px;
}

.key-work-system-log {
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:rgba(91,168,212,.10);
  border:1px dashed rgba(91,168,212,.38);
  box-shadow:none;
}

.key-work-system-log p {
  margin:0;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
}

.key-work-system-log small {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.system-log-dot {
  width:10px;
  height:10px;
  margin-top:4px;
  border-radius:999px;
  background:var(--blue);
  box-shadow:0 0 0 6px rgba(91,168,212,.15);
  flex:0 0 auto;
}

.key-work-comment-toggle {
  display:none;
}

.key-work-client-comment-rail .key-work-approval-box {
  display:grid;
  align-items:start;
  margin:0 0 12px;
}

.key-work-client-comment-rail .key-work-approval-box .button {
  width:100%;
}

@media (max-width:980px) {
  .overview-metric-grid {
    grid-template-columns:1fr;
  }

  .metrics-hero-card {
    align-items:flex-start;
  }

  .metrics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .top-requirement-panel {
    padding:14px;
  }

  .requirement-modal-card {
    padding:22px;
    border-radius:24px;
  }

  .requirement-modal-intro {
    grid-template-columns:1fr;
    padding-right:38px;
  }

  .client-requirement-form-top {
    grid-template-columns:1fr;
  }

  .key-work-admin-task-modal,
  .key-work-admin-task-modal.has-comment-rail,
  .key-work-client-task-modal {
    width:min(980px,calc(100vw - 24px));
  }

  .key-work-admin-task-modal.has-comment-rail .key-work-modal-main,
  .key-work-client-task-modal .key-work-modal-main {
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) minmax(250px,36vh);
  }

  .key-work-comment-rail {
    border-left:0;
    border-top:1px solid rgba(18,40,64,.08);
  }
}

.key-work-approval-box {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 14px;
  padding:14px;
  border:1px solid rgba(41,174,96,.22);
  border-radius:18px;
  background:linear-gradient(135deg,#fff,rgba(41,174,96,.10));
}

.approval-action-stack {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.approval-action-stack .button {
  min-width:210px;
}

.key-work-approval-box.approved {
  background:linear-gradient(135deg,rgba(41,174,96,.16),rgba(91,172,216,.08));
  border-color:rgba(41,174,96,.32);
}

.key-work-approval-box strong {
  display:block;
  color:var(--navy);
  font-size:13px;
}

.key-work-approval-box p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.key-work-task-body {
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:18px;
  background:#fff;
  color:var(--text);
  line-height:1.62;
  white-space:normal;
}

.key-work-task-body-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.key-work-task-body-head h3 {
  margin:0;
}

.client-copy-button {
  flex:0 0 auto;
}

.key-work-task-body-content {
  min-width:0;
}

.key-work-task-body a {
  color:var(--blue);
  font-weight:900;
  text-decoration:underline;
}

.key-work-first-comment-body {
  background:linear-gradient(135deg,rgba(238,247,252,.88),rgba(255,255,255,.98));
}

.client-key-work-board {
  grid-auto-columns:minmax(292px,1fr);
  height:min(500px, 58vh);
  max-height:500px;
}

.client-key-work-board .key-work-column-body {
  max-height:100%;
}

.assignment-list > .button {
  justify-self:start;
  grid-column:1 / -1;
}

.email-preview-tools {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(91,168,212,.18);
}

.email-preview-tools select {
  min-width:170px;
}

.email-preview-frame {
  width:100%;
  min-height:520px;
  margin-top:16px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:22px;
  background:#eef5fb;
}

.button.has-integration-error {
  border-color:rgba(225,82,82,.24);
  background:#fff1f1;
  color:#9f2929;
}

.team-user-card {
  display:grid;
  grid-template-columns:1.1fr .9fr auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(91,168,212,.18);
  border-radius:20px;
  padding:14px;
  background:linear-gradient(135deg,#fff,rgba(238,247,252,.82));
  box-shadow:var(--soft-shadow);
}

.team-user-identity {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.team-user-identity h3 {
  color:var(--navy);
  font-size:15px;
  line-height:1.2;
}

.team-user-meta,
.team-user-actions,
.team-form-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.team-user-actions {
  justify-content:flex-end;
}

.check-row-inline {
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:12px 14px;
  border:1px solid rgba(18,40,64,.10);
  border-radius:16px;
  background:rgba(238,247,252,.72);
  color:var(--navy);
  font-weight:900;
}

.check-row-inline input {
  width:20px;
  height:20px;
  flex:0 0 auto;
  accent-color:var(--blue);
}

.super-admin-lock {
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(18,40,64,.07);
  font-size:12px;
  font-weight:900;
}

.toast-box {
  position:fixed;
  right:22px;
  top:94px;
  z-index:90;
  display:grid;
  gap:10px;
  width:min(340px, calc(100vw - 32px));
  pointer-events:none;
}

.toast {
  transform:translateY(-8px);
  opacity:0;
  border:1px solid rgba(18,40,64,.12);
  border-radius:18px;
  padding:13px 15px;
  color:var(--navy);
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 44px rgba(18,40,64,.18);
  font-size:13px;
  font-weight:900;
  transition:opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity:1;
  transform:translateY(0);
}

#clientToast {
  position:fixed;
  right:22px;
  top:94px;
  z-index:95;
}

#clientToast.error {
  border-color:rgba(214,69,69,.26);
  background:linear-gradient(135deg,#fff,rgba(214,69,69,.10));
}

.toast-success {
  border-color:rgba(37,211,102,.26);
  background:linear-gradient(135deg,#fff,rgba(37,211,102,.12));
}

.toast-error {
  border-color:rgba(214,69,69,.26);
  background:linear-gradient(135deg,#fff,rgba(214,69,69,.10));
}

.toast-loading {
  border-color:rgba(91,168,212,.28);
  background:linear-gradient(135deg,#fff,rgba(91,168,212,.12));
}

.modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.modal-head h2 {
  color:var(--navy);
  font-size:26px;
  line-height:1.12;
  letter-spacing:-.8px;
}

.modal-close {
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:rgba(18,40,64,.08);
  color:var(--navy);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.client-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.client-delete-action {
  grid-column:1 / -1;
  margin-top:4px;
}

@keyframes riseIn {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes floatGlow {
  0%,100% { transform:translate3d(0,0,0) scale(1); opacity:.85; }
  50% { transform:translate3d(-18px,18px,0) scale(1.08); opacity:1; }
}

@keyframes pulseSupport {
  0%,100% { transform:translateY(0); box-shadow:0 16px 40px rgba(37,211,102,.28); }
  50% { transform:translateY(-4px); box-shadow:0 22px 50px rgba(37,211,102,.42); }
}

@keyframes serviceSpin {
  to { transform:rotate(360deg); }
}

@keyframes serviceOrbitDot {
  from { transform:rotate(var(--orbit-angle)) translateX(28px) translate(-50%, -50%); }
  to { transform:rotate(calc(var(--orbit-angle) + 360deg)) translateX(28px) translate(-50%, -50%); }
}

@keyframes sectionPulse {
  0% { transform:translateY(0); }
  18% { transform:translateY(-3px); }
  100% { transform:translateY(0); }
}

@keyframes sectionGlowFade {
  0% {
    transform:translateY(0);
    border-color:rgba(37,211,102,.62);
    box-shadow:0 0 0 5px rgba(37,211,102,.18), 0 24px 58px rgba(18,40,64,.16);
  }
  8% {
    transform:translateY(-3px);
    border-color:rgba(37,211,102,.56);
    box-shadow:0 0 0 5px rgba(37,211,102,.16), 0 24px 58px rgba(18,40,64,.16);
  }
  100% {
    transform:translateY(0);
    border-color:var(--line);
    box-shadow:var(--soft-shadow);
  }
}

@keyframes clientBadgePulse {
  0%,100% {
    transform:scale(1);
    box-shadow:0 0 0 4px rgba(37,211,102,.14), 0 10px 24px rgba(37,211,102,.24);
  }
  50% {
    transform:scale(1.06);
    box-shadow:0 0 0 7px rgba(37,211,102,.10), 0 14px 30px rgba(37,211,102,.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:900px) {
  .hero-grid, .admin-shell, .grid-2, .grid-3, .grid-4, .form-grid, .service-buttons { grid-template-columns:1fr; }
  .admin-shell {
    padding:16px 0 92px;
  }
  .client-accordion-list {
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
  .portal-login-split { grid-template-columns:1fr; }
  .portal-login-info-card,
  .portal-login-form-card { min-height:auto; }
  .team-user-card { grid-template-columns:1fr; }
  .team-user-actions { justify-content:flex-start; }
  .client-resource-grid { grid-template-columns:1fr; }
  .client-id-grid { grid-template-columns:1fr 1fr; }
  .relationship-banner, .relationship-admin-note { grid-template-columns:1fr; }
  .client-directory-grid { grid-template-columns:1fr; }
  .project-workroom {
    grid-template-columns:1fr;
    grid-template-areas:
      "projects"
      "progress"
      "updates";
    padding-right:0;
  }
  .portal-carousel { grid-auto-columns:minmax(290px, 92%); }
  .key-work-board,
  .client-key-work-board {
    grid-auto-columns:minmax(265px,86vw);
    height:min(560px,68vh);
    max-height:68vh;
    padding-bottom:18px;
  }
  .key-work-admin-task-modal.has-comment-rail .key-work-modal-main,
  .key-work-client-task-modal .key-work-modal-main {
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) minmax(250px,34vh);
  }
  .key-work-comments {
    border-left:0;
    border-top:1px solid rgba(18,40,64,.08);
  }
}

@media (max-width:680px) {
  .header-inner { align-items:flex-start; padding:12px 0; flex-direction:column; }
  .nav-actions { width:100%; }
  .button:not(.modal-close):not(.carousel-nav):not(.key-work-floating-close):not(.comment-read-check) { width:100%; }
  .hero-card, .card-head, .card-body { padding-left:22px; padding-right:22px; }
  .hero-card {
    border-radius:26px;
  }
  .hero-card h1 {
    font-size:clamp(36px,12vw,54px);
    line-height:.98;
  }
  .hero-client-meta {
    align-items:stretch;
  }
  .hero-client-meta span {
    max-width:100%;
  }
  .stat-panel {
    padding:14px;
  }
  .hero-status-widget,
  .hero-approval-notice {
    grid-template-columns:64px 1fr;
    min-height:104px;
  }
  .approval-notice-count,
  .service-orbit,
  .progress-ring {
    width:58px;
    height:58px;
  }
  .workspace-actions { width:100%; }
  .danger-zone { align-items:stretch; flex-direction:column; }
  .client-id-card-top { flex-direction:column; }
  .client-id-grid { grid-template-columns:1fr; }
  .task-top, .service-top, .update-top, .footer-inner { flex-direction:column; }
  .task-top > .objective-status-stack {
    width:100%;
    min-width:0;
    max-width:100%;
    flex:0 0 auto;
    margin-left:0;
    justify-items:start;
  }
  .field,
  .field > .task-top,
  .field > .task-top > div:first-child {
    grid-template-columns:1fr;
  }
  .field .item-actions {
    grid-column:auto;
  }
  .support-float { right:14px; bottom:96px; min-width:124px; }
  .back-to-top { bottom:92px; }
  .client-actions { grid-template-columns:1fr; }
  .modal-backdrop {
    padding:10px;
  }
  .modal-card,
  .modal-card-wide,
  .key-work-admin-task-modal,
  .key-work-client-task-modal {
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:24px;
  }
  .key-work-modal-main {
    height:calc(100dvh - 20px);
  }
  .key-work-form-scroll,
  .key-work-client-content-scroll {
    padding:18px 16px 8px;
  }
  .key-work-task-content-area {
    min-height:220px;
  }
  .key-work-comment-rail {
    padding:16px;
  }
  .key-work-board,
  .client-key-work-board {
    grid-auto-columns:minmax(248px,84vw);
    height:min(520px,64vh);
    max-height:64vh;
  }
  .top-admin-panel {
    width:min(100vw - 24px, 380px);
    right:auto;
    left:0;
  }
}

@media (max-width:760px) {
  html,
  body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body {
    font-size:14px;
    line-height:1.5;
    padding-bottom:104px;
  }

  .metrics-hero-card {
    display:grid;
    padding:16px;
    border-radius:20px;
  }

  .metrics-hero-card h3 {
    font-size:21px;
  }

  .golden-metric-emblem {
    min-width:100%;
    min-height:66px;
    border-radius:20px;
  }

  .metrics-grid {
    grid-template-columns:1fr;
  }

  .approval-history-item {
    grid-template-columns:1fr;
  }

  .key-work-approval-box {
    display:grid;
  }

  .approval-action-stack {
    justify-content:stretch;
  }

  .approval-action-stack .button {
    width:100%;
    min-width:0;
  }

  .wrap,
  .narrow {
    width:min(100% - 20px, 100%);
  }

  .header {
    position:sticky;
  }

  .header-inner {
    min-height:62px;
    gap:10px;
  }

  .brand {
    gap:10px;
    max-width:100%;
  }

  .brand img {
    width:42px;
    height:42px;
    border-radius:12px;
    padding:5px;
  }

  .brand small {
    font-size:8px;
    letter-spacing:1.7px;
  }

  .brand strong {
    font-size:13px;
  }

  .top-admin-menu {
    width:100%;
  }

  .top-admin-trigger {
    width:100%;
    justify-content:space-between;
    padding:8px 10px;
  }

  .admin-shell {
    display:grid;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px;
    width:100%;
    max-width:100%;
    padding:12px 0 92px;
    overflow:hidden;
  }

  .admin-shell > *,
  .card,
  .workspace-card,
  #workspaceCard,
  #createClientCard,
  #adminEmptyState,
  .admin-panel,
  .section,
  .mini-card,
  .add-item-panel,
  .detail-group,
  .client-accordion,
  .client-accordion-body,
  .client-summary-main,
  .workspace-title-lockup,
  .key-work-shell,
  .key-work-head,
  .key-work-board,
  .client-key-work-board {
    min-width:0;
    max-width:100%;
  }

  .key-work-shell {
    overflow:hidden;
  }

  .card-head {
    padding:18px 16px;
  }

  .admin-shell > aside.card {
    position:relative;
  }

  .admin-shell > aside.card > .card-head {
    min-height:92px;
    padding-right:156px;
    align-items:center;
  }

  .card-head h1,
  .card-head h2,
  .workspace-title-lockup h1 {
    font-size:clamp(24px,8vw,34px);
    line-height:1.05;
    letter-spacing:-.8px;
    overflow-wrap:anywhere;
  }

  .card-body {
    padding:16px;
    overflow:hidden;
  }

  .client-accordion-list {
    max-height:none;
    overflow:visible;
  }

  .mobile-client-picker {
    display:block;
  }

  .mobile-client-picker summary {
    position:absolute;
    top:22px;
    right:14px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto;
    min-width:126px;
    max-width:138px;
    min-height:42px;
    margin:0;
    padding:8px 12px;
    border:1px solid rgba(91,168,212,.24);
    border-radius:999px;
    background:linear-gradient(135deg,#fff,rgba(238,247,252,.90));
    color:var(--navy);
    cursor:pointer;
    list-style:none;
    box-shadow:0 10px 24px rgba(18,40,64,.07);
  }

  .mobile-client-picker summary::after {
    content:"⌄";
    color:var(--blue);
    font-size:13px;
    font-weight:1000;
    line-height:1;
    transition:transform .18s ease;
  }

  .mobile-client-picker[open] summary::after {
    transform:rotate(180deg);
  }

  .mobile-client-picker summary::-webkit-details-marker {
    display:none;
  }

  .mobile-client-picker summary span {
    font-size:11.5px;
    font-weight:900;
    white-space:nowrap;
  }

  .mobile-client-picker summary small {
    display:none;
  }

  .mobile-client-picker:not([open]) .card-body {
    display:none;
  }

  .mobile-client-picker > .card-body {
    padding-top:0;
  }

  .mobile-client-picker[open] {
    display:block;
  }

  .client-accordion summary,
  .client-select-button {
    padding:12px 40px 12px 12px;
    gap:8px;
  }

  .client-summary-topline {
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
  }

  .client-summary-topline h3,
  .client-accordion summary h3,
  .client-select-button h3 {
    max-width:128px;
    font-size:13px;
    line-height:1.12;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow-wrap:anywhere;
  }

  .client-summary-bottomline {
    padding-left:36px;
  }

  .client-summary-main [data-client-last-update] {
    max-width:100%;
    font-size:10.5px;
  }

  .client-summary-inline-status {
    transform:scale(.78);
    transform-origin:left center;
  }

  .client-accordion-body {
    padding:0 12px 12px;
  }

  .client-card-hint,
  .client-card-message,
  .client-card-quiet {
    font-size:11px;
    padding:9px 10px;
  }

  .workspace-title-lockup {
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    align-items:start;
    gap:10px;
    width:100%;
  }

  .workspace-client-logo {
    width:40px;
    height:40px;
    border-radius:14px;
  }

  .workspace-title-lockup h1,
  #workspaceTitle {
    max-width:100%;
    font-size:clamp(27px,8.4vw,38px);
    line-height:1.04;
    word-break:normal;
    overflow-wrap:anywhere;
  }

  .workspace-title-lockup small {
    max-width:100%;
    font-size:10px;
    overflow-wrap:anywhere;
  }

  .workspace-actions,
  .inline-actions,
  .item-actions,
  .team-user-meta,
  .team-user-actions,
  .team-form-actions {
    width:100%;
    justify-content:stretch;
  }

  .inline-actions > *,
  .item-actions > *,
  .team-user-actions > *,
  .workspace-actions > * {
    flex:1 1 100%;
    min-width:0;
  }

  .tabs {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:7px;
    padding:2px 0 10px;
    margin:0 -2px 12px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .tab {
    flex:0 0 auto;
    padding:9px 12px;
    font-size:11px;
    scroll-snap-align:start;
  }

  .overview-metric-grid,
  .form-grid,
  .checklist-action-grid,
  .service-list,
  .objective-list,
  .resource-list,
  .update-list,
  .assignment-list,
  .team-user-card,
  .portal-login-split,
  .client-directory-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns:minmax(0,1fr) !important;
  }

  .form-grid label,
  .add-item-form label,
  .modal-card label,
  input,
  textarea,
  select {
    min-width:0;
    max-width:100%;
    font-size:14px;
  }

  textarea {
    min-height:112px;
  }

  .section,
  .mini-card,
  .notice,
  .empty,
  .relationship-admin-note,
  .access-actions-card,
  .client-assignment-card,
  .danger-zone {
    padding:14px;
    border-radius:18px;
  }

  .add-item-form {
    padding:0 10px 12px;
  }

  .status-editor,
  .visibility-editor,
  .progress-editor {
    flex:1 1 100%;
    max-width:100%;
  }

  .compact-delete {
    width:100%;
  }

  .key-work-head {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding:14px;
  }

  .key-work-head h3 {
    font-size:clamp(20px,7vw,26px);
    line-height:1.06;
  }

  .key-work-client-toggle {
    width:100%;
    min-width:0;
  }

  .key-work-board,
  .client-key-work-board {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,78vw) !important;
    width:100%;
    max-width:100%;
    inline-size:100%;
    height:60vh;
    max-height:540px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:3px 0 12px;
    contain:inline-size;
    -webkit-overflow-scrolling:touch;
  }

  .key-work-column {
    min-width:0;
    max-width:100%;
  }

  .key-work-card {
    padding:12px;
  }

  .key-work-card h4 {
    font-size:13px;
    line-height:1.18;
    overflow-wrap:anywhere;
  }

  .key-work-card p {
    font-size:11px;
  }

  .key-work-choice-grid,
  .key-work-assignee-choice-grid,
  .key-work-media-type-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
  }

  .key-work-choice,
  .key-work-assignee-choice {
    min-width:0;
    padding:8px 10px;
    font-size:12px;
  }

  .key-work-title-display {
    font-size:clamp(25px,9vw,36px);
    line-height:1.02;
    overflow-wrap:anywhere;
  }

  .key-work-modal-card,
  .key-work-admin-task-modal,
  .key-work-client-task-modal {
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:22px;
  }

  .key-work-modal-main,
  .key-work-admin-task-modal.has-comment-rail .key-work-modal-main,
  .key-work-client-task-modal .key-work-modal-main {
    display:grid;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    height:100%;
    min-width:0;
  }

  .key-work-form-scroll,
  .key-work-client-content-scroll,
  .key-work-comment-rail {
    min-width:0;
    max-width:100%;
  }

  .key-work-modal-head {
    display:block;
    position:relative;
    padding-top:38px;
  }

  .key-work-modal-head-actions {
    position:absolute;
    top:0;
    right:0;
    z-index:1;
    align-items:flex-start;
    justify-content:flex-end;
    min-width:0;
  }

  .key-work-modal-status {
    gap:5px;
    min-height:27px;
    padding:5px 8px;
    font-size:10px;
    max-width:132px;
    white-space:normal;
    line-height:1.05;
    text-align:left;
  }

  .key-work-modal-status span {
    width:7px;
    height:7px;
    box-shadow:0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
  }

  .key-work-modal-title-block {
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .key-work-title-display {
    width:100%;
    max-width:100%;
    padding-right:0;
    font-size:clamp(28px,9vw,38px);
    line-height:1.01;
    word-break:normal;
    overflow-wrap:anywhere;
    hyphens:auto;
  }

  .choice-field {
    gap:6px;
  }

  .choice-title {
    font-size:11px;
  }

  .priority-choice-grid,
  .task-type-choice-grid,
  .key-work-media-type-grid {
    display:grid;
    grid-template-columns:repeat(var(--mobile-choice-columns, 3), minmax(0,1fr)) !important;
    gap:6px;
  }

  .priority-choice-grid {
    --mobile-choice-columns:4;
  }

  .task-type-choice-grid,
  .key-work-media-type-grid {
    --mobile-choice-columns:3;
  }

  .key-work-media-type-grid:has(.media-type-horizontal-video:nth-child(4)),
  .key-work-media-type-grid:has(.media-type-carousel:nth-child(4)) {
    --mobile-choice-columns:4;
  }

  .key-work-choice,
  .media-type-choice {
    min-height:36px;
    gap:4px;
    padding:6px 6px;
    font-size:10.5px;
    line-height:1;
    white-space:nowrap;
  }

  .choice-icon {
    width:20px;
    height:20px;
    font-size:11px;
    flex:0 0 auto;
  }

  .media-type-choice span:last-child,
  .task-type-choice span:last-child,
  .priority-choice span:last-child {
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .key-work-modal-actions {
    display:grid;
    grid-template-columns:minmax(58px,.8fr) minmax(56px,.72fr) minmax(50px,.62fr) minmax(50px,.58fr);
    gap:7px;
    min-height:64px;
    padding:7px;
  }

  .key-work-task-visibility-toggle {
    display:grid;
    place-items:center;
    gap:2px;
    min-width:0;
    width:100%;
    min-height:48px;
    padding:5px 4px;
    border-radius:15px;
  }

  .key-work-task-visibility-toggle span {
    display:block;
    order:2;
    text-align:center;
  }

  .key-work-task-visibility-toggle input {
    order:1;
    margin:auto;
    width:38px;
    height:22px;
  }

  .key-work-task-visibility-toggle strong {
    display:block;
    font-size:8.5px;
    line-height:1;
  }

  .key-work-task-visibility-toggle small {
    display:none;
  }

  .key-work-task-visibility-toggle input::after {
    width:14px;
    height:14px;
  }

  .key-work-task-visibility-toggle input:checked::after {
    transform:translateX(16px);
  }

  .key-work-modal-actions .button {
    display:grid;
    place-items:center;
    width:100% !important;
    min-height:48px;
    padding:8px 7px;
    border-radius:15px;
    font-size:0;
    line-height:1;
  }

  .key-work-modal-actions .button .button-icon {
    width:18px;
    height:18px;
    margin:0;
  }

  .key-work-modal-actions .button span {
    display:none;
  }

  .key-work-modal-actions .button-danger {
    min-width:0;
  }

  .key-work-comment-rail {
    display:grid;
    grid-template-rows:auto;
    min-height:0;
    max-height:58px;
    overflow:hidden;
    padding:8px 12px;
    border-left:0;
    border-top:1px solid rgba(18,40,64,.08);
    transition:max-height .22s ease;
  }

  .key-work-comment-rail.is-mobile-open {
    grid-template-rows:auto minmax(190px,1fr) auto;
    max-height:56dvh;
    overflow:hidden;
  }

  .key-work-comment-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    min-height:42px;
    border:1px solid rgba(91,168,212,.20);
    border-radius:16px;
    padding:8px 10px;
    background:rgba(255,255,255,.86);
    color:var(--navy);
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
  }

  .key-work-comment-toggle strong {
    min-width:24px;
    height:24px;
    display:grid;
    place-items:center;
    padding:0 7px;
    border-radius:999px;
    background:rgba(91,168,212,.16);
    color:var(--navy);
    font-size:11px;
  }

  .key-work-comment-toggle::after {
    content:"Open";
    color:var(--blue);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment-toggle::after {
    content:"Close";
  }

  .key-work-comment-rail > h3 {
    display:none;
  }

  .key-work-comment-rail .key-work-comment-list,
  .key-work-comment-rail .key-work-comment-form,
  .key-work-client-comment-rail .key-work-approval-box {
    display:none;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment-list {
    display:grid;
    max-height:calc(56dvh - 152px);
    margin:10px 0;
    overflow-y:auto;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment-form,
  .key-work-comment-rail.is-mobile-open .key-work-approval-box {
    display:grid;
  }

  .key-work-comment-rail .key-work-comment-form {
    grid-template-columns:minmax(0,1fr) !important;
  }

  .key-work-comment-rail .key-work-comment-form textarea {
    min-height:74px;
  }

  .modal-card,
  .modal-card-wide {
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    overflow:auto;
    padding:18px;
    border-radius:22px;
  }

  .modal-head h2 {
    font-size:22px;
  }

  .support-float {
    right:10px;
    bottom:76px;
    min-width:0;
    padding:11px 13px;
  }

  .footer {
    padding:14px 0;
  }
}

@media (max-width:420px) {
  body {
    font-size:13.5px;
  }

  .wrap,
  .narrow {
    width:calc(100% - 14px);
  }

  .card-head,
  .card-body {
    padding-left:12px;
    padding-right:12px;
  }

  .client-summary-logo {
    width:26px;
    height:26px;
  }

  .client-summary-bottomline {
    padding-left:34px;
  }

  .button {
    min-height:42px;
    padding:10px 12px;
    font-size:12px;
  }

  .tab {
    padding:8px 10px;
  }

  .key-work-board,
  .client-key-work-board {
    grid-auto-columns:minmax(214px,78vw) !important;
    height:58vh;
  }

  .priority-choice-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .task-type-choice-grid,
  .key-work-media-type-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .key-work-media-type-grid:has(.media-type-horizontal-video:nth-child(4)),
  .key-work-media-type-grid:has(.media-type-carousel:nth-child(4)) {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .key-work-choice,
  .media-type-choice {
    min-height:34px;
    padding:5px 4px;
    font-size:9.5px;
    gap:3px;
  }

  .choice-icon {
    width:18px;
    height:18px;
    font-size:10px;
  }

  .key-work-assignee-choice-grid {
    grid-template-columns:minmax(0,1fr);
  }

  .key-work-modal-card,
  .key-work-admin-task-modal,
  .key-work-client-task-modal,
  .modal-card,
  .modal-card-wide {
    width:calc(100vw - 10px) !important;
    max-width:calc(100vw - 10px) !important;
  }
}

@media (max-width:760px) {
  .header-inner {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px;
    min-height:60px;
    padding:9px 0;
  }

  .brand {
    flex:1 1 auto;
    min-width:0;
    max-width:calc(100% - 126px);
  }

  .brand img {
    width:40px;
    height:40px;
    flex:0 0 auto;
  }

  .brand span {
    min-width:0;
  }

  .brand small {
    font-size:7.5px;
    letter-spacing:1.35px;
  }

  .brand strong {
    max-width:100%;
    overflow:hidden;
    font-size:12px;
    line-height:1.12;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .nav-actions {
    flex:0 0 auto;
    width:auto !important;
    margin-left:auto;
    flex-wrap:nowrap;
    gap:7px;
  }

  .admin-refresh-button {
    width:42px;
    min-width:42px;
    min-height:42px;
    padding:0;
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.07);
  }

  .admin-refresh-button span {
    display:none;
  }

  .top-admin-menu {
    width:auto !important;
  }

  .top-admin-trigger {
    width:auto !important;
    min-width:0;
    padding:0 !important;
  }

  .profile-chip {
    gap:0;
    min-height:42px;
    padding:3px;
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.07);
  }

  .profile-chip > span:last-child {
    display:none;
  }

  .profile-avatar {
    width:34px;
    height:34px;
    min-width:34px;
    max-width:34px;
    min-height:34px;
    max-height:34px;
    font-size:10px;
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
  }

  .top-admin-panel {
    top:calc(100% + 10px);
    right:0;
    left:auto;
    width:min(328px, calc(100vw - 18px));
  }

  #workspaceCard > .card-head {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    padding:18px 14px;
  }

  #workspaceTitle {
    width:100%;
    max-width:100%;
    font-size:clamp(22px,6.2vw,30px) !important;
    line-height:1.05 !important;
    letter-spacing:-.7px;
  }

  #workspaceTitle .workspace-title-lockup {
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    gap:9px;
    align-items:start;
    width:100%;
    max-width:100%;
  }

  #workspaceTitle .workspace-client-logo {
    width:36px;
    height:36px;
    border-radius:12px;
  }

  #workspaceTitle .workspace-title-lockup > span:last-child {
    display:block;
    min-width:0;
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }

  #workspaceTitle small {
    display:block;
    max-width:100%;
    margin-top:4px;
    font-size:9px;
    line-height:1.08;
    letter-spacing:.035em;
    overflow-wrap:anywhere;
  }

  .workspace-actions {
    display:grid;
    grid-template-columns:48px 1fr 1fr;
    gap:8px;
    width:100%;
  }

  .workspace-actions > * {
    min-width:0;
    width:100% !important;
  }
}

@media (max-width:420px) {
  #workspaceTitle {
    font-size:clamp(20px,5.8vw,26px) !important;
  }

  #workspaceTitle .workspace-title-lockup {
    grid-template-columns:32px minmax(0,1fr);
    gap:8px;
  }

  #workspaceTitle .workspace-client-logo {
    width:32px;
    height:32px;
    border-radius:11px;
  }
}

/* Final desktop density pass for the admin Key-Work workspace. */
@media (min-width:761px) {
  .header-inner { min-height:54px; }
  .brand img { width:38px; height:38px; border-radius:10px; padding:5px; }
  .brand small { font-size:7px; letter-spacing:1.4px; }
  .brand strong { font-size:12px; line-height:1.08; }
  .admin-shell { grid-template-columns:260px minmax(0,1fr); gap:12px; padding:12px 0 28px; }
  .admin-shell {
    align-items:stretch;
  }
  .admin-shell > section {
    min-height:0;
    max-height:calc(100vh - 146px);
  }
  .admin-shell > aside.card {
    display:flex;
    flex-direction:column;
    max-height:calc(100vh - 146px);
  }
  #workspaceCard,
  #adminEmptyState,
  #createClientCard {
    min-height:calc(100vh - 146px);
    max-height:calc(100vh - 146px);
  }
  #workspaceCard {
    overflow:hidden;
  }
  #workspaceCard > .card-body {
    display:flex;
    flex-direction:column;
    min-height:0;
    height:calc(100vh - 228px);
    max-height:calc(100vh - 228px);
    overflow:hidden;
  }
  .card-head { padding:11px 16px; }
  .card-head h2 { font-size:22px; line-height:1.08; }
  .card-body { padding:12px 16px 16px; }
  .button { min-height:36px; padding:8px 14px; font-size:11px; }
  .mobile-client-picker {
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .mobile-client-picker > .card-body {
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .client-accordion-list {
    flex:1 1 auto;
    min-height:0;
    max-height:calc(100vh - 306px);
    overflow:auto;
  }
  .client-accordion summary { padding:10px 34px 10px 10px; }
  .workspace-client-logo { width:34px; height:34px; border-radius:12px; }
  #workspaceTitle { font-size:24px; line-height:1.02; }
  .workspace-title-lockup small { font-size:9px; line-height:1; }
  .workspace-chat-button { width:38px; height:38px; }
  .tabs { gap:6px; margin-bottom:9px; }
  #tab-key-work.active {
    flex:1 1 auto;
    min-height:0;
    display:block;
  }
  .tab { min-height:30px; padding:7px 11px; font-size:10px; }
  .key-work-shell {
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .key-work-head { padding:8px 10px; border-radius:16px; }
  .key-work-head h3 { font-size:24px; line-height:1; }
  .key-work-client-toggle { min-width:220px; min-height:42px; padding:6px 8px; border-radius:14px; }
  .key-work-client-toggle small { display:none; }
  .key-work-board {
    grid-auto-columns:minmax(292px, 310px);
    gap:10px;
    flex:1 1 auto;
    min-height:0;
    height:auto;
    max-height:none;
    padding:3px 2px 10px;
    overscroll-behavior-inline:contain;
  }
  .key-work-column { padding:9px; border-radius:18px; }
  .key-work-column-head { min-height:30px; margin-bottom:7px; }
  .key-work-column-head strong { font-size:11px; line-height:1.05; }
  .key-work-column-head span { min-width:24px; height:24px; font-size:10px; }
  .key-work-column-body { gap:8px; padding-right:3px; }
  .key-work-card { gap:7px; padding:10px; border-radius:15px; }
  .key-work-card h4 { font-size:12px; line-height:1.12; }
  .key-work-type-badge,
  .key-work-media-badge,
  .key-work-priority-badge { min-height:19px; padding:3px 7px; font-size:8px; letter-spacing:.035em; }
  .key-work-task-id,
  .key-work-assignee small { font-size:9px; }
  .key-work-add-row {
    flex:0 0 auto;
    padding:4px 2px 0;
  }
  .key-work-add-button { min-height:32px; padding:7px 12px; font-size:10px; }
}


/* Final admin mobile client picker guard: keep client cards selectable and non-overlapping. */
@media (max-width:760px) {
  .admin-shell > aside.card {
    isolation:isolate;
  }

  .mobile-client-picker {
    position:static !important;
    z-index:auto !important;
  }

  .mobile-client-picker > .card-body {
    position:relative !important;
    z-index:1 !important;
    display:block;
    max-height:58vh;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:18px;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-client-picker:not([open]) > .card-body {
    display:none !important;
  }

  .client-accordion-list {
    position:relative !important;
    z-index:1 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .client-accordion,
  .client-accordion[open],
  .client-accordion.is-current {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    transform:none !important;
  }

  .client-accordion summary,
  .client-select-button {
    min-height:74px;
  }
}

/* Mobile app polish: fixed compact shell, media tooltip, clearer media choices and comment toggle arrows. */
.media-preview-title {
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.info-tooltip {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:999px;
  background:rgba(91,168,212,.14);
  color:var(--blue);
  font-size:11px;
  font-weight:1000;
  cursor:help;
}

.info-tooltip::after {
  content:attr(aria-label);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  z-index:80;
  width:min(260px, 74vw);
  padding:10px 12px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:14px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
  text-transform:none;
  letter-spacing:0;
  box-shadow:0 16px 40px rgba(18,40,64,.18);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, 6px);
  transition:opacity .18s ease, transform .18s ease;
}

.info-tooltip:hover::after,
.info-tooltip:focus-visible::after {
  opacity:1;
  transform:translate(-50%, 0);
}

.media-type-horizontal-video .choice-icon {
  background:rgba(91,168,212,.18);
  color:#246F9D;
}

.media-type-vertical-video .choice-icon {
  background:rgba(130,87,229,.18);
  color:#7B4BE0;
}

.media-type-image .choice-icon {
  background:rgba(91,168,212,.16);
  color:#246F9D;
}

.media-type-carousel .choice-icon {
  background:rgba(37,211,102,.18);
  color:#148C43;
}

.media-type-horizontal-video:has(input:checked) {
  border-color:rgba(91,168,212,.55);
  box-shadow:0 0 0 4px rgba(91,168,212,.14), 0 12px 28px rgba(91,168,212,.12);
}

.media-type-vertical-video:has(input:checked) {
  border-color:rgba(130,87,229,.48);
  box-shadow:0 0 0 4px rgba(130,87,229,.13), 0 12px 28px rgba(130,87,229,.12);
}

.media-type-carousel:has(input:checked) {
  border-color:rgba(37,211,102,.45);
  box-shadow:0 0 0 4px rgba(37,211,102,.12), 0 12px 28px rgba(37,211,102,.10);
}

@media (max-width:760px) {
  body {
    padding-top:76px;
    padding-bottom:72px;
  }

  .header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:70;
  }

  .footer {
    padding:10px 0;
    font-size:10.5px;
  }

  .footer-inner {
    justify-content:center;
    text-align:center;
  }

  .footer-inner span:first-child {
    font-weight:800;
  }

  .footer-inner span:nth-child(2) {
    display:none;
  }

  .key-work-media-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
  }

  .key-work-media-head .button {
    width:auto !important;
    min-width:104px;
    min-height:36px;
    padding:8px 11px;
    white-space:nowrap;
    font-size:10.5px;
  }

  .key-work-media-type-grid {
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  }

  .media-type-choice {
    min-width:0;
    white-space:normal;
  }

  .media-type-choice span:last-child {
    font-size:9px;
    line-height:1.02;
  }

  .key-work-comment-toggle::after {
    content:"Open ↑";
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment-toggle::after {
    content:"Close ↓";
  }
}

@media (max-width:760px) {
  .key-work-head {
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center;
    gap:10px;
    padding:11px;
  }

  .key-work-head h3 {
    margin:0;
    font-size:clamp(19px,5.6vw,24px);
    line-height:1.08;
  }

  .key-work-head-copy {
    display:none;
  }

  .key-work-help-tooltip {
    display:inline-grid;
  }

  .key-work-client-toggle {
    min-width:0;
    width:auto;
    gap:7px;
    padding:7px 8px;
    border-radius:15px;
  }

  .key-work-client-toggle span {
    display:grid;
    gap:1px;
  }

  .key-work-toggle-status {
    padding:4px 7px;
    font-size:8.5px;
  }

  .key-work-client-toggle strong {
    display:none;
  }

  .key-work-client-toggle strong {
    font-size:9px;
    line-height:1.05;
  }

  .key-work-client-toggle small {
    display:none;
  }

  .key-work-client-toggle input {
    width:34px;
    height:20px;
  }

  .tabs {
    position:relative;
    gap:10px;
    padding:4px 24px 12px 0;
    margin-right:-14px;
    scroll-snap-type:x proximity;
  }

  .tabs::before {
    content:"";
    position:sticky;
    left:0;
    flex:0 0 1px;
    height:1px;
  }

  .tabs::after {
    content:"›";
    position:sticky;
    right:0;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    min-height:40px;
    border-radius:999px 0 0 999px;
    background:linear-gradient(90deg,rgba(233,237,243,0),rgba(233,237,243,.96) 42%,rgba(233,237,243,1));
    color:var(--blue);
    font-size:24px;
    font-weight:1000;
    pointer-events:none;
  }

  .tab {
    min-height:40px;
    padding:10px 16px;
    font-size:12px;
    scroll-snap-align:start;
    box-shadow:0 8px 18px rgba(18,40,64,.05);
  }

  #tab-updates,
  #tab-updates * {
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  #tab-updates {
    overflow:hidden;
  }

  #tab-updates .update,
  #tab-updates .task-top,
  #tab-updates .item-actions,
  #tab-updates .status-editor,
  #tab-updates textarea,
  #tab-updates input,
  #tab-updates select,
  #tab-updates .button,
  #tab-updates .notice,
  #tab-updates .mini-card {
    width:100%;
    max-width:100%;
  }

  #tab-updates .update {
    overflow:hidden;
  }

  #tab-updates .processed-update-details summary {
    grid-template-columns:minmax(0,1fr);
    align-items:flex-start;
  }

  #tab-updates .processed-update-summary-actions {
    width:100%;
    grid-template-columns:74px 112px;
    justify-content:space-between;
  }

  #tab-updates .processed-update-summary-actions .compact-delete {
    width:auto;
    min-width:112px;
  }

  #tab-updates h3,
  #tab-updates p,
  #tab-updates span,
  #tab-updates div,
  #tab-updates a,
  #tab-updates textarea,
  #tab-updates strong {
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* Client portal Key-Work is for review, not internal production work: keep it compact. */
body:not(.admin-page) .client-key-work-board {
  height:min(500px, 58vh) !important;
  max-height:500px !important;
}

/* Keep every client Key-Work view at one stable height. Each view scrolls internally. */
body:not(.admin-page) .client-key-work-view-shell {
  grid-template-rows:auto minmax(0,680px);
  min-height:0;
  overflow:hidden;
}

body:not(.admin-page) .client-key-work-view-shell > .client-key-work-board,
body:not(.admin-page) .client-key-work-view-shell > .client-key-work-calendar,
body:not(.admin-page) .client-key-work-view-shell > .client-key-work-files-panel {
  width:100%;
  height:680px !important;
  min-height:680px;
  max-height:680px !important;
}

body:not(.admin-page) .client-key-work-view-shell > .client-key-work-calendar {
  overflow-y:auto;
  overflow-x:hidden;
}

body:not(.admin-page) .client-key-work-view-shell > .client-key-work-files-panel {
  overflow:hidden;
}

body:not(.admin-page) .client-key-work-files-panel .key-work-folder-grid,
body:not(.admin-page) .client-key-work-calendar .key-work-calendar-grid {
  min-height:0;
}

.key-work-folder-grid,
.key-work-calendar,
.key-work-board {
  scrollbar-width:thin;
  scrollbar-color:rgba(91,168,212,.75) rgba(91,168,212,.08);
}

.key-work-folder-grid::-webkit-scrollbar,
.key-work-calendar::-webkit-scrollbar,
.key-work-board::-webkit-scrollbar {
  width:8px;
  height:8px;
}

.key-work-folder-grid::-webkit-scrollbar-track,
.key-work-calendar::-webkit-scrollbar-track,
.key-work-board::-webkit-scrollbar-track {
  border-radius:999px;
  background:rgba(91,168,212,.08);
}

.key-work-folder-grid::-webkit-scrollbar-thumb,
.key-work-calendar::-webkit-scrollbar-thumb,
.key-work-board::-webkit-scrollbar-thumb {
  border:2px solid transparent;
  border-radius:999px;
  background:rgba(91,168,212,.75);
  background-clip:padding-box;
}

/* Compact client command center and balanced communication/services workspace. */
body:not(.admin-page) .hero {
  padding-top:28px;
}

body:not(.admin-page) .hero-card {
  padding:26px 28px;
}

body:not(.admin-page) .hero-grid {
  grid-template-columns:minmax(0,1.32fr) minmax(380px,.68fr);
  gap:24px;
  align-items:start;
}

.hero-topline {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:18px;
  min-width:0;
  margin-bottom:14px;
}

.client-logo-wrap {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:max-content;
  flex:0 0 auto;
}

.client-logo-wrap .client-logo-mark {
  display:block;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  clip-path:circle(50%);
}

.client-logo-fallback {
  display:grid !important;
  place-items:center;
  color:var(--navy);
  font-size:20px;
  font-weight:1000;
}

.client-active-chip {
  position:absolute;
  left:50%;
  bottom:-8px;
  z-index:3;
  transform:translateX(-50%);
  min-width:max-content;
  padding:4px 8px;
  border:2px solid #fff;
  border-radius:999px;
  color:#08783d;
  background:#d9fbe7;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 5px 14px rgba(4,94,47,.20);
}

.client-logo-wrap.relationship-hold .client-logo-mark { border-color:#e9ad24; }
.client-logo-wrap.relationship-hold .client-active-chip { color:#8a5a00; background:#fff0bd; }
.client-logo-wrap.relationship-inactive .client-logo-mark,
.client-logo-wrap.relationship-ended .client-logo-mark { border-color:#e05b5b; }
.client-logo-wrap.relationship-inactive .client-active-chip,
.client-logo-wrap.relationship-ended .client-active-chip { color:#9b2d2d; background:#ffe1e1; }

.hero-main-copy > p {
  max-width:720px;
  margin:12px 0;
  font-size:14px;
  line-height:1.55;
}

.hero-command-panel {
  display:grid;
  gap:12px;
  min-width:0;
}

.hero-command-heading {
  display:grid;
  gap:7px;
  min-width:0;
  padding:10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(255,255,255,.06);
}

.hero-command-heading > .eyebrow {
  color:#75c9f2;
  font-size:9px;
}

.hero-metrics-panel {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.hero-topline .hero-metrics-panel:has(> :only-child) {
  grid-template-columns:minmax(150px,220px);
}

.hero-topline .hero-metrics-panel:has(> :nth-child(2):last-child) {
  grid-template-columns:repeat(2,minmax(140px,1fr));
}

.hero-metrics-panel .hero-status-widget,
.hero-metrics-panel .hero-approval-notice,
.hero-attention-widget {
  min-width:0;
  min-height:76px;
  grid-template-columns:42px minmax(0,1fr);
  gap:9px;
  margin:0;
  padding:10px;
  border-radius:17px;
  text-align:left;
}

.hero-metrics-panel .hero-status-widget strong,
.hero-metrics-panel .hero-status-widget small {
  display:block;
  min-width:0;
}

.hero-metrics-panel .hero-status-widget strong {
  font-size:12px;
  line-height:1.18;
}

.hero-metrics-panel .hero-status-widget p,
.hero-metrics-panel .hero-status-widget small {
  margin:3px 0 0;
  color:rgba(255,255,255,.72);
  font-size:9px;
  line-height:1.22;
  font-weight:800;
}

.hero-metrics-panel .service-orbit,
.hero-metrics-panel .progress-ring,
.hero-metric-icon {
  width:42px;
  height:42px;
  min-width:42px;
}

.hero-metrics-panel .service-orbit-count,
.hero-metrics-panel .progress-ring span {
  font-size:12px;
}

.hero-metrics-panel .service-orbit {
  position:relative !important;
  display:grid !important;
  place-items:center !important;
}

.hero-metrics-panel .service-orbit .service-orbit-count {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center !important;
  letter-spacing:0 !important;
}

.hero-attention-widget {
  border:1px solid rgba(255,173,66,.46);
  background:linear-gradient(135deg,rgba(255,143,44,.92),rgba(255,190,87,.78));
  color:var(--navy);
  box-shadow:0 14px 30px rgba(255,143,44,.16);
  font:inherit;
  cursor:pointer;
}

.hero-attention-widget .hero-metric-icon {
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#c45a00;
  background:rgba(255,255,255,.88);
}

.hero-attention-widget .hero-metric-icon svg {
  width:20px;
  height:20px;
}

.hero-attention-widget small {
  color:rgba(20,45,68,.72) !important;
}

.hero-shortcut-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.hero-shortcut {
  position:relative;
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  color:#fff;
  background:rgba(255,255,255,.09);
  text-decoration:none;
  font-family:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.hero-requirement-shortcut {
  text-align:left;
}

.hero-shortcut:hover {
  transform:translateY(-1px);
  background:rgba(91,168,212,.20);
  border-color:rgba(91,168,212,.42);
}

.hero-shortcut svg {
  width:20px;
  height:20px;
  flex:0 0 auto;
  color:#74c5ef;
}

.hero-shortcut .notification-bubble {
  top:-6px;
  right:-5px;
  box-shadow:0 0 0 3px #173552;
}

.dedicated-member-card {
  gap:9px;
  width:100%;
  margin:0;
  padding:7px 9px 7px 7px;
}

.dedicated-avatar-wrap {
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
}

.dedicated-member-avatar {
  width:34px;
  height:34px;
}

.dedicated-member-card strong { font-size:12px; }
.dedicated-member-card small { font-size:9px; }
.dedicated-member-card .requirement-chat-button {
  min-height:32px;
  padding:7px 10px;
  font-size:10px;
}

.client-operations-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}

.client-operations-grid > .card {
  min-width:0;
  height:min(560px,68vh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.client-operations-grid:has(.service-home-card[style*="display: none"]) {
  grid-template-columns:1fr;
}

.client-operations-grid > .card > .card-head {
  flex:0 0 auto;
  padding:18px 20px 14px;
}

.client-operations-grid > .card > .card-head h2 {
  margin-top:3px;
  font-size:23px;
}

.client-operations-grid > .card > .card-head .muted {
  margin-top:5px;
  font-size:12px;
}

.client-operations-grid > .card > .card-body {
  flex:1 1 auto;
  min-height:0;
  padding:14px 16px 16px;
  overflow:hidden;
}

.communication-home-card .update-list,
.service-home-card .service-buttons {
  height:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

.service-home-card .service-buttons {
  grid-template-columns:1fr;
  align-content:start;
  gap:10px;
}

.service-home-card .service-button {
  min-height:0;
  padding:13px;
  border-radius:18px;
}

.service-home-card .service-button h3 {
  font-size:14px;
}

.project-workroom {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);
  grid-template-areas:"projects progress";
}

/* Files categories open to a useful two-row viewport, then scroll internally. */
.key-work-file-folder[open] {
  min-height:410px;
}

.key-work-file-folder[open] .key-work-file-list {
  min-height:330px;
  max-height:520px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:18px;
  scroll-padding-bottom:192px;
  scrollbar-gutter:stable;
  overscroll-behavior-y:auto;
}

.client-key-work-files-panel .key-work-file-list,
#tab-key-work .key-work-file-list {
  grid-template-columns:repeat(auto-fill,minmax(165px,210px));
  justify-content:start;
}

.key-work-file-list::after {
  content:"";
  display:block;
  grid-column:1 / -1;
  width:100%;
  height:180px;
  pointer-events:none;
}

.key-work-file-card {
  gap:7px;
  padding:8px;
}

.key-work-file-preview {
  min-height:92px;
  max-height:116px;
}

.key-work-file-copy {
  min-height:40px;
}

.key-work-file-actions {
  gap:6px;
}

.key-work-file-actions .button {
  min-height:32px;
  padding:7px 8px;
  font-size:9px;
}

.key-work-files-panel {
  grid-template-rows:auto auto minmax(0,1fr);
}

.key-work-folder-grid {
  padding-bottom:48px;
  scroll-padding-bottom:180px;
  overscroll-behavior-y:auto;
}

.key-work-file-filters {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:8px 10px;
  border:1px solid rgba(91,168,212,.18);
  border-radius:16px;
  background:rgba(255,255,255,.74);
}

.key-work-file-filter-presets,
.key-work-file-filter-range {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.key-work-file-filter-presets button {
  min-height:32px;
  padding:7px 11px;
  border:1px solid rgba(18,40,64,.10);
  border-radius:999px;
  color:var(--navy);
  background:#fff;
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.key-work-file-filter-presets button.active {
  border-color:var(--navy);
  color:#fff;
  background:var(--navy);
}

.key-work-file-filter-range label {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.key-work-file-filter-range input {
  width:126px;
  min-height:32px;
  padding:5px 7px;
  border:1px solid rgba(18,40,64,.12);
  border-radius:10px;
  color:var(--navy);
  background:#fff;
  font:inherit;
  font-size:10px;
}

@media (max-width:900px) {
  body:not(.admin-page) .hero-grid {
    grid-template-columns:1fr;
    gap:18px;
  }

  .hero-topline {
    grid-template-columns:auto minmax(0,1fr);
  }

  .client-operations-grid {
    grid-template-columns:1fr;
  }

  .client-operations-grid > .card {
    height:min(500px,68vh);
  }

  .project-workroom {
    grid-template-columns:1fr;
    grid-template-areas:
      "projects"
      "progress";
  }
}

@media (max-width:680px) {
  body:not(.admin-page) .hero-card {
    padding:22px 20px;
  }

  .hero-main-copy > p {
    font-size:12px;
    line-height:1.45;
  }

  .hero-topline {
    grid-template-columns:1fr;
    align-items:start;
    gap:16px;
  }

  .client-logo-wrap {
    margin-left:2px;
  }

  .hero-metrics-panel {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .hero-metrics-panel .hero-status-widget,
  .hero-attention-widget {
    grid-template-columns:34px minmax(0,1fr);
    min-height:66px;
    padding:8px;
  }

  .hero-metrics-panel .service-orbit,
  .hero-metrics-panel .progress-ring,
  .hero-metric-icon {
    width:34px;
    height:34px;
    min-width:34px;
  }

  .hero-shortcut-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-shortcut {
    min-height:44px;
  }

  .dedicated-member-card,
  .dedicated-member-card.requirement-contact-card,
  .dedicated-member-card:has(.requirement-chat-button) {
    width:100%;
    border-radius:18px;
  }

  .client-operations-grid > .card {
    height:480px;
    max-height:68vh;
  }

  .key-work-file-folder[open] {
    min-height:330px;
  }

  .key-work-file-folder[open] .key-work-file-list {
    min-height:240px;
    max-height:280px;
  }

  .key-work-file-filters {
    align-items:stretch;
    flex-direction:column;
  }

  .key-work-file-filter-presets {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .key-work-file-filter-presets button {
    padding-inline:5px;
  }

  .key-work-file-filter-range {
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .key-work-file-filter-range label {
    align-items:stretch;
    flex-direction:column;
  }

  .key-work-file-filter-range input {
    width:100%;
  }
}

@media (max-width:760px) {
  body:not(.admin-page) .client-key-work-board {
    height:min(430px, 54vh) !important;
    max-height:430px !important;
  }

  body:not(.admin-page) .client-key-work-view-shell {
    grid-template-rows:auto minmax(0,min(430px,54vh));
  }

  body:not(.admin-page) .client-key-work-view-shell > .client-key-work-board,
  body:not(.admin-page) .client-key-work-view-shell > .client-key-work-calendar,
  body:not(.admin-page) .client-key-work-view-shell > .client-key-work-files-panel {
    height:min(430px,54vh) !important;
    min-height:min(430px,54vh);
    max-height:430px !important;
  }

  .key-work-files-panel {
    padding:9px;
    border-radius:18px;
  }

  .key-work-files-summary {
    align-items:flex-start;
  }

  .key-work-files-summary h4 {
    font-size:17px;
  }

  .key-work-files-summary small {
    display:none;
  }

  .key-work-file-list {
    grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
    padding:0 9px 9px;
  }

  .key-work-file-preview {
    min-height:112px;
  }

  .key-work-head-tools {
    width:auto !important;
    flex:0 0 auto;
    align-items:flex-start;
    justify-content:flex-end;
    gap:6px;
  }

  .key-work-view-switch {
    width:92px !important;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:4px;
    padding:4px;
    border-radius:18px;
  }

  .key-work-view-switch button {
    width:100%;
    flex:0 0 auto;
    min-height:28px;
    padding:6px 7px;
    font-size:9px;
    line-height:1;
  }

  .mobile-client-picker-badge.is-visible {
    display:inline-grid;
    place-items:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:var(--green);
    color:#073A19;
    font-size:10px;
    font-weight:1000;
    box-shadow:0 0 0 4px rgba(37,211,102,.14), 0 10px 22px rgba(37,211,102,.24);
  }

  .key-work-calendar {
    padding:8px;
    border-radius:20px;
  }

  .key-work-calendar-head {
    gap:10px;
  }

  .key-work-calendar-head h4 {
    font-size:18px;
  }

  .key-work-calendar-controls button {
    min-height:30px;
    padding:6px 9px;
    font-size:12px;
  }

  .key-work-calendar-weekdays,
  .key-work-calendar-grid {
    gap:5px;
  }

  .key-work-calendar-weekdays span {
    font-size:9px;
  }

  .key-work-calendar-day {
    min-height:86px;
    padding:6px;
    border-radius:13px;
  }

  .key-work-calendar-date {
    width:22px;
    height:22px;
    font-size:10px;
  }

  .key-work-calendar-card {
    padding:5px 6px;
    border-radius:10px;
  }

  .key-work-calendar-card strong {
    font-size:9.5px;
  }

  .key-work-calendar-card span {
    font-size:8.5px;
  }

  .key-work-media-preview-item:has(.media-embed-frame) {
    overflow:hidden;
    border-radius:18px;
  }

  .vertical-video-preview {
    width:min(280px, 100%);
    max-width:100%;
  }

  .media-embed-vertical {
    width:100%;
    min-height:0;
    aspect-ratio:9 / 16;
    border-radius:16px;
  }

  .media-embed-frame-vertical {
    width:100%;
    min-height:0;
    aspect-ratio:9 / 16;
    border-radius:16px;
  }

  .media-embed-horizontal {
    width:100%;
    min-height:0;
    max-height:none;
    aspect-ratio:16 / 9;
    border-radius:16px;
  }

  .media-embed-frame-horizontal {
    width:100%;
    min-height:0;
    max-height:none;
    aspect-ratio:16 / 9;
    border-radius:16px;
  }

  .media-embed-frame iframe.media-embed {
    position:absolute;
    inset:-2px;
    width:calc(100% + 4px);
    height:calc(100% + 4px);
    border-radius:0;
  }

  .media-embed-frame-drive iframe.media-embed {
    inset:0;
    width:100%;
    height:100%;
  }

  .media-embed-frame .media-native-video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:0;
    object-fit:contain;
  }

  .horizontal-video-preview,
  .vertical-video-preview {
    overflow:hidden;
  }
}

/* Admin tab scroll safety: non Key-Work sections must remain usable inside the fixed workspace. */
#workspaceCard > .card-body .admin-panel.active:not(#tab-key-work) {
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:4px;
}