/* Clode design system (spec §11). Warm brand identity, cool trend
   semantics, tabular figures, self-hosted brand fonts. Top-tier, calm, precise. */

/* ── Fonts (self-hosted; CSP 'self') ──────────────────────────────────────── */

:root {
  --rose: #DD7382; --mauve: #955D8C; --plum: #6A4A6E;
  --plum-700: #563b5a;
  --grad: linear-gradient(135deg, #DD7382 0%, #B67696 48%, #955D8C 100%);
  --ink: #2A2230; --blush: #ffffff; --mute: #6E6473; --border: #E6E3DE;
  --surface: #ffffff; --surface-2: #F7F6F3;
  /* Rose accent surfaces — used for full-bleed accent SECTIONS on the white canvas,
     never for the page background itself. */
  --tint: #FCF5F8; --tint-line: #F3E2EB; --tint-border: #EAC9D6;
  --rise: #1A9E84; --rise-soft: rgba(26,158,132,.12);
  --fall: #D23A57; --fall-soft: rgba(210,58,87,.12);
  --plum-soft: rgba(106,74,110,.10);
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --sh-sm: 0 1px 2px rgba(42,34,48,.05);
  --sh: 0 1px 2px rgba(42,34,48,.04), 0 8px 24px rgba(42,34,48,.07);
  --sh-lg: 0 2px 4px rgba(42,34,48,.04), 0 18px 50px rgba(42,34,48,.12);
  --t: 160ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--ink); background: var(--blush);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .brand-word { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
h1 { font-size: 2rem; margin: 0 0 .4rem; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
h3 { font-size: 1.02rem; }
a { color: var(--plum); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--mauve); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--mute); }
.tnum { font-variant-numeric: tabular-nums; }
.dim { opacity: .6; }
code { font-family: var(--font-mono); background: var(--plum-soft); padding: .08rem .35rem; border-radius: 6px; font-size: .88em; }
::selection { background: rgba(149,93,140,.22); }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; border-radius: 4px; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.container.narrow { max-width: 460px; }
.container.wide { max-width: 1320px; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1.1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.topbar .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand .dot { color: var(--mute); }
.brand svg { display: block; transition: transform var(--t); }
/* A lift, not a tilt: the logo is a word now, and a word tipped 3deg reads as a glitch. */
.brand:hover svg { transform: translateY(-1px); }
.nav { display: flex; gap: .25rem; align-items: center; }
.nav-link {
  position: relative; color: var(--ink); font-weight: 500; font-size: .92rem;
  padding: .46rem .72rem; border-radius: 9px; line-height: 1.3;
  transition: color var(--t), background var(--t);
}
.nav-link:hover { color: var(--plum); background: var(--tint); }
.nav-link[aria-current="page"] { color: var(--plum); font-weight: 600; }
/* gradient underline marks the page you're on */
.nav-link[aria-current="page"]::after {
  content: ''; position: absolute; left: .72rem; right: .72rem; bottom: .16rem;
  height: 2px; border-radius: 2px; background: var(--grad);
}
.nav-sep { width: 1px; height: 20px; background: var(--border); margin: 0 .5rem; flex: none; }
.nav .btn { margin-left: .25rem; }

/* ── Mobile menu (no JS; same links, collapsed) ───────────────────────────── */
.nav-burger { display: none; position: relative; }
.nav-burger > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  transition: border-color var(--t), background var(--t), color var(--t);
}
.nav-burger > summary::-webkit-details-marker { display: none; }
.nav-burger > summary::marker { content: ''; }
.nav-burger > summary:hover,
.nav-burger[open] > summary { border-color: var(--tint-border); background: var(--tint); color: var(--plum); }
.nav-drop {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60; min-width: 208px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-lg); padding: .4rem;
  animation: lang-pop .14s cubic-bezier(.2,0,0,1);
}
.nav-drop a:not(.btn) {
  display: block; padding: .5rem .62rem; border-radius: 8px;
  color: var(--ink); font-weight: 500; font-size: .9rem;
  transition: background var(--t), color var(--t);
}
.nav-drop a:not(.btn):hover { background: var(--tint); color: var(--plum); }
.nav-drop a[aria-current="page"]:not(.btn) { background: var(--tint); color: var(--plum); font-weight: 600; }
.nav-drop hr { margin: .4rem .35rem; border: none; border-top: 1px solid var(--border); }
.nav-drop .btn { width: 100%; justify-content: center; margin-top: .35rem; }

