/* ===== 主题调色板 ===== */
/* 每套主题定义完整变量集；data-theme 挂在 <html> 上。无 data-theme = 跟随系统。 */
:root{
  --radius:12px;
  --radius-sm:8px;
  --fs:1;                 /* 全局字号缩放系数，由「字体大小」控件调节 */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* ---- 1. 清爽白（默认亮色） ---- */
:root, html[data-theme="light"]{
  --bg:#f6f7f9;
  --bg-elev:#ffffff;
  --bg-soft:#f0f2f5;
  --line:#e3e6ea;
  --line-strong:#cfd4da;
  --text:#1d2129;
  --text-2:#4e5969;
  --text-3:#86909c;
  --brand:#2563eb;
  --brand-soft:#eaf1ff;
  --brand-line:#bcd2ff;
  --green:#0f9d58;
  --green-soft:#e6f6ee;
  --amber:#d97706;
  --amber-soft:#fef3e2;
  --red:#dc2626;
  --red-soft:#fdeaea;
  --purple:#7c3aed;
  --purple-soft:#f1eaff;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --mark-red-bg:#ffd9d9;    --mark-red-fg:#b91c1c;
  --mark-yellow-bg:#fff3bf; --mark-yellow-fg:#92400e;
  --mark-green-bg:#d3f9d8;  --mark-green-fg:#0f7b3f;
  --mark-blue-bg:#d0ebff;   --mark-blue-fg:#0b5cad;
  --mark-purple-bg:#e5dbff; --mark-purple-fg:#5f3dc4;
}

/* ---- 2. 深色 ---- */
html[data-theme="dark"]{
  --bg:#14161a;
  --bg-elev:#1c1f24;
  --bg-soft:#22262c;
  --line:#2b3037;
  --line-strong:#3a4048;
  --text:#e8eaed;
  --text-2:#b6bcc6;
  --text-3:#868d99;
  --brand:#6b9bff;
  --brand-soft:#1b2740;
  --brand-line:#2f4a7a;
  --green:#4ade80;
  --green-soft:#14301f;
  --amber:#fbbf24;
  --amber-soft:#33280f;
  --red:#f87171;
  --red-soft:#331919;
  --purple:#a78bfa;
  --purple-soft:#261c3d;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --mark-red-bg:#4a1f1f;    --mark-red-fg:#ffb3b3;
  --mark-yellow-bg:#4a3a10; --mark-yellow-fg:#ffdf8a;
  --mark-green-bg:#12351f;  --mark-green-fg:#9ae6b4;
  --mark-blue-bg:#12304a;   --mark-blue-fg:#a5d8ff;
  --mark-purple-bg:#2a1f4a; --mark-purple-fg:#d0bfff;
}

/* ---- 3. 护眼米黄（纸质书） ---- */
html[data-theme="sepia"]{
  --bg:#f4ecd8;
  --bg-elev:#fbf5e6;
  --bg-soft:#ece2c9;
  --line:#ddd0b0;
  --line-strong:#c9b894;
  --text:#3b3222;
  --text-2:#6b5c42;
  --text-3:#9a8a6c;
  --brand:#9a6b2f;
  --brand-soft:#f0e2c4;
  --brand-line:#d8bd8e;
  --green:#5a7d3a;
  --green-soft:#e6edd4;
  --amber:#b4741a;
  --amber-soft:#f6e6c4;
  --red:#a83232;
  --red-soft:#f4dcd6;
  --purple:#7a4f8a;
  --purple-soft:#ebdfef;
  --shadow:0 1px 2px rgba(90,70,40,.06), 0 8px 24px rgba(90,70,40,.10);
  --mark-red-bg:#f3c9c0;    --mark-red-fg:#8f2020;
  --mark-yellow-bg:#f5e2a8; --mark-yellow-fg:#7a5210;
  --mark-green-bg:#d5e6bf;  --mark-green-fg:#3f5f22;
  --mark-blue-bg:#c9dde8;   --mark-blue-fg:#1f5470;
  --mark-purple-bg:#e0d2ea; --mark-purple-fg:#54306b;
}

/* ---- 4. 北欧冷灰 ---- */
html[data-theme="nord"]{
  --bg:#2e3440;
  --bg-elev:#3b4252;
  --bg-soft:#353c4a;
  --line:#434c5e;
  --line-strong:#4c566a;
  --text:#eceff4;
  --text-2:#c2c9d6;
  --text-3:#8e9aae;
  --brand:#88c0d0;
  --brand-soft:#3b4d5a;
  --brand-line:#5a7d8c;
  --green:#a3be8c;
  --green-soft:#3a4a38;
  --amber:#ebcb8b;
  --amber-soft:#4a4028;
  --red:#bf616a;
  --red-soft:#4a2f33;
  --purple:#b48ead;
  --purple-soft:#42323f;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
  --mark-red-bg:#553a3d;    --mark-red-fg:#e8a5ab;
  --mark-yellow-bg:#4f452c; --mark-yellow-fg:#f0d79b;
  --mark-green-bg:#3d4c3a;  --mark-green-fg:#c0d8ac;
  --mark-blue-bg:#384a56;   --mark-blue-fg:#a8d8e6;
  --mark-purple-bg:#443749; --mark-purple-fg:#d2b4cc;
}

/* ---- 5. 墨绿沉静 ---- */
html[data-theme="forest"]{
  --bg:#0f1a15;
  --bg-elev:#16241d;
  --bg-soft:#1b2b23;
  --line:#243a2f;
  --line-strong:#31503f;
  --text:#e4efe7;
  --text-2:#b0c7b8;
  --text-3:#7d9a88;
  --brand:#4ade80;
  --brand-soft:#1c3a29;
  --brand-line:#2f6b48;
  --green:#6ee7a0;
  --green-soft:#173326;
  --amber:#e8c86a;
  --amber-soft:#332b14;
  --red:#f08a8a;
  --red-soft:#3a1f1f;
  --purple:#b9a0e8;
  --purple-soft:#2a2138;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --mark-red-bg:#432626;    --mark-red-fg:#f3b0b0;
  --mark-yellow-bg:#3d3418; --mark-yellow-fg:#f0d98f;
  --mark-green-bg:#1c3a29;  --mark-green-fg:#9ae6b4;
  --mark-blue-bg:#1a2f3a;   --mark-blue-fg:#9fd6e8;
  --mark-purple-bg:#2c2340; --mark-purple-fg:#cdb8f0;
}

/* ---- 6. 樱粉柔和 ---- */
html[data-theme="rose"]{
  --bg:#fdf6f8;
  --bg-elev:#ffffff;
  --bg-soft:#fbeef2;
  --line:#f2dde4;
  --line-strong:#e6c5d0;
  --text:#3d2b33;
  --text-2:#6e5560;
  --text-3:#a08894;
  --brand:#d1567f;
  --brand-soft:#fce4ec;
  --brand-line:#f2bcd0;
  --green:#4c8a6a;
  --green-soft:#e6f2ea;
  --amber:#c08a2e;
  --amber-soft:#fbf0da;
  --red:#c9414a;
  --red-soft:#fbe2e4;
  --purple:#8a5bb0;
  --purple-soft:#f0e6f7;
  --shadow:0 1px 2px rgba(120,60,80,.05), 0 8px 24px rgba(120,60,80,.08);
  --mark-red-bg:#fad4d7;    --mark-red-fg:#a52a33;
  --mark-yellow-bg:#faeec2; --mark-yellow-fg:#8a6414;
  --mark-green-bg:#d8eedd;  --mark-green-fg:#2f6b47;
  --mark-blue-bg:#d6e8f5;   --mark-blue-fg:#1f5c80;
  --mark-purple-bg:#e9dcf5; --mark-purple-fg:#5c357d;
}

/* ---- 7. 深蓝夜 ---- */
html[data-theme="midnight"]{
  --bg:#0d1424;
  --bg-elev:#151d31;
  --bg-soft:#1a2340;
  --line:#232f4d;
  --line-strong:#31405f;
  --text:#e6ecf7;
  --text-2:#aebbd4;
  --text-3:#77869f;
  --brand:#5b8def;
  --brand-soft:#1a2b4d;
  --brand-line:#2d4a7d;
  --green:#4ade80;
  --green-soft:#12301f;
  --amber:#f5c451;
  --amber-soft:#33290f;
  --red:#f07272;
  --red-soft:#3a1b1b;
  --purple:#a78bfa;
  --purple-soft:#251c3d;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
  --mark-red-bg:#42201f;    --mark-red-fg:#ffb0b0;
  --mark-yellow-bg:#3a3012; --mark-yellow-fg:#ffdd8a;
  --mark-green-bg:#12301f;  --mark-green-fg:#9ae6b4;
  --mark-blue-bg:#16304f;   --mark-blue-fg:#a8ceff;
  --mark-purple-bg:#271e42; --mark-purple-fg:#cbb8ff;
}

/* ---- 跟随系统：无 data-theme 时，深色系统切到深色配色 ---- */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg:#14161a;
    --bg-elev:#1c1f24;
    --bg-soft:#22262c;
    --line:#2b3037;
    --line-strong:#3a4048;
    --text:#e8eaed;
    --text-2:#b6bcc6;
    --text-3:#868d99;
    --brand:#6b9bff;
    --brand-soft:#1b2740;
    --brand-line:#2f4a7a;
    --green:#4ade80;
    --green-soft:#14301f;
    --amber:#fbbf24;
    --amber-soft:#33280f;
    --red:#f87171;
    --red-soft:#331919;
    --purple:#a78bfa;
    --purple-soft:#261c3d;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --mark-red-bg:#4a1f1f;    --mark-red-fg:#ffb3b3;
    --mark-yellow-bg:#4a3a10; --mark-yellow-fg:#ffdf8a;
    --mark-green-bg:#12351f;  --mark-green-fg:#9ae6b4;
    --mark-blue-bg:#12304a;   --mark-blue-fg:#a5d8ff;
    --mark-purple-bg:#2a1f4a; --mark-purple-fg:#d0bfff;
  }
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
/* 注意：这里不能用 height:100%。
   body 一旦被钉成「视口高」，position:sticky 的顶栏就失去了可粘的滚动空间——
   sticky 的粘性范围被包含块高度限制住，body 只有一屏高，顶栏粘 480px 之后
   就跟着 body 一起滚出屏幕，再也回不来（这就是「上滑不出现」的真凶）。
   用 min-height 即可，body 高度随内容自然增长，sticky 全程有效。 */
