/* GSTसही design system (Oct 2026 redesign).
   Principles, taken from Apple's Human Interface Guidelines:
   - Type: iOS scale (Large Title 34/41 ... Caption 12/16), no Light/Thin weights,
     body never below 11px, hierarchy by weight + size + colour.
   - Colour: one restrained accent that always means "you can tap this";
     semantic tokens with light, dark and increased-contrast variants;
     status is never colour-only (pills carry text).
   - Layout: most important first, grouped by whitespace, sidebar on wide
     screens and a bottom tab bar on phones (same functions), safe areas honoured.
   - Motion: short, purposeful, interruptible; off under Reduce Motion.
   - Material: blur ("glass") ONLY on the floating navigation layer; never on
     cards/tables; solid fallback for Reduce Transparency / Increase Contrast.
   Existing token names (--paper, --indigo, ...) are kept so every page that
   uses them inherits the new look. */

:root {
  color-scheme: light dark;
  /* surfaces */
  --paper: #FFFFFF;            /* cards, inputs */
  --paper-warm: #F2F2F7;       /* page background (grouped) */
  --paper-alt: #F2F2F7;
  --fill: rgba(120,120,128,0.12);
  --ink: #1C1C1E;
  --muted: #636366;            /* 5.9:1 on white */
  --line: #D1D1D6;
  --line-soft: #E5E5EA;
  /* accent: the only "tappable" colour */
  --indigo: #0060DF;           /* kept name; primary action blue */
  --indigo-deep: #004FB8;
  --accent: #0060DF;
  --on-accent: #FFFFFF;
  /* semantic */
  --ai: #0A7A5A;
  --ai-bg: #E6F4EE;
  --success: #1E6B2C;
  --success-bg: #E4F4E7;
  --danger: #C4271C;
  --danger-bg: #FDECEA;
  --warn: #8A4B00;
  --warn-bg: #FFF1DB;
  /* shape + depth */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-lift: 0 8px 28px rgba(0,0,0,0.12);
  --glass: rgba(249,249,251,0.72);
  --glass-border: rgba(60,60,67,0.18);
  --scrim: rgba(0,0,0,0.32);
  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Noto Sans Devanagari", "Noto Sans Tamil", system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Consolas, monospace;
  /* motion */
  --ease: cubic-bezier(.22,.9,.28,1);
  --t-fast: .14s;
  --t-med: .26s;
  /* 8pt grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C1C1E;
    --paper-warm: #000000;
    --paper-alt: #1C1C1E;
    --fill: rgba(120,120,128,0.24);
    --ink: #F5F5F7;
    --muted: #A1A1A6;
    --line: #38383A;
    --line-soft: #2C2C2E;
    --indigo: #4DA3FF;
    --indigo-deep: #7DBBFF;
    --accent: #4DA3FF;
    --on-accent: #001A38;
    --ai: #3DDBA8;
    --ai-bg: #0F2A22;
    --success: #5FD37A;
    --success-bg: #12281A;
    --danger: #FF7A70;
    --danger-bg: #331614;
    --warn: #FFC060;
    --warn-bg: #33250A;
    --shadow: 0 0 0 rgba(0,0,0,0);
    --shadow-lift: 0 10px 34px rgba(0,0,0,0.6);
    --glass: rgba(28,28,30,0.72);
    --glass-border: rgba(255,255,255,0.14);
    --scrim: rgba(0,0,0,0.55);
  }
}

@media (prefers-contrast: more) {
  :root { --line: #8E8E93; --line-soft: #AEAEB2; --muted: #3A3A3C; --glass: #FFFFFF; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --line: #8E8E93; --line-soft: #636366; --muted: #D1D1D6; --glass: #1C1C1E; }
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.375;
  background: var(--paper-warm); color: var(--ink); margin: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--ink); }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--indigo) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ---- App shell: sidebar on wide screens ---- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-sidebar {
  width: 248px; flex-shrink: 0; padding: calc(var(--s5) + var(--safe-t)) var(--s3) var(--s5);
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--glass); border-right: 1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
}
.app-sidebar .brand { font: 700 22px/28px var(--sans); letter-spacing: -0.4px; padding: 0 var(--s3) var(--s4); color: var(--ink); }
.app-sidebar .navlink {
  display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 8px var(--s3);
  color: var(--ink); text-decoration: none; font: 500 15px/20px var(--sans); cursor: pointer;
  border-radius: var(--radius-sm); border: 0; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.app-sidebar .navlink:hover { background: var(--fill); text-decoration: none; }
.app-sidebar .navlink:active { transform: scale(0.98); }
.app-sidebar .navlink.active { background: var(--indigo); color: var(--on-accent); font-weight: 600; }
.app-sidebar .navlink .ai-badge { margin-left: auto; }
.app-sidebar .sidebar-footer { margin-top: auto; padding: var(--s3) 0 0; }
.app-sidebar .sidebar-footer button { width: 100%; }
.app-sidebar .nav-group { padding: var(--s4) var(--s3) var(--s1); font: 600 12px/16px var(--sans); letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.app-sidebar .nav-more-toggle { display: none; }

.app-main { flex: 1; min-width: 0; padding: var(--s6) var(--s6) var(--s6); max-width: 1040px; }
.app-topbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s5); gap: var(--s3); }
.app-topbar h1 { font: 700 34px/41px var(--sans); letter-spacing: -0.5px; color: var(--ink); margin: 0; }
.portal-section { display: none; animation: rise var(--t-med) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ai-badge {
  display: inline-block; background: var(--ai-bg); color: var(--ai); font: 700 11px/16px var(--sans);
  padding: 0 6px; border-radius: 6px; letter-spacing: 0.4px; vertical-align: middle;
}

/* ---- Auth ---- */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--s4); gap: var(--s4); }
.auth-card {
  background: var(--paper); border-radius: 20px; padding: var(--s6); max-width: 400px; width: 100%;
  box-shadow: var(--shadow-lift); animation: rise var(--t-med) var(--ease);
}
.auth-card h3 { margin: 0 0 var(--s5); color: var(--ink); font: 700 28px/34px var(--sans); letter-spacing: -0.4px; text-align: center; }
.auth-card input { width: 100%; margin-bottom: var(--s3); }
.auth-actions { justify-content: space-between; margin-top: 6px; margin-bottom: 4px; }
.auth-actions button:not(.link) { flex: 1; }
.auth-actions .link { font-size: 13px; white-space: nowrap; }
.auth-divider { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s4); color: var(--muted); font: 500 12px/16px var(--sans); text-transform: uppercase; letter-spacing: 0.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-forgot { display: block; width: 100%; text-align: center; margin-top: var(--s4); font-size: 14px; }

