/* Tenark Console · direction H ("Üveg + idővonal"), owner-approved 2026-09-24.
   Ported from tenark-design: tenark/console-h/prototype/src/01-head.html. Every colour,
   radius and font comes from tenark-tokens.css (--tk-*); nothing here carries
   a colour literal. The CSP is style-src 'self', so no rule relies on an
   inline style attribute: dynamic geometry is drawn with SVG attributes. */

/* ---------- base ---------- */
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--tk-bg);
  color: var(--tk-ink);
  font-family: var(--tk-font-sans);
  font-size: var(--tk-fs-body);
  line-height: var(--tk-lh);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--tk-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 500; }
p { margin: 0; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--tk-font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--tk-ink-3); }
.pos { color: var(--tk-pos); }
.neg { color: var(--tk-neg); }
.warn { color: var(--tk-warn); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico .ico-fill { fill: currentColor; stroke: none; }
.ico .ico-knob { fill: var(--tk-bg); }

/* ---------- ambient light ---------- */
/* .tk-ambient itself lives in tenark-tokens.css; html[data-state] recolours it. */

/* ---------- shell ---------- */
.app {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--tk-rail-w) minmax(0, 1fr); gap: var(--tk-gutter);
  padding-inline: var(--tk-gutter); padding-block: var(--tk-gutter);
  max-width: 1680px; margin: 0 auto; min-height: 100%;
}
:root[data-nav="full"] .app { grid-template-columns: 232px minmax(0, 1fr); }
.rail {
  position: sticky; top: var(--tk-gutter); height: calc(100dvh - 48px); min-height: 560px;
  border-radius: var(--tk-r-lg); background: var(--tk-glass); border: 1px solid var(--tk-line);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: var(--tk-shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 20px;
}
.rail-top { display: flex; align-items: center; gap: 6px; }
.rail .logo { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; color: var(--tk-accent); }
.rail .logo svg { width: 30px; height: 30px; }
.rail .rl { display: none; }
.wordmark { font-size: 18px; font-weight: 400; color: var(--tk-ink); }
.wordmark strong { font-weight: 600; }
.rail-toggle {
  width: 28px; height: 28px; border-radius: 14px; border: 1px solid var(--tk-line); background: var(--tk-chip);
  color: var(--tk-ink-3); display: grid; place-items: center; margin: -6px 0 8px; padding: 0;
}
.rail-toggle:hover { color: var(--tk-ink); }
.rail-toggle .ico-close { display: none; }
.rail-btn {
  position: relative; width: 48px; height: 48px; border-radius: 16px; border: 1px solid transparent;
  background: transparent; color: var(--tk-ink-3); display: grid; place-items: center;
  transition: background .2s, color .2s; text-decoration: none;
}
.rail-btn:hover { color: var(--tk-ink); background: var(--tk-chip); text-decoration: none; }
.rail-btn[aria-current="page"] { color: var(--tk-ink); background: var(--tk-seg-on); border-color: var(--tk-line); box-shadow: var(--tk-seg-on-shadow); }
.rail-btn .tip {
  position: absolute; left: 58px; top: 50%; transform: translateY(-50%) translateX(-4px); white-space: nowrap;
  background: var(--tk-glass-solid); border: 1px solid var(--tk-line); backdrop-filter: blur(20px);
  padding: 6px 10px; border-radius: 10px; font-size: var(--tk-fs-sub); color: var(--tk-ink);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: var(--tk-shadow-sm); z-index: 5;
}
.rail-btn:hover .tip, .rail-btn:focus-visible .tip { opacity: 1; transform: translateY(-50%); }
.rail-btn .ml { display: none; }
.rail .spacer { flex: 1; }
.rail-sub { display: none; }
.avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--tk-line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tk-ink) 18%, transparent), color-mix(in srgb, var(--tk-ink) 4%, transparent));
  color: var(--tk-ink); font-weight: 500; font-size: 13px; text-decoration: none;
}
.avatar:hover { text-decoration: none; }
:root[data-theme="light"] .avatar { background: var(--tk-ink); color: var(--tk-on-accent); }

/* expanded rail (brief 12, CBDR-010): takes space, never overlays */
:root[data-nav="full"] .rail { align-items: stretch; padding-inline: 12px; }
:root[data-nav="full"] .rail .logo { margin-bottom: 0; }
:root[data-nav="full"] .rail-top { margin-bottom: 14px; padding-left: 2px; }
:root[data-nav="full"] .rail .rl { display: inline; }
:root[data-nav="full"] .rail .wordmark { font-size: 17px; }
:root[data-nav="full"] .rail-toggle { width: auto; height: 30px; padding: 0 10px; grid-auto-flow: column; gap: 6px; justify-content: start; border-radius: 10px; font-size: var(--tk-fs-sub); margin: 0 0 8px; }
:root[data-nav="full"] .rail-toggle .ico-open { display: none; }
:root[data-nav="full"] .rail-toggle .ico-close { display: block; }
:root[data-nav="full"] .rail-btn { width: auto; height: 44px; grid-auto-flow: column; justify-content: start; gap: 12px; padding: 0 12px; font-size: var(--tk-fs-body); }
:root[data-nav="full"] .rail-btn .tip { display: none; }
:root[data-nav="full"] .rail-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 43px; }
:root[data-nav="full"] .avatar { align-self: flex-start; margin-left: 4px; }
.rail-sub a { font-size: 13px; color: var(--tk-ink-3); padding: 6px 10px; border-radius: 9px; text-decoration: none; }
.rail-sub a:hover { background: var(--tk-chip); color: var(--tk-ink); text-decoration: none; }
.rail-sub a[aria-current="page"] { color: var(--tk-ink); background: var(--tk-chip); }

