/* Layout: ledger page — light bands carry what we say (contract, notes, archive),
   one dark evidence band carries what the data says. Zero radius throughout. */
:root {
  color-scheme: light;
  --c-paper: #EFEFEC;
  --c-paper-raised: #E5E5E0;
  --c-rule: #CFCFC8;
  --c-ink: #0B0C0E;
  --c-ink-mute: #55575C;
  --c-ink-soft: #6A6C72;
  --c-panel: #0B0C0E;
  --c-panel-raised: #14161A;
  --c-panel-rule: #23262C;
  --c-panel-ink: #EDEDEA;
  --c-panel-mute: #7C818B;
  --c-figure: #1B3BD8;
  --c-figure-dark: #5C7BFF;
  --c-positive: #35D6BE;
  --c-negative: #FF8A7A;  /* downward movement that hurts, dark bands only */
  --c-warn: #E8B64C;

  --font-display: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --t-h1: clamp(2.2rem, 6.5vw, 4.6rem);
  --t-h2: clamp(1.5rem, 3.4vw, 2.3rem);
  --t-body: clamp(0.95rem, 1.4vw, 1.05rem);
  --t-small: 0.86rem;
  --t-label: 0.66rem;
  --t-fig: clamp(1.7rem, 3.2vw, 2.4rem);

  --tracking-display: -0.045em;
  --tracking-label: 0.12em;
  --space-gutter: clamp(1.15rem, 4vw, 3.75rem);
  --space-band: clamp(2.75rem, 6vw, 5rem);
  --max-width: 1240px;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-figure); outline-offset: 3px; }
.shell { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-gutter); }

.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--c-figure); }

/* ---------- Header ---------- */
.top { border-bottom: 1px solid var(--c-ink); }
.top .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.wordmark { display: flex; align-items: baseline; gap: 4px; }
.wordmark .n { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.04em; color: var(--c-figure); }
.wordmark .w { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.03em; }
.who { display: flex; align-items: center; gap: 16px; }
.who .name { font-size: var(--t-small); color: var(--c-ink-mute); }
.btn {
  font: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--c-ink); background: transparent; color: var(--c-ink);
  transition: background 180ms var(--ease), color 180ms var(--ease); white-space: nowrap;
}
.btn:hover { background: var(--c-ink); color: var(--c-paper); }
.btn.primary { background: var(--c-ink); color: var(--c-paper); }
.btn.primary:hover { background: transparent; color: var(--c-ink); }

/* ---------- Intro + contract statement ---------- */
.intro .shell {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); padding-block: var(--space-band);
}
h1 {
  margin: 10px 0 18px; font-size: var(--t-h1); line-height: 0.9; font-weight: 700;
  letter-spacing: var(--tracking-display); text-transform: uppercase; text-wrap: balance;
}
.intro .lead { margin: 0; max-width: 46ch; color: var(--c-ink-mute); font-size: var(--t-body); }
.statement { border-top: 2px solid var(--c-ink); padding-top: 14px; min-width: 0; }
.statement h2 { margin: 0 0 6px; }
.line {
  display: flex; align-items: baseline; gap: 10px; padding-block: 9px;
  font-family: var(--font-mono); font-size: 0.8rem;
}
.line .k { white-space: nowrap; color: var(--c-ink-mute); }
.line .lead-dots { flex: 1; border-bottom: 1px dotted var(--c-ink-soft); transform: translateY(-3px); min-width: 16px; }
.line .v { white-space: nowrap; text-align: right; }
.statement .foot { margin: 12px 0 0; font-size: 0.78rem; color: var(--c-ink-soft); }

