/* ============================================================================
   KanCDR 首页 / 预览工作台 —— Fluent 2 风格
   设计要点：Mica 底色 + 亚克力层、8px 圆角、1px 描边、克制的浮起阴影、
   选中态用 3px 强调色左条、控件点击有轻微下沉，整体 4/8/12/16 间距栅格。
   ========================================================================== */
:root{
  --accent:#2fbf71; --accent-hover:#27a75f; --accent-press:#1e9e5a;
  --accent-soft:#e6f7ef; --accent-soft-2:#c8f0dc;
  --bg:#f3f3f3; --layer:#ffffff; --layer-2:#fbfbfb;
  --card:rgba(255,255,255,.74); --card-solid:#ffffff;
  --stroke:rgba(0,0,0,.08); --stroke-2:rgba(0,0,0,.14); --stroke-3:rgba(0,0,0,.05);
  --text:#1b1b1b; --text-2:#3d3d3d; --muted:#616161; --faint:#8a8a8a;
  --ok:#0f7b0f; --warn:#9d5d00; --err:#c42b1c;
  --chip:#f0f0f0; --hover:rgba(0,0,0,.045); --press:rgba(0,0,0,.02);
  --sh-2:0 1px 2px rgba(0,0,0,.05);
  --sh-4:0 2px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-8:0 8px 16px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.05);
  --sh-16:0 16px 32px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06);
  --r-sm:6px; --r:8px; --r-md:10px; --r-lg:12px; --r-xl:16px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Cascadia Mono",monospace;
  --canvas:#ecebe9;
  /* 分享落地页的真实可视高度与底部引导条实测高度（微信 WebView 里由 JS 同步） */
  --vvh:100vh; --share-bar-h:64px;
}
[data-theme="dark"]{
  --bg:#1f1f1f; --layer:#272727; --layer-2:#2b2b2b;
  --card:rgba(43,43,43,.76); --card-solid:#2b2b2b;
  --stroke:rgba(255,255,255,.09); --stroke-2:rgba(255,255,255,.16); --stroke-3:rgba(255,255,255,.05);
  --text:#f2f2f2; --text-2:#d6d6d6; --muted:#b0b0b0; --faint:#8f8f8f;
  --ok:#54b054; --warn:#f0b429; --err:#ff6b5e;
  --chip:#383838; --hover:rgba(255,255,255,.07); --press:rgba(255,255,255,.03);
  --accent:#3ddc84; --accent-hover:#55e396; --accent-soft:#123b25; --accent-soft-2:#174a2f;
  --sh-2:0 1px 2px rgba(0,0,0,.4);
  --sh-4:0 2px 4px rgba(0,0,0,.45);
  --sh-8:0 8px 16px rgba(0,0,0,.5);
  --sh-16:0 16px 32px rgba(0,0,0,.55);
  --canvas:#171717;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);overflow:hidden;
  font:14px/1.55 "Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  background:
    radial-gradient(1100px 480px at 88% -8%, #d9f6e6 0%, rgba(217,246,230,0) 62%),
    radial-gradient(760px 420px at 4% -6%, #e6f7ef 0%, rgba(230,247,239,0) 58%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  /* 微信「设置 → 字体大小」会强制放大网页文字，撑爆引导条/按钮；锁住自动缩放 */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
button{touch-action:manipulation}   /* 微信里禁掉双击缩放带来的 300ms 延迟与布局漂移 */
[data-theme="dark"] body{
  background:
    radial-gradient(1100px 480px at 88% -8%, #15331f 0%, rgba(21,51,31,0) 62%),
    radial-gradient(760px 420px at 4% -6%, #1a3b24 0%, rgba(26,59,36,0) 58%),
    var(--bg);
}
button,input,select{font:inherit;color:inherit}
.hidden{display:none!important}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- 顶栏 ---------------- */
.topbar{
  height:56px;display:flex;align-items:center;gap:14px;padding:0 14px;position:relative;z-index:30;
  background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--stroke);
}
[data-theme="dark"] .topbar{background:rgba(32,32,32,.76)}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:186px}
.brand .mark{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.brand .mark img{width:34px;height:34px;object-fit:contain;display:block}
.brand b{display:block;font-size:14.5px;font-weight:700;letter-spacing:.01em;line-height:1.1}
.brand span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;letter-spacing:.02em}

.cmdbar{display:flex;align-items:center;gap:6px;flex:0 0 auto;width:150px;
  height:32px;padding:0 8px;border-radius:var(--r);background:var(--layer);
  border:1px solid var(--stroke);transition:.15s;opacity:.85}
.cmdbar:hover,.cmdbar:focus-within{opacity:1;border-color:var(--stroke)}
.cmdbar:focus-within{width:210px;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,191,113,.14)}
.cmdbar svg{width:14px;height:14px;color:var(--muted);flex:0 0 auto}
.cmdbar input[type="text"]{flex:1;border:0;background:none;outline:none;font-size:12.5px;min-width:0;
  padding:0;width:auto;height:100%;border-radius:0;box-shadow:none}
.cmdbar input::placeholder{color:var(--faint)}
.cmdbar kbd{font:11px/1 var(--mono);color:var(--faint);background:var(--chip);border:1px solid var(--stroke);
  border-radius:4px;padding:3px 5px;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto}

/* 顶部功能导航：在线预览 / 版本转化 / 字体修复 / 印前检查 / WebCDR（后续可继续加） */
.topnav{display:flex;align-items:center;gap:4px;flex:0 1 auto;margin-left:6px;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav-item{
  height:36px;padding:0 15px;border:0;background:transparent;color:var(--text-2);
  font-size:14px;font-weight:550;cursor:pointer;border-radius:999px;white-space:nowrap;
  transition:color .14s,background .14s;position:relative;
  display:inline-flex;align-items:center;gap:7px;
}
.topnav-item svg{width:16px;height:16px;flex:0 0 auto;color:var(--muted);transition:color .14s}
.topnav-item:hover{color:var(--text);background:var(--hover)}
.topnav-item:hover svg{color:var(--text)}
.topnav-item.on{color:var(--accent);font-weight:650;background:var(--accent-soft)}
.topnav-item.on svg{color:var(--accent)}
.topnav-item.on::after{
  content:"";position:absolute;left:15px;right:15px;bottom:-11px;height:3px;
  border-radius:3px;background:var(--accent);
}

/* 右上角登录信息 */
.user-btn{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px 0 6px;
  border-radius:999px;border:1px solid var(--stroke);background:var(--card-solid);
  color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s;
}
.user-btn:hover{border-color:var(--accent);background:var(--hover)}
.user-btn .avatar{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft,var(--hover));color:var(--accent);
}
.user-btn .avatar svg{width:13px;height:13px}
.user-btn.logged .avatar{background:var(--accent);color:#fff}

/* ---------------- 通用控件 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;
  border-radius:var(--r);border:1px solid transparent;background:var(--card-solid);color:var(--text);
  font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,transform .06s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(47,191,113,.3)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.secondary{border-color:var(--stroke-2);box-shadow:var(--sh-2)}
.btn.secondary:hover{background:var(--hover)}
.btn.subtle{background:transparent;border-color:transparent;font-weight:500;color:var(--text-2)}
.btn.subtle:hover{background:var(--hover);color:var(--text)}
.btn:active{transform:translateY(.5px);background:var(--press)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.full{width:100%}
.icon-btn{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--text-2);
  cursor:pointer;transition:background .12s,color .12s;
}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
.text-btn{
  height:30px;padding:0 10px;border-radius:var(--r);border:0;background:transparent;color:var(--text-2);
  font-size:12.5px;cursor:pointer;
}
.text-btn:hover{background:var(--hover);color:var(--text)}
.chip{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;
  font-size:11px;color:var(--muted);background:var(--chip);white-space:nowrap;border:0;
}
.chip.ok{background:#e6f4e6;color:var(--ok)}
[data-theme="dark"] .chip.ok{background:#123c12}
select{background:var(--layer);border:1px solid var(--stroke);border-radius:var(--r-sm);
  padding:5px 8px;font-size:12px;cursor:pointer;outline:none;max-width:100%}
input[type="text"],input:not([type]){background:var(--layer);border:1px solid var(--stroke);
  border-radius:var(--r-sm);padding:6px 9px;font-size:12.5px;outline:none;width:100%;transition:.12s}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,191,113,.14)}

/* 开关 */
.switch{display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:20px;border-radius:12px;background:var(--stroke-2);position:relative;transition:.16s}
.switch .track::after{content:"";position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;
  background:#fff;transition:.16s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{left:22px}

/* ---------------- 主骨架 ---------------- */
.shell{
  height:calc(100vh - 56px);display:grid;grid-template-columns:176px minmax(0,1fr) 244px;
  gap:0;padding:0;overflow:hidden;background:var(--layer);
}
/* 手动「隐藏两侧面板」只在三栏全展开的宽屏生效。折叠态由响应式抽屉接管显隐，
   否则用户在宽屏收起过面板后缩小窗口，抽屉会被 display:none 压住打不开。 */
@media (min-width:1361px){
  .shell.side-hidden{grid-template-columns:minmax(0,1fr)}
  .shell.side-hidden .nav,.shell.side-hidden .inspector{display:none}
}

/* ==========================================================================
   分享落地页（分享查看态）
   触发：URL 带 ?file= 时给 body 加 .share-mode。
   目的：扫码/点链接进来的访客只关心「看这个 CDR 文件」，不该被编辑器的
   导航、搜索、检查器、上传、会员等一堆工具干扰；同时用底部引导条把
   「看文件」的自然流量转成「用 KanCDR 打开自己的文件」的转化入口。
   复用同一份 index-api.html，不新增页面、不引后端。
   ========================================================================== */
.share-top-tag{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);
  white-space:nowrap;overflow:hidden}
.share-top-tag .stt-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 3px var(--accent-soft)}
.share-top-tag em{font-style:normal;color:var(--faint);font-size:12px}

.share-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;min-height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 20px;padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.86);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--stroke);box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
[data-theme="dark"] .share-bar{background:rgba(32,32,32,.88);box-shadow:0 -4px 16px rgba(0,0,0,.4)}
.share-bar .sb-brand{display:flex;align-items:center;gap:10px;min-width:0}
.share-bar .sb-brand img{width:32px;height:32px;object-fit:contain;flex:0 0 auto}
.share-bar .sb-meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.share-bar .sb-meta b{font-size:13.5px;font-weight:700;color:var(--text)}
.share-bar .sb-meta span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(46vw,420px)}
.share-bar .sb-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.share-bar .sb-actions .btn svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}

