/* Rankdesk · Version 2 · "Lagoon glass"
   A new front end for the same app: floating glass header with section tabs and a page pill row (no sidebar),
   frosted cards over a slow aurora, light by default with a dark twin. Same markup, same classes, same data.
   Grid arithmetic: page gutter 28px (16 on phones), one gap value --gap (16px) everywhere, content max 1440. */

:root, :root[data-theme="light"] {
  --ground: #eaf0f6;
  --surface: #ffffff;
  --raised: rgba(255, 255, 255, .55);
  --active: rgba(11, 124, 138, .12);
  --border: rgba(24, 44, 72, .10);
  --rule: rgba(24, 44, 72, .07);
  --control: rgba(24, 44, 72, .20);
  --text: #0e1b2e;
  --muted: #475670;
  --faint: #66748a;
  --primary: #0b7c8a;
  --on-primary: #ffffff;
  --accent: #0b7c8a;
  --accent-ink: #065863;
  --accent-soft: rgba(11, 124, 138, .10);
  --positive: #0c8a5c;
  --negative: #d6334f;
  --warning: #b86e00;
  --ok: #0c8a5c; --err: #d6334f; --bad: #d6334f; --amber: #d98a0b; --sky: #2b7fd8; --violet: #7a5af0; --pink: #d6498a; --teal: #0b7c8a;
  --chart-1: #0b7c8a; --chart-2: #3b82f6; --chart-3: #f59e0b; --chart-4: #8b5cf6;
  --pill-positive-bg: rgba(12, 138, 92, .14); --pill-positive-ink: #07603f;
  --pill-negative-bg: rgba(214, 51, 79, .13); --pill-negative-ink: #a3182f;
  --pill-warning-bg: rgba(217, 138, 11, .16); --pill-warning-ink: #7a4a00;
  --pill-info-bg: rgba(43, 127, 216, .14); --pill-info-ink: #174f93;
  --pill-neutral-bg: rgba(24, 44, 72, .08); --pill-neutral-ink: #34445c;
  --th-bg: rgba(255, 255, 255, .5); --th-ink: #3a4a63;
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-line: rgba(255, 255, 255, .9);
  --edge: rgba(24, 44, 72, .09);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 10px 30px rgba(28, 56, 96, .09), 0 1px 3px rgba(28, 56, 96, .06);
  --glass-shadow-hover: 0 1px 0 #fff inset, 0 20px 44px rgba(28, 56, 96, .16), 0 2px 6px rgba(28, 56, 96, .08);
  --shadow: var(--glass-shadow);
  --aur-a: rgba(64, 196, 190, .42); --aur-b: rgba(104, 146, 255, .34); --aur-c: rgba(255, 190, 150, .42);
  --radius-card: 20px; --radius-control: 12px; --gap: 16px; --control-height: 38px;
  --font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #070e19;
  --surface: #101a2a;
  --raised: rgba(255, 255, 255, .06);
  --active: rgba(95, 211, 224, .14);
  --border: rgba(255, 255, 255, .10);
  --rule: rgba(255, 255, 255, .06);
  --control: rgba(255, 255, 255, .22);
  --text: #eaf1fb;
  --muted: #a9b6c9;
  --faint: #8794a8;
  --primary: #5fd3e0;
  --on-primary: #04222a;
  --accent: #5fd3e0;
  --accent-ink: #b6f0f6;
  --accent-soft: rgba(95, 211, 224, .12);
  --positive: #43d19a; --negative: #ff7b93; --warning: #f0b45a;
  --ok: #43d19a; --err: #ff7b93; --bad: #ff7b93; --amber: #f0b45a; --sky: #6db4ff; --violet: #a995ff; --pink: #ff8cbc; --teal: #5fd3e0;
  --chart-1: #5fd3e0; --chart-2: #6da8ff; --chart-3: #f0b45a; --chart-4: #b79cff;
  --pill-positive-bg: rgba(67, 209, 154, .16); --pill-positive-ink: #7ee8bd;
  --pill-negative-bg: rgba(255, 123, 147, .16); --pill-negative-ink: #ffa6b7;
  --pill-warning-bg: rgba(240, 180, 90, .16); --pill-warning-ink: #f6cd8a;
  --pill-info-bg: rgba(109, 180, 255, .16); --pill-info-ink: #a3cdff;
  --pill-neutral-bg: rgba(255, 255, 255, .09); --pill-neutral-ink: #c9d4e4;
  --th-bg: rgba(255, 255, 255, .05); --th-ink: #b9c6d9;
  --glass: rgba(255, 255, 255, .055);
  --glass-strong: rgba(18, 30, 48, .86);
  --glass-line: rgba(255, 255, 255, .11);
  --edge: rgba(255, 255, 255, .10);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 12px 34px rgba(0, 0, 0, .40);
  --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 22px 50px rgba(0, 0, 0, .55);
  --aur-a: rgba(42, 160, 170, .30); --aur-b: rgba(70, 110, 230, .28); --aur-c: rgba(150, 90, 210, .22);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font: 400 14.5px/1.55 var(--font); color: var(--text); background: var(--ground); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent-soft); }
code { font-family: var(--mono); font-size: .9em; background: var(--pill-neutral-bg); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
pre { font-family: var(--mono); max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--rule); }
form { margin: 0; }
canvas { max-width: 100%; }
.ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- aurora ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { width: 62vw; height: 62vw; left: -14vw; top: -22vw; background: radial-gradient(closest-side, var(--aur-a), transparent); animation: floatA 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 56vw; height: 56vw; right: -16vw; top: -8vw; background: radial-gradient(closest-side, var(--aur-b), transparent); animation: floatB 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 60vw; height: 60vw; left: 22vw; bottom: -34vw; background: radial-gradient(closest-side, var(--aur-c), transparent); animation: floatC 38s ease-in-out infinite alternate; }
@keyframes floatA { to { transform: translate(8vw, 6vw) scale(1.08); } }
@keyframes floatB { to { transform: translate(-7vw, 9vw) scale(.94); } }
@keyframes floatC { to { transform: translate(-6vw, -7vw) scale(1.1); } }

/* ---------- glass recipe ---------- */
.card, .panel, .kcard, .hl > a, .hl > div, .mbar, .alert, .onb, .hcard, .login, .rp-card, .spdbar, .jumpbar, .hero, .hero-stat, .hero-gauge, .stat, .kpis, .qa a {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--edge);
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .panel, .kcard, .hl > a, .hl > div, .mbar, .alert, .onb, .hcard, .login, .rp-card, .spdbar, .jumpbar, .hero, .stat, .kpis, .hdr, .menu, .rmenu, .cmdk-box { background: var(--surface); }
}