/* ---------- Evidence band ---------- */
.evidence { background: var(--c-panel); color: var(--c-panel-ink); }
.evidence .shell { padding-block: var(--space-band); }
.evidence .label { color: var(--c-panel-mute); }
.band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
h2 {
  margin: 6px 0 0; font-size: var(--t-h2); line-height: 1; font-weight: 700;
  letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance;
}
.updated { font-family: var(--font-mono); font-size: 0.74rem; color: var(--c-panel-mute); }
.kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--c-panel-rule); border: 1px solid var(--c-panel-rule);
}
.kpi { background: var(--c-panel-raised); padding: 18px 18px 14px; display: grid; gap: 6px; min-width: 0; }
.kpi .src { display: flex; justify-content: space-between; gap: 8px; }
.kpi .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-fig); line-height: 1.1; color: var(--c-figure-dark); letter-spacing: -0.03em; }
.kpi .name { font-size: 0.86rem; color: var(--c-panel-ink); }
.delta { font-family: var(--font-mono); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--c-positive); }
.delta.flat { color: var(--c-panel-mute); }
.delta.bad { color: var(--c-negative); }
.kpi .prev { font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-panel-mute); border-top: 1px solid var(--c-panel-rule); padding-top: 8px; margin-top: 4px; }
.kpi .why { font-size: 0.74rem; color: var(--c-panel-mute); line-height: 1.4; }
.headline { margin: -10px 0 26px; max-width: 70ch; font-size: var(--t-body); color: var(--c-panel-ink); border-left: 2px solid var(--c-panel-ink); padding-left: 14px; }
.headline b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-panel-mute); margin-bottom: 4px; }
.chosen { font-family: var(--font-mono); font-size: 0.7rem; color: var(--c-panel-mute); margin: 10px 0 0; }
.spark { width: 100%; height: 34px; display: block; margin-top: 4px; }
.spark .ln { fill: none; stroke: var(--c-figure-dark); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark .ar { fill: var(--c-figure-dark); opacity: 0.12; }
.spark .gd { stroke: var(--c-panel-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }

.cwv-head { margin: 44px 0 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 20px; }
.cwv-head h3 { margin: 6px 0 0; font-size: 1.15rem; letter-spacing: -0.02em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; border: 1px solid var(--c-panel-rule); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cwv th, .cwv td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-panel-rule); white-space: nowrap; }
.cwv tr:last-child td { border-bottom: 0; }
.cwv th { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-panel-mute); background: var(--c-panel-raised); }
.cwv td { font-size: 0.9rem; }
.cwv td .num { font-family: var(--font-mono); color: var(--c-figure-dark); }
.cwv td .target { font-family: var(--font-mono); font-size: 0.74rem; color: var(--c-panel-mute); }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; }
.pill.good { color: var(--c-positive); }
.pill.warn { color: var(--c-warn); }

/* ---------- Notes ---------- */
.notes .shell { padding-block: var(--space-band); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin-top: 28px; }
.col { border-top: 2px solid var(--c-ink); padding-top: 14px; min-width: 0; }
.col h3 { margin: 6px 0 12px; font-size: 1.1rem; letter-spacing: -0.02em; text-transform: uppercase; }
.col ul { list-style: none; margin: 0; padding: 0; }
.col li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 12px; padding-block: 11px; border-bottom: 1px solid var(--c-rule); font-size: 0.95rem; }
.col li .tag { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-soft); padding-top: 4px; }
.col li p { margin: 0; color: var(--c-ink); max-width: 56ch; }
.col li p span { display: block; color: var(--c-ink-mute); font-size: var(--t-small); }

/* ---------- Reports archive ---------- */
.archive { border-top: 1px solid var(--c-rule); }
.archive .shell { padding-block: var(--space-band); }
.archive .band-head { margin-bottom: 20px; }
.archive .note { margin: 6px 0 0; color: var(--c-ink-mute); font-size: var(--t-small); max-width: 52ch; }
.table-wrap.plain { border: 0; border-top: 2px solid var(--c-ink); }
.reports th, .reports td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--c-rule); vertical-align: middle; }
.reports th { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-ink-soft); }
.reports td { font-size: 0.92rem; }
.reports td.when { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
.reports td.title strong { display: block; font-weight: 600; }
.reports td.title span { font-size: var(--t-small); color: var(--c-ink-mute); }
.reports td.srcs { font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-ink-soft); }
.reports td.open { text-align: right; }
.reports tr.new td.title strong::after {
  content: "New"; margin-left: 8px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--c-ink); vertical-align: 2px;
}

/* ---------- Footer ---------- */
.foot-band { background: var(--c-paper-raised); border-top: 1px solid var(--c-ink); }
.foot-band .shell { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 32px; padding-block: 26px; }
.foot-band p { margin: 0; font-size: var(--t-small); color: var(--c-ink-mute); }
.contact { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-mono); font-size: 0.8rem; user-select: all; }
.contact span { user-select: text; }

@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro .shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .who .name { display: none; }
  .reports .srcs, .reports th.srcs { display: none; }
  .line { font-size: 0.74rem; }
}
@media (max-width: 420px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .brand .label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Portal additions ---------- */
.muted { color: var(--c-ink-soft); font-size: var(--t-small); }
.pill.poor { color: var(--c-negative); }
.admin-strip { background: var(--c-paper-raised); border-bottom: 1px solid var(--c-rule); }
.admin-strip .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-block: 9px; }
.admin-strip p { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-ink-mute); }
.admin-links { display: flex; flex-wrap: wrap; gap: 16px; }
.admin-links a { color: var(--c-ink); }
.intro .shell.single { grid-template-columns: minmax(0, 1fr); }
.intro.message .shell { grid-template-columns: minmax(0, 1fr); min-height: 46vh; align-content: center; }
.intro.login .shell { align-items: start; }
.login-form { display: grid; gap: 4px; }
.login-form .field { margin: 8px 0 0; display: grid; gap: 6px; }
.login-form label { font-family: var(--font-mono); font-size: 0.74rem; color: var(--c-ink-mute); }
.login-form input[type=text], .login-form input[type=password] {
  font: inherit; font-size: 1rem; padding: 11px 12px; border: 1px solid var(--c-ink); background: #fff; color: var(--c-ink); border-radius: 0; width: 100%;
}
.login-form .check label { display: flex; align-items: center; gap: 8px; }
.login-form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 16px 0 0; }
.login-form .actions a { font-size: var(--t-small); color: var(--c-ink-mute); }
.form-error { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--c-ink); background: var(--c-paper-raised); font-size: var(--t-small); }
.reports td.when strong { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.08em; }