@media (max-width: 720px) {
  .nav { display: none; }
  .nav-burger { display: block; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--r-sm); padding: .55rem .95rem; border: 1px solid transparent; text-decoration: none; line-height: 1; white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t), color var(--t); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--plum); color: #fff; box-shadow: 0 1px 2px rgba(106,74,110,.4), 0 6px 16px rgba(106,74,110,.22); }
.btn-primary:hover { background: var(--plum-700); color: #fff; box-shadow: 0 2px 4px rgba(106,74,110,.4), 0 10px 22px rgba(106,74,110,.28); }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(149,93,140,.32); }
.btn-grad:hover { color: #fff; filter: brightness(1.04); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--mauve); color: var(--ink); background: var(--surface-2); }
.btn-danger { background: var(--surface); color: var(--fall); border-color: var(--border); }
.btn-danger:hover { border-color: var(--fall); background: var(--fall-soft); }
.btn-sm { padding: .35rem .65rem; font-size: .85rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.15rem 1.25rem; box-shadow: var(--sh-sm); }
.card.pad-lg { padding: 1.5rem 1.6rem; }
a.card, .card.link { transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
a.card:hover, .card.link:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: #DBD6CE; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .8rem; }
.card-head h2 { margin: 0; }

/* ── KPI tiles ────────────────────────────────────────────────────────────── */
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--sh-sm); position: relative; overflow: hidden; }
.kpi .label { color: var(--mute); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kpi .value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; margin: .2rem 0; letter-spacing: -.02em; }
.kpi .foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* ── Deltas / trend pills ─────────────────────────────────────────────────── */
.delta { font-weight: 600; font-size: .82rem; display: inline-flex; align-items: center; gap: .22rem; font-variant-numeric: tabular-nums; padding: .12rem .42rem; border-radius: 999px; }
.delta.rise { color: var(--rise); background: var(--rise-soft); }
.delta.fall { color: var(--fall); background: var(--fall-soft); }
.delta.flat { color: var(--mute); background: rgba(137,126,140,.1); }
.delta.bare { background: none; padding: 0; }

/* ── Charts ───────────────────────────────────────────────────────────────── */
.spark { display: inline-block; vertical-align: middle; }
.chart { width: 100%; height: auto; display: block; }
.bars { width: 100%; height: auto; }
.donut-total { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; fill: var(--ink); }
.axis-label { fill: var(--mute); font-size: 10px; font-family: var(--font-body); }
.legend { display: flex; flex-direction: column; gap: .4rem; font-size: .88rem; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: .45rem; vertical-align: -1px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data th, .data td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--border); }
.data thead th { color: var(--mute); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; position: sticky; top: 62px; background: var(--surface); z-index: 1; }
.data th.num, .data td.num { text-align: right; }
.data tbody tr { transition: background var(--t); }
.data tbody tr:hover { background: var(--surface-2); }
.data td.obj { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data th a { color: var(--mute); display: inline-flex; gap: .2rem; }
.data th a:hover, .data th a.active { color: var(--plum); }

/* ── Segmented control / pills / badges ───────────────────────────────────── */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.seg a, .seg button { padding: .32rem .72rem; color: var(--mute); font-weight: 600; font-size: .84rem; border-radius: 999px; border: none; background: none; cursor: pointer; transition: background var(--t), color var(--t); }
.seg a.active, .seg button.active { background: var(--plum); color: #fff; }
.seg a:hover:not(.active) { color: var(--ink); }
.tag { display: inline-block; padding: .14rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--plum-soft); color: var(--plum); }
.tag.demo { background: var(--grad); color: #fff; }
.badge { font-size: .72rem; color: var(--mute); border: 1px solid var(--border); border-radius: 999px; padding: .12rem .55rem; font-weight: 500; }
.badge.solid { background: var(--surface-2); }
.dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--rise); } .dot-err { background: var(--fall); } .dot-idle { background: var(--mute); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: .95rem; }
.field label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: .3rem; color: var(--ink); }
.input, select.input, textarea.input { width: 100%; font: inherit; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--ink); transition: border-color var(--t), box-shadow var(--t); }
.input::placeholder { color: #b6abbb; }
.input:focus { outline: none; border-color: var(--mauve); box-shadow: 0 0 0 3px rgba(149,93,140,.16); }
.input.mono { font-family: var(--font-mono); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23897E8C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem; }
.alert { padding: .65rem .85rem; border-radius: var(--r-sm); font-size: .9rem; margin-bottom: .9rem; }
.alert.error { background: var(--fall-soft); color: var(--fall); border: 1px solid rgba(210,58,87,.25); }
.alert.info { background: var(--plum-soft); color: var(--plum); border: 1px solid var(--border); }

/* ── Marketing hero ───────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--grad); color: #fff; padding: 5.5rem 0 5rem; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% -10%, rgba(255,255,255,.28), transparent 60%); pointer-events: none; }
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.7rem); color: #fff; line-height: 1.03; font-weight: 700; }
.hero p.lede { font-size: 1.22rem; max-width: 40ch; opacity: .96; }
.hero .cta { margin-top: 1.7rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.hero .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.42); backdrop-filter: blur(4px); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ── Auth split layout ────────────────────────────────────────────────────── */
/* Form first, in the DOM and on the screen. The decorative panel used to come first in
   both, which put a screen reader through four marketing bullets before reaching the
   thing the page exists for. It is now second in source order and sits on the right, and
   it keeps the slightly wider column it always had. */
/* Fill whatever the header leaves, without naming its height. The old rule subtracted a
   hardcoded 74px from the viewport; the header actually renders 75, so the gradient panel
   was a pixel short of the fold at every desktop width. A flex column has no number in it
   to go stale the next time the header changes. */
body:has(.auth-wrap) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(.auth-wrap) > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body:has(.auth-wrap) > main > .auth-wrap { flex: 1 0 auto; }
.auth-wrap { display: grid; grid-template-columns: 1fr 1.05fr; }
.auth-brand { background: var(--grad); color: #fff; padding: 3rem 3.2rem; display: flex; flex-direction: column; position: relative; overflow: hidden; }
/* The pitch takes the free space and centres inside it; the small print stays on the
   floor. `space-between` did that job while a logo was the third child — with the logo
   gone it left a hole the height of the panel between the bullets and the footnote. */
.auth-brand > div:first-of-type { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-brand::after { content: ''; position: absolute; inset: 0; background: radial-gradient(100% 70% at 90% 0%, rgba(255,255,255,.25), transparent 55%); }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand h2 { color: #fff; font-size: 2rem; max-width: 16ch; }
.auth-brand .feats { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .85rem; }
.auth-brand .feats li { display: flex; gap: .6rem; align-items: flex-start; opacity: .95; }
.auth-brand .feats .ic { flex: none; margin-top: 2px; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-panel .inner { width: 100%; max-width: 380px; }
@media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; } .auth-brand { display: none; } }

/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 3rem 1.25rem; color: var(--mute); }
.empty .ic { color: var(--mauve); margin-bottom: .5rem; }
.empty h2 { color: var(--ink); }

/* ── Page header + subnav ─────────────────────────────────────────────────── */
.page-head { padding: 1.6rem 0 .6rem; }
.subnav { display: flex; gap: .15rem; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; flex-wrap: wrap; }
.subnav a { padding: .6rem .9rem; color: var(--mute); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t), border-color var(--t); }
.subnav a.active { color: var(--plum); border-bottom-color: var(--plum); }
.subnav a:hover { color: var(--ink); }

/* ── Pivot table (analytical board) ───────────────────────────────────────── */
.pivot-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); max-height: 70vh; }
.pivot { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: .9rem; min-width: 100%; }
.pivot th, .pivot td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; }
.pivot thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--mute); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; text-align: right; }
.pivot thead th.corner { left: 0; z-index: 3; text-align: left; }
.pivot tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 600; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.pivot td { text-align: right; color: var(--ink); }
.pivot .total th, .pivot .total td, .pivot td.total, .pivot th.total { font-weight: 700; background: var(--surface-2); }
.pivot tbody tr:hover td, .pivot tbody tr:hover th { background: var(--plum-soft); }
.pivot .cell { position: relative; }
.pivot tr.subtotal > th { font-weight: 700; }
.pivot tr.subtotal > td { font-weight: 600; color: var(--plum); }
.pv-toggle { border: none; background: var(--surface-2); color: var(--plum); width: 16px; height: 16px; line-height: 1; border-radius: 4px; cursor: pointer; font-size: .6rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t); }
.pv-toggle:hover { background: var(--plum-soft); }
.pv-leaf { width: 16px; display: inline-block; }

