/* ═══════════════════════════════════════════════════════════════════
   WINDOWS SECURITY COURSE - Shared Stylesheet v2.0
   Cyberpunk · Terminal · Ink-on-paper
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@300;400;600;700&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --ink:         #0f0f0f;
  --ink-soft:    #3a3a3a;
  --ink-dim:     #888;
  --paper:       #f4f1eb;
  --paper2:      #ece8e0;
  --paper3:      #e0dbd1;
  --white:       #ffffff;
  --orange:      #c85a00;
  --orange-lt:   #e06820;
  --orange-bg:   #fff3eb;
  --red:         #b03020;
  --red-bg:      #fdf0ee;
  --red-deep:    #6a1a10;
  --green:       #1a6b3c;
  --green-bg:    #edf7f1;
  --blue:        #1a4a8a;
  --blue-bg:     #eef2fa;
  --purple:      #5a2d8a;
  --purple-bg:   #f3eefa;
  --yellow:      #8a6a00;
  --yellow-bg:   #fffbea;
  --mono:        'JetBrains Mono', monospace;
  --sans:        'Familjen Grotesk', sans-serif;
  --rule:        1px solid #d4cfc6;
  --cb-bg:       #0d0d0d;
  --cb-border:   #1e1e1e;
  --cb-header:   #111111;
  --glow-org:    rgba(200,90,0,.4);
  --glow-blue:   rgba(26,74,138,.4);
  --glow-red:    rgba(176,48,32,.4);
  --glow-grn:    rgba(26,107,60,.4);
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ═══ GRAIN TEXTURE ═══ */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; opacity:.45;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
  position:fixed; left:0; top:0; bottom:0; width:238px;
  background:var(--ink); display:flex; flex-direction:column;
  z-index:100; border-right:3px solid var(--orange); overflow:hidden;
}
/* Scanline sweep */
.sidebar::before {
  content:'';
  position:absolute; top:-5%; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(200,90,0,.7) 50%, transparent 100%);
  animation:scanline 7s linear infinite;
  pointer-events:none; z-index:20;
}
@keyframes scanline {
  0%   { top:-5%; opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:.6; }
  100% { top:105%; opacity:0; }
}
.sb-brand { padding:24px 22px 16px; border-bottom:1px solid #1a1a1a; flex-shrink:0; position:relative; }
.sb-brand .cid {
  font-family:var(--mono); font-size:9px; letter-spacing:3px;
  color:var(--orange); text-transform:uppercase; margin-bottom:5px;
}
.sb-brand h1 { font-size:11.5px; font-weight:600; color:#e8e4dc; line-height:1.4; }
/* Boot status indicator */
.sb-brand::after {
  content:'● ONLINE';
  position:absolute; bottom:8px; right:14px;
  font-family:var(--mono); font-size:8px; letter-spacing:1.5px;
  color:var(--green); animation:blink-online 2.5s ease-in-out infinite;
}
@keyframes blink-online {
  0%,100% { opacity:1; } 45%,55% { opacity:.3; }
}
.sb-nav { flex:1; overflow-y:auto; padding:12px 0; scrollbar-width:thin; scrollbar-color:#1e1e1e transparent; min-height:0; }
.sb-sec { padding:7px 22px 2px; font-family:var(--mono); font-size:9px; letter-spacing:3px; color:#252525; text-transform:uppercase; }
.sb-nav a {
  display:flex; align-items:baseline; gap:9px; padding:6px 22px;
  font-family:var(--mono); font-size:11px; color:#484848;
  text-decoration:none; border-left:2px solid transparent;
  transition:all .15s; line-height:1.3; position:relative; overflow:hidden;
}
/* Hover shimmer */
.sb-nav a::after {
  content:''; position:absolute; left:-100%; top:0; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(200,90,0,.05), transparent);
  transition:left .3s;
}
.sb-nav a:hover::after { left:100%; }
.sb-nav a:hover, .sb-nav a.active { color:#e8e4dc; border-left-color:var(--orange); background:rgba(200,90,0,.06); }
/* Active cursor blink */
.sb-nav a.active::before {
  content:'▋'; font-family:var(--mono); font-size:9px; color:var(--orange);
  margin-left:auto; order:3; animation:cur .8s step-end infinite;
}
@keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }
.sb-nav a .n { color:#262626; font-size:9px; flex-shrink:0; }
.sb-nav a.active .n { color:var(--orange); }
.sb-nav a.done { color:#3a3a3a; }
.sb-nav a.done .n { color:var(--green); }
.sb-nav a.done::before { content:'✓'; font-size:9px; color:var(--green); margin-left:auto; order:3; }
.sb-nav a.lk { color:#1e1e1e; pointer-events:none; }
.sb-nav a.lk .n { color:#181818; }
.sb-nav a.lk::after { content:''; display:block; width:5px; height:5px; border-radius:50%; background:#1e1e1e; margin-left:auto; }
.sb-foot {
  padding:10px 22px 12px; border-top:1px solid #1a1a1a;
  font-family:var(--mono); font-size:9px; color:#2a2a2a; letter-spacing:1px; flex-shrink:0;
}
/* Data stream bar */
.sb-foot::before {
  content:''; display:block; height:1px; margin-bottom:8px;
  background:linear-gradient(90deg, var(--orange), transparent);
  animation:stream 3s ease-in-out infinite alternate;
}
@keyframes stream { from{width:15%;opacity:.4} to{width:88%;opacity:1} }

/* ═══ MAIN ═══ */
.main { margin-left:238px; }

/* ═══ PAGE HEADER ═══ */
.ph {
  background:var(--ink); color:var(--paper);
  padding:50px 60px 42px; position:relative; overflow:hidden;
}
/* Big chapter number ghost */
.ph .ph-num {
  position:absolute; right:36px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:140px; font-weight:700;
  color:rgba(255,255,255,.016); letter-spacing:-8px; line-height:1;
  user-select:none; pointer-events:none;
  animation:glitch-num 8s steps(1) infinite;
}
@keyframes glitch-num {
  0%,88%,100% { transform:translateY(-50%) skewX(0deg); filter:none; }
  90%  { transform:translateY(-50%) skewX(4deg) translateX(4px); filter:hue-rotate(30deg); }
  92%  { transform:translateY(-50%) skewX(-3deg) translateX(-3px); }
  94%  { transform:translateY(-50%) skewX(0deg); }
}
/* Bottom gradient line */
.ph::after {
  content:''; position:absolute; bottom:0; left:60px; right:60px; height:2px;
  background:linear-gradient(90deg, var(--orange), transparent 55%);
  box-shadow:0 0 10px var(--glow-org);
}
/* Matrix canvas overlay */
#matrix-canvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:.05; pointer-events:none; z-index:0;
}
.ph-tag {
  font-family:var(--mono); font-size:10px; letter-spacing:4px;
  color:var(--orange); text-transform:uppercase; margin-bottom:14px;
  display:flex; align-items:center; gap:10px; position:relative; z-index:1;
}
.ph-tag::before { content:''; display:block; width:22px; height:2px; background:var(--orange); box-shadow:0 0 6px var(--glow-org); }
/* Typing cursor after tag */
.ph-tag .cur { animation:cur .7s step-end infinite; color:var(--orange); }
.ph h2 {
  font-size:clamp(22px,3.5vw,40px); font-weight:700; line-height:1.1;
  letter-spacing:-1px; color:#f0ede6; margin-bottom:12px; position:relative; z-index:1;
}
.ph h2 em { color:var(--orange); font-style:normal; }
.ph-desc { color:#555; font-size:14px; max-width:540px; margin-bottom:20px; line-height:1.6; position:relative; z-index:1; }
.ph-pills { display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
.ph-pill { font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:4px 12px; border-radius:2px; border:1px solid; }
.pill-lv  { border-color:#222; color:#555; }
.pill-ang { border-color:rgba(200,90,0,.35); color:var(--orange); }
.pill-t   { border-color:#222; color:#444; }

/* ═══ CONTENT ═══ */
.content { padding:50px 60px 90px; max-width:960px; }

/* ═══ SECTION ═══ */
.sec { margin-bottom:68px; opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s ease; }
.sec.in { opacity:1; transform:translateY(0); }
.sec-title { display:flex; align-items:baseline; gap:14px; margin-bottom:24px; padding-bottom:12px; border-bottom:var(--rule); }
.sec-num {
  font-family:var(--mono); font-size:10px; color:var(--orange);
  background:var(--orange-bg); border:1px solid rgba(200,90,0,.2);
  padding:3px 9px; border-radius:2px; flex-shrink:0; transition:box-shadow .4s;
}
.sec.in .sec-num { animation:num-pop .5s ease; }
@keyframes num-pop {
  0%  { box-shadow:0 0 16px var(--glow-org); }
  100%{ box-shadow:none; }
}
.sec-title h3 { font-size:19px; font-weight:700; letter-spacing:-.3px; }

.sh {
  font-family:var(--mono); font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--ink-dim);
  margin-bottom:14px; margin-top:28px; display:flex; align-items:center; gap:8px;
}
.sh::after { content:''; display:block; flex:1; height:1px; background:var(--paper3); }

p { color:var(--ink-soft); margin-bottom:14px; }
p:last-child { margin-bottom:0; }
strong { color:var(--ink); font-weight:600; }
code {
  font-family:var(--mono); font-size:12px; background:var(--paper2);
  border:1px solid var(--paper3); padding:1px 5px; border-radius:2px; color:var(--ink);
}

/* ═══ CODE BLOCK ═══ */
.cb {
  background:var(--cb-bg); border-radius:4px; overflow:hidden;
  margin-bottom:18px; border:1px solid var(--cb-border);
  box-shadow:0 2px 14px rgba(0,0,0,.2); transition:box-shadow .25s, border-color .25s;
  position:relative;
}
.cb:hover { border-color:#2a2a2a; box-shadow:0 0 0 1px rgba(200,90,0,.12), 0 6px 22px rgba(0,0,0,.28); }
/* Corner fold accent */
.cb::before {
  content:''; position:absolute; top:0; right:0;
  width:0; height:0;
  border-top:18px solid rgba(200,90,0,.3);
  border-left:18px solid transparent;
  opacity:0; transition:opacity .2s; z-index:2;
}
.cb:hover::before { opacity:1; }

.cb-hd {
  display:flex; align-items:center; padding:9px 14px;
  background:var(--cb-header); border-bottom:1px solid var(--cb-border); gap:10px;
}
.cb-dots { display:flex; gap:5px; }
.cb-dots span { width:9px; height:9px; border-radius:50%; }
.cb-dots span:nth-child(1){ background:#ff5f57; }
.cb-dots span:nth-child(2){ background:#ffbd2e; }
.cb-dots span:nth-child(3){ background:#28c840; }
.cb-info { font-family:var(--mono); font-size:10px; color:#333; letter-spacing:1.5px; text-transform:uppercase; flex:1; }
.cb-lang { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:1.5px; padding:2px 8px; border-radius:2px; border:1px solid; }
.l-ps   { color:#5ba3e0; border-color:rgba(91,163,224,.25); background:rgba(91,163,224,.07); }
.l-cmd  { color:var(--orange-lt); border-color:rgba(200,90,0,.25); background:rgba(200,90,0,.06); }
.l-xml  { color:#e8c07a; border-color:rgba(232,192,122,.25); background:rgba(232,192,122,.06); }
.l-txt  { color:#aaa; border-color:rgba(170,170,170,.2); background:rgba(170,170,170,.04); }

/* Copy button */
.cb-copy {
  display:flex; align-items:center; gap:5px;
  background:transparent; border:1px solid #252525; border-radius:3px;
  padding:4px 10px; font-family:var(--mono); font-size:10px;
  color:#3a3a3a; cursor:pointer; transition:all .15s; white-space:nowrap; flex-shrink:0;
}
.cb-copy:hover { background:#151515; color:#aaa; border-color:#3a3a3a; box-shadow:0 0 6px rgba(200,90,0,.15); }
.cb-copy.copied { color:var(--green); border-color:rgba(26,107,60,.4); background:rgba(26,107,60,.06); }
.cb-copy::before {
  content:''; display:block; width:10px; height:10px;
  border:1.5px solid currentColor; border-radius:1px; flex-shrink:0;
  box-shadow:2px -2px 0 0 currentColor;
}
.cb-copy.copied::before {
  border:none; width:10px; height:6px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-2px); box-shadow:none;
}

.cb-body {
  padding:18px 20px; font-family:var(--mono); font-size:12.5px; line-height:2;
  color:#bbb8b0; overflow-x:auto; tab-size:2; white-space:pre;
}
/* Syntax */
.tc { color:#363636; } .tk { color:#5ba3e0; } .tp { color:#e08060; }
.ts { color:#98c47a; } .tv { color:#c9a76a; } .tf { color:#b095e8; }
.tn { color:#e8c07a; } .to { color:var(--orange-lt); } .tm { color:#dd9090; }

/* ═══ TABLES ═══ */
.tw { border:var(--rule); border-radius:4px; overflow:hidden; margin-bottom:20px; }
table { width:100%; border-collapse:collapse; }
thead th {
  background:var(--paper2); padding:10px 16px;
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--ink-soft); text-align:left; border-bottom:var(--rule);
}
tbody td { padding:10px 16px; border-bottom:1px solid #eae5dc; font-size:13.5px; color:var(--ink-soft); vertical-align:top; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:var(--white); }
.tm2 { font-family:var(--mono); font-size:12px; color:var(--ink); }
.to2 { font-family:var(--mono); font-size:12px; color:var(--orange); }
.tb  { font-family:var(--mono); font-size:12px; color:var(--blue); }
.tr2 { font-family:var(--mono); font-size:12px; color:var(--red); }
.tg  { font-family:var(--mono); font-size:12px; color:var(--green); }
.tcheck { text-align:center; }
.ok  { color:var(--green); font-weight:700; }
.no  { color:var(--red); font-weight:700; }
.maybe { color:var(--orange); font-weight:700; }

/* ═══ CALLOUT BOXES ═══ */
.tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; font-weight:700; padding:3px 10px 3px 8px; border-radius:2px;
}
.tag-atk::before { content:''; display:block; width:11px; height:11px; background:var(--red); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); flex-shrink:0; }
.tag-def::before { content:''; display:block; width:10px; height:12px; background:var(--blue); clip-path:polygon(50% 0%,100% 18%,100% 55%,50% 100%,0% 55%,0% 18%); flex-shrink:0; }
.tag-wrn::before { content:''; display:block; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:10px solid var(--orange); flex-shrink:0; }
.tag-tip::before { content:''; display:block; width:10px; height:10px; background:var(--green); border-radius:50%; flex-shrink:0; }
.tag-note::before{ content:''; display:block; width:9px; height:9px; background:var(--ink-dim); border-radius:1px; flex-shrink:0; }
.tag-atk { background:rgba(176,48,32,.08); color:var(--red); border:1px solid rgba(176,48,32,.22); }
.tag-def { background:rgba(26,74,138,.08); color:var(--blue); border:1px solid rgba(26,74,138,.22); }
.tag-wrn { background:rgba(200,90,0,.08); color:var(--orange); border:1px solid rgba(200,90,0,.22); }
.tag-tip { background:var(--green-bg); color:var(--green); border:1px solid rgba(26,107,60,.22); }
.tag-note{ background:var(--paper2); color:var(--ink-soft); border:1px solid var(--paper3); }

.box { border-radius:3px; padding:15px 18px; margin-bottom:16px; font-size:13.5px; line-height:1.65; }
.box-hd { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.box-bd p { margin-bottom:6px; } .box-bd p:last-child { margin-bottom:0; }
.box-atk  { background:var(--red-bg);    border:1px solid rgba(176,48,32,.18); border-left:3px solid var(--red);     color:var(--red-deep); }
.box-def  { background:var(--blue-bg);   border:1px solid rgba(26,74,138,.18); border-left:3px solid var(--blue);    color:#0f2d5a; }
.box-wrn  { background:var(--orange-bg); border:1px solid rgba(200,90,0,.18);  border-left:3px solid var(--orange);  color:#6a2e00; }
.box-tip  { background:var(--green-bg);  border:1px solid rgba(26,107,60,.18); border-left:3px solid var(--green);   color:#0d3d20; }
.box-note { background:var(--paper2);    border:1px solid var(--paper3);        border-left:3px solid var(--ink-dim); color:var(--ink-soft); }

/* ═══ ACCORDION ═══ */
.acc { border:var(--rule); border-radius:3px; overflow:hidden; margin-top:12px; margin-bottom:4px; }
.acc-btn {
  width:100%; background:var(--white); border:none; padding:12px 18px;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink);
  text-align:left; transition:background .15s;
}
.acc-btn:hover { background:var(--paper2); }
.acc-ico { width:16px; height:16px; position:relative; flex-shrink:0; }
.acc-ico::before { content:''; position:absolute; top:50%; left:0; right:0; height:2px; background:var(--orange); transform:translateY(-50%); }
.acc-ico::after  { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--orange); transform:translateX(-50%); transition:opacity .2s; }
.acc-btn.open .acc-ico::after { opacity:0; }
.acc-cnt { display:none; padding:18px 20px; background:var(--paper2); border-top:var(--rule); }
.acc-cnt.open { display:block; }

/* ═══ TP BLOCKS ═══ */
.tp-wrap {
  border:2px solid var(--orange); border-radius:4px; overflow:hidden; margin-bottom:22px;
  box-shadow:0 0 0 0 var(--glow-org); transition:box-shadow .3s;
}
.tp-wrap:hover { box-shadow:0 0 20px rgba(200,90,0,.18); }
.tp-bar { background:var(--orange); padding:12px 20px; display:flex; align-items:center; gap:12px; }
.tp-badge { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:2px; color:white; background:rgba(0,0,0,.2); padding:3px 10px; border-radius:2px; }
.tp-title { font-size:14px; font-weight:700; color:white; flex:1; }
.tp-diff  { font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.6); }
.tp-body  { background:var(--orange-bg); padding:24px; }
.tp-lbl   { font-family:var(--mono); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }
.tp-body ol { padding-left:20px; color:var(--ink-soft); font-size:14px; line-height:1.9; }
.tp-body ol li { margin-bottom:4px; }

/* ═══ GRIDS ═══ */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:20px; border:var(--rule); border-radius:4px; overflow:hidden; }
.gc { background:var(--white); padding:20px 22px; }
.gc:nth-child(odd) { border-right:var(--rule); }
.gc+.gc { border-top:var(--rule); }
.gc:nth-child(1),.gc:nth-child(2) { border-top:none; }
.gc-lbl   { font-family:var(--mono); font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:8px; }
.gc-title { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.gc p { font-size:13px; }

/* ═══ BADGES & PILLS ═══ */
.eid { display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700; background:var(--ink); color:var(--orange-lt); padding:2px 7px; border-radius:3px; border:1px solid #252525; }
.dbadge { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:2px 8px; border-radius:2px; border:1px solid; white-space:nowrap; }
.db-ioc  { background:rgba(176,48,32,.1); color:var(--red); border-color:rgba(176,48,32,.28); }
.db-ioc::before { content:''; display:block; width:6px; height:6px; border-radius:50%; background:var(--red); animation:pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.6} }
.db-gold { background:rgba(138,106,0,.1); color:var(--yellow); border-color:rgba(138,106,0,.28); }
.db-gold::before { content:''; display:block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid var(--yellow); }
.db-warn { background:var(--orange-bg); color:var(--orange); border-color:rgba(200,90,0,.28); }
.db-ok   { background:var(--green-bg); color:var(--green); border-color:rgba(26,107,60,.28); }

.ioc-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.ioc-pill { font-family:var(--mono); font-size:11px; padding:5px 12px; border-radius:3px; background:rgba(176,48,32,.08); color:var(--red); border:1px solid rgba(176,48,32,.2); font-weight:600; }
.ioc-pill.ioc-o { background:rgba(200,90,0,.08); color:var(--orange); border-color:rgba(200,90,0,.2); }
.ioc-pill.ioc-b { background:var(--blue-bg); color:var(--blue); border-color:rgba(26,74,138,.2); }
.ioc-pill.ioc-g { background:var(--green-bg); color:var(--green); border-color:rgba(26,107,60,.2); }

/* ═══ ANALOGY ═══ */
.analogy { background:var(--purple-bg); border:1px solid rgba(90,45,138,.2); border-left:3px solid var(--purple); border-radius:3px; padding:16px 18px; margin-bottom:20px; display:flex; align-items:flex-start; gap:14px; }
.analogy-ico { width:28px; height:28px; flex-shrink:0; margin-top:2px; background:var(--purple); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.analogy-txt { font-size:13.5px; color:#30126a; line-height:1.6; }
.analogy-txt strong { color:var(--purple); }

/* ═══ DIAGRAM (dark) ═══ */
.diag { background:var(--ink); border-radius:4px; padding:24px 28px; margin-bottom:18px; font-family:var(--mono); overflow-x:auto; }
.diag-ttl { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:18px; padding-bottom:8px; border-bottom:1px solid #1a1a1a; display:flex; align-items:center; gap:8px; }
.diag-ttl::before { content:''; display:block; width:10px; height:10px; background:var(--orange); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }
.diag-box { background:#111; border:1px solid #222; border-radius:3px; padding:10px 16px; font-size:12px; color:#bbb8b0; display:inline-block; min-width:130px; text-align:center; }
.diag-box.d-client { border-color:rgba(91,163,224,.3); color:#5ba3e0; }
.diag-box.d-ok     { border-color:rgba(26,107,60,.3); color:#7acc96; }
.diag-box.d-warn   { border-color:rgba(200,90,0,.3); color:var(--orange-lt); }
.diag-box.d-danger { border-color:rgba(176,48,32,.3); color:#dd9090; }
.diag-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.diag-arrow { font-family:var(--mono); font-size:11px; color:#2a2a2a; }
.diag-lbl  { font-size:11px; color:#3a3a3a; margin-top:2px; }
.diag-note { background:rgba(200,90,0,.08); border:1px solid rgba(200,90,0,.15); border-radius:3px; padding:8px 14px; font-size:11px; color:#5a2a00; margin-top:10px; }

/* ═══ MODE TABLE (special) ═══ */
.mode-table .tw table thead th:first-child { width:220px; }

/* ═══ CHECKLISTS ═══ */
.chk { list-style:none; margin-bottom:16px; }
.chk li { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px dashed var(--paper3); font-size:14px; color:var(--ink-soft); }
.chk li:last-child { border-bottom:none; }
.chk li::before { content:''; display:block; width:13px; height:13px; border:1.5px solid var(--orange); border-radius:2px; flex-shrink:0; margin-top:3px; }

/* ═══ DOC CARDS ═══ */
.dg { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-bottom:20px; }
.dc { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:var(--white); border:var(--rule); border-radius:4px; text-decoration:none; color:var(--ink); transition:all .15s; border-left:3px solid var(--blue); }
.dc:hover { background:var(--blue-bg); transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.06); }
.di { width:26px; height:30px; background:var(--blue-bg); border:1px solid rgba(26,74,138,.18); border-radius:2px; flex-shrink:0; position:relative; margin-top:2px; }
.di::before { content:''; position:absolute; top:0; right:0; width:7px; height:7px; background:var(--paper); border-left:1px solid rgba(26,74,138,.18); border-bottom:1px solid rgba(26,74,138,.18); }
.di::after  { content:''; position:absolute; bottom:6px; left:4px; right:4px; height:2px; background:rgba(26,74,138,.25); box-shadow:0 4px 0 0 rgba(26,74,138,.18); }
.dt { font-size:13px; font-weight:600; color:var(--blue); line-height:1.3; margin-bottom:3px; }
.du { font-family:var(--mono); font-size:10px; color:var(--ink-dim); word-break:break-all; }

/* ═══ PROGRESS BAR & BACK-TO-TOP ═══ */
.pbar {
  position:fixed; top:0; left:238px; right:0; height:3px;
  background:linear-gradient(90deg, var(--orange), var(--orange-lt));
  transform-origin:left; transform:scaleX(0); transition:transform .1s; z-index:200;
  box-shadow:0 0 10px var(--glow-org), 0 0 20px rgba(200,90,0,.15);
}
.btt {
  position:fixed; bottom:28px; right:28px; width:40px; height:40px;
  background:var(--ink); border:1px solid #2a2a2a; border-radius:3px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s, background .15s, box-shadow .2s; z-index:50;
}
.btt::before { content:''; display:block; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:10px solid var(--paper); }
.btt.show { opacity:1; }
.btt:hover { background:var(--orange); box-shadow:0 0 14px var(--glow-org); }

/* ═══ TOAST ═══ */
.copy-toast {
  position:fixed; bottom:80px; right:28px; background:var(--green); color:white;
  font-family:var(--mono); font-size:11px; letter-spacing:1px; padding:8px 14px; border-radius:3px;
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; z-index:300; pointer-events:none;
}
.copy-toast.show { opacity:1; transform:translateY(0); }

/* ═══ GLITCH HOVER on headings ═══ */
.sec-title h3 {
  position:relative;
  transition:color .15s;
}
.sec-title:hover h3 { color:var(--orange); }

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .sidebar { position:relative; width:100%; height:auto; border-right:none; border-bottom:3px solid var(--orange); }
  .sidebar::before { display:none; }
  .main { margin-left:0; }
  .ph,.content { padding-left:20px; padding-right:20px; }
  .pbar { left:0; }
  .g2 { grid-template-columns:1fr; }
  .gc:nth-child(odd){ border-right:none; }
}

@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.ph>* { animation:fadeUp .45s ease both; }
.ph .ph-tag  { animation-delay:.05s; }
.ph h2       { animation-delay:.12s; }
.ph .ph-desc { animation-delay:.18s; }
.ph .ph-pills{ animation-delay:.24s; }