/* =========================================================
   THEME TOKENS
   ========================================================= */
:root{
    --bg:#0b0d10; --bg-soft:#0e1318; --text:#e9eef3; --muted:#a9b4bf;
    --card:#0f151c; --card-border:#1f2833; --brand:#4fd1c5; --accent:#7aa2f7;
    --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px;
    --surface:rgba(15,21,28,.65); --pill-bg:rgba(14,19,24,.60); --pill-border:rgba(31,40,51,.65);
}
@media (prefers-color-scheme: light){
    :root{
        --bg:#f6f8fb; --bg-soft:#ffffff; --text:#111827; --muted:#4b5563;
        --card:#ffffff; --card-border:#e6ecf1; --brand:#0ea5e9; --accent:#6366f1;
        --shadow:0 8px 20px rgba(18,40,62,.08);
        --surface:rgba(255,255,255,.85); --pill-bg:rgba(2,6,23,.06); --pill-border:#e6ecf1;
    }
}
html[data-theme="light"]{
    --bg:#f6f8fb; --bg-soft:#ffffff; --text:#111827; --muted:#4b5563;
    --card:#ffffff; --card-border:#e6ecf1; --brand:#0ea5e9; --accent:#6366f1;
    --shadow:0 8px 20px rgba(18,40,62,.08);
    --surface:rgba(255,255,255,.85); --pill-bg:rgba(2,6,23,.06); --pill-border:#e6ecf1;
}
html[data-theme="dark"]{
    --bg:#0b0d10; --bg-soft:#0e1318; --text:#e9eef3; --muted:#a9b4bf;
    --card:#0f151c; --card-border:#1f2833; --brand:#4fd1c5; --accent:#7aa2f7;
    --shadow:0 10px 30px rgba(0,0,0,.35); --surface:rgba(15,21,28,.65);
    --pill-bg:rgba(14,19,24,.60); --pill-border:rgba(31,40,51,.65);
}

/* =========================================================
   BASE
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    background:
            radial-gradient(1200px 600px at 10% -10%, rgba(79,209,197,.08), transparent 60%),
            radial-gradient(1000px 500px at 110% 10%, rgba(122,162,247,.06), transparent 60%),
            var(--bg);
    color:var(--text);
    line-height:1.5;
    overflow-x:hidden;
}
.wrap{ max-width:1100px; margin:0 auto; padding:32px 20px 64px; position:relative; z-index:1; }

a{ color:inherit; }
.no-margin{ margin:0; }
.underlined{ border-bottom:1px dashed rgba(255,255,255,.08); padding-bottom:2px; }
.kicker{ font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.muted{ color:var(--muted); }

/* Background FX canvas */
.bgfx{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.6; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
    position:sticky; top:0; z-index:2;
    -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px);
    background:var(--surface); border:1px solid var(--card-border); padding:12px 16px; border-radius:14px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.brand-text{ display:grid; gap:2px; align-items:center; }
.domain{ font-weight:800; letter-spacing:.2px; font-size:clamp(18px,2.4vw,22px); }

.live{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); background:var(--pill-bg); border:1px solid var(--pill-border); border-radius:999px; padding:2px 8px; }
.live .dot{ width:6px; height:6px; border-radius:999px; background:#16a34a; box-shadow:0 0 0 0 rgba(22,163,74,.6); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }

.logo-hero{ position:relative; width:38px; height:38px; border-radius:12px; isolation:isolate; }
.logo-core{ position:absolute; inset:0; border-radius:inherit; background:
        radial-gradient(120% 120% at 30% 20%, rgba(79,209,197,.45), transparent 60%),
        radial-gradient(120% 120% at 70% 80%, rgba(122,162,247,.45), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.15), transparent);
    box-shadow: inset 0 0 0 1px rgba(31,40,51,.6);
}
.logo-ring{ position:absolute; inset:-2px; border-radius:inherit; background:conic-gradient(from 0deg, var(--brand), var(--accent), var(--brand));
    -webkit-mask: radial-gradient(closest-side, transparent 68%, black 70%); mask: radial-gradient(closest-side, transparent 68%, black 70%);
    filter: blur(.3px); animation: spin 9s linear infinite; opacity:.9;
}
.logo-ring.logo-fast{ animation: spin 4s linear infinite; opacity:0; } .brand:hover .logo-ring.logo-fast{ opacity:.75; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(22,163,74,.6);} 60%{box-shadow:0 0 0 8px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }

.theme-toggle{
    appearance:none; border:1px solid var(--card-border); background:var(--bg-soft); color:var(--text);
    border-radius:10px; padding:8px 12px; font:inherit; cursor:pointer;
}
.theme-toggle:hover{ border-color: rgba(79,209,197,.5); }

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead{
    margin:10px 0 22px;
    background:linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, rgba(79,209,197,.7), rgba(122,162,247,.7)) border-box;
    border:1px solid transparent; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);
}
.masthead-title{ margin:0 0 8px; font-size:clamp(32px,5vw,44px); letter-spacing:.2px; }
.masthead-text{ color:var(--muted); margin:0; }