/* ---------- Header: matches the 99creatix.com site header ---------- */
.top { background: var(--c-panel); color: var(--c-panel-ink); border-bottom: 1px solid var(--c-panel-rule); }
.top .shell { padding-block: 18px; }
.brand { align-items: center; }
.brand .logo { display: block; height: 32px; width: auto; }
.top .label { color: var(--c-panel-mute); }
.who .name { color: var(--c-panel-mute); }
.top .btn {
  background: var(--c-panel-ink); color: var(--c-ink); border-color: var(--c-panel-ink);
  font-family: var(--font-mono); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 16px;
}
.top .btn:hover { background: transparent; color: var(--c-panel-ink); }
@media (max-width: 420px) { .brand .logo { height: 26px; } }

.reports td.open { white-space: nowrap; }
.reports td.open .btn + .btn { margin-left: 8px; }

/* =========================================================================
   Dashboard app layout: sidebar, cards, charts.
   ========================================================================= */
body.app {
  --a-bg: #ECEDF0;
  --a-card: #FFFFFF;
  --a-line: #E1E3E8;
  --a-mute: #5D626C;
  --a-soft: #6E737D;
  --a-tint: #E8ECFF;
  --a-good: #0F7A55;
  --a-bad: #BF311C;
  --a-warn: #B86E00;
  --a-radius: 12px;
  background: var(--a-bg);
  color: var(--c-ink);
}
.app-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }

