/* Аналітика БД — design system.
   Tokens first, then base, then components. Light and dark follow the device; every text/background pair keeps WCAG AA contrast. */
:root {
  --bg: #f5f6fa; --surface: #ffffff; --surface-2: #f0f2f8; --ink: #121626; --ink-2: #4a5169; --ink-3: #6b7390;
  --line: #e4e7f0; --line-strong: #d3d8e6;
  --brand: #4f46e5; --brand-2: #7c3aed; --brand-ink: #ffffff; --brand-soft: #eceafd; --brand-line: #c9c5f7;
  --good: #0f8a55; --good-soft: #e3f6ec; --warn: #a05a00; --warn-soft: #fff3dc; --bad: #c7243a; --bad-soft: #fdeaed;
  --shadow-1: 0 1px 2px rgba(18, 22, 38, .06), 0 1px 1px rgba(18, 22, 38, .04);
  --shadow-2: 0 8px 24px -8px rgba(40, 40, 120, .18), 0 2px 6px rgba(18, 22, 38, .06);
  --shadow-3: 0 24px 60px -20px rgba(40, 30, 140, .35);
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 130%);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
/* Dark follows the device until the person picks a theme with the switch (then <html data-theme> decides). */
:root[data-theme="dark"] {
    --bg: #0a0d18; --surface: #121626; --surface-2: #1a1f33; --ink: #eef0f8; --ink-2: #b4bad0; --ink-3: #8c93ae;
    --line: #232943; --line-strong: #2f3656;
    --brand: #8b8cff; --brand-2: #b18cff; --brand-ink: #0b0d1c; --brand-soft: #1e2142; --brand-line: #343a78;
    --good: #4cd6a0; --good-soft: #0f2a21; --warn: #ffbe5c; --warn-soft: #2d2410; --bad: #ff7b8d; --bad-soft: #2e141a;
    --shadow-1: none; --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .6); --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, .7);
    --grad: linear-gradient(135deg, #5b5bf0 0%, #8b5cf6 55%, #d946ef 130%);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0d18; --surface: #121626; --surface-2: #1a1f33; --ink: #eef0f8; --ink-2: #b4bad0; --ink-3: #8c93ae;
    --line: #232943; --line-strong: #2f3656;
    --brand: #8b8cff; --brand-2: #b18cff; --brand-ink: #0b0d1c; --brand-soft: #1e2142; --brand-line: #343a78;
    --good: #4cd6a0; --good-soft: #0f2a21; --warn: #ffbe5c; --warn-soft: #2d2410; --bad: #ff7b8d; --bad-soft: #2e141a;
    --shadow-1: none; --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .6); --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, .7);
    --grad: linear-gradient(135deg, #5b5bf0 0%, #8b5cf6 55%, #d946ef 130%);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
html { background: var(--bg); }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
#root { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.015em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); } .small { font-size: 13px; } .grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
svg.i { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── buttons, fields ───────── */
.btn { --h: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-weight: 550; line-height: 1; transition: background .15s, border-color .15s, transform .15s var(--ease), box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.btn:hover { border-color: var(--brand); background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn.primary { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -6px rgba(99, 70, 229, .6); }
.btn.primary:hover { filter: brightness(1.07); background: var(--grad); }
.btn.danger { color: var(--bad); } .btn.danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.btn.sm { --h: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn.wide { width: 100%; --h: 50px; font-size: 16px; }
.btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-2); border-color: transparent; }
.btn.icon { padding: 0; width: var(--h); }
.spinner { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.input, .field input, .field select, .field textarea, select.input, .panel select, .tenant select { width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.input:focus, .field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
::placeholder { color: var(--ink-3); opacity: 1; }
.check { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; cursor: pointer; padding: 6px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand); }
.chip.gray { background: var(--surface-2); color: var(--ink-3); } .chip.red { background: var(--bad-soft); color: var(--bad); } .chip.green { background: var(--good-soft); color: var(--good); } .chip.amber { background: var(--warn-soft); color: var(--warn); }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r); background: var(--bad-soft); color: var(--bad); font-size: 14px; line-height: 1.45; animation: pop .25s var(--ease); }
.alert.info { background: var(--brand-soft); color: var(--ink-2); } .alert.warn { background: var(--warn-soft); color: var(--warn); } .alert.good { background: var(--good-soft); color: var(--good); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.shake { animation: shake .35s; } @keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ───────── sign-in ───────── */
.auth { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 28px 18px; overflow: hidden; isolation: isolate; background: var(--bg); }
.aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(70px) saturate(1.2); opacity: .9; }
.aurora i { position: absolute; border-radius: 50%; }
.aurora i:nth-child(1) { width: 52vmax; height: 52vmax; left: -8%; top: -14%; background: radial-gradient(circle, #6f63ff 0%, transparent 65%); animation: drift1 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 46vmax; height: 46vmax; right: -10%; top: 4%; background: radial-gradient(circle, #d946ef 0%, transparent 62%); opacity: .75; animation: drift2 26s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 44vmax; height: 44vmax; left: 22%; bottom: -26%; background: radial-gradient(circle, #22d3ee 0%, transparent 62%); opacity: .6; animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14%, 10%) scale(1.12); } } @keyframes drift2 { to { transform: translate(-12%, 14%) scale(.92); } } @keyframes drift3 { to { transform: translate(-10%, -12%) scale(1.15); } }
:root[data-theme="light"] .aurora { opacity: .8; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .aurora { opacity: .8; } }
.grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; opacity: .55;
  mask-image: radial-gradient(60% 55% at 50% 45%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 20%, transparent 78%); }
.glass { position: relative; width: 100%; max-width: 440px; padding: 34px 32px 26px; border-radius: 28px; background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 40px 90px -30px rgba(40, 20, 140, .45), 0 10px 30px -12px rgba(20, 20, 60, .25); animation: rise .6s var(--ease); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.logo { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px -6px rgba(99, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .25); flex: none; }
.logo svg { width: 22px; height: 22px; stroke: none; fill: #fff; }
.glass .top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.glass .secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--good); background: var(--good-soft); padding: 4px 10px; border-radius: 999px; }
.glass h1 { font-size: 30px; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 8px; }
.glass .sub { color: var(--ink-2); margin-bottom: 26px; }
.touch { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; color: var(--brand); background: radial-gradient(circle at 50% 35%, var(--brand-soft), transparent 75%); position: relative; }
.touch::before, .touch::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0; animation: ping 3.2s var(--ease) infinite; } .touch::after { animation-delay: 1.6s; }
@keyframes ping { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
.touch svg { width: 40px; height: 40px; stroke-width: 1.5; }
.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: 13px; } .divider::before, .divider::after { content: ""; height: 1px; background: var(--line-strong); flex: 1; opacity: .7; }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.trust div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.3; color: var(--ink-3); } .trust svg { width: 20px; height: 20px; color: var(--brand); }
.codeinput { text-align: center; font: 600 28px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 16px 12px; min-height: 64px; }
.steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: center; color: var(--ink-2); font-size: 14px; }
.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.back { display: inline-flex; gap: 6px; align-items: center; border: 0; background: none; color: var(--ink-2); padding: 6px 0; margin-bottom: 14px; } .back:hover { color: var(--brand); }
.auth-foot { margin-top: 18px; text-align: center; color: var(--ink-3); font-size: 12px; }
.auth .glass + .auth-foot { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; }

/* floating decorative cards around the sign-in card */
.float { position: absolute; z-index: -1; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2); animation: bob 7s ease-in-out infinite; pointer-events: none; user-select: none; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.float .cap { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.float .big { font-size: 26px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.float .up { color: var(--good); font-size: 13px; font-weight: 650; margin-left: 6px; }
.f-kpi { left: max(3vw, calc(50% - 640px)); top: 17%; min-width: 220px; transform: rotate(-3deg); }
.f-kpi svg.spark { display: block; margin-top: 8px; width: 100%; height: 38px; stroke: var(--brand); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.f-chat { right: max(3vw, calc(50% - 650px)); top: 20%; max-width: 250px; animation-delay: -2s; transform: rotate(2.5deg); }
.f-chat .q { margin: 0 0 8px auto; padding: 8px 12px; font-size: 13px; border-radius: 14px 14px 4px 14px; }
.f-chat .a { padding: 8px 12px; font-size: 13px; border-radius: 4px 14px 14px 14px; color: var(--ink-2); box-shadow: none; }
.f-bars { left: max(5vw, calc(50% - 600px)); bottom: 14%; animation-delay: -4s; transform: rotate(2deg); } .f-bars .bars { display: flex; align-items: flex-end; gap: 6px; height: 58px; margin-top: 10px; }
.f-bars .bars i { width: 14px; border-radius: 5px 5px 2px 2px; background: var(--grad); transform-origin: bottom; transform: scaleY(0); animation: grow 1s var(--ease) forwards; opacity: .9; }
.f-donut { right: max(6vw, calc(50% - 590px)); bottom: 13%; animation-delay: -5s; transform: rotate(-2deg); display: flex; gap: 14px; align-items: center; }
.f-donut svg { width: 64px; height: 64px; } .f-donut .c1 { stroke: var(--brand); } .f-donut .c2 { stroke: #d946ef; } .f-donut .c3 { stroke: #22d3ee; }
@keyframes grow { to { transform: scaleY(1); } }
@media (max-width: 1180px) { .float { display: none; } }

/* ───────── shell ───────── */
.shell { display: grid; grid-template-columns: 288px minmax(0, 1fr); height: 100dvh; }
.side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; z-index: 20; }
.side-head { display: flex; align-items: center; gap: 11px; padding: 18px 18px 12px; font-weight: 700; letter-spacing: -.01em; }
.side-head .logo { width: 34px; height: 34px; border-radius: 10px; } .side-head .logo svg { width: 20px; height: 20px; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 0 12px; min-height: 40px; border-radius: 10px; border: 0; background: none; text-align: left; width: 100%; color: var(--ink-2); font-weight: 550; transition: background .15s, color .15s; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); }
.nav-item.new { background: var(--grad); color: #fff; margin-bottom: 8px; justify-content: center; box-shadow: 0 6px 16px -8px rgba(99, 70, 229, .7); } .nav-item.new:hover { filter: brightness(1.07); background: var(--grad); color: #fff; }
.tenant { padding: 8px 16px 4px; } .tenant label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.chats { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 10px; overscroll-behavior: contain; }
.chats h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 16px 12px 6px; font-weight: 650; }
.chat-row { display: flex; align-items: center; border-radius: 10px; position: relative; }
.chat-row .nav-item { min-height: 36px; font-weight: 500; }
.chat-row .nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row .x { position: absolute; right: 4px; opacity: 0; border: 0; background: var(--surface-2); color: var(--ink-3); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.chat-row:hover .x, .chat-row .x:focus-visible { opacity: 1; } .chat-row .x:hover { color: var(--bad); }
@media (hover: none) { .chat-row .x { opacity: .7; } }
.profile { position: relative; border-top: 1px solid var(--line); }
.side-foot { width: 100%; border: 0; background: none; text-align: left; padding: 12px; display: flex; align-items: center; gap: 11px; cursor: pointer; transition: background .15s; } .side-foot:hover, .side-foot.active { background: var(--surface-2); } .side-foot.active b { color: var(--brand); }
.pm-chevron { color: var(--ink-3); display: grid; transform: rotate(180deg); flex: none; } .side-foot[aria-expanded="true"] .pm-chevron { transform: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; font-size: 15px; }
.side-foot .who { min-width: 0; flex: 1; line-height: 1.25; } .side-foot b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; } .side-foot .who span { color: var(--ink-3); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.top { display: flex; align-items: center; gap: 12px; padding: 0 20px; min-height: 60px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); position: sticky; top: 0; z-index: 5; }
.top h2 { font-size: 17px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.menu-btn { display: none; }
.scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 22px 20px 28px; overscroll-behavior: contain; scroll-behavior: smooth; }
.col { max-width: 880px; margin: 0 auto; width: 100%; }
.page-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .page-head h1 { font-size: 26px; letter-spacing: -.025em; } .page-head p { color: var(--ink-3); margin-top: 2px; }

/* ───────── chat ───────── */
.turn { margin: 0 0 26px; animation: rise .35s var(--ease); } @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.q { background: var(--grad); color: #fff; padding: 11px 16px; border-radius: 20px 20px 6px 20px; width: fit-content; max-width: min(86%, 640px); margin-left: auto; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 8px 20px -10px rgba(99, 70, 229, .7); }
.reply { display: flex; gap: 12px; margin-top: 12px; align-items: flex-start; }
.reply .logo { width: 32px; height: 32px; border-radius: 10px; margin-top: 2px; } .reply .logo svg { width: 18px; height: 18px; }
.a { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px 20px 20px 20px; padding: 14px 16px; box-shadow: var(--shadow-1); }
.a.failed { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; overflow-wrap: anywhere; } .md ul, .md ol { margin: 0 0 10px; padding-left: 22px; } .md li { margin: 3px 0; }
.md code { background: var(--surface-2); border-radius: 6px; padding: 1px 6px; font: 13px var(--mono); }
.tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.tablewrap { overflow: auto; margin: 4px 0 10px; border: 1px solid var(--line); border-radius: var(--r); max-height: 440px; background: var(--surface); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
th, td { padding: 9px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { position: sticky; top: 0; background: var(--surface-2); font-weight: 650; font-size: 12.5px; color: var(--ink-2); z-index: 1; }
tbody tr:hover td { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); } tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.chart { margin-top: 12px; } .chart img { max-width: 100%; height: auto; display: block; border-radius: var(--r); }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.dots { display: inline-flex; gap: 4px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: bounce 1.1s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.welcome { text-align: center; padding: 8vh 0 4vh; } .welcome .logo { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 22px; box-shadow: var(--shadow-3); } .welcome .logo svg { width: 34px; height: 34px; }
.welcome h2 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.03em; } .welcome p { color: var(--ink-2); margin-top: 8px; }
.suggest { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 30px; text-align: left; }
.suggest button { padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); text-align: left; line-height: 1.35; transition: border-color .15s, transform .2s var(--ease), box-shadow .2s; box-shadow: var(--shadow-1); }
.suggest button:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-2); } .suggest svg { color: var(--brand); display: block; margin-bottom: 8px; }
.composer { padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 35%); }
.composer .box { max-width: 880px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border: 1px solid var(--line-strong); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-2); transition: border-color .15s, box-shadow .15s; }
.composer .box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-2); }
.composer textarea { flex: 1; resize: none; border: 0; outline: none; background: transparent; padding: 9px 0; max-height: 170px; line-height: 1.45; }
.send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; transition: transform .15s var(--ease), opacity .15s; } .send:hover { transform: scale(1.06); } .send[disabled] { opacity: .35; transform: none; cursor: default; }
.allow { text-align: center; font-size: 12px; color: var(--ink-3); padding-top: 8px; }