.controls { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.controls .field { margin: 0; min-width: 150px; }
.controls .field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); margin-top: 3.5rem; padding: 2.2rem 0; color: var(--mute); font-size: .9rem; }
.footer .inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* The sign-in screens' footer links. They sit in a `.nav`, a class the old top bar also used,
   and that bar's phone rule (`.nav { display: none }` at 720px and below, above) outlived it
   and hid this row on every phone: Privacy, Terms and the language picker simply were not
   there at 390px. Named through the footer so it outranks that rule at any width, and given
   its own spacing, since the bar's .25rem gap was written for padded buttons, not bare links.
   Wraps, because it now also carries Cookies and Cookie settings. */
.footer .nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; }
/* The picker's menu opens up and to the left of it (anchored to its right edge, see
   .lang-menu below), so the picker keeps to the right end of this row: once the row wraps on
   a phone it would otherwise start the next line at the left edge, and its menu would open
   90px off the screen. On a wide screen the row is only as wide as its links, so this adds
   no gap there. */
.footer .nav .lang-dd { margin-left: auto; }

/* ── Grouping editor ──────────────────────────────────────────────────────── */
.group-block { border: 1px solid var(--border); border-radius: var(--r); padding: .9rem; background: var(--surface); box-shadow: var(--sh-sm); }
.group-block .ghead { display: flex; gap: .5rem; align-items: center; margin-bottom: .55rem; flex-wrap: wrap; }
.rule-row { display: grid; grid-template-columns: 150px 1fr auto auto; gap: .45rem; margin-bottom: .45rem; align-items: center; }
.preview-count { font-weight: 700; color: var(--plum); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .rule-row { grid-template-columns: 1fr; } }

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