html,body{min-height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:calc(14px * var(--fs));
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:650;line-height:1.3;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}

/* ===== 顶栏 ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:12px 24px;
  background:color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
  transition:transform .22s ease, box-shadow .22s ease;
  will-change:transform;
}
/* 下滑时收起来，一往上滑就立刻回来 */
.topbar.is-hidden{transform:translateY(-100%);box-shadow:none;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{font-size:calc(24px * var(--fs));line-height:1;}
.brand-text h1{font-size:calc(16px * var(--fs));letter-spacing:.2px;}
.brand-text .sub{margin-top:2px;font-size:calc(11.5px * var(--fs));color:var(--text-3);}
.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;}
.tab{
  border:1px solid transparent;background:transparent;color:var(--text-2);
  padding:7px 14px;border-radius:99px;font-size:calc(13px * var(--fs));font-weight:500;
  transition:.16s;
}
.tab:hover{background:var(--bg-soft);color:var(--text);}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;}

/* ===== 显示工具：字号 + 主题 ===== */
.display-tools{display:flex;align-items:center;gap:10px;}
.font-tool{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:99px;padding:2px;background:var(--bg-elev);
}
.font-tool .icon-btn{
  border:none;background:transparent;color:var(--text-2);
  width:26px;height:24px;border-radius:99px;font-size:calc(12px * var(--fs));font-weight:700;
  display:grid;place-items:center;transition:.15s;
}
.font-tool .icon-btn:hover{background:var(--bg-soft);color:var(--brand);}
.font-tool .icon-btn:disabled{opacity:.3;cursor:not-allowed;}
.fs-val{
  min-width:40px;text-align:center;font-size:calc(11px * var(--fs));
  color:var(--text-3);font-variant-numeric:tabular-nums;user-select:none;
}
.theme-tool{position:relative;}
.theme-btn{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg-elev);display:grid;place-items:center;transition:.15s;
}
.theme-btn:hover{border-color:var(--brand-line);}
.theme-dot{
  width:15px;height:15px;border-radius:50%;display:block;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand) 50%,var(--bg) 50%,var(--bg) 100%);
  border:1px solid var(--line-strong);
}
.theme-menu{
  position:fixed;z-index:200;
  min-width:190px;padding:6px;
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.theme-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 9px;border:none;border-radius:var(--radius-sm);
  background:transparent;color:var(--text-2);text-align:left;
  font-size:calc(12.5px * var(--fs));transition:.13s;
}
.theme-item:hover{background:var(--bg-soft);color:var(--text);}
.theme-item.active{background:var(--brand-soft);color:var(--brand);font-weight:600;}
.theme-swatch{
  width:18px;height:18px;border-radius:5px;flex:none;
  border:1px solid var(--line-strong);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden;
}
.theme-swatch i{display:block;}
.theme-item .tick{margin-left:auto;color:var(--brand);font-weight:700;}

