/* --------- Hard resets to kill horizontal overflow --------- */
*{box-sizing:border-box; min-width:0}
html,body{height:100%; width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%}
img,video,svg{max-width:100%; height:auto; display:block}
pre,code{white-space:pre-wrap; word-break:break-word}
.post,.card,.sidebar,.rel{word-wrap:break-word; overflow-wrap:anywhere}

/* Theme */
:root{
  --bg:#0b1121; --panel:#121a33; --text:#f8fafc; --muted:#a9b4cf;
  --line:rgba(148,163,184,.18); --brand:#ff5a3c; --brand-2:#ff7a60;
  --ok:#22c55e; --warn:#f59e0b; --r:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 0% -20%, rgba(255,90,60,.06), transparent),
    radial-gradient(900px 500px at 120% 10%, rgba(99,102,241,.08), transparent),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%; max-width:1100px; margin-inline:auto; padding:22px 16px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(180deg, rgba(11,17,33,.85), rgba(11,17,33,.6));
  border-bottom:1px solid var(--line);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; color:#e6eaf5}
.brand:hover{text-decoration:none}
.brand-dot{width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(255,90,60,.2)}
.brand-name{font-weight:700}
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:rgba(148,163,184,.1); color:#e5e7eb;
}
.menu-btn:hover{background:rgba(148,163,184,.18)}
.nav{display:none; gap:16px; align-items:center; flex-wrap:wrap}
.nav a{color:#cbd5e1}
.nav a:hover{color:#fff}
.nav .btn.sm{padding:10px 12px; border-radius:10px}
@media (min-width:900px){ .menu-btn{display:none} .nav{display:flex} }
.nav.open{
  display:flex; position:fixed; right:16px; top:74px; flex-direction:column;
  min-width:200px; max-width:calc(100vw - 32px);
  padding:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow);
}
.nav.open a{padding:8px 10px; border-radius:10px}
.nav.open a:hover{background:rgba(148,163,184,.14)}

/* Hero */
.breadcrumbs{display:flex; align-items:center; gap:8px; color:#9fb0cc; font-size:.9rem; margin-top:6px; flex-wrap:wrap}
.breadcrumbs a{color:#b8c4dc}
.breadcrumbs .current{color:#d0dbf6}
.hero{padding-top:14px}
.eyebrow{
  display:inline-flex; gap:8px; align-items:center;
  background:rgba(255,90,60,.1); color:#ffd1c8; border:1px solid rgba(255,90,60,.25);
  padding:6px 10px; border-radius:999px; font-size:.85rem;
}
h1{margin:12px 0 6px; font-size:clamp(1.45rem, 5.2vw + .4rem, 2.6rem); line-height:1.15}
.meta{color:#9fb0cc; font-size:.95rem}

/* Layout grid */
.grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:16px}
.grid > *{min-width:0}
@media (min-width:980px){ .grid{grid-template-columns:minmax(0,1fr) 320px} }

/* Article */
.post{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:18px;
}
.post p{color:#dbe6ff; opacity:.95}
.lead{font-size:1.06rem; color:#e9f0ff}
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(148,163,184,.12); border:1px solid var(--line);
  padding:8px 10px; border-radius:10px; display:block;
}

/* Cards / callouts */
.cards{list-style:none; padding:0; margin:10px 0 2px; display:grid; gap:10px}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px}
.callout{margin:14px 0; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:rgba(148,163,184,.08)}
.callout.success{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08)}
.callout.warn{border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08)}
.sep{border:none; border-top:1px solid var(--line); margin:20px 0}

/* FAQ */
.faq details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:600; list-style:none}
.faq summary::-webkit-details-marker{display:none}

/* Tags */
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{display:inline-block; font-size:.9rem; background:rgba(148,163,184,.12); border:1px solid var(--line); padding:6px 10px; border-radius:999px}

/* Sidebar */
.sidebar{display:grid; gap:14px}
.card h3{margin:0 0 8px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.toc{list-style:none; margin:0; padding-left:0}
.toc li{padding:8px 0; border-bottom:1px dashed var(--line)}
.toc a{color:#dbe6ff}
.cta .btn{width:100%}

/* Related */
.related-wrap{margin-top:24px}
.related{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:760px){ .related{grid-template-columns:repeat(3,minmax(0,1fr))} }
.rel h4{margin:.4rem 0 .2rem}
.chip{display:inline-block; font-size:.8rem; color:#e8edff; background:rgba(148,163,184,.12); border:1px solid var(--line); padding:4px 8px; border-radius:999px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 16px; border-radius:12px; border:1px solid transparent;
  background:var(--brand); color:#fff; font-weight:700;
}
.btn:hover{background:var(--brand-2)}
.btn.ghost{background:transparent; border-color:var(--line); color:#e2e8f0}

/* Footer */
.site-footer{border-top:1px solid var(--line); margin-top:36px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:16px; color:#98a3be; padding:18px 0}
.foot a{color:#cbd5e1}
.foot-links{white-space:nowrap}
@media (max-width:700px){ .foot{flex-direction:column; align-items:flex-start} }