/* ───────── panels, reports, cabinet ───────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin: 0 0 18px; box-shadow: var(--shadow-1); }
.panel > h3 { font-size: 16px; margin-bottom: 12px; letter-spacing: -.01em; }
details.panel summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; gap: 8px; align-items: center; } details.panel summary::-webkit-details-marker { display: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-1); }
.kpi .label { font-size: 13px; color: var(--ink-3); font-weight: 550; } .kpi b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi.good b { color: var(--good); } .kpi.bad b { color: var(--bad); } .kpi.warning b { color: var(--warn); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; } .facts dt { color: var(--ink-3); } .facts dd { margin: 0; font-weight: 550; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .item:last-child { border-bottom: 0; padding-bottom: 0; } .item:first-of-type { padding-top: 0; }
.person { padding: 14px 0; border-bottom: 1px solid var(--line); } .person:last-child { border-bottom: 0; } .person:first-of-type { padding-top: 0; }
.person .avatar { width: 40px; height: 40px; background: var(--brand-soft); color: var(--brand); }
.codecard { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-lg); padding: 16px 18px; margin: 14px 0; }
.code { font: 650 30px/1.1 var(--mono); letter-spacing: .1em; margin-bottom: 10px; user-select: all; color: var(--brand); word-break: break-all; }
.checks { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 14px 0; } .limits .wide { grid-column: 1 / -1; }
.editbox { background: var(--surface-2); border-radius: var(--r); padding: 14px 16px; margin-top: 12px; }
.spark { display: inline-flex; gap: 3px; align-items: flex-end; height: 26px; } .spark i { display: block; width: 7px; background: var(--brand); border-radius: 3px; opacity: .85; }
.qline { padding: 10px 0; border-bottom: 1px solid var(--line); } .qline:last-child { border-bottom: 0; }
.empty { text-align: center; color: var(--ink-3); padding: 40px 12px; } .empty svg { width: 40px; height: 40px; margin-bottom: 10px; color: var(--ink-3); opacity: .7; }
.skel { border-radius: var(--r); background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; height: 16px; margin: 10px 0; } @keyframes shimmer { to { background-position: -200% 0; } }

/* ───────── dialog & toasts ───────── */
dialog { border: 0; padding: 0; border-radius: var(--r-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); max-width: min(420px, calc(100vw - 32px)); width: 100%; animation: pop .22s var(--ease); }
dialog::backdrop { background: rgba(8, 10, 24, .5); backdrop-filter: blur(3px); }
dialog .body { padding: 24px 24px 8px; } dialog h3 { font-size: 19px; margin-bottom: 8px; } dialog p { color: var(--ink-2); }
dialog .actions { display: flex; gap: 10px; justify-content: flex-end; padding: 18px 24px 22px; }
.toasts { position: fixed; z-index: 100; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-3); max-width: min(380px, calc(100vw - 32px)); animation: rise .3s var(--ease); font-size: 14px; }
.toast.error { background: var(--bad); color: #fff; }

/* ───────── small screens ───────── */
@media (max-width: 960px) {
}
@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 18% 0 0; max-width: 340px; transform: translateX(-104%); transition: transform .25s var(--ease); box-shadow: var(--shadow-3); }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(8, 10, 24, .45); z-index: 15; animation: fade .2s; } @keyframes fade { from { opacity: 0; } }
  .menu-btn { display: inline-flex; }
  .top { padding: 0 12px; } .scroll { padding: 16px 14px 22px; } .composer { padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
  .q { max-width: 92%; } .reply .logo { display: none; } .panel { padding: 16px; border-radius: var(--r); } .page-head h1 { font-size: 22px; }
  .toasts { left: 16px; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .mock .bars i { transform: none; } }

.auth-wrap { width: 100%; max-width: 420px; }
.field input[type=date] { min-height: 42px; }
.top h2 + * { margin-left: auto; }
.row > select { width: auto; min-width: 150px; }
@media (max-width: 480px) { .glass { padding: 26px 20px 20px; border-radius: 24px; } .glass h1 { font-size: 26px; } .auth { padding: 18px 12px; } }

.center { text-align: center; }
.glass.still { animation: none; }
.company { border-bottom: 1px solid var(--line); padding: 12px 0; } .company:last-of-type { border-bottom: 0; } .company > .item { border-bottom: 0; padding: 0; } .grow-full { width: 100%; }

/* ───────── fill the whole phone screen: edge to edge, under the notch and above the home bar ───────── */
.shell { height: calc(100dvh - env(safe-area-inset-top)); }
.auth { min-height: calc(100dvh - env(safe-area-inset-top)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.side-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.scroll { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }
  .shell { display: block; position: relative; width: 100%; }
  .main { height: 100%; width: 100%; }
  .side { top: 0; bottom: 0; left: 0; right: auto; width: min(86vw, 340px); max-width: none; padding-top: env(safe-area-inset-top); }
  .top { position: sticky; top: 0; padding-left: 8px; padding-right: 12px; min-height: 56px; }
  .scroll { padding: 14px 14px calc(22px + env(safe-area-inset-bottom)); }
  .col { max-width: none; }
  .panel, .kpi, .a, .q { max-width: 100%; }
  .welcome { padding-top: 5vh; }
  .composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .composer .box { border-radius: 24px; }
  .btn.sm, .nav-item, .chat-row .nav-item { min-height: 44px; }   /* comfortable touch targets */
  input, select, textarea, .input, .btn.sm select { font-size: 16px; }   /* iOS zooms into smaller fields */
  .tablewrap { max-height: 60dvh; }
  .glass { max-width: none; }
  .auth { align-items: stretch; align-content: center; padding-left: 14px; padding-right: 14px; }
}
@media (display-mode: standalone) { body { user-select: none; -webkit-user-select: none; } input, textarea, .code, .md, .a, .q, table { user-select: text; -webkit-user-select: text; } }
.phead { display: flex; gap: 12px; align-items: flex-start; } .phead .avatar { margin-top: 2px; }

/* ───────── «Графіки» ───────── */
:root { --c1: #4f46e5; --c2: #e11d8f; --c3: #0891b2; --c4: #d97706; --c5: #059669; --c6: #dc2626; --c7: #2563eb; --c8: #64748b; }
:root[data-theme="dark"] { --c1: #8b8cff; --c2: #f472b6; --c3: #22d3ee; --c4: #fbbf24; --c5: #34d399; --c6: #f87171; --c7: #60a5fa; --c8: #94a3b8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c1: #8b8cff; --c2: #f472b6; --c3: #22d3ee; --c4: #fbbf24; --c5: #34d399; --c6: #f87171; --c7: #60a5fa; --c8: #94a3b8; } }
.s0 { --c: var(--c1); } .s1 { --c: var(--c2); } .s2 { --c: var(--c3); } .s3 { --c: var(--c4); } .s4 { --c: var(--c5); } .s5 { --c: var(--c6); } .s6 { --c: var(--c7); } .s7 { --c: var(--c8); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; margin-right: 8px; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } 
.ex-controls .chips-row:first-child { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .ex-controls .chips-row:first-child::-webkit-scrollbar { display: none; }
.pick { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 550; color: var(--ink-2); transition: all .15s; }
.pick:hover { border-color: var(--brand); color: var(--ink); } .pick.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } .pick.small { min-height: 32px; font-size: 13px; padding: 0 12px; } .pick.add { border-style: dashed; } .pick[disabled] { opacity: .5; }
.ex-row select, .ex-row input { min-height: 38px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); width: auto; min-width: 0; }
.ex-row .dim { opacity: .55; } .flip svg { transform: scaleX(-1); }
.cmp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 550; } .cmp-chip .dot { margin-right: 6px; }
.cmp-chip button { border: 0; background: none; color: var(--ink-3); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; } .cmp-chip button:hover { background: var(--bad-soft); color: var(--bad); }
.compare-form { margin-top: 12px; padding: 14px; background: var(--surface-2); border-radius: var(--r); }
.filters summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; list-style: none; } .filters summary::-webkit-details-marker { display: none; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; } .checklist { max-height: 190px; overflow: auto; margin-top: 6px; display: grid; gap: 0; padding-right: 6px; }
.link { background: none; border: 0; color: var(--brand); font-size: 13px; padding: 4px; }
.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: 11px; gap: 2px; } .seg button { border: 0; background: none; padding: 6px 13px; border-radius: 9px; font-weight: 550; color: var(--ink-2); font-size: 14px; } .seg button.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); }
.kpi.legend-btn { text-align: left; cursor: pointer; transition: opacity .15s, border-color .15s; } .kpi.legend-btn:hover { border-color: var(--brand); } .kpi.off { opacity: .45; } .kpi .label { display: flex; align-items: center; }
.delta { font-size: 13px; font-weight: 650; color: var(--ink-3); } .delta.up { color: var(--good); } .delta.down { color: var(--bad); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .leg { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; } .leg.off { opacity: .45; text-decoration: line-through; }
.chart-holder { margin-top: 10px; min-height: 120px; } .chart-wrap { position: relative; } .chart-svg { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; } .chart-svg .grid.zero { stroke: var(--line-strong); }
.chart-svg text { fill: var(--ink-3); font: 11px var(--font); } .chart-svg .cat-label { fill: var(--ink-2); font-size: 12px; } .chart-svg .val-label { fill: var(--ink-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ln { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pt { fill: var(--surface); stroke: var(--c); stroke-width: 2; } .area { fill: var(--c); opacity: .14; } .bar { fill: var(--c); } .slice { fill: var(--c); stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.guide { stroke: var(--ink-3); stroke-dasharray: 3 4; stroke-width: 1; } .donut-total { font-size: 20px !important; font-weight: 750; fill: var(--ink) !important; }
.donut-row { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; } .donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 180px; } .donut-legend li { display: flex; align-items: center; font-size: 14px; }
.tip { position: absolute; z-index: 6; pointer-events: none; min-width: 170px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); font-size: 13px; }
.tip-title { font-weight: 650; margin-bottom: 6px; } .tip-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; } .tip-row b { font-variant-numeric: tabular-nums; margin-left: 12px; }
.panel details > summary, details.panel > summary { display: flex; gap: 8px; align-items: center; }
@media (max-width: 800px) { .ex-row { gap: 8px; } .ex-row select { flex: 1 1 140px; } .seg button { padding: 6px 10px; } .tip { min-width: 150px; } }

.period-row select { flex: 1 1 110px; min-width: 0; } .period-row .btn.icon { flex: none; }
@media (max-width: 800px) {
  .chips-row.scrollx { flex-wrap: nowrap; overflow-x: auto; margin-left: -4px; padding: 0 4px 4px; scrollbar-width: none; } .chips-row.scrollx::-webkit-scrollbar { display: none; }
  .ex-controls { padding: 14px; } .ex-row select, .ex-row input { font-size: 16px; }
  .ex-row { flex-wrap: wrap; } .ex-row > select { flex: 1 1 45%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi b { font-size: 20px; }
  .period-row > select { flex: 1 1 28%; }
  .panel > .row > h3 { flex: 1 1 100%; } .seg { width: 100%; } .seg button { flex: 1; }
}

/* charts inside answers */
.answer-chart { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .answer-chart .chart-holder { margin-top: 8px; }
.chart-settings { margin: 12px 0; padding: 14px; background: var(--surface-2); border-radius: var(--r); } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.chart-settings select { width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 15px; } .chart-settings .mt16 select { margin-top: 8px; }
.answer-chart .legend { margin: 10px 0 0; } .chart-box { margin-top: 6px; }
@media (max-width: 800px) { .answer-chart .seg { width: auto; } .answer-chart .seg button { flex: none; padding: 6px 9px; font-size: 13px; } .chart-settings select { font-size: 16px; } }
.leg .muted { margin-left: 8px; }

/* ───────── one layout for every chart: settings → cards → chart (type switch on the right) → table ───────── */
.ctl { padding: 12px 0; border-top: 1px solid var(--line); } .ctl:first-child { border-top: 0; padding-top: 0; } .ctl:last-child { padding-bottom: 0; }
.ctl-label { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 8px; }
.period { display: grid; gap: 10px; } .period .seg.wrap { flex-wrap: wrap; width: fit-content; max-width: 100%; }
.period-row select.wide { flex: 1 1 170px; } .period-row input[type=date] { flex: 1 1 140px; }
.kpis.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; } .kpis.compact .kpi { padding: 10px 12px; } .kpis.compact .kpi b { font-size: 18px; }
.frame-head { margin-bottom: 4px; flex-wrap: nowrap; } .frame-head h3 { margin: 0; }
.chart-bare { margin-top: 4px; } .chart-bare .chart-holder { margin-top: 10px; }
.chart-frame > .kpis { margin-top: 0; }
@media (max-width: 800px) {
  .frame-head { flex-wrap: wrap; } .period .seg.wrap { width: 100%; } .period .seg.wrap button { flex: 1 1 auto; padding: 7px 8px; }
  .kpis.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field.mini { flex: 1 1 210px; min-width: 0; } .field.mini > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .field.mini select { width: 100%; }
.ex-row.fields { align-items: flex-start; gap: 12px; }
@media (max-width: 800px) { .field.mini { flex: 1 1 100%; } }

/* sharing */
.share-dialog { max-width: min(480px, calc(100vw - 24px)); } .share-dialog .checklist { max-height: 200px; margin: 8px 0 0 26px; }
.linkbox { font: 600 13px/1.4 var(--mono); word-break: break-all; user-select: all; margin-bottom: 10px; color: var(--brand); }
.chart-frame .panel .frame-head h3 { margin-bottom: 0; }
.mini-select { min-height: 34px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; width: auto; }

/* ───────── «Графіки»: settings in a sticky column, every section shows its current value ───────── */
.scroll:has(.ex-layout) .col { max-width: 1320px; }
.ex-layout { display: grid; grid-template-columns: minmax(300px, 372px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ex-aside { position: sticky; top: 0; max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--r-lg); }
.ex-main { min-width: 0; }
.ex-settings { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.ex-settings > summary { display: none; list-style: none; }
.ex-settings-body { display: flex; flex-direction: column; }
.acc { border-bottom: 1px solid var(--line); } .acc:last-of-type { border-bottom: 0; }
.acc > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 52px; -webkit-tap-highlight-color: transparent; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--surface-2); } .acc:first-of-type > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.acc-title { font-weight: 650; flex: none; } .acc-value { flex: 1; min-width: 0; text-align: right; color: var(--ink-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-chevron { display: grid; color: var(--ink-3); transition: transform .2s var(--ease); flex: none; } .acc[open] > summary .acc-chevron { transform: rotate(180deg); }
.acc[open] > summary .acc-value { color: var(--brand); }
.acc-body { padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 12px; animation: pop .2s var(--ease); }
.acc-body select, .acc-body input[type=date], .acc-body input[type=search] { width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background-color: var(--surface); }
.acc-body select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c93ae' 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 10px center; background-size: 18px; }
.acc-body select:focus, .acc-body input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.acc-body .field.mini { flex: none; width: 100%; }
.acc-body .period .seg.wrap { width: 100%; } .acc-body .period .seg.wrap button { flex: 1 1 auto; padding: 7px 8px; font-size: 13px; }
.acc-body .period-row { flex-wrap: nowrap; gap: 6px; } .acc-body .period-row select.wide { flex: 1 1 0; min-width: 0; } .acc-body .period-row select:not(.wide) { flex: 0 1 88px; min-width: 0; } .acc-body .period-row .btn.icon { flex: none; --h: 42px; } .acc-body .period-row input[type=date] { flex: 1 1 0; min-width: 0; padding: 8px 6px; }
.acc-body .compare-form { margin-top: 0; background: var(--surface-2); } .acc-body .wide-left { justify-content: flex-start; text-align: left; height: auto; padding: 9px 12px; line-height: 1.3; }
.acc-body .checklist { max-height: 190px; } .acc-body .list-search { margin: 8px 0 6px; }
.ex-reset { padding: 10px 16px 14px; border-top: 1px solid var(--line); text-align: center; }
.ex-summary-line { display: block; font-size: 13px; color: var(--ink-3); font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) {
  .ex-layout { grid-template-columns: minmax(0, 1fr); }
  .ex-aside { position: static; max-height: none; overflow: visible; }
  .ex-settings > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 60px; cursor: pointer; }
  .ex-settings[open] > summary { border-bottom: 1px solid var(--line); } .ex-settings[open] > summary .acc-chevron { transform: rotate(180deg); }
  .ex-settings > summary b { display: block; }
  .acc-body select, .acc-body input { font-size: 16px; min-height: 46px; }
}

/* profile menu */
.profile-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 6px; z-index: 30; animation: pop .15s var(--ease); }
.pm-head { display: flex; align-items: center; gap: 11px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .pm-head .who { min-width: 0; line-height: 1.25; } .pm-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-head span:not(.avatar) { color: var(--ink-3); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; text-align: left; color: var(--ink); font-weight: 550; } .pm-item:hover, .pm-item:focus-visible { background: var(--surface-2); outline-offset: -2px; } .pm-item.danger { color: var(--bad); } .pm-item.danger:hover { background: var(--bad-soft); }
.pm-sep { height: 1px; background: var(--line); margin: 6px 4px; }

details.panel > summary .acc-chevron { transform: none; } details.panel[open] > summary .acc-chevron { transform: rotate(180deg); }
details.panel > summary .fold-hint { margin-left: auto; } details.panel[open] > summary .fold-hint { display: none; }
.btn .acc-chevron { margin-left: 2px; } .btn[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); }

.acc.acc-hero { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.acc.acc-hero > summary:hover { background: var(--brand-soft); }
.acc.acc-hero .acc-title { color: var(--brand); font-size: 1.05em; }
.acc.acc-hero .acc-value { color: var(--ink); font-weight: 600; }
.acc.acc-hero .acc-body select, .acc.acc-hero .acc-body input[type=date] { background-color: var(--surface); }

/* a closer look at one row */
tr.drill { cursor: pointer; } tr.drill:hover td, tr.drill:focus-visible td { background: var(--surface-2); } tr.drill:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.drill-col { width: 28px; color: var(--ink-3); padding-left: 0; } .drill-col svg { transform: rotate(-90deg); }
.detail-dialog { max-width: min(780px, calc(100vw - 24px)); max-height: min(90vh, 900px); overflow: auto; }
.detail-content { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .detail-head h3 { margin: 2px 0 2px; overflow-wrap: anywhere; }
.detail-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.detail-kpis .kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface); min-width: 0; } .detail-kpis .kpi b { font-size: 1.15em; overflow-wrap: anywhere; }
.detail-panel h4 { margin-bottom: 8px; }
.bars { display: flex; flex-direction: column; gap: 2px; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 1.2fr) 1.4fr auto 44px; align-items: center; gap: 10px; padding: 7px 8px; border: 0; background: none; border-radius: 8px; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.bar-row:hover, .bar-row:focus-visible { background: var(--surface-2); }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .bar-track i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.bar-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; } .bar-share { text-align: right; }
@media (max-width: 560px) { .detail-dialog { max-width: 100vw; width: 100vw; max-height: 94vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; } .bar-row { grid-template-columns: 1fr auto; row-gap: 4px; } .bar-track { grid-column: 1 / -1; order: 3; } .bar-share { display: none; } }

.chart-svg .clickable { cursor: pointer; } .donut-hole { fill: transparent; outline: none; transition: fill .15s; } .donut-hole:hover, .donut-hole:focus-visible { fill: var(--c-hover, rgba(127,127,127,.12)); }

/* analytics: sortable tables, changes against another period */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--brand); }
th.sortable .sort-mark { display: inline-block; width: 12px; margin-left: 4px; color: var(--brand); }
th.sortable[aria-sort="ascending"] .sort-mark::after { content: "▲"; font-size: 9px; } th.sortable[aria-sort="descending"] .sort-mark::after { content: "▼"; font-size: 9px; }
.cell-delta { font-size: 12px; line-height: 1.2; } .cell-delta .delta { font-size: 12px; font-weight: 600; }
.kpi-change { display: block; }

/* the share sheet: one rhythm (16px between blocks, 6px inside a field) */
.share-dialog .share-body { display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 20px; }
.share-dialog .share-head h3 { margin: 0 0 6px; } .share-dialog .share-head p { margin: 0; }
.share-dialog .field { display: flex; flex-direction: column; gap: 6px; margin: 0; } .share-dialog .field > span { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.share-dialog .choice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-dialog .choice { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; background: var(--surface); }
.share-dialog .choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } .share-dialog .choice input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; flex: none; }
.share-dialog .checklist { margin: 0; max-height: 180px; }
.share-dialog .share-note { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.share-dialog .alert { margin: 0; }
.share-dialog .actions { padding: 14px 24px 20px; border-top: 1px solid var(--line); }
.share-dialog .codecard { margin: 0; }
@media (max-width: 480px) { .share-dialog .choice-list { grid-template-columns: 1fr; } }

/* analytics report: one rhythm between its blocks, tables without a scroll box of their own */
.report > * { margin-top: 0; margin-bottom: 14px; } .report > :last-child { margin-bottom: 0; }
.report > .report-note { margin-bottom: 10px; } .report > .kpis { margin-bottom: 14px; } .report > .panel { margin-bottom: 14px; }
.report .tablewrap { max-height: none; margin: 0; border-radius: 12px; }
.report th, .report td { padding: 9px 12px; } .report th.drill-col, .report td.drill-col { width: 26px; padding-left: 0; padding-right: 8px; }
.report .chart-frame { margin: 0; }
.inline-field { margin: 8px 0 0; max-width: 320px; }
.kpi-change { display: block; margin-top: 2px; }
.chart-frame .frame-head { flex-wrap: wrap; row-gap: 8px; } .chart-frame .frame-head h3 { min-width: 0; flex: 1 1 140px; }

/* ───────── theme switch ───────── */
.theme-switch { position: relative; flex: none; width: 58px; height: 30px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease); display: block; }
.theme-switch:hover { border-color: var(--brand); } .theme-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-switch .ts-ic { position: absolute; top: 0; bottom: 0; width: 28px; display: grid; place-items: center; color: var(--ink-3); transition: color .3s var(--ease), opacity .3s var(--ease); } .theme-switch .ts-ic svg { width: 15px; height: 15px; }
.theme-switch .sun { left: 0; } .theme-switch .moon { right: 0; }
.theme-switch .ts-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); box-shadow: 0 2px 6px rgba(40, 30, 140, .35); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.theme-switch[aria-checked="true"] .ts-thumb { transform: translateX(28px); }
.theme-switch[aria-checked="false"] .sun, .theme-switch[aria-checked="true"] .moon { color: #fff; z-index: 1; }
.theme-switch .ts-ic { z-index: 1; }
.auth-theme { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 3; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, stroke .4s ease, box-shadow .4s ease !important; }

/* ───────── motion: things arrive, they do not jump ───────── */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slice-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* a page: the heading, then each block a moment after the one before */
.page-head { animation: rise-in .4s var(--ease) backwards; }
.col > .panel, .col > .kpis, .col > .alert, .col > .item, .ex-main > *, .ex-aside { animation: rise-in .45s var(--ease) backwards; }
.col > :nth-child(2) { animation-delay: .04s; } .col > :nth-child(3) { animation-delay: .08s; } .col > :nth-child(4) { animation-delay: .12s; } .col > :nth-child(n+5) { animation-delay: .16s; }
.ex-main > :nth-child(2) { animation-delay: .05s; } .ex-main > :nth-child(n+3) { animation-delay: .1s; } .ex-aside { animation-delay: .02s; }
.report > * { animation: rise-in .45s var(--ease) backwards; } .report > :nth-child(2) { animation-delay: .04s; } .report > :nth-child(3) { animation-delay: .08s; } .report > :nth-child(4) { animation-delay: .12s; } .report > :nth-child(n+5) { animation-delay: .16s; }
.kpis > .kpi { animation: pop-in .4s var(--ease) backwards; }
.kpis > .kpi:nth-child(2) { animation-delay: .04s; } .kpis > .kpi:nth-child(3) { animation-delay: .08s; } .kpis > .kpi:nth-child(4) { animation-delay: .12s; } .kpis > .kpi:nth-child(5) { animation-delay: .16s; } .kpis > .kpi:nth-child(n+6) { animation-delay: .2s; }
.chart-frame > .panel { animation: rise-in .45s var(--ease) backwards; }

/* charts draw themselves */
.chart-svg .bar { transform-box: fill-box; animation-duration: .6s; animation-timing-function: var(--ease); animation-fill-mode: backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.chart-svg .bar.vb { transform-origin: 50% 100%; animation-name: grow-y; } .chart-svg .bar.hb { transform-origin: 0 50%; animation-name: grow-x; }
.chart-svg .ln { stroke-dasharray: 1; animation: draw-line 1s var(--ease) both; }
@keyframes area-in { from { opacity: 0; } to { opacity: .14; } } .chart-svg .area { animation: area-in .9s ease .15s both; }
.chart-svg .pt { animation: pop-in .35s var(--ease) .7s backwards; transform-box: fill-box; transform-origin: center; }
.chart-svg .slice { animation: slice-in .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.chart-svg .val-label { animation: fade-in .5s ease .35s both; }
.donut-legend li { animation: rise-in .4s var(--ease) backwards; } .donut-legend li:nth-child(2) { animation-delay: .06s; } .donut-legend li:nth-child(3) { animation-delay: .12s; } .donut-legend li:nth-child(n+4) { animation-delay: .18s; }

/* tables: rows settle in; drill-down bars fill */
tbody tr { animation: fade-in .35s ease both; } tbody tr:nth-child(2) { animation-delay: .03s; } tbody tr:nth-child(3) { animation-delay: .06s; } tbody tr:nth-child(4) { animation-delay: .09s; } tbody tr:nth-child(5) { animation-delay: .12s; } tbody tr:nth-child(n+6) { animation-delay: .15s; }
.bar-track i { transform-origin: 0 50%; animation: grow-x .7s var(--ease) .1s both; }
.detail-content > * { animation: rise-in .4s var(--ease) backwards; } .detail-content > :nth-child(2) { animation-delay: .04s; } .detail-content > :nth-child(3) { animation-delay: .08s; } .detail-content > :nth-child(4) { animation-delay: .12s; } .detail-content > :nth-child(n+5) { animation-delay: .16s; }
.cmp-chip { animation: pop-in .3s var(--ease) backwards; } .chips-row .chip { animation: pop-in .3s var(--ease) backwards; }
.delta { animation: fade-in .5s ease .2s both; }

/* touch: a press, a lift */
.btn, .pick, .nav-item, .suggest button, .kpi.legend-btn { transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s; }
.btn:not(:disabled):hover, .pick:not(:disabled):hover { transform: translateY(-1px); } .btn:not(:disabled):active, .pick:not(:disabled):active, .nav-item:active { transform: scale(.97); }
.suggest button:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.nav-item { position: relative; } .nav-item.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--brand); animation: grow-y .3s var(--ease) both; }
dialog[open] { animation: pop-in .25s var(--ease); } dialog::backdrop { animation: fade-in .25s ease; }
.acc-body, .compare-form { animation: rise-in .25s var(--ease); }
.seg button { transition: background-color .2s var(--ease), color .2s var(--ease); }
.toast { animation: rise-in .3s var(--ease) backwards; }
tr.drill .drill-col svg { transition: transform .2s var(--ease); } tr.drill:hover .drill-col svg { transform: rotate(-90deg) translateY(3px); }
@media (prefers-reduced-motion: reduce) { .chart-svg .ln { stroke-dasharray: none; } .btn:hover, .pick:hover, .suggest button:hover { transform: none !important; } }

/* filters on the extra breakdowns: one folded group each */
.fgroup { border-top: 1px solid var(--line); margin-top: 8px; } .fgroup > summary { display: flex; align-items: center; gap: 8px; padding: 10px 2px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; } .fgroup > summary::-webkit-details-marker { display: none; }
.fgroup[open] > summary .acc-chevron { transform: rotate(180deg); } .fgroup .filter-col > .row > b { display: none; } .fgroup .fgroup-count:not(:empty) { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.fgroup > .filter-col { padding-bottom: 10px; }

/* the details window: it opens at its final size, shows grey placeholders, and the real content fades in without a gap */
.detail-dialog { width: min(1000px, calc(100vw - 32px)); max-width: none; height: min(90vh, 920px); max-height: none; overflow: hidden; transition: width .3s var(--ease), height .3s var(--ease), border-radius .3s var(--ease); }
.detail-dialog[open] { display: flex; flex-direction: column; }
.detail-dialog.full { width: 100vw; height: 100dvh; border-radius: 0; }
@media (max-width: 560px) { .detail-dialog { width: 100vw; max-width: 100vw; height: 92vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; } .detail-dialog.full { height: 100dvh; margin: 0; border-radius: 0; } }
/* the scroll bar lives inside the frame: the window itself never scrolls */
.detail-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.detail-content::-webkit-scrollbar { width: 10px; } .detail-content::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.detail-content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid var(--surface); }
.detail-actions { display: flex; gap: 6px; flex: none; }
.detail-content { transition: opacity .2s ease; } .detail-content.loading { opacity: .45; pointer-events: none; }
.detail-content > *, .detail-content .kpis > .kpi, .detail-kpis > .kpi { animation: fade-in .3s ease both !important; animation-delay: 0s !important; }
.detail-skel { display: flex; flex-direction: column; gap: 14px; } .detail-skel .detail-kpis { margin: 0; }
.detail-skel .ph-kpi { height: 74px; border-radius: 12px; } .detail-skel .ph-chart { height: 250px; border-radius: 18px; } .detail-skel .ph-row { height: 36px; border-radius: 10px; }

/* a chart is laid out again for each new width; that redraw does not animate again */
.chart-svg.still *, .chart-svg.still { animation: none !important; }
.detail-content, .detail-dialog { will-change: auto; }

/* the chart-type switch: the knob slides; the picture is swapped inside its box (the old one fades out, the new one draws itself in) */
.seg.slide { position: relative; } .seg.slide button { position: relative; z-index: 1; } .seg.slide button.on { background: transparent; box-shadow: none; }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-1); z-index: 0; transition: transform .46s var(--spring), width .46s var(--spring); }
.seg-thumb.still { transition: none; }
.chart-holder.swapping { position: relative; overflow: hidden; transition: height .38s var(--ease); }
.chart-holder.swapping > .chart-out { position: absolute; top: 0; left: 0; right: 0; animation: chart-out .22s ease both; pointer-events: none; }
@keyframes chart-out { from { opacity: var(--from, 1); } to { opacity: 0; } }
.chart-holder.swapping > .chart-in { animation: chart-in .38s var(--ease) both; }
@keyframes chart-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the details window says plainly which period it shows and what it is compared with */
.detail-periods { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.period-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); } .period-chip .muted { font-size: 12px; } .period-chip b { color: var(--brand); }
.detail-compare { display: inline-flex; align-items: center; gap: 8px; } .detail-compare > span { font-size: 12px; color: var(--ink-3); } .detail-compare select { min-height: 38px; width: auto; max-width: 100%; padding: 6px 30px 6px 10px; }
.detail-note { margin-top: -4px; }
.detail-panel h4 .muted { font-weight: 500; }
.detail-compare select { appearance: none; -webkit-appearance: none; background-color: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c93ae' 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 8px center; background-size: 16px; }
.detail-compare select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* a slice grows a little under the cursor */
.chart-svg .slice { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; transition: transform .38s cubic-bezier(.22, 1, .36, 1), filter .38s ease; }
.chart-svg .slice.lift { transform: scale(1.055); filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .18)); }

