/* CHU Academy — shared stylesheet
   Tokens follow 01_UI_Design_Spec.md §11 exactly:
   paper #FBFBFC · ink #101218 · primary #0E6B66 · positive #13B8A6
   warning #FFB44A · border #E7E9EE · radius 12/18/24/30
*/
:root{
  --paper:#FBFBFC; --ink:#101218; --muted:#69707d;
  --primary:#0E6B66; --primary-ink:#0A524E;
  --positive:#13B8A6; --warning:#FFB44A; --danger:#EE5D66;
  --line:#E7E9EE; --card:#fff;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px;
  --shadow:0 18px 55px rgba(28,31,45,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,251,252,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(231,233,238,.8)}
.navin{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;text-decoration:none;color:var(--ink)}
.seal{width:34px;height:34px;border-radius:10px;background:#111;color:#fff;display:grid;place-items:center;font-family:"Songti SC","STSong",serif;font-size:19px}
.navlinks{display:flex;gap:24px;font-size:14px;color:#4d5361}
.navlinks a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a.current{color:var(--ink);border-color:var(--primary)}
.actions{display:flex;align-items:center;gap:10px}
.btn{border:1px solid var(--line);background:#fff;color:#181a20;border-radius:var(--r-sm);padding:10px 15px;font-weight:600;cursor:pointer;font-size:14px;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#B7D6D2}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.primary:hover{background:var(--primary)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:10px}

.langbox{position:relative}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:170px;display:none}
.langmenu.open{display:block}
.langmenu button{width:100%;text-align:left;background:none;border:0;padding:9px 11px;border-radius:9px;font-size:13px;cursor:pointer;font-family:inherit}
.langmenu button:hover{background:#EAF3F1}
.langmenu button[aria-current="true"]{color:var(--primary);font-weight:650}

@media(max-width:900px){.navlinks{display:none}}

/* ---------- Mobile bottom nav ---------- */
.mobilenav{display:none}
@media(max-width:768px){
  .mobilenav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);
  }
  .mobilenav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#8a8f9a;font-size:11px;padding:6px 0;border-radius:10px}
  .mobilenav a.current{color:var(--primary)}
  .mobilenav .micon{font-size:18px}
  body{padding-bottom:64px}
}

/* ---------- Hero ---------- */
.hero{padding:84px 0 50px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(14,107,102,.13),rgba(14,107,102,0) 70%);left:50%;top:-220px;transform:translateX(-50%);pointer-events:none}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid #dddfe6;border-radius:999px;background:#fff;font-size:12.5px;color:#535865}
.dot{width:6px;height:6px;border-radius:50%;background:var(--positive)}
h1{font-size:clamp(40px,6.6vw,74px);line-height:1.02;letter-spacing:-.045em;max-width:900px;margin:24px 0 20px;font-weight:760}
.gradient{background:linear-gradient(110deg,#111 8%,#0E6B66 58%,#0f9f92 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:720px;font-size:18px;line-height:1.65;color:#5d6370;margin:0}

.decision{margin-top:34px;background:#fff;border:1px solid #dedfe5;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:10px;max-width:880px}
.prompt{display:flex;gap:10px;align-items:flex-end}
.prompt textarea{flex:1;min-height:76px;border:0;resize:none;outline:0;padding:16px 14px;font:inherit;font-size:15.5px;background:transparent;color:var(--ink)}
.go{width:50px;height:50px;flex:none;margin:5px;border-radius:14px;border:0;background:#111;color:#fff;font-size:20px;cursor:pointer}
.go:hover{background:var(--primary)}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:2px 10px 10px}
.chip{font-size:12.5px;border:1px solid var(--line);background:#fafafa;border-radius:999px;padding:7px 11px;cursor:pointer;color:#4d5361;font-family:inherit}
.chip:hover{border-color:#B7D6D2;background:#f6f5ff}

.previewCard{display:none;margin-top:8px;background:#F3F6F4;border-radius:16px;padding:16px}
.previewCard.show{display:block}
.pcgrid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.pclabel{font-size:11px;color:#0E6B66;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.pcwhy{color:#5d6370;font-size:14px;line-height:1.55;margin-top:6px}
.pctime{font-size:12px;color:#9298a3;margin-top:8px}

.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:#777}
.trust b{color:#333;font-weight:650}

/* ---------- Sections ---------- */
.section{padding:76px 0}
.section h2{font-size:38px;letter-spacing:-.04em;margin:0 0 12px;line-height:1.12}
.sectionlead{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:680px}

/* five entries */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px}
.entry{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;min-height:190px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none;color:inherit}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#B7D6D2}
.entry .ico{font-size:23px}
.entry h3{font-size:18px;margin:24px 0 6px}
.entry p{font-size:13px;line-height:1.55;color:#747985;margin:0}
.entry small{display:block;margin-top:auto;padding-top:16px;color:#4d5361;font-weight:600}

@media(max-width:900px){.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.five{grid-template-columns:1fr}}

/* workflow shell (home preview) */
.workflowShell{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.workflowHead{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap}
.wfGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wfCard{border:1px solid var(--line);border-radius:16px;padding:17px;min-height:180px;background:#fcfcfd;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.wfCard:hover{transform:translateY(-3px);box-shadow:var(--shadow);background:#fff}
.wfMeta{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;color:#8a8f99}
.wfCode{font-weight:750;color:#0E6B66}
.wfCard h3{font-size:16.5px;margin:16px 0 6px}
.wfCard p{font-size:12.5px;color:#6c7280;line-height:1.55;margin:0}
.wfFoot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:16px;font-size:11px;color:#8a8f99}
.pill{border-radius:999px;padding:5px 8px;font-weight:650}
.pill.reuse{background:#e9f8f4;color:#078b77}
.pill.new{background:#DCEFEC;color:#0E6B66}
@media(max-width:1000px){.wfGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wfGrid{grid-template-columns:1fr}}

/* feature (two-column) */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
@media(max-width:900px){.feature{grid-template-columns:1fr}}
.demoCard{background:#15171d;border-radius:var(--r-xl);padding:18px;color:#fff;box-shadow:0 28px 80px rgba(20,22,30,.18)}
.window{background:#f7f7f8;color:#17191e;border-radius:16px;overflow:hidden}
.windowbar{height:42px;background:#fff;border-bottom:1px solid #e8e8ec;display:flex;align-items:center;padding:0 15px;gap:6px}
.windowbar i{width:8px;height:8px;border-radius:50%;background:#d8d9df}
.decodeGrid{display:grid;grid-template-columns:220px 1fr;min-height:380px}
@media(max-width:900px){.decodeGrid{grid-template-columns:1fr}}
.hanziPane{padding:24px;border-right:1px solid #e4e5e9;background:#fcfcfd}
@media(max-width:900px){.hanziPane{border-right:0;border-bottom:1px solid #e4e5e9}}
.bigchar{font-family:"Songti SC","STSong",serif;font-size:104px;line-height:1;text-align:center;margin:32px 0 8px}
.pinyin{text-align:center;color:#777}
.parts{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.part{padding:7px 10px;border-radius:9px;background:#eeeefa;font-size:12px}
.answer{padding:26px}
.tag{display:inline-flex;background:#DCEFEC;color:#0E6B66;border-radius:8px;padding:6px 8px;font-size:11px;font-weight:700}
.answer h3{font-size:22px;margin:14px 0 5px}
.answer p{color:#656b76;line-height:1.6;font-size:14px}
.evidence{margin-top:18px;padding:14px;border-radius:12px;background:#fff;border:1px solid #e5e6ea;font-size:12px}
.bars{display:grid;gap:9px;margin-top:12px}
.bar{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:8px;font-size:11px;color:#666}
.track{height:6px;background:#ececf0;border-radius:5px;overflow:hidden}
.fill{height:100%;background:var(--primary);border-radius:5px}
.hzTryRow{display:flex;gap:8px;align-items:center;margin-top:20px}
.hzTryInput{flex:1;min-width:0;height:50px;border:1px solid #dedfe5;border-radius:14px;padding:0 16px;font-size:22px;text-align:center;font-family:"Songti SC","STSong",serif}
.hzTryInput:focus{outline:2px solid var(--primary);outline-offset:1px}

.bullets{display:grid;gap:16px;margin-top:26px}
.bullet{display:flex;gap:14px}
.check{width:24px;height:24px;flex:none;border-radius:8px;background:#e9f8f4;color:#078b77;display:grid;place-items:center;font-size:12px}
.bullet b{display:block;margin-bottom:3px}
.bullet span{color:#6d7280;font-size:14px;line-height:1.5}

/* today (dark) */
.today{background:#111319;color:#fff;border-radius:var(--r-xl);padding:32px;overflow:hidden}
.todaytop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.today h3{font-size:28px;margin:0 0 6px}
.today p{color:#9da3b2;margin:0}
.streak{background:#242731;border:1px solid #30333d;border-radius:14px;padding:9px 13px;font-size:12px;white-space:nowrap}
.workspaceTabs{display:flex;gap:8px;margin:22px 0 18px;flex-wrap:wrap}
.tab{padding:9px 13px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px;cursor:pointer;font-family:inherit}
.today .tab{background:#1c1f27;border-color:#292c35;color:#c7cad2}
.tab.active{background:#111;color:#fff;border-color:#111}
.today .tab.active{background:#fff;color:#111}
.tasks{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:12px;margin-top:24px}
@media(max-width:900px){.tasks{grid-template-columns:1fr}}
.task{background:#1c1f27;border:1px solid #292c35;border-radius:18px;padding:18px;min-height:170px;position:relative}
.task.primaryTask{background:linear-gradient(135deg,#0E6B66,#0A524E);border:0}
.task small{color:#aeb4c0;font-size:11px;letter-spacing:.02em}
.primaryTask small{color:#CFE3E0}
.task h4{font-size:17px;margin:12px 0 8px}
.task p{font-size:12.5px;line-height:1.5;color:#c7cad2}
.primaryTask p{color:#e9e6ff}
.progress{height:5px;background:#30333d;border-radius:5px;margin-top:18px;overflow:hidden}
.progress span{display:block;height:100%;background:#fff;width:68%}
.whylink{background:none;border:0;color:#9da3b2;font-size:11px;text-decoration:underline;cursor:pointer;padding:0;margin-top:10px;font-family:inherit}

/* depth counts (H07) */
.depthGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}
@media(max-width:900px){.depthGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.depthGrid{grid-template-columns:1fr}}
.depthCard{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:#fff}
.depthCard .n{font-size:30px;font-weight:750;letter-spacing:-.03em}
.depthCard .lbl{font-size:13px;color:#4d5361;margin-top:4px;font-weight:650}
.depthCard .eg{font-size:12px;color:#9298a3;margin-top:10px;line-height:1.5}

/* workspaces */
.wsCard{min-height:120px}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
@media(max-width:900px){.pricing{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pricing{grid-template-columns:1fr}}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;position:relative}
.price.pop{border:1.5px solid var(--primary);box-shadow:0 15px 45px rgba(14,107,102,.10)}
.badge{position:absolute;right:16px;top:16px;background:#DCEFEC;color:#0E6B66;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:750}
.price h3{margin:0;font-size:17px}
.money{font-size:30px;font-weight:750;margin:18px 0 4px}
.money small{font-size:12px;color:#777;font-weight:500}
.annual{font-size:12px;color:#777}
.bestfor{font-size:12.5px;font-weight:650;color:var(--primary);margin-top:6px}
.price ul{padding:0;list-style:none;margin:20px 0;display:grid;gap:9px;font-size:13px;color:#4d5361}
.price li:before{content:"✓";margin-right:8px;color:var(--positive)}
.price .btn{width:100%;justify-content:center}

/* footer */
.footer{padding:40px 0 30px;border-top:1px solid var(--line);color:#777;font-size:12.5px}
.footerin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footlinks{display:flex;gap:18px;flex-wrap:wrap}
.footlinks a{text-decoration:none;color:#777}
.footlinks a:hover{color:var(--ink)}

/* ---------- Workflow library page ---------- */
.libLayout{display:grid;grid-template-columns:220px 1fr;gap:28px;margin-top:30px;align-items:start}
@media(max-width:900px){.libLayout{grid-template-columns:1fr}}
.filterbox{position:sticky;top:88px;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;background:#fff}
.filterbox b{font-size:13px;display:block;margin-bottom:10px}
.filteritem{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 9px;border-radius:9px;font-size:13.5px;color:#4d5361;cursor:pointer;font-family:inherit}
.filteritem.active{background:#EAF3F1;color:var(--primary);font-weight:650}
.searchbar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:#fff;margin-bottom:18px}
.searchbar input{border:0;outline:0;flex:1;font:inherit;font-size:15px;background:none}
.libGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1100px){.libGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.libGrid{grid-template-columns:1fr}}
.libCard{border:1px solid var(--line);border-radius:var(--r-md);padding:19px;background:#fff;display:flex;flex-direction:column;min-height:210px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.libCard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.inputmodes{display:flex;gap:6px;margin-top:14px}
.imode{width:26px;height:26px;border-radius:8px;background:#EAF3F1;display:grid;place-items:center;font-size:12px;color:#0E6B66}

/* ---------- Workflow detail page ---------- */
.wfDetail{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start;margin-top:8px}
@media(max-width:960px){.wfDetail{grid-template-columns:1fr}}
.composer{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff}
.composer textarea,.composer input[type=text]{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;resize:vertical;min-height:110px}
.composer input[type=text]{min-height:auto}
.uploadrow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.upload{border:1px dashed var(--line);border-radius:11px;padding:9px 12px;font-size:12.5px;color:#69707d;cursor:pointer;background:#fafafa}
.resultbox{margin-top:20px;background:#F3F6F4;border-radius:16px;padding:18px;display:none}
.resultbox.show{display:block}
.gapcards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
@media(max-width:560px){.gapcards{grid-template-columns:1fr}}
.gapcard{border:1px solid var(--line);border-radius:13px;padding:14px;background:#fff}
.gapcard .n{font-size:20px;font-weight:750}
.gapcard .lbl{font-size:12px;color:#6c7280;margin-top:2px}
.sidepanel{display:grid;gap:14px}
.sidebox{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:#fff}
.sidebox h4{margin:0 0 8px;font-size:14px}
.memoryConfirm{display:flex;gap:10px;align-items:flex-start;border:1px solid #cdeee7;background:#f2fbf9;border-radius:14px;padding:14px;font-size:13px;color:#0b7a68}
.related{display:grid;gap:10px}
.relatedlink{display:flex;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;font-size:13.5px}
.relatedlink:hover{border-color:#B7D6D2;background:#fbfbff}
.stepnum{font-size:11px;color:#8a8f99;text-transform:uppercase;letter-spacing:.06em;font-weight:650}

/* ===== CS-ACCOUNT-CSS v1 (install_web.py 追加，此标记以下由脚本维护) ===== */

/* ═══════════════════════════════════════════════════════════════
   账户页与登录浮层（2026-09-11 新增）

   全部复用上面已有的令牌（--primary / --line / --positive …）。
   **不新增任何颜色常量** —— 站上已经有两套配色（本文件一套、
   decode.html 内联一套），再加第三套就没人说得清哪个是对的。
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 登录浮层 ---------- */
.csModal{
  position:fixed;inset:0;z-index:90;background:rgba(16,18,24,.46);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;
}
.csModalBox{
  position:relative;background:#fff;border-radius:var(--r-lg);
  padding:28px 26px 24px;width:100%;max-width:420px;box-shadow:var(--shadow);
}
.csModalX{
  position:absolute;right:14px;top:10px;background:none;border:0;
  font-size:24px;line-height:1;color:#9298a3;cursor:pointer;padding:4px 8px;
}
.csModalX:hover{color:var(--ink)}
.csModalBox h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.csModalSub{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.csModalBox input{
  width:100%;margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink);
}
.csModalBox input:focus{outline:none;border-color:var(--primary)}
.csModalGo{width:100%;justify-content:center;margin-top:10px}
.csModalMsg{margin:12px 0 0;font-size:13px;min-height:1.2em}
.csModalMsg.ok{color:#0b8d7d}
.csModalMsg.bad{color:var(--danger)}

/* ---------- 账户页 ---------- */
.acctGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;margin-top:28px}
@media(max-width:900px){.acctGrid{grid-template-columns:1fr}}

.planCard{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff}
.planCard.paid{border:1.5px solid var(--primary);box-shadow:0 15px 45px rgba(14,107,102,.08)}
.planName{font-size:26px;font-weight:750;letter-spacing:-.03em;margin:6px 0 2px}
.planMeta{color:var(--muted);font-size:13px;line-height:1.7}
.planActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* 状态条：同一套语义色，文字永远跟着颜色走，颜色不单独承载信息 */
.acctNote{
  border-radius:var(--r-sm);padding:13px 15px;font-size:13.5px;line-height:1.6;
  border:1px solid;margin-bottom:18px;
}
.acctNote.info{background:#EAF3F1;border-color:#CFE3E0;color:#0A524E}
.acctNote.good{background:#f2fbf9;border-color:#cdeee7;color:#0b7a68}
.acctNote.warn{background:#fff8ec;border-color:#ffe2b8;color:#8a5a06}

/* 额度条 */
.quotaList{display:grid;gap:14px;margin-top:4px}
.quotaRow{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline}
.quotaName{font-size:14px;font-weight:600}
.quotaNum{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.quotaBar{grid-column:1/-1;height:6px;background:#ececf0;border-radius:5px;overflow:hidden}
.quotaBar i{display:block;height:100%;background:var(--primary);border-radius:5px;transition:width .3s}
/* 用满了才变色。**不做「快用完了」的渐变** —— 那会让人以为 60% 就该升级 */
.quotaBar.full i{background:var(--warning)}
.quotaLocked .quotaName{color:#9298a3}
.quotaLocked .quotaNum{color:#b3b8c2}

.acctSide{display:grid;gap:14px}
.acctFoot{margin-top:26px;font-size:12px;color:#9298a3;line-height:1.7}

/* 年费行做成可点的按钮：不改布局就多出一条「按年订阅」的路 */
.annualBtn{
  background:none;border:0;padding:0;font:inherit;font-size:12px;color:#777;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#B7D6D2;font-family:inherit;
}
.annualBtn:hover{color:var(--primary)}

/* 未交付能力的标记。**必须显示**：Teacher 档卖的 create.* 还没上线，
   不标出来就是在卖不存在的东西。 */
.soon{
  display:inline-block;margin-left:6px;font-size:10px;font-weight:700;
  background:#fff3e0;color:#8a5a06;border-radius:999px;padding:2px 7px;
  vertical-align:1px;
}

/* ── 权益对照表（定价页）────────────────────────────────────────────
   由 /api/entitlements/matrix 渲染。尚未接通的行整行降透明度并打标 ——
   「有这个能力」和「这个能力能用了」是两件事，页面必须分得开。 */
.csCmp{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.csCmp th,.csCmp td{padding:9px 12px;text-align:left;border-bottom:1px solid #eceef2;
  white-space:nowrap}
.csCmp thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#888;
  border-bottom:1.5px solid #dfe2e8}
.csCmp tbody td:first-child{font-weight:600;color:#222}
.csCmp tbody tr:hover{background:#fafbfc}
.csCmp .soon{margin-left:7px}
/* 「即将开放」「不含」的条目不带对勾 —— 一个 ✓ 配一句「即将开放」
   是自相矛盾的，而定价页上的自相矛盾读起来就是不可信。 */
.price ul li.csNot::before{content:"·"!important;color:#bbb!important}

/* ============================================================
   Persona-based segmented onboarding (H01B). Added 2026-09-14.
   Card accent colors below are NEW to this component -- there is
   no existing five-entry color system in this stylesheet to reuse.
   CTA buttons intentionally reuse .btn.primary (not a new color)
   so they match every other button on the page.
   ============================================================ */
.personaSection{padding:8px 0 40px}
.personaStage{min-height:34px;margin-bottom:22px}
.personaHint{font-size:14px;color:#8a8f99;margin:0}

.personaTailored{--pc:#0E6B66;background:#fafafa;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px}
.personaHeadline{font-size:22px;font-weight:750;margin:0 0 8px;color:var(--ink)}
.personaSub{font-size:14.5px;line-height:1.6;color:#5d6370;margin:0 0 18px;max-width:640px}
.personaActions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.personaReset{background:none;border:0;padding:0;font-size:13px;color:#8a8f99;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.personaReset:hover{color:#4d5361}

.personaFeat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.personaFeatBox{margin:0;border-radius:var(--r-md);overflow:hidden;background:#fafafa;border:1px solid var(--line)}
.personaFeatBox img{display:block;width:100%;height:auto}
.personaFeatBox figcaption{padding:8px 10px;text-align:center;font-size:11.5px;line-height:1.4;color:#9a9fa8}
@media(max-width:560px){.personaFeat{grid-template-columns:1fr}}

.personaCards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
@media(max-width:900px){.personaCards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.personaCards{grid-template-columns:1fr}}

.personaCard{--pc:#0E6B66;box-sizing:border-box;position:relative;text-align:left;background:#fff;border:1px solid #E5E7EB;border-radius:var(--r-md);padding:16px;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.personaCard:hover{border-color:#B7D6D2}
.personaCard .pIco{width:34px;height:34px;border-radius:10px;background:var(--pc);color:#fff;display:grid;place-items:center;font-family:"Songti SC","STSong",serif;font-size:16px;margin-bottom:10px}
.personaCard h3{font-size:15px;margin:0 0 4px;color:var(--ink)}
.personaCard p{font-size:12.5px;line-height:1.5;color:#747985;margin:0}
.personaCard.active{border-color:var(--pc);border-width:2px;background:color-mix(in srgb, var(--pc) 8%, #fff);transform:scale(1.03);box-shadow:0 8px 20px -8px color-mix(in srgb, var(--pc) 35%, transparent)}
.personaCard .checkBadge{display:none;position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--pc);color:#fff;place-items:center;font-size:11px;box-shadow:0 0 0 2px #fff}
.personaCard.active .checkBadge{display:grid}


/* cs-hidden-fix ——————————————————————————————————————————————
   `hidden` 属性靠浏览器默认样式 [hidden]{display:none} 生效，那是 UA
   来源的规则；层叠里「来源」排在特异性之前，所以作者样式表里任何一条
   display 都盖得过它。本站 .btn / .acctGrid / .lvlGrid / .shot 都会把
   el.hidden = true 盖掉 —— 属性设上了，人照样看得见。
   decode.html 和 auth/verify.html 的页内 <style> 里已经各有一条同样的
   规则，这里补成全站的。
   加在文件末尾、顶层，不在任何 @ 块里。 */
[hidden] { display: none !important; }