/* ==========================================================================
   Retraak UI — Retraak monochrome + frosted glass system
   Golden-ratio system: spacing follows Fibonacci (5·8·13·21·34·55·89·144),
   type follows a √φ modular scale (12·13·16·20·26·33·42·54·68),
   body line-height = φ (1.618), split layouts = 1.618fr : 1fr.
   Frosted glass surfaces, restrained motion, accessible contrast.
   ========================================================================== */

/* Universal HTML5 hidden enforcement */
[hidden] { display: none !important; }

/* tokens:start */
/* Premium palette (v140): mostly neutral, one calm accent. Every component uses
   these tokens; rebrand by changing the values here (the accent also follows
   Admin > Branding through the --primary value injected in the page head). */
:root {
  /* Single accent (violet) and its derived tints */
  --primary: #4B3EB0;
  --primary-hover: color-mix(in srgb, var(--primary) 86%, #000000);
  --primary-50: color-mix(in srgb, var(--primary) 8%, var(--surface));
  --primary-100: color-mix(in srgb, var(--primary) 15%, var(--surface));
  --primary-200: color-mix(in srgb, var(--primary) 26%, var(--surface));
  --primary-300: color-mix(in srgb, var(--primary) 55%, var(--surface));
  --primary-700: color-mix(in srgb, var(--primary) 80%, var(--ink));
  --primary-soft: var(--primary-50);
  --focus-ring: color-mix(in srgb, var(--primary) 28%, transparent);
  --on-primary: #FFFFFF;
  --on-dark: #FFFFFF;
  --gold: var(--primary); --gold-soft: var(--primary-50); /* premium highlight = accent */
  --cta: #0A0A0B; --cta-hover: #26262B; --on-cta: #FFFFFF; /* primary call-to-action: solid black */

  /* Neutrals: black & white */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --card: var(--surface);
  --surface-2: #F7F7F8;
  --surface-3: #EFEFF1;
  --border: #E7E7EA;
  --border-strong: #D4D4D8;
  --ink: #000000;
  --fg: #0A0A0B;
  --muted: #5C5C66;
  --subtle: #8E8E98;
  --shadow-ink: #000000;
  --night: #0A0A0B; /* constant dark panel (hero, dark cards); text on it uses --on-dark */
  --overlay: color-mix(in srgb, var(--shadow-ink) 46%, transparent);

  /* Status colours; *-ink variants pass AA on their ~8% tints */
  --success: #1F8A5B; --success-bg: color-mix(in srgb, var(--success) 8%, var(--surface)); --success-line: color-mix(in srgb, var(--success) 28%, var(--surface)); --success-ink: color-mix(in srgb, var(--success) 78%, var(--ink));
  --warning: #B7791F; --warning-bg: color-mix(in srgb, var(--warning) 8%, var(--surface)); --warning-line: color-mix(in srgb, var(--warning) 30%, var(--surface)); --warning-ink: color-mix(in srgb, var(--warning) 70%, var(--ink));
  --danger: #D14343; --danger-bg: color-mix(in srgb, var(--danger) 8%, var(--surface)); --danger-line: color-mix(in srgb, var(--danger) 28%, var(--surface)); --danger-ink: color-mix(in srgb, var(--danger) 82%, var(--ink));
  --info: #3B6FD9; --info-bg: color-mix(in srgb, var(--info) 8%, var(--surface)); --info-line: color-mix(in srgb, var(--info) 28%, var(--surface)); --info-ink: color-mix(in srgb, var(--info) 78%, var(--ink));

  /* Legacy names used across older page styles */
  --teal: var(--success);
  --amber: var(--warning);
  --red: var(--danger);
  --teal-50: var(--success-bg);
  --amber-50: var(--warning-bg);
  --red-50: var(--danger-bg);
  --text: var(--fg);
  --line: var(--border);
  --accent: var(--primary);

  /* Fibonacci spacing */
  --s1: 5px; --s2: 8px; --s3: 13px; --s4: 21px; --s5: 34px; --s6: 55px; --s7: 89px; --s8: 144px;

  /* √φ type scale */
  --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 16px; --t-lg: 20px; --t-xl: 26px; --t-2xl: 33px; --t-3xl: 42px; --t-4xl: 54px; --t-5xl: 68px;

  /* Radii 10–16px */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --radius: var(--r-lg);

  /* Elevation — soft and low-contrast */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 4%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 4%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  --shadow-md: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 4%, transparent), 0 12px 32px -16px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  --shadow-lg: 0 2px 6px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 32px 80px -32px color-mix(in srgb, var(--shadow-ink) 30%, transparent);

  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --container: 1220px;
  --sidebar-w: 264px;
  --topbar-h: 68px;
  --control-h: 42px;

  /* Legacy aliases used by older page-level styles: map to solid surfaces */
  --glass-bg: var(--surface); --glass-border: var(--border); --glass-strong-bg: var(--surface); --glass-strong-border: var(--border);
  --shadow-soft: color-mix(in srgb, var(--shadow-ink) 6%, transparent); --shadow-strong: color-mix(in srgb, var(--shadow-ink) 10%, transparent);
  color-scheme: light;
}
/* Dark theme: <html data-theme="dark">, or the system setting when the user chose "system". */
:root[data-theme="dark"] {
  --primary: #4B3EB0;
  --primary-hover: #3D328F;
  --on-primary: #0F1012;
  --cta: #FFFFFF; --cta-hover: #E7E7EA; --on-cta: #000000;
  --bg: #000000;
  --surface: #0B0B0D;
  --surface-2: #141417;
  --surface-3: #1C1C20;
  --border: #26262B;
  --border-strong: #34343A;
  --ink: #FFFFFF;
  --fg: #F5F5F7;
  --muted: #A1A1AA;
  --subtle: #71717A;
  --shadow-ink: #000000;
  --night: #141417;
  --overlay: color-mix(in srgb, #000000 62%, transparent);
  --success: #4CC38A; --warning: #E0A43F; --danger: #F07171; --info: #7AA2F7;
  --success-ink: var(--success); --warning-ink: var(--warning); --danger-ink: var(--danger); --info-ink: var(--info);
  --success-bg: color-mix(in srgb, var(--success) 14%, var(--surface)); --warning-bg: color-mix(in srgb, var(--warning) 14%, var(--surface));
  --danger-bg: color-mix(in srgb, var(--danger) 14%, var(--surface)); --info-bg: color-mix(in srgb, var(--info) 14%, var(--surface));
  --primary-50: color-mix(in srgb, var(--primary) 12%, var(--surface));
  --primary-100: color-mix(in srgb, var(--primary) 18%, var(--surface));
  --primary-200: color-mix(in srgb, var(--primary) 30%, var(--surface));
  color-scheme: dark;
}
/* tokens:end */


/* Orders, inbox drawer, compact admin notifications and focused edit dialogs */
.project-detail-page{display:flex!important;flex-direction:column;gap:14px;align-items:stretch}.project-detail-page>.project-heading-row,.project-detail-page>.card,.project-detail-page>details{width:100%;box-sizing:border-box}.project-heading-row{padding:6px 2px}.order-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.project-more-actions{position:relative}.project-more-actions>summary{list-style:none;cursor:pointer}.project-more-actions>summary::-webkit-details-marker{display:none}.project-more-actions-menu{position:absolute;z-index:30;top:calc(100% + 8px);right:0;display:grid;gap:6px;min-width:210px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md,0 12px 34px color-mix(in srgb, var(--shadow-ink) 16%, transparent))}.project-more-actions-menu form{margin:0}.project-more-actions-menu .btn{width:100%;text-align:left}.order-description{padding:14px 0;margin:0;color:var(--muted);border-bottom:1px solid var(--border);line-height:1.65}.order-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:18px 0}.order-facts>div{min-width:0;display:grid;gap:6px}.order-facts span{color:var(--muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.order-facts strong{overflow-wrap:anywhere}.order-status-update{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border)}.order-status-update p{margin:4px 0 0}.order-status-form{display:flex;align-items:center;gap:8px;margin:0}.order-status-form select{min-width:190px}.project-workflow-details,.project-detail-page>.project-edit-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.project-workflow-details>summary,.project-edit-card>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;cursor:pointer;list-style:none}.project-workflow-details>summary::-webkit-details-marker,.project-edit-card>summary::-webkit-details-marker{display:none}.project-workflow-details>summary strong,.project-edit-card>summary strong{display:block}.project-workflow-details>summary small,.project-edit-card>summary small{display:block;margin-top:4px;color:var(--muted);font-size:12px}.workflow-count{font-size:12px;color:var(--muted);white-space:nowrap}.project-workflow-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 16px 16px}.project-workflow-content>.card{margin:0!important;min-width:0}.project-workflow-content>.card:last-child:nth-child(odd){grid-column:1/-1}.project-edit-content{padding:0 20px 20px}.project-edit-card>summary>b{font-size:20px}.project-payment-reviews{margin:0!important}.project-payment-reviews .table-wrap{min-width:0}.project-payment-table th,.project-payment-table td{vertical-align:middle}.project-detail-page .btn-danger{background:var(--danger);color:var(--on-dark);border-color:var(--danger)}.admin-shell .side-nav{scrollbar-width:none;overscroll-behavior:contain}.admin-shell .side-nav::-webkit-scrollbar{display:none;width:0;height:0}.notif-panel{width:min(350px,calc(100vw - 24px));min-width:0;max-height:min(430px,calc(100vh - 90px));overflow-y:auto;overscroll-behavior:contain;padding:8px}.notif-panel .notif-item{gap:8px;padding:7px 9px;align-items:flex-start}.notif-panel .notif-item .notif-dot{margin-top:5px}.notif-panel .notif-item strong{font-size:12px;line-height:1.35}.notif-panel .notif-item small{font-size:11px;line-height:1.35;margin-top:2px}.notif-panel .notif-item small:nth-of-type(1){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.notif-panel .notif-menu-footer{padding:7px 8px 5px}.message-drawer-backdrop{position:fixed;inset:0;z-index:180;display:flex;justify-content:flex-end;background:color-mix(in srgb, var(--shadow-ink) 40%, transparent);opacity:0;transition:opacity .22s ease}.message-drawer-backdrop[hidden]{display:none!important}.message-drawer-backdrop.is-open{opacity:1}.message-drawer-panel{position:relative;width:min(560px,100vw);height:100dvh;background:var(--surface);box-shadow:-18px 0 50px color-mix(in srgb, var(--shadow-ink) 20%, transparent);transform:translateX(100%);transition:transform .24s ease;overflow:hidden}.message-drawer-backdrop.is-open .message-drawer-panel{transform:translateX(0)}.message-drawer-panel iframe{display:block;width:100%;height:100%;border:0;background:var(--surface-2)}.message-drawer-close{position:absolute;z-index:2;top:12px;right:14px;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 10px color-mix(in srgb, var(--shadow-ink) 8%, transparent)}body.message-drawer-open{overflow:hidden}.message-drawer-document{margin:0;background:var(--surface-2);color:var(--ink);font-family:var(--font-body),system-ui,sans-serif}.message-inbox-page{width:min(1320px,100%);margin:0 auto;padding:28px 24px 40px}.message-inbox-page.is-drawer{width:100%;padding:68px 20px 24px}.message-inbox-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}.message-inbox-heading h1{margin:4px 0;font-size:clamp(24px,3vw,34px)}.message-inbox-heading p{margin:0;color:var(--muted)}.message-open-inbox{font-size:12px;font-weight:700}.message-project-select-label{display:block;margin:0 0 6px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.message-project-select{width:100%;margin-bottom:12px}.message-inbox-layout{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:16px;align-items:start}.message-conversation-list,.message-inbox-card{min-width:0;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}.message-conversation-list h2{margin:0 0 12px;font-size:15px}.message-conversation{display:grid;gap:4px;margin:0 0 6px;padding:12px;border:1px solid transparent;border-radius:11px;color:var(--ink);text-decoration:none}.message-conversation:hover,.message-conversation.is-active{background:var(--surface-2);border-color:var(--border)}.message-conversation span,.message-conversation b{font-size:12px;color:var(--muted)}.message-conversation b{color:var(--primary)}.message-thread-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border)}.message-thread-heading h2{margin:4px 0 0;font-size:19px}.message-project-tag{padding:6px 9px;border-radius:99px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700}.message-thread-items{display:flex;flex-direction:column;gap:10px;max-height:55vh;min-height:150px;overflow:auto;padding:16px 2px}.message-bubble{width:fit-content;max-width:min(88%,680px);padding:11px 13px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.message-bubble.team{align-self:flex-end;background:var(--primary-50);border-color:var(--primary-100)}.message-bubble-meta{display:flex;justify-content:space-between;gap:14px;align-items:center}.message-bubble-meta strong{font-size:12px}.message-bubble-meta time{color:var(--muted);font-size:10px;white-space:nowrap}.message-bubble p{margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.55}.message-thread-empty{margin:auto;color:var(--muted);text-align:center;font-size:13px}.message-reply-form{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--border)}.message-reply-form label{font-weight:750;font-size:12px}.message-reply-form textarea{min-height:90px;resize:vertical}.message-reply-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.message-reply-footer small{color:var(--muted);font-size:11px}.message-empty-state{display:grid;justify-items:center;text-align:center;gap:8px;padding:56px 18px}.message-empty-state h2,.message-empty-state p{margin:0}.message-empty-state p{color:var(--muted);font-size:13px}.message-empty-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--surface-2);color:var(--primary);font-size:21px}.admin-edit-dialog{width:min(720px,calc(100vw - 28px));max-width:none;max-height:min(88vh,900px);padding:0;border:0;border-radius:18px;background:transparent;color:var(--ink);overflow:visible}.admin-edit-dialog::backdrop{background:color-mix(in srgb, var(--shadow-ink) 48%, transparent);backdrop-filter:blur(3px)}.admin-edit-dialog-card{max-height:min(88vh,900px);overflow:auto;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 70px color-mix(in srgb, var(--shadow-ink) 24%, transparent)}.admin-edit-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.admin-edit-dialog-heading h2{margin:4px 0}.admin-edit-dialog-heading p{margin:0}.admin-edit-dialog .stack-form{display:grid;gap:8px}.admin-edit-dialog .form-actions{justify-content:flex-end}.admin-user-profile-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:16px 0 0}.admin-user-profile-details>div{min-width:0}.admin-user-profile-details dt{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.admin-user-profile-details dd{margin:3px 0 0;overflow-wrap:anywhere;font-size:13px}.admin-user-profile-details .admin-user-bio{grid-column:1/-1}.account-control-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:900px){.order-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.project-workflow-content{grid-template-columns:minmax(0,1fr)}.project-workflow-content>.card:last-child:nth-child(odd){grid-column:auto}}
@media(max-width:700px){.message-inbox-page{padding:20px 14px 28px}.message-inbox-page.is-drawer{padding:66px 14px 18px}.message-inbox-layout{grid-template-columns:minmax(0,1fr)}.message-conversation-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}.message-conversation-list h2{grid-column:1/-1}.message-thread-items{max-height:45vh}.order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.order-status-form{width:100%;flex-wrap:wrap}.order-status-form select{flex:1;min-width:0}.order-header-actions{justify-content:flex-start}.admin-user-profile-details{grid-template-columns:minmax(0,1fr)}.admin-user-profile-details .admin-user-bio{grid-column:auto}}
@media(max-width:480px){.message-thread-heading{align-items:flex-start;flex-direction:column}.message-bubble{max-width:100%}.message-bubble-meta{align-items:flex-start;flex-direction:column;gap:3px}.message-inbox-card,.message-conversation-list{padding:14px}.order-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.project-workflow-details>summary,.project-edit-card>summary{padding:15px}.workflow-count{display:none}.admin-edit-dialog-card{padding:18px}.account-control-summary>.btn{width:100%}}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 89px; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh;
  background-color: var(--surface-2);
  background-image:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--primary) 16%, transparent) 0px, transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(56, 189, 248, 0.15) 0px, transparent 46%),
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--primary) 12%, transparent) 0px, transparent 52%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--primary) 14%, transparent) 0px, transparent 46%),
    radial-gradient(circle at 8% 90%, rgba(14, 165, 233, 0.14) 0px, transparent 48%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-base); line-height: 1.618;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word;
  overflow-x: clip;
}
[data-theme="dark"] body {
  background-color: var(--night);
  background-image:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--primary) 22%, transparent) 0px, transparent 48%),
    radial-gradient(circle at 88% 12%, rgba(56, 189, 248, 0.18) 0px, transparent 48%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 15%, transparent) 0px, transparent 52%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--primary) 20%, transparent) 0px, transparent 48%);
  background-attachment: fixed;
}
body.app-shell, body.workspace-shell, body.admin-shell, body.client-portal-body, .track-wrap {
  background-color: var(--surface-2);
  background-image:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--primary) 15%, transparent) 0px, transparent 46%),
    radial-gradient(circle at 92% 10%, rgba(14, 165, 233, 0.14) 0px, transparent 46%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--primary) 11%, transparent) 0px, transparent 50%),
    radial-gradient(circle at 86% 88%, color-mix(in srgb, var(--primary) 13%, transparent) 0px, transparent 46%),
    radial-gradient(circle at 12% 86%, rgba(56, 189, 248, 0.12) 0px, transparent 46%);
  background-attachment: fixed;
}
[data-theme="dark"] body.app-shell,
[data-theme="dark"] body.workspace-shell,
[data-theme="dark"] body.admin-shell,
[data-theme="dark"] body.client-portal-body,
[data-theme="dark"] .track-wrap {
  background-color: var(--night);
  background-image:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--primary) 22%, transparent) 0px, transparent 46%),
    radial-gradient(circle at 92% 10%, rgba(14, 165, 233, 0.18) 0px, transparent 46%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--primary) 15%, transparent) 0px, transparent 50%),
    radial-gradient(circle at 86% 88%, color-mix(in srgb, var(--primary) 20%, transparent) 0px, transparent 46%);
  background-attachment: fixed;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--ink); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(28px, 3vw, var(--t-2xl)); }
h2 { font-size: clamp(21px, 2.2vw, var(--t-xl)); }
h3 { font-size: var(--t-lg); font-weight: 750; letter-spacing: -.018em; }
h4 { font-size: var(--t-md); font-weight: 750; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s4) 0; }
code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
code { background: var(--surface-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: var(--r-xs); word-break: break-all; }
pre { background: var(--surface-2); border: 1px solid var(--border); padding: var(--s3); border-radius: var(--r-sm); overflow: auto; }
::selection { background: var(--primary-200); color: var(--ink); }
.muted { color: var(--muted); }
.small, small { font-size: var(--t-sm); }
.right { text-align: right; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s4); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin: 0 0 var(--s3); }
.eyebrow::before { content: ""; width: 21px; height: 2px; border-radius: 2px; background: currentColor; }
.text-link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; }
.text-link svg { width: 16px; height: 16px; }

/* Decorative aurora layers */
.aurora-bg {
  background-image:
    radial-gradient(at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 50%, color-mix(in srgb, var(--primary) 8%, transparent) 0px, transparent 50%);
}

/* Modern Frosted Glassmorphism System */
.glass, .glass-card, .glass-effect,
.card, .stat-card, .admin-card, .client-card, .pricing-card,
.workflow-step-card, .feature-card, .preview-panel, .project-edit-card,
.project-workflow-details, .message-inbox-card, .message-conversation-list,
.outreach-card, .admin-edit-dialog-card, .hero-metric-card, .client-order-row,
.futuristic-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 80%, transparent) 0%, color-mix(in srgb, var(--surface) 65%, transparent) 100%) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 32px -4px color-mix(in srgb, var(--shadow-ink) 7%, transparent), 0 2px 6px -1px color-mix(in srgb, var(--shadow-ink) 3%, transparent), inset 0 1px 1px 0 color-mix(in srgb, var(--surface) 98%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--shadow-ink) 2%, transparent) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Interactive Hover Effects (strictly on clickable elements, never static containers) */
a.card:hover, a.stat-card:hover, a.admin-card:hover, a.client-card:hover,
.card-interactive:hover, .card.is-clickable:hover, button.card:hover,
.pricing-card:hover, .workflow-step-card:hover, .client-order-row:hover,
a.futuristic-card:hover, .futuristic-card.is-clickable:hover {
  transform: translateY(-2.5px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent) 0%, color-mix(in srgb, var(--surface) 74%, transparent) 100%) !important;
  box-shadow: 0 18px 44px -6px color-mix(in srgb, var(--primary) 14%, transparent), 0 4px 14px -2px color-mix(in srgb, var(--shadow-ink) 5%, transparent), inset 0 1px 1px 0 var(--surface) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

/* Neutralize non-hoverable static elements (invoice preview, PDF tables, static cards, plain text) */
.invoice-rendered-pane tbody tr:hover td,
.invoice-preview-viewport tbody tr:hover td,
.settings-invoice-studio tbody tr:hover td,
.inv-paper tbody tr:hover td,
.inv-render tbody tr:hover td,
.preview-invoice tbody tr:hover td {
  background: transparent !important;
}
.invoice-rendered-pane:hover,
.invoice-preview-viewport:hover,
.settings-invoice-studio .card:hover,
.invoice-card-wrapper:hover,
.stat-card:not(a):hover,
.card:not(a):not(.card-interactive):not(.is-clickable):not(.pricing-card):not(.workflow-step-card):not(button):hover {
  transform: none !important;
}

.glass-strong {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 14px 40px -6px color-mix(in srgb, var(--shadow-ink) 8%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--surface) 100%, transparent) !important;
}

[data-theme="dark"] .glass, [data-theme="dark"] .glass-card, [data-theme="dark"] .glass-effect,
[data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .admin-card,
[data-theme="dark"] .client-card, [data-theme="dark"] .pricing-card, [data-theme="dark"] .workflow-step-card,
[data-theme="dark"] .futuristic-card {
  background: linear-gradient(135deg, rgba(24, 30, 48, 0.78) 0%, rgba(15, 18, 30, 0.70) 100%) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent) !important;
  box-shadow: 0 12px 36px -6px color-mix(in srgb, var(--shadow-ink) 48%, transparent), inset 0 1px 1px 0 color-mix(in srgb, var(--on-dark) 14%, transparent) !important;
}

[data-theme="dark"] .glass-strong {
  background: rgba(18, 24, 38, 0.88) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent) !important;
}

/* Glass headers & sidebars across public, user workspace, admin, and client tracking */
.site-header, .app-header, .admin-header, .topbar, .client-tracking-header {
  background: color-mix(in srgb, var(--surface) 75%, transparent) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  box-shadow: 0 4px 20px -2px color-mix(in srgb, var(--shadow-ink) 4%, transparent) !important;
}

.sidebar {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
}

.admin-shell .sidebar {
  background: var(--night) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-right: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent) !important;
  color: var(--surface-2) !important;
}

.admin-shell .sidebar a,
.admin-shell .sidebar .side-nav a,
.admin-shell .sidebar .nav-sub-item {
  color: var(--border-strong) !important;
}

.admin-shell .sidebar a:hover,
.admin-shell .sidebar .side-nav a:hover,
.admin-shell .sidebar .nav-sub-item:hover {
  color: var(--on-dark) !important;
  background: color-mix(in srgb, var(--on-dark) 8%, transparent) !important;
}

.admin-shell .sidebar a.active,
.admin-shell .sidebar .side-nav a.active,
.admin-shell .sidebar .nav-sub-item.active {
  color: var(--on-dark) !important;
  background: var(--primary, var(--primary)) !important;
}

[data-theme="dark"] .site-header, [data-theme="dark"] .app-header,
[data-theme="dark"] .admin-header, [data-theme="dark"] .topbar,
[data-theme="dark"] .client-tracking-header {
  background: rgba(13, 17, 28, 0.82) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 7%, transparent) !important;
}

[data-theme="dark"] .sidebar {
  background: rgba(13, 17, 28, 0.86) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-right: 1px solid color-mix(in srgb, var(--on-dark) 7%, transparent) !important;
}

/* Custom themed scrollbars across entire application */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 35%, transparent) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Smooth micro-interactions & entry animations */
/* Page-enter motion. Fill mode "backwards" + a final transform of none so the
   animated wrappers never become containing blocks for fixed overlays. */
@keyframes retraakFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.app-content, .admin-content, .outreach-layout, .auth-card {
  animation: retraakFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--control-h); padding: 0 var(--s4); border-radius: var(--r-sm);
  border: 1px solid var(--night); background: var(--surface); color: var(--ink);
  font: 700 var(--t-sm)/1 var(--font-body); letter-spacing: .005em; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-xs); transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
  text-decoration: none !important;
}
.btn:hover { background: var(--surface); border-color: var(--night); color: var(--ink); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-primary { background: var(--night); border-color: var(--night); color: var(--on-dark); }
.btn-primary:hover { background: var(--night); border-color: var(--night); color: var(--on-dark); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }
.btn:focus { outline: none !important; }
.btn:focus-visible { outline: 2px solid var(--ink, var(--ink)) !important; outline-offset: 2px !important; }
.btn-brand { background: var(--primary); border-color: var(--primary); color: var(--on-dark); }
.btn-brand:hover { background: var(--primary-700); border-color: var(--primary-700); color: var(--on-dark); }
.btn-danger { background: var(--red); border-color: var(--red); color: var(--on-dark); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 85%, var(--shadow-ink)); border-color: transparent; color: var(--on-dark); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.btn-demo { background: transparent; }
.btn-sm { min-height: 34px; padding: 0 var(--s3); font-size: var(--t-xs); border-radius: 11px; }
.btn-lg { min-height: 52px; padding: 0 var(--s5); font-size: var(--t-md); border-radius: var(--r-md); }
.btn-block { display: flex; width: 100%; }
.btn + .btn { margin-left: 0; }
button:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
button { font: inherit; }
.client-orders-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.client-orders-list{display:grid;gap:8px;margin-top:18px}.client-order-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;color:var(--ink);text-decoration:none;background:var(--surface)}.client-order-row:hover,.client-order-row[aria-current="page"]{border-color:var(--night);background:var(--surface)}.client-order-main{display:grid;gap:4px;min-width:0}.client-order-main strong,.client-order-main small{overflow-wrap:anywhere}.client-order-main small{color:var(--muted)}.client-order-state{display:flex;gap:6px;flex-wrap:wrap}.client-order-total{font-weight:800;white-space:nowrap}.client-message-thread{display:grid;gap:10px;max-height:360px;overflow:auto;margin:14px 0}.client-message{border:1px solid var(--border);border-radius:12px;padding:12px;max-width:88%;background:var(--surface-2)}.client-message.from-team{margin-left:auto;background:var(--surface)}.client-message time{float:right;color:var(--muted);font-size:11px}.client-message p{margin:8px 0 0;overflow-wrap:anywhere}.client-message-compose{display:grid;gap:9px}.client-message-compose textarea{width:100%}.project-payment-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
@media(max-width:650px){.client-order-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.client-order-state{grid-column:1/-1;grid-row:2}.client-order-total{grid-column:2;grid-row:1}.client-message{max-width:100%}.project-payment-actions{justify-content:flex-start}}

/* ---------- Universal High-Contrast Pills & Badges ---------- */
.pill, .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill, 999px);
  font-size: var(--t-xs, 11px);
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  transition: all 0.15s ease;
}
.pill-violet, .badge-violet { background: var(--primary-50) !important; color: var(--primary) !important; border-color: var(--primary-200) !important; }
.pill-primary, .badge-primary { background: var(--primary-100) !important; color: var(--primary) !important; border-color: var(--primary-200) !important; }
.pill-teal, .pill-emerald, .pill-success, .badge-teal, .badge-emerald, .badge-success { background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-line) !important; }
.pill-amber, .pill-warning, .badge-amber, .badge-warning { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; }
.pill-orange { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; }
.pill-cyan, .pill-info, .badge-cyan, .badge-info { background: var(--info-bg) !important; color: var(--info) !important; border-color: var(--info-line) !important; }
.pill-red, .pill-rose, .pill-danger, .badge-red, .badge-rose, .badge-danger { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger-line) !important; }
.pill-gray, .pill-subtle, .badge-gray, .badge-neutral, .badge-subtle { background: var(--surface-2) !important; color: var(--fg) !important; border-color: var(--border-strong) !important; }

/* Status Toggle Badge Pill */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  line-height: 1.35;
}
.status-badge.is-active {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  border-color: var(--success-line) !important;
}
.status-badge.is-active:hover {
  background: var(--success-bg) !important;
  border-color: var(--success-line) !important;
}
.status-badge.is-draft {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-color: var(--border-strong) !important;
}
.status-badge.is-draft:hover {
  background: var(--border) !important;
  border-color: var(--subtle) !important;
}
.status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Cards ---------- */
.card {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4) clamp(var(--s4), 2vw, 26px);
  box-shadow: 0 10px 32px -4px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 2px 6px -1px color-mix(in srgb, var(--shadow-ink) 3%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--surface) 95%, transparent);
  color: var(--fg);
  min-width: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .card {
  background: rgba(18, 24, 38, 0.72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--on-dark) 9%, transparent);
  box-shadow: 0 12px 36px -6px color-mix(in srgb, var(--shadow-ink) 45%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--on-dark) 8%, transparent);
}
.card + .card { margin-top: var(--s4); }
.card > h2:first-child, .card > h3:first-child, .card > h4:first-child { margin-top: 0; }
.card h2 { font-size: var(--t-lg); }
.card-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.card-grid > * { min-width: 0; }
.card-grid > .card { margin: 0 !important; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.card-grid > .card > form:not(.user-filter-form):not(.crm-search-bar):not(.search-form):not(.inline-form) { display: flex; flex-direction: column; flex: 1; }
.card-grid > .card > form.user-filter-form,
.card-grid > .card > form.crm-search-bar,
.user-filter-form,
.crm-search-bar { display: flex !important; flex-direction: row !important; flex: 0 0 auto !important; gap: 8px !important; align-items: center !important; width: 100% !important; margin-bottom: 14px !important; }
.card-grid > .card > form > .form-actions,
.card-grid > .card > .card-footer { margin-top: auto; }
.card-grid + .card, .card-grid + .card-grid, .card + .card-grid { margin-top: var(--s4); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.golden { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }
.golden-rev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s4); align-items: stretch; }
.golden > .card, .golden-rev > .card { height: 100%; display: flex; flex-direction: column; }
.empty-state { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); }

/* KPI */
.kpi, .admin-kpi, .dashboard-kpi, .mini-stat { position: relative; display: flex; flex-direction: column; gap: var(--s1); min-height: 128px; overflow: hidden; }
.kpi-label { color: var(--muted); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kpi-value { display: block; font-family: var(--font-heading); color: var(--ink); font-size: clamp(24px, 2.3vw, var(--t-2xl)); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; margin-top: auto; overflow-wrap: anywhere; }
.kpi-note { color: var(--subtle); font-size: var(--t-xs); }
.kpi[class*='bar-']::after { content: ''; position: absolute; left: var(--s4); bottom: 0; width: 34px; height: 3px; border-radius: 3px 3px 0 0; background: var(--border-strong); }
a.card { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.kpi.bar-violet::after { background: var(--primary); } .kpi.bar-teal::after { background: var(--teal); } .kpi.bar-amber::after { background: var(--amber); } .kpi.bar-red::after { background: var(--red); } .kpi.bar-blue::after { background: var(--primary); }
.metric-up { color: var(--teal); font-weight: 700; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 700; font-size: var(--t-sm); color: var(--ink); margin: var(--s3) 0 var(--s2); }
.check-label { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search],
input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=week], input[type=color], input[type=file], select, textarea {
  display: block; width: 100%; max-width: 100%; min-width: 0; min-height: var(--control-h);
  padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: 500 14px/1.45 var(--font-body);
  box-shadow: var(--shadow-xs); transition: border-color .16s, box-shadow .16s;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--border-strong)); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-100); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--subtle); cursor: not-allowed; }
select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
input[type=search] { padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b8d9f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; }
input[type=color] { padding: 5px; cursor: pointer; }
input[type=file]:not(.message-file-input) {
  min-height: 48px;
  padding: 8px 12px;
  background: var(--surface-1, var(--surface-2));
  border: 1.5px dashed var(--border-strong, var(--border-strong));
  border-radius: var(--r-sm, 10px);
  color: var(--muted, var(--muted));
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  display: flex;
  align-items: center;
}
input[type=file]:not(.message-file-input):hover {
  border-color: var(--primary, var(--primary));
  background: var(--surface);
  color: var(--ink, var(--ink));
}
input[type=file]:not(.message-file-input)::file-selector-button {
  border: 0;
  border-radius: 8px;
  background: var(--primary, var(--primary));
  color: var(--on-dark);
  font: 700 12.5px var(--font-body);
  padding: 7px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}
input[type=file]:not(.message-file-input)::file-selector-button:hover {
  background: var(--primary-700, var(--primary));
  transform: translateY(-1px);
}
input[type=checkbox], input[type=radio] { width: 17px !important; height: 17px; min-height: 17px; margin: 0; accent-color: var(--primary); vertical-align: middle; cursor: pointer; flex: 0 0 auto; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.form-grid { display: grid; gap: 0 var(--s4); grid-template-columns: minmax(0, 1fr); }
.form-grid > * { min-width: 0; box-sizing: border-box; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > .full,
.form-grid > .col-span-2,
.form-grid > .col-span-full,
.form-grid > .grid-full,
.card-grid > .full,
.card-grid > .col-span-2,
.card-grid > .col-span-full,
.card-grid > .grid-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.form-actions > input[type=email], .form-actions > input[type=text], .form-actions > input[type=search] { flex: 1 1 220px; width: auto; }
.hint { font-size: var(--t-xs); color: var(--muted); margin: var(--s1) 0 0; line-height: 1.55; }
.inline-form { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: 0; }
.inline-search { display: flex; gap: var(--s2); align-items: center; }

/* ---------- Tables ---------- */
.table-responsive { width: 100%; max-width: 100%; overflow-x: auto; border-radius: var(--r-sm); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); padding: var(--s3) var(--s3); border-bottom: 1px solid var(--border); background: transparent; white-space: nowrap; }
td { padding: var(--s3); border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background-color .15s; }
tbody tr:hover > td { background: transparent !important; }
@media (hover: none), (max-width: 768px) {
  tbody tr:hover td, table tbody tr:hover td, .admin-content table tbody tr:hover td, .table-responsive tbody tr:hover td {
    background: transparent !important;
  }
}
tr:last-child td { border-bottom: 0; }
td a strong, td > a { color: var(--ink); }
td a:hover strong { color: var(--primary); }

/* ---------- Toasts ---------- */
.toast { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-sm); margin-bottom: var(--s4); font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.toast-ok { background: var(--teal-50); color: color-mix(in srgb, var(--teal) 80%, var(--shadow-ink)); border-color: color-mix(in srgb, var(--teal) 22%, var(--surface)); }
.toast-err { background: var(--red-50); color: color-mix(in srgb, var(--red) 85%, var(--shadow-ink)); border-color: color-mix(in srgb, var(--red) 22%, var(--surface)); }
.toast[hidden] { display: none !important; }

/* ---------- Progress, stats, charts ---------- */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress > div { height: 100%; border-radius: var(--r-pill); background: var(--primary); }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px dashed var(--border); }
.stat-row:last-of-type { border-bottom: 0; }
.stat-track { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.stat-fill { height: 100%; border-radius: 99px; background: var(--primary); }
.chart-bars { display: flex; align-items: flex-end; gap: var(--s3); height: 190px; margin-top: var(--s4); }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.chart-bar { width: 100%; max-width: 44px; border-radius: 9px 9px 4px 4px; background: var(--primary); }
.chart-val, .chart-label { font-size: 11px; font-weight: 700; color: var(--muted); }

/* ==========================================================================
   PUBLIC SITE
   ========================================================================== */
.announcement-bar { background: var(--night); color: var(--on-dark); font-size: var(--t-sm); font-weight: 600; text-align: center; padding: var(--s2) var(--s4); }
.announcement-bar a { color: var(--on-dark); text-decoration: underline; margin-left: var(--s2); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
  will-change: transform;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 95%, transparent);
  box-shadow: 0 4px 20px -2px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
}
.site-header.header-hidden {
  transform: translateY(-100%);
}
.site-header.header-visible {
  transform: translateY(0);
}
.header-inner { display: flex; align-items: center; gap: var(--s5); height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); font: 800 20px/1 var(--font-heading); letter-spacing: -.04em; min-width: 0; text-decoration: none !important; }
.brand-logo { height: 32px; width: auto; }
.brand-logo-wordmark { display: block; width: auto; height: 34px; max-width: 160px; object-fit: contain; object-position: left center; flex: 0 0 auto; }
.site-header .brand, .sidebar > .brand, .site-footer .brand { flex: 0 0 auto; }
.brand-wordmark-fallback { font: 800 20px/1.1 var(--font-heading); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: var(--s1); margin: 0 auto; }
.site-nav a { color: var(--fg); font-weight: 600; font-size: 14px; padding: var(--s2) var(--s3); border-radius: var(--r-pill); }
.site-nav a:hover { background: var(--surface-3); text-decoration: none; }
.site-nav-mobile-auth { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--s2); }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; }

main { display: block; }
.section { padding: var(--s7) 0; }
.section-tight { padding-top: var(--s6); }
.section-heading { max-width: 680px; margin: 0 0 var(--s6); }
.section-heading.center { text-align: center; margin-inline: auto; }
.section-heading.center .eyebrow { justify-content: center; }
.section-heading h2, .section h2 { font-size: clamp(30px, 4vw, var(--t-3xl)); letter-spacing: -.04em; line-height: 1.08; margin: 0 0 var(--s3); }
.section-sub, .section-heading p { color: var(--muted); font-size: 17px; line-height: 1.618; margin: 0; max-width: 560px; }
.section-heading.center p { margin-inline: auto; }

/* Hero — golden split: copy 1.618 / product 1 */
.hero { padding: var(--s6) 0 var(--s7); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--t-sm); font-weight: 600; color: var(--fg); box-shadow: var(--shadow-xs); }
.hero-kicker b { background: var(--night); color: var(--on-dark); font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--r-pill); }
.hero h1 { font-size: clamp(42px, 6.2vw, var(--t-5xl)); line-height: 1.02; letter-spacing: -.055em; margin: var(--s4) 0; max-width: 13ch; }
.hero h1 .grad { color: var(--primary); -webkit-text-fill-color: currentColor; background: none; }
.hero-lead { font-size: clamp(16px, 1.5vw, var(--t-lg)); color: var(--muted); line-height: 1.618; max-width: 540px; margin: 0 0 var(--s5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s5); color: var(--muted); font-size: var(--t-sm); font-weight: 600; }
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--teal); }