/* what is under the cursor lifts smoothly: bars widen, points swell */
.chart-svg .bar, .chart-svg .pt { transition: transform .38s cubic-bezier(.22, 1, .36, 1), filter .38s ease; }
.chart-svg .bar.vb.hot { transform: scale(1.22, 1.02); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .2)); }
.chart-svg .bar.hb.hot { transform: scale(1.015, 1.28); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .2)); }
.chart-svg .pt.hot { transform: scale(1.9); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.chart-svg .pt.ghost { opacity: 0; animation: none; } .chart-svg .pt.ghost.hot { opacity: 1; }
.chart-svg .pt { transition: transform .38s cubic-bezier(.22, 1, .36, 1), filter .38s ease, opacity .25s ease; }
/* the whole middle of the pie is the button: its text must not catch the click (or get selected) */
.chart-svg.donut text { pointer-events: none; user-select: none; -webkit-user-select: none; }
.chart-svg.donut .donut-hole.clickable { cursor: pointer; }
.detail-trail { margin: 2px 0 4px; }
.chart-svg .slice { pointer-events: none; } .chart-svg .slice-hit { cursor: default; } .chart-svg .slice-hit.clickable { cursor: pointer; }
.detail-scope { margin: 2px 0 12px; } .detail-scope button { padding: 7px 16px; }
.detail-content > .detail-scope { align-self: flex-start; width: fit-content; animation: none; }

/* filters: search, chosen values as chips, groups as tabs */
.filters { display: flex; flex-direction: column; gap: 10px; }
.filter-find { width: 100%; }
.filter-chips { gap: 6px; } .fchip { max-width: 100%; } .fchip button { border: 0; background: none; padding: 0 0 0 4px; cursor: pointer; color: var(--ink-3); display: inline-flex; } .fchip button:hover { color: var(--ink); } .fchip svg { width: 14px; height: 14px; }
.filter-tabs { display: flex; flex-wrap: wrap; width: 100%; gap: 2px; } .filter-tabs button { flex: 1 1 auto; padding: 6px 10px; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.tab-n { background: var(--brand); color: #fff; border-radius: 999px; font-size: 11px; line-height: 1; padding: 3px 6px; font-weight: 650; }
.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; opacity: .55; }
.filter-heading { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; margin: 8px 0 -2px; }
.fgroup .link.small { font-size: 12.5px; }
.filter-tabs .seg-thumb { top: 0; bottom: auto; left: 0; transition: transform .46s var(--spring), width .46s var(--spring), height .46s var(--spring); } .filter-tabs .seg-thumb.still { transition: none; }
.filter-tabs.seg.slide { position: relative; }

/* the layered catalogue: first level with the second one inside */
.tree-row { display: flex; align-items: center; gap: 2px; } .tree-toggle { border: 0; background: none; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer; flex: none; } .tree-toggle.none { cursor: default; }
.tree-toggle svg { width: 14px; height: 14px; transition: transform .28s var(--ease); } .tree-toggle.open svg { transform: rotate(90deg); }
.tree-n { margin-left: 6px; }
.tree-kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); margin-left: 12px; } .tree-kids.open { grid-template-rows: 1fr; } .tree-kids > div { overflow: hidden; min-height: 0; border-left: 1px solid var(--line); padding-left: 12px; margin-left: 0; }
.tree-kid { padding: 5px 0; }