/* ---------- header: floating glass, section tabs, page pills ---------- */
.hdr { position: sticky; top: 10px; z-index: 50; margin: 10px auto 0; width: calc(100% - 24px); max-width: 1456px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid var(--edge); border-radius: 24px; box-shadow: var(--glass-shadow); transition: box-shadow .25s ease, background .25s ease; }
.hdr.stuck { box-shadow: var(--glass-shadow-hover); }
.hdr-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.logo { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; font-size: 16px; letter-spacing: -.02em; padding: 2px 6px 2px 2px; }
.logo:hover { text-decoration: none; }
.logo svg { flex: none; }
.gtabs { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 16px; background: var(--pill-neutral-bg); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gtabs::-webkit-scrollbar { display: none; }
.gtab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
.gtab:hover { color: var(--text); text-decoration: none; background: var(--raised); }
.gtab.on { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(20, 40, 70, .12), 0 4px 12px rgba(20, 40, 70, .08); }
:root[data-theme="dark"] .gtab.on { background: rgba(255, 255, 255, .13); color: #fff; box-shadow: none; }
.hdr-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.subwrap { border-top: 1px solid var(--rule); padding: 8px 12px; }
.subnav { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background .18s, color .18s, border-color .18s, transform .15s; }
.subnav a:hover { background: var(--raised); color: var(--text); text-decoration: none; transform: translateY(-1px); }
.subnav a.on { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; }
:root[data-theme="dark"] .subnav a.on { color: var(--accent); }
.subnav .ico { width: 15px; height: 15px; opacity: .85; }
.subhint { padding: 0 10px; color: var(--muted); font-size: 13px; line-height: 32px; }
.nbadge { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--negative); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.icon-btn.menu-btn { display: none; }
.scrim { display: none; }
.side[hidden] { display: none !important; }

/* switcher + account dropdowns */
.switch, .acct { position: relative; }
.switch summary, .acct summary { list-style: none; cursor: pointer; }
.switch summary::-webkit-details-marker, .acct summary::-webkit-details-marker { display: none; }
.switch summary { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); transition: border-color .2s, box-shadow .2s; max-width: 260px; }
.switch summary:hover, .switch[open] summary { border-color: var(--control); box-shadow: 0 4px 14px rgba(28, 56, 96, .10); }
.switch summary > .ico:last-child { margin-left: 2px; color: var(--faint); width: 14px; height: 14px; }
.switch .nm { min-width: 0; line-height: 1.2; }
.switch .nm b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.switch .nm span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: linear-gradient(140deg, var(--accent), var(--chart-2)); color: #fff; }
.avatar.me { width: 38px; height: 38px; font-size: 15px; box-shadow: 0 0 0 3px var(--glass); }
.acct summary { border-radius: 50%; }
.acct summary:hover .avatar { filter: brightness(1.08); }
.menu { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; min-width: 260px; max-height: 70vh; overflow: auto; padding: 6px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid var(--edge); border-radius: 18px; box-shadow: 0 24px 60px rgba(14, 30, 56, .28); animation: pop .18s cubic-bezier(.2, .8, .2, 1) both; }
.acct .menu { left: auto; right: 0; min-width: 240px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--text); font-size: 14px; }
.menu a:hover { background: var(--accent-soft); text-decoration: none; }
.menu a.on { background: var(--active); font-weight: 600; }
.menu a .pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu hr { margin: 6px 4px; }
.menu .who { padding: 8px 10px 6px; line-height: 1.3; }
.menu .who b { display: block; font-size: 14px; }
.menu .who span { font-size: 12px; color: var(--muted); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.icon-btn { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; background: var(--glass); color: var(--muted); border: 1px solid var(--edge); border-radius: 50%; cursor: pointer; box-shadow: none; min-height: 0; transition: color .2s, background .2s, transform .15s; }
.icon-btn:hover { color: var(--text); background: var(--glass-strong); transform: translateY(-1px); }
.cmdk-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass); color: var(--muted); font: 500 13.5px var(--font); cursor: pointer; min-height: 0; box-shadow: none; transition: border-color .2s, color .2s, background .2s; }
.cmdk-btn:hover { color: var(--text); border-color: var(--control); background: var(--glass-strong); }
.cmdk-btn kbd { font: 500 11px var(--mono); padding: 2px 7px; border-radius: 7px; border: 1px solid var(--edge); background: var(--surface); color: var(--muted); }
.stamp { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rf { margin: 0; display: flex; align-items: center; gap: 10px; }

/* ---------- page ---------- */
.sheet { padding: 26px 12px 72px; min-width: 0; }
.sheet-in { max-width: 1440px; margin: 0 auto; padding: 0 16px; animation: pageIn .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bare { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.bare-in { width: 100%; max-width: 400px; }
.logo-c { justify-content: center; font-size: 20px; padding: 0 0 22px; }
.login { width: 100%; max-width: 400px; border-radius: 28px; padding: 30px; background: var(--glass-strong); }
.login input { width: 100%; }
.login button { width: 100%; }
.login h1 { font-size: 22px; }

/* ---------- type ---------- */
h1 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 4px 0 8px; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; margin: 34px 0 14px; display: flex; align-items: baseline; gap: 10px; }
h2:first-child { margin-top: 0; }
h2.sec::before { content: ""; width: 5px; height: 18px; border-radius: 3px; background: var(--accent); align-self: center; }
h2.sec em { font-style: normal; margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
h1 + .mute, h1 + p { margin-top: 0; }
h1 .mute, h1 .small { font-size: 14px; font-weight: 400; letter-spacing: 0; margin-left: 8px; }
p { margin: 0 0 12px; }
.mute { color: var(--muted); }
.small { font-size: 12.5px; }
.lead { font-size: 16px; color: var(--muted); margin: 0 0 22px; max-width: 70ch; }

/* ---------- cards, panels ---------- */
.card { border-radius: var(--radius-card); padding: 22px; margin-bottom: var(--gap); }
.card > h2:first-child, .card > b:first-child { display: inline-block; }
details.card > summary { cursor: pointer; font-weight: 600; }
.card, .panel, .kcard { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease; }
.card:hover, .panel:hover { box-shadow: var(--glass-shadow-hover); }
.panels { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); margin-bottom: var(--gap); }
.panel { border-radius: var(--radius-card); padding: 18px 20px; min-width: 0; }
.panel > h3 { margin: 0 0 12px; font-size: 15px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; }
.panel > h3 small { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: auto; }
.panel table { margin: 0; }
.panel.win { box-shadow: var(--glass-shadow), inset 0 3px 0 var(--ok); }
.panel.lose { box-shadow: var(--glass-shadow), inset 0 3px 0 var(--err); }
.panel.watch { box-shadow: var(--glass-shadow), inset 0 3px 0 var(--amber); }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid > div > h2:first-child { margin-top: 0; }

/* KPI tiles (.stat strips and .kcards) */
.grid:has(> .stat) { margin-bottom: var(--gap); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid > .stat { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 18px; padding: 16px 18px; margin: 0; }
.grid > .stat::after { content: ""; position: absolute; right: -26px; bottom: -34px; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(closest-side, var(--chart-1), transparent); opacity: .16; pointer-events: none; }
.grid > .stat:nth-child(4n+2)::after { background: radial-gradient(closest-side, var(--chart-2), transparent); }
.grid > .stat:nth-child(4n+3)::after { background: radial-gradient(closest-side, var(--chart-3), transparent); }
.grid > .stat:nth-child(4n+4)::after { background: radial-gradient(closest-side, var(--chart-4), transparent); }
.stat span { display: block; order: -1; font-size: 13px; font-weight: 500; color: var(--muted); }
.stat b { display: block; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; margin-top: 2px; color: var(--text); }
.kcards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--gap); }
.kcard { position: relative; overflow: hidden; border-radius: 22px; padding: 18px 20px 16px; }
.kcard::before { content: ""; position: absolute; left: 20px; top: 0; width: 38px; height: 4px; border-radius: 0 0 4px 4px; background: var(--kc, var(--accent)); }
.kcard::after { content: ""; position: absolute; right: -34px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(closest-side, var(--kc, var(--accent)), transparent); opacity: .20; pointer-events: none; }
.kcard:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-hover); }
.kc-l { font-size: 13px; font-weight: 600; color: var(--muted); }
.kc-v { font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; margin-top: 4px; color: var(--text); }
.kc-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; min-height: 24px; }
.kc-s { font-size: 12.5px; color: var(--muted); }
.kc-sp { margin-top: 10px; line-height: 0; }
.spark { max-width: 100%; display: block; }

