/* ============================================================
   974 工具箱 · 全站样式
   基调：纸感工作台（暖米白纸 + 墨绿 + 暖橙）
   ============================================================ */
:root{
  --paper:#F5F2EC;
  --paper-2:#EFEAE1;
  --card:#FFFFFF;
  --line:#E3DCCF;
  --line-2:#D6CEBD;
  --ink:#1C1E1A;
  --ink-2:#61645B;
  --ink-3:#8E9086;
  --brand:#12554A;
  --brand-d:#0B3B33;
  --accent:#E8642F;
  --ok:#2E7D5B;
  --warn:#B4551F;
  --err:#B4342B;
  --r:14px;
  --r-s:9px;
  --sh:0 1px 2px rgba(28,30,26,.04), 0 8px 24px rgba(28,30,26,.05);
  --sh-hi:0 2px 6px rgba(28,30,26,.06), 0 18px 40px rgba(28,30,26,.10);
  --sans:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:Georgia,"Times New Roman","Songti SC",serif;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.7 var(--sans);
  background-image:
    linear-gradient(rgba(18,85,74,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,85,74,.035) 1px,transparent 1px),
    radial-gradient(1200px 500px at 15% -10%,rgba(232,100,47,.07),transparent 70%);
  background-size:26px 26px,26px 26px,auto;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(245,242,236,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:18px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(150deg,var(--brand),var(--brand-d));display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;font-family:var(--disp)}
.logo small{font-weight:600;font-size:12px;color:var(--ink-3);letter-spacing:0}
.tb-search{flex:1;max-width:520px;position:relative}
.tb-search input{width:100%;height:38px;border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:0 40px 0 16px;font:14px var(--sans);color:var(--ink);outline:none}
.tb-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,85,74,.10)}
.tb-search .ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.topnav{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:14px;color:var(--ink-2)}
.topnav a{color:var(--ink-2)}
.topnav a:hover{color:var(--brand)}
.dl-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--brand);color:#fff!important;font-size:13.5px;font-weight:600}
.dl-btn:hover{background:var(--brand-d);text-decoration:none}

/* ---------- 首页 Hero ---------- */
.hero{padding:54px 0 30px;text-align:center}
.hero h1{margin:0 0 10px;font-size:clamp(28px,4.6vw,44px);line-height:1.22;font-weight:800;letter-spacing:-.025em}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:3px;height:9px;background:rgba(232,100,47,.22);border-radius:3px;z-index:-1}
.hero .sub{margin:0 auto;max-width:600px;color:var(--ink-2);font-size:15px}
.bigsearch{margin:26px auto 0;max-width:660px;position:relative}
.bigsearch input{width:100%;height:56px;border:1px solid var(--line-2);border-radius:999px;background:#fff;padding:0 130px 0 24px;font:16px var(--sans);color:var(--ink);outline:none;box-shadow:var(--sh)}
.bigsearch input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(18,85,74,.10),var(--sh)}
.bigsearch .go{position:absolute;right:8px;top:8px;height:40px;padding:0 22px;border:0;border-radius:999px;background:var(--brand);color:#fff;font:600 15px var(--sans);cursor:pointer}
.bigsearch .go:hover{background:var(--brand-d)}
.stats{display:flex;gap:14px;justify-content:center;margin:22px 0 0;flex-wrap:wrap}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 22px;min-width:132px;text-align:left}
.stat b{display:block;font:700 26px/1.1 var(--disp);font-style:italic;color:var(--brand-d);letter-spacing:-.02em}
.stat span{font-size:12.5px;color:var(--ink-3)}

/* ---------- 区块 ---------- */
.sec{margin:34px 0}
.sec-h{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.sec-h h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.sec-h .more{margin-left:auto;font-size:13px;color:var(--ink-3)}
.sec-h .hint{font-size:12.5px;color:var(--ink-3)}
.sec-h .mini{border:0;background:none;color:var(--accent);font:600 13px var(--sans);cursor:pointer;padding:2px 6px;border-radius:6px}
.sec-h .mini:hover{background:rgba(232,100,47,.09)}

/* 分类标签 */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pill{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:999px;padding:6px 14px;font:13.5px var(--sans);cursor:pointer}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 工具卡片墙 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.card{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;color:inherit;transition:.16s ease}
.card:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--sh-hi)}
.card .tile{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:19px;margin-bottom:11px}
.card h3{margin:0 0 4px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.55}
.card .ct{position:absolute;right:14px;bottom:12px;font-size:11.5px;color:var(--ink-3)}
.card .ct b{font-family:var(--disp);font-style:italic;font-weight:700;color:var(--ink-2)}
.fav{position:absolute;right:10px;top:10px;width:26px;height:26px;border:0;background:none;color:var(--line-2);font-size:15px;cursor:pointer;border-radius:7px;line-height:1}
.fav:hover{background:var(--paper-2);color:var(--accent)}
.fav.on{color:var(--accent)}
.empty{color:var(--ink-3);font-size:13.5px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--r);padding:18px;text-align:center}

/* ---------- 工具页 ---------- */
.crumb{font-size:13px;color:var(--ink-3);padding:20px 0 6px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}
.tool-head{display:flex;align-items:flex-start;gap:14px;margin:6px 0 18px}
.tool-head .tile{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;flex:none}
.tool-head h1{margin:2px 0 4px;font-size:24px;font-weight:800;letter-spacing:-.02em}
.tool-head p{margin:0;color:var(--ink-2);font-size:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.panel + .panel{margin-top:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.tight{gap:8px}
label.f{font-size:13px;color:var(--ink-2);display:block;margin:0 0 5px}
input[type=text],input[type=number],textarea,select{
  font:14px var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-s);padding:9px 12px;outline:none;width:100%
}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,85,74,.09)}
textarea{font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical}
input[type=range]{width:100%;accent-color:var(--brand)}
.btn{border:0;border-radius:var(--r-s);background:var(--brand);color:#fff;font:600 14px var(--sans);padding:10px 20px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:var(--card);color:var(--brand);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--brand);background:var(--paper-2)}
.btn.warn{background:var(--accent)}
.btn.warn:hover{background:#D2551F}
.btn:disabled{opacity:.5;cursor:not-allowed}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
.note{font-size:12.5px;color:var(--ink-3);margin:8px 0 0}
.note.ok{color:var(--ok)}
.note.err{color:var(--err)}
.note.warn{color:var(--warn)}
.out{margin-top:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-s);padding:12px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;word-break:break-all;max-height:340px;overflow:auto}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-family:var(--mono);font-weight:600;color:var(--brand-d);word-break:break-all;text-align:right}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--ink-2)}
.sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line-2);display:inline-block;vertical-align:-5px}

/* 说明与 FAQ */
.prose{max-width:760px}
.prose h2{font-size:16px;margin:26px 0 8px;letter-spacing:-.01em}
.prose p{margin:0 0 10px;color:var(--ink-2)}
details{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:12px 14px;margin-bottom:8px}
details summary{cursor:pointer;font-weight:600;font-size:14px}
details p{margin:9px 0 0;color:var(--ink-2);font-size:13.5px}

/* 相关工具 */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rel a{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;color:inherit}
.rel a:hover{border-color:var(--brand);text-decoration:none}
.rel .tile{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex:none}

/* 页脚 */
footer{margin:56px 0 0;border-top:1px solid var(--line);background:rgba(239,234,225,.6)}
.foot{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:22px 0;font-size:13px;color:var(--ink-3)}
.foot a{color:var(--ink-3)}
.foot .sp{margin-left:auto}

/* toast */
#toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.22s;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.28)}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* 抖动提醒：漂浮窗示例 / 对比度示例 变色时轻抖一下 */
@keyframes tshka{0%,100%{transform:translateX(0)}12%{transform:translateX(-5px)}26%{transform:translateX(5px)}40%{transform:translateX(-4px)}56%{transform:translateX(4px)}72%{transform:translateX(-2px)}86%{transform:translateX(2px)}}
.shake{animation:tshka .46s cubic-bezier(.36,.07,.19,.97)}
@media (prefers-reduced-motion: reduce){.shake{animation:none}}
@media(max-width:720px){
  .topnav .hide-s{display:none}
  .hero{padding:34px 0 20px}
  .bigsearch input{padding-right:110px}
}

/* ============================================================
   大拖拽上传区（对标：蛙蛙工具 / 67tool）
   ============================================================ */