/* ════════════════════════════════════════════════════════════════════════════
   LIFE — depth, light and motion, as one system.
   · Depth: surfaces stack (page → card → raised card → dialog); each level has a soft ambient shadow plus a tighter key shadow, and a 1px
     top highlight like light falling from above. In the dark theme the highlight does the work that shadows cannot.
   · Light: a faint colour glow lives behind the page; cards under the cursor catch a soft spotlight.
   · Motion: one set of curves and durations; only transform and opacity move; everything respects «reduce motion».
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --spring: cubic-bezier(.34, 1.45, .64, 1);
  --t-fast: .14s; --t-base: .24s; --t-slow: .42s;
  --lift-1: 0 1px 2px rgba(24, 28, 60, .05), 0 2px 8px -4px rgba(24, 28, 60, .07);
  --lift-2: 0 2px 4px rgba(24, 28, 60, .05), 0 12px 28px -12px rgba(60, 50, 160, .26);
  --lift-3: 0 4px 8px rgba(24, 28, 60, .06), 0 28px 60px -22px rgba(60, 50, 160, .42);
  --hi: rgba(255, 255, 255, .85); --spot: rgba(99, 90, 240, .10); --glow-a: rgba(124, 99, 255, .13); --glow-b: rgba(217, 70, 239, .08);
}
:root[data-theme="dark"] { --lift-1: 0 1px 0 rgba(0, 0, 0, .35), 0 6px 18px -10px rgba(0, 0, 0, .7); --lift-2: 0 2px 0 rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .8); --lift-3: 0 30px 80px -24px rgba(0, 0, 0, .9);
  --hi: rgba(255, 255, 255, .055); --spot: rgba(139, 140, 255, .16); --glow-a: rgba(124, 99, 255, .20); --glow-b: rgba(217, 70, 239, .10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lift-1: 0 1px 0 rgba(0, 0, 0, .35), 0 6px 18px -10px rgba(0, 0, 0, .7); --lift-2: 0 2px 0 rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .8); --lift-3: 0 30px 80px -24px rgba(0, 0, 0, .9);
  --hi: rgba(255, 255, 255, .055); --spot: rgba(139, 140, 255, .16); --glow-a: rgba(124, 99, 255, .20); --glow-b: rgba(217, 70, 239, .10); } }

::selection { background: var(--brand-soft); color: var(--ink); }
html { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.scroll::-webkit-scrollbar, .chats::-webkit-scrollbar { width: 10px; } .scroll::-webkit-scrollbar-thumb, .chats::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; } .scroll::-webkit-scrollbar-thumb:hover { background-color: var(--ink-3); }

/* the page: a faint glow far behind everything gives the surfaces something to stand in front of */
.main { position: relative; isolation: isolate; }
.main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; animation: fade-in 1.2s ease .1s forwards;
  background: radial-gradient(60% 46% at 88% -6%, var(--glow-a), transparent 70%), radial-gradient(48% 40% at -4% 108%, var(--glow-b), transparent 70%); }

