/* Design tokens, inspired by the KeyVault storefront: light by default, dark on demand */
:root{
  --bg:#fbfbfb;--surface:#ffffff;--ink:#111827;--ink-2:#374151;--muted:#6b7280;--faint:#9ca3af;
  --line:#e5e7eb;--line-2:#d1d5db;--primary:#000000;--primary-hover:#333333;--on-primary:#ffffff;
  --ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--info:#6366f1;
  --ok-bg:#ecfdf5;--warn-bg:#fffbeb;--bad-bg:#fef2f2;--info-bg:#eef2ff;
  --r-sm:6px;--r-md:12px;--r-lg:16px;--drawer-w:420px;
  --shadow:0 12px 40px rgba(0,0,0,.05);--shadow-sm:0 2px 10px rgba(0,0,0,.03);
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:#0f1117;--surface:#1a1d27;--ink:#f3f4f6;--ink-2:#d1d5db;--muted:#9ca3af;--faint:#6b7280;
  --line:#2a2d3e;--line-2:#3a3d52;--primary:#f3f4f6;--primary-hover:#d1d5db;--on-primary:#111827;
  --ok-bg:rgba(16,185,129,.12);--warn-bg:rgba(245,158,11,.12);--bad-bg:rgba(239,68,68,.14);--info-bg:rgba(99,102,241,.16);
  --shadow:0 12px 40px rgba(0,0,0,.4);--shadow-sm:0 2px 10px rgba(0,0,0,.25);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
#root{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
a{color:var(--ink);text-decoration:none;transition:color .2s}
a.link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
a.link:hover{text-decoration-color:var(--ink)}
h1{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* layout */
.container{width:100%;max-width:1100px;margin:0 auto;padding:40px 20px 80px}
.container.narrow{max-width:520px}
.container.wide{max-width:1240px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:14px}
.grow{flex:1}.right{margin-left:auto}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:12px}
.mono{font-family:var(--mono)}.pre{white-space:pre-wrap;word-break:break-word}
.center{text-align:center}
.mt{margin-top:24px}.mt-s{margin-top:12px}.mb{margin-bottom:24px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
@media (max-width:860px){.two,.split{grid-template-columns:1fr}}

/* header */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);height:68px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:16px}
html[data-theme="dark"] .nav{background:rgba(15,17,23,.9)}
.logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-link{font-size:14px;font-weight:500;color:var(--muted);background:none;border:0;cursor:pointer;font-family:var(--font);padding:4px 0;border-bottom:1.5px solid transparent}
.nav-link:hover{color:var(--ink)}
.nav-link.on{color:var(--ink);border-bottom-color:var(--ink)}
.btn-cart{position:relative;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--ink);font:600 14px var(--font);cursor:pointer;padding:6px 0}
.btn-cart:hover{color:var(--muted)}
.cart-badge{background:var(--primary);color:var(--on-primary);font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .2s}
.cart-badge.show{transform:scale(1)}
.theme-pill{position:relative;width:44px;height:24px;border-radius:99px;background:var(--line);border:1px solid var(--line-2);cursor:pointer;flex-shrink:0;padding:0;transition:background .3s}
.theme-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;color:#f59e0b;box-shadow:0 1px 4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.4,0,.2,1)}
html[data-theme="dark"] .theme-pill{background:#4f46e5;border-color:#4338ca}
html[data-theme="dark"] .theme-knob{transform:translateX(20px);color:#4338ca}
.theme-knob .i-moon{display:none}
html[data-theme="dark"] .theme-knob .i-sun{display:none}
html[data-theme="dark"] .theme-knob .i-moon{display:block}
@media (max-width:640px){.nav{padding:0 16px}.nav-right{gap:14px}.nav-link.hide-s{display:none}.logo-text{display:none}}

/* footer */
footer{padding:36px 5%;border-top:1px solid var(--line);background:var(--bg)}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted)}
.footer-links{display:flex;gap:22px}
.footer-links a{color:var(--muted)}.footer-links a:hover{color:var(--ink)}

/* forms */
input,select,textarea{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;font:inherit;transition:border-color .2s,box-shadow .2s}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(107,114,128,.18)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:110px;resize:vertical}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--primary);padding:0}
input:disabled,select:disabled{opacity:.6;cursor:not-allowed}
label.f{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2)}
label.f .hint{font-weight:400;color:var(--muted)}
label.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}