@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0f17;--bg2:#12141f;--bg3:#1a1d2e;
  --surface:rgba(255,255,255,.04);--border:rgba(255,255,255,.08);
  --primary:#6366f1;--primary2:#8b5cf6;--accent:#06b6d4;
  --success:#10b981;--warning:#f59e0b;--danger:#ef4444;
  --text:#e2e8f0;--muted:#94a3b8;
  --sw:260px;--nh:64px;
  --grad:linear-gradient(135deg,var(--primary),var(--primary2));
  --glow:0 0 30px rgba(99,102,241,.25);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:99px}

/* ── PRELOADER ── */
#preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .5s ease}
.pl-logo{width:60px;height:60px;border-radius:50%;border:2px solid var(--primary);animation:pl-pulse 2s ease infinite}
@keyframes pl-pulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.6)}50%{box-shadow:0 0 0 16px rgba(99,102,241,0)}}
.pl-bars{display:flex;gap:5px;align-items:flex-end;height:28px}
.pl-bar{width:5px;border-radius:99px;background:var(--grad);animation:pl-bar 1.1s ease infinite}
.pl-bar:nth-child(1){animation-delay:0s}
.pl-bar:nth-child(2){animation-delay:.15s}
.pl-bar:nth-child(3){animation-delay:.3s}
.pl-bar:nth-child(4){animation-delay:.45s}
.pl-bar:nth-child(5){animation-delay:.6s}
@keyframes pl-bar{0%,100%{height:8px;opacity:.4}50%{height:28px;opacity:1}}
.pl-text{font-size:.8rem;color:var(--muted);letter-spacing:.5px}

