*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --fg3:rgba(255,255,255,0.35); --fg4:rgba(255,255,255,0.2);
  --border:var(--border); --border2:var(--border2);
  --accent:#8b5cf6; --accent2:#a78bfa; --accent3:rgba(139,92,246,0.18);
  --panel-bg:rgba(24,24,38,0.96); --panel-border:var(--border2);
  --toolbar-bg:transparent; --grid-bg:#1e1e32;
  --scrollbar:var(--border2);
}
/* 暖阳米 */

.theme-warm{--bg:#d4cfc4;--bg2:#e8e0d4;--fg:#4a3f35;--fg2:#6b5d4e;--fg3:#8b7a6a;--fg4:#a89880;--border:rgba(0,0,0,0.06);--border2:rgba(0,0,0,0.08);--accent:#c7845a;--accent2:#d49a6a;--accent3:rgba(199,132,90,0.15);--panel-bg:rgba(240,232,220,0.96);--panel-border:rgba(0,0,0,0.08);--toolbar-bg:rgba(0,0,0,0.02);--grid-bg:#f0e8da;--scrollbar:rgba(0,0,0,0.1)}
/* 森林绿 */
.theme-forest{--bg:#0f1a14;--bg2:#16231b;--fg:#d4e8d0;--fg2:rgba(212,232,208,0.7);--fg3:rgba(212,232,208,0.35);--fg4:rgba(212,232,208,0.2);--border:var(--border);--border2:var(--border2);--accent:#4ade80;--accent2:#6ee7a0;--accent3:rgba(74,222,128,0.18);--panel-bg:rgba(15,26,20,0.96);--panel-border:var(--border2);--grid-bg:#16231b;--scrollbar:var(--border2)}
/* 星空紫 */
.theme-night{--bg:#0f0a2a;--bg2:#18133a;--fg:#d8d0f0;--fg2:rgba(216,208,240,0.7);--fg3:rgba(216,208,240,0.35);--fg4:rgba(216,208,240,0.2);--border:var(--border);--border2:var(--border2);--accent:#7c5cf0;--accent2:#9c7cf0;--accent3:rgba(124,92,240,0.18);--panel-bg:rgba(15,10,42,0.96);--panel-border:var(--border2);--grid-bg:#18133a;--scrollbar:var(--border2)}
/* 应用变量 */
body{background:var(--bg);color:var(--fg);font-family:-apple-system,sans-serif;height:100dvh;display:flex;flex-direction:column;overflow:hidden;user-select:none}
.header{flex-shrink:0;padding:6px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);min-height:40px}.header-title{flex:1;display:flex;align-items:center;gap:6px;min-width:0}.header-title h1{font-size:15px;font-weight:600;color:var(--fg2);flex-shrink:0}.doc-tag{font-size:10px;color:var(--fg4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.btn-more{background:var(--border);border:none;color:var(--fg3);font-size:18px;cursor:pointer;padding:4px 10px;border-radius:6px;line-height:1;transition:all 0.12s;-webkit-user-select:auto;user-select:auto}.btn-more:active{background:var(--accent3);color:var(--accent2)}
.header h1{font-size:14px;font-weight:600;color:var(--fg2);letter-spacing:0.5px}


/* ===== 编辑区 ===== */
.result-area{flex:1;overflow-y:scroll;padding:6px 10px 2px;min-height:0;-webkit-overflow-scrolling:touch}
.result-area::-webkit-scrollbar{width:4px}
.result-area::-webkit-scrollbar-track{background:transparent}
.result-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#resultBox{background:var(--bg2);border-radius:8px;padding:var(--ps,0px) 8px;min-height:44px;display:block;touch-action:manipulation}
#resultZoom{transform-origin:0 0;will-change:transform;transition:none}
.no-charpop .char-svg{animation:none!important}
#resultBox .placeholder{color:var(--border2);font-size:12px;width:100%;padding:12px 10px;text-align:center}
#resultBox .char-svg{display:inline-block;max-width:var(--cw,34px);height:var(--ch,48px);padding:0;box-sizing:border-box;animation:charPop 0.12s ease;vertical-align:middle}
#resultBox .char-svg svg{width:100%;height:100%;display:block}
#resultBox .cursor{display:inline-block;width:2px;height:34px;background:#8b5cf6;animation:cursorBlink 1s step-end infinite;vertical-align:middle;margin:0 1px;flex-shrink:0;position:relative;top:3px;border-radius:1px}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
/* 选中高亮 */
#resultBox .char-svg.selected,#resultBox .char-group.selected{background:var(--accent3);border-radius:3px}
#resultBox .char-img{display:block;float:left;clear:none;margin:4px 12px 4px 0;padding:4px;border:2px solid transparent;border-radius:6px;cursor:default;position:relative}
#resultBox .char-img img{max-width:100%;display:block;pointer-events:none}
#resultBox .char-img.selected{border-color:var(--accent);background:var(--accent3)}
#resultBox .char-img .resize-handle{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:var(--accent);border:2px solid #fff;border-radius:3px;display:block;opacity:0.6}
#resultBox .char-img:hover .resize-handle{opacity:1}

/* ===== 格式工具栏（选中时显示） ===== */




#stylePanel{display:none;position:fixed;bottom:126px;left:50%;transform:translateX(-50%);z-index:9998;background:rgba(24,24,38,0.96);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:6px 10px;gap:6px;padding:4px 6px;box-shadow:0 4px 20px rgba(0,0,0,0.5);flex-wrap:wrap;justify-content:center;max-width:88vw}




body.select-mode #resultBox .char-svg,body.select-mode #resultBox .char-group{cursor:pointer}

/* ===== 标点符号 ===== */
#resultBox .char-svg.punct-bottom{height:var(--cph,24px);max-width:var(--cpw,20px);align-self:flex-end;margin:0 0 4px -1px}
#resultBox .char-svg.punct-bottom svg{width:100%;height:100%;display:block}
#resultBox .char-svg.punct-top{height:var(--cph,24px);max-width:var(--cpw,20px);align-self:flex-start;margin:2px 0 0 -1px}
#resultBox .char-svg.punct-top svg{width:100%;height:100%;display:block}
#resultBox .char-group{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;align-items:flex-start;vertical-align:middle}
@keyframes charPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== 底部工具栏 ===== */
.toolbar{flex-shrink:0;display:flex;gap:10px;padding:3px 12px 2px;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--border)}
.toolbar .tgroup{display:inline-flex;gap:6px;padding:4px 6px;align-items:center}
.toolbar .tsep{width:1px;height:18px;background:var(--border2);margin:0 2px}
.toolbar button{background:none;border:none;color:var(--fg4);padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:all 0.15s}
.toolbar button:active{background:var(--border2);color:var(--fg)}
.toolbar .btn-primary{color:var(--accent2)}
.toolbar .btn-primary:active{background:var(--accent3);color:var(--accent2)}

/* ===== 状态栏 ===== */
.status-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px 2px;font-size:12px;color:var(--fg4);border-bottom:1px solid var(--bg2)}
.status-bar .doc-name{color:var(--fg3)}
.status-bar .char-cnt{color:rgba(139,92,246,0.35)}

/* ===== 手写区域 ===== */
.write-area{flex-shrink:0;padding:8px 12px 6px;display:flex;gap:5px}
.grid{flex:1;aspect-ratio:1/1;max-width:200px;max-height:200px;position:relative;border-radius:8px;overflow:hidden;border:1.5px solid var(--border2);transition:border-color 0.25s,box-shadow 0.25s}
.grid.active{border-color:var(--accent);box-shadow:0 0 16px var(--accent3)}
.grid canvas{width:100%;height:100%;display:block;touch-action:none;background:var(--grid-bg)}

/* ===== 更多菜单 ===== */
.menu-item{background:none;border:none;color:var(--fg2);padding:10px 16px;font-size:13px;cursor:pointer;text-align:left;width:100%;transition:all 0.1s}
.menu-item:active{background:var(--border2);color:var(--accent2)}
.menu-sep{height:1px;background:var(--border);margin:2px 8px}

/* ===== 小屏适配 ===== */
@media(max-height:700px){.write-area{padding:1px 4px 4px}.grid{max-width:150px;max-height:150px}.result-area{padding:4px 8px 1px}}
@media(max-height:600px){.grid{max-width:110px;max-height:110px}.result-area{padding:8px 12px 0px}}
.grid-label{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:8px;color:rgba(255,255,255,0.1);pointer-events:none;transition:color 0.3s}
.grid.active .grid-label{color:rgba(139,92,246,0.35)}
.grid-num{position:absolute;bottom:3px;right:5px;font-size:7px;color:var(--border2);pointer-events:none}
/* ===== 阅读模式 ===== */
.reading .toolbar,.reading .status-bar,.reading .write-area{display:none!important}
.reading .result-area{flex:1;padding:12px 16px}
.reading #resultBox{min-height:100%;background:transparent;padding:16px 12px}
.reading .header{border-bottom:none;padding:8px 14px}

/* ===== 滑入阅读模式 ===== */
#axBottom{overflow:hidden;transition:max-height 0.3s ease,opacity 0.25s ease;max-height:400px;opacity:1}
#axBottom.slide-up{max-height:0!important;opacity:0!important;padding:0!important;margin:0!important;border:none!important;overflow:hidden!important}
#axTri{text-align:center;padding:6px 0 4px;color:var(--fg4);font-size:14px;flex-shrink:0;line-height:1;cursor:pointer;-webkit-user-select:auto;user-select:auto;transition:transform 0.25s ease,color 0.15s;background:var(--border);border-radius:4px;margin:2px 8px}#axTri:active{color:var(--accent2);background:var(--accent3)}
#axToggle{text-align:center;padding:3px 0;color:var(--fg4);font-size:9px;cursor:pointer;flex-shrink:0;transition:transform 0.25s ease;line-height:1;width:100%;-webkit-user-select:auto;user-select:auto}
#axToggle.open{transform:rotate(180deg)}
.reading .hint{display:none}.reading .btn-more{display:none!important}
.reading .cursor{display:none!important}
.reading .break{border-bottom:none!important;height:1em!important}

/* ===== 侧边栏布局 ===== */
.app-layout{display:flex;height:100dvh;overflow:hidden}
.sidebar{width:0;overflow:hidden;background:var(--bg2);border-right:1px solid var(--border);flex-shrink:0;transition:width 0.25s ease;display:flex;flex-direction:column}
.sidebar.open{width:280px}
.sidebar-header{flex-shrink:0;padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;min-height:40px}
.sidebar-header .sb-title{font-size:13px;font-weight:600;color:var(--fg2);flex:1}
.sidebar-close{background:none;border:none;color:var(--fg4);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1}
.sidebar-close:active{background:var(--border2);color:var(--accent2)}
.sidebar-body{flex:1;overflow-y:auto;padding:6px 0}
.sidebar-section{margin-bottom:2px}
.section-header{display:flex;align-items:center;gap:6px;padding:8px 12px;cursor:pointer;color:var(--fg3);font-size:12px;font-weight:500;transition:all 0.12s;border-bottom:1px solid var(--border);-webkit-user-select:auto;user-select:auto}
.section-header:active{background:var(--border2);color:var(--accent2)}
.section-header .collapse-icon{font-size:10px;transition:transform 0.2s ease;margin-left:auto}
.section-header .collapse-icon.collapsed{transform:rotate(-90deg)}
.section-body{padding:8px 12px;overflow:hidden;transition:max-height 0.25s ease,opacity 0.2s ease;max-height:2000px;opacity:1}
.section-body.closed{max-height:0!important;opacity:0!important;padding-top:0!important;padding-bottom:0!important}
/* 侧边栏按钮 */
.sb-btn{display:block;width:100%;background:var(--border2);border:none;border-radius:6px;color:var(--fg2);padding:8px 12px;font-size:13px;cursor:pointer;text-align:left;margin-bottom:4px;transition:all 0.12s}
.sb-btn:active{background:var(--accent3);color:var(--accent2)}
.sb-btn-sm{display:inline-block;background:var(--border2);border:none;border-radius:4px;color:var(--fg3);padding:3px 8px;font-size:11px;cursor:pointer;transition:all 0.12s}
.sb-btn-sm:active{background:var(--accent3);color:var(--accent2)}
.sb-label{font-size:11px;color:var(--fg4);padding:2px 0;margin-bottom:2px}
.sb-doc-item{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--fg2);margin-bottom:2px;transition:all 0.1s}
.sb-doc-item:active{background:var(--border2);color:var(--accent2)}
.sb-doc-item .sb-doc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-doc-item .sb-doc-meta{font-size:10px;color:var(--fg4);white-space:nowrap}
.sb-doc-item.active{background:var(--accent3);color:var(--accent2)}
.sb-sep{height:1px;background:var(--border);margin:8px 0}
.sb-doc-title{font-size:14px;font-weight:600;color:var(--fg2);margin-bottom:6px}
.sb-input{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:4px;color:var(--fg);padding:6px 8px;font-size:13px;outline:none;margin-bottom:6px}
.sb-input:focus{border-color:var(--accent)}
/* 手机配对区 */
.sb-qr-wrap{text-align:center;padding:8px 0}
.sb-qr-wrap #_qrImg{display:inline-block;background:#fff;padding:8px;border-radius:8px}
.sb-status{font-size:11px;color:var(--fg4);text-align:center;padding:4px 0}
.sb-status.connected{color:#4ade80}
.sb-status.disconnected{color:#ef4449}
/* 主内容区 */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
/* 小屏适配 */
@media(max-width:768px){
  .sidebar{position:fixed;left:0;top:0;z-index:9999;height:100dvh;box-shadow:4px 0 20px rgba(0,0,0,0.3)}
  .sidebar.open{width:300px}
  .sidebar-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.4);display:none}
  .sidebar-overlay.show{display:block}
}