/* ---- Cards, tables, forms, buttons ---- */
.card { background: var(--paper); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s4); box-shadow: var(--shadow); }
.card h3 { font: 600 20px/25px var(--sans); letter-spacing: -0.2px; margin: 0 0 var(--s3); color: var(--ink); }
.card h3 small { font: 400 13px/18px var(--sans); color: var(--muted); }

.copilot-card { background: linear-gradient(180deg, var(--ai-bg) 0%, var(--paper) 90px); }
.copilot-card .copilot-input-row { display: flex; gap: var(--s2); margin-top: 4px; }
.copilot-card input[type="text"] { flex: 1; }
.copilot-reply { background: var(--fill); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); margin-top: var(--s3); font-size: 15px; white-space: pre-wrap; display: none; }

table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px var(--s3); border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font: 600 12px/16px var(--sans); text-transform: uppercase; letter-spacing: 0.3px; }
tr:hover td { background: var(--fill); }

input, select, textarea {
  min-height: 44px; padding: 10px var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 400 16px/22px var(--sans); background: var(--paper); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea { min-height: 88px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 22%, transparent); }

button {
  min-height: 44px; background: var(--indigo); color: var(--on-accent); border: 0; padding: 10px var(--s4);
  border-radius: var(--radius-sm); cursor: pointer; font: 600 15px/20px var(--sans);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
button:hover { background: var(--indigo-deep); }
button:active { transform: scale(0.97); }
button.secondary { background: var(--fill); color: var(--indigo); border: 0; }
button.secondary:hover { background: color-mix(in srgb, var(--indigo) 16%, var(--fill)); }
button.ai-btn { background: var(--indigo); color: var(--on-accent); }
button.ai-btn:hover { background: var(--indigo-deep); }
button.link { background: none; color: var(--indigo); border: 0; padding: 0 var(--s1); font-weight: 500; min-height: 44px; }
button.link:hover { background: none; text-decoration: underline; }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.row { display: flex; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--s2); }

