/* Shared Hooky theme */
:root {
  --bg:#0b1020;
  --panel:#0e1530;
  --panel-alt:#121a3d;
  --header:#0c122a;
  --fg:#e6e8ef;
  --muted:#9aa3c7;
  --border:#232a4a;
  --code-bg:#0a0f22;
  --accent:#5b8cff;
  --accent-2:#7b5bff;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --space-xs:4px;
  --space-sm:8px;
  --space-md:14px;
  --space-lg:22px;
  --space-xl:34px;
}
[data-theme="light"] {
  --bg:#f6f8fc;
  --panel:#ffffff;
  --panel-alt:#f1f3f9;
  --header:#ffffff;
  --fg:#0b1020;
  --muted:#5a667f;
  --border:#e3e8f5;
  --code-bg:#f1f3f9;
  --accent:#3b6cff;
  --accent-2:#6b46ff;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}
html,body{height:100%;}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
  radial-gradient(1200px 600px at 20% -10%,rgba(123,91,255,.15),transparent),
  radial-gradient(1000px 500px at 100% 0%,rgba(91,140,255,.12),transparent),
  var(--bg);color:var(--fg);}
a{text-decoration:none;color:inherit;}
/* Navbar */
.app-navbar{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(6px);background:color-mix(in srgb,var(--header) 92%,transparent);border-bottom:1px solid var(--border);z-index:10;}
.navbar-dark .navbar-toggler{border-color:rgba(255,255,255,.25)}
.navbar-dark .navbar-toggler-icon{filter: invert(1) grayscale(100%);} 
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px;}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow);}
/* Buttons */
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff !important;border:none;box-shadow:var(--shadow);}
.btn-outline-primary{border-color:var(--accent);color:var(--accent);}
.btn-outline-primary:hover{background:var(--accent);color:#fff;}
.muted{color:var(--muted)!important;}
/* Cards */
.glass{background:color-mix(in srgb,var(--panel) 85%, transparent);border:1px solid var(--border);backdrop-filter: blur(8px); border-radius: var(--radius);}
/* Endpoint list */
.list{display:flex;flex-direction:column;gap:var(--space-sm);}
.ep{border:1px solid var(--border);padding:10px;border-radius:8px;background:var(--panel);cursor:pointer;}
.ep:hover{background:var(--panel-alt);} 
.ep.active{outline:2px solid var(--accent);}
/* Events */
.events{display:flex;flex-direction:column;gap:var(--space-md);}
.evt{background:var(--panel);border:1px solid var(--border);border-radius:8px;}
/* Pills */
.pill{font-size:12px;padding:2px 6px;border-radius:999px;border:1px solid var(--border);color:var(--muted);}
.wrap{word-break:break-all;}
/* Live indicator */
.live-pill{background:var(--accent);color:#fff;padding:4px 8px;border-radius:16px;font-size:12px;display:inline-flex;align-items:center;gap:4px;}
.live-dot{width:8px;height:8px;background:#ff4d4d;border-radius:50%;box-shadow:0 0 4px #ff4d4d;animation:pulse 1.5s infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(1.6);opacity:.25}100%{transform:scale(1);opacity:1}}
.flash{animation:flash-bg 2s ease-out;}
@keyframes flash-bg{0%{box-shadow:0 0 0 0 rgba(91,140,255,.8)}100%{box-shadow:0 0 0 0 rgba(91,140,255,0)}}
/* Code & JSON */
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace;}
pre{background:var(--code-bg);padding:12px;border-radius:10px;overflow:auto;margin:0;font-size:13px;border:1px solid var(--border);}
.json{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--code-bg);border-radius:6px;padding:8px;}
.json .kv{margin-left:16px;}
.json .toggle{cursor:pointer;color:var(--accent);user-select:none;}
.json .key{color:#9cdcfe;}
.json .string{color:#ce9178;}
.json .number{color:#b5cea8;}
.json .boolean{color:#569cd6;}
.json .null{color:#808080;}
/* Diff */
.diff{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--code-bg);border-radius:6px;padding:8px;border:1px solid var(--border);}
.diff-line{display:block;white-space:pre-wrap;}
.diff-add{color:#1f7a1f;background:rgba(46,204,113,.08);border-left:3px solid #2ecc71;padding-left:6px;}
.diff-remove{color:#b0413e;background:rgba(231,76,60,.10);border-left:3px solid #e74c3c;padding-left:6px;}
.diff-change{color:#996800;background:rgba(241,196,15,.12);border-left:3px solid #f1c40f;padding-left:6px;}
.diff-header{color:var(--muted);}
/* Hero & feature cards (landing) */
.hero-copy h1{font-size:clamp(28px,6vw,44px);line-height:1.05;margin:var(--space-md) 0 var(--space-sm);}
.sub{font-size:16px;color:var(--muted);max-width:640px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px;}
.pulse{width:8px;height:8px;border-radius:999px;background:#ff5c5c;box-shadow:0 0 10px rgba(255,92,92,.9);animation:pulse 1.4s infinite;}
.feat-card{border:1px solid var(--border);border-radius:12px;padding:var(--space-md);background:var(--panel);} 
.hero-wrap{min-height:72vh;display:flex;align-items:center;}
.section-title{text-align:center;margin-bottom:1rem;}
.cta-group{justify-content:center;}
.cta-group-lg-start{justify-content:center;}
@media (min-width: 992px){.cta-group-lg-start{justify-content:flex-start;}}
footer{border-top:1px solid var(--border);color:var(--muted);padding:20px 0;font-size:13px;}
@media (max-width:991.98px){.hero-side{margin-top:32px;}}
/* Containers */
.container-narrow{max-width:1060px;margin-left:auto;margin-right:auto;}
.code-card{max-width:520px;}
.code-card pre{margin-left:auto;margin-right:auto;text-align:left;padding:var(--space-md);} 
.detail-card .pill{margin-left:var(--space-xs);} 
.detail-card .wrap{margin-top:var(--space-sm);} 
.detail-card .btn{min-width:120px;} 
.stream-wrap{max-width:1040px;margin:0 auto;padding-bottom:var(--space-xl);} 
.detail-card{max-width:640px;margin:0 auto;}
.events .card{margin-bottom:var(--space-md);} 
/* Hero grid (explicit centering) */
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;min-height:72vh;}
@media (max-width:991.98px){.hero-grid{grid-template-columns:1fr;}}