/* chart toggles: segmented KPI row */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 22px; margin-bottom: var(--gap); }
.kpi { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 16px; border-radius: 16px; min-width: 0; border: 1px solid transparent; transition: background .2s, border-color .2s, transform .15s; position: relative; }
.kpi:hover { background: var(--raised); }
.kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kpi.on { background: var(--surface); border-color: color-mix(in srgb, var(--kc, var(--accent)) 40%, transparent); box-shadow: 0 6px 18px rgba(28, 56, 96, .12); }
:root[data-theme="dark"] .kpi.on { background: rgba(255, 255, 255, .1); }
.kpi.on::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--kc, var(--accent)); }
.kpi .l { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.kpi .v { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; color: var(--text); margin-top: 2px; }
.kpi .c { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; min-height: 18px; }
.kpi .c b { font-weight: 600; }
.kpi .up { color: var(--ok); font-weight: 700; } .kpi .down { color: var(--err); font-weight: 700; }
.kpi:not(.on) .v { color: var(--muted); }
.chart { position: relative; height: 330px; margin-bottom: var(--gap); }
.chart canvas { width: 100% !important; height: 100% !important; }
.tilewrap .kpis { box-shadow: none; padding: 4px; } .tilewrap .kpi { padding: 8px 12px; } .tilewrap .kpi .v { font-size: 18px; } .tilewrap .kpi .c { display: none; }

/* ---------- hero (project overview) ---------- */
.hero { position: relative; overflow: hidden; border-radius: 30px; padding: 26px 30px; margin-bottom: 20px; background: var(--glass); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 260px at 92% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(420px 240px at 0% 110%, color-mix(in srgb, var(--chart-2) 16%, transparent), transparent 70%); }
.hero > * { position: relative; }
.hero h1 { margin: 0 0 4px; font-size: clamp(26px, 3vw, 36px); }
.hero p { color: var(--muted); margin: 0 0 4px; }
.hero a { color: var(--accent-ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 0 0 14px; }
.hero .btn { background: var(--glass-strong); color: var(--accent-ink); border-color: var(--edge); box-shadow: none; }
.hero .btn:hover { background: var(--surface); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(28, 56, 96, .14); filter: none; }
.hero-main { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hero-main > div:first-child { flex: 1; min-width: 280px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero-stat { border-radius: 18px; padding: 12px 18px; min-width: 130px; background: var(--glass-strong); box-shadow: none; transition: transform .2s, box-shadow .2s; }
.hero-stat:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow); }
.hero-stat b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.hero-stat span { font-size: 12.5px; color: var(--muted); }
.hero-gauge { flex: none; display: grid; place-items: center; padding: 16px 20px 12px; border-radius: 24px; text-align: center; background: var(--glass-strong); box-shadow: none; }
.hero-gauge small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.gauge { position: relative; width: var(--gs, 132px); height: var(--gs, 132px); }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.gauge .trk { fill: none; stroke: var(--rule); stroke-width: 10; }
.hero .gauge .trk { stroke: color-mix(in srgb, var(--muted) 20%, transparent); }
.gauge .bar { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--len) 1000; animation: gaugein 1.1s cubic-bezier(.2, .8, .2, 1) both; filter: drop-shadow(0 2px 6px color-mix(in srgb, currentColor 45%, transparent)); }
@keyframes gaugein { from { stroke-dasharray: 0 1000; } }
.gauge .num { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.gauge .num b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.gauge .num span { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.health-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; text-align: left; color: var(--muted); }
.health-list li { display: flex; gap: 8px; justify-content: space-between; } .health-list b { font-weight: 600; color: var(--text); }
.mini-gauge { --gs: 38px; display: inline-block; vertical-align: middle; }
.mini-gauge .trk, .mini-gauge .bar { stroke-width: 12; } .mini-gauge .num b { font-size: 12px; } .mini-gauge .num span { display: none; }

/* alert strip + highlight cards */
.alerts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--gap); }
.alert { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: none; }
.alert b { font-weight: 700; }
.alert.bad { background: var(--pill-negative-bg); color: var(--pill-negative-ink); } .alert.warn { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.alert.good { background: var(--pill-positive-bg); color: var(--pill-positive-ink); } .alert.info { background: var(--pill-info-bg); color: var(--pill-info-ink); }
a.alert:hover { text-decoration: none; transform: translateY(-1px); }
.hl { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--gap); }
.hl > a, .hl > div { display: block; padding: 16px 18px; border-radius: 20px; color: var(--text); text-decoration: none; position: relative; overflow: hidden; transition: transform .22s, box-shadow .22s; }
.hl > a:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-hover); text-decoration: none; }
.hl i.tag { font-style: normal; font-size: 12px; font-weight: 700; color: var(--hc, var(--accent-ink)); display: flex; align-items: center; gap: 7px; }
.hl i.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hc, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hc, var(--accent)) 20%, transparent); }
.hl b { display: block; font-size: 16px; font-weight: 650; margin: 8px 0 4px; line-height: 1.3; overflow-wrap: anywhere; }
.hl span { font-size: 13px; color: var(--muted); }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--gap); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; background: transparent; }
th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--th-ink); padding: 10px 14px; background: var(--th-bg); white-space: nowrap; border-bottom: 1px solid var(--edge); }
th:first-child { border-top-left-radius: 12px; } th:last-child { border-top-right-radius: 12px; }
td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:hover td, table tr:hover > td { background: var(--accent-soft); }
tr:last-child > td { border-bottom: 0; }
td.n, th.n { text-align: right; }
td.n b { font-weight: 650; }
th a { color: inherit; }
.card table, .panel table { margin: 0; }
.scroll > table { min-width: 100%; }
.scroll table th { position: sticky; top: 0; z-index: 2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
tr.up > td:first-child { box-shadow: inset 3px 0 0 var(--ok); } tr.down > td:first-child { box-shadow: inset 3px 0 0 var(--err); }
tr.up > td { background: color-mix(in srgb, var(--ok) 6%, transparent); } tr.down > td { background: color-mix(in srgb, var(--err) 6%, transparent); }
tr.sel td { background: var(--accent-soft); }
.wrap { min-width: 180px; }
.code { white-space: nowrap; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.nw { white-space: nowrap; }
@media (max-width: 760px) { .scroll th, .scroll td { white-space: nowrap; } .scroll td.wrap, .scroll td[style*="max-width"] { white-space: normal; min-width: 210px; } }

/* chips, pills, deltas */
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 20px; white-space: nowrap; }
.delta i { font-style: normal; font-size: 9px; }
.delta.up { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.delta.down { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.delta.flat { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); font-weight: 500; }
.up-t { color: var(--ok); font-weight: 650; } .down-t { color: var(--err); font-weight: 650; }
.pos { display: inline-block; min-width: 42px; text-align: center; padding: 1px 9px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
.pos.p1 { background: #0c8a5c; color: #fff; } .pos.p2 { background: #31b985; color: #05281b; } .pos.p3 { background: #f2c14e; color: #3b2a00; }
.pos.p4 { background: #f59a4d; color: #3b1500; } .pos.p5 { background: #f37b8e; color: #4c0519; } .pos.none { background: var(--pill-neutral-bg); color: var(--faint); font-weight: 500; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); white-space: nowrap; flex: none; }
.badge.new, .t-low.ok { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.badge.bad { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.badge.warn { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.badge.info { background: var(--pill-info-bg); color: var(--pill-info-ink); }
.t-urgent { background: #d6334f; color: #fff; } .t-high { background: #f2a93b; color: #3b2a00; } .t-medium { background: #3b82f6; color: #fff; } .t-low { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); } .t-excluded { background: var(--pill-neutral-bg); color: var(--faint); }
mark.newkw { background: var(--pill-warning-bg); color: var(--pill-warning-ink); padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.rbadge { font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--pill-positive-bg); color: var(--pill-positive-ink); padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }

/* bars, donut, tier bar */
.hbars { display: grid; gap: 10px; } .hb { display: grid; grid-template-columns: 120px 1fr 54px; align-items: center; gap: 12px; font-size: 13.5px; }
.hb-l { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hb-t { height: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; } .hb-t i { display: block; height: 100%; border-radius: 999px; transform-origin: left center; animation: grow .9s cubic-bezier(.2, .7, .2, 1) both; } .hb b { text-align: right; font-weight: 650; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.donutw { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; }
.donut::before { content: ""; position: absolute; inset: 22px; background: var(--surface); border-radius: 50%; } .donut span { position: relative; font-weight: 700; font-size: 20px; }
.dlegend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .dlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; } .dlegend b { margin-left: 6px; }
.tierbar { display: flex; height: 14px; gap: 3px; border-radius: 999px; overflow: hidden; background: var(--rule); }
.tierbar i { display: block; min-width: 3px; border-radius: 999px; }
.tierlegend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.tierlegend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -0.5px; }
.tierlegend span:nth-child(1)::before { background: #d6334f; } .tierlegend span:nth-child(2)::before { background: #f2a93b; } .tierlegend span:nth-child(3)::before { background: #3b82f6; } .tierlegend span:nth-child(4)::before { background: #94a3b8; }
.tiermini { width: 120px; } .tiermini .tierbar { height: 8px; }

/* ---------- forms and buttons ---------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
input, select, textarea { font: 400 14px var(--font); color: var(--text); background: var(--glass-strong); border: 1px solid var(--control); border-radius: var(--radius-control); padding: 0 12px; height: var(--control-height); max-width: 100%; transition: border-color .15s, box-shadow .15s, background .15s; }
input[type="checkbox"], input[type="radio"] { height: auto; width: 16px; accent-color: var(--accent); }
input[type="file"] { height: auto; padding: 6px 8px; }
input[type="date"] { min-width: 138px; }
textarea { height: auto; min-height: 150px; width: 100%; padding: 12px; font-family: var(--mono); font-size: 13px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); background: var(--surface); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.row > div { min-width: 120px; }
.row > form { margin: 0; }
button, .btn { font: 600 13.5px var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--control-height); padding: 0 16px; border-radius: var(--radius-control); border: 1px solid transparent; background: var(--accent); color: var(--on-primary); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease; }
button:hover, .btn:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 22px color-mix(in srgb, var(--accent) 38%, transparent); }
button:active:not(:disabled), .btn:active { transform: scale(.97); }
button:disabled { opacity: .55; cursor: progress; }
button.alt, .btn.alt { background: var(--glass-strong); color: var(--accent-ink); border-color: var(--edge); box-shadow: none; }
button.alt:hover, .btn.alt:hover { background: var(--surface); box-shadow: 0 6px 16px rgba(28, 56, 96, .12); filter: none; }
:root[data-theme="dark"] button.alt, :root[data-theme="dark"] .btn.alt { color: var(--accent); }
button.danger { background: transparent; color: var(--negative); border-color: color-mix(in srgb, var(--negative) 55%, transparent); box-shadow: none; }
button.danger:hover { background: var(--pill-negative-bg); box-shadow: none; filter: none; }
button[style*="padding:1px"] { min-height: 28px; }
.icon-btn, .cmdk-btn { box-shadow: none; }
.icon-btn:hover, .cmdk-btn:hover { filter: none; }
.uk, kbd.uk { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 7px; border: 1px solid var(--edge); border-bottom-width: 2px; background: var(--glass-strong); font: 600 12px var(--mono); text-align: center; }

/* ---------- messages, tabs, chips ---------- */
.flash { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-radius: 16px; margin-bottom: var(--gap); font-size: 14px; word-break: break-word; }
.flash.ok { background: var(--pill-positive-bg); color: var(--pill-positive-ink); } .flash.err { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.tabs { display: inline-flex; gap: 2px; max-width: 100%; overflow-x: auto; margin: 0 0 var(--gap); padding: 4px !important; background: var(--pill-neutral-bg) !important; border-radius: 16px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 7px 15px; border-radius: 12px; color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.tabs a:hover { color: var(--text); text-decoration: none; background: var(--raised); }
.tabs a.on { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(20, 40, 70, .12), 0 4px 10px rgba(20, 40, 70, .06); }
:root[data-theme="dark"] .tabs a.on { background: rgba(255, 255, 255, .13); color: #fff; box-shadow: none; }
.mbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 16px; padding: 7px 10px 7px 16px; border-radius: 999px; width: fit-content; max-width: 100%; box-shadow: none; }
.mbar .mlbl { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.mchip { padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); border: 1px solid transparent; transition: background .2s, transform .15s; }
.mchip span { font-size: 11px; opacity: .65; margin-left: 2px; }
.mchip:hover { background: var(--raised); text-decoration: none; transform: translateY(-1px); }
.mchip.on { background: var(--accent); color: var(--on-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.empty, .card.mute { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--control); background: transparent; box-shadow: none; padding: 16px 18px; border-radius: 18px; color: var(--muted); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.mute:hover { box-shadow: none; }
details > summary { cursor: pointer; }
details[open] > summary { color: var(--accent-ink); }
.report { max-width: 880px; line-height: 1.7; }
.report h2 { font-size: 20px; margin-top: 28px; }
.report h3 { font-size: 16px; margin: 20px 0 8px; font-weight: 650; }
.report ul, .report ol { padding-left: 22px; margin: 0 0 12px; }

/* ---------- refresh split button + menu ---------- */
.rsplit { position: relative; display: inline-flex; }
.rsplit .rmain { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 999px; border-bottom-left-radius: 999px; padding: 0 16px 0 14px; height: 40px; }
.rsplit .rcaret { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 999px; border-bottom-right-radius: 999px; border-left: 1px solid rgba(255, 255, 255, .35); padding: 0 11px 0 9px; min-width: 34px; height: 40px; }
.rmenu { position: absolute; z-index: 90; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 24px); background: var(--glass-strong); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border: 1px solid var(--edge); border-radius: 20px; padding: 8px; box-shadow: 0 26px 64px rgba(14, 30, 56, .30); animation: pop .18s cubic-bezier(.2, .8, .2, 1) both; }
.rmenu[hidden] { display: none; }
.rmenu-h { font-size: 12px; font-weight: 700; color: var(--faint); padding: 8px 10px 4px; }
.rmenu .ritem { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px; border-radius: 14px; cursor: pointer; color: var(--text); }
.rmenu .ritem:hover, .rmenu .ritem:focus-visible { background: var(--accent-soft); }
.rmenu .ritem b { display: block; font-size: 14px; font-weight: 650; }
.rmenu .ritem span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; line-height: 1.4; white-space: normal; }

/* ---------- refresh progress ---------- */
.rp { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(10, 22, 40, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rp-card { width: 100%; max-width: 480px; background: var(--glass-strong); border-radius: 28px; padding: 26px 26px 20px; box-shadow: 0 30px 80px rgba(10, 22, 40, .4); }
.rp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 17px; font-weight: 650; }
.rp-pct { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.rp-bar { height: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.rp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--chart-2)); border-radius: 999px; transition: width .3s ease; }
.rp-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.rp-steps li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; align-items: center; padding: 7px 0; font-size: 14px; color: var(--faint); }
.rp-steps li .r { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.rp-steps li .r:empty { display: none; }
.rp-steps .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--control); }
.rp-steps li.run { color: var(--text); font-weight: 600; }
.rp-steps li.run .dot { border-color: var(--control); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.rp-steps li.ok { color: var(--text); } .rp-steps li.ok .dot { background: var(--positive); border-color: var(--positive); }
.rp-steps li.err { color: var(--text); } .rp-steps li.err .dot { background: var(--negative); border-color: var(--negative); }
.rp-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- speed test bar ---------- */
.spdbar { position: sticky; top: 96px; z-index: 30; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; margin: 10px 0; padding: 14px 18px; border-radius: 20px; background: var(--glass-strong); }
.spdbar[hidden] { display: none; }
.spdbar .spdtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .spdbar .spdtxt span { font-size: 13px; color: var(--muted); }
.spdbar .spdprog { grid-column: 1 / -1; height: 7px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.spdbar .spdprog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--chart-2)); transition: width .4s ease; }
.spdspin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.spdbar.ok .spdspin, .spdbar.bad .spdspin { animation: none; border-color: transparent; position: relative; }
.spdbar.ok .spdspin::after { content: '\2713'; position: absolute; inset: -4px 0 0 3px; color: var(--positive); font-weight: 700; }
.spdbar.bad .spdspin::after { content: '!'; position: absolute; inset: -3px 0 0 8px; color: var(--negative); font-weight: 700; }
.spdbar.bad { border-color: var(--negative); }
#st tr.running td { animation: spdpulse 1.2s ease-in-out infinite; }
@keyframes spdpulse { 0%, 100% { background: transparent; } 50% { background: var(--accent-soft); } }
button.rone:disabled { opacity: .5; cursor: wait; }

/* ---------- quick jump (Ctrl+K) ---------- */
.cmdk { position: fixed; inset: 0; z-index: 500; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; background: rgba(10, 22, 40, .40); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: pop .18s ease both; }
.cmdk[hidden] { display: none; }
.cmdk-box { width: 100%; max-width: 600px; border-radius: 26px; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(1.7); backdrop-filter: blur(30px) saturate(1.7); border: 1px solid var(--edge); box-shadow: 0 34px 90px rgba(10, 22, 40, .45); overflow: hidden; }
.cmdk-box input { width: 100%; height: 58px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; font-size: 17px; padding: 0 22px; box-shadow: none !important; }
.cmdk-list { max-height: 52vh; overflow: auto; padding: 8px; }
.cmdk-list a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; color: var(--text); font-size: 14.5px; text-decoration: none; }
.cmdk-list a small { margin-left: auto; color: var(--faint); font-size: 12px; }
.cmdk-list a.on, .cmdk-list a:hover { background: var(--accent-soft); }
.cmdk-foot { padding: 10px 18px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); display: flex; gap: 16px; }
.cmd-extra { display: none; }

/* ---------- UX layer: progress bar, toasts, jump bar, table tools, tooltips ---------- */
#uxbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; pointer-events: none; opacity: 0; background: linear-gradient(90deg, var(--accent), var(--chart-2)); box-shadow: 0 0 12px var(--accent); transition: width .5s ease, opacity .3s ease; }
#uxbar.on { opacity: 1; }
#uxtoasts { position: fixed; top: 94px; right: 18px; z-index: 9000; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 36px)); pointer-events: none; }
.uxt { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; background: var(--glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--text); border: 1px solid var(--edge); box-shadow: 0 18px 48px rgba(14, 30, 56, .24); animation: pop .3s cubic-bezier(.2, .8, .2, 1) both; font-size: 14px; line-height: 1.45; word-break: break-word; position: relative; overflow: hidden; }
.uxt .ti { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); }
.uxt.ok .ti { background: var(--positive); } .uxt.err .ti { background: var(--negative); }
.uxt .tx { flex: 1; } .uxt .tx a { text-decoration: underline; }
.uxt button { all: unset; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; } .uxt button:hover { color: var(--text); }
.uxt .tp { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.uxt.out { opacity: 0; transform: translateX(24px); transition: .3s ease; }
.jumpbar { position: sticky; top: 96px; z-index: 40; display: flex; gap: 6px; align-items: center; overflow-x: auto; margin: 0 0 16px; padding: 7px 12px; border-radius: 999px; scrollbar-width: none; background: var(--glass-strong); }
.jumpbar::-webkit-scrollbar { display: none; }
.jumpbar .jl { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 6px; }
.jumpbar a { flex: none; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); border: 1px solid transparent; transition: background .2s, color .2s; }
.jumpbar a:hover { background: var(--accent-soft); text-decoration: none; }
.jumpbar a.on { background: var(--accent); color: var(--on-primary); }
.sheet-in h2[id], .sheet-in .sec[id] { scroll-margin-top: 150px; }
.tfilter { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.tfilter input { max-width: 300px; padding-left: 34px; background: var(--glass-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238896ab' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") 12px 50% no-repeat; }
.tfilter .tc { font-size: 12.5px; color: var(--muted); }
th.uxs { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s; }
th.uxs:hover { color: var(--accent-ink); }
th.uxs::after { content: '\2195'; margin-left: 5px; font-size: 10px; opacity: .35; }
th.uxs[data-dir="asc"]::after { content: '\25B2'; opacity: 1; color: var(--accent); }
th.uxs[data-dir="desc"]::after { content: '\25BC'; opacity: 1; color: var(--accent); }
tr.uxhide { display: none; }
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; font-weight: 400; text-align: left; white-space: normal; background: #0e1b2e; color: #f1f6fc; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 600; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
th[data-tip]::after { bottom: auto; top: calc(100% + 6px); }
#uxtop { position: fixed; right: 20px; bottom: 20px; z-index: 500; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--edge); background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--accent-ink); font-size: 18px; box-shadow: var(--glass-shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s ease; cursor: pointer; }
#uxtop.on { opacity: 1; transform: none; pointer-events: auto; }
#uxkeys { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: rgba(10, 22, 40, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#uxkeys[hidden] { display: none; }
#uxkeys .kb { width: min(560px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; padding: 26px; border-radius: 28px; background: var(--glass-strong); color: var(--text); border: 1px solid var(--edge); box-shadow: 0 34px 90px rgba(10, 22, 40, .45); animation: pop .25s ease both; }
#uxkeys h3 { margin: 0 0 14px; } #uxkeys dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0; } #uxkeys dt { white-space: nowrap; } #uxkeys dd { margin: 0; color: var(--muted); }

/* ---------- onboarding, quick actions, help ---------- */
.onb { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin: 0 0 18px; padding: 20px 24px; border-radius: 28px; position: relative; overflow: hidden; }
.onb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 200px at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.onb > * { position: relative; }
.onb .ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--rule) 0); }
.onb .ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.onb .ring b { position: relative; font-size: 19px; font-weight: 700; }
.onb h3 { margin: 0 0 2px; font-size: 18px; } .onb p { margin: 0 0 12px; color: var(--muted); }
.onb ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.onb li a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--edge); background: var(--glass-strong); color: var(--text); font-size: 13.5px; transition: border-color .2s, transform .2s; }
.onb li a:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.onb li .ck { flex: none; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--control); display: grid; place-items: center; font-size: 11px; color: #fff; }
.onb li.done .ck { background: var(--positive); border-color: var(--positive); } .onb li.done a { color: var(--muted); text-decoration: line-through; }
.onb li.next a { border-color: var(--accent); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.onb .x { position: absolute; top: 12px; right: 16px; all: unset; cursor: pointer; color: var(--muted); font-size: 12.5px; } .onb .x:hover { color: var(--text); }
.qa { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.qa a { display: inline-flex; gap: 7px; align-items: center; padding: 8px 16px; border-radius: 999px; color: var(--text); font-size: 13.5px; font-weight: 500; box-shadow: none; transition: transform .2s, background .2s; }
.qa a:hover { transform: translateY(-2px); background: var(--glass-strong); text-decoration: none; }
.hq { margin: 0 0 16px; } .hq input { width: 100%; max-width: 560px; font-size: 16px; height: 50px; padding: 0 16px 0 42px; border-radius: 999px; background-position: 15px 50%; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hcard { display: block; padding: 18px 20px; border-radius: 22px; color: var(--text); transition: transform .22s, box-shadow .22s; }
.hcard:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-hover); text-decoration: none; }
.hcard b { display: block; margin-bottom: 4px; font-size: 15px; } .hcard span { color: var(--muted); font-size: 13.5px; display: block; }
.hcard small { display: block; margin-top: 10px; color: var(--accent-ink); font-weight: 650; font-size: 12.5px; }

/* reveal + count-up */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1560px) {
  .cmdk-btn span, .cmdk-btn kbd, .stamp { display: none; } .cmdk-btn { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 1180px) {
  .gtabs { order: 5; flex: 1 1 100%; }
  .cmdk-btn span, .cmdk-btn kbd { display: none; } .cmdk-btn { width: 40px; padding: 0; justify-content: center; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hdr { top: 6px; margin-top: 6px; width: calc(100% - 12px); border-radius: 20px; }
  .stamp, .rf .rtext { display: none; }
  .rsplit .rmain { width: 44px; padding: 0; } .rsplit .rmain, .rsplit .rcaret { height: 40px; }
  .switch summary { max-width: 190px; } .switch .nm b, .switch .nm span { max-width: 100px; }
  .logo span { display: none; }
  .sheet { padding: 18px 4px 64px; } .sheet-in { padding: 0 12px; }
  .jumpbar { top: 130px; }
  .chart { height: 250px; }
  .hero { padding: 20px 18px; border-radius: 24px; } .hero-gauge { width: 100%; }
  .hb { grid-template-columns: 90px 1fr 48px; }
  #uxtoasts { top: 120px; right: 10px; }
}
@media (max-width: 600px) {
  .row { gap: 10px; } .row > div { flex: 1 1 140px; min-width: 0; }
  .row > div input:not([type="checkbox"]):not([type="radio"]), .row > div select { width: 100%; }
  .row > button, .row > .btn, .row > form { flex: 1 1 auto; }
  input, select { height: 42px; } button, .btn { min-height: 42px; }
  .card { padding: 16px; border-radius: 18px; } .panel { padding: 14px 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { padding: 10px 12px; } .kpi .v { font-size: 22px; }
  .kc-v { font-size: 28px; } .stat b { font-size: 24px; }
  th, td { padding: 9px 10px; }
  .onb { grid-template-columns: 1fr; }
  .login { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .sheet-in, .gauge .bar, .hb-t i, .menu, .rmenu, .cmdk, .uxt, .onb li.next a, #uxkeys .kb { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } * { transition-duration: .01ms !important; }
}
@media print {
  body { background: #fff; } .aurora, .hdr, .scrim, #uxbar, #uxtoasts, .jumpbar, #uxtop, #uxkeys, .tfilter, .qa, .onb, .mbar { display: none !important; }
  .card, .panel, .kcard, .hero { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #ddd; }
}

/* ---------- phone refinements (v2.1) ---------- */
.themebtn { display: none; all: unset; box-sizing: border-box; }
.btabs { display: none; }
@media (max-width: 900px) {
  /* one compact top row: logo mark, project, search, refresh, account; sections move to a bottom bar */
  .hdr-in { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .gtabs { display: none; }
  #theme { display: none; }
  .switch { flex: 1 1 auto; min-width: 0; }
  .switch summary { max-width: none; width: 100%; height: 40px; }
  .switch .nm { flex: 1; } .switch .nm b, .switch .nm span { max-width: none; }
  .hdr-r { margin-left: 0; gap: 6px; flex: none; }
  .icon-btn, .cmdk-btn { width: 38px; height: 38px; }
  .rsplit .rmain, .rsplit .rcaret { height: 38px; } .rsplit .rmain { width: 40px; } .rsplit .rcaret { min-width: 28px; padding: 0 6px; }
  .avatar.me { width: 36px; height: 36px; font-size: 14px; }
  .logo { padding: 0; } .logo svg { width: 24px; height: 24px; }
  .subwrap { padding: 6px 6px; }
  .subnav { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); padding: 2px 14px 2px 10px; }
  .subnav a { height: 34px; }
  .acct .menu { min-width: 230px; }
  .themebtn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--text); font: 500 14px var(--font); cursor: pointer; width: 100%; }
  .themebtn:hover { background: var(--accent-soft); }

  /* bottom section bar */
  .btabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 60; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 24px;
    background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--edge); box-shadow: 0 14px 40px rgba(14, 30, 56, .22); }
  .btabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 18px; color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
  .btabs a .ico { width: 20px; height: 20px; }
  .btabs a.on { background: var(--accent-soft); color: var(--accent-ink); }
  :root[data-theme="dark"] .btabs a.on { color: var(--accent); }
  .sheet { padding-bottom: 110px; }
  #uxtop { bottom: 96px; right: 14px; width: 42px; height: 42px; }
  .jumpbar { top: 118px; }
  .spdbar { top: 118px; }
  #uxtoasts { top: 112px; }

  /* getting-started checklist: small ring beside the title, only the steps still to do */
  .onb { grid-template-columns: 56px 1fr; gap: 6px 14px; padding: 16px; border-radius: 22px; }
  .onb > div { display: contents; }
  .onb .ring { width: 56px; height: 56px; grid-row: 1 / 3; grid-column: 1; }
  .onb .ring::before { inset: 6px; } .onb .ring b { font-size: 14px; }
  .onb h3 { grid-column: 2; font-size: 16px; align-self: end; margin: 0; }
  .onb p { grid-column: 2; font-size: 13px; margin: 0; align-self: start; }
  .onb ol { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
  .onb li.done { display: none; }
  .onb li a { padding: 9px 12px; font-size: 13.5px; }
  .onb .x { top: 10px; right: 14px; }
  .qa { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .qa::-webkit-scrollbar { display: none; } .qa a { flex: none; }
  .mbar { padding: 5px 8px 5px 12px; }
  .hero-stat { min-width: 0; flex: 1 1 calc(50% - 6px); padding: 10px 14px; } .hero-stat b { font-size: 22px; }
  h1 { font-size: 24px; }
}
@media (max-width: 380px) { .logo { display: none; } }
@media (max-width: 600px) {
  .grid:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid > .stat { padding: 12px 14px; border-radius: 16px; } .grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kcard { padding: 14px 14px 12px; border-radius: 18px; } .kcard::before { left: 14px; }
  .kc-v { font-size: 26px; } .kc-l { font-size: 12.5px; } .kc-f { min-height: 0; }
  .kcards .kc-sp { display: none; }
}

/* featured analytics cards inside the overview hero */
.hero-feat { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.fcard { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 8px; padding: 14px 16px 12px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--edge); transition: transform .2s, box-shadow .2s; }
.fcard::before { content: ""; position: absolute; left: 16px; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--kc, var(--accent)); }
.fcard::after { content: ""; position: absolute; right: -24px; top: -28px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, var(--kc, var(--accent)), transparent); opacity: .16; pointer-events: none; }
.fcard:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow); }
.fcard .fl { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fcard .fv { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.fcard .ff { justify-self: end; }
@media (max-width: 600px) { .hero-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .fcard { padding: 12px 14px 10px; } .fcard .fv { font-size: 20px; } }

/* table filters + pagination */
.tfbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 0 0 12px; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tfbar .tf-grow { flex: 1 1 220px; min-width: 180px; } .tfbar .tf-grow input { width: 100%; }
.tfbar label { margin-bottom: 4px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -4px 0 var(--gap); padding: 10px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--edge); font-size: 13px; color: var(--muted); }
.pager b { color: var(--text); font-weight: 650; }
.pg-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pg { min-width: 34px; height: 34px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px; color: var(--text); font-weight: 600; border: 1px solid transparent; transition: background .15s, transform .15s; }
a.pg:hover { background: var(--accent-soft); text-decoration: none; transform: translateY(-1px); }
.pg.cur { background: var(--accent); color: var(--on-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.pg.dis { color: var(--faint); opacity: .6; } .pg.gap { color: var(--faint); min-width: 20px; padding: 0; }
.pg-size { display: inline-flex; align-items: center; gap: 8px; } .pg-size > span { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--pill-neutral-bg); }
.pg-size a { padding: 3px 10px; border-radius: 9px; color: var(--muted); font-weight: 600; } .pg-size a:hover { text-decoration: none; color: var(--text); background: var(--raised); }
.pg-size a.cur { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(20, 40, 70, .14); }
:root[data-theme="dark"] .pg-size a.cur { background: rgba(255, 255, 255, .13); color: #fff; box-shadow: none; }
@media (max-width: 600px) { .pager { justify-content: center; } .tfbar > div, .tfbar input[type=number] { flex: 1 1 120px; } .tfbar .tf-grow { flex-basis: 100%; } }
@media (max-width: 900px) { .hero-feat { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
tr.uxpg { display: none; }
.pager.cl { margin-top: -6px; }

/* ---------- Marketing: funnel, goals, actions, experiments, routine ---------- */
.prog { height: 9px; border-radius: 999px; background: var(--rule); overflow: hidden; margin: 8px 0 4px; }
.prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--chart-1), var(--chart-2)); transition: width 1s cubic-bezier(.2, .7, .2, 1); }
.funnel { padding: 18px 22px; }
.fn-row { display: grid; grid-template-columns: 130px 1fr 230px; gap: 14px; align-items: center; padding: 7px 0; }
.fn-l { font-weight: 600; font-size: 13.5px; }
.fn-t { height: 26px; border-radius: 10px; background: var(--rule); overflow: hidden; }
.fn-t i { display: block; height: 100%; border-radius: 10px; transform-origin: left; animation: grow .9s cubic-bezier(.2, .7, .2, 1) both; }
.fn-1 { background: #bfe3ea; } .fn-2 { background: #a8d8e3; } .fn-3 { background: #b9d3fb; } .fn-4 { background: #c9d6fb; } .fn-5 { background: #d9ccfb; } .fn-6 { background: #fde3a6; } .fn-7 { background: #f9d0b0; } .fn-8 { background: #bdeccf; }
.fn-v { font-size: 13px; color: var(--muted); } .fn-v b { color: var(--text); font-size: 16px; margin-right: 6px; } .fn-v span { font-size: 12px; }
@media (max-width: 700px) { .fn-row { grid-template-columns: 1fr; gap: 4px; } }
.checks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.checks li.ok .ck { background: var(--ok); } .checks li.no .ck { background: var(--amber); }
.acts { display: grid; gap: 10px; margin-bottom: var(--gap); }
.act { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--edge); }
.act.bad { background: linear-gradient(90deg, rgba(214, 51, 79, .10), var(--glass) 60%); } .act.warn { background: linear-gradient(90deg, rgba(217, 138, 11, .12), var(--glass) 60%); } .act.info { background: linear-gradient(90deg, rgba(43, 127, 216, .10), var(--glass) 60%); }
.act-s { text-align: center; line-height: 1.1; } .act-s b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .act-s span { font-size: 11px; color: var(--muted); }
.act-t { margin-bottom: 2px; } .act-d { margin-top: 3px; font-size: 13.5px; }
@media (max-width: 700px) { .act { grid-template-columns: 52px 1fr; } .act-f { grid-column: 1 / -1; } }
.exp .exp-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.ba { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); }
.ba-i b { font-size: 16px; }
button.rt { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .15s; }
button.rt:hover { background: var(--accent-soft); } button.rt.done span:last-child { color: var(--muted); text-decoration: line-through; }
button.rt .ck { flex: none; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--control); display: grid; place-items: center; font-size: 11px; color: #fff; }
button.rt.done .ck { background: var(--ok); border-color: var(--ok); }
.kcards.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1250px) { .kcards.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kcards.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   Colour and motion pass: light, tinted surfaces (never dark blocks), one colour per metric, gentle entrances.
   ===================================================================== */
:root { --tint: 15%; }
:root[data-theme="dark"] { --tint: 13%; }
.kcard { background: linear-gradient(150deg, color-mix(in srgb, var(--kc, var(--accent)) calc(var(--tint) + 2%), var(--surface)), color-mix(in srgb, var(--kc, var(--accent)) 3%, var(--surface))); }
.kcard::after { opacity: .28; }
.kcard:hover { box-shadow: 0 18px 40px color-mix(in srgb, var(--kc, var(--accent)) 24%, transparent), var(--glass-shadow); }
.kcard::before { width: 46px; height: 5px; }
.fcard { background: linear-gradient(150deg, color-mix(in srgb, var(--kc, var(--accent)) var(--tint), var(--surface)), color-mix(in srgb, var(--kc, var(--accent)) 3%, var(--surface))); }
.hero-stats > .hero-stat:nth-child(6n+1) { --kc: var(--chart-1); } .hero-stats > .hero-stat:nth-child(6n+2) { --kc: var(--chart-2); } .hero-stats > .hero-stat:nth-child(6n+3) { --kc: var(--chart-3); }
.hero-stats > .hero-stat:nth-child(6n+4) { --kc: var(--chart-4); } .hero-stats > .hero-stat:nth-child(6n+5) { --kc: var(--ok); } .hero-stats > .hero-stat:nth-child(6n+6) { --kc: var(--pink); }
.hero-stat { background: linear-gradient(150deg, color-mix(in srgb, var(--kc, var(--accent)) var(--tint), var(--surface)), color-mix(in srgb, var(--kc, var(--accent)) 4%, var(--surface))); border-color: color-mix(in srgb, var(--kc, var(--accent)) 24%, var(--edge)); }
.hero-stat b { color: color-mix(in srgb, var(--kc, var(--accent)) 55%, var(--text)); }
.grid > .stat { background: linear-gradient(150deg, color-mix(in srgb, var(--chart-1) var(--tint), var(--surface)), color-mix(in srgb, var(--chart-1) 3%, var(--surface))); }
.grid > .stat:nth-child(4n+2) { background: linear-gradient(150deg, color-mix(in srgb, var(--chart-2) var(--tint), var(--surface)), color-mix(in srgb, var(--chart-2) 3%, var(--surface))); }
.grid > .stat:nth-child(4n+3) { background: linear-gradient(150deg, color-mix(in srgb, var(--chart-3) var(--tint), var(--surface)), color-mix(in srgb, var(--chart-3) 3%, var(--surface))); }
.grid > .stat:nth-child(4n+4) { background: linear-gradient(150deg, color-mix(in srgb, var(--chart-4) var(--tint), var(--surface)), color-mix(in srgb, var(--chart-4) 3%, var(--surface))); }
.hl > a, .hl > div { background: linear-gradient(150deg, color-mix(in srgb, var(--hc, var(--accent)) 12%, var(--surface)), color-mix(in srgb, var(--hc, var(--accent)) 3%, var(--surface))); }
.panel { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--glass) 40%); }
.panels > .panel:nth-child(4n+2) { background: linear-gradient(180deg, color-mix(in srgb, var(--chart-2) 6%, var(--surface)), var(--glass) 40%); }
.panels > .panel:nth-child(4n+3) { background: linear-gradient(180deg, color-mix(in srgb, var(--chart-3) 7%, var(--surface)), var(--glass) 40%); }
.panels > .panel:nth-child(4n+4) { background: linear-gradient(180deg, color-mix(in srgb, var(--chart-4) 6%, var(--surface)), var(--glass) 40%); }
.panel > h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); align-self: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.panels > .panel:nth-child(4n+2) > h3::before { background: var(--chart-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--chart-2) 18%, transparent); }
.panels > .panel:nth-child(4n+3) > h3::before { background: var(--chart-3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--chart-3) 20%, transparent); }
.panels > .panel:nth-child(4n+4) > h3::before { background: var(--chart-4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--chart-4) 18%, transparent); }
h2.sec::before { width: 6px; height: 20px; background: linear-gradient(180deg, var(--chart-1), var(--chart-2)); }
.hero::before { background: radial-gradient(520px 260px at 92% 0%, color-mix(in srgb, var(--chart-1) 26%, transparent), transparent 70%), radial-gradient(460px 260px at 0% 110%, color-mix(in srgb, var(--chart-3) 22%, transparent), transparent 70%), radial-gradient(380px 220px at 55% -20%, color-mix(in srgb, var(--chart-4) 16%, transparent), transparent 70%); animation: heroGlow 14s ease-in-out infinite alternate; }
@keyframes heroGlow { from { opacity: .85; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
th { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent-ink); }
:root[data-theme="dark"] th { color: var(--accent); }
.tabs a.on, .subnav a.on { background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 16%, var(--surface)), color-mix(in srgb, var(--chart-2) 14%, var(--surface))); }
.prog i { background: linear-gradient(90deg, var(--chart-1), var(--chart-2), var(--chart-4)); animation: growW 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes growW { from { width: 0; } }
.hb-t i { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); background-size: 200% 100%; animation: grow .9s cubic-bezier(.2, .7, .2, 1) both, shine 3.2s 1s ease-in-out infinite; }
@keyframes shine { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.kcards > *, .hero-stats > *, .hero-feat > *, .grid:has(> .stat) > *, .hl > *, .acts > * { animation: popIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.kcards > :nth-child(2), .hero-stats > :nth-child(2), .hero-feat > :nth-child(2), .grid:has(> .stat) > :nth-child(2), .hl > :nth-child(2), .acts > :nth-child(2) { animation-delay: 70ms; }
.kcards > :nth-child(3), .hero-stats > :nth-child(3), .hero-feat > :nth-child(3), .grid:has(> .stat) > :nth-child(3), .hl > :nth-child(3), .acts > :nth-child(3) { animation-delay: 140ms; }
.kcards > :nth-child(4), .hero-stats > :nth-child(4), .hero-feat > :nth-child(4), .grid:has(> .stat) > :nth-child(4), .hl > :nth-child(4), .acts > :nth-child(4) { animation-delay: 210ms; }
.kcards > :nth-child(5), .hero-stats > :nth-child(5), .hero-feat > :nth-child(5), .grid:has(> .stat) > :nth-child(5), .acts > :nth-child(5) { animation-delay: 280ms; }
.kcards > :nth-child(n+6), .hero-stats > :nth-child(n+6), .hero-feat > :nth-child(n+6), .grid:has(> .stat) > :nth-child(n+6), .acts > :nth-child(n+6) { animation-delay: 350ms; }
.kc-v, .fcard .fv { transition: transform .25s ease; display: inline-block; }
.kcard:hover .kc-v, .fcard:hover .fv { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .kcards > *, .hero-stats > *, .hero-feat > *, .grid:has(> .stat) > *, .hl > *, .acts > *, .hero::before, .hb-t i, .prog i { animation: none !important; } }

/* ---------- analyst pages ---------- */
.share-bar { display: flex; height: 40px; border-radius: 14px; overflow: hidden; gap: 3px; }
.share-bar a { display: block; min-width: 6px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 600; line-height: 40px; padding: 0 10px; overflow: hidden; white-space: nowrap; text-decoration: none; opacity: .85; transition: opacity .2s, transform .2s; animation: grow .9s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
.share-bar a:hover { opacity: 1; transform: translateY(-2px); text-decoration: none; }
.share-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.share-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.techs { display: grid; gap: 10px; margin-bottom: var(--gap); }
.tech { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 18px; background: var(--glass); border: 1px solid var(--edge); }
.tech .ti { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; }
.tech.ok .ti { background: var(--ok); } .tech.warn .ti { background: var(--amber); } .tech.bad .ti { background: var(--err); } .tech.info .ti { background: var(--chart-2); }
.tech.bad { background: linear-gradient(90deg, rgba(214, 51, 79, .10), var(--glass) 60%); } .tech.warn { background: linear-gradient(90deg, rgba(217, 138, 11, .10), var(--glass) 60%); } .tech.ok { background: linear-gradient(90deg, rgba(12, 138, 92, .08), var(--glass) 60%); }
.snip-p { margin: 12px 0 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--edge); max-width: 680px; }
.snip-t { color: #1a0dab; font-size: 18px; line-height: 1.3; } :root[data-theme="dark"] .snip-t { color: #8ab4f8; }
.snip-u { color: #188038; font-size: 13px; margin: 2px 0; } :root[data-theme="dark"] .snip-u { color: #81c995; }
.snip-d { color: var(--muted); font-size: 13.5px; }
.chipq { display: inline-flex; gap: 6px; align-items: center; margin: 4px 6px 0 0; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; }
.chipq.in { background: var(--pill-positive-bg); color: var(--pill-positive-ink); } .chipq.out { background: var(--pill-negative-bg); color: var(--pill-negative-ink); } .chipq i { font-style: normal; opacity: .7; font-size: 11.5px; }
.snip-f { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; }

/* ---------- header v3: page-row dropdown clusters, drag scrolling, compact refresh menu ---------- */
.subwrap { position: relative; }
.subnav { cursor: grab; scroll-behavior: auto; -webkit-overflow-scrolling: touch; }
.subnav.dragging { cursor: grabbing; user-select: none; } .subnav.dragging a, .subnav.dragging button { pointer-events: none; }
.subwrap::before, .subwrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.subwrap::before { left: 0; border-radius: 0 0 0 22px; background: linear-gradient(90deg, var(--glass-strong), transparent); }
.subwrap::after { right: 0; border-radius: 0 0 22px 0; background: linear-gradient(270deg, var(--glass-strong), transparent); }
.subwrap.can-l::before, .subwrap.can-r::after { opacity: 1; }
.sbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 28px; padding: 0; min-height: 0; border-radius: 50%; display: none; place-items: center; font-size: 18px; line-height: 1; background: var(--surface); color: var(--accent-ink); border: 1px solid var(--edge); box-shadow: 0 4px 12px rgba(28, 56, 96, .16); }
.sbtn.l { left: 6px; } .sbtn.r { right: 6px; }
.sbtn:hover { transform: translateY(-50%) scale(1.06); filter: none; }
@media (hover: hover) and (min-width: 901px) { .subwrap.can-l .sbtn.l, .subwrap.can-r .sbtn.r { display: grid; } }
.gbtn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid transparent; box-shadow: none; font: 500 13.5px var(--font); white-space: nowrap; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.gbtn:hover { background: var(--raised); color: var(--text); transform: none; filter: none; box-shadow: none; }
.gbtn .ico { width: 15px; height: 15px; opacity: .85; } .gbtn .ico:last-child { width: 12px; height: 12px; opacity: .6; transition: transform .2s; }
.gbtn.open .ico:last-child { transform: rotate(180deg); }
.gbtn em { font-style: normal; color: var(--accent-ink); font-weight: 600; }
.gbtn.on { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; }
.gbtn.open { background: var(--raised); color: var(--text); }
.gmenu { z-index: 700; padding: 6px; min-width: 210px; max-height: min(70vh, 420px); overflow: auto; background: var(--glass-strong); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border: 1px solid var(--edge); border-radius: 16px; box-shadow: 0 22px 54px rgba(14, 30, 56, .26); animation: pop .16s cubic-bezier(.2, .8, .2, 1) both; }
.gmenu[hidden] { display: none; }
.gmenu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; color: var(--text); font-size: 13.5px; white-space: nowrap; }
.gmenu a:hover, .gmenu a:focus-visible { background: var(--accent-soft); text-decoration: none; outline: none; }
.gmenu a.on { background: var(--active); font-weight: 600; color: var(--accent-ink); }
.gmenu a .ico { width: 15px; height: 15px; opacity: .8; }

/* refresh menu: small and tidy */
.rmenu { width: 290px; max-width: calc(100vw - 20px); max-height: min(68vh, 460px); overflow: auto; padding: 6px; border-radius: 16px; top: calc(100% + 8px); }
.rmenu-h { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--faint); padding: 7px 10px 3px; }
.rmenu .ritem { padding: 7px 10px; border-radius: 10px; }
.rmenu .ritem b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.rmenu .ritem span { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rbadge { font-size: 9.5px; padding: 0 6px; margin-left: 5px; }
@media (max-width: 900px) {
  .gbtn { height: 34px; }
  .rmenu { position: fixed; right: 10px; left: auto; top: 64px; width: min(300px, calc(100vw - 20px)); }
}

/* phones: nothing may widen the page sideways; long buttons wrap */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 600px) { .btn, a.btn, button.btn { white-space: normal; max-width: 100%; text-align: left; line-height: 1.3; } }
.addkw > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.addkw > summary::-webkit-details-marker { display: none; }
.addkw > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; transition: transform .2s; }
.addkw[open] > summary::before { transform: rotate(45deg); }
.addkw[open] > summary { margin-bottom: 4px; }