/* pills always carry text, so colour is never the only signal */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 12px/18px var(--sans); }
.pill.paid, .pill.reliable { background: var(--success-bg); color: var(--success); }
.pill.overdue, .pill.risky { background: var(--danger-bg); color: var(--danger); }
.pill.due, .pill.watch { background: var(--warn-bg); color: var(--warn); }
.pill.draft { background: var(--fill); color: var(--muted); }

.err-text { color: var(--danger); font-size: 14px; margin-top: 6px; }
.muted { color: var(--muted); font-size: 14px; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--s3); }
.metric { background: var(--fill); border-radius: var(--radius-sm); padding: var(--s4); }
.metric .label { font: 500 12px/16px var(--sans); color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.metric .value { font: 600 24px/30px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -0.3px; }

/* ---- Copilot / chat: the floating layer (glass allowed here) ---- */
.cp-fab { position: fixed; right: var(--s5); bottom: calc(var(--s5) + var(--safe-b)); z-index: 50; background: var(--indigo); color: var(--on-accent); border: 0; border-radius: 999px; padding: 14px 22px; font: 600 16px/22px var(--sans); cursor: pointer; box-shadow: var(--shadow-lift); }
.cp-fab:hover { background: var(--indigo-deep); }
.cp-fab.hidden { display: none; }
.cp-panel { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 60; width: 400px; max-width: calc(100vw - 24px); height: 600px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-lift); display: none; flex-direction: column; overflow: hidden; }
.cp-panel.open { display: flex; animation: sheet var(--t-med) var(--ease); }
@keyframes sheet { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.cp-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--glass); border-bottom: 1px solid var(--glass-border); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.cp-title { font: 600 17px/22px var(--sans); color: var(--ink); }
.cp-close { margin-left: auto; background: transparent; border: 0; color: var(--indigo); font: 600 15px var(--sans); cursor: pointer; padding: 0 var(--s2); min-height: 44px; }
.cp-close:hover { background: transparent; text-decoration: underline; }
.cp-msgs { flex: 1; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); overscroll-behavior: contain; }
.cp-msg { max-width: 84%; padding: 9px 14px; border-radius: 18px; font-size: 16px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; animation: rise var(--t-med) var(--ease); }
.cp-user { align-self: flex-end; background: var(--indigo); color: var(--on-accent); border-bottom-right-radius: 6px; }
.cp-bot { align-self: flex-start; background: var(--fill); color: var(--ink); border-bottom-left-radius: 6px; }
.cp-bot a { color: var(--indigo); }
.cp-typing { color: var(--muted); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--s4) var(--s3); }
.cp-chip { background: var(--fill); border: 0; color: var(--indigo); border-radius: 999px; padding: 8px 14px; min-height: 36px; font: 500 14px/20px var(--sans); cursor: pointer; }
.cp-chip:hover { background: color-mix(in srgb, var(--indigo) 16%, var(--fill)); }
.cp-input-row { display: flex; gap: var(--s2); padding: var(--s3); border-top: 1px solid var(--line-soft); background: var(--paper); padding-bottom: calc(var(--s3) + var(--safe-b)); }
.cp-input-row input { flex: 1; min-width: 0; border-radius: 999px; padding-left: var(--s4); }
.cp-mic { background: var(--fill); border: 0; border-radius: 999px; padding: 0 var(--s3); min-width: 44px; font: 500 14px var(--sans); color: var(--indigo); cursor: pointer; }
.cp-mic:hover { background: var(--fill); }
.cp-mic.on { background: var(--danger-bg); color: var(--danger); }
.cp-lang { background: var(--fill); border: 0; border-radius: 999px; padding: 0 6px; font: 500 14px var(--sans); color: var(--muted); max-width: 64px; min-height: 44px; }