/* ===== 视图 ===== */
main{padding:22px 24px 64px;max-width:1400px;margin:0 auto;}
.view{display:none;}
.view.active{display:block;animation:fade .22s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ===== 两栏布局 ===== */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start;}
@media(max-width:860px){
  /* 单列时 1fr 会被里面不换行的内容（类型条）撑破：grid 子项默认 min-width:auto。
     用 minmax(0,1fr) 锁住列宽，侧栏才跟顶栏一样宽，不会横向溢出。 */
  .layout{grid-template-columns:minmax(0,1fr);}
}

.sidebar{
  position:sticky;top:76px;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;box-shadow:var(--shadow);
}
.side-head{
  font-size:calc(11.5px * var(--fs));font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-3);padding:4px 8px 10px;
}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.side-list li{
  padding:9px 12px;border-radius:var(--radius-sm);font-size:calc(13.5px * var(--fs));color:var(--text-2);
  cursor:pointer;transition:.14s;display:flex;align-items:center;gap:8px;
}
.side-list li:hover{background:var(--bg-soft);color:var(--text);}
.side-list li.active{background:var(--brand-soft);color:var(--brand);font-weight:600;}
.side-list li .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;flex:none;}
.side-list li .badge-empty{
  margin-left:auto;font-size:calc(10px * var(--fs));padding:1px 6px;border-radius:99px;
  background:var(--bg-soft);color:var(--text-3);font-weight:500;
}
.side-tip{margin-top:10px;padding:9px 10px;font-size:calc(11.5px * var(--fs));color:var(--text-3);background:var(--bg-soft);border-radius:var(--radius-sm);line-height:1.5;}
.side-actions{margin-top:10px;}
.side-actions .btn{width:100%;justify-content:center;}