/* "On this page": one small button with a dropdown instead of a long bar */
.jumpbar { display: inline-block; position: sticky; top: 96px; z-index: 60; width: auto; max-width: 100%; overflow: visible; padding: 0; border-radius: 999px; background: transparent; box-shadow: none; border: 0; margin: 0 10px 14px 0; vertical-align: top; }
.jbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; max-width: min(420px, 100%); border-radius: 999px; background: var(--glass-strong); color: var(--text); border: 1px solid var(--edge); box-shadow: 0 6px 18px rgba(28, 56, 96, .12); font: 500 13px var(--font); cursor: pointer; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.jbtn:hover { transform: none; filter: none; background: var(--raised); }
.jbtn .jl { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.jbtn .jcur { color: var(--accent-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.jbtn svg { flex: none; opacity: .7; transition: transform .2s; } .jumpbar.open .jbtn svg { transform: rotate(180deg); }
.jmenu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; width: 280px; max-width: calc(100vw - 32px); max-height: min(65vh, 420px); overflow: auto; padding: 6px; background: var(--glass-strong); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border: 1px solid var(--edge); border-radius: 16px; box-shadow: 0 22px 54px rgba(14, 30, 56, .26); animation: pop .16s cubic-bezier(.2, .8, .2, 1) both; }
.jmenu[hidden] { display: none; }
.jmenu a { display: block; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; color: var(--text); background: transparent; border: 0; white-space: normal; }
.jmenu a:hover { background: var(--accent-soft); text-decoration: none; }
.jmenu a.on { background: var(--active); color: var(--accent-ink); font-weight: 600; }
@media (max-width: 900px) { .jumpbar { top: 78px; } }
.jmenu, .gmenu, .rmenu { background: var(--surface); }
.jumpbar + form.row { display: inline-flex; vertical-align: top; margin: 0 0 14px !important; height: 34px; }
.jumpbar + form.row button { height: 34px; padding: 0 14px; }

/* compare page */
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.cmp-card { margin: 0; } .cmp-card .scroll { margin-top: 8px; }
.cmp-read { margin: 14px 0; }
table.cmp th { font-size: 12px; } table.cmp td { padding: 7px 8px; } .cmpk { max-width: 260px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .cmp-grid { grid-template-columns: 1fr; } }

/* goal strip on the overview */
.goalstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 12px 0 4px; padding: 12px 16px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--edge); }
.goalstrip .gs-t { font-weight: 700; font-size: 13px; } .goalstrip .gs { flex: 1 1 200px; min-width: 180px; }
.gs-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; margin-bottom: 5px; }
.goalstrip .prog { position: relative; height: 8px; border-radius: 99px; background: var(--raised); overflow: visible; }
.goalstrip .prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--chart-1), var(--teal)); }
.goalstrip .prog u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--muted); opacity: .6; border-radius: 2px; }