/* the top bar lifts off the page once the content moves under it */
.top { transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base), background-color var(--t-base); }
.top.scrolled { box-shadow: 0 10px 26px -18px rgba(30, 30, 90, .45); border-bottom-color: transparent; }

/* surfaces */
.panel, .kpi, .suggest button, .composer .box { box-shadow: var(--lift-1), inset 0 1px 0 var(--hi); transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), border-color var(--t-base), background-color var(--t-base); }
.panel:hover { box-shadow: var(--lift-2), inset 0 1px 0 var(--hi); }
.kpi { position: relative; overflow: hidden; }
.kpi.legend-btn { cursor: pointer; } .kpi.legend-btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2), inset 0 1px 0 var(--hi); border-color: var(--brand-line); } .kpi.legend-btn:active { transform: translateY(0) scale(.985); transition-duration: var(--t-fast); }
dialog { box-shadow: var(--lift-3), inset 0 1px 0 var(--hi); }
.toast { box-shadow: var(--lift-3); }
.glass, .float { box-shadow: var(--lift-3), inset 0 1px 0 var(--hi); }

/* spotlight: a soft light follows the pointer across a card (the page sets --mx / --my) */
.kpi::after, .suggest button::after, .bar-row::after, .pick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-base) var(--ease-out);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); }
.kpi:hover::after, .suggest button:hover::after, .bar-row:hover::after, .pick:hover::after { opacity: 1; }
.suggest button, .bar-row, .pick { position: relative; overflow: hidden; }
.pick { overflow: hidden; }

/* buttons: a press you can feel, and a sheen across the main one */
.btn { transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast), transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease-out), filter var(--t-fast); }
.btn:not(:disabled):hover { box-shadow: var(--lift-1); } .btn:not(:disabled):active { transform: scale(.965); box-shadow: none; transition-duration: var(--t-fast); }
.btn.primary { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 6px 18px -6px rgba(99, 70, 229, .6), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-out); }
.btn.primary:hover::after { transform: translateX(120%); }
.btn.primary:not(:disabled):hover { box-shadow: 0 10px 24px -8px rgba(99, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn svg.i { transition: transform var(--t-base) var(--spring); } .btn:not(:disabled):hover svg.i { transform: translateY(-1px) scale(1.08); }

/* fields and keyboard focus: one soft ring everywhere */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent); transition: box-shadow var(--t-fast); }
.input, .field input, .field select, .field textarea, .panel select { transition: border-color var(--t-fast), box-shadow var(--t-base) var(--ease-out), background-color var(--t-fast); }
.check input { transition: transform var(--t-base) var(--spring); } .check input:active { transform: scale(.82); }
.check:hover input { transform: scale(1.06); }

/* the menu: one pill glides to the chosen item */
.nav { position: relative; }
.nav-glide { position: absolute; left: 10px; right: 10px; top: 0; height: 40px; border-radius: 10px; background: var(--brand-soft); pointer-events: none; opacity: 0; z-index: 0;
  transition: transform .42s var(--ease-out), height .3s var(--ease-out), opacity .2s; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.nav-glide.on { opacity: 1; } .nav-glide.still { transition: none; }
.nav-glide::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--brand); }
.nav.has-glide .nav-item { position: relative; z-index: 1; } .nav.has-glide .nav-item.active { background: transparent; } .nav.has-glide .nav-item.active::before { display: none; }
.nav-item svg.i { transition: transform var(--t-base) var(--spring); } .nav-item:hover svg.i { transform: scale(1.12) rotate(-4deg); }
.chat-row .nav-item { transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-base) var(--ease-out); } .chat-row:hover .nav-item { transform: translateX(2px); }

/* work in progress: a thin line runs across the top while the server is asked */
.progress { position: fixed; z-index: 200; left: 0; top: 0; height: 2.5px; width: 100%; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, #4f46e5, #a855f7, #22d3ee); box-shadow: 0 0 10px rgba(124, 99, 255, .7); transition: transform .3s var(--ease-out), opacity .3s; }
.progress.run { opacity: 1; } .progress.done { transform: scaleX(1) !important; opacity: 0; transition: transform .2s ease-out, opacity .4s .15s; }

/* dialogs leave as gracefully as they arrive; toasts too */
dialog[open] { animation: dialog-in var(--t-slow) var(--ease-out); } dialog[open]::backdrop { animation: fade-in var(--t-base) ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
dialog.closing { animation: dialog-out .2s var(--ease-in) forwards !important; } dialog.closing::backdrop { animation: fade-out .2s ease forwards !important; }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(.98); } } @keyframes fade-out { to { opacity: 0; } }
.toast { animation: toast-in .45s var(--spring) both; } .toast.leaving { animation: toast-out .24s var(--ease-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(24px) scale(.96); } }

/* things that appear: a touch of overshoot on small elements */
.chip, .cmp-chip { animation-timing-function: var(--spring); }
.profile-menu { transform-origin: 20% 100%; animation: dialog-in var(--t-base) var(--ease-out); }
.delta { transition: transform var(--t-base) var(--spring); } .kpi:hover .delta { transform: translateX(2px); }

/* skeletons breathe with the same light as the page */
.skel { background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--brand) 9%, var(--line)) 50%, var(--surface-2) 70%); background-size: 220% 100%; }

/* tables: a row lights up under the pointer */
tbody tr { transition: background-color var(--t-fast); } tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }

@media (prefers-reduced-motion: reduce) { .main::before { animation: none; opacity: 1; } .nav-glide { transition: none; } .progress { display: none; } }
.period .seg.slide .seg-thumb { top: 0; bottom: auto; left: 0; transition: transform .46s var(--spring), width .46s var(--spring), height .46s var(--spring); } .period .seg.slide .seg-thumb.still { transition: none; }

/* ───────── the team page ───────── */
.col.wide { max-width: 1120px; }
.team-stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.team-stat { padding: 16px 18px; gap: 3px; } .team-stat b { font-size: 30px; line-height: 1.1; margin-top: 2px; }
.ts-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 8px; color: var(--brand); background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-2) 14%, var(--brand-soft))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.ts-icon svg { width: 18px; height: 18px; }
.team-section { margin: 26px 0 0; } .team-section > h3, .team-section > .row > h3 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.count-pill { font-size: 12.5px; font-weight: 650; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 2px 9px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.invite-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); border: 1.5px dashed var(--brand-line); background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
.invite-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--brand); background: var(--surface); box-shadow: var(--lift-1); flex: none; }

.pcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--lift-1), inset 0 1px 0 var(--hi); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base); }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--lift-2), inset 0 1px 0 var(--hi); border-color: var(--brand-line); }
.pcard::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--grad); opacity: 0; transition: opacity var(--t-base); } .pcard.active::before { opacity: .9; }
.pc-top { display: flex; align-items: center; gap: 14px; }
.pc-avatar { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: var(--grad); flex: none; box-shadow: 0 8px 18px -8px rgba(99, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pc-dot { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); border: 3px solid var(--surface); }
.pcard.active .pc-dot { background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 50%, transparent); animation: pulse-dot 2.4s ease-out infinite; } .pcard.expired .pc-dot { background: var(--bad); }
@keyframes pulse-dot { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pc-who { min-width: 0; } .pc-who b { display: block; font-size: 16.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-chips { gap: 6px; margin-top: 5px; }
.pc-stats { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 6px 18px; align-items: end; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); }
.pstat b { display: block; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .pstat span { font-size: 12px; color: var(--ink-3); }
.pc-spark { justify-self: end; } .pc-spark .spark { height: 30px; } .pc-spark .spark i { width: 6px; }
.pc-features { display: flex; flex-wrap: wrap; gap: 6px; } .feat { font-size: 12px; font-weight: 550; padding: 3px 9px; border-radius: 999px; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); }
.pc-foot { margin-top: -4px; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .pc-actions .danger { margin-left: auto; }
.pcard .editbox, .pcard .codecard { margin-top: 0; }

.team-dialog { max-width: min(640px, calc(100vw - 24px)); } .team-dialog-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; max-height: min(86vh, 760px); overflow-y: auto; }
.td-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 8px 18px -8px rgba(99, 70, 229, .7); } .td-icon svg { width: 22px; height: 22px; }
.team-tabs { margin-bottom: 12px; } .team-tabs button { padding: 7px 16px; }
.team-activity { margin-top: 0; }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } .pc-stats { grid-template-columns: repeat(3, auto); } .pc-spark { grid-column: 1 / -1; justify-self: stretch; } }