/* ===== 面板 ===== */
.pane{min-width:0;}
.pane-head{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.pane-head h2{font-size:calc(20px * var(--fs));}
.pane-sub{font-size:calc(12.5px * var(--fs));color:var(--text-3);margin-top:4px;}
.pane-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-strong);background:var(--bg-elev);color:var(--text);
  padding:7px 14px;border-radius:var(--radius-sm);font-size:calc(13px * var(--fs));font-weight:550;
  transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn.primary:hover{filter:brightness(1.08);color:#fff;}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text-2);}
.btn.ghost:hover{background:var(--bg-soft);border-color:var(--line-strong);color:var(--text);}
.btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,var(--line));}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red);color:var(--red);}
.btn.small{padding:5px 10px;font-size:calc(12px * var(--fs));}
.btn.tiny{padding:3px 8px;font-size:calc(11.5px * var(--fs));border-radius:6px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.icon-btn{
  border:none;background:transparent;color:var(--text-3);font-size:calc(16px * var(--fs));
  width:28px;height:28px;border-radius:6px;line-height:1;display:grid;place-items:center;
}
.icon-btn:hover{background:var(--bg-soft);color:var(--text);}

/* ===== 模板区块 ===== */
.blocks{display:flex;flex-direction:column;gap:16px;}
.block{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.block-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft);
}
.block-idx{
  width:22px;height:22px;border-radius:6px;background:var(--brand);color:#fff;
  font-size:calc(12px * var(--fs));font-weight:700;flex:none;
  display:flex;align-items:center;justify-content:center;
  line-height:1;padding:0;
  font-variant-numeric:tabular-nums;
  /* 数字没有下伸部，视觉中心比几何中心低 ~1px，往回收一点才真居中 */
  padding-bottom:1.5px;
}
.block-title{font-size:calc(14px * var(--fs));font-weight:650;}
.block-meta{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.chip{
  font-size:calc(11px * var(--fs));padding:2px 8px;border-radius:99px;background:var(--bg-elev);
  border:1px solid var(--line);color:var(--text-3);white-space:nowrap;
}
.chip.blue{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand);}
.chip.green{background:var(--green-soft);border-color:transparent;color:var(--green);}
.chip.amber{background:var(--amber-soft);border-color:transparent;color:var(--amber);}
.chip.purple{background:var(--purple-soft);border-color:transparent;color:var(--purple);}
.block-body{padding:16px;display:flex;flex-direction:column;gap:12px;}

/* 英文 / 中文行 */
.line-en{
  font-family:var(--mono);font-size:calc(13.5px * var(--fs));line-height:1.85;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;white-space:pre-wrap;word-break:break-word;color:var(--text);
}
.line-zh{
  font-size:calc(13px * var(--fs));line-height:1.8;color:var(--text-2);
  padding:10px 14px;border-left:3px solid var(--brand-line);
  background:linear-gradient(90deg,var(--brand-soft),transparent 70%);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.line-note{
  font-size:calc(12px * var(--fs));color:var(--text-3);padding:8px 12px;
  background:var(--bg-soft);border-radius:var(--radius-sm);line-height:1.65;
}
/* 占位符高亮 */
.ph{
  background:var(--amber-soft);color:var(--amber);border-radius:4px;
  padding:0 3px;font-weight:600;border-bottom:1px dashed var(--amber);
  cursor:pointer;transition:.14s;
}
.ph:hover{filter:brightness(.96);box-shadow:0 0 0 2px var(--amber-soft);}
.ph.blue{background:var(--brand-soft);color:var(--brand);border-bottom-color:var(--brand);}
.ph.green{background:var(--green-soft);color:var(--green);border-bottom-color:var(--green);}
.ph.purple{background:var(--purple-soft);color:var(--purple);border-bottom-color:var(--purple);}
.ph.red{background:var(--red-soft);color:var(--red);border-bottom-color:var(--red);}
/* 空占位符：虚线框 + 淡底，一眼看出是待填位置 */
.ph.is-empty{
  background:transparent;border:1px dashed currentColor;border-bottom-style:dashed;
  opacity:.85;font-weight:600;
}
/* 中文侧彩色字：颜色与底色跟英文侧一致，但**不要虚线框**——
   中文行整行都在边框里，再给每个词画虚框显得碎。 */
.line-zh .ph,
.line-zh .ph.is-empty{
  border:0;border-bottom:0;
}

/* 句子容器与「换一种写法」按钮 */
.line-wrap{position:relative;display:flex;flex-direction:column;gap:8px;}
.line-wrap .swap-btn{
  align-self:flex-end;opacity:.55;transition:.14s;
}
.line-wrap:hover .swap-btn{opacity:1;}

/* 候选词选择卡 */
.slot-hint{
  font-size:calc(12.5px * var(--fs));line-height:1.7;color:var(--text-2);
  background:var(--bg-soft);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:12px;
}
.slot-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:8px;max-height:46vh;overflow:auto;padding-right:4px;
}
@media(max-width:720px){.slot-list{grid-template-columns:1fr;}}
.slot-item{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-elev);cursor:pointer;transition:.14s;font:inherit;
}
.slot-item:hover{border-color:var(--brand);background:var(--brand-soft);}
.slot-item .slot-en{
  font-family:var(--mono);font-size:calc(12.5px * var(--fs));line-height:1.6;
  color:var(--text);font-weight:550;
}
.slot-item .slot-zh{font-size:calc(12px * var(--fs));color:var(--text-2);line-height:1.55;}
.slot-item.tall .slot-en{font-family:var(--mono);font-size:calc(12.5px * var(--fs));}
.slot-custom{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-strong);
}

