/* ============================================================================
   DetailOAR design system — premium, modern, fast. Token-driven so each tenant
   can re-skin via --brand. Used by the admin suite, booking flow, and pay page.
   ========================================================================== */
/* Smooth cross-fade between same-origin page loads (Chrome/Edge); ignored
   gracefully elsewhere. Combined with the cached admin shell, navigation
   no longer flashes/blanks. */
@view-transition { navigation: auto; }

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin-600-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin-700-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin-800-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --brand: #145CBD;
  --brand-ink: #FFFFFF;
  --brand-600: color-mix(in srgb, var(--brand) 84%, #041226);
  --brand-700: color-mix(in srgb, var(--brand) 68%, #030d1c);
  --brand-tint: color-mix(in srgb, var(--brand) 12%, #f3f6fa);
  --brand-tint-2: color-mix(in srgb, var(--brand) 6%, #f3f6fa);

  --bg: #EFF3F7;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --surface-2: #F1F5F9;
  --ink: #101E2C;
  --ink-2: #33465A;
  --muted: #5B6C7E;
  --muted-2: #8496A8;
  --line: #D3DDE7;
  --line-2: #E4EAF1;
  --copper: #9A4E28;
  --copper-tint: #F7ECE4;

  --ok: #15803d;     --ok-tint: #e8f6ec;
  --warn: #945000;   --warn-tint: #fdf2e3;
  --danger: #b42318; --danger-tint: #fff0ee;
  --info: #356c8d;   --info-tint: #e6eff3;
  --purple: #7c3aed; --purple-tint: #f1e9fe;

  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(13,27,42,.04);
  --shadow-sm: 0 1px 3px rgba(13,27,42,.05);
  --shadow: 0 6px 18px rgba(13,27,42,.08);
  --shadow-lg: 0 18px 50px rgba(8,20,34,.22);
  --ring: 0 0 0 4px color-mix(in srgb, var(--brand) 17%, transparent);

  --sidebar-w: 204px;
  --app-header-h: max(64px, calc(52px + env(safe-area-inset-top)));
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; font-family: var(--font); font-weight: 700; letter-spacing: -0.018em; color: var(--ink); }
h1,.display-heading { font-family: var(--font-display); letter-spacing: -.03em; }
button, input, select, textarea { font: inherit; }
/* Every interactive element has its own hover/active/focus states — the OS
   gray tap flash on Android just cheapens them. */
a, button, [role="button"], [role="link"], .chip, tr.clickable, .nav-link, label { -webkit-tap-highlight-color: transparent; }
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.hidden { display: none !important; }
.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; }
.cluster--xs { gap:6px!important; }
.cluster--sm { gap:8px!important; }
.field--flush { margin:0!important; }
.grow { flex:1; min-width:0; }
.text-danger { color:var(--danger)!important; }
.modal-body--scroll { overflow:auto; overscroll-behavior:contain; }
.m-0 { margin:0!important; }
.mt-0 { margin-top:0!important; }
.mt-2 { margin-top:2px!important; }
.mt-3 { margin-top:3px!important; }
.mt-4 { margin-top:4px!important; }
.mt-5 { margin-top:5px!important; }
.mt-6 { margin-top:6px!important; }
.mt-7 { margin-top:7px!important; }
.mt-8 { margin-top:8px!important; }
.mt-10 { margin-top:10px!important; }
.mt-12 { margin-top:12px!important; }
.mt-14 { margin-top:14px!important; }
.mt-16 { margin-top:16px!important; }
.mt-18 { margin-top:18px!important; }
.my-6 { margin-block:6px!important; }
.mb-6 { margin-bottom:6px!important; }
.mb-8 { margin-bottom:8px!important; }
.mb-10 { margin-bottom:10px!important; }
.mb-12 { margin-bottom:12px!important; }
.mb-14 { margin-bottom:14px!important; }
.mb-16 { margin-bottom:16px!important; }
.mb-18 { margin-bottom:18px!important; }
.mb-20 { margin-bottom:20px!important; }
.ml-auto { margin-left:auto!important; }
.gap-5 { gap:5px!important; }
.gap-7 { gap:7px!important; }
.gap-10 { gap:10px!important; }
.gap-12 { gap:12px!important; }
.min-w-0 { min-width:0!important; }
.overflow-auto { overflow:auto!important; overscroll-behavior:contain; }
.d-block { display:block!important; }
.cursor-pointer { cursor:pointer!important; }
.bg-subtle { background:var(--surface-2)!important; }
.text-16 { font-size:16px!important; }
.value-24 { font-size:24px!important; font-weight:800!important; }
.p-20 { padding:20px!important; }
.p-24 { padding:24px!important; }
.break-all { word-break:break-all!important; }
.break-anywhere { overflow-wrap:anywhere!important; }
.pre-wrap { white-space:pre-wrap!important; }
.min-h-120 { min-height:120px!important; }
.scroll-anchor { scroll-margin-top:20px; }
.meta-label { font-size:inherit; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.list-line { padding:8px 0; border-bottom:1px solid var(--line-2); }
.list-line--tight { padding:5px 0; border-bottom:1px solid var(--line-2); }
.list-line--compact { padding:7px 0; border-bottom:1px solid var(--line-2); }
.list-line--roomy { padding:9px 0; border-bottom:1px solid var(--line-2); }
.list-line--wide { padding:10px 0; border-bottom:1px solid var(--line-2); }
.picker-option { padding:8px 12px; border-bottom:1px solid var(--line-2); cursor:pointer; }
.picker-option:hover { background:var(--surface-2); }
/* Results overlay the form instead of reflowing it: the zero-height anchor sits
   in flow right below the input, so the absolute popover never pushes fields
   down while the user types. */
.picker-anchor { position:relative; height:0; z-index:40; }
.picker-popover { position:absolute; left:0; right:0; top:4px; display:none; max-height:264px; overflow:auto; overscroll-behavior:contain; box-shadow:var(--shadow-lg); }
.click-row { border-bottom:1px solid var(--line-2); cursor:pointer; }
.inline-warning { margin-top:16px; padding:12px 14px; border-radius:10px; background:var(--warn-tint); color:#7a4307; }
.verification-code { font-size:20px; letter-spacing:4px; text-align:center; }
.qr-preview { width:180px; height:180px; margin:10px auto; }
.recovery-code-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 28px; margin:16px 0; padding:14px 14px 14px 36px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.recovery-code-list code { font-size:13px; font-weight:700; letter-spacing:.03em; }
@media (max-width:520px) { .recovery-code-list { grid-template-columns:1fr; } }
.max-h-72 { max-height:72vh; overflow:auto; }
.max-h-74 { max-height:74vh; overflow:auto; }
.list-row { padding:10px 0; border-bottom:1px solid var(--line-2); }
.list-row:last-child { border-bottom:0; }

/* --- App shell ----------------------------------------------------------- */
html.admin-shell,html.admin-shell body { height:100%; overflow:hidden; overscroll-behavior:none; }
html.admin-shell .app { position:fixed; inset:0; width:100%; height:100vh; height:100dvh; overflow:hidden; }
.app { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); grid-template-rows:var(--app-header-h) minmax(0,1fr); min-height:0; }
.app-header {
  grid-column:1 / -1; grid-row:1; position:relative; z-index:100;
  display:flex; align-items:center; min-width:0; min-height:0; gap:4px; padding:max(6px,env(safe-area-inset-top)) 18px 6px;
  padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right));
  border-bottom:1px solid #1B3A58; background:#07182A; color:#fff;
}
.app-brand,.sidebar-mobile-brand { display:flex; align-items:center; flex:0 1 auto; min-width:0; gap:10px; color:#fff; text-decoration:none; }
.app-brand:hover,.sidebar-mobile-brand:hover { color:#fff; text-decoration:none; }
.app-brand .brand-swoosh { width:102px; flex:none; }
.app-brand .name,.sidebar-mobile-brand .name { min-width:0; overflow:hidden; font-family:var(--font-display); font-size:13px; font-weight:700; line-height:1.15; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.app-brand .name small,.sidebar-mobile-brand .name small { display:block; overflow:hidden; margin-top:2px; color:#8EA2B5; font-family:var(--font); font-size:10px; font-weight:500; letter-spacing:0; text-overflow:ellipsis; }
.top-primary-nav { display:flex; align-items:center; align-self:stretch; min-width:0; gap:2px; margin-left:14px; padding-left:14px; border-left:1px solid rgba(255,255,255,.11); }
.top-primary-nav .nav-link { min-width:0; min-height:40px; padding:8px 12px; gap:7px; border-radius:8px; color:#A9BCCE; font-size:13.5px; font-weight:650; letter-spacing:.005em; white-space:nowrap; }
.top-primary-nav .nav-link svg { display:none; }
.top-primary-nav .nav-link>span:not(.badge-count) { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.top-primary-nav .nav-link:hover { color:#fff; background:rgba(255,255,255,.07); border-color:transparent; }
.top-primary-nav .nav-link.active { color:#fff; background:rgba(99,193,255,.09); border-color:transparent; box-shadow:inset 0 -2px 0 #63C1FF; }
.top-primary-nav .nav-link .badge-count { margin-left:2px; }
.top-more { position:relative; flex:none; }
.top-more-trigger { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:64px; min-height:40px; padding:8px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:#A9BCCE; font-size:13.5px; font-weight:650; cursor:pointer; }
.top-more-trigger:hover,.top-more-trigger.active,.top-more-trigger[aria-expanded="true"] { border-color:transparent; background:rgba(255,255,255,.08); color:#fff; }
.top-more-trigger.active { box-shadow:inset 0 -2px 0 #63C1FF; background:rgba(99,193,255,.09); }
.top-more-chevron { display:inline-block; font-size:15px; line-height:1; transition:transform .16s ease; }
.top-more-chevron.open { transform:rotate(180deg); }
.top-more-panel { position:fixed; top:calc(var(--app-header-h) - 1px); left:50%; z-index:115; width:min(720px,calc(100vw - 28px)); max-height:calc(100dvh - var(--app-header-h) - 18px); padding:18px 18px 16px; overflow:auto; transform:translateX(-50%); border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); }
.top-more-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 18px; }
.top-menu-group { min-width:0; }
.top-menu-heading { margin:0 8px 6px; padding-bottom:5px; border-bottom:1px solid var(--line-2); color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.top-menu-link.nav-link { min-width:0; min-height:40px; padding:8px; border-radius:8px; color:var(--ink-2); }
.top-menu-link.nav-link svg { opacity:.7; }
.top-menu-link.nav-link>span:not(.badge-count) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-menu-link.nav-link:hover { border-color:var(--line-2); background:var(--surface-2); color:var(--ink); }
.top-menu-link.nav-link:hover svg { opacity:1; }
.top-menu-link.nav-link.active { border-color:color-mix(in srgb,var(--brand) 22%,var(--line)); background:var(--brand-tint); color:var(--brand-700); box-shadow:inset 2px 0 var(--brand); }
.top-menu-link.nav-link.active svg { opacity:1; }
.top-menu-link.nav-link .badge-count { background:var(--brand-tint); color:var(--brand-700); }
.top-utilities { display:flex; flex:none; align-items:center; gap:8px; margin-left:auto; padding-left:12px; }
.top-search { display:inline-flex; align-items:center; gap:8px; min-width:40px; min-height:38px; padding:8px 12px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(255,255,255,.05); color:#A9BCCE; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .14s,border-color .14s,color .14s; }
.top-search:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.09); color:#fff; }
.top-search svg { flex:none; opacity:.9; }
.top-search-kbd { padding:2px 6px; border:1px solid rgba(255,255,255,.16); border-radius:5px; background:rgba(255,255,255,.06); color:#8EA2B5; font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.04em; }
.quick-create { position:relative; flex:none; }
.quick-create-trigger { display:inline-flex; align-items:center; gap:7px; min-width:40px; min-height:38px; padding:8px 14px; border:1px solid color-mix(in srgb,var(--brand) 55%,#fff 10%); border-radius:9px; background:var(--brand); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); transition:background .14s; }
.quick-create-trigger:hover { background:#1868D2; }
.quick-create-trigger[aria-expanded="true"] { background:#0F4C9E; }
.quick-create-trigger svg { flex:none; }
.quick-create-menu { position:absolute; top:calc(100% + 9px); right:0; z-index:116; display:grid; gap:2px; min-width:216px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); }
.quick-create-menu[hidden] { display:none; }
.quick-create-item { display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 10px; border-radius:8px; color:var(--ink-2); font-size:13px; font-weight:600; text-decoration:none; }
.quick-create-item:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.quick-create-item svg { color:var(--brand); flex:none; }
.top-bell { position:relative; display:grid; flex:none; place-items:center; width:40px; min-height:38px; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(255,255,255,.05); color:#A9BCCE; cursor:pointer; transition:background .14s,border-color .14s,color .14s; }
.top-bell:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.09); color:#fff; }
.top-bell .badge-count { position:absolute; top:-7px; right:-7px; padding:1px 6px; border-radius:999px; background:var(--danger); color:#fff; font-size:10.5px; font-weight:800; box-shadow:0 0 0 2px #07182A; }
.btn.topbar-bell { display:none; } /* desktop notifications live in the app header; this bell is the ≤920px page-bar fallback */
.command-palette-modal { max-width:600px; overflow:hidden; }
.command-palette { display:flex; flex-direction:column; max-height:min(460px,calc(100dvh - 14vh)); }
.command-palette-field { display:flex; flex:none; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line-2); color:var(--muted); }
.command-palette-field input { flex:1; min-width:0; padding:2px 0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; }
.command-palette-field input::placeholder { color:var(--muted); }
.command-palette-results { flex:1; min-height:0; padding:8px; overflow-y:auto; overscroll-behavior:contain; }
.command-palette-group { margin:8px 10px 3px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.command-palette-group:first-child { margin-top:2px; }
.command-palette-item { display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 10px; border-radius:8px; color:var(--ink-2); font-size:13.5px; font-weight:600; text-decoration:none; }
.command-palette-item svg { flex:none; color:var(--muted); }
.command-palette-item small { margin-left:auto; color:var(--muted); font-size:11px; font-weight:600; }
.command-palette-item:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.command-palette-item.active { background:var(--brand-tint); color:var(--brand-700); }
.command-palette-item.active svg,.command-palette-item.active small { color:var(--brand-700); }
.command-palette-empty { padding:26px 16px; color:var(--muted); font-size:13px; text-align:center; }
.command-palette-foot { display:flex; flex:none; gap:16px; padding:10px 18px; border-top:1px solid var(--line-2); background:var(--surface-2); color:var(--muted); font-size:11px; font-weight:600; }
.command-palette-foot kbd { margin-right:4px; padding:1px 5px; border:1px solid var(--line); border-radius:4px; background:var(--surface); font-family:var(--font); font-size:10px; font-weight:700; }
@media (max-width:1500px) { .top-search-kbd { display:none; } }
@media (max-width:1359px) {
  .top-search { width:40px; justify-content:center; padding:0; }
  .top-search-label { display:none; }
}
@media (max-width:1259px) {
  .top-primary-nav .top-nav-p3 { display:none; }
  .top-primary-nav:has(> .top-nav-p3.active) .top-more-trigger { border-color:transparent; background:rgba(99,193,255,.09); color:#fff; box-shadow:inset 0 -2px 0 #63C1FF; }
}
@media (max-width:1139px) {
  .top-primary-nav .top-nav-p2 { display:none; }
  .top-primary-nav:has(> .top-nav-p2.active) .top-more-trigger { border-color:transparent; background:rgba(99,193,255,.09); color:#fff; box-shadow:inset 0 -2px 0 #63C1FF; }
}
@media (max-width:1039px) {
  .quick-create-trigger { width:40px; justify-content:center; padding:0; }
  .quick-create-label { display:none; }
}
.sidebar {
  grid-column:1; grid-row:2;
  background: #0A1C2E;
  color: #C6D3DF;
  display: flex; flex-direction: column;
  position:relative; min-height:0;
  padding:12px; padding-left:max(12px,env(safe-area-inset-left)); gap:3px;
  border-right: 1px solid #132C44;
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar-mobile-brand,.mobile-navigation { display:none; }
.desktop-shortcuts { display:flex; flex:1; min-height:0; flex-direction:column; }
.shortcut-header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:50px; padding:2px 2px 8px 8px; border-bottom:1px solid rgba(255,255,255,.08); }
.shortcut-heading { display:grid; min-width:0; line-height:1.2; }
.shortcut-heading small { color:#7E93A7; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.shortcut-heading strong { overflow:hidden; color:#fff; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.nav-collapse { display:grid; flex:none; place-items:center; width:40px; min-height:40px; padding:0; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.035); color:#AFC1D2; font:inherit; cursor:pointer; transition:background .16s, border-color .16s, color .16s; }
.nav-collapse:hover { border-color:rgba(255,255,255,.19); background:rgba(255,255,255,.08); color:#fff; }
.nav-collapse:disabled { opacity:.65; cursor:wait; }
.nav-collapse>span:first-child { display:grid; place-items:center; }
.shortcut-list { display:grid; min-height:0; align-content:start; gap:2px; margin-top:8px; padding:0 2px 8px 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.shortcut-list .nav-link { min-width:0; }
.shortcut-list .nav-link>span:not(.badge-count) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shortcut-empty { display:grid; gap:4px; margin:8px 4px; padding:12px; border:1px dashed rgba(255,255,255,.15); border-radius:10px; color:#8EA2B5; font-size:11px; line-height:1.45; }
.shortcut-empty strong { color:#D5DFE8; font-size:12px; }
.nav-section { color: #7E93A7; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; padding: 13px 10px 6px; }
.nav-link {
  min-width:0;
  display: flex; align-items: center; gap: 10px;
  min-height: 39px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: #AFC1D2; font-weight: 600;
  cursor: pointer; transition: background .14s, border-color .14s, color .14s, box-shadow .14s; text-decoration: none;
}
.nav-link svg { width: 18px; height: 18px; flex: none; opacity: .8; transition: opacity .14s; }
.nav-link:hover { background: rgba(255,255,255,.06); border-color:transparent; color: #fff; text-decoration: none; }
.nav-link:hover svg { opacity: 1; }
.nav-link.active { background: #12314F; border-color:#265081; color: #fff; box-shadow: inset 2px 0 #63C1FF; }
.nav-link.active svg { opacity: 1; }
.nav-link .badge-count { margin-left: auto; background: rgba(255,255,255,.16); color:#fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight:700; }
.nav-group { margin:5px 0; }
.nav-group-heading { min-height:28px; margin:0; padding:7px 10px 4px; color:#9DB2C4; font:750 11px/1.4 var(--font); letter-spacing:.08em; text-transform:uppercase; }
.nav-group.active-group > .nav-group-heading { color:#fff; }
.nav-group.active-group > .nav-group-heading::before { content:''; display:inline-block; width:5px; height:5px; margin:0 8px 2px 0; border-radius:50%; background:#63C1FF; }
.nav-group-items { display:grid; gap:1px; padding:2px 0 4px 7px; border-left:1px solid rgba(255,255,255,.1); margin-left:10px; }
.nav-group-items .nav-link { min-height:34px; padding:6px 9px; font-size:12px; }
.nav-group-items .nav-link svg { width:16px; height:16px; }
.brand-swoosh { width:132px; height:auto; }
.sidebar .sidebar-user-actions { display:grid; justify-items:end; gap:4px; margin-left:auto; }
.sidebar .sidebar-logout,.sidebar .sidebar-sessions {
  min-width:24px; min-height:24px; padding:4px 6px; border-radius:6px;
  color:#BCC9D6; font-size:11px; line-height:16px;
}
.sidebar-logout:hover,.sidebar-sessions:hover { color:#fff; }
.mobile-bottom-nav { display:none; }
.page-actions-more { display:none; }
.sidebar-footer { flex:none; min-width:0; }
.sidebar .user {
  min-width:0;
  display: flex; align-items: center; gap: 10px; padding: 14px 12px 4px; border-top: 1px solid rgba(255,255,255,.09); margin-top: 12px;
}
.sidebar .user .avatar { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color:#fff; display:grid; place-items:center; font-weight:700; font-size: 13px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.sidebar .user .meta { min-width:0; overflow:hidden; font-size:13px; color:#e2e8f0; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.sidebar .user .meta small { color:#7c8aa0; }
.session-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-2); }
.session-row:last-child { border-bottom:0; }

.main { grid-column:2; grid-row:2; display:flex; min-width:0; min-height:0; overflow:hidden; flex-direction:column; }
.topbar {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px; padding: 12px 26px; background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: none;
  position:relative; flex:none; z-index:20;
}
.topbar h1 { font-size: 19px; line-height:1.2; }
.topbar h1:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:4px; }
.topbar .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.topbar .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.content-scroll { flex:1; min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; }
.content { padding:24px 26px 72px; max-width:1560px; width:100%; }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); box-shadow:var(--shadow-xs); cursor: pointer; align-items: center; justify-content: center; flex: none; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content:center; gap: 8px;
  min-height: 40px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; transition: background .16s, border-color .16s, box-shadow .16s, color .16s, transform .16s; white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); border-color:var(--brand-600); box-shadow: none; }
.btn-primary:hover { background: var(--brand-600); box-shadow: none; }
.btn-secondary { background: var(--surface); color: var(--ink-2); border-color: #C3D0DD; box-shadow:none; }
.btn-secondary:hover { background: var(--surface-2); border-color: #9FB3C6; box-shadow:none; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: #b42318; border-color:#9d1c13; color: #fff; box-shadow:0 1px 2px rgba(127,29,29,.14); }
.btn-danger:hover { background: #912018; }
.btn-danger-soft { background: #fff0ee; color: #8f1d14; border-color:#f0b8b2; box-shadow:none; }
.btn-danger-soft:hover { background:#ffe3df; color:#74180f; border-color:#e89b93; }
.btn-sm { min-height:34px; padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.btn-xs { min-height:28px; padding: 4px 9px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .52; cursor: not-allowed; transform:none; box-shadow:none; }

/* --- Cards & panels ------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.card-pad { padding: 22px; }
.card-head { display:flex; align-items:center; gap:12px; padding: 17px 22px; border-bottom: 1px solid var(--line-2); }
.card-head h3 { font-size: 15px; letter-spacing:-.015em; }
.card-head .actions { margin-left: auto; display:flex; gap:8px; }
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.between { justify-content: space-between; }
.view-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-panel { margin-bottom:16px; }
.filter-grid { display:grid; grid-template-columns:minmax(220px,2fr) repeat(4,minmax(130px,1fr)); gap:10px; }
.filter-field { margin:0; }
.metric-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.metric-strip .stat { border:0; border-right:1px solid var(--line); border-radius:0; }
.metric-strip .stat:last-child { border-right:0; }
.work-queue { display:grid; }
.work-queue__item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:68px; padding:12px 18px; border-bottom:1px solid var(--line-2); color:var(--ink); text-decoration:none; }
.work-queue__item:last-child { border-bottom:0; }
.work-queue__item:hover,.work-queue__item:focus-visible { background:var(--surface-2); text-decoration:none; }
.work-queue__item>span:nth-child(2) { display:grid; min-width:0; }
.work-queue__item small { color:var(--copper); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.work-queue__item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.work-queue__item em { overflow:hidden; color:var(--muted); font-size:11px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.work-queue__item>b { color:var(--ink-2); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.inspection-marker { display:grid; place-items:center; width:30px; height:30px; border:1px solid color-mix(in srgb,var(--copper) 70%,var(--line)); border-radius:8px; background:var(--copper-tint); color:var(--copper); font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; }
.notice { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.notice[data-tone=warning] { border-color:#d7bd8d; background:var(--warn-tint); }
.notice[data-tone=danger] { border-color:#dfb0aa; background:var(--danger-tint); }

/* Action-first record summaries */
.lead-summary { display:grid; gap:10px; margin-bottom:16px; }
.lead-overdue-notice { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 15px; border:1px solid #d7bd8d; border-left:3px solid var(--copper); border-radius:var(--radius); background:var(--warn-tint); color:var(--ink); text-align:left; }
button.lead-overdue-notice { cursor:pointer; }
button.lead-overdue-notice:hover,button.lead-overdue-notice:focus-visible { border-color:var(--copper); background:#f8ead7; }
.lead-overdue-notice.is-clear { border-color:var(--line); border-left-color:var(--brand); background:var(--surface); }
.lead-overdue-notice__count { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--copper); color:#fff; font-weight:800; font-variant-numeric:tabular-nums; }
.lead-overdue-notice.is-clear .lead-overdue-notice__count { background:var(--brand-tint); color:var(--brand-700); }
.lead-overdue-notice__copy { display:grid; min-width:0; }
.lead-overdue-notice__copy strong { font-size:13px; }
.lead-overdue-notice__copy small { margin-top:1px; color:var(--muted); font-size:11px; }
.lead-overdue-notice__action { color:var(--copper); font-size:12px; font-weight:800; white-space:nowrap; }
.lead-stage-pills { display:flex; flex-wrap:wrap; gap:7px; }
.lead-stage-pill { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-2); font:650 12px var(--font); cursor:pointer; }
.lead-stage-pill span { min-width:20px; padding:1px 6px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; text-align:center; }
.lead-stage-pill:hover,.lead-stage-pill:focus-visible { border-color:var(--brand); color:var(--ink); }
.lead-stage-pill.active,.lead-stage-pill[aria-pressed=true] { border-color:var(--brand); background:var(--brand); color:#fff; }
.lead-stage-pill.active span,.lead-stage-pill[aria-pressed=true] span { background:rgba(255,255,255,.16); color:#fff; }
.lead-record-identity { display:flex; align-items:center; gap:10px; min-width:190px; }

.invoice-priority-summary { display:flex; align-items:stretch; gap:12px; margin-bottom:16px; }
.invoice-balance { flex:1 1 340px; display:grid; align-content:center; min-height:128px; padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--copper); border-radius:var(--radius); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; }
.invoice-balance:hover,.invoice-balance:focus-visible { border-color:var(--copper); background:var(--surface-2); }
.invoice-balance.is-clear { border-left-color:var(--brand); cursor:default; }
.invoice-balance__label { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.invoice-balance__value { margin-top:5px; font:700 clamp(26px,3vw,36px)/1 var(--font-display); letter-spacing:-.04em; }
.invoice-balance__meta { margin-top:7px; color:var(--copper); font-size:12px; font-weight:700; }
.invoice-balance.is-clear .invoice-balance__meta { color:var(--muted); }
.invoice-metrics { flex:2 1 480px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.invoice-metric { display:grid; align-content:center; min-height:128px; padding:17px 19px; border-left:1px solid var(--line-2); }
.invoice-metric:first-child { border-left:0; }
.invoice-metric>span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.invoice-metric>strong { margin-top:5px; font-size:21px; font-variant-numeric:tabular-nums; }
.invoice-metric>small { margin-top:5px; color:var(--muted); font-size:11px; }
.invoice-metric--overdue { background:var(--danger-tint); }
.invoice-metric--overdue>strong { color:var(--danger); }
.invoice-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.invoice-filter-chips { display:flex; flex-wrap:wrap; gap:7px; }

.settings-panel { margin-bottom:18px; }
.settings-mobile-nav { display:none; margin-bottom:14px; }
.brand-contrast-preview { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 14px; margin:-2px 0 16px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); }
.brand-contrast-preview>span { color:var(--muted); font-size:12px; font-weight:700; }
.brand-contrast-preview>strong { grid-row:1/3; grid-column:2; padding:9px 13px; border-radius:8px; font-size:13px; }
.brand-contrast-preview>small { color:var(--muted); font-size:11px; }
.settings-mobile-nav__label { display:block; margin-bottom:6px; color:var(--ink-2); font-size:12px; font-weight:700; }
.settings-mobile-nav__select { width:100%; }

/* Stat tiles */
.stat { position:relative; overflow:hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 18px; box-shadow: none; }
.stat::after { display:none; }
.stat .label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing:.01em; display:flex; align-items:center; gap:9px; }
.stat .value { font-family:var(--font-display); font-size: 29px; font-weight: 700; margin-top: 9px; letter-spacing: -0.035em; }
.stat .delta { font-size: 12px; font-weight: 600; margin-top: 6px; }
.stat .ic { width: 30px; height: 30px; border-radius: 8px; display:grid; place-items:center; background: var(--brand-tint); color: var(--brand-700); box-shadow:none; }
.delta.up { color: var(--ok); } .delta.down { color: var(--danger); }

/* --- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; scrollbar-width:thin; scrollbar-color:#c9d2dc transparent; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; color: #46586B; background:color-mix(in srgb,var(--surface-2) 82%,#fff); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .065em; padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .14s, box-shadow .14s; }
table.tbl tbody tr:hover { background: var(--brand-tint-2); }
table.tbl tr.clickable { cursor: pointer; }
.cell-strong { font-weight: 600; color: var(--ink); }

/* --- Badges & chips ------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.9; }
.badge.no-dot::before { display:none; }
.badge.ok { background: var(--ok-tint); color: #147a3a; border-color: transparent; }
.badge.warn { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
.badge.danger { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.badge.info { background: var(--info-tint); color: var(--info); border-color: transparent; }
.badge.purple { background: var(--purple-tint); color: var(--purple); border-color: transparent; }
.badge.neutral { background: var(--surface-2); color: var(--muted); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:background .14s, border-color .14s, color .14s; }
.chip:not(.active):hover { background:var(--surface-2); border-color:#aebac6; color:var(--ink); }
.chip.active { background: var(--brand); border-color: var(--brand); color:#fff; }
.chip .n { opacity:.7; font-weight:600; }
.chip.active .n { opacity:1; }

/* --- Forms --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--muted); }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  font-family: inherit; font-size: 14.5px; color: var(--ink); line-height: 1.3;
  min-height:42px; padding: 11px 13px; border: 1px solid #cfd7df; border-radius: 11px; background: #fff; width: 100%;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.65);
  color-scheme: light;
  transition: border-color .12s, box-shadow .12s, background .12s;
  -webkit-appearance: none; appearance: none;
}
/* iOS Safari auto-zooms any focused control under 16px, lurching the viewport
   on every form. Touch devices get 16px controls; desktop keeps its density. */
@media (max-width: 920px), (pointer: coarse) {
  input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
    font-size: 16px;
  }
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:not(:disabled):hover, select:not(:disabled):hover, textarea:not(:disabled):hover { border-color: #aebac6; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line-2); box-shadow: none; cursor: not-allowed; opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring), var(--shadow-xs); background: #fff; }
input[type=date], input[type=time], input[type=datetime-local] { cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: .9; }
input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; width: auto; box-shadow: none; accent-color: var(--brand); cursor: pointer; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
select {
  padding-right: 36px; 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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
textarea { resize: vertical; min-height: 84px; }
input[type=color] { padding: 4px; height: 42px; cursor: pointer; }
.input-prefix { position: relative; }
.input-prefix span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; }
.input-prefix input { padding-left: 26px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex:none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:background-color .2s; cursor:pointer; }
.switch .track::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow: var(--shadow-sm); }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::before { transform: translateX(18px); }
.switch input:focus-visible + .track { outline:3px solid color-mix(in srgb,var(--brand) 30%,transparent); outline-offset:2px; }
.segmented { display:inline-flex; background:#edf1f4; border:1px solid #dfe5ea; border-radius:11px; padding:3px; gap:3px; box-shadow:inset 0 1px 2px rgba(16,24,40,.035); }
.segmented button { border:none; background:transparent; padding:7px 14px; border-radius:8px; font-weight:600; font-size:13px; color:var(--muted); cursor:pointer; transition:background .14s, color .14s; }
.segmented button:not(.active):hover { background:rgba(255,255,255,.65); color:var(--ink); }
.segmented button.active { background:var(--surface); color:var(--ink); box-shadow: var(--shadow-sm); }

/* --- Modal & drawer ------------------------------------------------------ */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); z-index: 130; display:flex; align-items:flex-start; justify-content:center; padding: 6vh 16px; overflow:auto; overscroll-behavior:contain; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; animation: pop .16s ease; }
/* Exit motion mirrors the entrance: dialogs ease out instead of vanishing in
   one frame. JS adds .closing then removes the node after ~160ms. */
.overlay.closing { opacity:0; transition:opacity .15s ease; pointer-events:none; }
.overlay.closing .modal { opacity:0; transform:translateY(8px) scale(.985); transition:opacity .14s ease, transform .14s ease; }
.drawer.closing { opacity:0; transform:translateX(26px); transition:opacity .15s ease, transform .15s ease; pointer-events:none; }
.modal.wide { max-width: 860px; }
.modal-head { display:flex; align-items:center; padding: 20px 24px; border-bottom: 1px solid var(--line-2); }
.modal-head h3 { font-size: 17px; }
.modal-head .x { margin-left:auto; cursor:pointer; color:var(--muted); background:none; border:none; font-size:22px; line-height:1; }
.modal-body { padding: 22px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--line-2); display:flex; gap:10px; justify-content:flex-end; background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }

/* drawer (right side) */
.drawer-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 130; }
.drawer-overlay.closing { opacity:0; transition:opacity .15s ease; pointer-events:none; }
.btn-spinner { width:14px; height:14px; border-width:2px; border-color:color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor; }
.drawer { position: fixed; top:0; right:0; height:100vh; width: 480px; max-width: 94vw; background: var(--surface); box-shadow: var(--shadow-lg); z-index: 131; display:flex; flex-direction:column; animation: slidein .2s ease; }
.drawer.wide { width: 640px; }
@keyframes slidein { from { transform: translateX(20px); opacity:.6; } to { transform:none; opacity:1; } }

/* --- Toast --------------------------------------------------------------- */
#toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display:flex; flex-direction:column; gap:10px; }
/* On phones the bottom nav owns the bottom edge — toasts (the primary error
   surface) must sit above it and clear the home-indicator safe area. */
@media (max-width: 920px) {
  #toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  #toasts .toast { max-width: none; }
}
.toast { background: #0c1726; color:#fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; display:flex; gap:10px; align-items:center; animation: pop .16s ease; max-width: 360px; }
.toast.ok { background: #14532d; } .toast.err { background: #7f1d1d; }

/* --- Misc ---------------------------------------------------------------- */
.empty { text-align:center; padding: 48px 20px; color: var(--muted); }
.empty .ic { width:52px; height:52px; border-radius:14px; background:var(--surface-2); display:grid; place-items:center; margin:0 auto 14px; color:var(--muted-2); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display:inline-block; }
.loading-page { display:grid; place-items:center; min-height: 60vh; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Skeleton loading (shaped placeholders instead of a bare spinner) -----
   The pulse animates opacity only, so it runs on the compositor. Blocks are
   sized close to the content they stand in for, which kills the pop-in jump
   when data lands. */
.skel { background: var(--surface-2); border-radius: 10px; animation: skelPulse 1.3s ease-in-out infinite; }
@keyframes skelPulse { 50% { opacity:.55; } }
.page-skel { display:block; }
.skel-row { height: 14px; margin: 6px 0; }
.skel-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.skel-tile { height: 92px; border-radius: var(--radius); }
.skel-block { min-height: 320px; border-radius: var(--radius); }
.skel-line { height: 44px; margin-bottom: 10px; border-radius: 10px; }
@media (max-width: 760px) { .skel-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.divider { height:1px; background: var(--line-2); margin: 16px 0; border: none; }
.kbd { font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px; color:var(--muted); }
.dot-sep::before { content:"·"; margin:0 7px; color: var(--muted-2); }
.avatar-sm { width:30px;height:30px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none; }
.link-btn { background:none;border:none;color:var(--brand);font-weight:600;cursor:pointer;font-size:14px;padding:0; }
.list-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px 0; flex-wrap:wrap; }
.picker-row { display:flex; width:100%; flex-direction:column; gap:2px; padding:9px 12px; cursor:pointer; border:0; border-bottom:1px solid var(--line-2); background:var(--surface); color:inherit; font:inherit; text-align:left; }
.picker-row:last-child { border-bottom:none; }
.picker-row:hover,.picker-row[aria-selected="true"] { background:var(--surface-2); }
.picker-row span { font-weight:700; color:var(--ink); }
.picker-row small { color:var(--muted); font-size:12px; }
.record-open { border:0; padding:0; background:none; color:inherit; font:inherit; font-weight:700; text-align:left; cursor:pointer; }
.record-open:hover { color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
.scrim { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 110; }
.tabbar { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom: 18px; }
.tabbar button { background:none; border:none; padding:11px 14px; font-weight:600; font-size:14px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .14s, border-color .14s; }
.tabbar button:not(.active):hover { color:var(--ink); border-bottom-color:var(--line); }
.tabbar button.active { color:var(--brand); border-bottom-color:var(--brand); }
.li-row { display:grid; grid-template-columns:minmax(0,1fr) 72px 142px 54px 28px; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-2); }
.li-row:last-child { border-bottom:none; }
.li-row .input-prefix { min-width:0; }
.tx { display:inline-flex; align-items:center; justify-content:center; gap:5px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; }
.tx::before { content:"Tax"; }
.totline { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 0; font-size:14px; }
.totline.grand { margin-top:6px; padding-top:10px; border-top:1px solid var(--line); font-size:16px; font-weight:800; color:var(--ink); }
.preset-pill { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-2); font:inherit; font-size:13px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm); }
.preset-pill:hover { background:var(--brand-tint-2); border-color:color-mix(in srgb, var(--brand) 28%, var(--line)); color:var(--brand-700); }
.quote-board { display:grid; grid-template-columns:repeat(6,minmax(210px,1fr)); gap:12px; align-items:start; overflow-x:auto; padding-bottom:8px; }
.quote-col { min-width:210px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
.quote-col-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 12px; border-bottom:1px solid var(--line-2); }
.quote-col-head h3 { font-size:13px; }
.quote-col-body { display:flex; flex-direction:column; gap:9px; padding:10px; min-height:120px; background:var(--surface-2); }
.quote-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px; box-shadow:var(--shadow-sm); cursor:pointer; display:flex; flex-direction:column; gap:5px; }
.quote-card:hover { border-color:#d3dae3; box-shadow:var(--shadow); }
.quote-thumb { width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); margin-bottom:4px; }
.quote-action { margin-top:6px; align-self:flex-start; }
.plan-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px; min-height:188px; transition:border-color .12s, box-shadow .12s, transform .12s; }
button.plan-card { font:inherit; text-align:left; width:100%; appearance:none; }
.plan-card:hover { border-color:#d3dae3; box-shadow:var(--shadow); transform:translateY(-1px); }
.plan-card .price { font-size:26px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
.plan-card .per { color:var(--muted); font-size:13px; font-weight:600; }
.daygrid { display:grid; grid-template-columns:minmax(120px,1fr) 132px 132px auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-2); }
.daygrid:last-child { border-bottom:none; }
.convo-item { background:var(--surface); transition:background .12s, box-shadow .12s; }
.convo-item:hover { background:var(--surface-2); }
.convo-item.active { background:var(--brand-tint-2); box-shadow:inset 3px 0 0 var(--brand); }
/* Reports bar chart (no external lib) */
.rep-chart { display:flex; align-items:flex-end; gap:10px; height:150px; padding-top:8px; overflow-x:auto; }
.rep-bar { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; min-width:34px; flex:1; }
.rep-bar-fill { width:60%; min-width:18px; max-width:46px; background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#63C1FF)); border-radius:6px 6px 0 0; }
.rep-bar-lbl { font-size:11px; color:var(--muted); white-space:nowrap; }
/* Reports: records first, comparisons second */
.report-controls { margin-bottom:16px; }
.report-controls-row { align-items:flex-end; gap:12px; }
.report-date-field { flex:0 1 180px; margin:0; }
.report-range-presets { gap:6px; margin-left:auto; }
.report-saved-card { margin-bottom:16px; }
.report-saved-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.report-saved-list { justify-content:flex-end; gap:6px; }
.report-saved-chip { padding:4px 8px; }
.report-saved-open { color:inherit; font-size:12px; }
.report-saved-shared { color:var(--muted); }
.report-saved-delete { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--muted); }
.report-saved-delete:hover { background:var(--danger-tint); color:var(--danger); }
.report-kpis { margin-bottom:16px; }
.report-metric-strip { display:flex; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.report-metric-strip .stat { flex:1 1 170px; min-width:0; border:0; border-right:1px solid var(--line); border-radius:0; }
.report-metric-strip .stat:last-child { border-right:0; }
.report-metric-strip .value { font-size:23px; }
.report-metric-empty { max-width:260px; }
.report-metric-note { margin-top:5px; }
.report-picker-section { margin-bottom:16px; }
.report-picker-label { margin-bottom:7px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.report-picker { flex-wrap:wrap; gap:7px; }
.report-results { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.report-results-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 20px; border-bottom:1px solid var(--line); }
.report-results-copy h2 { font-size:18px; }
.report-results-copy p { max-width:720px; margin:4px 0 0; font-size:12px; }
.report-range-label { flex:none; padding-top:3px; font-variant-numeric:tabular-nums; }
.report-table-wrap { border-bottom:1px solid var(--line); }
.report-empty-cell { padding:28px!important; }
.report-empty-state { display:grid; min-height:70px; place-items:center; }
.report-chart-card { margin:16px; }
.report-chart-label { margin-bottom:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.rep-chart.report-chart-list { display:grid; height:auto; padding:0; gap:3px; overflow:visible; }
.rep-bar.report-chart-row { display:grid; grid-template-columns:minmax(90px,140px) minmax(120px,1fr) minmax(75px,auto); align-items:center; gap:12px; min-width:0; }
.report-chart-row .rep-bar-lbl { overflow:hidden; text-overflow:ellipsis; }
.rep-bar-fill.report-chart-meter { width:100%; min-width:0; max-width:none; height:10px; border:0; border-radius:999px; background:none; }
.report-chart-meter::-webkit-meter-bar { height:10px; border:0; border-radius:999px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); }
.report-chart-meter::-webkit-meter-optimum-value { border-radius:999px; background:var(--brand); }
.report-chart-meter::-moz-meter-bar { border-radius:999px; background:var(--brand); }
.report-chart-value { color:var(--ink-2); font-size:11px; text-align:right; }
.report-accounting { margin-top:18px; }
.report-accounting-head { margin-bottom:12px; }
.report-accounting-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; margin-bottom:12px; border:1px solid var(--line); border-radius:9px; background:var(--line); }
.report-accounting-metric { padding:12px; background:var(--surface-2); }
.report-accounting-metric .mono { margin-top:3px; font-size:12px; }
.report-accounting-actions { gap:8px; }
.report-accounting-note { margin:10px 0 0; }
.report-share-option { gap:8px; }
.report-share-checkbox { width:auto; }
/* Job photos / files grid */
.filegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:8px; }
.filecard { position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line); aspect-ratio:1; background:var(--surface-2); }
.filecard img { width:100%; height:100%; object-fit:cover; display:block; }
.filecard.doc .doclink { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:100%; padding:8px; text-align:center; color:var(--ink-2); text-decoration:none; }
.filecard.doc span { font-size:10px; line-height:1.2; word-break:break-word; max-height:30px; overflow:hidden; }
.filedel { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; border:none; background:rgba(15,23,42,.66); color:#fff; cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center; }
/* Touch devices: compact buttons use real, non-overlapping 44px boxes. Corner
   delete controls keep isolated hit slop without expanding their visuals. */
@media (pointer: coarse) {
  .filedel { position: absolute; }
  .report-saved-delete { min-width:44px; min-height:44px; }
  .filedel::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(44px, 100%); height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }
  .btn-xs { min-width:44px; min-height:44px; }
}
/* --- Schedule (day / week / month) ------------------------------------- */
.sched-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.sched-toolbar .arrow { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface); font-size:18px; line-height:1; cursor:pointer; color:var(--ink-2); }
.sched-toolbar .arrow:hover { background:var(--surface-2); }
.sched-title { font-weight:700; font-size:15px; margin:0 4px; }

.bay-board { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; box-shadow:var(--shadow-sm); overflow-x:auto; }
.bay-board h3 { font-size:15px; }
.bay-lane { display:grid; grid-template-columns:92px minmax(640px,1fr); gap:10px; align-items:stretch; padding:8px 0; border-top:1px solid var(--line-2); }
.bay-lane:first-of-type { border-top:none; }
.bay-lane-name { color:var(--muted); font-size:12px; font-weight:800; display:flex; align-items:center; }
.bay-lane-grid { display:grid; grid-template-columns:repeat(7,minmax(80px,1fr)); gap:6px; min-height:56px; }
.bay-span { min-width:0; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:8px; background:var(--brand-tint-2); padding:7px 9px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.bay-span:hover { border-color:color-mix(in srgb,var(--brand) 30%,var(--line)); box-shadow:var(--shadow-sm); }
.bay-span .cell-strong,
.bay-span .tiny { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-badge { align-self:flex-start; margin-top:3px; }

.week-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; }
.week-col { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:var(--surface); min-height:200px; overflow:hidden; }
.week-col.today { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.week-col.closed { background:var(--surface-2); }
.wc-head { display:flex; align-items:baseline; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--line-2); }
button.wc-head { width:100%; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; border-left:0; border-right:0; border-top:0; }
.wc-head span:first-child { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.wc-head span:last-child { font-size:15px; font-weight:800; }
.wc-body { flex:1; padding:6px; display:flex; flex-direction:column; gap:6px; }
.wc-job { border-left:3px solid var(--brand); background:var(--surface-2); border-radius:8px; padding:6px 8px; font-size:12px; line-height:1.35; }
.wc-job b { display:block; font-size:11px; color:var(--brand-700); font-weight:700; }
.wc-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; border-top:1px solid var(--line-2); font-size:11px; color:var(--muted); }
.cap-pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; }

.month-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.month-dow { text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:4px 0; }
.m-cell { min-height:88px; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:6px 8px; cursor:pointer; transition:background .12s; }
button.m-cell { width:100%; color:inherit; font:inherit; text-align:left; }
.m-cell:hover { background:var(--surface-2); }
.m-cell.out { opacity:.4; }
.m-cell.closed { background:var(--surface-2); }
.m-cell.today { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.m-num { font-weight:800; font-size:13px; }
.m-dots { display:flex; flex-wrap:wrap; gap:3px; margin-top:8px; }
.m-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); }

.agenda { display:flex; flex-direction:column; }
.slot-row { display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-2); }
.slot-row:last-child { border-bottom:none; }
.slot-row .time { width:78px; flex:none; font-weight:700; font-size:13px; color:var(--brand-700); }
.slot-row .job { flex:1; min-width:0; border-left:3px solid var(--brand); background:var(--surface-2); border-radius:8px; padding:9px 11px; cursor:pointer; }
.schedule-day-card .card-head { padding:14px 16px; }

/* Messaging: conversation list + thread */
.msg-layout { display:grid; grid-template-columns:320px 1fr; min-height:560px; overflow:hidden; }
.msg-layout #thread { display:flex; flex-direction:column; }
.msg-back { display:none; }
@media (max-width: 700px) {
  .msg-layout { grid-template-columns:minmax(0,1fr); }
  .msg-layout #convos { border-right:none !important; }
  .msg-layout.thread-open #convos { display:none; }
  .msg-layout:not(.thread-open) #thread { display:none; }
  .msg-back { display:inline-flex; }
}

@media (max-width: 1000px) {
  .week-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .week-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sched-toolbar { display:grid; grid-template-columns:34px 34px minmax(0,1fr) minmax(0,1fr); align-items:center; }
  .sched-toolbar #today,
  .sched-toolbar #routeBtn { width:100%; }
  .sched-title { grid-column:1 / -1; margin:2px 0 0; }
  .sched-toolbar #techfilter,
  .sched-toolbar .segmented { grid-column:1 / -1; max-width:none !important; width:100%; margin-left:0 !important; }
  .sched-toolbar .segmented { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
  .sched-toolbar .segmented button { padding-inline:8px; }
  .month-grid { gap:4px; }
  .m-cell { min-height:64px; }
  .m-cell { padding:5px 4px; border-radius:8px; }
  .m-cell .cap-pill { padding:1px 5px; font-size:10px; }
  .m-dots { gap:2px; margin-top:6px; }
  .m-dot { width:6px; height:6px; }
  .slot-row { gap:8px; }
  .slot-row .time { width:62px; font-size:12px; }
  .slot-row .job .row.between { align-items:flex-start; gap:8px; }
}

/* Drag-and-drop reschedule (week view) */
.wc-job.movable { cursor: grab; }
.wc-job.dragging { opacity:.45; cursor:grabbing; }
.week-col.drop-target { outline:2px dashed var(--brand); outline-offset:-3px; background:var(--brand-tint); }
.week-col.drop-target .wc-body { min-height:40px; }

/* Action-first dashboard */
.dashboard-demo-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 22px; margin-bottom:22px; border-color:color-mix(in srgb,var(--brand) 34%,var(--line)); background:color-mix(in srgb,var(--brand) 4%,var(--surface)); }
.dashboard-demo-copy { display:flex; align-items:flex-start; gap:15px; min-width:0; }
.dashboard-demo-copy h2 { margin:1px 0 5px; font-size:19px; letter-spacing:-.025em; }
.dashboard-demo-copy p { max-width:760px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.dashboard-demo-icon { display:grid; flex:none; place-items:center; width:42px; height:42px; border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line)); border-radius:10px; background:var(--surface); color:var(--brand-700); }
.dashboard-demo-card>.btn { flex:none; min-height:42px; }
.dashboard-demo-facts { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; color:var(--ink-2); font-size:11px; font-weight:700; }
.dashboard-demo-facts span { display:inline-flex; align-items:center; gap:6px; }
.dashboard-demo-facts span::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--copper); }
.dashboard-demo-loaded { align-items:center; margin-bottom:22px; }
.dashboard-demo-loaded>span:last-child { display:grid; gap:2px; }
.dashboard-demo-loaded small { color:var(--muted); line-height:1.45; }
.dashboard-eyebrow { display:block; margin-bottom:3px; color:var(--copper); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.dashboard-performance { margin-bottom:26px; }
.dashboard-section-title--performance { align-items:flex-end; margin-bottom:14px; }
.dashboard-section-title--performance h2 { font-size:19px; letter-spacing:-.02em; }
.dashboard-subsection-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:2px 0 11px; }
.dashboard-subsection-head h3 { font-size:14px; }
.dashboard-appt-link { color:inherit; text-decoration:none; }
.dashboard-appt-link:hover { color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
.dashboard-range { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.dashboard-range-copy strong { display:block; font-size:15px; }
.dashboard-range-fields { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dashboard-range-fields select { width:170px; }
.dashboard-range-fields input { width:142px; }
.dashboard-range-sep { color:var(--muted-2); }
.dashboard-kpis { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:18px; }
.dashboard-kpis .stat { min-width:0; }
.dashboard-kpis .stat .value { font-size:25px; }
.dashboard-stat-sub { margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dashboard-chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr)); gap:18px; margin-bottom:18px; }
.dashboard-mix-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr)); gap:18px; margin-bottom:22px; }
.dashboard-card-head { align-items:flex-start; flex-wrap:wrap; }
.dashboard-card-head>div:first-child { min-width:150px; }
.dashboard-chart-pad { padding:12px 18px 14px; }
.dashboard-line-chart { display:block; width:100%; height:auto; min-height:190px; overflow:visible; }
.dashboard-gridline { stroke:var(--line-2); stroke-width:1; }
.dashboard-axis { fill:var(--muted); font:11px var(--font); }
.dashboard-legend { display:flex; align-items:center; gap:12px; margin-left:auto; flex-wrap:wrap; }
.dashboard-legend span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; font-weight:600; }
.dashboard-legend i,.dashboard-mix-row i { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.dashboard-chart-empty { min-height:205px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:13px; }
.dashboard-donut-wrap { display:grid; grid-template-columns:116px minmax(0,1fr); align-items:center; gap:18px; min-height:148px; }
.dashboard-donut { width:116px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; position:relative; }
.dashboard-donut::after { content:""; position:absolute; inset:22px; border-radius:50%; background:var(--surface); }
.dashboard-donut>div { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.dashboard-donut strong { font-size:20px; }
.dashboard-donut span { margin-top:4px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.dashboard-mix-legend { min-width:0; }
.dashboard-mix-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; align-items:center; padding:4px 0; }
.dashboard-mix-row>span { min-width:0; display:flex; align-items:center; gap:7px; color:var(--ink-2); font-size:12px; }
.dashboard-mix-row strong { font-size:12px; }
.dashboard-mix-row strong small { color:var(--muted); font-weight:500; }
.dashboard-mix-row em { grid-column:2; color:var(--muted); font-size:10px; font-style:normal; text-align:right; }
.dashboard-mix-empty { min-height:148px; display:grid; place-items:center; text-align:center; color:var(--muted); font-size:13px; }
.dashboard-aging-row { margin-bottom:10px; }
.dashboard-aging-row .row { font-size:12px; }
.dashboard-aging-row small { color:var(--muted); }
.dashboard-aging-track { height:6px; border-radius:999px; overflow:hidden; background:var(--surface-2); margin-top:4px; }
.dashboard-aging-track i { display:block; height:100%; border-radius:inherit; }
.dashboard-aging-total { display:flex; align-items:center; justify-content:space-between; padding-top:10px; margin-top:3px; border-top:1px solid var(--line-2); font-size:13px; }
.dashboard-section-title { display:flex; align-items:baseline; justify-content:space-between; margin:4px 0 12px; }
.dashboard-section-title h2 { font-size:16px; }
.dashboard-action-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:16px; align-items:start; }
.dashboard-action-grid>* { min-width:0; }
.dashboard-section-title--primary { margin-top:0!important; }
.dashboard-priority-card .card-head { justify-content:space-between; align-items:flex-start; }
.dashboard-priority-foot { padding:10px 16px; border-top:1px solid var(--line-2); color:var(--muted); font-size:11px; text-align:center; }
.dashboard-clear-state { min-height:150px; }
.dashboard-pulse { margin:24px 0; }
.dashboard-pulse .dashboard-section-title { margin-bottom:10px; }
.dashboard-pulse .stat .value { font-size:23px; }
.dashboard-insights { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.dashboard-insights>summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:14px 18px; list-style:none; cursor:pointer; }
.dashboard-insights>summary::-webkit-details-marker { display:none; }
.dashboard-insights>summary>span:first-child { display:grid; }
.dashboard-insights>summary small { margin-top:2px; color:var(--muted); font-size:11px; }
.dashboard-insights>summary>span:last-child { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:8px; color:var(--copper); font-size:18px; transition:transform .16s ease; }
.dashboard-insights[open]>summary { border-bottom:1px solid var(--line); }
.dashboard-insights[open]>summary>span:last-child { transform:rotate(45deg); }
.dashboard-insights__body { padding:16px; background:var(--bg); }
.dashboard-insights__body .dashboard-range { margin-bottom:16px; }
/* Getting-started checklist card */
.setup-card { margin-bottom:18px; border-color:color-mix(in srgb, var(--brand) 26%, var(--line)); }
.setup-card__head { align-items:flex-start; }
.setup-card__meta { display:flex; align-items:center; gap:12px; }
.setup-progress { width:130px; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.setup-progress i { display:block; height:100%; border-radius:inherit; background:var(--brand); }
.setup-card__steps { display:grid; }
.setup-step { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:56px; padding:11px 18px; border-bottom:1px solid var(--line-2); }
.setup-step:last-child { border-bottom:0; }
.setup-step__mark { display:grid; place-items:center; width:22px; height:22px; border:1.5px solid var(--line); border-radius:50%; color:#fff; }
.setup-step--done .setup-step__mark { border-color:var(--ok); background:var(--ok); }
.setup-step--next { background:color-mix(in srgb, var(--brand) 5%, transparent); }
.setup-step__copy { display:grid; min-width:0; }
.setup-step__copy em { margin-top:2px; color:var(--muted); font-size:12px; font-style:normal; }
.setup-step--done .setup-step__copy strong { color:var(--muted); font-weight:600; text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--muted) 55%, transparent); }
.setup-card__foot { padding:11px 18px; border-top:1px solid var(--line-2); }
.setup-card__foot a, .setup-card__foot .link-btn { font-size:inherit; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:560px) {
  .setup-step { grid-template-columns:26px minmax(0,1fr); }
  .setup-step .btn { grid-column:2; justify-self:start; }
  .setup-card__meta { flex-direction:column; align-items:flex-end; gap:8px; }
  .setup-progress { width:96px; }
}
/* Guided setup wizard */
.setup-wizard { position:relative; display:flex; flex-direction:column; width:min(680px,100%); max-height:min(92vh,760px); padding:24px 28px 20px; border-radius:20px; background:var(--surface); box-shadow:var(--shadow-lg); overflow:auto; animation:pop .18s ease; outline:none; }
.setup-wizard__head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.setup-wizard__head .tour-skip { position:static; }
.setup-wizard h2 { margin:2px 0 6px; font-size:23px; letter-spacing:-.01em; }
.setup-wizard__lead { margin:0 0 18px; color:var(--muted); font-size:14px; max-width:56ch; }
.setup-wizard__body { display:grid; gap:13px; }
.setup-wizard__body label { display:grid; gap:6px; font-size:13px; font-weight:650; }
.setup-wizard__body input:not([type=checkbox]):not([type=color]), .setup-wizard__body select { width:100%; }
.setup-wizard .field-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.setup-color { display:flex; align-items:center; gap:10px; }
.setup-color input[type=color] { width:52px; height:38px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface); cursor:pointer; }
.setup-color small { color:var(--muted); font-weight:400; }
.setup-services { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.setup-services__cols, .setup-service { display:grid; grid-template-columns:52px minmax(0,1fr) 128px; gap:10px; align-items:center; padding:9px 14px; }
.setup-services__cols { background:var(--surface-2); color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.setup-service { border-top:1px solid var(--line-2); }
.setup-service input[type=checkbox] { justify-self:center; width:17px; height:17px; }
.setup-price { display:flex; align-items:center; gap:6px; }
.setup-price i { color:var(--muted); font-style:normal; font-weight:700; }
.setup-hours { display:grid; gap:7px; }
.setup-day { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; }
.setup-day__name { display:flex!important; flex-direction:row; align-items:center; gap:9px; font-weight:650; cursor:pointer; }
.setup-day__name input { width:17px; height:17px; }
.setup-day__name input:not(:checked) + span { color:var(--muted); }
.setup-day__times { display:flex; align-items:center; gap:8px; min-height:38px; }
.setup-day__times em { color:var(--muted); font-style:normal; font-size:13px; }
.setup-day__times .setup-day__closedtag { display:none; color:var(--muted); font-weight:600; font-size:13px; }
.setup-day__times.is-closed input, .setup-day__times.is-closed em { display:none; }
.setup-day__times.is-closed .setup-day__closedtag { display:inline; }
.setup-lead-time { max-width:340px; margin-top:6px; }
.setup-link { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.setup-link code { flex:1 1 260px; min-width:0; overflow-wrap:anywhere; font-size:13px; }
.setup-done { display:grid; gap:11px; }
.setup-done__item { display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 16px; border:1px solid var(--line); border-radius:12px; }
.setup-done__item svg { color:var(--brand); }
.setup-done__item strong { display:block; font-size:14px; }
.setup-done__item span { color:var(--muted); font-size:12.5px; }
.setup-wizard .tour-nav { margin-top:20px; }
@media (max-width:600px) {
  .setup-wizard { padding:20px 18px 16px; }
  .setup-wizard .field-row { grid-template-columns:1fr; }
  .setup-day { grid-template-columns:118px minmax(0,1fr); }
  .setup-services__cols, .setup-service { grid-template-columns:40px minmax(0,1fr) 104px; padding:8px 10px; }
  .setup-done__item { grid-template-columns:22px minmax(0,1fr); }
  .setup-done__item .btn, .setup-done__item button { grid-column:2; justify-self:start; }
}
/* Website starter templates */
.website-intro { display:flex; justify-content:space-between; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; }
.website-intro__copy { max-width:640px; }
.website-intro__copy h2 { font-size:18px; margin-bottom:6px; }
.website-intro__copy code { padding:1.5px 6px; border-radius:6px; background:var(--surface-2); font-size:12px; }
.website-intro__aside { display:grid; gap:7px; justify-items:start; }
.website-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:16px; margin-bottom:16px; }
.website-card { display:flex; flex-direction:column; overflow:hidden; }
.website-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface-2); }
.website-thumb iframe { width:400%; height:400%; transform:scale(.25); transform-origin:0 0; border:0; pointer-events:none; }
.website-card__body { display:flex; flex-direction:column; gap:8px; flex:1; }
.website-card__body p { flex:1; }
.website-highlights { display:flex; flex-wrap:wrap; gap:6px; }
.website-hosts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:18px; }
.website-preview-body { padding:0!important; }
.website-preview-body iframe { width:100%; height:100%; min-height:62vh; border:0; display:block; background:#fff; }
@media (max-width:760px) {
  .dashboard-demo-card { align-items:stretch; flex-direction:column; gap:16px; }
  .dashboard-demo-card>.btn { align-self:flex-start; }
  .dashboard-section-title--performance { align-items:flex-start; flex-direction:column; gap:3px; }
  .dashboard-range { align-items:stretch; flex-direction:column; }
  .dashboard-range-fields { display:grid; grid-template-columns:1fr 1fr; }
  .dashboard-range-fields select { grid-column:1/-1; width:100%; }
  .dashboard-range-fields input { width:100%; }
  .dashboard-range-sep { display:none; }
  .dashboard-range-fields button { grid-column:1/-1; }
}
@media (max-width:430px) {
  .dashboard-demo-card { padding:17px; }
  .dashboard-demo-copy { gap:11px; }
  .dashboard-demo-icon { width:36px; height:36px; }
  .dashboard-demo-facts { display:grid; grid-template-columns:1fr 1fr; }
  .dashboard-section-title--primary,.dashboard-subsection-head { align-items:flex-start; flex-direction:column; gap:3px; }
  .dashboard-range-fields { grid-template-columns:minmax(0,1fr); }
  .dashboard-range-fields select,
  .dashboard-range-fields input,
  .dashboard-range-fields button { grid-column:1; min-width:0; width:100%; }
  .dashboard-donut-wrap { grid-template-columns:96px minmax(0,1fr); gap:12px; }
  .dashboard-donut { width:96px; }
}
@media print {
  html.admin-shell,html.admin-shell body,html.admin-shell .app,html.admin-shell .main,html.admin-shell .content-scroll { height:auto!important; overflow:visible!important; }
  html.admin-shell .app { position:static!important; width:auto!important; }
  html.admin-shell .app,html.admin-shell .main { display:block!important; }
  .app-header, .sidebar, .topbar, .app-actions, #picker, #printBtn, #csvBtn { display:none !important; }
  .app-main, .content { margin:0 !important; padding:0 !important; }
  .card { box-shadow:none !important; border:1px solid #e2e8f0 !important; }
  body { background:#fff !important; }
}

@media (min-width: 921px) {
  .app.nav-collapsed { --sidebar-w:72px; }
  .app.nav-collapsed .content { max-width:1560px; }
  .app.nav-collapsed .sidebar { padding-inline:8px; }
  .app.nav-collapsed .shortcut-header { justify-content:center; padding-inline:0; }
  .app.nav-collapsed .shortcut-heading,
  .app.nav-collapsed .shortcut-list .nav-link>span:not(.badge-count),
  .app.nav-collapsed .shortcut-empty,
  .app.nav-collapsed .nav-tutorials>span,
  .app.nav-collapsed .nav-customize-copy,
  .app.nav-collapsed .nav-customize-change,
  .app.nav-collapsed .sidebar .user .meta,
  .app.nav-collapsed .sidebar .sidebar-user-actions { display:none; }
  .app.nav-collapsed .nav-collapse,
  .app.nav-collapsed .nav-customize { justify-content:center; min-height:44px; padding-inline:0; }
  .app.nav-collapsed .shortcut-list { padding-right:0; }
  .app.nav-collapsed .shortcut-list .nav-link,
  .app.nav-collapsed .nav-tutorials { position:relative; justify-content:center; min-height:44px; padding:8px; }
  .app.nav-collapsed .shortcut-list .nav-link .badge-count { position:absolute; top:1px; right:1px; min-width:16px; margin:0; padding:0 4px; font-size:9px; line-height:16px; text-align:center; }
  .app.nav-collapsed .sidebar .user { justify-content:center; padding:12px 0 4px; }
}
@media (min-width:921px) and (max-width:1100px) {
  .app-brand .name small { display:none; }
  .app-brand .brand-swoosh { width:86px; }
  .top-primary-nav { gap:1px; margin-left:8px; padding-left:8px; }
  .top-primary-nav .nav-link { gap:5px; padding-inline:9px; font-size:13px; }
  .top-utilities { gap:6px; padding-left:8px; }
}

@media (max-width: 920px) {
  .app { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .app-header { display:none; }
  .main { grid-column:1; grid-row:1; height:100%; }
  .sidebar { position:fixed; left:0; top:0; z-index:120; width:min(320px,calc(100vw - 44px)); height:100vh; height:100dvh; padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom)); overflow:hidden; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .sidebar-mobile-brand { display:flex; flex:none; padding:5px 9px 14px; }
  .sidebar-mobile-brand .brand-swoosh { width:112px; }
  .desktop-shortcuts { display:none; }
  .mobile-navigation { display:block; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
  .nav-collapse { display:none; }
  .menu-toggle { display: inline-flex; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .content { padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); }
  .topbar { padding:max(14px,env(safe-area-inset-top)) 16px 14px; }
  .btn.topbar-bell { display:inline-flex; }
  .li-row { grid-template-columns:minmax(0,1fr) 64px 122px 48px 24px; }
  .daygrid { grid-template-columns:minmax(120px,1fr) 1fr 1fr; }
  .daygrid label { grid-column:2 / 4; }
  .mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:repeat(var(--mobile-nav-items,4),1fr); min-height:64px; padding:5px 8px max(5px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); }
  .mobile-bottom-link { display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; border-radius:8px; background:transparent; color:var(--muted); font:650 10px var(--font); text-decoration:none; cursor:pointer; }
  .mobile-bottom-link:hover { color:var(--ink); text-decoration:none; }
  .mobile-bottom-link.active { background:var(--brand-tint); color:var(--brand-700); }
  .mobile-bottom-link svg { width:19px; height:19px; }
  .help-launcher { right:14px!important; bottom:calc(76px + env(safe-area-inset-bottom))!important; width:44px; min-height:44px; padding:0; justify-content:center; border-radius:50%; box-shadow:var(--shadow); }
  .help-launcher>span,.help-launcher>kbd { display:none; }
  .help-panel { right:14px; bottom:calc(128px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 150px); }
  .dashboard-action-grid { grid-template-columns:minmax(0,1fr); }
  .dashboard-action-grid .stack,.dashboard-action-grid .card,.dashboard-action-grid .table-wrap { min-width:0; max-width:100%; }
  .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .invoice-priority-summary { flex-direction:column; }
  .invoice-balance { min-height:118px; }
  .invoice-metrics { flex-basis:auto; }
}
@media (max-width: 620px) {
  .session-row { align-items:flex-start; flex-direction:column; }
  .session-row>.btn { align-self:flex-start; }
}
@media (max-width: 700px) {
  .settings-mobile-nav { display:block; }
  .settings-tabs { display:none; }
  .report-controls-row { align-items:stretch; }
  .report-date-field { flex:1 1 calc(50% - 6px); }
  .report-range-presets { width:100%; margin-left:0; flex-wrap:wrap; }
  .report-saved-head,.report-results-head { align-items:stretch; flex-direction:column; }
  .report-saved-list { justify-content:flex-start; }
  .report-metric-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); }
  .report-metric-strip .stat { border:0; }
  .report-metric-empty { max-width:none; }
  table.record-table,table.record-table tbody,table.record-table tr,table.record-table td { display:block; width:100%; }
  table.record-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  table.record-table tbody { display:grid; gap:10px; padding:10px; }
  table.tbl.record-table tr { overflow:hidden; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
  table.tbl.record-table td { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 0; border:0; text-align:left; }
  table.tbl.record-table td:first-child { display:block; padding:2px 0 11px; margin-bottom:5px; border-bottom:1px solid var(--line-2); }
  table.tbl.record-table td:not(:first-child)::before { content:attr(data-label); flex:none; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  table.tbl.record-table tbody tr:hover { background:var(--surface); }
  .lead-record-identity { min-width:0; }
}
@media (max-width: 560px) {
  .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .grid[style] { grid-template-columns: 1fr !important; }
  .topbar { flex-wrap: wrap; }
  .topbar > .actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .topbar h1 { font-size: 17px; }
  .modal-foot { flex-wrap: wrap; }
  .li-row { grid-template-columns:1fr 70px 1fr 46px 24px; }
  .li-row .l_label { grid-column:1 / -1; }
  .daygrid { grid-template-columns:1fr 1fr; }
  .daygrid > span { grid-column:1 / -1; }
  .daygrid label { grid-column:1 / -1; }
  .drawer,.drawer.wide { width:100%; max-width:none; height:100dvh; }
  .drawer .modal-head { padding-top:max(18px,env(safe-area-inset-top)); }
  .topbar { flex-wrap:nowrap; min-height:64px; }
  .topbar>div:nth-child(2) { min-width:0; flex:1; }
  .topbar .sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar>.actions { width:auto; margin-left:auto; justify-content:flex-end; flex-wrap:nowrap; }
  .topbar #pageActions { display:flex; }
  .topbar #pageActions > :not(.btn-primary):not(.view-actions),
  .topbar #pageActions .view-actions > :not(.btn-primary) { display:none; }
  .topbar #pageActions .view-actions { display:flex; }
  .topbar #pageActions .btn-primary { width:38px; padding:0; gap:0; font-size:0; }
  .topbar #pageActions .btn-primary svg { width:16px; height:16px; }
  .topbar .page-actions-more:not([hidden]) { display:inline-flex; width:38px; padding:0; }
  .topbar .page-actions-more span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .topbar #pageActions.mobile-actions-open { position:fixed; top:calc(70px + env(safe-area-inset-top)); right:12px; z-index:125; display:flex; width:min(300px,calc(100vw - 24px)); max-height:calc(100dvh - 150px - env(safe-area-inset-top)); padding:10px; overflow:auto; align-items:stretch; flex-direction:column; gap:7px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-lg); }
  .topbar #pageActions.mobile-actions-open > :not([hidden]),
  .topbar #pageActions.mobile-actions-open .view-actions,
  .topbar #pageActions.mobile-actions-open .view-actions > * { display:flex; width:100%; min-width:0; }
  .topbar #pageActions.mobile-actions-open .view-actions { align-items:stretch; flex-direction:column; gap:7px; }
  .topbar #pageActions.mobile-actions-open .btn-primary { width:100%; padding:10px 16px; gap:8px; font-size:14px; }
  .metric-strip { grid-template-columns:1fr 1fr; }
  .metric-strip .stat:nth-child(2n) { border-right:0; }
  .metric-strip .stat:nth-child(n+3) { border-top:1px solid var(--line); }
  .work-queue__item { grid-template-columns:30px minmax(0,1fr); padding:12px 14px; }
  .work-queue__item>b { grid-column:2; }
  .filter-grid { grid-template-columns:1fr; }
  .lead-overdue-notice { grid-template-columns:36px minmax(0,1fr); }
  .lead-overdue-notice__action { display:none; }
  .invoice-toolbar { align-items:stretch; flex-direction:column-reverse; }
  .invoice-toolbar .search { width:100%; }
  .invoice-metrics { grid-template-columns:1fr; }
  .invoice-metric { min-height:92px; border-left:0; border-top:1px solid var(--line-2); }
  .invoice-metric:first-child { border-top:0; }
  .report-date-field { flex-basis:100%; }
  .report-controls-row>#applyBtn { width:100%; }
  .report-picker { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .report-picker .chip { flex:none; }
  .rep-bar.report-chart-row { grid-template-columns:minmax(72px,90px) minmax(90px,1fr); gap:8px; }
  .report-chart-value { grid-column:2; }
  .report-accounting-summary { grid-template-columns:1fr; }
  .sched-toolbar .segmented button:not([data-v="day"]) { display:none; }
  .sched-toolbar .segmented { grid-template-columns:1fr; }
  .schedule-day-card .slot-row { align-items:flex-start; }
}

/* Contextual, non-blocking help launcher */
.help-launcher { position:fixed; right:22px; bottom:22px; z-index:95; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line)); border-radius:999px; background:var(--brand); color:#fff; box-shadow:var(--shadow-lg); font-weight:800; cursor:pointer; }
.help-launcher kbd { border:1px solid rgba(255,255,255,.35); border-radius:5px; padding:0 5px; color:#fff; font:11px var(--font); }
.help-panel { position:fixed; right:22px; bottom:76px; z-index:96; width:min(390px,calc(100vw - 28px)); max-height:min(650px,calc(100vh - 100px)); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); }
.help-panel[hidden] { display:none; }
.help-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:18px 18px 12px; }
.help-panel-head strong,.help-panel-head span { display:block; }
.help-panel-head span { margin-top:2px; color:var(--muted); font-size:12px; }
.help-panel-head .x { border:0; background:none; color:var(--muted); font-size:24px; cursor:pointer; }
.help-search { display:block; padding:0 18px 12px; }
.help-search input { width:100%; }
.help-results { padding:0 10px 10px; }
.help-result { display:grid; grid-template-columns:1fr auto; gap:3px 10px; padding:11px; border-radius:9px; color:var(--ink); text-decoration:none; }
.help-result:hover,.help-result:focus-visible { background:var(--surface-2); }
.help-result span { grid-column:1/-1; color:var(--brand); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.help-result strong { font-size:13px; }
.help-result small { color:var(--muted); font-size:11px; white-space:nowrap; }
.help-empty { padding:24px 10px; }
.help-panel-foot { display:flex; justify-content:space-between; gap:12px; padding:13px 18px; border-top:1px solid var(--line); background:var(--surface-2); }
.help-panel-foot a { color:var(--brand); font-size:11px; font-weight:800; text-decoration:none; }
@media (max-width:560px) { .help-panel { width:calc(100vw - 28px); } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .app,.sidebar { transition:none!important; }
}

/* --- Shortcut rail footer + customizer ----------------------------------- */
.nav-tutorials { margin-top:8px; border-top:1px solid rgba(255,255,255,.09); border-radius:0; padding-top:12px; padding-bottom:6px; }
.nav-tutorials:hover { background:transparent; border-color:transparent; border-top-color:rgba(255,255,255,.09); }
.nav-tutorials .nav-tutorials-ext { margin-left:auto; color:#6C8299; font-size:12px; }
.nav-tutorials:hover .nav-tutorials-ext { color:#63C1FF; }
.nav-customize { display:flex; align-items:center; gap:9px; width:100%; min-height:44px; margin-top:4px; padding:9px 10px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(255,255,255,.05); color:#C6D3DF; font:inherit; text-align:left; cursor:pointer; transition:background .16s, border-color .16s; }
.nav-customize:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.nav-customize svg { color:#63C1FF; flex:none; }
.nav-customize-copy { display:grid; min-width:0; line-height:1.25; }
.nav-customize-copy small { color:#8CA2B5; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } /* ≥4.5:1 even on the hover-lifted background */
.nav-customize-copy strong { color:#fff; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-customize-change { flex:none; margin-left:auto; color:#63C1FF; font-size:11px; font-weight:800; }

.shortcut-customizer-modal { display:flex; max-height:calc(100dvh - 36px); flex-direction:column; overflow:hidden; }
.shortcut-customizer-modal .modal-head,.shortcut-customizer-modal .modal-foot { flex:none; }
.shortcut-customizer-modal .modal-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.nav-custom-all { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 15px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.nav-custom-all>span:first-child { min-width:0; }
.nav-custom-all strong,.nav-custom-all small { display:block; }
.nav-custom-all small { margin-top:2px; color:var(--muted); font-size:12px; }
.nav-custom-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.nav-custom-count { margin:14px 2px 8px; color:var(--muted); font-size:12px; font-weight:700; }
.shortcut-order-card { margin-bottom:14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.shortcut-order-head h4 { font-size:13px; }
.shortcut-order-head p { margin:2px 0 10px; color:var(--muted); font-size:11px; }
.shortcut-order-list { display:grid; max-height:280px; gap:5px; overflow-y:auto; overscroll-behavior:contain; }
.shortcut-order-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; min-height:44px; padding:5px 6px; border:1px solid var(--line-2); border-radius:9px; background:var(--surface-2); }
.shortcut-order-position { color:var(--muted); font-size:11px; font-weight:800; text-align:center; }
.shortcut-order-label { display:flex; align-items:center; min-width:0; gap:8px; color:var(--ink-2); font-size:12px; font-weight:700; }
.shortcut-order-label svg { flex:none; color:var(--brand); }
.shortcut-order-label span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shortcut-order-actions { display:flex; align-items:center; gap:5px; }
.shortcut-order-actions button { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:700; cursor:pointer; }
.shortcut-order-actions button:hover:not(:disabled) { border-color:color-mix(in srgb,var(--brand) 35%,var(--line)); color:var(--brand-700); }
.shortcut-order-actions button:disabled { opacity:.42; cursor:not-allowed; }
.shortcut-order-empty { padding:14px; border:1px dashed var(--line); border-radius:9px; color:var(--muted); font-size:12px; text-align:center; }
.nav-custom-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.nav-custom-group { min-width:0; margin:0; padding:8px; border:1px solid var(--line); border-radius:12px; }
.nav-custom-group legend { padding:0 6px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.nav-custom-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding:7px 8px; border-radius:8px; cursor:pointer; }
.nav-custom-row:hover { background:var(--surface-2); }
.nav-custom-label { display:flex; align-items:center; gap:9px; min-width:0; color:var(--ink-2); font-size:13px; font-weight:650; }
.nav-custom-label svg { flex:none; color:var(--brand); }
.nav-custom-label span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:620px) {
  .nav-custom-groups { grid-template-columns:minmax(0,1fr); }
  .shortcut-order-row { grid-template-columns:24px minmax(0,1fr); }
  .shortcut-order-actions { grid-column:2; justify-content:flex-start; }
}

/* Experience-level option cards used by the getting-started tour. */
.level-options { display:grid; gap:9px; }
.level-option { display:flex; align-items:flex-start; gap:12px; width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font:inherit; text-align:left; cursor:pointer; transition:border-color .14s, box-shadow .14s, background .14s; }
.level-option:hover { border-color:#9FB3C6; background:var(--surface-2); }
.level-option.selected { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); background:var(--brand-tint-2); }
.level-option-dot { flex:none; width:18px; height:18px; margin-top:2px; border:2px solid #B9C7D6; border-radius:50%; background:#fff; transition:border-color .14s, background .14s; }
.level-option.selected .level-option-dot { border-color:var(--brand); background:var(--brand); box-shadow:inset 0 0 0 3px #fff; }
.level-option-copy { display:grid; gap:2px; min-width:0; }
.level-option-copy strong { font-size:14px; color:var(--ink); }
.level-option-copy small { color:var(--muted); font-size:12px; line-height:1.45; }

/* --- Getting-started tour (skippable slideshow) --------------------------- */
.tour-overlay { position:fixed; inset:0; z-index:260; display:grid; place-items:center; padding:18px; background:rgba(5,14,24,.64); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); overflow:auto; }
.tour-card { position:relative; display:grid; grid-template-columns:300px minmax(0,1fr); width:min(780px,100%); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-lg); overflow:hidden; animation:pop .18s ease; outline:none; }
.tour-visual { display:grid; place-items:center; align-content:center; gap:10px; min-height:330px; padding:26px 18px; background:linear-gradient(165deg,#0A1C2E 20%,#123153 100%); }
.tour-skip { position:absolute; top:13px; right:16px; z-index:2; border:0; background:none; color:var(--muted); font:650 13px var(--font); cursor:pointer; padding:6px 8px; border-radius:8px; }
.tour-skip:hover { color:var(--ink); background:var(--surface-2); }
.tour-body { display:flex; flex-direction:column; padding:30px 32px 22px; }
.tour-progress { margin:0 0 10px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.tour-body h2 { font-size:22px; letter-spacing:-.02em; padding-right:64px; }
.tour-text { margin:10px 0 0; color:var(--ink-2); font-size:15px; line-height:1.62; }
.tour-picker { margin-top:14px; }
.tour-picker .level-option { padding:10px 12px; }
.tour-picker .level-option-copy strong { font-size:13px; }
.tour-picker .level-option-copy small { font-size:11.5px; }
.tour-nav { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:auto; padding-top:22px; }
.tour-dots { display:flex; gap:7px; }
.tour-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .16s; }
.tour-dots i.on { background:var(--brand); }
.help-tour-replay { font-size:11px; font-weight:800; }
@media (max-width:700px) {
  .tour-card { grid-template-columns:minmax(0,1fr); width:min(460px,100%); }
  .tour-visual { min-height:0; padding:20px 16px 14px; }
  .tour-visual svg { max-width:200px; height:auto; }
  .tour-visual img { width:64px; height:64px; }
  .tour-skip { color:#C6D3DF; }
  .tour-skip:hover { color:#fff; background:rgba(255,255,255,.1); }
  .tour-body { padding:20px 20px 16px; }
  .tour-body h2 { font-size:19px; padding-right:0; }
  .tour-text { font-size:14px; }
}

/* Connect-your-site wizard additions */
.topbar-connect span { white-space:nowrap; }
@media (max-width:1100px) { .topbar-connect span { display:none; } .topbar-connect { width:38px; padding:0; justify-content:center; } }
.connect-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }
.connect-option { display:grid; gap:3px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font:inherit; text-align:left; cursor:pointer; transition:border-color .14s, background .14s, box-shadow .14s; }
.connect-option:hover,.connect-option:focus-visible { border-color:var(--brand); background:var(--brand-tint-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.connect-option strong { font-size:14px; color:var(--ink); }
.connect-option small { color:var(--muted); font-size:11.5px; }
.connect-copy { display:flex; align-items:stretch; gap:8px; margin-top:14px; }
.connect-copy pre { flex:1; min-width:0; margin:0; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink); font:12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow:auto; white-space:pre-wrap; word-break:break-all; }
.connect-copy--block pre { white-space:pre-wrap; word-break:break-word; }
.connect-copy .btn { align-self:center; flex:none; }
@media (max-width:700px) { .connect-grid { grid-template-columns:1fr; } .connect-copy { flex-direction:column; } .connect-copy .btn { align-self:flex-start; } }
.connect-grid[hidden],.connect-copy[hidden] { display:none !important; }