/* Hero product stack */
.hero-stack { position: relative; display: grid; gap: var(--s3); }
.hs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--s4); }
.hs-card.main { box-shadow: var(--shadow-lg); }
.hs-head { display: flex; align-items: center; gap: var(--s3); }
.hs-avatar { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--night); color: var(--on-dark); font: 800 15px var(--font-heading); flex: 0 0 auto; }
.hs-title { font: 800 16px/1.2 var(--font-heading); color: var(--ink); }
.hs-sub { font-size: var(--t-xs); color: var(--muted); }
.hs-head .pill { margin-left: auto; }
.hs-progress { margin: var(--s4) 0 var(--s2); display: flex; justify-content: space-between; font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.hs-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.hs-bar i { display: block; height: 100%; width: 62%; border-radius: 99px; background: var(--primary); }
.hs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s4); }
.hs-steps span { font-size: 11px; font-weight: 700; color: var(--subtle); padding-top: var(--s2); border-top: 3px solid var(--surface-3); }
.hs-steps span.done { color: var(--ink); border-top-color: var(--primary); }
.hs-row { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s3); }
.hs-mini { display: flex; flex-direction: column; gap: 2px; }
.hs-mini small { font-size: 11px; font-weight: 700; color: var(--subtle); text-transform: uppercase; letter-spacing: .07em; }
.hs-mini strong { font: 800 var(--t-xl)/1.1 var(--font-heading); color: var(--ink); letter-spacing: -.04em; }
.hs-mini .ok { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); color: var(--teal); font-weight: 700; }
.hs-mini .ok svg { width: 14px; height: 14px; }
.hs-link { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--r-sm); font: 600 12px ui-monospace, monospace; color: var(--muted); margin-top: var(--s3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hs-link svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--primary); }
.hs-float { position: absolute; right: -13px; top: -21px; background: var(--night); color: var(--on-dark); border-radius: var(--r-pill); padding: 8px 15px; font-size: var(--t-xs); font-weight: 700; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; gap: 6px; }
.hs-float i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }

/* Logo/stats strip */
.proof-strip { border-block: 1px solid var(--border); background: var(--surface); }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-grid > div { padding: var(--s5) var(--s4); border-right: 1px solid var(--border); }
.proof-grid > div:last-child { border-right: 0; }
.proof-grid strong { display: block; font: 800 var(--t-2xl)/1 var(--font-heading); letter-spacing: -.04em; color: var(--ink); }
.proof-grid span { display: block; margin-top: var(--s2); color: var(--muted); font-size: var(--t-sm); }

/* Feature bento — 1.618 : 1 rhythm */
.bento { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.bento .feature-card:first-child { grid-row: span 2; }
.feature-card { position: relative; display: flex; flex-direction: column; padding: var(--s5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; min-height: 233px; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.feature-card h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-lg); }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.618; }
.feature-card .pill { position: absolute; top: var(--s4); right: var(--s4); }
.feature-icon-wrap { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-100); color: var(--primary-700); }
.feature-icon { width: 22px; height: 22px; display: block; }
.feature-card.feature-dark { background: var(--night); border-color: var(--night); color: var(--on-dark); }
.feature-card.feature-dark h3 { color: var(--on-dark); font-size: var(--t-xl); }
.feature-card.feature-dark p { color: color-mix(in srgb, var(--on-dark) 72%, transparent); }
.feature-card.feature-dark .feature-icon-wrap { background: color-mix(in srgb, var(--on-dark) 10%, transparent); color: var(--on-dark); }
.feature-visual { margin-top: auto; padding-top: var(--s5); display: grid; gap: var(--s2); }
.feature-visual div { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: color-mix(in srgb, var(--on-dark) 7%, transparent); border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent); font-size: var(--t-sm); }
.feature-visual b { font-weight: 700; color: var(--on-dark); }
.feature-visual em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--on-dark) 12%, transparent); color: var(--on-dark); }
.feature-visual em.ok { background: var(--success); color: var(--ink); }

/* Workflow — dark band */
.workflow-section { background: var(--night); color: var(--on-dark); border-radius: var(--r-xl); margin: 0 var(--s4); }
.workflow-section h2 { color: var(--on-dark); }
.workflow-section .eyebrow { color: var(--primary-300); }
.workflow-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s6); align-items: start; }
.workflow-copy p { color: color-mix(in srgb, var(--on-dark) 70%, transparent); font-size: 17px; }
.workflow-copy .text-link { color: var(--on-dark); }
.workflow-steps { display: grid; gap: var(--s3); counter-reset: step; }
.workflow-step { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: var(--s4); align-items: start; padding: var(--s4) var(--s5) var(--s4) var(--s4); border-radius: var(--r-lg); background: color-mix(in srgb, var(--on-dark) 5%, transparent); border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent); transition: background .2s; }
.workflow-step:hover { background: color-mix(in srgb, var(--on-dark) 8%, transparent); }
.workflow-step > span { display: grid; place-items: center; width: 55px; height: 55px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 800 var(--t-lg) var(--font-heading); }
.workflow-step h3 { color: var(--on-dark); margin: 4px 0 6px; }
.workflow-step p { color: color-mix(in srgb, var(--on-dark) 66%, transparent); margin: 0; }

/* Pricing */
/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 32px; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px !important; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 20px color-mix(in srgb, var(--shadow-ink) 4%, transparent); min-width: 0; margin: 0 !important; height: 100%; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px color-mix(in srgb, var(--shadow-ink) 9%, transparent); border-color: var(--border-strong); }
.price-card.highlight { background: var(--surface); color: var(--ink); border: 2px solid var(--primary, var(--primary)) !important; box-shadow: 0 20px 45px -10px color-mix(in srgb, var(--primary, var(--primary)) 22%, transparent), 0 0 0 1px var(--primary, var(--primary)) !important; z-index: 2; }
.price-card.highlight:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -10px color-mix(in srgb, var(--primary, var(--primary)) 30%, transparent), 0 0 0 1px var(--primary, var(--primary)) !important; }
.price-card.highlight h3, .price-card h3 { color: var(--ink) !important; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.price-card-head { min-height: 56px; }
.price-card-head p, .price-card > p.muted, .price-card.highlight .muted { margin: 0; font-size: 14px; color: var(--muted) !important; line-height: 1.45; }
.price-badge { position: absolute; top: 18px; right: 20px; background: var(--primary, var(--primary)); color: var(--on-dark) !important; padding: 5px 13px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 10px color-mix(in srgb, var(--primary, var(--primary)) 30%, transparent); }
.price-card .price { display: flex; align-items: baseline; gap: 2px; font: 800 48px/1 var(--font-heading, system-ui, sans-serif); color: var(--ink) !important; letter-spacing: -.04em; margin: 22px 0 20px; }
.price-card .price .price-currency { font-size: 26px; font-weight: 700; color: var(--ink) !important; letter-spacing: 0; align-self: flex-start; margin-top: 4px; }
.price-card .price span, .price-card .price .price-period, .price-card.highlight .price span { font: 600 14.5px var(--font-body, system-ui, sans-serif); letter-spacing: 0; color: var(--muted) !important; margin-left: 5px; }
.price-card ul, .pricing-features-list { list-style: none; padding: 20px 0 0; margin: 0 0 28px; border-top: 1px solid var(--surface-2); flex: 1; display: grid; gap: 11px; align-content: start; }
.price-card.highlight ul { border-top-color: color-mix(in srgb, var(--primary, var(--primary)) 14%, var(--surface-2)); }
.price-card li, .pricing-features-list li, .price-card.highlight li { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; font-size: 14px; line-height: 1.5; color: var(--fg) !important; }
.price-card li svg, .pricing-features-list li svg, .price-card.highlight li svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; color: var(--success) !important; stroke-width: 2.6; }
.price-card .pro-feature-item, .price-card.highlight .pro-feature-item { color: var(--ink) !important; font-weight: 500; }
.price-card .pro-feature-item strong, .price-card.highlight .pro-feature-item strong { color: var(--ink) !important; font-weight: 700; }
.pro-tag, .feature-pro-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--primary, var(--primary)) 12%, var(--surface)); color: var(--primary, var(--primary)); margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.price-card .ai-feature-item, .price-card.highlight .ai-feature-item { color: var(--ink) !important; }
.price-card .ai-feature-item svg, .price-card.highlight .ai-feature-item svg { color: var(--primary, var(--primary)) !important; }
.price-card .ai-feature-item strong, .price-card.highlight .ai-feature-item strong { color: var(--ink) !important; }
.price-card > .btn, .price-card > form, .price-card .price-cta { margin-top: auto; }
.price-card > form .btn { width: 100%; }
.price-card .price-cta { height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; font-size: 14.5px; transition: all .18s ease; }
.price-card .btn-primary, .price-card.highlight .btn-primary, .price-card.highlight .btn { background: var(--primary, var(--primary)) !important; color: var(--on-dark) !important; border: 1px solid var(--primary, var(--primary)) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, var(--primary)) 28%, transparent) !important; }
.price-card .btn-primary:hover, .price-card.highlight .btn-primary:hover, .price-card.highlight .btn:hover { background: color-mix(in srgb, var(--primary, var(--primary)) 85%, var(--shadow-ink)) !important; border-color: color-mix(in srgb, var(--primary, var(--primary)) 85%, var(--shadow-ink)) !important; transform: translateY(-1px); box-shadow: 0 7px 20px color-mix(in srgb, var(--primary, var(--primary)) 36%, transparent) !important; }
.price-card .btn-secondary { background: var(--surface-2) !important; border: 1px solid var(--border) !important; color: var(--fg) !important; }
.price-card .btn-secondary:hover { background: var(--surface-2) !important; border-color: var(--border-strong) !important; color: var(--ink) !important; transform: translateY(-1px); }

/* FAQ — golden split */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s6); align-items: start; }
.faq-list { display: grid; gap: var(--s3); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color: var(--border-strong); }
.faq-item h3 { margin: 0; }
.faq-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4); background: transparent; border: 0; color: var(--ink); font: 700 16px/1.4 var(--font-body); text-align: left; cursor: pointer; }
.faq-symbol { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 20px; font-weight: 500; line-height: 1; transition: transform .2s, background .2s, color .2s; }
.faq-toggle[aria-expanded=true] .faq-symbol { background: var(--night); color: var(--on-dark); }
.faq-answer { padding: 0 var(--s4) var(--s4); color: var(--muted); line-height: 1.7; }
.faq-answer p { margin: 0; }

/* Contact */
.contact-section { background: var(--surface); border-block: 1px solid var(--border); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s6); align-items: start; }
.contact-copy h2 { font-size: clamp(30px, 4vw, var(--t-3xl)); letter-spacing: -.04em; }
.contact-copy > p { font-size: 17px; }
.contact-promise { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-md); background: var(--surface-2); color: var(--muted); font-size: 14px; }
.contact-promise svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--primary); }
.contact-card { padding: var(--s5) !important; background: var(--bg); box-shadow: none; }
.contact-form textarea { min-height: 144px; }
.contact-form .btn { margin-top: var(--s4); }

/* Final CTA */
.final-cta { padding: var(--s7) 0; }
.final-cta .cta-band { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s6); border-radius: var(--r-xl); background: var(--primary); color: var(--on-dark); position: relative; overflow: hidden; }
.final-cta .cta-band::after { content: ""; position: absolute; right: -89px; bottom: -144px; width: 377px; height: 377px; border-radius: 50%; border: 55px solid color-mix(in srgb, var(--on-dark) 8%, transparent); pointer-events: none; }
.final-cta h2 { color: var(--on-dark); font-size: clamp(30px, 4vw, var(--t-3xl)); margin: 0 0 var(--s3); }
.final-cta p { color: color-mix(in srgb, var(--on-dark) 80%, transparent); margin: 0; font-size: 17px; }
.final-cta .eyebrow { color: color-mix(in srgb, var(--on-dark) 80%, transparent); }
.final-cta .cta-actions { display: flex; gap: var(--s3); justify-content: flex-end; flex-wrap: wrap; position: relative; z-index: 1; }
.final-cta .btn-primary { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.final-cta .btn-primary:hover { background: var(--night); color: var(--on-dark); border-color: var(--night); }
.final-cta .btn-ghost { color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 40%, transparent); }
.final-cta .btn-ghost:hover { background: color-mix(in srgb, var(--on-dark) 10%, transparent); }

/* Footer */
.site-footer { background: var(--night); color: color-mix(in srgb, var(--on-dark) 70%, transparent); padding: var(--s6) 0 var(--s4); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.footer-grid h4 { color: var(--on-dark); font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--s3); }
.footer-grid a { display: block; color: color-mix(in srgb, var(--on-dark) 70%, transparent); padding: 4px 0; font-size: 14px; }
.footer-grid a:hover { color: var(--on-dark); }
.footer-grid .muted { color: color-mix(in srgb, var(--on-dark) 60%, transparent); max-width: 320px; margin-top: var(--s3); }
.site-footer .brand-wordmark-fallback, .site-footer .brand { color: var(--on-dark); }
.site-footer .brand { background: var(--surface); border-radius: var(--r-sm); padding: 8px 13px; }
.site-footer .brand .brand-wordmark-fallback { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--on-dark) 7%, transparent); font-size: var(--t-sm); color: color-mix(in srgb, var(--on-dark) 50%, transparent); }
.footer-bottom.muted { color: color-mix(in srgb, var(--on-dark) 50%, transparent); }
@media (max-width: 768px) {
  .footer-bottom { justify-content: center !important; text-align: center !important; }
  .footer-bottom span { text-align: center !important; width: 100% !important; display: block !important; }
}

/* Popup + cookie */
.popup-overlay { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--shadow-ink) 55%, transparent); display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.popup-overlay[hidden] { display: none; }
.popup-card { max-width: 460px; width: 100%; border-radius: var(--r-xl); padding: var(--s5); position: relative; background: var(--surface); overflow: hidden; }
.popup-card img { border-radius: var(--r-md); }
.popup-close { position: absolute; top: var(--s3); right: var(--s3); width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 0; font-size: 20px; cursor: pointer; color: var(--ink); }
.cookie-consent {
  position: fixed;
  z-index: 1000;
  right: 24px;
  bottom: 24px;
  left: auto;
  max-width: 440px;
  width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  pointer-events: none;
}
.cookie-consent.is-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-consent[hidden] {
  display: none !important;
}
.cookie-head { display: flex; flex-direction: column; gap: 6px; }
.cookie-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-icon { color: #6366f1; display: grid; place-items: center; }
.cookie-title-row strong { font-size: 14.5px; font-weight: 800; color: #0f172a; flex: 1; }
.cookie-close-btn { background: none; border: none; font-size: 20px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; }
.cookie-close-btn:hover { color: #0f172a; }
.cookie-desc { font-size: 12.5px; line-height: 1.5; color: #475569; margin: 0; }
.cookie-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 6px;
  border-block: 1px solid rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
}
.cookie-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.cookie-cat-info { flex: 1; }
.cookie-cat-info strong { display: block; font-size: 12px; color: #0f172a; font-weight: 700; }
.cookie-cat-info p { font-size: 11px; color: #64748b; margin: 2px 0 0; line-height: 1.35; }
.cookie-badge-locked { font-size: 9.5px; font-weight: 800; color: #10b981; background: rgba(16, 185, 129, 0.12); padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.cookie-toggle { width: 17px; height: 17px; accent-color: #0f1016; cursor: pointer; }
.cookie-footer { display: flex; flex-direction: column; gap: 12px; }
.cookie-links { font-size: 11px; color: #94a3b8; }
.cookie-links a { color: #64748b; text-decoration: underline; }
.cookie-toggle-details-btn { background: none; border: none; padding: 0; font-size: 11px; font-weight: 700; color: #6366f1; cursor: pointer; text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1; min-width: 90px; }
@media (max-width: 640px) {
  .cookie-consent { right: 14px; left: 14px; bottom: 14px; width: calc(100vw - 28px); max-width: none; padding: 16px 18px; }
}

/* Legal / content pages */
.legal-document, .policy-custom-content { max-width: 754px; margin: var(--s6) auto var(--s7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--shadow-sm); }
.legal-document h1 { font-size: clamp(32px, 4vw, var(--t-3xl)); letter-spacing: -.04em; }
.legal-document h2 { font-size: var(--t-lg); margin-top: var(--s5); }
.legal-document p, .legal-document li { color: var(--muted); line-height: 1.75; }

/* ==========================================================================
   AUTH (login / signup / reset) — golden split
   ========================================================================== */
.auth-page { background: var(--surface-2); }
.auth-page .site-header, .auth-page .site-footer, .auth-page .cookie-consent, .auth-page .announcement-bar { display: none !important; }
.auth-page > main { display: block; }
.auth-screen { min-height: 100vh; min-height: 100svh; display: flex; }
.auth-layout { width: 100%; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); background: var(--surface-2); }
.auth-showcase { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); padding: var(--s4) clamp(var(--s4), 3.5vw, var(--s5)); background: var(--night); color: var(--on-dark); margin: var(--s3); border-radius: var(--r-xl); box-shadow: 0 20px 50px -10px color-mix(in srgb, var(--shadow-ink) 35%, transparent); }
.auth-showcase::after { content: ""; position: absolute; right: -144px; bottom: -144px; width: 377px; height: 377px; border-radius: 50%; border: 55px solid color-mix(in srgb, var(--primary) 45%, transparent); pointer-events: none; }
.auth-brand, .auth-mobile-brand { display: inline-flex; align-items: center; gap: var(--s2); color: inherit; font: 800 21px var(--font-heading); letter-spacing: -.04em; position: relative; z-index: 1; text-decoration: none !important; }
.auth-showcase .auth-brand { background: var(--surface); border-radius: var(--r-sm); padding: 8px 13px; align-self: flex-start; color: var(--ink); }
.auth-logo-img { display: block; width: 160px; max-width: 100%; height: auto; object-fit: contain; }
.auth-showcase-copy { position: relative; z-index: 1; max-width: 440px; margin-top: auto !important; margin-bottom: auto !important; }
.auth-eyebrow, .auth-step-label { display: inline-flex; align-items: center; gap: var(--s2); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.auth-eyebrow { color: color-mix(in srgb, var(--on-dark) 70%, transparent); }
.auth-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.auth-showcase h1 { color: var(--on-dark); font-size: clamp(30px, 3.2vw, var(--t-3xl)); line-height: 1.08; letter-spacing: -.045em; margin: 12px 0 8px; }
.auth-showcase h1 span { color: var(--primary-300); }
.auth-showcase-copy > p { color: color-mix(in srgb, var(--on-dark) 70%, transparent); font-size: 14.5px; line-height: 1.55; margin: 0; }
.auth-benefits { display: grid; gap: 12px; margin-top: 16px; }
.auth-benefits > div { display: flex; gap: var(--s3); align-items: flex-start; }
.auth-benefit-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; color: var(--on-dark); background: color-mix(in srgb, var(--on-dark) 10%, transparent); font-weight: 800; font-size: 13px; }
.auth-benefits strong { display: block; color: var(--on-dark); font-size: 13.5px; margin-bottom: 2px; }
.auth-showcase-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); color: color-mix(in srgb, var(--on-dark) 50%, transparent); font-size: var(--t-xs); position: relative; z-index: 1; margin-top: auto !important; }
.auth-foot-dots { display: flex; gap: 5px; } .auth-foot-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--on-dark) 30%, transparent); } .auth-foot-dots i:first-child { width: 21px; border-radius: 6px; background: var(--surface); }
.auth-orb { position: absolute !important; pointer-events: none; }

/* Auth right side (Structured canvas with elevated white card & airy typography) */
.auth-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vh, 64px) clamp(20px, 4vw, 44px);
  min-width: 0;
  box-sizing: border-box;
  background: 
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--primary) 5%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.035) 0%, transparent 55%),
    var(--surface-2);
  position: relative;
}
@media (min-width: 901px) {
  .auth-screen { height: 100vh; height: 100dvh; max-height: 100vh; overflow: hidden; }
  .auth-layout { height: 100vh; height: 100dvh; max-height: 100vh; overflow: hidden; }
  .auth-showcase { height: calc(100vh - 2 * var(--s3)); max-height: calc(100vh - 2 * var(--s3)); overflow: hidden; }
  .auth-content { height: 100vh; height: 100dvh; max-height: 100vh; overflow-y: auto; scrollbar-width: thin; }
}
.auth-mobile-brand { display: none; color: var(--ink); margin-bottom: 24px; }
.auth-form-card {
  width: min(100%, 440px);
  margin: auto 0;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 95%, transparent);
  border-radius: 20px;
  box-shadow: 
    0 1px 3px color-mix(in srgb, var(--shadow-ink) 3%, transparent),
    0 10px 25px -4px color-mix(in srgb, var(--shadow-ink) 5%, transparent),
    0 20px 48px -12px color-mix(in srgb, var(--primary) 7%, transparent);
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 36px);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.auth-heading { margin-bottom: 24px; }
.auth-step-label { color: var(--primary, var(--primary)); margin-bottom: 8px; }
.auth-heading h2 { font-size: clamp(22px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; margin: 0 0 8px; color: var(--ink, var(--ink)); }
.auth-heading p { color: var(--muted, var(--muted)); margin: 0; font-size: 13.5px; line-height: 1.5; }
.auth-form-card .toast { margin-bottom: 20px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.auth-native-form label, .sb-auth-box label, .auth-field-label { font-size: 13px; font-weight: 600; margin: 16px 0 6px; display: block; line-height: 1.3; color: var(--ink, var(--fg)); }
.auth-native-form label:first-of-type, .sb-auth-box form > label:first-of-type { margin-top: 0; }
.auth-native-form input, .sb-auth-box input { height: 44px; min-height: 44px; border-radius: 10px; font-size: 14px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--border-strong, var(--border-strong)); background: var(--surface); width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
.auth-native-form input:focus, .sb-auth-box input:focus { border-color: var(--primary, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); outline: none; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 16px 0 6px; }
.auth-label-row label { margin: 0; }
.auth-label-row a, .auth-inline-link a { font-size: 12.5px; font-weight: 600; color: var(--primary, var(--primary)); text-decoration: none; transition: color .15s ease; }
.auth-label-row a:hover, .auth-inline-link a:hover { color: var(--primary-hover, var(--primary)); text-decoration: underline; }
.auth-inline-link { display: flex; justify-content: flex-end; margin: 10px 0 20px; }
.auth-label-note { color: var(--subtle, var(--subtle)); font-weight: 400; font-size: 11.5px; margin-left: 4px; }
input.has-error, select.has-error, textarea.has-error {
  border-color: var(--red, var(--danger)) !important;
  box-shadow: 0 0 0 3px rgba(209, 61, 61, 0.15) !important;
}
.auth-field-error {
  color: var(--red, var(--danger));
  font-size: 12px;
  font-weight: 600;
  margin: 6px 0 2px;
  line-height: 1.3;
}

/* Perfectly aligned phone & country code row */
.profile-phone-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: end; margin: 16px 0 0; }
.profile-phone-row > div { min-width: 0; display: flex; flex-direction: column; }
.profile-phone-row label { margin: 0 0 6px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--ink, var(--fg)) !important; white-space: nowrap; }
.country-code-trigger {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 10px 0 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border-strong));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink, var(--ink));
  transition: border-color .15s ease, box-shadow .15s ease;
  user-select: none;
}
.country-code-trigger:hover { border-color: var(--ink, var(--ink)); }
.country-code-trigger:focus-visible, .country-code-trigger.is-active {
  outline: none;
  border-color: var(--primary, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.cc-trigger-flag { font-size: 17px; line-height: 1; flex-shrink: 0; }
.cc-trigger-dial { font-weight: 600; font-size: 13px; color: var(--ink, var(--ink)); flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-trigger-chevron { flex-shrink: 0; color: var(--muted, var(--muted)); transition: transform .2s ease; }
.country-code-trigger.is-active .cc-trigger-chevron { transform: rotate(180deg); }

.phone-number-input {
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong, var(--border-strong)) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  line-height: 42px !important;
  margin: 0 !important;
  color: var(--ink, var(--ink)) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.phone-number-input:focus {
  border-color: var(--primary, var(--primary)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  outline: none !important;
}

/* Searchable country code dropdown popover */
.cc-dropdown-wrap { position: relative; width: 100%; }
.cc-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border-strong));
  border-radius: 12px;
  box-shadow: 0 14px 32px -4px color-mix(in srgb, var(--shadow-ink) 16%, transparent), 0 4px 10px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: ccDropdownIn .15s ease-out;
}
.cc-dropdown[hidden],
.cc-dropdown.is-hidden,
.cc-dropdown[style*="display: none"],
.cc-dropdown[style*="display:none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@keyframes ccDropdownIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cc-search-box {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border, var(--border));
}
.cc-search-icon { color: var(--muted, var(--muted)); flex-shrink: 0; }
.cc-search-input {
  flex: 1 1 auto;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--ink, var(--ink)) !important;
  outline: none !important;
  box-shadow: none !important;
}
.cc-search-input:focus { border-color: transparent !important; box-shadow: none !important; }
.cc-search-clear { border: 0; background: transparent; color: var(--muted, var(--muted)); font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }
.cc-search-clear:hover { color: var(--ink, var(--ink)); }
.cc-custom-option { padding: 4px 6px; border-bottom: 1px dashed var(--border, var(--border)); background: var(--surface-2); }
.cc-list { max-height: 200px; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
.cc-list::-webkit-scrollbar { width: 5px; }
.cc-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.cc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink, var(--ink));
  transition: background .12s ease;
}
.cc-item:hover, .cc-item.is-highlighted { background: var(--surface-2); }
.cc-item.is-selected { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary, var(--primary)); font-weight: 600; }
.cc-item-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.cc-item-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-item-code {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, var(--muted));
  flex-shrink: 0;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--shadow-ink) 4%, transparent);
  border-radius: 5px;
}
.cc-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--muted, var(--muted)); }

/* Buttons, divider, switch & legal */
.auth-primary-btn {
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin-top: 6px;
  border-radius: 10px;
  background: var(--ink, var(--ink));
  border-color: var(--ink, var(--ink));
  color: var(--on-dark);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  transition: all .18s ease;
}
.auth-primary-btn:hover {
  background: var(--primary, var(--primary));
  border-color: var(--primary, var(--primary));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 28%, transparent);
  transform: translateY(-1px);
}
.auth-primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}
.auth-primary-btn span {
  display: inline-block;
  transition: transform .18s ease;
  margin-left: 3px;
}
.auth-primary-btn:hover span {
  transform: translateX(3px);
}
.auth-divider, .auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--subtle, var(--subtle));
  font-size: 11.5px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .02em;
}
.auth-divider::before, .auth-divider::after,
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sb-auth-box { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.sb-auth-box h3, .sb-auth-box > p { display: none !important; }
.sb-google-btn, .google-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-strong, var(--border-strong)) !important;
  background: var(--surface) !important;
  color: var(--ink, var(--ink)) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 3%, transparent);
  text-decoration: none !important;
}
.sb-google-btn:hover, .google-btn:hover {
  border-color: var(--subtle) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
}
.sb-google-mark { width: 18px !important; height: 18px !important; }
.auth-spinner { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Forgot password form & reset link button spacing */
.auth-forgot-form {
  display: flex;
  flex-direction: column;
}
.auth-forgot-intro {
  color: var(--muted, var(--muted));
  font-size: 13.5px;
  line-height: 1.5;
  margin: 4px 0 18px;
}
.auth-forgot-form label {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
  display: block;
  color: var(--ink, var(--fg));
}
.auth-forgot-form input,
#sb-reset-email {
  width: 100%;
  margin-bottom: 0 !important;
}
.auth-reset-btn,
.auth-forgot-form .auth-primary-btn,
.auth-forgot-form button[type="submit"] {
  margin-top: 18px !important;
  width: 100%;
  height: 46px;
  min-height: 46px;
  border-radius: 10px;
  background: var(--ink, var(--ink));
  border-color: var(--ink, var(--ink));
  color: var(--on-dark);
  font-size: 14.5px;
  font-weight: 700;
}
.auth-reset-btn:hover,
.auth-forgot-form button[type="submit"]:hover {
  background: var(--primary, var(--primary));
  border-color: var(--primary, var(--primary));
}
.auth-cancel-reset {
  display: inline-block;
  margin: 18px auto 0;
  border: 0;
  background: transparent;
  color: var(--primary, var(--primary));
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.auth-cancel-reset:hover {
  text-decoration: underline;
  color: var(--primary-hover, var(--primary));
}
.auth-forgot-active #sb-login-form,
.auth-forgot-active #sb-google,
.auth-forgot-active .sb-google-btn,
.auth-forgot-active .auth-divider {
  display: none !important;
}
.auth-switch {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 24px;
  color: var(--muted, var(--muted));
  font-size: 13.5px;
  line-height: 1.4;
}
.auth-switch a {
  font-weight: 700;
  color: var(--primary, var(--primary));
  text-decoration: none;
}
.auth-switch a:hover {
  text-decoration: underline;
  color: var(--primary-hover, var(--primary));
}
.auth-demo-link {
  text-align: center;
  margin-top: 10px;
  font-size: 12.5px;
}
.auth-demo-link a {
  color: var(--muted, var(--muted));
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.auth-demo-link a:hover {
  color: var(--ink, var(--ink));
}
.auth-legal {
  max-width: 440px;
  text-align: center;
  margin-top: 20px;
  color: var(--subtle);
  font-size: 11.5px;
  line-height: 1.5;
}
.auth-legal a {
  color: var(--muted);
  text-decoration: underline;
}
.auth-legal a:hover {
  color: var(--ink, var(--ink));
}
.auth-wrap { max-width: 440px; margin: var(--s6) auto; padding: 0 var(--s4); }
.auth-wrap .card { padding: 36px 32px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--border) 95%, transparent); box-shadow: 0 10px 25px -4px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 20px 48px -12px color-mix(in srgb, var(--primary) 7%, transparent); }

/* ==========================================================================
   APP SHELL (workspace + admin)
   ========================================================================== */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; background: var(--bg); }
.sidebar {
  position: sticky; top: 0; flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s3) var(--s3);
  background: var(--surface); border-right: 1px solid var(--border); border-radius: 0 !important; box-shadow: none !important; z-index: 70;
}
.sidebar > .brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) var(--s2); min-height: 42px; }
.sidebar .brand-logo-wordmark { height: 32px; max-width: 140px; }
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.side-nav::-webkit-scrollbar { width: 6px; } .side-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
.nav-label { display: block; padding: var(--s3) var(--s3) var(--s1); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.nav-label:first-child { padding-top: 0; }
.side-nav a { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s3); border-radius: 11px; color: var(--fg); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a.active { background: var(--night); color: var(--on-dark); }
.side-nav a.active .nav-icon { opacity: 1; }
.side-nav a .nav-badge { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--primary-100); color: var(--primary-700); }
.side-nav a.active .nav-badge { background: color-mix(in srgb, var(--on-dark) 18%, transparent); color: var(--on-dark); }
.side-nav a .nav-lock { margin-left: auto; opacity: .55; display: inline-flex; }
.side-nav a .nav-lock svg { width: 14px; height: 14px; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex: 0 0 20px; opacity: .78; }
.nav-icon svg { display: block; width: 18px; height: 18px; }
.side-admin { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--muted); }
.side-admin:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }

/* Sidebar plan widget & announcements */
.side-plan { position: relative; padding: 13px 13px 12px; border-radius: 14px; background: var(--night); border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent); border-top: 3px solid var(--workspace-plan-color, var(--border)); color: var(--on-dark); margin-top: auto; overflow: hidden; box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink) 45%, transparent); transition: border-color .2s ease, box-shadow .2s ease; }
.side-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-bottom: 6px; }
.side-plan strong, .side-plan-title { font: 800 13px var(--font-heading); color: var(--on-dark); line-height: 1.25; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
/* High-contrast, crystal-clear plan badges for tables and user cards */
.plan-color-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan-color, var(--primary)) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--plan-color, var(--primary)) 32%, transparent);
  color: color-mix(in srgb, var(--plan-color, var(--primary)) 88%, var(--shadow-ink));
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .02em;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.plan-color-pill.plan-free {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--fg);
}
.plan-color-pill.plan-pro {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary);
}
.plan-color-pill.plan-team {
  background: var(--success-bg);
  border-color: var(--success-line);
  color: var(--success);
}

/* Sidebar card badges (Universal high-contrast with dark container context) */
.side-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .015em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  color: var(--primary);
}
.side-card-badge svg { flex-shrink: 0; }

/* Light surface defaults (tables, settings, website, cards) */
.side-card-badge.badge-violet { background: var(--primary-50) !important; color: var(--primary) !important; border-color: var(--primary-200) !important; }
.side-card-badge.badge-primary { background: var(--primary-100) !important; color: var(--primary) !important; border-color: var(--primary-200) !important; }
.side-card-badge.badge-success { background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-line) !important; }
.side-card-badge.badge-warning { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; }
.side-card-badge.badge-amber { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; }
.side-card-badge.badge-cyan { background: var(--info-bg) !important; color: var(--info) !important; border-color: var(--info-line) !important; }
.side-card-badge.badge-rose { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger-line) !important; }
.side-card-badge.badge-neutral { background: var(--surface-2) !important; color: var(--fg) !important; border-color: var(--border-strong) !important; }

/* Dark container contextual styling (sidebar dark card, preview box) */
.side-plan .side-card-badge,
.side-plan-card .side-card-badge,
#sidebar-card-preview .side-card-badge,
.sidebar .side-card-badge {
  background: color-mix(in srgb, var(--primary) 28%, transparent) !important;
  color: var(--primary-100) !important;
  border-color: rgba(165, 180, 252, 0.5) !important;
}
.side-plan .side-card-badge.badge-violet,
#sidebar-card-preview .side-card-badge.badge-violet {
  background: color-mix(in srgb, var(--primary) 28%, transparent) !important;
  color: var(--primary-100) !important;
  border-color: rgba(165, 180, 252, 0.5) !important;
}
.side-plan .side-card-badge.badge-primary,
#sidebar-card-preview .side-card-badge.badge-primary {
  background: rgba(124, 58, 237, 0.28) !important;
  color: var(--primary-100) !important;
  border-color: rgba(196, 181, 253, 0.5) !important;
}
.side-plan .side-card-badge.badge-success,
#sidebar-card-preview .side-card-badge.badge-success {
  background: rgba(16, 185, 129, 0.28) !important;
  color: var(--success-line) !important;
  border-color: rgba(110, 231, 183, 0.5) !important;
}
.side-plan .side-card-badge.badge-warning,
#sidebar-card-preview .side-card-badge.badge-warning {
  background: rgba(245, 158, 11, 0.28) !important;
  color: var(--warning-line) !important;
  border-color: rgba(253, 230, 138, 0.5) !important;
}
.side-plan .side-card-badge.badge-amber,
#sidebar-card-preview .side-card-badge.badge-amber {
  background: rgba(234, 88, 12, 0.28) !important;
  color: var(--warning-line) !important;
  border-color: rgba(254, 215, 170, 0.5) !important;
}
.side-plan .side-card-badge.badge-cyan,
#sidebar-card-preview .side-card-badge.badge-cyan {
  background: rgba(6, 182, 212, 0.28) !important;
  color: var(--info-line) !important;
  border-color: rgba(165, 243, 252, 0.5) !important;
}
.side-plan .side-card-badge.badge-rose,
#sidebar-card-preview .side-card-badge.badge-rose {
  background: rgba(244, 63, 94, 0.28) !important;
  color: var(--danger-line) !important;
  border-color: rgba(254, 205, 211, 0.5) !important;
}

/* Clean, uncluttered action dropdown menus in admin tables */
.table-actions-cell {
  position: relative;
  text-align: right;
  white-space: nowrap;
}
.sb-actions-menu {
  position: relative;
  display: inline-block;
}
.sb-actions-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.sb-actions-menu summary::-webkit-details-marker {
  display: none;
}
.sb-actions-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--border-strong, var(--border-strong));
  background: var(--surface);
  color: var(--ink, var(--ink));
  transition: all .15s ease;
}
.sb-actions-trigger:hover,
.sb-actions-menu[open] .sb-actions-trigger {
  background: var(--surface-2);
  border-color: var(--ink, var(--ink));
}
.sb-actions-trigger svg {
  transition: transform .15s ease;
}
.sb-actions-menu[open] .sb-actions-trigger svg {
  transform: rotate(180deg);
}
.sb-actions-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 120;
  min-width: 175px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border-strong));
  border-radius: 11px;
  box-shadow: 0 12px 30px -4px color-mix(in srgb, var(--shadow-ink) 16%, transparent), 0 4px 10px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
  animation: sbDropdownIn .14s ease-out;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@keyframes sbDropdownIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sb-action-item-form {
  margin: 0 !important;
  width: 100%;
}
.sb-action-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg, var(--fg));
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  white-space: nowrap;
}
.sb-action-item:hover {
  background: var(--surface-2);
  color: var(--ink, var(--ink));
}
.sb-action-divider {
  height: 1px;
  background: var(--border, var(--border));
  margin: 4px 0;
}
.sb-action-item.is-ban {
  color: var(--red, var(--danger));
}
.sb-action-item.is-ban:hover {
  background: var(--danger-bg);
  color: var(--danger);
}
.sb-action-item.is-unban {
  color: var(--teal, var(--success));
}
.sb-action-item.is-unban:hover {
  background: var(--success-bg);
  color: var(--success);
}
.sb-actions-menu[data-dropup="true"] .sb-actions-dropdown {
  top: auto;
  bottom: calc(100% + 5px);
  animation: sbDropupIn .14s ease-out;
}
@keyframes sbDropupIn {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 700px) {
  .table-actions-cell {
    text-align: left;
  }
  .sb-actions-menu {
    width: 100%;
  }
  .sb-actions-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .sb-actions-dropdown {
    right: auto;
    left: 0;
    min-width: 220px;
    max-width: 100%;
  }
}