/* Sidebar */
.side { background: var(--c-panel); color: var(--c-panel-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 22px 14px; gap: 26px; }
.side-brand { display: grid; gap: 8px; padding: 0 10px; text-decoration: none; }
.side-brand img { height: 30px; width: auto; display: block; }
.side-brand span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-panel-mute); }
.side-nav { display: grid; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #B9BDC6; text-decoration: none; font-size: 0.92rem; transition: background 160ms var(--ease), color 160ms var(--ease); }
.side-nav a:hover { background: #181B21; color: var(--c-panel-ink); }
.side-nav a.on { background: #1B2030; color: #FFFFFF; box-shadow: inset 3px 0 0 var(--c-figure-dark); }
.side-nav .ic { width: 20px; height: 20px; flex: none; }
.side-foot { margin-top: auto; border-top: 1px solid var(--c-panel-rule); padding: 16px 10px 0; display: grid; gap: 4px; }
.side-foot p { margin: 0; }
.side-client { font-weight: 600; font-size: 0.9rem; }
.side-user { font-size: 0.78rem; color: var(--c-panel-mute); }
.side-out { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; color: #B9BDC6; text-decoration: none; font-size: 0.85rem; }
.side-out:hover { color: #fff; }
.side-out .ic { width: 18px; height: 18px; }

/* Main column */
.app-main { padding: 22px clamp(16px, 2.6vw, 34px) 30px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.admin-bar { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--a-mute); }
.admin-bar span { margin-right: auto; }
.admin-bar a { color: var(--c-ink); }
.app-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.app-top h1 { text-transform: none; font-weight: 700; margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.1; }
.app-top .sub { margin: 4px 0 0; color: var(--a-mute); font-size: 0.92rem; }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill-date, .abtn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 10px; font-size: 0.88rem; white-space: nowrap; }
.pill-date { background: var(--a-card); border: 1px solid var(--a-line); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.abtn { background: var(--a-card); border: 1px solid var(--a-line); color: var(--c-ink); text-decoration: none; font-weight: 600; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.abtn:hover { border-color: var(--c-ink); }
.abtn.primary { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.abtn.primary:hover { background: #262A31; }
.pill-date .ic, .abtn .ic { width: 18px; height: 18px; }

/* Contract chips, in the place of a filter bar */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; }
.chips > div { padding: 12px 18px; display: grid; gap: 2px; border-right: 1px solid var(--a-line); min-width: 0; }
.chips > div:last-child { border-right: 0; }
.chips span { font-size: 0.74rem; color: var(--a-soft); }
.chips b { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Cards */
.card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 20px 22px; min-width: 0; }
.card h2 { margin: 0 0 14px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; line-height: 1.3; }
.card .muted { margin: 0; }
.tile { width: 60px; height: 60px; flex: none; border-radius: 14px; background: var(--a-tint); color: var(--c-figure); display: grid; place-items: center; }
.tile .ic { width: 28px; height: 28px; }
.tile.sm { width: 38px; height: 38px; border-radius: 10px; }
.tile.sm .ic { width: 20px; height: 20px; }

.headline-card { display: flex; gap: 18px; align-items: flex-start; }
.headline-card h2 { margin-bottom: 6px; color: var(--a-mute); font-size: 0.86rem; font-weight: 500; }
.headline-card p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.5; max-width: 80ch; }

.kpi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px; }
.kpi-card { display: flex; gap: 18px; align-items: flex-start; }
.kpi-body { flex: 1; min-width: 0; }
.kpi-body h2 { color: var(--a-mute); font-size: 0.86rem; font-weight: 500; margin-bottom: 10px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 14px 12px; }
.kpi-row .m { display: grid; gap: 3px; min-width: 0; }
.kpi-row .ml { font-size: 0.8rem; color: var(--a-soft); line-height: 1.3; }
.kpi-row .mv { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.kpi-row .md { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; font-size: 0.76rem; }
.kpi-row .md em { font-style: normal; color: var(--a-soft); font-variant-numeric: tabular-nums; }
.info { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor; font-style: normal; font-size: 9px; line-height: 1; vertical-align: 1px; cursor: help; }
body.app .delta { font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; }
body.app .delta.up { color: var(--a-good); }
body.app .delta.bad { color: var(--a-bad); }
body.app .delta.flat { color: var(--a-soft); font-weight: 500; }

/* Performance over time */
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.card-head h2 { margin: 0; }
.metric-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--a-soft); }
.metric-pick select { font: inherit; font-size: 0.86rem; color: var(--c-ink); padding: 8px 32px 8px 12px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-card); }
.trend-card .legend { margin: 6px 0 4px; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--a-soft); }
.trend-card .legend i { width: 22px; height: 3px; border-radius: 2px; background: var(--c-figure); display: inline-block; }
.trend { width: 100%; height: auto; display: block; }
.trend .gd { stroke: #ECEEF2; stroke-width: 1; }
.trend .ax { font-size: 12px; fill: var(--a-soft); font-variant-numeric: tabular-nums; }
.trend .ar { fill: var(--c-figure); opacity: 0.08; }
.trend .ln { fill: none; stroke: var(--c-figure); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.trend .dt { fill: #fff; stroke: var(--c-figure); stroke-width: 2.5; }
.trend .vl { font-size: 13px; font-weight: 600; fill: var(--c-ink); font-variant-numeric: tabular-nums; }

/* Lower row */
.lower { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; align-items: start; }
.split-body { display: flex; align-items: center; gap: 18px; }
.donut { width: 150px; height: 150px; flex: none; }
.donut circle { fill: none; stroke-width: 26; }
.donut .s1 { stroke: var(--c-figure); }
.donut .s2 { stroke: #9DB0FF; }
.donut .dc { font-size: 30px; font-weight: 600; fill: var(--c-ink); font-variant-numeric: tabular-nums; }
.donut .dl { font-size: 13px; fill: var(--a-soft); }
.split-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.88rem; }
.split-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.split-legend .s1 { background: var(--c-figure); }
.split-legend .s2 { background: #9DB0FF; }
.split-legend b { margin-left: 6px; font-variant-numeric: tabular-nums; }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.mini > div { display: flex; align-items: center; gap: 10px; background: #F5F6F8; border-radius: 10px; padding: 10px 12px; }
.mini small { display: block; color: var(--a-soft); font-size: 0.74rem; }
.mini > div > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.mini small { flex-basis: 100%; }
.mini b { font-size: 1.3rem; font-weight: 500; margin-right: 6px; font-variant-numeric: tabular-nums; }

.rings { display: flex; gap: 22px; justify-content: center; margin-bottom: 14px; }
.ring { margin: 0; display: grid; justify-items: center; gap: 6px; }
.ring svg { width: 96px; height: 96px; }
.ring circle { fill: none; stroke-width: 8; }
.ring .bg { stroke: #EEF0F3; }
.ring .fg { stroke-linecap: round; }
.ring text { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ring.good .fg { stroke: #0CCE6B; } .ring.good text { fill: #0A8A4A; }
.ring.warn .fg { stroke: #FFA400; } .ring.warn text { fill: var(--a-warn); }
.ring.poor .fg { stroke: #FF4E42; } .ring.poor text { fill: var(--a-bad); }
.ring figcaption { font-size: 0.8rem; color: var(--a-soft); }
.speed { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.speed th { text-align: left; font-weight: 500; font-size: 0.74rem; color: var(--a-soft); padding: 6px 0; border-bottom: 1px solid var(--a-line); }
.speed td { padding: 8px 0; border-bottom: 1px solid #F0F1F4; }
.speed td + td, .speed th + th { text-align: right; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: #C5C9D1; }
.dot.good { background: #0CCE6B; } .dot.warn { background: #FFA400; } .dot.poor { background: #FF4E42; }
.fine { margin: 12px 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--a-soft); }

.rlist { list-style: none; counter-reset: r; margin: 0; padding: 0; }
.rlist li { counter-increment: r; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #F0F1F4; }
.rlist li::before { content: counter(r) "."; color: var(--a-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.rlist li:nth-child(even) { background: #FAFAFB; }
.rlist .rt { display: grid; gap: 2px; min-width: 0; }
.rlist .rt b { font-weight: 600; font-size: 0.92rem; }
.rlist .rt small { color: var(--a-soft); font-size: 0.76rem; }
.rlist li.new .rt small { color: var(--c-figure); }
.rlist .ra { display: flex; gap: 6px; }
.rlist .ra a { font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--c-ink); border: 1px solid var(--a-line); border-radius: 8px; padding: 6px 11px; }
.rlist .ra a:hover { border-color: var(--c-ink); }
.rlist li.new .ra a:first-child { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.app-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 6px; font-size: 0.8rem; color: var(--a-soft); }
.app-foot p { margin: 0; }
.app-foot .contact { display: flex; gap: 18px; font-family: var(--font-mono); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 10px 16px; }
  .side-brand { padding: 0; }
  .side-brand img { height: 24px; }
  .side-brand span { display: none; }
  .side-nav { order: 3; width: 100%; display: flex; overflow-x: auto; gap: 4px; }
  .side-nav a { padding: 8px 10px; white-space: nowrap; }
  .side-foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  .side-client, .side-user { display: none; }
  .side-out { margin: 0; }
  .chips > div { border-right: 0; border-bottom: 1px solid var(--a-line); }
}
@media (max-width: 480px) {
  .kpi-card, .headline-card { flex-direction: column; }
  .split-body { flex-direction: column; align-items: flex-start; }
}
.owed { margin: -6px 0 10px; font-size: 0.86rem; color: var(--a-mute); }
.owed b { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.paystat { align-self: center; font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #EEF0F3; color: var(--a-mute); }
.paystat.paid { background: #E3F5EC; color: var(--a-good); }
.paystat.overdue { background: #FBE7E4; color: var(--a-bad); }
.ilist li { grid-template-columns: 28px minmax(0, 1fr) auto; }
.side-nav { scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.stack { display: grid; gap: 18px; min-width: 0; }

/* ---------- Headline + figure cards, v2.1.1: more air, clearer hierarchy ---------- */
.headline-card { background: var(--c-panel); border-color: var(--c-panel); color: var(--c-panel-ink); padding: 26px 28px; gap: 22px; }
.headline-card .tile { background: #1B2030; color: var(--c-figure-dark); }
.headline-card h2 { color: var(--c-panel-mute); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 8px; }
.headline-card p { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: #FFFFFF; max-width: 62ch; }

.kpi-cards { grid-template-columns: minmax(0, 1fr); }
.kpi-card { padding: 24px 26px; gap: 22px; }
.kpi-body h2 { font-size: 0.92rem; font-weight: 600; color: var(--c-ink); margin-bottom: 16px; }
.kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 0; }
.kpi-row .m { gap: 0; padding: 2px 24px; border-left: 1px solid var(--a-line); }
.kpi-row .m:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.kpi-row .ml { min-height: 2.6em; font-size: 0.82rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpi-row .mv { font-size: clamp(1.9rem, 2.8vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; margin: 4px 0 10px; }
.kpi-row .md { display: grid; gap: 3px; justify-items: start; font-size: 0.8rem; }
.kpi-row .md em { font-size: 0.78rem; }

@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row .m:nth-child(4n + 1) { border-left: 1px solid var(--a-line); padding-left: 24px; }
  .kpi-row .m:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .kpi-card { padding: 20px; }
  .kpi-row .m { padding: 2px 14px; }
  .kpi-row .m:nth-child(2n + 1) { padding-left: 0; }
}

/* =========================================================================
   v2.3: client page rebuilt around the client's questions.
   ========================================================================= */
.app-top h1 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.app-top .sub { font-size: 0.98rem; }
.abtn { min-height: 44px; }

.block { display: grid; gap: 14px; }
.block-h { margin: 6px 0 0; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.block-h small { font-size: 0.82rem; font-weight: 400; color: var(--a-soft); }

/* The figures that matter */
.focus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card.focus { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.focus header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.focus .fl { font-size: 0.92rem; font-weight: 600; color: var(--c-ink); }
.focus .fs { font-size: 0.74rem; color: var(--a-soft); white-space: nowrap; }
.fv-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.focus .fv { font-size: clamp(2.2rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.focus .fd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.82rem; }
.focus .fd em { font-style: normal; color: var(--a-soft); font-variant-numeric: tabular-nums; }
.mt { display: grid; gap: 2px; min-height: 52px; }
.mini-trend { width: 100%; height: 40px; display: block; overflow: visible; }
.mini-trend polyline { fill: none; stroke: var(--c-figure); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mini-trend circle { fill: var(--c-figure); }
.mt-lbl { font-size: 0.74rem; color: var(--a-soft); }
.focus .fm { margin: 0; font-size: 0.92rem; line-height: 1.45; color: #2C3038; }
.focus .fn { margin: auto 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--a-mute); background: #F4F5F7; border-radius: 8px; padding: 8px 10px; }
.focus .fn b { color: var(--c-ink); font-weight: 600; }
body.app .delta.explained { color: var(--a-soft); font-weight: 600; }

details.more { padding: 0; }
details.more summary { cursor: pointer; list-style: none; padding: 16px 22px; font-weight: 600; font-size: 0.92rem; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary span { font-weight: 400; color: var(--a-soft); font-size: 0.84rem; }
details.more summary::after { content: "＋"; color: var(--a-soft); margin-left: 12px; }
details.more[open] summary::after { content: "−"; }
.ftable { width: calc(100% - 44px); margin: 0 22px 18px; border-collapse: collapse; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.ftable th { text-align: left; font-weight: 500; font-size: 0.78rem; color: var(--a-soft); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--a-line); }
.ftable td { padding: 10px 10px 10px 0; border-bottom: 1px solid #F0F1F4; vertical-align: top; }
.ftable td small { display: block; color: var(--a-soft); font-size: 0.78rem; margin-top: 2px; max-width: 46ch; }
.ftable .n { font-weight: 600; }

/* Work and opportunities */
.work-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.work h3, .opps h3 { margin: 0 0 10px; font-size: 0.86rem; font-weight: 600; color: var(--a-mute); text-transform: none; letter-spacing: 0; }
.hint { margin: -4px 0 10px; font-size: 0.84rem; color: var(--a-soft); line-height: 1.45; }
.wlist { list-style: none; margin: 0; padding: 0; }
.wlist li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid #F0F1F4; }
.wlist li:first-child { border-top: 0; }
.wlist .wt { font-size: 0.76rem; font-weight: 600; color: var(--c-figure); padding-top: 2px; font-variant-numeric: tabular-nums; }
.wlist.next .wt { color: var(--a-mute); }
.wlist p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.wlist p span { display: block; color: var(--a-soft); font-size: 0.82rem; margin-top: 2px; }

.olist, .mlist { list-style: none; margin: 0; padding: 0; }
.olist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F0F1F4; }
.olist li:first-child, .mlist li:first-child { border-top: 0; }
.oq { font-size: 0.92rem; font-weight: 500; min-width: 0; }
.oq small, .op small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--a-soft); margin-top: 2px; }
.op { text-align: right; flex: none; }
.pg { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #EEF0F3; color: var(--a-mute); }
.pg.p1 { background: #E3F5EC; color: var(--a-good); }
.pg.p2 { background: var(--a-tint); color: var(--c-figure); }
.mlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.2rem; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F0F1F4; }
.mp { font-size: 0.92rem; }
.mm { font-size: 0.86rem; color: var(--a-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm b { color: var(--c-ink); }
.mlist .delta { text-align: right; }

/* Reports + invoices, then speed / contract / lead */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.card h2 .owed-badge, .card h2 .paid-badge { margin-left: 8px; font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; vertical-align: 2px; }
.owed-badge { background: #FBE7E4; color: var(--a-bad); }
.paid-badge { background: #E3F5EC; color: var(--a-good); }
.rlist .ra a { min-height: 40px; display: inline-flex; align-items: center; }
.rlist .rt small { font-size: 0.8rem; }

.speed-line { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.55; }
.sc { display: inline-block; min-width: 2.2em; text-align: center; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #EEF0F3; }
.sc.good { background: #E3F5EC; color: #0A7A42; }
.sc.warn { background: #FFF1D6; color: var(--a-warn); }
.sc.poor { background: #FBE7E4; color: var(--a-bad); }
.speed-more summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--c-figure); min-height: 40px; display: flex; align-items: center; }
.speed td small { display: block; font-size: 0.74rem; color: var(--a-soft); }

.contract-card dl { margin: 0; display: grid; gap: 0; }
.contract-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #F0F1F4; }
.contract-card dl div:first-child { border-top: 0; }
.contract-card dt { color: var(--a-soft); font-size: 0.86rem; }
.contract-card dd { margin: 0; font-weight: 600; font-size: 0.9rem; text-align: right; }

.lead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.lead img, .lead .avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; }
.lead .avatar { display: grid; place-items: center; background: var(--c-panel); color: var(--c-figure-dark); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em; }
.lead b { display: block; font-size: 1rem; }
.lead small { color: var(--a-soft); font-size: 0.84rem; }
.lead-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.lead-contact { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.82rem; color: var(--a-mute); font-variant-numeric: tabular-nums; }

.side-nav a { position: relative; }
.side-nav .badge { margin-left: auto; font-style: normal; font-size: 0.7rem; font-weight: 700; background: #E5484D; color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; }

@media (max-width: 1200px) {
  .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.app { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .side-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; width: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--c-panel); border-top: 1px solid var(--c-panel-rule); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); overflow: visible; }
  .side-nav a { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 0.72rem; border-radius: 8px; justify-content: center; min-height: 52px; }
  .side-nav a.on { box-shadow: none; background: #1B2030; }
  .side-nav .badge { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; min-width: 16px; height: 16px; font-size: 0.62rem; }
  .side-out { min-height: 44px; padding: 0 4px; }
  .pair, .work-cols, .trio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .focus-grid { grid-template-columns: minmax(0, 1fr); }
  .top-actions { width: 100%; }
  .top-actions .abtn { flex: 1; justify-content: center; }
  .ftable th:nth-child(2), .ftable td:nth-child(2) { display: none; }
}
.block-h { text-transform: none; }
.mt.none { min-height: 0; }

/* ---------- v2.4: decisions, progress, rankings, AI, library, rating, glossary ---------- */
.decisions { border-left: 4px solid #E5484D; }
.decisions h2 .count { margin-left: 8px; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 0.74rem; vertical-align: 2px; }
.dlist { list-style: none; margin: 0; padding: 0; }
.dlist li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 12px 0; border-top: 1px solid #F0F1F4; }
.dlist li:first-child { border-top: 0; }
.dlist li.is-done { opacity: 0.6; }
.dlist li.is-done b { text-decoration: line-through; }
.dtext { min-width: 0; flex: 1 1 320px; }
.dtext b { display: block; font-size: 0.95rem; }
.dtext p { margin: 3px 0 0; font-size: 0.86rem; color: var(--a-mute); line-height: 1.45; max-width: 70ch; }
.dtext small { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--a-good); }
.dactions { display: flex; gap: 8px; align-items: center; }
.dactions form { margin: 0; }
.dactions .abtn { cursor: pointer; font: inherit; font-weight: 600; font-size: 0.88rem; }

.stable { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.stable th { text-align: left; font-weight: 500; font-size: 0.76rem; color: var(--a-soft); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--a-line); }
.stable td { padding: 10px 8px 10px 0; border-bottom: 1px solid #F0F1F4; }
.stable .n { white-space: nowrap; }
.stable .muted { color: var(--a-soft); }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tlist li { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem; gap: 6px 12px; align-items: center; }
.tlist .tl { display: grid; gap: 2px; }
.tlist .tl b { font-size: 0.92rem; }
.tlist .tl span { font-size: 0.8rem; color: var(--a-soft); font-variant-numeric: tabular-nums; }
.tlist .bar { grid-column: 1; height: 10px; border-radius: 999px; background: #EEF0F3; overflow: hidden; }
.tlist .bar i { display: block; height: 100%; background: var(--c-figure); border-radius: 999px; transition: width 600ms var(--ease); }
.tlist .pct { grid-column: 2; grid-row: 1 / 3; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-figure); }
.tlist li.hit .bar i, .tlist li.hit .pct { background: var(--a-good); color: var(--a-good); }

.rktable { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.rktable th { text-align: left; font-weight: 500; font-size: 0.76rem; color: var(--a-soft); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.rktable td { padding: 10px 10px 10px 0; border-bottom: 1px solid #F0F1F4; vertical-align: middle; }
.rktable .q { font-weight: 500; }
.rktable .q small { display: block; font-weight: 400; font-size: 0.76rem; color: var(--a-soft); }
.rktable .n { white-space: nowrap; }

.ai-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ai-big .fv { font-size: 2.6rem; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ai-big .fd { font-size: 0.84rem; display: flex; gap: 8px; }
.ai-big .fd em { font-style: normal; color: var(--a-soft); }
.aivis .fm { margin: 8px 0 0; font-size: 0.92rem; color: #2C3038; max-width: 46ch; }
.aivis .fn { margin: 12px 0 0; font-size: 0.82rem; color: var(--a-mute); background: #F4F5F7; border-radius: 8px; padding: 8px 10px; }
.aivis .fn b { color: var(--c-ink); }
.bars.light { gap: 10px; }
.bars.light li { grid-template-columns: minmax(0, 1fr) 4rem; font-size: 0.86rem; }
.bars.light .bl { color: var(--c-ink); }
.bars.light .bt { grid-column: 1; grid-row: 2; background: #EEF0F3; height: 8px; border-radius: 999px; overflow: hidden; }
.bars.light .bt i { background: var(--c-figure); border-radius: 999px; }
.bars.light .bv { grid-row: 1 / 3; color: var(--c-ink); font-weight: 600; font-family: var(--font-display); }

.lib-stat { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 400; color: var(--a-soft); }
.llist { list-style: none; margin: 0; padding: 0; }
.llist li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid #F0F1F4; }
.llist li:first-child { border-top: 0; }
.llist a { color: var(--c-ink); text-decoration: none; font-size: 0.9rem; min-width: 0; }
.llist a:hover { text-decoration: underline; }
.llist span { flex: none; font-size: 0.78rem; color: var(--a-soft); font-variant-numeric: tabular-nums; }
.ltag { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-right: 8px; background: #EEF0F3; color: var(--a-mute); }
.ltag.new { background: #E3F5EC; color: var(--a-good); }
.ltag.updated { background: var(--a-tint); color: var(--c-figure); }
.lib-more summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--c-figure); min-height: 40px; display: flex; align-items: center; }

.rate { margin-top: 14px; padding-top: 14px; border-top: 1px solid #F0F1F4; }
.rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.88rem; }
.rate-form .thumbs { display: flex; gap: 6px; }
.rate-form .thumbs button { font-size: 1.2rem; line-height: 1; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--a-line); background: #fff; cursor: pointer; }
.rate-form .thumbs button:hover { border-color: var(--c-ink); }
.rate-form input[type=text] { flex: 1 1 220px; min-height: 44px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 10px; font: inherit; font-size: 0.88rem; }
.rated { margin: 0; font-size: 0.88rem; color: var(--a-good); }

.term { position: relative; cursor: help; outline: none; }
.term i { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; border: 1px solid #B8BCC4; color: var(--a-soft); font-style: normal; font-size: 9px; line-height: 1; vertical-align: 1px; }
.term .tip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: min(300px, 80vw); background: var(--c-panel); color: var(--c-panel-ink); font-size: 0.8rem; font-weight: 400; line-height: 1.45; padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.term:hover .tip, .term:focus .tip, .term:focus-within .tip { display: block; }
.term:focus-visible { box-shadow: 0 0 0 2px var(--c-figure); border-radius: 4px; }
.glossary { padding: 0; }
.glossary summary { cursor: pointer; padding: 16px 22px; font-weight: 600; font-size: 0.92rem; min-height: 44px; display: flex; align-items: center; }
.glossary dl { margin: 0; padding: 0 22px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px 28px; }
.glossary dt { font-weight: 600; font-size: 0.88rem; }
.glossary dd { margin: 2px 0 0; font-size: 0.84rem; color: var(--a-mute); line-height: 1.45; }

@media (max-width: 900px) { .pair.progress { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rktable th:nth-child(5), .rktable td:nth-child(5) { display: none; } }
.bars.light { list-style: none; margin: 0; padding: 0; display: grid; }
.bars.light li { display: grid; align-items: center; gap: 4px 12px; }
.bars.light .bt i { display: block; height: 100%; }

/* ---------- v2.5: tabs, compact overview ---------- */
body.app.js [data-tab-panel] { display: none; }
body.app.js [data-tab-panel].on { display: grid; gap: 18px; }
[data-tab-panel] { display: grid; gap: 18px; }
.focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card.focus { padding: 18px 20px; }
.focus .fv { font-size: clamp(2rem, 2.6vw, 2.5rem); }
.focus .fm { order: 3; }
.focus .mt { order: 4; margin-top: auto; min-height: 0; }
.focus .fn { order: 5; margin-top: 8px; }
.overview-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; align-items: stretch; }
.latest-card .rt { display: grid; gap: 2px; margin-bottom: 12px; }
.latest-card .rt b { font-size: 0.95rem; }
.latest-card .rt small { color: var(--a-soft); font-size: 0.8rem; }
.latest-card .ra { display: flex; gap: 8px; flex-wrap: wrap; }
.latest-card .ra a { font-size: 0.84rem; font-weight: 600; text-decoration: none; color: var(--c-ink); border: 1px solid var(--a-line); border-radius: 8px; padding: 9px 12px; min-height: 40px; display: inline-flex; align-items: center; }
.latest-card .ra a:first-child { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.latest-card .rate { margin-top: 12px; }
.rate-form { font-size: 0.84rem; }
.tlist li.fresh .bar { display: none; }
.tlist li.fresh .pct { display: none; }
.tlist li.fresh .tl span { color: var(--a-mute); }
.rktable tr.quiet td { color: var(--a-soft); }
.more-searches summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--c-figure); min-height: 40px; display: flex; align-items: center; }
.owed-badge.due { background: #EEF0F3; color: var(--a-mute); }
.ltag.clicks { background: var(--a-tint); color: var(--c-figure); }
.llist span b.clicks { margin-right: 8px; }
.tab-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.tab-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.tab-head p { margin: 0; color: var(--a-soft); font-size: 0.9rem; }
.term .tip a { color: var(--c-figure-dark); font-weight: 600; white-space: nowrap; }
.glossary[open] summary, .glossary summary { list-style: none; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .focus-grid { grid-template-columns: minmax(0, 1fr); } }
.tab-head h1 { text-transform: none; }
.side-nav .badge.due { background: #4A5061; }
@media (max-width: 900px) {
  .side-nav { grid-template-columns: repeat(5, 1fr); }
  .side-nav a { font-size: 0.68rem; padding: 6px 2px; }
}
@media (max-width: 560px) {
  .rktable th:nth-child(5), .rktable td:nth-child(5), .rktable th:nth-child(6), .rktable td:nth-child(6) { display: none; }
  .rktable .q small { display: none; }
}
.pg { white-space: nowrap; }
.glossary { padding: 20px 22px; }
.glossary dl { padding: 0; margin-top: 4px; }
.rank .table-wrap { border: 0; }
.rktable th:first-child, .rktable td:first-child { padding-left: 0; }