/* ===========================================================
   Panel – design system ("Blockworks Mono", taken from v1's /v2)
   Dark, quiet, monochrome, built from square blocks: chunky edges,
   bevelled panels, pixel headings.
   =========================================================== */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #111111;
  --surface: #1a1a1a;
  --surface-hover: #262626;
  --border: #2a2a2a;
  --border-strong: #3d3d3d;
  --edge: #0a0a0a;
  --accent: #e5e5e5;
  --bevel-raised: inset -3px -3px 0 rgba(0, 0, 0, 0.3), inset 3px 3px 0 rgba(255, 255, 255, 0.25);
  --side-w: 248px;
  --side-w-collapsed: 72px;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --text: #f5f5f5;
  --text-muted: #9a9a9a;
  --text-faint: #8f8f8f;
  --danger: #f47067;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
button { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1 { margin: 0; }
:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; }
svg.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: text-bottom; }

/* ---------- brand ---------- */
.brand-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-family: var(--pixel); font-size: 13px; color: #111111; background: var(--accent); box-shadow: var(--bevel-raised); }

/* ---------- shell: sidebar (collapsible) · main ---------- */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.side { position: sticky; top: 0; z-index: 40; flex: none; display: flex; flex-direction: column; width: var(--side-w); height: 100vh; background: #141414; border-right: 4px solid var(--edge); transition: width .2s ease; }
.side-head { display: flex; align-items: center; gap: 8px; min-height: 68px; padding: 14px 12px 14px 16px; border-bottom: 4px solid var(--edge); }
.side-brand, .topbar-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.brand-name { font-family: var(--pixel); font-size: 16px; letter-spacing: 0.04em; white-space: nowrap; }
.side-toggle, .side-close, .topbar-menu { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--text-muted); cursor: pointer; transition: color .15s, background .15s; }
.side-toggle:hover, .side-close:hover, .topbar-menu:hover { color: var(--text); background: var(--surface-hover); }
.side-close { display: none; }
.side-close .icon, .topbar-menu .icon { width: 20px; height: 20px; }
.side-toggle .icon { transform: rotate(180deg); transition: transform .2s; }
.side-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px; overflow-y: auto; overflow-x: hidden; }
.side-group { padding: 14px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; white-space: nowrap; }
.side-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; color: var(--text-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .15s, background .15s; }
.side-link .icon { width: 18px; height: 18px; }
.side-link:hover, .side-link:focus-visible { color: var(--text); background: var(--surface-hover); outline: none; }
.side-link[aria-current="page"] { color: var(--text); background: #262626; box-shadow: inset 4px 0 0 var(--accent); font-weight: 600; }
.side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot { display: flex; align-items: center; gap: 4px; padding: 12px; border-top: 4px solid var(--edge); }
.side-account { flex: 1; min-width: 0; }
.side-account .side-link { min-height: 48px; }
.side-who { display: flex; flex-direction: column; line-height: 1.2; }
.side-who strong { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.side-who small { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
button.side-link { border: 0; background: none; cursor: pointer; }
.side-logout { flex: none; width: 40px; justify-content: center; padding: 0; }

/* Collapsed: icons only. */
.nav-collapsed .side { width: var(--side-w-collapsed); }
.nav-collapsed .side-head { flex-direction: column; padding: 14px 0 10px; }
.nav-collapsed .side-brand { flex: none; }
.nav-collapsed .side-label { display: none; }
.nav-collapsed .side-toggle .icon { transform: none; }
.nav-collapsed .side-nav { padding: 12px 10px; }
.nav-collapsed .side-group { height: 0; padding: 0; margin: 10px 6px; border-top: 2px solid var(--border-strong); }
.nav-collapsed .side-link { justify-content: center; padding: 0; }
.nav-collapsed .side-foot { flex-direction: column; padding: 10px; }
.nav-collapsed .side-account, .nav-collapsed .side-logout { flex: none; width: 48px; }

/* Small screens: top bar + sidebar as a drawer. */
.topbar, .side-backdrop { display: none; }

/* ---------- layout ---------- */
main { flex: 1; min-width: 0; padding: 32px clamp(16px, 3vw, 40px) 72px; }
.page-title { padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.page-title h1 { font-family: var(--pixel); font-size: 26px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; }

@media (max-width: 860px) {
  .app-shell { display: block; }
  .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: calc(8px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left)); background: #141414; border-bottom: 4px solid var(--edge); }
  /* dvh: 100vh would hide the account row behind the phone's browser bar. */
  .side, .nav-collapsed .side { position: fixed; left: 0; top: 0; width: min(var(--side-w), 85vw); height: 100vh; height: 100dvh; visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility 0s .2s; }
  .nav-open .side { visibility: visible; transform: none; transition: transform .2s ease; }
  .nav-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .6); }
  body:has(.nav-open) { overflow: hidden; }
  .side-toggle { display: none; }
  .side-close { display: grid; }
  .side-head, .nav-collapsed .side-head { padding-top: calc(14px + env(safe-area-inset-top)); padding-left: calc(16px + env(safe-area-inset-left)); }
  .side-nav { overscroll-behavior: contain; }
  .side-foot, .nav-collapsed .side-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); padding-left: calc(12px + env(safe-area-inset-left)); }
  main { padding: 20px calc(16px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  .page-title h1 { font-size: 22px; overflow-wrap: anywhere; }
  .nav-collapsed .side-head { flex-direction: row; padding-right: 12px; padding-bottom: 14px; }
  .nav-collapsed .side-brand { flex: 1; }
  .nav-collapsed .side-label { display: block; }
  .nav-collapsed .side-who { display: flex; }
  .nav-collapsed .side-nav { padding: 12px; }
  .nav-collapsed .side-group { height: auto; padding: 14px 10px 6px; margin: 0; border-top: 0; }
  .nav-collapsed .side-link { justify-content: flex-start; padding: 0 12px; }
  .nav-collapsed .side-foot { flex-direction: row; padding-top: 12px; padding-right: 12px; }
  .nav-collapsed .side-account { flex: 1; width: auto; }
  .nav-collapsed .side-logout { width: 44px; }
}

/* ---------- login ---------- */
.brand-mark-lg { width: 56px; height: 56px; font-size: 18px; }
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 420px at 50% -120px, rgba(255, 255, 255, .05), transparent 70%); }
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.login-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 32px; animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.login-card form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pw-row { width: 100%; display: flex; gap: 6px; padding: 5px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.pw-row:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.pw-row input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; outline: none; padding: 8px 12px; font-size: 15px; height: 38px; }
.pw-row input::placeholder { color: var(--text-faint); }
.pw-row input.otp { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.pw-row input.otp::placeholder { letter-spacing: normal; }
.pw-go { width: 38px; height: 38px; flex: none; border: 0; border-radius: 10px; color: var(--bg); background: var(--text); cursor: pointer; display: grid; place-items: center; transition: transform .15s, opacity .2s; }
.pw-go svg.icon { width: 18px; height: 18px; stroke-width: 2.2; }
.pw-go:hover { transform: translateX(2px); }
.pw-go:disabled { opacity: .5; cursor: wait; }
.msg { min-height: 18px; margin: 4px 0 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.msg.error { color: var(--danger); }
.msg a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-faint); }
.login-lead { margin: 0 0 4px; font-size: 15px; text-align: center; }
.login-card-text { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.muted { color: var(--text-muted); }
.btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 2px solid var(--edge); font-weight: 600; color: var(--text); background: #2c2c2c; text-decoration: none; }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.qr { display: block; background: #fff; padding: 6px; width: 176px; height: 176px; }
.secret { font: 12px var(--mono); color: var(--text-faint); text-align: center; word-break: break-all; user-select: all; }
.shake { animation: shake .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- touch (last: overrides the sizes above) ---------- */
/* Finger-sized targets, 16px inputs so iOS doesn't zoom on focus. */
@media (max-width: 860px), (pointer: coarse) {
  .side-toggle, .side-close, .topbar-menu { width: 44px; height: 44px; }
  .side-brand, .topbar-brand { min-height: 44px; }
  .side-link { min-height: 44px; }
  .side-logout { width: 44px; }
  .pw-row input { height: 44px; font-size: 16px; }
  .pw-go { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}