/* ───────── the query bar: what matters in view, the rest one click away ───────── */
.qbar { position: relative; z-index: 6; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; margin: 0 0 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift-1), inset 0 1px 0 var(--hi); }
.qrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.qfield { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 1 1 190px; max-width: 340px; }
.qfield.period { flex: 0 1 260px; } .qfield.pack { flex: 1 1 240px; max-width: 360px; }
.qlabel, .qopts .field.mini > span { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .01em; }
.qfield select, .qopts select, .qtrigger { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); font-size: 15.5px; font-weight: 550; }
.qopts { display: contents; } .qopts .field.mini { flex: 1 1 190px; max-width: 340px; min-width: 190px; margin: 0; }
.qtrigger { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-base) var(--ease-out), background-color var(--t-fast); }
.qtrigger:hover { border-color: var(--brand); } .qtrigger[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qtrigger.hero { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); } .qtrigger .acc-chevron { transition: transform var(--t-base) var(--ease-out); } .qtrigger[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); }
.qvalue { font-weight: 650; }
.qactions { align-items: center; padding-top: 2px; }
.qpill { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 550; font-size: 14.5px; color: var(--ink-2);
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease-out); }
.qpill:hover { border-color: var(--brand); color: var(--ink); background: var(--surface-2); } .qpill:active { transform: scale(.96); } .qpill[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .qpill:disabled { opacity: .5; cursor: default; }
.qbadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; } .qbadge:empty { display: none; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; } .qchips:not(:has(*)) { display: none; } .qchips .chips-row { display: contents; } .qchips .hidden { display: none; }
.qbar > .muted.small { margin: -4px 2px 0; }

.pop-wrap { position: relative; display: block; } .qactions .pop-wrap { display: inline-block; }
.pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: max-content; min-width: 300px; max-width: min(92vw, 420px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift-3), inset 0 1px 0 var(--hi);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 24px -8px; transition: opacity .18s var(--ease-out), transform .26s var(--ease-out); pointer-events: none; }
.pop.open { opacity: 1; transform: none; pointer-events: auto; }
.pop:has(.pop-body.wide) { width: min(92vw, 460px); }
.pop-body { padding: 16px 18px 18px; max-height: min(72vh, 600px); overflow-y: auto; overscroll-behavior: contain; }
.pop-title { font-weight: 650; font-size: 15px; margin-bottom: 10px; } .pop-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pop .period { gap: 12px; } .pop .compare-form { margin-top: 10px; }
.pop-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(8, 10, 24, .42); animation: fade-in .2s ease; }
@media (max-width: 700px) {
  .pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100% !important; max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(24px); transform-origin: 50% 100%; z-index: 41; padding-bottom: env(safe-area-inset-bottom); }
  .pop.open { transform: none; } .pop-body { max-height: 68vh; }
  .qfield, .qfield.period, .qfield.pack, .qopts .field.mini { flex: 1 1 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .pop { transition: none; } }
.pop:has(.pop-body .period) { width: min(92vw, 410px); }

.pop.compact { min-width: 0; width: 250px; } .pop-body.tight { padding: 12px 14px 14px; } .pop.compact .field.mini { margin: 0; }
.qreset { margin-left: auto; color: var(--ink-3); }
.cell-link { cursor: pointer; font-weight: 650; color: var(--brand); transition: background-color var(--t-fast), transform var(--t-base) var(--spring); } .cell-link:hover { background: var(--brand-soft); } .cell-link:active { transform: scale(.94); }

/* the matrix: each number is a button with a heat of its own; nothing suggests the whole row opens */
.cell-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 7px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--brand) calc(var(--heat, 0) * 42%), var(--surface)); box-shadow: var(--lift-1); transition: transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast); }
.cell-btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: var(--brand); } .cell-btn:active { transform: scale(.95); }
.cell-btn.label { min-width: 0; background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
td:has(> .cell-btn) { padding-top: 6px; padding-bottom: 6px; }
td.mx, th.mx { text-align: center !important; } td.mx:not(:has(.cell-btn)) { color: var(--ink-3); }

/* equal fields; the period has its arrows beside it */
.qmain { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; gap: 12px 14px; }
.qmain > .qfield, .qmain .qopts .field.mini { max-width: none; min-width: 0; flex: none; } .qmain .qopts { display: contents; }
.qfield.period { flex: none; }
.pstep { display: flex; align-items: stretch; gap: 6px; } .pstep > .pop-wrap { flex: 1; min-width: 0; } .pstep .qtrigger { height: 100%; }
.pstep-arrow { flex: none; width: 40px; min-height: 44px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast), transform var(--t-base) var(--spring), opacity var(--t-base); }
.pstep-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .pstep-arrow:active:not(:disabled) { transform: scale(.9); } .pstep-arrow:disabled { opacity: .35; cursor: default; } .pstep-arrow.off { visibility: hidden; }
@media (max-width: 700px) { .qmain { grid-template-columns: 1fr; } }

/* the same height everywhere: Safari draws a native select at its own height, so every select of the bar is drawn by us; and arrows that are not needed take no room */
.qfield select, .qopts select { -webkit-appearance: none; appearance: none; min-height: 44px; height: 44px; line-height: 1.2; padding-right: 36px; background-color: var(--surface); color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.qfield select:hover, .qopts select:hover { border-color: var(--brand); } .qfield select:focus, .qopts select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qtrigger { height: 44px; }
.pstep-arrow.off { display: none; } .pstep-arrow { height: 44px; min-height: 44px; }
.report > .alert { margin-top: 4px; margin-bottom: 14px; }
/* the period picker inside a popover (compare with another period): one row, like in the accordion */
.pop-body .period-row { flex-wrap: nowrap; gap: 6px; } .pop-body .period-row select.wide { flex: 1 1 0; min-width: 0; } .pop-body .period-row select:not(.wide) { flex: 0 1 92px; min-width: 0; } .pop-body .period-row .btn.icon { flex: none; --h: 42px; } .pop-body .period-row input[type=date] { flex: 1 1 0; min-width: 0; padding: 8px 6px; }
.pop-body .period .seg.wrap { width: 100%; } .pop-body .period .seg.wrap button { flex: 1 1 auto; padding: 7px 8px; font-size: 13px; }
.pop-body .stack { gap: 8px; } .pop-body .stack .ctl-label { margin: 6px 0 0; }
.pop-body .period .seg.wrap { flex-wrap: nowrap; gap: 2px; } .pop-body .period .seg.wrap button { flex: 1 1 auto; padding: 8px 6px; font-size: 12.5px; white-space: nowrap; text-align: center; }

/* reloading a result: the old picture stays, dimmed, until the new one replaces it (no collapse, no jump) */
.reloading { opacity: .5; pointer-events: none; transition: opacity .2s var(--ease); }
.period .period-row { min-height: 46px; animation: pop .22s var(--ease); }

/* ───────── dashboards ───────── */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dash { display: flex; flex-direction: column; gap: 14px; }
.dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.dash-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: transform .18s var(--ease), border-color .18s, background .18s, color .18s, box-shadow .18s; }
.dash-tab:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.dash-tab.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); box-shadow: 0 6px 16px -10px var(--brand); }
.dash-tab.add { border-style: dashed; color: var(--ink-3); } .dash-tab .i { width: 15px; height: 15px; }
.dash-owner { font-size: 12px; font-weight: 550; color: var(--ink-3); }
.dash-meta { display: flex; align-items: center; gap: 8px; }
.dash-bar { margin: 0; }
.dash-bar > .muted.small { margin: -4px 2px 0; }
.dash-filters .qactions { gap: 10px; align-items: center; }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 40px; grid-auto-flow: row dense; gap: 12px; }
.tile { grid-column: span var(--c, 6); grid-row: span var(--r, 7); display: flex; flex-direction: column; min-height: 0; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 10px 14px 12px; min-width: 0; transition: box-shadow .22s var(--ease), transform .22s var(--ease), opacity .2s; animation: rise-in .4s var(--ease) backwards; }
.tile:hover { box-shadow: var(--shadow-2); }
.tile.dragging { z-index: 30; box-shadow: var(--shadow-3), 0 0 0 2px var(--brand); pointer-events: none; will-change: transform; transition: none; animation: none; }
.tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 36px; }
.tile-head h4 { font-size: 15.5px; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-head .btn.icon { opacity: .55; transition: opacity .18s; } .tile:hover .tile-head .btn.icon, .tile-head .btn.icon:focus-visible { opacity: 1; }
.tile-grip { display: inline-grid; place-items: center; width: 22px; height: 28px; margin-left: -6px; color: var(--ink-3); cursor: grab; opacity: 0; transition: opacity .18s; touch-action: none; } .tile:hover .tile-grip { opacity: 1; } .tile-grip:active { cursor: grabbing; }
.tile-kpi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; } .tile-kpi b { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-body { min-width: 0; } .tile-body .chart-frame, .tile-body .chart-bare { margin: 0; } .tile-body .chart-bare .frame-head h3:empty { display: none; } .tile-body .chart-bare .frame-head { justify-content: flex-end; }
.tile-body .tablewrap { max-height: 360px; }
.tile-skel { padding: 6px 0; }
.dash-empty, .dash-welcome { grid-column: 1 / -1; text-align: center; padding: 44px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dash-empty > .i, .dash-welcome > .i { width: 34px; height: 34px; color: var(--brand); } .dash-empty p, .dash-welcome p { max-width: 520px; }
.dash-steps { text-align: left; max-width: 520px; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; margin: 4px 0 10px; }
.pin-btn { margin-left: 8px; opacity: .6; } .pin-btn:hover { opacity: 1; } .frame-title { display: flex; align-items: center; }
.pin-dialog .field { margin-top: 12px; } .pin-done { text-align: center; } .pin-check { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--good-soft); color: var(--good); } .pin-check .i { width: 22px; height: 22px; }
.pop.menu { min-width: 230px; padding: 6px; } .pop.right { left: auto; right: 0; }
.menu-list { display: grid; gap: 2px; } .menu-item { text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; color: var(--ink); cursor: pointer; background: none; border: 0; } .menu-item:hover:not(:disabled) { background: var(--brand-soft); } .menu-item:disabled { opacity: .4; cursor: default; } .menu-item.danger { color: var(--bad); } .menu-item.danger:hover { background: var(--bad-soft); }
.menu-group { padding: 6px 8px; display: grid; gap: 5px; } .menu-label { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.menu-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); } .menu-seg button { flex: 1 1 auto; padding: 6px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: none; border: 0; cursor: pointer; white-space: nowrap; } .menu-seg button.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); }
.menu-row { display: flex; gap: 2px; } .menu-row .menu-item { flex: 1; text-align: center; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .tile.half, .tile.full { grid-column: auto; } .tile-grip { display: none; } .tile-head .btn.icon { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tile, .dash-tab { animation: none; transition: none; } }
.tile-table .tablewrap { max-height: 380px; } .tile-table .field.mini { margin-bottom: 8px; }
.dash-bar .qmain { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
@media (max-width: 860px) { .dash-bar .qmain { grid-template-columns: minmax(0, 1fr); } .dash-bar .dash-filters { max-width: none; } }

/* a tile is a compact picture: no switch above the chart (the type is in the tile's menu), a one-line legend, a smaller donut and its list */
.tile-kpi { flex-wrap: nowrap; gap: 8px; margin: 0 0 2px; } .tile-kpi b { font-size: 22px; white-space: nowrap; } .tile-vs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-body .chart-bare .frame-head { display: none; }
.tile-body .chart-holder { margin-top: 4px; min-height: 0; }
.tile-body .chips-row { gap: 4px 12px; margin: 0 0 2px; } .tile-body .cmp-chip { padding: 0; background: none; font-size: 12px; font-weight: 550; color: var(--ink-2); } .tile-body .cmp-chip .dot { margin-right: 4px; }
.tile .donut-row { gap: 12px; } .tile .donut-legend { gap: 4px; min-width: 130px; font-size: 12.5px; }
.tile-head { margin-bottom: 2px; }

/* tiles fit the room they have */
.tile-head { flex: none; }
.tile-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.tile-body > .chart-holder, .tile-body .chart-holder { flex: 1 1 0; min-height: 0; overflow: hidden; position: relative; }
.tile-body > .report, .tile-body .chart-frame, .tile-body .chart-bare { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tile-body .chart-wrap { height: 100%; } .tile-body .chart-svg { max-width: none; }
.tile-resize { position: absolute; right: 3px; bottom: 3px; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; opacity: 0; transition: opacity .18s; z-index: 3;
  background: linear-gradient(135deg, transparent 0 52%, var(--ink-3) 52% 58%, transparent 58% 70%, var(--ink-3) 70% 76%, transparent 76%); border-bottom-right-radius: var(--r-lg); }
.tile:hover .tile-resize, .tile.resizing .tile-resize { opacity: .75; } @media (hover: none) { .tile-resize { opacity: .5; } }
.tile.resizing { box-shadow: 0 0 0 2px var(--brand), var(--shadow-3); z-index: 5; transition: none; user-select: none; }
.tile.resizing .tile-body { pointer-events: none; }
.tile.lod-small .chips-row, .tile.lod-small .tile-vs, .tile.lod-small .donut-legend { display: none; }
.tile.lod-mini { padding: 6px; }
.tile.lod-mini .tile-kpi, .tile.lod-mini .chips-row, .tile.lod-mini .donut-legend, .tile.lod-mini .tile-vs { display: none; }
.tile.lod-mini .tile-head { position: absolute; top: 6px; left: 8px; right: 8px; z-index: 4; margin: 0; padding: 2px 4px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transition: opacity .18s; }
.tile.lod-mini:hover .tile-head, .tile.lod-mini:focus-within .tile-head { opacity: 1; pointer-events: auto; }

.tile-skel { padding: 6px 0; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .tile, .tile.half, .tile.full { grid-column: 1 / -1; grid-row: span var(--r, 7); } }
.tile-body .tablewrap, .tile-table .tablewrap { max-height: none; } .tile-table { flex: 1 1 auto; min-height: 0; }
body.tile-resizing, body.tile-resizing * { user-select: none !important; -webkit-user-select: none !important; cursor: nwse-resize !important; }
.tile-resize { user-select: none; }
.tile-body .chart-svg, .tile-body .chart-wrap { transition: none; }
body.tile-dragging, body.tile-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.tile-grip { touch-action: none; }
/* while a tile is carried or resized the picture under the pointer stays quiet: no tooltips, no highlights, no hover */
body.tile-dragging .tile { pointer-events: none; }
body.tile-dragging .tile .tip, body.tile-resizing .tile .tip { display: none !important; }
body.tile-resizing .tile .tile-body { pointer-events: none; }
body.tile-dragging .tile .tile-resize, body.tile-dragging .tile .tile-grip { opacity: 0; }
body.tile-dragging .tile.dragging .tile-grip { opacity: 1; }
/* once a tile has appeared its animations are over for good: moving it in the page would otherwise start them again */
.tile.settled, .tile.settled * { animation: none !important; }
.menu-item.choice { display: flex; align-items: center; gap: 8px; } .menu-item.choice .tick { width: 16px; height: 16px; display: inline-grid; place-items: center; color: var(--brand); } .menu-item.choice.on { font-weight: 650; }
.cmp-period { padding: 8px 6px 4px; display: grid; gap: 8px; }
/* a table or the matrix inside a tile is part of the card, not a picture in a frame */
.tile .tablewrap { border: 0; border-radius: 0; background: transparent; margin: 0; }
.tile .tablewrap th { background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.tile .tablewrap tr:last-child td { border-bottom: 0; }
.tile .tablewrap { overflow-x: auto; }

/* ───────── the dashboard's chart: calm lines, the compared period dashed and grey, marks that explain themselves ───────── */
.chart-svg .fill-soft { stroke: none; pointer-events: none; }
.chart-svg .ln.cmp { stroke: var(--ink-3); stroke-dasharray: 5 4; opacity: .85; animation: none; stroke-width: 1.8; }
.chart-svg .pt.cmp { fill: var(--ink-3); stroke: var(--ink-3); }
.chart-svg .bar.cmp { fill: var(--ink-3); opacity: .45; }
.tile .chart-svg .ln:not(.cmp) { stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }
.tile .chart-svg .grid { stroke-dasharray: 2 5; opacity: .7; } .tile .chart-svg .grid.zero { stroke-dasharray: none; opacity: 1; }
.line-sample { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--c1); border-radius: 2px; vertical-align: middle; margin-right: 7px; }
.line-sample.dashed { border-top: 2.5px dashed var(--ink-3); }
.bar-sample { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c1); vertical-align: middle; margin-right: 7px; }
.bar-sample.dashed { background: var(--ink-3); opacity: .5; }
.tile-kpi.stack { flex-direction: column; align-items: flex-start; gap: 1px; margin: 0 0 4px; }
.tile-kpi.stack .kpi-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; } .tile-kpi.stack .kpi-main b { font-size: 24px; }
.tile-kpi.stack .kpi-top, .tile-kpi.stack .kpi-vs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile.lod-small .kpi-top, .tile.lod-small .kpi-vs { display: none; }
.tile-legend { margin: 0 0 4px; } .tile-legend .cmp-chip { padding: 0; }
.board-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; line-height: 1.5; } .board-note .line-sample { margin-right: 4px; } .menu-note { padding: 6px 10px; }
.dash-bar .qmain { align-items: end; }
/* the matrix: only the numbers (the buttons) light up, not the row they stand in */
table.matrix tbody tr:hover, table.matrix tbody tr:hover td { background: transparent; }
/* bars in a tile: slim pills on a faint track, rounded columns with a soft gradient; the compared period is a grey, quieter twin */
.chart-svg .track { fill: var(--line); opacity: .55; }
.tile .chart-svg .bar.hb { transition: opacity .2s; } .tile .chart-svg .val-label { font-weight: 650; fill: var(--ink-2); }
.tile .chart-svg .cat-label { font-size: 11.5px; }
/* the ring in a tile: thin, the number in the middle changes to the slice under the pointer, the list at the side says how much each takes */
.tile .donut-row.ring { gap: 18px; justify-content: space-around; flex-wrap: nowrap; height: 100%; }
.tile .donut-row.ring .chart-svg.donut { flex: none; }
.tile .donut-legend { min-width: 0; flex: 1 1 0; max-width: 220px; } .tile .donut-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.tile .donut-legend li .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .tile .donut-legend li b { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 650; }
.tile .donut-legend li.selected .grow { color: var(--ink); }
.tile .chart-svg .donut-total { transition: opacity .15s; }

