:root {
  color-scheme: light;
  --navy: #17245b;
  --navy-deep: #101743;
  --teal: #12a6b8;
  --teal-strong: #07899f;
  --sky: #0aa4df;
  --sky-soft: #dff4fb;
  --green: #159447;
  --green-soft: #e7f7ed;
  --bg-0: #f3f8fb;
  --bg-1: #ffffff;
  --bg-2: #edf5f8;
  --bg-3: #e3eef3;
  --surface: rgba(255, 255, 255, .96);
  --surface-raised: #ffffff;
  --surface-soft: #f7fbfd;
  --line: #d6e3e9;
  --line-strong: #b8ccd6;
  --text: #17245b;
  --text-soft: #40566a;
  --muted: #6d8291;
  --brand: #0aa4df;
  --brand-strong: #07899f;
  --brand-ink: #ffffff;
  --cyan: #12a6b8;
  --blue: #0a84c6;
  --amber: #b86b08;
  --red: #c83d4d;
  --sidebar-w: 238px;
  --topbar-h: 68px;
  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --shadow-sm: 0 8px 24px rgba(23, 36, 91, .08);
  --shadow-lg: 0 24px 64px rgba(23, 36, 91, .16);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-display: "Inter", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg-0); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 78% -8%, rgba(10, 164, 223, .13), transparent 32rem), radial-gradient(circle at 18% 105%, rgba(18, 166, 184, .09), transparent 28rem), linear-gradient(135deg, #f8fcfd 0%, var(--bg-0) 52%, #eef7fa 100%); color: var(--text); font: 14px/1.5 var(--font-body); }
button, input, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
button, input, select, textarea { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(10, 164, 223, .55); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -64px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--brand); color: var(--brand-ink); font-weight: 800; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); transition: grid-template-columns .28s var(--ease); }
.app-shell.sidebar-collapsed { grid-template-columns: 82px minmax(0, 1fr); }
.sidebar { position: sticky; z-index: 40; top: 0; height: 100vh; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(8, 15, 25, .97); box-shadow: 18px 0 44px rgba(0,0,0,.1); }
.brand-row { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 15px 0 18px; border-bottom: 1px solid var(--line); }
.brand { min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(240, 200, 110, .58); border-radius: 12px; background: #171a1d; box-shadow: inset 0 0 0 5px #0b111a; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; border-radius: 50%; background: var(--brand); }
.brand-mark::before { width: 7px; height: 7px; left: 8px; top: 14px; }
.brand-mark::after { width: 7px; height: 7px; right: 8px; top: 9px; }
.brand-mark span { width: 7px; height: 7px; right: 9px; bottom: 7px; }
.brand-mark.large { width: 48px; height: 48px; border-radius: 15px; }
.brand-mark.large::before { left: 11px; top: 20px; }.brand-mark.large::after { right: 11px; top: 12px; }.brand-mark.large span { right: 12px; bottom: 9px; }
.brand-copy { min-width: 0; display: grid; white-space: nowrap; }
.brand-copy strong { font: 700 16px/1.15 var(--font-display); letter-spacing: .02em; }
.brand-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.icon-button { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); transition: color .18s, background .18s, border-color .18s, transform .18s; }
.icon-button:hover { color: var(--text); background: var(--bg-3); border-color: var(--line); }
.icon-button:active { transform: scale(.95); }
.primary-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 13px 11px 20px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.nav-label { margin: 18px 10px 7px; color: #647187; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.nav-label:first-child { margin-top: 3px; }
.nav-group { margin: 8px 0; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); }
.nav-group[hidden] { display: none; }
.nav-group summary { min-height: 44px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 13px; color: rgba(236,248,251,.9); font-weight: 850; list-style: none; }
.nav-group summary > span { grid-column: 1; grid-row: 1; min-width: 0; }
.nav-group summary > small { grid-column: 1; grid-row: 2; min-width: 0; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { grid-column: 2; grid-row: 1 / 3; content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; transition: transform .18s var(--ease); }
.nav-group[open] summary::after { transform: rotate(225deg); }
.nav-group summary small { display: block; margin-top: 2px; color: rgba(226,245,249,.58); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nav-group summary:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-subitems { display: grid; gap: 1px; padding: 0 7px 8px 11px; }
.nav-subitems .nav-item { min-height: 37px; margin: 1px 0; padding-block: 6px; }
.nav-item { position: relative; width: 100%; min-height: 42px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 11px; margin: 2px 0; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: #9ca9bb; text-align: left; transition: color .18s, background .18s, border-color .18s, transform .18s; }
body:not(.authorised) .nav-item[data-permission], body:not(.authorised) .nav-label { display: none; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { color: var(--text); background: #101b2a; transform: translateX(2px); }
.nav-item.active { color: var(--brand-strong); background: rgba(240, 200, 110, .09); border-color: rgba(240, 200, 110, .16); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 4px; background: var(--brand); }
.nav-count { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--bg-3); color: var(--text-soft); text-align: center; font-size: 10px; font-weight: 800; }
.nav-count.warn { background: rgba(240,184,95,.14); color: #ffd394; }
.sidebar-footer { padding: 14px; border-top: 1px solid var(--line); }
.safety-lock { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border-radius: var(--radius-sm); background: rgba(85,214,164,.055); border: 1px solid rgba(85,214,164,.13); }
.safety-lock span:last-child { display: grid; min-width: 0; }
.safety-lock strong { color: #bbf6dc; font-size: 12px; white-space: nowrap; }.safety-lock small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(130,144,165,.1); }
.status-dot.safe, .status-dot.fresh { background: var(--green); box-shadow: 0 0 0 4px rgba(85,214,164,.1); }
.status-dot.warn, .status-dot.stale { background: var(--amber); box-shadow: 0 0 0 4px rgba(240,184,95,.1); }
.status-dot.error { background: var(--red); box-shadow: 0 0 0 4px rgba(255,126,136,.1); }
.app-shell.sidebar-collapsed .brand-copy, .app-shell.sidebar-collapsed .nav-label, .app-shell.sidebar-collapsed .nav-item span, .app-shell.sidebar-collapsed .safety-lock span:last-child { display: none; }
.app-shell.sidebar-collapsed .nav-group summary span, .app-shell.sidebar-collapsed .nav-group summary small, .app-shell.sidebar-collapsed .nav-group summary::after { display: none; }
.app-shell.sidebar-collapsed .nav-group { border-color: transparent; background: transparent; }
.app-shell.sidebar-collapsed .nav-subitems { padding: 0; }
.app-shell.sidebar-collapsed .brand-row { justify-content: center; padding: 0; }.app-shell.sidebar-collapsed .brand { display: none; }.app-shell.sidebar-collapsed .primary-nav { padding-inline: 12px; }.app-shell.sidebar-collapsed .nav-item { display: grid; grid-template-columns: 1fr; place-items: center; padding: 9px; }.app-shell.sidebar-collapsed .sidebar-footer { padding-inline: 20px; }.app-shell.sidebar-collapsed .safety-lock { justify-content: center; padding: 10px; }

.main-column { min-width: 0; }
.topbar { position: sticky; z-index: 30; top: 0; height: var(--topbar-h); display: grid; grid-template-columns: minmax(180px,1fr) minmax(240px,440px) minmax(260px,1fr); align-items: center; gap: 20px; padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(7,12,20,.88); backdrop-filter: blur(18px); }
.topbar-leading, .topbar-actions, .breadcrumbs, .health-pill { display: flex; align-items: center; }
.topbar-leading { min-width: 0; gap: 12px; }.mobile-menu { display: none; }
.breadcrumbs { min-width: 0; gap: 8px; color: var(--muted); font-size: 12px; }.breadcrumbs svg { width: 13px; height: 13px; }.breadcrumbs strong { overflow: hidden; color: var(--text-soft); text-overflow: ellipsis; white-space: nowrap; }
.global-search-wrap { position: relative; display: flex; align-items: center; }
.global-search-wrap > svg { position: absolute; left: 12px; width: 17px; color: var(--muted); pointer-events: none; }
.global-search-wrap input { width: 100%; height: 40px; padding: 0 43px 0 39px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14,24,38,.78); outline: none; transition: border-color .18s, box-shadow .18s, background .18s; }
.global-search-wrap input:focus { border-color: rgba(101,210,208,.55); background: var(--bg-2); box-shadow: 0 0 0 3px rgba(101,210,208,.08); }
.global-search-wrap kbd { position: absolute; right: 11px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-0); color: var(--muted); font: 11px var(--font-body); }
.topbar-actions { justify-content: flex-end; gap: 8px; min-width: 0; }
.health-pill { gap: 8px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font-size: 11px; white-space: nowrap; }
.notification-button { position: relative; }.notification-button > span { position: absolute; right: -2px; top: -3px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg-0); border-radius: 999px; background: var(--amber); color: #201303; font-size: 9px; font-weight: 900; }
.profile-menu { position: relative; }.profile-menu summary { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 4px 7px; border-radius: var(--radius-sm); list-style: none; }.profile-menu summary::-webkit-details-marker { display: none; }.profile-menu summary:hover { background: var(--bg-3); }.profile-menu summary > svg { width: 14px; color: var(--muted); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font: 800 11px var(--font-display); }
.profile-copy { min-width: 0; display: grid; }.profile-copy strong { font-size: 12px; }.profile-copy small { color: var(--muted); font-size: 10px; }
.profile-popover { position: absolute; z-index: 80; right: 0; top: calc(100% + 10px); width: 270px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-lg); }
.profile-popover p { display: grid; gap: 4px; margin: 4px 5px 10px; }.profile-popover p span { color: var(--muted); font-size: 11px; }.profile-popover button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--red); text-align: left; }.profile-popover button:hover { background: rgba(255,126,136,.08); }.profile-popover button svg { width: 17px; }

.context-bar { min-height: 60px; display: flex; align-items: flex-end; gap: 10px; padding: 10px 26px; border-bottom: 1px solid var(--line); background: #0a111c; }
.context-field { min-width: 142px; display: grid; gap: 3px; }.context-field.grow { min-width: 190px; max-width: 280px; }.context-field label, .custom-range span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-1); color: var(--text); outline: none; transition: border-color .18s, box-shadow .18s, background .18s; }
input, select { height: 40px; padding: 0 11px; } textarea { min-height: 104px; padding: 10px 11px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: rgba(101,210,208,.55); box-shadow: 0 0 0 3px rgba(101,210,208,.08); }
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .52; }
.custom-range { display: flex; gap: 8px; }.custom-range label { width: 144px; display: grid; gap: 3px; }

