: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);
}

/* Command 102: compact, task-aware Google Drive upload controls. */
.key-work-asset-switch button:disabled,
#addKeyWorkMediaBtn:disabled,
[data-broll-upload-trigger]:disabled,
[data-drive-upload-trigger]:disabled,
[data-thumbnail-drive-upload-trigger]:disabled {
  opacity:.42;
  cursor:not-allowed;
  filter:grayscale(.25);
  box-shadow:none;
}

.drive-dropzone.is-disabled {
  opacity:.48;
  pointer-events:none;
}

.media-thumbnail-panel {
  border:1px solid rgba(91,168,212,.24);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(235,247,253,.72));
  overflow:hidden;
}

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

.media-thumbnail-panel > summary {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 13px;
  color:var(--navy,#17314d);
  font-weight:800;
  cursor:pointer;
  list-style-position:inside;
}

.media-thumbnail-options {
  display:grid;
  gap:10px;
  padding:0 12px 12px;
}

.media-thumbnail-options .media-thumbnail-field {
  margin:0;
}

.thumbnail-drive-dropzone {
  min-height:132px;
  margin:0;
  padding:14px 12px;
}

.comment-drive-dropzone {
  min-height:104px;
  margin:0;
  padding:12px;
}

.comment-drive-dropzone .drive-dropzone-icon {
  width:32px;
  height:32px;
}

@media (max-width:720px) {
  .media-thumbnail-options {
    padding:0 10px 10px;
  }

  .thumbnail-drive-dropzone,
  .comment-drive-dropzone {
    min-height:0;
    padding:10px;
  }
}

/* Command 103: comment uploads stay compact until explicitly opened. */
.comment-attachment-details {
  min-width:0;
  border:1px solid rgba(91,168,212,.22);
  border-radius:16px;
  background:rgba(247,251,254,.9);
  overflow:hidden;
}

.comment-attachment-details > summary {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:9px 14px;
  color:var(--navy,#17314d);
  font-weight:800;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.comment-attachment-details > summary::-webkit-details-marker {
  display:none;
}

.comment-attachment-details > summary svg {
  width:18px;
  height:18px;
}

.comment-attachment-details[open] > summary {
  border-bottom:1px solid rgba(91,168,212,.18);
  background:rgba(230,245,252,.72);
}

.comment-attachment-panel {
  display:grid;
  gap:8px;
  padding:10px;
}

.comment-attachment-panel .comment-drive-dropzone {
  min-height:96px;
}

@media (max-width:720px) {
  .comment-attachment-details > summary {
    min-height:42px;
    padding:8px 12px;
  }

  .comment-attachment-panel {
    padding:8px;
  }

  .comment-attachment-panel .comment-drive-dropzone {
    min-height:0;
  }
}

/* Task-to-task modal navigation follows the active pipeline or search sequence. */
.key-work-modal-sequence-nav {
  appearance:none;
  position:fixed;
  top:50%;
  z-index:10040;
  display:grid;
  place-items:center;
  width:48px;
  height:64px;
  padding:0;
  border:1px solid rgba(121,188,222,.48);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:var(--navy);
  box-shadow:0 14px 34px rgba(14,43,68,.22);
  cursor:pointer;
  transform:translateY(-50%);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.key-work-modal-sequence-nav.is-previous { left:10px; }
.key-work-modal-sequence-nav.is-next { right:10px; }
.key-work-modal-sequence-nav span {
  display:block;
  font-size:38px;
  font-weight:700;
  line-height:1;
  transform:translateY(-2px);
}
.key-work-modal-sequence-nav:hover:not(:disabled),
.key-work-modal-sequence-nav:focus-visible:not(:disabled) {
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 18px 40px rgba(14,43,68,.3);
  outline:3px solid rgba(84,174,216,.3);
  outline-offset:2px;
}
.key-work-modal-sequence-nav:disabled {
  opacity:.22;
  cursor:default;
  box-shadow:none;
}
@media (max-width:720px) {
  .key-work-modal-sequence-nav {
    top:48%;
    width:38px;
    height:52px;
    background:rgba(255,255,255,.92);
  }
  .key-work-modal-sequence-nav.is-previous { left:2px; }
  .key-work-modal-sequence-nav.is-next { right:2px; }
  .key-work-modal-sequence-nav span { font-size:31px; }
}

.portal-forgot-pin-link {
  width:max-content;
  margin:-4px 0 2px auto;
  padding:4px 0;
  border:0;
  background:transparent;
  color:#348ebd;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.portal-forgot-pin-link:hover { color:#142f49; text-decoration:underline; }
.portal-forgot-pin-card[hidden],
.portal-login-form-card[hidden] { display:none !important; }
.portal-forgot-pin-card > div > p { margin:8px 0 0; color:#657d91; line-height:1.6; }

/* 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;
  }
}

/* Command 91: mobile Key-Work controls occupy distinct rows without overlap. */
@media (max-width:760px) {
  body.admin-page #tab-key-work.active .key-work-head {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto auto;
    align-items:stretch;
    gap:8px;
  }

  body.admin-page #tab-key-work.active .key-work-head-title,
  body.admin-page #tab-key-work.active .key-work-search-slot,
  body.admin-page #tab-key-work.active .key-work-view-slot {
    grid-column:1 !important;
    width:100%;
    min-width:0;
    justify-self:stretch;
  }

  body.admin-page #tab-key-work.active .key-work-head-title { grid-row:1; }
  body.admin-page #tab-key-work.active .key-work-search-slot { grid-row:2; }
  body.admin-page #tab-key-work.active .key-work-view-slot { grid-row:3; }

  body.admin-page #tab-key-work.active .key-work-head-title h3 {
    font-size:20px;
    line-height:1.08;
  }

  body.admin-page #tab-key-work.active .key-work-search-slot:empty {
    display:none;
  }

  body.admin-page #tab-key-work.active .key-work-view-switch,
  body:not(.admin-page) .client-key-work-toolbar .key-work-view-switch {
    width:100% !important;
    max-width:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
  }

  body:not(.admin-page) .client-key-work-toolbar {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:8px;
  }

  body:not(.admin-page) .client-key-work-toolbar .key-work-task-search,
  body:not(.admin-page) .client-key-work-toolbar .key-work-view-switch {
    width:100%;
    min-width:0;
  }

  .key-work-file-filters {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:8px;
    overflow:hidden;
  }

  .key-work-file-search,
  .key-work-file-filter-presets,
  .key-work-file-filter-range {
    order:initial;
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .key-work-file-search {
    min-height:38px;
    height:auto;
    flex:0 0 auto;
    flex-basis:auto;
    border-radius:14px;
  }

  .key-work-file-filter-presets {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }

  .key-work-file-filter-presets button {
    width:100%;
    min-width:0;
    padding:6px 3px;
    font-size:8.5px;
    white-space:nowrap;
  }

  .key-work-file-filter-range {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  .key-work-file-filter-range label,
  .key-work-file-filter-range input {
    width:100%;
    min-width:0;
  }

  .workspace-actions {
    grid-template-columns:38px 38px repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:6px;
  }

  .workspace-actions .workspace-chat-button {
    width:38px !important;
    min-width:38px;
    height:38px;
  }

  .workspace-actions > .button {
    min-height:38px;
    padding:6px 4px;
    font-size:8.5px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
  }

  .otp-resend-button {
    width:100%;
    margin-top:6px;
  }
}

/* Command 89: the desktop Team shell owns the viewport; panels keep their own scroll. */
@media (min-width:761px) {
  html:has(body.admin-page),
  body.admin-page {
    height:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:hidden;
  }

  body.admin-page {
    padding-bottom:0;
  }
}

/* Command 88: roomy team workspace, reliable autosave feedback and bulk task tools. */
.key-work-primary-actions {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.key-work-bulk-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
  padding:9px 12px;
  border:1px solid rgba(91,168,212,.28);
  border-radius:16px;
  background:linear-gradient(135deg,#eef9ff,#fff);
  color:var(--navy);
  box-shadow:0 9px 22px rgba(18,40,64,.06);
}

.key-work-bulk-bar strong { font-size:11px; }
.key-work-bulk-bar > div { display:flex; align-items:center; gap:7px; }
.key-work-bulk-bar .button:disabled { opacity:.46; cursor:not-allowed; box-shadow:none; }

.key-work-card.is-selectable { cursor:pointer; padding-left:42px; }
.key-work-card.is-selected {
  border-color:#40aee4;
  box-shadow:0 0 0 3px rgba(64,174,228,.16),0 14px 30px rgba(18,40,64,.1);
}
.key-work-card-selector {
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(91,168,212,.34);
  border-radius:8px;
  background:#fff;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 15px rgba(18,40,64,.1);
}
.key-work-card-selector input { position:absolute; opacity:0; pointer-events:none; }
.key-work-card-selector span { font-size:12px; font-weight:1000; opacity:0; }
.key-work-card-selector:has(input:checked) { border-color:#3ca8dd; background:#3ca8dd; }
.key-work-card-selector:has(input:checked) span { opacity:1; }

.key-work-modal-actions { position:relative; }
.key-work-autosave-status {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  margin-right:auto;
  padding:5px 9px;
  border-radius:999px;
  background:#edf5fa;
  color:#64798d;
  font-size:9px;
  font-weight:950;
  white-space:nowrap;
}
.key-work-autosave-status.is-saving,
.key-work-autosave-status.is-pending { background:#fff4d7; color:#9a6900; }
.key-work-autosave-status.is-saved { background:#e2f8eb; color:#158148; }
.key-work-autosave-status.is-error { background:#ffe7e7; color:#bd3030; }

@media (min-width:1100px) {
  body.admin-page .wrap {
    width:min(1840px,calc(100% - clamp(32px,3.5vw,72px)));
    max-width:none;
  }
  body.admin-page .admin-shell {
    grid-template-columns:280px minmax(0,1fr);
    gap:16px;
  }
}

@media (min-width:1500px) {
  body.admin-page .admin-shell { grid-template-columns:292px minmax(0,1fr); }
}

@media (max-width:760px) {
  .key-work-bulk-bar {
    position:sticky;
    top:0;
    z-index:18;
    align-items:flex-start;
    padding:8px;
    border-radius:14px;
  }
  .key-work-bulk-bar > div { flex-wrap:wrap; justify-content:flex-end; }
  .key-work-bulk-bar .button { min-height:30px; padding:6px 8px; font-size:8px; }
  body.admin-page #tab-key-work.active .key-work-primary-actions {
    position:fixed;
    left:50%;
    bottom:36px;
    z-index:64;
    gap:6px;
    transform:translateX(-50%);
  }
  body.admin-page #tab-key-work.active .key-work-add-button {
    position:static;
    left:auto;
    bottom:auto;
    min-width:142px;
    transform:none;
  }
  body.admin-page #tab-key-work.active .key-work-bulk-toggle {
    min-height:36px;
    padding:8px 11px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 12px 28px rgba(18,40,64,.18);
    font-size:9px;
    white-space:nowrap;
  }
  .key-work-autosave-status {
    position:absolute;
    top:-23px;
    right:8px;
    z-index:4;
    min-height:20px;
    margin:0;
    padding:3px 7px;
    box-shadow:0 6px 15px rgba(18,40,64,.1);
    font-size:7px;
  }
}

/* Command 91 final cascade: compact, non-overlapping mobile controls. */
@media (max-width:760px) {
  body.admin-page #tab-key-work.active .key-work-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    align-items:stretch !important;
    gap:8px !important;
  }

  body.admin-page #tab-key-work.active .key-work-head-title,
  body.admin-page #tab-key-work.active .key-work-search-slot,
  body.admin-page #tab-key-work.active .key-work-view-slot {
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }

  body.admin-page #tab-key-work.active .key-work-head-title { grid-row:1 !important; }
  body.admin-page #tab-key-work.active .key-work-search-slot { grid-row:2 !important; }
  body.admin-page #tab-key-work.active .key-work-view-slot { grid-row:3 !important; }

  body.admin-page #tab-key-work.active .key-work-search-slot:empty { display:none !important; }

  #tab-key-work .key-work-view-switch,
  .client-key-work-view-shell .key-work-view-switch {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100% !important;
    gap:3px !important;
  }

  #tab-key-work .key-work-view-switch button,
  .client-key-work-view-shell .key-work-view-switch button {
    min-width:0 !important;
    padding:5px 2px !important;
    overflow:hidden !important;
    font-size:8px !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .key-work-file-filters {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:8px !important;
    overflow:visible !important;
  }

  .key-work-file-search,
  .key-work-file-filter-presets,
  .key-work-file-filter-range {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .key-work-file-search {
    order:1 !important;
    flex:0 0 auto !important;
    flex-basis:auto !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 12px !important;
    border-radius:14px !important;
  }

  .key-work-file-filter-presets {
    order:2 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .key-work-file-filter-presets button {
    width:100% !important;
    min-width:0 !important;
    padding:6px 2px !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }

  .key-work-file-filter-range {
    order:3 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .key-work-file-filter-range label,
  .key-work-file-filter-range input {
    width:100% !important;
    min-width:0 !important;
  }

  .workspace-actions {
    display:grid !important;
    grid-template-columns:38px 38px repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:6px !important;
  }

  .workspace-actions .workspace-chat-button {
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }

  .workspace-actions > .button {
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 5px !important;
    font-size:8px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  .login-otp-resend {
    width:100% !important;
    margin-top:8px !important;
  }
}

/* Task modal scroll and comment action safety. */
.key-work-modal-card {
  overflow:hidden !important;
}

.key-work-modal-main,
.key-work-task-form {
  min-height:0;
  max-height:88vh;
  overflow:hidden;
}

.key-work-form-scroll,
.key-work-client-content-scroll {
  height:100%;
  min-height:0;
  max-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding-bottom:44px;
}

.key-work-comment-list {
  min-height:0;
  max-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:2px 6px 32px 0;
}

.key-work-comment,
.key-work-comment-thread,
.key-work-thread-replies {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}

.key-work-comment:not(.key-work-system-log) {
  padding-right:48px;
}

.key-work-comment-head .comment-reply-button,
.key-work-comment-head .comment-delete-button {
  position:absolute;
  right:-1px;
  z-index:4;
  width:38px;
  min-width:38px;
  height:30px;
  min-height:30px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:12px 0 0 12px;
  box-shadow:0 7px 16px rgba(18,40,64,.08);
}

.key-work-comment-head .comment-reply-button {
  top:42px;
  font-size:0;
}

.key-work-comment-head .comment-reply-button::before {
  content:"↩";
  font-size:16px;
  line-height:1;
}

.key-work-comment-head .comment-delete-button {
  top:76px;
  border:1px solid rgba(213,77,77,.14);
}

.media-folder-button {
  border-color:rgba(91,168,212,.30);
  background:linear-gradient(135deg,rgba(223,243,254,.96),#fff);
}

@media (max-width:760px) {
  .key-work-modal-main,
  .key-work-task-form {
    max-height:100%;
  }

  .key-work-form-scroll,
  .key-work-client-content-scroll {
    padding-bottom:76px;
  }

  .media-folder-button span {
    display:none;
  }
}

* { 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;
}

.team-inbox-menu {
  position:relative;
}

.team-inbox-trigger {
  position:relative;
  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:900;
  cursor:pointer;
}

.team-inbox-trigger:hover,
.team-inbox-trigger[aria-expanded="true"] {
  background:rgba(91,168,212,.3);
}

.team-inbox-trigger svg {
  width:18px;
  height:18px;
}

.team-inbox-trigger b {
  position:absolute;
  top:-7px;
  right:-6px;
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:2px solid var(--navy);
  border-radius:999px;
  background:#ef5350;
  color:#fff;
  font-size:10px;
  line-height:1;
  box-shadow:0 6px 16px rgba(239,83,80,.34);
}

.team-inbox-panel {
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:70;
  width:min(460px, calc(100vw - 24px));
  max-height:min(720px, calc(100vh - 92px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:12px;
  padding:16px;
  overflow:hidden;
  border:1px solid rgba(91,168,212,.3);
  border-radius:24px;
  background:rgba(255,255,255,.98);
  box-shadow:0 28px 70px rgba(18,40,64,.28);
  color:var(--navy);
}

.team-inbox-panel[hidden] { display:none; }

.team-inbox-panel > header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.team-inbox-panel > header small,
.team-inbox-panel > header strong { display:block; }
.team-inbox-panel > header small { color:var(--blue); font-size:9px; font-weight:1000; letter-spacing:1.8px; }
.team-inbox-panel > header strong { margin-top:3px; font-size:20px; }
.team-inbox-panel > header > span:last-child { color:var(--muted); font-size:9px; text-align:right; }

.team-inbox-summary {
  display:grid;
  gap:3px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(91,168,212,.15),rgba(41,174,96,.1));
}

.team-inbox-summary strong { font-size:13px; }
.team-inbox-summary span { color:var(--muted); font-size:11px; line-height:1.45; }

.team-inbox-list {
  min-height:0;
  display:grid;
  align-content:start;
  gap:12px;
  overflow-y:auto;
  padding-right:4px;
}

.team-inbox-client-group {
  overflow:hidden;
  border:1px solid rgba(18,40,64,.1);
  border-radius:18px;
  background:#fff;
}

.team-inbox-client-head,
.team-inbox-item {
  width:100%;
  border:0;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.team-inbox-client-head {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  background:#f4f9fc;
  color:var(--navy);
}

.team-inbox-client-head > span:nth-child(2) { min-width:0; }
.team-inbox-client-head strong,
.team-inbox-client-head small { display:block; }
.team-inbox-client-head strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.team-inbox-client-head small { margin-top:2px; color:var(--muted); font-size:10px; }
.team-inbox-client-head > span:last-child { font-size:24px; }

.team-inbox-client-logo {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(91,168,212,.25);
  border-radius:12px;
  background:#fff;
  font-size:10px;
  font-weight:900;
}
.team-inbox-client-logo img { width:100%; height:100%; object-fit:contain; }

.team-inbox-client-items { display:grid; gap:1px; background:rgba(18,40,64,.07); }
.team-inbox-item {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:12px;
  background:#fff;
  color:var(--navy);
}
.team-inbox-item:hover { background:#f8fcff; }
.team-inbox-item-count {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(91,168,212,.16);
  color:#24759e;
  font-size:11px;
  font-weight:1000;
}
.team-inbox-item.is-high .team-inbox-item-count { background:#fff0df; color:#b36100; }
.team-inbox-item.is-urgent .team-inbox-item-count { background:#ffe7e6; color:#c83430; }
.team-inbox-item strong,
.team-inbox-item small,
.team-inbox-item em { display:block; }
.team-inbox-item strong { font-size:12px; line-height:1.3; }
.team-inbox-item small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.4; }
.team-inbox-item em { margin-top:6px; color:#2d779d; font-size:9px; font-style:normal; font-weight:900; text-transform:uppercase; }
.team-inbox-empty { padding:28px 14px; color:var(--muted); text-align:center; }

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.assigned-tasks-trigger {
  position:relative;
  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(136,111,219,.2);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.assigned-tasks-trigger:hover { transform:translateY(-1px); background:rgba(136,111,219,.38); }
.assigned-tasks-trigger svg { width:18px; height:18px; }
.assigned-tasks-trigger b {
  position:absolute;
  top:-7px;
  right:-6px;
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:2px solid var(--navy);
  border-radius:999px;
  background:#8a67d8;
  color:#fff;
  font-size:10px;
  line-height:1;
  box-shadow:0 6px 16px rgba(102,72,176,.35);
}

.assigned-tasks-modal-card {
  width:min(920px, calc(100vw - 32px));
  max-height:min(860px, calc(100dvh - 32px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
}
.assigned-tasks-modal-card .modal-head { margin-bottom:0; }
.assigned-tasks-modal-card .modal-head p { max-width:650px; margin:5px 0 0; font-size:12px; }
.assigned-tasks-toolbar {
  display:grid;
  grid-template-columns:minmax(210px,1fr) minmax(220px,.9fr) minmax(150px,.45fr);
  gap:10px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(18,40,64,.1);
}
.assigned-tasks-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; color:var(--navy); }
.assigned-tasks-summary strong { font-size:15px; }
.assigned-tasks-summary span { color:var(--muted); font-size:11px; }
.assigned-tasks-search input,
.assigned-tasks-filter select {
  width:100%;
  min-height:44px;
  margin:0;
  border:1px solid rgba(18,40,64,.13);
  border-radius:14px;
  background:#f7fbfd;
  color:var(--navy);
  font:inherit;
  font-size:12px;
  font-weight:700;
}
.assigned-tasks-list {
  min-height:0;
  display:grid;
  align-content:start;
  gap:12px;
  padding:14px 5px 12px 0;
  overflow-y:auto;
}
.assigned-tasks-client-group {
  overflow:hidden;
  border:1px solid rgba(91,168,212,.24);
  border-radius:20px;
  background:#fff;
}
.assigned-tasks-client-head {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:12px 14px;
  background:linear-gradient(135deg,#eef8fd,#f8f6ff);
}
.assigned-tasks-client-head strong,
.assigned-tasks-client-head small { display:block; }
.assigned-tasks-client-head strong { color:var(--navy); font-size:14px; }
.assigned-tasks-client-head small { margin-top:2px; color:var(--muted); font-size:10px; }
.assigned-tasks-client-logo {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(91,168,212,.28);
  border-radius:13px;
  background:#fff;
  font-size:10px;
  font-weight:900;
}
.assigned-tasks-client-logo img { width:100%; height:100%; object-fit:contain; }
.assigned-tasks-client-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(18,40,64,.08); }
.assigned-task-row {
  min-width:0;
  min-height:106px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:14px;
  border:0;
  border-left:4px solid #5ba8d4;
  background:#fff;
  color:var(--navy);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.assigned-task-row:hover { background:#f8fcff; }
.assigned-task-row.priority-urgent { border-left-color:#ef5350; }
.assigned-task-row.priority-high { border-left-color:#e5ad27; }
.assigned-task-row.priority-none { border-left-color:#b5c1ca; }
.assigned-task-main { min-width:0; }
.assigned-task-main > strong,
.assigned-task-main > small { display:block; }
.assigned-task-main > strong { overflow:hidden; font-size:13px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.assigned-task-main > small { margin-top:4px; color:var(--muted); font-size:10px; }
.assigned-task-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.assigned-task-chips em {
  padding:4px 7px;
  border-radius:999px;
  background:#edf5fa;
  color:#335f78;
  font-size:8px;
  font-style:normal;
  font-weight:1000;
  text-transform:uppercase;
}
.assigned-task-chips .assigned-task-priority.is-urgent { background:#ffe8e7; color:#bd3430; }
.assigned-task-chips .assigned-task-priority.is-high { background:#fff1cf; color:#9a6800; }
.assigned-task-chips .assigned-task-preedited { background:#e8f2ff; color:#356fa3; }
.assigned-task-chips .assigned-task-comments { background:#e0f8e9; color:#197a43; }
.assigned-task-arrow { color:#5ba8d4; font-size:27px; font-weight:500; }
.assigned-tasks-empty { padding:48px 20px; color:var(--muted); text-align:center; }

@media (max-width:760px) {
  .assigned-tasks-trigger { width:44px; padding:9px; }
  .assigned-tasks-trigger > span { display:none; }
  .assigned-tasks-modal-card { width:calc(100vw - 18px); max-height:calc(100dvh - 18px); padding:16px; border-radius:22px; }
  .assigned-tasks-toolbar { grid-template-columns:1fr 1fr; }
  .assigned-tasks-summary { grid-column:1 / -1; }
  .assigned-tasks-client-items { grid-template-columns:1fr; }
  .assigned-task-row { min-height:98px; }
}

.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;
}

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
}

.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;
}

.project-mini-progress.is-complete {
  border-color:rgba(36,168,102,.34);
  background:linear-gradient(135deg,rgba(227,248,235,.96),rgba(240,252,245,.96));
  color:#126f43;
}

.project-mini-progress.is-complete small {
  color:#167a4a;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.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;
}

.mini-progress-ring.is-complete {
  background:conic-gradient(#24a866 100%, #24a866 0);
  box-shadow:0 0 0 4px rgba(36,168,102,.10);
}

.mini-progress-ring.is-complete strong {
  color:#167a4a;
  background:#f4fff8;
}

.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;
}

.workspace-key-work-button {
  color:#4f46b8;
  background:linear-gradient(145deg,#fff,#f3f1ff);
  border-color:rgba(91,90,232,.24);
}

.workspace-key-work-button.has-notifications {
  color:#fff;
  background:linear-gradient(135deg,#5b5ae8,#8b5cf6);
  border-color:rgba(91,90,232,.38);
}

.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;
}

.service-list {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.objective-list {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#objectives.objective-list {
  grid-template-columns:minmax(0,1fr);
}

.service-admin-card {
  align-content:start;
  gap:14px;
  min-height:220px;
}

.service-admin-card-head {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0;
}

.service-admin-icon,
.service-icon {
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:15px;
  color:#176f9f;
  background:#e6f5fc;
}

.service-admin-icon svg,
.service-icon svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.service-admin-icon svg .service-icon-fill,
.service-icon svg .service-icon-fill {
  fill:currentColor;
  stroke:none;
}

.service-icon-youtube { color:#d73745; background:#ffe8eb; }
.service-icon-crm { color:#8057c7; background:#f0eaff; }
.service-icon-whatsapp { color:#128c4d; background:#e4f9ed; }
.service-icon-wordpress { color:#28779e; background:#e6f3f8; }
.service-icon-social_media { color:#176f9f; background:#e6f5fc; }

.service-admin-icon.service-color-blue,
.service-icon.service-color-blue { color:#176f9f; background:#e6f5fc; }
.service-admin-icon.service-color-green,
.service-icon.service-color-green { color:#16834f; background:#e3f8eb; }
.service-admin-icon.service-color-teal,
.service-icon.service-color-teal { color:#087d7b; background:#def7f5; }
.service-admin-icon.service-color-purple,
.service-icon.service-color-purple { color:#7450bd; background:#eee8ff; }
.service-admin-icon.service-color-pink,
.service-icon.service-color-pink { color:#b83e78; background:#ffe6f1; }
.service-admin-icon.service-color-red,
.service-icon.service-color-red { color:#c93643; background:#ffe7e9; }
.service-admin-icon.service-color-orange,
.service-icon.service-color-orange { color:#b65a17; background:#fff0df; }
.service-admin-icon.service-color-gold,
.service-icon.service-color-gold { color:#986a08; background:#fff5d5; }

.service-admin-title {
  display:grid;
  gap:5px;
  min-width:0;
}

.service-admin-title h3 {
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
}

.service-cycle-chip {
  justify-self:start;
  padding:4px 8px;
  border-radius:999px;
  color:var(--muted);
  background:#f0f4f7;
  font-size:11px;
  font-weight:800;
  line-height:1;
}

.service-admin-description {
  margin:0;
  line-height:1.55;
}

.service-admin-description.is-empty { font-style:italic; }

.service-admin-actions {
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto auto;
  align-items:end;
  gap:9px;
  margin-top:auto;
}

.service-card-status { min-width:0; }
.service-edit-button { min-width:82px; }

.service-edit-modal-card {
  width:min(760px,calc(100vw - 32px));
  max-height:min(820px,calc(100dvh - 32px));
  overflow:auto;
}

.service-edit-form { padding-top:6px; }

.service-icon-picker {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:8px;
}

.service-icon-option {
  position:relative;
  display:grid;
  justify-items:center;
  gap:8px;
  min-width:0;
  padding:12px 8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.service-icon-option:hover { transform:translateY(-1px); }
.service-icon-option input { position:absolute; opacity:0; pointer-events:none; }
.service-icon-option:has(input:checked) {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(91,168,212,.14);
}
.service-icon-option strong {
  max-width:100%;
  font-size:11px;
  text-align:center;
  overflow-wrap:anywhere;
}

.service-color-picker {
  display:grid;
  grid-template-columns:repeat(8,minmax(38px,1fr));
  gap:5px;
  max-width:560px;
  margin-top:6px;
}

.service-color-option {
  position:relative;
  display:grid;
  justify-items:center;
  gap:4px;
  min-width:0;
  padding:6px 3px;
  border:1px solid rgba(18,40,64,.12);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
}

.service-color-option input { position:absolute; opacity:0; pointer-events:none; }
.service-color-option > span {
  width:20px;
  height:20px;
  border:3px solid #fff;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 1px rgba(18,40,64,.12);
}
.service-color-option strong {
  max-width:100%;
  overflow:hidden;
  font-size:8px;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.service-color-option:has(input:checked) {
  border-color:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);
}
.service-color-option.service-color-blue { color:#3d9fd1; }
.service-color-option.service-color-green { color:#24a866; }
.service-color-option.service-color-teal { color:#19a6a2; }
.service-color-option.service-color-purple { color:#8057c7; }
.service-color-option.service-color-pink { color:#d45b93; }
.service-color-option.service-color-red { color:#d94450; }
.service-color-option.service-color-orange { color:#e77a29; }
.service-color-option.service-color-gold { color:#d4a72c; }

.service-edit-footer {
  display:flex;
  justify-content:flex-end;
  padding-top:4px;
}

.project-icon-mark {
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:48px;
  height:48px;
  border:1px solid rgba(128,87,199,.18);
  border-radius:15px;
  background:linear-gradient(145deg,#f2edff,#e8f6ff);
  color:#6041a5;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.05em;
  box-shadow:0 10px 22px rgba(96,65,165,.10);
}

.project-icon-mark.project-color-blue { color:#176f9f; background:#e6f5fc; border-color:#b9dfef; }
.project-icon-mark.project-color-green { color:#16834f; background:#e3f8eb; border-color:#bce9cd; }
.project-icon-mark.project-color-teal { color:#087d7b; background:#def7f5; border-color:#ade4df; }
.project-icon-mark.project-color-purple { color:#7450bd; background:#eee8ff; border-color:#d5c8f5; }
.project-icon-mark.project-color-pink { color:#b83e78; background:#ffe6f1; border-color:#f4bfd7; }
.project-icon-mark.project-color-red { color:#c93643; background:#ffe7e9; border-color:#f2bdc2; }
.project-icon-mark.project-color-orange { color:#b65a17; background:#fff0df; border-color:#f1cda8; }
.project-icon-mark.project-color-gold { color:#986a08; background:#fff5d5; border-color:#eedb95; }

.project-admin-card,
.project-client-card { border-left-width:4px; }
.project-card-color-blue { border-left-color:#3d9fd1; }
.project-card-color-green { border-left-color:#24a866; }
.project-card-color-teal { border-left-color:#19a6a2; }
.project-card-color-purple { border-left-color:#8057c7; }
.project-card-color-pink { border-left-color:#d45b93; }
.project-card-color-red { border-left-color:#d94450; }
.project-card-color-orange { border-left-color:#e77a29; }
.project-card-color-gold { border-left-color:#d4a72c; }

.project-icon-input-wrap {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(110px,160px);
  align-items:center;
  gap:12px;
  margin-top:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f8fbfd;
}

.project-icon-input-wrap > span:not(.project-icon-mark) {
  display:grid;
  gap:3px;
}

.project-icon-input-wrap small {
  color:var(--muted);
  font-size:11px;
}

.project-icon-input-wrap input {
  text-align:center;
  text-transform:uppercase;
  font-weight:1000;
  letter-spacing:.08em;
}

.project-client-card {
  min-height:180px;
  align-content:start;
}

.project-client-card.is-complete {
  border-color:rgba(36,168,102,.35);
  border-left-color:#24a866;
  background:linear-gradient(145deg,#fff 0%,#f4fff8 100%);
  box-shadow:0 12px 28px rgba(36,168,102,.09);
}

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

.project-client-content {
  display:grid;
  gap:7px;
  min-width:0;
}

.project-client-content h3,
.project-client-content p {
  margin:0;
  overflow-wrap:anywhere;
}

.project-admin-card .objective-status-stack {
  width:142px;
  min-width:142px;
  max-width:142px;
}

.project-client-card .objective-status-stack {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  justify-items:stretch;
  width:100%;
  min-width:0;
  max-width:none;
}

.project-client-card .project-mini-progress {
  width:auto;
  min-width:118px;
  max-width:190px;
}

.service-button .service-icon {
  width:46px;
  height:46px;
  border-radius:14px;
}

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

@media (max-width:720px) {
  .service-admin-card-head {
    grid-template-columns:auto minmax(0,1fr);
  }

  .service-admin-card-head > .pill {
    grid-column:2;
    justify-self:start;
  }

  .service-admin-actions {
    grid-template-columns:minmax(0,1fr) auto auto;
  }

  .service-icon-picker {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .service-color-picker {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .service-icon-option:last-child {
    grid-column:1 / -1;
  }

  .project-icon-input-wrap {
    grid-template-columns:auto minmax(0,1fr);
  }

  .project-icon-input-wrap input {
    grid-column:1 / -1;
  }

  .project-client-card-grid {
    grid-template-columns:auto minmax(0,1fr);
  }

  .project-client-card .objective-status-stack {
    grid-column:1 / -1;
    justify-self:start;
  }
}

.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.is-complete {
  border-color:rgba(36,168,102,.32);
  background:linear-gradient(145deg,#fff 0%,#f5fff9 100%);
}

.checklist-project-group.is-complete > summary {
  background:rgba(227,248,235,.52);
}

.checklist-summary-progress {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.checklist-complete-label {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(37,211,102,.16);
  color:#167a3b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.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:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(18,40,64,.08);
}

.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:0 0 3px;
  font-size:clamp(21px, 3vw, 28px);
  line-height:1.08;
}

.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-task-row {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}

.processed-update-task-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:5px 10px;
  border:1px solid rgba(91,168,212,.3);
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:10px;
  font-weight:950;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(18,40,64,.07);
}

.processed-update-task-link:hover {
  color:#fff;
  background:var(--navy);
  border-color:var(--navy);
}

.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;
}

.processed-update-client.has-unread-agency-reply {
  border-color:rgba(240,165,45,.58);
  background:linear-gradient(135deg, rgba(255,244,211,.98), rgba(255,255,255,.96));
  box-shadow:0 14px 34px rgba(168,104,0,.13);
}

.processed-update-client.has-unread-agency-reply .processed-update-status {
  background:#F2A93B;
  color:#3A2500;
}

.processed-update-client.has-unread-agency-reply .processed-update-body {
  border-top-color:rgba(240,165,45,.28);
}

.processed-update-client.is-client-read {
  border-color:rgba(37,211,102,.38);
  background:linear-gradient(135deg, rgba(37,211,102,.14), rgba(255,255,255,.92));
}

/* Team Updates: preserve every management action while making long conversations scannable. */
@media (min-width: 769px) {
  body.admin-page #tab-updates.active > .update-list,
  body.admin-page #tab-key-work.active .key-work-updates-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:16px;
  }

  body.admin-page #tab-updates.active > .update-list > .update,
  body.admin-page #tab-key-work.active .key-work-updates-list > .update {
    align-content:start;
    max-height:380px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(91,168,212,.72) rgba(233,241,247,.72);
  }

  body.admin-page #tab-updates.active > .update-list > .update::-webkit-scrollbar,
  body.admin-page #tab-key-work.active .key-work-updates-list > .update::-webkit-scrollbar {
    width:8px;
  }

  body.admin-page #tab-updates.active > .update-list > .update::-webkit-scrollbar-track,
  body.admin-page #tab-key-work.active .key-work-updates-list > .update::-webkit-scrollbar-track {
    border-radius:999px;
    background:rgba(233,241,247,.72);
  }

  body.admin-page #tab-updates.active > .update-list > .update::-webkit-scrollbar-thumb,
  body.admin-page #tab-key-work.active .key-work-updates-list > .update::-webkit-scrollbar-thumb {
    border-radius:999px;
    background:rgba(91,168,212,.72);
  }

  body.admin-page #tab-updates.active > .update-list > .empty,
  body.admin-page #tab-key-work.active .key-work-updates-list > .empty {
    grid-column:1 / -1;
  }
}

.notification-target-update {
  animation:clientUpdateFocus 1.15s ease-in-out 2;
}

.just-read-by-client {
  box-shadow:0 0 0 4px rgba(37,211,102,.13), 0 14px 34px rgba(18,140,69,.12);
}

@keyframes clientUpdateFocus {
  50% { box-shadow:0 0 0 6px rgba(242,169,59,.18), 0 16px 38px rgba(168,104,0,.16); }
}

.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;
}

.client-happiness-card {
  display:grid;
  grid-template-columns:auto minmax(190px,1fr);
  align-items:center;
  gap:16px;
  min-width:min(100%,390px);
  padding:12px 16px 12px 12px;
  border:1px solid rgba(215,166,45,.34);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,244,190,.78));
  box-shadow:0 18px 38px rgba(165,117,0,.14),inset 0 1px 0 rgba(255,255,255,.9);
}

.client-happiness-ring {
  display:grid;
  place-items:center;
  width:104px;
  aspect-ratio:1;
  padding:9px;
  border-radius:50%;
  background:conic-gradient(#d6a528 calc(var(--happiness) * 1%),rgba(215,166,45,.14) 0);
  box-shadow:0 10px 25px rgba(165,117,0,.18);
}

.client-happiness-ring > div {
  display:grid;
  place-content:center;
  width:100%;
  height:100%;
  border-radius:50%;
  background:#fffdf5;
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(215,166,45,.18);
}

.client-happiness-ring strong {
  color:#6b4700;
  font-size:25px;
  line-height:1;
}

.client-happiness-ring span {
  margin-top:5px;
  color:#8b6a21;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.client-happiness-copy {
  display:grid;
  gap:4px;
  min-width:0;
}

.client-happiness-kicker {
  color:#b17c08;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.client-happiness-copy > strong {
  color:var(--navy);
  font-size:16px;
  line-height:1.2;
}

.client-happiness-copy > small {
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  line-height:1.35;
}

.client-happiness-counts {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}

.client-happiness-counts span {
  padding:5px 8px;
  border:1px solid rgba(215,166,45,.2);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#765614;
  font-size:10px;
  font-weight:850;
}

.client-happiness-counts b {
  color:#5c3a00;
}

.client-happiness-card.is-empty {
  filter:saturate(.62);
}

.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 {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

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

.resource-preview-card {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  gap:0;
  min-width:0;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(91,168,212,.24);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(18,40,64,.08);
}

.resource-preview-media {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:linear-gradient(145deg,#eaf4fa,#dcebf4);
}

.resource-preview-media img,
.resource-preview-media video,
.resource-preview-media iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.resource-preview-media img { object-fit:contain; background:#f8fbfd; }
.resource-preview-media video { object-fit:contain; background:#07121c; }
.resource-preview-media iframe { background:#fff; }

.resource-preview-audio {
  aspect-ratio:auto;
  min-height:150px;
  padding:24px;
  background:linear-gradient(145deg,#17344c,#245a78);
}

.resource-preview-audio audio { width:100%; }

.resource-frame-hint {
  position:absolute;
  right:8px;
  bottom:8px;
  left:8px;
  padding:6px 8px;
  border-radius:9px;
  background:rgba(18,40,64,.84);
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:1.3;
  pointer-events:none;
}

.resource-preview-copy {
  display:grid;
  gap:12px;
  padding:15px;
}

.resource-preview-title {
  display:grid;
  gap:5px;
  min-width:0;
}

.resource-preview-title strong {
  color:var(--navy);
  font-size:14px;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.resource-preview-title span {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.resource-preview-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}

.resource-preview-actions .button {
  flex:1 1 auto;
  min-width:0;
  min-height:34px;
  padding:7px 9px;
  font-size:10px;
}

.resource-preview-dialog {
  width:min(1120px,calc(100vw - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  padding:0;
  overflow:visible;
  border:0;
  border-radius:24px;
  background:transparent;
  box-shadow:0 28px 90px rgba(3,15,25,.34);
}

.resource-preview-dialog::backdrop {
  background:rgba(10,27,42,.72);
  backdrop-filter:blur(7px);
}

.resource-preview-dialog-card {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  max-height:calc(100dvh - 32px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.48);
  border-radius:24px;
  background:#fff;
}

.resource-preview-dialog-card > header,
.resource-preview-dialog-card > footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  background:#fff;
}

.resource-preview-dialog-card > header { border-bottom:1px solid var(--line); }
.resource-preview-dialog-card > footer { border-top:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:800; }
.resource-preview-dialog-card > header div { min-width:0; }
.resource-preview-dialog-card > header span { color:var(--blue); font-size:9px; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }
.resource-preview-dialog-card > header h2 { margin:2px 0 0; color:var(--navy); font-size:18px; overflow-wrap:anywhere; }
.resource-preview-dialog-card > header button {
  width:42px;
  height:42px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f4f8fb;
  color:var(--navy);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.resource-preview-media.is-modal {
  width:100%;
  height:min(70dvh,720px);
  aspect-ratio:auto;
  background:#0a1722;
}

.resource-preview-media.is-modal img { object-fit:contain; }
.resource-preview-media.is-modal.resource-preview-audio { height:260px; }

@media (max-width:1100px) {
  .resource-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .resource-list { grid-template-columns:minmax(0,1fr); }
  .resource-card-panel { padding:12px; }
  .resource-preview-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .resource-preview-dialog-card { max-height:calc(100dvh - 16px); border-radius:18px; }
  .resource-preview-media.is-modal { height:min(64dvh,620px); }
  .resource-preview-dialog-card > footer { align-items:flex-start; flex-direction:column; }
  .resource-preview-dialog-card > footer .button { width:100%; }
}

.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;
}

.youtube-metadata-field[hidden],
.comment-reply-context[hidden] {
  display:none !important;
}

.youtube-metadata-field {
  padding:14px;
  border:1px solid rgba(215,55,69,.16);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,244,246,.86),rgba(255,255,255,.96));
}

.key-work-youtube-title-body,
.key-work-youtube-tags-body {
  border-color:rgba(215,55,69,.18);
  background:linear-gradient(135deg,rgba(255,244,246,.74),#fff);
}

.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 {
  align-items:center;
  display:inline-flex;
  justify-content: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;
  padding:0;
  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 svg {
  display:block;
  height:12px;
  width:12px;
}

.create-client-plus-button svg path {
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-width:3;
}

.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;
}

.install-help-card {
  width:min(560px, calc(100vw - 28px));
}

.client-install-app-button {
  position:relative;
  padding-left:38px;
  text-align:left;
}

.client-install-app-button::before {
  content:"↓";
  position:absolute;
  left:14px;
  top:50%;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.32);
  border-radius:6px;
  font-size:13px;
  line-height:1;
}

.client-install-app-button.is-installed {
  background:#e3f8eb;
  color:#167a4a;
  border-color:#bce9cd;
}

.client-install-app-button.is-installed::before {
  content:"✓";
  border-color:rgba(22,122,74,.28);
}

.client-install-help-card {
  width:min(620px,calc(100% - 24px));
}

.install-status-card {
  display:grid;
  gap:5px;
  padding:16px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:18px;
  background:#f6fbfe;
}

.install-status-card.is-ready {
  border-color:rgba(36,168,102,.28);
  background:#f1fcf5;
  color:#167a4a;
}

.install-status-card small {
  color:var(--muted);
  line-height:1.45;
}

@media (max-width:720px) {
  .client-install-help-card {
    max-height:calc(100dvh - 24px);
    overflow:auto;
  }
}

.install-help-content > p {
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.55;
}

.ios-install-demo {
  padding:14px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:22px;
  background:linear-gradient(145deg,#f8fcff,#eef8fd);
  box-shadow:0 14px 34px rgba(18,40,64,.08);
}

.ios-install-demo-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color:var(--navy);
}

.ios-install-demo-head span {
  color:var(--blue-deep);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ios-install-steps {
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

.ios-install-steps li {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:10px;
  border-radius:15px;
  background:#fff;
}

.ios-install-steps li > span {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.ios-install-steps strong,
.ios-install-steps small {
  display:block;
}

.ios-install-steps strong {
  color:var(--navy);
  font-size:12px;
}

.ios-install-steps small {
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}

.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;
}

.progress-editor-feedback {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}

.progress-editor-feedback > span {
  color:#167a3b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
}

.progress-editor-feedback > span[data-state="pending"],
.progress-editor-feedback > span[data-state="saving"] {
  color:#9b6b00;
}

.progress-editor-feedback > span[data-state="error"] {
  color:#b52f2f;
}

.progress-editor-feedback b {
  min-width:42px;
  color:var(--blue);
  font-size:14px;
  font-weight:1000;
  text-align:right;
}

.progress-editor > small {
  color:var(--muted);
  font-size:10px;
  font-weight:750;
}

input.task-progress-range {
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue) 0 calc(var(--task-progress, 0) * 1%),rgba(18,40,64,.12) calc(var(--task-progress, 0) * 1%) 100%);
  appearance:none;
  -webkit-appearance:none;
}

input.task-progress-range::-webkit-slider-thumb {
  width:22px;
  height:22px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 4px 12px rgba(18,40,64,.22);
  appearance:none;
  -webkit-appearance:none;
}

input.task-progress-range::-moz-range-thumb {
  width:18px;
  height:18px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 4px 12px rgba(18,40,64,.22);
}

.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:22px auto;
  gap:0 7px;
  align-items:center;
  min-width:0;
  padding:9px 12px;
  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:21px;
  height:21px;
  grid-row:1 / span 2;
}

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

.support-float strong {
  font-size:11px;
  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(260px,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-performance-roles {
  position:relative;
  z-index:2;
  grid-column:1 / -1;
  display:grid;
  gap:7px;
  padding-top:2px;
}

.assignment-performance-title {
  color:var(--muted);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.assignment-role-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.assignment-role-chip {
  position:relative;
  cursor:pointer;
}

.assignment-role-chip input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.assignment-role-chip span {
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:6px 9px;
  border:1px solid rgba(91,168,212,.25);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  line-height:1.15;
}

.assignment-role-chip input:checked + span {
  border-color:rgba(91,168,212,.65);
  background:#dff3ff;
  color:#195f85;
  box-shadow:0 6px 14px rgba(91,168,212,.13);
}

.assignment-role-chip input:disabled + span {
  opacity:.45;
  cursor:not-allowed;
}

.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:grid;
  grid-template-columns:auto minmax(220px,1fr) auto;
  align-items:center;
  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-head-title { min-width:0; }
.key-work-search-slot {
  width:min(390px,100%);
  min-width:0;
  justify-self:center;
}
.key-work-view-slot { justify-self:end; }

.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;
}

.client-key-work-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.key-work-task-search {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:190px;
  min-height:44px;
  padding:5px 12px;
  border:1px solid rgba(91,168,212,.24);
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 24px rgba(18,40,64,.06);
}

.key-work-search-feedback {
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  color:#17683b;
  background:#e6f8ed;
  font-size:9px;
  font-weight:1000;
  line-height:1;
  white-space:nowrap;
}

.key-work-search-feedback.has-offscreen-results {
  color:#74520a;
  background:#fff1c7;
}

.key-work-search-feedback[hidden] { display:none !important; }

.key-work-search-icon {
  color:var(--blue);
  font-size:20px;
  font-weight:1000;
  line-height:1;
}

.key-work-task-search input {
  width:100%;
  min-width:0;
  min-height:30px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  font-size:12px;
  font-weight:800;
}

.key-work-card[hidden] { display:none !important; }

.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;
  min-height:62px;
  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-folder-tools {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:10px;
}

.key-work-file-folder-chevron {
  width:10px;
  height:10px;
  border-right:2px solid #1e739e;
  border-bottom:2px solid #1e739e;
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .2s ease;
}

.key-work-file-folder[open] .key-work-file-folder-chevron {
  transform:rotate(225deg) translate(-2px,-2px);
}

.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-card[hidden],
.key-work-file-folder[hidden] {
  display:none !important;
}

.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-archive-toggle {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:5px 10px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(18,40,64,.07);
}

.key-work-calendar-archive-toggle input {
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--blue);
}

.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.is-archived {
  opacity:.62;
  filter:saturate(.55);
  border-style:dashed;
}

.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:not(.key-work-column-counts),
.key-work-column-task-count {
  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-column-counts {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex:0 0 auto;
}

.key-work-column-head .key-work-column-comment-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding:0 8px;
  border:1px solid rgba(41,174,96,.3);
  border-radius:999px;
  background:rgba(37,211,102,.12);
  color:#167a3b;
  font-size:10px;
  font-weight:1000;
  line-height:1;
}

.key-work-status-not-started .key-work-column-task-count { background:rgba(214,69,69,.11); color:#a82e2e; }
.key-work-status-creation .key-work-column-task-count { background:rgba(244,180,0,.15); color:#9b6b00; }
.key-work-status-for-approval .key-work-column-task-count { background:rgba(183,126,104,.16); color:#8f5946; }
.key-work-status-approved .key-work-column-task-count { background:rgba(172,92,202,.14); color:#8841a5; }
.key-work-status-scheduled .key-work-column-task-count { background:rgba(91,90,232,.13); color:#4544c0; }
.key-work-status-completed .key-work-column-task-count { 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-task-count,
  .key-work-column-head .key-work-column-comment-count {
    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-title-block {
  display:grid;
  gap:4px;
  min-width:0;
}

.key-work-card-title-block .key-work-task-id {
  margin-top:0;
}

.key-work-card.has-unread-key-work-comment .key-work-card-title-block,
.key-work-card.has-unread-client-comments .key-work-card-title-block {
  padding-right:54px;
}

.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-column.notification-target-column {
  border-color:rgba(37,211,102,.68);
  box-shadow:0 0 0 4px rgba(37,211,102,.12),0 18px 36px rgba(18,40,64,.10);
}

.key-work-card.notification-target-card {
  border-color:#25d366;
  box-shadow:0 0 0 4px rgba(37,211,102,.16),0 16px 30px rgba(18,40,64,.14);
  animation:notificationTargetPulse 1.25s ease-in-out 2;
}

@keyframes notificationTargetPulse {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-3px); }
}

.client-key-work-board.approval-focus-active .key-work-column {
  transition:opacity .28s ease,filter .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
}

.client-key-work-board.approval-focus-active .key-work-column:not(.approval-target-column) {
  opacity:.38;
  filter:saturate(.55);
}

.client-key-work-board .key-work-column.approval-target-column {
  position:relative;
  z-index:2;
  opacity:1;
  border-color:#f2a93b;
  background:linear-gradient(145deg,rgba(255,249,231,.98),rgba(255,238,190,.92));
  box-shadow:0 0 0 5px rgba(242,169,59,.24),0 22px 46px rgba(168,104,0,.24);
  animation:clientApprovalColumnFocus .7s ease-out both;
}

@keyframes clientApprovalColumnFocus {
  from { transform:scale(.985); box-shadow:0 0 0 0 rgba(242,169,59,0),0 12px 28px rgba(168,104,0,.08); }
  to { transform:scale(1); box-shadow:0 0 0 5px rgba(242,169,59,.24),0 22px 46px rgba(168,104,0,.24); }
}

@media (prefers-reduced-motion:reduce) {
  .client-key-work-board .key-work-column.approval-target-column { animation:none; }
}

.client-key-work-board .key-work-card.has-unread-client-comments {
  border-color:#25d366;
  background:linear-gradient(145deg,#f4fff8 0%,#e8faef 100%);
  box-shadow:0 0 0 3px rgba(37,211,102,.13),0 14px 28px rgba(23,104,59,.12);
}

.client-key-work-board .key-work-card.has-unread-client-comments:hover,
.client-key-work-board .key-work-card.has-unread-client-comments:focus-visible {
  border-color:#16a34a;
  box-shadow:0 0 0 4px rgba(37,211,102,.20),0 18px 34px rgba(23,104,59,.16);
}

@media (max-width:760px) {
  .key-work-head {
    grid-template-columns:minmax(0,1fr) auto !important;
  }

  .key-work-head-title { grid-column:1; grid-row:1; }
  .key-work-view-slot { grid-column:2; grid-row:1; }
  .key-work-search-slot {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
  }

  .client-key-work-toolbar {
    align-items:flex-start;
  }

  .client-key-work-toolbar .key-work-task-search {
    min-width:0;
    flex:1 1 auto;
  }

  .key-work-head-tools .key-work-task-search {
    width:min(220px,calc(100vw - 150px));
    min-width:120px;
  }
}

.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-task-creation-options {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  padding:12px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(245,251,255,.98),rgba(255,255,255,.98));
}

.update-task-creation-options .choice-field {
  min-width:0;
}

.update-task-creation-options .key-work-choice-grid {
  gap:6px;
}

.update-task-creation-options .key-work-choice {
  min-height:34px;
  padding:6px 9px;
  font-size:11px;
}

.update-task-creation-options .choice-icon {
  width:20px;
  height:20px;
  font-size:11px;
}

@media (max-width: 720px) {
  .update-task-creation-options {
    grid-template-columns:1fr;
  }
}

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

.key-work-modal-card .key-work-floating-close {
  position:absolute;
  top:22px;
  right:22px;
  z-index:200;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  box-sizing:border-box;
  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);
  appearance:none;
  pointer-events:auto;
  touch-action:manipulation;
  user-select:none;
  isolation:isolate;
}

.key-work-modal-card .key-work-floating-close::after {
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
}

.key-work-modal-card .key-work-floating-close > span {
  display:block;
  pointer-events:none;
  font-size:24px;
  line-height:1;
  transform:translateY(-1px);
}

.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;
    min-width:34px;
    min-height:34px;
    z-index:95;
    box-shadow:0 12px 28px rgba(18,40,64,.20);
  }

  .key-work-modal-card .key-work-floating-close > span {
    font-size:20px;
  }
}

.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-pre-edited-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:5px 7px 5px 10px;
  border:1px solid rgba(124,83,181,.24);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(242,235,255,.96),rgba(255,255,255,.98));
  box-shadow:0 8px 20px rgba(87,57,132,.10);
  cursor:pointer;
}

.key-work-pre-edited-toggle > span {
  display:flex;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
}

.key-work-pre-edited-toggle strong {
  color:#543983;
  font-size:10px;
  font-weight:1000;
}

.key-work-pre-edited-toggle small {
  color:#7b6a93;
  font-size:9px;
  font-weight:900;
}

.key-work-pre-edited-toggle input {
  position:relative;
  width:34px;
  height:20px;
  flex:0 0 34px;
  margin:0;
  appearance:none;
  border:1px solid rgba(84,57,131,.16);
  border-radius:999px;
  background:#dcd5e7;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}

.key-work-pre-edited-toggle input::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 8px rgba(18,40,64,.18);
  transition:transform .16s ease;
}

.key-work-pre-edited-toggle input:checked {
  border-color:#7c53b5;
  background:#7c53b5;
}

.key-work-pre-edited-toggle input:checked::after {
  transform:translateX(14px);
}

.key-work-pre-edited-chip {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:4px 8px;
  border:1px solid rgba(124,83,181,.28);
  border-radius:999px;
  background:linear-gradient(135deg,#eee2ff,#dcc6ff);
  color:#543983;
  font-size:9px;
  font-weight:1000;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 5px 12px rgba(87,57,132,.10);
}

.key-work-pre-edited-chip::before {
  content:"";
  width:6px;
  height:6px;
  margin-right:5px;
  border-radius:50%;
  background:#7c53b5;
  box-shadow:0 0 0 3px rgba(124,83,181,.12);
}

.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-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.key-work-asset-switch {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(18,40,64,.06);
}

.key-work-asset-switch button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:7px 15px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--navy);
  font:inherit;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
}

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

.key-work-asset-switch button b {
  display:grid;
  min-width:20px;
  height:20px;
  padding:0 5px;
  place-items:center;
  border-radius:999px;
  background:#dff7e9;
  color:#168b4b;
  font-size:10px;
}

.key-work-asset-panel[hidden] {
  display:none !important;
}

.key-work-publish-field.asset-view-hidden {
  display:none !important;
}

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

.key-work-media-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:15px;
  background:rgba(255,255,255,.72);
}

.key-work-media-toolbar > div {
  display:grid;
  gap:2px;
}

.key-work-media-toolbar strong,
.key-work-media-toolbar small {
  display:block;
}

.key-work-media-toolbar strong {
  color:var(--navy);
  font-size:12.5px;
}

.key-work-media-toolbar small {
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}

.key-work-broll-panel {
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid rgba(91,168,212,.26);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(238,247,252,.82),rgba(255,255,255,.96));
}

.key-work-broll-panel[hidden] {
  display:none;
}

.key-work-broll-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--navy);
}

.key-work-broll-intro > div {
  display:grid;
  gap:2px;
}

.key-work-broll-intro strong {
  font-size:13px;
  font-weight:1000;
}

.key-work-broll-intro small {
  color:var(--muted);
  font-size:10.5px;
  font-weight:750;
  line-height:1.4;
}

.key-work-broll-panel .drive-dropzone {
  margin:0;
}

.key-work-broll-chips:empty {
  display:none;
}

.key-work-broll-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px;
  max-height:390px;
  padding:2px 3px 8px;
  overflow:auto;
}

.key-work-broll-card {
  position:relative;
  display:grid;
  grid-template-rows:128px auto;
  gap:8px;
  min-width:0;
  padding:9px;
  border:1px solid rgba(18,40,64,.10);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 24px rgba(18,40,64,.06);
}

.key-work-broll-card .key-work-file-preview {
  width:100%;
  height:128px;
  min-height:128px;
  border-radius:12px;
  overflow:hidden;
}

.key-work-broll-card-copy {
  display:grid;
  gap:2px;
  min-width:0;
  padding-right:68px;
}

.key-work-broll-card-copy strong {
  overflow:hidden;
  color:var(--navy);
  font-size:11px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.key-work-broll-card-copy small {
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}

.key-work-broll-card-actions {
  position:absolute;
  right:10px;
  bottom:8px;
  display:flex;
  gap:5px;
}

.key-work-broll-card-actions a {
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:1px solid rgba(91,168,212,.20);
  border-radius:9px;
  background:#edf8ff;
  color:var(--navy);
}

.key-work-broll-card-actions svg {
  width:14px;
  height:14px;
}

.key-work-broll-empty {
  grid-column:1/-1;
  display:grid;
  justify-items:center;
  gap:5px;
  min-height:145px;
  padding:24px;
  border:1px dashed rgba(91,168,212,.38);
  border-radius:16px;
  background:rgba(255,255,255,.65);
  color:var(--muted);
  text-align:center;
}

.key-work-broll-empty > span {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:12px;
  background:#e5f6ff;
  color:var(--blue);
}

.key-work-broll-empty strong {
  color:var(--navy);
  font-size:12px;
}

.key-work-broll-empty small {
  max-width:360px;
  font-size:10px;
  line-height:1.45;
}

.key-work-broll-instructions {
  display:grid;
  gap:7px;
}

.key-work-broll-links {
  background:rgba(255,255,255,.86);
}

.key-work-broll-instructions > span {
  color:var(--navy);
  font-size:12px;
  font-weight:950;
}

.key-work-broll-instructions textarea {
  min-height:112px;
  resize:vertical;
}

.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,
.media-folder-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,
.media-folder-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,
.media-folder-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-width:0;
  max-width:100%;
  min-height:0;
  margin:0;
  padding:24px 18px 18px;
  overflow-x:hidden;
  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;
  overflow-x:hidden;
}

.key-work-comment-thread {
  min-width:0;
  max-width:100%;
  overflow:hidden;
  border:1px solid rgba(18,40,64,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 20px rgba(18,40,64,.04);
}

.key-work-comment-thread > .key-work-comment {
  border:0;
  border-radius:0;
  box-shadow:none;
}

.key-work-comment-thread.is-golden-thread {
  overflow:visible;
  border-color:rgba(215,166,45,.42);
  background:linear-gradient(135deg,#fff,rgba(255,246,205,.70));
}

.key-work-thread-replies {
  display:grid;
  gap:0;
  margin:0 10px 10px 44px;
  overflow:hidden;
  border:1px solid rgba(91,168,212,.18);
  border-left:3px solid rgba(91,168,212,.42);
  border-radius:0 14px 14px 14px;
  background:rgba(238,247,252,.62);
}

.key-work-thread-replies .key-work-comment {
  border:0;
  border-bottom:1px solid rgba(18,40,64,.08);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.key-work-thread-replies .key-work-comment:last-child {
  border-bottom:0;
}

.key-work-comment {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  width:100%;
  min-width:0;
  max-width:100%;
  gap:10px;
  padding:12px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:16px;
  background:#fff;
}

.key-work-comment > div,
.key-work-comment-head,
.key-work-comment-head > span,
.key-work-comment .attachment-chip-list,
.key-work-comment .attachment-chip {
  min-width:0;
  max-width:100%;
}

.key-work-comment p,
.key-work-comment p *,
.key-work-comment strong,
.key-work-comment small,
.key-work-comment a {
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.key-work-comment .attachment-chip-list {
  overflow-x:hidden;
}

.key-work-comment .attachment-chip {
  width:100%;
}

.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;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.key-work-comment-head > span:first-child {
  min-width:0;
  margin-right:auto;
}

.comment-reply-button {
  min-height:28px;
  padding:5px 9px;
  border:1px solid rgba(91,168,212,.22);
  border-radius:999px;
  background:rgba(238,247,252,.86);
  color:var(--navy);
  font-size:10px;
  font-weight:1000;
  cursor:pointer;
}

.comment-reply-button:hover {
  border-color:rgba(91,168,212,.48);
  background:#fff;
}

.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;
}

.key-work-comment.is-unread-for-client {
  border-color:rgba(242,169,59,.46);
  background:linear-gradient(135deg, rgba(255,247,223,.96), rgba(255,255,255,.98));
  box-shadow:0 10px 26px rgba(168,104,0,.10);
}

.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;
}

.comment-reply-context {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  padding:10px 12px;
  border:1px solid rgba(91,168,212,.28);
  border-left:4px solid var(--blue);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(238,247,252,.96),#fff);
}

.comment-reply-context > div {
  min-width:0;
}

.comment-reply-context small,
.comment-reply-context strong,
.comment-reply-context span {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.comment-reply-context small {
  color:var(--blue);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.comment-reply-context strong {
  margin-top:2px;
  color:var(--navy);
  font-size:12px;
}

.comment-reply-context span {
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

.comment-reply-context > button {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(18,40,64,.08);
  color:var(--navy);
  font-size:18px;
  cursor:pointer;
}

.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:center;
  gap:7px;
  min-height:0;
  padding:6px 2px;
  background:transparent;
  border:0;
  border-top:1px solid rgba(91,168,212,.18);
  border-radius:0;
  box-shadow:none;
  opacity:.72;
}

.key-work-system-log > div {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 8px;
}

.key-work-system-log p {
  margin:0;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  line-height:1.3;
}

.key-work-system-log small {
  display:inline;
  margin:0;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}

.system-log-dot {
  width:5px;
  height:5px;
  margin:0;
  border-radius:999px;
  background:var(--blue);
  box-shadow:none;
  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:16px;
  top:94px;
  z-index:95;
  width:max-content;
  max-width:min(340px, calc(100vw - 32px));
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  /* Status-only overlay: never intercept the task X, even after fading out. */
  pointer-events:none;
}

#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); }
}

body.client-tour-active {
  overscroll-behavior:none;
}

.client-tour-repeat-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:7px 14px 7px 8px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font:inherit;
}

.client-tour-repeat-button[hidden] {
  display:none !important;
}

.client-tour-repeat-button > span {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  background:#62b7e2;
  color:#0d2b43;
  font-weight:800;
}

.client-tour-repeat-button strong {
  font-size:.76rem;
  white-space:nowrap;
}

.client-onboarding-tour {
  position:fixed;
  inset:0;
  z-index:12000;
  pointer-events:none;
  font-family:"Plus Jakarta Sans", sans-serif;
}

.client-tour-shade {
  position:fixed;
  background:rgba(8, 31, 52, .76);
  backdrop-filter:blur(2px);
  pointer-events:auto;
}

.client-tour-spotlight {
  position:fixed;
  border:2px solid #69b9e8;
  border-radius:24px;
  box-shadow:0 0 0 5px rgba(105, 185, 232, .2), 0 18px 50px rgba(3, 24, 42, .28);
  pointer-events:none;
  transition:left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}

.client-tour-card {
  position:fixed;
  width:min(390px, calc(100vw - 24px));
  padding:24px;
  border:1px solid rgba(105, 185, 232, .4);
  border-radius:24px;
  background:#fff;
  color:#102b43;
  box-shadow:0 24px 80px rgba(4, 28, 49, .35);
  pointer-events:auto;
}

.client-tour-logo {
  width:52px;
  height:52px;
  object-fit:contain;
  border-radius:15px;
  background:#fff;
  margin-bottom:14px;
}

.client-tour-confetti {
  display:none;
  position:absolute;
  inset:-70px -20px auto;
  height:180px;
  overflow:hidden;
  pointer-events:none;
}

.client-tour-confetti span {
  position:absolute;
  left:var(--confetti-left);
  top:-18px;
  width:8px;
  height:14px;
  border-radius:2px;
  background:var(--confetti-color);
  opacity:0;
  animation:clientTourConfetti var(--confetti-duration) ease-in var(--confetti-delay) infinite;
}

@keyframes clientTourConfetti {
  0% { transform:translateY(0) rotate(0deg); opacity:0; }
  12% { opacity:1; }
  100% { transform:translateY(190px) rotate(540deg); opacity:0; }
}

.client-tour-card h2 {
  margin:6px 0 10px;
  font-size:1.45rem;
  line-height:1.15;
}

.client-tour-card p {
  margin:0;
  color:#61758a;
  line-height:1.55;
}

.client-tour-close {
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#edf4f8;
  color:#102b43;
  font-size:1.3rem;
  cursor:pointer;
}

.client-tour-progress {
  display:flex;
  gap:6px;
  margin:20px 0 16px;
}

.client-tour-progress span {
  width:7px;
  height:7px;
  border-radius:999px;
  background:#d8e4ec;
  transition:width .2s ease, background .2s ease;
}

.client-tour-progress span.active {
  width:25px;
  background:#58add9;
}

.client-tour-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.client-onboarding-tour.is-welcome::before {
  content:"";
  position:fixed;
  inset:0;
  background:rgba(8, 31, 52, .82);
  backdrop-filter:blur(7px);
  pointer-events:auto;
}

.client-onboarding-tour.is-welcome .client-tour-shade,
.client-onboarding-tour.is-welcome .client-tour-spotlight {
  display:none;
}

.client-onboarding-tour.is-welcome .client-tour-card {
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  padding:32px;
}

.client-onboarding-tour.is-welcome .client-tour-logo {
  width:76px;
  height:76px;
  margin-inline:auto;
}

.client-onboarding-tour.is-welcome .client-tour-confetti {
  display:block;
}

.client-onboarding-tour.is-welcome .client-tour-progress {
  justify-content:center;
}

.client-onboarding-tour.is-welcome .client-tour-actions {
  justify-content:center;
}

.client-onboarding-tour.is-first-run.is-welcome .client-tour-card {
  width:min(520px, calc(100vw - 32px));
  padding:40px 42px 36px;
}

.client-onboarding-tour.is-first-run.is-welcome .eyebrow {
  margin-bottom:10px;
  font-size:.69rem;
  letter-spacing:.2em;
}

.client-onboarding-tour.is-first-run.is-welcome .client-tour-card h2 {
  max-width:430px;
  margin:8px auto 16px;
  font-size:clamp(2rem, 4vw, 2.65rem);
  line-height:1.04;
  letter-spacing:-.045em;
}

.client-onboarding-tour.is-first-run.is-welcome .client-tour-card p {
  max-width:440px;
  margin-inline:auto;
  font-size:1.03rem;
  line-height:1.68;
}

@media (max-width: 700px) {
  .client-tour-repeat-button {
    padding:6px;
  }

  .client-tour-repeat-button strong {
    display:none;
  }
  .client-tour-card {
    left:12px !important;
    right:12px;
    top:auto !important;
    bottom:16px;
    width:auto;
    padding:20px;
    border-radius:20px;
  }

  .client-onboarding-tour.is-welcome .client-tour-card {
    left:12px !important;
    right:12px;
    top:50% !important;
    bottom:auto;
    width:auto;
  }

  .client-onboarding-tour.is-first-run.is-welcome .client-tour-card {
    width:auto;
    padding:28px 22px 24px;
  }

  .client-onboarding-tour.is-first-run.is-welcome .client-tour-card h2 {
    font-size:1.85rem;
  }

  .client-onboarding-tour.is-first-run.is-welcome .client-tour-card p {
    font-size:.94rem;
    line-height:1.6;
  }
}

@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:680px) {
  .key-work-thread-replies {
    margin-left:24px;
  }

  .comment-reply-button {
    min-height:26px;
    padding:4px 8px;
  }
}

@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;
  }

  .client-happiness-card {
    grid-template-columns:82px minmax(0,1fr);
    min-width:0;
    width:100%;
    padding:10px;
    border-radius:20px;
  }

  .client-happiness-ring {
    width:82px;
  }

  .client-happiness-ring strong {
    font-size:20px;
  }

  .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:44px 44px 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-task-count,
  .key-work-column-head .key-work-column-comment-count { 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) {
  .key-work-asset-switch {
    width:100%;
    max-width:230px;
  }

  .key-work-asset-switch button {
    flex:1 1 0;
    min-width:0;
    padding-inline:10px;
  }

  .key-work-media-toolbar,
  .key-work-broll-intro {
    align-items:flex-start;
  }

  .key-work-media-toolbar small,
  .key-work-broll-intro small {
    display:none;
  }

  .key-work-broll-gallery {
    grid-template-columns:1fr;
    max-height:430px;
  }

  .key-work-broll-card {
    grid-template-columns:112px minmax(0,1fr);
    grid-template-rows:auto;
    align-items:center;
  }

  .key-work-broll-card .key-work-file-preview {
    width:112px;
    height:94px;
    min-height:94px;
  }

  .key-work-broll-card-copy {
    padding-right:0;
    padding-bottom:32px;
  }

  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 .app-version {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:2px 7px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    color:rgba(255,255,255,.70);
    font-size:8.5px;
    line-height:1;
  }

  .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;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.client-logo-circle {
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  overflow:hidden;
  border:3px solid #25d366;
  border-radius:50%;
  background:#fff;
  box-shadow:0 8px 22px rgba(4,94,47,.18);
  clip-path:circle(50% at 50% 50%);
  -webkit-clip-path:circle(50% at 50% 50%);
  contain:paint;
}

.client-logo-wrap .client-logo-mark {
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  clip-path:circle(50% at 50% 50%);
  -webkit-clip-path:circle(50% at 50% 50%);
  object-fit:contain;
}

.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-circle { border-color:#e9ad24; }
.client-logo-wrap.relationship-hold .client-active-chip { color:#8a5a00; background:#fff0bd; }
.client-logo-wrap.relationship-inactive .client-logo-circle,
.client-logo-wrap.relationship-ended .client-logo-circle { 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;
}

.hero-key-work-views {
  display:grid;
  gap:8px;
  margin-top:13px;
  padding:10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:17px;
  background:rgba(255,255,255,.055);
}

.hero-key-work-views-title {
  display:flex;
  align-items:center;
  gap:6px;
  color:#75c9f2;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero-key-work-tooltip {
  width:17px;
  height:17px;
  border-color:rgba(117,201,242,.34);
  color:#bce8ff;
  background:rgba(117,201,242,.14);
  font-size:10px;
}

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

.hero-key-work-view-button {
  min-width:0;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 8px;
  border:1px solid rgba(117,201,242,.22);
  border-radius:13px;
  color:#fff;
  background:rgba(14,47,76,.56);
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.hero-key-work-view-button:hover,
.hero-key-work-view-button:focus-visible {
  transform:translateY(-1px);
  border-color:rgba(117,201,242,.52);
  background:rgba(91,168,212,.23);
}

.hero-key-work-view-button svg {
  width:17px;
  height:17px;
  flex:0 0 auto;
  color:#75c9f2;
}

.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;
  overflow:hidden;
}

.service-home-card .service-button h3 {
  font-size:14px;
}

.service-home-card .service-button > div {
  min-width:0;
}

.service-home-card .service-button .service-top h3 {
  min-width:0;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}

.service-home-card .service-button > div > .muted {
  display:-webkit-box;
  margin:5px 0 0;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  line-height:1.42;
}

.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:not([open]) {
  min-height:62px;
  max-height:62px;
}

.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(620px,72dvh) !important;
    min-height:min(540px,68dvh);
    max-height:620px !important;
  }

  body:not(.admin-page) .client-key-work-view-shell:has(> .client-key-work-files-panel) {
    grid-template-rows:auto minmax(0,min(620px,72dvh));
  }

  body.admin-page #tab-key-work.active .key-work-files-panel {
    min-height:clamp(560px,74dvh,720px);
    height:clamp(560px,74dvh,720px);
  }

  .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;
}

/* Release density and responsive guards. */
body.admin-page #tab-key-work.active .key-work-calendar,
body.admin-page #tab-key-work.active .key-work-files-panel {
  flex:1 1 auto;
  height:auto;
  max-height:none;
}

/* Command 79: mobile team workspace gets a full working canvas and a compact fixed footer. */
@media (max-width:760px) {
  body.admin-page {
    padding-bottom:38px;
  }

  body.admin-page .footer {
    min-height:30px;
    padding:4px 0;
    font-size:8.5px;
  }

  body.admin-page .footer-inner {
    position:relative;
    min-height:22px;
    flex-direction:row;
    justify-content:center;
    gap:0;
    padding-right:54px;
    text-align:center;
  }

  body.admin-page .footer-inner > span:first-child {
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  body.admin-page .footer-inner > span:last-child {
    display:none;
  }

  body.admin-page .footer-inner .app-version {
    position:absolute;
    right:8px;
    bottom:2px;
    display:inline-flex !important;
    padding:2px 5px;
    font-size:7.5px;
  }

  body.admin-page #tab-key-work.active .key-work-client-toggle {
    display:none !important;
  }

  body.admin-page #tab-key-work.active .key-work-bottom-tools {
    min-height:0;
    height:0;
    padding:0;
    margin:0;
    background:none;
    backdrop-filter:none;
  }

  body.admin-page #tab-key-work.active .key-work-add-button {
    position:fixed;
    left:50%;
    bottom:36px;
    z-index:64;
    width:auto;
    min-width:154px;
    min-height:36px;
    padding:8px 14px;
    border-radius:999px;
    transform:translateX(-50%);
    box-shadow:0 12px 28px rgba(18,40,64,.24);
  }

  body.admin-page #tab-key-work.active .key-work-board,
  body.admin-page #tab-key-work.active .key-work-calendar,
  body.admin-page #tab-key-work.active .key-work-files-panel {
    height:clamp(590px,78dvh,820px) !important;
    min-height:clamp(590px,78dvh,820px) !important;
    max-height:820px !important;
  }

  body.admin-page #tab-key-work.active .key-work-board {
    padding-bottom:22px;
  }

  body.admin-page #tab-key-work.active .key-work-calendar,
  body.admin-page #tab-key-work.active .key-work-folder-grid {
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

.requirement-modal-intro .muted {
  margin:0;
  font-size:12px;
  line-height:1.4;
}

@media (max-width:760px) {
  .service-color-picker {
    grid-template-columns:repeat(4,minmax(42px,1fr));
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .service-color-option {
    padding:6px 2px;
    border-radius:11px;
  }

  .service-color-option > span {
    width:18px;
    height:18px;
  }

  body.admin-page #tab-key-work.active .key-work-calendar,
  body.admin-page #tab-key-work.active .key-work-files-panel {
    min-height:clamp(480px,68dvh,660px);
    height:clamp(480px,68dvh,660px);
    max-height:none;
  }

  .requirement-modal-card {
    padding:16px;
  }

  .requirement-modal-intro {
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    padding-right:34px;
    padding-bottom:8px;
    margin-bottom:8px;
  }

  .requirement-modal-intro .dedicated-member-avatar {
    width:38px;
    height:38px;
    border-radius:13px;
  }

  .requirement-modal-intro h2 {
    margin:0 0 2px;
    font-size:19px;
    line-height:1.05;
  }

  .requirement-modal-intro .muted {
    font-size:10.5px;
    line-height:1.3;
  }

  .support-float {
    right:10px;
    bottom:74px;
    width:44px;
    height:44px;
    display:grid;
    grid-template-columns:1fr;
    place-items:center;
    padding:0;
  }

  .support-float svg {
    grid-row:auto;
  }

  .support-float strong {
    display:none;
  }
}



@media (max-width:760px) {
  .team-inbox-trigger {
    width:42px;
    min-width:42px;
    min-height:42px;
    padding:0;
  }
  .team-inbox-trigger > span { display:none; }
  .team-inbox-panel {
    position:fixed;
    top:72px;
    right:9px;
    width:calc(100vw - 18px);
    max-height:calc(100dvh - 92px);
    padding:13px;
    border-radius:20px;
  }
  .team-inbox-panel > header strong { font-size:18px; }
  .assignment-list { grid-template-columns:minmax(0,1fr); }
}

/* Final task-modal safeguards: keep long content scrollable without moving the pipeline. */
.key-work-modal-card { overflow:hidden !important; }
.key-work-modal-main,
.key-work-task-form { min-height:0; max-height:88vh; overflow:hidden; }
.key-work-form-scroll,
.key-work-client-content-scroll {
  height:100%; min-height:0; max-height:100%;
  overflow-y:auto !important; overflow-x:hidden !important;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  padding-bottom:44px;
}
.key-work-comment-list {
  display:block !important;
  min-height:0; height:auto; max-height:none;
  overflow-y:auto !important; overflow-x:hidden !important;
  overscroll-behavior-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  padding:2px 6px 112px 0;
  scroll-padding-bottom:112px;
}
.key-work-comment-thread {
  width:100%;
  height:auto !important;
  min-height:0;
  align-self:start;
}
.key-work-comment-thread + .key-work-comment-thread {
  margin-top:10px;
}
.key-work-comment,
.key-work-comment-thread,
.key-work-thread-replies { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.key-work-comment:not(.key-work-system-log) { padding-right:48px; }
.key-work-comment p,
.key-work-comment p *,
.key-work-comment strong,
.key-work-comment small,
.key-work-comment .attachment-chip-name,
.key-work-comment-link-chip span {
  user-select:text !important;
  -webkit-user-select:text !important;
  cursor:text;
}
.key-work-comment-head button,
.key-work-comment a {
  user-select:none !important;
  -webkit-user-select:none !important;
}
.key-work-comment-head .comment-reply-button,
.key-work-comment-head .comment-delete-button {
  position:absolute; right:-1px; z-index:4;
  width:38px; min-width:38px; height:30px; min-height:30px; padding:0;
  display:grid; place-items:center; border-radius:12px 0 0 12px;
  box-shadow:0 7px 16px rgba(18,40,64,.08);
}
.key-work-comment-head .comment-reply-button { top:42px; font-size:0; }
.key-work-comment-head .comment-reply-button::before { content:"↩"; font-size:16px; line-height:1; }
.key-work-comment-head .comment-delete-button { top:76px; border:1px solid rgba(213,77,77,.14); }
.key-work-comment:not(.key-work-system-log) {
  max-height:none;
  align-items:start;
}
.key-work-comment:not(.key-work-system-log) > div {
  display:block;
  min-height:0;
  max-height:none;
  overflow:visible;
}
.key-work-comment-content-scroll {
  min-height:0;
  max-height:min(360px,44vh);
  overflow-y:auto !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:0 5px 12px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(91,168,212,.58) rgba(18,40,64,.05);
  user-select:text !important;
  -webkit-user-select:text !important;
}
.key-work-comment-content-scroll::-webkit-scrollbar { width:7px; }
.key-work-comment-content-scroll::-webkit-scrollbar-track {
  border-radius:999px;
  background:rgba(18,40,64,.05);
}
.key-work-comment-content-scroll::-webkit-scrollbar-thumb {
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(91,168,212,.78),rgba(18,40,64,.38));
}
.key-work-comment [data-comment-read-receipts] {
  position:static;
  z-index:2;
  min-height:24px;
  padding-top:7px;
  border-top:1px solid rgba(18,40,64,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.72),#fff);
}
.key-work-comment.from-client [data-comment-read-receipts] {
  background:linear-gradient(180deg,rgba(245,251,255,.72),#f5fbff);
}
.media-folder-button {
  border-color:rgba(91,168,212,.30);
  background:linear-gradient(135deg,rgba(223,243,254,.96),#fff);
}
@media (max-width:760px) {
  .key-work-modal-main,
  .key-work-task-form { max-height:100%; }
  .key-work-form-scroll,
  .key-work-client-content-scroll { padding-bottom:76px; }
  .media-folder-button span { display:none; }
  .key-work-comment-list {
    padding-bottom:128px;
    scroll-padding-bottom:128px;
  }
  .key-work-comment:not(.key-work-system-log) { max-height:none; }
  .key-work-comment-content-scroll { max-height:min(300px,38dvh); }
}

/* Key-Work command82: compact five-view navigation, searchable file folders and archive. */
.key-work-file-folder-tile {
  min-height:0 !important;
  max-height:none !important;
  overflow:visible;
  border:0;
  background:transparent;
}

.key-work-folder-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-content:start;
  overflow-y:auto;
  padding:4px 4px 70px;
}

.key-work-file-folder-button {
  width:100%;
  min-height:116px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:16px;
  border:1px solid rgba(91,168,212,.25);
  border-radius:20px;
  color:var(--navy);
  background:linear-gradient(145deg,#fff,rgba(226,245,255,.88));
  box-shadow:0 12px 28px rgba(18,40,64,.07);
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

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

.key-work-file-folder-icon {
  width:48px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:10px 10px 14px 14px;
  color:#1679a9;
  background:#dff3fe;
}

.key-work-file-folder-icon .mini-icon { width:25px; height:25px; }
.key-work-file-folder-button > span:nth-child(2) { min-width:0; }
.key-work-file-folder-button strong { display:block; font-size:14px; font-weight:1000; }
.key-work-file-folder-button small { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
.key-work-file-folder-button b {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#087b46;
  background:#dff9e9;
  font-size:11px;
}
.key-work-file-folder-store { display:none !important; }

.key-work-file-folder-modal { z-index:140; }
.key-work-file-folder-modal-card {
  width:min(1120px,94vw);
  max-height:min(880px,90dvh);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.key-work-file-modal-grid {
  min-height:240px;
  max-height:none;
  overflow-y:auto;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  padding:10px 8px 90px;
  scrollbar-gutter:stable;
}
.key-work-file-card[hidden],
.key-work-file-folder[hidden],
.key-work-archived-entry[hidden] { display:none !important; }

.key-work-file-filters { flex-wrap:wrap; }
.key-work-file-search {
  flex:1 1 240px;
  min-width:200px;
  min-height:36px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(91,168,212,.26);
  border-radius:999px;
  background:#fff;
}
.key-work-file-search input {
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--navy);
  font:inherit;
  font-size:11px;
  font-weight:800;
}
.key-work-file-search-count { color:#177a49; font-size:10px; font-weight:1000; white-space:nowrap; }

.key-work-updates-view,
.key-work-archived-view {
  min-height:0;
  height:min(620px,calc(100vh - 320px));
  overflow-y:auto;
  padding:14px 16px 90px;
  border:1px solid rgba(91,168,212,.2);
  border-radius:24px;
  background:linear-gradient(145deg,#fff,#eff9ff);
  scrollbar-gutter:stable;
}
.key-work-subview-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.key-work-subview-head h4 { margin:3px 0 0; color:var(--navy); font-size:20px; }
.key-work-archived-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:14px;
}
.key-work-archived-entry { min-width:0; display:grid; gap:8px; }
.key-work-archived-grid .key-work-card { width:100%; min-height:160px; }

#tab-key-work .key-work-view-switch,
.client-key-work-view-shell .key-work-view-switch { flex-wrap:nowrap; }
#tab-key-work .key-work-view-switch button,
.client-key-work-view-shell .key-work-view-switch button { padding-inline:10px; }

body.admin-page .tabs [data-tab="updates"] { display:none !important; }

@media (max-width:900px) {
  .key-work-folder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .key-work-file-modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .key-work-archived-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .key-work-folder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding-bottom:90px; }
  .key-work-file-folder-button {
    min-height:94px;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:8px;
    padding:10px;
    border-radius:16px;
  }
  .key-work-file-folder-icon { width:38px; height:34px; }
  .key-work-file-folder-button small { display:none; }
  .key-work-file-modal-grid { grid-template-columns:minmax(0,1fr); padding-bottom:110px; }
  .key-work-file-folder-modal-card { width:calc(100vw - 16px); max-height:92dvh; border-radius:22px; }
  .key-work-archived-grid { grid-template-columns:minmax(0,1fr); }
  .key-work-updates-view,
  .key-work-archived-view { height:min(680px,76dvh); min-height:560px; padding:12px 10px 100px; }

  #tab-key-work .key-work-view-switch,
  .client-key-work-view-shell .key-work-view-switch {
    width:100% !important;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    flex-direction:row;
    gap:3px;
    border-radius:16px;
  }
  #tab-key-work .key-work-view-switch button,
  .client-key-work-view-shell .key-work-view-switch button {
    min-width:0;
    min-height:34px;
    padding:5px 2px;
    overflow:hidden;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.admin-page #tab-key-work.active .key-work-board,
  body.admin-page #tab-key-work.active .key-work-calendar,
  body.admin-page #tab-key-work.active .key-work-files-panel,
  body.admin-page #tab-key-work.active .key-work-updates-view,
  body.admin-page #tab-key-work.active .key-work-archived-view,
  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,
  body:not(.admin-page) .client-key-work-view-shell > .key-work-updates-view,
  body:not(.admin-page) .client-key-work-view-shell > .key-work-archived-view {
    height:min(720px,78dvh) !important;
    min-height:min(610px,72dvh) !important;
    max-height:720px !important;
  }
  body.admin-page #tab-key-work.active .key-work-bottom-tools {
    position:fixed;
    left:50%;
    bottom:42px;
    z-index:65;
    min-height:0;
    width:auto;
    padding:0;
    transform:translateX(-50%);
    background:transparent;
  }
  body.admin-page #tab-key-work.active .key-work-client-toggle { display:none !important; }
  body.admin-page #tab-key-work.active .key-work-add-button {
    min-width:164px;
    min-height:40px;
    border-radius:999px;
    box-shadow:0 14px 30px rgba(18,40,64,.25);
  }
  .key-work-file-filters { padding:7px; }
  .key-work-file-search { order:-2; flex-basis:100%; min-width:0; }
  .key-work-file-filter-presets { order:-1; width:100%; }
}

/* Command 90: client relationship badge floats without changing card layout. */
body.admin-page .client-select-button .client-summary-bottomline {
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  display:block;
  min-height:0;
  width:max-content;
  padding:0;
  pointer-events:none;
}

body.admin-page .client-select-button .client-summary-inline-status {
  position:static;
  display:inline-flex;
  transform:scale(.76);
  transform-origin:right top;
}

body.admin-page .client-select-button:has(.client-notification-badge) .client-summary-bottomline {
  top:40px;
  right:10px;
}

body.admin-page .client-select-button .client-summary-status {
  top:10px;
  right:10px;
  transform:none;
  transform-origin:right top;
}

@media (max-width:760px) {
  body.admin-page .client-select-button .client-summary-bottomline { top:9px; right:9px; }
  body.admin-page .client-select-button:has(.client-notification-badge) .client-summary-bottomline { top:38px; right:9px; }
  body.admin-page .client-select-button .client-summary-status { top:9px; right:9px; }
}

/* Command 88 final cascade overrides. */
@media (min-width:1100px) {
  body.admin-page .wrap {
    width:min(1840px,calc(100% - clamp(32px,3.5vw,72px)));
    max-width:none;
  }
  body.admin-page .admin-shell {
    grid-template-columns:280px minmax(0,1fr);
    gap:16px;
  }
}

@media (min-width:1500px) {
  body.admin-page .admin-shell { grid-template-columns:292px minmax(0,1fr); }
}

@media (max-width:760px) {
  body.admin-page #tab-key-work.active .key-work-primary-actions {
    position:fixed;
    left:50%;
    bottom:42px;
    z-index:66;
    display:flex;
    gap:6px;
    width:auto;
    transform:translateX(-50%);
  }
  body.admin-page #tab-key-work.active .key-work-primary-actions .key-work-add-button {
    position:static;
    left:auto;
    bottom:auto;
    min-width:142px;
    transform:none;
  }
  body.admin-page #tab-key-work.active .key-work-bulk-toggle {
    min-height:40px;
    padding:8px 11px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 12px 28px rgba(18,40,64,.18);
    font-size:9px;
    white-space:nowrap;
  }
  .key-work-autosave-status {
    position:absolute;
    top:-23px;
    right:8px;
    z-index:4;
    min-height:20px;
    margin:0;
    padding:3px 7px;
    box-shadow:0 6px 15px rgba(18,40,64,.1);
    font-size:7px;
  }
}

/* Command 91 definitive mobile cascade. Keep this block last. */
@media (max-width:760px) {
  body.admin-page #tab-key-work.active .key-work-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  body.admin-page #tab-key-work.active .key-work-head-title,
  body.admin-page #tab-key-work.active .key-work-search-slot,
  body.admin-page #tab-key-work.active .key-work-view-slot {
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }
  body.admin-page #tab-key-work.active .key-work-head-title { grid-row:1 !important; }
  body.admin-page #tab-key-work.active .key-work-search-slot { grid-row:2 !important; }
  body.admin-page #tab-key-work.active .key-work-view-slot { grid-row:3 !important; }
  body.admin-page #tab-key-work.active .key-work-search-slot:empty { display:none !important; }

  #tab-key-work .key-work-view-switch,
  .client-key-work-view-shell .key-work-view-switch {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100% !important;
    gap:3px !important;
  }
  #tab-key-work .key-work-view-switch button,
  .client-key-work-view-shell .key-work-view-switch button {
    min-width:0 !important;
    padding:5px 2px !important;
    overflow:hidden !important;
    font-size:8px !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .key-work-file-filters {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:8px !important;
    overflow:visible !important;
  }
  .key-work-file-search,
  .key-work-file-filter-presets,
  .key-work-file-filter-range {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  .key-work-file-search {
    order:1 !important;
    flex:0 0 auto !important;
    flex-basis:auto !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 12px !important;
    border-radius:14px !important;
  }
  .key-work-file-filter-presets {
    order:2 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  .key-work-file-filter-presets button {
    width:100% !important;
    min-width:0 !important;
    padding:6px 2px !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }
  .key-work-file-filter-range {
    order:3 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .key-work-file-filter-range label,
  .key-work-file-filter-range input {
    width:100% !important;
    min-width:0 !important;
  }

  .workspace-actions {
    display:grid !important;
    grid-template-columns:38px 38px repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:6px !important;
  }
  .workspace-actions .workspace-chat-button {
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }
  .workspace-actions > .button {
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 5px !important;
    font-size:8px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }
  .login-otp-resend {
    width:100% !important;
    margin-top:8px !important;
  }
}
.key-work-team-comment-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(111, 78, 201, .22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(244, 240, 255, .95), rgba(235, 246, 255, .95));
  color: #172f49;
  cursor: pointer;
  user-select: none;
}

.key-work-team-comment-toggle input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.key-work-team-comment-check {
  position: relative;
  inline-size: 38px;
  block-size: 22px;
  border-radius: 999px;
  background: #cbd6e2;
  box-shadow: inset 0 0 0 1px rgba(22, 49, 74, .1);
  transition: background .18s ease;
}

.key-work-team-comment-check::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(22, 49, 74, .2);
  transition: transform .18s ease;
}

.key-work-team-comment-toggle input:checked + .key-work-team-comment-check {
  background: #7357c8;
}

.key-work-team-comment-toggle input:checked + .key-work-team-comment-check::after {
  transform: translateX(16px);
}

.key-work-team-comment-toggle input:focus-visible + .key-work-team-comment-check {
  outline: 3px solid rgba(86, 174, 219, .35);
  outline-offset: 2px;
}

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

.key-work-team-comment-toggle small {
  margin-top: 2px;
  color: #657b90;
  font-size: 11px;
}

.key-work-comment.is-team-comment {
  border-color: rgba(111, 78, 201, .28);
  background: linear-gradient(145deg, #f8f5ff 0%, #eef6ff 100%);
  box-shadow: inset 3px 0 0 #7357c8, 0 8px 22px rgba(52, 43, 99, .07);
}

.key-work-team-comment-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(111, 78, 201, .2);
  border-radius: 999px;
  background: #eee8ff;
  color: #6046ad;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.key-work-team-comment-assignee-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(111, 78, 201, .18);
  border-radius: 12px;
  background: rgba(248, 246, 255, .92);
  color: #40566c;
  font-size: 11px;
  font-weight: 800;
}

.key-work-team-comment-assignee-picker[hidden] {
  display: none !important;
}

.key-work-team-comment-assignee-picker select {
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(22, 49, 74, .14);
  border-radius: 10px;
  background: #fff;
  color: #172f49;
  font: inherit;
}

.key-work-team-comment-assignee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #40566c;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.key-work-team-comment-assignee .author-avatar {
  inline-size: 20px;
  block-size: 20px;
  font-size: 8px;
}

.key-work-task-history {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}

.key-work-task-history span {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  padding:4px 8px;
  border:1px solid rgba(18,40,64,.08);
  border-radius:999px;
  background:#f4f7fa;
  color:#61778c;
  font-size:10px;
  line-height:1.15;
}

.key-work-task-history strong {
  color:#29445e;
  font-size:9px;
  letter-spacing:.02em;
}

@media (max-width:760px) {
  .key-work-admin-task-modal .key-work-modal-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:start !important;
    gap:8px !important;
    padding-right:50px !important;
  }

  .key-work-admin-task-modal .key-work-modal-title-block,
  .key-work-admin-task-modal .key-work-context-line {
    min-width:0;
    max-width:100%;
  }

  .key-work-admin-task-modal .key-work-client-context {
    max-width:100%;
  }

  .key-work-admin-task-modal .key-work-modal-head-actions {
    position:static !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    width:100%;
    min-width:0;
    padding:0;
  }

  .key-work-admin-task-modal .key-work-status-menu,
  .key-work-admin-task-modal .key-work-modal-status {
    max-width:100%;
  }

  .key-work-admin-task-modal .key-work-comment-rail.is-mobile-open {
    position:fixed !important;
    inset:8px !important;
    z-index:10050 !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) minmax(0,auto) !important;
    width:auto !important;
    height:calc(100dvh - 16px) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:12px !important;
    overflow:hidden !important;
    border:1px solid rgba(91,168,212,.22) !important;
    border-radius:22px !important;
    background:linear-gradient(180deg,#eef9ff 0%,#fff 35%,#fff 100%) !important;
    box-shadow:0 24px 80px rgba(8,31,52,.32) !important;
    animation:keyWorkCommentFullscreenIn .18s ease-out;
  }

  .key-work-admin-task-modal .key-work-comment-rail.is-mobile-open .key-work-comment-toggle {
    position:relative;
    z-index:2;
    min-height:48px;
    background:#fff;
  }

  .key-work-admin-task-modal .key-work-comment-rail.is-mobile-open .key-work-comment-list {
    display:grid !important;
    min-height:0 !important;
    max-height:none !important;
    margin:10px 0 !important;
    padding:2px 5px 22px 0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  .key-work-admin-task-modal .key-work-comment-rail.is-mobile-open .key-work-comment-form {
    display:grid !important;
    min-height:0;
    max-height:46dvh;
    padding:10px 2px 2px;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-top:1px solid rgba(18,40,64,.08);
    background:#fff;
  }

  .key-work-admin-task-modal .key-work-comment-rail.is-mobile-open .key-work-comment-form textarea {
    min-height:92px;
    max-height:24dvh;
  }

  .key-work-task-history {
    gap:4px;
    margin-top:5px;
  }

  .key-work-task-history span {
    padding:4px 7px;
    font-size:9px;
  }
}

@keyframes keyWorkCommentFullscreenIn {
  from { opacity:0; transform:translateY(14px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.key-work-comments-action {
  display:none;
}

.key-work-pipeline-actions {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:30px;
  margin:3px 0 6px;
}

.key-work-pipeline-actions .key-work-primary-actions {
  gap:5px;
}

.key-work-pipeline-actions .key-work-add-button,
.key-work-pipeline-actions .key-work-bulk-toggle {
  position:static !important;
  width:auto !important;
  min-width:0 !important;
  min-height:27px !important;
  height:27px !important;
  padding:3px 10px !important;
  border-radius:999px !important;
  transform:none !important;
  font-size:9px !important;
  line-height:1 !important;
  white-space:nowrap;
  box-shadow:none !important;
}

@media (max-width:760px) {
  body.admin-page #tab-key-work.active .key-work-pipeline-actions .key-work-primary-actions {
    position:static !important;
    left:auto !important;
    bottom:auto !important;
    z-index:auto !important;
    width:auto !important;
    transform:none !important;
  }

  .key-work-pipeline-actions {
    min-height:28px;
    margin:2px 0 5px;
    padding-left:2px;
  }

  .key-work-admin-task-modal .key-work-modal-head-actions,
  .key-work-client-task-modal .key-work-modal-head-actions {
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }

  .key-work-admin-task-modal .key-work-modal-head-actions {
    padding-left:0 !important;
  }

  .key-work-admin-task-modal .key-work-status-menu,
  .key-work-admin-task-modal .key-work-modal-status,
  .key-work-client-task-modal .key-work-modal-status {
    width:auto !important;
    max-width:min(100%,170px) !important;
    min-height:32px !important;
    padding:5px 9px !important;
    font-size:10px !important;
  }

  .key-work-comments-action {
    position:relative;
    display:grid !important;
    place-items:center;
    background:#eef9ff !important;
    color:#17344f !important;
    border:1px solid rgba(91,168,212,.28) !important;
  }

  .key-work-comments-action .key-work-comments-action-count {
    position:absolute;
    top:4px;
    right:5px;
    display:grid !important;
    place-items:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#5ba8d4;
    color:#fff;
    font-size:9px !important;
    line-height:1;
  }

  .key-work-modal-actions:not(:has(.key-work-comments-action)) {
    grid-template-columns:minmax(0,1fr) !important;
  }

  .key-work-admin-task-modal .key-work-comment-rail:not(.is-mobile-open) {
    max-height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  .key-work-admin-task-modal .key-work-comment-rail:not(.is-mobile-open) .key-work-comment-toggle {
    display:none !important;
  }

  .key-work-admin-task-modal .key-work-comment-rail.is-mobile-open .key-work-comment-list,
  .key-work-client-task-modal .key-work-comment-rail.is-mobile-open .key-work-comment-list {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    align-content:initial !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    gap:12px !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:4px 6px 36px 2px !important;
    scroll-padding-bottom:36px;
  }

  .key-work-admin-task-modal .key-work-comment-rail:not(.is-mobile-open) .key-work-comment-list,
  .key-work-client-task-modal .key-work-comment-rail:not(.is-mobile-open) .key-work-comment-list {
    display:none !important;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment-thread {
    display:block !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:max-content !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment {
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    align-items:start !important;
    width:100% !important;
    height:auto !important;
    min-height:max-content !important;
    max-height:none !important;
    padding:12px 46px 12px 10px !important;
    overflow:visible !important;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment > div {
    display:grid !important;
    grid-template-rows:auto auto auto !important;
    align-content:start !important;
    width:100% !important;
    height:auto !important;
    min-height:max-content !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment-content-scroll {
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 0 8px !important;
    overflow:visible !important;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment-content-scroll p,
  .key-work-comment-rail.is-mobile-open .key-work-comment-link-chips,
  .key-work-comment-rail.is-mobile-open .attachment-chip-list,
  .key-work-comment-rail.is-mobile-open .attachment-chip {
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  .key-work-comment-rail.is-mobile-open .key-work-comment [data-comment-read-receipts] {
    display:flex !important;
    position:static !important;
    width:100% !important;
    min-height:30px !important;
    margin-top:4px !important;
    padding:8px 0 0 !important;
    overflow:visible !important;
    border-top:1px solid rgba(18,40,64,.08) !important;
  }

  .key-work-comment-rail.is-mobile-open .key-work-thread-replies {
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    height:auto !important;
    margin:8px 8px 10px 18px !important;
    overflow:visible !important;
  }
}

/* Command 102 final cascade: keep new upload surfaces compact and explicit. */
.key-work-media-builder .key-work-asset-switch button:disabled,
.key-work-media-builder #addKeyWorkMediaBtn:disabled,
.key-work-media-builder [data-broll-upload-trigger]:disabled,
.key-work-media-builder [data-drive-upload-trigger]:disabled,
.key-work-media-builder [data-thumbnail-drive-upload-trigger]:disabled {
  opacity:.42;
  cursor:not-allowed;
  filter:grayscale(.25);
  box-shadow:none;
}

.key-work-media-builder .drive-dropzone.is-disabled {
  opacity:.48;
  pointer-events:none;
}

.key-work-media-builder .media-thumbnail-panel {
  border:1px solid rgba(91,168,212,.24);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(235,247,253,.72));
  overflow:hidden;
}

.key-work-media-builder .media-thumbnail-panel.is-hidden {
  display:none !important;
}

.key-work-media-builder .media-thumbnail-panel > summary {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 13px;
  color:var(--navy,#17314d);
  font-weight:800;
  cursor:pointer;
  list-style-position:inside;
}

.key-work-media-builder .media-thumbnail-options {
  display:grid;
  gap:10px;
  padding:0 12px 12px;
}

.key-work-media-builder .media-thumbnail-options .media-thumbnail-field {
  margin:0;
}

.key-work-media-builder .thumbnail-drive-dropzone {
  min-height:132px;
  margin:0;
  padding:14px 12px;
}

.key-work-comment-form .comment-drive-dropzone {
  min-height:104px;
  margin:0;
  padding:12px;
}

.key-work-comment-form .comment-drive-dropzone .drive-dropzone-icon {
  width:32px;
  height:32px;
}

@media (max-width:720px) {
  .key-work-media-builder .media-thumbnail-options {
    padding:0 10px 10px;
  }

  .key-work-media-builder .thumbnail-drive-dropzone,
  .key-work-comment-form .comment-drive-dropzone {
    min-height:0;
    padding:10px;
  }
}

/* Command 110: keep the client onboarding inside the mobile viewport and restore the compact client footer. */
@media (max-width:760px) {
  .client-onboarding-tour .client-tour-card {
    left:10px !important;
    right:10px !important;
    top:auto !important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:370px;
    max-height:min(46dvh, 370px);
    padding:15px 16px 14px;
    border-radius:18px;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:none !important;
  }

  .client-onboarding-tour .client-tour-logo {
    width:38px;
    height:38px;
    margin-bottom:7px;
    border-radius:11px;
  }

  .client-onboarding-tour .client-tour-card .eyebrow {
    font-size:.58rem;
    line-height:1.2;
    letter-spacing:.13em;
  }

  .client-onboarding-tour .client-tour-card h2,
  .client-onboarding-tour.is-first-run.is-welcome .client-tour-card h2 {
    margin:4px 0 7px;
    font-size:1.18rem;
    line-height:1.14;
    letter-spacing:-.025em;
  }

  .client-onboarding-tour .client-tour-card p,
  .client-onboarding-tour.is-first-run.is-welcome .client-tour-card p {
    font-size:.78rem;
    line-height:1.42;
  }

  .client-onboarding-tour .client-tour-progress {
    margin:11px 0 10px;
  }

  .client-onboarding-tour .client-tour-actions {
    gap:7px;
  }

  .client-onboarding-tour .client-tour-actions .button {
    width:auto !important;
    min-width:92px;
    min-height:36px;
    padding:7px 12px;
    font-size:.72rem;
  }

  .client-onboarding-tour.is-welcome .client-tour-card,
  .client-onboarding-tour.is-first-run.is-welcome .client-tour-card {
    left:10px !important;
    right:10px !important;
    top:54% !important;
    bottom:auto !important;
    width:auto !important;
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    padding:22px 18px 18px;
    transform:translateY(-50%) !important;
  }

  .client-onboarding-tour.is-welcome .client-tour-logo {
    width:58px;
    height:58px;
    margin-bottom:9px;
  }

  .client-onboarding-tour.is-welcome .client-tour-confetti {
    inset:-50px -8px auto;
    height:140px;
  }

  body.client-page {
    padding-bottom:36px !important;
  }

  body.client-page .footer {
    min-height:30px;
    padding:4px 0 calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    font-size:8.5px;
    line-height:1;
    box-shadow:0 -5px 16px rgba(18,40,64,.14);
  }

  body.client-page .footer-inner {
    width:calc(100% - 18px);
    min-height:22px;
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    text-align:left;
  }

  body.client-page .footer-inner > span:first-child {
    display:block !important;
    min-width:0;
    overflow:hidden;
    color:rgba(255,255,255,.58);
    font-size:8px;
    font-weight:700;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  body.client-page .footer-inner > span:last-child {
    display:none !important;
  }

  body.client-page .footer-inner .app-version {
    display:inline-flex !important;
    flex:0 0 auto;
    min-height:18px;
    padding:2px 6px;
    font-size:7.5px;
  }

  body.client-page .support-float {
    bottom:44px;
  }

  body.client-page .back-to-top {
    bottom:42px;
  }
}

.native-mobile-file-picker {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.native-mobile-file-picker input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.key-work-broll-card-actions button,
.thumbnail-drive-delete {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(214,65,65,.2);
  border-radius:10px;
  background:#fff1f1;
  color:#c83f3f;
  cursor:pointer;
}

.key-work-broll-card-actions button svg,
.thumbnail-drive-delete svg {
  width:15px;
  height:15px;
}

.key-work-task-id-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.task-drive-folder-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:25px;
  padding:4px 9px;
  border:1px solid rgba(66,133,244,.28);
  border-left:3px solid #34a853;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(52,168,83,.09),rgba(66,133,244,.09) 55%,rgba(251,188,4,.12));
  color:#2457a6;
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

.task-drive-folder-link[hidden] {
  display:none !important;
}

.task-drive-folder-link svg {
  width:13px;
  height:13px;
}

.task-drive-folder-link-prominent {
  min-height:38px;
  padding:8px 14px;
  border-width:1px;
  border-left-width:4px;
  border-radius:13px;
  background:linear-gradient(110deg,rgba(52,168,83,.14),rgba(66,133,244,.13) 58%,rgba(251,188,4,.16));
  box-shadow:0 8px 18px rgba(38,91,151,.1);
  font-size:11px;
}

.task-drive-folder-link-prominent svg {
  width:17px;
  height:17px;
}

.client-drive-assets-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:8px;
}

.client-drive-assets-toolbar .drive-assets-sync-status {
  margin:0;
}

.task-drive-folder-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.task-drive-refresh-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid rgba(28,99,153,.2);
  border-radius:13px;
  background:#fff;
  color:#17324e;
  box-shadow:0 7px 16px rgba(27,62,94,.08);
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.task-drive-refresh-button:hover {
  border-color:rgba(67,174,219,.52);
  background:#f3fbff;
}

.task-drive-refresh-button:disabled {
  cursor:wait;
  opacity:.72;
}

.task-drive-refresh-button svg {
  width:17px;
  height:17px;
}

.task-drive-refresh-button.is-loading svg {
  animation:task-drive-refresh-spin .8s linear infinite;
}

@keyframes task-drive-refresh-spin {
  to { transform:rotate(360deg); }
}

@media (max-width:760px) {
  .key-work-media-head .task-drive-folder-link-prominent,
  .client-drive-assets-toolbar .task-drive-folder-link-prominent {
    width:100%;
    justify-content:center;
  }
  .task-drive-folder-actions {
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .task-drive-folder-actions .task-drive-folder-link-prominent,
  .task-drive-folder-actions .task-drive-refresh-button {
    width:100%;
  }
}

.drive-assets-sync-status {
  display:block;
  margin-top:4px;
  color:#5f7389;
  font-size:10px;
  font-weight:800;
  line-height:1.3;
}

/* Command 112: touch devices use a real native input instead of a simulated click. */
@media (max-width:760px), (pointer:coarse) {
  .comment-drive-dropzone,
  .client-drive-dropzone,
  [data-drive-upload-panel] > [data-drive-dropzone],
  .key-work-broll-panel [data-broll-dropzone] {
    display:none !important;
  }

  .native-mobile-file-picker {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:auto;
    min-height:44px;
    margin:0;
    padding:10px 14px;
    overflow:hidden;
    clip-path:none;
    border:1px solid rgba(91,168,212,.28);
    border-radius:14px;
    background:#f2f8fc;
    color:var(--navy);
    font-size:12px;
    font-weight:900;
    white-space:normal;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .native-mobile-file-picker svg {
    width:18px;
    height:18px;
  }

  .comment-attachment-details > summary {
    display:none !important;
  }

  .client-drive-upload-panel > summary,
  [data-drive-upload-panel] > summary {
    min-height:42px;
    justify-content:center;
    border:1px solid rgba(91,168,212,.28);
    border-radius:14px;
    background:#f2f8fc;
    color:var(--navy);
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .comment-attachment-details[open] > summary,
  .client-drive-upload-panel[open] > summary,
  [data-drive-upload-panel][open] > summary {
    margin-bottom:8px;
  }

  .thumbnail-drive-dropzone {
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  .thumbnail-drive-dropzone > .drive-dropzone-icon,
  .thumbnail-drive-dropzone > strong,
  .thumbnail-drive-dropzone > small {
    display:none !important;
  }

  .thumbnail-drive-dropzone > [data-thumbnail-drive-upload-trigger] {
    display:flex !important;
    width:100% !important;
    min-height:42px;
  }
}

/* command116: multi-company client identities and approval quorum */
.portal-users-card { display: grid; gap: 18px; }
.portal-users-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-user-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px; border: 1px solid #cce8f6; border-radius: 18px; background: #f7fcff; }
.portal-user-form[hidden] { display: none; }
.portal-user-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.portal-users-list { display: grid; gap: 10px; }
.portal-user-row { display: grid; grid-template-columns: 46px minmax(180px, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dce8ef; border-radius: 16px; background: #fff; }
.portal-user-row.is-inactive { opacity: .62; }
.portal-user-avatar,
.client-workspace-option-logo,
.client-approval-member-avatar { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #e9f6fc; color: #18344d; font-weight: 800; }
.portal-user-avatar { width: 44px; height: 44px; }
.portal-user-avatar img,
.client-workspace-option-logo img,
.client-approval-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-user-identity { min-width: 0; display: grid; gap: 3px; }
.portal-user-identity small { color: #6a7d90; overflow-wrap: anywhere; }
.portal-user-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.client-workspace-switcher { display: grid; gap: 7px; padding: 10px 0; border-top: 1px solid rgba(28, 57, 80, .1); border-bottom: 1px solid rgba(28, 57, 80, .1); }
.client-workspace-switcher[hidden] { display: none; }
.client-workspace-switcher-title { padding: 0 4px; color: #678096; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.client-workspace-option { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #17324a; text-align: left; cursor: pointer; }
.client-workspace-option:hover,
.client-workspace-option.is-active { border-color: #bde1f2; background: #f0f9fd; }
.portal-user-form [data-edit-portal-pin][hidden] { display:none !important; }
.portal-user-access-dialog { width:min(480px,calc(100% - 24px)); max-height:85dvh; margin:auto; padding:0; border:1px solid #d7e7f2; border-radius:22px; background:#f6fbff; color:#122840; overflow:auto; }
.portal-user-access-dialog::backdrop { background:rgba(18,40,64,.5); }
.portal-user-access-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid #d7e7f2; }
.portal-user-access-dialog h2 { margin:0; font-size:20px; }
.portal-user-access-dialog [data-close-access] { width:44px; height:44px; border:0; background:white; border-radius:50%; font-size:26px; color:inherit; cursor:pointer; }
.portal-user-access-content { padding:20px; overflow-wrap:anywhere; }
.portal-user-access-content p { font-size:13px; line-height:1.6; }
.portal-user-access-actions { display:grid; gap:10px; }
.portal-user-access-actions button { min-height:44px; white-space:normal; }
.portal-user-access-dialog:not([open]) { display:none; }
.client-switch-loading[hidden] { display:none; }
.client-switch-loading { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:24px; background:rgba(18,40,64,.45); }
.client-switch-loading-card { display:grid; justify-items:center; gap:14px; width:min(100%,360px); padding:28px 22px; border-radius:22px; background:#f6fbff; color:#122840; box-shadow:0 12px 48px #12284040; text-align:center; overflow-wrap:anywhere; }
.client-switch-loading-card strong { font-size:16px; }
.client-switch-loading-card small { color:#526b80; font-size:12px; }
.client-switch-spinner { width:32px; height:32px; border:3px solid #d5e9f5; border-top-color:#5ba8d4; border-radius:50%; animation:client-switch-spin .8s linear infinite; }
@keyframes client-switch-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .client-switch-spinner { animation:none; } }
.client-workspace-option-logo { width: 36px; height: 36px; }
.client-workspace-option > span:nth-child(2) { min-width: 0; display: grid; }
.client-workspace-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-workspace-option small { color: #718498; }

.client-approval-progress { display: grid; flex: 0 0 auto; align-content: start; min-width: 0; height: auto; min-height: max-content; gap: 10px; padding: 13px; border: 1px solid #eadcae; border-radius: 16px; background: #fffaf0; }
.key-work-comment-list > .client-approval-progress { margin-bottom: 12px; }
.client-approval-progress.is-complete { border-color: #b5e6c9; background: #f0fcf5; }
.client-approval-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.client-approval-progress-head span { color: #6c7e8f; font-weight: 700; }
.client-approval-progress-head strong { flex: 0 0 auto; white-space: nowrap; color: #17324a; }
.client-approval-members { display: grid; gap: 7px; }
.client-approval-member { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; }
.client-approval-member-avatar { width: 32px; height: 32px; font-size: 11px; }
.client-approval-member > span:last-child { display: grid; min-width: 0; }
.client-approval-member strong { font-size: 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.client-approval-member small { color: #a06910; font-size: 10px; font-weight: 700; }
.client-approval-member.is-approved small { color: #17844b; }

@media (max-width: 760px) {
  .portal-users-heading { display: grid; }
  .portal-user-form { grid-template-columns: 1fr; }
  .portal-user-row { grid-template-columns: 42px minmax(0, 1fr); }
  .portal-user-badges,
  .portal-user-row .inline-actions { grid-column: 1 / -1; }
}

/* Requirement links remain inside the comment's scrollable content, not over receipts/actions. */
.key-work-comment-link-chips.is-requirement-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  max-width: 100%;
}
.is-requirement-links .key-work-comment-link-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #397ca3;
  border-radius: 12px;
  background: #e5f4fc;
  color: #123550;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(18, 40, 64, .08);
}
.is-requirement-links .key-work-comment-link-chip svg { width: 17px; height: 17px; flex: 0 0 17px; }
.is-requirement-links .key-work-comment-link-chip span { cursor: pointer; user-select: none !important; -webkit-user-select: none !important; }
.is-requirement-links .key-work-comment-link-chip:hover { background: #cfeaf9; }
.is-requirement-links .key-work-comment-link-chip:focus-visible { outline: 3px solid #245f86; outline-offset: 3px; }
.comment-upload-auto-send-note { display: block; color: #526779; font-size: 11px; line-height: 1.45; margin: 5px 0; }
.comment-composer-box { min-width: 0; border: 1px solid #d7e2eb; border-radius: 16px; background: #fff; }
.key-work-comment-form .comment-composer-box textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 12px;
  border: 0 !important; border-radius: 16px 16px 0 0; box-shadow: none !important;
  min-height: 92px; resize: vertical; background: transparent;
}
.comment-composer-box:focus-within { border-color: #5ba8d4; }
.comment-composer-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; border-top: 1px solid #e4ecf2; border-radius: 0 0 16px 16px; background: #f5f9fc; align-items: stretch; }
.comment-composer-toolbar.is-client-composer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comment-composer-toolbar .button,
.comment-composer-toolbar .key-work-team-comment-toggle,
.comment-composer-toolbar .comment-attach-toggle,
.comment-composer-toolbar .native-mobile-file-picker {
  box-sizing: border-box; min-width: 0; width: 100%; min-height: 44px; margin: 0; padding: 5px 4px;
  border-radius: 10px; font-size: 10px; line-height: 1.25; font-weight: 800; box-shadow: none;
}
.comment-composer-toolbar .key-work-team-comment-toggle { display: flex; justify-content: center; gap: 4px; border-color: transparent; background: transparent; }
.comment-composer-toolbar .key-work-team-comment-toggle:has(input:checked) { background: #eee8ff; }
.comment-composer-toolbar .key-work-team-comment-toggle strong { font-size: 10px; }
.comment-composer-toolbar .key-work-team-comment-check { inline-size: 26px; block-size: 16px; flex: 0 0 26px; }
.comment-composer-toolbar .key-work-team-comment-check::after { inline-size: 12px; block-size: 12px; inset-block-start: 2px; inset-inline-start: 2px; }
.comment-composer-toolbar .key-work-team-comment-toggle input:checked + .key-work-team-comment-check::after { transform: translateX(10px); }
.comment-attach-control { position: relative; min-width: 0; }
.comment-attach-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #d5e5f0; background: #edf6fc; color: #123550; cursor: pointer; }
.comment-composer-toolbar svg { width: 14px; height: 14px; flex: 0 0 14px; }
.comment-composer-toolbar .native-mobile-file-picker { gap: 4px; }
.comment-attach-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 8; width: 210px; padding: 9px 11px; border-radius: 10px; background: #122840; color: #fff; font-size: 11px; line-height: 1.4; pointer-events: none; box-shadow: 0 4px 14px #12284026; }
.comment-attach-control:hover .comment-attach-tooltip,
.comment-attach-control:focus-within .comment-attach-tooltip { display: block; }
.is-client-composer .comment-attach-tooltip { left: 0; transform: none; }
.key-work-comment-form .comment-attachment-field { gap: 0; }
.key-work-comment-form .comment-attachment-field:not(:has(details[open])):has(.comment-attachment-chips:empty) { display: none; }
.key-work-comment-form .comment-attachment-details > summary[hidden] { display: none !important; }
.key-work-comment-form .comment-attachment-details:not([open]) { display: none; }
.comment-composer-toolbar button:focus-visible,
.comment-attach-control:focus-within { outline: 2px solid #397ca3; outline-offset: 2px; border-radius: 10px; }
@media (max-width: 760px), (pointer: coarse) {
  .comment-composer-toolbar .comment-attach-toggle { display: none; }
  .requirement-attachment-field .client-drive-upload-panel > summary { display: none !important; }
}

/* Shared requirement workflow filters: team dashboard and client portal. */
.requirement-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid #d7e6ef;
  border-radius: 16px;
  background: #edf5fa;
  box-sizing: border-box;
}
.requirement-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #50697d;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.requirement-filter-button strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dceaf3;
  color: #24465f;
  font-size: 10px;
  box-sizing: border-box;
}
.requirement-filter-button:hover { background: #f8fcff; color: #173b55; }
.requirement-filter-button.is-active {
  border-color: #76b9df;
  background: #fff;
  color: #123550;
  box-shadow: 0 4px 12px rgba(28, 88, 125, .1);
}
.requirement-filter-button.is-active strong { background: #173b55; color: #fff; }
.requirement-filter-button:focus-visible { outline: 3px solid #f0a33a; outline-offset: 2px; }
.requirement-workflow-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  margin: 0 6px 7px 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
.requirement-workflow-badge.is-new { background: #fff0da; color: #945900; }
.requirement-workflow-badge.is-progress { background: #e4f3fb; color: #185d83; }
.requirement-workflow-badge.is-closed { background: #e3f7ea; color: #187847; }
.requirement-review-button { width: max-content; margin: 0 0 10px; }

@media (max-width: 560px) {
  .requirement-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .requirement-filter-button { justify-content: space-between; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .requirement-filter-button { transition: none; }
}
/* Client-created Key-Work requests and stage-aware task assets */
.client-task-request-form {
  display: grid;
  gap: 16px;
}

.client-task-request-note,
.legacy-requirement-readonly-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef8fd;
  color: #49677a;
  font-size: .78rem;
  line-height: 1.45;
}

.legacy-requirement-readonly-note {
  margin-top: 12px;
  background: #f3f6f8;
}

.client-task-asset-panel {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #cfe4ef;
  border-radius: 20px;
  background: linear-gradient(145deg, #f8fcff, #eef8fd);
}

.client-task-asset-panel.is-broll-stage {
  border-color: #b9dfcd;
  background: linear-gradient(145deg, #fbfffd, #effaf4);
}

.client-task-asset-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.client-task-asset-heading h3 {
  margin: 3px 0 0;
}

.client-task-stage-note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: #557183;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 6px 18px rgba(24, 55, 78, .08);
}

.client-broll-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.client-broll-card {
  display: grid;
  grid-template-rows: 108px auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d9e6ec;
  border-radius: 14px;
  background: #fff;
  color: #17324a;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(24, 55, 78, .06);
}

.client-broll-card img,
.client-broll-file-icon {
  width: 100%;
  height: 108px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: #e7f3f8;
  color: #2679a6;
  font-size: 1.6rem;
}

.client-broll-card > span:last-child {
  min-width: 0;
  padding: 9px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 800;
}

.client-broll-links {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  overflow-wrap: anywhere;
  font-size: .82rem;
}

.client-broll-upload-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-top: 4px;
}

.client-broll-upload-box > small {
  flex: 1 1 220px;
  color: #668092;
  font-size: .75rem;
}

.key-work-status-chip-client-requirements {
  background: #fff2dd;
  color: #8b5600;
  border-color: #f4c66e;
}

.key-work-status-chip-client-requirements > span {
  background: #e99a18;
}

@media (max-width: 760px) {
  .client-task-asset-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .client-task-asset-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .client-task-stage-note {
    align-self: flex-start;
  }

  .client-broll-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-broll-card {
    grid-template-rows: 92px auto;
  }

  .client-broll-card img,
  .client-broll-file-icon {
    height: 92px;
  }

  .client-broll-file-picker {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-task-asset-panel,
  .client-broll-card { scroll-behavior: auto; transition: none !important; }
}
/* Key-OS 5.0: operating-system identity, Key-Post and client navigation hierarchy. */
.admin-page .brand strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  letter-spacing: -0.03em;
}

.admin-page .brand strong em {
  color: #5b7189;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qos-module-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
}

.qos-module-tabs .qos-module {
  align-items: center;
  background: #f7fafc;
  border: 1px solid #d9e4ee;
  border-radius: 12px;
  color: #18344f;
  cursor: pointer;
  display: flex;
  gap: 9px;
  justify-content: flex-start;
  min-height: 48px;
  padding: 7px 10px;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.qos-module-tabs .qos-module:hover {
  border-color: #8faec7;
  box-shadow: 0 8px 24px rgba(18, 40, 64, 0.08);
}

.qos-module-tabs .qos-module:focus-visible {
  outline: 3px solid rgba(29, 123, 183, 0.34);
  outline-offset: 2px;
}

.qos-module-tabs .qos-module > span:last-child {
  display: grid;
  gap: 2px;
}

.qos-module-tabs .qos-module strong {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.qos-module-tabs .qos-module small {
  color: #61758a;
  font-size: 9px;
  font-weight: 600;
}

.qos-module-mark {
  align-items: center;
  background: #ddecf7;
  border-radius: 9px;
  color: #155b86;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 10px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  letter-spacing: -0.03em;
}

.qos-module-logo {
  display: block;
  flex: 0 0 38px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
  width: 38px;
}

.qos-module-tabs .qos-module-work.active {
  background: #eaf6fd;
  border-color: #5ba8d4;
  box-shadow: inset 0 -3px 0 #287eae;
  color: #123f5e;
}

.qos-module-tabs .qos-module-post .qos-module-mark {
  background: #fff0e8;
  color: #b84c21;
}

.qos-module-tabs .qos-module-post.active {
  background: #fff7f2;
  border-color: #ee8359;
  box-shadow: inset 0 -3px 0 #d85e2f;
  color: #823514;
}

.qos-module-tabs .qos-module-ai .qos-module-mark {
  background: #f0eaff;
  color: #6845ae;
}

.qos-module-tabs .qos-module-ai.active {
  background: #f8f5ff;
  border-color: #9679d2;
  box-shadow: inset 0 -3px 0 #7452b8;
  color: #4e3484;
}

.qos-workspace-tabs {
  border-top: 1px solid #e2e9f0;
  margin-top: 0;
  padding-top: 14px;
}

.workspace-section-menu {
  position: relative;
}

.workspace-section-menu-toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  list-style: none;
  min-height: 38px;
  white-space: nowrap;
}

.workspace-section-menu-chevron {
  font-size: 17px;
  line-height: 1;
  transition: transform 160ms ease;
}

.workspace-section-menu.is-open .workspace-section-menu-chevron {
  transform: rotate(180deg);
}

.workspace-section-menu-panel {
  background: #fff;
  border: 1px solid #d9e4ee;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(18, 40, 64, 0.18);
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
}

.workspace-section-menu-panel[hidden] { display: none !important; }

.workspace-section-menu-panel .tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #26435e;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: flex-start;
  min-height: 40px;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

.workspace-section-menu-panel .tab:hover,
.workspace-section-menu-panel .tab.active {
  background: #edf5fa;
  color: #155b86;
}

.workspace-section-menu-panel .tab:focus-visible {
  outline: 3px solid rgba(29, 123, 183, 0.28);
  outline-offset: 1px;
}

.workspace-section-menu-panel .tab[hidden] {
  display: none;
}

.qpost-shell {
  color: #18344f;
  display: grid;
  gap: 20px;
}

.qpost-hero {
  align-items: center;
  background: #fff8f3;
  border: 1px solid #f2d5c6;
  border-radius: 18px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 22px;
}

.qpost-kicker,
.qpost-section-head span,
.qpost-panel-label {
  color: #b84c21;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qpost-hero h3 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 5px 0 8px;
}

.qpost-hero p {
  color: #5f7182;
  margin: 0;
  max-width: 650px;
}

.qpost-connection-state {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid #f0d9cd;
  border-radius: 14px;
  display: grid;
  flex: 0 0 250px;
  gap: 3px;
  padding: 14px 15px 14px 38px;
  position: relative;
}

.qpost-connection-state > span {
  background: #e58a63;
  border: 4px solid #ffdfd0;
  border-radius: 50%;
  height: 14px;
  left: 15px;
  position: absolute;
  top: 17px;
  width: 14px;
}

.qpost-connection-state strong { font-size: 12px; }
.qpost-connection-state small { color: #6b7885; font-size: 10px; line-height: 1.45; }
.qpost-connection-state:hover { border-color: #df8f6d; box-shadow: 0 8px 24px rgba(184,76,33,.1); }
.qpost-connection-state:focus-visible { outline: 3px solid rgba(216,94,47,.28); outline-offset: 2px; }

.qpost-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qpost-metrics article {
  background: #fff;
  border: 1px solid #dde6ee;
  border-radius: 15px;
  display: grid;
  gap: 3px;
  padding: 16px 18px;
}

.qpost-metrics strong { font-size: 26px; letter-spacing: -0.04em; }
.qpost-metrics span { color: #68798a; font-size: 11px; font-weight: 700; }

.qpost-calendar-section,
.qpost-connections,
.qpost-queue,
.qpost-ready {
  background: #fff;
  border: 1px solid #dfe7ee;
  border-radius: 18px;
  padding: 18px;
}

.qpost-section-head {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.qpost-section-head h4 { font-size: 18px; margin: 3px 0 0; }

.qpost-connection-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qpost-network-card {
  align-items: center;
  background: #fbfdff;
  border: 1px solid #dce6ee;
  border-radius: 14px;
  display: grid;
  gap: 11px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 14px;
}

.qpost-network-card.is-disabled {
  filter: grayscale(1);
  opacity: .48;
}

.qpost-network-card > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.qpost-network-card > div:nth-child(2) strong { font-size: 13px; }
.qpost-network-card > div:nth-child(2) small { color: #708090; font-size: 10px; }
.qpost-network-logo { align-items: center; border-radius: 12px; display: flex; height: 44px; justify-content: center; width: 44px; }
.qpost-network-logo svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; width: 28px; }
.qpost-network-logo > span { font-size: 20px; font-weight: 900; }
.qpost-network-meta { background: #e7f1ff; color: #0866ff; }
.qpost-network-linkedin { background: #e6f2fa; color: #0a66c2; }
.qpost-network-tiktok { background: #eff1f3; color: #111; }
.qpost-network-status { background: #fff1e9; border-radius: 999px; color: #a34520; font-size: 9px; font-weight: 900; padding: 5px 7px; text-transform: uppercase; }
.qpost-network-status.is-connected { background: #e5f6ec; color: #167344; }
.qpost-network-copy em { color:#53687a; font-size:9px; font-style:normal; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qpost-network-actions { align-items:center; display:flex; flex-wrap:wrap; gap:7px; grid-column:2 / -1; justify-self:start; }
.qpost-network-action { background:#0866ff; border:0; border-radius:999px; color:#fff; cursor:pointer; font:inherit; font-size:9px; font-weight:900; min-height:28px; padding:6px 11px; white-space:nowrap; }
.qpost-network-action:hover { background:#0758d8; }
.qpost-network-action:focus-visible { outline:3px solid rgba(8,102,255,.28); outline-offset:2px; }
.qpost-network-action:disabled { cursor:wait; opacity:.62; }
.qpost-network-action.is-secondary { background:#edf3f7; color:#24445e; }
.qpost-network-action.is-secondary:hover { background:#dfeaf1; }
.qpost-meta-account-form { align-items:end; border-top:1px solid #e7edf2; display:grid; gap:8px; grid-column:1 / -1; grid-template-columns:minmax(0,1fr) auto; margin-top:2px; padding-top:11px; }
.qpost-meta-account-form label { color:#24445e; display:grid; font-size:9px; font-weight:900; gap:5px; letter-spacing:.03em; min-width:0; text-transform:uppercase; }
.qpost-meta-account-form select { background:#fff; border:1px solid #c8d8e5; border-radius:10px; color:#17344c; cursor:pointer; font:inherit; font-size:10px; min-height:40px; min-width:0; padding:8px 10px; width:100%; }
.qpost-meta-account-form select:focus-visible { border-color:#0866ff; outline:3px solid rgba(8,102,255,.18); outline-offset:1px; }
.qpost-meta-account-form button { background:#173f5f; border:0; border-radius:10px; color:#fff; cursor:pointer; font:inherit; font-size:10px; font-weight:900; min-height:40px; padding:8px 13px; white-space:nowrap; }
.qpost-meta-account-form button:hover { background:#0f304b; }
.qpost-meta-account-form button:focus-visible { outline:3px solid rgba(23,63,95,.24); outline-offset:2px; }
.qpost-meta-account-form button:disabled { cursor:wait; opacity:.62; }
@media (max-width: 560px) {
  .qpost-network-actions { gap:6px; }
  .qpost-network-action { padding-inline:9px; }
  .qpost-meta-account-form { grid-template-columns:1fr; }
  .qpost-meta-account-form button { width:100%; }
}
.keypost-meta-config-dialog { background:transparent; border:0; color:#17344c; inset:0; margin:auto; max-width:none; padding:16px; }
.keypost-meta-config-dialog::backdrop { background:rgba(13,29,44,.65); backdrop-filter:blur(8px); }
.keypost-meta-config-card { background:#fff; border:1px solid #dce6ee; border-radius:24px; box-shadow:0 28px 80px rgba(9,28,46,.32); display:grid; gap:16px; max-height:calc(100vh - 32px); overflow:auto; padding:30px; position:relative; width:min(560px,calc(100vw - 32px)); }
.keypost-meta-config-card h2 { font-size:27px; letter-spacing:-.04em; margin:5px 0 7px; }
.keypost-meta-config-card p { color:#5f7182; font-size:12px; line-height:1.55; margin:0; }
.keypost-meta-config-card label { color:#24445e; display:grid; font-size:11px; font-weight:800; gap:6px; }
.keypost-meta-config-card input { border:1px solid #cddbe6; border-radius:10px; font:inherit; min-height:42px; padding:9px 11px; width:100%; }
.keypost-meta-callback { display:grid; gap:7px; grid-template-columns:minmax(0,1fr) auto; }
.keypost-meta-callback button { background:#edf5fa; border:0; border-radius:9px; color:#155b86; cursor:pointer; font:inherit; font-size:10px; font-weight:900; padding:0 12px; }
.keypost-meta-developer-link { color:#0866ff; font-size:11px; font-weight:800; text-decoration:none; }

.qpost-format-guidance {
  background: #f4f7fa;
  border-left: 4px solid #91a6b7;
  border-radius: 8px;
  color: #53687a;
  font-size: 11px;
  line-height: 1.55;
  padding: 10px 12px;
}

.qpost-format-guidance.is-error { background: #fff0ed; border-left-color: #d85642; color: #8b3024; }
.qpost-format-guidance.is-ok { background: #eaf7f0; border-left-color: #35a16b; color: #236945; }

.client-key-ai-section > .card-body { padding: 24px; }

.key-os-v5-welcome {
  background: transparent;
  border: 0;
  color: #17344c;
  max-width: none;
  inset: 0;
  margin: auto;
  padding: 18px;
}

.key-os-v5-welcome::backdrop { background: rgba(13,29,44,.62); backdrop-filter: blur(8px); }
.key-os-v5-welcome-card { align-items: center; background: #fff; border: 1px solid rgba(255,255,255,.72); border-radius: 24px; box-shadow: 0 28px 80px rgba(9,28,46,.3); display: flex; flex-direction: column; gap: 16px; max-width: 440px; padding: 34px; text-align: center; width: min(440px, calc(100vw - 36px)); }
.key-os-v5-welcome-logo { display:block; height:70px; object-fit:contain; width:70px; }
.key-os-v5-welcome-mark { align-items: center; background: linear-gradient(135deg,#dff3ff,#5ba8d4); border-radius: 18px; color: #123e5c; display: flex; font-size: 20px; font-weight: 900; height: 62px; justify-content: center; letter-spacing: -.05em; width: 62px; }
.key-os-v5-welcome h2 { font-size: clamp(24px,5vw,34px); letter-spacing: -.045em; line-height: 1.12; margin: 0; }
.key-os-v5-welcome button { min-width: 150px; }
.qpost-section-head > small { color: #708090; font-size: 10px; text-align: right; }

.qpost-calendar-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.qpost-calendar-head > div { display: flex; gap: 6px; }
.qpost-calendar-head button {
  background: #f5f8fb;
  border: 1px solid #dbe5ee;
  border-radius: 9px;
  color: #24425e;
  cursor: pointer;
  min-height: 36px;
  min-width: 36px;
  padding: 0 11px;
}

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

.qpost-calendar-weekdays span {
  color: #738395;
  font-size: 9px;
  font-weight: 800;
  padding: 5px 8px;
  text-transform: uppercase;
}

.qpost-calendar-day {
  border-right: 1px solid #edf1f5;
  border-top: 1px solid #edf1f5;
  min-height: 94px;
  padding: 7px;
}

.qpost-calendar-day:nth-child(7n) { border-right: 0; }
.qpost-calendar-day > b { color: #67798b; font-size: 10px; }
.qpost-calendar-day.is-muted { background: #fafcfd; opacity: 0.55; }
.qpost-calendar-day.is-today > b { background: #dd6738; border-radius: 50%; color: #fff; display: inline-grid; height: 22px; place-items: center; width: 22px; }
.qpost-calendar-day > div { display: grid; gap: 4px; margin-top: 6px; }
.qpost-calendar-day button {
  background: #fff2eb;
  border: 0;
  border-left: 3px solid #dc6738;
  border-radius: 6px;
  color: #713115;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
  padding: 5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qpost-calendar-day button span { color: #bb4d22; margin-right: 3px; }
.qpost-calendar-tick { color: #b84c21; font-weight: 900; }

.qpost-columns { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr); }
.qpost-card-list,
.qpost-ready-list { display: grid; gap: 9px; }

.qpost-card,
.qpost-ready-list button {
  align-items: center;
  background: #fff;
  border: 1px solid #e0e7ee;
  border-radius: 13px;
  color: #18344f;
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.qpost-card { display: block; padding: 0; }
.qpost-card-open { background: transparent; border: 0; color: inherit; cursor: pointer; display: grid; gap: 4px; padding: 12px 14px 8px; text-align: left; width: 100%; }
.qpost-card-open > span:not(.qpost-card-status), .qpost-card-open small { color: #718091; font-size: 10px; }

.qpost-card:hover,
.qpost-ready-list button:hover { background: #fffaf7; border-color: #e99b79; }
.qpost-card-status { color: #b84c21; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.qpost-ready-list button { align-items: center; grid-template-columns: 1fr auto; }
.qpost-ready-list button span { display: grid; gap: 3px; }
.qpost-ready-list button small { color: #748395; }
.qpost-ready-list button b { color: #bd5025; font-size: 10px; text-transform: uppercase; }
.qpost-empty { align-items: center; background: #f8fafc; border: 1px dashed #cdd9e3; border-radius: 12px; color: #708090; display: grid; gap: 4px; justify-items: center; min-height: 100px; padding: 20px; text-align: center; }
.qpost-empty.compact { min-height: 70px; }

.qpost-send-action,
.qpost-save-button {
  background: #d85e2f;
  border-color: #d85e2f;
  color: #fff;
}

.qpost-send-action:hover,
.qpost-save-button:hover { background: #bd4d23; border-color: #bd4d23; }

.qpost-composer { display:flex; flex-direction:column; max-height:calc(100dvh - 44px); max-width:1050px; overflow:hidden; padding:0; position:relative; }
.qpost-composer > .modal-close { position:absolute; right:14px; top:14px; z-index:3; }
.qpost-composer > header { align-items:start; border-bottom:1px solid #e2e8ee; display:flex; flex:0 0 auto; gap:20px; justify-content:space-between; padding:18px 66px 14px 22px; }
.qpost-composer h2 { margin: 4px 0 5px; }
.qpost-composer header p { color: #6b7b8b; margin: 0; }
.qpost-source-chip { background: #eaf5fb; border-radius: 999px; color: #23678e; font-size: 10px; font-weight: 800; padding: 8px 11px; }
.qpost-composer-grid { align-items:start; display:grid; flex:1 1 auto; grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr); min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.qpost-composer-side { align-self:start; background:#f6f9fb; border-left:1px solid #e1e8ee; display:grid; min-width:0; position:sticky; top:0; }
.qpost-preview-panel { background:#f6f9fb; padding:18px; }
.qpost-preview-panel > small { color: #738294; display: block; font-size: 10px; line-height: 1.5; margin-top: 12px; }
.qpost-preview-panel .key-work-media-preview-list { margin-top: 12px; }
.qpost-media-preview-clean .media-drive-open-button,
.qpost-media-preview-clean .single-media-actions { display: none; }
.qpost-thumbnail-card { background:#fff; border-top:1px solid #e1e8ee; display:grid; gap:10px; padding:14px 18px; }
.qpost-thumbnail-card.qpost-thumbnail-inline { border:1px solid #dce6ed; border-radius:14px; grid-column:1 / -1; padding:14px; }
.qpost-thumbnail-inline .qpost-thumbnail-image,
.qpost-thumbnail-inline .qpost-thumbnail-empty { max-width:260px; }
.qpost-thumbnail-inline .button { max-width:260px; }
.qpost-thumbnail-card > div:first-child { display:grid; gap:2px; }
.qpost-thumbnail-card > div:first-child > span { color:#304b64; font-size:11px; font-weight:900; }
.qpost-thumbnail-card small { color:#738294; font-size:9px; line-height:1.45; }
.qpost-thumbnail-image { background:#f6f9fb; border:1px solid #dce6ed; border-radius:12px; display:grid; min-height:76px; overflow:hidden; place-items:center; }
.qpost-thumbnail-image img { display:block; max-height:128px; object-fit:contain; width:100%; }
.qpost-thumbnail-empty { align-items:center; background:#f6f9fb; border:1px dashed #cbd8e2; border-radius:12px; color:#8492a1; display:flex; font-size:10px; justify-content:center; min-height:76px; }
.qpost-thumbnail-card .button { justify-content:center; min-height:34px; width:100%; }
.qpost-fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; }
.qpost-fields > label { color: #304b64; display: grid; font-size: 11px; font-weight: 800; gap: 6px; }
.qpost-fields > label.full { grid-column: 1 / -1; }
.qpost-fields input,
.qpost-fields select,
.qpost-fields textarea { background: #fff; border: 1px solid #cfdbe5; border-radius: 10px; color: #18344f; font: inherit; font-weight: 500; padding: 11px 12px; width: 100%; }
.qpost-fields fieldset { border: 0; display: flex; gap: 8px; margin: 0; padding: 0; }
.qpost-fields legend { color: #304b64; font-size: 11px; font-weight: 800; margin-bottom: 6px; }
.qpost-channel input { position: absolute; opacity: 0; }
.qpost-channel span { align-items: center; background: #f7f9fb; border: 1px solid #d8e2ea; border-radius: 10px; cursor: pointer; display: flex; gap: 7px; min-height: 42px; padding: 7px 10px; }
.qpost-channel input:checked + span { background: #fff3ed; border-color: #dd7348; color: #913d1c; }
.qpost-channel input:focus-visible + span { outline: 3px solid rgba(216, 94, 47, 0.25); outline-offset: 2px; }
.qpost-channel b { align-items: center; background: #173e68; border-radius: 50%; color: #fff; display: inline-flex; height: 24px; justify-content: center; width: 24px; }
.qpost-channel-picker { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qpost-channel.is-unavailable { opacity: .46; }
.qpost-channel.is-unavailable span { cursor: not-allowed; filter: grayscale(1); }
.qpost-account-identity { display: flex; margin-left: auto; padding-right: 4px; }
.qpost-account-avatar { background: #eaf2f7; border: 2px solid #fff; border-radius: 50%; display: grid; height: 42px; margin-left: -8px; place-items: center; position: relative; width: 42px; }
.qpost-account-avatar img { border-radius: inherit; height: 100%; object-fit: cover; width: 100%; }
.qpost-account-avatar > b { color: #173e68; font-size: 10px; }
.qpost-account-avatar > i { align-items: center; background: #1877f2; border: 2px solid #fff; border-radius: 50%; bottom: -3px; color: #fff; display: flex; font-size: 9px; font-style: normal; font-weight: 900; height: 17px; justify-content: center; position: absolute; right: -3px; width: 17px; }
.qpost-account-avatar > i.is-instagram { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.qpost-destination { background: #f5f9fc; border: 1px solid #dce7ef; border-radius: 14px; padding: 10px 12px; }
.qpost-destination > span { color: #6b7b8b; display: block; font-size: 9px; font-weight: 900; letter-spacing: .08em; margin-bottom: 7px; text-transform: uppercase; }
.qpost-destination > div { align-items: center; display: flex; gap: 9px; }
.qpost-destination img,.qpost-destination > div > b { border-radius: 50%; height: 34px; object-fit: cover; width: 34px; }
.qpost-destination > div > b { align-items: center; background: #dcebf4; color: #173e68; display: flex; font-size: 10px; justify-content: center; }
.qpost-destination small { color: #687b8e; }
.qpost-deliveries { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.qpost-deliveries.is-compact { border-top: 1px solid #edf1f4; margin: 0; padding: 8px 14px 11px; }
.qpost-delivery-group { align-items: center; display: inline-flex; gap: 5px; }
.qpost-delivery { background: #edf3f7; border-radius: 999px; color: #4f6578; font-size: 9px; font-weight: 850; padding: 4px 7px; }
.qpost-delivery-link { align-items:center; display:inline-flex; gap:4px; text-decoration:none; }
.qpost-delivery-link:hover { box-shadow:0 0 0 2px rgba(36,113,73,.16); text-decoration:underline; }
.qpost-delivery-published { background: #e8f7ef; color: #247149; }
.qpost-delivery-failed { background: #fff0ed; color: #9a382b; }
.qpost-delivery-uncertain { background: #fff6d9; color: #775b0b; }
.qpost-retry-button { background: #173e68; border: 0; border-radius: 999px; color: #fff; cursor: pointer; font-size: 9px; font-weight: 900; min-height: 25px; padding: 5px 9px; }
.qpost-retry-button:hover { background: #0d2d4d; }
.qpost-retry-button:disabled,.qpost-manual-button:disabled { cursor: wait; opacity: .58; }
.qpost-manual-button { background:#fff; border:1px solid #beccd7; border-radius:999px; color:#304b64; cursor:pointer; font-size:9px; font-weight:900; min-height:25px; padding:5px 9px; }
.qpost-manual-button:hover { background:#edf4f8; border-color:#8fa7b9; }
.qpost-retry-panel { background: #fffaf3; border: 1px solid #f1d9bf; border-radius: 12px; display: grid; gap: 3px; grid-column: 1 / -1; padding: 10px 12px; }
.qpost-retry-panel > strong { color: #66411e; font-size: 11px; }
.qpost-retry-panel > span { color: #80684f; font-size: 10px; }
.qpost-channel.is-locked { cursor:not-allowed; filter:grayscale(1); opacity:.48; }
.qpost-composer footer { align-items:stretch; border-top:1px solid #e2e8ee; display:flex; flex-direction:column; gap:10px; padding:14px 18px 18px; }
.qpost-composer footer span { color:#6d7e8f; font-size:10px; line-height:1.45; }
.qpost-composer footer .button { justify-content:center; min-height:42px; width:100%; }

#tab-key-ai .kai { margin-top: 0; }

@media (max-width: 900px) {
  .qos-module-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qpost-hero { align-items: stretch; flex-direction: column; }
  .qpost-connection-state { flex-basis: auto; }
  .qpost-columns,
  .qpost-composer-grid { grid-template-columns: 1fr; }
  .qpost-connection-grid { grid-template-columns: 1fr; }
  .qpost-composer-side { border-left:0; border-top:1px solid #e1e8ee; position:static; }
}

/* Key-OS 5.0 compact workspace pass. */
.workspace-client-summary {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}

.workspace-client-summary > .eyebrow { flex: 0 0 100%; }
.workspace-client-summary > #workspaceTitle { flex: 0 1 auto; }
.workspace-context-actions {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-width: 0;
}
.workspace-context-actions[hidden] { display: none !important; }
.workspace-context-actions .key-work-add-button,
.workspace-context-actions .key-work-bulk-toggle {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 9px !important;
  height: 27px !important;
  min-height: 27px !important;
  min-width: 0 !important;
  padding: 3px 10px !important;
  position: static !important;
  transform: none !important;
  white-space: nowrap;
  width: auto !important;
}

body.admin-page .footer,
body.client-page .footer {
  min-height: 36px;
  padding: 10px 0;
}

@media (max-width: 760px) {
  .qpost-channel-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-client-summary { align-items: flex-start; }
  .workspace-context-actions { flex: 0 0 100%; }
  .workspace-context-actions .key-work-add-button,
  .workspace-context-actions .key-work-bulk-toggle { flex: 0 0 auto !important; }
  .qos-module-tabs .qos-module { flex-basis: 170px; min-height: 44px; }
  .qos-module-tabs .qos-module small { display: none; }
  body.admin-page .footer,
  body.client-page .footer { min-height: 24px; padding-block: 2px !important; }
}

@media (max-width: 600px) {
  .qos-module-tabs { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .qos-module-tabs .qos-module { flex: 0 0 220px; scroll-snap-align: start; }
  .workspace-section-menu { width: 100%; }
  .workspace-section-menu-toggle { justify-content: center; width: 100%; }
  .workspace-section-menu-panel { left: 0; min-width: 0; right: 0; }
  .qpost-metrics { grid-template-columns: repeat(3, minmax(88px, 1fr)); overflow-x: auto; }
  .qpost-calendar { overflow-x: auto; }
  .qpost-calendar-weekdays,
  .qpost-calendar-grid { min-width: 720px; }
  .qpost-fields { grid-template-columns: 1fr; padding: 16px; }
  .qpost-fields > label.full { grid-column: auto; }
  .qpost-composer { max-height:calc(100dvh - 16px); }
  .qpost-composer > header { padding:15px 58px 12px 16px; }
  .qpost-composer footer .button { min-height:46px; }
}

@media (prefers-reduced-motion: reduce) {
  .qos-module-tabs .qos-module,
  .qpost-card,
  .qpost-ready-list button { transition: none; }
  .workspace-section-menu-chevron { transition: none; }
}