/* 交互教程书库 · 共用样式（Liquid Glass / Frost·Aurora 双主题 / 中英双语） */

:root{
  --bg0:#070b18;--ink:#eaf0ff;--ink-soft:#b9c6ea;--ink-dim:#8595bf;
  --glass:rgba(255,255,255,.065);--glass-2:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.16);--stroke-bright:rgba(255,255,255,.34);
  --radius:20px;--shadow:0 10px 40px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.20);
  --page-bg:radial-gradient(1100px 760px at 12% -8%,#172049 0%,transparent 60%),radial-gradient(900px 640px at 100% 0%,#12203f 0%,transparent 55%),linear-gradient(160deg,#080d1c,#0f1730 55%,#0d1630);
  --orb-a:#4a5bd0;--orb-b:#2aa39a;--orb-c:#5b6fd8;--orb-op:.34;--orb-blend:screen;
  --font-sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Georgia,"Songti SC","Noto Serif SC",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --accent:#a06bff;--accent2:#5b8cff;--good:#22d3b0;--danger:#ff6b83;--warn:#ffb347;
  --title-grad:linear-gradient(120deg,#fff,#c9d6ff 55%,#b9a6ff);
}
html[data-theme="frost"]{
  --bg0:#eef2fb;--ink:#1b2440;--ink-soft:#3b4870;--ink-dim:#6b78a0;
  --glass:rgba(255,255,255,.55);--glass-2:rgba(255,255,255,.72);
  --stroke:rgba(30,42,90,.14);--stroke-bright:rgba(30,42,90,.30);
  --shadow:0 10px 38px rgba(70,84,140,.18),inset 0 1px 0 rgba(255,255,255,.7);
  --page-bg:radial-gradient(1100px 760px at 12% -8%,#dfe8fb 0%,transparent 60%),radial-gradient(900px 640px at 100% 0%,#dcf1ec 0%,transparent 55%),linear-gradient(160deg,#eef2fb,#e7edf8 55%,#e9f4f1);
  --orb-a:#9db8ff;--orb-b:#a7e8d8;--orb-c:#c9bcf2;--orb-op:.5;--orb-blend:normal;
  --danger:#cf3450;--good:#12a082;--warn:#b8730a;
  --title-grad:linear-gradient(120deg,#1b2440,#3b3168 55%,#5a3c8f);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--bg0);
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------- 背景 ---------- */
.bg-orbs{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--page-bg);transition:background .45s ease}
.orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:var(--orb-op);
  mix-blend-mode:var(--orb-blend);animation:float 22s ease-in-out infinite;transition:background .45s ease}
.orb.a{width:520px;height:520px;background:var(--orb-a);top:-8%;left:-6%}
.orb.b{width:460px;height:460px;background:var(--orb-b);top:38%;right:-8%;animation-delay:-6s}
.orb.c{width:420px;height:420px;background:var(--orb-c);bottom:-10%;left:26%;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.orb{animation:none}}

/* ---------- 玻璃容器 ---------- */
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(165%);
  -webkit-backdrop-filter:blur(20px) saturate(165%);border:1px solid var(--stroke);
  border-radius:var(--radius);box-shadow:var(--shadow);position:relative}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 8% 0%,rgba(255,255,255,.16),transparent 42%);opacity:.8}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:14px;z-index:30;margin:14px auto 0;max-width:1180px;
  display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:18px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.chip{font-size:12px;font-weight:700;letter-spacing:1.5px;padding:5px 11px;border-radius:999px;
  color:#dfe7ff;background:linear-gradient(120deg,rgba(91,140,255,.32),rgba(160,107,255,.32));
  border:1px solid var(--stroke);white-space:nowrap}