/* 短语快捷插入条 */
.phrase-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-top:2px;
}
.phrase-bar .lbl{font-size:calc(11.5px * var(--fs));color:var(--text-3);}
.phrase-pill{
  font-size:calc(11.5px * var(--fs));padding:3px 9px;border-radius:99px;
  border:1px dashed var(--line-strong);background:transparent;color:var(--text-2);
  transition:.14s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.phrase-pill:hover{border-style:solid;border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}

/* ===== 编辑器 ===== */
.editor-block{
  border:1px solid var(--brand-line);border-radius:var(--radius);
  background:var(--bg-elev);overflow:hidden;
}
.editor-block .eb-head{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--brand-soft);border-bottom:1px solid var(--brand-line);flex-wrap:wrap;
}
.editor-block .eb-head .grow{flex:1;min-width:120px;}
.editor-block .eb-body{padding:14px;display:flex;flex-direction:column;gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field > label{font-size:calc(11.5px * var(--fs));font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:6px;}
.field > label .hint{font-weight:400;color:var(--text-3);}
textarea,input[type=text],input[type=search],select{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--bg);padding:8px 11px;font-size:calc(13px * var(--fs));line-height:1.7;
  transition:.15s;outline:none;
}
textarea{resize:vertical;min-height:64px;font-family:var(--mono);font-size:calc(13px * var(--fs));}
textarea.zh{font-family:var(--sans);font-size:calc(13px * var(--fs));}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:760px){.field-row{grid-template-columns:1fr;}}

.save-bar{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding:12px 16px;
  background:color-mix(in srgb,var(--bg-elev) 92%,transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--brand-line);border-radius:var(--radius);
  box-shadow:0 -4px 20px rgba(16,24,40,.08);
}
.save-bar .status{font-size:calc(12.5px * var(--fs));color:var(--amber);font-weight:600;}
.save-bar .status.clean{color:var(--text-3);font-weight:400;}
.save-bar .grow{flex:1;}

/* ===== 真题 ===== */
.papers-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.filters select,.filters input{width:auto;min-width:130px;}
.filters input[type=search]{min-width:200px;}
.papers-count{margin-left:auto;font-size:calc(12.5px * var(--fs));color:var(--text-3);}

.papers-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
@media(max-width:720px){.papers-list{grid-template-columns:1fr;}}
.paper-card{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transition:.16s;
}
.paper-card:hover{border-color:var(--brand-line);transform:translateY(-1px);}
.pc-head{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--bg-soft);flex-wrap:wrap;
}
.pc-year{font-size:calc(15px * var(--fs));font-weight:750;letter-spacing:.3px;}
.pc-body{padding:13px 14px;display:flex;flex-direction:column;gap:10px;flex:1;}
.pc-topic{font-size:calc(14px * var(--fs));font-weight:650;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
/* 中文翻译（一眼看懂当年考什么） */
.pc-zh{
  font-size:calc(13px * var(--fs));line-height:1.8;color:var(--text);
  background:var(--brand-soft);border-left:3px solid var(--brand);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:9px 12px;white-space:pre-wrap;
}
/* 真题配图 */
.pc-img{
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft);
}
.pc-img img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;cursor:zoom-in;}
/* 英文原题折叠 */
.pc-en summary{
  font-size:calc(11.5px * var(--fs));color:var(--text-3);cursor:pointer;
  padding:4px 0;user-select:none;list-style:revert;
}
.pc-en summary:hover{color:var(--brand);}
.pc-en[open] summary{margin-bottom:6px;}
.pc-dir{
  font-family:var(--mono);font-size:calc(11.5px * var(--fs));line-height:1.7;color:var(--text-2);
  background:var(--bg-soft);border-radius:var(--radius-sm);padding:9px 11px;
  white-space:pre-wrap;max-height:150px;overflow:auto;
}
/* 范文弹层里的题目区 */
.essay-topic{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.essay-topic .et-zh{
  font-size:calc(13px * var(--fs));line-height:1.8;color:var(--text);
  background:var(--brand-soft);border-left:3px solid var(--brand);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:10px 12px;white-space:pre-wrap;
}
.essay-topic .et-img{
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft);
}
.essay-topic .et-img img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;cursor:zoom-in;}
.pc-desc{font-size:calc(12px * var(--fs));color:var(--text-3);line-height:1.6;}
.pc-foot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap;}
.pc-foot .state{font-size:calc(11.5px * var(--fs));color:var(--text-3);margin-right:auto;}
.pc-foot .state.filled{color:var(--green);font-weight:600;}

/* ===== 范文编辑 ===== */
.essay-editor{display:flex;flex-direction:column;gap:12px;}
.essay-area{
  font-family:var(--mono);font-size:calc(13px * var(--fs));line-height:1.9;
  min-height:260px;width:100%;
}
.color-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 12px;background:var(--bg-soft);border-radius:var(--radius-sm);}
.color-tools .lbl{font-size:calc(11.5px * var(--fs));color:var(--text-3);}
.swatch{
  width:22px;height:22px;border-radius:6px;border:2px solid transparent;padding:0;
  transition:.14s;position:relative;
}
.swatch:hover{transform:scale(1.1);}
.swatch.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--bg-elev) inset;}
.swatch[data-c=none]{background:var(--bg-elev);border-color:var(--line-strong);}
.swatch[data-c=red]{background:#ff6b6b;}
.swatch[data-c=yellow]{background:#ffd43b;}
.swatch[data-c=green]{background:#51cf66;}
.swatch[data-c=blue]{background:#4dabf7;}
.swatch[data-c=purple]{background:#b197fc;}

.essay-preview{
  font-size:calc(14px * var(--fs));line-height:2;white-space:pre-wrap;word-break:break-word;
  padding:14px;background:var(--bg-soft);border-radius:var(--radius-sm);
  border:1px solid var(--line);min-height:120px;
}
.mark-red{background:var(--mark-red-bg);color:var(--mark-red-fg);border-radius:3px;padding:0 2px;}
.mark-yellow{background:var(--mark-yellow-bg);color:var(--mark-yellow-fg);border-radius:3px;padding:0 2px;}
.mark-green{background:var(--mark-green-bg);color:var(--mark-green-fg);border-radius:3px;padding:0 2px;}
.mark-blue{background:var(--mark-blue-bg);color:var(--mark-blue-fg);border-radius:3px;padding:0 2px;}
.mark-purple{background:var(--mark-purple-bg);color:var(--mark-purple-fg);border-radius:3px;padding:0 2px;}

/* ===== 短语库 ===== */
.phrases-head{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.phrases-head h2{font-size:calc(20px * var(--fs));}
.phrases-body{display:flex;flex-direction:column;gap:22px;}
/* 位置分区 */
.slot-section{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.slot-section-title{
  font-size:calc(15px * var(--fs));font-weight:750;margin-bottom:4px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.slot-tip{font-size:calc(12px * var(--fs));color:var(--text-3);margin:8px 0 4px;}
.slot-row{padding:12px 0;border-bottom:1px dashed var(--line);}
.slot-row:last-child{border-bottom:none;padding-bottom:0;}
.slot-row-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
.slot-label{font-size:calc(13px * var(--fs));font-weight:650;color:var(--text);}
.slot-count{font-size:calc(11.5px * var(--fs));color:var(--text-3);margin-right:auto;}
.slot-chips{display:flex;flex-wrap:wrap;gap:7px;}
.slot-none{font-size:calc(12px * var(--fs));color:var(--text-3);font-style:italic;}
/* 候选语句胶囊：点一下填入模板 */
.slot-chip{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  max-width:100%;text-align:left;cursor:pointer;
  font-family:var(--mono);font-size:calc(12px * var(--fs));line-height:1.5;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 11px;color:var(--text);transition:.14s;
}
.slot-chip:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px);}
.slot-chip:active{transform:translateY(0);}
.slot-chip i{
  font-family:var(--sans);font-style:normal;font-size:calc(11px * var(--fs));
  color:var(--text-3);line-height:1.5;
}
.slot-chip.line{border-left:3px solid var(--brand);}
/* 每条候选右上角的「✎」：就地改这一条，不触发填入模板。
   常显（不是 hover 才出来），否则桌面上根本看不见；挪进胶囊内部右上角，避免被相邻胶囊盖住。 */
.slot-chip{position:relative;padding-right:26px;}
.slot-chip .chip-edit{
  position:absolute;top:5px;right:5px;width:17px;height:17px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:calc(11px * var(--fs));line-height:1;
  color:var(--text-3);background:transparent;border:1px solid var(--line-strong);
  border-radius:50%;opacity:.75;transition:.14s;
  cursor:pointer;user-select:none;
}
.slot-chip:hover .chip-edit{opacity:1;color:#fff;background:var(--brand);border-color:var(--brand);}
.slot-chip .chip-edit:hover{transform:scale(1.15);}
.slot-row.selecting .slot-chip .chip-edit{display:none;}
.slot-chip.line i{color:var(--text-2);}
/* 换句卡片里每条写法右侧的 ✎ */
.slot-line{position:relative;}
.slot-line .slot-item{width:100%;}
.slot-line .slot-edit{
  position:absolute;top:8px;right:8px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(11px * var(--fs));line-height:1;color:var(--text-3);
  background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:50%;
  opacity:.7;cursor:pointer;transition:.14s;user-select:none;
}
.slot-line:hover .slot-edit{opacity:1;color:#fff;background:var(--brand);border-color:var(--brand);}

/* ===== 选择 / 批量删除模式 ===== */
.ph-select-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;padding:10px 14px;
  background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--radius-sm);
}
.psb-info{font-size:calc(12.5px * var(--fs));font-weight:650;color:var(--brand);}
.psb-acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}

/* 勾选圆点：默认隐藏，进入选择模式才出现 */
.pick-dot{display:none;}
.slot-row.selecting .slot-chips{gap:9px;}
.slot-row.selecting .slot-chip{
  position:relative;padding-left:30px;border-color:var(--brand-line);
}
.slot-row.selecting .slot-chip .pick-dot{
  display:flex;align-items:center;justify-content:center;
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--bg-elev);
  font-size:calc(10px * var(--fs));color:#fff;transition:.12s;
}
.slot-row.selecting .slot-chip.picked{
  border-color:var(--brand);background:var(--brand-soft);
}
.slot-row.selecting .slot-chip.picked .pick-dot{
  border-color:var(--brand);background:var(--brand);
}
.slot-row.selecting .slot-chip.picked .pick-dot::after{content:"✓";}
.slot-chip.picked .pick-dot::after{content:"✓";}
.phrase-card{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
}
.phrase-card .ph-en{font-family:var(--mono);font-size:calc(13px * var(--fs));line-height:1.75;font-weight:550;}
.phrase-card .ph-zh{font-size:calc(12.5px * var(--fs));color:var(--text-2);}
.phrase-card .ph-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.phrase-card .ph-acts{margin-left:auto;display:flex;gap:4px;}

/* ===== 云同步设置 ===== */
.sync-status{font-size:calc(12px * var(--fs));padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--text-3);}
.sync-status[data-state="ok"]{color:var(--green);border-color:var(--green);}
.sync-status[data-state="err"]{color:var(--red);border-color:var(--red);}
.sync-status[data-state="idle"]{color:var(--text-3);}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:calc(13px * var(--fs));color:var(--text-2);cursor:pointer;}
.chk input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;}
.sql-help{margin-top:12px;}
.sql-help summary{cursor:pointer;font-size:calc(13px * var(--fs));color:var(--brand);}
.sql-box{
  margin-top:10px;padding:12px;border-radius:var(--radius-sm);
  background:var(--bg-soft);border:1px solid var(--line);
  font-family:var(--mono);font-size:calc(12px * var(--fs));line-height:1.7;
  white-space:pre-wrap;overflow-x:auto;color:var(--text-2);
}

/* 撤销按钮 */
.undo-btn{
  font-size:calc(16px * var(--fs));line-height:1;
  width:30px;height:30px;border-radius:8px;
  color:var(--text-2);background:var(--bg-soft);border:1px solid var(--line);
}
.undo-btn:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft);}
.undo-btn:disabled{opacity:.35;cursor:not-allowed;}