/* Geolocation & Country-Wise Pricing Switcher (Hidden per user requirement) */
.retraak-geo-pricing-bar {
  display: none !important;
}
.geo-currency-menu {
  position: relative;
  display: inline-block;
}
.geo-currency-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.geo-currency-menu summary::-webkit-details-marker {
  display: none;
}
.geo-currency-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border-strong, var(--border-strong));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink) 5%, transparent);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, var(--ink));
  transition: all .15s ease;
}
.geo-currency-trigger:hover,
.geo-currency-menu[open] .geo-currency-trigger {
  background: var(--surface-2);
  border-color: var(--primary, var(--primary));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 12%, transparent);
}
.geo-pin-icon {
  font-size: 14px;
}
.geo-flag {
  font-size: 16px;
  line-height: 1;
}
.geo-text {
  line-height: 1.25;
}
.geo-text strong {
  color: var(--primary, var(--primary));
}
.geo-chevron {
  transition: transform .15s ease;
  color: var(--muted, var(--muted));
  margin-left: 2px;
}
.geo-currency-menu[open] .geo-chevron {
  transform: rotate(180deg);
}
.geo-currency-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  width: min(340px, calc(100vw - 32px));
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border-strong));
  border-radius: 14px;
  box-shadow: 0 16px 36px -4px color-mix(in srgb, var(--shadow-ink) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  animation: sbDropdownIn .14s ease-out;
}
.geo-dropdown-header {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, var(--muted));
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border, var(--border));
  margin-bottom: 4px;
}
.geo-options-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}
.geo-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg, var(--fg));
  font-size: 13px;
  font-weight: 500;
  transition: background .12s ease;
}
.geo-option:hover {
  background: var(--surface-2);
  color: var(--ink, var(--ink));
}
.geo-option.is-selected {
  background: var(--primary-50);
  color: var(--primary, var(--primary));
  font-weight: 700;
}
.geo-opt-flag {
  font-size: 16px;
  flex-shrink: 0;
}
.geo-opt-name {
  flex: 1;
  text-align: left;
}
.geo-opt-curr {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, var(--muted));
}
.geo-option.is-selected .geo-opt-curr {
  color: var(--primary, var(--primary));
}

/* Dismiss action for announcements */
.side-card-dismiss { position: absolute; top: 7px; right: 8px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: color-mix(in srgb, var(--on-dark) 45%, transparent); border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; transition: color .15s, background .15s; z-index: 2; }
.side-card-dismiss:hover { color: var(--on-dark); background: color-mix(in srgb, var(--on-dark) 16%, transparent); }
.side-plan.has-dismiss .side-plan-top { padding-right: 18px; }

/* Visual themes for cards */
.side-plan-theme-default { background: var(--night); border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent); border-top: 3px solid var(--workspace-plan-color, var(--border)); box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink) 45%, transparent); }
.side-plan-theme-dark_glass { background: linear-gradient(145deg, color-mix(in srgb, var(--on-dark) 9%, transparent) 0%, color-mix(in srgb, var(--on-dark) 3%, transparent) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent); border-top: 3px solid var(--workspace-plan-color, var(--primary)); box-shadow: 0 4px 20px color-mix(in srgb, var(--shadow-ink) 25%, transparent); }
.side-plan-theme-indigo { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 26%, transparent) 0%, color-mix(in srgb, var(--shadow-ink) 85%, transparent) 100%); border: 1px solid rgba(92, 115, 242,.35); border-top: 3px solid var(--primary); box-shadow: 0 4px 18px color-mix(in srgb, var(--primary) 20%, transparent); }
.side-plan-theme-emerald { background: linear-gradient(145deg, rgba(16,185,129,.2) 0%, color-mix(in srgb, var(--shadow-ink) 90%, transparent) 100%); border: 1px solid rgba(16,185,129,.32); border-top: 3px solid var(--success); }
.side-plan-theme-amber { background: linear-gradient(145deg, rgba(217,119,6,.22) 0%, rgba(24,20,15,.9) 100%); border: 1px solid rgba(245,158,11,.34); border-top: 3px solid var(--warning); }
.side-plan-theme-slate { background: var(--night); border: 1px solid var(--night); border-top: 3px solid var(--workspace-plan-color, var(--border)); }

.side-plan p { margin: 5px 0 10px; font-size: 11.5px; color: color-mix(in srgb, var(--on-dark) 72%, transparent); line-height: 1.45; }
.side-plan .progress { height: 6px; margin: var(--s3) 0 var(--s1); background: var(--surface-3); }
.side-plan .btn { width: 100%; font-size: 12px; font-weight: 700; min-height: 34px; padding: 6px 12px; border-radius: 9px; }
.side-plan.is-top { background: var(--night); border-color: var(--night); }
.side-plan.is-top strong { color: var(--on-dark); } .side-plan.is-top p { color: color-mix(in srgb, var(--on-dark) 65%, transparent); }

.app-main { flex: 1 1 auto; min-width: 0; width: calc(100% - var(--sidebar-w)); display: flex; flex-direction: column; min-height: 100vh; }
.app-topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s4);
  padding: 0 clamp(var(--s4), 2.6vw, var(--s5)); margin: 0 !important; border-radius: 0 !important;
  background: color-mix(in srgb, var(--bg) 92%, var(--surface)); border: 0; border-bottom: 1px solid var(--border); box-shadow: none !important;
}
.topbar-title { font: 800 17px var(--font-heading); color: var(--ink); letter-spacing: -.02em; white-space: nowrap; flex: 0 0 auto; }
.topbar-crumb { display: block; font: 600 11px var(--font-body); color: var(--subtle); letter-spacing: .06em; text-transform: uppercase; }
.topbar-search { position: relative; flex: 1 1 320px; max-width: 440px; min-width: 120px; margin-left: auto; }
.topbar-search input[type=search] { height: 40px; min-height: 40px; border-radius: var(--r-pill); background-color: var(--surface); font-size: 13px; box-shadow: none; }
.global-search-results { position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; max-height: 360px; overflow: auto; }
.global-search-results[hidden] { display: none; }
.global-search-results a, .global-search-results .search-empty { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--fg); font-size: 13px; text-decoration: none; }
.global-search-results a:hover, .global-search-results a:focus { background: var(--surface-2); outline: 0; }
.global-search-results small { font-size: 11px; color: var(--muted); }
.global-search-results .search-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); font-weight: 800; }
.topbar-right { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.topbar-icon { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.topbar-icon:hover { border-color: var(--night); text-decoration: none; }
.topbar-icon svg { width: 18px; height: 18px; }
.topbar-icon .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.app-content { flex: 1; width: 100%; max-width: 100%; margin: 0; padding: var(--s5) clamp(var(--s4), 2.6vw, var(--s5)) var(--s6); min-width: 0; box-sizing: border-box; }
.app-content > .card { min-width: 0; }
.app-content > h1:first-child, .app-content > h2:first-child { margin-top: 0; }

/* Profile menu */
.profile-wrap { position: relative; }
.profile-btn { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer; padding: 4px 13px 4px 4px; font: 700 13px var(--font-body); color: var(--ink); max-width: 260px; transition: border-color .15s; }
.profile-btn:hover { border-color: var(--night); }
.profile-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); margin-left: 4px; flex: 0 0 auto; }
.profile-name { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-name small, .admin-role-label { display: block; font-size: 11px; font-weight: 600; color: var(--subtle); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; font: 800 14px var(--font-heading); flex: 0 0 auto; }
.avatar-img { object-fit: cover; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; max-width: calc(100vw - 24px); padding: var(--s2); border-radius: var(--r-md); z-index: 80; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.menu-panel[hidden] { display: none; }
.menu-panel a { display: flex; align-items: center; gap: var(--s2); padding: 9px var(--s3); border-radius: 10px; color: var(--fg); font-weight: 600; font-size: 14px; text-decoration: none; }
.menu-panel a:hover { background: var(--surface-2); }
.menu-panel a.menu-danger { color: var(--red); }
.menu-head { display: flex; flex-direction: column; padding: var(--s3); margin-bottom: var(--s1); border-bottom: 1px solid var(--border); }
.menu-head strong { color: var(--ink); }
.menu-head .muted { font-size: 12px; }
.menu-sep { height: 1px; background: var(--border); margin: var(--s1) 0; }

.demo-announcement { display: flex; align-items: center; justify-content: center; gap: var(--s3); flex-wrap: wrap; background: var(--night); color: var(--on-dark); padding: 9px var(--s4); font-size: var(--t-sm); font-weight: 700; }
.demo-announcement a { color: var(--on-dark); text-decoration: underline; }

/* Page headings inside the app */
.page-heading-row, .section-title-row, .project-heading-row, .admin-page-head, .inv-page-head, .ai-workspace-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.page-heading-row h1, .page-heading-row h2, .section-title-row h1, .section-title-row h2, .admin-page-head h1 { margin: 0 0 4px; }
.page-heading { margin-bottom: var(--s4); }
.dashboard-section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s4); }
.dashboard-section-title h2, .dashboard-section-title h3 { margin: 0; font-size: var(--t-lg); }
.dashboard-section-title a { font-size: var(--t-sm); font-weight: 700; }

.dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s4);
  transition: grid-template-columns 0.45s cubic-bezier(0.16, 1, 0.3, 1), all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-hero.is-full-width {
  grid-template-columns: minmax(0, 1fr) !important;
}
.dash-hero.is-full-width .dash-welcome {
  grid-column: 1 / -1;
  width: 100%;
}
.dash-welcome {
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: radial-gradient(130% 130% at 88% 12%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, rgba(18, 147, 110, 0.12) 42%, transparent 70%), linear-gradient(135deg, var(--night) 0%, var(--night) 50%, var(--night) 100%);
  color: var(--on-dark);
  min-height: 233px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--shadow-ink) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--on-dark) 10%, transparent);
}
.dash-welcome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 50%, transparent), rgba(18, 147, 110, 0.5), transparent);
  pointer-events: none;
}
.dash-welcome::after {
  content: "";
  position: absolute;
  right: -55px;
  top: -89px;
  width: 233px;
  height: 233px;
  border-radius: 50%;
  border: 32px solid color-mix(in srgb, var(--primary, var(--primary)) 35%, transparent);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.dash-welcome h1 {
  position: relative;
  z-index: 2;
  color: var(--on-dark);
  font-size: clamp(26px, 2.6vw, var(--t-2xl));
  margin: 0 0 var(--s2);
  letter-spacing: -.04em;
}
.dash-welcome p {
  position: relative;
  z-index: 2;
  color: color-mix(in srgb, var(--on-dark) 78%, transparent);
  margin: 0;
  max-width: 480px;
}
.dash-welcome .welcome-date {
  position: relative;
  z-index: 2;
  display: block;
  color: color-mix(in srgb, var(--on-dark) 55%, transparent);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 var(--s3);
}
.dash-welcome .welcome-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.dash-welcome .btn-primary { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.dash-welcome .btn-primary:hover { background: var(--primary); color: var(--on-dark); border-color: var(--primary); }
.dash-welcome .btn-ghost { color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 25%, transparent); }
.dash-welcome .btn-ghost:hover { background: color-mix(in srgb, var(--on-dark) 10%, transparent); }

.pill-pro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-dark) !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
  border-radius: 9999px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 40%, transparent);
  line-height: 1.2;
}

@media (max-width: 640px) {
  .dash-welcome {
    min-height: auto;
    padding: 20px 18px !important;
  }
  .dash-welcome::after {
    width: 110px;
    height: 110px;
    right: -25px;
    top: -25px;
    border-width: 16px;
    opacity: 0.15;
  }
}
.setup-card { display: flex; flex-direction: column; }
.dw-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); padding: var(--s3) 0; border-block: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent); }
.dw-stats strong { display: block; font: 800 var(--t-xl)/1.1 var(--font-heading); color: var(--on-dark); letter-spacing: -.03em; }
.dw-stats span { font-size: var(--t-xs); color: color-mix(in srgb, var(--on-dark) 55%, transparent); font-weight: 600; }
.setup-card h3 { margin: 0; font-size: 17px; }
.setup-meter { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s3) 0 var(--s2); }
.setup-meter strong { font: 800 var(--t-xl) var(--font-heading); color: var(--ink); letter-spacing: -.04em; }
.setup-list { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 2px; }
.setup-list li a, .setup-list li span { display: flex; align-items: center; gap: var(--s2); padding: 6px 0; font-size: 14px; color: var(--fg); font-weight: 600; text-decoration: none; }
.setup-list .tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex: 0 0 auto; }
.setup-list .done .tick { background: var(--teal); border-color: var(--teal); color: var(--on-dark); }
.setup-list .done .tick svg { width: 12px; height: 12px; }
.setup-list .done a, .setup-list .done span.lbl { color: var(--muted); text-decoration: line-through; }
.setup-list li a:hover { color: var(--primary); }

.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: 0 0 var(--s4); }
.dashboard-kpi { padding: var(--s4) !important; margin: 0 !important; min-height: 144px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.kpi-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); flex: 0 0 auto; }
.kpi-ico svg { width: 18px; height: 18px; }
.kpi-ico.violet { background: var(--primary-100); color: var(--primary-700); }
.kpi-ico.teal { background: var(--teal-50); color: var(--teal); }
.kpi-ico.amber { background: var(--amber-50); color: var(--amber); }
.kpi-ico.red { background: var(--red-50); color: var(--red); }
.dashboard-shell { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.dashboard-stack { display: grid; gap: var(--s4); min-width: 0; }
.dashboard-stack > .card { margin: 0 !important; }
.dashboard-alert-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--amber-50); border: 1px solid color-mix(in srgb, var(--amber) 25%, var(--surface)); }
.pipeline-grid { display: grid; grid-template-columns: repeat(5, minmax(128px, 1fr)); gap: var(--s2); overflow-x: auto; padding-bottom: 4px; }
.pipeline-column { background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s3); min-width: 128px; }
.pipeline-column h4 { display: flex; justify-content: space-between; gap: var(--s2); font-size: 12px; margin: 0 0 var(--s2); color: var(--muted); }
.pipeline-column h4 span:last-child { background: var(--surface); color: var(--ink); border-radius: 99px; padding: 0 8px; }
.pipeline-project { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: var(--s2) var(--s3); margin-top: var(--s2); color: var(--fg); text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.pipeline-project:hover { border-color: var(--night); box-shadow: var(--shadow-sm); }
.pipeline-project strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pipeline-project small { display: block; color: var(--muted); font-size: 11px; }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.quick-action {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quick-action:hover {
  border-color: var(--primary, var(--primary));
  background: var(--surface);
  color: var(--primary, var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 12%, transparent);
}
.quick-action:active {
  transform: translateY(0);
}
.quick-action > span:first-child {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
  flex: 0 0 auto;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.quick-action:hover > span:first-child {
  background: var(--primary-100, var(--primary-100));
  color: var(--primary, var(--primary));
  transform: scale(1.06);
}
.quick-action svg { width: 17px; height: 17px; }
.dashboard-client-list { display: grid; gap: 2px; }
.dashboard-client-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.dashboard-client-row:last-child { border-bottom: 0; }
.dashboard-client-avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-100); color: var(--primary-700); font-weight: 800; flex: 0 0 auto; }
.dashboard-client-name { flex: 1; min-width: 0; }
.dashboard-client-name strong { display: block; color: var(--ink); font-size: 14px; }
.dashboard-client-name small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-ai-panel { padding: var(--s4) var(--s5) !important; background: linear-gradient(0deg, var(--surface), var(--surface)) padding-box; border: 1px dashed var(--border-strong); }
.dashboard-ai-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.dashboard-ai-head h2 { margin: 0 0 4px; font-size: var(--t-lg); }
.dashboard-ai-result { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-sm); background: var(--primary-50); line-height: 1.7; }

/* Project / misc widgets used across pages */
.project-stat { display: flex; flex-direction: column; min-height: 144px; }
.project-stat strong { font: 800 var(--t-2xl)/1.1 var(--font-heading); color: var(--ink); margin: var(--s3) 0 var(--s1) !important; }
.project-stat-current { border-color: var(--night) !important; box-shadow: inset 0 0 0 1px var(--ink); }
.project-search-form { display: flex; gap: var(--s2); align-items: center; flex: 0 1 430px; max-width: 100%; }
.project-search-form input[type=search] { flex: 1 1 220px; }
.project-timeline-item { display: flex; gap: var(--s3); padding: var(--s2) 0; }
.project-timeline-dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; box-shadow: 0 0 0 4px var(--primary-100); }
.bank-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: var(--s2); background: var(--surface); }
.upgrade-card { text-align: center; padding: var(--s6) var(--s5) !important; }
.upgrade-card h2 { font-size: var(--t-xl); margin-top: var(--s3); }
.upgrade-card .hero-cta { justify-content: center; margin-top: var(--s4); }
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s4); align-items: start; }
.role-row { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.role-row:last-child { border-bottom: 0; }
.role-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex: 0 0 auto; }
.role-chip { display: inline-flex; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.plan-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--primary-100); color: var(--primary-700); }

/* Billing plan cards inside the app */
.app-content .pricing-grid .price-card .price { font-size: var(--t-3xl); }
.promo-code-entry { padding: var(--s4) !important; }
.billing-status { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s4); }
.billing-current { display: flex; align-items: center; gap: var(--s4); }
.billing-current .plan-ico { width: 55px; height: 55px; border-radius: var(--r-md); background: var(--night); color: var(--on-dark); display: grid; place-items: center; font: 800 var(--t-lg) var(--font-heading); flex: 0 0 auto; }
.billing-current h2 { margin: 0; }
.checkout-secure { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); font-weight: 600; }
.checkout-secure svg { width: 14px; height: 14px; color: var(--teal); }

/* Tracking portal */
.client-portal-shell{min-height:100vh;display:flex;flex-direction:column}.client-portal-shell>main{flex:1;width:100%}.client-portal-brandbar{width:100%;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border);box-sizing:border-box}.client-portal-brandbar>div{width:min(1480px,100%);margin:0 auto}.client-portal-brandbar img{display:block;width:auto;height:34px;max-width:190px;object-fit:contain;object-position:left center}.client-portal-footer{display:grid;justify-items:center;gap:10px;padding:22px 20px 18px;margin-top:24px;background:var(--night);color:var(--border);text-align:center}.client-portal-footer img{display:block;width:auto;max-width:160px;height:30px;object-fit:contain}.client-portal-footer p{max-width:520px;margin:0;color:var(--border);font-size:12px;line-height:1.6}.client-portal-footer small{color:var(--border-strong);font-size:11px;line-height:1.5}.client-portal-shell .track-wrap{flex:1;width:100%;box-sizing:border-box}
.track-wrap { max-width: 1480px; margin: var(--s5) auto; padding: 0 var(--s4) var(--s6); }
.track-wrap > .card { padding: var(--s5) !important; margin: 0 0 var(--s4) !important; overflow: visible; }
.client-portal-layout{display:block;width:100%}.client-portal-sidebar{position:sticky;top:18px;display:flex;flex-direction:column;gap:22px;padding:20px 16px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);min-width:0}.client-portal-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}.client-portal-brand img{width:34px;height:34px;object-fit:contain}.client-portal-welcome{display:grid;gap:5px;padding:14px 0;border-bottom:1px solid var(--border)}.client-portal-welcome span,.client-portal-order-shortcut span,.client-portal-eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}.client-portal-welcome small{color:var(--muted);overflow-wrap:anywhere}.client-portal-nav{display:grid;gap:5px}.client-portal-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:9px 11px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700}.client-portal-nav a:hover,.client-portal-nav a.is-active{background:var(--night);color:var(--on-dark)}.client-portal-nav b{font-size:11px}.client-portal-order-shortcut{display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--border)}.client-portal-main{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:18px}.client-portal-main>.card{margin:0!important;min-width:0;box-sizing:border-box}.client-portal-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:10px 2px 4px}.client-portal-hero h1{font-size:clamp(25px,3vw,38px);line-height:1.15;margin:8px 0}.client-portal-hero p{margin:0;color:var(--muted)}.client-hero-status{padding-top:10px}.client-portal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.client-portal-stats article{display:grid;gap:6px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow-xs);min-width:0}.client-portal-stats article span,.client-portal-stats article small{font-size:12px;color:var(--muted)}.client-portal-stats article strong{font-size:clamp(21px,2vw,30px);overflow-wrap:anywhere}.client-portal-main .client-orders-card{order:1}.client-portal-main .client-project-overview{order:0}.client-portal-main #project-plan{order:2}.client-portal-main #action-items{order:3}.client-portal-main #client-invoices{order:4}.client-portal-main #payment-instructions{order:4}.client-portal-main #payment-report{order:5}.client-portal-main #client-messages{order:6}
@media(max-width:850px){.client-portal-layout{grid-template-columns:minmax(0,1fr);gap:14px}.client-portal-sidebar{position:static;padding:14px;gap:12px}.client-portal-welcome{padding:6px 0 12px}.client-portal-nav{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 2px}.client-portal-nav a{flex:0 0 auto;white-space:nowrap}.client-portal-order-shortcut{display:none}}
@media(max-width:560px){.track-wrap{padding-left:12px;padding-right:12px}.client-portal-stats{grid-template-columns:1fr}.client-portal-stats article{grid-template-columns:1fr auto;align-items:center}.client-portal-stats article span,.client-portal-stats article small{grid-column:1}.client-portal-stats article strong{grid-column:2;grid-row:1/3}.client-portal-hero{display:block}.client-hero-status{padding-top:12px}.client-portal-main>.card{padding:16px!important}}
.track-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; gap: var(--s2); margin: var(--s5) 0 var(--s3); }
.track-stepper::before { content: ""; position: absolute; left: 12%; right: 12%; top: 16px; height: 2px; border-radius: 2px; background: var(--border); }
.track-step { position: relative; z-index: 1; text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; }
.track-step .track-dot { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s2); background: var(--surface); border: 2px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 12px; }
.track-step.is-done .track-dot, .track-step.is-current .track-dot { background: var(--night); border-color: var(--night); color: var(--on-dark); }
.track-step.is-current { color: var(--ink); }
.track-step small { display: block; font-size: 10px; font-weight: 500; margin-top: 2px; }
.track-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-top: var(--s4); }
.track-meta-grid > div { padding: var(--s3) var(--s4); border-right: 1px solid var(--border); }
.track-meta-grid > div:last-child { border-right: 0; }
.track-wrap .track-invoice { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s4); margin-top: var(--s3); }
.public-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Admin shell (dark sidebar) ---------- */
.admin-shell .sidebar { background: var(--night); border-right: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent); color: color-mix(in srgb, var(--on-dark) 75%, transparent); }
.admin-shell .sidebar > .brand, .admin-shell .admin-brand-box .brand { background: color-mix(in srgb, var(--on-dark) 4%, transparent); border: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent); border-radius: 12px; padding: 8px 12px; min-height: 48px; }
.admin-shell .sidebar .brand .pill, .admin-shell .admin-brand-pill { background: color-mix(in srgb, var(--primary) 22%, transparent) !important; color: var(--primary-300) !important; border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent) !important; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; padding: 3px 8px; border-radius: 6px; }
.admin-shell .sidebar .brand-wordmark-fallback { color: var(--on-dark); }
.admin-shell .side-nav { scrollbar-color: color-mix(in srgb, var(--on-dark) 18%, transparent) transparent; }
.admin-shell .side-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--on-dark) 18%, transparent); }
.admin-shell .nav-label { color: color-mix(in srgb, var(--on-dark) 45%, transparent); }
.admin-shell .side-nav a { color: color-mix(in srgb, var(--on-dark) 75%, transparent); font-weight: 600; font-size: 13px; min-height: 38px; }
.admin-shell .side-nav a:hover { background: color-mix(in srgb, var(--on-dark) 6%, transparent); color: var(--on-dark); }
.admin-shell .side-nav a.active { background: var(--primary, var(--primary)); color: var(--on-dark); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); }
.admin-shell .side-admin { color: color-mix(in srgb, var(--on-dark) 70%, transparent); border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent); justify-content: center; }
.admin-shell .side-admin:hover { background: color-mix(in srgb, var(--on-dark) 7%, transparent); color: var(--on-dark); }
.admin-welcome {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s5) !important;
  border-radius: var(--r-lg) !important;
  background: radial-gradient(130% 130% at 88% 12%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, rgba(18, 147, 110, 0.12) 42%, transparent 70%), linear-gradient(135deg, var(--night) 0%, var(--night) 50%, var(--night) 100%) !important;
  color: var(--on-dark);
  border: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent) !important;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--shadow-ink) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--on-dark) 10%, transparent) !important;
}
.admin-welcome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 50%, transparent), rgba(18, 147, 110, 0.5), transparent);
  pointer-events: none;
}
.admin-welcome::after {
  content: "";
  position: absolute;
  right: 89px;
  top: -89px;
  width: 233px;
  height: 233px;
  border-radius: 50%;
  border: 32px solid color-mix(in srgb, var(--primary, var(--primary)) 35%, transparent);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.admin-welcome > div {
  position: relative;
  z-index: 2;
}
.admin-welcome h1, .admin-welcome h2 {
  position: relative;
  z-index: 2;
  color: var(--on-dark);
  margin: var(--s1) 0;
}
.admin-welcome p, .admin-welcome .muted, .admin-welcome .eyebrow {
  position: relative;
  z-index: 2;
  color: color-mix(in srgb, var(--on-dark) 78%, transparent);
}
.admin-welcome .btn {
  position: relative;
  z-index: 2;
  background: var(--surface);
  color: var(--ink);
  border-color: var(--surface);
}

@media (max-width: 640px) {
  .admin-welcome {
    padding: 20px 18px !important;
  }
  .admin-welcome::after {
    width: 110px;
    height: 110px;
    right: -25px;
    top: -25px;
    border-width: 16px;
    opacity: 0.15;
  }
}
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--s4); }
.admin-kpi { padding: var(--s4) !important; }
.admin-alert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.admin-alert-card { transition: border-color .15s, transform .15s; color: var(--fg); text-decoration: none !important; }
.admin-alert-card:hover { border-color: var(--night); transform: translateY(-2px); }
.admin-list-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.admin-list-row:last-child { border-bottom: 0; }
.admin-row-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex: 0 0 auto; }
.admin-row-content { flex: 1; min-width: 0; }
.user-name-link { color: var(--ink); font-weight: 700; }
.user-name-link:hover { color: var(--primary); }
.user-summary { display: grid; gap: var(--s4) !important; margin: var(--s4) 0 !important; }
.user-summary > .card { min-height: 120px; margin: 0 !important; }
.users-table-card { margin-top: var(--s4) !important; }
.users-table-card table { min-width: 920px; }
.user-filter-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.user-filter-form input[type=search] { flex: 1 1 260px; width: auto; }
.user-filter-form select { width: auto; min-width: 150px; }
.log-meta { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); }
.health-card {
  padding: var(--s4) !important;
  min-height: 185px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.health-value { font: 800 var(--t-xl) var(--font-heading); color: var(--ink); }
.health-label { color: var(--muted); font-size: var(--t-sm); }
.integration-card { border-radius: var(--r-lg); }
.integration-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.integration-mark, .paddle-mark, .api-provider-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--night); color: var(--on-dark); font-weight: 800; flex: 0 0 auto; }
.integration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.integration-note { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-sm); background: var(--surface-2); }
.integration-note code { display: block; margin: var(--s2) 0; }
.plan-editor-card { border-radius: var(--r-lg); }
.plans-save-bar { position: sticky; bottom: var(--s3); z-index: 20; display: flex; justify-content: flex-end; gap: var(--s3); padding: var(--s3); margin-top: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); }

/* Inbox */
.inbox-thread, .inbox-message { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s4); background: var(--surface); }
.inbox-avatar { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--primary-100); color: var(--primary-700); font-weight: 800; flex: 0 0 auto; }
.inbox-unread { border-left: 3px solid var(--primary); }

/* Invoice editor */
.inv-editor-card { max-width: 1320px; margin-inline: auto; }
.inv-editor-card form#invoice-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.inv-editor-card form#invoice-editor > .inv-form-grid { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: start; }
.inv-editor-card form#invoice-editor > .inv-form-grid > .inv-client-field { grid-row: span 3; }
.inv-editor-card form#invoice-editor > .inv-full { grid-column: 1 / -1; }
.inv-editor-card .inv-item-row { grid-template-columns: minmax(0, 1fr) minmax(60px, 90px) minmax(90px, 130px) 38px; }

/* Misc */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(13px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-init { opacity: 1; transform: none; }
.reveal-init.is-revealed { opacity: 1; transform: none; }
.noprint { }
@media print { .noprint, .sidebar, .app-topbar, .site-header, .site-footer, .cookie-consent { display: none !important; } body { background: var(--surface); } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .card-grid.cols-4, .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .hero h1 { max-width: 16ch; }
  .hero-stack { max-width: 520px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .feature-card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .dash-hero, .dashboard-shell, .billing-status { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--shadow-lg) !important; }
  body.nav-open .sidebar { transform: none; z-index: 80; }
  body.app-shell.nav-open::after { content: ""; position: fixed; inset: 0; background: color-mix(in srgb, var(--shadow-ink) 45%, transparent); z-index: 65; }
  .app-main { width: 100%; }
  .menu-toggle { display: inline-flex; }
  .topbar-search { display: none; }
  .workflow-layout, .contact-layout, .faq-layout, .team-grid, .golden, .golden-rev { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .final-cta .cta-band { grid-template-columns: minmax(0, 1fr); padding: var(--s5); }
  .final-cta .cta-actions { justify-content: flex-start; }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid > div:nth-child(2) { border-right: 0; }
  .proof-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .site-nav { display: none; position: absolute; top: 72px; left: var(--s3); right: var(--s3); flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s2); box-shadow: var(--shadow-lg); }
  body.nav-open .site-nav { display: flex; z-index: 90; }
  .site-nav-mobile-auth { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
  .site-nav-mobile-auth .btn { display: flex !important; width: 100%; box-sizing: border-box; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-ghost { display: none; }
  .auth-screen { min-height: 100dvh; min-height: 100vh; height: auto; }
  .auth-layout { min-height: 100dvh; min-height: 100vh; height: auto; grid-template-columns: minmax(0, 1fr); background: var(--surface-2); }
  .auth-content { justify-content: flex-start; padding: 24px 16px 20px; min-height: 100dvh; min-height: 100vh; background: var(--surface-2); }
  .auth-showcase { display: none; }
  .auth-mobile-brand { display: inline-flex; margin-bottom: 16px; }
  .auth-form-card { margin: 0 0 14px; width: 100%; max-width: 440px; }
  .auth-legal { margin: 6px 0 16px; }
  .integration-fields, .admin-alert-grid { grid-template-columns: minmax(0, 1fr); }
  .workflow-section { margin: 0 var(--s3); }
}
@media (max-width: 760px) {
  .card-grid, .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4, .form-grid.cols-2, .form-grid.cols-3, .pricing-grid, .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .admin-kpi { padding: 12px 14px !important; min-height: 84px !important; gap: 4px !important; }
  .admin-kpi .kpi-value { font-size: 20px !important; line-height: 1.2 !important; }
  .admin-kpi .kpi-title { font-size: 11.5px !important; }
  .card-grid > .card, .golden > .card, .golden-rev > .card, .platform-settings-grid > .card { height: auto !important; }
  .section { padding: var(--s5) 0; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-content { padding: var(--s3) var(--s3) var(--s4); }
  .card { padding: 16px 14px !important; margin-bottom: 14px !important; }
  .profile-name { display: none; }
  .topbar-right .pill { display: none; }
  .inv-editor-card form#invoice-editor, .inv-editor-card form#invoice-editor > .inv-form-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-editor-card form#invoice-editor > .inv-form-grid > .inv-client-field { grid-row: auto; }
  .track-meta-grid { grid-template-columns: minmax(0, 1fr); }
  .track-meta-grid > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .legal-document { padding: var(--s5) var(--s4); margin: var(--s4) var(--s3); }
  .cookie-consent { left: var(--s3); right: var(--s3); max-width: none; }
}
@media (max-width: 520px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .proof-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; }
  .proof-grid > div:last-child { border-bottom: 0 !important; }
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .dashboard-kpi { padding: 12px 14px !important; min-height: 84px !important; gap: 4px !important; }
  .dashboard-kpi .kpi-val { font-size: 20px !important; line-height: 1.2 !important; }
  .dashboard-kpi .kpi-label { font-size: 11.5px !important; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .hs-row { grid-template-columns: minmax(0, 1fr); }
  .hs-float { right: 0; }
  .header-actions .btn-sm:not(.btn-primary) { display: none; }
  .app-content table { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Date picker (invoice + project forms) */
.inv-date-wrap { position: relative; }
[data-date-calendar] { position: absolute; z-index: 90; top: calc(100% + 8px); left: 0; width: 300px; padding: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
[data-date-calendar][hidden] { display: none; }
.px-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.px-cal-head button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 18px; }
.px-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.px-cal-week span { font-size: 10px; font-weight: 800; color: var(--subtle); text-align: center; padding: 4px 0; text-transform: uppercase; }
.px-cal-day { height: 34px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink); }
.px-cal-day:hover { background: var(--surface-2); }
.px-cal-day.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.px-cal-day.selected { background: var(--night); color: var(--on-dark); }
.px-cal-foot { display: flex; justify-content: space-between; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border); }
.px-cal-foot button { border: 0; background: transparent; color: var(--primary); font-weight: 700; cursor: pointer; font-size: 13px; }

/* Landing motion polish */
.js .reveal { transition-delay: var(--reveal-delay, 0s); }
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-visual, .hero-card, .product-preview { animation: float-soft 7s ease-in-out infinite; }
.feature-card, .price-card, .step-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-card:hover, .price-card:hover, .step-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--shadow-ink) 8%, transparent); border-color: var(--border-strong); }
.btn-primary { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-ink) 16%, transparent); }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: fade-up .7s ease both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .hero-visual, .hero-card, .product-preview, .hero-copy > * { animation: none !important; } }

/* Email verification banner */
.verify-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:color-mix(in srgb,var(--primary) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));border-radius:14px;padding:14px 18px;margin-bottom:18px}
.verify-banner strong{display:block;font-size:14px}
.verify-banner .muted{display:block;font-size:12.5px;margin-top:2px}
.verify-banner-actions{display:flex;align-items:center;gap:10px}
.verify-dismiss{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px}

/* Professional date & time inputs */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface, var(--surface)); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
input[type="date"]:hover, input[type="datetime-local"]:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus, input[type="month"]:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
.flatpickr-input::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* v31: modal popups (toasts live in the v140 layer at the end of this file) */
.modal-overlay { position: fixed; inset: 0; z-index: 1100; background: color-mix(in srgb, var(--shadow-ink) 48%, transparent); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: modal-fade .18s ease; }
.modal-overlay[hidden] { display: none !important; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card { background: var(--card, var(--surface)); color: var(--text, var(--ink)); border-radius: 20px; border: 1px solid var(--line, var(--border)); box-shadow: 0 30px 80px color-mix(in srgb, var(--shadow-ink) 30%, transparent); width: 100%; max-width: 460px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 26px; animation: modal-pop .22s cubic-bezier(.2,.9,.3,1.15); }
.modal-card.modal-wide { max-width: 640px; }
@keyframes modal-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.modal-card h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.modal-card .modal-sub { margin: 0 0 18px; color: var(--muted, var(--muted)); font-size: 13.5px; line-height: 1.55; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.modal-close-x { position: absolute; top: 14px; right: 14px; }
.modal-card-wrap { position: relative; }

/* v31: Google one-click button + auth divider */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line, var(--border)); border-radius: 12px; font-weight: 700; min-height: 46px; text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; }
.google-btn:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-ink) 10%, transparent); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted, var(--muted)); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line, var(--border)); }

