/* ============================================================
   SQL 注入大全 · 多页主题站
   ============================================================ */
:root{
  --bg:#f6f8fb; --card:#ffffff; --card2:#f1f5fb;
  --ink:#1f2a3a; --ink-2:#33404f;
  --muted:#5b6b80; --dim:#8b98a9;
  --line:#e3e9f2; --line2:#d5dde9;
  --primary:#2f6fe4; --primary-d:#1e4fb8; --primary-soft:#eaf1ff;
  --accent:#0ba268; --accent-d:#0a7f52; --accent-soft:#e2f6ec;
  --warn:#b97707; --warn-soft:#fdf3dd;
  --err:#cf3a3a; --err-soft:#fdeaea;
  --code-bg:#101a28; --code-ink:#cdd9ea; --code-dim:#7f93ad;
  --shadow:0 6px 22px rgba(31,42,58,.06);
  --shadow-lg:0 14px 40px rgba(31,42,58,.10);
  --r:14px; --rs:9px;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,"Courier New",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
mark{background:#ffe58a;border-radius:3px;padding:0 1px}
.skiplink{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:8px 14px;z-index:99;border-radius:0 0 8px 0}
.skiplink:focus{left:0}

/* ---------- 顶部进度条 ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .1s}

/* ---------- 顶部导航 ---------- */
.topnav{position:sticky;top:0;z-index:110;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(31,42,58,.04)}
.topnav .inner{max-width:1180px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.topnav .brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--ink)}
.topnav .brand .mark{font-size:18px}
.topnav .tabs{display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.topnav .tabs .tab{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);border:1px solid transparent}
.topnav .tabs .tab:hover{color:var(--primary);text-decoration:none;background:var(--primary-soft)}
.topnav .tabs .tab.active{color:#fff;background:var(--primary);border-color:var(--primary);box-shadow:0 3px 10px rgba(47,111,228,.28)}
.topnav .top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.top-actions input[type="search"]{padding:7px 12px;border:1px solid var(--line2);border-radius:999px;font-size:13px;width:170px;outline:none;background:#fff;transition:.15s}
.top-actions input[type="search"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);width:230px}
.top-actions .prog{font-size:12.5px;color:var(--muted);white-space:nowrap}
.top-actions .prog b{color:var(--accent-d);font-weight:800}
.menu-btn{cursor:pointer;border:1px solid var(--primary);color:var(--primary);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.menu-btn:hover{background:var(--primary-soft)}

/* ---------- 本页小节抽屉 ---------- */
.local{position:fixed;top:0;right:0;height:100vh;width:min(340px,88vw);background:#fff;z-index:130;box-shadow:var(--shadow-lg);transform:translateX(102%);transition:transform .25s ease;overflow:auto}
.local.open{transform:translateX(0)}
.local-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;position:sticky;top:0;background:#fff}
.local-head button{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted)}
.local-toc{list-style:none;padding:8px 8px 24px}
.local-toc li a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 12px;border-radius:8px;color:var(--ink-2);font-size:13.5px}
.local-toc li a:hover{background:var(--primary-soft);color:var(--primary)}
.local-toc li a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.local-toc li a .n{color:var(--dim);font-size:11.5px}
.local-toc li a.done::after{content:"✓";color:var(--accent-d);font-weight:800}

/* ---------- 主体布局 ---------- */
.content{max-width:920px;margin:0 auto;padding:26px 20px 90px}
.page-head{margin:10px 0 20px}
.page-head .crumb{font-size:12.5px;color:var(--dim);margin-bottom:6px}
.page-head .crumb a{color:var(--dim)}
.page-head h1{font-size:28px;font-weight:800;letter-spacing:.3px;color:var(--ink)}
.page-head p{color:var(--muted);margin-top:6px;font-size:14.5px}
.sections>section{margin-top:34px}

/* ---------- 顶部上下节导航 ---------- */
.sec-navbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;margin:18px 0 26px;box-shadow:var(--shadow);font-size:13px}
.sec-navbar>span{color:var(--dim)}
.sec-navbar b#curLabel{color:var(--primary-d);font-weight:700}
.sec-navbar .stepbox{color:var(--dim);font-size:12px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:1px 10px}
.sec-navbar .sep{flex:1}
.sec-navbar button{cursor:pointer;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;border:1px solid var(--line2);background:#fff;color:var(--ink-2)}
.sec-navbar button:hover{border-color:var(--primary);color:var(--primary)}
#markBtn{background:var(--accent-soft);color:var(--accent-d);border-color:#bfe6d2}
#markBtn.on{background:var(--accent);color:#fff}
.navbtn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.navbtn.primary:hover{background:var(--primary-d);color:#fff}

/* ---------- 章节与小节 ---------- */
.ch-head{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--r);padding:18px 20px;margin:40px 0 8px;box-shadow:var(--shadow)}
.ch-badge{flex:none;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.ch-badge.dict{background:var(--primary-soft);color:var(--primary)}
.ch-badge.flow{background:var(--accent-soft);color:var(--accent-d)}
.ch-head h2{font-size:21px;font-weight:800}
.ch-head p{margin-top:3px;color:var(--muted);font-size:13px}
.ch-desc{color:var(--muted);font-size:13.5px;padding:0 4px;max-width:760px}

.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 22px;margin:18px 0;box-shadow:var(--shadow);scroll-margin-top:90px;position:relative}
.sec.flash{animation:flash 1.5s}
@keyframes flash{0%,60%{box-shadow:0 0 0 4px var(--primary-soft),var(--shadow)}}
.sec-head .crumb{font-size:12px;color:var(--dim);margin-bottom:4px}
.sec-head h3{font-size:19px;font-weight:800;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.sec-head h3 .flow-tag,.sec-head h3 .dict-tag{font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-soft);border-radius:999px;padding:2px 9px}
.sec-head .sub{margin-top:5px;color:var(--muted);font-size:13.5px}
.textblock{color:var(--ink-2);font-size:14px;max-width:820px}
.textblock p{margin:8px 0}
.textblock ul,.textblock ol{margin:6px 0 6px 20px}

/* ---------- payload 块 & 标注 ---------- */
.pwrap{background:var(--card2);border:1px solid var(--line);border-radius:var(--rs);padding:12px 14px;margin:14px 0}
.plabel{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;font-weight:800;color:var(--primary-d);margin-bottom:9px}
.plabel span{background:#fff;border:1px solid var(--line2);border-radius:999px;padding:2px 11px}
.copybtn{float:right;margin:-2px 0 6px 8px;cursor:pointer;border:1px solid var(--line2);background:#fff;color:var(--primary);border-radius:7px;padding:3px 10px;font-size:12px;font-weight:600}
.copybtn:hover{border-color:var(--primary);background:var(--primary-soft)}
.copybtn.ok{background:var(--accent);border-color:var(--accent);color:#fff}
pre{background:var(--code-bg);color:var(--code-ink);border-radius:var(--rs);padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.75;border:1px solid #0c1420}
pre code{white-space:pre}
code{font-family:var(--mono);font-size:.92em}
pre b{color:#f1f6ff;font-weight:600}
pre .cmt{color:var(--code-dim);font-style:italic}
pre .cmt-cut{color:var(--code-dim);font-style:italic}

/* 说明卡 */
.guide,.note,.warn,.danger{border-radius:var(--rs);padding:11px 14px;margin:13px 0;font-size:13.5px}
.guide{background:var(--primary-soft);border:1px solid #d6e3fb}
.guide .g-title{font-weight:800;color:var(--primary-d);margin-bottom:3px}
.g-info{background:var(--primary-soft);border-color:#d6e3fb}
.g-warn{background:var(--warn-soft);border-color:#f4e2bc}
.note{background:var(--accent-soft);border:1px solid #c6ecd9}
.warn{background:var(--warn-soft);border:1px solid #f0d9a8;color:#7a4f04}
.danger{background:var(--err-soft);border:1px solid #f5c9c9;color:#a12b2b}

/* ---------- 表 ---------- */
.tabwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rs);margin:13px 0}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
th,td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--card2);font-weight:700;color:var(--ink-2);white-space:nowrap}
tr:last-child td{border-bottom:none}
td code{background:var(--card2);border-radius:5px;padding:1px 6px;font-size:12px;white-space:nowrap}

/* 手写详注表 */
.annwrap{border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--rs);background:#fff;margin:15px 0 4px;overflow:hidden}
.annwrap .ann-title{display:block;padding:8px 14px;background:var(--primary-soft);color:var(--primary-d);font-size:12px;font-weight:800;letter-spacing:.3px}
.annwrap table.ann{width:100%;border-collapse:collapse;font-size:12.8px;background:#fff}
.annwrap table.ann th{background:var(--card2);white-space:nowrap}
table.ann td:first-child{width:26%;white-space:normal}
table.ann code{white-space:normal;word-break:break-word}

/* ---------- 决策/分支 ---------- */
.branch-row,.flow-strip{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.branch{flex:1 1 240px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--rs);padding:10px 13px;transition:.14s;font-size:13.5px}
.branch:hover{background:var(--primary-soft);border-color:var(--primary);box-shadow:0 4px 12px rgba(31,42,58,.06)}
.branch .lbl{font-weight:600;color:var(--ink-2)}
.branch .go{color:var(--primary);font-weight:700;white-space:nowrap}
.branch .go::after{content:"→"}

/* ---------- 命令行 ---------- */
.cmdline{background:#101820;color:#9fe3c1;border-radius:var(--rs);padding:12px 14px;margin:13px 0;font-family:var(--mono);font-size:13px;line-height:1.7;overflow-x:auto}
.cmdline .a{color:#6bb6ff}.cmdline .u{color:#ffd479;text-decoration:underline;text-underline-offset:2px}

/* ---------- "下一步"跳转矩阵 ---------- */
.nxt{background:var(--card);border:1px solid #cad6f1;border-left:4px solid var(--primary);border-radius:var(--r);padding:13px 15px;margin:18px 0 8px;box-shadow:var(--shadow)}
.nxt-title{font-weight:800;color:var(--primary-d);font-size:13.5px;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.nxt-title::before{content:"✔";color:#fff;background:var(--accent);border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.nxt-title small{font-weight:500;color:var(--muted);font-size:12px}
.nxt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nxt-card{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--rs);padding:8px 12px;text-decoration:none;background:#fff;transition:.14s}
.nxt-card:hover{background:var(--primary-soft);border-color:var(--primary);text-decoration:none}
.nxt-card .show-hint{font-size:12px;color:var(--muted);line-height:1.45}
.nxt-card .go-to{font-size:13.5px;color:var(--primary);font-weight:700}
.nxt-card .go-to small{color:var(--dim);font-weight:400}
.nxt-card .go-to::after{content:" →"}

/* ---------- 闭合演示器 ---------- */
.sim{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:14px 0;box-shadow:var(--shadow)}
.sim label{font-size:12.5px;color:var(--dim);display:block;margin-bottom:7px}
.sim-in{width:100%;padding:9px 12px;border:1px solid var(--line2);border-radius:8px;font-family:var(--mono);font-size:13px;outline:none;background:#fff}
.sim-in:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.sim-ip{margin:11px 0 4px;font-size:11.5px;color:var(--dim);font-weight:600}
.sim-sql{background:var(--code-bg);color:var(--code-ink);border-radius:var(--rs);padding:10px 13px;font-family:var(--mono);font-size:12.5px;line-height:1.7;word-break:break-all}
.sim-sql b{color:#e8eef7;font-weight:400}
.sim-sql .cmt-cut{color:var(--code-dim);font-style:italic}
.sim-eff{margin-top:6px;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:8px 12px;font-family:var(--mono);font-size:12.5px;line-height:1.7;word-break:break-all;color:#0b5e41}
.sim-verdict{list-style:none;margin:9px 0 0;padding:0;font-size:12.5px}
.sim-verdict li{padding:2px 0 2px 18px;position:relative;color:var(--muted)}
.sim-verdict li::before{content:"→";position:absolute;left:3px;color:var(--primary);font-weight:800}

/* ---------- 破坏性徽章 ---------- */
.sev{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;letter-spacing:.3px;white-space:nowrap;vertical-align:middle;margin-left:2px}
.sev.ro{background:var(--primary-soft);color:var(--primary)}
.sev.soft{background:var(--accent-soft);color:var(--accent-d)}
.sev.care{background:var(--warn-soft);color:var(--warn)}
.sev.hi{background:linear-gradient(135deg,#d1242f,#bb2027);color:#fff}

/* ---------- 页脚 ---------- */
.page-foot{margin-top:44px;border-top:1px solid var(--line);padding-top:18px}
.nav-cards{display:flex;gap:12px;margin-bottom:16px}
.ncard{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;box-shadow:var(--shadow);display:block}
.ncard:hover{border-color:var(--primary);text-decoration:none}
.ncard small{color:var(--dim);font-size:11.5px;display:block}
.ncard b{color:var(--primary-d);font-size:14px}
.ncard.next{text-align:right}
.page-foot .auth{color:var(--dim);font-size:12.5px}
.page-foot .auth a{color:var(--dim);text-decoration:underline}

/* ---------- 首页枢纽 ---------- */
.hero{background:linear-gradient(135deg,#0f2a55 0%,#12335f 45%,#0e4a5f 100%);color:#eef4ff;border-radius:20px;padding:44px 40px;margin:12px 0 30px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(120,190,255,.22),transparent 70%)}
.hero .tag{display:inline-block;background:rgba(120,190,255,.18);color:#bfe0ff;border:1px solid rgba(120,190,255,.35);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700;margin-bottom:14px}
.hero h1{font-size:34px;font-weight:800;line-height:1.25;margin-bottom:12px}
.hero p{color:#c8d8f0;font-size:15px;max-width:640px}
.hero .hero-meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.hero .hm{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:8px 14px;font-size:12.5px}
.hero .hm b{color:#99d6ff;font-size:16px}
.cover-banner{margin-top:22px}
.cover-banner a{display:block;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);line-height:0}
.cover-banner a:hover{text-decoration:none}
.cover-banner img{width:100%;height:auto;display:block}
.route{margin:22px 0}
.route .rt{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow);font-size:13.5px;color:var(--ink-2);flex-wrap:wrap}
.route b{color:var(--primary)}
.cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:14px 0 6px}
.ent-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;transition:.16s;position:relative;overflow:hidden}
.ent-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.ent-card .num{position:absolute;right:16px;top:14px;font-size:38px;font-weight:800;color:var(--primary-soft);line-height:1}
.ent-card h3{font-size:17px;font-weight:800;color:var(--ink)}
.ent-card .cnt{font-size:12px;color:var(--dim)}
.ent-card p{font-size:13px;color:var(--muted);flex:1}
.ent-card .go{font-weight:700;color:var(--primary);font-size:13px}
.ent-card .go::after{content:" →"}
.howto{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);margin-top:26px}
.howto h3{font-size:16px;font-weight:800;margin-bottom:12px}
.howto ul{list-style:none}
.howto li{display:flex;gap:10px;padding:7px 0;font-size:13.5px;color:var(--ink-2)}
.howto kbd{font-family:var(--mono);background:#fff;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;padding:0 7px;font-size:12.5px;color:var(--primary-d)}
.howto li b{color:var(--primary-d)}

/* ---------- 其它 ---------- */
.totop{position:fixed;right:22px;bottom:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:#fff;color:var(--primary);font-size:19px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;box-shadow:var(--shadow);z-index:90}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--primary-soft)}
.no-match{display:none !important}

/* ---------- 打印 ---------- */
@media print{
  .topnav,.local,.sec-navbar,#toTop,.nxt,.sim,.guide,.copybtn{display:none !important}
  body{background:#fff;font-size:12pt}
  .content{max-width:100%;padding:0}
  .sec,.ch-head,.page-head{box-shadow:none;border-color:#ddd}
  pre{white-space:pre-wrap;word-break:break-word}
  a{color:#000;text-decoration:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .nxt-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topnav .inner{gap:8px}
  .top-actions input[type="search"]{width:120px}
  .top-actions input[type="search"]:focus{width:140px}
  .cards{grid-template-columns:1fr}
  .hero{padding:30px 22px}
  .hero h1{font-size:25px}
  .sec{padding:18px 16px}
  .sec-navbar{font-size:12px;gap:6px}
  .sec-navbar .stepbox{display:none}
  .nav-cards{flex-direction:column}
}