/* "Do next" list */
.do-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); font-size: 16px; }
.do-row:first-child { border-top: 0; }
.do-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--muted); }
.do-dot.sev-critical { background: var(--danger); }
.do-dot.sev-high { background: var(--accent); }
.do-dot.sev-medium { background: var(--warn); }
.do-main { flex: 1; min-width: 0; }
.do-rupees { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.do-row button { flex: none; padding: 6px var(--s3); min-height: 36px; font-size: 14px; }

/* ---- Phones: bottom tab bar (same links, same functions) ---- */
@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: auto; z-index: 40;
    flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; overflow-y: hidden;
    padding: 6px var(--s2) calc(6px + var(--safe-b)); border-right: 0; border-top: 1px solid var(--glass-border);
    scrollbar-width: none;
  }
  .app-sidebar::-webkit-scrollbar { display: none; }
  .app-sidebar .brand, .app-sidebar .nav-group, .app-sidebar .sidebar-footer { display: none; }
  .app-sidebar .navlink { flex: none; min-height: 44px; padding: 8px 14px; white-space: nowrap; font-size: 14px; border-radius: 999px; }
  .app-sidebar .nav-rare { display: none; }
  .app-sidebar.show-more .nav-rare { display: flex; }
  .app-sidebar .nav-more-toggle { display: flex; }
  .app-main { padding: calc(var(--s5) + var(--safe-t)) var(--s4) calc(96px + var(--safe-b)); max-width: none; }
  .app-topbar h1 { font-size: 30px; line-height: 36px; }
  .card { padding: var(--s4); }
  .cp-panel { right: 0; left: 0; bottom: 0; width: 100%; max-width: none; height: 86dvh; max-height: 86vh; border-radius: 22px 22px 0 0; }
  .cp-fab { right: var(--s4); bottom: calc(76px + var(--safe-b)); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  table { font-size: 13px; }
}

@media (pointer: coarse) {
  .do-row button, .cp-chip { min-height: 44px; }
}

/* ---- Accessibility fallbacks ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  button:active, .navlink:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-sidebar, .cp-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar, .cp-head { background: var(--paper); }
}
@media print {
  .app-sidebar, .cp-fab, .cp-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ================= Second pass (ui.js): icons, tab bar, sheets, composer, stacked tables ================= */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-sidebar .navlink .ni { display: inline-flex; width: 24px; justify-content: center; }
.app-sidebar .navlink .nl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.app-sidebar .navlink:not(.active) .ic { color: var(--indigo); }
.app-sidebar .navlink.active .ic { color: inherit; }
.app-sidebar .tab-more { display: none; }
.more-scrim, .more-sheet { display: none; }