/* 侧栏每个类型旁的「恢复默认」小按钮 */
.side-reset{
  margin-left:auto;flex:0 0 auto;
  width:20px;height:20px;line-height:1;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:calc(13px * var(--fs));color:var(--text-3);
  background:transparent;border:1px solid transparent;border-radius:6px;
  cursor:pointer;opacity:0;transition:.14s;
}
.side-list li:hover .side-reset{opacity:1;}
.side-reset:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft);}
.side-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== 笔记行（只读视图点一下就能写） ===== */
.note-edit{
  cursor:text;border-radius:var(--radius-sm);
  padding:5px 8px;margin-top:2px;
  transition:background .14s,border-color .14s;
  border:1px dashed transparent;
}
.note-edit:hover{background:var(--bg-soft);border-color:var(--line);}
.note-edit .note-ph{color:var(--text-3);font-style:italic;}
.note-edit.editing{background:var(--bg-soft);border-color:var(--brand-line);padding:0;}
.note-edit .note-input{
  width:100%;border:none;background:transparent;color:var(--text);
  font-family:var(--sans);font-size:calc(12.5px * var(--fs));line-height:1.75;
  padding:6px 8px;resize:vertical;outline:none;
}

/* ===== 选中即改浮出按钮 ===== */
.sel-edit-btn{
  position:absolute;z-index:60;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--sans);font-size:calc(12.5px * var(--fs));font-weight:650;
  color:#fff;background:var(--brand);border:none;border-radius:999px;
  padding:6px 13px;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .12s,filter .12s;
}
.sel-edit-btn:hover{transform:translateY(-1px);filter:brightness(1.06);}
.sel-edit-btn:active{transform:translateY(0);}
/* 触摸设备：固定到底部居中，避开系统「复制/全选」原生菜单（它压在选区上方）。
   底部安全区留出 iPhone 横条的空间。 */