/* 分享态：顶栏只留品牌 + 标签，隐藏编辑器导航/搜索/用户区。
   整个 top-right 一并收掉（含窄屏抽屉入口），否则手机端会留下一行空白占位。 */
body.share-mode .topnav,
body.share-mode .top-right{display:none!important}
body.share-mode .cmdbar,
body.share-mode .top-right .icon-btn,
body.share-mode .top-right .text-btn,
body.share-mode .top-right .user-btn{display:none!important}

/* 分享态：左右两侧编辑器面板收起，画布独占整行 */
body.share-mode .shell{
  grid-template-columns:minmax(0,1fr);
  /* 不用写死 100vh/92px：微信顶部栏、字体放大、iPhone 安全区都会让引导条变高，
     由 JS 把 --vvh / --share-bar-h 同步成实测值，画布才不会被底部条压住。 */
  height:calc(var(--vvh) - 56px - var(--share-bar-h));
}
body.share-mode .nav,body.share-mode .inspector{display:none!important}
body.share-mode .center{border-right:0}

/* 分享态：隐藏页面缩略图列（访客只看当前分享的文件，不需要文件列表/缩略图） */
body.share-mode .canvas{grid-template-columns:minmax(0,1fr)}
body.share-mode .thumbs{display:none!important}
body.share-mode .file-list-head{display:none!important}

/* 分享态：工具栏只保留「缩放 / 适应页面 / 实际大小」，其余编辑器动作全部收起 */
body.share-mode #btnOpenToolbar,
body.share-mode #btnPan,
body.share-mode #btnSelect,
body.share-mode #btnFull,
body.share-mode #btnReload,
body.share-mode #btnPanels,
body.share-mode .toolbar .menu-wrap{display:none!important}

/* 分享态：状态栏隐藏编辑器专属信息，只留翻页与状态 */
body.share-mode .statusbar .svc,
body.share-mode .statusbar > .muted{display:none}

/* 分享态空状态（加载失败/过期）不该出现「打开 CDR」与功能卡片 */
body.share-mode #btnOpenEmpty{display:none}

/* 手机端：引导条改为两行，避免 CTA 被挤没 */
@media (max-width:640px){
  .share-top-tag em{display:none}
  .share-bar{min-height:60px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;gap:8px}
  .share-bar .sb-meta span{max-width:60vw}
  .share-bar .sb-actions{width:100%;justify-content:flex-end}
  .share-bar .sb-actions .btn{flex:1;justify-content:center}
  body.share-mode .statusbar > .muted{display:none}
}

/* 分享态画布：微信里长按不该弹出「选择/拷贝」菜单、也不该选中 SVG 文字。
   注意范围只限画布与壳层——转发面板里的口令 textarea、海报 img 必须保持可长按。 */
body.share-mode .stage,
body.share-mode .canvas,
body.share-mode .share-bar,
body.share-mode .topbar,
body.share-mode .statusbar{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}

/* ==========================================================================
   微信内置浏览器：传播导向的引导 + 操作面板
   微信 WebView 的坑：window.open 被拦、clipboard 常失效、canvas 不能长按识别、
   blob: 图片长按存不了、<a download> 无效、字体设置会撑爆布局。
   所以：所有「去系统菜单」的动作统一用 ··· 引导；二维码/海报一律真 <img>；
   复制一律带可长按兜底。引导卡不遮画布、会话内只弹一次。
   ========================================================================== */
.wx-guide{
  position:fixed;top:64px;right:14px;z-index:40;width:min(430px,calc(100vw - 28px));
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--sh-16);
}
[data-theme="dark"] .wx-guide{background:rgba(38,38,38,.94)}
.wxg-arrow{
  position:absolute;right:8px;top:-42px;width:38px;height:44px;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));pointer-events:none;
}
[data-theme="dark"] .wxg-arrow{color:#f2f2f2}
.wxg-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.wxg-text b{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.35}
.wxg-text span{font-size:12px;color:var(--text-2);line-height:1.5}
.wxg-text i{font-style:normal;font-weight:700;color:var(--accent);letter-spacing:1px}
.wxg-link{
  align-self:flex-start;margin-top:2px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--accent);font-size:11.5px;text-decoration:underline;text-underline-offset:2px;
}
.wxg-qr{
  flex:0 0 auto;width:74px;height:74px;padding:4px;border:1px solid var(--stroke);
  border-radius:var(--r);background:#fff;cursor:pointer;box-shadow:var(--sh-2);
}
.wxg-qr img{display:block;width:100%;height:100%;image-rendering:pixelated}
.wxg-close{
  position:absolute;top:-10px;left:-10px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--stroke);background:var(--card-solid);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-4);
}
.wxg-close svg{width:12px;height:12px}
.wxg-close:hover{color:var(--text)}

/* 右上角 ··· 全屏引导：点任意处关闭，箭头指向微信系统菜单按钮 */
.wx-mask{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.74);
  display:flex;align-items:center;justify-content:center;padding:24px;
  -webkit-tap-highlight-color:transparent;
}
.wxm-arrow{
  position:absolute;top:8px;right:12px;width:60px;height:76px;color:#fff;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));pointer-events:none;
}
.wxm-card{
  width:min(340px,100%);background:var(--card-solid);border-radius:var(--r-lg);
  padding:20px;text-align:center;box-shadow:var(--sh-16);
}
.wxm-card b{display:block;font-size:16px;color:var(--text);margin-bottom:8px}
.wxm-card p{margin:0 0 16px;font-size:13px;line-height:1.7;color:var(--text-2)}
.wxm-card i{font-style:normal;font-weight:700;color:var(--accent);letter-spacing:1px}
.wxm-card .btn{width:100%;justify-content:center}

/* 微信传播面板：按钮按「微信里真能做成」的顺序排，二维码留白底提升长按识别率 */
.wx-share-body{display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center}
.wxs-file{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;
  background:var(--chip);border-radius:var(--r-md);min-width:0}