.main { display: flex; flex-direction: column; gap: var(--tk-space-5); min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; flex-wrap: wrap; }
.capsule {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 8px 0 16px; border-radius: 22px;
  background: var(--tk-glass-solid); border: 1px solid var(--tk-line); backdrop-filter: blur(24px);
  box-shadow: var(--tk-shadow-sm); min-width: 0; flex-wrap: wrap;
}
.capsule .dot {
  width: 8px; height: 8px; border-radius: 4px; background: var(--tk-dot-ok); flex-shrink: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-dot-ok) 18%, transparent), 0 0 14px color-mix(in srgb, var(--tk-dot-ok) 60%, transparent);
}
.capsule[data-level="warn"] .dot {
  background: var(--tk-dot-warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-dot-warn) 18%, transparent), 0 0 14px color-mix(in srgb, var(--tk-dot-warn) 70%, transparent);
}
.capsule[data-level="risk"] .dot {
  background: var(--tk-dot-risk); animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-dot-risk) 20%, transparent), 0 0 14px color-mix(in srgb, var(--tk-dot-risk) 80%, transparent);
}
@keyframes pulse { 50% { opacity: .45; } }
.capsule[data-level="loading"] .dot { background: var(--tk-chip); box-shadow: none; }
.capsule .headline { font-weight: 500; }
.skeleton-headline { display: inline-block; width: 168px; height: 18px; vertical-align: middle; }
.capsule .sep { width: 1px; height: 16px; background: var(--tk-line-2); }
.capsule .facts { display: flex; gap: 14px; color: var(--tk-ink-3); font-size: 13px; }
.badge-dry {
  height: 30px; padding: 0 12px; border-radius: 15px; background: var(--tk-warn-soft); color: var(--tk-warn);
  font-size: 12px; font-weight: 500; letter-spacing: .02em; display: flex; align-items: center; white-space: nowrap;
}
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill-btn {
  height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--tk-line); background: var(--tk-glass-hi);
  color: var(--tk-ink-2); font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.pill-btn:hover { color: var(--tk-ink); }
select.ccy { appearance: none; -webkit-appearance: none; padding: 0 14px; cursor: pointer; }
.kbd { font-family: var(--tk-font-mono); font-size: 11px; color: var(--tk-ink-4); }