#workspace { min-width: 0; padding: 30px clamp(18px,3vw,42px) 56px; }
.auth-gate { min-height: calc(100vh - 190px); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,520px); align-items: center; gap: clamp(36px,7vw,110px); max-width: 1240px; margin: 0 auto; padding: 30px 0 60px; }
.auth-copy { max-width: 650px; }.eyebrow { display: inline-block; color: var(--brand); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.auth-copy h1, .page-heading h1 { margin: 13px 0 16px; font-family: var(--font-display); font-weight: 650; letter-spacing: -.025em; }.auth-copy h1 { max-width: 680px; font-size: clamp(42px,6vw,74px); line-height: .98; }.auth-copy > p { max-width: 590px; color: var(--text-soft); font-size: 17px; line-height: 1.65; }
.trust-list { display: flex; flex-wrap: wrap; gap: 11px; margin: 28px 0 0; padding: 0; list-style: none; }.trust-list li { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font-size: 11px; }.trust-list svg { width: 15px; color: var(--green); }
.auth-card { display: grid; gap: 18px; padding: clamp(24px,4vw,38px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-card-head { display: flex; align-items: center; gap: 15px; margin-bottom: 3px; }.auth-card-head h2 { margin: 0; font: 650 22px var(--font-display); }.auth-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.field { display: grid; gap: 7px; }.field > span:first-child { color: var(--text-soft); font-size: 12px; font-weight: 700; }.field b { color: var(--brand); }.field small { color: var(--muted); }.password-field { position: relative; display: block; }.password-field input { padding-right: 44px; }.password-field button { position: absolute; right: 2px; top: 2px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); }.password-field button svg { width: 17px; }
.auth-footnote { margin: -3px 0 0; color: var(--muted); font-size: 10px; text-align: center; }.form-error { margin: 0; padding: 9px 11px; border: 1px solid rgba(255,126,136,.25); border-radius: var(--radius-sm); background: rgba(255,126,136,.07); color: #ffc0c5; font-size: 12px; }

.workspace-view { max-width: 1720px; margin: 0 auto; }
.page-heading { min-height: 74px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }.page-heading h1 { margin: 6px 0 5px; font-size: clamp(27px,3vw,38px); line-height: 1.05; }.page-heading p { margin: 0; color: var(--muted); }.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 750; text-decoration: none; transition: transform .16s, background .18s, border-color .18s, color .18s, box-shadow .18s; }.button svg { width: 16px; }.button:hover:not(:disabled) { transform: translateY(-1px); }.button:active:not(:disabled) { transform: translateY(0) scale(.98); }.button:disabled { cursor: not-allowed; opacity: .45; }
.button.primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 8px 22px rgba(240,200,110,.12); }.button.primary:hover { background: var(--brand-strong); }.button.secondary { border-color: var(--line); background: var(--bg-2); color: var(--text-soft); }.button.secondary:hover { border-color: var(--line-strong); background: var(--bg-3); color: var(--text); }.button.ghost { background: transparent; color: var(--text-soft); }.button.danger { border-color: rgba(255,126,136,.25); background: rgba(255,126,136,.11); color: #ffc0c5; }.button.compact { min-height: 37px; padding-inline: 11px; font-size: 12px; }.button.full { width: 100%; }
.inline-alert { margin-bottom: 18px; padding: 11px 14px; border: 1px solid rgba(240,184,95,.23); border-radius: var(--radius-sm); background: rgba(240,184,95,.07); color: #f7d7a8; }.inline-alert.error { border-color: rgba(255,126,136,.24); background: rgba(255,126,136,.07); color: #ffc0c5; }.inline-alert.success { border-color: rgba(85,214,164,.23); background: rgba(85,214,164,.06); color: #b9f3dc; }
.view-content { display: grid; gap: 18px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.metric-card { position: relative; min-height: 132px; display: grid; align-content: space-between; padding: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.metric-card::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 82px; height: 82px; border: 18px solid currentColor; border-radius: 50%; opacity: .035; }.metric-card > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.metric-card strong { margin: 10px 0 4px; font: 650 clamp(25px,3vw,34px)/1 var(--font-display); letter-spacing: -.02em; }.metric-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }.delta { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-weight: 800; }.delta.negative { color: var(--red); }.delta.neutral { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }.span-8 { grid-column: span 8; }.span-7 { grid-column: span 7; }.span-6 { grid-column: span 6; }.span-5 { grid-column: span 5; }.span-4 { grid-column: span 4; }.span-3 { grid-column: span 3; }.span-12 { grid-column: 1/-1; }
.command-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); scrollbar-width: thin; }
.command-tab { min-height: 38px; flex: 0 0 auto; padding: 0 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-soft); font-size: 11px; font-weight: 750; }
.command-tab:hover { border-color: var(--line); background: #fff; color: var(--navy); }
.command-tab.active { border-color: rgba(18,166,184,.2); background: linear-gradient(135deg,var(--teal),var(--sky)); color: #fff; box-shadow: 0 6px 16px rgba(10,164,223,.18); }
.evidence-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: -8px; color: var(--muted); font-size: 10px; }
.evidence-strip span { display: inline-flex; align-items: center; gap: 6px; }.evidence-strip svg { width: 14px; color: var(--green); }
.briefing { display: grid; gap: 2px; }.briefing-row { display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }.briefing-row:last-child { border-bottom: 0; }.briefing-mark { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: linear-gradient(135deg,var(--teal),var(--sky)); box-shadow: 0 0 0 4px rgba(18,166,184,.08); }.briefing-row strong { color: var(--navy); font-size: 12px; }.briefing-row p { margin: 3px 0; color: var(--text-soft); font-size: 12px; }.briefing-row small { color: var(--muted); font-size: 9px; }
.identity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.identity-grid div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }.identity-grid span,.identity-grid strong { display: block; }.identity-grid span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.identity-grid strong { margin-top: 4px; overflow-wrap: anywhere; color: var(--navy); font-size: 11px; }
.intelligence-card { margin-bottom: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }.intelligence-card:last-child { margin-bottom: 0; }.intelligence-evidence { display: grid; gap: 5px; padding: 10px 15px 13px; background: var(--surface-soft); }.intelligence-evidence p { margin: 0; color: var(--text-soft); font-size: 10px; }.intelligence-evidence b { color: var(--navy); }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); }.panel-header h2 { margin: 0; font: 650 15px var(--font-display); letter-spacing: .01em; }.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.panel-actions { display: flex; align-items: center; gap: 7px; }
.panel-body { padding: 17px; }.panel-body.flush { padding: 0; }.panel-footer { padding: 11px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.chart-wrap { min-height: 250px; display: flex; align-items: center; justify-content: center; }.chart { width: 100%; min-height: 220px; }.chart svg { width: 100%; height: 220px; overflow: visible; }.chart .axis { stroke: var(--line); stroke-width: 1; }.chart .area { stroke: none; fill: rgba(101,210,208,.09); }.chart .line { fill: none; stroke: var(--cyan); stroke-width: 2.2; }.chart .line.secondary { stroke: var(--brand); }.chart .point { fill: var(--bg-1); stroke: var(--cyan); stroke-width: 2; }.chart-labels { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.bar-chart { display: grid; gap: 10px; }.bar-row { display: grid; grid-template-columns: minmax(90px,1fr) minmax(120px,3fr) 42px; align-items: center; gap: 10px; }.bar-row label { overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--bg-3); }.bar-track span { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }.bar-row:nth-child(2n) .bar-track span { background: var(--brand); }.bar-row strong { text-align: right; font-size: 11px; }
.funnel { display: grid; gap: 8px; }.funnel-step { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: auto; padding: 0 14px; border: 1px solid rgba(101,210,208,.18); border-radius: 9px; background: rgba(101,210,208,.06); }.funnel-step:nth-child(2) { width: 86%; }.funnel-step:nth-child(3) { width: 72%; }.funnel-step:nth-child(4) { width: 58%; }.funnel-step span { color: var(--text-soft); font-size: 11px; }.funnel-step strong { font-family: var(--font-display); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(10,17,29,.48); }.toolbar-search { position: relative; flex: 1 1 230px; max-width: 360px; }.toolbar-search svg { position: absolute; left: 10px; top: 10px; width: 17px; color: var(--muted); }.toolbar-search input { padding-left: 35px; }.toolbar select { width: auto; min-width: 140px; }.toolbar-meta { margin-left: auto; color: var(--muted); font-size: 10px; }
.table-wrap { width: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }.data-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }.data-table th { position: sticky; z-index: 2; top: 0; background: #101a29; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }.data-table th button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; }.data-table tbody tr { transition: background .16s; }.data-table tbody tr:hover { background: rgba(125,167,255,.035); }.data-table td { color: var(--text-soft); font-size: 12px; }.data-table td strong { color: var(--text); }.cell-main { display: grid; gap: 2px; }.cell-main small, .data-table small { color: var(--muted); }.numeric { text-align: right !important; font-variant-numeric: tabular-nums; }.row-actions { display: flex; justify-content: flex-end; gap: 5px; }.row-actions button { min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--text-soft); font-size: 10px; font-weight: 800; }.row-actions button:hover { border-color: var(--line-strong); color: var(--text); }
.checkbox { width: 16px; height: 16px; accent-color: var(--brand); }.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }.pagination p { margin: 0; color: var(--muted); font-size: 10px; }.pagination div { display: flex; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; min-height: 24px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--text-soft); font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.badge::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: currentColor; opacity: .7; }.badge.success, .badge.active, .badge.connected, .badge.approved, .badge.won, .badge.completed, .badge.fresh { border-color: rgba(85,214,164,.2); background: rgba(85,214,164,.07); color: #9ce9ca; }.badge.warning, .badge.pending, .badge.onboarding, .badge.stale, .badge.in_progress { border-color: rgba(240,184,95,.2); background: rgba(240,184,95,.07); color: #f6cd91; }.badge.error, .badge.rejected, .badge.lost, .badge.suspended, .badge.overdue { border-color: rgba(255,126,136,.2); background: rgba(255,126,136,.07); color: #ffb1b8; }.badge.info, .badge.open, .badge.draft, .badge.qualified { border-color: rgba(125,167,255,.2); background: rgba(125,167,255,.07); color: #b5ccff; }
.empty-state, .error-state, .permission-state { min-height: 220px; display: grid; place-items: center; padding: 36px 20px; text-align: center; }.empty-state > div, .error-state > div, .permission-state > div { max-width: 390px; }.state-icon { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); color: var(--muted); }.state-icon svg { width: 23px; }.empty-state h3, .error-state h3, .permission-state h3 { margin: 0 0 6px; font: 650 16px var(--font-display); }.empty-state p, .error-state p, .permission-state p { margin: 0 0 15px; color: var(--muted); font-size: 12px; }
.skeleton-grid { display: grid; gap: 12px; }.skeleton { position: relative; overflow: hidden; border-radius: 8px; background: var(--bg-3); }.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation: shimmer 1.4s infinite; }.skeleton.line { height: 13px; }.skeleton.block { height: 110px; }
.list { display: grid; }.list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); }.list-row:last-child { border-bottom: 0; }.list-row > div:first-child { min-width: 0; }.list-row strong, .list-row small { display: block; }.list-row strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.list-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.kanban { display: grid; grid-template-columns: repeat(4,minmax(250px,1fr)); gap: 12px; padding-bottom: 4px; overflow-x: auto; }.kanban-column { min-height: 360px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(10,17,29,.6); }.kanban-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 12px; }.kanban-head h3 { margin: 0; font: 650 12px var(--font-display); }.kanban-head span { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--bg-3); color: var(--muted); text-align: center; font-size: 9px; }.deal-card { margin-bottom: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); box-shadow: var(--shadow-sm); }.deal-card:hover { border-color: var(--line-strong); }.deal-card h4 { margin: 0 0 8px; font-size: 12px; }.deal-card p { display: flex; justify-content: space-between; gap: 8px; margin: 5px 0; color: var(--muted); font-size: 10px; }.deal-card p strong { color: var(--text-soft); }.progress { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: var(--bg-1); }.progress span { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 12px; }.provider-card { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }.provider-head { display: flex; justify-content: space-between; gap: 12px; }.provider-logo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--bg-3); color: var(--brand); font: 800 12px var(--font-display); }.provider-card h3 { margin: 0; font-size: 13px; }.provider-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }.provider-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.provider-meta div { padding: 8px; border-radius: 9px; background: var(--bg-1); }.provider-meta span, .provider-meta strong { display: block; }.provider-meta span { color: var(--muted); font-size: 9px; text-transform: uppercase; }.provider-meta strong { margin-top: 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.erp-line-editor { grid-column: 1/-1; min-width: 0; min-height: 260px; grid-template-rows: auto minmax(160px, auto) auto; display: grid; gap: 10px; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.erp-line-editor .table-wrap { min-width: 0; min-height: 160px; }
.erp-line-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.erp-line-heading span { display: grid; gap: 2px; }
.erp-line-heading strong { color: var(--text); font-size: 12px; }
.erp-line-heading small, .erp-line-help { color: var(--muted); font-size: 10px; }
.erp-line-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); scrollbar-width: thin; }
.erp-line-table { width: 100%; min-width: 1300px; border-collapse: separate; border-spacing: 0; }
.erp-line-table th, .erp-line-table td { padding: 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.erp-line-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.erp-line-table tr:last-child td { border-bottom: 0; }
.erp-line-table input { width: 100%; min-width: 78px; height: 36px; padding: 0 8px; }
.erp-line-table .erp-item-name { min-width: 210px; }
.erp-line-table .erp-item-sku, .erp-line-table .erp-item-hsn, .erp-line-table .erp-item-batch { min-width: 105px; }
.erp-line-table .erp-item-expiry { min-width: 135px; }
.erp-line-table .erp-item-manufacturer { min-width: 145px; }
.entity-dialog:has(.erp-line-editor) { width: min(1180px,calc(100vw - 28px)); }
@media (max-width: 700px) { .erp-line-heading { align-items: stretch; flex-direction: column; } .erp-line-heading button { width: 100%; } }

.entity-dialog, .confirm-dialog { width: min(720px,calc(100vw - 28px)); max-height: min(860px,calc(100vh - 28px)); padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-lg); }.entity-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(2,6,11,.76); backdrop-filter: blur(6px); }.entity-dialog form { max-height: inherit; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; }.dialog-header { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }.dialog-header h2 { margin: 5px 0 3px; font: 650 21px var(--font-display); }.dialog-header p { margin: 0; color: var(--muted); font-size: 11px; }.dialog-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 21px 22px; overflow-y: auto; }.dialog-body .field.full { grid-column: 1/-1; }.dialog-error { margin: 0 22px 14px; }.dialog-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); background: rgba(7,12,20,.34); }.confirm-dialog { width: min(430px,calc(100vw - 28px)); padding: 28px; text-align: center; }.confirm-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 16px; background: rgba(255,126,136,.09); color: var(--red); }.confirm-dialog h2 { margin: 0; font: 650 20px var(--font-display); }.confirm-dialog p { margin: 9px 0 20px; color: var(--muted); }.confirm-dialog .dialog-footer { padding: 0; border: 0; background: transparent; }
.detail-drawer { position: fixed; z-index: 90; right: 0; top: 0; width: min(520px,100vw); height: 100vh; overflow-y: auto; transform: translateX(102%); border-left: 1px solid var(--line-strong); background: var(--bg-1); box-shadow: var(--shadow-lg); transition: transform .25s var(--ease); }.detail-drawer.open { transform: translateX(0); }.detail-drawer > header { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid var(--line); background: rgba(10,17,29,.94); backdrop-filter: blur(14px); }.detail-drawer h2 { margin: 5px 0 0; font: 650 20px var(--font-display); }#detail-content { padding: 20px; }
.toast-region { position: fixed; z-index: 110; right: 20px; bottom: 20px; width: min(360px,calc(100vw - 40px)); display: grid; gap: 9px; }.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-lg); animation: toast-in .24s var(--ease); }.toast strong, .toast span { display: block; }.toast strong { font-size: 12px; }.toast span { margin-top: 2px; color: var(--muted); font-size: 10px; }.toast.success { border-color: rgba(85,214,164,.28); }.toast.error { border-color: rgba(255,126,136,.28); }
.route-progress { position: fixed; z-index: 120; left: 0; top: 0; width: 35%; height: 2px; background: var(--brand); box-shadow: 0 0 15px var(--brand); animation: route-progress 1.1s infinite var(--ease); }