/* Chat-first composer on Today */
.hero-composer { background: var(--paper); border-radius: 24px; padding: var(--s5); margin-bottom: var(--s4); box-shadow: var(--shadow); }
.hc-greet { font: 700 28px/34px var(--sans); letter-spacing: -0.4px; color: var(--ink); }
.hc-sub { color: var(--muted); font-size: 17px; line-height: 22px; margin: 4px 0 var(--s4); }
.hc-row { display: flex; gap: var(--s2); align-items: center; background: var(--fill); border-radius: 999px; padding: 4px 4px 4px var(--s4); transition: box-shadow var(--t-fast) var(--ease); }
.hc-row:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 22%, transparent); }
.hc-row input { flex: 1; min-width: 0; border: 0; background: transparent; min-height: 44px; padding: 0; font-size: 17px; box-shadow: none; }
.hc-row input:focus { box-shadow: none; }
.hc-go { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.hc-go .ic { stroke-width: 2.4; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.hc-chips .cp-chip { background: var(--fill); }

/* Sheet grabber */
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 4px; }

@media (min-width: 721px) {
  .app-topbar h1 { transition: font-size var(--t-med) var(--ease); }
}

@media (max-width: 720px) {
  /* iOS-style tab bar: icon over label, four tabs + More */
  .app-sidebar { justify-content: space-around; gap: 0; overflow: visible; padding: 6px 4px calc(6px + var(--safe-b)); }
  .app-sidebar .tab-secondary, .app-sidebar .nav-more-toggle { display: none !important; }
  .app-sidebar .tab-more { display: flex; }
  .app-sidebar .navlink.tab-primary { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border-radius: 12px; font-size: 11px; line-height: 14px; font-weight: 500; background: transparent; color: var(--muted); }
  .app-sidebar .navlink.tab-primary .nl { font-size: 11px; font-weight: 500; letter-spacing: 0.1px; }
  .app-sidebar .navlink.tab-primary .nl .ai-badge { display: none; }
  .app-sidebar .navlink.tab-primary .nl[data-short] { font-size: 0; }
  .app-sidebar .navlink.tab-primary .nl[data-short]::after { content: attr(data-short); font-size: 11px; line-height: 14px; font-weight: 500; }
  .app-sidebar .navlink.tab-primary .nl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; }
  .app-sidebar .tab-more .ic { stroke-width: 4; }
  .app-sidebar .navlink.tab-primary .ic { color: currentColor !important; }
  .app-sidebar .navlink.tab-primary.active { background: transparent; color: var(--indigo); font-weight: 600; }
  .app-sidebar .navlink.tab-primary.active .ic { stroke-width: 2.25; }
  .app-sidebar .navlink.tab-primary:active { transform: scale(0.94); }

  .more-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); }
  .more-sheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 78dvh; max-height: 78vh; overflow-y: auto; background: var(--paper); border-radius: 22px 22px 0 0; padding: 0 var(--s4) calc(var(--s4) + var(--safe-b)); box-shadow: var(--shadow-lift); transform: translateY(105%); transition: transform var(--t-med) var(--ease); touch-action: pan-y; }
  body.more-open .more-scrim { opacity: 1; pointer-events: auto; }
  body.more-open .more-sheet { transform: none; }
  .more-list { display: flex; flex-direction: column; background: var(--paper-warm); border-radius: var(--radius); overflow: hidden; margin: var(--s2) 0 var(--s3); }
  .more-list .navlink { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 10px var(--s4); border-radius: 0; background: transparent; color: var(--ink); font: 400 17px/22px var(--sans); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
  .more-list .navlink:last-child { border-bottom: 0; }
  .more-list .navlink .ic { color: var(--indigo); }
  .more-list .navlink:active { background: var(--fill); }
  .more-logout { width: 100%; color: var(--danger); }

  body:has(#nav-copilot) .cp-fab { display: none; } /* the Ask tab already opens the chat */
  .hero-composer { padding: var(--s4); border-radius: 20px; }
  .hc-greet { font-size: 24px; line-height: 30px; }

  /* sticky compact large-title header */
  body.ui-js .app-topbar { position: sticky; top: 0; z-index: 20; margin: calc(-1 * var(--s5)) calc(-1 * var(--s4)) var(--s4); padding: calc(var(--s3) + var(--safe-t)) var(--s4) var(--s2); background: transparent; transition: background var(--t-med) var(--ease), padding var(--t-med) var(--ease); }
  body.ui-js.scrolled .app-topbar { background: var(--glass); border-bottom: 1px solid var(--glass-border); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); padding-top: calc(var(--s2) + var(--safe-t)); padding-bottom: var(--s2); }
  body.ui-js .app-topbar h1 { transition: font-size var(--t-med) var(--ease), line-height var(--t-med) var(--ease); }
  body.ui-js.scrolled .app-topbar h1 { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: 0; }
  body.ui-js.scrolled .app-topbar .muted { display: none; }

  /* tables become labelled cards */
  body.ui-js table:not(.keep) { display: block; }
  body.ui-js table:not(.keep) thead, body.ui-js table:not(.keep) tr:first-child:has(th) { display: none; }
  body.ui-js table:not(.keep) tbody { display: block; }
  body.ui-js table:not(.keep) tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); }
  body.ui-js table:not(.keep) tr:last-child { border-bottom: 0; }
  body.ui-js table:not(.keep) td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border: 0; padding: 3px 0; text-align: right; }
  body.ui-js table:not(.keep) td::before { content: attr(data-label); color: var(--muted); font: 500 12px/18px var(--sans); text-transform: uppercase; letter-spacing: 0.3px; text-align: left; flex: none; max-width: 42%; }
  body.ui-js table:not(.keep) td[data-label=""]::before { display: none; }
  body.ui-js table:not(.keep) tr:hover td { background: transparent; }
  body.ui-js .row > input, body.ui-js .row > select { flex: 1 1 100%; }
}