/* the fresh control: the single global refresh (UI-01) */
.fresh {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px;
  border: 1px solid var(--tk-line-2); background: transparent; color: var(--tk-ink-3); font-size: var(--tk-fs-sub); white-space: nowrap;
}
.fresh:hover { color: var(--tk-ink); background: var(--tk-chip); }
.fresh[disabled] { cursor: progress; }
.fresh[data-state="stale"], .fresh[data-state="error"] { color: var(--tk-warn); border-color: var(--tk-warn-line); }
.fresh[data-state="success"] { color: var(--tk-pos); border-color: var(--tk-pos-line); }
.fresh[data-state="refreshing"] .fresh-icon { animation: spin .8s linear infinite; }
.fresh[data-state="success"] .fresh-icon { stroke-width: 2.25; }
.fresh[data-state="stale"] .fresh-icon, .fresh[data-state="error"] .fresh-icon { stroke-width: 2; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- common ---------- */
.card {
  border-radius: var(--tk-r-lg); background: linear-gradient(180deg, var(--tk-glass-top), var(--tk-glass-bot));
  border: 1px solid var(--tk-line); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: var(--tk-shadow);
}
.tile {
  border-radius: var(--tk-r-md); background: var(--tk-glass); border: 1px solid var(--tk-line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--tk-shadow-sm);
}
.pad { padding: 22px 24px; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.head h2, .h2 { font-size: var(--tk-fs-h2); }
.head-left { gap: 20px; }
.sub { font-size: var(--tk-fs-sub); color: var(--tk-ink-3); }
.eyebrow { font-size: var(--tk-fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--tk-ink-4); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 6px 8px 0; }
.page-head h1 { font-size: var(--tk-fs-h1); font-weight: 400; letter-spacing: -.02em; }
.page-head .eyebrow { margin-bottom: 6px; display: block; }
.section-head { padding: 0 8px; }
.count { font-weight: 400; }
.link-sm { font-size: 13px; }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px; border-radius: var(--tk-r-sm); background: var(--tk-seg-bg); }
.seg button {
  height: 30px; padding: 0 12px; border-radius: 11px; border: 0; background: transparent; color: var(--tk-ink-3);
  font-size: var(--tk-fs-sub); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
}
.seg button[aria-pressed="true"] { background: var(--tk-seg-on); color: var(--tk-ink); box-shadow: var(--tk-seg-on-shadow); }
.btn {
  height: 40px; padding: 0 16px; border-radius: var(--tk-r-sm); border: 1px solid var(--tk-line); background: var(--tk-glass-hi);
  color: var(--tk-ink); font-size: var(--tk-fs-table); font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap; transition: transform .1s, background .2s; text-decoration: none;
}
.btn:hover { background: var(--tk-seg-on); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--tk-accent); border-color: transparent; color: var(--tk-on-accent); box-shadow: 0 10px 30px color-mix(in srgb, var(--tk-accent) 30%, transparent); }
.btn-primary:hover { background: var(--tk-accent); filter: brightness(1.08); }
.btn-danger { background: var(--tk-neg-soft); border-color: var(--tk-neg-line); color: var(--tk-neg); }
.btn-danger:hover { background: var(--tk-neg-soft); filter: brightness(1.15); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--tk-accent-ink); }
.btn-quiet { color: var(--tk-ink-3); }
.btn-sm { height: 32px; padding: 0 12px; border-radius: 11px; font-size: var(--tk-fs-sub); }
.btn-tall { height: 46px; }
.btn-cta { height: 48px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--tk-line); background: var(--tk-chip);
  color: var(--tk-ink-2); display: grid; place-items: center; flex-shrink: 0; padding: 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--tk-fs-label); padding: 4px 9px; border-radius: var(--tk-r-xs);
  background: var(--tk-chip); color: var(--tk-ink-2); white-space: nowrap;
}
.chip.pos { background: var(--tk-pos-soft); color: var(--tk-pos-text); }
.chip.neg { background: var(--tk-neg-soft); color: var(--tk-neg-text); }
.chip.warn { background: var(--tk-warn-soft); color: var(--tk-warn); }
.chip.info { background: var(--tk-accent-soft); color: var(--tk-accent-ink); }
.chip.vault { background: color-mix(in srgb, var(--tk-vault) 14%, transparent); color: var(--tk-vault); }
.chip.mono { font-family: var(--tk-font-mono); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--tk-fs-sub); color: var(--tk-ink-3); }
.input, select.input, textarea.input {
  height: 42px; border-radius: var(--tk-r-input); border: 1px solid var(--tk-input-line); background: var(--tk-input-bg);
  color: var(--tk-ink); padding: 0 12px; font-size: var(--tk-fs-body); min-width: 0; width: 100%;
}
textarea.input { height: auto; padding: 12px; font-family: var(--tk-font-mono); font-size: var(--tk-fs-sub); line-height: 1.55; resize: vertical; }
.input:focus { outline: 2px solid var(--tk-accent); outline-offset: 0; border-color: transparent; }
.otp { font-size: 22px; letter-spacing: .35em; text-align: center; height: 52px; }
.unit-input { position: relative; display: flex; }
.unit-input .input { padding-right: 58px; }
.unit-input .u { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: var(--tk-fs-sub); color: var(--tk-ink-4); pointer-events: none; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--tk-accent); }
.dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; margin: 0; font-size: var(--tk-fs-table); }
.dl dt { color: var(--tk-ink-3); }
.dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dl-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.divider { height: 1px; background: var(--tk-line-2); }
.or-divider { display: flex; align-items: center; gap: 12px; }
.or-divider .divider { flex: 1; }
.note { font-size: var(--tk-fs-sub); color: var(--tk-ink-3); line-height: 1.55; margin: 0; }
.note.neg { color: var(--tk-neg-text); }
.note.pos { color: var(--tk-pos-text); }
.note:empty { display: none; }
.note.err-slot:empty { display: block; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tk-space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tk-space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tk-space-4); }
.stack { display: flex; flex-direction: column; gap: var(--tk-space-4); }
.stack-tight { gap: 6px; }
.form-tight { gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.spread { justify-content: space-between; }
.view { display: flex; flex-direction: column; gap: var(--tk-space-5); animation: viewIn .35s var(--tk-ease); }
@keyframes viewIn { from { opacity: .001; transform: translateY(6px); } }
.minibox { border-radius: 16px; background: var(--tk-chip); border: 1px solid var(--tk-line-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.minibox .v { font-size: var(--tk-fs-stat); }
.minibox .v-sm { font-size: 16px; }
.minibox .v-pct { font-size: 14px; }
.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat .v { font-size: var(--tk-fs-stat); font-weight: 500; }

/* tables */
.tbl-wrap { overflow-x: auto; border-radius: 16px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--tk-fs-table); }
.tbl th { font-weight: 500; font-size: 12px; color: var(--tk-ink-4); text-align: left; padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--tk-line-2); }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th button { background: none; border: 0; padding: 0; color: inherit; font: inherit; display: inline-flex; gap: 4px; align-items: center; }
.tbl th button[data-dir]::after { content: "↕"; opacity: .5; }
.tbl th button[data-dir="asc"]::after { content: "↑"; opacity: 1; }
.tbl th button[data-dir="desc"]::after { content: "↓"; opacity: 1; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--tk-line-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover { background: var(--tk-chip); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.empty { text-align: center; color: var(--tk-ink-3); padding: 28px; white-space: normal; }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search { position: relative; flex: 1 1 220px; max-width: 320px; }
.search .input { padding-left: 36px; height: 38px; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tk-ink-4); }
select.input.compact { height: 38px; width: auto; }

/* asset icons (UI-05): the ticker badge first, the CC0 mark once decoded */
.asset-icon {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: var(--tk-chip); color: var(--tk-ink-3); font-size: 9.5px; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
}
.asset-icon-mark { padding: 0; background: transparent; }
.asset-icon-mark img { width: 20px; height: 20px; display: block; }
.pair-cell { display: inline-flex; align-items: center; gap: 8px; }
.freshness.fresh { color: var(--tk-ink-3); }
.freshness.stale { color: var(--tk-warn); }

/* ---------- overview ---------- */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 8px 0; flex-wrap: wrap; }
.hero-main { gap: 6px; }
.hero-label { font-size: var(--tk-fs-body); }
.equity-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: nowrap; }
.equity {
  font-size: var(--tk-fs-display); font-weight: 300; letter-spacing: -.045em; line-height: .95;
  background: linear-gradient(180deg, var(--tk-ink) 35%, color-mix(in srgb, var(--tk-ink) 62%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.equity-unit { font-size: 22px; color: var(--tk-ink-3); }
.hero-since { font-size: var(--tk-fs-body); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: 0 1 600px; }
.ov-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--tk-side-w); gap: var(--tk-space-5); align-items: start; }
.timeline-card { position: relative; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.timeline-scroll { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.timeline-scroll svg { display: block; width: 100%; height: auto; min-width: 680px; }
.chart-readout { min-height: 1.2em; }
.chart-readout:empty { min-height: 0; }
/* the status line under the timeline carries a failure only (owner decision 2026-09-24) */
.chart-status:empty { display: none; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--tk-ink-3); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 5px; }
.lg-entry { fill: var(--tk-pos); }
.lg-exit { fill: var(--tk-warn); }
.lg-vault { fill: none; stroke: var(--tk-vault); stroke-width: 1.6; }
.day-chip { height: 28px; font-size: var(--tk-fs-body); padding: 0 12px; border-radius: 14px; }
.tl-nodata { fill: var(--tk-ink-4); font-family: var(--tk-font-sans); font-size: 11px; font-style: italic; }
.tl-regime-empty { fill: var(--tk-chip); }
.nodata { color: var(--tk-ink-4); font-style: italic; }
.spark-empty { height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px dashed var(--tk-line-2); font-size: 11px; color: var(--tk-ink-4); font-style: italic; }
.btc-ring { display: flex; gap: 14px; align-items: center; flex-wrap: nowrap; }
.btc-ring svg { width: 86px; height: 86px; flex-shrink: 0; }
.ring-track { fill: none; stroke: var(--tk-track); stroke-width: 11; }
.ring-value { fill: none; stroke: var(--tk-pos); stroke-width: 11; stroke-linecap: round; }
.ring-text { fill: var(--tk-ink); font-size: 28px; font-weight: 500; font-family: var(--tk-font-sans); }
.ring-text.nodata-text { fill: var(--tk-ink-4); font-size: 13px; font-weight: 400; font-style: italic; }
.gap-12 { gap: 12px; }
.gap-10 { gap: 10px; }

/* the timeline drawing: every mark takes its colour from a class */
.tl-fut { fill: url(#tfut); }
.tl-hatch { stroke: var(--tk-hatch); stroke-width: 3; }
.tl-grid { stroke: var(--tk-grid); fill: none; }
.tl-area { fill: url(#tga); }
.tl-area-stop { stop-color: var(--tk-eq-area); }
.tl-area-stop-end { stop-color: var(--tk-eq-area); stop-opacity: 0; }
.tl-line-a { stop-color: var(--tk-eq-a); stop-opacity: .6; }
.tl-line-b { stop-color: var(--tk-eq-b); }
.tl-glow { fill: none; stroke: var(--tk-eq-a); stroke-width: 6; opacity: var(--tk-eq-glow); filter: url(#tgw); }
.tl-line { fill: none; stroke: url(#tgl); stroke-width: 2.2; }
.tl-end { fill: var(--tk-bg); stroke: var(--tk-now); stroke-width: 2.5; }
.tl-now { stroke: var(--tk-now); stroke-width: 1.5; }
.tl-label { fill: var(--tk-ink-4); font-size: 10.5px; letter-spacing: .12em; font-family: var(--tk-font-sans); }
.tl-lane-rule { stroke: var(--tk-line-2); }
.tl-entry { fill: var(--tk-pos); }
.tl-exit { fill: var(--tk-warn); }
.tl-mono { font-family: var(--tk-font-mono); font-size: 10.5px; }
.tl-exit-label { fill: var(--tk-warn); }
.tl-axis { fill: var(--tk-ink-4); font-family: var(--tk-font-mono); font-size: 10.5px; }
.tl-axis .tl-axis-now { fill: var(--tk-ink); }
.tl-future { fill: var(--tk-ink-3); font-family: var(--tk-font-mono); font-size: 10.5px; }
.tl-future .tl-future-value { fill: var(--tk-ink); }
.tl-future .tl-future-open { fill: var(--tk-pos); }
.tl-future .tl-future-hold { fill: var(--tk-warn); }
.tl-empty { fill: var(--tk-ink-3); font-family: var(--tk-font-sans); font-size: 13px; }
.tl-hit { cursor: pointer; }
.tl-hit:focus { outline: none; }
.tl-hit-area { fill: transparent; }
.tl-pair { fill: var(--tk-ink-2); font-size: 12px; font-family: var(--tk-font-sans); }
.tl-lane { stroke-width: 1; }
.tl-lane.gain { fill: var(--tk-pos-soft); stroke: var(--tk-pos-line); }
.tl-lane.loss { fill: var(--tk-neg-soft); stroke: var(--tk-neg-line); }
.tl-hit[aria-pressed="true"] .tl-lane, .tl-hit:focus-visible .tl-lane { stroke: var(--tk-accent); stroke-width: 2; }
.tl-hit:hover .tl-lane { filter: brightness(1.25); }
.tl-lane-pct { font-family: var(--tk-font-mono); font-size: 11px; }
.tl-lane-pct.gain { fill: var(--tk-pos-text); }
.tl-lane-pct.loss { fill: var(--tk-neg-text); }
.tl-older { fill: var(--tk-ink-3); font-size: 11px; }
.tl-more { fill: var(--tk-ink-3); font-family: var(--tk-font-sans); font-size: 11px; }
.tl-skel { fill: var(--tk-chip); }
.tl-cross { stroke: var(--tk-accent-line); stroke-dasharray: 3 4; }
.tl-halo { fill: var(--tk-accent-soft); stroke: var(--tk-accent); stroke-width: 1.5; }
.tl-scrub { fill: var(--tk-glass); stroke: var(--tk-line-2); }
.tl-scrub-line { fill: none; stroke: var(--tk-accent-line); stroke-width: 1.2; }
.tl-scrub-window { fill: var(--tk-accent-soft); stroke: var(--tk-accent); }
.tl-cursor-line { stroke: var(--tk-accent-line); stroke-width: 1; }
.tl-cursor-dot { fill: var(--tk-accent); }
.tl-cursor-hit { fill: transparent; cursor: crosshair; }

.side { display: flex; flex-direction: column; min-width: 0; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
.gauge { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge .t { align-self: flex-start; font-size: 13px; color: var(--tk-ink-3); }
.gauge .f { font-size: var(--tk-fs-sub); color: var(--tk-ink-2); text-align: center; }
.gauge svg { width: 150px; height: 150px; }
.g-track { fill: none; stroke: var(--tk-track); stroke-width: 10; stroke-linecap: round; }
.g-band-warn { fill: none; stroke: var(--tk-warn-soft); stroke-width: 10; }
.g-band-danger { fill: none; stroke: var(--tk-neg-soft); stroke-width: 10; }
.g-ticks { stroke: var(--tk-tick); stroke-width: 1.2; fill: none; }
.g-glow { fill: none; stroke-width: 10; stroke-linecap: round; opacity: var(--tk-eq-glow); }
.g-value { fill: none; stroke-width: 10; stroke-linecap: round; }
.g-big { fill: var(--tk-ink); font-size: 27px; font-weight: 300; font-family: var(--tk-font-sans); }
.g-sub { fill: var(--tk-ink-3); font-size: 11px; font-family: var(--tk-font-sans); }
.g-big.nodata-text { fill: var(--tk-ink-4); font-size: 13px; font-weight: 400; font-style: italic; }
.g-big.g-label { font-size: 15px; font-weight: 500; }
.g-amber .g-glow { stroke: var(--tk-gauge-amber-a); }
.g-amber .gs-a { stop-color: var(--tk-gauge-amber-a); }
.g-amber .gs-b { stop-color: var(--tk-gauge-amber-b); }
.g-blue .g-glow { stroke: var(--tk-accent); }
.g-blue .gs-a { stop-color: var(--tk-gauge-blue-a); }
.g-blue .gs-b { stop-color: var(--tk-gauge-blue-b); }
.g-red .g-glow { stroke: var(--tk-gauge-red-a); }
.g-red .gs-a { stop-color: var(--tk-gauge-red-a); }
.g-red .gs-b { stop-color: var(--tk-gauge-red-b); }
.g-green .g-glow { stroke: var(--tk-pos); }
.g-green .gs-a, .g-green .gs-b { stop-color: var(--tk-pos); }
.btc { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.btc-title { font-size: 13px; }
.btc-trend { font-size: 20px; font-weight: 500; line-height: 1.15; }
.btc-price { font-size: var(--tk-fs-sub); color: var(--tk-ink-2); }
.btc-chips { gap: 6px; }
.btc-fresh { font-size: var(--tk-fs-label); }
.btc-fresh.stale { color: var(--tk-warn); }
.botcard { grid-column: span 2; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; font-size: 13px; }
.kv2 > span { display: flex; justify-content: space-between; gap: 8px; }
.kv2 > span > span:first-child { color: var(--tk-ink-3); }
.detail { height: 100%; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; border-color: var(--tk-accent-line); }
.detail .when { font-size: 12px; color: var(--tk-accent-ink); letter-spacing: .04em; }
.detail .pair { font-size: 30px; font-weight: 500; letter-spacing: -.015em; }
.detail .fill-line { font-size: 13px; }
.detail .spacer { flex: 1; }
.stack-4 { gap: 4px; }
.chain { display: flex; flex-direction: column; }
.chain > div { display: flex; gap: 10px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--tk-line-2); font-size: var(--tk-fs-table); }
.chain > div:last-child { border-bottom: 0; }
.chain .ok { color: var(--tk-pos); }
.chain .no { color: var(--tk-neg); }
.chain .v { margin-left: auto; font-size: 12px; color: var(--tk-ink-3); }
.chain .no + span { font-weight: 500; }
.manual-row { flex-wrap: nowrap; }
.manual-row .btn { flex: 1; }
.tiles5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ptile {
  padding: 16px 18px; border-radius: var(--tk-r-md); background: var(--tk-glass); border: 1px solid var(--tk-line); box-shadow: var(--tk-shadow-sm);
  display: flex; flex-direction: column; gap: 10px; text-align: left; color: inherit; transition: border-color .2s, box-shadow .2s, transform .15s;
}
.ptile:hover { transform: translateY(-1px); }
.ptile[aria-pressed="true"] { border-color: var(--tk-accent-line); box-shadow: 0 0 0 3px var(--tk-accent-soft); }
.ptile .row { display: flex; justify-content: space-between; gap: 8px; width: 100%; flex-wrap: nowrap; }
.ptile .pt-pair { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.empty-card { padding: 24px; color: var(--tk-ink-3); font-size: var(--tk-fs-table); }

/* skeletons for the loading state: the final layout, never a spinner page */
.skeleton { border-radius: 10px; background: var(--tk-chip); min-height: 18px; }
.sk-inline { display: inline-block; vertical-align: middle; }
.sk-equity { width: 280px; height: 64px; max-width: 100%; }
.sk-chip { width: 110px; min-height: 12px; height: 12px; }
.sk-text { width: 130px; min-height: 12px; height: 12px; }
.sk-stat { width: 96px; height: 24px; }
.sk-dial { width: 150px; height: 150px; }
.sk-block { width: 100%; height: 150px; }
.sk-spark { width: 100%; height: 34px; }

/* ---------- portfolio, markets ---------- */
.pair-strong { font-weight: 500; }
.subline { display: block; font-size: 11.5px; color: var(--tk-ink-3); }
.subline.warn { color: var(--tk-warn); }
.gap-8 { gap: 8px; }
.bar-mini { width: 70px; height: 6px; display: block; flex-shrink: 0; }
.bar-track { fill: var(--tk-track); }
.bar-fill { fill: var(--tk-accent); }
.depth-bar { width: 100%; height: 14px; display: block; border-radius: 7px; overflow: hidden; }
.depth-ask { fill: var(--tk-neg-soft); }
.depth-bid { fill: var(--tk-pos-soft); }
.depth-split { fill: var(--tk-bg); }
.sheet-detail { border: 0; padding: 0; height: auto; }
/* the detail fills the sheet, so its spacer puts the CTA at the sheet bottom */
.sheet-body > .detail { flex: 1 0 auto; }
/* an empty "további" holder adds no stack gap under its table */
[data-table-more]:empty { display: none; }
/* loading: blocks in the final layout of the tiles and table rows */
.stat .skeleton, .tbl .skeleton { display: block; }
.stat .v .skeleton { width: 4.5em; height: 1.15em; }
.stat .sub .skeleton { width: 10em; height: 1.2em; min-height: 0; }

/* ---------- monitoring (UI-03 §13) ---------- */
.coverage { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.cov { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: var(--tk-fs-sub); color: var(--tk-ink-2); }
.cov-warn .cov-kind::before { content: "△ "; color: var(--tk-warn); }
.cov-kind { font-weight: 500; }
.monitoring-state { font-size: var(--tk-fs-sub); color: var(--tk-ink-2); margin: 0; }
.monitoring-state[data-feed="incomplete"], .monitoring-state[data-feed="refresh-failed"] { color: var(--tk-warn); }
.monitoring-state[data-feed="unavailable"] { color: var(--tk-neg-text); }
.monitoring-source { gap: 10px; }
.src-states > div { font-size: 12.5px; }
.events { overflow: hidden; border-radius: 18px; padding: 0; }
.events-empty { padding: 28px; text-align: center; color: var(--tk-ink-3); margin: 0; }
.evday { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 12px; letter-spacing: .04em; color: var(--tk-ink-3); background: var(--tk-chip); border-bottom: 1px solid var(--tk-line-2); }
.events details.ev { border-bottom: 1px solid var(--tk-line-2); }
.events details.ev:last-child { border-bottom: 0; }
.evrow { display: grid; grid-template-columns: 128px 120px 110px minmax(0, 1fr) auto 14px; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; font-size: var(--tk-fs-table); transition: background .15s; }
.evrow::-webkit-details-marker { display: none; }
.evrow:hover { background: var(--tk-chip); }
details[open] > .evrow { background: var(--tk-chip); }
.evtime { color: var(--tk-ink-2); font-size: var(--tk-fs-sub); white-space: nowrap; }
.evtime .evd { color: var(--tk-ink-4); }
.evtxt { min-width: 0; }
.evtxt .why, .src .why { display: block; font-size: 12px; color: var(--tk-ink-3); }
.evtype { font-size: 11px; color: var(--tk-ink-4); font-family: var(--tk-font-mono); white-space: nowrap; }
.evrow .chev { color: var(--tk-ink-4); transition: transform .2s; }
details[open] > .evrow .chev { transform: rotate(180deg); }
.evbody { padding: 4px 16px 16px 158px; display: flex; flex-direction: column; gap: 8px; }
.evmeta { gap: 14px; }
.evbody pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--tk-input-bg); font-size: 12px; overflow: auto; max-height: 320px; }
.severity { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tk-fs-label); padding: 4px 9px; border-radius: var(--tk-r-xs); background: var(--tk-chip); color: var(--tk-ink-3); font-family: var(--tk-font-mono); white-space: nowrap; }
.severity[data-severity="SUCCESS"] { color: var(--tk-pos-text); background: var(--tk-pos-soft); }
.severity[data-severity="ERROR"], .severity[data-severity="ALERT"] { color: var(--tk-neg-text); background: var(--tk-neg-soft); }
.severity[data-severity="WARNING"] { color: var(--tk-ink); font-weight: 800; }
.evidence-state { display: block; font-size: 12.5px; color: var(--tk-ink-2); }
#monitoring .skeleton { display: block; }
#monitoring .skeleton-title { width: 40%; min-height: 20px; }
#monitoring .skeleton-line { width: min(420px, 100%); min-height: 14px; }
#monitoring .skeleton-row { margin: 12px 16px; min-height: 22px; }

/* ---------- controls ---------- */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-links a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 11px; text-decoration: none; font-size: 13px; color: var(--tk-ink-3); }
.seg-links a:hover { color: var(--tk-ink); text-decoration: none; }
.seg-links a[aria-current="page"] { background: var(--tk-seg-on); color: var(--tk-ink); box-shadow: var(--tk-seg-on-shadow); }
.subview { gap: var(--tk-space-5); }
.stack-10 { gap: 10px; }
.stack-8 { gap: 8px; }
.stack-2 { gap: 2px; }
.h3 { font-size: 14px; }
.h3-sm { font-size: 13.5px; }
.stat-mono { font-size: 17px; }
.flex-fill { flex: 1; }
.hard-lock { padding: 12px 14px; border-color: var(--tk-neg-line); }
.hard-lock.hard-lock-unknown { border-color: var(--tk-line); }
.runtime-dl { font-size: 13px; margin-top: 10px; }
.diag-details { margin-top: 10px; }
#control-status .skeleton { display: inline-block; width: 64px; min-height: 12px; vertical-align: middle; }
.diff { font-family: var(--tk-font-mono); font-size: 12px; line-height: 1.6; border-radius: 12px; background: var(--tk-input-bg); border: 1px solid var(--tk-input-line); padding: 10px 12px; overflow: auto; max-height: 220px; white-space: pre-wrap; margin: 0; }
.diff:empty { display: none; }
.diff.neg { color: var(--tk-neg-text); }
.diff-tall { max-height: 320px; margin-top: 10px; }
.vault-out { color: var(--tk-ink); font-size: 18px; }
.slider { width: 100%; accent-color: var(--tk-accent); }
.gate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gate { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--tk-glass); border: 1px solid var(--tk-line); }
.gate .n { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; background: var(--tk-chip); font-size: 12px; color: var(--tk-ink-3); }
.gate-name { display: block; }
.gate-tally { text-align: right; }
.switch-unknown { background: var(--tk-chip); }
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel .fr { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; gap: 4px 12px; align-items: center; font-size: 13px; }
.funnel .fr .r { text-align: right; }
.funnel .fr-note { grid-column: 2 / -1; font-size: 12px; }
.funnel-bar { width: 100%; height: 22px; display: block; }
.fb-track { fill: var(--tk-track); }
.fb-a { stop-color: var(--tk-accent); }
.fb-b { stop-color: color-mix(in srgb, var(--tk-accent) 55%, var(--tk-pos)); }
.report-code { font-size: 12.5px; white-space: normal; }
.report-note td { white-space: normal; font-size: 12px; color: var(--tk-ink-3); }
.tbl-scroll { max-height: 520px; overflow: auto; }
.tbl-scroll thead th { position: sticky; top: 0; background: var(--tk-glass-solid); z-index: 1; }
.row-changed { background: var(--tk-accent-soft); }
.cell-check { width: 40px; }
.cell-wrap { white-space: normal; min-width: 200px; }
.cell-wrap-240 { white-space: normal; min-width: 240px; }
.bulkbar { padding: 10px 14px; }
.savebar {
  position: fixed; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 20px;
  background: var(--tk-glass-solid); border: 1px solid var(--tk-accent-line); backdrop-filter: blur(24px); box-shadow: var(--tk-shadow-pop);
}
.card-danger { border-color: var(--tk-neg-line); }
.row-end { align-items: flex-end; }
.field-180 { flex: 0 0 180px; }
.field-160 { flex: 0 0 160px; }
.field-grow { flex: 1 1 260px; }
.field-strong { color: var(--tk-ink); font-size: var(--tk-fs-table); }
.ink { color: var(--tk-ink); }
.inline-tile { padding: 12px 14px; }
.gap-14 { gap: 14px; }
.cfg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--tk-space-5); align-items: start; }
.cfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cfg-sec { margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cfg-sec legend { padding: 0 6px; margin-left: -6px; }
.cfg-field { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; transition: background .2s; }
.cfg-field.changed { background: var(--tk-accent-soft); }
.cfg-side { position: sticky; top: 24px; }
.cap-derived { font-size: 20px; font-variant-numeric: tabular-nums; }
.sch-bars { gap: 6px; }
.sch-bar-row { gap: 10px; }
.sch-day { width: 30px; flex-shrink: 0; font-family: var(--tk-font-sans); font-size: 12.5px; }
.sch-track-svg { flex: 1; min-width: 0; height: 16px; display: block; overflow: visible; }
.sch-track { fill: var(--tk-track); }
.sch-a { stop-color: var(--tk-accent); }
.sch-b { stop-color: color-mix(in srgb, var(--tk-accent) 60%, var(--tk-pos)); }
.sch-now { fill: var(--tk-now); }
.sch-axis { padding-left: 40px; }
.sch-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px 12px; }
.sch-row .field { flex: 0 0 120px; }
.day-seg { flex-wrap: wrap; }
.day-toggle { min-width: 34px; }

/* ---------- audit, access ---------- */
.mono-sm { font-size: 12.5px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--tk-space-4); }
.v-20 { font-size: 20px; }
.passkey-row { padding: 12px 14px; }
.user-row { padding: 12px 14px; gap: 10px; }
.user-disabled { opacity: .7; }
.gap-18 { gap: 18px; }
.sw-label { font-size: 13px; }
.check-row { font-size: 13px; margin-top: 18px; color: var(--tk-ink); }

/* ---------- overlays: sheet, modal, palette, toast ---------- */
dialog { color: var(--tk-ink); }
dialog::backdrop { background: var(--tk-overlay); backdrop-filter: blur(4px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 24px;
  border-radius: var(--tk-r-lg); background: var(--tk-glass-solid); border: 1px solid var(--tk-line);
  backdrop-filter: blur(30px); box-shadow: var(--tk-shadow-pop);
}
.modal[open] { animation: pop .22s var(--tk-ease); }
@keyframes pop { from { transform: scale(.98); opacity: 0; } }
.modal.danger { border-color: var(--tk-neg-line); }
.modal h2 { font-size: 20px; }
.modal-body:empty { display: none; }
.modal-actions { justify-content: flex-end; }
.modal .preview { padding: 12px 14px; border-radius: 12px; background: var(--tk-chip); font-size: 13px; }
.modal pre.preview { margin: 0; white-space: pre-wrap; font-family: var(--tk-font-mono); font-size: 12px; line-height: 1.55; }
.modal code { font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: var(--tk-chip); }
.modal code.typed-code { color: var(--tk-ink); }
.modal .stepup-code { font-size: 18px; letter-spacing: .3em; text-align: left; }
.modal .lead { font-size: var(--tk-fs-table); color: var(--tk-ink-2); }
.sheet {
  margin: 12px 12px 12px auto; height: calc(100% - 24px); max-height: none; width: min(460px, calc(100% - 24px)); padding: 0;
  border-radius: var(--tk-r-lg); background: var(--tk-glass-solid); border: 1px solid var(--tk-accent-line);
  backdrop-filter: blur(30px); box-shadow: var(--tk-shadow-pop); overflow: auto;
}
.sheet[open] { animation: slide .28s var(--tk-ease); }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.sheet-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.palette {
  margin: 12vh auto auto; width: min(640px, calc(100% - 32px)); padding: 0; border-radius: 18px;
  background: var(--tk-glass-solid); border: 1px solid var(--tk-line); backdrop-filter: blur(30px); box-shadow: var(--tk-shadow-pop); overflow: hidden;
}
.palette .inrow { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 58px; border-bottom: 1px solid var(--tk-line-2); }
.palette input { flex: 1; border: 0; background: transparent; outline: none; font-size: 17px; color: var(--tk-ink); }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow: auto; }
.palette li[role="option"] { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: var(--tk-fs-body); cursor: pointer; }
.palette li[aria-selected="true"] { background: var(--tk-accent-soft); }
.palette .grp { font-size: 11px; letter-spacing: .08em; color: var(--tk-ink-4); padding: 10px 12px 4px; text-transform: uppercase; }
.palette .hint { margin-left: auto; font-size: 12px; color: var(--tk-ink-4); }
.toasts {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100% - 32px));
}
.toast {
  pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px;
  background: var(--tk-glass-solid); border: 1px solid var(--tk-line); backdrop-filter: blur(24px); box-shadow: var(--tk-shadow-pop);
  font-size: var(--tk-fs-table); animation: pop2 .25s ease;
}
.toast .tdot { width: 8px; height: 8px; border-radius: 4px; background: var(--tk-pos); flex-shrink: 0; }
.toast.warn .tdot { background: var(--tk-warn); }
.toast.error .tdot { background: var(--tk-neg); }
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes pop2 { from { transform: translateY(8px); opacity: 0; } }

/* ---------- auth ---------- */
.auth { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding-inline: 16px; padding-block: 40px; }
.auth-card { width: min(440px, 100%); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.auth-step { gap: 18px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.auth-brand .brand-mark { color: var(--tk-accent); display: grid; place-items: center; }
.auth-brand .brand-mark svg { width: 34px; height: 34px; }
.auth-title { font-size: 28px; }
.auth-title-md { font-size: 26px; }
.auth-title-sm { font-size: 24px; }
.qr { width: 168px; height: 168px; border-radius: 14px; align-self: center; }
.manual-code { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .08em; }
.codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: 14px;
  background: var(--tk-chip); font-family: var(--tk-font-mono); font-size: 13px; text-align: center;
}
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- switch ---------- */
.switch { position: relative; width: 44px; height: 26px; border-radius: 13px; border: 0; background: var(--tk-track); padding: 0; flex-shrink: 0; transition: background .2s; display: inline-block; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 10px; background: var(--tk-ink); box-shadow: var(--tk-seg-on-shadow); transition: transform .2s; }
:root[data-theme="light"] .switch::after { background: var(--tk-seg-on); }
.switch[aria-checked="true"] { background: var(--tk-pos); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch[disabled], .switch[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- responsive ---------- */
@media (max-width: 1560px) { .capsule .facts span:nth-child(n+2) { display: none; } }
@media (max-width: 1480px) { .pill-btn .lbl-search { display: none; } }
@media (max-width: 1200px) {
  .ov-row { grid-template-columns: minmax(0, 1fr); }
  .status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .botcard { grid-column: span 4; }
  .detail { height: auto; }
}
@media (max-width: 980px) {
  .tiles5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .botcard { grid-column: span 2; }
  .capsule .facts { display: none; }
}
@media (max-width: 820px) {
  .app, :root[data-nav="full"] .app { grid-template-columns: minmax(0, 1fr); padding-inline: var(--tk-gutter-mobile); padding-block: 16px 96px; gap: 16px; }
  .rail, :root[data-nav="full"] .rail {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto; height: 68px; min-height: 0;
    flex-direction: row; justify-content: space-around; align-items: center; padding: 0 8px; z-index: 20; background: var(--tk-glass-solid);
  }
  .rail .logo, .rail .spacer, .rail .avatar, .rail-toggle, .rail-sub, :root[data-nav="full"] .rail-sub { display: none !important; }
  .rail-btn, :root[data-nav="full"] .rail-btn { width: 46px; height: 56px; grid-auto-flow: row; grid-template-rows: auto auto; gap: 2px; align-content: center; justify-content: center; padding: 0; }
  .rail-btn .tip, .rail .rl, :root[data-nav="full"] .rail .rl { display: none; }
  .rail-btn .ml { display: block; font-size: 9.5px; line-height: 1; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toasts { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); flex-basis: 100%; }
  .page-head h1 { font-size: 28px; }
}
@media (max-width: 820px) {
  .evrow { grid-template-columns: minmax(0, 1fr) auto 14px; row-gap: 4px; }
  .evrow .evtime { grid-column: 1 / 2; }
  .evrow .sev { grid-column: 2 / 3; grid-row: 1; }
  .evrow .chev { grid-column: 3 / 4; grid-row: 1; }
  .evrow .evtxt { grid-column: 1 / -1; }
  .evrow .src, .evrow .evtype { display: none; }
  .evbody { padding: 4px 16px 16px; }
}
@media (max-width: 1100px) { .cfg-layout { grid-template-columns: minmax(0, 1fr); } .cfg-side { position: static; } }
@media (max-width: 820px) { .savebar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } .funnel .fr { grid-template-columns: 120px minmax(0, 1fr) 48px; } }
@media (max-width: 700px) { .cfg-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .tiles5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats { grid-template-columns: minmax(0, 1fr); }
  .status-grid, .grid-4, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .botcard { grid-column: auto; }
  .kv2 { grid-template-columns: minmax(0, 1fr); }
  .capsule .headline { font-size: 13px; }
  .top-actions .hide-sm { display: none; }
}
.only-m { display: none !important; }
@media (max-width: 820px) { .only-m { display: grid !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }