/* ============================================================
   XIAOLI OPS · TECH THEME v2 —— 全站共享样式
   覆盖原手绘风全部类名，深空科技风 + 粒子特效
   ============================================================ */
:root{
  --bg:#04070f; --panel:rgba(13,22,40,.55); --panel2:rgba(8,13,26,.78);
  --line:rgba(120,160,255,.14); --line2:rgba(120,160,255,.28);
  --cyan:#00e5ff; --violet:#8b7bff; --green:#00ff9d; --amber:#ffb454;
  --rose:#ff5c8a; --red:#ff4d5e; --blue:#4da6ff;
  --text:#dce8ff; --muted:#7d8cb0;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.65;font-size:14.5px;overflow-x:hidden}
::selection{background:rgba(0,229,255,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#060a14}
::-webkit-scrollbar-thumb{background:#1a2a4a;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#274066}
a{color:var(--cyan);text-decoration:none;font-weight:600}
a:hover{color:#fff}
code{font-family:var(--mono);background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.2);
  color:#9fe8ff;padding:.08em .4em;border-radius:5px;font-size:.88em}
pre{font-family:var(--mono);background:#060b16;border:1px solid var(--line);border-radius:10px;
  padding:.8rem 1rem;overflow-x:auto;line-height:1.6;color:#a8e6c9}
button{font-family:inherit}
input{font-family:var(--mono)}

/* ---------- 背景特效层 ---------- */
#bg{position:fixed;inset:0;z-index:0;display:block}
.grid-lines{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(90,140,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(90,140,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 25%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 60% at 50% 25%,#000 0%,transparent 78%)}
body::before{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(200,230,255,.014) 0 1px,transparent 1px 3px)}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(0,120,190,.18),transparent 60%),
             radial-gradient(ellipse 55% 45% at 88% 108%,rgba(110,70,255,.12),transparent 60%)}
body>div:not(.grid-lines){position:relative;z-index:2}
footer,.topbar,.sec,.msec{position:relative;z-index:2}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(4,7,15,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);font-family:var(--mono)}
.tb-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 20px;font-size:13px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.5px;min-width:0}
.brand .sigil{flex:none;width:26px;height:26px;border:1.5px solid var(--cyan);border-radius:7px;display:grid;place-items:center;
  color:var(--cyan);font-size:11px;font-weight:700;box-shadow:0 0 12px rgba(0,229,255,.35),inset 0 0 6px rgba(0,229,255,.15)}
.brand a.bname{color:var(--text);font-weight:700;letter-spacing:1px}
.brand a.bname:hover{color:var(--cyan)}
.brand .path{color:var(--muted);font-weight:400}
.brand .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:llpulse 2s infinite;margin-left:4px}
.brand .on{color:var(--green);font-size:11px;letter-spacing:2px}
@keyframes llpulse{0%,100%{opacity:1}50%{opacity:.35}}
.clock{color:var(--muted);letter-spacing:1.5px;white-space:nowrap}
@media(max-width:640px){.brand .path,.brand .on{display:none}}
.tb-nav{border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;list-style:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-nav ul,.tb-nav{display:flex;gap:4px;padding:6px 14px;white-space:nowrap;list-style:none;flex-wrap:nowrap}
.tb-nav li{list-style:none;display:inline-flex;flex-shrink:0}
.tb-nav a{display:block;padding:5px 12px;border-radius:7px;font-size:12.5px;color:var(--muted);letter-spacing:1px;
  border:1px solid transparent;transition:all .2s;white-space:nowrap;flex-shrink:0}
.tb-nav a:hover{color:var(--cyan);background:rgba(0,229,255,.06);border-color:rgba(0,229,255,.2)}
.tb-nav a.sel{color:var(--cyan);background:rgba(0,229,255,.1);border-color:rgba(0,229,255,.35);box-shadow:0 0 14px rgba(0,229,255,.2)}

/* ---------- 通用布局 ---------- */
.sec{padding:2.4rem 1.5rem 2rem;max-width:1100px;margin:0 auto}
.msec{padding:2.2rem 1.5rem 2rem;max-width:1200px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.bd{padding:1rem}

/* 页面主标题 */
.t{text-align:center;margin-bottom:2.2rem}
.t h2{font-size:clamp(24px,4.5vw,34px);font-weight:800;letter-spacing:1.5px;
  color:#eafaff;
  text-shadow:0 0 20px rgba(0,229,255,.45),0 0 42px rgba(139,123,255,.25);
  margin-bottom:.55rem}
.t h2 .em{color:var(--cyan)}
.t p{font-family:var(--mono);font-size:12.5px;color:var(--cyan);display:inline-block;padding:.45rem 1.1rem;
  border:1px solid rgba(0,229,255,.25);border-radius:8px;background:rgba(0,18,38,.55);letter-spacing:1px}

/* 通用卡片 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,box-shadow .25s,transform .25s}
.card:hover{border-color:var(--line2);box-shadow:0 12px 32px -12px rgba(0,140,255,.25);transform:translateY(-2px)}
.c-orange{border-left:3px solid var(--amber)}
.c-green{border-left:3px solid var(--green)}
.c-blue{border-left:3px solid var(--cyan)}
.c-pink{border-left:3px solid var(--rose)}
.c-yellow{border-left:3px solid var(--amber)}
.c-purple{border-left:3px solid var(--violet)}

/* 区块标题 */
h2.box{display:inline-block;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:2px;
  padding:.45rem 1rem;margin:2rem 0 1rem;border:1px solid rgba(0,229,255,.3);border-radius:8px;
  color:var(--cyan);background:rgba(0,229,255,.05)}
h2.box.y{color:var(--amber);border-color:rgba(255,180,84,.35);background:rgba(255,180,84,.06)}
h2.box.g{color:var(--green);border-color:rgba(0,255,157,.35);background:rgba(0,255,157,.06)}
h2.box.p{color:var(--violet);border-color:rgba(139,123,255,.35);background:rgba(139,123,255,.06)}
h2.box.b{color:var(--blue);border-color:rgba(77,166,255,.35);background:rgba(77,166,255,.06)}

/* 标签（多场景） */
.tag{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;border-radius:4px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;flex-shrink:0;margin-right:.3rem;
  color:var(--cyan);border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.07)}
.tag.m{color:var(--green);border-color:rgba(0,255,157,.35);background:rgba(0,255,157,.07)}
.tag.w{color:var(--blue);border-color:rgba(77,166,255,.35);background:rgba(77,166,255,.07)}
.tag.p{color:var(--rose);border-color:rgba(255,92,138,.35);background:rgba(255,92,138,.07)}
.tag.k{color:var(--amber);border-color:rgba(255,180,84,.35);background:rgba(255,180,84,.07)}
.tag.high{color:var(--red);border-color:rgba(255,77,94,.4);background:rgba(255,77,94,.08)}
.tag.mid{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.08)}
.tag.low{color:var(--green);border-color:rgba(0,255,157,.4);background:rgba(0,255,157,.08)}

/* ---------- 通用按钮 ---------- */
.go{display:inline-block;font-family:var(--mono);background:rgba(0,229,255,.08);color:var(--cyan);
  border:1px solid rgba(0,229,255,.4);border-radius:8px;padding:.45rem 1rem;font-weight:700;font-size:.8rem;
  cursor:pointer;letter-spacing:1px;transition:all .2s;margin-top:.5rem}
.go:hover{background:var(--cyan);color:#04121a;box-shadow:0 0 22px rgba(0,229,255,.5)}
.btn{font-family:var(--mono);display:inline-block;padding:.5rem 1.2rem;color:var(--cyan);
  border:1px solid rgba(0,229,255,.4);border-radius:9px;cursor:pointer;font-weight:700;font-size:.9em;
  background:rgba(0,229,255,.07);transition:all .2s;letter-spacing:1px}
.btn:hover{background:rgba(0,229,255,.18);box-shadow:0 0 16px rgba(0,229,255,.25);transform:translateY(-1px)}
.btn-s{color:var(--green);border-color:rgba(0,255,157,.4);background:rgba(0,255,157,.07)}
.btn-s:hover{background:rgba(0,255,157,.18);box-shadow:0 0 16px rgba(0,255,157,.25)}
.btn-w{color:var(--red);border-color:rgba(255,77,94,.4);background:rgba(255,77,94,.07)}
.btn-w:hover{background:rgba(255,77,94,.18);box-shadow:0 0 16px rgba(255,77,94,.25)}
.btn-p{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.07)}
.btn-p:hover{background:rgba(255,180,84,.18);box-shadow:0 0 16px rgba(255,180,84,.25)}
.btn-go{font-family:var(--mono);background:linear-gradient(120deg,var(--cyan),#4dd8ff);color:#04121a;
  padding:.4rem 1rem;border:none;border-radius:9px;font-weight:800;font-size:.8em;cursor:pointer;
  box-shadow:0 0 18px rgba(0,229,255,.35);transition:all .2s}
.btn-go:hover{box-shadow:0 0 28px rgba(0,229,255,.6);transform:translateY(-1px)}
.btn-next{font-family:var(--mono);display:none;padding:.5rem 1.2rem;background:rgba(0,229,255,.08);
  color:var(--cyan);border:1px solid rgba(0,229,255,.4);border-radius:9px;cursor:pointer;font-weight:700;
  font-size:.95em;transition:all .2s;letter-spacing:1px}
.btn-next:hover{background:rgba(0,229,255,.2);box-shadow:0 0 16px rgba(0,229,255,.3)}

/* ---------- 页脚 ---------- */
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:26px 20px;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:1px;background:rgba(4,7,15,.6)}
footer a{color:var(--cyan);margin:0 .4rem;transition:color .2s}
footer a:hover{color:#fff}
.fline{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.sep{opacity:.4}

/* ============================================================
   practice.html —— 动手实践
   ============================================================ */
.lab{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;
  margin-bottom:1rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .25s,box-shadow .25s}
.lab:hover{border-color:rgba(0,229,255,.35);box-shadow:0 14px 36px -14px rgba(0,150,255,.3)}
.lab h3{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;letter-spacing:.5px;color:#eaf6ff;flex-wrap:wrap}
.lab .ico{font-size:1.5rem}
.lab .diff{margin-left:auto;font-family:var(--mono);font-size:.65rem;font-weight:700;padding:.2rem .55rem;
  border-radius:5px;letter-spacing:1px;border:1px solid}
.lab .diff.b{color:var(--green);border-color:rgba(0,255,157,.35);background:rgba(0,255,157,.07)}
.lab .diff.m{color:var(--amber);border-color:rgba(255,180,84,.35);background:rgba(255,180,84,.07)}
.lab .diff.h{color:var(--red);border-color:rgba(255,77,94,.35);background:rgba(255,77,94,.07)}
.lab p{color:var(--muted);margin:.4rem 0;font-size:.85rem}
.lab pre{margin:.5rem 0;font-size:.75rem}
.lab .cmd{color:var(--amber)}
.lab .cmt{color:#5a6a8a;font-style:italic}
.lab .steps{margin:.5rem 0 .5rem 1.2rem}
.lab .steps li{font-size:.8rem;color:#a8b8d8;margin-bottom:.3rem}
.term{background:#03060d;border:1px solid var(--line);color:var(--green);padding:.9rem 1rem;border-radius:10px;
  font-family:var(--mono);font-size:.78rem;height:130px;overflow-y:auto;margin-top:.6rem;line-height:1.6;
  box-shadow:inset 0 0 24px rgba(0,60,30,.15)}
.term .p{color:var(--cyan)}
.term .out{color:#5a6a8a}
.term .e{color:var(--red)}

/* ============================================================
   levels.html —— 闯关答题
   ============================================================ */
.levels-hero{max-width:1100px;margin:0 auto;padding:3rem 1.5rem 1rem;text-align:center}
.levels-hero h1{font-size:clamp(26px,5vw,40px);font-weight:800;letter-spacing:2px;
  background:linear-gradient(100deg,#eaffff,var(--cyan) 50%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(0,190,255,.25));margin-bottom:.5rem}
.levels-hero p{font-family:var(--mono);font-size:12.5px;color:var(--cyan);display:inline-block;padding:.45rem 1.1rem;
  border:1px solid rgba(0,229,255,.25);border-radius:8px;background:rgba(0,18,38,.55);letter-spacing:1px;margin-top:.6rem}
.prog-wrap{max-width:1100px;margin:.8rem auto 1rem;padding:0 1.5rem}
.progress-bar{height:14px;background:rgba(0,18,38,.7);border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));
  box-shadow:0 0 14px rgba(0,229,255,.5);transition:width .4s;border-radius:7px}
.prog-text{font-family:var(--mono);text-align:center;font-size:.8rem;color:var(--muted);margin-top:.45rem;letter-spacing:1px}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;
  margin:1.2rem auto;max-width:1100px;padding:0 1.5rem}
.lc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.1rem;
  cursor:pointer;transition:all .25s;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.lc::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.6),transparent);opacity:.4;transition:opacity .25s}
.lc:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.45);box-shadow:0 16px 40px -14px rgba(0,150,255,.35)}
.lc:hover::before{opacity:1}
.lc.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.7)}
.lc.locked:hover{transform:none;box-shadow:none}
.lc .ln{display:inline-flex;width:46px;height:46px;border-radius:11px;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--cyan);border:1px solid rgba(0,229,255,.35);
  background:rgba(0,229,255,.07);box-shadow:0 0 18px rgba(0,229,255,.15);text-shadow:0 0 12px rgba(0,229,255,.4)}
.lc:nth-child(3n) .ln{color:var(--violet);border-color:rgba(139,123,255,.35);background:rgba(139,123,255,.07);box-shadow:0 0 18px rgba(139,123,255,.15);text-shadow:0 0 12px rgba(139,123,255,.4)}
.lc:nth-child(3n+1) .ln{color:var(--green);border-color:rgba(0,255,157,.35);background:rgba(0,255,157,.07);box-shadow:0 0 18px rgba(0,255,157,.15);text-shadow:0 0 12px rgba(0,255,157,.4)}
.lc h3{font-size:1.05rem;margin:.65rem 0 .3rem;letter-spacing:.5px}
.lc p{font-size:.82rem;color:var(--muted);margin-bottom:8px}
.stars{font-size:1.05em;letter-spacing:3px;color:var(--amber);text-shadow:0 0 10px rgba(255,180,84,.4);margin:.4rem 0}
.info{margin-top:.5rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.badge{font-family:var(--mono);display:inline-block;padding:.2rem .6rem;background:rgba(0,229,255,.06);
  color:var(--cyan);border:1px solid rgba(0,229,255,.25);border-radius:5px;font-size:.68rem;font-weight:700;letter-spacing:1px}
.score{font-family:var(--mono);font-weight:700;color:var(--green);font-size:.85em}
.qbox,.qb{background:var(--panel2);border:1px solid var(--line2);border-radius:16px;padding:1.5rem;
  margin:1.2rem auto;max-width:1100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 60px -30px rgba(0,150,255,.3)}
.qh{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.qt{font-family:var(--mono);color:var(--amber);font-size:1em;letter-spacing:1px;text-shadow:0 0 12px rgba(255,180,84,.3)}
.qp{font-family:var(--mono);color:var(--cyan);font-size:.92em}
.qtxt{font-size:1.12em;font-weight:600;margin-bottom:1rem;line-height:1.7;
  background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.2);border-radius:10px;padding:.9rem 1.1rem}
.qopts{margin-top:.5rem}
.qopt{display:block;width:100%;text-align:left;padding:.8rem 1.2rem;margin:.65rem 0;
  background:rgba(8,16,32,.7);border:1px solid var(--line2);border-radius:10px;cursor:pointer;
  font-size:.98em;transition:all .2s;color:var(--text);font-weight:500;font-family:inherit}
.qopt:hover{border-color:rgba(0,229,255,.55);background:rgba(0,50,80,.45);transform:translateX(5px);
  box-shadow:0 0 18px rgba(0,150,255,.15)}
.qopt.correct{background:rgba(0,255,157,.1);border-color:var(--green);color:#c8ffe8;box-shadow:0 0 22px rgba(0,255,157,.25)}
.qopt.wrong{background:rgba(255,77,94,.1);border-color:var(--red);color:#ffd8de;box-shadow:0 0 22px rgba(255,77,94,.25)}
.qopt.locked{cursor:not-allowed;opacity:.65}
.qopt.locked:hover{transform:none;box-shadow:none}
.letter{display:inline-flex;width:27px;height:27px;align-items:center;justify-content:center;border-radius:6px;
  border:1px solid rgba(0,229,255,.45);color:var(--cyan);font-family:var(--mono);font-weight:700;font-size:.78em;
  margin-right:10px;background:rgba(0,229,255,.08)}
.qopt:nth-child(1) .letter{color:var(--cyan);border-color:rgba(0,229,255,.45)}
.qopt:nth-child(2) .letter{color:var(--violet);border-color:rgba(139,123,255,.45)}
.qopt:nth-child(3) .letter{color:var(--amber);border-color:rgba(255,180,84,.45)}
.qopt:nth-child(4) .letter{color:var(--rose);border-color:rgba(255,92,138,.45)}
.qact{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;flex-wrap:wrap;gap:.5rem}
.qinfo{font-family:var(--mono);color:var(--muted);font-size:.88em;letter-spacing:1px}
.rb{border:1px solid var(--line2);border-radius:16px;padding:2rem;text-align:center;max-width:500px;
  margin:1rem auto;background:var(--panel2);backdrop-filter:blur(10px)}
.rb.p{border-color:rgba(0,255,157,.45);box-shadow:0 0 44px rgba(0,255,157,.12)}
.rb.f{border-color:rgba(255,180,84,.45);box-shadow:0 0 44px rgba(255,180,84,.12)}
.rscore{font-family:var(--mono);font-size:3.6rem;font-weight:800;color:var(--cyan);
  text-shadow:0 0 30px rgba(0,229,255,.5);line-height:1}
.rmsg{font-size:1.2em;font-weight:700;margin:.8rem 0;letter-spacing:1px}
.ract{margin-top:1.5rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
@media(max-width:600px){.lv-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem}.qtxt{font-size:1em}.qopt{padding:.6rem .8rem}}

/* ============================================================
   graph.html —— 知识图谱
   ============================================================ */
.sum{display:flex;justify-content:center;gap:.8rem;margin-bottom:1.5rem;flex-wrap:wrap}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem 1.2rem;
  text-align:center;min-width:110px;backdrop-filter:blur(8px)}
.scard .n{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--cyan);text-shadow:0 0 14px rgba(0,229,255,.4)}
.scard .l{font-size:.68rem;color:var(--muted);letter-spacing:2px;margin-top:.1rem}
.tabs{display:flex;gap:.4rem;justify-content:center;margin-bottom:1.2rem;flex-wrap:wrap}
.tab{font-family:var(--mono);padding:.4rem 1rem;background:transparent;border:1px solid var(--line);
  border-radius:8px;font-size:.78rem;cursor:pointer;color:var(--muted);letter-spacing:1px;transition:all .2s}
.tab:hover{color:var(--cyan);border-color:rgba(0,229,255,.35)}
.tab.on{color:var(--cyan);border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.1);box-shadow:0 0 14px rgba(0,229,255,.15)}
.flow{display:flex;flex-direction:column;gap:.7rem;align-items:center}
.lv{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.4rem;
  width:100%;max-width:960px;transition:border-color .25s;backdrop-filter:blur(8px)}