@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes route-progress { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

@media (max-width: 1240px) {
  .topbar { grid-template-columns: minmax(160px,1fr) minmax(220px,340px) auto; padding-inline: 18px; }
  .profile-copy, .health-pill span:last-child { display: none; }
  .context-bar { padding-inline: 18px; overflow-x: auto; }
  #workspace { padding-inline: 22px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .span-8, .span-7 { grid-column: span 12; }.span-5, .span-4 { grid-column: span 6; }
}

@media (max-width: 920px) {
  .app-shell, .app-shell.sidebar-collapsed { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-102%); width: min(310px,86vw); transition: transform .26s var(--ease); }
  .app-shell.drawer-open .sidebar { transform: translateX(0); }.app-shell.drawer-open .drawer-scrim { display: block !important; }
  .drawer-scrim { position: fixed; z-index: 35; inset: 0; background: rgba(1,5,10,.68); backdrop-filter: blur(3px); }
  .mobile-menu { display: grid; }.collapse-button { display: none; }
  .app-shell.sidebar-collapsed .brand { display: flex; }.app-shell.sidebar-collapsed .brand-copy, .app-shell.sidebar-collapsed .nav-label, .app-shell.sidebar-collapsed .nav-item span, .app-shell.sidebar-collapsed .safety-lock span:last-child { display: initial; }.app-shell.sidebar-collapsed .nav-item { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; place-items: initial; padding: 8px 10px; }.app-shell.sidebar-collapsed .brand-row { justify-content: space-between; padding: 0 15px 0 18px; }.app-shell.sidebar-collapsed .primary-nav { padding: 13px 11px 20px; }.app-shell.sidebar-collapsed .sidebar-footer { padding: 14px; }.app-shell.sidebar-collapsed .safety-lock { justify-content: flex-start; padding: 11px; }
  .topbar { grid-template-columns: minmax(0,1fr) auto; }.global-search-wrap { order: 3; grid-column: 1/-1; display: none; }.breadcrumbs > span, .breadcrumbs > svg { display: none; }
  .auth-gate { grid-template-columns: 1fr; align-items: start; gap: 34px; }.auth-copy { padding-top: 30px; }.auth-copy h1 { font-size: clamp(40px,9vw,62px); }
}

