/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Cobalt · enrichment: none · nav: N3 side rail · footer: none
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass · responsive: 320/375/414/768
 */
:root {
  --color-paper: oklch(98.5% 0.006 255);
  --color-panel: oklch(100% 0 0);
  --color-panel-hover: oklch(96.8% 0.01 255);
  --color-ink: oklch(20% 0.025 255);
  --color-ink-soft: oklch(38% 0.025 255);
  --color-muted: oklch(48% 0.022 255);
  --color-rule: oklch(89% 0.014 255);
  --color-rule-strong: oklch(78% 0.025 255);
  --color-accent: oklch(48% 0.22 264);
  --color-accent-hover: oklch(41% 0.22 264);
  --color-accent-soft: oklch(94% 0.04 264);
  --color-accent-ink: oklch(100% 0 0);
  --color-success: oklch(43% 0.13 150);
  --color-success-soft: oklch(95% 0.04 150);
  --color-warning: oklch(48% 0.13 75);
  --color-warning-soft: oklch(95% 0.045 75);
  --color-error: oklch(47% 0.19 25);
  --color-error-soft: oklch(95% 0.04 25);
  --color-focus: oklch(45% 0.23 264);
  --color-backdrop: oklch(15% 0.025 255 / .58);
  --font-display: "Avenir Next", "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem;
  --radius-sm: .375rem; --radius-md: .625rem; --radius-lg: 1rem; --radius-round: 999px;
  --shadow-panel: 0 1px 2px oklch(20% .02 255 / .04), 0 12px 34px oklch(20% .02 255 / .06);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms; --dur-base: 180ms;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{min-height:100dvh;background:var(--color-paper);color:var(--color-ink);font:14px/1.55 var(--font-body);text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}
a{color:var(--color-accent);text-underline-offset:.2em}img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--font-display);font-style:normal;line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere;min-width:0}
h1{font-size:clamp(1.8rem,4vw,2.5rem)}h2{font-size:1.15rem}h3{font-size:1rem}p{margin:0}
:focus{outline:none}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.loading-screen,.error-screen{display:grid;min-height:100dvh;place-items:center;padding:var(--space-6);text-align:center}
.spinner{width:1.3rem;height:1.3rem;border:2px solid var(--color-rule);border-top-color:var(--color-accent);border-radius:50%;animation:spin .7s linear infinite}
.shell{min-height:100dvh}.sidebar{position:fixed;inset:0 auto 0 0;z-index:50;display:flex;width:16rem;flex-direction:column;border-inline-end:1px solid var(--color-rule);background:var(--color-panel);padding:var(--space-6) var(--space-4);transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-out)}
.sidebar.open{transform:none}.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-ink);font:700 1.05rem/1 var(--font-display);text-decoration:none;white-space:nowrap}
.brand-logo{width:2rem;height:2rem;border-radius:var(--radius-sm);object-fit:contain}.nav-title{margin:var(--space-8) var(--space-3) var(--space-2);color:var(--color-muted);font:600 .66rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.nav{display:grid;gap:var(--space-1)}.nav a{display:flex;min-height:2.75rem;align-items:center;gap:var(--space-3);border-radius:var(--radius-md);padding:0 var(--space-3);color:var(--color-ink-soft);font-weight:600;text-decoration:none;white-space:nowrap}
.nav a::before{width:.35rem;height:.35rem;border-radius:50%;background:var(--color-rule-strong);content:""}.nav a.active{background:var(--color-accent-soft);color:var(--color-accent)}.nav a.active::before{background:var(--color-accent)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--color-rule);padding:var(--space-4) var(--space-3) 0}.sidebar-foot small{display:block;overflow:hidden;margin-bottom:var(--space-3);color:var(--color-muted);text-overflow:ellipsis;white-space:nowrap}
.topbar{position:sticky;top:0;z-index:30;display:flex;min-height:4rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-rule);background:var(--color-paper);padding:var(--space-3) var(--space-4)}
.menu,.icon-btn{display:grid;width:2.75rem;height:2.75rem;place-items:center;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-panel);color:var(--color-ink);cursor:pointer}.menu::before{content:"☰"}
.backdrop{position:fixed;inset:0;z-index:40;border:0;background:var(--color-backdrop)}.backdrop[hidden]{display:none}
.main{width:100%;max-width:96rem;margin-inline:auto;padding:var(--space-6) var(--space-4) var(--space-16)}
.page-head{display:grid;gap:var(--space-3);margin-bottom:var(--space-8)}.page-head p{max-width:65ch;color:var(--color-muted)}.actions,.button-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.panel,.metric,.card{min-width:0;border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:var(--color-panel);box-shadow:var(--shadow-panel)}
.panel{padding:var(--space-5)}.panel+.panel{margin-top:var(--space-5)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-6)}.metric{padding:var(--space-4)}.metric strong{display:block;font:650 clamp(1.45rem,4vw,2rem)/1.1 var(--font-display);font-variant-numeric:tabular-nums}.metric span{display:block;margin-top:var(--space-2);color:var(--color-muted);font-size:.75rem}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}.toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-3);margin-bottom:var(--space-5)}
.btn{display:inline-flex;min-height:2.75rem;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius-md);padding:0 var(--space-4);font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.btn.primary{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink)}.btn.secondary{border-color:var(--color-rule-strong);background:var(--color-panel);color:var(--color-ink)}.btn.danger{border-color:var(--color-error);background:var(--color-error);color:var(--color-accent-ink)}.btn.small{min-height:2.2rem;padding-inline:var(--space-3);font-size:.75rem}.btn:active{transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.55;transform:none}
label{display:block;margin-bottom:var(--space-2);color:var(--color-ink-soft);font-size:.75rem;font-weight:700}.field{min-width:0;margin-bottom:var(--space-4)}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;min-height:2.75rem;border:1px solid var(--color-rule-strong);border-radius:var(--radius-md);outline:2px solid transparent;outline-offset:1px;background:var(--color-panel);color:var(--color-ink);padding:var(--space-2) var(--space-3)}
textarea{min-height:7rem;resize:vertical}input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--color-focus)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.55}input[type=checkbox]{accent-color:var(--color-accent)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--space-4)}.help{min-height:1lh;margin-top:var(--space-1);color:var(--color-muted);font-size:.72rem}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--color-rule);border-radius:var(--radius-md)}table{width:100%;border-collapse:collapse;font-size:.78rem}th,td{padding:var(--space-3);border-bottom:1px solid var(--color-rule);text-align:start;vertical-align:middle}th{background:var(--color-panel-hover);color:var(--color-muted);font:600 .68rem/1 var(--font-mono);letter-spacing:.04em;white-space:nowrap}tr:last-child td{border-bottom:0}.mono{font-family:var(--font-mono);overflow-wrap:anywhere}
.badge{display:inline-flex;min-height:1.55rem;align-items:center;border-radius:var(--radius-round);padding:0 var(--space-2);background:var(--color-panel-hover);color:var(--color-ink-soft);font-size:.68rem;font-weight:700;white-space:nowrap}.badge.good{background:var(--color-success-soft);color:var(--color-success)}.badge.warn{background:var(--color-warning-soft);color:var(--color-warning)}.badge.bad{background:var(--color-error-soft);color:var(--color-error)}
.empty{padding:var(--space-10) var(--space-4);color:var(--color-muted);text-align:center}.notice,.error{margin-bottom:var(--space-4);border:1px solid;border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}.notice{border-color:var(--color-rule);background:var(--color-panel);color:var(--color-ink-soft)}.error{border-color:var(--color-error);background:var(--color-error-soft);color:var(--color-error)}
.locale-switcher{position:fixed;inset-block-start:var(--space-4);inset-inline-end:var(--space-4);z-index:90;width:auto;min-width:7.5rem;min-height:2.35rem;background:var(--color-panel);box-shadow:var(--shadow-panel);font-size:.75rem}
.toast{position:fixed;inset:auto var(--space-4) max(var(--space-4),env(safe-area-inset-bottom));z-index:100;max-width:26rem;border-radius:var(--radius-md);background:var(--color-ink);color:var(--color-panel);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-panel)}
dialog{position:fixed;inset:0;width:min(calc(100% - 2rem),34rem);height:fit-content;max-height:85dvh;margin:auto;border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:var(--color-panel);color:var(--color-ink);padding:var(--space-6);box-shadow:var(--shadow-panel);overflow:auto}dialog::backdrop{background:var(--color-backdrop)}dialog h2{margin-bottom:var(--space-5);padding-inline-end:var(--space-10)}.dialog-close{position:absolute;inset-block-start:var(--space-4);inset-inline-end:var(--space-4);margin:0}.dialog-close .icon-btn{width:2.25rem;height:2.25rem}
.auth{display:grid;min-height:100dvh;grid-template-columns:minmax(0,1fr);background:var(--color-paper)}.auth-copy{display:none;background:var(--color-ink);color:var(--color-panel);padding:var(--space-12)}.auth-copy h1{max-width:10ch;color:inherit;font-size:clamp(2.5rem,6vw,5rem)}.auth-form-wrap{display:grid;place-items:center;padding:var(--space-5)}.auth-form{width:min(100%,25rem)}.auth-form .brand{margin-bottom:var(--space-12)}.auth-form h2{font-size:1.65rem}.auth-form>p{margin:var(--space-2) 0 var(--space-8);color:var(--color-muted)}
.checkout{width:min(100%,46rem);margin-inline:auto;padding:var(--space-6) var(--space-4) var(--space-16)}.checkout-head{padding:var(--space-8) 0;border-bottom:1px solid var(--color-rule)}.checkout-amount{margin-top:var(--space-6);font:650 clamp(2.5rem,10vw,5rem)/1 var(--font-display);letter-spacing:-.05em}.qr{width:min(72vw,18rem);aspect-ratio:1;margin:var(--space-6) auto;border:1px solid var(--color-rule);border-radius:var(--radius-lg);object-fit:contain}
@media(hover:hover) and (pointer:fine){.nav a:hover,.btn.secondary:hover{background:var(--color-panel-hover)}.btn.primary:hover{background:var(--color-accent-hover)}input:hover,select:hover,textarea:hover{background:var(--color-panel-hover)}}
@media(min-width:40rem){.main{padding:var(--space-8)}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-head{grid-template-columns:minmax(0,1fr) auto;align-items:end}.page-head p{grid-column:1/-1}}
@media(min-width:60rem){.sidebar{transform:none}.topbar{display:none}.main{width:calc(100% - 16rem);margin-inline-start:16rem;padding:var(--space-10)}.backdrop{display:none!important}.auth{grid-template-columns:minmax(0,1fr) minmax(28rem,.72fr)}.auth-copy{display:flex;flex-direction:column;justify-content:space-between}}
@media(pointer:coarse){.btn,.nav a,button{min-height:3rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}}
@keyframes spin{to{transform:rotate(360deg)}}