/* ── NAVBAR ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nh);display:flex;align-items:center;padding:0 20px;gap:12px;background:rgba(13,15,23,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-toggle{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.15rem;padding:8px;border-radius:8px;transition:color .2s,background .2s}
.nav-toggle:hover{color:var(--text);background:var(--surface)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1}
.nav-brand img{width:34px;height:34px;border-radius:50%;border:2px solid var(--primary)}
.nav-brand-name{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-pill{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:.75rem;font-weight:600;text-decoration:none;border:1px solid var(--border);color:var(--muted);background:var(--surface);transition:all .2s}
.nav-pill:hover{border-color:var(--primary);color:var(--text)}
.nav-status{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:var(--success)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
@media(max-width:580px){.nav-actions .nav-pill{display:none}}

/* ── SIDEBAR ── */
.sidebar{position:fixed;top:var(--nh);left:0;bottom:0;width:var(--sw);background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:100;padding:12px 0 32px}
.sidebar.collapsed{transform:translateX(calc(-1 * var(--sw)))}
.sb-section{padding:0 16px;margin:20px 0 4px}
.sb-label{font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 16px;margin:2px 8px;border-radius:9px;text-decoration:none;color:var(--muted);font-size:.855rem;font-weight:500;transition:all .2s;position:relative}
.sb-item:hover{color:var(--text);background:var(--surface)}
.sb-item.active{color:#fff;background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(139,92,246,.12));border:1px solid rgba(99,102,241,.28)}
.sb-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:55%;border-radius:0 3px 3px 0;background:var(--grad)}
.sb-item i{width:17px;text-align:center;font-size:.88rem}
.sb-badge{margin-left:auto;font-size:.63rem;font-weight:700;padding:2px 7px;border-radius:99px;background:rgba(99,102,241,.2);color:var(--primary)}
.sb-overlay{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
.sb-overlay.active{display:block}

/* ── MAIN ── */
.main{margin-left:var(--sw);margin-top:var(--nh);transition:margin-left .3s cubic-bezier(.4,0,.2,1);min-height:calc(100vh - var(--nh))}
.main.expanded{margin-left:0}

/* ── PAGE HEADER ── */
.page-header{padding:40px 40px 32px;border-bottom:1px solid var(--border);background:radial-gradient(ellipse 70% 80% at 50% -10%,rgba(99,102,241,.12),transparent)}
.page-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:99px;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);font-size:.75rem;font-weight:600;color:var(--primary);margin-bottom:16px}
.page-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#fff;margin-bottom:8px}
.page-title span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-sub{color:var(--muted);font-size:.9rem;max-width:560px;line-height:1.7}
.page-meta{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap}
.meta-chip{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.meta-chip i{color:var(--primary)}

/* ── CONTENT ── */
.content{padding:32px 40px}

/* ── ENDPOINT CARDS ── */
.ep-grid{display:flex;flex-direction:column;gap:12px}
.ep-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px 24px;display:flex;align-items:center;gap:20px;transition:all .22s;position:relative;overflow:hidden}
.ep-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:0;transition:opacity .22s;border-radius:3px 0 0 3px}
.ep-card:hover{border-color:rgba(99,102,241,.35);box-shadow:var(--glow);transform:translateX(4px)}
.ep-card:hover::before{opacity:1}
.ep-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.ep-info{flex:1;min-width:0}
.ep-name{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:3px}
.ep-path{font-size:.78rem;font-family:'Fira Code','Consolas',monospace;color:var(--accent);margin-bottom:6px;word-break:break-all}
.ep-desc{font-size:.82rem;color:var(--muted);line-height:1.5}
.ep-params{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ep-param{font-size:.7rem;padding:2px 8px;border-radius:6px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);color:var(--accent);font-family:monospace}
.ep-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ep-status{font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.ep-status.live{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:var(--success)}
.ep-status.beta{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:var(--warning)}
.btn-test{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;font-size:.8rem;font-weight:600;text-decoration:none;background:var(--grad);color:#fff;border:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-test:hover{opacity:.85;transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.btn-ghost:hover{border-color:var(--primary);color:var(--text)}

/* ── SECTION HEADER ── */
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.section-hd-left{}
.section-hd h2{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:#fff}
.section-hd p{font-size:.82rem;color:var(--muted);margin-top:3px}
.section-count{font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--border);color:var(--muted)}

/* ── FOOTER ── */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:48px 40px 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:9px;margin-bottom:12px}
.footer-brand img{width:32px;height:32px;border-radius:50%}
.footer-desc{font-size:.83rem;color:var(--muted);line-height:1.7;margin-bottom:18px}
.footer-socials{display:flex;gap:8px}
.social-a{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:.88rem;text-decoration:none;transition:all .2s}
.social-a:hover{border-color:var(--primary);color:var(--primary);background:rgba(99,102,241,.1)}
.footer-col h6{font-size:.78rem;font-weight:700;color:#fff;letter-spacing:.5px;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul li a{font-size:.82rem;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:7px;transition:color .2s}
.footer-col ul li a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:20px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.footer-bottom a{color:var(--muted);text-decoration:none;transition:color .2s}
.footer-bottom a:hover{color:var(--text)}
#btt{position:fixed;bottom:24px;right:24px;z-index:99;width:40px;height:40px;border-radius:10px;background:var(--grad);color:#fff;border:none;font-size:.95rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(99,102,241,.4);transition:transform .2s}
#btt:hover{transform:translateY(-3px)}

/* ── COLOUR HELPERS ── */
.ci{background:rgba(99,102,241,.13);color:var(--primary)}
.cp{background:rgba(139,92,246,.13);color:var(--primary2)}
.cc{background:rgba(6,182,212,.13);color:var(--accent)}
.cg{background:rgba(16,185,129,.13);color:var(--success)}
.cy{background:rgba(245,158,11,.13);color:var(--warning)}
.cr{background:rgba(239,68,68,.13);color:var(--danger)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sidebar{transform:translateX(calc(-1 * var(--sw)))}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0!important}
  .content,.page-header{padding:24px 16px}
  .ep-card{flex-wrap:wrap}
  .ep-actions{width:100%;justify-content:flex-end}
  footer{padding:36px 16px 20px}
}
@media(max-width:520px){
  .ep-icon{display:none}
}

/* ── TEST MODAL (centered) ── */
#tm-backdrop{display:none;position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
#test-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);z-index:901;width:min(820px,96vw);max-height:88vh;background:var(--bg2);border:1px solid rgba(99,102,241,.4);border-radius:20px;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .22s ease;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 40px rgba(99,102,241,.2);opacity:0;pointer-events:none}
#test-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
#tm-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:rgba(99,102,241,.06);flex-shrink:0}
#tm-title{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text);overflow:hidden}
#tm-method{background:var(--grad);color:#fff;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.5px;flex-shrink:0}
#tm-endpoint-label{font-family:'Fira Code',monospace;color:var(--accent);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tm-hdr-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
#tm-newtab{color:var(--muted);padding:4px;border-radius:6px;transition:color .2s;display:flex}
#tm-newtab:hover{color:var(--text)}
#tm-close{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .2s,background .2s}
#tm-close:hover{color:#fff;background:rgba(239,68,68,.2)}
#tm-params-area{padding:16px 20px;border-bottom:1px solid var(--border);overflow-y:auto;max-height:180px;flex-shrink:0}
.tm-params-grid{display:flex;flex-direction:column;gap:10px}
.tm-param-row{display:grid;grid-template-columns:140px 1fr;align-items:start;gap:10px}
.tm-param-label{font-size:.8rem;font-weight:600;color:var(--muted);padding-top:8px}
.tm-req{color:var(--danger);margin-left:2px}
.tm-param-input{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:.82rem;color:var(--text);width:100%;font-family:'Fira Code',monospace;transition:border-color .2s}
.tm-param-input:focus{outline:none;border-color:var(--primary)}
.tm-hint{font-size:.72rem;color:var(--muted);grid-column:2;margin-top:-6px}
#tm-run-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
#tm-full-url{flex:1;font-family:'Fira Code',monospace;font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tm-run-btn{display:flex;align-items:center;gap:6px;padding:8px 20px;border-radius:8px;background:var(--grad);color:#fff;border:none;font-size:.82rem;font-weight:700;cursor:pointer;transition:opacity .2s;flex-shrink:0}
#tm-run-btn:hover{opacity:.85}
#tm-response-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#tm-res-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
#tm-res-meta{display:flex;align-items:center;gap:10px;font-size:.76rem}
.tm-ok{color:var(--success);font-weight:700}
.tm-err{color:var(--danger);font-weight:700}
.tm-time{color:var(--muted)}
.tm-ct{color:var(--accent)}
#tm-res-actions{display:flex;gap:8px}
#tm-copy-btn{background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:4px 12px;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s}
#tm-copy-btn:hover{border-color:var(--primary);color:var(--text)}
#tm-res-body{overflow-y:auto;padding:16px 20px;flex:1}
.tm-json{font-family:'Fira Code','Consolas',monospace;font-size:.78rem;line-height:1.7;white-space:pre-wrap;word-break:break-all;color:var(--text);margin:0}
.tm-plain{font-family:'Fira Code',monospace;font-size:.8rem;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-all;margin:0}
.tm-err-text{color:var(--danger)}
.jk{color:#93c5fd}.js{color:#86efac}.jb{color:#fb923c}.jn{color:#9ca3af}.jnum{color:#c084fc}
.jk a,.js a{color:inherit;text-decoration:underline;text-decoration-style:dotted;opacity:.8}
.tm-media-wrap{margin-bottom:14px;text-align:center}
.tm-preview-wrap{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px}
.tm-media-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;text-align:left}
.tm-img{max-width:100%;max-height:300px;border-radius:10px;object-fit:contain}
.tm-audio{width:100%;margin-top:4px}
.tm-video{width:100%;max-height:280px;border-radius:8px}
#tm-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--muted);font-size:.88rem;flex-shrink:0}
.tm-spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.tm-param-row{grid-template-columns:1fr}.tm-param-label{padding-top:0}}