@media (max-width: 700px) {
  :root { --topbar-h: 60px; }
  .button, .button.compact, input, select, textarea { min-height: 44px; }.icon-button { width: 44px; height: 44px; }.nav-item { min-height: 44px; }.row-actions button { min-height: 44px; }
  .topbar { gap: 8px; padding-inline: 12px; }.health-pill { display: none; }.topbar-actions { gap: 3px; }.profile-menu summary > svg { display: none; }
  .context-bar { align-items: flex-end; padding: 8px 12px; }.context-field { min-width: 160px; }.context-field.grow { min-width: 200px; }
  #workspace { padding: 22px 13px 44px; }.auth-gate { padding-top: 0; }.auth-copy > p { font-size: 15px; }.trust-list { display: grid; }.auth-card { padding: 21px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }.page-actions { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }.page-actions .button { white-space: nowrap; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.metric-card { min-height: 118px; padding: 14px; }.metric-card strong { font-size: 25px; }
  .dashboard-grid { display: grid; grid-template-columns: 1fr; }.span-8, .span-7, .span-6, .span-5, .span-4, .span-3, .span-12 { grid-column: 1; }
  .panel-header { align-items: flex-start; }.panel-actions { flex-wrap: wrap; justify-content: flex-end; }.toolbar { align-items: stretch; }.toolbar-search { max-width: none; flex-basis: 100%; }.toolbar select { flex: 1; min-width: 120px; }.toolbar-meta { width: 100%; margin-left: 0; }
  .dialog-body { grid-template-columns: 1fr; padding: 17px; }.dialog-body .field.full { grid-column: 1; }.dialog-header, .dialog-footer { padding-inline: 17px; }.dialog-error { margin-inline: 17px; }
  .provider-grid { grid-template-columns: 1fr; }.toast-region { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: 106px; }.auth-copy h1 { font-size: 39px; }.auth-copy { padding-top: 14px; }.profile-menu { display: none; }.context-bar .button span { display: none; }.custom-range { min-width: 300px; }.custom-range label { width: 146px; }
  .data-table { min-width: 680px; }.bar-row { grid-template-columns: 80px minmax(100px,1fr) 34px; }.panel-header { padding: 13px; }.panel-body { padding: 13px; }
}

