/* ============================================================
   AppSec Crash Course — visual system
   Light-first, theme-aware. Fonts: Space Grotesk (display) + Inter
   (Latin body), system CJK fallback. Accent: indigo→cyan.
   ============================================================ */
:root{
  --bg:#f6f6f4;
  --bg-grad-a:#eef0ff;
  --bg-grad-b:#f6f6f4;
  --card:#ffffff;
  --card-2:#fbfbfa;
  --ink:#15171c;
  --text:#282b33;
  --text-dim:#61656f;
  --border:#e7e6e2;
  --border-strong:#d8d7d2;
  --accent:#5457e6;
  --accent-2:#0ea5b7;
  --accent-soft:#ecedff;
  --accent-ink:#3b3ecc;
  --good:#1f9d55;
  --good-soft:#e7f6ee;
  --warn:#c77400;
  --warn-soft:#fdf1dd;
  --warn-border:#f0c778;
  --code-bg:#15181f;
  --code-text:#e9ebf0;
  --shadow-sm:0 1px 2px rgba(20,22,30,.04), 0 2px 8px rgba(20,22,30,.05);
  --shadow-md:0 4px 12px rgba(20,22,30,.06), 0 12px 32px rgba(20,22,30,.07);
  --radius:18px;
  --radius-sm:11px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1014;
    --bg-grad-a:#141a2e;
    --bg-grad-b:#0e1014;
    --card:#171a21;
    --card-2:#13161c;
    --ink:#f2f3f6;
    --text:#d5d8df;
    --text-dim:#9aa0ad;
    --border:#282c35;
    --border-strong:#333844;
    --accent:#8b8dff;
    --accent-2:#3dd6e6;
    --accent-soft:#20233a;
    --accent-ink:#a9abff;
    --good:#4ecb83;
    --good-soft:#16281f;
    --warn:#e2a54a;
    --warn-soft:#2b2213;
    --warn-border:#5a4526;
    --code-bg:#0a0c11;
    --code-text:#e9ebf0;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 6px 24px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1014;
  --bg-grad-a:#141a2e;
  --bg-grad-b:#0e1014;
  --card:#171a21;
  --card-2:#13161c;
  --ink:#f2f3f6;
  --text:#d5d8df;
  --text-dim:#9aa0ad;
  --border:#282c35;
  --border-strong:#333844;
  --accent:#8b8dff;
  --accent-2:#3dd6e6;
  --accent-soft:#20233a;
  --accent-ink:#a9abff;
  --good:#4ecb83;
  --good-soft:#16281f;
  --warn:#e2a54a;
  --warn-soft:#2b2213;
  --warn-border:#5a4526;
  --code-bg:#0a0c11;
  --code-text:#e9ebf0;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 24px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:70px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.72; font-size:16px; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Space Grotesk","PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); line-height:1.25; letter-spacing:-.01em}
p{margin:.75em 0}
strong{color:var(--ink); font-weight:650}
em{color:var(--text-dim); font-style:italic}
a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s}
a:hover{border-color:currentColor}

code{
  background:var(--accent-soft); color:var(--accent-ink);
  padding:.12em .4em; border-radius:6px; font-size:.88em;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
pre.cmdblock{
  background:var(--code-bg); color:var(--code-text);
  padding:1.1em 1.3em; border-radius:var(--radius-sm); overflow-x:auto;
  font-size:.86rem; line-height:1.6; box-shadow:var(--shadow-sm);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid rgba(255,255,255,.04);
}
pre.cmdblock code{background:none; padding:0; color:inherit; font-size:1em}

/* ---- scroll progress bar ---- */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:50; transition:width .1s linear;
}

/* ---- hero ---- */
header.hero{
  position:relative; padding:5rem 1.5rem 3.5rem; text-align:center; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-grad-a), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--border);
}
header.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
}
header.hero > *{position:relative}
.hero-kicker{
  display:inline-flex; align-items:center; gap:.5em; margin-bottom:1.1rem;
  font-family:"Space Grotesk",sans-serif; font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft); padding:.4em .9em; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