/* ===== Appearance toggle + motion polish ===== */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark;
    --paper: #1C1C1E;
    --paper-warm: #000000;
    --paper-alt: #1C1C1E;
    --fill: rgba(120,120,128,0.24);
    --ink: #F5F5F7;
    --muted: #A1A1A6;
    --line: #38383A;
    --line-soft: #2C2C2E;
    --indigo: #4DA3FF;
    --indigo-deep: #7DBBFF;
    --accent: #4DA3FF;
    --on-accent: #001A38;
    --ai: #3DDBA8;
    --ai-bg: #0F2A22;
    --success: #5FD37A;
    --success-bg: #12281A;
    --danger: #FF7A70;
    --danger-bg: #331614;
    --warn: #FFC060;
    --warn-bg: #33250A;
    --shadow: 0 0 0 rgba(0,0,0,0);
    --shadow-lift: 0 10px 34px rgba(0,0,0,0.6);
    --glass: rgba(28,28,30,0.72);
    --glass-border: rgba(255,255,255,0.14);
    --scrim: rgba(0,0,0,0.55);
}
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease) !important; }

.theme-toggle { position: fixed; top: calc(10px + var(--safe-t)); right: 12px; z-index: 90; display: inline-grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow); }
.theme-toggle.tt-inline { position: static; margin-left: 8px; box-shadow: none; }
.theme-toggle button { position: relative; z-index: 1; width: 44px; min-height: 36px; height: 36px; padding: 0; border-radius: 999px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: color var(--t-fast) var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1); }
.theme-toggle button:hover { background: transparent; color: var(--ink); }
.theme-toggle button[aria-pressed="true"] { color: var(--indigo); }
.theme-toggle button:active { transform: scale(.88); }
.tt-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tt-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .38s cubic-bezier(.34,1.4,.64,1); }
.theme-toggle[data-active="light"] .tt-thumb { transform: translateX(0); }
.theme-toggle[data-active="system"] .tt-thumb { transform: translateX(100%); }
.theme-toggle[data-active="dark"] .tt-thumb { transform: translateX(200%); }
@media (max-width: 720px) {
  .theme-toggle button { width: 38px; }
  body.ui-js .app-topbar { padding-right: 140px; }
}

/* Smoother motion: cross-page fade, staggered card entrance, springy presses, chat bubbles, skeletons */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: var(--ease); }
.portal-section > .card, .portal-section > .hero-composer { animation: rise .5s var(--ease) both; }
.portal-section > :nth-child(2) { animation-delay: .04s; }
.portal-section > :nth-child(3) { animation-delay: .08s; }
.portal-section > :nth-child(4) { animation-delay: .12s; }
.portal-section > :nth-child(5) { animation-delay: .16s; }
.portal-section > :nth-child(n+6) { animation-delay: .2s; }
button { transition: transform .38s cubic-bezier(.34,1.56,.64,1), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
button:active { transition-duration: .08s; }
.cp-msg { animation: pop .38s cubic-bezier(.34,1.4,.64,1) both; transform-origin: bottom left; }
.cp-user { transform-origin: bottom right; }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
.cp-typing { font-size: 0; }
.cp-typing::after { content: "\2022\2022\2022"; font-size: 18px; letter-spacing: 4px; color: var(--muted); animation: dots 1.2s ease-in-out infinite; }
@keyframes dots { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.skel { color: transparent !important; border-radius: 8px; min-height: 1.4em; user-select: none; pointer-events: none; background: linear-gradient(90deg, var(--fill) 25%, color-mix(in srgb, var(--fill) 45%, transparent) 50%, var(--fill) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.card { transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
@media (hover: hover) {
  .feature, .plan, .ai-feature, .audience-card { transition: transform .4s cubic-bezier(.22,.9,.28,1), box-shadow .4s var(--ease); }
  .feature:hover, .plan:hover, .ai-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cp-typing::after { animation: none; } .skel { animation: none; } }