/* KunaiKash snapshot pages, "SNAPSHOT-DIENSTREGELING" visual world.
   Japanese station signage and departure boards (JR grammar): a matte
   near-black platform ground, one white station-name band with a thick
   magenta line-rule opening every page, and every section framed as a
   board. KUNAI is the K line (magenta, binding brand anchor), ZOE is the
   Z line (cyan). Statuses are service classes: glyph plus label, color
   never the sole signal. Signage voice: Barlow / Barlow Condensed.
   All amounts, addresses, and tabular data: JetBrains Mono.
   No glow, no atmosphere: signage is matte and disciplined.
   Legacy CSS variable names are kept as a compatibility API: inline
   styles and JS-generated markup reference them. */

/* ---- fonts (self-hosted, OFL) ---- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-var.woff2') format('woff2');
}

:root {
  --bg:         #0d0d0f;
  --bg-card:    #131316;
  --bg-card-2:  #17171b;
  --bg-inset:   #101013;
  --line:       #34343c;
  --line-soft:  #222228;
  --fg:         #f5f4f0;
  --fg-muted:   #9a9aa4;
  --fg-dim:     #85858f;
  --accent:     #e100ff;
  --accent-2:   #9a07ad;
  --accent-soft:rgba(225, 0, 255, 0.12);
  --cyan:       #22d3ee;
  --cyan-soft:  rgba(34, 211, 238, 0.10);
  --gold:       #ffd23f;
  --gold-soft:  rgba(255, 210, 63, 0.10);
  --green:      #58e88a;
  --green-soft: rgba(88, 232, 138, 0.10);
  --amber:      #ffb347;
  --amber-soft: rgba(255, 179, 71, 0.10);
  --red:        #ff5470;
  --red-soft:   rgba(255, 84, 112, 0.10);
  --plate:      #f5f4f0;
  --ink-on-plate: #101013;

  --font-sign: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-sign-cond: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Geometric service-class glyphs, painted with currentColor via mask. */
  --gl-square:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><rect x="1" y="1" width="6" height="6" fill="black"/></svg>');
  --gl-hollow:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path fill="black" fill-rule="evenodd" d="M1 1h6v6H1z M2.5 2.5h3v3h-3z"/></svg>');
  --gl-diamond: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><rect x="1.6" y="1.6" width="4.8" height="4.8" transform="rotate(45 4 4)" fill="black"/></svg>');
  --gl-cross:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path fill="black" d="M1.4 0.2 4 2.8 6.6 0.2 7.8 1.4 5.2 4 7.8 6.6 6.6 7.8 4 5.2 1.4 7.8 0.2 6.6 2.8 4 0.2 1.4z"/></svg>');
  --gl-play:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path fill="black" d="M1.5 0.8 7 4 1.5 7.2z"/></svg>');
  --gl-ext:     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path fill="black" d="M3.4 0.6h4v4H6.2V2.7L3 5.9 1.9 4.8l3.2-3.2H3.4z M0.6 2.2h1.6v1.2H1.8v3h3v-0.4h1.2v1.6H0.6z"/></svg>');
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

html, body {
  margin: 0; padding: 0;
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sign);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; }
code { font-family: var(--font-mono); font-size: 0.92em; }