.lv:hover{border-color:var(--line2)}
.lh{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem}
.lv .ln{display:inline-flex;width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:1rem;flex-shrink:0;border:1px solid}
.lv .ln.l0{color:var(--green);border-color:rgba(0,255,157,.4);background:rgba(0,255,157,.08);box-shadow:0 0 14px rgba(0,255,157,.15)}
.lv .ln.l1{color:var(--cyan);border-color:rgba(0,229,255,.4);background:rgba(0,229,255,.08);box-shadow:0 0 14px rgba(0,229,255,.15)}
.lv .ln.l2{color:var(--blue);border-color:rgba(77,166,255,.4);background:rgba(77,166,255,.08);box-shadow:0 0 14px rgba(77,166,255,.15)}
.lv .ln.l3{color:var(--violet);border-color:rgba(139,123,255,.4);background:rgba(139,123,255,.08);box-shadow:0 0 14px rgba(139,123,255,.15)}
.lv .ln.l4{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.08);box-shadow:0 0 14px rgba(255,180,84,.15)}
.lv .ln.l5{color:var(--rose);border-color:rgba(255,92,138,.4);background:rgba(255,92,138,.08);box-shadow:0 0 14px rgba(255,92,138,.15)}
.lv .ln.l6{color:var(--red);border-color:rgba(255,77,94,.4);background:rgba(255,77,94,.08);box-shadow:0 0 14px rgba(255,77,94,.15)}
.lv .ln.l7{color:#7d8cff;border-color:rgba(125,140,255,.4);background:rgba(125,140,255,.08);box-shadow:0 0 14px rgba(125,140,255,.15)}
.lv .ln.l8{color:#3ee8cf;border-color:rgba(62,232,207,.4);background:rgba(62,232,207,.08);box-shadow:0 0 14px rgba(62,232,207,.15)}
.li{flex:1}
.li h3{font-size:1.02rem;letter-spacing:.5px}
.li p{font-size:.78rem;color:var(--muted)}
.ls{font-family:var(--mono);font-size:.68rem;padding:.25rem .6rem;border-radius:6px;color:var(--muted);
  border:1px solid var(--line);letter-spacing:1px}
.ls.d{color:var(--green);border-color:rgba(0,255,157,.35);background:rgba(0,255,157,.07)}
.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.45rem;margin-top:.6rem}
.i{display:flex;align-items:center;gap:.45rem;background:rgba(8,13,26,.6);border:1px solid var(--line);
  border-radius:8px;padding:.45rem .6rem;font-size:.78rem;cursor:pointer;user-select:none;
  transition:all .15s;color:var(--text);font-weight:500}
.i:hover{border-color:rgba(0,229,255,.4);background:rgba(0,40,70,.4)}
.i.d{border-color:rgba(0,255,157,.4);background:rgba(0,255,157,.05)}
.i .c{width:15px;height:15px;border:1.5px solid var(--line2);border-radius:4px;flex-shrink:0;position:relative;transition:all .15s}
.i.d .c{border-color:var(--green);background:rgba(0,255,157,.15);box-shadow:0 0 8px rgba(0,255,157,.3)}
.i.d .c::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--green);font-size:10px;font-weight:700}
.tx{flex:1;font-size:.76rem}
.hb{font-family:var(--mono);font-size:.6rem;color:var(--amber);background:rgba(255,180,84,.08);
  border:1px solid rgba(255,180,84,.25);padding:.1rem .35rem;border-radius:4px;font-weight:700;flex-shrink:0}