/* switching dashboards: one stage, a grid per board kept alive, and a highlight that slides between the tabs */
.dash-stage { position: relative; } .dash-stage > .dash-grid.hidden { display: none; }
.dash-tabs { position: relative; }
.dash-thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand); box-shadow: 0 6px 16px -10px var(--brand); pointer-events: none; will-change: transform, width; }
.dash-tab { position: relative; z-index: 1; } .dash-tab.on { background: transparent; border-color: transparent; box-shadow: none; }

/* ───────── beta ───────── */
.beta-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; vertical-align: middle; line-height: 1.5; color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); text-transform: uppercase; cursor: help; }
.nav-item .beta-tag { margin-left: auto; } .btn .beta-tag { margin-left: 6px; padding: 0 5px; font-size: 10px; } h1 .beta-tag { font-size: 12px; margin-left: 10px; }
.beta-note { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: 13.5px; line-height: 1.45; } .beta-note .beta-tag { margin: 0; background: transparent; }
.check.beta { color: var(--ink); } .feat.beta { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
/* an empty board: the message is a block of its own, not a row of the grid */
.dash-grid.is-empty { display: block; } .dash-grid.is-empty .dash-empty { width: 100%; }
/* the sliding highlight runs beneath the tabs, so the tabs themselves are see-through: otherwise their own fill hides it while it glides */
.dash-tab, .dash-tab:not(.on) { background: transparent; }
.dash-tab:not(.on):hover { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.dash-thumb { z-index: 0; }
.chat-beta { margin: 10px 18px 0; flex: none; } .nav-item.new .beta-tag { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }
.dash-stage > .dash-grid.preload { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; pointer-events: none; }
/* the ring's list everywhere: name (cut with "…" when long), its share at the end */
.donut-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; } .donut-legend li .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.donut-legend li b { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 650; } .donut-legend li.selected .grow { color: var(--ink); }
.donut-legend { max-width: 280px; }
.btn .beta-tag { text-transform: none; font-size: 11px; }

/* ════════════════════════════════════════════════════════════════════════════
   APPLE PASS — the interface follows the same few rules everywhere.
   · Response: every control answers on press, not on release; feedback is a short, calm scale.
   · Springs: critically damped by default (they settle without bounce); bounce only where a gesture carried momentum.
   · Hierarchy: one large title per page that folds into the bar when you scroll; material and space, not borders, separate layers.
   · Type: tracking tightens as size grows and opens up as it shrinks; numbers are tabular; headings balance their lines.
   · Touch: 44 pt targets on touch screens; hover effects only where a pointer exists.
   · Care: reduced motion, reduced transparency and increased contrast each get their own quieter version.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --spring: cubic-bezier(.22, 1, .36, 1);                /* settles without overshoot */
  --spring-bounce: cubic-bezier(.34, 1.3, .64, 1);       /* only for things that were thrown */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;   /* one spacing scale, in steps of 4 */
  --material: color-mix(in srgb, var(--surface) 72%, transparent);
  --material-line: color-mix(in srgb, var(--line-strong) 55%, transparent);
}
body { font-optical-sizing: auto; font-kerning: normal; font-variant-ligatures: common-ligatures; }
h1, h2, h3, h4 { text-wrap: balance; }
p, .md p, .sub, .welcome p, .page-head p { text-wrap: pretty; }
.page-head h1 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.03em; font-weight: 720; }
.page-head p { font-size: 15px; line-height: 1.4; letter-spacing: -.005em; }
.panel > h3, .tile-head h4 { letter-spacing: -.012em; }
.small, .field > span, .kpi .label, .qlabel, .allow, .auth-foot { letter-spacing: .005em; }
.ctl-label, .filter-heading, .chats h3, .menu-label { font-size: 12px; letter-spacing: .06em; }
.kpi b, .tile-kpi b, .pstat b, .float .big { font-variant-numeric: tabular-nums; letter-spacing: -.024em; }
td.num, th.num, .num { font-variant-numeric: tabular-nums; }