.sel-edit-btn.is-docked{
  position:fixed;left:0 !important;right:0 !important;top:auto !important;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  width:max-content;margin:0 auto;
  transform:none;
  z-index:80;
  padding:10px 20px;font-size:calc(14px * var(--fs));
  box-shadow:0 6px 22px rgba(0,0,0,.32);
}
.sel-edit-btn.is-docked:hover{transform:none;}
/* 选中即改的文本框：英文用等宽，中文正常 */
#se-en{font-family:var(--mono);line-height:1.7;}
#se-zh{line-height:1.7;}

/* ===== 设置 ===== */
.settings-wrap{max-width:760px;display:flex;flex-direction:column;gap:14px;}
.settings-wrap h2{font-size:calc(20px * var(--fs));margin-bottom:2px;}
.card{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
}
.card h3{font-size:calc(14px * var(--fs));}
.card .muted{font-size:calc(12.5px * var(--fs));color:var(--text-3);line-height:1.65;}
.card .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.card .kv{font-size:calc(12.5px * var(--fs));color:var(--text-2);}
.danger-card{border-color:color-mix(in srgb,var(--red) 30%,var(--line));}

/* ===== 弹层 ===== */
.modal-mask{
  position:fixed;inset:0;z-index:200;background:rgba(16,24,40,.45);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px);
}
.modal{
  background:var(--bg-elev);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.25);
  width:min(680px,100%);max-height:88vh;display:flex;flex-direction:column;
  animation:pop .18s ease;border:1px solid var(--line);
}
@keyframes pop{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:none;}}
.modal.wide{width:min(920px,100%);}
.modal-head{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:calc(15px * var(--fs));flex:1;}
.modal-body{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px;}
.modal-foot{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--bg-soft);
  border-radius:0 0 14px 14px;flex-wrap:wrap;
}
.modal-foot .grow{flex:1;}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);
  background:var(--text);color:var(--bg-elev);
  padding:10px 20px;border-radius:99px;font-size:calc(13px * var(--fs));font-weight:550;
  z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.2);
  animation:toastIn .2s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* ===== 空态 ===== */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:56px 20px;color:var(--text-3);text-align:center;
  background:var(--bg-elev);border:1px dashed var(--line-strong);border-radius:var(--radius);
}
.empty .ico{font-size:calc(32px * var(--fs));opacity:.6;}
.empty .t{font-size:calc(14px * var(--fs));font-weight:600;color:var(--text-2);}
.empty .d{font-size:calc(12.5px * var(--fs));max-width:380px;line-height:1.7;}

/* 工具条 */
.mini-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mini-bar .grow{flex:1;}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);}
::-webkit-scrollbar-track{background:transparent;}

/* ===== 窄屏（手机）适配：必须放在文件末尾，否则会被上面的 .side-list 规则盖掉 ===== */
@media(max-width:860px){
  /* 单列布局下侧栏不能 sticky：否则类型卡片一直钉在顶部，正文从它下面穿过，看着像内容穿插 */
  .sidebar{position:static;top:auto;min-width:0;max-width:100%;}
  .side-head{padding:2px 4px 8px;}
  .side-list{flex-direction:row;flex-wrap:wrap;gap:6px;min-width:0;}
  .side-list li{flex:0 0 auto;padding:7px 11px;}
  .side-reset{opacity:.6;}
  /* grid 子项默认 min-width:auto 会被内容撑破，统一锁住 */
  .layout>*{min-width:0;}
  .pane,.pane-head,.blocks,.block{min-width:0;}
}
/* ===== 手机（窄屏）类型选择：横向滑动条，避免占满整屏高度 ===== */
@media(max-width:860px){
  .sidebar{padding:8px 10px;}
  .side-head{padding:0 2px 6px;font-size:calc(10.5px * var(--fs));}
  .side-list{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;
  }
  .side-list::-webkit-scrollbar{display:none;}
  .side-list li{white-space:nowrap;padding:6px 12px;font-size:calc(13px * var(--fs));}
  .side-list li .badge-empty{margin-left:4px;}
  .side-tip{display:none;}
  .side-actions{margin-top:6px;}
  .side-actions .btn{width:auto;}
}
/* 手机端顶栏：压到两行 —— 第一行 标题+工具，第二行 tab 横向滑动 */
@media(max-width:860px){
  .topbar{padding:8px 12px;gap:8px;flex-wrap:wrap;row-gap:6px;}
  .brand{flex:1 1 auto;min-width:0;gap:8px;}
  .brand-text h1{font-size:calc(14px * var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brand-text .sub{display:none;}
  .logo{font-size:calc(20px * var(--fs));}
  .display-tools{flex:none;gap:5px;margin-left:auto;}
  .tabs{
    order:3;width:100%;margin-left:0;gap:3px;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:1px;
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:5px 9px;font-size:calc(12px * var(--fs));white-space:nowrap;flex:none;}
}