.i.d .hb{background:rgba(0,255,157,.08);border-color:rgba(0,255,157,.25);color:var(--green)}
.ct{display:block;text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:6px;padding:.5rem 0 .3rem;opacity:.75}

/* ============================================================
   cheats.html —— 命令速查
   ============================================================ */
.srch{width:100%;padding:.8rem 1.1rem;border:1px solid var(--line2);border-radius:10px;font-size:.95rem;
  background:rgba(0,18,38,.6);color:var(--text);margin-bottom:1rem;transition:border-color .2s,box-shadow .2s;letter-spacing:.5px}
.srch:focus{outline:none;border-color:rgba(0,229,255,.55);box-shadow:0 0 20px rgba(0,229,255,.15)}
.srch::placeholder{color:#4a5a7a}
.cats{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem;justify-content:center}
.cat{font-family:var(--mono);padding:.35rem .9rem;background:transparent;border:1px solid var(--line);
  border-radius:20px;cursor:pointer;font-size:.75rem;color:var(--muted);letter-spacing:1px;transition:all .2s}
.cat:hover{color:var(--cyan);border-color:rgba(0,229,255,.4)}
.cat.on{color:#04121a;background:linear-gradient(120deg,var(--cyan),#4dd8ff);border-color:transparent;
  font-weight:700;box-shadow:0 0 16px rgba(0,229,255,.35)}
.cnt{font-family:var(--mono);text-align:center;display:inline-block;padding:.25rem .9rem;border-radius:15px;
  font-size:.75rem;color:var(--amber);border:1px solid rgba(255,180,84,.3);background:rgba(255,180,84,.06);
  letter-spacing:1px;margin-bottom:.5rem}
.cheats .ct,.sec .ct{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--cyan);padding:.4rem 1rem;margin:.9rem 0 .5rem;border:1px solid rgba(0,229,255,.3);
  border-radius:7px;background:rgba(0,229,255,.06)}
