:root {
  --bg: #06080e; --bg-2: #0d1117; --bg-3: #161b22;
  --border: rgba(125,211,252,.08); --border-h: rgba(125,211,252,.2);
  --text: #e2e8f0; --text-2: #8b949e; --text-3: #3d444d;
  --blue: #7dd3fc; --blue-dim: rgba(125,211,252,.09); --blue-glow: rgba(125,211,252,.18);
  --green: #6ee7b7; --amber: #fcd34d; --red: #fca5a5;
  --mono: 'IBM Plex Mono', monospace;
  --t: 240ms cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg: #f0f4f8; --bg-2: #ffffff; --bg-3: #e4eaf2;
  --border: rgba(56,130,175,.1); --border-h: rgba(56,130,175,.25);
  --text: #0f172a; --text-2: #475569; --text-3: #94a3b8;
  --blue: #0284c7; --blue-dim: rgba(2,132,199,.08); --blue-glow: rgba(2,132,199,.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{font-size:15px;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--mono);min-height:100vh;overflow-y:auto;transition:background var(--t),color var(--t);}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
pre,code,textarea{font-family:var(--mono);}

/* ── ANIMATED BACKGROUND ── */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:1;}
.bg-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.blob{position:absolute;border-radius:50%;filter:blur(100px);}

.b1{width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(125,211,252,.22),transparent 70%);
  top:-20vw;left:-15vw;animation:drift1 24s ease-in-out infinite;}
.b2{width:50vw;height:50vw;
  background:radial-gradient(circle,rgba(167,139,250,.18),transparent 70%);
  bottom:-15vw;right:-10vw;animation:drift2 28s ease-in-out infinite;}
.b3{width:40vw;height:40vw;
  background:radial-gradient(circle,rgba(52,211,153,.15),transparent 70%);
  top:35%;left:50%;animation:drift3 20s ease-in-out infinite;}

[data-theme="light"] .b1{background:radial-gradient(circle,rgba(125,211,252,.14),transparent 70%);}
[data-theme="light"] .b2{background:radial-gradient(circle,rgba(167,139,250,.12),transparent 70%);}
[data-theme="light"] .b3{background:radial-gradient(circle,rgba(52,211,153,.1),transparent 70%);}

@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5vw,4vw) scale(1.1);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}40%{transform:translate(-4vw,-5vw) scale(1.07);}80%{transform:translate(3vw,2vw) scale(.94);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(-4vw,5vw) scale(1.12);}66%{transform:translate(5vw,-3vw) scale(.91);}}

body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(125,211,252,.015) 3px,rgba(125,211,252,.015) 4px);
}

/* ── THEME TOGGLE ── */
#theme-toggle{position:fixed;top:1.4rem;right:1.6rem;width:2rem;height:2rem;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--border-h);font-size:.82rem;z-index:50;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t),border-color var(--t),transform var(--t);}
#theme-toggle:hover{border-color:var(--blue);transform:rotate(20deg);}

/* ── PAGE ── */
.page{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:5rem 2rem 6rem;}

/* ── HEADER ── */
.site-header{display:flex;align-items:center;gap:.9rem;margin-bottom:3rem;animation:fadeUp .5s ease both;}
.site-icon{font-size:1.4rem;color:var(--blue);filter:drop-shadow(0 0 10px var(--blue-glow));flex-shrink:0;}
.site-name{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;}
.site-sub{font-size:.72rem;color:var(--text-3);margin-top:.22rem;}

/* ── TWO-COL ── */
.two-col{display:grid;grid-template-columns:160px 1fr;gap:2rem;align-items:start;}

/* ── LEFT COL ── */
.left-col{display:flex;flex-direction:column;gap:.3rem;position:sticky;top:2rem;}
.sec-btn{
  display:flex;align-items:center;gap:.5rem;padding:.52rem .7rem;
  border-radius:7px;text-align:left;font-size:.82rem;color:var(--text-2);
  border:1px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.sec-btn:hover{background:var(--bg-2);color:var(--text);border-color:var(--border);}
.sec-btn.active{background:var(--blue-dim);color:var(--blue);border-color:var(--border-h);}
.sicon{font-size:.48rem;color:var(--blue);filter:drop-shadow(0 0 4px var(--blue-glow));flex-shrink:0;}
.sarrow{margin-left:auto;opacity:0;transform:translateX(-4px);transition:opacity var(--t),transform var(--t);font-size:.8rem;}
.sec-btn.active .sarrow{opacity:1;transform:translateX(0);}

/* ── RIGHT COL ── */
.right-col{min-height:300px;}
.sec{display:flex;flex-direction:column;gap:.2rem;animation:slideRight .22s cubic-bezier(.22,.68,0,1.1) both;}
@keyframes slideRight{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:translateX(0);}}

.empty-hint{font-size:.74rem;color:var(--text-3);padding:.5rem 0;opacity:.6;}