header.hero h1{font-size:clamp(2rem,5vw,3rem); margin:.1em 0 .3em; font-weight:700}
header.hero h1 .en{
  display:block; font-size:.42em; font-weight:500; opacity:.62; letter-spacing:.02em; margin-top:.35em;
  font-family:"Space Grotesk",sans-serif;
}
header.hero .sub{color:var(--text-dim); max-width:680px; margin:1.2rem auto 0; font-size:1.02rem}
header.hero .sub em{display:block; margin-top:.6em; font-size:.92em}
header.hero .badges{margin-top:1.8rem; display:flex; gap:.65rem; justify-content:center; flex-wrap:wrap}
.badge{
  background:var(--card); color:var(--text); border:1px solid var(--border-strong);
  padding:.45em 1em; border-radius:999px; font-size:.82rem; font-weight:550;
  box-shadow:var(--shadow-sm);
}
.badge::before{content:"◆ "; color:var(--accent); font-size:.8em}

/* ---- sticky nav ---- */
nav.toc{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
  padding:.55rem max(1rem, calc((100% - 900px)/2));
  display:flex; gap:.3rem; overflow-x:auto; font-size:.85rem; white-space:nowrap;
  scrollbar-width:none;
}
nav.toc::-webkit-scrollbar{display:none}
nav.toc a{
  color:var(--text-dim); text-decoration:none; border:0; padding:.4em .8em; border-radius:8px;
  font-weight:550; transition:background .15s,color .15s;
}
nav.toc a:hover{background:var(--accent-soft); color:var(--accent-ink)}
nav.toc a.active{background:var(--accent); color:#fff}

main{max-width:840px; margin:0 auto; padding:2.4rem 1.4rem 5rem}

/* ---- scope box ---- */
.scope-box{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem 1.8rem; margin:0 0 2.4rem; box-shadow:var(--shadow-sm);
}
.scope-box h2{margin:0 0 1.1rem; font-size:1.15rem; display:flex; align-items:center; gap:.5em}
.scope-box h2::before{content:"⌖"; color:var(--accent); font-size:1.2em}
.scope-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
@media (max-width:640px){.scope-grid{grid-template-columns:1fr}}
.scope-grid .yes,.scope-grid .no{border-radius:var(--radius-sm); padding:1rem 1.1rem}
.scope-grid .yes{background:var(--good-soft); border:1px solid color-mix(in srgb,var(--good) 25%,transparent)}
.scope-grid .no{background:var(--card-2); border:1px solid var(--border)}
.scope-grid strong{display:block; margin-bottom:.5rem; font-size:.95rem}
.scope-grid .yes strong{color:var(--good)}
.scope-grid .no strong{color:var(--text-dim)}
.scope-grid ul{margin:0; padding-left:1.15em; font-size:.9rem}
.scope-grid li{margin:.4em 0}

/* ---- stage cards ---- */
section.stage{
  position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:2.1rem 2.2rem; margin:1.8rem 0;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s, border-color .2s;
}
section.stage:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong)}
@media (max-width:560px){section.stage{padding:1.5rem 1.3rem}}
.stage-tag{
  display:inline-flex; align-items:center; gap:.5em; font-family:"Space Grotesk",sans-serif;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff;
  padding:.35em .85em; border-radius:999px; margin-bottom:.9rem;
}
.stage-head h2{margin:.15em 0 .6em; font-size:1.42rem; font-weight:650}
.goal{
  color:var(--text); font-size:.94rem; background:var(--accent-soft);
  border-radius:var(--radius-sm); padding:.85rem 1.05rem; margin:.4rem 0 1.2rem;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
}
.goal::before{content:"🎯 "; }
section.stage h3{font-size:1.12rem; margin:1.8rem 0 .6rem; padding-top:.2rem}
section.stage h4{font-size:1rem; margin:1.4rem 0 .5rem; color:var(--accent-ink)}
section.stage > p:first-of-type{margin-top:0}

