/* Hallmark · shape: Console (one system for portal and admin) · genre: modern-minimal · theme: Ultraviolet, shared with the landing through site/tokens.css · redesign: panels
 * axes: dark/geometric-sans/cool · posture: committed · contrast: pass · job: manage services, pay, ask for support · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, the admin tables stay dense because the operator reads rows, not pages */
/* Hallmark · dropped the blue Inter theme, uppercase table heads, the mono task names, dot-joined meta strings and every inline style attribute · portal and admin read as one brand with the landing, and the owner banned inline css */
@import url("./site/tokens.css");
@import url("./site/domain-search.css");

:root {
  --color-edge: oklch(56% 0.06 292);
  --color-ok: oklch(80% 0.15 155);
  --color-warn: oklch(83% 0.14 85);
  --color-bad: oklch(77% 0.15 25);
  --color-info: var(--color-accent-text);
  --measure-panel: 1120px;
  --sidebar: 248px;
  --control-h: 44px;
  --control-h-sm: 34px;
  --radius-control: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-edge) var(--color-paper); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: var(--color-accent-text); text-decoration: none; text-underline-offset: 0.16em; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-sm); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; color: var(--color-ink); }
button, input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
ul, ol { margin: 0; padding-left: var(--space-lg); }
li + li { margin-top: var(--space-2xs); }

.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--font-outlier); font-size: var(--text-sm); overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.selectable { user-select: all; }
.grow { flex: 1 1 260px; min-width: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.brand { display: inline-flex; align-items: baseline; gap: 0; color: var(--color-ink); font: 500 var(--text-xl)/1 var(--font-display); letter-spacing: -0.03em; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--color-accent-text); }
.brand small { margin-left: var(--space-sm); padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-ink); font: 500 var(--text-xs)/1.5 var(--font-body); letter-spacing: 0; }

.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 92%, transparent); border-bottom: var(--rule-hair) solid var(--color-rule); backdrop-filter: blur(10px); }
.topbar__inner { display: flex; align-items: center; gap: var(--space-lg); height: 68px; width: 100%; max-width: var(--measure-panel); margin-inline: auto; padding-inline: var(--space-lg); }
.nav { display: flex; align-items: center; gap: var(--space-2xs); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-h-sm); padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-muted); font-weight: 500; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.nav a:hover { background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-ink); }

.wrap { width: 100%; max-width: var(--measure-panel); margin-inline: auto; padding: var(--space-xl) var(--space-lg) var(--space-2xl); }