html[data-theme="frost"] .chip{color:#2a3566}
.brand b{font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.who{font-size:13px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.who b{color:var(--ink-soft);font-weight:700}

.lang-switch{display:flex;padding:3px;gap:2px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--stroke)}
html[data-theme="frost"] .lang-switch{background:rgba(40,55,110,.06)}
.lang-switch button{border:0;background:transparent;color:var(--ink-soft);font-family:inherit;
  font-weight:700;padding:6px 12px;border-radius:9px;cursor:pointer;font-size:13px;transition:.18s}
.lang-switch button.on{background:linear-gradient(120deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 4px 14px rgba(122,92,255,.5)}
.theme-switch{display:flex;gap:7px;padding:6px 8px;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid var(--stroke)}
html[data-theme="frost"] .theme-switch{background:rgba(40,55,110,.06)}
.theme-switch button{width:19px;height:19px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:var(--sw);padding:0;transition:.15s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.theme-switch button.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.35);transform:scale(1.05)}
.theme-switch button:hover{transform:scale(1.15)}

/* ---------- 按钮 ---------- */
.ghost{border:1px solid var(--stroke);background:var(--glass-2);color:var(--ink-soft);
  font-family:inherit;font-size:13px;font-weight:650;padding:7px 13px;border-radius:11px;
  cursor:pointer;transition:.18s;white-space:nowrap;text-decoration:none;display:inline-block}
.ghost:hover{border-color:var(--stroke-bright);color:var(--ink);transform:translateY(-1px)}
.ghost.hot{border-color:var(--warn);color:var(--warn)}
.btn{padding:11px 18px;border:0;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;transition:.18s}
.btn:disabled{opacity:.55;cursor:default;transform:none!important}
.btn.p{color:#fff;background:linear-gradient(120deg,var(--accent2),var(--accent));box-shadow:0 6px 18px rgba(122,92,255,.38)}
.btn.p:hover:not(:disabled){transform:translateY(-1px)}
.btn.d{color:#fff;background:linear-gradient(120deg,#ff5f7a,#ff8a5f);box-shadow:0 6px 18px rgba(255,95,122,.35)}
.btn.d:hover:not(:disabled){transform:translateY(-1px)}
.btn.g{background:var(--glass-2);border:1px solid var(--stroke);color:var(--ink-soft)}
.btn.g:hover:not(:disabled){border-color:var(--stroke-bright);color:var(--ink)}
.mini{border:1px solid var(--stroke);background:var(--glass-2);color:var(--ink-soft);font-family:inherit;
  font-size:12px;font-weight:650;padding:5px 10px;border-radius:9px;cursor:pointer;transition:.15s}
.mini:hover{border-color:var(--stroke-bright);color:var(--ink)}
.mini.danger:hover{border-color:var(--danger);color:var(--danger)}
.mini.good:hover{border-color:var(--good);color:var(--good)}
.mini:disabled{opacity:.4;cursor:default}

/* ---------- 表单 ---------- */
input[type=text],input[type=password],select,textarea{
  width:100%;padding:12px 14px;border-radius:13px;border:1px solid var(--stroke);
  background:var(--glass-2);color:var(--ink);font-family:inherit;font-size:14.5px;outline:none;transition:.18s}
input:focus,select:focus,textarea:focus{border-color:var(--stroke-bright);box-shadow:0 0 0 3px rgba(122,92,255,.18)}
label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-dim);margin:14px 0 5px;letter-spacing:.4px}
.hint{font-size:12px;color:var(--ink-dim);margin-top:5px;line-height:1.5}
.msg{min-height:20px;font-size:13.5px;font-weight:600;margin-top:12px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--good)}

/* ---------- Hero ---------- */
.hero{margin:30px 0 12px;padding:36px 34px;border-radius:26px;overflow:hidden}
.hero h1{margin:0 0 6px;font-size:34px;line-height:1.18;font-weight:800;letter-spacing:.3px;
  background:var(--title-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{font-size:15px;color:var(--ink-soft);max-width:760px;margin:0}
.hero em{color:#b9a6ff;font-style:italic}
html[data-theme="frost"] .hero em{color:#4b3f86}
.feat{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.feat span{font-size:12.5px;padding:7px 12px;border-radius:999px;background:var(--glass-2);
  border:1px solid var(--stroke);color:var(--ink-soft)}
h2.sh{font-size:15px;font-weight:750;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);
  margin:34px 6px 4px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h2.sh .count{font-size:12px;letter-spacing:.5px;text-transform:none;color:var(--ink-dim);font-weight:600}

/* ---------- 徽章 ---------- */
.badge{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 9px;border-radius:8px;white-space:nowrap;display:inline-block}
.badge.pending{background:rgba(255,179,71,.18);color:var(--warn);border:1px solid rgba(255,179,71,.4)}
.badge.approved{background:linear-gradient(120deg,#22d3b0,#38d66e);color:#062015}
.badge.suspended,.badge.rejected{background:rgba(255,107,131,.16);color:var(--danger);border:1px solid rgba(255,107,131,.4)}
.badge.admin{background:linear-gradient(120deg,var(--accent2),var(--accent));color:#fff}
.badge.upload{background:var(--glass-2);color:var(--ink-soft);border:1px solid var(--stroke)}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px;margin:14px 0}
.card{padding:18px 18px 16px;border-radius:18px;transition:.2s;position:relative;overflow:hidden;
  display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);border-color:var(--stroke-bright);box-shadow:0 18px 50px rgba(80,60,180,.4)}
.card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--good),var(--accent2))}
.card .n{font-family:var(--font-serif);font-size:12.5px;font-weight:700;color:#8fb6ff;letter-spacing:1px;
  word-break:break-all}
html[data-theme="frost"] .card .n{color:#4b6bd6}
.card .t{font-size:17px;font-weight:700;margin:6px 0 3px;color:#fff;word-break:break-word;line-height:1.35}
html[data-theme="frost"] .card .t{color:#161d38}
.card .te{font-size:12.5px;color:var(--ink-dim)}
.card .arrow{margin-top:14px;font-size:13.5px;color:var(--good);font-weight:650;text-decoration:none;display:inline-block}
.card .arrow:hover{text-decoration:underline}
.card .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.card .grow{flex:1}
.empty{margin:16px 0;padding:44px 26px;border-radius:22px;text-align:center;color:var(--ink-dim)}
.empty .ic{font-size:40px;margin-bottom:10px}

/* ---------- 弹窗 ---------- */
.mask{position:fixed;inset:0;z-index:60;background:rgba(6,10,24,.55);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:22px}
.mask.on{display:flex}
.modal{width:100%;max-width:460px;padding:26px 26px 22px;border-radius:22px;max-height:88vh;overflow:auto}
.modal h3{margin:0 0 8px;font-size:19px;font-weight:750}
.modal p{margin:0 0 6px;font-size:14px;color:var(--ink-soft)}
.modal .btns{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
code{font-family:var(--font-mono);font-size:12.5px;background:var(--glass-2);padding:2px 6px;
  border-radius:6px;border:1px solid var(--stroke);word-break:break-all}
select option{background:#141b3a;color:#eaf0ff}
html[data-theme="frost"] select option{background:#fff;color:#1b2440}

.footer{margin:40px auto 60px;padding:20px;text-align:center;color:var(--ink-dim);font-size:13px;border-radius:20px}
.footer a{color:var(--accent);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ---------- 双语 ---------- */
.lang-zh .en{display:none}
.lang-en .zh{display:none}

/* ---------- Toast ---------- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:min(380px,90vw)}
.toast{padding:12px 16px;border-radius:14px;font-size:13.5px;font-weight:600;
  animation:toastIn .25s ease;word-break:break-word}
.toast.err{color:var(--danger)}
.toast.ok{color:var(--good)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:620px){
  .hero h1{font-size:26px}.hero{padding:24px 20px}
  .topbar{gap:8px;padding:10px 12px}
  .brand b,.who{display:none}
  .wrap{padding:0 14px}
}