/* ── CONFIGURE SECTION ── */
.cfg-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px}
.cfg-card h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cfg-card h3 i{color:var(--primary)}
.cfg-step{display:flex;gap:14px;margin-bottom:12px;align-items:flex-start}
.cfg-num{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.cfg-text{font-size:.85rem;color:var(--muted);line-height:1.6}
.cfg-text code{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);color:var(--primary);padding:1px 6px;border-radius:5px;font-family:'Fira Code',monospace;font-size:.8rem}
.cfg-text strong{color:var(--text)}

/* ── PARTICLE CANVAS (sits behind everything) ── */
#particle-canvas{z-index:0;pointer-events:none}

/* ── MUSIC PLAYER ── */
#music-btn{position:fixed;bottom:80px;right:24px;z-index:500;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(139,92,246,.9));border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 20px rgba(99,102,241,.45);transition:transform .2s,box-shadow .2s;backdrop-filter:blur(8px)}
#music-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(99,102,241,.65)}
#music-btn.playing{animation:music-pulse 2s ease infinite}
@keyframes music-pulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.5)}70%{box-shadow:0 0 0 10px rgba(99,102,241,0)}}
#music-btn .music-bars{display:none;align-items:flex-end;gap:2px;height:18px}
#music-btn.playing .music-bars{display:flex}
#music-btn.playing .music-icon{display:none}
#music-btn .music-bars span{display:block;width:3px;background:#fff;border-radius:2px;animation:bar-dance 1s ease infinite}
#music-btn .music-bars span:nth-child(1){animation-delay:0s;animation-duration:.8s}
#music-btn .music-bars span:nth-child(2){animation-delay:.15s;animation-duration:.6s}
#music-btn .music-bars span:nth-child(3){animation-delay:.3s;animation-duration:.9s}
#music-btn .music-bars span:nth-child(4){animation-delay:.1s;animation-duration:.7s}
@keyframes bar-dance{0%,100%{height:4px;opacity:.6}50%{height:16px;opacity:1}}
#music-label{position:fixed;bottom:134px;right:20px;z-index:499;background:rgba(13,15,23,.95);border:1px solid rgba(99,102,241,.35);border-radius:8px;padding:6px 12px;font-size:.7rem;color:var(--muted);white-space:nowrap;pointer-events:none;transition:opacity .3s;opacity:0}
#music-btn:hover ~ #music-label, #music-label:hover{opacity:1}