/* =========================================================
   GRID + CARDS
   ========================================================= */
.grid{ display:grid; gap:16px; margin-top:18px; grid-template-columns: repeat(12, 1fr); }
.col-8{ grid-column: span 8; } .col-4{ grid-column: span 4; }
@media (max-width:900px){ .col-8, .col-4{ grid-column: 1 / -1; } }

.card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; height:100%;
    display:flex; flex-direction:column; gap:14px; position:relative;
}
.glow{ background:linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, rgba(79,209,197,.7), rgba(122,162,247,.7)) border-box; border:1px solid transparent; }
.ring{ background:linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, rgba(79,209,197,.7), rgba(122,162,247,.7)) border-box; border:1px solid transparent; }

.links{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); margin-top:6px; }
.link{
    position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none; background:var(--bg-soft);
    border:1px solid var(--card-border); border-radius:12px; padding:14px 16px; color:var(--text);
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .2s ease; will-change: transform; overflow:hidden;
}
.link::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0%, rgba(79,209,197,.15) 40%, transparent 60%); transform: translateX(-120%); transition: transform .6s ease; }
.link:hover::before{ transform: translateX(120%); }
.link:hover{ transform: translateY(-2px); border-color: rgba(79,209,197,.5); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.link small{ color:var(--muted); }
.tag{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--card-border); background: rgba(79,209,197,.10); }

/* =========================================================
   API CARDS (drives by app.js)
   ========================================================= */
.api-grid{
    display:grid; gap:16px; margin-bottom:18px;
    grid-template-columns: repeat(12, 1fr);
}
.api-card{ grid-column: span 4; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:12px; }
@media (max-width:1100px){ .api-card{ grid-column: span 6; } }
@media (max-width:760px){ .api-card{ grid-column: 1 / -1; } }

.api-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.api-head .title{ margin:0; font-size:clamp(18px, 2.6vw, 22px); letter-spacing:.2px; }

.pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--pill-border); background:var(--pill-bg); color:var(--muted); }
.pill .dot{ width:6px; height:6px; border-radius:999px; background:#16a34a; box-shadow:0 0 0 0 rgba(22,163,74,.6); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
.api-status[data-status="offline"] .dot{ background:#b91c1c; box-shadow:0 0 0 0 rgba(185,28,28,.5); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }

/* Top & bottom control bars inside card */
.bar{ display:flex; align-items:center; gap:10px; background:var(--bg-soft); border:1px solid var(--card-border); border-radius:12px; padding:10px; }
.http{ font-weight:700; font-size:12px; border:1px solid var(--card-border); padding:4px 8px; border-radius:999px; }
.http.get{ background: rgba(86, 223, 187, .12); color:var(--brand); }
.http.post{ background: rgba(122,162,247,.12); color:var(--accent); }
.http.put{ background: rgba(241,196,15,.12); color:#f1c40f; }
.http.patch{ background: rgba(45,212,191,.12); color:#22c55e; }
.http.delete{ background: rgba(231,76,60,.16); color:#e74c3c; }
.path{ flex:1; min-width:0; background:transparent; border:0; color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; }
.path:focus{ outline:none; }

.btn{ appearance:none; border:1px solid var(--card-border); background:var(--brand); color:#082a2a; font-weight:700; border-radius:10px; padding:8px 12px; cursor:pointer; }
.btn.ghost{ background:var(--bg-soft); color:var(--text); }
.btn:hover{ filter:brightness(1.05); }

.endpoints{ flex:1; min-width:0; background:transparent; color:var(--text); border:0; font:inherit; }
.endpoints:focus{ outline:none; }

/* Tabs + Panels */
.tabs{ display:flex; gap:8px; }
.tab{ appearance:none; border:1px solid var(--card-border); background:var(--bg-soft); color:var(--text); border-radius:10px; padding:6px 10px; cursor:pointer; font-size:13px; }
.tab.active{ border-color: rgba(79,209,197,.5); }
.panel{ margin:0; background:var(--bg-soft); border:1px solid var(--card-border); border-radius:12px; padding:12px; max-height:220px; overflow:auto; }
.code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12.5px; white-space:pre; }
.hidden{ display:none; }

/* Skeleton shimmer */
.skeleton{ position:relative; color:transparent !important; }
.skeleton::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }

/* =========================================================
   TOAST
   ========================================================= */
#toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--surface); border:1px solid var(--card-border); color:var(--text);
    padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:3; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{ opacity:1; transform:none; }
.js [data-reveal]{ opacity:0; transform:translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].in{ opacity:1; transform:translateY(0); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:14px; }
.inline{ display:inline-flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; border-bottom: 1px dashed rgba(233,238,243,.2); }
.inline:hover{ border-bottom-color: var(--text); }