/* ══════════════════════════════════════════════════════════════════════
   storage.now — Docs Page
   Console aesthetic: monochrome, sharp edges, JetBrains Mono.
   ══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FAFAF9;--surface:#FFF;--surface-alt:#F4F4F5;
  --text:#09090B;--text-2:#52525B;--text-3:#A1A1AA;
  --border:#E4E4E7;--ink:#09090B;
  --shadow:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.06);
}
html.dark{
  --bg:#09090B;--surface:#18181B;--surface-alt:#18181B;
  --text:#FAFAF9;--text-2:#A1A1AA;--text-3:#52525B;
  --border:#27272A;--ink:#FAFAF9;
  --shadow:0 1px 3px rgba(0,0,0,0.3);
}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased}
a{color:inherit}

/* ── Nav ─────────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:100;width:100%;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-inner{max-width:1400px;margin:0 auto;padding:0 60px;height:56px;
  display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:14px;
  text-decoration:none;letter-spacing:-0.3px;display:flex;align-items:center;gap:8px}
.logo-dot{width:6px;height:6px;background:var(--text);display:inline-block}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:13px;color:var(--text-3);text-decoration:none;transition:color .15s;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-toggle{background:none;border:1px solid var(--border);
  padding:6px 10px;cursor:pointer;color:var(--text-3);display:flex;align-items:center;
  transition:all .15s}
.theme-toggle:hover{color:var(--text);border-color:var(--text-3)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
html.dark .theme-toggle .icon-sun{display:block}
html.dark .theme-toggle .icon-moon{display:none}
.mobile-toggle{display:none;background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px}

/* ── Page layout ─────────────────────────────────────────────────────── */
.page{display:flex;max-width:1200px;margin:0 auto;padding:0 48px;gap:48px}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar{width:200px;flex-shrink:0;position:sticky;top:20px;align-self:flex-start;
  max-height:calc(100vh - 40px);overflow-y:auto;padding:16px 0;
  display:flex;flex-direction:column;gap:2px}
.sidebar a{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-3);
  text-decoration:none;padding:6px 12px;transition:all .15s;display:block;
  border-left:2px solid transparent}
.sidebar a:hover{color:var(--text)}
.sidebar a.active{color:var(--text);border-left-color:var(--text)}
.sidebar a.sub{padding-left:24px;font-size:10.5px}

/* ── Content ─────────────────────────────────────────────────────────── */
.content{flex:1;min-width:0;padding:16px 0 80px}
.content h1{font-size:24px;font-weight:500;letter-spacing:-0.5px;margin:48px 0 16px;
  padding-top:24px;border-top:1px solid var(--border)}
.content h1:first-child{margin-top:0;border-top:none;padding-top:0}
.content h2{font-size:17px;font-weight:500;letter-spacing:-0.3px;margin:36px 0 12px}
.content p{font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:16px}
.content code{font-family:'JetBrains Mono',monospace;font-size:12px;
  background:var(--surface-alt);padding:2px 6px;border:1px solid var(--border)}
.content pre{position:relative;background:var(--surface);border:1px solid var(--border);
  padding:20px 24px;margin:16px 0;overflow-x:auto}
.content pre code{background:none;border:none;padding:0;font-size:12px;line-height:1.8;
  color:var(--text-2);display:block;white-space:pre}

/* ── Copy button ─────────────────────────────────────────────────────── */
.cb{position:absolute;top:8px;right:8px;font-family:'JetBrains Mono',monospace;
  font-size:10px;padding:4px 10px;border:1px solid var(--border);background:var(--bg);
  color:var(--text-3);cursor:pointer;transition:all .15s}
.cb:hover{color:var(--text);border-color:var(--text-3)}

/* ── Reference table ─────────────────────────────────────────────────── */
.ref-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
.ref-table th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--text-3);padding:10px 16px;border-bottom:2px solid var(--border);
  letter-spacing:0.5px;text-transform:uppercase}
.ref-table td{padding:10px 16px;border-bottom:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-2)}
.ref-table tr:last-child td{border-bottom:none}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:768px){
  .page{flex-direction:column;padding:0 20px;gap:0}
  .sidebar{width:100%;position:static;max-height:none;flex-direction:row;
    flex-wrap:wrap;gap:0;padding:12px 0;border-bottom:1px solid var(--border)}
  .sidebar a{border-left:none;padding:4px 8px;font-size:10px}
  .content h1{font-size:22px;margin:32px 0 12px}
  .content h2{font-size:16px}
}
@media(max-width:640px){
  .nav-inner{padding:0 20px;height:52px}
  .nav-links{display:none;position:absolute;top:52px;left:0;right:0;
    flex-direction:column;padding:16px 20px;gap:16px;
    z-index:100;border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--bg) 95%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .nav-links.open{display:flex}
  .mobile-toggle{display:block}
}