.cmd-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;
  margin-bottom:.65rem;transition:all .2s;backdrop-filter:blur(6px)}
.cmd-card:hover{border-color:rgba(0,229,255,.35);transform:translateX(4px);box-shadow:0 8px 24px -10px rgba(0,150,255,.25)}
.cmd-card h3{font-family:var(--mono);color:var(--cyan);font-size:.95rem;margin-bottom:.3rem;
  text-shadow:0 0 12px rgba(0,229,255,.3)}
.cmd-card .desc{color:var(--muted);font-size:.85rem}
.empty{text-align:center;padding:3rem;color:var(--muted);font-family:var(--mono);letter-spacing:2px}

/* ============================================================
   filetree.html —— 文件树
   ============================================================ */
.lv-sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;
  margin-bottom:1rem;backdrop-filter:blur(8px);transition:border-color .25s}
.lv-sec:hover{border-color:var(--line2)}
.lv-hd{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem;padding-bottom:.8rem;border-bottom:1px dashed var(--line2)}
.lv-num{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:1.05rem;flex-shrink:0;border:1px solid}
.lv-num.l0{color:var(--green);border-color:rgba(0,255,157,.4);background:rgba(0,255,157,.08);box-shadow:0 0 14px rgba(0,255,157,.15)}
.lv-num.l1{color:var(--cyan);border-color:rgba(0,229,255,.4);background:rgba(0,229,255,.08);box-shadow:0 0 14px rgba(0,229,255,.15)}
.lv-num.l2{color:var(--blue);border-color:rgba(77,166,255,.4);background:rgba(77,166,255,.08);box-shadow:0 0 14px rgba(77,166,255,.15)}
.lv-num.l3{color:var(--violet);border-color:rgba(139,123,255,.4);background:rgba(139,123,255,.08);box-shadow:0 0 14px rgba(139,123,255,.15)}
.lv-num.l4{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.08);box-shadow:0 0 14px rgba(255,180,84,.15)}
.lv-num.l5{color:var(--rose);border-color:rgba(255,92,138,.4);background:rgba(255,92,138,.08);box-shadow:0 0 14px rgba(255,92,138,.15)}
.lv-num.l6{color:var(--red);border-color:rgba(255,77,94,.4);background:rgba(255,77,94,.08);box-shadow:0 0 14px rgba(255,77,94,.15)}
.lv-num.l7{color:#7d8cff;border-color:rgba(125,140,255,.4);background:rgba(125,140,255,.08);box-shadow:0 0 14px rgba(125,140,255,.15)}
.lv-num.l8{color:#3ee8cf;border-color:rgba(62,232,207,.4);background:rgba(62,232,207,.08);box-shadow:0 0 14px rgba(62,232,207,.15)}
.lv-info h3{font-size:1.02rem;letter-spacing:.5px}
.lv-info p{font-size:.78rem;color:var(--muted)}
.dirs{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:.8rem}
.dir{background:rgba(8,13,26,.6);border:1px solid var(--line);border-radius:10px;padding:.85rem;transition:all .2s}
.dir:hover{border-color:rgba(0,229,255,.4);transform:translateY(-2px)}
.dir h4{font-size:.88rem;color:#eaf6ff;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.35rem}
.dir h4 code{color:var(--cyan);background:rgba(0,229,255,.08);border-color:rgba(0,229,255,.25);font-size:.8rem}
.dir p{font-size:.75rem;color:var(--muted);margin-bottom:.45rem;line-height:1.55}
.fb{font-size:.72rem;line-height:1.6;margin-bottom:.45rem;padding:.45rem .55rem;background:rgba(0,18,38,.5);
  border:1px solid var(--line);border-radius:6px;color:#a8b8d8}
.fb code{color:var(--amber);background:rgba(255,180,84,.1);border-color:rgba(255,180,84,.3)}
.lb{display:inline-block;padding:.1rem .45rem;border-radius:4px;font-family:var(--mono);font-size:.62rem;
  font-weight:700;margin-right:.25rem;letter-spacing:1px;border:1px solid}
.lb.d{color:var(--red);border-color:rgba(255,77,94,.35);background:rgba(255,77,94,.07)}
.lb.i{color:var(--blue);border-color:rgba(77,166,255,.35);background:rgba(77,166,255,.07)}
.lb.s{color:var(--green);border-color:rgba(0,255,157,.35);background:rgba(0,255,157,.07)}
.lb.p{color:var(--violet);border-color:rgba(139,123,255,.35);background:rgba(139,123,255,.07)}
.docs{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}
.docs a{display:flex;align-items:center;gap:.45rem;padding:.45rem .6rem;border-radius:7px;font-size:.72rem;
  border:1px solid var(--line);color:var(--text);background:rgba(8,13,26,.5);transition:all .15s;
  font-family:var(--mono);font-weight:400}
.docs a:hover{border-color:rgba(0,229,255,.4);background:rgba(0,40,70,.35);color:#fff;transform:translateX(3px)}
.src{font-size:.66rem;color:#4a5a7a;margin-left:.2rem}

/* ============================================================
   monitor.html —— 监控大盘
   ============================================================ */
#ts{text-align:center;font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:1rem;letter-spacing:1px}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:1rem;
  backdrop-filter:blur(8px);transition:all .25s}
.mcard:hover{border-color:var(--line2);transform:translateY(-2px)}
.mcard h4{font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:2px;margin-bottom:.35rem}
.mcard .vv{font-family:var(--mono);font-size:1.9rem;font-weight:700;color:var(--cyan);text-shadow:0 0 16px rgba(0,229,255,.35)}
.mcard .sub{font-size:.7rem;color:var(--muted);margin-top:.3rem;font-family:var(--mono)}
.mbg{width:100%;height:10px;background:rgba(0,18,38,.7);border-radius:5px;border:1px solid var(--line);
  overflow:hidden;margin-top:.5rem}
.mbar{height:100%;border-radius:5px;transition:width .8s}
.cpu{background:linear-gradient(90deg,#ffb454,#ff7a45);box-shadow:0 0 12px rgba(255,150,84,.4)}
.mem{background:linear-gradient(90deg,#00e5ff,#0077ff);box-shadow:0 0 12px rgba(0,180,255,.4)}
.disk{background:linear-gradient(90deg,#ff5c8a,#ff2d55);box-shadow:0 0 12px rgba(255,80,110,.4)}
.sys{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem;font-size:.85rem;font-family:var(--mono)}
.sys span{color:var(--muted)}
.sys b{color:var(--cyan);font-weight:600}
.net{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.ncard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem;text-align:center}
.ncard h5{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:2px}
.ncard .vv{font-family:var(--mono);font-size:1.35rem;font-weight:700;color:var(--green);text-shadow:0 0 12px rgba(0,255,157,.35)}
.tbl{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:1rem}
.thr{background:rgba(0,229,255,.07);color:var(--cyan);padding:.55rem 1rem;
  display:grid;grid-template-columns:.2fr .2fr .2fr .2fr 1fr;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:1px;border-bottom:1px solid var(--line2)}
.trow{display:grid;grid-template-columns:.2fr .2fr .2fr .2fr 1fr;gap:.5rem;padding:.45rem 1rem;
  border-bottom:1px solid var(--line);font-size:.75rem;font-family:var(--mono);align-items:center;color:#b8c8e8}
.trow:nth-child(odd){background:rgba(8,13,26,.4)}
.trow:last-child{border-bottom:none}
.err{text-align:center;padding:2rem;color:var(--red);font-family:var(--mono);letter-spacing:2px}
.load{text-align:center;padding:2rem;color:var(--muted);font-family:var(--mono);letter-spacing:3px;animation:llpulse 1.5s infinite}

/* ============================================================
   path.html —— 学习路线
   ============================================================ */
.stages{display:flex;flex-direction:column;gap:1.4rem}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;
  display:flex;gap:1.2rem;align-items:center;backdrop-filter:blur(8px);transition:border-color .25s}
.stage:hover{border-color:var(--line2)}
.stage:nth-child(odd){border-left:3px solid var(--cyan)}
.stage:nth-child(even){border-left:3px solid var(--violet)}
.sn{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.3rem;font-weight:700;color:#04121a;flex-shrink:0}
.sn.s1{background:linear-gradient(135deg,#00ff9d,#00c8ff);box-shadow:0 0 20px rgba(0,220,190,.35)}
.sn.s2{background:linear-gradient(135deg,#00e5ff,#0077ff);box-shadow:0 0 20px rgba(0,180,255,.35)}
.sn.s3{background:linear-gradient(135deg,#4dd8ff,#8b7bff);box-shadow:0 0 20px rgba(100,160,255,.35)}
.sn.s4{background:linear-gradient(135deg,#8b7bff,#c86bff);box-shadow:0 0 20px rgba(150,110,255,.35)}
.sn.s5{background:linear-gradient(135deg,#ffb454,#ff7a45);box-shadow:0 0 20px rgba(255,150,84,.35)}
.sn.s6{background:linear-gradient(135deg,#ff5c8a,#ff2d55);box-shadow:0 0 20px rgba(255,90,120,.35)}
.si{flex:1}
.si h3{font-size:1.08rem;letter-spacing:.5px;margin-bottom:.25rem}
.si p{font-size:.85rem;color:var(--muted)}
.si ul{margin-top:.5rem;padding-left:1.1rem}
.si li{font-size:.8rem;color:#a8b8d8;margin-bottom:.15rem}
.sd{font-family:var(--mono);background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.3);
  border-radius:8px;padding:.35rem .8rem;font-weight:600;font-size:.78rem;color:var(--cyan);flex-shrink:0;letter-spacing:1px}
.arr{text-align:center;color:var(--cyan);font-size:1rem;letter-spacing:8px;opacity:.5;font-family:var(--mono)}

/* ============================================================
   tools.html —— 工具资源
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:1.05rem;
  transition:all .25s;display:block;color:var(--text);position:relative;overflow:hidden}
.tool::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.6),transparent);opacity:.35;transition:opacity .25s}
.tool:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.4);
  box-shadow:0 14px 36px -12px rgba(0,150,255,.3);color:var(--text)}
.tool:hover::before{opacity:1}
.tool .e{font-size:2rem;display:block;margin-bottom:.45rem}
.tool .n{font-weight:700;font-size:.95rem;letter-spacing:.5px}
.tool .d{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.tool .url{font-family:var(--mono);font-size:.68rem;color:var(--cyan);margin-top:.35rem;display:block;opacity:.85}
.tool.t1{border-left:3px solid var(--cyan)}
.tool.t2{border-left:3px solid var(--green)}
.tool.t3{border-left:3px solid var(--blue)}
.tool.t4{border-left:3px solid var(--rose)}
.tool.t5{border-left:3px solid var(--amber)}
.tool.t6{border-left:3px solid var(--violet)}

/* ============================================================
   videos.html —— 视频教程
   ============================================================ */
.vd{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:all .25s}
.vd:hover{border-color:rgba(0,229,255,.4);transform:translateY(-3px);box-shadow:0 14px 36px -12px rgba(0,150,255,.3)}
.vd .th{height:90px;display:flex;align-items:center;justify-content:center;font-size:2.3rem;
  border-bottom:1px solid var(--line);background:rgba(0,18,38,.5)}
.vd .bd{padding:.85rem}
.vd h3{font-size:.95rem;margin-bottom:.2rem;letter-spacing:.5px}
.vd p{font-size:.78rem;color:var(--muted)}
.tg-shell{color:var(--violet);border-color:rgba(139,123,255,.4);background:rgba(139,123,255,.08)}
.tg-nginx{color:var(--rose);border-color:rgba(255,92,138,.4);background:rgba(255,92,138,.08)}
.tg-docker{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.08)}
.tg-ansible{color:var(--green);border-color:rgba(0,255,157,.4);background:rgba(0,255,157,.08)}
.series{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-bottom:1.2rem;backdrop-filter:blur(8px)}
.series .hdr{padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--line)}
.series .hdr.green{background:linear-gradient(120deg,rgba(0,255,157,.12),transparent)}
.series .hdr.blue{background:linear-gradient(120deg,rgba(0,180,255,.12),transparent)}
.series .hdr.purple{background:linear-gradient(120deg,rgba(139,123,255,.12),transparent)}
.series .hdr h3{font-size:1.02rem;letter-spacing:.5px}
.series .hdr p{font-size:.76rem;color:var(--muted)}
.series .body{padding:1rem}
.series .body h4{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-bottom:.6rem;letter-spacing:1px}
.ep-list{display:flex;flex-wrap:wrap;gap:.4rem}
.ep-btn{font-family:var(--mono);padding:.35rem .75rem;border:1px solid;border-radius:7px;font-size:.72rem;
  font-weight:600;cursor:pointer;transition:all .2s;background:transparent}
.ep-btn.green{border-color:rgba(0,255,157,.4);color:var(--green)}
.ep-btn.green:hover,.ep-btn.green.on{background:rgba(0,255,157,.15);box-shadow:0 0 12px rgba(0,255,157,.2)}
.ep-btn.blue{border-color:rgba(0,180,255,.4);color:var(--cyan)}
.ep-btn.blue:hover,.ep-btn.blue.on{background:rgba(0,180,255,.15);box-shadow:0 0 12px rgba(0,180,255,.2)}
.ep-btn.purple{border-color:rgba(139,123,255,.4);color:var(--violet)}
.ep-btn.purple:hover,.ep-btn.purple.on{background:rgba(139,123,255,.15);box-shadow:0 0 12px rgba(139,123,255,.2)}
.shell-wrap{display:flex;flex-direction:column;gap:.45rem}
.shell-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;background:rgba(0,18,38,.4);
  padding:.4rem .55rem;border:1px solid var(--line);border-radius:8px}
.shell-label{font-family:var(--mono);font-size:.68rem;color:var(--amber);min-width:60px;font-weight:700;letter-spacing:1px}
.pw{margin-top:.8rem;position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;
  border:1px solid var(--line2);background:#000;display:none;box-shadow:0 0 30px rgba(0,120,255,.15)}
.pw iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

/* ============================================================
   errors.html —— 错题本
   ============================================================ */
.item{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--rose);border-radius:11px;
  padding:1rem;margin-bottom:.7rem;display:flex;align-items:flex-start;gap:.8rem;transition:all .2s}
.item:hover{border-color:rgba(255,92,138,.4);border-left-color:var(--rose)}
.item .ico{font-size:1.4rem;flex-shrink:0}
.item .c{flex:1;min-width:0}
.item .q{font-weight:700;font-size:.92rem;margin-bottom:.3rem;color:#eaf6ff}
.item .n{font-weight:700;font-size:.92rem;margin-bottom:.3rem;color:#eaf6ff}
.item .a{font-size:.8rem;color:#a8e6c9;background:rgba(0,255,157,.05);padding:.35rem .55rem;
  border:1px solid rgba(0,255,157,.2);border-radius:6px;margin-top:.35rem;display:inline-block;font-family:var(--mono)}
.item .x{background:transparent;color:var(--red);border:1px solid rgba(255,77,94,.4);border-radius:8px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-weight:700;font-size:.8rem;flex-shrink:0;transition:all .2s}
.item .x:hover{background:rgba(255,77,94,.15);box-shadow:0 0 10px rgba(255,77,94,.3)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2.2rem;text-align:center}
.box .big{font-size:3.4rem;display:inline-block}
.box .txt{font-size:1.15rem;font-weight:700;margin-top:.5rem;letter-spacing:1px}
.box .sub{font-size:.85rem;color:var(--muted);margin-top:.3rem}
.cls{font-family:var(--mono);color:var(--rose);border:1px solid rgba(255,92,138,.35);
  background:rgba(255,92,138,.07);padding:.15rem .5rem;border-radius:5px;font-size:.68rem;margin-left:.3rem;letter-spacing:1px}

/* ============================================================
   favorites.html —— 我的收藏
   ============================================================ */
.add{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.add input{flex:1;min-width:180px;padding:.7rem 1rem;border:1px solid var(--line2);border-radius:9px;
  background:rgba(0,18,38,.6);color:var(--text);font-size:.85rem;font-family:var(--mono);transition:border-color .2s,box-shadow .2s}
.add input:focus{outline:none;border-color:rgba(0,229,255,.55);box-shadow:0 0 16px rgba(0,229,255,.15)}
.add input::placeholder{color:#4a5a7a}
.add button{font-family:var(--mono);padding:.7rem 1.3rem;background:linear-gradient(120deg,var(--cyan),#4dd8ff);
  color:#04121a;border:none;border-radius:9px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:all .2s}
.add button:hover{box-shadow:0 0 22px rgba(0,229,255,.5);transform:translateY(-1px)}

/* ============================================================
   全站移动端适配（≤768px 平板/手机通用，桌面端不受影响）
   ============================================================ */
@media(max-width:768px){
  .sec{padding:1.4rem .9rem 1.6rem}
  .msec{padding:1.3rem .9rem 1.6rem}
  .tb-row{padding:8px 12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
  .card{padding:1rem}
  .t{margin-bottom:1.4rem}
  h2.box{margin:1.4rem 0 .8rem}
  .box{padding:1.5rem 1rem}
  .box .big{font-size:2.6rem}
}

/* ============================================================
   学习栈徽章导航（全站 13 页统一）
   每项 = 彩色渐变字母徽章 + 中文名，悬停发光
   ============================================================ */
.tb-nav a{display:inline-flex;align-items:center;gap:7px;padding:4px 11px}
.tb-nav a .bdg{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-size:9.5px;font-weight:800;letter-spacing:0;color:#04121a;font-style:normal;font-family:var(--mono);
  background:linear-gradient(135deg,var(--bc1,#00e5ff) 0%,var(--bc2,#4dd8ff) 100%);
  box-shadow:0 0 8px rgba(var(--bcr,0,229,255),.4),inset 0 0 5px rgba(255,255,255,.28);
  transition:transform .18s,box-shadow .18s}
.tb-nav a:hover .bdg{transform:translateY(-1px) scale(1.08);box-shadow:0 0 16px rgba(var(--bcr,0,229,255),.65)}
.tb-nav a.sel .bdg{box-shadow:0 0 16px rgba(var(--bcr,0,229,255),.85),0 0 30px rgba(var(--bcr,0,229,255),.3),inset 0 0 5px rgba(255,255,255,.35)}
.tb-nav a .lb{transition:color .2s}
.tb-nav a:hover .lb{color:#fff}
.tb-nav a.sel .lb{color:var(--cyan);text-shadow:0 0 10px rgba(0,229,255,.5)}
.nb.b1{--bcr:0,229,255;--bc1:#00e5ff;--bc2:#4dd8ff}
.nb.b2{--bcr:139,123,255;--bc1:#8b7bff;--bc2:#b39dff}
.nb.b3{--bcr:0,255,157;--bc1:#00ff9d;--bc2:#5dffb8}
.nb.b4{--bcr:255,180,84;--bc1:#ffb454;--bc2:#ffd28a}
.nb.b5{--bcr:255,92,138;--bc1:#ff5c8a;--bc2:#ff8fb0}
.nb.b6{--bcr:70,180,255;--bc1:#46b4ff;--bc2:#7fd0ff}
.nb.b7{--bcr:0,229,255;--bc1:#00e5ff;--bc2:#4dd8ff}
.nb.b8{--bcr:139,123,255;--bc1:#8b7bff;--bc2:#b39dff}
.nb.b9{--bcr:0,255,157;--bc1:#00ff9d;--bc2:#5dffb8}
.nb.b10{--bcr:255,180,84;--bc1:#ffb454;--bc2:#ffd28a}
.nb.b11{--bcr:255,92,138;--bc1:#ff5c8a;--bc2:#ff8fb0}
.nb.b12{--bcr:70,180,255;--bc1:#46b4ff;--bc2:#7fd0ff}
.nb.b13{--bcr:255,180,84;--bc1:#ffb454;--bc2:#ffd28a}
@media(max-width:640px){.tb-nav a{gap:5px;padding:3px 9px}.tb-nav a .bdg{width:19px;height:19px;font-size:8.5px;border-radius:5px}}