:root{
  --bg:#04080f;--card:#0a1220;--border:rgba(0,180,255,.12);
  --text:#e8eaf2;--muted:rgba(232,234,242,.45);
  --blue:#00b4ff;--green:#06d6a0;--yellow:#ffd166;--pink:#ff70b8;
  --purple:#a78bfa;--red:#f87171;--teal:#4dd9e0;--sky:#38bdf8;
  --asphalt:#0d1825;--nav-h:56px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}

/* ── HEADER ── */
.page-header{background:linear-gradient(135deg,#000d1a,#04080f);border-bottom:1px solid var(--border);padding:24px;text-align:center;}
.page-header-back{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--muted);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 14px;margin-bottom:16px;transition:color .15s,border-color .15s;}
.page-header-back:hover{color:var(--text);border-color:rgba(0,180,255,.3);}
.page-header h1{font-family:'Fredoka',cursive;font-size:clamp(1.8rem,5vw,2.8rem);color:#fff;margin-bottom:8px;}
.page-header h1 span{color:var(--blue);}
.page-header p{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:520px;margin:0 auto 16px;}
.print-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#0066ff,#0ea5e9);color:#fff;font-family:'Fredoka',cursive;font-size:1rem;padding:11px 26px;border-radius:12px;border:none;cursor:pointer;box-shadow:0 4px 0 #003e99;transition:filter .15s,transform .12s;}
.print-btn:hover{filter:brightness(1.1);transform:translateY(-2px);}

/* ── STICKY TAB NAV ── */
.tab-nav{position:sticky;top:0;z-index:50;background:rgba(4,8,15,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:10px 16px;}
.tab-btn{font-family:'Fredoka',cursive;font-size:.85rem;padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.tab-btn:hover,.tab-btn.active{background:rgba(0,180,255,.14);border-color:rgba(0,180,255,.4);color:#fff;}

/* ── MAIN WRAP ── */
.sheet-wrap{max-width:960px;margin:0 auto;padding:28px 20px;}
.sheet-section{margin-bottom:52px;}
.section-anchor{display:block;position:relative;top:-80px;visibility:hidden;}
.sheet-section-title{font-family:'Fredoka',cursive;font-size:1.4rem;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.sheet-section-title .sec-icon{font-size:1.5rem;}

/* ── REFERENCE CARDS ── */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.cs-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.cs-head{padding:10px 16px;font-family:'Fredoka',cursive;font-size:.92rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;}
.cs-body{padding:4px 0 10px;}
.cs-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 16px;border-bottom:1px solid rgba(255,255,255,.035);font-size:.77rem;}
.cs-row:last-child{border-bottom:none;}
.cs-key{color:var(--muted);flex-shrink:0;max-width:46%;}
.cs-val{font-family:'JetBrains Mono','Courier New',monospace;font-size:.72rem;color:var(--blue);text-align:right;word-break:break-all;}
.cs-val.g{color:var(--green);}
.cs-val.y{color:var(--yellow);}
.cs-val.p{color:var(--purple);}
.cs-val.r{color:var(--red);}
.cs-val.t{color:var(--teal);}
.cs-val.plain{font-family:'Inter',sans-serif;font-size:.77rem;color:rgba(232,234,242,.8);text-align:right;}

/* ── ERROR CARDS ── */
.err-card{background:rgba(248,113,113,.05);border:1px solid rgba(248,113,113,.18);border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.err-msg{font-family:'JetBrains Mono','Courier New',monospace;font-size:.78rem;color:#fca5a5;margin-bottom:6px;word-break:break-word;}
.err-what{font-size:.8rem;color:var(--text);font-weight:600;margin-bottom:4px;}
.err-fix{font-size:.78rem;color:var(--muted);line-height:1.55;}
.err-fix code{font-family:'JetBrains Mono','Courier New',monospace;font-size:.74rem;color:var(--green);background:rgba(6,214,160,.08);padding:1px 5px;border-radius:4px;}

/* ── CODE BLOCKS ── */
.code-example{background:#020c14;border:1px solid rgba(0,180,255,.15);border-radius:12px;overflow:hidden;margin:14px 0;position:relative;}
.code-label{background:var(--asphalt);padding:6px 14px 6px 10px;font-size:.68rem;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
.code-label .dot{width:8px;height:8px;border-radius:50%;}
.dot-r{background:#f87171;}.dot-y{background:#ffd166;}.dot-g{background:#06d6a0;}
.code-label-spacer{flex:1;}
.ep-tags{display:flex;gap:4px;flex-shrink:0;}
.ep-tag{font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:6px;letter-spacing:.04em;text-transform:uppercase;font-family:'Inter',sans-serif;}
.ep1{background:rgba(0,180,255,.2);color:#7dd3fc;}
.ep2{background:rgba(250,204,21,.2);color:#fde68a;}
.ep3{background:rgba(34,197,94,.2);color:#86efac;}
.ep4{background:rgba(239,68,68,.2);color:#fca5a5;}
.ep5{background:rgba(167,139,250,.2);color:#c4b5fd;}
.ep6{background:rgba(14,165,233,.2);color:#7dd3fc;}
.copy-btn{background:rgba(0,180,255,.12);border:1px solid rgba(0,180,255,.25);color:var(--blue);font-size:.65rem;font-weight:700;font-family:'Inter',sans-serif;padding:3px 9px;border-radius:6px;cursor:pointer;transition:all .15s;flex-shrink:0;white-space:nowrap;}
.copy-btn:hover{background:rgba(0,180,255,.25);color:#fff;}
.copy-btn.copied{background:rgba(6,214,160,.2);border-color:rgba(6,214,160,.4);color:var(--green);}
.code-body{padding:14px 16px;font-family:'JetBrains Mono','Courier New',monospace;font-size:.8rem;line-height:1.75;overflow-x:auto;white-space:pre;color:#c9d1e0;}
.kw{color:#38bdf8;}.fn{color:#60a5fa;}.str{color:#ffd166;}.num{color:#f87171;}.cmt{color:#2d4a5e;font-style:italic;}.var{color:#06d6a0;}.prop{color:#f08050;}

/* ── CALLOUTS ── */
.callout{border-radius:10px;padding:12px 14px;margin:14px 0;display:flex;gap:10px;font-size:.83rem;line-height:1.6;}
.callout.tip{background:rgba(6,214,160,.07);border:1px solid rgba(6,214,160,.2);color:#b2f0e0;}
.callout.info{background:rgba(0,180,255,.07);border:1px solid rgba(0,180,255,.2);color:#bae6fd;}
.callout.warn{background:rgba(255,209,102,.07);border:1px solid rgba(255,209,102,.2);color:#fde68a;}

/* ── PATTERN GRID ── */
.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;margin-top:16px;}
.pattern-wrap{position:relative;}

/* ── FOOTER ── */
.page-footer{text-align:center;padding:40px 24px;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted);}
.page-footer a{color:var(--blue);}
.page-footer button{background:none;border:1px solid rgba(0,180,255,.3);color:var(--blue);font-size:.8rem;padding:4px 12px;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif;margin-left:8px;}

/* ── PRINT ── */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body{background:#fff!important;color:#111!important;}
  .page-header{background:#0066ff!important;color:#fff!important;padding:14px;border:none;}
  .page-header h1{color:#fff!important;font-size:1.5rem;}
  .page-header p{color:rgba(255,255,255,.85)!important;font-size:.78rem;}
  .page-header-back,.print-btn,.tab-nav,.page-footer,.copy-btn{display:none!important;}
  .sheet-wrap{padding:0;max-width:100%;}
  .sheet-section{margin-bottom:20px;page-break-inside:avoid;}
  .sheet-section-title{color:#0066ff!important;font-size:1.05rem;border-color:#dde!important;}
  .cs-grid{grid-template-columns:repeat(3,1fr);gap:7px;}
  .cs-card{background:#f8f9ff!important;border:1px solid #dde!important;border-radius:7px;}
  .cs-head{background:#0066ff!important;color:#fff!important;padding:6px 12px;font-size:.78rem;}
  .cs-row{padding:4px 12px;font-size:.68rem;border-color:#eef!important;}
  .cs-key{color:#555!important;}
  .cs-val,.cs-val.g,.cs-val.y,.cs-val.p,.cs-val.r,.cs-val.t{color:#0066ff!important;}
  .cs-val.plain{color:#111!important;}
  .code-example{background:#f0f4ff!important;border:1px solid #dde!important;}
  .code-label{background:#e8eeff!important;color:#555!important;}
  .code-body{color:#1a1a4a!important;font-size:.68rem;}
  .kw{color:#0066ff!important;}.fn{color:#0044aa!important;}.str{color:#cc6600!important;}
  .num{color:#cc0000!important;}.cmt{color:#888!important;}.var{color:#008855!important;}.prop{color:#aa4400!important;}
  .callout{display:none!important;}
  .err-card{background:#fff0f0!important;border:1px solid #ffcccc!important;}
  .err-msg{color:#cc2200!important;}
  .err-what{color:#111!important;}
  .err-fix{color:#444!important;}
  .err-fix code{background:#e8ffe8!important;color:#008855!important;}
  .ep-tag{display:none!important;}
  .pattern-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){.pattern-grid{grid-template-columns:1fr;}}