.drop{border:2px dashed var(--line-2);border-radius:var(--r);background:#fff;min-height:32vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;transition:.15s;text-align:center;padding:26px 20px;user-select:none}
.drop:hover{border-color:var(--brand);background:rgba(18,85,74,.02)}
.drop.over{border-color:var(--accent);background:rgba(232,100,47,.07)}
.drop .ic{font-size:38px;line-height:1;opacity:.45}
.drop .t1{font-size:15.5px;font-weight:700}
.drop .t2{font-size:13px;color:var(--ink-3)}
.drop input[type=file]{display:none}
.drop.half{min-height:20vh}

/* 单位/选项按钮 */
.btnrow{display:flex;flex-wrap:wrap;gap:8px}
.ubtn{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:8px 14px;
  font:13.5px var(--sans);color:var(--ink-2);cursor:pointer;transition:.12s}
.ubtn:hover{border-color:var(--brand);color:var(--brand)}
.ubtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ubtn b{font-weight:600}
.ubtn small{opacity:.65;font-size:11.5px;margin-left:5px}

/* 进度条 */
.bar{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;background:var(--brand);width:0;transition:.15s}

/* 文件行 */
.filerow{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line)}
.filerow:last-child{border-bottom:0}
.filerow .nm{display:block;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
.filerow .mt{font-size:12.5px;color:var(--ink-3)}
.filerow .sp{margin-left:auto;flex:none;display:flex;gap:8px;align-items:center}

/* 配色方案 */
.pal{margin:0 0 16px}
.pal h4{margin:0 0 8px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.palrow{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.palrow div{flex:1;height:58px;display:flex;align-items:flex-end;justify-content:center;
  font:600 11px var(--mono);padding-bottom:5px;cursor:pointer;transition:.12s;border-left:1px solid rgba(0,0,0,.04)}
.palrow div:first-child{border-left:0}
.palrow div:hover{filter:brightness(1.08)}
.gradbar{height:58px;border-radius:10px;border:1px solid var(--line);cursor:pointer}

/* 演示案例 */
.demo{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
.demo .dhead{padding:11px 14px;font-size:13px;font-weight:700}
.demo .dbody{padding:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.demo .dbtn{border:0;border-radius:9px;padding:9px 16px;font:600 13.5px var(--sans);cursor:default}
.demo .dtag{border-radius:99px;padding:4px 12px;font-size:12.5px}
.demo .dcard{border-radius:10px;padding:12px 14px;font-size:12.5px;min-width:150px}
.demo .dbar{height:10px;border-radius:99px}

/* 小屏适配 */
@media(max-width:720px){
  .drop{min-height:26vh;padding:18px 14px}
  .drop .ic{font-size:30px}
  .palrow div{height:46px;font-size:9.5px}
  .filerow .nm{max-width:150px}
}

/* 二维码预览：手机上不撑破容器 */
#qr canvas,#qr svg{max-width:100%;height:auto;display:block}

/* 上传区内的已选文件（缩略图 + 信息） */
.pickbox{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.pk{position:relative;width:112px;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:7px;text-align:center;box-shadow:var(--sh)}
.pk img{width:96px;height:74px;object-fit:cover;border-radius:7px;display:block;margin:0 auto 5px}
.pk-n{display:block;font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-m{display:block;font-size:11px;color:var(--ink-3)}
.pk-rm{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;border:0;
  background:var(--err);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}
.pk-rm:hover{background:#8f2a22}
.pk-add{width:112px;height:104px;border:1.5px dashed var(--line-2);border-radius:11px;display:grid;
  place-items:center;font-size:12.5px;color:var(--ink-3)}

/* 结果缩略图：鼠标悬停看实际像素大图（浮层，不撑开容器） */
.hoverwrap{position:relative;flex:none}
.hoverwrap .thumb{width:52px;height:52px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
.hoverwrap .bigview{position:absolute;left:60px;top:-8px;z-index:30;display:none;background:#fff;
  border:1px solid var(--line-2);border-radius:10px;padding:6px;box-shadow:var(--sh-hi);max-width:min(340px,60vw)}
.hoverwrap .bigview img{max-width:min(328px,58vw);max-height:260px;width:auto;height:auto;border-radius:6px;display:block}
.hoverwrap:hover .bigview{display:block}
.hoverwrap .bigview::after{content:"实际像素预览";position:absolute;left:6px;bottom:6px;font-size:11px;
  background:rgba(28,30,26,.72);color:#fff;padding:1px 7px;border-radius:99px}

/* ============ 时间戳（对标 time.six01.cn） ============ */
.tsbar{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-around;background:var(--brand);
  color:#fff;border-radius:var(--r);padding:16px 20px;text-align:center}
.tsbar div{flex:1;min-width:150px}
.tsbar span{display:block;font-size:12.5px;opacity:.78}
.tsbar b{font:700 20px/1.5 var(--disp);font-style:italic;letter-spacing:-.01em;word-break:break-all}
.ph{margin:0 0 14px;font-size:15px}
.fmtcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:10px}
.fc-t{font-size:11.5px;color:var(--ink-3);margin-bottom:3px}
.fc-v{font:600 13.5px var(--mono);word-break:break-all;margin-bottom:8px;min-height:20px}
.codecard{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:10px;cursor:pointer;overflow:hidden}
.codecard:hover{border-color:var(--brand)}
.cc-h{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.cc-h span{font-weight:400;color:var(--ink-3)}
.codecard pre{margin:0;padding:11px 12px;font:12.5px/1.65 var(--mono);white-space:pre-wrap;word-break:break-all;color:var(--brand-d)}

/* ============ 二维码：左操作 / 右预览 ============ */
.qrwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
.qrside{position:sticky;top:78px}
@media(max-width:860px){
  .qrwrap{grid-template-columns:1fr}
  .qrside{position:static}
}

/* ============ 传送门（手机扫码接手） ============ */
#portal{position:fixed;right:18px;bottom:18px;z-index:60}
#portalBtn{border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 13.5px var(--sans);
  padding:11px 18px;cursor:pointer;box-shadow:var(--sh-hi)}
#portalBtn:hover{background:var(--brand-d)}
#portalBox{display:none;position:absolute;right:0;bottom:52px;width:250px;background:#fff;
  border:1px solid var(--line-2);border-radius:14px;padding:14px;box-shadow:var(--sh-hi);text-align:center}
#portalBox.on{display:block}
#portalQr{display:flex;justify-content:center;margin:10px 0}
#portalQr canvas{max-width:100%;height:auto;display:block}
#portalUrl{display:block;font-size:11px;word-break:break-all;color:var(--ink-3);margin-bottom:10px;font-family:var(--mono)}
.pt-t{font-size:12.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){#portal{display:none}}

/* ============ PPT 预览 ============ */
.slide{aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  padding:6% 7%;display:flex;flex-direction:column;justify-content:center}
.slide h4{margin:0 0 2.5%;font-size:clamp(15px,1.9vw,22px);font-weight:800}
.slide p{margin:0 0 3%;font-size:clamp(11px,1.15vw,14px);opacity:.85;line-height:1.55}
.slide .bars{display:flex;gap:3%;align-items:flex-end;height:34%}
.slide .bars i{flex:1;border-radius:3px 3px 0 0}

/* ============ 单位换算：居中布局 ============ */
.valbox{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);
  border-radius:12px;padding:6px 16px;box-shadow:var(--sh)}
.valbox input{border:0;outline:none;font:700 24px var(--sans);text-align:center;width:160px;padding:6px 0}
.valbox input:focus{box-shadow:none}
.valbox span{font-size:14px;color:var(--ink-2);white-space:nowrap}
.bignum{font:700 22px var(--disp);font-style:italic;color:var(--brand-d);letter-spacing:-.01em}
.bignum span{font:600 14px var(--sans);font-style:normal;color:var(--ink-3);margin-left:4px}

/* ============ 首页：更紧凑，我的常用提到第一屏 ============ */
.hero{padding:26px 0 14px}
.hero h1{font-size:clamp(22px,3.1vw,32px);margin-bottom:6px}
.hero .sub{font-size:13.5px;max-width:640px}
.bigsearch{margin:16px auto 0;max-width:620px}
.bigsearch input{height:50px;font-size:15px}
.bigsearch .go{height:36px;top:7px;padding:0 20px;font-size:14px}
.stats{margin:14px 0 0;gap:10px}
.stat{padding:8px 18px;min-width:110px}
.stat b{font-size:22px}
.stat span{font-size:11.5px}
.sec{margin:22px 0}
.sec-h{margin-bottom:10px;padding-bottom:7px}
#fav .empty{padding:12px;font-size:13px}
.pill{padding:5px 12px;font-size:13px}
.grid{gap:12px}
.card{padding:14px 14px 12px}
.card .tile{width:38px;height:38px;font-size:17px;margin-bottom:9px;border-radius:10px}
.card h3{font-size:14.5px}
.card p{font-size:12.5px}

/* 首页底部一句话说明 */
.whybox{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:10px;
  padding:12px 16px;font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.whybox b{color:var(--brand-d)}

/* ============ Round3 · 股票盯盘 ============ */
.stk-sug{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:13px;color:var(--ink-3)}
.stkrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:8px;box-shadow:var(--sh)}
.stkrow:last-child{margin-bottom:0}
.stkrow .sk-nm{flex:1;min-width:0}
.stkrow .sk-nm b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stkrow .sk-nm small{color:var(--ink-3);font-size:11.5px;font-family:var(--mono)}
.stkrow .sk-px{font:700 20px/1.2 var(--disp);font-style:italic;text-align:right;min-width:84px}
.stkrow .sk-ch{font:600 13.5px var(--mono);text-align:right;min-width:100px;line-height:1.35}
.stkrow .sk-ch small{display:block;font-weight:400;opacity:.75;font-size:12px}
.stkrow .sk-x{border:0;background:none;color:var(--ink-3);font-size:17px;cursor:pointer;padding:3px 7px;border-radius:7px;line-height:1}
.stkrow .sk-x:hover{background:var(--paper-2);color:var(--err)}
@media(max-width:560px){
  .stkrow{gap:8px;padding:10px 11px}
  .stkrow .sk-px{min-width:64px;font-size:17px}
  .stkrow .sk-ch{min-width:82px;font-size:12.5px}
}

/* ============ Round3 · 颜色转换排版 ============ */
.cc-nums{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cc-ctr{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;font-size:13px;color:var(--ink-2)}
.cc-ctr b{font-family:var(--mono)}
@media(max-width:720px){.cc-nums{grid-template-columns:repeat(3,1fr)}}

/* ============ Round3 · 二维码模板 ============ */
.tplrow{display:flex;flex-wrap:wrap;gap:8px}
.tpl{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;font:12.5px var(--sans);color:var(--ink-2);transition:.12s}
.tpl:hover{border-color:var(--brand)}
.tpl i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.1);flex:none}
.tpl em{font-style:normal}
.tpl.on{border-color:var(--brand);background:rgba(18,85,74,.07);color:var(--brand);font-weight:600}

/* ============ 单位换算长尾页（多目录 + 长尾词） ============ */
.uconv{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.uconv-box{flex:1;min-width:170px}
.uconv-eq{font:700 22px var(--disp);color:var(--brand-d);padding-bottom:12px}
.uconv-in{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:8px 12px}
.uconv-in input{border:0;outline:none;font:700 20px var(--sans);width:100%;padding:3px 0;min-width:0;background:transparent}
.uconv-in span{font-size:13px;color:var(--ink-2);white-space:nowrap}
.uconv-in.out{background:var(--paper-2)}
.uconv-in.out b{font:700 20px var(--mono);color:var(--brand-d);word-break:break-all;min-width:0}
.convtable{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.convtable th,.convtable td{padding:7px 13px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-size:13px}
.convtable th{background:var(--paper-2);font-weight:700;text-align:left;font-family:var(--sans)}
.convtable tbody tr:last-child td{border-bottom:0}
.ltlinks{display:flex;flex-wrap:wrap;gap:8px}
.ltlink{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:13px;color:var(--ink-2);transition:.12s}
.ltlink:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.ltlink.rev{background:var(--brand);border-color:var(--brand);color:#fff}
.ltlink.rev:hover{background:var(--brand-d);color:#fff}
.hubcat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;margin-bottom:12px;box-shadow:var(--sh)}
.hubcat h3{margin:0 0 10px;font-size:15.5px}
.hubcat h3 a{color:var(--ink)}
.hubcat h3 a:hover{color:var(--brand);text-decoration:none}
.hotrow{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.hotrow > b{flex:none;width:74px;font-size:13.5px;padding-top:7px;color:var(--ink-2)}
.hotrow .ltlinks{flex:1;min-width:0}
@media(max-width:560px){
  .hotrow{flex-direction:column;gap:6px}
  .hotrow > b{width:auto;padding-top:0}
}

/* ============ Round4 · 屏幕录制 ============ */
.rec-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rec-live{display:none;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:15px;color:var(--err)}
.rec-live i{width:10px;height:10px;border-radius:50%;background:var(--err);animation:recblink 1s infinite}
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.25}}

/* ============ Round4 · 通用小缩略图 ============ */
.thumb48{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:none}

/* ============ Round4 · Markdown 编辑器 ============ */
.mdwrap{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.mdwrap textarea{border:0;border-radius:0;min-height:460px;font-family:var(--mono);font-size:13px;padding:16px;resize:vertical}
.mdwrap textarea:focus{box-shadow:none}
.mdwrap .md-body{border-left:1px solid var(--line);overflow:auto;max-height:700px}
@media(max-width:860px){
  .mdwrap{grid-template-columns:1fr}
  .mdwrap .md-body{border-left:0;border-top:1px solid var(--line);max-height:420px;min-height:200px}
}
.md-body{padding:16px 20px;font-size:14.5px;line-height:1.8;word-wrap:break-word}
.md-body h1,.md-body h2,.md-body h3,.md-body h4{margin:18px 0 8px;letter-spacing:-.01em;line-height:1.35}
.md-body h1{font-size:22px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-top:6px}
.md-body h2{font-size:18px}
.md-body h3{font-size:16px}
.md-body h4{font-size:15px}
.md-body p{margin:0 0 12px}
.md-body ul,.md-body ol{margin:0 0 12px;padding-left:22px}
.md-body li{margin:2px 0}
.md-body code{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font:12.5px var(--mono)}
.md-body pre{background:#14171C;color:#E9E7E1;border-radius:10px;padding:13px 15px;overflow:auto;margin:0 0 14px}
.md-body pre code{background:none;border:0;color:inherit;padding:0;font-size:12.5px;line-height:1.7}
.md-body blockquote{margin:0 0 14px;padding:8px 16px;border-left:3px solid var(--brand);background:var(--paper-2);border-radius:0 8px 8px 0;color:var(--ink-2)}
.md-body table{border-collapse:collapse;margin:0 0 14px;font-size:13.5px}
.md-body th,.md-body td{border:1px solid var(--line-2);padding:6px 12px}
.md-body th{background:var(--paper-2)}
.md-body a{color:var(--brand)}
.md-body hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.md-body img{max-width:100%}

/* ============ Round5 · 股票盯盘：搜索联想 / 详情图 ============ */
.stk-inwrap{position:relative;flex:1;min-width:230px}
.stk-sugbox{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--sh-hi);max-height:330px;overflow:auto}
.sg-i{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px dashed var(--line)}
.sg-i:last-child{border-bottom:0}
.sg-i:hover,.sg-i.on{background:rgba(18,85,74,.06)}
.sg-tag{flex:none;font-size:11px;line-height:1;padding:4px 7px;border-radius:6px;font-weight:600;white-space:nowrap}
.t-sh{background:#E8F1FF;color:#2563EB}
.t-sz{background:#E6F7F1;color:#0F766E}
.t-bj{background:#FFF1E6;color:#C05621}
.t-hk{background:#F0E9FF;color:#6D28D9}
.t-us{background:#E9F7EF;color:#1E7A4E}
.t-zs{background:#FEF3C7;color:#92610F}
.t-etf{background:#E0F2FE;color:#0369A1}
.t-kzz{background:#FCE7F3;color:#BE185D}
.t-fut{background:#EDE9FE;color:#5B21B6}
.t-dir{background:#EEF0EC;color:#4B5563}
.sg-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}
.sg-cd{flex:none;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.sg-empty{padding:12px;font-size:12.5px;color:var(--ink-3)}
.usk{display:inline-block;font-size:10.5px;font-weight:600;line-height:1;padding:3px 6px;border-radius:5px;background:rgba(232,100,47,.12);color:var(--accent);margin-left:6px;vertical-align:1px}
.sk-ext{display:block;font-size:11.5px;font-family:var(--mono);margin-top:2px}
.sk-det{border:0;background:none;color:var(--ink-3);font-size:12px;cursor:pointer;padding:5px 8px;border-radius:7px;line-height:1;white-space:nowrap;flex:none}
.sk-det:hover{background:var(--paper-2);color:var(--brand)}
.stkrow-open{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0;border-bottom-color:transparent;box-shadow:none}
.sk-detail{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:#fff;padding:10px 12px 12px;margin:0 0 8px;box-shadow:var(--sh)}
.skd-tabs{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.skd-tabs .ubtn{padding:5px 12px;font-size:12.5px}
.skd-hint{margin-left:auto}
.skd-cv{width:100%;height:auto;display:block;border-radius:8px}

/* ============ Round5 · 拼图：实时预览 ============ */
.ijwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.ijprev{position:sticky;top:78px;min-width:0}
.ijprev-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.ijprev-head b{font-size:15px}
.ijprev-box{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px;max-height:600px;overflow:auto;text-align:center}
.ijprev-box canvas{max-width:100%;height:auto;border-radius:8px;box-shadow:var(--sh);background:#fff}
@media(max-width:860px){
  .ijwrap{grid-template-columns:1fr}
  .ijprev{position:static;order:-1}
}

/* ============ Round5 · 文字图：多页预览 ============ */
.t2ipages{display:flex;flex-direction:column;gap:14px;max-height:640px;overflow:auto;padding-right:4px}
.t2ipage{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--sh)}
.t2ih{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.t2ih .hint{margin-left:auto;margin-right:2px}
.t2ih .ubtn{padding:4px 10px;font-size:12px}
.t2iimg{background:var(--paper-2);border-radius:8px;overflow:hidden;text-align:center;min-height:60px}
.t2iimg img{max-width:100%;height:auto;display:block;margin:0 auto}
.t-kc{background:#EEF2FF;color:#4338CA}
.t-cy{background:#FFF7ED;color:#C2410C}

/* ============ Round6 · 股票盯盘：大盘指数条 / 列系统 / 分时缩略图 ============ */
.stk-idxbar{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:2px 0 12px}
.idxchips{display:flex;gap:8px;flex-wrap:wrap;min-width:0;flex:1}
.idxchip{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;box-shadow:var(--sh);white-space:nowrap}
.idxchip b{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.idxchip .ip{font-weight:700;font-variant-numeric:tabular-nums}
.idxchip .ic{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.idxbar-side{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none;flex-wrap:wrap}
.idxedit{border:1px dashed var(--line-2);border-radius:12px;background:rgba(255,255,255,.65);padding:12px 14px;margin-bottom:14px}
.idxcur{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.idxcur-item{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:600 12.5px var(--mono)}
.idxcur-item button{border:0;background:var(--paper-2);width:18px;height:18px;line-height:1;border-radius:50%;cursor:pointer;color:var(--ink-2);font-size:12px;padding:0}
.idxcur-item button:hover{background:var(--err);color:#fff}
.idxpre{display:flex;gap:7px;flex-wrap:wrap}
.idxpre .ubtn{padding:5px 10px;font-size:12.5px}
.idxpre .ubtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bigbtn{display:block;text-align:center;padding:16px 18px;border:1px dashed var(--line-2);border-radius:12px;background:#fff;color:var(--brand);font-weight:700;font-size:15px}
.bigbtn:hover{background:var(--paper-2);text-decoration:none}
.stkrow{flex-wrap:wrap}
.sk-tk{flex:none;display:flex;align-items:center}
.sk-tkimg{width:84px;height:46px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#fff;display:block}
.sk-cell{font:600 12.5px/1.5 var(--mono);color:var(--ink);text-align:right;min-width:56px}
.sk-cell small{display:block;font:400 10.5px/1.4 var(--sans);color:var(--ink-3)}
.colchecks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:2px}
.colchecks .ck{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.colchecks input{accent-color:var(--brand);width:15px;height:15px;margin:0}

/* ============ Round6 · 大盘云图页（独立页） ============ */
body.mk-page{padding:12px 20px 30px}
.mk-page > *{max-width:1560px;margin-left:auto;margin-right:auto}
.mk-top{display:flex;align-items:baseline;gap:12px;padding:2px 0 12px;flex-wrap:wrap}
.mk-top b{font-size:17px}
.mk-back{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.mk-tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mk-idxbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.mk-idxbar .hint{margin-left:auto}
.mk-toolrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.mk-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.mk-legend i{display:block;width:132px;height:10px;border-radius:5px;border:1px solid var(--line)}
.mk-toolrow #mkints{margin-left:auto}
.mk-crumb{display:flex;gap:10px;align-items:center;min-height:22px;margin:4px 0 8px;font-size:13.5px}
.mk-wrap{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:18px;align-items:start}
.mk-canvasbox{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;height:max(460px,calc(100vh - 300px));box-shadow:var(--sh)}
.mk-canvasbox canvas{display:block}
.mk-tip{position:absolute;z-index:6;pointer-events:none;background:rgba(20,22,26,.93);color:#fff;font-size:12.5px;line-height:1.55;padding:8px 11px;border-radius:8px;white-space:nowrap;box-shadow:var(--sh-hi)}
.mk-side{min-width:0}
.mk-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--sh)}
.mk-card h4{margin:0 0 9px;font-size:13.5px}
.mk-card h4 small{font-weight:400;color:var(--ink-3);font-size:11.5px}
.mk-nums{display:flex;gap:10px;flex-wrap:wrap;font:700 13px var(--sans);margin-bottom:9px}
.mk-bdbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#ECECE8}
.mk-bdbar i{display:block;height:100%}
.mk-row{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px dashed var(--line);cursor:pointer;font-size:13px}
.mk-row:last-child{border-bottom:0}
.mk-row:hover{background:var(--paper-2)}
.mk-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-row b{flex:none;font:700 12.5px var(--mono)}
.mk-amt-num{font:700 27px/1.15 var(--disp);font-style:italic;letter-spacing:-.01em}
.mk-amt-sub{font-size:12px;color:var(--ink-3);margin-top:7px}
@media(max-width:980px){
  .mk-wrap{grid-template-columns:1fr}
  .mk-canvasbox{height:62vh}
}

/* ============ Round6 · 拼图：预览内拖拽选区 ============ */
.filerow{cursor:pointer}
.filerow.on{background:rgba(18,85,74,.06);box-shadow:inset 3px 0 0 var(--brand)}
.ijsel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;min-height:30px}
.ijsel .ubtn{padding:4px 10px;font-size:12.5px}

/* ============ Round6 · 文字图：一键配色 ============ */
.paldots{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px}
.paldot{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.paldot.on{border-color:var(--ink)}
.palpick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;overflow:hidden;cursor:pointer;background:#fff}
.palpick input{width:36px;height:36px;border:0;padding:0;margin:-5px;cursor:pointer;background:none}
.pals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px}
.pal{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;text-align:left}
.pal:hover{border-color:var(--brand)}
.pal.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(18,85,74,.14)}
.palsws{display:flex;border-radius:6px;overflow:hidden;height:22px;border:1px solid var(--line)}
.palsws i{flex:1}
.pal b{font-size:12.5px;font-weight:600;color:var(--ink-2)}

/* ===== R7 股票盯盘 ===== */
.stk-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;margin:0 0 14px;box-shadow:var(--sh)}
.stk-block .blk-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.stk-block .blk-h h3{margin:0;font-size:15px}
.stk-block .blk-h .hint{margin-left:auto;font-weight:400;text-align:right}
.mkt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
.mkt-cell{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#FAFAF7}
.mkt-cell h4{margin:0 0 8px;font-size:12.5px;color:var(--ink-2)}
.mkt-cell h4 small{color:var(--ink-3);font-weight:400;margin-left:4px}
.mk-nums{display:flex;gap:10px;flex-wrap:wrap;font:700 13.5px var(--sans);margin-bottom:8px}
.mk-bdbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#ECECE8}
.mk-bdbar i{display:block;height:100%}
.mk-sub{margin-top:8px;font-size:12px;color:var(--ink-3)}
.mk-flow-num,.mk-amt-num{font:700 24px/1.2 var(--disp);font-style:italic;letter-spacing:-.01em}
.mk-flow-sub,.mk-amt-sub{font-size:12px;color:var(--ink-3);margin-top:6px}
.colbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border:1px dashed var(--line-2);border-radius:10px;background:#FAFAF7;margin-bottom:12px}
.cb-l{font-size:12.5px;color:var(--ink-3);font-weight:600;flex:none}
.colbar .colchecks{margin-top:0}
.thumbpop{position:fixed;z-index:90;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--sh-hi);padding:8px;pointer-events:none;width:480px;max-width:min(480px,86vw)}
.thumbpop img{width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.thumbpop .tp-meta{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:7px 2px 2px;font-family:var(--mono)}
.promo-slot{border:1px dashed var(--line-2);border-radius:10px;padding:12px;text-align:center;color:var(--ink-3);font-size:12px;margin:16px 0 10px;background:#FAFAF7}
.promo-slot span{opacity:.72}
@media (max-width:760px){
  .mkt-grid{grid-template-columns:1fr}
  .thumbpop{width:86vw}
}

/* ===== R7 云图 ===== */
.mk-wrap{display:grid;grid-template-columns:196px minmax(0,1fr) 312px;gap:14px;align-items:start}
.mk-bklist{position:sticky;top:10px;align-self:start;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);display:flex;flex-direction:column;max-height:calc(100vh - 24px);overflow:hidden}
.mk-bk-h{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;border-bottom:1px solid var(--line)}
.mk-bk-h .hint{margin-left:auto;font-size:11px}
.mk-bk-scroll{overflow:auto;padding:4px 6px 8px;flex:1;min-height:120px}
.mk-bkrow{display:flex;align-items:center;gap:6px;padding:6px;border-radius:7px;cursor:pointer;font-size:12.5px}
.mk-bkrow:hover{background:#FAFAF7}
.mk-bkrow.on{background:#F1F5FF}
.mk-bkrow .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-bkrow .v{flex:none;font:600 11.5px var(--mono)}
.mk-canvasbox{position:sticky;top:10px;align-self:start;height:max(460px,calc(100vh - 190px))}
.mk-bd2{margin-top:8px;font-size:12px;color:var(--ink-3)}
.mk-hist{display:flex;align-items:flex-end;gap:3px;height:44px;margin-top:10px}
.mk-hist i{flex:1;border-radius:2px 2px 0 0;min-height:2px;opacity:.92}
.mk-amt-cv{width:100%;height:auto;display:block;margin-top:8px;border-radius:6px}
.mk-replay{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 12px;border:1px dashed var(--line-2);border-radius:10px;background:#FAFAF7}
.mk-replay input[type=range]{flex:1;accent-color:var(--brand)}
@media (max-width:1120px){
  .mk-wrap{grid-template-columns:minmax(0,1fr) 312px}
  .mk-bklist{display:none}
}
@media (max-width:860px){
  .mk-wrap{grid-template-columns:1fr}
  .mk-canvasbox{position:static;height:62vh}
}

/* ===== R7 文字长图富文本 ===== */
.rt-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.rt-tools .ubtn{font-size:12.5px;padding:5px 9px}

/* ===== R8 · 涨跌主题（默认红涨绿跌=红主色；绿涨红跌=绿主色） ===== */
html.t-up-red,body.t-up-red{--brand:#C62828;--brand-d:#8E1B1B}
html.t-up-green,body.t-up-green{--brand:#1B7A46;--brand-d:#0F5230}

/* ===== R8 · 云图深色高对比模式 ===== */
body.mk-dark{
  --paper:#14171C;--paper-2:#1A1E25;--card:#1E222A;
  --line:#2C313B;--line-2:#3A404C;
  --ink:#E7E9EE;--ink-2:#AEB5C0;--ink-3:#828A98;
  --sh:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.38);
}
body.mk-dark{border-top:0}
body.mk-dark .topbar{background:rgba(20,23,28,.9);border-bottom-color:#2C313B}
body.mk-dark .tb-search input{background:#1E222A;border-color:#3A404C;color:var(--ink)}
body.mk-dark .mk-canvasbox{background:#20242C;border-color:#2C313B}
body.mk-dark .mkt-cell{background:#20242C}
body.mk-dark .mk-bkrow:hover{background:#262B34}
body.mk-dark .mk-bkrow.on{background:#252e3e}
body.mk-dark .mk-row:hover{background:#262B34}
body.mk-dark .thumbpop{background:#1E222A;border-color:#3A404C}
body.mk-dark footer{color:var(--ink-3)}
body.mk-dark .mk-card,body.mk-dark .mk-bklist{background:#1E222A}

/* 云图顶部「市场范围」条 */
.mk-scope{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.mk-scope .lb{font-size:12px;color:var(--ink-3);margin-right:2px}
.mk-scope .ubtn.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 云图 tooltip 内迷你K线 */
.mk-tip .tpk{display:block;margin:6px 0 2px;border-radius:6px;background:rgba(255,255,255,.06)}
.mk-tip .tplist{margin:5px 0 0;padding:0;list-style:none}
.mk-tip .tplist li{display:flex;justify-content:space-between;gap:14px;font-size:12px}
.mk-tip .tpmore{opacity:.6;font-size:11px;margin-top:4px;display:block}

/* ===== R8+ · 倒计时工具（模式/铃声/主题/悬浮窗） ===== */
.cd-wrap{max-width:760px;margin-left:auto;margin-right:auto;transition:opacity .5s}
.cd-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cd-chip{font-size:13px}
.cd-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 表盘（对标 popup：纯黑 / 顶部细进度线 / 居中大数字 + 光晕） */
.cd-face{position:relative;border-radius:16px;background:#0F0F11;border:1px solid #1E1E22;color:#fff;
  margin:6px 0 14px;overflow:hidden;transition:background .4s,border-color .4s}
.cd-topline{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.08)}
.cd-topline i{display:block;height:100%;width:100%;background:#2FBF71;transition:width .25s linear,background .35s}
.cd-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:7vh 4vw 6vh;text-align:center}
.cd-time{font:800 clamp(54px,15vw,140px)/1 "JetBrains Mono",Consolas,monospace;letter-spacing:2px;
  font-variant-numeric:tabular-nums;color:#2FBF71;text-shadow:0 0 30px currentColor;transition:color .3s}
.cd-state{margin-top:16px;font-size:14px;opacity:.6}
.cd-pct{margin-left:9px;font-weight:700;opacity:.95;font-family:var(--mono)}
/* 图标按钮（对标 popup 底部悬浮图标） */
.cd-btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.cd-ico{border:0;background:transparent;color:#b9bec8;font:600 15px/1 inherit;cursor:pointer;padding:7px 3px;
  display:inline-flex;align-items:center;gap:6px;opacity:.85;transition:color .15s,opacity .15s,transform .1s}
.cd-ico:hover{color:#fff;opacity:1}
.cd-ico:active{transform:scale(.95)}
.cd-ico.pri{color:#2FBF71}
.cd-ico.pri:hover{color:#4bd88a}
@keyframes cdpulse{0%{box-shadow:0 0 0 0 rgba(242,176,30,.55)}100%{box-shadow:0 0 0 16px rgba(242,176,30,0)}}
.cd-face.pulse{animation:cdpulse .6s ease-out}

/* 浅色主题 */
.cd-wrap[data-theme="light"] .cd-face{background:#fff;color:#14181F;border-color:#E3E7EE}
.cd-wrap[data-theme="light"] .cd-topline{background:rgba(20,24,31,.10)}
.cd-wrap[data-theme="light"] .cd-ico{color:#525a68}
.cd-wrap[data-theme="light"] .cd-ico:hover{color:#14181F}
/* 舞台大字 */
.cd-wrap[data-theme="stage"] .cd-face{background:#000;border-color:#000}
.cd-wrap[data-theme="stage"] .cd-inner{min-height:58vh}
.cd-wrap[data-theme="stage"] .cd-time{font-size:clamp(80px,20vw,260px)}
.cd-wrap[data-theme="stage"] .cd-state{opacity:.42}
html[data-cdtheme="stage"]{background:#0a0c10}

/* 设置面板 */
.cd-adv{border:1px solid var(--line,#2A303B);border-radius:12px;padding:4px 14px;margin-top:6px;background:var(--bg2,rgba(255,255,255,.02))}
.cd-adv>summary{cursor:pointer;padding:9px 0;font-weight:600;font-size:14px;outline:none}
.cd-advbox{padding:2px 0 12px}
.cd-set-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:11px 0}
.cd-set-line>.f{flex:0 0 40px;opacity:.62;font-size:13px}
.cd-seg{display:inline-flex;gap:6px;margin-left:auto}
.cd-seg .ubtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cd-dur{display:flex;align-items:center;gap:5px}
.cd-dur input{width:74px;text-align:center}
.cd-name{max-width:210px}
.cd-select{padding:6px 10px;border-radius:8px;border:1px solid var(--line,#2A303B);background:#12161D;color:#E8EAEE;
  font:inherit;font-size:13px;color-scheme:dark}
.cd-select option{background:#12161D;color:#E8EAEE}
.cd-wrap[data-theme="light"] .cd-select{background:#fff;color:#14181F;color-scheme:light}
.cd-wrap[data-theme="light"] .cd-select option{background:#fff;color:#14181F}
/* 就地编辑时间（双击大数字） */
.cd-edit{display:inline-flex;align-items:center;gap:12px;
  font:800 clamp(30px,8vw,64px)/1 "JetBrains Mono",Consolas,monospace;color:inherit}
.cd-ei{width:2.3em;text-align:center;font:inherit;color:inherit;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:.06em .1em;-moz-appearance:textfield}
.cd-ei::-webkit-inner-spin-button,.cd-ei::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cd-edit>i{font-style:normal;opacity:.55}
.cd-ok,.cd-no{border:0;border-radius:10px;width:1.6em;height:1.6em;font:700 .38em/1 inherit;cursor:pointer;padding:0}
.cd-ok{background:#2FBF71;color:#04150c}
.cd-no{background:#2A303B;color:#c7ccd6}
.cd-wrap[data-theme="light"] .cd-ei{background:rgba(20,24,31,.06);border-color:rgba(20,24,31,.18)}
.cd-wrap[data-theme="light"] .cd-no{background:#E3E7EE;color:#41485a}
.cd-vol{width:120px;accent-color:var(--brand)}
.cd-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.cd-hint{opacity:.55;font-size:12px}
.cd-wrap.dim{opacity:.28}

/* 全屏：数字撑满 */
.cd-face:fullscreen{border:0;border-radius:0}
.cd-face:fullscreen .cd-inner{min-height:100vh;padding:0 4vw}
.cd-face:fullscreen .cd-time{font-size:min(20vw,34vh)}
.cd-face:fullscreen .cd-topline{height:6px}
.cd-face:fullscreen .cd-state{font-size:20px}

@media (max-width:560px){.cd-time{font-size:48px}.cd-seg{margin-left:0}.cd-set-line>.f{flex-basis:auto}}

/* ===== R8 · 自选行情容器：常驻淡描边 + 永久轻呼吸（随主色）+ 变价轻闪 ===== */
:root{--wl-ring:rgba(198,40,40,.34);--wl-glow:rgba(198,40,40,.20)}
html.t-up-red,body.t-up-red{--wl-ring:rgba(198,40,40,.34);--wl-glow:rgba(198,40,40,.20)}
html.t-up-green,body.t-up-green{--wl-ring:rgba(27,122,70,.34);--wl-glow:rgba(27,122,70,.20)}
#wlblock{position:relative}
#wlblock::after{
  content:"";position:absolute;inset:-1px;border-radius:15px;pointer-events:none;
  box-shadow:0 0 0 1px var(--wl-ring),0 0 12px 1px var(--wl-glow);
  animation:wlbreath 5.2s ease-in-out infinite;
}
@keyframes wlbreath{0%,100%{opacity:.30}50%{opacity:.78}}
/* 鼠标停在容器上时呼吸暂停、亮度稳住，不干扰阅读 */
#wlblock:hover::after{animation-play-state:paused;opacity:.55}
/* 变价轻闪：一次性提亮，约 0.6s 后回到呼吸 */
#wlblock.wl-flash::after{animation:none;opacity:1;box-shadow:0 0 0 2px var(--wl-ring),0 0 18px 3px var(--wl-glow)}
/* 尊重系统「减少动态效果」偏好：不闪动，只留淡描边 */
@media (prefers-reduced-motion: reduce){
  #wlblock::after{animation:none;opacity:.42}
  #wlblock.wl-flash::after{box-shadow:0 0 0 1px var(--wl-ring),0 0 12px 1px var(--wl-glow)}
}

/* ============================================================
   学科工具站（/k/）：左侧知识树 + 四段式知识点页
   ============================================================ */
.kp{display:grid;grid-template-columns:238px minmax(0,1fr);gap:22px;align-items:start;margin:6px 0 30px}
.kp-side{position:sticky;top:78px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 10px;max-height:calc(100vh - 96px);overflow:auto;box-shadow:var(--sh)}
.kp-side-h{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;padding:2px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.kp-side-res{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-2);font-size:12px;color:var(--ink-3);line-height:1.6}
.kp-side-res a{font-weight:600}
.kt-stage{margin:8px 0}
.kt-stage-h{font-weight:800;font-size:13px;color:var(--brand-d);padding:4px 8px}
.kt-subj{margin:2px 0 6px}
.kt-subj-h{font-size:12.5px;color:var(--ink-2);padding:3px 8px;font-weight:600}
.kt-ch{margin:2px 0 6px}
.kt-ch-h{font-size:12.5px;color:var(--ink-3);padding:3px 8px 3px 16px}
.kt-points{display:flex;flex-direction:column}
.kt-point{display:block;font-size:13px;color:var(--ink-2);padding:5px 10px 5px 22px;border-left:2px solid transparent;border-radius:0 7px 7px 0;line-height:1.45}
.kt-point:hover{background:var(--paper-2);color:var(--brand);text-decoration:none}
.kt-point.active{background:rgba(18,85,74,.09);color:var(--brand);border-left-color:var(--brand);font-weight:600}
/* 侧边栏文字允许换行、完整显示名称（2026-10-14 由单行截断改为换行） */
.kt-stage-h,.kt-subj-h,.kt-grade-h,.kt-ch-h,.kt-point{white-space:normal;overflow-wrap:anywhere;word-break:break-word}

.kp-main{min-width:0}
.kp-head h1{margin:0 0 8px;font-size:clamp(21px,3vw,27px);font-weight:800;letter-spacing:-.02em}
.kp-sum{margin:0 0 10px;color:var(--ink-2);font-size:14.5px}
.kp-tags{display:flex;gap:7px;flex-wrap:wrap}
.kp-tags span{font-size:12px;color:var(--brand);background:rgba(18,85,74,.08);border-radius:999px;padding:2px 11px}
.kp-sec{margin:26px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh)}
.kp-sec>h2{margin:0 0 12px;font-size:16.5px;font-weight:700;letter-spacing:-.01em;padding-bottom:9px;border-bottom:1px solid var(--line)}
.kp-sec>p{color:var(--ink-2);font-size:14px;margin:0 0 10px}
.kp-lead{color:var(--ink-2);font-size:13.5px;margin:0 0 12px}

.kp-ex{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;margin-bottom:10px;background:#fff}
.kp-ex:last-child{margin-bottom:0}
.kp-q{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kp-n{width:22px;height:22px;flex:none;border-radius:6px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.kp-qt{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink)}
.kp-steps{margin:10px 0 0;padding-left:26px;color:var(--ink-2);font-size:13.5px}
.kp-steps li{margin:3px 0}
.kp-steps[hidden]{display:none}
.kp-lvb{flex:none;font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
.kp-lvb.b1{color:#2f7d4f;background:rgba(47,125,79,.11);border-color:rgba(47,125,79,.28)}
.kp-lvb.b2{color:#B4441B;background:rgba(180,68,27,.10);border-color:rgba(180,68,27,.26)}
.kp-lvb.b3{color:#7A5AA6;background:rgba(122,90,166,.12);border-color:rgba(122,90,166,.30)}
.kp-ch{border:1px solid var(--line);border-left:3px solid #7A5AA6;border-radius:var(--r-s);padding:10px 12px;margin-bottom:10px;background:#fff}
.kp-ch:last-child{margin-bottom:0}
.kp-ch .kp-n.ch{background:#7A5AA6}
.kp-chtag{flex:none;font-size:11px;font-weight:700;line-height:1;padding:3px 8px;border-radius:20px;color:#7A5AA6;background:rgba(122,90,166,.11);border:1px solid rgba(122,90,166,.28)}
.kp-ch>.kp-q>[data-kpsteps]{margin-left:auto}
.kp-ch .kp-figure{margin:10px 0 0}

.kp-btn{margin:0,border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:8px;padding:6px 13px;font:600 13px var(--sans);cursor:pointer;transition:.12s}
.kp-btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.kp-btn.ghost{background:#fff;color:var(--brand)}
.kp-btn.ghost:hover{background:rgba(18,85,74,.07)}
.kp-btn.tiny{padding:3px 10px;font-size:12px}
.kp-q .kp-btn{margin-left:8px}
.kp-ex>.kp-q>[data-kpsteps]{margin-left:auto}
.kp-btn b{font-family:var(--mono)}

.kp-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.kp-ptitle{font-weight:700;font-size:14px}
.kp-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.kp-acts-l{margin:12px 0 0;margin-left:0}
.kp-list{display:flex;flex-direction:column;gap:8px}
.kp-item{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 11px;background:#fff}
.kp-item .kp-qt{min-width:118px}
.kp-in{width:112px;height:34px;border:1px solid var(--line-2);border-radius:8px;padding:0 10px;font:14px var(--mono);color:var(--ink);outline:none;background:#fff}
.kp-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,85,74,.10)}
.kp-in:disabled{background:var(--paper-2);color:var(--ink-3)}
.kp-res{font-size:13px;font-weight:600;min-width:50px}
.kp-res.ok{color:var(--ok)}
.kp-res.no{color:var(--err)}
.kp-item.right{border-color:rgba(46,125,91,.5);background:rgba(46,125,91,.05)}
.kp-item.wrong{border-color:rgba(180,52,43,.45);background:rgba(180,52,43,.05)}
.kp-item .kp-steps{flex-basis:100%}
.kp-score{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.kp-wrongbox{margin-top:12px;border-top:1px dashed var(--line-2);padding-top:10px}
.kp-nl{display:block;max-width:560px;margin:4px 0 2px}
.kp-res-slot{margin:26px 0 0;background:linear-gradient(180deg,rgba(232,100,47,.08),rgba(232,100,47,.02));border:1px dashed var(--line-2);border-radius:var(--r);padding:14px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.kp-res-slot b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px}

@media(max-width:820px){
  .kp{grid-template-columns:1fr}
  .kp-side{position:static;max-height:none}
  .kp-acts{margin-left:0}
  .kp-q .kp-btn{margin-left:0}
  .kp-ex>.kp-q>[data-kpsteps]{margin-left:0}
}

/* ============================================================
   974 学科工具站 · 品牌与动效层（R2）
   —— 统一曲线、按钮光晕、卡片浮起、分节渐入、纹理、减少动效降级
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --glow-brand:rgba(18,85,74,.18);
  --glow-accent:rgba(232,100,47,.22);
  --k-line:#E7E1D6;
}
html.js .kp-sec{opacity:0;transform:translateY(16px)}
html.js .kp-sec.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
/* 章节标题品牌竖条 */
.kp-sec>h2::before{content:"";display:inline-block;width:3px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--brand));margin-right:9px;vertical-align:-2px}
/* 头部品牌光晕 + 品牌装饰线 */
.kp-head{position:relative;padding-bottom:12px}
.kp-head::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--brand));opacity:.9}
.kp-head::before{content:"";position:absolute;right:-10px;top:-30px;width:220px;height:150px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,100,47,.10),transparent)}
/* 按钮：光晕 + 按压 */
.kp-btn{transition:transform .12s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.kp-btn:not(.ghost):hover{box-shadow:0 0 0 3px var(--glow-accent),0 8px 18px rgba(11,59,51,.22);transform:translateY(-1px)}
.kp-btn.ghost:hover{box-shadow:0 0 0 3px var(--glow-brand);transform:translateY(-1px)}
.kp-btn:active{transform:translateY(0) scale(.97);transition-duration:.06s}
.kp-btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(18,85,74,.28)}
.kp-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* 卡片/链接浮起 */
.hubcat,.rel a,.ltlink{transition:transform .16s var(--ease),box-shadow .2s var(--ease),border-color .16s var(--ease)}
.hubcat:hover{transform:translateY(-3px);box-shadow:var(--sh-hi);border-color:var(--brand)}
.rel a:hover,.ltlink:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(28,30,26,.09)}

/* ---------- 左侧知识树：高亮板丝滑滑行 ---------- */
.kt-wrap{position:relative}
.kt-ind{position:absolute;left:0;right:0;top:0;height:28px;border-radius:0 8px 8px 0;z-index:0;opacity:0;
  background:linear-gradient(90deg,rgba(18,85,74,.13),rgba(18,85,74,.05));
  border-left:2px solid var(--brand);pointer-events:none;
  transition:transform .34s var(--ease),height .22s var(--ease),opacity .2s}
.kt-ind.ready{opacity:1}
.kt-point{position:relative;z-index:1;background:transparent!important;border-left-color:transparent!important}
.kt-point.active{background:transparent!important;color:var(--brand);font-weight:700}
.kt-point:hover{background:transparent!important}
.kt-point:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(18,85,74,.3)}

/* ---------- 练习区：工具栏 / 四态 / 进度 ---------- */
.kp-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:9px 11px;
  background:rgba(18,85,74,.045);border:1px solid rgba(18,85,74,.13);border-radius:11px}
.kp-tools label{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.kp-sel{height:32px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink);
  font:13px var(--sans);padding:0 8px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.kp-sel:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--glow-brand)}
.kp-lv{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff}
.kp-lv-b{height:32px;border:0;background:transparent;color:var(--ink-2);font:12.5px var(--sans);
  padding:0 10px;cursor:pointer;border-right:1px solid var(--line-2);transition:background .16s var(--ease),color .16s var(--ease)}
.kp-lv-b:last-child{border-right:0}
.kp-lv-b:hover{background:rgba(18,85,74,.06);color:var(--brand)}
.kp-lv-b.on{background:var(--brand);color:#fff;font-weight:700}
.kp-prog{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);margin-left:auto}
.kp-prog-bar{width:104px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.kp-prog-bar>i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .3s var(--ease)}
.kp-prog b{font-family:var(--disp);font-style:italic;color:var(--brand-d);font-size:14px}
.kp-item{transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.kp-item.todo{background:#fff;border-color:var(--line)}
.kp-item.done{background:rgba(18,85,74,.05);border-color:rgba(18,85,74,.3)}
.kp-item.right{background:rgba(46,125,91,.07);border-color:rgba(46,125,91,.5)}
.kp-item.wrong{background:rgba(180,52,43,.06);border-color:rgba(180,52,43,.45)}
.kp-item.cur{box-shadow:0 0 0 3px rgba(232,100,47,.22)}
.kp-res.ok::before{content:"✓ ";}
.kp-res.no::before{content:"✗ ";}
.kp-score{margin-top:12px;padding:11px 14px;border-radius:10px;font-size:14px;color:var(--ink-2);
  background:rgba(18,85,74,.06);border:1px solid rgba(18,85,74,.14)}
.kp-score b{font-family:var(--disp);font-style:italic;font-size:20px;color:var(--brand-d)}
.kp-score .bad{color:var(--err)}

/* ---------- 原理朗读 ---------- */
.kp-speak{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 14px;padding:9px 12px;
  background:linear-gradient(120deg,rgba(18,85,74,.06),rgba(232,100,47,.05));
  border:1px solid rgba(18,85,74,.15);border-radius:12px}
.kp-speak .sp-btn{width:36px;height:36px;border-radius:50%;border:0;background:var(--brand);color:#fff;
  font-size:15px;cursor:pointer;display:grid;place-items:center;transition:transform .14s var(--ease),box-shadow .2s var(--ease)}
.kp-speak .sp-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 3px var(--glow-accent)}
.kp-speak .sp-btn:active{transform:scale(.94)}
.kp-speak .sp-btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line-2)}
.kp-speak .sp-rate{display:flex;gap:5px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.kp-speak .sp-label{font-size:13px;font-weight:700;color:var(--brand-d)}
.kp-speak .sp-note{font-size:12px;color:var(--ink-3)}
.kp-speak .sp-wave{display:flex;align-items:flex-end;gap:2px;height:18px;margin-left:2px}
.kp-speak .sp-wave i{width:3px;height:5px;border-radius:2px;background:var(--line-2)}
.kp-speak.on .sp-wave i{background:var(--accent);animation:spw .9s var(--ease) infinite}
.kp-speak .sp-wave i:nth-child(2){animation-delay:.12s}
.kp-speak .sp-wave i:nth-child(3){animation-delay:.24s}
.kp-speak .sp-wave i:nth-child(4){animation-delay:.36s}
@keyframes spw{0%,100%{height:5px}50%{height:18px}}

/* ============================================================
   错题页 / 错题中心
   ============================================================ */
.kw-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.kw-head h1{margin:0;font-size:clamp(20px,2.8vw,25px);font-weight:800;letter-spacing:-.02em}
.kw-badge{font-size:12px;font-weight:700;color:#fff;background:var(--err);border-radius:99px;padding:3px 11px}
.kw-item{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 12px;background:#fff;margin-bottom:8px;transition:background .2s var(--ease),border-color .2s var(--ease)}
.kw-item.right{background:rgba(46,125,91,.07);border-color:rgba(46,125,91,.5)}
.kw-item.wrong{background:rgba(180,52,43,.06);border-color:rgba(180,52,43,.45)}
.kw-cnt{font-size:11.5px;font-weight:700;color:#fff;background:var(--warn);border-radius:99px;padding:2px 8px;white-space:nowrap}
.kw-cnt.zero{display:none}
.kw-empty{padding:36px 10px;text-align:center;color:var(--ink-3)}
.kw-empty .big{font-size:34px;display:block;margin-bottom:8px}
.kw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}

/* ============================================================
   打印页（自研分页器）
   ============================================================ */
.pp-bar{position:sticky;top:62px;z-index:20;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:rgba(245,242,236,.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin:8px 0 16px;box-shadow:var(--sh)}
.pp-bar .grp{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.pp-bar .sep{width:1px;height:24px;background:var(--line-2)}
.pp-stage{padding:0 0 30px;display:flex;flex-direction:column;align-items:center;gap:12px;overflow-x:auto}
.pg{position:relative;background:#fff;color:#1C1E1A;box-shadow:0 3px 16px rgba(28,30,26,.14);
  border-radius:3px;display:flex;flex-direction:column;box-sizing:border-box}
.pg.port{width:210mm;height:297mm;padding:13mm 11mm 15mm}
.pg.land{width:297mm;height:210mm;padding:11mm 13mm 13mm}
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  border-bottom:1.4px solid #12554A;padding-bottom:3mm;margin-bottom:4mm}
.pg-brand{display:flex;align-items:baseline;gap:6px}
.pg-brand .mk{font-weight:800;color:#12554A;font-size:12.5pt;letter-spacing:.5px}
.pg-brand .sub{font-size:8.5pt;color:#8E9086}
.pg-topic{font-size:10pt;color:#61645B;text-align:right;line-height:1.35}
.pg-topic b{color:#1C1E1A}
.pg-body{flex:1;position:relative;z-index:1}
.pg-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4mm;
  border-top:1px solid #E3DCCF;padding-top:2.5mm;font-size:8.5pt;color:#8E9086}
.pg-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.pg-mark span{font-size:78pt;font-weight:800;color:#12554A;opacity:.05;transform:rotate(-24deg);letter-spacing:8px;white-space:nowrap}
.pg-info{position:absolute;right:11mm;top:8mm;z-index:2;font-size:8.5pt;color:#B9B2A3;display:none}
.pg-sec-t{font-size:11pt;font-weight:800;color:#12554A;margin:0 0 2mm;padding-left:2mm;border-left:3px solid #E8642F}
.pq-grid{display:grid;gap:3.5mm 5mm}
.pq{border:1px solid #E7E1D6;border-radius:1.6mm;padding:2mm 2.5mm;display:flex;flex-direction:column;break-inside:avoid}
.pq-q{font-family:var(--mono);font-size:12.5pt;font-weight:600;line-height:1.25}
.pq-n{font-family:var(--sans);font-size:9.5pt;font-weight:700;color:#E8642F;margin-right:1.5mm}
.pq-work{flex:1;border:1px dashed #E3DCCF;border-radius:1.2mm;margin-top:1.6mm;min-height:16mm}
.pq-ans{font-family:var(--mono);font-size:11pt;color:#12554A;margin-top:1.6mm}
.pp-tip{font-size:12.5px;color:var(--ink-3);text-align:center;margin:2px 0 10px}

@media print{
  html,body{background:#fff!important}
  .topbar,.crumb,.tool-head,.pp-bar,.pp-tip,.kp-side,footer,#toast,.kp-speak,.kp-tools,.kp-res-slot,.no-print{display:none!important}
  main.wrap{max-width:none;padding:0;margin:0}
  .pp-stage{padding:0;gap:0;overflow:visible;display:block}
  .pg{box-shadow:none;border-radius:0;margin:0;break-after:page;page-break-after:always}
  .pg:last-child{break-after:auto;page-break-after:auto}
  .pg-info{display:block}
}
html.pp-land{}

/* ============================================================
   错题页 / 错题中心（补充）
   ============================================================ */
.kw-item{gap:9px;padding:8px 11px}
.kw-item .kw-n{font-family:var(--disp);font-style:italic;font-weight:700;color:var(--brand-d);min-width:20px;text-align:right}
.kw-item .kw-qt{font-family:var(--mono);font-weight:600;min-width:108px}
.kw-item .kp-res{min-width:50px}
.kp-btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.kp-btn.ok:hover{box-shadow:0 0 0 3px rgba(46,125,91,.25)}
.kw-grid .kw-card{display:block;position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px 15px;background:#fff;box-shadow:var(--sh);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.kw-grid .kw-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 10px 26px rgba(18,85,74,.16)}
.kw-grid .kw-card::after{content:"→";position:absolute;right:14px;top:13px;color:var(--brand);font-weight:800;opacity:.35;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.kw-grid .kw-card:hover::after{opacity:1;transform:translateX(2px)}
.kw-card-h{font-weight:700;color:var(--ink);margin-bottom:3px;padding-right:20px}
.kw-card-m{font-size:12px;color:var(--ink-3);margin-bottom:9px}


/* ============================================================
   学科工具：首页入口 + 教材版本分类（R3）
   ============================================================ */
/* 首页推荐横幅 */
.kbanner{display:flex;align-items:center;gap:16px;margin:16px 0 4px;padding:16px 20px;
  background:linear-gradient(120deg,#12554A,#1C6B5C 55%,#2E8070);color:#F5F2EC;
  border-radius:var(--r);box-shadow:0 12px 30px rgba(18,85,74,.28);position:relative;overflow:hidden}
.kbanner::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.kbanner .kb-ic{font-size:30px;line-height:1;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.kbanner .kb-tx{flex:1;min-width:0}
.kbanner .kb-tx b{display:block;font-size:17px;letter-spacing:.01em;margin-bottom:3px}
.kbanner .kb-tx span{font-size:13px;opacity:.9;line-height:1.5}
.kbanner .kb-go{flex:none;background:#F5F2EC;color:#12554A;font-weight:700;font-size:13.5px;
  padding:10px 18px;border-radius:999px;transition:.18s var(--ease);white-space:nowrap}
.kbanner .kb-go:hover{text-decoration:none;transform:translateX(2px);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.kcard{border-color:rgba(18,85,74,.35);background:linear-gradient(180deg,rgba(18,85,74,.06),#fff)}
.kcard::before{content:"推荐";position:absolute;right:14px;top:12px;font-size:10.5px;letter-spacing:.05em;
  color:#12554A;background:rgba(18,85,74,.12);border-radius:999px;padding:2px 8px}

/* 版本卡片墙 */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.vcard{position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 15px 13px;color:inherit;transition:.16s ease}
.vcard:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--sh-hi)}
.vcard .tile{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:18px;font-weight:800;margin-bottom:10px;font-family:var(--disp)}
.vcard h3{margin:0 0 3px;font-size:15px;font-weight:700}
.vcard p{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.5;min-height:32px}
.vcard .ct{display:inline-block;margin-top:8px;font-size:11.5px;color:var(--ink-3)}

/* 版本页 */
.vmeta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.v-lead{font-size:13px;color:var(--ink-2);line-height:1.7;background:rgba(18,85,74,.05);
  border-left:3px solid var(--brand);border-radius:6px;padding:9px 13px;margin:0 0 14px}
.vstage{margin-bottom:18px}
.vstage-h{font-size:14px;font-weight:800;color:#12554A;letter-spacing:.04em;
  padding:4px 0 8px;border-bottom:1px dashed var(--line);margin-bottom:10px}
.vgrade{padding:9px 12px;border-radius:9px;margin-bottom:8px;background:#fff;border:1px solid var(--line)}
.vgrade-h{font-size:13.5px;font-weight:700;color:var(--ink)}
.vgrade-empty{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.vchs{margin-top:7px;display:flex;flex-direction:column;gap:6px}
.vch{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  padding:7px 10px;background:rgba(18,85,74,.045);border-radius:7px}
.vch-t{font-size:12.5px;color:var(--ink-2);font-weight:600}
.vch-p{display:flex;flex-wrap:wrap;gap:6px}
.vflag{font-size:10.5px;color:#9C5238;background:rgba(156,82,56,.12);
  border-radius:999px;padding:1px 7px;white-space:nowrap}
.v-empty{font-size:13px;color:var(--ink-2);line-height:1.7;background:#fff;border:1px dashed var(--line);
  border-radius:var(--r);padding:18px}

/* 知识点页：各版本位置 */
.vpos{display:flex;flex-direction:column;gap:7px}
.vpos-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:8px 12px;
  background:#fff;border:1px solid var(--line);border-radius:8px}
.vpos-v{font-weight:700;font-size:13px;color:#12554A;min-width:96px}
.vpos-v:hover{text-decoration:none;color:var(--brand)}
.vpos-w{font-size:12.5px;color:var(--ink-2)}

@media (max-width:560px){
  .kbanner{flex-direction:column;align-items:flex-start;gap:10px;padding:15px}
  .kbanner .kb-go{align-self:stretch;text-align:center}
  .vpos-v{min-width:0}
}

/* 知识点页 · 原理分层（视频 > 图解 > 公式 > 文字） */
.kp-video{margin:0 0 14px}
.kp-video-card{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:inherit;
  border:1px solid rgba(18,85,74,.18);border-radius:12px;
  background:linear-gradient(180deg,rgba(18,85,74,.07),rgba(18,85,74,.02));transition:.16s ease}
.kp-video-card:hover{border-color:rgba(18,85,74,.4);transform:translateY(-1px)}
.kp-video-play{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#12554A;color:#fff;
  display:grid;place-items:center;font-size:15px;padding-left:3px}
.kp-video-txt{display:flex;flex-direction:column;line-height:1.45}
.kp-video-txt small{color:var(--ink-3)}
.kp-video-go{margin-left:auto;color:#12554A;font-weight:600;font-size:13px;white-space:nowrap}
.kp-video-hint{margin:8px 2px 0;font-size:12.5px;color:var(--ink-3)}

.kp-figure{margin:0 0 16px;padding:8px 10px;background:rgba(18,85,74,.03);
  border:1px solid rgba(18,85,74,.1);border-radius:12px}
.kp-fig{width:100%;height:auto;display:block}
.kp-figure figcaption{margin-top:6px;font-size:13px;color:var(--ink-2);line-height:1.65}

.kp-formula{margin:0 0 16px;padding:14px 16px;border-radius:12px;
  background:rgba(232,100,47,.06);border:1px solid rgba(232,100,47,.18)}
.kp-formula-eq{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:700;color:#B4441B;letter-spacing:.4px}
.kp-formula-note{margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.kp-formula-derive{margin:10px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.9}

/* 学科工具 · 知识导图 */
.map-links{display:flex;flex-wrap:wrap;gap:12px}
.map-link{display:flex;flex-direction:column;gap:2px;min-width:220px;padding:14px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:.16s ease}
.map-link:hover{border-color:#12554A;transform:translateY(-1px)}
.map-link b{color:#12554A;font-size:15px}
.map-link small{color:var(--ink-3);font-size:12px}

.kmap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kmap-term{margin-bottom:12px}
.kmap-term>summary{font-size:16px;font-weight:700;color:#12554A;cursor:pointer;padding:6px 2px;list-style:none}
.kmap-term>summary::-webkit-details-marker{display:none}
.kmap-term>summary::before{content:'\25B8';display:inline-block;margin-right:8px;transition:.15s;color:var(--ink-3)}
.kmap-term[open]>summary::before{transform:rotate(90deg)}
.kmap-units{margin:6px 0 0 12px;border-left:2px solid rgba(18,85,74,.18);padding-left:14px}
.kmap-unit{margin:8px 0}
.kmap-unit>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;padding:4px 2px}
.kmap-unit>summary::-webkit-details-marker{display:none}
.kmap-unit>summary::before{content:'\25B8';color:var(--ink-3);transition:.15s}
.kmap-unit[open]>summary::before{transform:rotate(90deg)}
.kmap-u{font-weight:600;color:var(--ink-2);font-size:14px}
.kmap-n{font-size:12px;color:var(--ink-3)}
.kmap-kps{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px 22px;position:relative}
.kmap-kps::before{content:'';position:absolute;left:-14px;top:-6px;bottom:10px;width:1px;background:var(--line)}
.kmap-kp{display:inline-block;padding:5px 13px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  font-size:13px;color:#12554A;transition:.16s ease}
.kmap-kp:hover{border-color:#12554A;background:rgba(18,85,74,.06)}
@media (max-width:560px){.map-link{min-width:0;flex:1}}


/* 学科工具 · 思维导图（SVG 版） */
.mm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.mm-btn{font:inherit;font-size:13px;padding:6px 15px;border:1px solid var(--line-2);border-radius:999px;
  background:#fff;color:#12554A;cursor:pointer;transition:.16s ease}
.mm-btn:hover{border-color:#12554A;background:rgba(18,85,74,.06)}
.mm-hint{font-size:12.5px;color:var(--ink-3)}
.mindmap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 4px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.mm-svg{display:block;max-width:100%;height:auto;margin:0 auto}
.mm-unit,.mm-leaf{cursor:pointer}
.mm-unit rect{transition:.16s ease}
.mm-unit:hover rect{filter:brightness(1.08)}
.mm-leaf rect{transition:.16s ease}
.mm-leaf:hover rect{fill:rgba(18,85,74,.05);stroke-opacity:.9}
.mm-leaf text{pointer-events:none}

.kp-video-search{display:inline-block;margin:8px 2px 0;padding:6px 14px;border:1px dashed rgba(18,85,74,.4);
  border-radius:999px;font-size:12.5px;color:#12554A;text-decoration:none;background:rgba(18,85,74,.04)}
.kp-video-search:hover{border-style:solid;background:rgba(18,85,74,.09)}
.kp-figure{background:rgba(18,85,74,.03)}
.kp-fig text{font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif}
@media (prefers-reduced-motion:reduce){.kp-fig *{animation:none !important}}

/* 版本页 · 年级导图入口 */
.vgrade-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vmm{margin-left:auto;font-size:12px;font-weight:600;color:#12554A;text-decoration:none;
  padding:3px 11px;border:1px solid rgba(18,85,74,.35);border-radius:999px;background:rgba(18,85,74,.05);white-space:nowrap}
.vmm:hover{background:rgba(18,85,74,.12);border-color:#12554A}
@media (max-width:560px){.vmm{margin-left:0}}

/* 学科工具 · 侧边知识树（真实知识点分组，可折叠） */
.kt-stage-d,.kt-subj-d,.kt-grade-d{border:0}
.kt-stage-d>summary,.kt-subj-d>summary,.kt-grade-d>summary{list-style:none;cursor:pointer;position:relative}
.kt-stage-d>summary::-webkit-details-marker,.kt-subj-d>summary::-webkit-details-marker,
.kt-grade-d>summary::-webkit-details-marker{display:none}
.kt-stage-d>summary::before,.kt-subj-d>summary::before,.kt-grade-d>summary::before{
  content:'▸';display:inline-block;margin-right:6px;color:var(--ink-3);transition:transform .15s}
.kt-stage-d[open]>summary::before,.kt-subj-d[open]>summary::before,.kt-grade-d[open]>summary::before{transform:rotate(90deg)}
.kt-grade-d{margin:1px 0 4px}
.kt-grade-d>summary.kt-grade-h{font-size:12.5px;font-weight:700;color:var(--ink-2);
  padding:4px 8px 4px 12px;border-radius:7px}
.kt-grade-d>summary.kt-grade-h:hover{background:var(--paper-2)}
.kt-grade-h i{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:600;margin-left:2px}
.kt-grade-d .kt-ch{margin:1px 0 3px}
.kt-grade-d .kt-ch-h{padding-left:22px;font-size:12px}
.kt-point{padding-left:28px;font-size:12.5px}

/* ===== 题型库（按教辅资料整理的题型清单）===== */
#kp-tiku .tk-src-line{font-size:12.5px;color:var(--ink-3);margin:0 0 12px}
.tk-list{display:flex;flex-direction:column;gap:6px}
.tk-row{display:grid;grid-template-columns:92px 1.1fr 1.6fr .9fr;gap:10px;align-items:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  font-size:13.5px;color:var(--ink)}
a.tk-row{cursor:pointer;transition:transform .14s var(--ease),box-shadow .2s var(--ease),border-color .16s var(--ease)}
a.tk-row:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--glow-brand);text-decoration:none;transform:translateY(-1px)}
.tk-row.tk-head{background:var(--paper-2);font-weight:700;color:var(--ink-2);border-style:dashed;font-size:12.5px}
.tk-row.off{opacity:.62}
.tk-tier{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;text-align:center;white-space:nowrap}
.tk-tier.t1{background:rgba(46,125,91,.13);color:var(--ok)}
.tk-tier.t2{background:rgba(18,85,74,.12);color:var(--brand)}
.tk-tier.t3{background:rgba(176,138,46,.16);color:#8A6A1B}
.tk-tier.t4{background:rgba(232,100,47,.15);color:var(--accent)}
.tk-name{font-weight:600}
.tk-name .tk-op{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:400;margin-top:1px}
.tk-sk{color:var(--ink-2);font-size:12.5px}
.tk-src{color:var(--ink-3);font-size:12px}
@media (max-width:760px){
  .tk-row{grid-template-columns:80px 1fr;grid-auto-rows:auto}
  .tk-sk,.tk-src{grid-column:2}
  .tk-row.tk-head{display:none}
}


/* ===== 知识点页顶部：教材版本定位（R22） ===== */
.kp-vtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 9px;font-size:12.5px;color:var(--ink-3)}
.kp-vtop .kvtop{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;
  background:rgba(18,85,74,.08);color:#12554A;text-decoration:none;font-weight:600;border:1px solid rgba(18,85,74,.18)}
.kp-vtop .kvtop:hover{background:rgba(18,85,74,.15)}
.kp-vtop .kvtop b{font-weight:600;color:var(--ink-2)}

/* ===== 思维导图展开面板（R22） ===== */
.mm-panel{position:relative;margin:14px 0 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.mm-panel-x{position:absolute;top:8px;right:10px;border:0;background:transparent;cursor:pointer;
  font-size:15px;color:var(--ink-3);padding:4px 6px;border-radius:7px}
.mm-panel-x:hover{background:var(--paper-2);color:var(--ink)}
.mm-panel-t{font-size:16px;font-weight:800;color:#12554A;padding-right:28px}
.mm-panel-s{margin:6px 0 10px;font-size:14px;color:var(--ink-2);line-height:1.6}
.mm-panel-fig{margin:0 0 10px}
.mm-panel-fig img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.mm-panel-go{display:inline-block;font-size:13px;font-weight:600;color:#12554A;text-decoration:none;
  padding:6px 14px;border:1px solid rgba(18,85,74,.35);border-radius:999px;background:rgba(18,85,74,.05)}
.mm-panel-go:hover{background:rgba(18,85,74,.12)}

/* ============================================================
   配色专家（color-convert）· R40
   ============================================================ */
.cp-wrap{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:start}
@media(max-width:820px){.cp-wrap{grid-template-columns:1fr}}
.cp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.cp-pick .cp-stage{margin-top:4px}
.cp-sv{position:relative;width:100%;height:190px;border-radius:10px;cursor:crosshair;touch-action:none;
  border:1px solid var(--line);background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,#f00)}
.cp-dot{position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}
.cp-hue{position:relative;height:20px;margin-top:12px;border-radius:99px;cursor:pointer;touch-action:none;
  border:1px solid var(--line);background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-hdot{position:absolute;top:50%;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}
.cp-presets{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.cp-pk{font-size:12.5px;color:var(--ink-3)}
.cp-preset{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.14);cursor:pointer;padding:0;transition:.12s}
.cp-preset:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.14)}
.cp-sliders{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.cp-sl{display:grid;grid-template-columns:22px 1fr 62px;gap:10px;align-items:center}
.cp-k{font:700 13px var(--mono);color:var(--ink-2)}
.cp-sl input[type=range]{width:100%;accent-color:var(--brand);cursor:pointer}
.cp-sl input[type=number]{width:100%;padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;
  font:13px var(--mono);text-align:center;color:var(--ink);background:var(--card)}
.cp-sl input[type=number]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,85,74,.10)}
.cc-ctr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cc-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--paper-2)}
.cc-card span{display:block;font-size:12px;color:var(--ink-3);line-height:1.4}
.cc-card b{font:700 18px var(--mono)}
.cc-card i{font-style:normal;font-size:11.5px;margin-left:7px;color:var(--ink-3)}
.cc-ctr .note{grid-column:1/-1;margin:2px 0 0}
.cp-code{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.cp-crow{display:grid;grid-template-columns:92px 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.cp-crow:last-child{border-bottom:0}
.cp-crow .k{font-size:12px;color:var(--ink-3)}
.cp-crow code{font:13px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;color:var(--ink)}
.cp-cbtn{border:1px solid var(--line-2);background:var(--card);border-radius:7px;padding:4px 11px;font-size:12.5px;
  cursor:pointer;color:var(--ink-2);white-space:nowrap}
.cp-cbtn:hover{border-color:var(--brand);color:var(--brand)}
@media(max-width:560px){
  .cc-ctr{grid-template-columns:1fr}
  .cp-crow{grid-template-columns:66px 1fr auto;gap:8px}
  .cp-sl{grid-template-columns:20px 1fr 56px;gap:8px}
}

/* ============================================================
   配色方案页（8 色系 + WCAG AA）· R40
   ============================================================ */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.cl-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:.14s}
.cl-card:hover{transform:translateY(-2px);box-shadow:var(--sh-hi);border-color:var(--brand)}
.cl-sw{height:78px;display:flex;flex-direction:column;justify-content:flex-end;padding:9px 11px;gap:1px}
.cl-sw b{font-size:14px;font-weight:700}
.cl-sw span{font-size:11px;opacity:.85;font-family:var(--mono)}
.cl-meta{padding:8px 11px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line)}
.cl-meta code{font:11.5px var(--mono);color:var(--ink-2)}
.aa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.aa-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.aa-prev{padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.aa-prev b{font-size:16px}
.aa-prev small{font-size:11.5px;opacity:.8;font-family:var(--mono)}
.aa-btn{border-radius:9px;padding:8px 16px;font:600 13px var(--sans);margin-top:4px}
.aa-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.aa-ratio{color:var(--ok);font-weight:700;font-family:var(--mono)}
.aa-codes{font-family:var(--mono)}
.aa-full{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;align-items:stretch;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:16px}
@media(max-width:780px){.aa-full{grid-template-columns:1fr}}
.aa-full-prev{padding:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.aa-name{font:600 12px var(--mono);opacity:.85}
.aa-full-prev h3{margin:0;font-size:20px}
.aa-full-prev p{margin:0;font-size:13px;opacity:.9;line-height:1.6}
.aa-demo-btn{border:0;border-radius:10px;padding:10px 20px;font:600 14px var(--sans);margin-top:6px;cursor:default}
.aa-badge{margin-top:6px;font:600 12px var(--mono);background:rgba(255,255,255,.18);border-radius:99px;padding:4px 12px}
.aa-full-side{padding:16px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line);background:var(--paper-2)}
@media(max-width:780px){.aa-full-side{border-left:0;border-top:1px solid var(--line)}}
.aa-full-side .cp-code{background:#fff}
.cf-block{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh)}
.cf-block h3{margin:0 0 10px;font-size:17px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.cf-block h3 a{font-weight:700}
.cf-aa{font-size:12.5px;font-weight:600;color:var(--accent)}
.cf-strip{display:flex;border-radius:9px;overflow:hidden;height:44px;border:1px solid var(--line)}
.cf-strip i{flex:1}
.cf-desc{margin:10px 0 0;font-size:13px;color:var(--ink-2)}

/* ============================================================
   配色专家 R41 · 漂浮实时预览 + 透明度 + 三档主题
   ============================================================ */
.cp-float{position:fixed;right:18px;top:84px;width:314px;z-index:60;background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-hi)}
.cp-float-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);
  background:var(--paper-2);border-radius:16px 16px 0 0}
.cp-float-head>b{font-size:13.5px}
.cp-tabs{display:flex;gap:4px;margin-left:auto;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:3px}
.cp-tabs button{border:0;background:transparent;border-radius:99px;padding:3px 10px;font:600 12px var(--sans);color:var(--ink-2);cursor:pointer}
.cp-tabs button.on{background:var(--brand);color:#fff}
.cp-caret{display:none;font-style:normal;color:var(--ink-3);font-size:12px;width:18px;text-align:center}
.cp-float-in{max-height:calc(100vh - 132px);overflow:auto;padding:12px;border-radius:0 0 16px 16px}
.cp-rail{position:absolute;left:-44px;top:0;display:flex;flex-direction:column;gap:8px}
.cp-rail button{width:38px;height:30px;border:1px solid var(--line-2);background:var(--card);border-radius:9px;
  font:600 11px var(--sans);color:var(--ink-2);cursor:pointer;box-shadow:var(--sh)}
.cp-rail button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cp-float-body{padding:10px;border:1px solid var(--line);border-radius:12px;
  background:repeating-conic-gradient(#0000000d 0 25%,transparent 0 50%) 0 0/16px 16px}
.cp-alpha-strip{display:flex;gap:6px;margin-top:10px}
.cp-achip{flex:1;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.08);display:flex;align-items:flex-end;justify-content:center}
.cp-achip i{font:600 10px var(--mono);font-style:normal;padding-bottom:3px}
.cp-float-code{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.cp-float-code .cp-crow{grid-template-columns:66px 1fr auto;padding:6px 10px;gap:8px}
.cp-float-code .cp-crow code{font-size:11.5px}
.cp-float-code .cp-cbtn{padding:2px 9px;font-size:11px}
.cp-float-foot{display:flex;gap:8px;margin-top:10px}
.cp-float-foot .btn{flex:1;padding:7px 4px;font-size:12.5px}
/* 漂浮窗底部导航（菜单式，链到配色主页） */
.cp-float-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.cp-float-nav a{flex:1 1 calc(50% - 3px);min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:600 11.5px var(--sans);color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);
  border-radius:8px;padding:6px 6px;text-decoration:none;transition:.14s}
.cp-float-nav a:hover{color:var(--brand);border-color:var(--brand)}
.cp-float-nav a.on{color:var(--brand);border-color:var(--brand)}
body.cp-dark .cp-float-nav a{color:#C6CCD6;background:#10141A;border-color:#262B35}
body.cp-dark .cp-float-nav a.on,body.cp-dark .cp-float-nav a:hover{color:var(--brand);border-color:var(--brand)}
@media(min-width:1280px){body.cp-page .wrap{padding-right:352px}}
@media(min-width:1820px){body.cp-page .wrap{padding-right:20px}}
@media(max-width:1279px){
  .cp-float{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:16px 16px 0 0;
    transform:translateY(calc(100% - 47px));transition:transform .25s ease;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
  .cp-float.open{transform:none}
  .cp-float-head{cursor:pointer}
  .cp-caret{display:block;margin-left:6px}
  .cp-float-in{max-height:72vh}
  .cp-rail{position:static;flex-direction:row;margin-bottom:10px}
  .cp-rail button{flex:1;height:30px}
}
/* 一键配色方案：hexrgb 调色板容器卡 + 动态渐变 */
#pals .pal{margin:0 0 14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--sh)}
#pals .pal h4{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
#pals .pal h4::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent);flex:none}
#pals .palrow{display:flex;gap:10px}
#pals .palrow div{height:64px;border-radius:10px;border:1px solid rgba(0,0,0,.06);flex:1;
  display:flex;align-items:flex-end;padding:0 9px 6px;font:600 11.5px var(--mono);cursor:pointer;transition:.14s;border-left:1px solid rgba(0,0,0,.06)}
#pals .palrow div:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.14)}
.gradflow{background-size:220% 220% !important;animation:cpflow 7s ease-in-out infinite}
@keyframes cpflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* 页面三档主题（只作用于带切换按钮的工具页） */
body.cp-light{--paper:#FFFFFF;--paper-2:#F6F7F8;--line:#E6E8EB;--line-2:#D9DCE0;background-image:none}
body.cp-light .topbar{background:rgba(255,255,255,.9)}
body.cp-dark{--paper:#14171A;--paper-2:#1B2026;--card:#1E232A;--line:#2C333D;--line-2:#3B424E;
  --ink:#E8EAED;--ink-2:#ABB1BA;--ink-3:#7E848E;--brand:#53B8A5;--brand-d:#3C8F7F;--accent:#FF7A47;
  --ok:#5BC58F;--err:#F07A6E;
  background-image:radial-gradient(1200px 500px at 15% -10%,rgba(83,184,165,.09),transparent 70%)}
body.cp-dark .topbar{background:rgba(20,23,26,.9);border-bottom-color:#2C333D}
body.cp-dark a{color:var(--brand)}
@media (prefers-reduced-motion: reduce){.gradflow{animation:none}}

/* ============================================================
   配色专家 R41b · 漂浮窗精修（预览 348px 宽重排 + 代码单行化）
   ============================================================ */
.cp-float-body{padding:8px}
.cp-float .demo{margin-top:0}
.cp-float .demo .dhead{padding:8px 12px;font-size:12.5px}
.cp-float .demo .dbody{padding:10px 12px;gap:8px}
.cp-float .demo .dbtn{padding:6px 12px;font-size:12px;border-radius:8px}
.cp-float .demo .dtag{padding:3px 10px;font-size:11px}
.cp-float .demo .dcard{padding:9px 11px;font-size:12px;min-width:0;width:100%;line-height:1.55}
.cp-float .demo .dcard b{font-size:12.5px}
.cp-float .demo .dbar{height:8px}
.cp-float .slide{aspect-ratio:16/9;padding:5% 6%}
.cp-float .slide h4{font-size:15px}
.cp-float .slide p{font-size:11px}
.cp-float .slide .bars{height:30%}
.cp-achip{height:30px}
.cp-achip i{font-size:9.5px;padding-bottom:2px}
.cp-float-code .cp-crow{grid-template-columns:60px 1fr auto;height:32px;padding:0 9px;gap:8px}
.cp-float-code .cp-crow code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.cp-float-code .cp-cbtn{padding:2px 8px;font-size:10.5px}
@media(min-width:1280px){.cp-float{width:384px}body.cp-page .wrap{padding-right:404px}}
@media(min-width:1900px){body.cp-page .wrap{padding-right:20px}}

/* ============================================================
   配色专家 R41c · 主题可读性 + 单行排版 + 深色容器(hexrgb风) + 移动端
   ============================================================ */
/* 取色输入框：主题化（修深色下白底白字看不见） */
#hex{flex:1;min-width:0;max-width:none;background:var(--card);color:var(--ink);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 12px;font:600 15px var(--mono)}
#hex::placeholder{color:var(--ink-3);font-weight:400}
#hex:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,85,74,.12)}
/* 取色行与快速取色：一律单行 */
.cp-pick .row{flex-wrap:nowrap;align-items:center}
.cp-pick .row .btn{padding:8px 12px;font-size:13px;white-space:nowrap;flex:none}
.cp-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.cp-presets::-webkit-scrollbar{height:4px}
.cp-presets::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.cp-pk{flex:none}
.cp-preset{flex:none}
.cp-float-foot .btn{white-space:nowrap}
.cp-float-foot{flex-wrap:nowrap}
/* 深色主题：参考 hexrgb 深色容器（bg #0F1116 / 卡 #14181F / 线 #262B35） */
body.cp-dark{--paper:#0F1116;--paper-2:#151920;--card:#171B22;--line:#262B35;--line-2:#39404D;
  --ink:#E6E8EE;--ink-2:#9AA1AC;--ink-3:#6E7682;
  background-image:
    linear-gradient(rgba(83,184,165,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(83,184,165,.04) 1px,transparent 1px),
    radial-gradient(1200px 500px at 15% -10%,rgba(83,184,165,.08),transparent 70%);
  background-size:26px 26px,26px 26px,auto}
body.cp-dark .topbar{background:rgba(13,15,20,.92)}
body.cp-dark .cp-card,body.cp-dark #pals .pal{background:#14181F;box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35)}
body.cp-dark .cp-float{background:#14181F;box-shadow:0 24px 64px rgba(0,0,0,.6)}
body.cp-dark .cp-float-body{border-color:#262B35;background:repeating-conic-gradient(rgba(255,255,255,.045) 0 25%,transparent 0 50%) 0 0/16px 16px}
body.cp-dark .cp-float-code{background:#10141A}
body.cp-dark .cp-float-code .cp-cbtn{background:#10141A}
body.cp-dark .cc-card,body.cp-dark #hex,body.cp-dark .cp-sl input[type=number],body.cp-dark .cp-float-code .cp-cbtn{background:#10141A}
body.cp-dark .cp-preset,body.cp-dark .cp-float-code,body.cp-dark #pals .palrow div{border-color:rgba(255,255,255,.14)}
body.cp-dark .cp-tabs{background:#10141A}
body.cp-dark #pals .pal h4{color:var(--ink-2)}
/* 手机打开按钮：桌面让位给悬浮窗 */
body.cp-page #portal{right:414px}
/* 移动端：抽屉打开高度收敛（上方仍能看到调色区），适配安全区 */
@media(max-width:1279px){
  body.cp-page #portal{display:none}
  .cp-float{padding-bottom:env(safe-area-inset-bottom)}
  .cp-float.open .cp-float-in{max-height:min(58vh,430px)}
  .cp-float-head{padding:12px 14px}
  body:has(.cp-float.open) #portal{display:none}
}

/* ============================================================
   对比度检测器（contrast-checker）· R35c
   参考 hexrgb.com 的 WCAG Contrast Checker：深色单栏 / 大写小标 / 预览 + 结果横排徽章
   ============================================================ */
/* 整页深色：复用 cp-dark token，但要撤掉命名色详情页那套“右侧给漂浮窗让位” */
@media(min-width:1280px){body.cc-page.cp-dark .wrap{padding-right:0}}
body.cc-page .panel{background:#14181F;border-color:#242A34;padding:22px}
body.cc-page .rel a{background:#14181F;border-color:#242A34}

.cc-sub{margin:0 0 18px;font-size:14px;color:var(--ink-2);line-height:1.7;max-width:780px}
.cc-sub code{font:12.5px var(--mono);background:#10141A;border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--ink)}

/* 整个检测面板铺满容器（原来限宽 1000px，右侧留白） */
.cc-panel{max-width:none}
.cc-cases-sec{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.cc-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:14px 16px;align-items:end}
.cc-field{min-width:0}
.cc-field label{display:flex;align-items:baseline;gap:8px;font:600 11.5px var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.cc-field label span{text-transform:none;letter-spacing:0;font-weight:400;font-size:11.5px;opacity:.85}
.cc-ctl{display:flex;gap:10px;align-items:center;min-width:0}
.cc-chip{flex:none;width:74px;height:46px;border-radius:11px;border:1px solid var(--line-2);cursor:pointer;
  font:700 11px var(--mono);letter-spacing:.02em;padding:0}
input.cc-hex{flex:1;min-width:0;width:auto;height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:11px;
  font:600 16px var(--mono);color:var(--ink);background:#10141A}
input.cc-hex:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(83,184,165,.16)}
.cc-field-btns{display:flex;gap:10px}
.cc-field-btns .cc-tbtn{height:46px;display:inline-flex;align-items:center;padding:0 16px}

.cc-tbtn{border:1px solid var(--line-2);background:#10141A;color:var(--ink);font:600 13px var(--sans);
  padding:11px 16px;border-radius:11px;cursor:pointer;white-space:nowrap;transition:.14s}
.cc-tbtn:hover{border-color:var(--brand);color:var(--brand)}
.cc-tbtn.primary{background:var(--brand);border-color:var(--brand);color:#06201B}
.cc-tbtn.primary:hover{background:var(--brand-d);color:#06201B}

.cc-pop{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#10141A}
.cc-pop-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cc-pop-head b{font-size:13.5px}
.cc-pop-head code{font:12px var(--mono);color:var(--ink-2)}
.cc-pop-x{margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--ink-3);
  font:600 12.5px var(--sans);cursor:pointer;padding:5px 10px;border-radius:8px}
.cc-pop-x:hover{color:var(--ink);border-color:var(--line-2)}
.cc-pop #popPicker .cp-sv{height:130px}

/* 预览 banner：往下滚时吸在顶栏下方，点下方案例不用翻回去也能看到效果 */
.cc-sample{position:sticky;top:74px;z-index:6;border-radius:14px;padding:26px 24px;
  border:1px solid var(--line);margin-top:16px;background:#10141A;
  box-shadow:0 8px 24px rgba(0,0,0,.32);transition:background .12s,color .12s}
.cc-s-big{font:800 32px/1.2 var(--sans)}
.cc-s-small{font:600 13px var(--sans);opacity:.85;letter-spacing:.06em;margin-top:4px}
.cc-s-p{margin:16px 0 0;font-size:14.5px;line-height:1.75;max-width:640px}

.cc-result{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin-top:16px;
  padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#10141A}
.cc-ratio{display:flex;align-items:baseline;gap:8px;flex:none}
.cc-ratio span{font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cc-ratio b{font:800 27px/1 var(--mono);color:var(--ok)}
.cc-badges{display:flex;flex-wrap:nowrap;gap:7px;margin-left:auto}
.cc-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:#171B22;font-size:12px}
.cc-badge .cc-bl{font-weight:600}
.cc-badge .cc-bl i{font-style:normal;color:var(--ink-3);font-weight:400;font-size:10.5px;margin-left:3px}
.cc-badge em{font-style:normal;font:700 11.5px var(--mono)}
.cc-badge.pass{border-color:rgba(83,184,165,.45);background:rgba(83,184,165,.12)}
.cc-badge.pass em{color:var(--ok)}
.cc-badge.fail{border-color:rgba(240,122,110,.4);background:rgba(240,122,110,.1)}
.cc-badge.fail em{color:var(--err)}
.cc-note{font-size:13px;color:var(--ink-2);margin:12px 0 0;line-height:1.7}
.cc-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.cc-cgroup{margin-bottom:18px}
.cc-cgroup h3{font-size:15px;display:flex;gap:10px;align-items:baseline;margin:0 0 10px}
.cc-cgroup h3 span{font-size:12.5px;font-weight:400;color:var(--ink-3)}
.cc-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.cc-case{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#14181F;cursor:pointer;padding:0;text-align:left;transition:transform .14s var(--ease),box-shadow .2s var(--ease),border-color .16s var(--ease)}
.cc-case:hover{transform:translateY(-2px);box-shadow:var(--sh-hi);border-color:var(--brand)}
.cc-case-prev{padding:14px 14px 10px;display:flex;flex-direction:column;gap:2px}
.cc-case-prev b{font:800 19px/1.25 var(--sans)}
.cc-case-prev i{font:600 11px var(--sans);font-style:normal;opacity:.9;letter-spacing:.03em}
.cc-case-meta{padding:8px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;color:#E6E8EE}
.cc-case-meta b{font-size:12.5px}
.cc-case-meta code{font:11px var(--mono);color:var(--ink-3)}

@media(max-width:1024px){
  .cc-result{flex-wrap:wrap}
  .cc-badges{flex-wrap:wrap;margin-left:0}
}
@media(max-width:860px){
  .cc-fields{grid-template-columns:1fr}
  .cc-field-btns .cc-tbtn{width:100%;justify-content:center}
  .cc-sample{position:static;box-shadow:none}
  .cc-s-big{font-size:25px}
  .cc-s-p{font-size:13.5px}
}

/* ============================================================
   命名色详情页（color/<fam>/<slug>/）· R35b · hexrgb 风
   参考 hexrgb.com：首屏转换器 + Color Palette Generator + CSS Named Colors
   ============================================================ */
body.cp-dark{--paper:#0F1116;--paper-2:#151920;--card:#14181F;--line:#262B35;--line-2:#39404D;
  --ink:#E6E8EE;--ink-2:#9AA1AC;--ink-3:#6E7682;
  background-image:
    linear-gradient(rgba(83,184,165,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(83,184,165,.035) 1px,transparent 1px),
    radial-gradient(1100px 460px at 12% -8%,rgba(108,92,231,.10),transparent 70%);
  background-size:26px 26px,26px 26px,auto}
body.cp-dark .topbar{background:rgba(13,15,20,.92)}
body.cp-dark a{color:#3EC8FF}
/* 落在白卡片 / 浅色页脚上的链接不能被上面的青色规则染掉（否则浅底青字看不清） */
body.cp-dark .ltlink{color:#4E534B}
body.cp-dark .foot a,body.cp-dark footer a{color:#5B6058}
body.cp-dark details{background:#14181F;border-color:#262B35}
@media(min-width:1280px){body.cp-dark .wrap{padding-right:404px}}
@media(min-width:1900px){body.cp-dark .wrap{padding-right:20px}}

.hx-hero{margin:6px 0 18px}
.hx-hero h1{margin:0;font-size:clamp(30px,5.2vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:#E6E8EE}
.hx-grad{background:linear-gradient(92deg,#FF3366,#6C5CE7 46%,#3EC8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-sub{margin:14px 0 0;font-size:15.5px;line-height:1.8;color:#9AA1AC;max-width:820px}

/* ---------- 首屏：转换器 ---------- */
.hx-conv{position:relative;background:#14181F;border:1px solid #262B35;border-radius:20px;
  padding:26px;margin-bottom:34px;overflow:hidden}
.hx-conv::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#FF3366,#6C5CE7,#3EC8FF);opacity:.7}
.hx-cgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hx-group{display:flex;flex-direction:column;gap:12px;min-width:0}
.hx-group>label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#6E7682}
.hx-hrow{display:flex;gap:10px;align-items:center;min-width:0}
.hx-hwrap{display:flex;align-items:center;gap:2px;flex:1;min-width:0;height:54px;padding:0 14px;
  background:#1A1F28;border:2px solid #2A2F3B;border-radius:12px;transition:border-color .2s}
.hx-hwrap:focus-within{border-color:#6C5CE7;box-shadow:0 0 0 4px rgba(108,92,231,.18)}
.hx-prefix{font:600 20px var(--mono);color:#6E7682}
input.hx-hexin,.hx-hexin{flex:1;min-width:0;width:auto;background:none;border:0;border-radius:0;padding:0;
  outline:none;box-shadow:none;color:#E6E8EE;font:600 20px var(--mono);letter-spacing:.05em;text-transform:uppercase}
input.hx-hexin:focus{box-shadow:none;border:0}
.hx-hexin.bad{color:#FF3366}
.hx-hwrap:has(.bad){border-color:rgba(255,51,102,.55)}
.hx-pick{flex:none;width:46px;height:46px;border-radius:10px;border:2px solid #39404D;cursor:pointer;
  background:#DC143C;transition:transform .14s,border-color .16s}
.hx-pick:hover{border-color:#6C5CE7;transform:translateY(-1px)}
.hx-round{flex:none;width:46px;height:46px;border-radius:50%;border:2px solid #39404D;background:#1A1F28;
  color:#9AA1AC;font-size:16px;line-height:1;cursor:pointer;transition:.16s}
.hx-round:hover{border-color:#6C5CE7;color:#6C5CE7;transform:rotate(180deg)}
.hx-pickerbox{margin-top:2px;padding:12px;border:1px solid #262B35;border-radius:12px;background:#151920}
.hx-pickerbox .cp-sv{height:120px}
.hx-hint{margin:0;font-size:12.5px;color:#6E7682;line-height:1.6}
.hx-hint code{font:11.5px var(--mono);background:#1A1F28;border:1px solid #2A2F3B;border-radius:4px;padding:1px 5px;color:#9AA1AC}
.hx-rgbs{display:flex;gap:10px}
.hx-rgb{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.hx-rgb small{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;text-align:center}
.hx-r{color:#ff6b6b}.hx-g{color:#51cf66}.hx-b{color:#339af0}.hx-a{color:#9AA1AC}
.hx-rgin{height:54px;width:100%;text-align:center;background:#1A1F28;border:2px solid #2A2F3B;border-radius:12px;
  color:#E6E8EE;font:600 19px var(--mono);outline:none;transition:border-color .2s}
.hx-rgin:focus{border-color:#6C5CE7;box-shadow:0 0 0 4px rgba(108,92,231,.18)}
.hx-preview{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hx-check{border-radius:12px;background:repeating-conic-gradient(#ffffff1a 0 25%,transparent 0 50%) 0 0/16px 16px}
.hx-sw{height:84px;border-radius:12px;border:2px solid #2A2F3B;position:relative;overflow:hidden;
  transition:background-color .25s}
.hx-sw span{position:absolute;bottom:8px;left:12px;font:600 12.5px var(--mono);color:#fff;
  background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px;backdrop-filter:blur(4px)}
.hx-output{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.hx-out{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #262B35;border-radius:8px;
  background:#1A1F28;cursor:pointer;transition:.14s;font-family:var(--sans);color:#E6E8EE}
.hx-out:hover{border-color:#6C5CE7;transform:translateY(-1px)}
.hx-out .k{font-size:11px;font-weight:700;letter-spacing:.06em;color:#6E7682}
.hx-out b{font:600 12.5px var(--mono);color:#E6E8EE;font-weight:600}
.hx-name{margin:16px 0 0;font-size:13px;color:#9AA1AC}
.hx-name b{font-family:var(--mono);color:#E6E8EE}

/* ---------- 区块通用 ---------- */
.hx-sec{margin:38px 0}
.hx-label{margin:0 0 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:#6E7682}
.hx-title{margin:0 0 20px;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.01em;color:#E6E8EE}
.hx-intro{margin:0 0 16px;font-size:14.5px;color:#9AA1AC;max-width:780px;line-height:1.75}

/* ---------- 相关色系 ---------- */
.hx-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hx-select{background:#1A1F28;color:#E6E8EE;border:2px solid #2A2F3B;border-radius:8px;
  padding:8px 12px;font:14px var(--sans);cursor:pointer;outline:none}
.hx-select:focus{border-color:#6C5CE7}
.hx-schemename{font-size:13px;color:#6E7682}
.hx-bar{display:flex;border-radius:12px;overflow:hidden;height:72px;border:1px solid #262B35;margin-top:16px}
.hx-baritem{flex:1;min-width:0;border:0;padding:0 0 8px;cursor:pointer;position:relative;display:flex;
  align-items:flex-end;justify-content:center;transition:flex .3s ease}
.hx-baritem:hover{flex:1.8}
.hx-baritem span{font:600 11px var(--mono);color:#fff;background:rgba(0,0,0,.45);padding:2px 8px;
  border-radius:4px;opacity:0;transition:opacity .2s;backdrop-filter:blur(4px);white-space:nowrap}
.hx-baritem:hover span,.hx-baritem:focus-visible span{opacity:1}
.hx-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.hx-btn{padding:10px 22px;border-radius:8px;border:2px solid #2A2F3B;background:#1A1F28;color:#E6E8EE;
  font:600 14px var(--sans);cursor:pointer;transition:.16s}
.hx-btn:hover{border-color:#6C5CE7;background:#22222e}
.hx-btn-primary{background:#6C5CE7;border-color:#6C5CE7;color:#fff}
.hx-btn-primary:hover{background:#5a4bd6;border-color:#5a4bd6}

/* ---------- 命名色一览 ---------- */
.hx-filter{width:100%;max-width:380px;background:#1A1F28;color:#E6E8EE;border:2px solid #2A2F3B;
  border-radius:8px;padding:10px 14px;font:14px var(--sans);outline:none}
.hx-filter:focus{border-color:#6C5CE7}
.hx-filter::placeholder{color:#6E7682}
.hx-cgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:8px;margin-top:16px}
.hx-cc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:0;padding:10px 12px;border:1px solid #262B35;
  border-radius:8px;background:#14181F;cursor:pointer;font-size:13px;color:#E6E8EE;text-decoration:none;min-width:0;
  transition:border-color .16s,transform .16s}
.hx-cc:hover{border-color:#6C5CE7;transform:translateY(-1px)}
body.cp-dark a.hx-cc{color:#E6E8EE}
.hx-cc[hidden]{display:none}
.hx-cc.on{border-color:#6C5CE7}
.hx-dot{width:24px;height:24px;border-radius:6px;flex:none;border:1px solid rgba(255,255,255,.12)}
.hx-cn{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-ch{font:11px var(--mono);color:#6E7682;width:100%;padding-left:34px}
.hx-empty{font-size:13px;color:#6E7682}

@media(max-width:860px){
  .hx-cgrid{grid-template-columns:1fr;gap:18px}
  .hx-preview{grid-template-columns:1fr}
  .hx-conv{padding:18px;border-radius:14px}
  .hx-output{gap:6px}
  .hx-cgrid2{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}
@media(max-width:560px){
  .hx-hint{font-size:12px}
  .hx-hero h1{font-size:28px}
}