/* rhythm: the page breathes the same amount everywhere */
.scroll { padding: var(--s5) var(--s5) var(--s6); }
.page-head { margin-bottom: var(--s5); gap: var(--s3); }
.panel { padding: 20px 24px; margin-bottom: 20px; }
.kpis { gap: var(--s3); margin-bottom: 20px; }
.suggest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 1100px) { .suggest { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* eight starters fill whole rows — no orphan cards */
.welcome { padding: 6vh 0 3vh; } .welcome p { font-size: 17px; }

/* the large title folds into the bar: the title is never shown twice */
.main:has(.scroll .page-head h1) .top h2 { opacity: 0; transform: translateY(5px); transition: opacity .22s var(--ease-out), transform .3s var(--spring); }
.main:has(.scroll .page-head h1) .top.title-in h2 { opacity: 1; transform: none; }

/* the bar is a thin material, with an edge only once content slides under it */
.top { border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(22px); backdrop-filter: saturate(1.8) blur(22px); }
.top.scrolled { border-bottom-color: var(--material-line); box-shadow: 0 8px 24px -20px rgba(30, 30, 90, .5); }
.beta-note { padding: 8px 14px; font-size: 13px; }
.chat-beta { margin: var(--s3) var(--s5) 0; }

/* the side panel is a heavier material; on a phone it floats over the page */
.side { border-right-color: var(--material-line); }
@media (max-width: 800px) {
  .side { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(30px); backdrop-filter: saturate(1.8) blur(30px); transition: transform .42s var(--spring); }
  .scroll { padding: var(--s4) var(--s4) var(--s5); } .chat-beta { margin: var(--s2) var(--s3) 0; }
}

/* calm motion: no rotation, no sideways nudges; icons answer with a small, settled scale */
.nav-item:hover svg.i { transform: scale(1.06); }
.chat-row:hover .nav-item { transform: none; }
.btn:not(:disabled):hover, .pick:not(:disabled):hover { transform: none; }
.btn:not(:disabled):active, .pick:not(:disabled):active, .nav-item:active, .qpill:active, .suggest button:active, .send:active { transform: scale(.97); transition-duration: 60ms; }
.btn.primary:not(:disabled):hover { filter: brightness(1.06); }
.suggest button:hover { transform: translateY(-1px); }
.send:hover { transform: scale(1.03); }

/* dialogs arrive as material: they sharpen and settle, they do not just fade */
dialog { animation: materialize .38s var(--spring); -webkit-backdrop-filter: none; }
dialog::backdrop { background: rgba(8, 10, 24, .42); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); animation: fade .3s ease; }
@keyframes materialize { from { opacity: 0; transform: translateY(10px) scale(.965); filter: blur(6px); } }
dialog .actions { padding: 20px 24px 24px; }

/* touch: 44 pt targets, 16 px fields (no zoom on focus), and no hover effects that would stick to a finger */
@media (pointer: coarse) {
  .btn { --h: 44px; } .btn.sm { --h: 44px; }
  .input, .field input, .field select, .field textarea, select.input, .panel select, .tenant select { min-height: 44px; font-size: 16px; }
  .nav-item { min-height: 44px; } .chat-row .nav-item { min-height: 44px; }
  .pick, .qpill, .qtrigger { min-height: 44px; }
  .composer textarea { font-size: 16px; }
}
@media (hover: none) {
  .btn:hover, .pick:hover, .suggest button:hover, .kpi.legend-btn:hover, .cell-btn:hover, .pcard:hover { transform: none; }
  .btn.primary::after { display: none; }
}

/* quieter versions for people who ask for them */
@media (prefers-reduced-motion: reduce) {
  .main:has(.scroll .page-head h1) .top h2 { transform: none; }
  dialog { animation: fade .2s ease; filter: none; }
  .side { transition: opacity .2s ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .top, .side, .glass, .float, dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top { background: var(--bg); } .glass { background: var(--surface); } .float { background: var(--surface); }
  @media (max-width: 800px) { .side { background: var(--surface); } }
}
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --ink-3: var(--ink-2); }
  .panel, .kpi, .tile, .a, .composer .box, .btn, .qpill, .pick { border-color: var(--ink-3); }
  .top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line-strong); }
}
.welcome .logo { width: 56px; height: 56px; border-radius: 18px; margin-bottom: var(--s4); } .welcome .logo svg { width: 30px; height: 30px; }
.welcome { padding: 4vh 0 2vh; } .suggest { margin-top: var(--s5); }
@media (min-height: 760px) { .welcome { padding: 8vh 0 4vh; } }
/* phone: starters become a compact list (icon, then text), the banner shrinks, the greeting sits higher */
@media (max-width: 800px) {
  .suggest { grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s4); }
  .suggest button { display: flex; align-items: center; gap: var(--s3); padding: 12px 16px; min-height: 56px; border-radius: var(--r); font-size: 15px; }
  .suggest button svg { margin: 0; flex: none; }
  .welcome { padding: 2vh 0 0; } .welcome .logo { width: 48px; height: 48px; border-radius: 15px; margin-bottom: var(--s3); } .welcome .logo svg { width: 26px; height: 26px; }
  .welcome h2 { font-size: 26px; } .welcome p { font-size: 15px; margin-top: 4px; }
  .beta-note { font-size: 12.5px; padding: 8px 12px; gap: var(--s2); line-height: 1.35; }
  .page-head { margin-bottom: var(--s4); } .page-head h1 { font-size: 26px; }
  .panel { padding: 16px; margin-bottom: var(--s4); }
}
@media (max-width: 800px) {
  .qmain { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .qmain > .qfield.period, .qmain > .qfield.pack { grid-column: 1 / -1; }
  .qbar { padding: var(--s4); }
  .page-head > .grow { flex: 1 1 100%; } .page-head .head-actions { flex: 1 1 100%; }
}
/* the tile menu: a fixed width that fits its three choices, kept inside the window by the popover */
.pop.menu { width: 320px; min-width: 0; max-width: calc(100vw - 16px); overscroll-behavior: contain; }
.menu-seg button { padding: 6px 4px; font-size: 12.5px; text-align: center; }
/* a tile with an open menu rises above its neighbours (every tile is its own layer, so later ones would paint over it) */
.tile:has(.pop:not(.hidden)) { z-index: 25; }
.tile.dragging, .tile.resizing { z-index: 30; }
/* the filter groups: always one row, the knob slides under the chosen one (same as the period) */
.filter-tabs { flex-wrap: nowrap; }
.filter-tabs button { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: 13px; white-space: nowrap; }
.filter-tabs button .tab-n { flex: none; }
/* the dashboard tabs' highlight glides like every other slider (a transition: it can be redirected while it moves) */
.dash-thumb { transition: transform .46s var(--spring), width .46s var(--spring), height .46s var(--spring), opacity .2s; }
.dash-thumb.still { transition: none; }
.dash-tab { transition: color .3s var(--spring), border-color .3s var(--spring), background-color .3s var(--spring), transform .18s var(--ease); }
/* dropdowns: they grow out of their button, settle without bounce, and leave the same way */
@media (min-width: 701px) {
  .pop { transform: translateY(-6px) scale(.96); transform-origin: var(--ox, 24px) var(--oy, -8px); filter: blur(5px);
    transition: opacity .2s ease, transform .46s var(--spring), filter .3s ease; will-change: transform, opacity; }
  .pop.open { transform: none; filter: none; }
}
.pop.morph { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .pop { filter: none; transform: none; transition: opacity .15s ease; } }
/* dashboards use the whole width of the screen; the grid is 12 columns however wide it is, and its rows grow with the columns */
.scroll:has(.dash) .col { max-width: none; }
.scroll:has(.dash) { padding-left: clamp(16px, 2vw, 40px); padding-right: clamp(16px, 2vw, 40px); }
.dash-grid { grid-auto-rows: var(--row, 40px); }
/* the tile menu's choices: one highlight that glides, like the period */
.menu-seg { position: relative; } .menu-seg button { position: relative; z-index: 1; }
.menu-seg button.on { background: transparent; box-shadow: none; }
.menu-seg .seg-thumb { border-radius: 8px; }
.menu-seg .seg-thumb { top: 0; bottom: auto; left: 0; }   /* it is placed by its transform alone */
/* a free grid: every tile sits at the column and row it was put at, and empty room stays empty */
@media (min-width: 861px) {
  .tile { grid-column: var(--x, auto) / span var(--c, 6); grid-row: var(--y, auto) / span var(--r, 7); }
  .dash-grid { grid-auto-flow: row; }
}

/* ═══ the sign-in page, second version: calm, two columns on a wide screen ═══ */
.auth { background: var(--bg); padding: 32px clamp(16px, 4vw, 48px); }
.aurora { filter: blur(90px) saturate(1.1); opacity: .55; }
.aurora i:nth-child(1) { animation-duration: 40s; } .aurora i:nth-child(2) { animation-duration: 46s; } .aurora i:nth-child(3) { animation-duration: 52s; }   /* slow enough to be felt, not watched */
.grid-bg, .float { display: none; }
.auth-shell { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px); gap: clamp(32px, 6vw, 88px); align-items: center; }
.auth-hero { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; animation: rise .7s var(--spring) backwards; }
.auth-hero .brand { font-size: 18px; }
.hero-copy h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.034em; font-weight: 720; max-width: 15em; }
.hero-copy p { margin-top: var(--s3); font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.hero-preview { display: flex; gap: var(--s3); flex-wrap: wrap; }
.pv-card { padding: 16px 18px; border-radius: var(--r-lg); background: var(--material); border: 1px solid var(--material-line); box-shadow: var(--lift-2); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.pv-card .cap { font-size: 12.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .005em; }
.pv-card .big { font-size: 28px; font-weight: 730; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pv-card .up { color: var(--good); font-size: 13px; font-weight: 650; margin-left: 8px; }
.pv-kpi { flex: 1 1 220px; min-width: 200px; max-width: 280px; } .pv-kpi .spark { display: block; margin-top: 10px; width: 100%; height: 40px; stroke: var(--brand); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-ring { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; } .pv-ring svg { width: 72px; height: 72px; transform: rotate(-90deg); } .pv-ring .c1 { stroke: var(--brand); } .pv-ring .c2 { stroke: #d946ef; } .pv-ring .c3 { stroke: #22d3ee; }
.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.hero-points li { display: flex; align-items: center; gap: var(--s3); font-size: 16px; color: var(--ink-2); letter-spacing: -.005em; }
.hero-points svg.i { width: 20px; height: 20px; padding: 6px; box-sizing: content-box; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }

.auth .glass { max-width: none; padding: 36px 32px 28px; border-radius: 28px; background: var(--material); border-color: var(--material-line); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: var(--lift-3), inset 0 1px 0 var(--hi); }
.auth .glass .top-row { display: none; margin-bottom: var(--s5); }
.auth .glass h1 { font-size: 30px; letter-spacing: -.032em; margin-bottom: var(--s2); }
.auth .glass .sub { margin-bottom: var(--s5); font-size: 16px; }
.auth .glass .btn.wide { --h: 52px; border-radius: 14px; }
.invite { margin-top: var(--s2); color: var(--ink-2); } .invite:hover { color: var(--ink); }
.privacy { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.privacy svg.i { margin-top: 2px; color: var(--good); }

@media (max-width: 960px) {
  .auth-shell { grid-template-columns: minmax(0, 440px); justify-content: center; }
  .auth-hero { display: none; }
  .auth .glass .top-row { display: flex; }
}
@media (max-width: 480px) { .auth .glass { padding: 28px 20px 22px; border-radius: 24px; } .auth .glass h1 { font-size: 27px; } }
@media (prefers-reduced-transparency: reduce) { .pv-card, .auth .glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.auth { overflow-x: hidden; overflow-y: auto; }

/* the background keeps inside the page (it used to overflow and push the content down), and it flows */
.auth-bg { position: absolute; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; }
.auth-bg .aurora { inset: -10%; opacity: .7; filter: blur(80px) saturate(1.25); }
.aurora i:nth-child(1) { animation: flow1 34s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { animation: flow2 40s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { animation: flow3 46s ease-in-out infinite alternate; }
.aurora i:nth-child(4) { width: 38vmax; height: 38vmax; left: 38%; top: 8%; background: radial-gradient(circle, #8b5cf6 0%, transparent 62%); opacity: .5; animation: flow4 52s ease-in-out infinite alternate; }
@keyframes flow1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(28%, 14%) scale(1.15); } 100% { transform: translate(10%, 34%) scale(.95); } }
@keyframes flow2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-24%, 22%) scale(.9); } 100% { transform: translate(-6%, 40%) scale(1.12); } }
@keyframes flow3 { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(30%, -18%) scale(1); } 100% { transform: translate(-16%, -30%) scale(1.2); } }
@keyframes flow4 { 0% { transform: translate(-30%, 10%) scale(1); } 100% { transform: translate(34%, 30%) scale(1.25); } }
.waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 44vh; min-height: 220px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent); }
.wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: drift 90s linear infinite; will-change: transform; }
.wave.w2 { animation-duration: 140s; animation-direction: reverse; } .wave.w3 { animation-duration: 200s; }
@keyframes drift { to { transform: translateX(-50%); } }
.wave-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; opacity: .38; vector-effect: non-scaling-stroke; }
.wave-fill { fill: var(--brand); opacity: .05; }
.w2 .wave-line { stroke: #d946ef; opacity: .3; } .w2 .wave-fill { fill: #d946ef; opacity: .04; }
.w3 .wave-line { stroke: #22d3ee; opacity: .3; } .w3 .wave-fill { fill: #22d3ee; opacity: .04; }

/* the preview comes to life when the page opens */
.pv-card { animation: rise .8s var(--spring) backwards; } .pv-kpi { animation-delay: .25s; } .pv-ring { animation-delay: .4s; }
.pv-kpi .spark polyline { stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw 1.8s .55s var(--spring) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pv-ring svg { animation: ring-in 1.3s .5s var(--spring) backwards; } @keyframes ring-in { from { transform: rotate(-260deg) scale(.82); opacity: 0; } }
.hero-points li { animation: rise .7s var(--spring) backwards; } .hero-points li:nth-child(1) { animation-delay: .55s; } .hero-points li:nth-child(2) { animation-delay: .65s; } .hero-points li:nth-child(3) { animation-delay: .75s; }
@media (prefers-reduced-motion: reduce) { .wave, .aurora i { animation: none !important; } .pv-kpi .spark polyline { stroke-dashoffset: 0; animation: none; } }

/* the corner message: small, and one quiet button when there is something to open */
.toast .toast-action { margin-left: 6px; padding: 4px 10px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit; font-weight: 650; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background-color .15s; }
.toast .toast-action:hover { background: color-mix(in srgb, var(--bg) 30%, transparent); }
.toast.error .toast-action { background: rgba(255, 255, 255, .22); }

/* the page's glow drifts slowly, so the background is never quite still */
.main::before { inset: -14%; animation: fade-in 1.2s ease .1s forwards, glow-drift 60s ease-in-out 1.3s infinite alternate; will-change: transform; }
@keyframes glow-drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(3.5%, 4%) scale(1.06); } 66% { transform: translate(-3%, 7%) scale(1.02); } 100% { transform: translate(-5%, 2%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .main::before { animation: none; opacity: 1; } }