/* v31: admin notification bell */
.notif-panel { min-width: 330px; max-width: 380px; }
.notif-item { display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: inherit; border-radius: 10px; }
.notif-item:hover { background: var(--pale, var(--surface-2)); }
.notif-item strong { display: block; font-size: 13px; }
.notif-item small { display: block; font-size: 12px; color: var(--muted, var(--muted)); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 6px; flex: none; }
.notif-unread .notif-dot { background: var(--danger); }
.notif-list { margin-top: 14px; display: grid; gap: 4px; }
.notif-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, var(--border)); border-radius: 12px; }
.notif-row.notif-unread { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.notif-row { width: 100%; min-width: 0; box-sizing: border-box; }
.notif-row .notif-copy { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.notif-row .notif-copy p { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.notif-row .notif-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; white-space: nowrap; }
.notif-row .notif-actions form { margin: 0; }
.notif-details { margin: 8px 0; max-width: 100%; }
.notif-details summary { cursor: pointer; color: var(--primary); font-size: 12px; font-weight: 700; }
.notif-details pre { max-width: 100%; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; padding: 12px; border-radius: 9px; background: var(--surface-2, var(--surface-2)); color: var(--muted); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media(max-width:640px){.notif-row{flex-wrap:wrap}.notif-row .notif-copy{flex-basis:calc(100% - 20px)}.notif-row .notif-actions{width:100%;justify-content:flex-end}}

/* Verify-email card: a clean floating notice, not a squeezed bar */
.verify-card{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px 20px;margin:0 0 20px;box-shadow:0 8px 24px var(--shadow-soft)}
.verify-card-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.verify-card-copy{flex:1;min-width:0}
.verify-card-copy strong{display:block;font-size:14px;margin-bottom:3px}
.verify-card-copy span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.verify-card-copy b{color:var(--fg);font-weight:600}
.verify-card-actions{flex:none;display:flex;align-items:center;gap:10px}
.verify-card-close{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:16px;cursor:pointer}
.verify-card-close:hover{background:var(--surface-2,var(--surface-2));color:var(--fg)}
@media(max-width:640px){.verify-card{flex-wrap:wrap}.verify-card-actions{width:100%;justify-content:flex-end}}

/* v32: admin sidebar dropdown groups */
.nav-group { margin: 2px 0; }
.nav-group-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted, var(--subtle)); border-radius: 10px; }
.admin-shell .nav-group-toggle, .admin-shell .nav-group-toggle:visited { color: color-mix(in srgb, var(--on-dark) 74%, transparent); }
.admin-shell .nav-group-toggle:hover, .admin-shell .nav-group-toggle:focus-visible, .admin-shell .nav-group.open > .nav-group-toggle { color: var(--on-dark); background: color-mix(in srgb, var(--on-dark) 6%, transparent); }
.nav-group-toggle:hover { background: color-mix(in srgb, var(--on-dark) 5%, transparent); }
.nav-chevron { display: inline-flex; transition: transform .18s ease; }
.nav-chevron svg { width: 14px; height: 14px; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-group-items { display: grid; gap: 2px; padding: 2px 0 6px; }
.nav-group-items[hidden] { display: none; }

/* v32: status dots for logs and health lists */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.status-dot-ok { background: var(--success); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.status-dot-bad { background: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.fix-hint { display: block; font-size: 12px; color: var(--muted, var(--muted)); margin-top: 4px; }


/* Retraak responsive safety pass: targeted overflow and mobile navigation safeguards. */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.table-responsive, .table-wrap, .invoice-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code, .url-text, .tracking-url, .email-address { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .page-heading-row, .form-actions, .header-actions, .topbar-right { flex-wrap: wrap; }
  .card, .app-content, .auth-form-card, .auth-form-inner { min-width: 0; }
  .form-grid, .card-grid, .dashboard-kpis, .admin-kpi-grid { min-width: 0; }
  .form-grid > *, .card-grid > *, .dashboard-kpis > *, .admin-kpi-grid > * { min-width: 0; }
  .app-content table { width: 100%; }
  .site-header, .site-header .container { min-width: 0; }
  .site-nav { max-height: calc(100dvh - 90px); overflow-y: auto; }
}
@media (max-width: 380px) {
  .app-content { padding-left: 12px; padding-right: 12px; }
  .card { padding: 14px; }
  .btn { white-space: normal; }
  .auth-form-card { padding-left: 16px; padding-right: 16px; }
}

/* Retraak mobile navigation reliability and viewport containment */

@media (max-width: 600px) {
  .site-header { z-index: 100; }
  .site-header .container { width: 100%; max-width: 100%; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  .site-header .header-inner { gap: 10px; height: 64px; min-width: 0; }
  .site-header .brand { min-width: 0; max-width: 46%; }
  .site-header .brand-logo-wordmark { max-width: 100%; height: 30px; }
  .site-header .header-actions { margin-left: auto; gap: 8px; min-width: 0; flex: 0 0 auto; }
  .site-header .header-actions .btn { padding: 10px 13px; white-space: nowrap; font-size: 13px; }
  .site-header .nav-toggle { flex: 0 0 42px; }
  .site-header .site-nav { top: 64px; left: 12px; right: 12px; z-index: 110; max-height: calc(100vh - 82px); overflow-y: auto; }
}
@media (max-width: 380px) {
  .site-header .brand-logo-wordmark { max-width: 118px; height: 27px; }
  .site-header .header-actions .btn { padding: 9px 10px; font-size: 12px; }
  .site-header .nav-toggle { width: 38px; height: 38px; flex-basis: 38px; }
}

/* Admin navigation UX: icon-led structured hierarchy with calm sapphire indigo accents */
.admin-shell .sidebar { gap: 12px; padding: 14px 10px 12px; }
.admin-shell .admin-brand-box { margin-bottom: 4px; }
.admin-shell .sidebar > .brand, .admin-shell .admin-brand-box .brand { min-height: 48px; border-radius: 12px; }

/* Top-level direct single link (Dashboard, etc.) */
.admin-shell .nav-single-link,
.admin-shell .nav-single-item,
.admin-shell .side-nav > a[data-nav-item] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  color: color-mix(in srgb, var(--on-dark) 74%, transparent) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  background: transparent;
  transition: all 0.16s ease !important;
}
.admin-shell .nav-single-link:hover,
.admin-shell .nav-single-item:hover,
.admin-shell .side-nav > a[data-nav-item]:hover {
  background: color-mix(in srgb, var(--on-dark) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--on-dark) 5%, transparent) !important;
  color: var(--on-dark) !important;
  transform: translateX(1px);
}
.admin-shell .nav-single-link .nav-icon,
.admin-shell .nav-single-item .nav-icon,
.admin-shell .side-nav > a[data-nav-item] .nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--on-dark) 55%, transparent);
  transition: color 0.16s ease;
  flex: 0 0 20px;
}
.admin-shell .nav-single-link .nav-icon svg,
.admin-shell .nav-single-item .nav-icon svg,
.admin-shell .side-nav > a[data-nav-item] .nav-icon svg {
  width: 17px;
  height: 17px;
}
.admin-shell .nav-single-link:hover .nav-icon,
.admin-shell .nav-single-item:hover .nav-icon,
.admin-shell .side-nav > a[data-nav-item]:hover .nav-icon {
  color: var(--primary-300);
}

/* ACTIVE top-level link (solid Calm Sapphire Indigo) */
.admin-shell .nav-single-link.active,
.admin-shell .nav-single-item.active,
.admin-shell .side-nav > a[data-nav-item].active {
  background: var(--primary, var(--primary)) !important;
  border-color: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 38%, transparent) !important;
}
.admin-shell .nav-single-link.active .nav-icon,
.admin-shell .nav-single-item.active .nav-icon,
.admin-shell .side-nav > a[data-nav-item].active .nav-icon {
  color: var(--on-dark) !important;
}

/* Nav groups (collapsible sections) */
.admin-shell .nav-group { margin: 2px 0; }
.admin-shell .nav-group-toggle {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 10px 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--on-dark) 74%, transparent) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  cursor: pointer;
  transition: all 0.16s ease !important;
  box-sizing: border-box;
}
.admin-shell .nav-group-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
  text-align: left;
}
.admin-shell .nav-group-label::before {
  display: none !important; /* Eliminates the legacy dot bullet! */
}
.admin-shell .nav-group-label .nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--on-dark) 55%, transparent);
  transition: color 0.16s ease;
  flex: 0 0 20px;
}
.admin-shell .nav-group-label .nav-icon svg {
  width: 17px;
  height: 17px;
}
.admin-shell .nav-group-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-shell .nav-toggle-right,
.admin-shell .nav-group-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.admin-shell .nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--on-dark) 40%, transparent);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.16s ease;
}
.admin-shell .nav-chevron svg {
  width: 14px;
  height: 14px;
}

/* Nav group hover & open states */
.admin-shell .nav-group-toggle:hover {
  background: color-mix(in srgb, var(--on-dark) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--on-dark) 5%, transparent) !important;
  color: var(--on-dark) !important;
}
.admin-shell .nav-group-toggle:hover .nav-icon {
  color: var(--primary-300);
}
.admin-shell .nav-group.open > .nav-group-toggle {
  background: color-mix(in srgb, var(--on-dark) 5.5%, transparent) !important;
  border-color: color-mix(in srgb, var(--on-dark) 7%, transparent) !important;
  color: var(--on-dark) !important;
}
.admin-shell .nav-group.open > .nav-group-toggle .nav-icon {
  color: var(--primary-300);
}
.admin-shell .nav-group.open > .nav-group-toggle .nav-chevron {
  transform: rotate(180deg);
  color: var(--primary-300);
  opacity: 1;
}

/* Nav group holding active child */
.admin-shell .nav-group-toggle.is-active-group {
  color: var(--on-dark) !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important;
}
.admin-shell .nav-group-toggle.is-active-group .nav-icon {
  color: var(--primary-300) !important;
}

/* Sub-items list (accordion drawer) */
.admin-shell .nav-group-items {
  display: grid;
  gap: 2px;
  padding: 4px 0 6px 14px !important;
  margin: 3px 0 4px 14px !important;
  border-left: 1.5px solid color-mix(in srgb, var(--on-dark) 10%, transparent) !important;
  overflow: hidden;
  animation: admin-nav-reveal 0.18s ease-out;
}
.admin-shell .nav-group-items[hidden] {
  display: none !important;
}
.admin-shell .nav-sub-link,
.admin-shell .nav-sub-item,
.admin-shell .nav-group-items a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: color-mix(in srgb, var(--on-dark) 65%, transparent) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.admin-shell .nav-sub-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-dark) 30%, transparent);
  flex: 0 0 4px;
  transition: all 0.15s ease;
}
.admin-shell .nav-sub-link:hover,
.admin-shell .nav-sub-item:hover,
.admin-shell .nav-group-items a:hover {
  background: color-mix(in srgb, var(--on-dark) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--on-dark) 5%, transparent) !important;
  color: var(--on-dark) !important;
  transform: translateX(2px);
}
.admin-shell .nav-sub-link:hover .nav-sub-dot,
.admin-shell .nav-sub-item:hover .nav-sub-dot,
.admin-shell .nav-group-items a:hover .nav-sub-dot {
  background: var(--primary-300);
  transform: scale(1.4);
}

/* ACTIVE sub-item */
.admin-shell .nav-sub-link.active,
.admin-shell .nav-sub-item.active,
.admin-shell .nav-group-items a.active {
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent) !important;
  color: var(--on-dark) !important;
  font-weight: 600 !important;
  box-shadow: inset 2.5px 0 0 var(--primary, var(--primary)) !important;
  transform: translateX(2px);
}
.admin-shell .nav-sub-link.active .nav-sub-dot,
.admin-shell .nav-sub-item.active .nav-sub-dot,
.admin-shell .nav-group-items a.active .nav-sub-dot {
  background: var(--primary-300) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 65%, transparent) !important;
  transform: scale(1.4);
}

/* Counter / unread notification badges */
.admin-shell .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary, var(--primary));
  color: var(--on-dark);
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 40%, transparent);
}
.admin-shell .nav-badge-pulse {
  animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

/* Sidebar footer switcher actions */
.admin-shell .admin-sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-shell .side-admin-btn,
.admin-shell .side-admin {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--on-dark) 3.5%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--on-dark) 7%, transparent) !important;
  color: color-mix(in srgb, var(--on-dark) 72%, transparent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.16s ease !important;
}
.admin-shell .side-admin-btn:hover,
.admin-shell .side-admin:hover {
  background: color-mix(in srgb, var(--on-dark) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--on-dark) 14%, transparent) !important;
  color: var(--on-dark) !important;
  transform: translateY(-1px);
}
.admin-shell .side-admin-btn .side-admin-icon,
.admin-shell .side-admin svg {
  width: 15px;
  height: 15px;
  display: inline-flex;
}
[data-nav-item][hidden], [data-nav-section][hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce) { .admin-shell .nav-group-toggle, .admin-shell .nav-sub-link, .admin-shell .nav-group-items a { transition:none; } }
@media (max-width:960px) {
  .admin-shell .sidebar { gap:10px; }
  .admin-shell .sidebar { width:min(300px,88vw); flex-basis:min(300px,88vw); }
}

/* Mobile workspace/admin shell: keep the full viewport usable without sideways page drift. */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .app-shell { width: 100%; max-width: 100%; overflow-x: clip; }
  .app-main { width: 100%; max-width: 100%; min-width: 0; }
  .app-topbar { width: 100%; max-width: 100%; min-width: 0; height: 64px; min-height: 64px; padding: 8px 12px; gap: 9px; overflow: visible; }
  .menu-toggle { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; }
  .topbar-title { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-crumb { display: none; }
  .topbar-crumb.demo-workspace-label { display: block; font-size: 9px; letter-spacing: .07em; margin-bottom: 2px; color: var(--primary); }
  .demo-exit { display: none !important; }
  .topbar-right { flex: 0 0 auto; flex-wrap: nowrap !important; gap: 7px; min-width: 0; margin-left: auto; }
  .topbar-right > .btn-brand { width: 38px; height: 38px; min-width: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; gap: 0; flex: 0 0 38px; overflow: hidden; }
  .topbar-right > .btn-brand span { display: none !important; }
  .topbar-right > .btn-brand svg { width: 19px; height: 19px; flex: 0 0 auto; }
  .topbar-icon { width: 38px; height: 38px; flex: 0 0 38px; }
  .profile-btn { width: 40px; height: 40px; max-width: 40px; padding: 3px; justify-content: center; gap: 0; overflow: hidden; }
  .profile-btn::after, .profile-name { display: none !important; }
  .avatar { width: 32px; height: 32px; }
  .app-content { width: 100%; max-width: 100%; min-width: 0; padding: 18px 14px 28px; overflow-wrap: anywhere; }
  .app-content > *, .app-content .card, .app-content section { max-width: 100%; min-width: 0; }
  .page-heading-row, .inv-page-head { min-width: 0; }
}
@media (max-width: 390px) {
  .app-topbar { padding-left: 9px; padding-right: 9px; gap: 6px; }
  .menu-toggle { width: 34px; height: 34px; flex-basis: 34px; }
  .topbar-right { gap: 5px; }
  .topbar-right > .btn-brand { width: 34px; height: 34px; min-width: 34px; flex-basis: 34px; }
  .topbar-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .profile-btn { width: 36px; height: 36px; max-width: 36px; }
  .app-content { padding-left: 12px; padding-right: 12px; }
}


/* Notification count badge and balanced dropdown footer */
.topbar-icon { position: relative; align-items: center; justify-content: center; align-self: center; padding: 0; line-height: 0; }
.topbar-icon svg { display: block; flex: 0 0 auto; margin: auto; }
#notif-btn { align-items: center; justify-content: center; vertical-align: middle; }
#notif-btn > svg { align-self: center; }
.notif-bell-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border: 2px solid var(--surface, var(--surface)); border-radius: 50%; background: var(--danger); }
.notif-menu-head { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; padding: 12px 14px; }
.notif-menu-head > strong { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; }
.notif-heading-count { display: inline; color: var(--danger); font-size: inherit; font-weight: 800; line-height: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.notif-menu-head { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 12px 14px; }
.notif-menu-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 8px; }
.notif-menu-footer > a { display: inline-flex; align-items: center; min-height: 34px; text-decoration: none; font-size: 13px; font-weight: 650; }
.notif-menu-footer form { margin: 0 0 0 auto; flex: none; }
.notif-menu-footer .btn { white-space: nowrap; }
@media (max-width: 420px) { .notif-panel { min-width: min(330px, calc(100vw - 24px)); max-width: calc(100vw - 24px); } .notif-menu-footer { gap: 6px; padding-inline: 10px; } .notif-menu-footer > a, .notif-menu-footer .btn { font-size: 12px; } }


/* Editable workspace plan-card messaging */
.side-plan-top { min-width: 0; align-items: flex-start; }
.side-plan-top strong { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.side-plan-top .pill { flex: 0 0 auto; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.side-plan-message { min-width: 0; }
.side-plan-type { display: inline-flex; align-items: center; margin: 10px 0 2px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary,var(--primary)); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.side-plan.is-top .side-plan-type { background: color-mix(in srgb, var(--on-dark) 12%, transparent); color: var(--on-dark); }
.side-plan-message p { white-space: normal; overflow-wrap: anywhere; }
.side-plan-message .btn { white-space: normal; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 900px) { .side-plan-top { flex-wrap: wrap; } .side-plan-top .pill { margin-left: 0; } }


/* Team member table: retain the desktop table and turn each row into a readable card on phones. */
.team-members-card { min-width: 0; overflow: hidden; }
.team-members-table { width: 100%; table-layout: auto; }
.team-member-identity { min-width: 130px; }
.team-member-identity strong { display: block; overflow-wrap: anywhere; word-break: normal; }
.team-member-email { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; word-break: normal; }
.team-member-role select { max-width: 100%; min-width: 0; }
.team-member-actions { text-align: right; white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 600px) {
  .team-members-card { padding: 14px !important; overflow: visible; }
  .team-members-table, .team-members-table tbody { display: block; width: 100%; min-width: 0; }
  .team-members-table thead { display: none; }
  .team-members-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; width: 100%; padding: 14px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface, var(--surface)); box-shadow: 0 2px 8px rgb(15 17 30 / 4%); }
  .team-members-table tbody tr:last-child { margin-bottom: 0; }
  .team-members-table tbody tr:hover td { background: transparent; }
  .team-members-table tbody td { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
  .team-members-table tbody td::before { content: attr(data-label); display: block; color: var(--subtle); font-size: 10px; font-weight: 800; letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; }
  .team-members-table tbody td.team-member-identity { grid-column: 1 / -1; min-width: 0; padding-top: 0; }
  .team-members-table tbody td.team-member-identity strong { font-size: 15px; line-height: 1.45; }
  .team-members-table tbody td.team-member-role select { width: 100% !important; font-size: 12px !important; }
  .team-members-table tbody td.team-member-actions { grid-column: 1 / -1; align-items: flex-end; padding-bottom: 0; border-bottom: 0; }
  .team-members-table tbody td.team-member-actions::before { content: none; }
  .team-members-table tbody td.team-member-actions form { display: flex !important; justify-content: flex-end; width: 100%; }
  .team-members-table tbody td.team-member-actions .btn { min-height: 36px; }
}
@media (max-width: 360px) {
  .team-members-card { padding: 10px !important; }
  .team-members-table tbody tr { padding: 11px; gap: 0 10px; }
  .team-members-table tbody td { font-size: 12px; }
}


/* Retraak dashboard responsive repair: revenue, pipeline and recent projects */
.dashboard-shell, .dashboard-stack, .dashboard-stack > .card,
.dashboard-stack .dashboard-section-title, .dashboard-stack .table-responsive { min-width: 0; max-width: 100%; }
.dashboard-section-title { flex-wrap: wrap; align-items: flex-start; }
.dashboard-section-title h2 { min-width: 0; overflow-wrap: anywhere; }
.dashboard-section-title > .muted { min-width: 0; overflow-wrap: anywhere; }
.chart-bars { min-width: 0; width: 100%; }
.chart-col { min-width: 0; }
.chart-val { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.chart-bars { position: relative; }
.chart-empty-note { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: min(220px, 70%); color: var(--muted); font-size: 12px; text-align: center; line-height: 1.5; pointer-events: none; }
.pipeline-grid { min-width: 0; max-width: 100%; }
.pipeline-column { min-width: 0; }
.pipeline-column h4 span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pipeline-project { min-width: 0; }
.pipeline-project strong { overflow-wrap: anywhere; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pipeline-project small { overflow-wrap: anywhere; }
.dashboard-recent-projects { overflow: visible; }
.dashboard-recent-projects table { width: 100%; table-layout: fixed; }
.dashboard-recent-projects th, .dashboard-recent-projects td { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .dashboard-section-title { gap: 8px 12px; }
  .dashboard-section-title h2 { flex: 1 1 100%; }
  .dashboard-section-title > .muted { flex: 1 1 100%; }
  .chart-bars { height: 160px; gap: 8px; }
  .chart-label { font-size: 10px; }
  .chart-val { font-size: 9px; }
  .pipeline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 8px; padding-bottom: 0; }
  .pipeline-column { width: auto; padding: 10px; }
  .pipeline-column h4 { align-items: flex-start; font-size: 11px; }
  .pipeline-column h4 span:first-child { flex: 1 1 auto; }
  .pipeline-column h4 span:last-child { flex: 0 0 auto; }
  .pipeline-project { padding: 9px; }
  .dashboard-recent-projects { overflow: visible; }
  .dashboard-recent-projects table,
  .dashboard-recent-projects tbody { display: block; width: 100%; }
  .dashboard-recent-projects thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .dashboard-recent-projects { width: 100%; min-width: 0; overflow: visible !important; }
  .dashboard-recent-projects table { display: block; width: 100%; min-width: 0; table-layout: auto; }
  .dashboard-recent-projects tbody { width: 100%; min-width: 0; }
  .dashboard-recent-projects tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; width: 100%; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .dashboard-recent-projects tbody tr:last-child { border-bottom: 0; }
  .dashboard-recent-projects tbody td { display: block; min-width: 0; width: auto; padding: 7px 0; border: 0; text-align: left !important; overflow-wrap: anywhere; word-break: normal; }
  .dashboard-recent-projects tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--subtle); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  .dashboard-recent-projects tbody td[data-label="Project"] { grid-column: 1 / -1; }
  .dashboard-recent-projects tbody td[data-label="Client"] { grid-column: 1 / -1; }
  .dashboard-recent-projects tbody td[data-label="Project"] strong { overflow-wrap: anywhere; word-break: break-word; }
  .dashboard-recent-projects tbody td[data-label="Total"] { grid-column: 1 / -1; }
  .dashboard-recent-projects tbody td[data-label="Total"] strong { white-space: normal; overflow-wrap: anywhere; }
  .dashboard-recent-projects tbody td[colspan] { grid-column: 1 / -1; }
  .dashboard-recent-projects tbody td[colspan]::before { display: none; }
}
@media (max-width: 390px) {
  .pipeline-grid { grid-template-columns: minmax(0, 1fr); }
  .pipeline-column { padding: 12px; }
  .chart-bars { gap: 5px; }
  .chart-label { font-size: 9px; }
  .dashboard-recent-projects tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; }
  .dashboard-recent-projects tbody td[data-label="Due"] { grid-column: 1; }
  .dashboard-recent-projects tbody td[data-label="Status"] { grid-column: 2; }
  .dashboard-recent-projects tbody td[data-label="Total"] { grid-column: 1 / -1; }
}


/* Retraak admin responsive audit pass (shared across all platform-admin pages). */
.admin-content, .admin-content > *, .admin-content .card, .admin-content .section-title-row,
.admin-content .page-heading-row, .admin-content .table-responsive, .admin-content table { min-width:0; max-width:100%; }
.admin-content .section-title-row, .admin-content .page-heading-row { gap:14px; flex-wrap:wrap; align-items:flex-start; }
.admin-content h1 { font-size:clamp(24px, 3vw, 36px); line-height:1.15; overflow-wrap:anywhere; }
.admin-content p, .admin-content code, .admin-content pre, .admin-content a { overflow-wrap:anywhere; }
.admin-content .card { overflow-wrap:anywhere; }
.admin-content .table-responsive { width:100%; }
.admin-content .role-row { display:grid; grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr); align-items:start; gap:16px; }
.admin-content .role-row > * { min-width:0; }
.admin-content .contact-tabs { display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
.admin-content .inbox-message { min-width:0; }
.admin-content .inbox-person > div { min-width:0; overflow-wrap:anywhere; }
.admin-content .inbox-original, .admin-content .inbox-reply { overflow-wrap:anywhere; word-break:normal; }
.admin-content .inbox-reply-form textarea { width:100%; min-width:0; }
.admin-content .inbox-actions, .admin-content .inbox-footer-actions { min-width:0; }
@media (max-width:760px) {
  .admin-content .table-responsive { overflow:visible !important; }
  .admin-content table { display:block !important; width:100% !important; min-width:0 !important; table-layout:auto !important; border-collapse:separate; border-spacing:0; }
  .admin-content table thead { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
  .admin-content table tbody { display:grid !important; grid-template-columns:minmax(0,1fr); gap:12px; width:100%; }
  .admin-content table tbody tr { display:grid !important; grid-template-columns:minmax(0,1fr); gap:9px; min-width:0; width:100%; padding:14px; margin:0; border:1px solid var(--border,var(--border)); border-radius:14px; background:var(--card,var(--surface)); box-shadow:0 2px 7px rgba(20,22,34,.04); }
  .admin-content table tbody tr:nth-child(even) { background:var(--card,var(--surface)); }
  .admin-content table tbody td { display:grid !important; grid-template-columns:minmax(94px,.62fr) minmax(0,1.38fr); align-items:start; gap:10px; min-width:0; width:100% !important; padding:5px 0 !important; border:0 !important; border-bottom:1px solid color-mix(in srgb,var(--border,var(--border)) 65%,transparent) !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere; word-break:normal; }
  .admin-content table tbody td:last-child { border-bottom:0 !important; }
  .admin-content table tbody td::before { content:attr(data-label); display:block; min-width:0; color:var(--muted,var(--muted)); font-size:10px; line-height:1.4; font-weight:800; letter-spacing:.07em; text-transform:uppercase; overflow-wrap:anywhere; }
  .admin-content table tbody td[colspan] { display:block !important; border:0 !important; padding:8px 0 !important; }
  .admin-content table tbody td[colspan]::before { content:none !important; }
  .admin-content table tbody td > * { max-width:100%; }
  .admin-content table details pre { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
  .admin-content table .deleted-actions { display:flex; flex-wrap:wrap; gap:8px; }
  .admin-content table .deleted-actions form { width:100%; }
  .admin-content table .deleted-actions .btn { width:100%; white-space:normal; }
  .admin-content .role-row { grid-template-columns:minmax(0,1fr); gap:5px; padding:14px 0; }
  .admin-content .section-title-row > div:first-child { flex:1 1 100%; min-width:0; }
  .admin-content .section-title-row > div:last-child { flex-wrap:wrap; }
  .admin-content .contact-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .admin-content .contact-tabs a { justify-content:center; min-width:0; white-space:normal; padding:10px 8px; }
  .admin-content .contact-tabs a:last-child:nth-child(odd) { grid-column:1/-1; }
  .admin-content .inbox-message-head { align-items:flex-start; }
  .admin-content .inbox-actions { display:flex; flex-wrap:wrap; width:100%; justify-content:flex-start; }
  .admin-content .inbox-actions .btn { flex:1 1 145px; white-space:normal; }
  .admin-content .inbox-footer-actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .admin-content .inbox-footer-actions form, .admin-content .inbox-footer-actions > a { width:100%; min-width:0; }
  .admin-content .inbox-footer-actions .btn { width:100%; white-space:normal; }
  .admin-content .inbox-reply-foot { align-items:stretch; }
  .admin-content .inbox-reply-foot .btn { width:100%; }
  .admin-content .user-filter-form { display:grid; grid-template-columns:minmax(0,1fr); width:100%; }
  .admin-content .user-filter-form input, .admin-content .user-filter-form select, .admin-content .user-filter-form .btn { width:100% !important; min-width:0; }
  .admin-content .users-table-card table { min-width:0 !important; }
}
@media (max-width:390px) {
  .admin-content table tbody tr { padding:12px; }
  .admin-content table tbody td { grid-template-columns:minmax(78px,.55fr) minmax(0,1.45fr); gap:8px; }
  .admin-content .contact-tabs { grid-template-columns:minmax(0,1fr); }
  .admin-content .contact-tabs a:last-child:nth-child(odd) { grid-column:auto; }
}

/* Per-plan accent color configured in Admin > Subscriptions & Pricing. */
.price-card[style*="--plan-color"] { border-top: 3px solid var(--plan-color); }
.price-card.highlight .price-badge,
.price-card.highlight .price-badge:not(.price-badge-current),
.price-card .price-badge:not(.price-badge-current) {
  background: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, var(--primary)) 38%, transparent) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
.price-badge.price-badge-current,
.price-card .price-badge.price-badge-current,
.price-card[style*="--plan-color"] .price-badge.price-badge-current {
  background: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary, var(--primary)) 35%, transparent) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Balanced variable-height card grids. Use standard CSS grid with auto rows. */
.app-content .card-grid.cols-2:not(.user-summary):not(.account-metrics),
.admin-content .card-grid.cols-2:not(.user-summary):not(.account-metrics),
.app-content .team-grid,
.admin-content .team-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  column-gap: var(--layout-gap, 24px) !important;
  row-gap: var(--layout-gap, 24px) !important;
  align-items: start !important;
  align-content: start !important;
}
.app-content .card-grid.cols-2:not(.user-summary):not(.account-metrics) > .card,
.admin-content .card-grid.cols-2:not(.user-summary):not(.account-metrics) > .card,
.app-content .team-grid > .card,
.admin-content .team-grid > .card {
  display: flex !important;
  flex-direction: column !important;
  width: auto; min-width: 0; height: auto !important; min-height: 0;
  margin: 0 !important; align-self: start; break-inside: auto; grid-row: auto !important;
}
@media (max-width: 760px) {
  .app-content .card-grid.cols-2:not(.user-summary):not(.account-metrics),
  .admin-content .card-grid.cols-2:not(.user-summary):not(.account-metrics),
  .app-content .team-grid,
  .admin-content .team-grid { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; }
  .app-content .card-grid.cols-2:not(.user-summary):not(.account-metrics) > .card,
  .admin-content .card-grid.cols-2:not(.user-summary):not(.account-metrics) > .card,
  .app-content .team-grid > .card,
  .admin-content .team-grid > .card { grid-row: auto !important; }
}


/* Retraak global layout repair: consistent grid gutters, no stretched cards, and modern calendar controls. */
*, *::before, *::after { box-sizing: border-box; }
:root { --layout-gap: clamp(16px, 1.35vw, 24px); }
.card-grid, .admin-profile-grid, .settings-grid, .form-grid, .dashboard-grid, .admin-grid {
  column-gap: var(--layout-gap) !important;
  row-gap: var(--layout-gap) !important;
  align-items: start;
  min-width: 0;
}
.card-grid > *, .admin-profile-grid > *, .settings-grid > *, .form-grid > *, .dashboard-grid > *, .admin-grid > * {
  min-width: 0;
  align-self: start;
}
.card-grid > .card, .admin-profile-grid > .card, .settings-grid > .card, .form-grid > .card, .dashboard-grid > .card, .admin-grid > .card {
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
}
/* Remove legacy full-height rules that stretched profile/settings cards. */
.admin-profile-grid > .card { height: auto !important; }
/* Keep form controls from forcing grid columns wider than their container. */
.app-content, .app-main, .app-shell, main, .card, .form-card, .settings-card { min-width: 0; }
.card-grid > *, .settings-grid > *, .admin-grid > * { overflow-wrap: anywhere; }
/* Shared settings forms: deliberate two-column grid with a real gutter. */
.settings-grid, .admin-settings-grid, .website-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap) !important; align-items: start; }
.settings-grid > *, .admin-settings-grid > *, .website-settings-grid > * { min-width: 0; margin: 0 !important; }
/* Do not use a full-height placeholder or force sibling cards to match the tallest card. */
.admin-profile-grid, .card-grid { align-content: start; }
input.retraak-modern-calendar-input, .flatpickr-input[readonly], input.flatpickr-input, .flatpickr-mobile {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid var(--border, var(--border));
  border-radius: 12px; background: var(--card, var(--surface)); color: var(--fg, var(--ink)); font: inherit; box-shadow: 0 1px 2px rgba(15, 15, 25, .03);
}
input.retraak-modern-calendar-input:focus, .flatpickr-input:focus { outline: 3px solid color-mix(in srgb, var(--primary, var(--primary)) 18%, transparent); border-color: var(--primary, var(--primary)); }
.flatpickr-calendar { z-index: 99999 !important; border: 1px solid var(--border, var(--border)) !important; border-radius: 14px !important; box-shadow: 0 16px 44px rgba(17, 18, 32, .18) !important; overflow: hidden; font-family: inherit !important; }
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange, .flatpickr-calendar .flatpickr-day.selected:hover { background: var(--primary, var(--primary)) !important; border-color: var(--primary, var(--primary)) !important; }
.flatpickr-calendar .flatpickr-months { padding-top: 4px; }
.flatpickr-calendar .flatpickr-time input, .flatpickr-calendar .flatpickr-time .flatpickr-am-pm { font-size: 14px; }
@media (max-width: 900px) {
  .settings-grid, .admin-settings-grid, .website-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .card-grid, .admin-profile-grid, .form-grid, .dashboard-grid, .admin-grid { grid-template-columns: minmax(0, 1fr) !important; }
}


/* Final site-wide card sizing: never stretch short cards to a sibling's height. */
.card-grid { align-items: start; align-content: start; }
.card-grid > .card { height: auto !important; min-height: 0; align-self: start; }
.card-grid.cols-2:not(.user-summary):not(.account-metrics) > .card,
.team-grid > .card { grid-row-end: auto !important; }
/* Website-management forms must keep a visible gutter even if older page rules override it. */
.admin-content .card-grid.cols-2 { column-gap: var(--layout-gap, 24px) !important; row-gap: var(--layout-gap, 24px) !important; }
.admin-content .card-grid.cols-2 > .card { margin: 0 !important; min-width: 0; }

/* Verified global card-flow repair: independent column stacks prevent tall cards
   from forcing empty row-height gaps into neighbouring settings cards. */
.card-grid.retraak-independent-columns,
.team-grid.retraak-independent-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: auto !important;
  column-gap: var(--layout-gap, 24px) !important;
  row-gap: 0 !important;
  height: auto !important;
}
.retraak-card-column { display: flex; flex-direction: column; gap: var(--layout-gap, 24px); min-width: 0; height: auto; align-self: start; }
.retraak-card-column > .card { width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; margin: 0 !important; align-self: stretch; }
.card-grid.retraak-independent-columns > .retraak-card-column,
.team-grid.retraak-independent-columns > .retraak-card-column { grid-row: auto !important; }
@media (max-width: 760px) {
  .card-grid.retraak-independent-columns,
  .team-grid.retraak-independent-columns,
  .card-grid.retraak-independent-columns.retraak-single-column,
  .team-grid.retraak-independent-columns.retraak-single-column { grid-template-columns: minmax(0, 1fr) !important; }
  .retraak-card-column { gap: var(--layout-gap, 20px); }
}


/* Website management: use normal intrinsic-height grid rows.
   Do not let the global 8px masonry-span rules inflate the Branding card. */
.admin-content .card-grid.website-settings-grid,
.admin-content .card-grid.website-settings-grid.cols-2 {
  grid-auto-rows: auto !important;
  align-items: start !important;
  align-content: start !important;
}
.admin-content .card-grid.website-settings-grid > *,
.admin-content .card-grid.website-settings-grid.cols-2 > .card {
  grid-row: auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}
.admin-content .card-grid.website-settings-grid > .card {
  margin: 0 !important;
}
.automation-settings-form .form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border, var(--border));
}
@media (max-width: 760px) {
  .admin-content .card-grid.website-settings-grid,
  .admin-content .card-grid.website-settings-grid.cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .automation-settings-form .form-actions .btn {
    width: 100%;
  }
}