/* ── LEAF ── */
.leaf{border-radius:6px;}
.leaf-btn{width:100%;display:flex;align-items:center;gap:.4rem;padding:.4rem .55rem;
  border-radius:6px;text-align:left;font-size:.8rem;color:var(--text-2);
  transition:background var(--t),color var(--t);}
.leaf-btn:hover{background:var(--bg-2);color:var(--text);}
.leaf.open>.leaf-btn{color:var(--blue);background:var(--blue-dim);border-radius:6px 6px 0 0;}
.leaf.featured>.leaf-btn{color:var(--text);}

.lc{font-size:.38rem;color:var(--text-3);flex-shrink:0;transition:transform var(--t),color var(--t);}
.leaf.open>.leaf-btn .lc{transform:rotate(90deg);color:var(--blue);}

/* Smooth height grid trick */
.leaf-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t);}
.leaf.open>.leaf-panel{grid-template-rows:1fr;}
.leaf-inner{overflow:hidden;background:var(--bg-3);border-radius:0 0 6px 6px;padding:0 .7rem;transition:padding var(--t);}
.leaf.open>.leaf-panel>.leaf-inner{padding:.5rem .7rem .6rem .85rem;}

/* ── ROWS ── */
.row{display:grid;grid-template-columns:5.5rem 1fr;gap:.45rem;font-size:.78rem;align-items:start;padding:.06rem 0;}
.rk{color:var(--text-3);font-size:.71rem;padding-top:.05rem;}
.rv{color:var(--text);line-height:1.55;}
.bio{font-size:.77rem;color:var(--text-2);line-height:1.75;}
.badge{display:inline-block;margin-left:.45rem;padding:.02rem .3rem;font-size:.6rem;
  border-radius:3px;background:var(--blue-dim);color:var(--blue);vertical-align:middle;}
.gl{color:var(--blue);font-size:.75rem;transition:color var(--t);}
.gl:hover{color:#bae6fd;text-decoration:underline;}

/* ── METHOD TAGS ── */
.mt{display:inline-block;padding:.02rem .28rem;margin-right:.25rem;font-size:.63rem;font-weight:600;border-radius:3px;}
.mt.get{background:rgba(96,165,250,.12);color:#93c5fd;}
.mt.post{background:rgba(110,231,183,.12);color:var(--green);}
.mt.put{background:rgba(252,211,77,.12);color:var(--amber);}
.mt.del{background:rgba(252,165,165,.12);color:var(--red);}
.ic{font-size:.71rem;background:var(--bg-2);padding:.02rem .22rem;border-radius:3px;border:1px solid var(--border-h);color:var(--blue);}

/* ── API BASE ── */
.api-base-block{margin-bottom:.65rem;padding:.5rem .6rem;background:var(--bg-2);border:1px solid var(--border-h);border-radius:6px;}
.api-base-label{display:block;font-size:.61rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.26rem;}
.api-base-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:4px;
  color:var(--blue);font-family:var(--mono);font-size:.75rem;padding:.2rem .42rem;outline:none;
  transition:border-color var(--t);}
.api-base-input:focus{border-color:var(--blue);}

/* ── TRY PANEL ── */
.try-panel{margin-top:.4rem;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.try-lbl{padding:.26rem .52rem;font-size:.61rem;color:var(--text-3);background:var(--bg-2);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.06em;}
.try-field{display:flex;align-items:center;gap:.42rem;padding:.28rem .52rem;background:var(--bg-2);border-bottom:1px solid var(--border);font-size:.71rem;color:var(--text-3);}
.try-input{background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--mono);font-size:.71rem;padding:.1rem .28rem;width:4.5rem;outline:none;}
.try-input:focus{border-color:var(--blue);}
.try-body{display:block;width:100%;background:var(--bg-2);border:none;border-bottom:1px solid var(--border);color:var(--text-2);font-size:.71rem;padding:.42rem .52rem;resize:vertical;outline:none;}
.try-btn{width:100%;padding:.34rem .52rem;background:var(--blue-dim);color:var(--blue);font-family:var(--mono);font-size:.71rem;font-weight:500;text-align:left;transition:background var(--t);}
.try-btn:hover{background:var(--blue-glow);}
.try-btn.post{background:rgba(110,231,183,.08);color:var(--green);}
.try-btn.post:hover{background:rgba(110,231,183,.15);}
.try-btn.put{background:rgba(252,211,77,.08);color:var(--amber);}
.try-btn.put:hover{background:rgba(252,211,77,.15);}
.try-btn.del{background:rgba(252,165,165,.08);color:var(--red);}
.try-btn.del:hover{background:rgba(252,165,165,.15);}
.try-btn:disabled{opacity:.5;cursor:wait;}
.try-res{padding:.45rem .52rem;font-size:.69rem;white-space:pre-wrap;word-break:break-word;color:var(--text-2);background:var(--bg-2);border-top:1px solid var(--border);max-height:220px;overflow-y:auto;line-height:1.5;}
.try-res.ok{color:var(--green);}
.try-res.err{color:var(--red);}

/* ── FOOTER ── */
.site-footer{margin-top:3rem;font-size:.68rem;color:var(--text-3);}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}