/* Browser surfaces carry the design too. */
::selection { background: var(--accent); color: var(--ink-on-plate); }
input, textarea { caret-color: var(--accent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The old ambient element: the platform is matte, so it carries nothing. */
.bg-grid { display: none; }

.wrap {
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 32px;
  position: relative;
  z-index: 1;
}

.input-row, .lookup-form, .input-row > * { min-width: 0; }

/* ---- station-name band ---- */
body > header {
  background: var(--plate);
  color: var(--ink-on-plate);
  border-bottom: 6px solid var(--accent);
}
body > header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 15px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* Brand logo on the station band; the blue-wordmark asset is the
   light-surface variant, logo-dark.png is the dark-surface variant. */
.brand h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand h1 a { display: block; }
.brand-logo { display: block; height: 40px; width: auto; }
.brand-page {
  font-family: var(--font-sign);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-on-plate);
  white-space: nowrap;
}
.brand-page .muted {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #55555c;
  margin-left: 6px;
}
.foot-close { flex-wrap: wrap; row-gap: 12px; padding-top: 8px; }
.foot-close .foot-logo {
  flex-basis: 100%;
  height: 30px;
  width: 140px;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0.85;
}

/* The line badge: K for KUNAI, Z on the ZOE detail page. */
.logo-dot {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: 16px;
}
.logo-dot::after { content: "K"; }
.logo-dot-kunai { background: var(--accent); }
.logo-dot-zoe { background: var(--cyan); color: #06282e; }
.logo-dot-zoe::after { content: "Z"; }
.brand h1 {
  font-family: var(--font-sign-cond);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink-on-plate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand h1 .muted {
  font-family: var(--font-sign);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #55555c;
  margin-left: 8px;
  vertical-align: 3px;
}
body > header .today {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 12px; gap: 2px;
  flex: 0 0 auto;
  color: #55555c;
}
body > header .today .label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
body > header .today .value {
  color: var(--ink-on-plate);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.logout-link {
  color: #55555c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.logout-link:hover { color: var(--accent-2); }

/* Site nav riding on the white band (public pages). */
body > header .site-nav {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
body > header .site-nav a {
  font-family: var(--font-sign);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #55555c;
  padding: 9px 14px;
  border: 1px solid #d4d3cc;
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
body > header .site-nav a:hover { color: var(--ink-on-plate); border-color: #85858f; }
body > header .site-nav a.active {
  background: var(--ink-on-plate);
  border-color: var(--ink-on-plate);
  color: var(--plate);
}

/* ---- board-to-board navigation (admin, on the platform) ---- */
.token-nav {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}
.token-nav a {
  font-family: var(--font-sign);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.token-nav a:hover {
  color: var(--fg);
  background: var(--bg-card-2);
  border-color: #45454f;
}
.token-nav a.active {
  background: var(--plate);
  border-color: var(--plate);
  color: var(--ink-on-plate);
}

/* ---- boards ---- */
main.wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 22px;
  padding-bottom: 64px;
}
/* Every section is a board in one continuous frame system; the top rule
   takes the section's line color. */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--card-line, var(--line));
  max-width: 100%;
}
.panel { padding: 18px 22px; }
.panel h3, .panel-header h3, .chart-panel header h3 {
  font-family: var(--font-sign);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.panel > h3 { margin-bottom: 14px; }
.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--line);
}
.muted { color: var(--fg-dim); font-size: 12px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- service-class glyph helper ---- */
.gl {
  display: inline-block;
  width: 8px; height: 8px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: -1px;
}
.gl-square  { -webkit-mask-image: var(--gl-square);  mask-image: var(--gl-square); }
.gl-hollow  { -webkit-mask-image: var(--gl-hollow);  mask-image: var(--gl-hollow); }
.gl-diamond { -webkit-mask-image: var(--gl-diamond); mask-image: var(--gl-diamond); }
.gl-cross   { -webkit-mask-image: var(--gl-cross);   mask-image: var(--gl-cross); }
.gl-play    { -webkit-mask-image: var(--gl-play);    mask-image: var(--gl-play); }
.gl-ext     { -webkit-mask-image: var(--gl-ext);     mask-image: var(--gl-ext); }

/* External-link glyph, shared across all boards. */
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ext-link::after {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
  -webkit-mask-image: var(--gl-ext); mask-image: var(--gl-ext);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Measured values: every quantity carries its unit. */
.value-unit {
  font-family: var(--font-sign);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  margin-left: 6px;
}

/* ---- the main departure board (hero) ---- */
.hero-section {
  --card-line: var(--accent);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
}
.hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--line);
}
.hero-head h2 {
  font-family: var(--font-sign);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.hero-eyebrow { display: none; }
.hero-pill {
  font-family: var(--font-sign);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.hero-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px 14px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
}
.hero-card:last-child { border-right: none; }
.hero-card-label {
  font-family: var(--font-sign);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero-card-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-card-klv .hero-card-value, .hero-card-token .hero-card-value { color: #ff8dff; }
.hero-card-usd .hero-card-value { color: var(--fg); }
.hero-card-foot { font-size: 11.5px; color: var(--fg-dim); }

/* ZOE flavored boards on the detail pages. */
.detail-zoe .hero-section { border-top-color: var(--cyan); }
.detail-zoe .hero-card-token .hero-card-value { color: #7fe4f5; }
.token-title-kunai, .token-title-zoe { margin: 0; }

/* Token heading with its line badge; used by both lookup surfaces. */
.token-section-title {
  font-family: var(--font-sign);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.4;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.token-section-title::before {
  content: "K";
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0;
  flex: 0 0 auto;
}
.detail-zoe .token-section-title::before {
  content: "Z";
  background: var(--cyan);
  color: #06282e;
}

/* ---- chart panels ---- */
.chart-row-card { padding: 0; }
.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.chart-grid-stacked {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "year quarter" "wallets wallets";
}
.area-year { grid-area: year; }
.area-quarter { grid-area: quarter; }
.area-wallets { grid-area: wallets; border-top: 1px solid var(--line-soft); }
.chart-panel {
  padding: 16px 18px 14px;
  min-width: 0;
  border-right: 1px solid var(--line-soft);
}
.chart-panel:last-child, .chart-panel.area-wallets { border-right: none; }
.chart-panel header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.chart-panel header .muted { font-size: 11px; }
.chart-wrap { position: relative; height: 220px; max-width: 100%; }
.chart-wrap-mid { height: 240px; }
.chart-wrap-tall { height: 300px; }

/* ---- token line boards (dashboard links) ---- */
.token-stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.token-stats-card {
  display: block;
  padding: 0 0 6px;
  transition: border-color 0.15s;
}
.token-stats-kunai { --card-line: var(--accent); }
.token-stats-zoe { --card-line: var(--cyan); }
.token-stats-kunai:hover, .token-stats-zoe:hover { border-color: #45454f; }
.token-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.token-stats-head h3 {
  font-family: var(--font-sign);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.token-stats-head h3::before {
  content: "K";
  width: 20px; height: 20px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0;
}
.token-stats-zoe .token-stats-head h3::before {
  content: "Z";
  background: var(--cyan);
  color: #06282e;
}
.token-stats-figures {
  display: flex;
  gap: 32px;
  padding: 0 18px;
  margin-bottom: 8px;
}
.token-stats-figures > div { display: flex; flex-direction: column; gap: 3px; }
.figure-label {
  font-family: var(--font-sign);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.figure-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
}
.token-stats-kunai .figure-value:first-line { color: var(--fg); }
.token-stats-card .chart-wrap { padding: 0 12px 8px; }

/* ---- score tables: the departure ledger ---- */
.agg-table, .month-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.agg-table th, .month-table th {
  font-family: var(--font-sign);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card-2);
  white-space: nowrap;
}
.agg-table td, .month-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.agg-table .num, .month-table .num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.agg-table tr:last-child td, .month-table tr:last-child td { border-bottom: none; }
.agg-table tbody tr:hover td, .month-table tbody tr:hover td {
  background: rgba(245, 244, 240, 0.03);
}
.agg-table .bar { width: 30%; }
.bar-fill {
  height: 7px;
  min-width: 3px;
  background: var(--accent);
}
.bar-fill-kunai { background: var(--accent); }
.bar-fill-zoe { background: var(--cyan); }

/* ---- service-class plates (status pills) ---- */
.status-pill, .mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sign);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  white-space: nowrap;
  line-height: 1.2;
}
.status-pill::before, .mini-pill::before {
  content: "";
  width: 7px; height: 7px;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: var(--gl-hollow); mask-image: var(--gl-hollow);
}
.status-pill.done, .status-pill.paid, .mini-pill.done {
  color: var(--green);
  border-color: rgba(88, 232, 138, 0.45);
  background: var(--green-soft);
}
.status-pill.done::before, .status-pill.paid::before, .mini-pill.done::before {
  -webkit-mask-image: var(--gl-square); mask-image: var(--gl-square);
}
.status-pill.progress, .status-pill.processing, .status-pill.pending,
.status-pill.pending-pay, .mini-pill.partial {
  color: var(--amber);
  border-color: rgba(255, 179, 71, 0.45);
  background: var(--amber-soft);
}
.status-pill.progress::before, .status-pill.processing::before,
.status-pill.pending::before, .status-pill.pending-pay::before,
.mini-pill.partial::before {
  -webkit-mask-image: var(--gl-diamond); mask-image: var(--gl-diamond);
}
.status-pill.ineligible-pill {
  color: var(--red);
  border-color: rgba(255, 84, 112, 0.45);
  background: var(--red-soft);
}
.status-pill.ineligible-pill::before {
  -webkit-mask-image: var(--gl-cross); mask-image: var(--gl-cross);
}

/* ---- snapshot token boards (dashboard) ---- */
.token-card { --card-line: var(--accent); }
.token-card.token-zoe { --card-line: var(--cyan); }
.token-card .token-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 22px;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.token-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.token-title h2 {
  font-family: var(--font-sign);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.token-title h2::before {
  content: "K";
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0;
  flex: 0 0 auto;
}
.token-zoe .token-title h2::before {
  content: "Z";
  background: var(--cyan);
  color: #06282e;
}
.month-badge {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg-inset);
  padding: 4px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.token-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.stat-label {
  font-family: var(--font-sign);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.sheet-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sign);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--line);
  transition: color 0.15s, border-color 0.15s;
}
.sheet-link:hover { color: var(--fg); border-color: #45454f; }
.sheet-link .arrow { display: none; }
.sheet-link::after {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
  -webkit-mask-image: var(--gl-ext); mask-image: var(--gl-ext);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.token-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.token-body .panel:first-child { border-right: 1px solid var(--line-soft); }

/* Planned dates: the platform list. */
.date-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.date-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--fg-muted);
}
.date-dot {
  width: 8px; height: 8px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: var(--gl-hollow); mask-image: var(--gl-hollow);
}
.date-item.done { color: var(--green); border-color: rgba(88, 232, 138, 0.4); background: var(--green-soft); }
.date-item.done .date-dot { -webkit-mask-image: var(--gl-square); mask-image: var(--gl-square); }
.date-item.today { color: var(--amber); border-color: rgba(255, 179, 71, 0.4); background: var(--amber-soft); }
.date-item.today .date-dot { -webkit-mask-image: var(--gl-diamond); mask-image: var(--gl-diamond); }
.date-item.missed { color: var(--red); border-color: rgba(255, 84, 112, 0.4); background: var(--red-soft); }
.date-item.missed .date-dot { -webkit-mask-image: var(--gl-cross); mask-image: var(--gl-cross); }
.date-item.future { color: var(--fg-muted); }
.date-iso {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: inherit;
}
.date-detail { color: var(--fg-dim); font-size: 11px; margin-left: auto; text-align: right; }
.date-item.done .date-detail { color: var(--green); }
.date-item.missed .date-detail { color: var(--red); font-weight: 700; }

/* Calendar: the service calendar. */
.calendar { max-width: 100%; }
.cal-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 5px;
}
.cal-head span {
  font-family: var(--font-sign);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--fg-dim);
  text-transform: uppercase;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.cal-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--fg-muted);
}
.cal-cell.outside { opacity: 0.3; }
.cal-cell.scheduled {
  border: 2px solid var(--accent);
  color: var(--fg);
  background: var(--accent-soft);
}
.cal-cell.completed {
  border: 2px solid var(--green);
  background: var(--green-soft);
  color: var(--green);
}
.cal-cell .marker {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 6px; height: 6px;
  background: var(--accent);
  -webkit-mask-image: var(--gl-hollow); mask-image: var(--gl-hollow);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.cal-cell.completed .marker {
  background: var(--green);
  -webkit-mask-image: var(--gl-square); mask-image: var(--gl-square);
}
.cal-cell.today {
  outline: 2px dashed var(--amber);
  outline-offset: -2px;
  color: var(--amber);
  font-weight: 700;
}
/* If today is ALSO completed, the completed service class wins; the bold
   day number stays as today's only hint. */
.cal-cell.today.completed {
  outline: none;
  color: var(--green);
}
.day-num { line-height: 1; }
.cal-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.lg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-dim);
}
.lg-dot {
  width: 7px; height: 7px;
  display: inline-block;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: var(--gl-hollow); mask-image: var(--gl-hollow);
}
.lg-dot.scheduled { background: var(--accent); }
.lg-dot.completed {
  background: var(--green);
  -webkit-mask-image: var(--gl-square); mask-image: var(--gl-square);
}
.lg-dot.today {
  background: var(--amber);
  -webkit-mask-image: var(--gl-diamond); mask-image: var(--gl-diamond);
}

/* ---- history table ---- */
.history table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.history th {
  font-family: var(--font-sign);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.history td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.history td.mono { font-size: 11.5px; }
.history tr:last-child td { border-bottom: none; }
.history a { color: var(--fg-muted); text-decoration: none; }
.history a:hover { color: var(--fg); }
.history { border-top: 1px solid var(--line-soft); }

/* ---- buttons: signage plates ---- */
.btn-refresh, .lookup-form button[type="submit"], .lookup-form button:not(.connect-btn) {
  font-family: var(--font-sign);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-on-plate);
  background: var(--plate);
  border: 1px solid var(--plate);
  padding: 12px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.btn-refresh:hover:not(:disabled),
.lookup-form button[type="submit"]:hover {
  background: #ffffff;
}
.btn-refresh:active:not(:disabled),
.lookup-form button[type="submit"]:active {
  transform: translateY(1px);
}
.btn-refresh:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- manual sync console ---- */
.refresh-card { padding: 18px 22px; }
.refresh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.refresh-row h2 {
  font-family: var(--font-sign);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--fg);
}
.refresh-row .muted { max-width: 62ch; }
.refresh-status {
  margin-top: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.refresh-status.running, .refresh-status.ok, .refresh-status.err {
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
}
.refresh-status.running {
  border-color: rgba(255, 179, 71, 0.45);
  color: var(--amber);
}
.refresh-status.running::after {
  content: "_";
  animation: cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink { to { opacity: 0; } }
.refresh-status.ok { border-color: rgba(88, 232, 138, 0.45); color: var(--green); }
.refresh-status.err { border-color: rgba(255, 84, 112, 0.45); color: var(--red); }

/* ---- collapsible monthly details ---- */
.monthly-details-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  cursor: pointer;
  font-family: var(--font-sign);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  list-style: none;
  background: var(--bg-card-2);
}
.monthly-details-card summary::-webkit-details-marker { display: none; }
.monthly-details-card summary > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.monthly-details-card summary > span:first-child::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--accent);
  -webkit-mask-image: var(--gl-play); mask-image: var(--gl-play);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: transform 0.15s;
  flex: 0 0 auto;
}
.monthly-details-card[open] summary > span:first-child::before { transform: rotate(90deg); }
.monthly-details-card summary:hover { color: var(--fg); }
.monthly-details-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.monthly-token-block { padding: 14px 18px 18px; min-width: 0; overflow-x: auto; }
.monthly-token-block + .monthly-token-block { border-left: 1px solid var(--line-soft); }
.monthly-token-block h4 {
  font-family: var(--font-sign);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin: 0 0 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* ---- log readout ---- */
.log {
  margin: 0;
  padding: 14px 22px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--fg-muted);
  overflow-x: auto;
  white-space: pre;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-inset);
}

/* ---- footer ---- */
.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  text-align: center;
}
.foot code {
  background: var(--bg-inset);
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
}
.foot .sep { opacity: 0.5; }
.back-link { color: var(--fg-dim); }

/* ---- token detail page ---- */
.top-wallets-card { --card-line: var(--gold); }
.top-wallets-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.top-wallets-body > .chart-wrap { padding: 18px; }
.top-wallets-table { font-size: 12px; }
.top-wallets-table td:first-child {
  font-family: var(--font-sign);
  font-weight: 700;
  color: var(--fg-dim);
}
.top-wallets-table td.mono { font-size: 11.5px; }
.top-wallets-table tbody tr:first-child td { background: var(--gold-soft); }
.top-wallets-table tbody tr:first-child td:first-child { color: var(--gold); }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-card:nth-child(2n) { border-right: none; }
  .hero-card:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .token-stats-row { grid-template-columns: minmax(0, 1fr); }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-grid-stacked {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "year" "quarter" "wallets";
  }
  .chart-panel { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .chart-panel:last-child { border-bottom: none; }
  .top-wallets-body {
    grid-template-columns: minmax(0, 1fr);
    /* Wide table keeps its own scroll container instead of being clipped
       at the viewport (the page itself never scrolls sideways). */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .token-body { grid-template-columns: minmax(0, 1fr); }
  .token-body .panel:first-child {
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }
}
@media (max-width: 640px) {
  .wrap { padding: 14px 14px; }
  main.wrap { gap: 14px; }
  /* Six admin entries wrap onto two rows instead of hiding behind a
     sideways scroll; every destination stays visible. */
  .token-nav { flex-wrap: wrap; overflow-x: visible; }
  .token-nav a { flex: 1 1 auto; text-align: center; }
  body > header .wrap { flex-wrap: wrap; row-gap: 10px; }
  .brand h1 { font-size: 22px; }
  .brand-logo { height: 34px; }
  .logo-dot { width: 28px; height: 28px; font-size: 14px; }
  .hero-head { padding: 12px 14px; }
  .hero-head h2 { font-size: 11px; letter-spacing: 0.18em; }
  .hero-card { padding: 13px 14px 11px; }
  .hero-card-value { font-size: 18px; }
  .panel { padding: 14px 14px; }
  .panel-header { padding: 11px 14px; }
  .token-card .token-header { padding: 12px 14px; }
  .token-meta { width: 100%; justify-content: space-between; }
  .refresh-card { padding: 14px; }
  .monthly-details-card summary { padding: 12px 14px; }
  .log { padding: 12px 14px 16px; }
  .chart-wrap { height: 200px; }
  .chart-wrap-tall { height: 240px; }
  /* Wide tables scroll inside their own container, never the page. */
  .panel.history, .monthly-token-block { overflow-x: auto; }
}
@media (max-width: 400px) {
  .hero-cards { grid-template-columns: minmax(0, 1fr); }
  .hero-card { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .hero-card:last-child { border-bottom: none; }
}

/* ---- motion discipline ---- */
@media (prefers-reduced-motion: reduce) {
  .refresh-status.running::after { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}