/* seo-learn.css — SEO 学习教练(深绿 / 玉色 / 琥珀,与全站头部、SEO·GEO 页同色系) */
:root{
  --accent:#1f7d5d;--accent-2:#c07f1f;--accent-3:#2fbf90;
  --grad:linear-gradient(120deg,#1f7d5d 0%,#2fbf90 100%);
  --grad-flow:linear-gradient(120deg,#1f7d5d,#2fbf90,#d9a441,#1f7d5d);
  --ink:#14231b;--ink-2:#3d5046;--ink-3:#6f8076;--ink-4:#8c9e93;
  --line:#e3ebe5;--line-2:#dbe5de;--bg:#f0f4f1;--card:#fff;
  --g0:#09110d;--g1:#0f2018;--g2:#14301f;--jade:#2fbf90;--amber:#d9a441;--amber2:#f3d489;
  --ok:#1f9d72;--ok-bg:#e4f5ee;--warn:#c07f1f;--warn-bg:#fbf1dc;--err:#d4453a;--err-bg:#fbeceb;
}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(700px 360px at 8% -4%,rgba(47,191,144,.16),transparent 62%),radial-gradient(640px 320px at 96% 6%,rgba(217,164,65,.12),transparent 62%)}
.sl-wrap{position:relative;z-index:1;max-width:1600px;width:100%;margin:0 auto;padding:20px 24px 80px}

:where(.sl-wrap,.gate-overlay) *{box-sizing:border-box;margin:0;padding:0}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-bg{background:var(--grad)}
.grad-flow{background:var(--grad-flow);background-size:280% 100%;animation:flow 7s linear infinite}
@keyframes flow{to{background-position:280% 0}}
.btn-main{color:#fff;background:var(--grad-flow);background-size:280% 100%;animation:flow 7s linear infinite;box-shadow:0 12px 28px -8px rgba(31,125,93,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-main:hover{transform:translateY(-1px)}
.btn-main:disabled{background:#bccdc3!important;animation:none!important;box-shadow:none!important;transform:none!important;cursor:not-allowed!important}
.spin-anim{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mod-tag.on{background:rgba(31,125,93,.1)!important;border-color:var(--accent)!important;color:var(--accent)!important;font-weight:600!important}
.seg-btn.on{background:var(--grad);color:#fff;box-shadow:0 5px 12px -5px rgba(31,125,93,.6)}
.subseg-btn.on{background:var(--grad);color:#fff}
.prog-fill{background:var(--grad-flow);background-size:280% 100%;animation:flow 3s linear infinite}
.ch-row.sel{background:rgba(31,125,93,.13)}
.ch-row:hover{background:rgba(31,125,93,.06)}
.st-todo{background:#e8eee9;color:#8c9e93}
.st-learning{background:var(--warn-bg);color:var(--warn)}
.st-mastered{background:var(--ok-bg);color:var(--ok)}
.opt-item.correct{border-color:#9be3b5!important;background:#f1fbf5!important}
.opt-item.wrong{border-color:#f3b4b4!important;background:#fdf2f2!important}
.res-q.ok{border-left-color:var(--ok)!important}
.res-q.bad{border-left-color:var(--err)!important}
.res-q.partial{border-left-color:var(--warn)!important}
.v-ok{background:var(--ok-bg);color:var(--ok)}
.v-bad{background:var(--err-bg);color:var(--err)}
.v-partial{background:var(--warn-bg);color:var(--warn)}
.q-type.single{background:#e0f2fe;color:#0369a1}
.q-type.multi{background:#dcfce7;color:#15803d}
.q-type.truefalse{background:#fef3c7;color:#b45309}
.q-type.short{background:#cffafe;color:#0e7490}
.q-type.case{background:#fae8ff;color:#a21caf}
.rt-new{background:#e0f2fe;color:#0369a1}
.rt-review{background:var(--warn-bg);color:var(--warn)}
.rt-drill{background:#fae8ff;color:#a21caf}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2373d9ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:32px!important}
.toast-msg{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(120deg,#0f2018,#14301f);color:#fff;padding:11px 20px;border-radius:11px;font-size:13px;opacity:0;transition:.25s;z-index:80;pointer-events:none;border:1px solid rgba(255,255,255,.15);box-shadow:0 16px 40px -12px rgba(60,40,140,.5)}
.toast-msg.show{opacity:1;transform:translateX(-50%) translateY(0)}
.gate-overlay{position:fixed;inset:0;z-index:70;background:rgba(20,26,52,.42);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:24px}
.gate-overlay.show{display:flex}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(31,125,93,.18)!important;outline:none!important}
.mbar-fill{background:var(--grad);border-radius:7px}
.stat-val{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stream-cursor::after{content:"▋";color:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#lineSel{border:1px solid #dbe5de;background:rgba(255,255,255,.85);border-radius:10px;padding:7px 30px 7px 11px;font-size:12px;color:var(--ink-2);cursor:pointer;max-width:190px}
@media(max-width:1024px){
  .workspace-grid{grid-template-columns:1fr!important}
  .dash-stats{grid-template-columns:1fr 1fr!important}
}
@media(max-width:640px){
  .form-2col{grid-template-columns:1fr!important}
  .dash-stats{grid-template-columns:1fr!important}
  .settings-inner{grid-template-columns:1fr!important}
}

/* ---------- Hero ---------- */
.sl-hero{background:linear-gradient(165deg,var(--g0),var(--g1) 60%,var(--g2));color:#eaf5ef;border-radius:22px;padding:28px 32px 24px;position:relative;overflow:hidden;box-shadow:0 30px 60px -34px rgba(9,17,13,.7)}
.sl-hero::before{content:"";position:absolute;right:-80px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(47,191,144,.35),transparent 66%);pointer-events:none}
.sl-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(47,191,144,.6) 25%,rgba(217,164,65,.55) 70%,transparent)}
.sl-hero-bg{position:absolute;inset:0;border-radius:22px;overflow:hidden;pointer-events:none}
.sl-hero>*{position:relative}
.sl-top{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.sl-eyebrow{display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--amber2);border:1px solid rgba(243,212,137,.35);border-radius:99px;padding:2px 10px;margin-bottom:10px}
.sl-hero h2{margin:0 0 6px;font-family:"Noto Serif SC","Songti SC",Georgia,serif;font-size:28px;font-weight:900;letter-spacing:.01em;line-height:1.2}
.sl-hero p.sub{margin:0;color:rgba(191,240,220,.74);font-size:13.5px;max-width:760px;line-height:1.75}
.sl-ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sl-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#d8fbea;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:7px 12px;cursor:pointer;transition:.15s}
.sl-chip:hover{background:rgba(255,255,255,.14);border-color:rgba(47,191,144,.6)}
.sl-chip b{color:var(--amber2)}
.sl-chip.static{cursor:default}
.sl-chip .t-hl{font-weight:700;color:#7fe3bf}
.sl-chip .t-wr{color:#f3d489}
.sl-chip .t-er{color:#ff9d94;cursor:pointer}
#gearBtn.sl-chip{width:36px;height:36px;padding:0;justify-content:center;font-size:16px}
.sl-ctrl #lineSel{background-color:rgba(255,255,255,.08);color:#d8fbea;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:7px 28px 7px 11px;max-width:190px;font-size:12px}
.sl-ctrl #lineSel option{color:#14231b}
.sl-ctrl #lineSel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2373d9ae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
.sl-flow{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.sl-flow span{font-size:12px;color:#bff0dc;background:rgba(47,191,144,.1);border:1px solid rgba(47,191,144,.25);border-radius:99px;padding:3px 12px}
.sl-flow i{font-style:normal;color:rgba(191,240,220,.4);align-self:center}
.sl-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:stretch}
.sl-stats[hidden]{display:none}
.sl-st{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 18px;min-width:116px}
.sl-st b{display:block;font-size:24px;font-weight:800;color:#fff;line-height:1.2;font-variant-numeric:tabular-nums}
.sl-st b em{font-style:normal;font-size:13px;color:var(--amber2);margin-left:2px}
.sl-st span{font-size:11.5px;color:rgba(191,240,220,.7)}
.sl-acts{display:flex;gap:8px;margin-left:auto;align-items:center;flex-wrap:wrap}
.sl-btn{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#d8fbea;border-radius:11px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.sl-btn:hover{background:rgba(255,255,255,.16)}
.sl-btn.pri{background:linear-gradient(135deg,#1f7d5d,#2fbf90);border-color:transparent;color:#fff;box-shadow:0 10px 24px -10px rgba(47,191,144,.7)}

/* ---------- 工作区 ---------- */
#treePane{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 96px);overflow:auto}
#treePane::-webkit-scrollbar,#chPane ::-webkit-scrollbar{width:6px}
#treePane::-webkit-scrollbar-thumb{background:#cfdcd3;border-radius:6px}
.sl-tpl{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-3)}
.sl-tpl button{border:1px dashed #c2d3c8;background:#f6faf7;color:var(--ink-2);border-radius:99px;padding:3px 11px;font-size:12px;cursor:pointer}
.sl-tpl button:hover{border-color:var(--accent);color:var(--accent);background:#fff}
.sl-stg{display:flex;align-items:center;justify-content:space-between}
.sl-stg em{font-style:normal;font-weight:600;color:var(--ink-4);letter-spacing:0;text-transform:none}
.sl-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin:2px 0 6px}
.sl-badge{display:inline-block;border-radius:99px;padding:1px 10px;font-size:11px;font-weight:700;background:#e4f5ee;color:#1f7d5d}
.sl-badge.am{background:#fbf1dc;color:#9a6414}
.sl-toc{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.sl-toc a{font-size:12px;color:var(--ink-2);background:#f2f7f4;border:1px solid var(--line-2);border-radius:99px;padding:2px 11px;text-decoration:none;cursor:pointer}
.sl-toc a:hover{border-color:var(--accent);color:var(--accent)}
.sl-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px;padding-top:16px;border-top:1px dashed var(--line-2)}
.sl-ghost{background:rgba(255,255,255,.85);border:1px solid var(--line-2);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s}
.sl-ghost:hover{border-color:var(--accent);color:var(--accent)}
.sl-ghost:disabled{opacity:.45;cursor:not-allowed}
.sl-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,#e4ece7,#f3f7f4,#e4ece7);background-size:200% 100%;animation:flow2 1.4s linear infinite;margin:10px 0}
@keyframes flow2{to{background-position:-200% 0}}
.sl-foot{font-size:11.5px;color:var(--ink-4);margin-top:16px;line-height:1.7}
.toast-msg{z-index:99}
@media(max-width:1024px){#treePane{position:static;max-height:300px}.sl-acts{margin-left:0}}
@media(max-width:620px){.sl-wrap{padding:14px 12px 60px}.sl-hero{padding:20px 18px}.sl-hero h2{font-size:22px}.sl-st{min-width:calc(50% - 6px);padding:8px 12px}}
@media print{.pv-hd,#pvHeaderMount,.sl-hero,#treePane{display:none!important}}