:root {
  --bg: oklch(14% 0.012 292);
  --surface-1: oklch(17% 0.014 292);
  --surface-2: oklch(20% 0.016 292);
  --surface-3: oklch(24% 0.018 292);
  --border: oklch(31% 0.018 292);
  --text: oklch(91% 0.009 292);
  --muted: oklch(69% 0.014 292);
  --accent: oklch(79% 0.12 157);
  --accent-ink: oklch(20% 0.035 157);
  --success: oklch(72% 0.15 153);
  --warning: oklch(77% 0.15 78);
  --danger: oklch(66% 0.18 25);
  --info: oklch(72% 0.09 264);
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: .75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --z-modal: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; min-width: 20rem; min-height: 100vh; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.5; letter-spacing: .01em; }
button, input, select { font: inherit; }
button, select, input { color: var(--text); }
button { cursor: pointer; }
button:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 600; padding: .75rem 1rem; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }
.shell { min-height: 100vh; display: grid; grid-template: 4.25rem 1fr / 12.25rem 1fr; grid-template-areas: "side top" "side main"; }
.sidebar { grid-area: side; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface-1); }
.brand { height: 4.25rem; display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; border-bottom: 1px solid var(--border); font-weight: 720; letter-spacing: .06em; }
.brand-mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--bg); background: var(--text); border-radius: .28rem; font-weight: 850; transform: skew(-4deg); }
.nav { display: grid; gap: .25rem; padding: 1rem .75rem; }
.nav-item { min-height: 2.75rem; display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); text-align: left; }
.nav-item > span:first-child { width: 1.25rem; color: currentColor; font-size: 1.25rem; text-align: center; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:active { transform: translateY(1px); }
.nav-item.active { background: var(--accent); color: var(--accent-ink); font-weight: 680; }
.sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; display: flex; justify-content: space-between; border-top: 1px solid var(--border); color: var(--muted); font-size: .875rem; }
.topbar { grid-area: top; position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.system-state, .top-meta { display: flex; align-items: center; gap: .75rem; }
.top-meta { color: var(--muted); font-size: .875rem; }
.owner { padding-left: .75rem; border-left: 1px solid var(--border); }
.state-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--muted); }
.state-dot.success { background: var(--success); }
.state-dot.warning { background: var(--warning); }
.state-dot.error { background: var(--danger); }
main { grid-area: main; min-width: 0; padding: 1.5rem; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; }
h2 { margin-bottom: 0; font-size: 1rem; line-height: 1.25; font-weight: 680; }
.eyebrow { margin-bottom: .25rem; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.muted { color: var(--muted); }
.mono, td.numeric { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", monospace; }
.head-actions, .filters { display: flex; align-items: center; gap: .5rem; }
.badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .125rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .6875rem; font-weight: 760; letter-spacing: .06em; }
.badge.success { color: var(--success); border-color: oklch(45% .08 153); }
.badge.warning { color: var(--warning); border-color: oklch(48% .08 78); }
.badge.info { color: var(--info); border-color: oklch(45% .06 264); }
.badge.danger { color: var(--danger); border-color: oklch(44% .09 25); }
.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 680; transition: transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out; }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .48; cursor: not-allowed; }
.button.primary { color: var(--accent-ink); background: var(--accent); }
.button.primary:hover { background: oklch(84% .11 157); }
.button.secondary { background: var(--surface-2); border-color: var(--border); }
.button.secondary:hover { background: var(--surface-3); }
.button.danger { background: oklch(30% .09 25); border-color: oklch(48% .15 25); color: oklch(88% .05 25); }
.button.danger:hover { background: oklch(36% .12 25); }
.text-button { min-height: 2.75rem; border: 0; background: transparent; color: var(--accent); padding: .5rem; }
.view { display: none; }
.view.active { display: block; }
.section, .scanner-strip { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); }
.section { margin-bottom: 1rem; overflow: hidden; }
.section-head { min-height: 3.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem .875rem; border-bottom: 1px solid var(--border); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { height: 3rem; padding: .625rem .875rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .75rem; font-weight: 620; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.scanner-strip { min-height: 5.5rem; display: grid; grid-template-columns: 1.1fr 1.5fr auto; align-items: center; gap: 1.5rem; margin: 1rem 0; padding: 1rem; }
.scanner-strip h2 { font-size: 1.125rem; }
.mode-group { display: flex; align-items: center; gap: 1.25rem; }
.mode-group label { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); cursor: pointer; }
input[type="radio"] { accent-color: var(--accent); width: 1.125rem; height: 1.125rem; }
.split { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1.2fr); gap: 1rem; }
.process-row, .trade-row, .profile-row, .asset-row { min-height: 3.25rem; display: grid; align-items: center; gap: .75rem; padding: .625rem .875rem; border-bottom: 1px solid var(--border); font-size: .875rem; }
.process-row { grid-template-columns: minmax(8rem, 1fr) auto auto; }
.trade-row { grid-template-columns: 5.5rem 1fr 1fr auto; }
.profile-row { grid-template-columns: minmax(9rem, 1fr) auto auto auto; }
.asset-row { grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 1fr) 6rem 5rem; }
.process-row:last-child, .trade-row:last-child, .profile-row:last-child, .asset-row:last-child { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: .45rem; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); }
.status.running::before, .status.authorized::before { background: var(--success); }
.status.armed::before { background: var(--warning); }
.status.failed::before, .status.blocked::before { background: var(--danger); }
select, input[type="search"], dialog input { min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
input[type="search"] { min-width: min(20rem, 60vw); }
.empty { padding: 2rem 1rem; color: var(--muted); text-align: center; }
.statline { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1rem .875rem; border-bottom: 1px solid var(--border); }
.statline span { color: var(--muted); font-size: .75rem; }
.statline strong { display: block; margin-top: .25rem; color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.logs { min-height: 12rem; max-height: 30rem; margin: 0; padding: 1rem; overflow: auto; color: oklch(83% .035 157); background: oklch(12% .01 292); font: .75rem/1.6 ui-monospace, "Cascadia Mono", monospace; white-space: pre-wrap; }
.access-state { min-height: calc(100vh - 9rem); display: grid; place-content: center; justify-items: center; text-align: center; }
.access-state[hidden] { display: none; }
.access-state p { max-width: 36ch; color: var(--muted); }
.access-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-md); font-weight: 850; font-size: 1.5rem; }
.bottom-nav { display: none; }
dialog { width: min(30rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface-2); }
dialog::backdrop { background: oklch(8% .01 292 / .78); }
dialog label { display: grid; gap: .5rem; margin-top: 1.25rem; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.form-grid label { margin-top: 0; }
.form-wide { grid-column: 1 / -1; }
.qr-progress { padding: 1rem; margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; }
.qr-progress img { width: min(15rem, 70vw); height: auto; background: oklch(96% .005 292); border-radius: var(--radius-sm); image-rendering: pixelated; }
.qr-progress p { max-width: 38ch; margin: .75rem auto 0; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.toast { position: fixed; z-index: 500; right: 1rem; bottom: 1rem; max-width: 24rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3); transform: translateY(6rem); opacity: 0; transition: transform 200ms ease-out, opacity 200ms ease-out; }
.toast.show { transform: translateY(0); opacity: 1; }
.skeleton { color: transparent; border-radius: .25rem; background: var(--surface-3); animation: pulse 1.4s ease-in-out infinite alternate; }
@keyframes pulse { to { background: oklch(28% .018 292); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 64rem) {
  .shell { grid-template-columns: 4.25rem 1fr; }
  .brand { justify-content: center; padding: 0; }
  .brand > span:last-child, .nav-item > span:last-child, .sidebar-foot { display: none; }
  .nav-item { justify-content: center; padding-inline: 0; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 47.99rem) {
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .shell { display: block; padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .topbar { height: 3.75rem; padding: 0 .875rem; }
  .owner, #clock { display: none; }
  main { padding: .875rem; }
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 1.25rem; }
  .head-actions .badge { display: none; }
  .scanner-strip { grid-template-columns: 1fr; gap: .75rem; }
  .mode-group { justify-content: space-between; }
  .scanner-strip .button { width: 100%; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-head:has(.filters) { gap: .75rem; }
  .filters { width: 100%; }
  .filters select { flex: 1; min-width: 0; }
  .profile-row { grid-template-columns: 1fr auto; }
  .profile-row > :nth-child(3), .profile-row > :nth-child(4) { grid-column: span 1; }
  .asset-row { grid-template-columns: 1fr auto; }
  .trade-row { grid-template-columns: 4.5rem 1fr auto; }
  .trade-row > :nth-child(3) { display: none; }
  .top-meta { display: none; }
  .bottom-nav { position: fixed; z-index: 200; left: 0; right: 0; bottom: 0; min-height: calc(4.25rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--border); background: var(--surface-1); }
  .bottom-nav button { min-height: 4.25rem; display: grid; place-content: center; gap: .1rem; border: 0; background: transparent; color: var(--muted); }
  .bottom-nav button.active { color: var(--accent); }
  .bottom-nav span { font-size: 1.125rem; }
  .bottom-nav small { font-size: .625rem; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
}