.shell { min-height: 100vh; padding-left: var(--sidebar); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: var(--z-sticky); display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg) var(--space-md); background: var(--color-paper-2); border-right: var(--rule-hair) solid var(--color-rule); overflow-y: auto; }
.sidebar .brand { padding-inline: var(--space-sm); }
.sidebar__nav { display: flex; flex-direction: column; gap: var(--space-md); flex: 1; }
.sidebar__group { display: flex; flex-direction: column; gap: var(--space-3xs); }
.sidebar__title { padding: 0 var(--space-sm) var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.sidebar__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--control-h-sm); padding: 0 var(--space-sm); border-radius: var(--radius-control); color: var(--color-ink-2); font-weight: 500; transition: background-color var(--dur-micro) var(--ease-out); }
.sidebar__link:hover { background: var(--color-paper-3); text-decoration: none; }
.sidebar__link[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-ink); }
.sidebar__foot { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.sidebar__foot span { padding-inline: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.main { min-width: 0; padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
.main__inner { width: 100%; max-width: var(--measure-panel); margin-inline: auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.page-head > div { min-width: 0; }
.page-head p { margin: var(--space-2xs) 0 0; color: var(--color-muted); }
.page-head .crumb { margin: 0 0 var(--space-2xs); font-size: var(--text-sm); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-md); }
.section-head h2 { margin: 0; }
.section-head span { color: var(--color-muted); font-size: var(--text-sm); }

.card { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
.card.flush { padding: var(--space-2xs) var(--space-md); }
.card.bare { padding: 0; overflow: hidden; }
.card > h2, .card > h3 { margin-bottom: var(--space-md); }
.card.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); }
.card.toolbar form { margin-left: auto; display: flex; gap: var(--space-xs); }
a.card { display: block; color: inherit; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
a.card:hover { text-decoration: none; border-color: var(--color-edge); background: var(--color-paper-3); }
a.card[aria-current="true"] { border-color: var(--color-accent-text); }

.grid { display: grid; gap: var(--space-md); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grid.split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack.tight { gap: var(--space-xs); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.cluster.end { justify-content: flex-end; }
.cluster.top { align-items: flex-start; }

.stat { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); }
.stat .k { color: var(--color-muted); font-size: var(--text-sm); }
.stat .v { color: var(--color-ink); font: 300 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .v.sm { font-size: var(--text-lg); font-weight: 500; line-height: 1.3; }

.service { display: flex; flex-direction: column; gap: var(--space-md); }
.service__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.service__kind { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.service__name { font: 500 var(--text-xl)/1.2 var(--font-display); color: var(--color-ink); overflow-wrap: anywhere; }
.service__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: flex-end; }
.service__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.service__actions .spacer { flex: 1; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md) var(--space-lg); margin: 0; }
.facts div { min-width: 0; }
.facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.facts dd { margin: 0; color: var(--color-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.facts dd .muted { font-weight: 400; }

meter { appearance: none; -webkit-appearance: none; width: 120px; height: 8px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); vertical-align: middle; overflow: hidden; }
meter::-webkit-meter-bar { background: var(--color-paper-3); border: 0; border-radius: var(--radius-pill); height: 8px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value { background: var(--color-accent-text); border-radius: var(--radius-pill); }
meter::-webkit-meter-even-less-good-value { background: var(--color-bad); border-radius: var(--radius-pill); }
meter::-moz-meter-bar { background: var(--color-accent-text); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-bad); }

.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap; }
.badge.ok { background: color-mix(in oklab, var(--color-ok) 16%, transparent); color: var(--color-ok); }
.badge.warn, .badge.warning { background: color-mix(in oklab, var(--color-warn) 16%, transparent); color: var(--color-warn); }
.badge.err, .badge.critical { background: color-mix(in oklab, var(--color-bad) 16%, transparent); color: var(--color-bad); }
.badge.info { background: color-mix(in oklab, var(--color-info) 16%, transparent); color: var(--color-info); }
.nav .badge, .sidebar__link .badge { min-height: 20px; padding: 0 var(--space-xs); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-edge); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); text-decoration: none; }
.btn:active { background: var(--color-paper-2); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn.primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn.quiet { border-color: transparent; color: var(--color-accent-text); }
.btn.quiet:hover { background: var(--color-paper-3); }
.btn.danger { color: var(--color-bad); border-color: color-mix(in oklab, var(--color-bad) 50%, transparent); }
.btn.sm { min-height: var(--control-h-sm); padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
form.inline { display: inline-flex; margin: 0; }
form.flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; }

label { display: block; margin: 0 0 var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; }
.field { margin-bottom: var(--space-md); }
.field .hint { margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=file], select, textarea { width: 100%; min-height: var(--control-h); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-edge); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font: inherit; transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 0.8; }
textarea { min-height: 140px; padding: var(--space-sm) var(--space-md); resize: vertical; line-height: 1.5; }
textarea.ta-s { min-height: 84px; }
textarea.ta-l { min-height: 320px; }
select { appearance: none; padding-right: var(--space-xl); background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
input.sm, select.sm { min-height: var(--control-h-sm); font-size: var(--text-sm); padding-inline: var(--space-sm); }
input.w-amount { width: 96px; }
input.w-note { width: 160px; }
select.w-auto { width: auto; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--color-accent); flex: none; }
.row { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.row.end { align-items: end; }
.check { display: flex; align-items: flex-start; gap: var(--space-sm); margin: 0 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-md); font-weight: 400; }
.check span { min-width: 0; }

.alert { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); margin-bottom: var(--space-md); font-weight: 500; background: color-mix(in oklab, var(--color-info) 14%, transparent); color: var(--color-ink); border: var(--rule-hair) solid color-mix(in oklab, var(--color-info) 40%, transparent); }
.alert.ok { background: color-mix(in oklab, var(--color-ok) 12%, transparent); border-color: color-mix(in oklab, var(--color-ok) 40%, transparent); }
.alert.error { background: color-mix(in oklab, var(--color-bad) 12%, transparent); border-color: color-mix(in oklab, var(--color-bad) 45%, transparent); }
.alert.warn { background: color-mix(in oklab, var(--color-warn) 12%, transparent); border-color: color-mix(in oklab, var(--color-warn) 45%, transparent); }
.alert a { font-weight: 600; }

.todo { padding: 0; overflow: hidden; margin-bottom: var(--space-lg); }
.todo__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.todo__head h2 { font-size: var(--text-lg); }
.todo ul { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0; padding: var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); border-left: 3px solid transparent; }
.todo li:last-child { border-bottom: 0; }
.todo li.first { border-left-color: var(--color-bad); background: color-mix(in oklab, var(--color-bad) 8%, transparent); }
.todo li.first span { color: var(--color-ink); font-weight: 500; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: top; }
th { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
td { color: var(--color-ink-2); }
tbody tr:hover td { background: color-mix(in oklab, var(--color-paper-3) 55%, transparent); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; }
td .sub { display: block; color: var(--color-muted); font-size: var(--text-sm); }
td.wide { min-width: 300px; }
.table-wrap { overflow-x: auto; }
.table-wrap.edge { margin-inline: calc(var(--space-md) * -1); padding-inline: var(--space-md); }

.thread { display: flex; flex-direction: column; gap: var(--space-sm); }
.msg { max-width: 760px; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.msg.staff { align-self: flex-end; width: 100%; background: var(--color-paper-3); border-color: var(--color-edge); }
.msg .who { display: flex; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); }
.msg .who .muted { font-weight: 400; }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-ink-2); }
.empty { padding: var(--space-xl) var(--space-md); text-align: center; color: var(--color-muted); }
pre.box { margin: 0; padding: var(--space-md); border-radius: var(--radius-control); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font: var(--text-sm)/1.5 var(--font-outlier); white-space: pre-wrap; max-height: 420px; overflow: auto; }
details summary { cursor: pointer; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
details[open] summary { margin-bottom: var(--space-xs); }
details summary:hover { color: var(--color-ink); }
.stat-link { text-decoration: none; }
.footer { padding: var(--space-lg); text-align: center; color: var(--color-muted); font-size: var(--text-sm); }

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth__aside { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding: var(--space-2xl); background: var(--color-paper-2); border-right: var(--rule-hair) solid var(--color-rule); }
.auth__mast { font: 500 clamp(3rem, 7vw, 6rem)/0.9 var(--font-display); letter-spacing: -0.045em; color: var(--color-ink); }
.auth__mast em { font-style: normal; color: var(--color-accent-text); }
.auth__aside p { max-width: 34ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.4; }
.auth__aside small { color: var(--color-muted); font-size: var(--text-sm); }
.auth__main { display: flex; align-items: center; justify-content: center; padding: var(--space-xl) var(--space-lg); }
.auth__panel { width: 100%; max-width: 400px; }
.auth__panel h1 { margin-bottom: var(--space-xs); }
.auth__panel > p { margin-bottom: var(--space-lg); color: var(--color-muted); }
.auth__panel .links { margin-top: var(--space-md); text-align: center; font-size: var(--text-sm); }
.auth.admin .auth__aside { background: var(--color-paper-3); }
.auth__tag { align-self: flex-start; }

.public-narrow { max-width: 520px; margin-inline: auto; padding-top: var(--space-xl); }

@media (max-width: 60rem) {
  .shell { padding-left: 0; }
  .sidebar { position: static; width: auto; height: auto; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); overflow: visible; }
  .sidebar__nav { flex-direction: row; gap: var(--space-xs); overflow-x: auto; flex: none; scrollbar-width: none; }
  .sidebar__group { flex-direction: row; gap: var(--space-2xs); flex: none; }
  .sidebar__title { display: none; }
  .sidebar__link { white-space: nowrap; border-radius: var(--radius-pill); padding-inline: var(--space-md); }
  .sidebar__foot { flex-direction: row; align-items: center; justify-content: space-between; border-top: 0; padding-top: 0; }
  .main { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .grid.split { grid-template-columns: minmax(0, 1fr); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__aside { padding: var(--space-lg); gap: var(--space-md); border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .auth__mast { font-size: 3rem; }
}
@media (max-width: 40rem) {
  .topbar__inner { gap: var(--space-sm); padding-inline: var(--space-md); height: 60px; }
  .wrap { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .service__head { flex-direction: column; }
  .service__tags { justify-content: flex-start; }
  .card { padding: var(--space-md); }
  .page-head .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

.mt-0 { margin-top: 0; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin: 0; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.feed li:last-child { border-bottom: 0; }
.feed .sub { width: 100%; color: var(--color-muted); font-size: var(--text-sm); }
.feed li.small { display: block; }
.prewrap { white-space: pre-wrap; }
.search { flex-wrap: nowrap; }
@media (max-width: 40rem) { .search { flex-wrap: wrap; } }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.tone-bad { color: var(--color-bad); }
input.w-search { width: 220px; }
.main__inner > .card + .card, .wrap > .card + .card, .main__inner > .card + form.card, .main__inner > form.card + .card { margin-top: var(--space-md); }
.subnav { display: flex; gap: var(--space-2xs); margin: 0 0 var(--space-md); padding: var(--space-xs) 0; overflow-x: auto; scrollbar-width: none; background: color-mix(in oklab, var(--color-paper) 94%, transparent); backdrop-filter: blur(10px); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.subnav a:hover { background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; }
html { scroll-padding-top: var(--space-3xl); scroll-behavior: smooth; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
form.flex.pay { flex-wrap: nowrap; }
input.w-amount { width: 88px; }
select.sm { padding-right: var(--space-xl); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; }
td.wide { min-width: 360px; }
td .sub { overflow-wrap: anywhere; }
.card + p, .card.flush + p { margin-top: var(--space-md); }
.auth__aside .stack { gap: var(--space-lg); }
.auth__mast { padding-bottom: var(--space-2xs); }
@media (max-width: 60rem) { form.flex.pay { flex-wrap: wrap; } td.wide { min-width: 0; } }
form.inline { gap: var(--space-xs); }
input[type=file] { padding: var(--space-2xs) var(--space-sm); line-height: calc(var(--control-h) - 8px); color: var(--color-muted); }
input[type=file]::file-selector-button { margin-right: var(--space-sm); min-height: var(--control-h-sm); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-edge); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-sm) var(--font-display); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--color-paper-3); }
td.num { white-space: nowrap; }
@media (max-width: 40rem) {
  .topbar__inner { flex-wrap: wrap; height: auto; padding-block: var(--space-sm); row-gap: var(--space-xs); }
  .topbar__inner .brand { order: 1; }
  .topbar__inner form.inline, .topbar__inner > .btn { order: 2; margin-left: auto; }
  .nav { order: 3; flex: 1 0 100%; }
}

.brand__logo { display: block; height: 32px; width: auto; max-width: 180px; }
.logo-preview { display: block; max-height: 64px; max-width: 240px; width: auto; padding: var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper-3); }
.is-hidden { display: none; }