/* Final client portal brand overrides */
.client-portal-brandbar{display:flex;justify-content:center;align-items:center;min-height:76px;padding:12px 20px;background:var(--night);border-bottom:1px solid color-mix(in srgb, var(--on-dark) 12%, transparent)}
.client-portal-brandbar>div{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto;text-align:center}
.client-portal-brandbar img{display:block;width:auto;height:auto;max-width:min(160px,50vw);max-height:28px;margin:0 auto;object-fit:contain;object-position:center}
.client-portal-brand-fallback{color:var(--on-dark);font-size:21px;font-weight:800;letter-spacing:-.03em}
.client-portal-footer .client-portal-social{display:flex;align-items:center;justify-content:center;gap:10px;margin:1px 0 3px}
.client-portal-social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid color-mix(in srgb, var(--on-dark) 24%, transparent);border-radius:50%;color:var(--on-dark);transition:background .15s,border-color .15s,transform .15s}
.client-portal-social a:hover{background:color-mix(in srgb, var(--on-dark) 14%, transparent);border-color:var(--border);transform:translateY(-1px)}
.client-portal-social svg{display:block;width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.client-message-thread{display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.client-message{box-sizing:border-box;max-width:82%;border-radius:18px;padding:12px 16px;transition:transform .15s ease}
.client-message.from-client{align-self:flex-end!important;margin-left:auto!important;margin-right:0!important;background:var(--primary,var(--primary))!important;color:var(--on-dark)!important;border-radius:18px 18px 4px 18px!important;box-shadow:0 3px 12px color-mix(in srgb, var(--primary) 22%, transparent)!important;text-align:left}
.client-message.from-client .client-message-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:4px}
.client-message.from-client .client-message-meta strong{color:var(--on-dark)!important;font-size:11px;font-weight:700}
.client-message.from-client .client-message-meta time{color:color-mix(in srgb, var(--on-dark) 82%, transparent)!important;font-size:10px}
.client-message.from-client p{color:var(--on-dark)!important;margin:0;line-height:1.55;font-size:13.5px}
.client-message.from-client .message-attachment-link{background:color-mix(in srgb, var(--on-dark) 20%, transparent)!important;color:var(--on-dark)!important;border-color:color-mix(in srgb, var(--on-dark) 35%, transparent)!important}
.client-message.from-client .message-attachment-image-link{background:color-mix(in srgb, var(--on-dark) 15%, transparent)!important;border-color:color-mix(in srgb, var(--on-dark) 30%, transparent)!important;color:var(--on-dark)!important}
.client-message.from-team{align-self:flex-start!important;margin-right:auto!important;margin-left:0!important;background:var(--surface-2)!important;color:var(--fg)!important;border-radius:18px 18px 18px 4px!important;border:1px solid var(--border)!important;box-shadow:0 2px 8px color-mix(in srgb, var(--shadow-ink) 4%, transparent)!important;text-align:left}
.client-message.from-team .client-message-meta{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:4px}
.client-message.from-team .client-message-meta strong{color:var(--fg)!important;font-size:11px;font-weight:700}
.client-message.from-team .client-message-meta time{color:var(--muted)!important;font-size:10px}
.client-message.from-team p{color:var(--fg)!important;margin:0;line-height:1.55;font-size:13.5px}
.client-message.from-team .message-attachment-link{background:var(--surface)!important;color:var(--fg)!important;border-color:var(--border-strong)!important}
.client-message.from-team .message-attachment-image-link{background:var(--surface)!important;border-color:var(--border-strong)!important;color:var(--fg)!important}
.message-bubble{box-sizing:border-box;max-width:80%;border-radius:18px;padding:12px 18px;display:flex;flex-direction:column;gap:4px}
.message-bubble.team{align-self:flex-end!important;margin-left:auto!important;margin-right:0!important;background:var(--primary,var(--primary))!important;color:var(--on-dark)!important;border-radius:18px 18px 4px 18px!important;box-shadow:0 4px 14px color-mix(in srgb, var(--primary) 20%, transparent)!important;text-align:left}
.message-bubble.team .message-bubble-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:3px}
.message-bubble.team .message-bubble-meta strong{color:var(--on-dark)!important;font-size:11px;font-weight:700}
.message-bubble.team .message-bubble-meta time{color:color-mix(in srgb, var(--on-dark) 82%, transparent)!important;font-size:10px}
.message-bubble.team p{color:var(--on-dark)!important;margin:0;line-height:1.55;font-size:13.5px}
.message-bubble.team .message-attachment-link{background:color-mix(in srgb, var(--on-dark) 20%, transparent)!important;color:var(--on-dark)!important;border-color:color-mix(in srgb, var(--on-dark) 35%, transparent)!important}
.message-bubble.team .message-attachment-image-link{background:color-mix(in srgb, var(--on-dark) 15%, transparent)!important;border-color:color-mix(in srgb, var(--on-dark) 30%, transparent)!important;color:var(--on-dark)!important}
.message-bubble.client{align-self:flex-start!important;margin-right:auto!important;margin-left:0!important;background:var(--surface)!important;color:var(--fg)!important;border-radius:18px 18px 18px 4px!important;border:1px solid var(--border)!important;box-shadow:0 2px 8px color-mix(in srgb, var(--shadow-ink) 5%, transparent)!important;text-align:left}
.message-bubble.client .message-bubble-meta{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:3px}
.message-bubble.client .message-bubble-meta strong{color:var(--fg)!important;font-size:11px;font-weight:700}
.message-bubble.client .message-bubble-meta time{color:var(--muted)!important;font-size:10px}
.message-bubble.client p{color:var(--fg)!important;margin:0;line-height:1.55;font-size:13.5px}
.message-bubble.client .message-attachment-link{background:var(--surface-2)!important;color:var(--fg)!important;border-color:var(--border-strong)!important}
.message-bubble.client .message-attachment-image-link{background:var(--surface-2)!important;border-color:var(--border-strong)!important;color:var(--fg)!important}
.message-attachment-image-link{display:inline-flex;flex-direction:column;gap:6px;max-width:min(100%,260px);margin-top:8px;padding:6px;border-radius:12px;border:1px solid color-mix(in srgb, var(--shadow-ink) 10%, transparent);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.message-attachment-image-link:hover{transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in srgb, var(--shadow-ink) 10%, transparent)}
.message-attachment-thumb{width:100%;max-height:180px;object-fit:cover;border-radius:8px;display:block}
.message-attachment-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 4px}
.message-attachment-link{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-top:8px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;font-size:12px;font-weight:700;text-decoration:none;overflow-wrap:anywhere;transition:transform .15s ease}
.message-attachment-link:hover{transform:translateY(-1px)}
.message-upload-status{margin:8px 0 10px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:6px;transition:all .2s ease}
.message-upload-status[hidden]{display:none!important}
.message-upload-status.is-complete{background:var(--success-bg);border-color:var(--success-line)}
.message-upload-status.is-complete .message-upload-label{color:var(--success)}
.message-upload-status.is-complete .message-upload-bar{background:var(--success)}
.message-upload-status.is-error{background:var(--danger-bg);border-color:var(--danger-line)}
.message-upload-status.is-error .message-upload-label{color:var(--danger)}
.message-upload-info{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.message-upload-label{font-weight:600;color:var(--ink,var(--fg));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-upload-cancel{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;transition:all .15s ease}
.message-upload-cancel:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.message-upload-track{width:100%;height:5px;background:var(--border);border-radius:999px;overflow:hidden}
.message-upload-bar{height:100%;background:var(--primary,var(--primary));border-radius:999px;transition:width .18s ease}
.message-send-error{margin:0;color:var(--red);font-size:12px}
.message-send-error[hidden]{display:none}
.admin-user-profile-card .admin-user-avatar{flex:0 0 64px;width:64px;height:64px;min-width:64px;min-height:64px;max-width:64px;max-height:64px;aspect-ratio:1/1;border-radius:50%!important;align-self:flex-start;margin-top:2px}
.admin-edit-dialog-heading{align-items:flex-start}
.admin-edit-dialog .dialog-close-btn{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--fg);font-size:22px;font-weight:400;line-height:1;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.admin-edit-dialog .dialog-close-btn:hover{background:var(--night);border-color:var(--night);color:var(--on-dark);transform:rotate(90deg)}
.admin-edit-dialog .dialog-close-btn:focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 35%, transparent);outline-offset:2px}
.header-message-wrap{position:relative}
.header-message-menu{width:min(360px,calc(100vw - 24px));max-height:min(440px,calc(100vh - 90px));overflow:auto;padding:8px;z-index:120}
.header-message-menu .menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 12px}
.header-message-item{display:grid!important;gap:3px!important;padding:10px!important;border-radius:10px!important;text-decoration:none!important}
.header-message-item:hover{background:var(--surface-2)!important}
.header-message-item strong{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:1.35}
.header-message-item small{display:block!important;margin:0!important;color:var(--muted);font-size:11px!important;line-height:1.4;overflow-wrap:anywhere}
.header-message-status{padding:2px 6px;border-radius:20px;background:var(--surface-2);color:var(--muted);font-size:9px;font-weight:700}
.header-message-empty{margin:0;padding:12px;font-size:12px}
.header-message-all{font-size:12px!important;font-weight:750!important}
@keyframes admin-nav-reveal{from{opacity:.25;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.message-compose-actions{display:flex;align-items:center;gap:10px;min-width:0}
.message-attach-button{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;margin:0!important;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.message-attach-button:hover{background:var(--night);border-color:var(--night);color:var(--on-dark);transform:translateY(-1px)}
.message-attach-button:focus-within{outline:3px solid color-mix(in srgb, var(--primary) 25%, transparent);outline-offset:2px}
.message-attach-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.message-file-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;border:0!important}
.message-file-name{min-width:0;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.message-compose-spacer{flex:1 1 auto}
.message-compose-actions>button[type=submit]{flex:0 0 auto;min-width:140px;margin:0}
.client-message-compose .message-compose-actions>button[type=submit]{min-height:42px}
.client-message-compose .message-compose-actions>button[type=submit]{margin-left:auto}
.client-order-request-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.client-order-request-actions p{margin:4px 0 0;font-size:13px}
.client-request-dialog{width:min(540px,calc(100vw - 28px));max-width:none;padding:0;border:0;border-radius:18px;background:transparent;color:var(--ink)}
.client-request-dialog::backdrop{background:rgba(12,14,26,.65);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%)}
.client-request-dialog-card{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 70px color-mix(in srgb, var(--shadow-ink) 24%, transparent)}
.client-request-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.client-request-dialog-heading h2{margin:4px 0}
.client-request-dialog-heading p{margin:0}
.client-request-dialog form{display:grid;gap:10px}
.client-request-dialog textarea{width:100%;min-height:120px}
.client-request-close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:23px;cursor:pointer;transition:transform .16s,background .16s,color .16s}
.client-request-close:hover{transform:rotate(90deg);background:var(--night);color:var(--on-dark)}
.client-request-decision{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.admin-orders-page{display:grid;gap:16px}
.admin-orders-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.admin-orders-stats .card{display:grid;gap:6px;margin:0;padding:18px}
.admin-orders-stats span,.admin-order-facts span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.admin-orders-stats strong{font-size:26px}
.admin-orders-search{display:grid;gap:8px;margin:0}
.admin-orders-search label{font-size:12px;font-weight:750}
.admin-orders-search>div{display:flex;gap:8px;flex-wrap:wrap}
.admin-orders-search input{flex:1;min-width:220px}
.admin-order-detail,.admin-orders-list{margin:0;min-width:0}
.admin-order-detail .dashboard-section-title{align-items:flex-start}
.admin-order-detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-order-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.admin-order-facts>div{display:grid;gap:6px;min-width:0;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.admin-order-facts strong,.admin-order-facts small{overflow-wrap:anywhere}
.admin-order-facts small{color:var(--muted)}
.admin-order-description{padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.admin-order-progress,.admin-order-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.admin-order-progress h3,.admin-order-section h3{margin:0 0 12px}
.admin-order-milestones{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:14px}
.admin-order-milestones>div{display:grid;gap:6px;padding:12px;border:1px solid var(--border);border-radius:11px}
.admin-order-milestones small,.admin-order-event time{color:var(--muted);font-size:11px}
.admin-order-activity{display:grid;gap:8px}
.admin-order-event{padding:12px;border:1px solid var(--border);border-radius:11px}
.admin-order-event.is-request{border-left:3px solid var(--warning);background:var(--surface)}
.admin-order-event>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-order-event time{display:block;margin-top:4px}
.admin-order-event p{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-order-reason{max-width:240px;margin-top:4px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:850px){.admin-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.admin-orders-stats{grid-template-columns:1fr}.admin-order-facts{grid-template-columns:1fr}.client-order-request-actions{align-items:flex-start}.client-request-dialog-card{padding:18px}}
.message-file-input:focus-visible+.message-file-name{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:480px){.message-compose-actions{gap:7px}.message-attach-button{flex-basis:40px;width:40px;height:40px}.message-compose-actions>button[type=submit]{min-width:112px;padding-inline:12px}.message-file-name{font-size:10px}}
@media(max-width:600px){.header-message-menu{right:-52px}.admin-edit-dialog .dialog-close-btn{flex-basis:38px;width:38px;height:38px}}
.pill-orange{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-line)}
.admin-user-profile-card{display:grid;gap:18px;padding:24px clamp(18px,2.4vw,32px)}
.admin-user-profile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.admin-user-identity{display:flex;align-items:flex-start;gap:16px;min-width:0}
.admin-user-avatar{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border:2px solid var(--border);border-radius:50%;object-fit:cover;background:var(--surface-2);color:var(--ink);font-size:24px;font-weight:750}
.admin-user-profile-heading{min-width:0}
.admin-user-profile-heading h2{margin:0;font-size:clamp(20px,2vw,26px);letter-spacing:-.025em}
.admin-user-profile-heading>p{margin:4px 0 0;overflow-wrap:anywhere}
.admin-user-statuses{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.admin-user-joined{font-size:12px}
.admin-user-profile-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;margin:0;padding:2px 0}
.admin-user-profile-details>div{min-width:0;padding:0}
.admin-user-profile-details dd{line-height:1.5;overflow-wrap:anywhere}
.admin-user-profile-details .admin-user-bio{grid-column:1/-1}
.admin-user-profile-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:15px;border-top:1px solid var(--border)}
.admin-user-profile-actions form{margin:0}
@media(max-width:980px){.admin-user-profile-details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.admin-user-profile-card{gap:14px;padding:18px}.admin-user-identity{gap:12px}.admin-user-avatar{flex-basis:52px;width:52px;height:52px;font-size:20px}.admin-user-profile-details{grid-template-columns:minmax(0,1fr);gap:12px}.admin-user-profile-details .admin-user-bio{grid-column:auto}.admin-user-profile-actions>*{max-width:100%}}
.client-message-card{display:flex;align-items:center;justify-content:space-between;gap:18px}
.client-message-card h2{margin:5px 0;font-size:18px}
.client-message-card p{margin:0}
.client-message-drawer-backdrop{position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end;background:color-mix(in srgb, var(--shadow-ink) 42%, transparent);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.client-message-drawer-backdrop.is-open{opacity:1;visibility:visible}
.client-message-drawer-panel{display:flex;flex-direction:column;gap:16px;width:min(520px,100%);height:100%;padding:24px;background:var(--surface);box-shadow:-16px 0 48px color-mix(in srgb, var(--shadow-ink) 20%, transparent);transform:translateX(100%);transition:transform .24s ease;box-sizing:border-box}
.client-message-drawer-backdrop.is-open .client-message-drawer-panel{transform:translateX(0)}
.client-message-drawer-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.client-message-drawer-heading h2{margin:5px 0;font-size:19px}.client-message-drawer-heading p{margin:0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.client-message-drawer-close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink);font-size:24px;cursor:pointer}
.client-message-drawer-panel .client-message-thread{flex:1;min-height:0;max-height:none;margin:0;overflow-y:auto;padding:2px 2px 8px}
.client-message-drawer-panel .client-message-compose{padding-top:14px;border-top:1px solid var(--border)}
.client-message-drawer-panel .client-message-compose textarea{min-height:92px;resize:vertical}
.client-message-drawer-open{overflow:hidden}
@media(max-width:600px){.client-message-card{align-items:flex-start;flex-direction:column}.client-message-card>.btn{width:100%}.client-message-drawer-panel{padding:18px 16px}}
.notification-center-card{padding:22px}
.notification-center-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.notification-center-heading h1{margin:4px 0;font-size:24px}
.notification-center-heading p{margin:0}
.notification-center-heading form{margin:0}
.notification-center-heading .btn{white-space:nowrap}
.notif-subject-link{color:var(--ink);text-decoration:none}
.notif-subject-link:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){.notification-center-card{padding:16px}.notification-center-heading{align-items:flex-start}.notification-center-heading form,.notification-center-heading .btn{width:100%}}
.admin-shell{height:100vh;height:100dvh;min-height:0;overflow:hidden;align-items:stretch}
.admin-shell>.sidebar{position:sticky;top:0;width:var(--sidebar-w);min-width:var(--sidebar-w);flex:0 0 var(--sidebar-w);height:100vh;height:100dvh;min-height:0;overflow:hidden;align-self:flex-start}
.admin-shell>.sidebar>.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain!important}
.admin-shell>.app-main{height:100vh;height:100dvh;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.client-message-compose .message-compose-actions{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-width:0}
.client-message-compose .message-compose-actions .message-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-message-compose .message-compose-actions>button[type=submit]{justify-self:end;margin:0;min-width:140px}
@media(max-width:600px){.client-message-compose .message-compose-actions{grid-template-columns:42px minmax(0,1fr) auto;gap:7px}.client-message-compose .message-compose-actions>button[type=submit]{min-width:0;padding-inline:13px}}
.marketplace-timeline-card{margin:0!important}
.marketplace-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:20px;position:relative}
.marketplace-timeline:before{content:"";position:absolute;top:15px;left:12.5%;right:12.5%;height:3px;background:var(--border);z-index:0}
.marketplace-timeline-step{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:7px;min-width:0;text-align:center}
.marketplace-timeline-dot{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted);font-size:12px;font-weight:800}
.marketplace-timeline-step strong{font-size:12px;overflow-wrap:anywhere}.marketplace-timeline-step small{font-size:10px;color:var(--muted);text-align:center}
.marketplace-timeline-step.is-done .marketplace-timeline-dot,.marketplace-timeline-step.is-current .marketplace-timeline-dot{border-color:var(--primary);background:var(--primary);color:var(--on-dark)}
.marketplace-timeline-step.is-current strong{color:var(--primary)}
.client-order-acceptance{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;padding:16px;margin:12px 0 18px;border:1px solid var(--primary-200);border-radius:14px;background:var(--primary-50)}
.client-order-acceptance>div>strong{font-size:15px}.client-order-acceptance p{margin:5px 0 0}.client-order-acceptance-form{display:grid;gap:7px}.client-order-acceptance-form label{font-size:12px;font-weight:700}.client-order-acceptance-form textarea{min-height:58px}.client-order-acceptance-form .form-actions{display:flex;gap:8px;flex-wrap:wrap}
.client-portal-main .marketplace-timeline{margin-top:22px}.client-portal-main .marketplace-timeline:before{top:15px}
@media(max-width:680px){.client-order-acceptance{grid-template-columns:minmax(0,1fr)}.client-order-acceptance .form-actions>*{flex:1}}

/* Tight dashboard flow: keep the navigation permanently pinned while only its menu items scroll. */
@media(min-width:961px){
  body.workspace-shell{position:relative;width:100%;max-width:100%;overflow-x:hidden}
  .workspace-shell > .sidebar,
  .app-shell.workspace-shell > .sidebar{position:fixed!important;top:0!important;bottom:0!important;left:0!important;width:var(--sidebar-w)!important;min-width:var(--sidebar-w)!important;max-width:var(--sidebar-w)!important;flex:0 0 var(--sidebar-w)!important;height:100vh!important;height:100dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;z-index:70!important;box-sizing:border-box!important}
  .workspace-shell > .sidebar > .side-nav,
  .app-shell.workspace-shell > .sidebar > .side-nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important}
  .workspace-shell > .sidebar > .side-plan,
  .app-shell.workspace-shell > .sidebar > .side-plan{flex:0 0 auto!important}
  .workspace-shell > .app-main,
  .app-shell.workspace-shell > .app-main{position:relative!important;margin-left:var(--sidebar-w)!important;width:calc(100% - var(--sidebar-w))!important;min-width:0!important;max-width:calc(100% - var(--sidebar-w))!important;flex:1 1 auto!important}
}

/* Minimal Glassmorphism Effects across App, Website, Admin & Client Portal */
.glass-effect, .card.glass-card, .client-tracking-card.glass-effect {
  background: color-mix(in srgb, var(--surface) 82%, transparent)!important;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent)!important;
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 2px 8px -1px color-mix(in srgb, var(--shadow-ink) 3%, transparent)!important;
}
.app-topbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent)!important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent)!important;
}
.client-tracking-header {
  background: color-mix(in srgb, var(--surface) 85%, transparent)!important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent)!important;
}

.project-workflow-content>.card{grid-column:auto!important;grid-row:auto!important;align-self:start}
.project-detail-page>.project-summary-card,.project-detail-page>.project-timeline-card,.project-detail-page>.project-tracking-card,.project-detail-page>.project-requirements-card,.project-detail-page>.project-milestones-card,.project-detail-page>.project-payment-reviews,.project-detail-page>.project-edit-card,.project-detail-page>.project-danger-card{grid-row:auto}
.client-request-dialog{width:min(560px,calc(100vw - 28px));max-width:none;max-height:min(88vh,820px);padding:0;border:0!important;outline:0!important;border-radius:20px;background:transparent;color:var(--ink);overflow:visible;box-shadow:none}
.client-request-dialog::backdrop{background:rgba(12,14,26,.65);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%)}
.client-request-dialog-card{max-height:min(88vh,820px);overflow:auto;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 70px color-mix(in srgb, var(--shadow-ink) 24%, transparent)}
.client-request-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.client-request-dialog-heading h2{margin:4px 0}.client-request-dialog-heading p{margin:0;max-width:440px}
.client-request-close{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:23px;line-height:1;cursor:pointer;transition:background .16s ease,transform .16s ease,box-shadow .16s ease}
.client-request-close:hover{background:var(--primary-50);transform:rotate(90deg);box-shadow:0 4px 14px color-mix(in srgb, var(--shadow-ink) 12%, transparent)}
.client-request-dialog form{display:grid;gap:10px}.client-request-dialog form label{font-weight:700}.client-request-dialog form textarea{min-height:120px}.client-request-dialog .form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:6px}
#action-items .portal-review-item:first-of-type{margin-top:10px!important}
#action-items>p.muted:last-child{padding:12px 14px;background:var(--surface-2);border-radius:10px}
.message-bubble{height:auto!important;min-height:0!important;flex:0 0 auto;align-content:start}.message-bubble p{min-height:0!important;margin:4px 0 0!important}
.message-thread-items{min-height:0!important;flex:1 1 auto}
.message-inbox-layout{align-items:stretch!important}.message-inbox-card{align-self:stretch!important}
.live-update-banner{position:fixed;z-index:400;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 12px 8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 10px 32px color-mix(in srgb, var(--shadow-ink) 18%, transparent);font-size:13px;font-weight:700}
.live-update-banner .live-banner-btn,.live-update-banner button:not(.live-banner-dismiss){border:0;border-radius:999px;background:var(--primary);color:var(--on-dark);padding:6px 13px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s ease}
.live-update-banner .live-banner-btn:hover,.live-update-banner button:not(.live-banner-dismiss):hover{opacity:.9}
.live-update-banner .live-banner-dismiss{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;padding:4px 6px;border-radius:50%;cursor:pointer;transition:all .15s ease}
.live-update-banner .live-banner-dismiss:hover{background:color-mix(in srgb, var(--shadow-ink) 6%, transparent);color:var(--ink)}
@media(max-width:720px){.client-request-dialog-card{padding:18px}.client-request-dialog .form-actions>*{flex:1}.order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.live-update-banner{max-width:calc(100vw - 24px);width:max-content;white-space:normal}}
.client-latest-update{display:grid;gap:8px;margin:0!important;padding:15px 18px!important;border-left:3px solid var(--primary)!important}.client-latest-update>div{display:flex;justify-content:space-between;align-items:center;gap:12px}.client-latest-update time{color:var(--muted);font-size:11px;white-space:nowrap}.client-latest-update p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.message-heading-actions{display:flex;align-items:center;gap:8px}.message-conversation-list>input[type=search]{width:100%;margin-bottom:8px}.message-unread-filter{display:flex;align-items:center;gap:7px;margin:3px 0 10px;color:var(--muted);font-size:12px}.message-conversation[hidden]{display:none!important}.message-reply-form select[data-quick-reply]{max-width:260px;padding:9px 11px;font-size:12px}
@media(max-width:760px){.workspace-shell>.sidebar{position:fixed;height:100dvh}.workspace-shell>.sidebar>.side-nav{overflow-y:auto!important}}
.notif-panel{width:min(410px,calc(100vw - 20px));max-width:410px;padding:10px;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 48px color-mix(in srgb, var(--shadow-ink) 18%, transparent)}
.notif-panel .notif-entries{display:grid;gap:5px}
.notif-panel .notif-entry{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:stretch;gap:4px;min-height:58px;padding:5px;border:1px solid transparent;border-radius:12px;transition:background .16s ease,border-color .16s ease}
.notif-panel .notif-entry:not(:last-child){border-bottom-color:var(--border)}
.notif-panel .notif-entry:hover{background:var(--surface-2);border-color:var(--border)}
.notif-panel .notif-entry.notif-unread{background:var(--surface-2);border-color:var(--primary-100)}
.notif-panel .notif-item{display:grid;grid-template-columns:10px minmax(0,1fr);align-items:start;gap:9px;min-width:0;padding:6px 7px;text-decoration:none}
.notif-panel .notif-item>span:last-child{display:grid;gap:2px;min-width:0}
.notif-panel .notif-item .notif-dot{margin-top:5px}
.notif-panel .notif-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35}
.notif-panel .notif-item small{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.35}
.notif-panel .notif-item small:nth-of-type(1){display:block;-webkit-line-clamp:unset;overflow:hidden;white-space:nowrap}
.notif-state-button{display:grid;place-items:center;align-self:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--muted);opacity:0;cursor:pointer;transition:opacity .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.notif-entry:hover .notif-state-button,.notif-entry:focus-within .notif-state-button{opacity:1}
.notif-state-button:hover{border-color:var(--border);background:var(--surface);color:var(--primary)}
.notif-state-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notif-menu-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 8px 4px;border-top:1px solid var(--border)}
.notif-menu-footer form{margin:0}.notif-menu-footer button{white-space:nowrap}
@keyframes request-dialog-enter{from{opacity:0;transform:translateY(8px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.client-request-dialog[open] .client-request-dialog-card{animation:request-dialog-enter .17s cubic-bezier(.2,.8,.2,1) both}
.client-request-dialog[open]::backdrop{animation:request-dialog-enter .15s ease-out both}
/* Modern Full-Page Split Inbox Layout for Workspace Messages */
body:has(.message-inbox-page:not(.is-drawer)) {
  overflow-y: hidden !important;
}
body:has(.message-inbox-page:not(.is-drawer)) .app-content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 18px 14px !important;
  height: calc(100vh - 66px) !important;
  height: calc(100dvh - 66px) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.message-inbox-page:not(.is-drawer) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.message-inbox-heading {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 10px !important;
}
.message-inbox-heading h1 {
  margin: 2px 0 0 !important;
  font-size: 21px !important;
  letter-spacing: -0.02em !important;
}
.message-inbox-heading p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}
.message-inbox-layout {
  flex: 1 1 auto !important;
  height: calc(100% - 58px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;
  gap: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--shadow-ink) 5%, transparent) !important;
  overflow: hidden !important;
}
.message-drawer-document .message-inbox-layout {
  height: calc(100% - 50px) !important;
  grid-template-columns: 1fr !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.message-conversation-list {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid var(--border) !important;
  background: var(--surface) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.message-list-header {
  flex: 0 0 auto !important;
  padding: 14px 16px 10px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.message-list-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
}
.message-list-heading h2 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
.message-search-wrap {
  position: relative !important;
  width: 100% !important;
}
.message-search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: var(--muted) !important;
  stroke-width: 2 !important;
  pointer-events: none !important;
}
.message-search-wrap input[type=search] {
  width: 100% !important;
  padding-left: 32px !important;
  height: 36px !important;
  font-size: 12.5px !important;
  border-radius: 9px !important;
  background: var(--surface-2) !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
}
.message-search-wrap input[type=search]:focus {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
}
.message-unread-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin: 0 !important;
}
.message-conversation-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.message-conversation {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.message-conversation:hover {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.message-conversation.is-active {
  background: var(--primary-50) !important;
  border-color: var(--primary-100) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 8%, transparent) !important;
}
.message-conversation-avatar {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--primary-50, var(--primary-100)) !important;
  color: var(--primary, var(--primary)) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
.message-conversation.is-active .message-conversation-avatar {
  background: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
}
.message-conversation-copy {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.message-conversation-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.message-conversation-top strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.message-conversation-top time {
  font-size: 10px !important;
  color: var(--muted) !important;
  flex-shrink: 0 !important;
}
.message-conversation-sub {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  opacity: 0.8 !important;
}
.message-conversation-preview {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}
.message-unread-count {
  display: grid !important;
  place-items: center !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
}
.message-inbox-card {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.message-thread-heading {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 20px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}
.message-thread-heading-main {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}
.message-back-to-list-btn {
  display: none !important;
  background: none !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  color: var(--ink) !important;
}
.message-thread-avatar {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--primary-50, var(--primary-100)) !important;
  color: var(--primary, var(--primary)) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}
.message-thread-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.message-thread-info h2 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.message-thread-info p {
  margin: 0 !important;
  font-size: 11.5px !important;
  color: var(--muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.message-project-name {
  color: var(--primary, var(--primary)) !important;
  font-weight: 700 !important;
}
.message-thread-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.message-thread-items {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
  background: var(--surface) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.message-reply-form {
  flex: 0 0 auto !important;
  padding: 12px 20px 16px !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}
.message-reply-input-wrap textarea {
  width: 100% !important;
  min-height: 60px !important;
  max-height: 130px !important;
  padding: 11px 13px !important;
  font-size: 13px !important;
  border-radius: 11px !important;
  resize: vertical !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-sizing: border-box !important;
}
.message-reply-input-wrap textarea:focus {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
}
.message-drawer-selector-wrap {
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.message-drawer-selector-wrap select {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
}
@media (max-width: 820px) {
  body:has(.message-inbox-page:not(.is-drawer)) {
    overflow-y: auto !important;
  }
  body:has(.message-inbox-page:not(.is-drawer)) .app-content {
    height: auto !important;
    padding: 10px !important;
  }
  .message-inbox-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 580px !important;
  }
  .message-thread-items {
    min-height: 380px !important;
    max-height: 55vh !important;
  }
}

/* Compact header popovers: keep the full panel visible and send users to the complete inbox. */
.notif-panel,.header-message-menu{box-sizing:border-box!important;width:min(420px,calc(100vw - 24px))!important;min-width:0!important;height:auto!important;max-height:min(540px,calc(100dvh - 84px))!important;overflow:hidden!important;display:flex;flex-direction:column;padding:10px!important;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 48px color-mix(in srgb, var(--shadow-ink) 18%, transparent)}
.notif-panel[hidden],.header-message-menu[hidden]{display:none!important}
.notif-panel .notif-menu-head,.header-message-menu .menu-head{flex:none}
.notif-panel .notif-entries,.header-message-menu .header-message-entries{flex:1 1 auto;min-height:0;max-height:380px;overflow-y:auto!important;overscroll-behavior:contain;padding:4px 2px 6px;scrollbar-width:thin}
.notif-panel .notif-entries::-webkit-scrollbar,.header-message-menu .header-message-entries::-webkit-scrollbar{width:5px}
.notif-panel .notif-entries::-webkit-scrollbar-thumb,.header-message-menu .header-message-entries::-webkit-scrollbar-thumb{background:var(--border,var(--border-strong));border-radius:99px}
.notif-panel .notif-entries{display:grid;align-content:start;gap:4px}
.notif-panel .notif-entry{min-height:0;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.notif-panel .notif-entry.notif-unread{background:var(--primary-50);border-color:var(--primary-100)}
.notif-panel .notif-entry:not(:last-child){border-bottom:1px solid var(--border)}
.notif-panel .notif-item{min-height:0;padding:5px 6px;grid-template-columns:8px minmax(0,1fr);gap:7px}
.notif-panel .notif-item strong{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}
.notif-panel .notif-item small:nth-of-type(1){white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}
.notif-panel .notif-item small{font-size:10px;line-height:1.25}
.notif-panel .notif-menu-footer,.header-message-menu>.menu-sep,.header-message-menu>.header-message-all{flex:none}
.header-message-menu .header-message-entries{display:grid;align-content:start;gap:4px}
.header-message-menu .header-message-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:4px;min-width:0;padding:3px;border:1px solid var(--border);border-radius:11px;background:var(--surface);transition:background .15s ease,border-color .15s ease}
.header-message-menu .header-message-row.message-unread{background:var(--surface);border-color:var(--primary-200)}
.header-message-menu .header-message-item{display:grid;gap:2px;min-width:0;padding:6px 7px;border:0;border-radius:8px;background:transparent}
.header-message-menu .header-message-item:hover{background:var(--surface-2)}
.header-message-menu .header-message-row.message-unread .header-message-item:hover{background:rgba(238,242,255,.7)}
.header-message-menu .header-message-row.message-unread strong{color:var(--ink);font-weight:700}
.header-message-menu .header-message-row.message-unread .notif-heading-count{margin-left:6px;background:var(--primary,var(--primary));color:var(--on-dark);font-size:10px;padding:1px 6px;border-radius:999px;font-weight:700;display:inline-block;line-height:1.3}
.header-message-menu .header-message-item strong,.header-message-menu .header-message-item small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:anywhere}
.header-message-menu .header-message-empty{margin:0;padding:12px 10px;text-align:center}
.header-message-menu .message-state-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--muted,var(--muted));cursor:pointer;opacity:0;transition:opacity .15s ease,background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.header-message-row:hover .message-state-button,.header-message-row:focus-within .message-state-button,.header-message-row.message-unread .message-state-button{opacity:1}
.header-message-menu .message-state-button:hover{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary,var(--primary));transform:scale(1.06)}
.header-message-menu .message-state-button[data-read="0"]{color:var(--success)}
.header-message-menu .message-state-button[data-read="0"]:hover{background:var(--success-bg);border-color:var(--success-line);color:var(--success)}
.header-message-menu .message-state-button svg{width:15px;height:15px;display:block}
.search-suggestions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid var(--border);color:var(--muted)}
.search-suggestions small{flex-basis:100%;font-size:11px}
.search-suggestions button{border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);padding:5px 9px;font:inherit;font-size:11px;cursor:pointer}
.search-suggestions button:hover{border-color:var(--primary);color:var(--primary)}
@media(max-width:760px){.admin-shell>.sidebar{position:fixed;width:min(300px,88vw);min-width:0;flex-basis:min(300px,88vw);transform:translateX(-102%)}body.nav-open.admin-shell .sidebar{transform:none}.notif-panel,.header-message-menu{width:min(420px,calc(100vw - 16px))!important;max-height:calc(100dvh - 72px)!important}.notif-state-button,.message-state-button{opacity:1}}


/* Keep notification actions visible; let only the notification list scroll. */
.notif-panel{overflow:hidden!important}
.notif-panel>.menu-sep{display:none!important}
.notif-panel>.notif-menu-footer{display:flex!important;flex:0 0 auto!important;visibility:visible!important;position:sticky;bottom:0;z-index:2;background:var(--surface);border-top:1px solid var(--border)}
.header-message-menu>.menu-sep{display:none!important}

/* Keep the admin rail and its brand from collapsing in the desktop header. */
@media(min-width:961px){
  body.admin-shell{position:relative;width:100%;max-width:100%;overflow:hidden!important}
  .admin-shell>.sidebar{position:fixed!important;inset:0 auto 0 0;width:264px!important;min-width:264px!important;max-width:264px!important;flex:0 0 264px!important;padding:18px 14px 16px!important;box-sizing:border-box}
  .admin-shell>.app-main{position:relative;margin-left:264px!important;width:calc(100% - 264px)!important;min-width:0;max-width:calc(100% - 264px);height:100vh;height:100dvh;flex:0 0 calc(100% - 264px);overflow-y:auto;overflow-x:hidden;padding-top:68px}
  .admin-shell>.app-main>.app-topbar{position:fixed!important;inset:0 0 auto 264px;height:68px;min-height:68px;padding-top:8px;padding-bottom:8px;z-index:100}
  .admin-shell>.sidebar>.brand{min-height:48px;padding:6px 8px;box-sizing:border-box}
  .admin-shell>.sidebar>.side-nav{width:100%;padding:4px 0 12px;margin:0;box-sizing:border-box}
  .admin-shell>.sidebar>.side-nav .nav-group-toggle{padding-left:12px;padding-right:12px}
  .admin-shell>.sidebar>.side-admin{width:100%;min-height:42px;margin:0;box-sizing:border-box}
}
.admin-shell>.sidebar>.brand{width:100%;min-width:0;flex:0 0 auto}
.admin-shell>.sidebar>.brand .brand-logo-wordmark{display:block;width:132px;max-width:calc(100% - 66px);height:34px;object-fit:contain;flex:0 1 132px}
.admin-shell>.sidebar>.brand .pill{flex:0 0 auto;white-space:nowrap}
.admin-shell>.app-main>.app-topbar{min-width:0;width:100%}

/* Website-management cards use a real grid, not the shared masonry flow. */
.admin-content .website-settings-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important;grid-auto-rows:max-content!important;gap:18px!important}
.admin-content .website-settings-grid>.card,.admin-content .website-settings-grid>section.card{align-self:start!important;height:auto!important;min-height:0!important;margin:0!important;padding:22px!important;box-sizing:border-box!important}
.admin-content .website-settings-grid .card-grid{align-content:start;grid-auto-rows:max-content}
.admin-content .website-settings-grid .form-grid{align-items:start}
@media(max-width:760px){.admin-content .website-settings-grid{grid-template-columns:minmax(0,1fr)!important}.admin-content .website-settings-grid>.card,.admin-content .website-settings-grid>section.card{padding:18px!important}}

/* Keep the admin header in the same scroll container as its page content.
   Sticky positioning survives the admin's nested scrolling layout and reserves
   its own space, so content cannot slide underneath the bar. */
.admin-shell>.app-main>.app-topbar{
  position:sticky!important;
  inset:auto!important;
  top:0!important;
  z-index:120!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:68px!important;
  padding:10px clamp(18px,2.6vw,36px)!important;
  margin:0!important;
}
@media(min-width:961px){
  .admin-shell>.app-main{padding-top:0!important}
}
@media(max-width:760px){
  .admin-shell>.app-main>.app-topbar{min-height:64px!important;padding:8px 12px!important}
}

/* Preserve the account/profile control when the admin header is width-constrained. */
.admin-shell>.app-main>.app-topbar{box-sizing:border-box!important;gap:clamp(8px,1.2vw,18px)!important}
.admin-shell>.app-main>.app-topbar>.topbar-search{flex:1 1 280px;min-width:120px;margin-left:auto}
.admin-shell>.app-main>.app-topbar>.topbar-right{flex:0 0 auto;flex-wrap:nowrap!important;gap:clamp(6px,.8vw,12px);min-width:max-content;margin-left:0}
.admin-shell>.app-main>.app-topbar>.topbar-right>.profile-wrap:last-child{display:block!important;visibility:visible!important;flex:0 0 auto;opacity:1}
.admin-shell>.app-main>.app-topbar .profile-btn{display:flex!important;visibility:visible!important;flex:0 0 auto;opacity:1}
.notif-menu-footer button:disabled,.notif-menu-footer .btn:disabled{opacity:.55;cursor:not-allowed}


/* Keep website-management cards inset and flowing continuously within their columns. */
.admin-content .card-grid.website-settings-grid.retraak-independent-columns{width:calc(100% - 28px)!important;max-width:1560px;margin:0 auto!important;box-sizing:border-box}
.admin-content .website-settings-grid.retraak-independent-columns>.retraak-card-column{display:flex;flex-direction:column;gap:18px;min-width:0;align-self:start}
.admin-content .website-settings-grid.retraak-independent-columns .retraak-card-column>.card{width:100%;min-width:0;margin:0!important;padding:22px!important;box-sizing:border-box}
@media(max-width:760px){.admin-content .card-grid.website-settings-grid.retraak-independent-columns{width:calc(100% - 24px)!important;margin-inline:auto!important}.admin-content .website-settings-grid.retraak-independent-columns .retraak-card-column>.card{padding:18px!important}}

/* Mobile notification and message popovers stay inside the screen and keep all actions reachable. */
@media(max-width:760px){
  .notif-panel,.header-message-menu{position:fixed!important;top:calc(env(safe-area-inset-top,0px) + 70px)!important;right:8px!important;left:auto!important;width:min(420px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 82px)!important;z-index:500!important}
  .notif-panel .notif-entries,.header-message-menu .header-message-entries{min-width:0}
  .notif-panel .notif-item,.header-message-menu .header-message-item{min-width:0}
}
@media(max-width:420px){
  .notif-panel,.header-message-menu{right:6px!important;width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;padding:8px!important}
  .notif-panel .notif-menu-footer{gap:6px;padding-inline:5px}
  .notif-panel .notif-menu-footer>a,.notif-panel .notif-menu-footer .btn{font-size:11px}
}


/* Keep notification actions visible when the mobile popover reaches its height limit. */
@media(max-width:760px){
  .notif-panel>.menu-sep,.notif-panel>.notif-menu-footer{display:flex!important;visibility:visible!important;flex:none!important}
  .notif-panel>.notif-menu-footer{position:sticky;bottom:0;z-index:1;background:var(--surface);padding-top:9px;padding-bottom:7px}
  .notif-panel>.notif-menu-footer form{display:block!important;flex:none!important;margin-left:auto!important}
  .notif-panel>.notif-menu-footer button{display:inline-flex!important;visibility:visible!important;white-space:nowrap}
}


/* Notification dropdown: stays inside the viewport, scrolls when long */
.notif-panel{width:min(380px,calc(100vw - 24px));min-width:0;max-width:calc(100vw - 24px);max-height:min(520px,calc(100vh - 90px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.notif-item{min-width:0;overflow-wrap:anywhere}
.notif-item>*{min-width:0}
@media (max-width:640px){.notif-panel{position:fixed;left:12px;right:12px;top:64px;width:auto;max-width:none}}


/* ==========================================================================
   Mobile Form Fields Auto-Zoom Fix (iOS Safari / WebKit)
   Eliminates viewport auto-zoom when tapping inputs, selects, and textareas
   ========================================================================== */
@media screen and (max-width: 899px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-control,
  .input,
  .auth-native-form input,
  .sb-auth-box input,
  .topbar-search input[type="search"],
  .client-message-compose textarea,
  .client-message-compose input,
  .message-reply-form textarea,
  .message-reply-form input,
  input.retraak-modern-calendar-input,
  .flatpickr-input,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   Full-Screen Mobile Messaging with Distinct Close Cross Button
   ========================================================================== */
@media screen and (max-width: 768px) {
  body.client-message-drawer-open,
  body.message-drawer-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Client Portal Messaging Drawer */
  .client-message-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    background: var(--surface) !important;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }

  .client-message-drawer-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .client-message-drawer-panel {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom)) 16px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .client-message-drawer-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 0 14px !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }

  .client-message-drawer-heading h2 {
    font-size: 18px !important;
    margin: 2px 0 !important;
    line-height: 1.25 !important;
  }

  .client-message-drawer-heading p {
    font-size: 12px !important;
    margin: 0 !important;
    color: var(--muted) !important;
  }

  .client-message-drawer-close {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    background: var(--surface-2, var(--surface-2)) !important;
    border: 1px solid var(--border, var(--border)) !important;
    color: var(--ink, var(--ink)) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 6%, transparent) !important;
    transition: background .15s ease, transform .15s ease !important;
  }

  .client-message-drawer-close:hover,
  .client-message-drawer-close:active {
    background: var(--border) !important;
    transform: scale(1.05) !important;
  }

  .client-message-drawer-panel .client-message-thread {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 2px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .client-message-drawer-panel .client-message-compose {
    flex-shrink: 0 !important;
    padding: 12px 0 max(8px, env(safe-area-inset-bottom)) 0 !important;
    border-top: 1px solid var(--border) !important;
    background: var(--surface) !important;
  }

  .client-message-drawer-panel .client-message-compose textarea {
    min-height: 48px !important;
    max-height: 110px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
  }

  /* Workspace Dashboard Message Drawer (app_footer.php iframe) */
  .message-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    z-index: 999999 !important;
    background: var(--surface) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .message-drawer-panel {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .message-drawer-close {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top, 10px)) !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    border: 1px solid var(--border, var(--border)) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: var(--ink, var(--ink)) !important;
    cursor: pointer !important;
    z-index: 1000 !important;
  }
}

/* ==========================================================================
   Client Tracking Dashboard Responsiveness
   ========================================================================== */
@media screen and (max-width: 850px) {
  .track-wrap {
    padding: 0 12px 24px !important;
    margin: 12px auto !important;
  }

  .client-portal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .client-portal-sidebar {
    position: static !important;
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }

  .client-portal-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding: 6px 0 2px !important;
    scrollbar-width: none !important;
  }

  .client-portal-nav::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  .client-portal-nav a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    padding: 7px 14px !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: var(--surface-2, var(--surface-2)) !important;
    color: var(--ink, var(--ink)) !important;
    border: 1px solid var(--border, var(--border)) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all .15s ease !important;
  }

  .client-portal-nav a:hover,
  .client-portal-nav a.is-active {
    background: var(--night) !important;
    color: var(--on-dark) !important;
    border-color: var(--night) !important;
  }

  .client-portal-nav a b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9999px !important;
    background: var(--primary, var(--primary)) !important;
    color: var(--on-dark) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .client-portal-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .client-portal-stats article {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }

  .client-portal-stats article strong {
    font-size: 24px !important;
    text-align: right !important;
  }

  .client-portal-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 4px 0 10px !important;
  }

  .client-portal-hero h1 {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    margin: 4px 0 !important;
  }

  .client-portal-main > .card {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  /* Table responsiveness in portal */
  #project-plan table,
  #client-invoices table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Order Timeline - Connected 4-Step Horizontal Progress Stepper */
.marketplace-timeline,
.client-portal-main .marketplace-timeline {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-top: 20px !important;
  position: relative !important;
  padding: 0 !important;
}

.marketplace-timeline::before,
.client-portal-main .marketplace-timeline::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 15px !important;
  left: 12.5% !important;
  right: 12.5% !important;
  height: 3px !important;
  width: auto !important;
  background: var(--border, var(--border)) !important;
  z-index: 0 !important;
}

.marketplace-timeline-step {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0 !important;
  text-align: center !important;
}

.marketplace-timeline-dot {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 2px solid var(--border, var(--border)) !important;
  border-radius: 50% !important;
  background: var(--surface) !important;
  color: var(--muted, var(--muted)) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 3px var(--surface) !important;
}

.marketplace-timeline-step.is-done .marketplace-timeline-dot,
.marketplace-timeline-step.is-current .marketplace-timeline-dot {
  border-color: var(--primary, var(--primary)) !important;
  background: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
}

.marketplace-timeline-step strong {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  color: var(--ink, var(--ink)) !important;
}

.marketplace-timeline-step.is-current strong {
  color: var(--primary, var(--primary)) !important;
}

.marketplace-timeline-step small {
  font-size: 10px !important;
  color: var(--muted, var(--muted)) !important;
  text-align: center !important;
}

@media screen and (max-width: 680px) {
  .marketplace-timeline,
  .client-portal-main .marketplace-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin-top: 16px !important;
    padding: 0 !important;
  }

  .marketplace-timeline::before,
  .client-portal-main .marketplace-timeline::before {
    top: 13px !important;
    left: 12.5% !important;
    right: 12.5% !important;
    height: 2px !important;
  }

  .marketplace-timeline-dot {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
    box-shadow: 0 0 0 2px var(--surface) !important;
  }

  .marketplace-timeline-step {
    gap: 4px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .marketplace-timeline-step strong {
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .marketplace-timeline-step small {
    font-size: 9px !important;
    text-align: center !important;
  }

  .client-order-acceptance {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .client-order-acceptance .form-actions > * {
    flex: 1 !important;
  }
}

/* ==========================================================================
   Modern Date & Time Picker (Flatpickr Retraak Theme)
   ========================================================================== */
input.retraak-modern-calendar-input,
.flatpickr-input[readonly],
input.flatpickr-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 42px 10px 14px !important;
  border: 1px solid var(--border, var(--border)) !important;
  border-radius: 12px !important;
  background: var(--card, var(--surface)) !important;
  color: var(--fg, var(--ink)) !important;
  font: 500 14px/1.45 var(--font-body), system-ui, sans-serif !important;
  box-shadow: 0 1px 2px rgba(15, 15, 25, .03) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A4AD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='4' ry='4'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
  cursor: pointer !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

input.retraak-modern-calendar-input:hover,
.flatpickr-input:hover {
  border-color: color-mix(in srgb, var(--primary, var(--primary)) 40%, var(--border, var(--border))) !important;
}

input.retraak-modern-calendar-input:focus,
.flatpickr-input:focus {
  outline: 0 !important;
  border-color: var(--primary, var(--primary)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, var(--primary)) 18%, transparent) !important;
}

.flatpickr-calendar {
  z-index: 99999 !important;
  border: 1px solid var(--border-strong, var(--border)) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(17, 18, 32, .18) !important;
  overflow: visible !important;
  font-family: var(--font-body), system-ui, -apple-system, sans-serif !important;
  background: var(--surface) !important;
  width: 326px !important;
  max-width: calc(100vw - 20px) !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important;
}

.flatpickr-calendar .flatpickr-innerContainer {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

.flatpickr-calendar .flatpickr-rContainer {
  display: block !important;
  width: 100% !important;
}

.flatpickr-calendar .flatpickr-months {
  padding: 6px 4px !important;
  display: flex !important;
  align-items: center !important;
}

.flatpickr-calendar .flatpickr-month {
  color: var(--ink, var(--ink)) !important;
  font-weight: 750 !important;
}

.flatpickr-calendar .flatpickr-current-month {
  font-size: 15px !important;
  font-weight: 750 !important;
  padding-top: 2px !important;
}

.flatpickr-calendar .flatpickr-weekdays {
  width: 100% !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}

.flatpickr-calendar .flatpickr-weekdaycontainer {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
}

.flatpickr-calendar span.flatpickr-weekday {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--muted, var(--muted)) !important;
}

.flatpickr-calendar .flatpickr-days {
  width: 100% !important;
  overflow: visible !important;
  display: block !important;
}

.flatpickr-calendar .dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  justify-items: center !important;
  gap: 2px 0 !important;
  padding: 2px 0 !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar .flatpickr-day {
  border-radius: 9px !important;
  font-weight: 650 !important;
  font-size: 13px !important;
  width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  color: var(--ink, var(--ink)) !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: all .14s ease !important;
}

.flatpickr-calendar .flatpickr-day:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  color: var(--primary, var(--primary)) !important;
  border-color: transparent !important;
}

.flatpickr-calendar .flatpickr-day.today {
  border-color: var(--primary, var(--primary)) !important;
  color: var(--primary, var(--primary)) !important;
  font-weight: 750 !important;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:hover {
  background: var(--primary, var(--primary)) !important;
  border-color: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

.flatpickr-calendar .flatpickr-time {
  height: auto !important;
  min-height: 52px !important;
  max-height: 60px !important;
  line-height: normal !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--surface-2, rgba(0, 0, 0, 0.02)) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper {
  height: 36px !important;
  width: 58px !important;
  flex: none !important;
  border-radius: 8px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border-strong, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.flatpickr-calendar .flatpickr-time input,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
  font-size: 15px !important;
  font-weight: 750 !important;
  color: var(--ink, var(--ink)) !important;
  height: 36px !important;
  line-height: 36px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--muted, #64748b) !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 0 2px !important;
}

/* ==========================================================================
   HIGH-CONTRAST MODERN CALENDAR & DUE DATE PRESET PILLS
   ========================================================================== */
.flatpickr-calendar {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 48px -8px color-mix(in srgb, var(--shadow-ink) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--shadow-ink) 5%, transparent) !important;
  width: 326px !important;
  max-width: calc(100vw - 20px) !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important;
  overflow: visible !important;
}
.flatpickr-calendar .flatpickr-month {
  color: var(--ink) !important;
  font-weight: 800 !important;
}
.flatpickr-calendar .flatpickr-current-month .cur-month {
  color: var(--ink) !important;
  font-weight: 800 !important;
}
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  color: var(--ink) !important;
  font-weight: 800 !important;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  color: var(--fg) !important;
  fill: var(--fg) !important;
}
.flatpickr-calendar .flatpickr-weekday {
  color: var(--muted) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}
.flatpickr-calendar .flatpickr-day {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  line-height: 36px !important;
}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: var(--subtle) !important;
  font-weight: 500 !important;
}
.flatpickr-calendar .flatpickr-day:hover {
  background: var(--surface-2) !important;
  color: var(--primary, var(--primary)) !important;
  border-color: var(--border) !important;
}
.flatpickr-calendar .flatpickr-day.today {
  border-color: var(--primary, var(--primary)) !important;
  color: var(--primary, var(--primary)) !important;
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  font-weight: 800 !important;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
  background: var(--primary, var(--primary)) !important;
  border-color: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

/* Due Date Quick Presets & Combo Controls */
.due-date-combo-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 4px !important;
  position: relative !important;
}
.due-preset-dropdown {
  flex: 0 0 160px !important;
  min-width: 130px !important;
  height: 42px !important;
  padding: 0 10px !important;
  border: 1px solid var(--border, var(--border-strong)) !important;
  border-radius: var(--r-sm, 10px) !important;
  background: var(--surface-2, var(--surface-2)) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink, var(--ink)) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.due-date-picker-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
.due-date-picker-wrap input {
  width: 100% !important;
  padding-right: 36px !important;
  box-sizing: border-box !important;
}
.due-calendar-icon-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary, var(--primary)) !important;
  cursor: pointer !important;
  z-index: 5 !important;
}
.due-calendar-icon-btn:hover {
  color: var(--primary) !important;
}
@media (max-width: 600px) {
  .due-date-combo-control {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .due-preset-dropdown {
    width: 100% !important;
    flex: none !important;
  }
}
.due-date-preset-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}
.due-preset-pill {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: var(--surface, var(--surface)) !important;
  color: var(--muted, var(--muted)) !important;
  border: 1px solid var(--border, var(--border-strong)) !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  line-height: 1.2 !important;
  user-select: none !important;
}
.due-preset-pill:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  border-color: var(--primary, var(--primary)) !important;
  color: var(--primary, var(--primary)) !important;
  transform: translateY(-1px) !important;
}
.due-preset-pill.active {
  background: var(--primary, var(--primary)) !important;
  border-color: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

/* ==========================================================================
   RETRAAK AI ASSISTANT STYLES
   ========================================================================== */
.retraak-ai-trigger-wrap {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}
.fx-copy .retraak-ai-trigger-wrap,
[readonly] + .retraak-ai-trigger-wrap,
[disabled] + .retraak-ai-trigger-wrap,
.no-ai + .retraak-ai-trigger-wrap {
  display: none !important;
}
.retraak-ai-trigger-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent) 0%, rgba(92, 115, 242, 0.15) 100%) !important;
  border: 1px solid rgba(92, 115, 242, 0.35) !important;
  color: var(--primary, var(--primary)) !important;
  border-radius: 9999px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.retraak-ai-trigger-btn:hover {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%) !important;
  color: var(--on-dark) !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
}
.retraak-ai-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: color-mix(in srgb, var(--shadow-ink) 60%, transparent) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}
.retraak-ai-modal-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.retraak-ai-dialog {
  background: var(--surface) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -12px color-mix(in srgb, var(--shadow-ink) 35%, transparent) !important;
  width: 100% !important;
  max-width: 620px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes modalScaleUp {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.retraak-ai-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--surface-2) !important;
}
.retraak-ai-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.retraak-ai-sparkle {
  font-size: 24px !important;
  background: linear-gradient(135deg, var(--primary), var(--primary), var(--primary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.retraak-ai-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
.retraak-ai-subtitle {
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}
.retraak-ai-close {
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--subtle) !important;
  cursor: pointer !important;
}
.retraak-ai-close:hover { color: var(--ink) !important; }
.retraak-ai-body {
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.retraak-ai-actions-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.retraak-ai-action-chip {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.retraak-ai-action-chip:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.retraak-ai-action-chip.active {
  background: linear-gradient(135deg, var(--primary), var(--primary)) !important;
  color: var(--on-dark) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}
.retraak-ai-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}
.retraak-ai-textarea:focus {
  outline: 3px solid rgba(92, 115, 242, 0.2) !important;
  border-color: var(--primary) !important;
}
.retraak-ai-upload-box {
  background: var(--surface-2) !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
.retraak-ai-upload-label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
}
.retraak-ai-file-badge {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.retraak-ai-status {
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.retraak-ai-status.alert-info {
  background: var(--primary-50) !important;
  border: 1px solid var(--primary-200) !important;
  color: var(--primary) !important;
}
.retraak-ai-status.alert-warning {
  background: var(--warning-bg) !important;
  border: 1px solid var(--warning-line) !important;
  color: var(--warning) !important;
}
.retraak-ai-status.alert-danger {
  background: var(--danger-bg) !important;
  border: 1px solid var(--danger-line) !important;
  color: var(--danger) !important;
}
.retraak-ai-result-box {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.retraak-ai-result-header {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
.retraak-ai-credit-pill {
  color: var(--primary) !important;
}
.retraak-ai-result-content {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--fg) !important;
  white-space: pre-wrap !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.retraak-ai-result-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.retraak-ai-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 24px !important;
  border-top: 1px solid var(--surface-2) !important;
  background: var(--surface) !important;
  border-radius: 0 0 20px 20px !important;
}
.retraak-ai-hint {
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* ==========================================================================
   CLIENT TRACKING PAGE ORGANIZED STICKY TOP MENUBAR
   ========================================================================== */
.client-tracking-header {
  position: sticky !important;
  top: 12px !important;
  z-index: 100 !important;
  display: block !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent) !important;
  padding: 12px 20px !important;
  margin-bottom: 22px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--shadow-ink) 8%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow-ink) 3%, transparent) !important;
  transition: top 0.2s ease, box-shadow 0.2s ease !important;
}

.client-tracking-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.client-tracking-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.client-tracking-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.client-tracking-brand-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.client-tracking-brand-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.client-tracking-ws-name {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}

.client-tracking-portal-badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  color: var(--primary, var(--primary)) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.client-tracking-order-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  flex-wrap: wrap !important;
}

.client-order-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--subtle) !important;
  text-transform: uppercase !important;
}

.client-order-name {
  font-weight: 700 !important;
  color: var(--fg) !important;
}

.client-header-status-pill {
  margin-left: 2px !important;
}

.client-tracking-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.client-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
  background: var(--surface) !important;
  transition: all 0.16s ease !important;
  white-space: nowrap !important;
}

.client-nav-pill:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-1px) !important;
}

.client-nav-pill.is-active,
.client-nav-pill.active {
  background: var(--night) !important;
  color: var(--on-dark) !important;
  border-color: var(--night) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-ink) 12%, transparent) !important;
}

.client-nav-pill.is-active svg,
.client-nav-pill.active svg {
  stroke: var(--on-dark) !important;
}

.client-tracking-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.header-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  text-decoration: none !important;
}

#client-dashboard, #project-plan, #action-items, #client-invoices, #client-messages, #client-info, #payment-report, #client-orders {
  scroll-margin-top: 86px !important;
}

@media (max-width: 960px) {
  .client-tracking-header {
    top: 6px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }
  .client-tracking-header-inner {
    gap: 12px !important;
  }
  .client-tracking-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .client-tracking-nav::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .client-tracking-header {
    top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
    padding: 10px 12px !important;
  }
  .client-tracking-header-left {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .client-tracking-header-actions {
    width: 100% !important;
  }
  .client-tracking-header-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* -------------------------------------------------------------
   Retraak Messaging: Deletion, Closed Notice & Retention Policy
   ------------------------------------------------------------- */
.message-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 3px 5px;
  margin-left: 6px;
  color: var(--muted, var(--subtle));
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  vertical-align: middle;
}
.message-delete-btn:hover,
.message-delete-btn:focus-visible {
  opacity: 1;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  outline: none;
}
.message-bubble:hover .message-delete-btn,
.client-message:hover .message-delete-btn {
  opacity: 0.9;
}

/* Chat Closed / Order Completed Notice */
.chat-closed-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 14px;
  color: var(--fg);
}
.chat-closed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--border);
  color: var(--muted);
  border-radius: 10px;
  flex-shrink: 0;
}
.chat-closed-content {
  min-width: 0;
  flex: 1;
}
.chat-closed-content strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.chat-closed-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Retention & Storage Policy Notice */
.message-retention-pill {
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.client-message-retention-note {
  margin: 10px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.client-drawer-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.client-drawer-project-name {
  font-weight: 700;
  color: var(--ink);
}
.client-drawer-client-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-100);
  padding: 2px 8px;
  border-radius: 6px;
}
.message-client-email {
  color: var(--muted);
  font-size: 13px;
}

/* Client Portal Payment Stage Grid - eliminates desktop blank space */
.client-payment-stage-grid.has-both {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: stretch;
}
.client-payment-stage-grid.single-col {
  display: block;
}
.client-payment-stage-grid > .card {
  margin: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.client-payment-stage-grid > .card form {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.client-payment-stage-grid > .card form .form-actions {
  margin-top: auto;
}
@media (max-width: 900px) {
  .client-payment-stage-grid.has-both {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-payment-stage-grid > .card {
    height: auto !important;
  }
}

/* ==========================================================================
   Retraak Pro Tools — Page Header & Action Buttons Polish
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Dancing+Script:wght@600;700&family=Great+Vibes&family=Sacramento&display=swap');

.dash-page-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}
.dash-page-header-text {
  min-width: 0;
  flex: 1 1 340px;
}
.dash-page-header-text h2 {
  margin: 4px 0 6px 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.dash-page-header-text p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 72ch;
  line-height: 1.5;
}
.dash-page-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  flex-shrink: 0;
}
.dash-page-header-actions .btn,
.contract-preview-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  transition: all 0.16s ease !important;
}
.dash-page-header-actions .btn svg,
.contract-preview-actions .btn svg {
  flex-shrink: 0;
  transition: transform 0.16s ease;
}
.dash-page-header-actions .btn:hover svg,
.contract-preview-actions .btn:hover svg {
  transform: translateY(-1px);
}

/* Document Preview Header & Toolbar */
.contract-preview-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}
.contract-preview-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.contract-preview-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary, var(--primary));
  text-transform: uppercase;
}
.contract-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Retraak E-Signature System
   ========================================================================== */
.contract-esign-card {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.contract-esign-card .form-grid {
  margin-bottom: 12px;
}
.sig-tab-buttons {
  display: flex;
  gap: 6px;
  background: var(--surface-2, var(--surface-2));
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sig-tab-btn {
  flex: 1;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sig-tab-btn:hover {
  color: var(--ink);
}
.sig-tab-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
}

.sig-style-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.sig-style-opt {
  position: relative;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: all 0.16s ease;
}
.sig-style-opt:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.sig-style-opt.active {
  border-color: var(--primary, var(--primary)) !important;
  background: color-mix(in srgb, var(--primary, var(--primary)) 5%, var(--surface)) !important;
  box-shadow: 0 0 0 1px var(--primary, var(--primary));
}
.sig-style-opt .sig-sample {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.sig-draw-container {
  position: relative;
  border: 1.5px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--shadow-ink) 2%, transparent);
}
.sig-draw-guide {
  position: absolute;
  bottom: 24px;
  left: 20px;
  right: 20px;
  border-bottom: 1px dashed var(--border-strong);
  pointer-events: none;
  display: flex;
  justify-content: space-between;
}
.sig-draw-guide span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--subtle);
  background: var(--surface);
  padding: 0 4px;
  transform: translateY(50%);
}

/* Agreement Signature Block Render Styling */
.rendered-sig-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.rendered-sig-box {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rendered-sig-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.rendered-sig-visual-area {
  min-height: 52px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1.5px solid var(--fg);
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.rendered-sig-visual-area.awaiting {
  border-bottom: 1.5px dashed var(--subtle);
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 10px;
}
.rendered-sig-script {
  font-size: 26px;
  line-height: 1;
  color: var(--primary);
  transform: rotate(-1deg);
  display: inline-block;
  user-select: none;
}
.rendered-sig-img {
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
  filter: contrast(110%);
}
.rendered-sig-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.rendered-sig-title {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 0;
}
.rendered-sig-date {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 0;
}
.rendered-sig-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  color: var(--success);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}

/* Retraak Legal Audit Certificate */
.rendered-legal-audit {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.rendered-legal-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.rendered-legal-audit-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rendered-legal-audit-hash {
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.rendered-legal-audit-statement {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

@media print {
  .dash-page-header,
  .app-sidebar,
  .app-topbar,
  .app-footer,
  .contract-preview-topbar,
  #contract-form,
  .dash-page-header-actions,
  nav,
  aside,
  header {
    display: none !important;
  }
  .card-grid {
    display: block !important;
  }
  #contract-preview-card,
  #sow-preview-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .rendered-sig-visual-area {
    border-bottom-color: #000 !important;
  }
  .rendered-sig-script {
    color: #000 !important;
  }
}

@media (max-width: 768px) {
  .rendered-sig-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .sig-style-picker {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   WORKSPACE TEAM & CUSTOM ROLES STUDIO SHIELD
   ========================================================================== */
.team-layout-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.team-top-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.65fr) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 980px) {
  .team-top-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
.team-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.team-invite-card,
.team-members-card {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.team-custom-roles-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  position: static !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}
.team-custom-roles-form-box {
  background: var(--surface-2, var(--surface-2));
  border: 1px solid var(--border, var(--border));
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.team-role-fields-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.5fr) auto !important;
  gap: 14px !important;
  align-items: flex-end !important;
}
.team-role-fields-grid > div {
  min-width: 0 !important;
}
.team-role-fields-grid input,
.team-role-fields-grid select {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
}
.team-role-submit-col .btn {
  min-height: 42px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 1100px) {
  .team-role-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .team-role-submit-col {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 640px) {
  .team-role-fields-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .team-role-submit-col {
    grid-column: auto !important;
  }
}
.team-member-role-select {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   Invoice Studio & Multi-Template Visual Miniature Cards
   ========================================================================== */
.settings-invoice-studio {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: start;
}
.settings-invoice-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  min-width: 0;
  position: relative;
}
.invoice-preview-viewport {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
  overflow: hidden;
  position: relative;
}
.invoice-rendered-pane {
  max-height: 760px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.invoice-rendered-pane::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.invoice-rendered-pane::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
.preview-tab-btn {
  transition: all 0.15s ease;
}
.preview-tab-btn.active {
  background: var(--primary, var(--primary)) !important;
  color: var(--on-dark) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 25%, transparent);
}
.invoice-tpl-mini-card {
  width: 100%;
  height: 148px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink) 4%, transparent);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  margin-bottom: 12px;
  user-select: none;
}
.invoice-tpl-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  border-color: var(--border-strong);
}
.invoice-tpl-mini-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: color-mix(in srgb, var(--shadow-ink) 78%, transparent);
  color: var(--on-dark);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.invoice-tpl-mini-card:hover .invoice-tpl-mini-badge {
  opacity: 1;
}
.invoice-card-wrapper {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.invoice-card-wrapper.is-previewed {
  border-color: var(--primary, var(--primary)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}
@media (max-width: 880px) {
  .settings-invoice-studio {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   USER PROFILE LAYOUT & CARD COLLISION PREVENTION SHIELD
   ========================================================================== */
.profile-layout-wrap {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.25fr) !important;
  gap: 24px !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.profile-layout-left,
.profile-layout-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.profile-layout-wrap .card,
.profile-avatar-card,
.profile-security-card,
.profile-details-card {
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: static !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}
.profile-phone-row {
  display: grid !important;
  grid-template-columns: minmax(108px, 0.36fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: end !important;
}
.profile-phone-row > div {
  min-width: 0 !important;
}
.profile-phone-row select,
.profile-phone-row input {
  width: 100% !important;
  min-width: 0 !important;
}
.profile-section-heading {
  border-top: 1px solid var(--line, var(--border)) !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
}
.profile-section-heading h4 {
  margin: 0 0 4px !important;
}
.profile-section-heading p {
  margin: 0 0 12px !important;
}
.profile-completion-panel {
  margin-top: 24px !important;
  padding: 18px !important;
  border: 1px solid var(--line, var(--border)) !important;
  border-radius: 14px !important;
  background: var(--surface-soft, var(--surface-2)) !important;
}
.profile-completion-panel p {
  margin: 6px 0 12px !important;
}
.profile-progress-track {
  height: 7px !important;
  border-radius: 99px !important;
  background: var(--line, var(--border)) !important;
  overflow: hidden !important;
}
.profile-progress-track span {
  display: block !important;
  height: 100% !important;
  border-radius: 99px !important;
  background: var(--primary, var(--primary)) !important;
}
@media (max-width: 880px) {
  .profile-layout-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .profile-phone-row {
    grid-template-columns: minmax(98px, 0.42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .profile-completion-panel {
    margin-top: 18px !important;
  }
}




/* Permanently hide Google reCAPTCHA v3 floating badge and wrappers (runs silently in background) */
.grecaptcha-badge,
iframe[title*="recaptcha" i],
iframe[src*="google.com/recaptcha" i],
div[style*="z-index: 2000000000"],
div[style*="z-index:2000000000"],
div[style*="2000000000"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  bottom: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Retraak Modern Custom Theme Scrollbar (Platform-wide) */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 30%, transparent) transparent;
}
*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
}
[data-theme="dark"] * {
  scrollbar-color: color-mix(in srgb, var(--primary) 40%, transparent) transparent;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 65%, transparent);
}

/* Action Info (i) Tooltips & Popovers */
.action-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary, var(--primary));
  font-size: 11px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 6px;
  padding: 0;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s, transform 0.15s;
  z-index: 100;
}
.action-info-btn:hover,
.action-info-btn:focus,
.action-info-btn:focus-within {
  background: var(--primary, var(--primary));
  color: var(--on-dark);
  transform: scale(1.08);
  z-index: 9999999 !important;
}
.action-info-btn .action-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 10px) !important;
  top: auto !important;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content !important;
  min-width: 220px !important;
  max-width: min(440px, calc(100vw - 32px)) !important;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--shadow-ink) 98%, transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--on-dark) !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  pointer-events: none;
  z-index: 99999999 !important;
  white-space: normal;
  text-align: left;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--shadow-ink) 45%, transparent), 0 2px 8px color-mix(in srgb, var(--shadow-ink) 25%, transparent);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  word-break: normal;
  overflow-wrap: break-word;
}
.action-info-btn:hover .action-tooltip,
.action-info-btn:focus .action-tooltip,
.action-info-btn:focus-within .action-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0) !important;
}

/* Tooltip Edge Guard: Left alignment (shifts box inward from right edge) */
.action-info-btn.tooltip-left .action-tooltip {
  left: auto !important;
  right: -8px !important;
  transform: translateY(4px);
}
.action-info-btn.tooltip-left:hover .action-tooltip,
.action-info-btn.tooltip-left:focus .action-tooltip,
.action-info-btn.tooltip-left:focus-within .action-tooltip {
  transform: translateY(0) !important;
}

/* Tooltip Edge Guard: Right alignment (shifts box inward from left edge) */
.action-info-btn.tooltip-right .action-tooltip {
  left: -8px !important;
  right: auto !important;
  transform: translateY(4px);
}
.action-info-btn.tooltip-right:hover .action-tooltip,
.action-info-btn.tooltip-right:focus .action-tooltip,
.action-info-btn.tooltip-right:focus-within .action-tooltip {
  transform: translateY(0) !important;
}

/* Tooltip Edge Guard: Downward alignment (when close to top edge) */
.action-info-btn.tooltip-down .action-tooltip {
  bottom: auto !important;
  top: calc(100% + 10px) !important;
  transform: translateX(-50%) translateY(-4px);
}
.action-info-btn.tooltip-down:hover .action-tooltip,
.action-info-btn.tooltip-down:focus .action-tooltip,
.action-info-btn.tooltip-down:focus-within .action-tooltip {
  transform: translateX(-50%) translateY(0) !important;
}
.action-info-btn.tooltip-down.tooltip-left .action-tooltip {
  left: auto !important;
  right: -8px !important;
  transform: translateY(-4px);
}
.action-info-btn.tooltip-down.tooltip-left:hover .action-tooltip,
.action-info-btn.tooltip-down.tooltip-left:focus .action-tooltip,
.action-info-btn.tooltip-down.tooltip-left:focus-within .action-tooltip {
  transform: translateY(0) !important;
}

/* Keep calendars anchored to their field; the shared picker owns its position. */
.flatpickr-calendar.open, .flatpickr-calendar.animate.open { z-index: 10000000 !important; }

/* Modern Branded Checkout Pop-up Modal */
.checkout-modal {
  width: min(94vw, 560px) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 70px color-mix(in srgb, var(--shadow-ink) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--on-dark) 8%, transparent) !important;
}

.checkout-modal-card {
  width: 100%;
  background: var(--surface, var(--surface));
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.checkout-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: var(--surface-2, var(--surface-2));
  border-bottom: 1px solid var(--border, var(--border));
}

.checkout-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--primary, var(--primary));
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  text-transform: uppercase;
}

.checkout-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary, var(--primary));
}

.checkout-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border, var(--border));
  background: var(--surface, var(--surface));
  color: var(--muted, var(--muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.checkout-modal-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-line);
}

.checkout-modal-body {
  padding: 22px 24px;
}

.checkout-plan-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border, var(--border));
  margin-bottom: 18px;
}

.checkout-plan-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text, var(--ink));
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.checkout-plan-subtitle {
  font-size: 13px;
  color: var(--muted, var(--muted));
  margin: 0;
  line-height: 1.45;
}

.checkout-plan-price-wrap {
  text-align: right;
  flex-shrink: 0;
}

.checkout-plan-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  font-size: 28px;
  font-weight: 800;
  color: var(--text, var(--ink));
  letter-spacing: -0.03em;
}

.checkout-price-curr {
  font-size: 18px;
  font-weight: 700;
}

.checkout-price-cycle {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, var(--muted));
}

.checkout-price-note {
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-top: 2px;
}

.checkout-features-panel {
  background: var(--surface-2, var(--surface-2));
  border: 1px solid var(--border, var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.checkout-section-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted, var(--muted));
  margin-bottom: 10px;
  text-transform: uppercase;
}

.checkout-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.checkout-features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text, var(--fg));
}

.checkout-features-list li svg {
  width: 14px;
  height: 14px;
  color: var(--success);
  flex-shrink: 0;
}

.checkout-promo-box {
  margin-bottom: 16px;
}

.checkout-promo-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border, var(--border-strong));
  border-radius: 8px;
  background: var(--surface, var(--surface));
  padding: 3px 6px 3px 12px;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-promo-input-wrap:focus-within {
  border-color: var(--primary, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.checkout-promo-input-wrap input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  flex: 1 !important;
  color: var(--text, var(--ink)) !important;
  outline: none !important;
}

.checkout-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.checkout-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2, var(--surface-2));
  border: 1px solid var(--border, var(--border));
}

.checkout-trust-item strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text, var(--ink));
}

.checkout-trust-item small {
  display: block;
  font-size: 10px;
  color: var(--muted, var(--muted));
  line-height: 1.2;
}

.checkout-primary-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 28%, transparent);
  transition: all 0.2s ease;
  cursor: pointer;
}

.checkout-primary-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}

.checkout-modal-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted, var(--muted));
  text-align: center;
}

/* Paddle Overlay Container Brand Styling */
.paddle-overlay,
.paddle-frame-overlay,
[class*="paddle-overlay"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: color-mix(in srgb, var(--shadow-ink) 72%, transparent) !important;
}


/* ===== v139 fixes: search fields & filter bars ===== */
/* Every search field gets the magnifier at the left; text always starts after it,
   even where a page sets its own padding inline. Zero specificity (:where) keeps
   component-specific rules (CRM, messages) in charge of their own styling. */
:where(input[type=search]) { padding-left: 40px !important; background-repeat: no-repeat; background-position: 13px center; }
:where(input[type=search])::-webkit-search-decoration { -webkit-appearance: none; }
.admin-filter-card { margin-bottom: 20px; padding: 14px 16px; }
.admin-filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, 190px)) auto; gap: 10px; align-items: center; margin: 0; }
.admin-filter-bar > input[type=search], .admin-filter-bar > select { width: 100%; height: 40px; min-height: 40px; margin: 0; font-size: 13px; box-sizing: border-box; }
.admin-filter-actions { display: flex; gap: 8px; align-items: center; }
.admin-filter-actions .btn { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; white-space: nowrap; }
.admin-filter-result { margin: 10px 2px 0; }
@media (max-width: 1100px) { .admin-filter-bar { grid-template-columns: 1fr 1fr 1fr; } .admin-filter-bar > input[type=search] { grid-column: 1 / -1; } .admin-filter-actions { grid-column: 1 / -1; } }
@media (max-width: 620px) { .admin-filter-bar { grid-template-columns: 1fr; } .admin-filter-actions .btn { flex: 1; justify-content: center; } }
/* Mobile header search */
.topbar-search-toggle { display: none; }
@media (max-width: 960px) {
  .topbar-search-toggle { display: inline-flex; }
  body.search-open .topbar-search { display: block !important; position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 66px); max-width: none; width: auto; margin: 0; z-index: 95; filter: drop-shadow(0 12px 28px rgba(15, 20, 40, .18)); }
  body.search-open .topbar-search input[type=search] { width: 100%; height: 46px; font-size: 16px; }
  body.search-open .topbar-search .global-search-results { max-height: 65vh; overflow-y: auto; }
}

