/* ===========================================================
逻辑学学习平台 - 全站样式
=========================================================== */
:root{
--bg:#f5f6fa;
--bg-soft:#eef0f6;
--card:#ffffff;
--ink:#111827;
--ink-2:#334155;
--ink-3:#64748b;
--ink-4:#94a3b8;
--line:#e3e7ef;
--line-2:#eef1f6;
--indigo:#4f46e5;
--teal:#0d9488;
--amber:#d97706;
--rose:#db2777;
--blue:#2563eb;
--violet:#7c3aed;
--green:#059669;
--orange:#ea580c;
--cyan:#0891b2;
--red:#dc2626;
--radius:14px;
--radius-sm:9px;
--shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px -6px rgba(16,24,40,.10);
--shadow-lg:0 8px 40px -12px rgba(16,24,40,.22);
--mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--ink);
font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35;letter-spacing:-.01em}
p{margin:0 0 .6em}
mark{background:#fff2c2;color:#7c4a03;padding:0 2px;border-radius:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-4)}
.nowrap{white-space:nowrap}
/* ---------------- header ---------------- */
.site-header{
position:sticky;top:0;z-index:80;
background:rgba(255,255,255,.88);
backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--line);
}
/* 第二十轮：模块增到 6 个 + 头部用户区后，头部内容曾达 1315px > .wrap(1200) ⇒ 整页横向溢出。
收紧间距与链接内边距后约 1155px，任何视口都不再溢出（统计块不再需要在窄屏隐藏）。 */
.hd-inner{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{
width:38px;height:38px;border-radius:11px;flex:none;
background:linear-gradient(135deg,#4f46e5,#7c3aed 55%,#d97706);
color:#fff;display:grid;place-items:center;font-size:19px;font-weight:700;
box-shadow:0 4px 14px -4px rgba(79,70,229,.55);
}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text b{font-size:16px;letter-spacing:-.2px}
.brand-text i{font-style:normal;font-size:11px;color:var(--ink-4);letter-spacing:.4px}
.main-nav{display:flex;gap:2px;flex:1;min-width:0}
.main-nav a{
padding:8px 10px;border-radius:9px;font-size:14px;color:var(--ink-2);
font-weight:500;transition:.14s;white-space:nowrap;
}
.main-nav a:hover{background:var(--bg-soft);color:var(--ink)}
.main-nav a.on{background:#111827;color:#fff}
.hd-stat{display:flex;gap:16px;font-size:12.5px;color:var(--ink-3);flex:none}
.hd-stat b{color:var(--indigo);font-size:14px}
/* 第十九轮：头部用户区 + 登录页 + 我的/后台 */
.hd-user{display:flex;align-items:center;gap:8px;flex:none;font-size:13.5px}
.hd-user a{color:var(--ink-2);padding:6px 10px;border-radius:8px;white-space:nowrap}
.hd-user a:hover{background:var(--bg-soft);color:var(--ink)}
.hd-user .hd-user-name{font-weight:600;color:var(--ink)}
.hd-user .hd-user-login{background:#111827;color:#fff;font-weight:500}
.hd-user .hd-user-login:hover{background:#111827;color:#fff;opacity:.88}
.auth-wrap{display:grid;place-items:center;padding:46px 0 30px}
.auth-card{width:min(430px,94vw)}
.auth-title{font-size:22px;margin-bottom:4px}
.auth-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:14px}
.auth-tabs{display:flex;gap:6px;margin-bottom:14px}
.auth-tabs a{padding:7px 16px;border-radius:9px;font-size:14px;color:var(--ink-2);background:var(--bg-soft)}
.auth-tabs a.on{background:#111827;color:#fff;font-weight:500}
.auth-form{display:flex;flex-direction:column;gap:11px}
.auth-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2)}
.auth-field input{
height:40px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
font-size:14.5px;background:#fff;color:var(--ink);
}
.auth-field input:focus{outline:2px solid rgba(79,70,229,.25);border-color:var(--indigo)}
.auth-btn{height:42px;font-size:15px}
.auth-msg{padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:12px}
.auth-msg.is-err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.auth-msg.is-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.auth-dim{font-size:12px;color:var(--ink-4)}
.my-wrap{padding-top:26px}
.my-panel{margin-top:16px;padding:16px 18px}
.my-empty{font-size:13.5px;color:var(--ink-3)}
.my-ops{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.my-del{display:inline}
/* ---------------- 通用 ---------------- */
.site-main{min-height:60vh;padding-bottom:60px}
.sec{padding:34px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.sec-head h2{font-size:21px}
.sec-head .sub{font-size:13px;color:var(--ink-3);margin-top:3px}
.sec-head .more{font-size:13.5px;color:var(--indigo);font-weight:600;flex:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.chip{
display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px;
border-radius:999px;background:var(--bg-soft);color:var(--ink-2);
font-size:12px;font-weight:500;white-space:nowrap;
}
.chip.on{background:#111827;color:#fff}
.chip-i{background:#eef2ff;color:#4338ca}
.chip-t{background:#e6f6f4;color:#0f766e}
.chip-a{background:#fdf4e3;color:#b45309}
.tag-lite{padding:2px 8px;border-radius:6px;background:var(--bg-soft);color:var(--ink-3);font-size:11.5px}
/* hidden 属性兜底：作者样式的 display 会压过 UA 的 [hidden]{display:none}，
导致 #[hidden] 元素（如 #gmNext）仍然可见。这条规则保证 hidden 始终生效。 */
[hidden]{display:none !important}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:38px;padding:0 18px;border-radius:10px;border:1px solid var(--line);
background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;
transition:.14s;font-family:inherit;
}
.btn:hover{border-color:#cbd5e1;background:#fafbfc}
.btn-primary{background:#111827;border-color:#111827;color:#fff}
.btn-primary:hover{background:#000;border-color:#000}
.btn-indigo{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn-indigo:hover{background:#4338ca;border-color:#4338ca}
.btn-sm{height:31px;padding:0 12px;font-size:13px;border-radius:8px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn-ghost:hover{background:var(--bg-soft);color:var(--ink);border-color:transparent}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed}
.ed-field input:disabled{background:#f1f3f7;color:var(--ink-4);cursor:not-allowed}
/* ---------------- hero ---------------- */
.hero{
background:
radial-gradient(900px 340px at 12% -10%,#e7e9ff 0%,transparent 60%),
radial-gradient(760px 320px at 88% 0%,#fdf1dc 0%,transparent 58%),
linear-gradient(#fff,#fbfbfe);
border-bottom:1px solid var(--line);
padding:54px 0 46px;
}
.hero h1{font-size:36px;letter-spacing:-1px;max-width:800px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#4f46e5,#0d9488 60%,#d97706);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:16px;color:var(--ink-2);max-width:680px;margin-top:14px}
.hero-stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.hero-stats .hs b{display:block;font-size:27px;letter-spacing:-1px;color:var(--ink)}
.hero-stats .hs span{font-size:12.5px;color:var(--ink-3)}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
/* ---------------- 模块卡片 ---------------- */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mod-card{
position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:.18s;
display:flex;flex-direction:column;
}
.mod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mod-card .mc-top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.mod-card .mc-ico{
width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
color:#fff;font-size:19px;font-weight:700;flex:none;
}
.mod-card h3{font-size:18px}
.mod-card .mc-sub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.mod-card p{font-size:13.5px;color:var(--ink-2);flex:1}
.mod-card .mc-foot{
display:flex;gap:14px;padding-top:14px;margin-top:6px;border-top:1px dashed var(--line);
font-size:12.5px;color:var(--ink-3);
}
.mod-card .mc-foot b{color:var(--ink);font-size:15px}
.mod-card .mc-bar{position:absolute;left:0;top:0;height:3px;width:100%}
.mc-arrow{position:absolute;right:20px;bottom:18px;opacity:.25;font-size:20px;transition:.18s}
.mod-card:hover .mc-arrow{opacity:1;transform:translateX(3px)}
/* ---------------- 课程卡 ---------------- */
.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lesson-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:18px;box-shadow:var(--shadow);transition:.16s;display:flex;flex-direction:column;gap:9px;
}
.lesson-card:hover{border-color:#c7cbd8;box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.lesson-card .lc-cat{font-size:11.5px;font-weight:600;letter-spacing:.3px}
.lesson-card h3{font-size:15.5px;line-height:1.5}
.lesson-card h3 a:hover{color:var(--indigo)}
.lesson-card .lc-sum{
font-size:13px;color:var(--ink-3);line-height:1.65;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lesson-card .lc-meta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-4);margin-top:auto;padding-top:4px}
.badge{display:inline-block;padding:1.5px 7px;border-radius:6px;font-size:11px;font-weight:600}
.badge.d1{background:#eaf7f0;color:#0f7a53}
.badge.d2{background:#eef2ff;color:#4338ca}
.badge.d3{background:#fdeaea;color:#b91c1c}
.badge.gold{background:#fdf4e3;color:#b45309}
/* ---------------- 筛选条 ---------------- */
.filter-bar{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:14px 16px;box-shadow:var(--shadow);margin-bottom:18px;
}
.filter-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.filter-row + .filter-row{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-2)}
.filter-label{font-size:12.5px;color:var(--ink-4);font-weight:600;min-width:52px;flex:none}
.search-box{display:flex;gap:8px;flex:1;min-width:260px}
.search-box input{
flex:1;height:38px;border:1px solid var(--line);border-radius:10px;padding:0 13px;
font-size:14px;font-family:inherit;background:#fbfbfd;color:var(--ink);outline:none;transition:.14s;
}
.search-box input:focus{border-color:var(--indigo);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.10)}
/* ---------------- 行业卡 ---------------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ind-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:15px;box-shadow:var(--shadow);transition:.16s;position:relative;overflow:hidden;
}
.ind-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#c7cbd8}
.ind-card .ic-dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;margin-bottom:9px}
.ind-card h4{font-size:14.5px}
.ind-card .ic-en{font-size:11px;color:var(--ink-4);margin:1px 0 6px;letter-spacing:.2px}
.ind-card p{font-size:12px;color:var(--ink-3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.ind-card .ic-n{font-size:12px;color:var(--ink-2);font-weight:600;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}
.ind-card .ic-n b{color:var(--amber);font-size:14px}
/* ---------------- 模板卡 ---------------- */
/* 结果区锚点：分类卡/筛选 chip 点击后直接落在这里，避开 64px 吸顶导航 */
.mm-anchor{display:block;height:0;scroll-margin-top:78px}
/* 同上，通用名（课程列表 / 侦探案情也用同一套机制，见 assets/js/anchor-pin.js） */
.pin-anchor{display:block;height:0;scroll-margin-top:78px}
/* 落点提示：带锚点跳过来时，落点那一行闪一下 */
.flash-row.is-flash{animation:mmFlash 1.5s ease-out 1}
.tpl-hint{color:var(--ink-4);font-size:12.5px}
/* 结果统计行（共找到 N 套模板） */
.tpl-stat{
display:flex;justify-content:space-between;align-items:center;
padding:8px 12px;margin:-8px -12px 6px;
font-size:13px;color:var(--ink-3);
scroll-margin-top:78px;border-radius:8px;
}
.tpl-stat.is-flash{animation:mmFlash 1.5s ease-out 1}
@keyframes mmFlash{
0%{background:rgba(99,102,241,.16);box-shadow:0 0 0 2px rgba(99,102,241,.22)}
60%{background:rgba(99,102,241,.07);box-shadow:0 0 0 2px rgba(99,102,241,0)}
100%{background:rgba(99,102,241,0);box-shadow:0 0 0 2px rgba(99,102,241,0)}
}
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tpl-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow);transition:.16s;display:flex;flex-direction:column;
}
.tpl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#c7cbd8}
.tpl-thumb{
height:132px;background:#fafbfd;border-bottom:1px solid var(--line-2);
display:grid;place-items:center;overflow:hidden;position:relative;
}
.tpl-thumb svg{max-width:100%;max-height:100%;display:block}
.tpl-thumb .tpl-empty{color:var(--ink-4);font-size:12px}
.tpl-body{padding:14px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.tpl-body h3{font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpl-body h3 a:hover{color:var(--amber)}
.tpl-tags{display:flex;gap:6px;flex-wrap:wrap}
.tpl-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-4);margin-top:auto;padding-top:8px;border-top:1px dashed var(--line-2)}
.scene-pill{position:absolute;left:10px;top:10px;background:rgba(17,24,39,.82);color:#fff;font-size:11px;padding:2.5px 9px;border-radius:999px;font-weight:500;backdrop-filter:blur(4px)}
.struct-pill{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.9);color:var(--ink-2);font-size:11px;padding:2.5px 9px;border-radius:999px;border:1px solid var(--line);font-weight:500}
/* ---------------- 分页 ---------------- */
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;margin:26px 0 0}
.pg{
min-width:36px;height:36px;padding:0 11px;border-radius:9px;border:1px solid var(--line);
background:#fff;display:inline-flex;align-items:center;justify-content:center;
font-size:13.5px;color:var(--ink-2);transition:.14s;font-weight:500;
}
.pg:hover{border-color:#c7cbd8;background:#fafbfc}
.pg-on{background:#111827;border-color:#111827;color:#fff}
.pg-gap{color:var(--ink-4);padding:0 2px}
.pg-info{margin-left:10px;font-size:12.5px;color:var(--ink-4)}
/* ---------------- 详情页 ---------------- */
.crumb{font-size:12.5px;color:var(--ink-4);padding:20px 0 0;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--indigo)}
.crumb .sp{color:#cbd5e1}
.detail-head{padding:16px 0 22px;border-bottom:1px solid var(--line)}
.detail-head h1{font-size:28px;letter-spacing:-.5px;max-width:900px}
.detail-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:13px;font-size:12.5px;color:var(--ink-3)}
.detail-body{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:30px 34px;box-shadow:var(--shadow);margin-top:22px;font-size:15.5px;line-height:1.85;color:var(--ink-2);
}
.detail-body h2{
font-size:18px;margin:26px 0 12px;padding-left:11px;border-left:4px solid var(--indigo);
color:var(--ink);line-height:1.3;
}
.detail-body h2:first-child{margin-top:0}
.detail-body h3{font-size:15.5px;margin:20px 0 8px;color:var(--ink)}
.detail-body p{margin:0 0 12px}
.detail-body ul,.detail-body ol{margin:0 0 14px;padding-left:22px}
.detail-body li{margin-bottom:6px}
.detail-body strong{color:var(--ink);font-weight:600}
.detail-body code{font-family:var(--mono);font-size:13.5px;background:var(--bg-soft);padding:2px 6px;border-radius:5px;color:#4338ca}
.detail-body .box{
background:#f8f9fd;border:1px solid var(--line);border-left:3px solid var(--indigo);
border-radius:8px;padding:14px 17px;margin:0 0 16px;font-size:14.5px;
}
.detail-body .box.warn{border-left-color:var(--amber);background:#fffaf0}
.detail-body .box.tip{border-left-color:var(--teal);background:#f2fbf9}
.detail-body .box .bt{font-weight:600;color:var(--ink);display:block;margin-bottom:5px;font-size:13.5px}
.detail-body table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.detail-body th,.detail-body td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.detail-body th{background:#f8f9fd;font-weight:600;color:var(--ink)}
.detail-body .fml{
font-family:var(--mono);background:#1e293b;color:#e2e8f0;padding:12px 16px;
border-radius:9px;margin:0 0 16px;font-size:13.5px;overflow-x:auto;
}
/* ---------------- 测验 ---------------- */
.quiz-wrap{margin-top:24px}
.quiz-item{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:20px 22px;box-shadow:var(--shadow);margin-bottom:14px;
}
.quiz-item .q-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:13px}
.quiz-item .q-no{
width:26px;height:26px;border-radius:8px;background:#111827;color:#fff;flex:none;
display:grid;place-items:center;font-size:12.5px;font-weight:700;margin-top:1px;
}
.quiz-item .q-stem{font-size:15px;font-weight:600;line-height:1.6;color:var(--ink)}
.q-opts{display:flex;flex-direction:column;gap:8px;margin-left:36px}
.q-opt{
display:flex;gap:10px;align-items:flex-start;padding:10px 13px;border:1px solid var(--line);
border-radius:10px;cursor:pointer;transition:.13s;font-size:14px;background:#fcfcfd;
}
.q-opt:hover{border-color:#bfc5d6;background:#f8f9fd}
.q-opt input{margin:5px 0 0;flex:none;accent-color:var(--indigo)}
.q-opt .qk{font-weight:700;color:var(--ink-3);flex:none;font-size:13.5px;min-width:15px}
.q-opt.right{border-color:#86d0a8;background:#f0fbf5}
.q-opt.right .qk{color:#0f7a53}
.q-opt.wrong{border-color:#f3b0b0;background:#fdf2f2}
.q-opt.wrong .qk{color:#b91c1c}
.q-opt.picked{box-shadow:0 0 0 2px rgba(79,70,229,.18)}
.q-analysis{
margin:12px 0 0 36px;padding:11px 14px;border-radius:9px;background:#f6f7fb;
border-left:3px solid var(--indigo);font-size:13.5px;color:var(--ink-2);display:none;
}
.q-analysis.show{display:block}
.q-analysis b{color:var(--ink)}
.quiz-bar{
position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
border:1px solid var(--line);border-radius:var(--radius);padding:14px 20px;
display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-lg);margin-top:18px;
}
.quiz-score{font-size:14px;color:var(--ink-2)}
.quiz-score b{font-size:22px;color:var(--indigo);letter-spacing:-.5px}
.quiz-score em{font-style:normal;color:var(--ink-4);font-size:13px}
/* ---------------- 导图渲染区 ---------------- */
.mm-stage{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);overflow:hidden;position:relative;
}
.mm-toolbar{
display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);
background:#fbfbfd;flex-wrap:wrap;
}
.mm-toolbar .tl-title{font-size:13.5px;font-weight:600;color:var(--ink-2);margin-right:auto}
.mm-viewport{
overflow:auto;background:
linear-gradient(90deg,rgba(148,163,184,.13) 1px,transparent 1px) 0 0/26px 26px,
linear-gradient(rgba(148,163,184,.13) 1px,transparent 1px) 0 0/26px 26px,
#fdfdff;
min-height:460px;max-height:78vh;position:relative;cursor:grab;
}
.mm-viewport.grabbing{cursor:grabbing}
/* 编辑器空画布提示（打开 / 「清空重来」后没有节点也没有形状时显示） */
.ed-empty-hint{position:absolute;left:0;right:0;top:16vh;padding:0 24px;text-align:center;color:var(--ink-4);font-size:13.5px;line-height:2.1;pointer-events:none;user-select:none}
#edCanvas{position:relative}
.ed-empty-hint b{display:block;font-size:16px;color:var(--ink-3);margin-bottom:4px;font-weight:700}
.mm-viewport.dragging-node{cursor:move}
.mm-viewport svg{display:block}
.mm-node{cursor:pointer}
.mm-node rect,.mm-node ellipse{transition:filter .15s}
.mm-node:hover rect,.mm-node:hover ellipse{filter:brightness(1.07) drop-shadow(0 3px 8px rgba(16,24,40,.18))}
/* 只有编辑器里的节点可以拖 */
.mm-editable .mm-node{cursor:grab}
.mm-editable .mm-node:active{cursor:grabbing}
.mm-editable.dragging-node .mm-node{cursor:move}
/* 双击就地改名用的浮层输入框 */
.mm-inline{
position:fixed;z-index:120;box-sizing:border-box;
border:2px solid var(--indigo);border-radius:9px;background:#fff;
padding:0 10px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);
box-shadow:0 10px 26px rgba(16,24,40,.22);outline:none;text-align:center;
}
/* 编辑器右下角轻提示 */
.ed-toast{
position:fixed;right:22px;bottom:22px;z-index:200;
max-width:60vw;padding:10px 16px;border-radius:10px;
background:rgba(17,24,39,.92);color:#fff;font-size:13px;line-height:1.5;
opacity:0;transform:translateY(10px);pointer-events:none;transition:.22s;
}
.ed-toast.is-show{opacity:1;transform:translateY(0)}
.mm-outline{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:18px;overflow:hidden}
.mm-outline .ol-head{padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;background:#fbfbfd;display:flex;justify-content:space-between;align-items:center}
.mm-outline .ol-body{padding:16px 20px;max-height:420px;overflow:auto}
.ol-tree{list-style:none;margin:0;padding-left:0;font-size:13.5px}
.ol-tree ul{list-style:none;margin:4px 0 4px 0;padding-left:19px;border-left:1px dashed var(--line)}
.ol-tree li{margin:3px 0;color:var(--ink-2)}
.ol-tree li > .ol-t{display:inline-block;padding:1px 7px;border-radius:6px;background:#f6f7fb}
.ol-tree li.lv1 > .ol-t{background:#111827;color:#fff;font-weight:600}
.ol-tree li.lv2 > .ol-t{background:#eef2ff;color:#4338ca;font-weight:500}
/* ---------------- 编辑器 ---------------- */
.ed-layout{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px;align-items:start}
/* 关键：grid 项默认 min-width:auto，画布放大后会把整列一起撑宽 ——
结果是页面横向变长、.mm-viewport 里反而出不来滚动条（放大看不到效果、也平移不了）。
给列设置 min-width:0，画布才会在固定大小的视口内滚动。 */
.ed-layout>*{min-width:0}
.mm-stage{min-width:0}
.mm-viewport{min-width:0}
.ed-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.ed-panel .ep-head{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;background:#fbfbfd;display:flex;justify-content:space-between;align-items:center}
.ed-panel .ep-body{padding:14px 16px;max-height:66vh;overflow:auto}
.ed-field{margin-bottom:13px}
.ed-field label{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600;margin-bottom:5px}
.ed-field input,.ed-field select,.ed-field textarea{
width:100%;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 12px;
font-size:14px;font-family:inherit;background:#fbfbfd;color:var(--ink);outline:none;
}
.ed-field textarea{height:auto;min-height:70px;padding:9px 12px;resize:vertical;line-height:1.6}
.ed-field input:focus,.ed-field select:focus,.ed-field textarea:focus{border-color:var(--indigo);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.10)}
.ed-hint{font-size:12px;color:var(--ink-4);line-height:1.7}
.kv-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line-2);border-radius:8px;margin-bottom:6px;font-size:13px;background:#fcfcfd;cursor:pointer}
.kv-row:hover{border-color:#c7cbd8;background:#f8f9fd}
.kv-row.on{border-color:var(--indigo);background:#f5f5ff}
.kv-row .kv-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv-row .kv-lv{font-size:11px;color:var(--ink-4);flex:none}
.kv-row .kv-x{color:var(--ink-4);font-size:14px;padding:0 3px;flex:none}
.kv-row .kv-x:hover{color:var(--red)}
/* ---------------- 编辑器：样式 / 形状工具栏 ---------------- */
.mm-toolbar-styles{background:#f7f8fc;border-bottom:1px solid var(--line)}
.mm-toolbar-styles:last-of-type{border-bottom:1px solid var(--line)}
.mm-toolbar-styles .tl-title{
font-size:13px;font-weight:600;color:var(--indigo);flex:none;
padding:3px 9px;border-radius:999px;background:#eef2ff;
}
.mm-toolbar .tl-field{
display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-3);font-weight:600;
}
.mm-toolbar .tl-field input[type=color]{
width:32px;height:26px;padding:1px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;
}
.mm-toolbar .tl-field input[type=number]{
width:62px;height:26px;padding:0 7px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit;
}
.mm-toolbar .tl-field input[type=text]{
height:26px;padding:0 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit;min-width:150px;
}
/* 「闭合填色」小开关（只在选中手绘笔迹时出现）：勾一下给笔迹圈出来的区域上色 */
.mm-toolbar .tl-field.tl-check{gap:4px;cursor:pointer;user-select:none;-webkit-user-select:none}
.mm-toolbar .tl-field.tl-check input[type=checkbox]{
width:15px;height:15px;margin:0;padding:0;accent-color:var(--indigo);cursor:pointer;
}
.ed-compact .mm-toolbar .tl-field.tl-check{font-size:11.5px;gap:3px}
.ed-compact .mm-toolbar .tl-field.tl-check input[type=checkbox]{width:14px;height:14px}
.mm-toolbar .tl-sel{
height:28px;padding:0 7px;border:1px solid var(--line);border-radius:7px;
font-size:12.5px;font-family:inherit;background:#fff;color:var(--ink);cursor:pointer;
}
/* 形状库下拉列表：宽一点，长长的分组名与图形名看得清 */
.mm-toolbar .tl-sel-lib{min-width:190px;max-width:260px}
.btn-xs{height:26px;padding:0 9px;font-size:12px;border-radius:7px}
.mm-toolbar .hint-inline{font-size:12px;color:var(--ink-4)}
/* 缩放百分比回显（当前不是 100% 时变紫，一眼能看出画布被缩放过） */
.zoom-val{
display:inline-flex;align-items:center;justify-content:center;
min-width:54px;height:26px;padding:0 8px;
font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:7px;
}
.zoom-val.is-fit{color:var(--indigo);border-color:#c7d2fe;background:#f5f3ff}
.ed-shape-panel{margin-top:16px;padding:14px 18px}
.ed-shape-panel .esp-head{font-size:13.5px;font-weight:600;margin-bottom:10px;display:flex;gap:8px;align-items:center}
.ed-shape-panel .esp-head .btn{margin-left:auto}
.ed-shape-panel .esp-head .dim{font-size:12px;color:var(--ink-4);font-weight:500}
.ed-shape-panel .esp-grid{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.ed-shape-panel .tl-field{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-3);font-weight:600}
.ed-shape-panel input[type=color]{width:32px;height:26px;padding:1px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer}
.ed-shape-panel input[type=number]{width:62px;height:26px;padding:0 7px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit}
.ed-shape-panel input[type=text]{height:28px;padding:0 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit;min-width:180px}
/* 「图形预览」面板现在放在 .mm-stage 里、工具栏正下方：抹掉卡片外框做成通栏条，
这样点开就在眼前，也不会和画布之间留出多余空隙 */
.mm-stage > .ed-shape-panel{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
/* ---------------- 编辑器：放大工作区（第九轮） ----------------
目标：把纵向空间尽量留给画布。手段 = 单列满宽 + 工具栏紧凑 + 长说明折叠。
实测（1440×900 窗口）：可见画布高度 183px → 586px。 */
.wrap-ed{max-width:1600px}
.ed-head{padding:12px 0 14px}
.ed-head h1{font-size:22px}
.ed-sub{margin:6px 0 0;font-size:13px;color:var(--ink-2);max-width:1180px;line-height:1.7}
.ed-details{margin-top:10px}
.ed-details > summary{
display:inline-block;list-style:none;cursor:pointer;
font-size:12.5px;font-weight:600;color:var(--indigo);
padding:4px 11px;border-radius:999px;background:#eef2ff;
}
.ed-details > summary::-webkit-details-marker{display:none}
.ed-details > summary::before{content:'▸ ';font-size:11px}
.ed-details[open] > summary::before{content:'▾ '}
.ed-details .ed-doc{
margin-top:10px;padding:12px 16px;border:1px solid var(--line);
border-radius:10px;background:#fbfbfd;font-size:13px;color:var(--ink-2);line-height:1.85;
}
.ed-doc p{margin:0 0 8px}
.ed-doc p:last-child{margin-bottom:0}
.ed-manual{margin-top:0;padding:14px 18px}
/* 分隔线（工具栏里分组用，替代原先的内联 span） */
.mm-toolbar .tl-sep{width:1px;height:16px;background:var(--line);margin:0 3px;flex:none}
/* 紧凑工具栏：字号 11.5px、控件高 22~24px —— 省的是纵向空间，功能一个不少 */
.ed-compact .mm-toolbar{padding:5px 10px;gap:5px 6px}
.ed-compact .mm-toolbar .tl-title{font-size:11.5px;padding:2px 8px;border-radius:999px;margin-right:0}
.ed-compact .mm-toolbar .tl-field{font-size:11.5px;gap:4px}
.ed-compact .mm-toolbar .tl-sel{height:24px;font-size:11.5px;padding:0 5px;border-radius:6px;max-width:200px}
.ed-compact .mm-toolbar .tl-sel-lib{min-width:168px;max-width:230px}
.ed-compact .mm-toolbar .tl-field input[type=color]{width:26px;height:22px;border-radius:6px}
.ed-compact .mm-toolbar .tl-field input[type=number]{width:54px;height:22px;font-size:11.5px;padding:0 5px;border-radius:6px}
.ed-compact .mm-toolbar .tl-field input[type=text]{height:22px;font-size:11.5px;min-width:118px;padding:0 7px;border-radius:6px}
.ed-compact #edTitle{width:170px}
/* 文本 / 备注用固定窄宽：input 的默认宽度约 173px（size=20），只给 min-width 根本压不下去。
⚠️ 上面 .mm-toolbar .tl-field input[type=text] 有一条 min-width:118px，
只改 width 压不下去 —— 这里必须连 min-width 一起归零。
第十四轮起画布左侧加了 56px 工具竖条，「当前节点」一行变窄 56px，控件同步收紧保证单行。 */
.ed-compact #edText,.ed-compact #edNote{width:80px;min-width:0}
.ed-compact #edNodeShape{max-width:92px}
.ed-compact #edNodeFontScale,.ed-compact #edNodeTextDir{max-width:76px}
.ed-compact #edNodeTag{max-width:64px}
.ed-compact #edNodeTag{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-compact .mm-toolbar .btn-xs{height:22px;padding:0 8px;font-size:11.5px;border-radius:6px}
/* 画笔闭合提示（第二十一轮）：笔尖画回起点附近时亮出，松手自动闭合成环 */
.ed-close-hint{
position:absolute;display:none;z-index:36;pointer-events:none;
transform:translate(-50%,-50%);padding:3px 10px 3px 26px;border-radius:999px;
background:rgba(79,70,229,.94);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;
box-shadow:0 0 0 4px rgba(79,70,229,.22);
}
.ed-close-hint::before{
content:'';position:absolute;left:8px;top:50%;width:11px;height:11px;margin-top:-5.5px;
border:2.5px solid #fff;border-radius:50%;box-sizing:border-box;
}
/* 第二十轮：加了「☁ 存云端 / ☁ 云导图」两个按钮后，视图与文件那一行（24 个子元素）会折成两行
（高 70px），不仅顶掉画布 32px 高度，还把画布往下推、连带影响触屏坐标类断言。
这里让普通工具栏行强制单行（`.mm-toolbar-styles` 允许折行），并收窄内边距；
万一窄屏真的放不下，就自身横向滚动（隐藏滚动条，不产生整页横向溢出）。 */
.mm-studio-main > .mm-toolbar:not(.mm-toolbar-styles){
flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.mm-studio-main > .mm-toolbar:not(.mm-toolbar-styles)::-webkit-scrollbar{height:0}
.mm-studio-main > .mm-toolbar:not(.mm-toolbar-styles) .btn-xs{padding:0 7px}
.ed-compact .mm-toolbar .zoom-val{height:22px;min-width:46px;font-size:11.5px;padding:0 6px;border-radius:6px}
.ed-compact .mm-toolbar .hint-inline{font-size:11.5px;margin-left:auto}
/* 编辑器里的画布要更高：跟着窗口高度走（工具栏 6 行约 210px，页面往下滚一点
就能让画布几乎占满整屏）。上限 1400 是为了超长屏不至于把画布拉成一条 */
.mm-viewport.mm-editable{min-height:0;max-height:none;height:clamp(520px, calc(100vh - 260px), 1400px)}
/* 选中形状后贴在它右上角的「删除」浮动角标 */
.mm-shape-del{
position:fixed;z-index:130;width:26px;height:26px;padding:0;
display:flex;align-items:center;justify-content:center;
border-radius:50%;border:1px solid #fecaca;background:#fff;color:#dc2626;
font-size:14px;line-height:1;font-weight:700;cursor:pointer;
/* ⚠️ 只过渡「视觉」属性：早先写 transition:.14s（= all）会把 left/top 一起补间，
角标被 placeDelFloat() 挪位后要「飞」140ms 才到位 —— 拖动形状时肉眼可见地掉队，
断言「角标贴在形状右上角外侧」也会立刻量到中途坐标而假失败。 */
box-shadow:0 4px 12px rgba(220,38,38,.22);
transition:background-color .14s,border-color .14s,color .14s,box-shadow .14s,transform .14s;
}
.mm-shape-del:hover{background:#dc2626;border-color:#dc2626;color:#fff;transform:scale(1.08)}
/* ---------------- 形状库 ---------------- */
.lib-body{max-height:430px;overflow:auto}
.lib-group{margin-bottom:13px}
.lib-gname{
display:flex;align-items:center;gap:6px;
font-size:12.5px;font-weight:700;color:var(--ink-3);
margin:0 0 8px;padding-left:8px;border-left:3px solid var(--indigo);
}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px}
.lib-item{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:9px 4px 6px;border:1px solid var(--line);border-radius:9px;
background:#fff;color:#64748b;cursor:pointer;font:inherit;
transition:border-color .15s,background .15s,color .15s,transform .1s;
}
.lib-item:hover{border-color:#a5b4fc;background:#f5f3ff;color:var(--indigo)}
.lib-item:active{transform:scale(.95)}
.lib-item svg{display:block;pointer-events:none}
.lib-item span{font-size:11px;line-height:1.2;color:var(--ink-3);white-space:nowrap}
.lib-item:hover span{color:var(--indigo)}
#edLibCount{font-size:12px;font-weight:500;color:var(--ink-4)}
/* ---------------- 形状库 / 素材库：二级展开下拉 ----------------
按钮在工具栏里，面板用绝对定位贴着这一行工具栏的下沿摊开：
左列大类、右列该类的图形。不用去算页面坐标，工具栏一变高它自己跟着走。 */
.mm-toolbar{position:relative}
.ed-libpick-btn{display:inline-flex;align-items:center;gap:5px}
.ed-libpick-btn i{font-style:normal;font-size:10px;color:var(--ink-4)}
.libpick{
position:absolute;left:0;top:calc(100% - 1px);z-index:60;
width:min(720px,100%);padding:10px 12px 12px;
background:#fff;border:1px solid var(--line);border-top:2px solid var(--indigo);
border-radius:0 0 10px 10px;box-shadow:0 18px 40px rgba(15,23,42,.16);
}
.libpick-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.libpick-find{
flex:0 0 210px;height:26px;padding:0 9px;font:inherit;font-size:12px;
border:1px solid var(--line);border-radius:7px;background:#fbfbfd;
}
.libpick-find:focus{outline:none;border-color:#a5b4fc;background:#fff}
.libpick-total{font-size:12px;color:var(--ink-4);margin-right:auto}
.libpick-body{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:start}
.libpick-cats{
display:flex;flex-direction:column;gap:3px;max-height:326px;overflow:auto;
padding-right:4px;border-right:1px solid var(--line);
}
.libpick-cat{
display:flex;align-items:center;gap:6px;width:100%;text-align:left;
padding:6px 8px;border:1px solid transparent;border-radius:7px;
background:transparent;color:var(--ink-2);font:inherit;font-size:12px;cursor:pointer;
transition:background .12s,color .12s;
}
.libpick-cat:hover{background:#f5f3ff;color:var(--indigo)}
.libpick-cat.on{background:#eef2ff;border-color:#c7d2fe;color:var(--indigo);font-weight:600}
.libpick-cat b{font-weight:inherit;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libpick-cat i{font-style:normal;font-size:10.5px;color:var(--ink-4)}
.libpick-cat.on i{color:var(--indigo)}
.libpick-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
gap:6px;max-height:326px;overflow:auto;
}
.libpick-grid .lib-item{padding:7px 3px 5px;border-radius:8px}
.libpick-grid .lib-item svg{width:24px;height:24px}
.libpick-empty{padding:30px 8px;text-align:center;font-size:12.5px;color:var(--ink-4)}
/* 「我的上传」面板：服务器上传库（upload.php）的文件列表 */
.ed-uploads-list{max-height:340px;overflow:auto;padding:2px 2px 0}
.ed-up-group{margin:6px 0 2px;font-size:12.5px;font-weight:700;color:var(--indigo)}
.ed-up-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px}
.ed-up-row:hover{background:#f8fafc}
.ed-up-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ed-up-size{font-size:11.5px;color:var(--ink-4);white-space:nowrap}
.ed-up-empty{padding:18px 8px;text-align:center;font-size:12.5px;color:var(--ink-4)}
/* 「图形预览」通栏右上角的库切换 */
/* 注意：.ed-shape-panel .esp-head .btn 上原来有 margin-left:auto（把唯一那颗按钮推到最右），
现在头部里有三颗按钮了，得把「切换组」里那两颗的 margin 清零，否则会被推得裂开。 */
.ed-shape-panel .esp-head .dim{margin-right:auto}
.lib-switch{display:inline-flex;margin-left:0}
.ed-shape-panel .esp-head .lib-switch .btn{margin-left:0}
.lib-switch .btn{border-radius:0}
.lib-switch .btn:first-child{border-radius:7px 0 0 7px}
.lib-switch .btn:last-child{border-radius:0 7px 7px 0;margin-left:-1px}
.lib-switch .btn.on{background:#eef2ff;border-color:#c7d2fe;color:var(--indigo);font-weight:600}
/* ---------------- 绘图工具行（选择 / 绘制 / 画笔 / 橡皮擦 + 复制粘贴） ----------------
与 .lib-switch 同构的分段按钮组；画笔的粗细用一个窄滑杆，别占太多横向空间。 */
.tool-switch{display:inline-flex;margin-left:0}
.tool-switch .btn{border-radius:0}
.tool-switch .btn:first-child{border-radius:7px 0 0 7px}
.tool-switch .btn:last-child{border-radius:0 7px 7px 0;margin-left:-1px}
.tool-switch .btn.on{background:#eef2ff;border-color:#c7d2fe;color:var(--indigo);font-weight:600}
.tl-range{width:76px;height:16px;vertical-align:middle;accent-color:var(--indigo)}
/* 工具模式下的光标反馈：一眼能看出「现在是在画，不是在选」 */
.mm-viewport.tool-draw{cursor:crosshair}
/* 画笔：光标就是「笔尖」——一个实心小圆点（内嵌 SVG 光标），画的过程中也只看得到笔尖 */
.mm-viewport.tool-pencil{cursor:url('data:image/svg+xml;utf8,') 9 9, crosshair}
/* 橡皮擦（第二十三轮）：原生 cell 十字不直观，光标隐藏、改用跟手圆圈 .ed-eraser-cur
（直径 = 真实擦除直径 22px）；子元素一律 none，防手柄 / 形状的 resize 光标冒出来。 */
.mm-viewport.tool-eraser{cursor:none}
.mm-viewport.tool-eraser *{cursor:none!important}
.ed-eraser-cur{
position:absolute;display:none;z-index:38;pointer-events:none;
width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);
border:2px solid #4f46e5;background:rgba(255,255,255,.5);
box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 1px 4px rgba(15,23,42,.25);
}
/* 涂抹上色（第十七轮）：光标就是一个跟着笔宽的圆点，涂多大一眼能看出来 */
.mm-viewport.tool-smear{cursor:url('data:image/svg+xml;utf8,') 14 14, crosshair}
.mm-viewport.tool-hand{cursor:grab}
.mm-viewport.tool-text{cursor:text}
/* ---------------- 第十四轮：PS 风格的左侧工具栏 + 工具选项 + 调色板 ----------------
结构：.mm-stage > .mm-studio >（.mm-rail 竖条 + .mm-studio-main 右侧整列）
.mm-studio-main 里还是原来那几行 .mm-toolbar，最后是 .mm-viewport。
左侧竖条铺满整个工作区高度（PS 的工具栏就是这个位置）。 */
.mm-studio{display:flex;align-items:stretch}
.mm-studio-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mm-rail{
flex:none;width:56px;padding:8px 0 12px;
background:#f7f8fc;border-right:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;gap:4px;
position:relative;overflow:auto;
}
.mm-rail-title{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-4);margin-bottom:1px}
.mm-rail-cap{font-size:10px;color:var(--ink-4);margin-top:-2px}
.mm-rail-sep{width:26px;height:1px;background:var(--line);margin:6px 0;flex:none}
.mm-rail-btn{
width:40px;height:36px;flex:none;padding:0;
display:flex;align-items:center;justify-content:center;
border:1px solid transparent;border-radius:10px;background:transparent;
color:var(--ink-2);cursor:pointer;transition:background .13s,color .13s,border-color .13s;
}
.mm-rail-btn svg{width:20px;height:20px;display:block;pointer-events:none}
.mm-rail-btn:hover{background:#eef2ff;color:var(--indigo)}
.mm-rail-btn.on{background:#e8eafe;border-color:#c7d2fe;color:var(--indigo);box-shadow:0 1px 2px rgba(79,70,229,.12)}
/* 上色色块：两个叠在一起的小方块（前面填充、后面描边），PS 的取色块一个意思 */
.mm-rail-swatch{
position:relative;width:40px;height:38px;flex:none;padding:0;
border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;
}
.mm-rail-swatch:hover{background:#eef2ff;border-color:#c7d2fe}
.mm-rail-swatch .mm-sw-line{
position:absolute;left:16px;top:13px;width:19px;height:19px;border-radius:6px;
background:#fff;border:2px solid #cbd5e1;z-index:1;
}
.mm-rail-swatch .mm-sw-fill{
position:absolute;left:5px;top:5px;width:19px;height:19px;border-radius:6px;
background:#e2e8f0;box-shadow:inset 0 0 0 1px rgba(15,23,42,.28);z-index:2;
}
/* 工具选项：一次只显示当前工具那一组（用 .on 控制，别用 [hidden]——作者样式会把它压掉） */
.opt-grp{display:none;align-items:center;gap:5px 6px;flex-wrap:wrap;min-width:0}
.opt-grp.on{display:inline-flex}
/* 调色板（上色）弹层：fixed 定位，避让视口边缘由脚本算 */
.mm-colorpop{
position:fixed;z-index:9998;width:252px;padding:10px 11px 11px;
background:#fff;border:1px solid var(--line);border-radius:12px;
box-shadow:0 18px 42px rgba(15,23,42,.2);
}
.mm-colorpop .cp-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mm-colorpop .cp-head b{font-size:13px;color:var(--ink)}
.mm-colorpop .cp-tip{flex:1;font-size:11.5px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-colorpop .cp-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mm-colorpop .cp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:9px 0}
.mm-colorpop .cp-foot{border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.cp-dot{
width:100%;aspect-ratio:1/1;padding:0;border-radius:6px;cursor:pointer;
border:1px solid rgba(15,23,42,.16);transition:transform .1s;
}
.cp-dot:hover{transform:scale(1.14)}
/* 第十八轮：调色板「部位上色」行 + 「渐变填充」行 */
.mm-colorpop .cp-lbl{font-size:11px;color:var(--ink-4);margin:8px 0 5px}
.mm-colorpop .cp-lbl2{font-size:11px;color:var(--ink-4)}
.mm-colorpop #edCharParts{margin:8px 0 2px;padding-top:8px;border-top:1px solid var(--line)}
.mm-colorpop .cp-grads{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:2px 0 8px}
.mm-colorpop .cp-grad{
height:22px;padding:0;border-radius:6px;cursor:pointer;
border:1px solid rgba(15,23,42,.18);transition:transform .1s;
}
.mm-colorpop .cp-grad:hover{transform:scale(1.12)}
.mm-chip{
height:22px;padding:0 9px;font-family:inherit;font-size:11.5px;
border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-3);cursor:pointer;
}
.mm-chip:hover{border-color:#a5b4fc;color:var(--indigo)}
.mm-chip.on{background:#eef2ff;border-color:#c7d2fe;color:var(--indigo);font-weight:600}
/* 形状右键菜单里的「上色」色点行 */
.mm-ctx-lbl{padding:5px 9px 3px;font-size:11.5px;color:var(--ink-4)}
.mm-ctx-colors{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;padding:0 8px 4px}
.mm-ctx-dot{
width:100%;aspect-ratio:1/1;padding:0;border-radius:5px;cursor:pointer;
border:1px solid rgba(15,23,42,.16);transition:transform .1s;
}
.mm-ctx-dot:hover{transform:scale(1.15);border-color:var(--indigo)}
/* ---------------- 触屏 / 平板：画布自己处理手势，别让浏览器抢走 ----------------
touch-action:none 之后，手指在画布上的拖动不会再去滚页面 / 缩放页面，
而是走 mm-editor.js 里的「触摸桥」翻译成鼠标事件（画、拖、拉手柄、长按右键）。
触控设备上把工具栏按钮放大到接近 44px 的可点尺寸。 */
.mm-viewport.mm-editable{touch-action:none;-webkit-user-select:none;user-select:none}
.mm-editable .mm-node,.mm-editable .mm-shape,.mm-editable .mm-shape-handle{
touch-action:none;-webkit-tap-highlight-color:transparent;
}
@media (pointer:coarse){
.mm-rail{width:62px}
.mm-rail-btn{width:46px;height:42px}
.mm-rail-btn svg{width:22px;height:22px}
.ed-compact .mm-toolbar .btn-xs{height:27px;padding:0 10px}
.mm-shape-del{width:32px;height:32px;font-size:16px}
}
/* ---------------- 画布右键菜单 ---------------- */
.mm-ctx{
position:fixed;z-index:9999;min-width:190px;
padding:5px;background:#fff;border:1px solid var(--line);border-radius:10px;
box-shadow:0 14px 34px rgba(15,23,42,.18);font-size:13px;
}
.mm-ctx-title{
padding:6px 9px 7px;font-size:12px;color:var(--ink-3);
border-bottom:1px solid var(--line);margin-bottom:4px;
max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mm-ctx-item{
display:flex;align-items:center;gap:8px;width:100%;
padding:7px 9px;border:0;border-radius:6px;background:none;
color:var(--ink-2);cursor:pointer;font:inherit;text-align:left;
}
.mm-ctx-item:hover{background:#f1f5f9;color:var(--ink)}
.mm-ctx-item.is-danger{color:#b91c1c}
.mm-ctx-item.is-danger:hover{background:#fef2f2}
.mm-ctx-item[disabled]{opacity:.4;cursor:default}
.mm-ctx-item[disabled]:hover{background:none;color:var(--ink-2)}
.mm-ctx-sep{height:1px;background:var(--line);margin:4px 2px}
.mm-ctx kbd{
margin-left:auto;font-size:10.5px;color:var(--ink-3);
background:#f8fafc;border:1px solid var(--line);border-radius:4px;padding:1px 4px;
}
/* 画布上的独立形状 */
.mm-editable .mm-shape{cursor:move}
.mm-editable.dragging-shape .mm-shape{cursor:move}
/* 选中框本身不吃鼠标事件（否则框住的地方就拖不动形状了），
但四个角/四边的缩放手柄要能按住 —— 所以只让虚线框 pointer-events:none。 */
.mm-shape-sel .mm-shape-frame{pointer-events:none}
.mm-shape-handle{pointer-events:all}
.mm-shape-handle:hover{fill:#4f46e5}
.mm-h-nw,.mm-h-se{cursor:nwse-resize}
.mm-h-ne,.mm-h-sw{cursor:nesw-resize}
.mm-h-n,.mm-h-s{cursor:ns-resize}
.mm-h-e,.mm-h-w{cursor:ew-resize}
/* ---------------- 空状态 ---------------- */
.empty{
text-align:center;padding:70px 20px;color:var(--ink-3);
background:#fff;border:1px dashed var(--line);border-radius:var(--radius);
}
.empty .em-ico{font-size:40px;margin-bottom:12px;opacity:.5}
.empty h3{font-size:16px;margin-bottom:6px;color:var(--ink-2)}
.empty p{font-size:13.5px;margin-bottom:16px}
/* ---------------- footer ---------------- */
.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:60px}
.ft-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:30px;padding:40px 22px 26px}
.ft-col h4{font-size:13.5px;margin-bottom:11px;color:var(--ink)}
.ft-col a{display:block;font-size:13px;color:var(--ink-3);margin-bottom:7px;transition:.13s}
.ft-col a:hover{color:var(--indigo)}
.ft-col p{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.ft-dim{color:var(--ink-4)!important;font-size:12px!important;margin-top:8px}
.ft-bottom{
border-top:1px solid var(--line-2);padding:14px 22px;display:flex;justify-content:space-between;
font-size:12px;color:var(--ink-4);
}
/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
.ind-grid{grid-template-columns:repeat(3,1fr)}
.ft-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.mod-grid,.lesson-grid,.tpl-grid{grid-template-columns:repeat(2,1fr)}
.hd-stat{display:none}
.ed-layout{grid-template-columns:1fr}
.detail-2col{grid-template-columns:1fr!important}
}
/* ===========================================================
思维导图：分类体系（结构形式 / 用途场景）
=========================================================== */
/* chip 内的小圆点（标记结构色 / 用途色） */
.cdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:0;flex:none}
/* ---- 6 种结构形式卡片 ---- */
.struct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.struct-card{
display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);transition:.16s;
}
.struct-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#c7cbd8}
.sc-ico{width:98px;height:64px;flex:none;border-radius:11px;display:grid;place-items:center}
.sc-ico svg{width:80px;height:52px}
.sc-body{flex:1;min-width:0}
.sc-body h4{font-size:15px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sc-dot{width:8px;height:8px;border-radius:50%;flex:none}
.sc-en{font-style:normal;font-size:10.5px;color:var(--ink-4);letter-spacing:.3px;font-weight:500}
.sc-body p{font-size:12.5px;color:var(--ink-3);line-height:1.62;margin:6px 0 8px}
.sc-meta{font-size:11.5px;color:var(--ink-4)}
.sc-meta b{color:var(--ink-2);font-size:13px}
/* ---- 4 类用途场景卡片 ---- */
.uc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.uc-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:16px 18px;box-shadow:var(--shadow);transition:.16s;
border-top:3px solid var(--uc,#4f46e5);
}
.uc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#c7cbd8}
.uc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.uc-head b{font-size:15px;color:var(--uc,#4f46e5)}
.uc-head span{font-size:11.5px;color:var(--ink-4)}
.uc-card p{font-size:12.5px;color:var(--ink-3);line-height:1.62;margin:8px 0 10px;min-height:40px}
.uc-tags{display:flex;flex-wrap:wrap;gap:5px}
.uc-tag{font-size:11px;padding:1.5px 7px;border-radius:6px;background:var(--bg-soft);color:var(--ink-3)}
/* ---- 详情页：结构形式说明卡 ---- */
.struct-note{border-left:3px solid var(--indigo);padding:2px 0 2px 13px}
.sn-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.sn-badge{font-size:12px;font-weight:600;padding:2px 9px;border-radius:7px}
.sn-en{font-size:11px;color:var(--ink-4);letter-spacing:.3px}
.struct-note p{font-size:13px;color:var(--ink-2);line-height:1.7;margin:0 0 6px}
.sn-best{font-size:12px;color:var(--ink-3)}
.btn.is-off{opacity:.5}
@media (max-width:1080px){
.struct-grid{grid-template-columns:repeat(2,1fr)}
.uc-grid{grid-template-columns:repeat(2,1fr)}
.ind-grid{grid-template-columns:repeat(3,1fr)}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.ft-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.mod-grid,.lesson-grid,.tpl-grid{grid-template-columns:repeat(2,1fr)}
.hd-stat{display:none}
.ed-layout{grid-template-columns:1fr}
.detail-2col{grid-template-columns:1fr!important}
}
@media (max-width:660px){
.mod-grid,.lesson-grid,.tpl-grid,.ind-grid,.stat-grid{grid-template-columns:1fr}
.struct-grid,.uc-grid{grid-template-columns:1fr}
.hero h1{font-size:26px}
.main-nav{overflow-x:auto}
.brand-text i{display:none}
.ft-inner{grid-template-columns:1fr}
.detail-body{padding:22px 18px}
.bar-item{grid-template-columns:100px 1fr 60px}
}
/* ==========================================================================
章节小故事卡（module.php / lesson.php）
========================================================================== */
.story-card{
background:linear-gradient(180deg,#fffdf6,#fff8ea);
border:1px solid #f3e3c3;border-left:4px solid var(--amber);
border-radius:var(--radius);padding:18px 20px;margin:18px 0 20px;box-shadow:var(--shadow);
}
.story-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.story-ico{font-size:20px;line-height:1}
.story-title{font-size:15.5px;font-weight:700;color:#8a5a00}
.story-tag{
margin-left:auto;font-size:11.5px;font-weight:600;color:#fff;background:var(--amber);
padding:3px 9px;border-radius:999px
}
.story-body{font-size:14.5px;line-height:1.95;color:var(--ink-2);text-indent:2em;margin:0}
.story-foot{margin-top:11px;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.story-foot .sf-dot{color:var(--ink-4)}
.story-card.is-tight{padding:14px 16px;margin:14px 0 16px}
.ic-story{
display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:#8a5a00;
background:#fff4dd;border-radius:999px;padding:2px 8px
}
/* 首页小游戏入口条 */
.gm-home{
display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
padding:24px 28px;background:linear-gradient(135deg,#fff7ed,#eef2ff 60%,#fdf4ff);
border:1px solid #e6e4f7
}
.gm-home-txt{max-width:660px}
.gm-home-txt h2{font-size:19px;margin:0 0 8px}
.gm-home-txt p{font-size:14px;margin:0;line-height:1.85}
.gm-home-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.gm-home-cta{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:660px){
.gm-home{padding:20px 18px}
.gm-home-cta{width:100%}
.gm-home-cta .btn{flex:1;text-align:center}
}
/* ==========================================================================
练习小游戏「思维小侦探」（game.php）
========================================================================== */
.gm-hero{
display:grid;grid-template-columns:1.35fr .65fr;gap:20px;align-items:stretch;
background:linear-gradient(135deg,#eef2ff,#fdf4ff 55%,#fff7ed);
border:1px solid #e6e4f7;border-radius:18px;padding:26px 28px;margin-top:8px
}
.gm-hero h1{font-size:31px;margin:0 0 10px;letter-spacing:-.4px}
.gm-hero-emoji{font-size:27px;vertical-align:2px}
.gm-hero-txt p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-2);max-width:620px}
.gm-hero-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.gm-tag{
background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;
font-size:12.5px;color:var(--ink-2);box-shadow:0 1px 2px rgba(16,24,40,.04)
}
.gm-tag b{color:var(--ink);margin-left:3px}
.gm-hero-card{
background:#fff;border-radius:var(--radius);border:1px solid var(--line);
padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;gap:9px
}
.ghc-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-3)}
.ghc-v{font-weight:700;color:var(--ink)}
.ghc-tip{font-size:12px;color:var(--amber);background:#fff8ea;border-radius:8px;padding:7px 10px;margin-top:2px;text-align:center}
.gm-panel{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:22px 24px;margin-top:20px;box-shadow:var(--shadow)
}
.gm-h2{font-size:17px;margin:0 0 16px}
.gm-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.gm-mode{
text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
padding:15px 15px 13px;cursor:pointer;display:flex;flex-direction:column;gap:6px;
transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;font:inherit
}
.gm-mode:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gm-mode.on{border-color:var(--gmc);box-shadow:0 0 0 3px rgba(99,102,241,.16),var(--shadow)}
.gm-mode-ico{font-size:24px;line-height:1}
.gm-mode-name{font-size:15px;font-weight:700;color:var(--ink)}
.gm-mode-desc{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.gm-mode-n{font-size:11.5px;color:var(--gmc);font-weight:700;margin-top:2px}
.gm-big{display:block;width:100%;max-width:340px;margin:18px auto 0;text-align:center;padding:13px 20px;font-size:15.5px}
.gm-note{text-align:center;font-size:12.5px;color:var(--ink-4);margin:11px 0 0}
.gm-hud{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:13px}
.gm-hud-item{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--ink-3)}
.gm-hud-v{font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.gm-hud-v b{font-size:18px}
.gm-hud-mode{margin-left:auto;font-weight:700;color:var(--indigo)}
.gm-progress{height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden}
.gm-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--violet));border-radius:999px;transition:width .3s ease}
.gm-timer{height:5px;border-radius:999px;background:var(--line-2);overflow:hidden;margin-top:8px}
.gm-timer i{display:block;height:100%;background:var(--teal);border-radius:999px;transition:width .1s linear}
.gm-timer i.is-warn{background:var(--red)}
.gm-q{margin-top:20px}
.gm-q-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.gm-q-emoji{font-size:27px;line-height:1}
.gm-q-level{font-size:12px;font-weight:700;color:var(--ink-3);background:var(--bg-soft);padding:3px 10px;border-radius:999px}
.gm-q-stem{font-size:20px;line-height:1.7;margin:0 0 18px;letter-spacing:.2px}
.gm-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.gm-opt{
display:flex;align-items:center;gap:11px;text-align:left;font:inherit;cursor:pointer;
background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;
transition:transform .12s ease,border-color .12s ease,background .12s ease
}
.gm-opt:hover:not(:disabled){transform:translateY(-2px);border-color:#c7ccd8}
.gm-opt:disabled{cursor:default}
.gm-opt-k{
flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--bg-soft);color:var(--ink-3);
display:grid;place-items:center;font-size:12.5px;font-weight:700
}
.gm-opt-t{font-size:15px;color:var(--ink);line-height:1.5}
.gm-opt.is-right{background:#eafaf1;border-color:#7ed3a6}
.gm-opt.is-right .gm-opt-k{background:var(--green);color:#fff}
.gm-opt.is-wrong{background:#fdeeee;border-color:#f0a6a6}
.gm-opt.is-wrong .gm-opt-k{background:var(--red);color:#fff}
.gm-feedback{margin-top:15px;border-radius:12px;padding:13px 16px;font-size:14px;line-height:1.8}
.gm-feedback.is-ok{background:#eafaf1;border:1px solid #b7e8cd;color:#0f5132}
.gm-feedback.is-no{background:#fff8ea;border:1px solid #f3e3c3;color:#7a4f00}
.gm-fb-title{font-weight:700;margin-bottom:5px}
.gm-fb-hint{font-size:13.5px;opacity:.92}
.gm-q-foot{display:flex;gap:11px;align-items:center;margin-top:17px}
.gm-q-foot .btn{padding:10px 20px}
.gm-stars{font-size:44px;letter-spacing:7px;text-align:center;color:#f0b429;margin:6px 0 4px;animation:gmPop .5s ease}
.gm-stars.s0{color:#cbd5e1}
.gm-res-title{text-align:center;font-size:22px;margin:6px 0 6px}
.gm-res-sub{text-align:center;font-size:14px;color:var(--ink-3);margin:0 0 20px}
.gm-res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:660px;margin:0 auto}
.gm-res-box{
background:var(--bg-soft);border-radius:var(--radius-sm);padding:14px 10px;text-align:center;
display:flex;flex-direction:column;gap:4px
}
.gm-res-box b{font-size:21px;color:var(--ink)}
.gm-res-box span{font-size:12px;color:var(--ink-3)}
.gm-res-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.gm-res-btns .gm-big{margin:0;width:auto;min-width:190px}
.gm-pop{
position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);
font-size:34px;font-weight:800;pointer-events:none;z-index:60
}
.gm-pop.is-show{animation:gmPop .8s ease forwards}
.gm-pop.is-good{color:var(--green)}
.gm-pop.is-bad{color:var(--amber)}
@keyframes gmPop{
0%{opacity:0;transform:translate(-50%,-35%) scale(.7)}
35%{opacity:1;transform:translate(-50%,-52%) scale(1.08)}
100%{opacity:0;transform:translate(-50%,-72%) scale(1)}
}
@media (max-width:1080px){
.gm-hero{grid-template-columns:1fr}
.gm-modes{grid-template-columns:repeat(2,1fr)}
.gm-opts{grid-template-columns:1fr}
}
@media (max-width:660px){
.gm-hero{padding:20px 18px}
.gm-hero h1{font-size:25px}
.gm-modes{grid-template-columns:1fr}
.gm-res-grid{grid-template-columns:repeat(2,1fr)}
.gm-q-stem{font-size:17.5px}
.gm-panel{padding:18px 16px}
.gm-hud{gap:14px}
.gm-hud-mode{margin-left:0}
}
/* ==========================================================================
智力闯关 / 智力测评（game.php、iqtest.php）
========================================================================== */
.gm-modes-11{grid-template-columns:repeat(5,1fr)}
.gm-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.gm-filter-k{font-size:13px;font-weight:700;color:var(--ink-3)}
.gm-chips{display:flex;gap:8px;flex-wrap:wrap}
.gm-chip{
font:inherit;font-size:13px;cursor:pointer;background:#fff;color:var(--ink-2);
border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;
transition:border-color .12s ease,background .12s ease,color .12s ease
}
.gm-chip:hover{border-color:#c7ccd8}
.gm-chip.on{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:700}
.gm-q-style{font-size:11.5px;color:var(--ink-4);margin-left:auto;text-align:right}
.gm-fig{
display:flex;justify-content:center;align-items:center;
background:#fbfcfe;border:1px solid var(--line-2);border-radius:12px;
padding:14px 10px;margin:0 0 18px;overflow-x:auto
}
.gm-fig svg{display:block}
.gm-opts.is-fig{grid-template-columns:repeat(4,1fr)}
.gm-opt-fig{display:flex;align-items:center;justify-content:center;width:100%;padding:4px 0}
.gm-opt-fig svg{display:block}
.gm-opt.on{border-color:var(--indigo);background:#eef2ff;box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.gm-opt.on .gm-opt-k{background:var(--indigo);color:#fff}
.gm-hud-v.is-warn{color:var(--red)}
/* ---- 测评：说明 ---- */
.it-note{display:flex;flex-direction:column;gap:11px;margin:0 0 18px}
.it-note p{
margin:0;font-size:14px;line-height:1.9;color:var(--ink-2);
background:var(--bg-soft);border-radius:10px;padding:13px 16px
}
.it-note b{color:var(--ink)}
/* ---- 测评：瑞文式卷型选择卡（第十六轮） ---- */
.it-papers{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.it-paper{
flex:1 1 150px;min-width:150px;display:flex;flex-direction:column;gap:4px;
padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
text-decoration:none;transition:all .13s ease
}
.it-paper b{font-size:13.5px;color:var(--ink)}
.it-paper span{font-size:12px;color:var(--ink-3);line-height:1.5}
.it-paper:hover{border-color:#c7ccd8;transform:translateY(-1px)}
.it-paper.on{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.it-paper.on b{color:var(--indigo)}
/* ---- 测评：答题卡 ---- */
.it-sheet{
margin-top:20px;background:var(--bg-soft);border-radius:12px;padding:13px 16px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
.it-sheet-k{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.it-sheet-grid{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.it-sheet-mod{
font-size:11.5px;font-weight:700;color:var(--indigo);
background:rgba(99,102,241,.09);border-radius:6px;padding:3px 8px;margin-left:8px
}
.it-sheet-mod:first-child{margin-left:0}
.it-cell{
font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);
background:#fff;color:var(--ink-4);transition:all .12s ease
}
.it-cell:hover{border-color:#c7ccd8}
.it-cell.is-done{background:var(--indigo);border-color:var(--indigo);color:#fff}
.it-cell.is-cur{box-shadow:0 0 0 3px rgba(99,102,241,.22)}
/* ---- 测评：结果 ---- */
.it-score-wrap{
display:flex;align-items:center;gap:24px;flex-wrap:wrap;
background:linear-gradient(135deg,#eef2ff,#fdf4ff 60%,#fff7ed);
border:1px solid #e6e4f7;border-radius:16px;padding:20px 24px
}
.it-score{display:flex;align-items:baseline;gap:5px}
.it-score b{font-size:52px;line-height:1;font-weight:800;color:var(--indigo);letter-spacing:-2px}
.it-score span{font-size:17px;color:var(--ink-3);font-weight:700}
.it-score-side{flex:1;min-width:240px}
.it-score-side .gm-res-title{text-align:left;margin:0 0 6px}
.it-score-side .gm-res-sub{text-align:left;margin:0}
.it-h3{font-size:16px;margin:26px 0 12px}
.it-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.it-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.it-table th{
text-align:left;font-size:12.5px;font-weight:700;color:var(--ink-3);
background:var(--bg-soft);padding:10px 14px;white-space:nowrap
}
.it-table td{padding:10px 14px;border-top:1px solid var(--line-2);color:var(--ink)}
.it-table td.it-td-dim{color:var(--ink-4);font-size:12.5px}
.it-table tbody tr:hover{background:#fafbfd}
.it-review{display:flex;flex-direction:column;gap:14px}
.it-rc{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:#fff}
.it-rc.is-ok{border-left:4px solid var(--green)}
.it-rc.is-no{border-left:4px solid var(--red)}
.it-rc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.it-rc-n{font-size:13.5px;font-weight:800;color:var(--ink)}
.it-rc-cat{font-size:12px;color:var(--ink-3);background:var(--bg-soft);padding:3px 10px;border-radius:999px}
.it-rc-tag{font-size:12px;font-weight:700;margin-left:auto}
.it-rc-tag.ok{color:var(--green)}
.it-rc-tag.no{color:var(--red)}
.it-rc-stem{font-size:15px;line-height:1.75;color:var(--ink);margin-bottom:10px}
.it-rc-fig{display:flex;justify-content:center;padding:8px 0 12px;overflow-x:auto}
.it-rc-fig svg{display:block}
.it-rc-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
.it-rc-opts.is-fig{grid-template-columns:repeat(4,1fr)}
.it-rc-opt{
font-size:13.5px;color:var(--ink-2);background:#fafbfd;border:1px solid var(--line-2);
border-radius:9px;padding:8px 12px;display:flex;align-items:center;gap:6px
}
.it-rc-opt b{color:var(--ink-3);flex:0 0 auto}
.it-rc-opt.is-right{background:#eafaf1;border-color:#7ed3a6;color:#0f5132;font-weight:700}
.it-rc-opt.is-wrong{background:#fdeeee;border-color:#f0a6a6;color:#8b1d1d}
.it-rc-fig-inline{display:flex;align-items:center}
.it-rc-fig-inline svg{display:block}
.it-rc-why{
font-size:13.5px;line-height:1.85;color:#4b5563;background:var(--bg-soft);
border-radius:9px;padding:11px 14px
}
@media (max-width:1080px){
.gm-modes-11{grid-template-columns:repeat(3,1fr)}
.gm-opts.is-fig{grid-template-columns:repeat(2,1fr)}
.it-rc-opts.is-fig{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:660px){
.gm-modes-11{grid-template-columns:1fr}
.gm-q-style{margin-left:0;width:100%;text-align:left}
.it-score b{font-size:40px}
.it-rc-opts{grid-template-columns:1fr}
}
/* ===========================================================
思维小侦探（逻辑学 · 案情推理）
=========================================================== */
.dt-hero{
display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
background:linear-gradient(135deg,#eef2ff,#f5f3ff 55%,#fff);
border:1px solid var(--line);border-radius:var(--radius);
padding:26px 28px;margin-top:20px;box-shadow:var(--shadow);
}
.dt-hero h1{font-size:31px;margin:0 0 10px;letter-spacing:-.4px}
.dt-hero-txt p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-2);max-width:640px}
/* ---- 案件选择 ---- */
.dt-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dt-case{
display:flex;gap:11px;align-items:center;padding:12px 14px;
background:var(--card);border:1px solid var(--line);border-radius:11px;
transition:.16s;color:inherit;
}
.dt-case:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#c7cbd8}
.dt-case.on{border-color:var(--indigo);background:#f5f7ff;box-shadow:0 0 0 2px rgba(99,102,241,.14)}
.dtc-ico{font-size:19px;flex:none}
.dtc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dtc-body b{font-size:13.5px;font-weight:600;color:var(--ink)}
.dtc-body i{font-style:normal;font-size:11.5px;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtc-n{font-size:11.5px;color:var(--ink-3);flex:none}
/* ---- 案情 ---- */
.dt-brief{margin-top:20px;padding:20px 24px}
.dtb-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dtb-badge{
font-size:11.5px;font-weight:700;letter-spacing:.5px;color:#fff;background:var(--indigo);
border-radius:6px;padding:3px 9px;flex:none;
}
.dtb-head h2{font-size:19px;margin:0}
.dtb-text{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin:0}
.dtb-terms{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.dtb-k{font-size:12px;color:var(--ink-4);margin-right:2px}
.dtb-chip{
font-size:12px;color:var(--indigo);background:#eef2ff;border:1px solid #dbe2fe;
border-radius:999px;padding:2.5px 11px;
}
/* ---- 进度 ---- */
.dt-hud{
display:flex;gap:12px;align-items:center;flex-wrap:wrap;
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:12px 16px;box-shadow:var(--shadow);margin-bottom:16px;font-size:13px;color:var(--ink-3);
}
.dt-hud-k{color:var(--ink-4);font-size:12px}
.dt-hud-v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dt-hud-bar{flex:1;min-width:120px;height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden}
.dt-hud-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width .35s}
/* ---- 关卡 ---- */
.dt-steps{display:flex;flex-direction:column;gap:14px}
.dt-step{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:18px 22px;box-shadow:var(--shadow);transition:.18s;
}
.dt-step.is-right{border-color:#a7e0c2;background:#fbfffd}
.dt-step.is-wrong{border-color:#f0c2c2;background:#fffbfb}
.dts-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.dts-no{font-size:12px;font-weight:700;color:var(--indigo);background:#eef2ff;border-radius:6px;padding:2.5px 9px}
.dts-state{font-size:11.5px;color:var(--ink-4);margin-left:auto}
.dts-state[data-state=right]{color:#0f8a53;font-weight:700}
.dts-state[data-state=wrong]{color:#b91c1c;font-weight:700}
.dts-q{font-size:14.5px;line-height:1.8;color:var(--ink);margin-bottom:13px}
.dts-opts{display:flex;flex-direction:column;gap:9px}
.dt-opt{
display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
font:inherit;font-size:14px;line-height:1.7;color:var(--ink-2);
background:#fff;border:1px solid var(--line);border-radius:10px;
padding:10px 14px;cursor:pointer;transition:.15s;
}
.dt-opt:hover:not(:disabled){border-color:#c7cbd8;background:#fafbff}
.dt-opt:disabled{cursor:default}
.dto-k{
flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
font-size:12px;font-weight:700;background:var(--bg-soft);color:var(--ink-3);margin-top:1px;
}
.dto-t{flex:1;min-width:0}
.dt-opt.right{border-color:#7ed3a6;background:#eafaf1;color:#0f5132;font-weight:600}
.dt-opt.right .dto-k{background:#7ed3a6;color:#fff}
.dt-opt.wrong{border-color:#f0a6a6;background:#fdeeee;color:#8b1d1d}
.dt-opt.wrong .dto-k{background:#f0a6a6;color:#fff}
.dts-why{
margin-top:13px;font-size:13.5px;line-height:1.85;color:#4b5563;
background:var(--bg-soft);border-left:3px solid var(--indigo);
border-radius:8px;padding:11px 14px;
}
.dts-why b{color:var(--indigo)}
/* ---- 结算 ---- */
.dt-result{margin-top:20px;padding:26px 24px;text-align:center}
.dtr-stars{font-size:32px;color:#f59e0b;letter-spacing:4px}
.dt-result h2{font-size:21px;margin:8px 0 6px}
.dtr-sub{font-size:14px;color:var(--ink-3);margin:0}
.dtr-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media (max-width:1080px){
.dt-cases{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.dt-hero{grid-template-columns:1fr}
}
@media (max-width:660px){
.dt-cases{grid-template-columns:1fr}
.dt-hero{padding:20px 18px}
.dt-hero h1{font-size:25px}
}
/* ---- 课程页上的案件预告（思维小侦探） ---- */
.dt-teaser{
background:linear-gradient(135deg,#f5f3ff,#eef2ff 60%,#fff);
border:1px solid #ddd6fe;border-radius:var(--radius);
padding:16px 20px;margin-top:14px;box-shadow:var(--shadow);
}
.dtt-head{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:14.5px}
.dtt-head b{color:var(--ink)}
.dtt-ico{font-size:17px}
.dtt-n{
margin-left:auto;font-size:11.5px;color:var(--indigo);
background:#fff;border:1px solid #ddd6fe;border-radius:999px;padding:2px 10px;
}
.dtt-text{font-size:13.5px;line-height:1.8;color:var(--ink-2);margin:0}
.dtt-foot{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:12px;font-size:12.5px;color:var(--ink-4);
}
.dtt-foot a{margin-left:auto}
/* ---- 画布：选中节点的高亮（由编辑器在画布上打 is-sel，并叠一个虚线选中框） ---- */
.mm-node.is-sel{filter:drop-shadow(0 0 3px rgba(79,70,229,.5))}
.mm-node-sel-ov{pointer-events:none}