/* PearlyGlow brand system: shared across every CRM route and workflow. */
.sidebar {
  border-right-color: rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 20% 0%, rgba(18,166,184,.18), transparent 18rem),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: 16px 0 42px rgba(16,23,67,.16);
  color: #fff;
}
.brand-row { height: 88px; padding: 11px 12px 10px 16px; border-bottom-color: rgba(255,255,255,.1); }
.brand { width: min(200px,100%); min-height: 54px; overflow: hidden; padding: 5px 7px; border: 1px solid rgba(255,255,255,.28); border-radius: 11px; background: rgba(255,255,255,.97); box-shadow: 0 8px 20px rgba(4,12,44,.14); }
.brand-logo { display: block; max-width: 100%; height: auto; object-fit: contain; }
.sidebar-brand-logo { width: 185px; }
.mobile-brand { display: none; width: 150px; min-width: 0; text-decoration: none; }
.mobile-brand img { display: block; width: 100%; height: auto; }
.sidebar .icon-button { color: rgba(255,255,255,.68); }
.sidebar .icon-button:hover { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.13); }
.sidebar .nav-label { color: rgba(218,238,245,.55); }
.sidebar .nav-item { color: rgba(236,248,251,.76); }
.sidebar .nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar .nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(18,166,184,.27), rgba(10,164,223,.13)); border-color: rgba(116,222,234,.24); }
.sidebar .nav-item.active::before { background: #58d8e6; box-shadow: 0 0 14px rgba(88,216,230,.65); }
.sidebar .nav-count { background: rgba(255,255,255,.1); color: #eaf8fb; }
.sidebar .nav-count.warn { background: rgba(255,205,105,.18); color: #ffe3a5; }
.sidebar-footer { border-top-color: rgba(255,255,255,.1); }
.sidebar .safety-lock { background: rgba(48,185,102,.12); border-color: rgba(109,224,151,.2); }
.sidebar .safety-lock strong { color: #c8f8da; }
.sidebar .safety-lock small { color: rgba(226,245,249,.63); }
.app-shell.sidebar-collapsed .brand { display: flex; width: 48px; height: 48px; border-radius: 14px; }
.app-shell.sidebar-collapsed .sidebar-brand-logo { width: 146px; max-width: none; height: 55px; object-fit: cover; object-position: left top; transform: translate(-1px,-1px) scale(1.02); transform-origin: left top; }
.app-shell.sidebar-collapsed .brand-row { min-height: 124px; padding: 14px 17px; flex-direction: column; gap: 10px; }

.topbar { background: rgba(255,255,255,.88); box-shadow: 0 1px 0 rgba(23,36,91,.03); }
.global-search-wrap input { background: rgba(247,251,253,.94); }
.global-search-wrap input:focus { border-color: rgba(10,164,223,.55); background: #fff; box-shadow: 0 0 0 3px rgba(10,164,223,.1); }
.global-search-wrap kbd { background: #fff; }
.health-pill { background: var(--surface-soft); }
.avatar { background: linear-gradient(145deg,var(--teal),var(--sky)); box-shadow: 0 6px 14px rgba(10,164,223,.2); }
.profile-popover button:hover { background: rgba(200,61,77,.07); }
.context-bar { background: rgba(237,245,248,.92); box-shadow: inset 0 -1px 0 rgba(23,36,91,.02); }
input, select, textarea { background: #fff; }
input:focus, select:focus, textarea:focus { border-color: rgba(10,164,223,.55); box-shadow: 0 0 0 3px rgba(10,164,223,.1); }

.auth-gate::before { content: ""; position: fixed; z-index: -1; right: -11vw; bottom: -28vw; width: 58vw; height: 58vw; border: 1px solid rgba(10,164,223,.08); border-radius: 50%; box-shadow: 0 0 0 7vw rgba(18,166,184,.025), 0 0 0 14vw rgba(21,148,71,.018); }
.auth-copy .eyebrow, .page-heading .eyebrow, .dialog-header .eyebrow, .detail-drawer .eyebrow { color: var(--teal-strong); }
.auth-copy h1 { color: var(--navy); text-wrap: balance; }
.trust-list li { background: rgba(255,255,255,.62); }
.auth-card { border-top: 4px solid var(--teal); background: rgba(255,255,255,.94); }
.auth-brand { display: flex; justify-content: center; padding: 0 8px 7px; border-bottom: 1px solid var(--line); }
.login-brand-logo { width: min(360px,100%); }
.auth-card-head { justify-content: center; text-align: center; }
.form-error { border-color: rgba(200,61,77,.22); background: rgba(200,61,77,.07); color: #a92436; }
.field b { color: var(--red); }

.button.primary { background: linear-gradient(135deg,var(--teal),var(--sky)); color: #fff; box-shadow: 0 9px 22px rgba(10,164,223,.19); }
.button.primary:hover { background: linear-gradient(135deg,var(--teal-strong),#078cc5); box-shadow: 0 11px 25px rgba(10,164,223,.25); }
.button.secondary { background: #fff; }
.button.danger { border-color: rgba(200,61,77,.23); background: rgba(200,61,77,.08); color: #a92436; }
.inline-alert { border-color: rgba(184,107,8,.22); background: #fff8e8; color: #7c4704; }
.inline-alert.error { border-color: rgba(200,61,77,.22); background: #fff0f2; color: #a92436; }
.inline-alert.success { border-color: rgba(21,148,71,.22); background: var(--green-soft); color: #0d6b33; }
.metric-card, .panel, .provider-card { background: linear-gradient(180deg,#fff 0%,#fbfdfe 100%); }
.metric-card::after { opacity: .045; }
.metric-card strong, .panel-header h2, .page-heading h1 { color: var(--navy); }
.chart .area { fill: rgba(18,166,184,.11); }
.chart .line { stroke: var(--teal); }
.chart .line.secondary { stroke: var(--sky); }
.chart .point { fill: #fff; stroke: var(--teal); }
.bar-track span { background: linear-gradient(90deg,var(--teal),var(--sky)); }
.status-badge, .badge { font-weight: 800; }
.status-badge.success, .badge.success { color: #0d6b33; background: var(--green-soft); border-color: rgba(21,148,71,.18); }
.status-badge.error, .badge.error { color: #a92436; background: #fff0f2; border-color: rgba(200,61,77,.18); }
.data-table thead { background: #eaf3f7; }
.data-table tbody tr:hover { background: #f3f9fb; }
.toolbar { background: rgba(237,245,248,.75); }
.kanban-column { background: rgba(227,238,243,.64); }
.dialog-footer { background: #f5fafc; }
.detail-drawer { background: #fff; }
.detail-drawer > header { background: rgba(255,255,255,.94); }
.toast { background: #fff; }
.toast.success { border-color: rgba(21,148,71,.28); }
.toast.error { border-color: rgba(200,61,77,.28); }
.route-progress { background: linear-gradient(90deg,var(--teal),var(--sky)); box-shadow: 0 0 15px rgba(10,164,223,.55); }

@media (max-width: 920px) {
  .sidebar { box-shadow: 22px 0 55px rgba(16,23,67,.34); }
  .mobile-brand { display: block; }
  .breadcrumbs { display: none; }
  .topbar-leading { gap: 10px; }
  .app-shell.sidebar-collapsed .brand { width: min(200px,100%); height: auto; border-radius: 11px; }
  .app-shell.sidebar-collapsed .sidebar-brand-logo { width: 185px; max-width: 100%; height: auto; object-fit: contain; transform: none; }
  .app-shell.sidebar-collapsed .brand-row { height: 88px; padding: 11px 12px 10px 16px; }
}

@media (max-width: 700px) {
  .mobile-brand { width: 132px; }
  .auth-copy { text-align: center; }
  .trust-list { text-align: left; }
  .auth-card { border-radius: 20px; }
}

@media (max-width: 430px) {
  .mobile-brand { width: 112px; }
  .topbar { padding-inline: 8px; }
  .auth-brand { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}