.wxs-file img{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.wxs-file div{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.wxs-file b{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wxs-file span{font-size:11px;color:var(--muted)}
.wx-big-btn{width:100%;justify-content:center;min-height:42px;font-size:14px}
.wxs-hint{margin:-4px 0 0;font-size:11px;line-height:1.5;color:var(--faint)}
.wxs-two{display:flex;gap:8px}
.wxs-two .btn{flex:1;justify-content:center;min-width:0;padding:0 8px;font-size:12.5px}
.wxs-divider{display:flex;align-items:center;gap:10px;margin:2px 0;color:var(--faint);font-size:11px}
.wxs-divider:before,.wxs-divider:after{content:"";flex:1;height:1px;background:var(--stroke)}
.wx-share-body > img{
  align-self:center;width:min(210px,60vw);height:auto;aspect-ratio:1;padding:10px;background:#fff;
  border:1px solid var(--stroke);border-radius:var(--r);image-rendering:pixelated;
}
.wxs-minor{
  align-self:center;margin-top:2px;padding:4px 8px;border:0;background:none;cursor:pointer;
  color:var(--accent);font-size:11.5px;text-decoration:underline;text-underline-offset:2px;
}
.wx-link-box{width:100%;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}
.wx-link-box textarea{
  width:100%;box-sizing:border-box;resize:none;background:var(--chip);border:1px solid var(--stroke);
  border-radius:var(--r-md);color:var(--text);font:11.5px/1.5 var(--mono);padding:8px;
  word-break:break-all;-webkit-user-select:text;user-select:text;
}
.wx-link-box span{font-size:11px;color:var(--faint)}

@media (max-width:640px){
  .wx-guide{top:62px;right:10px;left:10px;width:auto;padding:10px 12px;gap:10px}
  .wxg-arrow{right:6px;top:-38px;width:32px;height:38px}
  .wxg-text b{font-size:12.5px}
  .wxg-qr{width:64px;height:64px}
  .wxm-arrow{right:8px;width:48px;height:62px}
}

/* ---------------- 左导航 ---------------- */
.nav{
  display:flex;flex-direction:column;gap:6px;overflow:auto;padding:10px 8px;
  background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--stroke);
}
.nav-title{font-size:12px;font-weight:600;color:var(--faint);padding:4px 10px;letter-spacing:.02em}
.nav-group{display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.nav-group + .nav-group{border-top:1px solid var(--stroke-3);padding-top:8px}
.nav-item{
  position:relative;display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;width:100%;
  border:0;border-radius:var(--r);background:transparent;color:var(--text-2);font-size:14px;
  text-align:left;cursor:pointer;transition:background .12s,color .12s;
}
.nav-item svg{width:16px;height:16px;flex:0 0 auto;color:var(--muted)}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-item.on svg{color:var(--accent)}
.nav-item.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:2px;background:var(--accent)}
.nav-item .kbd{margin-left:auto;font:11px/1 var(--mono);color:var(--faint)}
.report-btn{
  margin-top:auto;flex:0 0 auto;border-radius:var(--r);
  background:linear-gradient(180deg,#fff6f4,#ffefe9);
  color:#c25e17;font-weight:650;
  border:1px solid rgba(194,94,23,.22);
  box-shadow:0 1px 2px rgba(194,94,23,.08);
}
.report-btn svg{color:#e07b2a}
.report-btn:hover{background:linear-gradient(180deg,#ffede6,#ffe4d8);color:#a94e0f;border-color:rgba(194,94,23,.36)}
.report-btn:hover svg{color:#d96c1c}
[data-theme="dark"] .report-btn{
  background:linear-gradient(180deg,rgba(255,150,80,.16),rgba(255,130,60,.12));
  color:#ffb27a;border-color:rgba(255,150,80,.32);
}
[data-theme="dark"] .report-btn svg{color:#ffa05e}
[data-theme="dark"] .report-btn:hover{background:rgba(255,150,80,.24);color:#ffc59b}

/* 分享按钮：品牌绿，与报告异常的橙红区分；在报告异常上方 */
.share-btn{
  flex:0 0 auto;margin-bottom:6px;border-radius:var(--r);
  background:linear-gradient(180deg,#eefbf3,#e4f7ec);
  color:#12854a;font-weight:650;
  border:1px solid rgba(18,133,74,.22);
  box-shadow:0 1px 2px rgba(18,133,74,.08);
}
.share-btn svg{color:#1aa35d}
.share-btn:hover{background:linear-gradient(180deg,#dff6e9,#d2f1df);color:#0c7340;border-color:rgba(18,133,74,.36)}
.share-btn:hover svg{color:#159a55}
[data-theme="dark"] .share-btn{
  background:linear-gradient(180deg,rgba(61,220,132,.16),rgba(61,220,132,.10));
  color:#6fe0a0;border-color:rgba(61,220,132,.32);
}
[data-theme="dark"] .share-btn svg{color:#4fd68d}
[data-theme="dark"] .share-btn:hover{background:rgba(61,220,132,.24);color:#8cecb6}

/* ---------------- 中央区 ---------------- */
.center{display:flex;flex-direction:column;gap:0;min-width:0;min-height:0;background:#ffffff;
  border-right:1px solid var(--stroke)}

.canvas{flex:1;min-height:0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:0}
.canvas.no-thumbs{grid-template-columns:minmax(0,1fr)}

/* 缩略图列 */
.thumbs{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:#ffffff;
  border-right:1px solid var(--stroke);
}
.thumbs-head{display:flex;align-items:center;justify-content:space-between;gap:4px;
  height:45px;padding:0 10px;flex:0 0 auto;box-sizing:border-box;
  border-bottom:1px solid var(--stroke-3);font-size:11px;color:var(--muted);font-weight:600}
.thumbs-head .n{font-weight:400;color:var(--faint)}
/* 文件列表层（批量打开时显示在页面缩略图上方） */
.file-list-head{border-bottom:1px solid var(--stroke-3)}
.file-list{display:flex;flex-direction:column;gap:4px;padding:8px;overflow:auto;min-height:0;max-height:40%;
  flex:0 0 auto;border-bottom:1px solid var(--stroke-3)}
.file-list:empty{display:none}
.file-item{
  position:relative;display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;
  border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--text-2);
  font-size:12px;text-align:left;cursor:pointer;transition:background .12s,color .12s,border-color .12s;
}
.file-item:hover{background:var(--hover)}
.file-item.on{background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent);font-weight:600}
.file-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
/* 批量列表：一行一个文件，副行显示页数；右上角 × 只从会话里移除，不动本地文件 */
.file-list-head .file-clear{width:22px;height:22px;margin-left:2px;flex:0 0 auto}
.file-list-head .file-clear svg{width:12px;height:12px}
.file-row{position:relative;display:flex;min-width:0}
.file-row .file-item{flex:1;min-width:0;width:auto;flex-direction:column;align-items:flex-start;gap:2px;padding-right:22px}
.file-item-meta{font-size:10px;color:var(--faint);line-height:1.2;white-space:nowrap}
.file-item-del{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:0;border-radius:4px;background:transparent;
  color:var(--faint);font-size:15px;line-height:1;cursor:pointer;opacity:.35;transition:opacity .12s;
}
.file-row:hover .file-item-del,.file-item-del:focus-visible{opacity:1}
.file-item-del:hover{background:var(--hover);color:var(--err)}
body.share-mode .file-list,body.share-mode .file-switch{display:none!important}
@media (max-width:640px){.file-item-del{opacity:.65}}
.page-list{display:flex;flex-direction:column;gap:8px;padding:8px;overflow:auto;min-height:0}
.page-item{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;
  border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--text);
  cursor:pointer;width:100%;transition:background .12s,border-color .12s;
}
.page-item:hover{background:var(--hover)}
.page-item.on{background:var(--accent-soft);border-color:var(--accent-soft-2)}
.page-item img,.page-item .ph{
  width:64px;height:84px;object-fit:contain;border-radius:3px;background:var(--layer);
  border:1px solid var(--stroke);box-shadow:var(--sh-2);display:block;
}
.page-item .t{font-size:10.5px;color:var(--muted);line-height:1}
.page-item.on .t{color:var(--accent);font-weight:600}

/* 画布 */
.workspace{
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative;
  background:#ffffff;
}
.toolbar{
  display:flex;align-items:center;gap:4px;padding:6px 8px;flex:0 0 auto;flex-wrap:nowrap;overflow:visible;
  border-bottom:1px solid var(--stroke-3);
}
.toolbar .sp{flex:1}
.zoom-btn{
  min-width:56px;height:28px;padding:0 8px;border:1px solid var(--stroke);border-radius:var(--r-sm);
  background:var(--layer);color:var(--text);font:600 12px/1 var(--mono);cursor:pointer;
  box-shadow:var(--sh-2);
}
.zoom-btn:hover{background:var(--hover)}
/* 窄屏文件切换下拉：缩略图列收起后仍能换文件 */
.file-switch{
  height:28px;max-width:150px;min-width:0;flex:0 1 130px;margin-right:4px;padding:0 6px;
  border:1px solid var(--stroke);border-radius:var(--r-sm);background:var(--layer);
  color:var(--text);font-size:11.5px;cursor:pointer;
}
@media (max-width:640px){.file-switch{flex-basis:96px;max-width:104px;font-size:11px}}
/* 达到本窗口绘制上限时的标记 */
.zoom-btn.at-limit{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* 高倍率视图提示：放大到局部后视野可能只剩一块纯色/空白，给明确出口。
   z-index 12 > 竖条 10 / 结果卡 9 / panLayer 4，但低于抽屉与弹层。 */
.zoom-hint{
  position:absolute;left:50%;top:30px;transform:translateX(-50%);z-index:12;
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 108px);
  padding:5px 6px 5px 10px;border:1px solid var(--stroke-2);border-radius:999px;
  background:var(--card-solid);box-shadow:var(--sh-8);color:var(--text-2);
  font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;
}
.zoom-hint.hidden{display:none}
.zoom-hint-icon{display:inline-flex;flex:0 0 auto;width:14px;height:14px;color:var(--accent)}
.zoom-hint-icon svg{width:14px;height:14px}
.zoom-hint button{
  flex:0 0 auto;border:0;border-radius:999px;padding:6px 11px;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:650;line-height:1;
  cursor:pointer;white-space:nowrap;
}
.zoom-hint button:hover{background:var(--accent-hover)}
.stage{
  flex:1;min-height:0;position:relative;overflow:hidden;cursor:grab;user-select:none;
  background:#ffffff;
}
.stage.panning{cursor:grabbing}
.stage.panning *{cursor:grabbing!important}
/* 选择对象模式：鼠标变指针（箭头），可点击元素；不做平移。 */
.stage.select-mode{cursor:default}
.stage.select-mode *{cursor:default!important}
.stage.measure-mode,.stage.measure-mode *,
.stage.eyedrop-mode,.stage.eyedrop-mode *{cursor:crosshair!important}
.pan-layer{position:absolute;inset:0;z-index:4;pointer-events:none;cursor:grab;touch-action:none}
.pan-layer.active{pointer-events:auto}
.pan-layer.panning{cursor:grabbing}
.pan-layer.no-pan{pointer-events:none!important}
.stage-inner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px;
  box-sizing:border-box;transform:translate3d(0,0,0);will-change:transform;
}
.paper{
  position:relative;flex:0 0 auto;background:#fff;border-radius:2px;
  box-shadow:0 6px 24px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.1);
}
.paper img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.page-svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.page-svg svg{display:block;width:100%;height:100%;overflow:visible}
#overlay{position:absolute;inset:0;pointer-events:none}
.bbox{position:absolute;border:1.5px solid var(--accent);background:rgba(47,191,113,.12);border-radius:1px}
.bbox::after{content:"";position:absolute;right:-4px;bottom:-4px;width:7px;height:7px;
  background:var(--accent);border:1px solid #fff;border-radius:1px}
.stage.drop-over{outline:2px dashed var(--accent);outline-offset:-8px;background:var(--accent-soft)}

/* ==========================================================================
   精准读稿：标尺 / 测量 / 取色 / 画布内尺寸标签
   坐标基座统一是「页面英寸」：paper 的屏幕矩形 ÷ pageW()/pageH()，
   所以缩放、平移、切页、SVG/PNG 两种渲染形态都能用同一套换算。
   ========================================================================== */
.tool-sep{width:1px;height:18px;background:var(--stroke-2);margin:0 4px;flex:0 0 auto}

/* ==========================================================================
   左侧竖向工具条（画板操作）
   占原竖向标尺那一条位置；标尺由 drawRulers 把 rulerV 整体右移一个工具条宽度。
   它是 stage 内的绝对定位浮层，不动 stage-inner / paper 的布局，
   因此「paper 屏幕矩形 ÷ 页面英寸」的坐标基座、命中测试、洋葱皮套准全部不变。
   竖向标尺的刻度沿 y 轴，整体 x 平移不影响刻度值与页面顶部的对齐。
   ========================================================================== */
.tool-rail{
  position:absolute;left:0;top:22px;z-index:10;
  width:40px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 0 8px;
  background:rgba(255,255,255,.94);
  border-right:1px solid var(--stroke-2);
  border-bottom-right-radius:9px;
  box-shadow:2px 2px 9px rgba(20,40,30,.07);
  max-height:calc(100% - 22px);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-webkit-user-select:none;user-select:none;
}
.tool-rail::-webkit-scrollbar{display:none}
[data-theme="dark"] .tool-rail{background:rgba(34,34,34,.94);box-shadow:2px 2px 9px rgba(0,0,0,.30)}
.rail-btn{width:30px;height:30px;border-radius:7px}
.rail-btn svg{width:16px;height:16px}
.rail-sep{width:20px;height:1px;flex:0 0 auto;background:var(--stroke-2);margin:4px 0}
.rail-featured{color:var(--accent)}
.rail-featured.on{background:var(--accent);color:#fff}
.rail-btn.has-notes{position:relative}
.rail-btn.has-notes::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;
  border-radius:50%;background:#f2603c;border:1px solid #fff}
/* 画布进入 crosshair 模式时，工具条上的按钮仍应保持手型。
   用 id 提高特异性，压过 .stage.marquee-mode * 之类的 !important 规则。 */
#toolRail,#toolRail *{cursor:pointer!important}

/* 分享态 / 微信：只留访客核稿要用的三件（框选看尺寸、批注、叠页），并高亮 */
body.share-mode .tool-rail [data-tool="pan"],
body.share-mode .tool-rail [data-tool="select"],
body.share-mode .tool-rail [data-act="ruler"],
body.share-mode .tool-rail [data-tool="measure"],
body.share-mode .tool-rail [data-tool="eyedrop"],
body.share-mode .tool-rail [data-act="clear"],
body.share-mode .tool-rail .rail-sep{display:none!important}
body.share-mode .tool-rail [data-tool="marquee"],
body.share-mode .tool-rail [data-act="dim"],
body.share-mode .tool-rail [data-tool="annot"],
body.share-mode .tool-rail [data-act="onion"]{
  border-color:rgba(47,191,113,.38);color:var(--accent);background:var(--accent-soft)
}
body.share-mode .tool-rail [data-tool="marquee"].on,
body.share-mode .tool-rail [data-act="dim"].on,
body.share-mode .tool-rail [data-tool="annot"].on{background:var(--accent);color:#fff}
@media (max-width:640px){
  .tool-rail{width:36px;padding:4px 0 6px;gap:1px}
  .rail-btn{width:28px;height:28px}
  .rail-btn svg{width:15px;height:15px}
  body.share-mode .tool-rail{max-height:calc(100% - 22px - var(--share-bar-h,74px))}
  /* 手机分享态顶栏的框选/叠页/批注与左侧竖条完全重复，收起顶部，
     把有限的一行留给缩放；桌面顶部三处入口照常保留。 */
  body.share-mode .toolbar #btnMarquee,
  body.share-mode .toolbar #btnDim,
  body.share-mode .toolbar .onion-entry,
  body.share-mode .toolbar .annot-entry{display:none!important}
  .mc-hint{display:none}   /* 手机结果卡把一行让给「标记尺寸 / 复制尺寸」两个操作 */
}

.ruler{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;
  -webkit-user-select:none;user-select:none}
.ruler-unit{
  position:absolute;top:3px;left:3px;z-index:8;width:23px;height:16px;padding:0;
  border:1px solid var(--stroke-2);border-radius:4px;background:var(--card-solid);
  color:var(--muted);font-size:9px;font-weight:700;line-height:14px;text-align:center;cursor:pointer;
}
.ruler-unit:hover{color:var(--accent);border-color:var(--accent)}
.ruler-cursor{position:absolute;z-index:6;pointer-events:none;background:rgba(242,96,60,.42)}
.ruler-cursor-h{left:0;width:100%;height:1px}
.ruler-cursor-v{top:0;width:1px;height:100%}
.ruler-coord{
  position:absolute;right:10px;bottom:10px;z-index:7;pointer-events:none;
  padding:4px 9px;border-radius:999px;background:rgba(27,27,27,.8);color:#fff;
  font:11px/1.4 var(--mono);letter-spacing:.2px;
}
[data-theme="dark"] .ruler-coord{background:rgba(0,0,0,.84)}

.measure-layer{position:absolute;inset:0;width:100%;height:100%;z-index:3;
  pointer-events:none;overflow:visible}
.measure-halo{stroke:rgba(255,255,255,.92);stroke-width:4.5;fill:none;vector-effect:non-scaling-stroke}
.measure-line{stroke:#f2603c;stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke}
.measure-cap{stroke:#f2603c;stroke-width:1.8;fill:none;vector-effect:non-scaling-stroke}
.measure-label{fill:#b93b18;font:700 11px var(--mono);paint-order:stroke;
  stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.color-pick-dot{fill:#fff;stroke:#f2603c;stroke-width:2;vector-effect:non-scaling-stroke}

/* --------------------------------------------------------------------------
   自动尺寸标记（CorelDRAW 式水平 / 垂直标注）
   和手动测量线共用 measureLayer，坐标都是 paper 屏幕像素；线宽用
   vector-effect:non-scaling-stroke，缩放时只重画、不变粗。
   .dim-u 是框选多个元素时的「整体」标注，换色以免和逐项标注混读。
   -------------------------------------------------------------------------- */
.dim-ext{stroke:#f2603c;stroke-width:1;opacity:.72;fill:none;vector-effect:non-scaling-stroke}
.dim-halo{stroke:rgba(255,255,255,.92);stroke-width:4;fill:none;vector-effect:non-scaling-stroke}
.dim-line{stroke:#f2603c;stroke-width:1.35;fill:none;vector-effect:non-scaling-stroke}
.dim-arrow{fill:#f2603c}
.dim-label{fill:#a8350f;font:700 11px var(--mono);paint-order:stroke;
  stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.dim-u .dim-ext{stroke:#1f9d66}
.dim-u .dim-line{stroke:#1f9d66;stroke-dasharray:5 3}
.dim-u .dim-arrow{fill:#1f9d66}
.dim-u .dim-label{fill:#126b45}
/* 自动标注开启时，选中框自带的 W×H 小标签让位给规范的横 / 纵标注线 */
#overlay.dim-active .bbox-size{display:none!important}
/* 开启态统一实心主色 + 白图标；id 选择器顺带压过分享态入口的浅绿高亮底色。
   注意 .icon-btn 有 0.12s 颜色过渡：刚点击就截图 / 读 computed 会拿到过渡起始值，
   看起来像「图标不见了」，等 200ms 后即为正常的白图标实心绿底。 */
#btnDim.on,#toolRail [data-act="dim"].on,.dim-entry.on{
  background:var(--accent);color:#fff;border-color:var(--accent)
}
.mc-foot #mcDim.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 点取/选中时，尺寸直接标在框上，不必切到右侧检查器 */
.bbox-size{
  position:absolute;left:0;top:0;transform:translateY(-100%);margin-top:-5px;
  padding:2px 7px;border-radius:4px;background:var(--accent);color:#fff;
  font:700 10.5px/1.45 var(--mono);white-space:nowrap;pointer-events:none;
  box-shadow:var(--sh-2);
}
.bbox-size.small{transform:none;margin-top:2px;margin-left:2px}

/* ==========================================================================
   框选元素看尺寸
   草稿框 / 命中框 / 整体框都按 viewBox 百分比定位，与 .bbox 同一套 SVG 用户坐标
   （1in = 300），所以缩放、平移、切取景都不需要重算命中结果。
   ========================================================================== */
.marquee-draft{position:absolute;z-index:5;pointer-events:none;
  border:1.5px dashed var(--accent);background:rgba(47,191,113,.10);border-radius:2px}
.marquee-draft-size{position:absolute;left:0;top:0;transform:translateY(-100%);margin-top:-5px;
  padding:2px 7px;border-radius:4px;background:var(--accent);color:#fff;
  font:700 10.5px/1.45 var(--mono);white-space:nowrap}
.bbox.marquee-item{border:1px solid rgba(47,191,113,.85);background:rgba(47,191,113,.07);border-radius:1px}
.bbox.marquee-item::after{display:none}
.bbox.marquee-item.is-focus{border:2px solid #f2603c;background:rgba(242,96,60,.14)}
.bbox.marquee-item .bbox-size{background:rgba(31,45,40,.92);font-size:9.5px;padding:1px 5px}
.bbox.marquee-union{border:1.5px dashed #1f9d66;background:transparent}
.bbox.marquee-union::after{display:none}
/* 整体框常和第一个命中元素共用左上角：标签上移一行 + 换色，避免盖住元素自己的尺寸 */
.bbox.marquee-union > .bbox-size.union-size{margin-top:-26px;background:#1f9d66}
.bbox.marquee-union > .bbox-size.union-size.small{transform:none;margin-top:24px;margin-left:0}
.marquee-badge{position:absolute;right:0;bottom:0;transform:translateY(100%);margin-top:3px;
  padding:2px 7px;border-radius:4px;background:#1f9d66;color:#fff;
  font:700 10px/1.45 var(--mono);white-space:nowrap}

.marquee-card{position:absolute;right:12px;bottom:12px;z-index:9;width:250px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:8px;padding:11px;
  border:1px solid var(--stroke-2);border-radius:var(--r-lg);
  background:var(--card-solid);box-shadow:var(--sh-16);max-height:min(46vh,380px)}
.mc-head{display:flex;align-items:center;gap:7px}
.mc-head b{font-size:12px;color:var(--text);font-weight:650}
.mc-count{flex:1;font-size:11px;color:var(--muted);font-family:var(--mono)}
.mc-unit{flex:0 0 auto;min-width:26px;height:20px;padding:0 5px;border:1px solid var(--stroke-2);
  border-radius:4px;background:var(--card-solid);color:var(--muted);
  font:700 10px var(--mono);cursor:pointer}
.mc-unit:hover{color:var(--accent);border-color:var(--accent)}
.mc-head .icon-btn{width:20px;height:20px;flex:0 0 auto}
.mc-head .icon-btn svg{width:11px;height:11px}
.mc-total{padding:7px 9px;border-radius:var(--r-md);background:var(--accent-soft);
  font:700 11.5px/1.5 var(--mono);color:var(--text)}
.mc-pos{margin-top:2px;font:400 10px/1.4 var(--mono);color:var(--muted)}
.mc-list{overflow:auto;display:flex;flex-direction:column;gap:3px;min-height:0;
  -webkit-user-select:none;user-select:none}
.mc-row{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:5px;
  font-size:11px;cursor:pointer;color:var(--text)}
.mc-row:hover{background:var(--hover)}
.mc-row.is-focus{background:var(--accent-soft);color:var(--accent)}
.mc-no{width:17px;height:17px;flex:0 0 auto;border-radius:4px;background:var(--stroke-2);
  color:var(--muted);font:700 10px/17px var(--mono);text-align:center}
.mc-row.is-focus .mc-no{background:var(--accent);color:#fff}
.mc-type{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-size{font:700 10.5px var(--mono);white-space:nowrap}
.mc-foot{display:flex;align-items:center;gap:8px}
.mc-hint{flex:1;font-size:10px;color:var(--faint);line-height:1.4}
.mc-foot .btn{flex:0 0 auto}
.stage.marquee-mode,.stage.marquee-mode *{cursor:crosshair!important}
.stage.marquee-mode .marquee-card,.stage.marquee-mode .marquee-card *{cursor:default!important}
.stage.marquee-mode .mc-row{cursor:pointer!important}

.color-card{
  position:absolute;z-index:9;width:190px;padding:10px;border:1px solid var(--stroke);
  border-radius:var(--r-md);background:var(--card-solid);box-shadow:var(--sh-16);
}
.cc-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.cc-head b{flex:1;font-size:12px;color:var(--text)}
.cc-head .icon-btn{width:20px;height:20px;flex:0 0 auto}
.cc-head .icon-btn svg{width:11px;height:11px}
.cc-swatch{width:28px;height:28px;flex:0 0 auto;border-radius:5px;
  border:1px solid var(--stroke-2);background:#000}
.cc-rows{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.cc-rows > div{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.cc-rows span{color:var(--muted)}
.cc-rows code{font:11px var(--mono);color:var(--text);
  -webkit-user-select:text;user-select:text}   /* 剪贴板不可用时可手动选中复制 */
.color-card .btn{width:100%;justify-content:center}
.cc-note{margin-top:7px;font-size:10.5px;line-height:1.45;color:var(--faint)}

/* ==========================================================================
   画板批注与反馈闭环
   与测量层共用「页内英寸」坐标；批注用 canvas 画，屏幕与导出图共用 paintAnnots，
   避免两套绘制逻辑漂移。与读稿工具不同，批注在分享落地页 / 微信里刻意保留：
   访客圈注后把问题反馈给作者，是传播链路的终点。
   ========================================================================== */
.annot-layer{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.stage.annot-mode,.stage.annot-mode *{cursor:crosshair!important}
.annot-entry{margin-left:6px}
body.share-mode .annot-entry{
  display:inline-flex!important;border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft);font-weight:650;
}

.annot-panel{
  position:fixed;top:62px;right:16px;z-index:45;width:296px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:9px;padding:12px;
  border:1px solid var(--stroke-2);border-radius:var(--r-lg);
  background:var(--card-solid);box-shadow:var(--sh-16);
  max-height:calc(100vh - 88px);
}
.ap-head{display:flex;align-items:center;gap:8px}
.ap-head b{font-size:13px;font-weight:700;color:var(--text)}
.ap-count{flex:1;font-size:11px;color:var(--muted)}
.ap-head .icon-btn{width:24px;height:24px}
.ap-tools{display:flex;flex-direction:column;gap:8px}
.ap-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ap-tool{
  padding:6px 2px;font-size:10.5px;line-height:1.2;white-space:nowrap;
  border:1px solid var(--stroke-2);border-radius:var(--r);background:var(--layer-2);
  color:var(--muted);cursor:pointer;
}
.ap-tool:hover{color:var(--text);border-color:var(--accent)}
.ap-tool.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.ap-colors{display:flex;gap:9px;align-items:center;padding:0 2px}
.ap-color{
  width:19px;height:19px;padding:0;border-radius:50%;background:var(--c);cursor:pointer;
  border:2px solid var(--card-solid);box-shadow:0 0 0 1px var(--stroke-2);
}
.ap-color.on{box-shadow:0 0 0 2px var(--c)}
.ap-tip{
  font-size:10.5px;line-height:1.5;color:var(--faint);padding:6px 8px;
  background:var(--chip);border-radius:var(--r-md);
}
.ap-list{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0;max-height:220px}
.ap-empty{font-size:11px;color:var(--faint);text-align:center;padding:12px 4px;line-height:1.6}
.ap-item{
  display:flex;align-items:flex-start;gap:6px;padding:6px;
  border:1px solid var(--stroke-2);border-radius:var(--r-md);background:var(--layer-2);
}
.ap-no{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;color:#fff;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.ap-item input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font-size:11px;padding:2px 0;outline:none;
}
.ap-item input::placeholder{color:var(--faint)}
.ap-del{
  flex:0 0 auto;border:0;background:transparent;color:var(--faint);
  cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;
}
.ap-del:hover{color:#e2483b}
.ap-actions{display:flex;gap:6px}
.ap-actions .btn{flex:1;justify-content:center;min-width:0}

.fb-body{display:flex;flex-direction:column;gap:8px;align-items:center}
.fb-body > img{
  max-width:100%;max-height:52vh;border:1px solid var(--stroke-2);
  border-radius:var(--r);background:#fff;display:block;
}
.fb-hint{margin:0;font-size:11.5px;line-height:1.6;color:var(--muted);text-align:center}

@media (max-width:640px){
  .annot-panel{
    top:auto;left:8px;right:8px;bottom:74px;width:auto;
    max-height:min(52vh,420px);padding:10px;gap:7px;
  }
  .ap-list{max-height:140px}
  .annot-entry{padding:4px 7px;font-size:11px;margin-left:2px}
  html.in-wechat .annot-panel{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* ==========================================================================
   多页洋葱皮对比
   叠层放在底图之上、测量/批注之下。对比页 SVG 与当前页共用同一个 viewBox，
   所以「100% 宽高」在这里等价于同一套物理英寸坐标，不需要额外换算对齐。
   ========================================================================== */
.onion-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.onion-layer svg{display:block;width:100%;height:100%;overflow:visible}
.onion-layer img{display:block;width:100%;height:100%;object-fit:contain}
.onion-layer.mode-multiply{mix-blend-mode:multiply}
.onion-diff{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

.onion-panel{
  position:fixed;top:62px;left:16px;z-index:45;width:302px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:9px;padding:12px;overflow:auto;
  border:1px solid var(--stroke-2);border-radius:var(--r-lg);
  background:var(--card-solid);box-shadow:var(--sh-16);
  max-height:calc(100vh - 88px);
}
.op-head{display:flex;align-items:center;gap:8px}
.op-head b{font-size:13px;font-weight:700;color:var(--text);flex:0 0 auto}
.op-badge{flex:1;min-width:0;font:10.5px var(--mono);color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-head .icon-btn{width:24px;height:24px;flex:0 0 auto}
.op-pager{display:flex;align-items:center;gap:5px}
.op-pager .icon-btn{width:26px;height:26px;flex:0 0 auto}
.op-pager select{
  flex:1;min-width:0;height:27px;padding:0 6px;font-size:11.5px;
  border:1px solid var(--stroke-2);border-radius:var(--r);
  background:var(--layer-2);color:var(--text);
}
.op-pager .btn{flex:0 0 auto;padding:4px 7px;font-size:11px}
.op-line{display:flex;align-items:center;gap:8px}
.op-line label{flex:0 0 auto;font-size:11px;color:var(--muted)}
.op-line input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.op-val{flex:0 0 34px;text-align:right;font:10.5px var(--mono);color:var(--text-2)}
.op-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.op-mode{
  padding:6px 2px;font-size:11px;line-height:1.2;white-space:nowrap;
  border:1px solid var(--stroke-2);border-radius:var(--r);
  background:var(--layer-2);color:var(--muted);cursor:pointer;
}
.op-mode:hover{color:var(--text);border-color:var(--accent)}
.op-mode.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.op-mode:disabled{opacity:.45;cursor:not-allowed}
.op-align{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto minmax(0,1fr) auto;
  align-items:center;gap:4px}
.op-align label{font-size:10.5px;color:var(--muted);white-space:nowrap}
.op-align input{
  width:100%;min-width:0;height:24px;padding:0 4px;box-sizing:border-box;
  border:1px solid var(--stroke-2);border-radius:var(--r);
  background:var(--layer-2);color:var(--text);font:11px var(--mono);text-align:center;
}
.op-align > span{font-size:10px;color:var(--faint)}
.op-align .btn{grid-column:1 / -1;justify-content:center;padding:4px;font-size:10.5px}
.op-stat{
  padding:7px 9px;border-radius:var(--r-md);font-size:11px;line-height:1.5;
  background:var(--accent-soft);color:var(--accent);border:1px solid rgba(47,191,113,.28);
}
.op-stat.warn{background:#fff2e8;border-color:#f0b48c;color:#a4501c}
[data-theme="dark"] .op-stat.warn{background:#3a251b;border-color:#6b3d25;color:#f0b48c}

@media (max-width:640px){
  .onion-panel{
    top:auto;left:8px;right:8px;bottom:74px;width:auto;
    max-height:min(52vh,420px);padding:10px;gap:7px;
  }
  html.in-wechat .onion-panel{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
/* 分享落地页：叠页对比是纯查看增强（不是编辑器能力），与批注入口一样保留 */
body.share-mode .onion-entry{border-color:var(--accent);color:var(--accent)}

/* 分享落地页保持纯净：读稿工具与标尺都不该出现在访客面前 */
body.share-mode #btnRuler,
body.share-mode #btnMeasure,
body.share-mode #btnEyedrop,
body.share-mode #btnClearMeasure,
body.share-mode .tool-sep,
body.share-mode .ruler,
body.share-mode .ruler-unit,
body.share-mode .ruler-coord,
body.share-mode .color-card{display:none!important}

/* 框选只是「点选看尺寸」的多选版本，属纯查看增强：分享落地页 / 微信里和批注、叠页一样保留。
   结果卡自带 mm/in 切换，不依赖分享态隐藏掉的标尺单位按钮。 */
body.share-mode .marquee-entry,
body.share-mode .dim-entry{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* 自动标记是「点选看尺寸」的可视化增强，访客核稿也要用，分享态保留并高亮 */
body.share-mode #btnDim.on,
body.share-mode #toolRail [data-act="dim"].on,
body.share-mode .dim-entry.on{background:var(--accent);color:#fff}
body.share-mode .marquee-card{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
@media (max-width:720px){
  .marquee-card{right:8px;left:8px;bottom:10px;width:auto;max-height:min(40vh,300px)}
  body.share-mode .marquee-card{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  html.in-wechat .marquee-card{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* 空状态 */
.empty{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:26px 20px;border-radius:var(--r-xl);border:1.5px dashed var(--stroke-2);
  background:linear-gradient(180deg,#f4fbf4 0%,#eaf6ea 100%);
  box-shadow:0 10px 32px rgba(47,191,113,.10),0 2px 8px rgba(0,0,0,.04);
  text-align:center;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.empty:hover{border-color:var(--accent);box-shadow:0 16px 40px rgba(47,191,113,.16),0 4px 12px rgba(0,0,0,.06)}
[data-theme="dark"] .empty{
  background:linear-gradient(180deg,#17331a 0%,#142b17 100%);
  box-shadow:0 10px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .empty:hover{box-shadow:0 16px 40px rgba(0,0,0,.55)}
.empty .hero-ico{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--accent-soft),#efe8fd);color:var(--accent);
  box-shadow:0 4px 14px rgba(47,191,113,.18)}
.empty .hero-ico svg{width:28px;height:28px}
.empty .big{font-size:20px;font-weight:650;color:var(--text);letter-spacing:.01em}
.empty .big code{font-family:var(--mono);font-size:.95em;color:var(--accent);background:var(--accent-soft);
  padding:1px 7px;border-radius:6px;font-weight:600}
.empty .hint{font-size:13.5px;color:var(--muted);line-height:1.8;max-width:540px}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin-top:4px}
.feature{
  display:flex;flex-direction:column;gap:5px;padding:11px;border-radius:var(--r);text-align:left;
  background:var(--layer-2);border:1px solid var(--stroke-2);
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  transition:box-shadow .15s,transform .15s,border-color .15s;
}
.feature:hover{box-shadow:0 6px 16px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.05);transform:translateY(-2px);border-color:var(--accent)}
.feature .fi{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent)}
.feature .fi svg{width:14px;height:14px}
.feature b{font-size:12.5px;font-weight:600}
.feature span{font-size:11.5px;color:var(--muted);line-height:1.5}

/* 状态栏 */
.statusbar{
  height:30px;display:flex;align-items:center;gap:10px;padding:0 10px;flex:0 0 auto;
  border-top:1px solid var(--stroke-3);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;
}
.statusbar .sp{flex:1}
.statusbar .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:5px}
.statusbar .dot.busy{background:var(--warn)}
.statusbar .dot.err{background:var(--err)}
.statusbar .svc{display:inline-flex;align-items:center;white-space:nowrap;color:var(--muted)}
.statusbar .svc .dot{margin-right:5px}
.pager{display:inline-flex;align-items:center;gap:2px}
.pager .lbl{min-width:52px;text-align:center;font:600 11.5px/1 var(--mono);color:var(--text-2)}
.pager button{width:24px;height:22px;border-radius:var(--r-sm)}

/* ---------------- 右侧检查器 ---------------- */
.inspector{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-left:1px solid var(--stroke);
}
.pivot{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--stroke-3);flex:0 0 auto}
.pivot-item{
  flex:1;height:30px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);
  font-size:12px;font-weight:500;cursor:pointer;transition:.12s;white-space:nowrap;
}
.pivot-item:hover{background:var(--hover);color:var(--text)}
.pivot-item.on{background:var(--layer);color:var(--text);font-weight:650;box-shadow:var(--sh-2)}
.pane{padding:12px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:10px}
.pane-title{font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.02em;
  display:flex;align-items:center;justify-content:space-between;gap:6px}
.pane-title .n{font-weight:400}
.kv{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px 8px;font-size:12px;align-items:start}
.kv dt{color:var(--muted);white-space:nowrap}
.kv dd{margin:0;color:var(--text);word-break:break-all}
.kv dd.mono{font-size:11.5px;color:var(--text-2)}
.rows{display:flex;flex-direction:column;gap:2px}
.row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r-sm);font-size:12px}
.row:hover{background:var(--hover)}
.row .row-main{flex:1;min-width:0}
.row .row-main b{display:block;font-size:12px;font-weight:550}
.row .row-main span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.row select{flex:0 0 auto}
.selbox{border:1px solid var(--stroke);border-radius:var(--r);padding:9px;font-size:11.5px;line-height:1.7;
  background:var(--layer-2)}
.selbox .mono{word-break:break-all;font-size:11px}
.meta{font-size:12px;display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
.meta b{color:var(--muted);font-weight:500}
.obj-list{display:flex;flex-direction:column;gap:1px;max-height:38vh;overflow:auto}
.obj-item{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:var(--r-sm);
  cursor:pointer;font-size:11.5px;background:none;border:0;text-align:left;color:var(--text);width:100%}
.obj-item:hover{background:var(--hover)}
.obj-item.on{background:var(--accent-soft);color:var(--accent)}
.obj-item .ty{color:var(--faint);font-size:10px;flex:0 0 auto}
.obj-item .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}
.obj-item .id{color:var(--faint);font:9.5px/1 var(--mono);flex:0 0 auto}
.text-list{display:flex;flex-direction:column;gap:1px;max-height:26vh;overflow:auto}
.text-list button{font-size:11.5px;text-align:left;padding:5px 7px;border:0;background:none;color:var(--text);
  border-radius:var(--r-sm);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-list button:hover{background:var(--hover)}
.warn{font-size:11px;color:var(--warn);background:rgba(157,93,0,.08);border:1px solid rgba(157,93,0,.2);
  border-radius:var(--r-sm);padding:7px 9px;line-height:1.6}
.note{font-size:10.5px;color:var(--faint);line-height:1.6}

/* ---------------- 浮层 ---------------- */
.toast{
  position:fixed;right:18px;bottom:22px;z-index:120;padding:10px 14px;border-radius:var(--r);
  background:var(--layer);color:var(--text);border:1px solid var(--stroke);box-shadow:var(--sh-8);
  font-size:12.5px;opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none;max-width:70vw;
}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:rgba(196,43,28,.35);color:var(--err)}
.busy{
  position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);
}
[data-theme="dark"] .busy{background:rgba(0,0,0,.5)}
.busy-box{
  background:var(--card-solid);border:1px solid var(--stroke);border-radius:var(--r-lg);
  padding:20px 26px;box-shadow:var(--sh-16);text-align:center;min-width:230px;
}
.spinner{width:26px;height:26px;border:3px solid var(--stroke-2);border-top-color:var(--accent);
  border-radius:50%;margin:0 auto 10px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.busy-box .msg{font-size:12.5px;color:var(--muted)}
/* 批量打开进度：toast/status 的过程文案会收敛成统一 AI 文案，细节在这里展示 */
.busy-box{max-width:min(360px,86vw)}
.batch-prog{margin-top:14px;padding-top:12px;border-top:1px solid var(--stroke-3);text-align:left}
.bp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text)}
.bp-top b{font:600 12px/1 var(--mono)}
.bp-cancel{
  padding:4px 8px;border:1px solid var(--stroke);border-radius:var(--r-sm);
  background:var(--layer);color:var(--text-2);font-size:11px;cursor:pointer;
}
.bp-cancel:hover{background:var(--hover);color:var(--text)}
.bp-cancel:disabled{opacity:.5;cursor:default}
.bp-name{margin-top:8px;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-bar{height:4px;margin-top:8px;border-radius:3px;background:var(--stroke-2);overflow:hidden}
.bp-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .18s}
.bp-stat{margin-top:7px;font-size:11px;color:var(--muted)}

.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:190px;z-index:60;padding:5px;
  background:var(--card-solid);border:1px solid var(--stroke);border-radius:var(--r);
  box-shadow:var(--sh-16);
}
.menu button{
  display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 9px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text);font-size:12.5px;text-align:left;cursor:pointer;
}
.menu button:hover{background:var(--hover)}
.menu button.on{color:var(--accent);font-weight:600}
.menu button.on::after{content:"✓";margin-left:auto;font-weight:700}
.menu button svg{width:14px;height:14px;color:var(--muted)}

.sheet{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.32);backdrop-filter:blur(3px);padding:20px}
.sheet-card{
  width:min(520px,100%);max-height:80vh;overflow:auto;background:var(--card-solid);
  border:1px solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--sh-16);padding:18px 20px;
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sheet-head b{font-size:14px;font-weight:650}
.sheet-body{font-size:12.5px;color:var(--text-2);line-height:1.9}
.sheet-body .line{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--stroke-3)}
.sheet-body .line:last-child{border-bottom:0}
.sheet-body kbd{font:11px/1 var(--mono);background:var(--chip);border:1px solid var(--stroke);
  border-radius:4px;padding:4px 7px;min-width:64px;text-align:center;color:var(--text-2)}
.sheet-body .line span{color:var(--muted)}

/* ---------------- 报告异常 ---------------- */
.report-drop{display:flex;flex-direction:row;align-items:center;gap:14px;
  padding:14px 16px;border:1.5px dashed var(--stroke);border-radius:var(--r-md);cursor:pointer;
  color:var(--muted);transition:border-color .15s,background .15s;background:var(--chip)}
.report-drop:hover,.report-drop.over{border-color:var(--accent);background:var(--chip-hover,var(--chip))}
.report-drop.has-file{border-color:var(--accent);border-style:solid;background:var(--accent-soft);padding:12px 14px}
.report-drop.has-file .report-drop-txt{color:var(--accent);font-weight:600}

/* 预览缩略图（已选文件时显示） */
.report-thumb{
  width:64px;height:64px;flex:0 0 auto;border-radius:8px;overflow:hidden;
  background:#fff;border:1px solid var(--stroke);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-2);
}
.report-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.report-thumb .ph{width:26px;height:26px;color:var(--accent)}

.report-drop-icon{color:var(--accent);flex:0 0 auto}
.report-drop-icon svg{width:26px;height:26px}
.report-drop-body{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left}
.report-drop-txt{font-size:13px;color:var(--muted)}
.report-drop-name{font-size:14px;font-weight:600;color:var(--text);word-break:break-all;line-height:1.4}
.report-drop-name .sz{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:4px}
.report-field{display:block;margin-top:12px}
.report-field>span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.report-field textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:60px;
  background:var(--chip);border:1px solid var(--stroke);border-radius:var(--r-md);
  color:var(--text-1);font:13px/1.6 var(--sans);padding:8px 10px}
.report-field textarea:focus{outline:none;border-color:var(--accent)}
#btnReportSend{margin-top:12px}
.report-status{margin-top:10px;font-size:12.5px;line-height:1.7;padding:8px 10px;border-radius:var(--r-md);
  background:var(--chip);word-break:break-all}
.report-status.busy{color:var(--accent)}
.report-status.ok{color:var(--ok, #18a058);background:var(--ok-bg, var(--chip))}
.report-status.err{color:var(--danger, #e5484d);background:var(--danger-bg, var(--chip))}
.report-status .mono{font-family:var(--mono);font-size:11px;color:inherit;word-break:break-all}
.report-status.hidden{display:none}

/* ---------------- 分享 ---------------- */
.share-status{margin-top:10px;font-size:12.5px;line-height:1.7;padding:8px 10px;border-radius:var(--r-md);
  background:var(--chip);word-break:break-all}
.share-status.busy{color:var(--accent)}
.share-status.ok{color:var(--ok, #18a058)}
.share-status.err{color:var(--danger, #e5484d)}
.share-status.hidden{display:none}
.share-result{margin-top:4px}
.share-url-row{display:flex;gap:6px}
.share-url-row input{
  flex:1;min-width:0;box-sizing:border-box;background:var(--chip);border:1px solid var(--stroke);
  border-radius:var(--r-md);color:var(--text-1);font:12px/1.5 var(--mono);padding:8px 10px;
}
.share-url-row input:focus{outline:none;border-color:var(--accent)}
.share-url-row .btn{flex:0 0 auto}
.share-result-row{display:flex;gap:8px;margin-top:8px}
.share-result-row .btn{flex:1;justify-content:center}

.share-ttl-row{display:flex;gap:8px;margin-top:6px}
.ttl-chip{height:30px;padding:0 14px;border-radius:var(--r);border:1px solid var(--stroke-2);
  background:var(--card-solid);color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.ttl-chip:hover{background:var(--hover)}
.ttl-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ttl-chip.locked{opacity:.45;cursor:not-allowed;position:relative}
.ttl-chip.locked::after{content:"专业版";font-size:10px;font-weight:600;color:var(--accent);margin-left:5px;background:var(--accent-soft);padding:0 5px;border-radius:4px}
.ttl-chip.locked:hover{background:var(--card-solid)}
.pro-tag{font-style:normal;font-size:10.5px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);padding:1px 7px;border-radius:999px;margin-left:6px}
.pro-tag.hidden{display:none}

/* ---------------- 会员中心 ---------------- */
.member-card{width:min(760px,100%)}
.member-body{padding-top:2px}

.member-hero{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:16px;
  background:var(--accent-soft);border:1px solid var(--stroke);border-radius:var(--r-lg)}
.member-avatar{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--card-solid);border:1px solid var(--stroke-2);color:var(--accent)}
.member-avatar svg{width:24px;height:24px}
.member-hero-txt{flex:1;min-width:0}
.member-name{font-size:15px;font-weight:650;color:var(--text);line-height:1.4}
.member-sub{font-size:12px;color:var(--muted);line-height:1.5}
.member-badge{flex:0 0 auto;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(47,191,113,.32)}
.member-login-btn{flex:0 0 auto;height:28px;padding:0 12px}

.member-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan{position:relative;display:flex;flex-direction:column;border:1px solid var(--stroke);
  border-radius:var(--r-lg);background:var(--layer-2);padding:16px 16px 14px;transition:transform .15s,border-color .15s,box-shadow .15s}
.plan:hover{transform:translateY(-2px);box-shadow:var(--sh-8)}
.plan.hot{border:1.5px solid var(--accent);background:var(--card-solid);box-shadow:0 0 0 3px var(--accent-soft)}
.plan-ribbon{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:700;letter-spacing:.5px;color:#fff;background:var(--accent);
  padding:2px 12px;border-radius:999px;box-shadow:0 1px 3px rgba(47,191,113,.4)}
.plan-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.plan-name{font-size:15px;font-weight:650;color:var(--text)}
.plan-price{font-size:22px;font-weight:700;color:var(--text);line-height:1}
.plan-price .per{font-size:11.5px;font-weight:400;color:var(--muted);margin-left:2px}
.plan-desc{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.6}
.plan-feats{list-style:none;margin:0 0 14px;padding:0;flex:1}
.plan-feats li{position:relative;font-size:12.5px;color:var(--text-2);line-height:1.7;
  padding:3px 0 3px 20px}
.plan-feats li::before{content:"";position:absolute;left:2px;top:10px;width:10px;height:10px;
  background:var(--accent-soft-2);border-radius:3px}
.plan-feats li::after{content:"";position:absolute;left:4.5px;top:8px;width:5px;height:3px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.plan-btn{width:100%;margin-top:auto}

.member-note{display:flex;gap:8px;align-items:flex-start;margin-top:16px;padding:10px 12px;
  background:var(--chip);border:1px solid var(--stroke-3);border-radius:var(--r-md);
  font-size:11.5px;color:var(--muted);line-height:1.7}.member-note svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent);margin-top:2px}

.member-table-wrap{margin-top:18px}
.member-table-title{font-size:13px;font-weight:650;color:var(--text);margin-bottom:8px}
.member-table{width:100%;border-collapse:collapse;font-size:12px}
.member-table th,.member-table td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--stroke-3)}
.member-table th{font-size:11.5px;font-weight:600;color:var(--muted)}
.member-table th:not(:first-child),.member-table td:not(:first-child){text-align:center}
.member-table td{color:var(--text-2)}
.member-table td:first-child{color:var(--text);font-weight:500}
.member-table td.on{color:var(--accent);font-weight:600}
.member-table tbody tr:last-child td{border-bottom:0}

.login-tip{margin:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.7}

/* 会员中心页签 */
.member-tabs{display:flex;gap:4px;margin-bottom:14px;padding:3px;border:1px solid var(--stroke-3);
  border-radius:var(--r-md);background:var(--chip)}
.member-tab{flex:1;height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.member-tab:hover{color:var(--text)}
.member-tab.on{background:var(--card-solid);color:var(--text);box-shadow:var(--sh-2)}
.member-pane{display:block}

/* 我的分享历史列表 */
.share-hist-tip{padding:26px 8px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.8}
.share-hist-list{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto}
.share-hist-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--layer-2)}
.share-hist-main{flex:1;min-width:0}
.share-hist-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-hist-meta{font-size:11px;color:var(--muted);margin:3px 0 5px}
.share-hist-url{font-size:11px;color:var(--text-2);line-height:1.5;word-break:break-all;
  background:var(--chip);border:1px solid var(--stroke-3);border-radius:6px;padding:6px 8px}
.share-hist-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.share-hist-actions .btn{height:26px;padding:0 10px;font-size:11.5px;white-space:nowrap}

@media (max-width:640px){
  .member-plans{grid-template-columns:1fr}
}

/* 分享海报 */
.poster-stage{display:flex;justify-content:center;align-items:center;min-height:280px;
  background:var(--chip);border:1px dashed var(--stroke-3);border-radius:var(--r-md);
  padding:16px;margin-bottom:12px;overflow:hidden}
.poster-loading{font-size:13px;color:var(--muted)}
.poster-img{max-height:420px;max-width:100%;border-radius:8px;box-shadow:var(--sh-2);
  display:block;object-fit:contain;-webkit-touch-callout:default}
.poster-actions{display:flex;gap:10px}
.poster-actions .btn{flex:1}
.poster-wx-tip{margin:-4px 0 12px;padding:9px 12px;border-radius:var(--r-md);
  background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;line-height:1.5;text-align:center}

/* ---------------- 响应式 ---------------- */
/* 分级折叠：判据是「展开三栏后画布工作区还剩多少」，不是拍脑袋的窗口宽度。
   三栏常驻时侧栏占 176+244、缩略图列 96 ⇒ 画布 = 窗口 - 516；
   要求画布至少 ~840 ⇒ 窗口 ≤1360 时先收右侧「文件信息」（最占地方、最先挡稿子）。
   只收右栏后画布 = 窗口 - 272；再低于 ~630 ⇒ 窗口 ≤900 连左侧「快捷操作」也收。
   宽屏 >1360 自动恢复三栏常驻。收起不是 display:none —— 顶栏按钮可呼出成抽屉。
   抽屉只改侧栏自身定位，不碰 stage-inner / paper ⇒ 页内英寸坐标基座不变。
   --topbar-h 由 JS 按实测顶栏高度同步，窄屏顶栏换行时抽屉不会顶到顶栏里。
   注意：1360 / 900 两个数字必须与 index-api.html 的 FOLD_INSP_BP / FOLD_NAV_BP 同步。 */
.drawer-btn{display:none}
.drawer-head{
  display:none;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;
  height:38px;padding:0 6px 0 10px;border-bottom:1px solid var(--stroke-3);
  font-size:12.5px;font-weight:650;color:var(--text-2)
}
.drawer-head .icon-btn{width:26px;height:26px}
.drawer-scrim{
  display:none;position:fixed;left:0;right:0;top:var(--topbar-h,56px);bottom:0;z-index:28;
  background:rgba(0,0,0,.30);
}
body.share-mode .drawer-btn,
body.share-mode .drawer-scrim{display:none!important}

/* 第一级：≤1360 —— 「文件信息」先折叠，左侧「快捷操作」仍常驻，画布立刻多出 244px */
@media (max-width:1360px){
  .shell{grid-template-columns:176px minmax(0,1fr)}
  .center{border-right:0}
  .shell .inspector{
    position:fixed;right:0;top:var(--topbar-h,56px);bottom:0;width:min(300px,86vw);z-index:46;
    background:var(--card-solid);box-shadow:var(--sh-16);
    visibility:hidden;transform:translateX(103%);
    transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;
  }
  body.insp-open .shell .inspector{
    transform:none;visibility:visible;transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s
  }
  body.insp-open .drawer-scrim{display:block}
  .drawer-btn[data-drawer="inspector"]{display:inline-flex}
  .inspector .drawer-head{display:flex}
  .inspector .pane[data-pane="info"] > .pane-title:first-child{display:none}
  /* 侧栏已自动折叠，工具栏的「显示/隐藏两侧面板」在这一级不再有意义 */
  #btnPanels{display:none}
}
@media (max-width:1120px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 第二级：≤900 —— 左侧「快捷操作」也折叠，画布占满整行 */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .shell .nav{
    position:fixed;left:0;top:var(--topbar-h,56px);bottom:0;width:min(240px,82vw);z-index:46;
    background:var(--card-solid);box-shadow:var(--sh-16);
    visibility:hidden;transform:translateX(-103%);
    transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;
  }
  body.nav-open .shell .nav{
    transform:none;visibility:visible;transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s
  }
  body.nav-open .drawer-scrim{display:block}
  .drawer-btn[data-drawer="nav"]{display:inline-flex}
  .nav .drawer-head{display:flex}
  .nav .drawer-head + .nav-group > .nav-title:first-child{display:none}
}
@media (max-width:860px){
  .shell{height:auto;overflow:auto}
  body{overflow:auto}
  .topbar{flex-wrap:wrap;height:auto;min-height:56px;padding:8px 10px;gap:8px}
  .brand{min-width:0}
  .topnav{order:3;flex:1 1 100%;margin-left:0}
  .cmdbar{width:130px}
  .cmdbar:focus-within{width:170px}
  .canvas{grid-template-columns:minmax(0,1fr)}
  .thumbs{display:none}
  .workspace{min-height:62vh}
}
/* 手机顶栏：两个抽屉入口加上原有控件会撑出横向滚动条。让右侧控件组占满整行、
   搜索框弹性收缩吸收余量，控件一个不少，也不会把 document 撑宽。 */
@media (max-width:640px){
  .top-right{flex:1 1 100%;min-width:0;max-width:100%;justify-content:flex-end;gap:4px}
  .top-right .cmdbar{flex:1 1 auto;width:auto;min-width:0}
  .top-right .cmdbar:focus-within{flex:1 1 auto;width:auto}
  .top-right .cmdbar kbd{display:none}
  .top-right .text-btn{padding:0 6px;font-size:12px;white-space:nowrap;flex:0 0 auto}
  /* 「快捷键」在左侧抽屉里有同名入口，手机顶栏不再重复占位 */
  .top-right #btnKeys{display:none}
  /* 高倍率提示条：窄屏收掉图标、放宽可用宽度，避免换行或压住左侧竖条 */
  .zoom-hint{top:34px;max-width:calc(100% - 52px);gap:6px;padding:5px 5px 5px 8px;font-size:11px}
  .zoom-hint-icon{display:none}
  .zoom-hint button{padding:6px 9px;font-size:11px}
}