/* ===== Sidebar cards manager (admin) ===== */
.sc-page { --sc-border: var(--border); }
.sc-heading { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sc-heading .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.sc-stats .card { padding: 15px 18px; display: flex; flex-direction: column; gap: 4px; }
.sc-stats strong { font-size: 22px; line-height: 1.2; }
.sc-stats .is-teal { color: var(--teal, var(--success)); } .sc-stats .is-brand { color: var(--primary, var(--primary)); }
.sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.sc-list { padding: 0; overflow: hidden; }
.sc-list-head { padding: 15px 18px; border-bottom: 1px solid var(--sc-border); }
.sc-list-head h2 { font-size: 16px; margin: 0 0 2px; }
.sc-empty { padding: 28px; text-align: center; }
.sc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--sc-border); cursor: pointer; transition: background .15s; outline: none; }
.sc-row:last-child { border-bottom: 0; }
.sc-row:hover { background: color-mix(in srgb, var(--primary, var(--primary)) 4%, transparent); }
.sc-row:focus-visible { box-shadow: inset 0 0 0 2px var(--primary, var(--primary)); }
.sc-row.is-selected { background: color-mix(in srgb, var(--primary, var(--primary)) 8%, transparent); box-shadow: inset 3px 0 0 var(--primary, var(--primary)); }
.sc-row.is-draft .sc-title, .sc-row.is-draft .sc-body { opacity: .7; }
.sc-pos { min-width: 36px; height: 30px; padding: 0 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; color: var(--muted, var(--muted)); background: var(--surface-2, var(--surface-2)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-main { min-width: 0; }
.sc-title { display: block; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sc-body { margin: 3px 0 7px; font-size: 12.5px; line-height: 1.45; color: var(--muted, var(--muted)); overflow-wrap: anywhere; }
.sc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-meta .pill { font-size: 11px; font-weight: 700; white-space: nowrap; }
.sc-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--sc-border); background: var(--surface-2, var(--surface-2)); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.sc-aud { font-size: 12px; font-weight: 600; color: var(--ink, var(--ink)); white-space: nowrap; }
.sc-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.sc-actions form { margin: 0; display: inline-flex; }
.sc-actions .btn { min-height: 32px; height: 32px; padding: 0 11px; font-size: 12px; white-space: nowrap; }
.sc-status { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; border: 1px solid var(--sc-border); background: var(--surface); color: var(--muted, var(--muted)); }
.sc-status .sc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sc-status.is-active { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.sc-del { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 8px; color: var(--danger); background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.22); cursor: pointer; }
.sc-del:hover { background: rgba(239,68,68,.12); }
.sc-preview-panel { position: sticky; top: 84px; padding: 16px; }
.sc-preview-head, .sc-dialog-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sc-preview-head strong, .sc-dialog-preview-head strong { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.sc-plan-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 11px; background: var(--surface-2, var(--surface-2)); margin-bottom: 12px; }
.sc-plan-tabs button { border: 0; background: transparent; border-radius: 8px; padding: 7px 4px; font-size: 12px; font-weight: 700; color: var(--muted, var(--muted)); cursor: pointer; white-space: nowrap; }
.sc-plan-tabs button.is-on { background: var(--surface); color: var(--ink, var(--ink)); box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 12%, transparent); }
/* Mock of the real (light) user workspace sidebar */
.sc-mock { border: 1px solid var(--sc-border); border-radius: 16px; background: var(--surface); padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.sc-mock-brand img { height: 26px; width: auto; display: block; }
.sc-mock-nav { display: flex; flex-direction: column; gap: 3px; }
.sc-mock-nav span { font-size: 12.5px; font-weight: 600; padding: 7px 10px; border-radius: 9px; color: var(--fg); }
.sc-mock-nav span.is-on { background: var(--night); color: var(--on-dark); }
.sc-mock-slot { min-height: 40px; }
.sc-mock-slot .side-plan { margin-top: 0; }
.sc-mock-slot .side-plan .btn { pointer-events: none; }
.sc-mock-none { font-size: 12px; color: var(--muted, var(--muted)); text-align: center; padding: 14px 8px; border: 1px dashed var(--sc-border); border-radius: 12px; }
.sc-preview-note { margin: 10px 2px 0; line-height: 1.45; min-height: 1.2em; }
/* Edit dialog with the preview beside the form */
.sc-dialog { width: min(980px, calc(100vw - 24px)) !important; max-width: none !important; max-height: min(88vh, 900px); overflow: hidden; background: var(--surface); border-radius: 16px; border: 1px solid var(--sc-border, var(--border)); padding: 0; box-shadow: 0 30px 70px color-mix(in srgb, var(--shadow-ink) 28%, transparent); }
.sc-dialog::backdrop { background: rgba(12,14,26,.65); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); }
.sc-dialog-form { display: flex; flex-direction: column; max-height: min(88vh, 900px); margin: 0; }
.sc-dialog-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.sc-dialog-fields { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sc-dialog-preview { padding: 18px; border-left: 1px solid var(--sc-border, var(--border)); background: var(--surface-2, var(--surface-2)); overflow-y: auto; }
.sc-dialog-preview select { width: auto; min-width: 0; height: 32px; min-height: 32px; padding: 0 28px 0 10px; font-size: 12px; margin: 0; }
.sc-dialog-preview p { margin: 10px 0 0; line-height: 1.45; }
.sc-mock-compact { padding: 10px; gap: 10px; }
.sc-dialog-foot { padding: 14px 24px; border-top: 1px solid var(--sc-border, var(--border)); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2, var(--surface-2)); }
@media (max-width: 1180px) {
  .sc-layout { grid-template-columns: minmax(0, 1fr); }
  .sc-preview-panel { position: static; order: -1; max-width: 520px; }
}
@media (max-width: 820px) {
  .sc-dialog-body { grid-template-columns: 1fr; overflow-y: auto; }
  .sc-dialog-fields { overflow: visible; }
  .sc-dialog-preview { order: -1; border-left: 0; border-bottom: 1px solid var(--sc-border, var(--border)); }
  .sc-dialog .form-grid.cols-2, .sc-dialog .form-grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sc-stats .card { padding: 11px 12px; } .sc-stats strong { font-size: 19px; } .sc-stats .small { font-size: 11px; }
  .sc-row { grid-template-columns: 38px minmax(0, 1fr); padding: 13px 14px; }
  .sc-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .sc-preview-panel { max-width: none; }
}
dialog.sc-dialog[open] { width: min(980px, calc(100vw - 24px)) !important; max-width: min(980px, calc(100vw - 24px)) !important; max-height: min(88vh, 900px) !important; overflow: hidden !important; }
/* Gradient card themes sit on a solid dark base so they stay readable on the light workspace sidebar */
.side-plan.side-plan-theme-dark_glass { background-color: var(--night); }
.side-plan.side-plan-theme-indigo { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 38%, transparent) 0%, color-mix(in srgb, var(--shadow-ink) 0%, transparent) 100%), var(--night); }
.side-plan.side-plan-theme-emerald { background: linear-gradient(145deg, rgba(16,185,129,.30) 0%, color-mix(in srgb, var(--shadow-ink) 0%, transparent) 100%), var(--ink); }
.side-plan.side-plan-theme-amber { background: linear-gradient(145deg, rgba(217,119,6,.32) 0%, rgba(24,20,15,0) 100%), var(--night); }
@media (max-width: 820px) {
  .sc-dialog-body { display: block; overflow-y: auto; }
  .sc-dialog-preview { position: sticky; top: 0; z-index: 3; overflow: visible; padding: 12px 14px; box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow-ink) 6%, transparent); }
  .sc-dialog-preview .sc-mock-nav, .sc-dialog-preview > p { display: none; }
  .sc-dialog-preview .sc-mock-compact { padding: 8px; }
  .sc-dialog-preview-head { margin-bottom: 8px; }
  .sc-dialog-fields { padding: 16px; }
}
@media (max-width: 820px) {
  .sc-dialog-body { display: flex; flex-direction: column; }
  .sc-dialog-preview { order: -1; flex: 0 0 auto; }
  .sc-dialog-fields { flex: 0 0 auto; }
}
.sc-stats { align-items: stretch; }
.sc-stats > .card { margin: 0 !important; transform: none !important; height: auto; }
@media (max-width: 700px) { .sc-preview-panel .sc-mock-nav span:nth-child(n+3) { display: none; } }
.price .price-billed-note { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--muted, var(--muted)); }
/* Auth pages on phones: size to the *visible* screen (iOS 100vh includes the hidden toolbar area,
   which created a blank band under the card and an unnecessary scroll). */
@media (max-width: 960px) {
  html:has(body.auth-page), body.auth-page { min-height: 0 !important; height: auto !important; }
  body.auth-page .auth-screen, body.auth-page .auth-layout { min-height: 100vh; min-height: 100svh !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  body.auth-page .auth-content { min-height: 100vh; min-height: 100svh !important; height: auto !important; max-height: none !important; overflow: visible !important;
    display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box;
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)) !important; gap: 12px; }
  body.auth-page .auth-mobile-brand { margin: 0 0 4px !important; }
  body.auth-page .auth-form-card { margin: 0 !important; }
  body.auth-page .auth-legal { margin: 2px 0 0 !important; }
}

/* ==========================================================================
   Retraak v140 UI layer
   Toasts, loading states, the sign-out overlay, one modal system with a single
   scroll container, responsive repairs and subtle motion. Appended last so it
   is authoritative without new !important wars.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.15);
  --modal-gap: 16px;
}

/* ---------- Button variants used across pages ---------- */
.btn-xs { min-height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: 9px; gap: 6px; }
.btn-xs svg { width: 14px; height: 14px; }
.btn-subtle { background: var(--surface-2); border-color: transparent; color: var(--ink); box-shadow: none; }
.btn-subtle:hover { background: var(--surface-3); border-color: transparent; color: var(--ink); box-shadow: none; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--ink); box-shadow: none; }
.btn-outline:hover { background: var(--surface); border-color: var(--night); color: var(--ink); }
.btn-teal { background: var(--teal); border-color: var(--teal); color: var(--on-dark); }
.btn-teal:hover { background: color-mix(in srgb, var(--teal) 85%, var(--shadow-ink)); border-color: transparent; color: var(--on-dark); }
.btn-danger-ghost { background: transparent; border-color: var(--danger-line); color: var(--danger); box-shadow: none; }
.btn-danger-ghost:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn-ghost { color: var(--ink); }
.btn-primary:disabled, .btn-brand:disabled, .btn-danger:disabled { color: var(--on-dark); }
.btn:focus-visible, .toast-close:focus-visible, .modal-close-btn:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px !important; }

/* ---------- Loading buttons ---------- */
@keyframes rui-spin { to { transform: rotate(360deg); } }
.btn-spinner { display: inline-block; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-right: .55em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.18em; animation: rui-spin .7s linear infinite; opacity: .9; }
.is-loading { cursor: progress !important; }
.btn.is-loading { gap: 0; transform: none !important; }
button.is-loading:disabled, input.is-loading:disabled, .btn.is-loading { opacity: .88; }
a.is-loading { pointer-events: none; }
.btn-loading-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.is-loading::before, .btn.is-loading::after,
.btn.is-busy::before, .btn.is-busy::after,
button.is-loading::before, button.is-loading::after,
button.is-busy::before, button.is-busy::after,
.btn:has(.btn-spinner)::before, .btn:has(.btn-spinner)::after,
button:has(.btn-spinner)::before, button:has(.btn-spinner)::after {
  content: none !important;
  display: none !important;
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed; z-index: 2147483000;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  pointer-events: none; margin: 0; padding: 0;
}
.toast-stack:empty { display: none; }
.toast-stack .toast {
  --tone: var(--info); --tone-bg: var(--info-bg);
  pointer-events: auto; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; align-items: start; gap: 11px;
  width: 100%; margin: 0; padding: 13px 10px 15px 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 18px 40px -16px color-mix(in srgb, var(--shadow-ink) 28%, transparent);
  font: 500 13.5px/1.45 var(--font-body); letter-spacing: 0; text-align: left;
  animation: rui-toast-in .42s var(--ease-out) both;
}
.toast-stack .toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone); }
.toast-stack .toast-ok, .toast-stack .toast[data-toast-type="success"] { --tone: var(--success); --tone-bg: var(--success-bg); }
.toast-stack .toast-err, .toast-stack .toast[data-toast-type="error"] { --tone: var(--danger); --tone-bg: var(--danger-bg); }
.toast-stack .toast-warning, .toast-stack .toast[data-toast-type="warning"] { --tone: var(--warning); --tone-bg: var(--warning-bg); }
.toast-stack .toast-info, .toast-stack .toast[data-toast-type="info"] { --tone: var(--info); --tone-bg: var(--info-bg); }
.toast-stack .toast-icon { display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.toast-stack .toast-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.toast-stack .toast-body { min-width: 0; overflow-wrap: anywhere; color: inherit; }
.toast-stack .toast-body strong, .toast-stack .toast-title { font-weight: 750; color: var(--ink); }
.toast-stack .toast-title { display: block; margin-bottom: 2px; }
.toast-stack .toast-body a { color: var(--tone); font-weight: 700; text-decoration: underline; }
.toast-stack .toast-close { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.toast-stack .toast-close:hover { background: var(--surface-2); color: var(--ink); }
.toast-stack .toast-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.toast-stack .toast-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tone); opacity: .32; transform-origin: left center; animation: rui-toast-progress var(--toast-duration, 5000ms) linear forwards; }
.toast-stack .toast.is-paused .toast-progress { animation-play-state: paused; }
.toast-stack .toast.is-paused { box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 22px 46px -16px color-mix(in srgb, var(--shadow-ink) 34%, transparent); }
.toast-stack .toast.is-leaving { animation: rui-toast-out .26s ease-in forwards; pointer-events: none; }
.toast-stack .toast-close-btn { display: none; }
@keyframes rui-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rui-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes rui-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) {
  .toast-stack { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: auto; }
  @keyframes rui-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px); } }
}
/* Inline notices that stay in the layout (not floating). */
.toast.toast-inline, .toast[data-toast-inline], .auth-notice {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; font-size: 13.5px; font-weight: 500; line-height: 1.5;
  background: var(--info-bg); color: var(--primary-700); border: 1px solid var(--info-line);
}
.toast-inline.toast-err, [data-toast-inline].toast-err { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.toast-inline.toast-ok, [data-toast-inline].toast-ok { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }

/* ---------- Full-screen overlay (sign out) ---------- */
.rui-page-overlay { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 24px; background: rgba(244, 246, 252, .74); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); opacity: 0; transition: opacity .22s ease; outline: none; }
.rui-page-overlay.is-visible { opacity: 1; }
.rui-page-overlay-card, .logout-card { display: grid; justify-items: center; gap: 8px; width: min(100%, 360px); padding: 30px 30px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 40px 90px -36px rgba(30,40,110,.35); text-align: center; transform: translateY(8px) scale(.98); transition: transform .35s var(--ease-out); }
.rui-page-overlay.is-visible .rui-page-overlay-card { transform: none; }
.rui-page-overlay-title, .logout-card h1 { margin: 10px 0 0; font: 800 18px/1.25 var(--font-heading); letter-spacing: -.02em; color: var(--ink); }
.rui-page-overlay-text, .logout-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.rui-orbit { position: relative; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 25%, var(--primary) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); animation: rui-spin .9s linear infinite; }
.rui-orbit > span { position: absolute; top: 0; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--primary); }

/* ---------- Modal system: scroll lock ---------- */
html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden !important; overscroll-behavior: none; }
html.is-scroll-locked body { padding-right: var(--scrollbar-comp, 0px); }
html.is-scroll-locked .site-header { padding-right: var(--scrollbar-comp, 0px); }

/* Native <dialog>: low-specificity defaults so component classes win. The
   dialog itself is the only scroll container unless it wraps a card. */
:where(dialog) { color: var(--ink); }
:where(dialog[open]) {
  position: fixed; inset: 0; margin: auto;
  width: min(640px, calc(100vw - 2 * var(--modal-gap))); max-width: calc(100vw - 2 * var(--modal-gap));
  height: fit-content; max-height: calc(100dvh - 2 * var(--modal-gap));
  padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 40px 100px -30px color-mix(in srgb, var(--shadow-ink) 45%, transparent);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
dialog[open] { animation: rui-dialog-in .24s var(--ease-out) both; }
dialog::backdrop { background: rgba(12, 14, 26, 0.65) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; backdrop-filter: blur(14px) saturate(180%) !important; }
dialog[open]::backdrop { animation: rui-fade-in .2s ease both; }
@keyframes rui-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes rui-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Dialogs that wrap a card: the frame clips, the card scrolls. */
.admin-edit-dialog[open], .client-request-dialog[open], .checkout-modal[open] {
  display: flex; flex-direction: column; padding: 0; border: 0; background: transparent; box-shadow: none;
  max-height: calc(100dvh - 2 * var(--modal-gap)); overflow: hidden;
}
.admin-edit-dialog[open] { width: min(720px, calc(100vw - 2 * var(--modal-gap))); }
.client-request-dialog[open] { width: min(560px, calc(100vw - 2 * var(--modal-gap))); }
.checkout-modal[open] { width: min(560px, calc(100vw - 2 * var(--modal-gap))); }
.admin-edit-dialog-card, .client-request-dialog-card, .checkout-modal-card {
  flex: 1 1 auto; min-height: 0; max-height: none !important; width: 100%; margin: 0 !important;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 40px 100px -30px color-mix(in srgb, var(--shadow-ink) 45%, transparent);
}
.admin-edit-dialog-card, .client-request-dialog-card { padding: 0 28px 24px; }
.admin-edit-dialog-card { box-shadow: 0 25px 80px -15px rgba(10, 12, 30, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.15) !important; }
.admin-edit-dialog-heading, .client-request-dialog-heading {
  position: sticky; top: 0; z-index: 3; margin: 0 0 16px; padding: 22px 0 14px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.admin-edit-dialog .dialog-close-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background-color .15s ease, color .15s ease, transform .2s ease, border-color .15s ease;
}
.admin-edit-dialog .dialog-close-btn:hover {
  background: var(--night); color: var(--on-dark); border-color: var(--night); transform: rotate(90deg);
}
.admin-edit-dialog .stack-form label {
  font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; display: block;
}
.admin-edit-dialog .stack-form select,
.admin-edit-dialog .stack-form input[type="text"],
.admin-edit-dialog .stack-form input[type="number"],
.admin-edit-dialog .stack-form input[type="email"] {
  min-height: 44px; border-radius: 12px; border: 1px solid var(--border);
  padding: 10px 14px; font-size: 14px; background: var(--surface); color: var(--ink);
  width: 100%; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-edit-dialog .stack-form select:focus,
.admin-edit-dialog .stack-form input:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.admin-edit-dialog .stack-form .hint {
  font-size: 12.5px; color: var(--muted); margin: 6px 0 18px; line-height: 1.45;
}
.admin-edit-dialog-card > :last-child, .client-request-dialog-card > :last-child { margin-bottom: 0; }
.admin-edit-dialog-card form > .form-actions:last-child, .client-request-dialog-card form > .form-actions:last-child,
.admin-edit-dialog-card > .form-actions:last-child, .client-request-dialog-card > .form-actions:last-child {
  position: sticky; bottom: -24px; z-index: 3; margin: 16px 0 -24px; padding: 14px 0 24px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 92%, transparent), var(--surface) 30%); border-top: 1px solid var(--border);
}
.checkout-modal-card { display: flex; flex-direction: column; }
.checkout-modal-header { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; }
.checkout-modal-body { flex: 1 0 auto; }

/* Overlay modals (.modal-overlay) and the shared popup. */
.modal-overlay, .popup-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: var(--modal-gap); background: rgba(12, 14, 26, 0.65) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; backdrop-filter: blur(14px) saturate(180%) !important;
  overflow: hidden; overscroll-behavior: contain; opacity: 0; transition: opacity .2s ease; animation: none;
}
.modal-overlay.is-open, .popup-overlay.is-open { opacity: 1; }
.modal-overlay[hidden], .popup-overlay[hidden] { display: none !important; }
.modal-overlay > .modal-card, .modal-overlay > .modal-card-wrap > .modal-card, .popup-overlay > .popup-card {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 2 * var(--modal-gap));
  margin: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 20px; padding: 0 26px 24px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 40px 100px -30px color-mix(in srgb, var(--shadow-ink) 45%, transparent);
  transform: translateY(12px) scale(.975); opacity: 0; transition: transform .3s var(--ease-out), opacity .2s ease; animation: none;
}
.modal-overlay > .modal-card-wrap { width: 100%; max-width: 560px; }
.modal-overlay.is-open > .modal-card, .modal-overlay.is-open > .modal-card-wrap > .modal-card, .popup-overlay.is-open > .popup-card { transform: none; opacity: 1; }
.modal-card > :first-child:not(.modal-card-head) { margin-top: 24px; }
.modal-card .modal-card-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 22px 0 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.modal-card .modal-card-head h3 { margin: 0 0 4px; }
.modal-card .modal-card-head p { margin: 0; color: var(--muted); font-size: 13px; }
.modal-card form > .form-actions:last-child, .modal-card > .modal-actions:last-child {
  position: sticky; bottom: -24px; z-index: 3; margin: 18px 0 -24px; padding: 14px 0 24px; background: var(--surface); border-top: 1px solid var(--border);
}
.modal-close-btn, .popup-close { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, transform .2s; }
.modal-close-btn:hover, .popup-close:hover { background: var(--night); color: var(--on-dark); transform: rotate(90deg); }
.popup-overlay > .popup-card { max-width: 460px; padding-top: 26px; }
.popup-overlay .popup-close { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* Confirmation dialog built by RetraakUI.confirm(). */
.rui-confirm > .modal-card { max-width: 420px; padding: 26px 26px 22px; text-align: left; }
.rui-confirm .rui-confirm-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 13px; background: var(--info-bg); color: var(--primary); }
.rui-confirm .rui-confirm-icon.is-danger { background: var(--danger-bg); color: var(--danger); }
.rui-confirm .rui-confirm-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rui-confirm h3 { margin: 0 0 6px; font-size: 18px; }
.rui-confirm .modal-sub { margin: 0; color: var(--muted); line-height: 1.55; }
.rui-confirm .modal-card > .modal-actions, .rui-confirm .modal-actions { position: static; margin: 22px 0 0; padding: 0; border: 0; background: none; }

/* Drawers: workspace message drawer and client-portal conversation. */
.message-drawer-backdrop, .client-message-drawer-backdrop {
  position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: flex-end; align-items: stretch;
  background: color-mix(in srgb, var(--shadow-ink) 42%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease; overflow: hidden; overscroll-behavior: contain;
}
.message-drawer-backdrop[hidden], .client-message-drawer-backdrop[hidden] { display: none !important; }
.message-drawer-backdrop.is-open, .client-message-drawer-backdrop.is-open { opacity: 1; }
.message-drawer-panel, .client-message-drawer-panel {
  transform: translateX(100%); transition: transform .32s var(--ease-out); will-change: transform;
  max-height: 100dvh; height: 100dvh;
}
.message-drawer-backdrop.is-open .message-drawer-panel, .client-message-drawer-backdrop.is-open .client-message-drawer-panel { transform: none; }

/* Phones: every modal becomes a bottom sheet. */
@media (max-width: 640px) {
  :root { --modal-gap: 0px; }
  :where(dialog[open]) { inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  dialog[open] { animation: rui-sheet-in .32s var(--ease-out) both; }
  .admin-edit-dialog[open], .client-request-dialog[open], .checkout-modal[open] { inset: auto 0 0 0; margin: 0; width: 100% !important; max-width: 100% !important; max-height: 92dvh; }
  .admin-edit-dialog-card, .client-request-dialog-card, .checkout-modal-card { border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .admin-edit-dialog-card, .client-request-dialog-card { padding-left: 18px; padding-right: 18px; }
  .admin-edit-dialog-heading, .client-request-dialog-heading { padding-top: 22px; }
  .admin-edit-dialog-heading::before, .client-request-dialog-heading::before, .modal-card .modal-card-head::before, .checkout-modal-header::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--border-strong);
  }
  .modal-card .modal-card-head, .checkout-modal-header { position: sticky; }
  .checkout-modal-header { padding-top: 20px; }
  .modal-overlay, .popup-overlay { align-items: flex-end; padding: 0; }
  .modal-overlay > .modal-card, .modal-overlay > .modal-card-wrap, .modal-overlay > .modal-card-wrap > .modal-card, .popup-overlay > .popup-card {
    max-width: 100% !important; width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding-left: 18px; padding-right: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(40px);
  }
  .rui-confirm > .modal-card { padding: 24px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .rui-confirm .modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .modal-card form > .form-actions:last-child, .modal-card > .modal-actions:last-child,
  .admin-edit-dialog-card form > .form-actions:last-child, .client-request-dialog-card form > .form-actions:last-child { display: flex; flex-wrap: wrap; }
  .modal-card form > .form-actions:last-child > *, .admin-edit-dialog-card form > .form-actions:last-child > *, .client-request-dialog-card form > .form-actions:last-child > * { flex: 1 1 140px; }
  .message-drawer-backdrop, .client-message-drawer-backdrop { align-items: flex-end; }
  .message-drawer-panel, .client-message-drawer-panel { width: 100% !important; max-width: 100% !important; height: 94dvh !important; max-height: 94dvh !important; margin-top: auto !important; border-radius: 22px 22px 0 0; transform: translateY(100%); overflow: hidden; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; }
}
@keyframes rui-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Pricing cards (public, billing) ---------- */
.pricing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 2.4vw, 24px); align-items: stretch; }
.price-card { min-width: 0; padding: clamp(22px, 3vw, 32px) clamp(18px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px) !important; overflow: visible; }
.price-card .price { flex-wrap: wrap; row-gap: 4px; font-size: clamp(38px, 6vw, 48px); line-height: 1; word-break: normal; }
.price-card.highlight .price, .app-content .pricing-grid .price-card .price { font-size: clamp(38px, 6vw, 48px); color: var(--ink); }
.price-card .price .price-period { white-space: nowrap; }
.price-card .price-billed-note { flex-basis: 100%; margin-left: 0 !important; }
.price-card .price-badge { position: absolute; top: 0; left: 50%; right: auto; transform: translate(-50%, -50%); max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3; }
.price-card-head { min-height: 0; padding-right: 0; }
.price-card-head h3 { overflow-wrap: anywhere; }
.price-card li > span { min-width: 0; overflow-wrap: anywhere; }
.price-card .feature-pro-pill, .price-card .feature-team-pill { white-space: nowrap; }
.price-card .price-cta, .price-card > .btn, .price-card > form .btn { min-height: 46px; height: auto; white-space: normal; text-align: center; line-height: 1.25; padding: 10px 16px; }
.price-features-toggle { display: none; }
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 26px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .price-card:hover, .price-card.highlight:hover { transform: none; }
  .price-card.highlight { order: -1; }
  .price-card .pricing-features-list, .price-card ul { margin-bottom: 18px; }
  .price-card.is-collapsible:not(.is-expanded) .pricing-features-list > li:nth-child(n+7),
  .price-card.is-collapsible:not(.is-expanded) > ul > li:nth-child(n+7) { display: none; }
  .price-features-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: -8px 0 18px; padding: 6px 0; border: 0; background: none; color: var(--primary); font: 700 13px var(--font-body); cursor: pointer; }
  .price-features-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
  .price-card.is-expanded .price-features-toggle svg { transform: rotate(180deg); }
}

/* ---------- Responsive containment ---------- */
html, body { max-width: 100%; }
.app-main, .app-content, .admin-content { min-width: 0; }
.app-content img, .app-content video, .app-content iframe { max-width: 100%; }
.table-wrap, .table-responsive, .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.app-content .card > table, .app-content section > table { display: block; max-width: 100%; overflow-x: auto; }
.app-content .table-wrap > table, .app-content .table-responsive > table { min-width: 560px; }
.app-content input, .app-content select, .app-content textarea { max-width: 100%; min-width: 0; }
.page-heading-row, .page-head, .section-head { flex-wrap: wrap; }
@media (max-width: 900px) {
  .app-topbar { gap: 8px; }
  .app-topbar .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right .btn-brand span { display: none; }
  .topbar-right .btn-brand { width: 38px; padding: 0; }
}
@media (max-width: 600px) {
  .app-content .table-responsive.dashboard-recent-projects > table { min-width: 0; }
  .form-actions { gap: 8px; }
  .form-actions > .btn { flex: 1 1 auto; }
  .page-heading-row > .btn, .page-heading-row > a.btn { width: 100%; }
}

/* ---------- Motion ---------- */
.card, .dashboard-kpi, .quick-action, .attention-item, .feature-card, .pipeline-project, .client-order-row {
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .22s ease, background-color .2s ease;
}
a.card:hover, .dashboard-kpi:hover, .quick-action:hover, a.attention-item:hover, .pipeline-project:hover, .client-order-row:hover, .card-hover-lift:hover {
  transform: translateY(-2px); box-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 4%, transparent), 0 18px 36px -18px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}
.js [data-stagger] > * { animation: rui-rise .5s var(--ease-out) backwards; }
.js [data-stagger] > *:nth-child(2) { animation-delay: .04s; } .js [data-stagger] > *:nth-child(3) { animation-delay: .08s; }
.js [data-stagger] > *:nth-child(4) { animation-delay: .12s; } .js [data-stagger] > *:nth-child(5) { animation-delay: .16s; }
.js [data-stagger] > *:nth-child(6) { animation-delay: .2s; } .js [data-stagger] > *:nth-child(n+7) { animation-delay: .24s; }
@keyframes rui-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sidebar, .app-main { transition: transform .3s var(--ease-out), box-shadow .3s ease; }
/* Skeleton loaders for async areas */
.skeleton, .skeleton-line { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; color: transparent !important; }
.skeleton-line { display: block; height: 12px; margin: 8px 0; }
.skeleton-line.w-60 { width: 60%; } .skeleton-line.w-40 { width: 40%; } .skeleton-line.w-80 { width: 80%; }
.skeleton::after, .skeleton-line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 65%, transparent), transparent); animation: rui-shimmer 1.3s ease-in-out infinite; }
@keyframes rui-shimmer { to { transform: translateX(100%); } }
.is-refreshing { position: relative; }
/* Live sync: a subtle pulse on regions that changed without a reload. */
.live-updated { animation: rui-live-pulse 1.6s ease-out 1; }
@keyframes rui-live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 34%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 0%, transparent); } 100% { box-shadow: none; } }
.nav-badge.live-updated, .notif-bell-dot.live-updated { animation: rui-badge-pop .5s var(--ease-spring) 1; }
@keyframes rui-badge-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.live-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.live-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.live-status.is-offline::before { background: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn-spinner, .rui-orbit { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  .toast-stack .toast-progress { animation-duration: var(--toast-duration, 5000ms) !important; }
  .skeleton::after, .skeleton-line::after { animation: none !important; }
}

/* ---------- Premium palette application (v140) ---------- */
html {
  background-color: var(--bg);
}
body, body.app-shell, body.workspace-shell, body.admin-shell, body.client-portal-body, .track-wrap {
  background-color: #F7F7F8 !important;
  background-image:
    radial-gradient(ellipse at 8% 5%, color-mix(in srgb, #4B3EB0 7%, transparent), transparent 38%),
    radial-gradient(ellipse at 92% 18%, rgba(20, 20, 24, .035), transparent 36%),
    radial-gradient(ellipse at 54% 92%, color-mix(in srgb, #4B3EB0 4%, transparent), transparent 42%) !important;
  background-size: 100% 100%; background-attachment: fixed; color: var(--fg);
}
body.site {
  background-color: #F8F9FD !important;
  background-image:
    radial-gradient(at 0% 0%, color-mix(in srgb, var(--primary) 14%, transparent) 0px, transparent 52%),
    radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.13) 0px, transparent 50%),
    radial-gradient(at 50% 28%, rgba(139, 92, 246, 0.09) 0px, transparent 58%),
    radial-gradient(at 85% 65%, rgba(6, 182, 212, 0.11) 0px, transparent 50%),
    radial-gradient(at 15% 75%, color-mix(in srgb, var(--primary) 11%, transparent) 0px, transparent 52%),
    radial-gradient(at 80% 98%, rgba(99, 102, 241, 0.12) 0px, transparent 50%) !important;
  background-size: 100% 100%;
  background-attachment: fixed !important;
  color: var(--fg);
}
[data-theme="dark"] body, [data-theme="dark"] body.app-shell, [data-theme="dark"] body.workspace-shell,
[data-theme="dark"] body.admin-shell, [data-theme="dark"] body.client-portal-body, [data-theme="dark"] .track-wrap {
  background-color: #101013 !important;
  background-image: radial-gradient(ellipse at 8% 5%, color-mix(in srgb, #4B3EB0 13%, transparent), transparent 40%), radial-gradient(ellipse at 92% 18%, rgba(255,255,255,.025), transparent 38%) !important;
}
@keyframes retraak-ambient-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
::selection { background: var(--primary-200); color: var(--ink); }
/* Frosted white surfaces with restrained contrast and the violet used as an accent. */
.card, .stat-card, .admin-card, .client-card, .glass, .glass-card, .glass-effect, .glass-strong, .futuristic-card, .workflow-step-card {
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.74)) !important;
  border-color: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important; backdrop-filter: blur(18px) saturate(135%) !important;
  box-shadow: 0 12px 32px -18px rgba(15,15,20,.22), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
[data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .admin-card,
[data-theme="dark"] .client-card, [data-theme="dark"] .glass, [data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-effect, [data-theme="dark"] .glass-strong, [data-theme="dark"] .futuristic-card,
[data-theme="dark"] .workflow-step-card {
  background: linear-gradient(145deg, rgba(34,34,39,.88), rgba(20,20,24,.78)) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 36px -18px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.card { box-shadow: 0 12px 32px -18px rgba(15,15,20,.22), inset 0 1px 0 rgba(255,255,255,.92) !important; }
.muted, .hint { color: var(--muted); }
h1, h2, h3, h4, h5 { color: var(--ink); }
/* Buttons stay monochrome; the brand violet marks focus and selected controls. */
.btn { background: rgba(255,255,255,.86); color: var(--ink); border: 1px solid var(--border-strong); box-shadow: 0 2px 6px rgba(15,15,20,.05); border-radius: var(--r-sm); transition: background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.btn:hover { background: #F0F0F2; color: #000; border-color: #777780; box-shadow: 0 7px 18px -10px rgba(15,15,20,.4); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 3px rgba(15,15,20,.12); }
.btn-primary, .price-card .btn-primary { background: var(--cta) !important; border-color: var(--cta) !important; color: var(--on-cta) !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent) !important; }
.btn-brand, .price-card.highlight .btn-primary, .price-card.highlight .btn { background: var(--cta) !important; border-color: var(--cta) !important; color: var(--on-cta) !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent) !important; }
.btn-primary:hover, .price-card .btn-primary:hover { background: var(--cta-hover) !important; border-color: var(--cta-hover) !important; color: var(--on-cta) !important; }
.btn-brand:hover, .price-card.highlight .btn-primary:hover, .price-card.highlight .btn:hover { background: var(--cta-hover) !important; border-color: var(--cta-hover) !important; color: var(--on-cta) !important; }
.btn-secondary, .price-card .btn-secondary { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--ink) !important; }
.btn-secondary:hover, .price-card .btn-secondary:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: var(--border); color: #000; box-shadow: none; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-dark); }
.btn-danger:hover { background: var(--danger-ink); border-color: var(--danger-ink); color: var(--on-dark); }
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #4B3EB0 !important; outline-offset: 2px !important; }
input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: #0f1016 !important; box-shadow: 0 0 0 1px #0f1016 !important; outline: none !important; }
input, select, textarea { background-color: var(--surface); color: var(--fg); border-color: var(--border-strong); }
input::placeholder, textarea::placeholder { color: var(--subtle); }
/* Pills: tinted backgrounds with AA text. */
.pill-teal, .badge-teal, .pill-success { background: var(--success-bg) !important; color: var(--success-ink) !important; border-color: var(--success-line) !important; }
.pill-amber, .badge-amber, .pill-warning { background: var(--warning-bg) !important; color: var(--warning-ink) !important; border-color: var(--warning-line) !important; }
.pill-red, .badge-red, .pill-danger { background: var(--danger-bg) !important; color: var(--danger-ink) !important; border-color: var(--danger-line) !important; }
.pill-violet, .badge-violet, .pill-primary, .badge-primary { background: var(--primary-50) !important; color: var(--primary-700) !important; border-color: var(--primary-200) !important; }
.pill-gray, .badge-gray { background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--border) !important; }
.pill-pro { background: var(--gold-soft) !important; color: color-mix(in srgb, var(--gold) 70%, var(--ink)) !important; border-color: color-mix(in srgb, var(--gold) 35%, var(--surface)) !important; }
/* Workspace chrome */
.sidebar { background: rgba(255,255,255,.82) !important; border-right: 1px solid rgba(255,255,255,.9) !important; -webkit-backdrop-filter: blur(18px) saturate(130%) !important; backdrop-filter: blur(18px) saturate(130%) !important; }
[data-theme="dark"] .sidebar { background: rgba(12,12,15,.88) !important; border-right-color: rgba(255,255,255,.10) !important; }
.admin-shell .sidebar { background: rgba(8,8,10,.92) !important; border-right: 1px solid rgba(255,255,255,.10) !important; -webkit-backdrop-filter: blur(18px) saturate(125%) !important; backdrop-filter: blur(18px) saturate(125%) !important; }
.admin-shell > .app-main, .client-portal-shell > main { background: transparent !important; }
.side-nav a { color: var(--muted); }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a.active { background: rgba(75,62,176,.08); color: var(--ink); box-shadow: inset 3px 0 0 #4B3EB0; }
.side-nav a.active .nav-icon { color: #4B3EB0; }
.nav-label { color: var(--subtle); }
.nav-badge { background: var(--primary); color: var(--on-primary); }
.app-topbar { background: rgba(255,255,255,.78) !important; border-bottom: 1px solid rgba(255,255,255,.88) !important; -webkit-backdrop-filter: blur(18px) saturate(135%) !important; backdrop-filter: blur(18px) saturate(135%) !important; }
.site-header { background: rgba(255,255,255,.82) !important; border-bottom-color: rgba(255,255,255,.88) !important; -webkit-backdrop-filter: blur(18px) saturate(135%) !important; backdrop-filter: blur(18px) saturate(135%) !important; }
.menu-panel { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-lg); }
table th { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
table td { border-color: var(--border); }
.progress { background: var(--surface-3); }
.progress > div { background: var(--primary); }
/* Dashboard hero: Executive dark-glass command card */
.dash-welcome {
  background:
    radial-gradient(ellipse 65% 85% at 92% 12%, rgba(124, 58, 237, 0.28) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 8% 90%, rgba(6, 182, 212, 0.16) 0%, transparent 58%),
    #0c0d14 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.55), inset 0 1px 1px 0 rgba(255, 255, 255, 0.18) !important;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 32px) !important;
}
.dash-welcome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.7), rgba(6, 182, 212, 0.6), transparent);
  pointer-events: none;
}
.dash-welcome::after { display: none !important; }

.dash-welcome-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.dash-welcome-text {
  flex: 1;
  min-width: 260px;
}
.dash-welcome-text h1 {
  margin: 6px 0 6px !important;
  color: #fff !important;
  font-size: clamp(24px, 2.8vw, 32px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
}
.dash-welcome-text p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  max-width: 540px;
}
.dash-welcome .welcome-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-welcome-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.dw-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pulse-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: pulseGreenLive 2s infinite ease-in-out;
}
@keyframes pulseGreenLive {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }
  50% { opacity: 0.75; transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); }
}
.dw-status-pill .pill-pro {
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.25) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
}
.dw-status-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  gap: 6px;
  align-items: center;
}
.dw-status-meta strong {
  color: #10B981;
}

/* FROSTED STAT TILES */
.dw-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 0 !important;
  border-block: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.dw-stat-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.dw-stat-tile:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(139, 92, 246, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(124, 58, 237, 0.25);
}
.dw-stat-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
  flex: 0 0 34px;
}
.dw-stat-ico svg {
  width: 17px;
  height: 17px;
}
.dw-stat-data strong {
  display: block;
  font: 800 19px/1.1 var(--font-heading) !important;
  color: #fff !important;
  letter-spacing: -0.02em;
}
.dw-stat-data span {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.welcome-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: 2px;
}
.welcome-actions .btn-primary {
  background: #fff !important;
  color: #0c0d14 !important;
  border-color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.22) !important;
  transition: all 0.2s ease !important;
}
.welcome-actions .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.32) !important;
}
.welcome-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}
.welcome-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1.5px) !important;
}

@media (max-width: 768px) {
  .dash-welcome-status { align-items: flex-start; }
  .dw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Admin login: modern executive monochrome without colored side tints or top stripe */
.auth-screen-admin .auth-showcase { background: var(--night); }
.auth-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: #0f1016 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font: 800 10.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.auth-admin-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}
.auth-form-card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 44px -10px rgba(0, 0, 0, 0.08) !important;
}
.auth-screen-admin .auth-form-card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Subtle architectural grid pattern on auth background canvas */
.auth-layout {
  background-color: #fbfbfd !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.035) 0%, transparent 70%),
    linear-gradient(to right, rgba(0, 0, 0, 0.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.026) 1px, transparent 1px) !important;
  background-size: 100% 100%, 32px 32px, 32px 32px !important;
}