/* ── i18n language dropdown (footer only) ─────────────────────────────────── */
.lang-dd { position: relative; display: inline-block; margin-left: .5rem; vertical-align: middle; }
.lang-dd > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .62rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: .84rem; font-weight: 500; line-height: 1.3;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary::marker { content: ''; }
.lang-dd > summary:hover,
.lang-dd[open] > summary { border-color: var(--tint-border); background: var(--tint); color: var(--plum); }
.lang-caret { transition: transform var(--t); }
.lang-dd[open] .lang-caret { transform: rotate(180deg); }

/* opens UPWARD — it lives in the footer */
.lang-menu {
  position: absolute; bottom: calc(100% + .5rem); right: 0; z-index: 60;
  min-width: 218px; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-lg); padding: .35rem;
  animation: lang-pop .14s cubic-bezier(.2,0,0,1);
}
@keyframes lang-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .9rem;
  padding: .44rem .6rem; border-radius: 8px; white-space: nowrap;
  font-size: .87rem; color: var(--ink); transition: background var(--t), color var(--t);
}
.lang-opt:hover { background: var(--tint); color: var(--plum); }
.lang-opt.is-active { background: var(--tint); color: var(--plum); font-weight: 600; }
.lang-opt .lang-code { font-family: var(--font-mono); font-size: .68rem; color: var(--mute); letter-spacing: .04em; }
.lang-opt:hover .lang-code, .lang-opt.is-active .lang-code { color: var(--plum); }
.lang-tick { flex: none; color: var(--plum); }
.lang-sep { margin: .38rem .35rem; border: none; border-top: 1px solid var(--border); }
/* NO `left: 0` OVERRIDE BELOW 600px.
   There used to be one, and it assumed the trigger sat at the far left of its own line —
   which it did, only because the footer's bottom row carried a long copyright sentence that
   forced it to wrap. The sentence was removed for being clutter, the row stopped wrapping,
   the trigger moved to the right edge, and a 218px panel anchored to its LEFT edge ran 97px
   off a 390px screen. Anchoring to the right edge is the one choice that cannot overflow the
   side the panel opens from; the width cap keeps the other side inside a narrow viewport
   however the row happens to lay out. */
.lang-menu { max-width: min(218px, calc(100vw - 1.5rem)); }

/* ── Google sign-in button + "or" divider (auth pages) ────────────────────── */
.btn-google { background: #fff; border: 1px solid var(--border-strong, #D8D3CC); color: var(--ink, #2A2230); font-weight: 600; }
.btn-google:hover { background: var(--surface-2, #F7F6F3); border-color: var(--mute, #6E6473); }
.auth-or { display: flex; align-items: center; gap: .8rem; color: var(--mute, #6E6473); font-size: .82rem; margin: 1rem 0 .2rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border, #E6E3DE); }
.alert.success { background: rgba(26,158,132,.12); color: #137a66; border: 1px solid transparent; }

/* ---------- one-time code entry ----------
   Six digits read as a group, not as a word: tabular figures so the field does not shift
   while typing, and wide spacing so a mistyped digit is visible before submitting.
   Lives here rather than in the cabinet theme because the sign-in pages load this sheet. */
.code-in { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px; letter-spacing: .18em; text-align: center;
  font-variant-numeric: tabular-nums; padding: 12px 14px; }
.code-in--digits { letter-spacing: .35em; text-indent: .35em; }