:root{--bg: #f6f7f9;--panel: #ffffff;--panel-2: #f8fafc;--line: #e3e6ea;--text: #1f2430;--muted: #7b8494;--accent: #3f6299;--accent2: #4f7bd6;--seal: #c8433f;--warn: #b26a00;--ok: #2c7a4b;--danger: #c8433f}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,Segoe UI,Microsoft YaHei,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px}button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{color:var(--danger);border-color:#eccac9}button.danger:hover:not(:disabled){background:#fdeceb;border-color:var(--danger)}button.lnk{border:none;background:none;color:var(--accent);padding:6px 8px}input{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}input:focus{outline:none;border-color:var(--accent)}.boot,.empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted)}.app{display:flex;flex-direction:column;height:100%}.hd{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.hd-left,.hd-right{display:flex;align-items:center;gap:10px}.hd-title{font-weight:700;font-size:15px}.hd-user{color:var(--muted);font-size:13px}.toast{position:fixed;top:60px;left:50%;transform:translate(-50%);background:#2a2f3a;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;z-index:50;box-shadow:0 8px 24px #0003;max-width:88vw}.login-bg{display:flex;align-items:center;justify-content:center;height:100%}.login-card{width:340px;max-width:90vw;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px 26px;box-shadow:0 12px 40px #3c3c501a;display:flex;flex-direction:column;gap:12px}.login-card h1{margin:0;font-size:22px}.login-sub{margin:0 0 6px;color:var(--muted);font-size:12.5px;line-height:1.6}.login-card input{width:100%}.login-err{color:var(--danger);font-size:12.5px}.list{max-width:720px;width:100%;margin:24px auto;padding:0 16px;display:flex;flex-direction:column;gap:12px}.card{text-align:left;padding:16px 18px;border-radius:12px;display:flex;flex-direction:column;gap:7px}.card-off{opacity:.62}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-title{font-weight:600;font-size:15px}.card-meta{color:var(--muted);font-size:12.5px}.badge{font-size:11.5px;padding:2px 9px;border-radius:20px;white-space:nowrap}.b-active{background:#e7f3ec;color:var(--ok)}.b-expired{background:#f0f1f3;color:var(--muted)}.b-destroyed{background:#f7ecec;color:var(--danger)}.wb{display:flex;flex:1;min-height:0}.wb-side{width:250px;flex-shrink:0;border-right:1px solid var(--line);background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.wb-notice{font-size:12px;line-height:1.6;color:#6a6353;background:#3f62990f;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:10px 11px}.wb-files{display:flex;flex-direction:column;gap:6px}.wb-file{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left}.wb-file.on{background:var(--seal);border-color:var(--seal);color:#fff}.wb-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wb-file-pages{flex-shrink:0;font-size:11.5px;opacity:.8}.wb-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}.wb-actions button{width:100%}.wb-expire{margin-top:auto;font-size:11.5px;color:var(--muted)}.wb-main{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column;align-items:center}.pager{display:flex;align-items:center;gap:14px;margin:14px 0 0;font-size:13px;color:var(--muted)}.canvas-wrap{display:flex;flex-direction:column;align-items:center;width:100%}.canvas-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;position:sticky;top:0;background:var(--bg);z-index:4;width:100%;justify-content:center}.tool-group{display:flex;align-items:center;gap:4px}.tool-group+.tool-group{padding-left:14px;border-left:1px solid var(--line)}.tool-btn{padding:6px 12px;font-size:13px;border-radius:7px}.tool-btn.on{background:var(--seal);border-color:var(--seal);color:#fff}.swatch-btn{padding:4px;border-radius:7px}.swatch-btn.on{border-color:var(--seal);box-shadow:0 0 0 2px #c8433f33}.sw{display:block;width:20px;height:20px;border-radius:4px}.width-pick{display:inline-flex;gap:3px;margin-left:4px}.wbtn{padding:5px 10px;font-size:12px;border-radius:6px}.wbtn.on{background:var(--accent2);border-color:var(--accent2);color:#fff}.star-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer}.rot-note{font-size:11.5px;color:var(--warn)}.tool-tip{font-size:12px;color:var(--muted);flex-basis:100%;text-align:center}.canvas-stage{position:relative;-webkit-user-select:none;user-select:none;margin:14px;overflow:hidden}.canvas-rotwrap{position:absolute;top:0;left:0}.canvas-img{display:block;width:100%;height:100%;box-shadow:0 6px 22px #604a2c29}.canvas-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.svg-ann{pointer-events:auto}.svg-paint{fill-opacity:.82;transition:fill-opacity .12s}.svg-paint:hover{fill-opacity:.22}.svg-paint polyline{stroke-opacity:.85;transition:stroke-opacity .12s}.svg-paint:hover polyline{stroke-opacity:.28}.svg-paint .seal-ring{stroke-opacity:.88;transition:stroke-opacity .12s}.svg-paint:hover .seal-ring{stroke-opacity:.28}.svg-trace{opacity:.5;transition:opacity .12s}.svg-trace:hover{opacity:1}.svg-sel{filter:drop-shadow(0 0 4px rgba(63,98,153,.95))}.canvas-zoom{position:sticky;bottom:8px;display:flex;gap:8px;align-items:center;justify-content:center;margin:8px 0 14px;z-index:5}