/* client summary: one printable page */
.summary-sheet { max-width: 920px; padding: 26px 30px; }
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 6px 0 10px; }
.summary-sheet h3 { margin: 16px 0 4px; font-size: 15px; } .summary-sheet ul, .summary-sheet ol { margin: 4px 0 10px; padding-left: 20px; } .summary-sheet li { margin: 3px 0; }
@media (max-width: 700px) { .sum-grid { grid-template-columns: 1fr; } .summary-sheet { padding: 18px; } }
@media print { .no-print, .tabs button { display: none !important; } .summary-sheet { max-width: none; box-shadow: none; border: 0; padding: 0; } .sum-grid { grid-template-columns: 1fr 1fr; } body { background: #fff; } }
@media (max-width: 700px) { .jumpbar { top: 74px; margin-bottom: 10px; } .jbtn { height: 36px; } .jmenu { position: fixed; left: 16px; right: 16px; top: auto; width: auto; max-width: none; margin-top: 8px; max-height: 55vh; } }
.jumpbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none; transform: none; }

/* funnels */
.fn-tabs { flex-wrap: wrap; } .fn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 10px; } .fn-meta { margin: 0 0 10px; }
.fn-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.fn-tpl { margin: 0; display: flex; flex-direction: column; gap: 6px; } .fn-tpl button { margin-top: auto; align-self: flex-start; }
.fn-mini { display: flex; flex-wrap: wrap; gap: 4px; } .fn-mini span { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--raised); color: var(--muted); }
.fn-leak { border-left: 4px solid var(--bad, #d6452f); } .fn-leak.ok { border-left-color: var(--ok, #1f9d6a); }
.tag.bad { background: color-mix(in srgb, var(--bad, #d6452f) 16%, transparent); color: var(--bad, #d6452f); } .tag.ok { background: color-mix(in srgb, var(--ok, #1f9d6a) 16%, transparent); color: var(--ok, #1f9d6a); }
.fn-leak .tag { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; margin-right: 6px; }
.fn-wrap { padding: 18px 20px; }
.fn-step { position: relative; border-radius: 14px; overflow: hidden; background: var(--raised); padding: 10px 14px; min-height: 48px; }
.fn-bar-bg { position: absolute; inset: 0; } .fn-bar-bg i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--chart-1) 32%, transparent), color-mix(in srgb, var(--teal) 18%, transparent)); border-radius: 14px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.fn-step.leak .fn-bar-bg i { background: linear-gradient(90deg, color-mix(in srgb, var(--bad, #d6452f) 30%, transparent), color-mix(in srgb, var(--amber) 16%, transparent)); }
.fn-line { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .fn-name { font-weight: 600; } .fn-val b { font-size: 20px; }
.fn-conv { display: flex; gap: 10px; align-items: center; padding: 5px 14px; font-size: 12.5px; color: var(--muted); } .fn-conv span:first-child { font-weight: 700; color: var(--text); } .fn-conv.leak span:first-child { color: var(--bad, #d6452f); }
form.inl { display: inline; margin: 0; } button.sm { padding: 2px 8px; min-height: 0; font-size: 13px; } td.nw { white-space: nowrap; }
.fn-edit input, .fn-edit select { min-width: 0; } .fn-in td, .fn-in th { padding: 5px 8px; }
.fn-check { list-style: none; margin: 10px 0 0; padding: 0; } .fn-check li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.chk { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 7px; border: 1.5px solid var(--edge); background: transparent; display: inline-grid; place-items: center; font-size: 13px; line-height: 1; color: #fff; box-shadow: none; } .chk.done { background: var(--ok, #1f9d6a); border-color: var(--ok, #1f9d6a); }
@media (max-width: 700px) { .fn-wrap { padding: 12px; } .fn-val b { font-size: 17px; } }

/* header dropdowns: solid, never see-through */
.menu, .rmenu, .gmenu, .jmenu, .cmdk-box { background: var(--surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Projects list: on small screens each project becomes a card so Backup and Open stay visible (no hidden columns) */
@media (max-width: 900px) {
  .card.scroll { overflow: visible; }
  table.projt, table.projt tbody { display: block; width: 100%; }
  table.projt tr.hd { display: none; }
  table.projt tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  table.projt tr:last-child { border-bottom: 0; }
  table.projt td { display: block; border: 0; padding: 0; text-align: left !important; min-width: 0; }
  table.projt td:first-child { grid-column: 1 / -1; }
  table.projt td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  table.projt td.pact { display: block; } table.projt td.pact .btn, table.projt td.pact button { width: 100%; text-align: center; justify-content: center; }
  table.projt td.pact form { margin: 0; }
}

/* tooltips are drawn by ux.js on <body> (never clipped); the old pseudo-element bubble is off */
[data-tip]::after, [data-tip]:hover::after, [data-tip]:focus-visible::after, th[data-tip]::after { content: none !important; display: none !important; }
#uxtip { position: fixed; z-index: 2000; left: 0; top: 0; max-width: 260px; padding: 8px 11px; border-radius: 10px; font: 400 12.5px/1.4 var(--font); text-align: left; background: #0e1b2e; color: #f1f6fc; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; pointer-events: none; }
#uxtip.on { opacity: 1; transform: none; }
@media (hover: none) { #uxtip { display: none; } }

/* sub-tasks */
.subt { margin-top: 6px; } .subt > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .subt > summary::-webkit-details-marker { display: none; }
.sbar { display: inline-block; width: 64px; height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; } .sbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--chart-1), var(--teal)); border-radius: 99px; }
.sublist { list-style: none; margin: 8px 0 0; padding: 0; } .sublist li { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .sublist li.done input { text-decoration: line-through; color: var(--muted); }
.sublist .subedit { flex: 1; } .sublist .subedit input { width: 100%; border: 1px solid transparent; background: transparent; padding: 3px 6px; } .sublist .subedit input:hover, .sublist .subedit input:focus { border-color: var(--edge); background: var(--surface); }

/* notes */
.swall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 12px 0 18px; } .nlist { display: grid; gap: 14px; margin: 12px 0; }
.snote { position: relative; display: block; background: var(--nc, #fff3b0); color: #1c2333; border-radius: 6px 6px 14px 6px; padding: 14px 16px 10px; box-shadow: 0 6px 16px rgba(20, 30, 50, .12); text-decoration: none; transform: rotate(-.4deg); }
.swall .snote:nth-child(even) { transform: rotate(.5deg); } .snote b { display: block; margin-bottom: 4px; } .snote .sbody { font-size: 14px; line-height: 1.5; word-break: break-word; } .snote .smeta { font-size: 11.5px; opacity: .6; margin-top: 8px; }
.snote .pin { position: absolute; top: -8px; right: 10px; } .snote .sact { display: flex; gap: 6px; margin-top: 8px; } .snote .sact .btn, .snote .sact button { background: rgba(255, 255, 255, .6); color: #1c2333; border: 0; }
.swall.pinned { margin: 12px 0 4px; } .swall.pinned .snote { transform: none; padding: 10px 14px; } .swall.pinned .snote:hover { box-shadow: 0 8px 20px rgba(20, 30, 50, .2); }
@media (prefers-color-scheme: dark) { .snote { color: #1c2333; } }

/* content ideas */
.cidea-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin: 12px 0; } .cidea { margin: 0; } .cidea-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* lead card: quiet, at the end of a page */
.leadcard { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 34px 0 10px; padding: 16px 20px; border: 1px dashed var(--edge); border-radius: 18px; background: var(--glass-strong); }
.leadcard[hidden] { display: none; } .leadcard div { flex: 1; min-width: 240px; } .leadcard b { display: block; font-size: 15px; } .leadcard span { color: var(--muted); font-size: 13.5px; }
@media print { .leadcard { display: none !important; } }