/* ---- analogy / callout ---- */
.analogy{
  background:linear-gradient(180deg,var(--accent-soft),transparent);
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:var(--radius-sm); padding:.95rem 1.15rem; margin:1.1rem 0; font-size:.93rem;
}
.analogy::before{content:"💡 类比 / Analogy — "; font-weight:650; color:var(--accent-ink)}
.callout{
  position:relative; background:var(--card-2); border:1px solid var(--border);
  border-left:4px solid var(--accent); border-radius:var(--radius-sm);
  padding:1.05rem 1.25rem; margin:1.3rem 0;
}
.callout.warn{background:var(--warn-soft); border-color:var(--warn-border); border-left-color:var(--warn)}
.callout > strong:first-child{color:var(--ink)}

/* ---- tables ---- */
table{
  width:100%; border-collapse:separate; border-spacing:0; margin:1.3rem 0; font-size:.9rem;
  border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
thead th{background:var(--card-2); color:var(--text-dim); font-family:"Space Grotesk",sans-serif;
  font-weight:600; font-size:.82rem; letter-spacing:.02em}
th,td{text-align:left; padding:.7em .9em; border-bottom:1px solid var(--border); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--card-2)}
.chain-table td:first-child{font-weight:650; white-space:nowrap; color:var(--accent-ink)}

/* ---- video ---- */
.video-embed{margin:1.5rem 0}
.video-embed .frame-wrap{
  position:relative; padding-bottom:56.25%; height:0; border-radius:var(--radius-sm);
  overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border);
}
.video-embed .frame-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}
.video-embed .caption{font-size:.84rem; color:var(--text-dim); margin-top:.6rem; padding-left:.2rem}
.video-embed .caption strong{color:var(--ink)}
.video-embed.missing{
  background:var(--card-2); border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; color:var(--text-dim); font-size:.9rem;
}

/* ---- mermaid ---- */
pre.mermaid{
  background:var(--card-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.2rem; overflow-x:auto; margin:1.4rem 0; text-align:center;
}

/* ---- self-test / quiz ---- */
details.self-test{
  margin-top:1.8rem; background:linear-gradient(180deg,var(--accent-soft),transparent), var(--card-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem 1.4rem;
}
details.self-test > summary{
  cursor:pointer; font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--ink);
  list-style:none; display:flex; align-items:center; gap:.6em;
}
details.self-test > summary::-webkit-details-marker{display:none}
details.self-test > summary::before{
  content:"✎"; display:inline-grid; place-items:center; width:1.6em; height:1.6em;
  background:var(--accent); color:#fff; border-radius:7px; font-size:.85em;
}
details.self-test[open] > summary{margin-bottom:.6rem}
details.self-test ol{padding-left:1.3em}
details.self-test > ol > li{margin:1.15em 0; padding-left:.2em}
details.self-test details{
  margin-top:.5em; font-size:.92rem; background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:.5em .8em;
}
details.self-test details summary{font-weight:600; color:var(--accent-ink); cursor:pointer}

.quiz-q{margin:1.1em 0}
.quiz-q > p{font-weight:550; color:var(--ink)}
.quiz-opt{
  display:block; padding:.6em .9em; margin:.4em 0; border:1px solid var(--border);
  border-radius:9px; cursor:pointer; background:var(--card); transition:border-color .15s, background .15s;
}
.quiz-opt:hover{border-color:var(--accent); background:var(--accent-soft)}
.quiz-opt.correct{border-color:var(--good); background:var(--good-soft); font-weight:550}
.quiz-opt.correct::after{content:" ✓"; color:var(--good); font-weight:700}
.quiz-opt.wrong{border-color:#d84a4a; background:color-mix(in srgb,#d84a4a 10%,transparent)}
.quiz-opt.wrong::after{content:" ✗"; color:#d84a4a; font-weight:700}
.quiz-explain{
  font-size:.88rem; color:var(--text-dim); margin-top:.6em; display:none;
  border-left:3px solid var(--accent); padding-left:.8em;
}
.quiz-explain.show{display:block}

/* ---- footer ---- */
footer{
  text-align:center; padding:3rem 1rem 4rem; color:var(--text-dim); font-size:.86rem;
  border-top:1px solid var(--border); margin-top:2rem;
}
footer a{color:var(--accent-ink)}

/* selection + scrollbar polish */
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}