/* Clavis Sinica — shared stylesheet
   Tokens follow 01_UI_Design_Spec.md §11 exactly:
   paper #FBFBFC · ink #101218 · primary #6657FF · positive #13B8A6
   warning #FFB44A · border #E7E9EE · radius 12/18/24/30
*/
:root{
  --paper:#FBFBFC; --ink:#101218; --muted:#69707d;
  --primary:#6657FF; --primary-ink:#4a3fd1;
  --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:#c9c5f7}
.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:#f4f3ff}
.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(102,87,255,.13),rgba(102,87,255,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%,#6657FF 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:#c9c5f7;background:#f6f5ff}

.previewCard{display:none;margin-top:8px;background:#f6f5fb;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:#7669ef;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:#c8c4ff}
.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:#6558e8}
.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:#eceaff;color:#5545e8}
@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:#eceaff;color:#5545e8;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}

.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,#6b5cff,#4f43d6);border:0}
.task small{color:#aeb4c0;font-size:11px;letter-spacing:.02em}
.primaryTask small{color:#ddd9ff}
.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(102,87,255,.10)}
.badge{position:absolute;right:16px;top:16px;background:#eceaff;color:#5545e8;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}
.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:#f4f3ff;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:#f4f3ff;display:grid;place-items:center;font-size:12px;color:#5545e8}

/* ---------- 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:#f6f5fb;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:#c8c4ff;background:#fbfbff}
.stepnum{font-size:11px;color:#8a8f99;text-transform:uppercase;letter-spacing:.06em;font-weight:650}