/* ---------- Dashboard home: needs-attention overview ---------- */
.dash-hero { align-items: start; }
.dash-welcome { min-height: 0; padding: clamp(22px, 3vw, 34px); }
.dash-welcome::after { opacity: .28; }
.attention-card { margin: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.attention-card .dashboard-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.attention-card .dashboard-section-title h2 { margin: 0; font-size: 17px; }
.attention-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--primary-50); color: var(--primary-700); font: 800 12px/1 var(--font-body); }
.attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.attention-item { --tone: var(--primary); --tone-bg: var(--primary-50);
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--fg); text-decoration: none !important; }
.attention-item:hover { border-color: color-mix(in srgb, var(--tone) 40%, var(--border)); background: var(--surface); color: var(--fg); }
.attention-item.tone-red { --tone: var(--danger); --tone-bg: var(--danger-bg); }
.attention-item.tone-amber { --tone: var(--warning); --tone-bg: var(--warning-bg); }
.attention-item.tone-violet { --tone: var(--primary); --tone-bg: var(--primary-50); }
.attention-item.tone-teal { --tone: var(--success); --tone-bg: var(--success-bg); }
.attention-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tone-bg, var(--primary-50)); color: var(--tone, var(--primary)); }
.attention-icon.tone-teal { --tone: var(--success); --tone-bg: var(--success-bg); }
.attention-icon svg { width: 17px; height: 17px; }
.attention-copy { display: grid; gap: 2px; min-width: 0; }
.attention-copy strong { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-copy small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--tone); font-size: 12px; font-weight: 700; white-space: nowrap; }
.attention-cta svg { width: 14px; height: 14px; transition: transform .2s var(--ease-out); }
.attention-item:hover .attention-cta svg { transform: translateX(3px); }
.attention-clear { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--success-bg); border: 1px solid var(--success-line); }
.attention-clear strong { color: var(--success-ink); }
.attention-clear p { margin: 2px 0 0; }
a.dashboard-kpi { display: block; color: inherit; text-decoration: none !important; }
.setup-card.is-dismissing { opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .25s ease; }
.workspace-nav-group { margin: 2px 0; }
.workspace-shell .workspace-nav-group-toggle {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  color: var(--subtle);
  text-align: left;
  border-radius: 8px;
}
.workspace-shell .workspace-nav-group-toggle .nav-label {
  padding: 0;
  color: inherit;
  font-size: 10px;
  letter-spacing: .11em;
}
.workspace-shell .workspace-nav-group-toggle:hover,
.workspace-shell .workspace-nav-group-toggle:focus-visible,
.workspace-shell .workspace-nav-group-toggle.is-active-group {
  color: var(--ink);
  background: var(--surface-2);
}
.workspace-shell .workspace-nav-group-toggle.is-active-group .nav-label { color: var(--primary); }
.workspace-shell .workspace-nav-group-toggle .nav-chevron { color: var(--subtle); }
.workspace-shell .nav-group-items { gap: 2px; padding: 2px 0 5px; }
.workspace-shell .nav-group-items > .workspace-nav-link { min-height: 38px; }
@media (max-width: 1100px) { .dash-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .attention-item { grid-template-columns: 30px minmax(0, 1fr); }
  .attention-cta { grid-column: 2; justify-self: start; }
  .attention-copy strong, .attention-copy small { white-space: normal; }
}
.pill-blue, .pill-info, .pill-cyan, .pill-indigo { background: var(--info-bg) !important; color: var(--info-ink) !important; border-color: var(--info-line) !important; }
.pill-green, .pill-emerald, .pill-paid { background: var(--success-bg) !important; color: var(--success-ink) !important; border-color: var(--success-line) !important; }
.pill-orange, .pill-rose, .pill-pink { background: var(--warning-bg) !important; color: var(--warning-ink) !important; border-color: var(--warning-line) !important; }
.pill-muted, .pill-subtle, .pill-ghost { background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--border) !important; }

/* Client portal: hero actions and copy on phones */
@media (max-width: 600px) {
  .client-hero-quick-actions > .btn { flex: 1 1 100%; justify-content: center; }
}
/* Upgrade page */
.upgrade-card { max-width: 600px; margin: clamp(24px, 6vw, 56px) auto; padding: clamp(26px, 5vw, 42px) !important; text-align: center; }
.upgrade-card h1 { margin: 14px 0 10px; font-size: clamp(22px, 3vw, 28px); }
.upgrade-card > p { max-width: 460px; margin: 0 auto 20px; line-height: 1.6; }
.upgrade-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--gold-soft); color: color-mix(in srgb, var(--gold) 62%, var(--ink)); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--surface)); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.upgrade-features { list-style: none; display: grid; gap: 9px; max-width: 420px; margin: 0 auto 24px; padding: 16px 18px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.upgrade-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--fg); }
.upgrade-features svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--success); }
.upgrade-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .upgrade-actions > .btn { flex: 1 1 100%; } }
.side-nav a.is-locked { color: var(--subtle); }
.side-nav a.is-locked:hover { color: var(--ink); }
.side-nav a.is-locked .nav-lock { color: var(--gold); opacity: .9; }
.order-testimonial-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--gold-soft); }
.order-testimonial-cta p { margin: 2px 0 0; }

/* Logos: black artwork on light backgrounds, white artwork on dark ones (never recoloured). */
.logo-for-dark { display: none !important; }
:root[data-theme="dark"] .logo-for-light { display: none !important; }
:root[data-theme="dark"] img.logo-for-dark { display: block !important; }
.client-portal-brandbar { background: var(--night) !important; }
.auth-showcase .auth-brand { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.auth-logo-on-dark { height: 34px; width: auto; }
.menu-theme-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); font: 600 13px var(--font-body); text-align: left; cursor: pointer; }
.menu-theme-toggle:hover { background: var(--surface-2); }
.menu-theme-toggle svg { color: var(--muted); }
/* Public navigation: buttons inside the nav keep their own colours (the
   generic ".site-nav a" link colour used to paint the CTA text black). */
.site-nav a.btn { border-radius: var(--r-sm); min-height: 46px; padding: 0 18px; font-size: 15px; font-weight: 700; justify-content: center; text-align: center; }
.site-nav a.btn-primary, .site-nav a.btn-primary:hover { color: var(--on-cta) !important; background: var(--cta) !important; border-color: var(--cta) !important; }
.site-nav a.btn-secondary, .site-nav a.btn-secondary:hover { color: var(--ink) !important; background: var(--surface) !important; border-color: var(--border-strong) !important; }
.site-nav a:not(.btn):hover { background: var(--surface-2); color: var(--ink); }
.header-actions .btn-ghost { color: var(--ink); }
.nav-toggle { color: var(--ink); background: var(--surface); border: 1px solid var(--border); }
/* Pricing balance: compact feature lists, equal-height cards, CTA pinned to the bottom. */
.pricing-grid { align-items: stretch; }
.pricing-grid > .price-card { height: 100%; display: flex; flex-direction: column; }
.price-card ul, .price-card .pricing-features-list { gap: 7px !important; padding-top: 16px !important; margin-bottom: 22px !important; }
.price-card li, .price-card .pricing-features-list li { font-size: 13px !important; line-height: 1.42 !important; gap: 9px !important; padding: 1px 0 !important; color: var(--fg) !important; }
.price-card li svg, .pricing-features-list li svg { width: 15px !important; height: 15px !important; flex-basis: 15px !important; margin-top: 2px !important; color: var(--success) !important; }
.price-card .feature-pro-pill, .price-card .feature-team-pill { font-size: 9.5px !important; padding: 1px 6px !important; }
.price-card .price-cta, .price-card > .btn, .price-card > form, .price-card > .price-card-foot { margin-top: auto; }
.price-card.highlight { border-color: var(--primary) !important; box-shadow: 0 0 0 1px var(--primary), 0 20px 44px -22px color-mix(in srgb, var(--primary) 45%, transparent) !important; }
.price-card[style*="--plan-color"] { border-top-color: var(--border); }
.price-card.highlight[style*="--plan-color"] { border-top-color: var(--primary); }
@media (max-width: 600px) { .site-header .brand-logo-wordmark { height: 26px !important; max-width: 128px !important; } }
.popup-overlay .popup-image { display: block; width: 100%; max-height: 190px; object-fit: cover; margin: 0 0 21px; border-radius: var(--r-md); }
/* Badges on dark sidebar cards: readable in both themes. */
.side-plan .side-card-badge, .side-plan-card .side-card-badge, #sidebar-card-preview .side-card-badge, .sidebar .side-plan .side-card-badge,
.side-plan .side-card-badge[class*="badge-"], #sidebar-card-preview .side-card-badge[class*="badge-"] {
  background: color-mix(in srgb, var(--on-dark) 14%, transparent) !important;
  color: var(--on-dark) !important;
  border-color: color-mix(in srgb, var(--on-dark) 28%, transparent) !important;
}
/* Monochrome social icons (same source as emails: retraak_social_links()). */
.social-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.client-portal-footer .social-icons { justify-content: center; }
.social-icon-link { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); opacity: .8; transition: opacity .15s, border-color .15s, transform .2s var(--ease-out); }
.social-icon-link:hover { opacity: 1; border-color: var(--border-strong); transform: translateY(-1px); }
.social-icon-link img { width: 18px; height: 18px; display: block; }
:root[data-theme="dark"] .social-icon-link img.logo-for-dark { display: block !important; }
/* Primary buttons on dark panels invert to white so they never vanish into the panel. */
.side-plan .btn-primary, .side-plan .btn-brand, .dash-welcome .btn-primary, .auth-showcase .btn-primary, .client-portal-brandbar .btn-primary, .side-plan-card .btn-primary {
  background: var(--on-dark) !important; border-color: var(--on-dark) !important; color: var(--night) !important;
}
.side-plan .btn-primary:hover, .dash-welcome .btn-primary:hover { background: color-mix(in srgb, var(--on-dark) 88%, var(--night)) !important; color: var(--night) !important; }
:root[data-theme="dark"] .side-plan, :root[data-theme="dark"] .dash-welcome { border: 1px solid var(--border-strong); }
.footer-theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font: 600 12.5px var(--font-body); cursor: pointer; }
.footer-theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); }
/* Site footer is a dark band in both themes. */
.site-footer { background: var(--night) !important; color: color-mix(in srgb, var(--on-dark) 70%, transparent); }
.site-footer a { color: color-mix(in srgb, var(--on-dark) 78%, transparent); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer h4 { color: var(--on-dark); }
.site-footer .muted { color: color-mix(in srgb, var(--on-dark) 62%, transparent); }
.site-footer .social-icon-link { background: transparent; border-color: color-mix(in srgb, var(--on-dark) 22%, transparent); }
.site-footer .footer-theme-toggle { background: transparent; color: color-mix(in srgb, var(--on-dark) 75%, transparent); border-color: color-mix(in srgb, var(--on-dark) 22%, transparent); }
.site-footer .footer-theme-toggle:hover { color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 45%, transparent); }
:root[data-theme="dark"] .site-footer { border-top: 1px solid var(--border); }
.attention-card .dashboard-section-title { flex-direction: row !important; align-items: center !important; }
/* Recent-project rows are informational; keep their surface steady on hover. */


/* Retraak light-only UI: prevent OS preferences or legacy theme values from enabling dark surfaces. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  color-scheme: light !important;
}
:root[data-theme="dark"] {
  --bg: #F6F5F2;
  --background: #F6F5F2;
  --surface: #FFFFFF;
  --surface-2: #F9F8F6;
  --text: #202124;
  --text-primary: #202124;
  --muted: #6B7280;
  --border: #E5E7EB;
}

/* Final responsive rhythm: φ-based heading steps, compact supporting copy. */
body.app-shell, body.workspace-shell, body.admin-shell, body.client-portal-body, body.site {
  font-size: clamp(14px, calc(13.8px + .12vw), 15px);
  line-height: 1.5;
}
body.app-shell h1, body.workspace-shell h1, body.admin-shell h1, body.client-portal-body h1, body.site h1 {
  font-size: clamp(28px, calc(24px + 1vw), 37px); line-height: 1.12; text-wrap: balance;
}
body.app-shell h2, body.workspace-shell h2, body.admin-shell h2, body.client-portal-body h2, body.site h2 {
  font-size: clamp(18px, calc(17px + .36vw), 23px); line-height: 1.22; text-wrap: balance;
}
body.app-shell h3, body.workspace-shell h3, body.admin-shell h3, body.client-portal-body h3, body.site h3 {
  font-size: clamp(15px, calc(14px + .2vw), 17px); line-height: 1.28;
}
body.app-shell p, body.workspace-shell p, body.admin-shell p, body.client-portal-body p, body.site p {
  line-height: 1.52; text-wrap: pretty;
}
@media (max-width: 640px) {
  body.app-shell h1, body.workspace-shell h1, body.admin-shell h1, body.client-portal-body h1, body.site h1 { font-size: clamp(27px, 7vw, 34px); }
  body.app-shell h2, body.workspace-shell h2, body.admin-shell h2, body.client-portal-body h2, body.site h2 { font-size: clamp(18px, 5vw, 21px); }
  .dashboard-shell, .dashboard-stack { min-width: 0; }
  .dashboard-stack > .card { min-width: 0; }
}
@media (min-width: 961px) {
  body.workspace-shell { --sidebar-w: 280px; }
}
/* Inputs keep a clear keyboard focus ring without the heavy mouse-click glow. */
input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
img.avatar-img, img.profile-avatar, .dashboard-client-avatar img, .user-avatar img { border-radius: 50% !important; object-fit: cover; }
input.retraak-modern-calendar-input, input.flatpickr-input[readonly] {
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234B3EB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.flatpickr-calendar.open, .flatpickr-calendar.animate.open { animation: calendar-preview-in .2s cubic-bezier(.2,.75,.25,1) both; transform-origin: top left; }
@keyframes calendar-preview-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-overlay, .popup-overlay { transition: opacity .22s cubic-bezier(.2,.75,.25,1), backdrop-filter .22s ease; }
.modal-overlay > .modal-card, .modal-overlay > .modal-card-wrap > .modal-card, .popup-overlay > .popup-card { transition: transform .26s cubic-bezier(.2,.75,.25,1), opacity .2s ease, box-shadow .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .flatpickr-calendar.open, .flatpickr-calendar.animate.open { animation: none !important; }
  .modal-overlay, .popup-overlay, .modal-overlay > .modal-card, .modal-overlay > .modal-card-wrap > .modal-card, .popup-overlay > .popup-card { transition: none !important; }
}
/* The dashboard attention panel disappears when there is nothing to act on. */
.attention-card:not(:has(.attention-list)) { display: none !important; }
body.workspace-shell .sidebar > .brand { min-height: 50px; padding: 7px 10px; }
body.workspace-shell .sidebar .brand-logo-wordmark { height: 36px; max-width: 160px; }
body.workspace-shell .side-nav { gap: 4px; }
body.workspace-shell .side-nav a { min-height: 44px; padding-inline: 13px; gap: 12px; font-size: 15px; }
body.workspace-shell .side-nav .nav-icon { width: 22px; flex-basis: 22px; }
body.workspace-shell .side-nav .nav-icon svg { width: 19px; height: 19px; }
body.workspace-shell .workspace-nav-group { margin-block: 4px; }
body.workspace-shell .workspace-nav-group-toggle { min-height: 38px; padding-inline: 10px; }
body.workspace-shell .workspace-nav-group-toggle .nav-label { font-size: 11px; }
body.workspace-shell .nav-group-items > .workspace-nav-link { min-height: 42px; }
@media (prefers-reduced-motion: reduce) {
  body.app-shell, body.workspace-shell, body.admin-shell, body.client-portal-body, body.site { animation: none !important; }
}

/* Client portal reading order: client action and payment options stay near the top. */
.client-portal-main { gap: 14px; }
.client-portal-main .client-orders-card { order: 7; }
.client-portal-main #action-items { order: 1; }
.client-portal-main .client-payment-stage-grid { order: 2; }
.client-portal-main .client-project-overview { order: 3; }
.client-portal-main #project-plan { order: 4; }
.client-portal-main #client-invoices { order: 5; }
.client-portal-main #client-messages { order: 6; }
.client-portal-main .client-invoice-quick-actions { display: none !important; }
.client-tracking-header .header-action-btn { display: none !important; }
.client-portal-main .client-project-overview > p:first-child { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.client-portal-main .client-project-overview .marketplace-timeline { margin-block: 16px; }
.client-portal-main .client-payment-stage-grid { align-items: stretch; gap: 14px; }
.client-portal-main .client-payment-stage-grid > .card { min-width: 0; height: 100%; box-sizing: border-box; }
.client-portal-main #client-invoices > div[style*="border:1px solid"] { border-radius: 4px !important; box-shadow: none !important; }
.client-tracking-header .client-tracking-nav { min-width: 0; }
.client-portal-footer { gap: 13px; }
.client-portal-footer > .client-portal-brand-icon { display:grid; place-items:center; width:48px; height:48px; padding:4px; box-sizing:border-box; border-radius:14px; background:#fff; border:1px solid rgba(255,255,255,.9); box-shadow:0 8px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.95); }
.client-portal-footer .client-portal-brand-icon img { display:block; width:38px; height:38px; max-width:100%; object-fit:contain; }
.client-portal-footer .client-portal-social { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.client-portal-footer .client-portal-social .social-icon-link { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; opacity: 1; }
.client-portal-footer .client-portal-social .social-icon-link svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.client-portal-footer .client-portal-social .social-icon-link { background: transparent; box-shadow: none; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.client-portal-footer .client-portal-social .social-icon-link:hover,
.client-portal-footer .client-portal-social .social-icon-link:focus-visible { background: #4B3EB0; border-color: #8f83ed; color: #fff; box-shadow: 0 0 0 3px rgba(75,62,176,.24); transform: translateY(-2px); outline: none; }
.client-portal-footer .client-portal-social .social-icon-link:active { transform: translateY(0) scale(.96); }
@media (prefers-reduced-motion: reduce) { .client-portal-footer .client-portal-social .social-icon-link { transition: none; } }
@media (max-width: 850px) {
  .client-portal-main .client-payment-stage-grid { order: 2; }
  .client-tracking-header-inner { align-items: flex-start; }
  .client-tracking-nav { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
}
@media (max-width: 560px) {
  .client-portal-main { gap: 12px; }
  .client-portal-main .client-payment-stage-grid.has-both { grid-template-columns: minmax(0,1fr); }
  .client-tracking-header-inner { gap: 8px; }
  .client-tracking-nav { width: 100%; }
}

/* Refined workspace/admin navigation and vivid, glossy dashboard surfaces. */
.workspace-shell .workspace-nav-group-toggle { min-height: 34px; padding: 0 8px; }
.workspace-shell .workspace-nav-group-toggle .nav-group-label { display:flex; align-items:center; min-width:0; gap:7px; }
.workspace-shell .workspace-nav-group-toggle .nav-group-icon { width:16px; flex:0 0 16px; color:var(--primary); opacity:.88; }
.workspace-shell .workspace-nav-group-toggle .nav-group-icon svg { width:15px; height:15px; }
.workspace-shell .workspace-nav-group-toggle .nav-label { padding:0; font-size:10px; letter-spacing:.1em; }
.workspace-shell .workspace-nav-group-toggle .nav-chevron svg { width:14px; height:14px; }
.workspace-shell .nav-group-items { gap:1px; padding:1px 0 4px; }
.workspace-shell .nav-group-items > .workspace-nav-link { min-height:33px; padding:0 9px; gap:9px; border-radius:8px; font-size:12.5px; }
.workspace-shell .nav-group-items > .workspace-nav-link .nav-icon { width:18px; flex-basis:18px; }
.workspace-shell .nav-group-items > .workspace-nav-link .nav-icon svg { width:16px; height:16px; }
.workspace-shell .workspace-nav-link.active,
.admin-shell .side-nav a.active { border-left:0 !important; box-shadow:none !important; }
.workspace-shell .workspace-nav-link.active { background:linear-gradient(105deg, color-mix(in srgb, var(--primary) 15%, white), color-mix(in srgb, var(--primary) 7%, white)); color:var(--primary-700); }
.workspace-shell .workspace-nav-link.active .nav-icon { color:var(--primary); }
.workspace-shell .side-nav a .nav-icon { transition:color .18s ease, transform .18s ease; }
.workspace-shell .side-nav a:hover .nav-icon { color:var(--primary); transform:translateX(1px); }
.workspace-shell .workspace-nav-group-toggle:hover .nav-group-icon,
.workspace-shell .workspace-nav-group-toggle:focus-visible .nav-group-icon { color:var(--primary-hover); transform:translateY(-1px); }
.workspace-shell .workspace-nav-group-toggle .nav-group-icon { transition:color .18s ease, transform .18s ease; }
.workspace-shell .dashboard-kpi .kpi-ico,
.workspace-shell .attention-icon,
.workspace-shell .quick-action > span:first-child { background:transparent !important; box-shadow:none !important; }
.workspace-shell .dashboard-kpi .kpi-ico { color:var(--primary); }
.workspace-shell .dashboard-kpi .kpi-ico.red { color:#e04459; }
.workspace-shell .dashboard-kpi .kpi-ico.amber { color:#da8916; }
.workspace-shell .dashboard-kpi .kpi-ico.teal { color:#15976b; }
.workspace-shell .attention-icon { color:var(--tone, var(--primary)); }
.workspace-shell .quick-action > span:first-child { color:var(--primary); }
.workspace-shell .quick-action:hover > span:first-child { color:var(--primary-hover); transform:translateY(-1px); }
.workspace-shell .dashboard-stack > .card,
.workspace-shell .dashboard-kpi {
  background:rgba(255,255,255,.64) !important;
  border-color:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:blur(24px) saturate(165%) !important;
  backdrop-filter:blur(24px) saturate(165%) !important;
  box-shadow:0 14px 34px -20px rgba(34,28,82,.25), 0 2px 8px rgba(34,28,82,.045), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.workspace-shell .dashboard-kpi:hover,
.workspace-shell .dashboard-stack > .card.card-interactive:hover,
.admin-shell a.pilot-kpi:hover {
  border-color:color-mix(in srgb, var(--primary) 35%, white) !important;
  box-shadow:0 18px 38px -20px color-mix(in srgb, var(--primary) 38%, transparent), inset 0 1px 0 white !important;
}
.workspace-shell .kpi-ico.violet { color:#6249eb; }
.workspace-shell .kpi-ico.red { color:#e04459; }
.workspace-shell .kpi-ico.amber { color:#d98510; }
.workspace-shell .kpi-ico.teal { color:#118b63; }
.workspace-shell .chart-bar { background:linear-gradient(180deg,#8a72ff 0%,#5542d4 72%,#3f31b5 100%); box-shadow:0 6px 14px -8px rgba(75,62,176,.75); transition:filter .18s ease, transform .18s ease; }
.workspace-shell .chart-col { cursor:help; outline-offset:4px; }
.workspace-shell .chart-col:hover .chart-bar,
.workspace-shell .chart-col:focus-visible .chart-bar { filter:saturate(1.25) brightness(1.08); transform:scaleX(1.07); }
.workspace-shell .chart-col:focus-visible { outline:2px solid var(--primary); border-radius:6px; }
.workspace-shell .dashboard-client-row { border-radius:10px; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
.workspace-shell .dashboard-client-row:hover,
.workspace-shell .dashboard-client-row:focus-visible { background:color-mix(in srgb, var(--primary) 7%, white); transform:translateX(2px); box-shadow:0 5px 16px -12px color-mix(in srgb, var(--primary) 50%, transparent); outline:none; }
.site .card, .site .feature-card, .site .pricing-card, .site .glass-card {
  background:rgba(255,255,255,.68) !important;
  border-color:rgba(255,255,255,.84) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%) !important;
  backdrop-filter:blur(24px) saturate(160%) !important;
  box-shadow:0 16px 38px -22px rgba(34,28,82,.24), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
.site a.card:hover, .site .feature-card:hover, .site .pricing-card:hover {
  border-color:rgba(255,255,255,.96) !important;
  box-shadow:0 20px 42px -22px rgba(34,28,82,.32), inset 0 1px 0 white !important;
}
.admin-shell .pilot-grid-main { align-items:start; }
.admin-shell .pilot-grid-main > .card { align-self:start; }
.admin-shell .pilot-grid-main > .card > .pilot-bars { flex:0 0 auto; }
.admin-shell .pilot-grid-main > .card > .pilot-plan-split { flex:0 0 auto; min-height:0; align-content:initial; }
.admin-shell .pilot-plan-split { align-items:center; gap:15px; }
.admin-shell .pilot-legend li { min-height:30px; padding:4px 7px; margin-inline:-7px; border-radius:8px; transition:background .18s ease, transform .18s ease; cursor:help; }
.admin-shell .pilot-legend li:hover { background:color-mix(in srgb, var(--accent) 9%, var(--surface)); transform:translateX(2px); }
.admin-shell .pilot-bars .pilot-bar { cursor:help; transition:filter .18s ease, opacity .18s ease; }
.admin-shell .pilot-bars .pilot-bar:hover,
.admin-shell .pilot-bars .pilot-bar:focus { filter:brightness(1.18) saturate(1.25); }
.admin-shell .pilot-donut-seg { cursor:pointer; }
.admin-shell .pilot-kpi-value { color:color-mix(in srgb, var(--accent) 18%, var(--ink)); }
/* Workspace navigation uses black and white as its primary state; violet stays an accent. */
.workspace-shell .workspace-nav-group-toggle { color:#666671; background:transparent; }
.workspace-shell .workspace-nav-group-toggle .nav-group-icon,
.workspace-shell .workspace-nav-group-toggle .nav-chevron { color:#292930; }
.workspace-shell .workspace-nav-group-toggle .nav-label { color:#666671; }
.workspace-shell .workspace-nav-group-toggle:hover,
.workspace-shell .workspace-nav-group-toggle:focus-visible { color:#111114; background:#f1f1f3; }
.workspace-shell .workspace-nav-group-toggle.is-active-group,
.workspace-shell .workspace-nav-group-toggle.is-active-group:hover { color:#fff; background:linear-gradient(135deg,#171719,#050506); box-shadow:0 5px 14px rgba(10,10,14,.14); }
.workspace-shell .workspace-nav-group-toggle.is-active-group .nav-label,
.workspace-shell .workspace-nav-group-toggle.is-active-group .nav-group-icon,
.workspace-shell .workspace-nav-group-toggle.is-active-group .nav-chevron { color:#fff; }
.workspace-shell .workspace-nav-group-toggle:focus-visible { outline:2px solid color-mix(in srgb, var(--primary) 52%, white); outline-offset:2px; }
.workspace-shell .workspace-nav-link.active { background:linear-gradient(135deg,#171719,#050506); color:#fff; box-shadow:0 5px 14px rgba(10,10,14,.12); }
.workspace-shell .workspace-nav-link.active .nav-icon { color:#fff; }
.workspace-shell .workspace-nav-link.active:hover { background:#242428; color:#fff; }
.workspace-shell .workspace-nav-link:focus-visible { outline:2px solid color-mix(in srgb, var(--primary) 52%, white); outline-offset:2px; }
.client-payment-stage-grid #payment-report,
.client-payment-stage-grid #payment-instructions {
  border:1px solid rgba(255,255,255,.82) !important;
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(24px) saturate(165%) !important;
  backdrop-filter:blur(24px) saturate(165%) !important;
  box-shadow:0 14px 32px -22px rgba(25,20,60,.24), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
#payment-report .client-payment-report-actions {
  margin-top:18px !important;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--border) 82%, white);
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
#payment-report .client-payment-report-actions > .btn {
  min-width:148px;
  min-height:42px;
  justify-content:center;
  box-shadow:0 7px 16px -11px rgba(5,5,8,.75) !important;
}
#payment-report .client-payment-report-actions > .action-info-btn {
  width:27px;
  height:27px;
  margin:0;
  background:#fff;
  color:#35353d;
  border-color:#d7d7df;
  font-size:12px;
}
#payment-report .client-payment-report-actions > .action-info-btn:hover,
#payment-report .client-payment-report-actions > .action-info-btn:focus-visible {
  background:#171719;
  color:#fff;
  border-color:#171719;
  outline:2px solid color-mix(in srgb, var(--primary) 46%, white);
  outline-offset:2px;
}
@media (max-width:560px) {
  #payment-report .client-payment-report-actions { justify-content:stretch; }
  #payment-report .client-payment-report-actions > .btn { flex:1 1 auto; }
}

/* Ambient color stays on the page canvas, concentrated below the glass panels. */
body.app-shell, body.workspace-shell, body.admin-shell, body.site {
  background-color:#f0eef7 !important;
  background-image:
    radial-gradient(ellipse at 10% 104%, rgba(117,91,239,.15), transparent 38%),
    radial-gradient(ellipse at 88% 94%, rgba(71,159,232,.12), transparent 36%),
    radial-gradient(ellipse at 54% 116%, rgba(205,105,225,.10), transparent 42%),
    linear-gradient(180deg,#f4f3f8 0%,#f1f0f7 46%,#e9e9f3 100%) !important;
  background-attachment:fixed !important;
  background-size:100% 100% !important;
}
body.app-shell > .app-main,
body.workspace-shell > .app-main,
body.admin-shell > .app-main,
body.admin-shell .admin-content { background:transparent !important; }
body.app-shell .app-main .card,
body.workspace-shell .app-main .card,
body.workspace-shell .app-main .stat-card,
body.workspace-shell .app-main .dashboard-kpi,
body.workspace-shell .app-main .client-card,
body.admin-shell .admin-content .card,
body.site .card, body.site .feature-card, body.site .pricing-card, body.site .glass-card {
  background:rgba(255,255,255,.62) !important;
  border-color:rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter:blur(26px) saturate(155%) !important;
  backdrop-filter:blur(26px) saturate(155%) !important;
  box-shadow:0 14px 34px -24px rgba(24,24,35,.20), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
.workspace-shell .dashboard-kpi:hover,
.workspace-shell .dashboard-stack > .card.card-interactive:hover,
.admin-shell a.pilot-kpi:hover,
.admin-shell .admin-content a.pilot-kpi:focus-visible,
.site a.card:hover, .site .feature-card:hover, .site .pricing-card:hover {
  border-color:rgba(255,255,255,.96) !important;
  box-shadow:0 16px 36px -24px rgba(16,16,24,.26), inset 0 1px 0 white !important;
}
@media (max-width: 760px) {
  .workspace-shell .nav-group-items > .workspace-nav-link { min-height:36px; }
  .admin-shell .pilot-grid-main { align-items:stretch; }
  .admin-shell .pilot-grid-main > .card { align-self:stretch; }
}

/* Rate calculator panels stay level; document previews remain in view beside long forms. */
.rate-calculator-grid { align-items:stretch !important; }
.rate-calculator-grid > .rate-input-card,
.rate-calculator-grid > .rate-results-card { min-width:0; height:100%; padding:24px !important; }
.rate-input-card { display:flex; flex-direction:column; }
.rate-input-card #rate-form { flex:1; }
.rate-result-tile {
  min-width:0; padding:18px; border-radius:12px;
  background:rgba(255,255,255,.48); border:1px solid rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(16px) saturate(145%); backdrop-filter:blur(16px) saturate(145%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.rate-results-card #rate-day { color:#171719 !important; }
.rate-results-card #rate-hourly { color:#5140c2 !important; }
.rate-quote-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; border:1px solid rgba(255,255,255,.56); border-radius:8px; background:rgba(255,255,255,.34); }
.rate-quote-row > * { min-width:0; }
.sow-builder-grid, .contracts-builder-grid { align-items:start !important; }
.sow-builder-grid > .sow-editor-card, .contracts-builder-grid > .contract-editor-card { min-width:0; }
.document-preview-card {
  position:sticky; top:74px; align-self:start; min-width:0;
  max-height:calc(100vh - 90px); overflow:auto; overscroll-behavior:contain;
  padding:22px !important; scrollbar-gutter:stable;
}
.document-preview-card .contract-preview-topbar {
  position:sticky; top:-22px; z-index:3; padding:2px 0 12px;
  background:rgba(255,255,255,.84); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.message-list-empty { display:grid; justify-items:center; gap:6px; padding:32px 16px; text-align:center; color:var(--muted); }
.message-list-empty-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:4px; border:1px solid var(--border); border-radius:12px; color:var(--ink); background:rgba(255,255,255,.62); }
.message-list-empty-icon svg { width:20px; height:20px; }
.message-list-empty strong { color:var(--ink); font-size:12px; }
.message-list-empty > span:last-child { font-size:11px; line-height:1.45; }
.message-empty-state { flex:1 1 auto; align-content:center; justify-items:center; min-height:100%; padding:48px 24px; }
.message-empty-state.is-no-conversations { max-width:620px; margin:0 auto; }
.message-empty-state .message-empty-icon { width:60px; height:60px; margin-bottom:8px; border:1px solid rgba(255,255,255,.9); border-radius:18px; color:#171719; background:rgba(255,255,255,.56); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.message-empty-state .message-empty-icon svg { width:30px; height:30px; }
.message-empty-kicker { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.12em; }
.message-empty-state h2 { max-width:440px; font-size:clamp(20px,2vw,27px); letter-spacing:-.025em; }
.message-empty-state p { max-width:460px; line-height:1.65; }
.message-empty-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.message-empty-actions .btn { min-height:42px; }
@media (max-width: 1000px) {
  .document-preview-card { position:static; max-height:none; overflow:visible; }
  .document-preview-card .contract-preview-topbar { position:static; }
}
@media (max-width: 760px) {
  .rate-calculator-grid { grid-template-columns:minmax(0,1fr) !important; }
  .rate-calculator-grid > .rate-input-card, .rate-calculator-grid > .rate-results-card { height:auto; padding:18px !important; }
  .rate-result-tile { padding:14px; }
  .rate-results-card > div[style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; }
  .message-empty-state { padding:34px 18px; }
}
/* Clean, modern workspace sidebar hierarchy */
.workspace-shell .workspace-nav-group-toggle { background: transparent !important; color: var(--muted) !important; border-radius: 8px !important; transition: all .16s ease !important; }
.workspace-shell .workspace-nav-group-toggle:hover { background: color-mix(in srgb, var(--primary, #4B3EB0) 5%, transparent) !important; color: var(--fg) !important; }
.workspace-shell .workspace-nav-group-toggle.is-active-group { background: transparent !important; color: var(--fg) !important; }
.workspace-shell .workspace-nav-group-toggle .nav-group-icon { color: var(--primary) !important; opacity: 0.9 !important; }
.workspace-shell .workspace-nav-group-toggle .nav-label { color: var(--muted) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.workspace-shell .workspace-nav-group-toggle .nav-chevron { color: var(--muted) !important; opacity: 0.75 !important; }

.workspace-shell .workspace-nav-link { border-radius: 9px !important; transition: background .16s ease, color .16s ease !important; color: var(--muted) !important; font-weight: 500 !important; }
.workspace-shell .workspace-nav-link:hover { background: color-mix(in srgb, var(--primary, #4B3EB0) 6%, transparent) !important; color: var(--fg) !important; }
.workspace-shell .workspace-nav-link:hover .nav-icon { color: var(--primary, #4B3EB0) !important; }
.workspace-shell .workspace-nav-link.active,
.workspace-shell .workspace-nav-link.active:hover { background: color-mix(in srgb, var(--primary, #4B3EB0) 12%, transparent) !important; color: var(--primary, #4B3EB0) !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #4B3EB0) 24%, transparent) !important; }
.workspace-shell .workspace-nav-link.active .nav-icon,
.workspace-shell .workspace-nav-link.active:hover .nav-icon { color: var(--primary, #4B3EB0) !important; }
/* Single clean outline on focused inputs: no secondary offset box */
body :is(input, select, textarea, [contenteditable="true"]):focus,
body :is(input, select, textarea, [contenteditable="true"]):focus-visible {
  border-color: #0f1016 !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 1px #0f1016 !important;
}
body :is(button, a, [role="button"], [role="checkbox"], [role="radio"]):focus-visible {
  outline: 2px solid #0f1016 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
input[type="checkbox"], input[type="radio"] { accent-color:#171719; }

/* Keep the client portal on the same quiet canvas as the rest of the app.
   The old max-width track wrapper painted its own fixed gradient, creating a
   visible rectangular sheet behind the portal cards. */
body.site.client-portal-shell {
  background-color:#f0eef7 !important;
  background-image:
    radial-gradient(ellipse at 10% 104%, rgba(117,91,239,.15), transparent 38%),
    radial-gradient(ellipse at 88% 94%, rgba(71,159,232,.12), transparent 36%),
    radial-gradient(ellipse at 54% 116%, rgba(205,105,225,.10), transparent 42%),
    linear-gradient(180deg,#f4f3f8 0%,#f1f0f7 46%,#e9e9f3 100%) !important;
  background-attachment:fixed !important;
  background-size:100% 100% !important;
}
body.site.client-portal-shell > main,
body.site.client-portal-shell .track-wrap {
  background:transparent !important;
  background-image:none !important;
}

/* Keep dashboard chart cards aligned, with useful space for the chart and
   centered plan breakdown at every desktop width. */
.admin-shell .pilot-grid-main { align-items:stretch !important; }
.admin-shell .pilot-grid-main > .card {
  align-self:stretch !important;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.admin-shell .pilot-grid-main > .card > .pilot-bars,
.admin-shell .pilot-grid-main > .card > .pilot-plan-split { flex:1 1 auto !important; }
.admin-shell .pilot-grid-main > .card > .pilot-bars { min-height:190px; }
.admin-shell .pilot-grid-main > .card > .pilot-plan-split {
  min-height:190px !important;
  align-content:center;
  justify-content:center;
  gap:clamp(14px,2vw,28px);
}
.admin-shell .pilot-plan-split .pilot-donut { width:clamp(132px,14vw,168px); }
.admin-shell .pilot-plan-split .pilot-legend { min-width:170px; max-width:360px; }
.admin-shell .pilot-legend li { display:grid; grid-template-columns:10px minmax(0,auto) minmax(0,1fr) auto; align-items:center; gap:9px; }
.admin-shell .pilot-legend li small { white-space:nowrap; }
.admin-shell .pilot-bars .pilot-grid { stroke-dasharray:3 6; opacity:.7; }
.admin-shell .pilot-bars .pilot-bar { rx:4px; }
.admin-shell .pilot-bars .pilot-axis { fill:var(--muted); font-size:11px; }
@media (max-width:980px) {
  .admin-shell .pilot-grid-main > .card > .pilot-bars,
  .admin-shell .pilot-grid-main > .card > .pilot-plan-split { min-height:170px; }
}
@media (max-width:760px) {
  .admin-shell .pilot-grid-main > .card > .pilot-bars { min-height:180px; }
  .admin-shell .pilot-grid-main > .card > .pilot-plan-split { min-height:160px !important; }
  body.site.client-portal-shell .track-wrap { max-width:none; margin:20px auto; }
}
@media (max-width:420px) {
  .admin-shell .pilot-plan-split { gap:10px; }
  .admin-shell .pilot-plan-split .pilot-donut { width:116px; }
  .admin-shell .pilot-plan-split .pilot-legend { min-width:0; flex:1 1 140px; }
}