:root{--bg:#f4f6fb;--panel:#fff;--line:#e2e6ef;--fg:#1c2330;--muted:#6b7587;--accent:#2f6fed;--accent-fg:#fff;--hover:#eef2fb;--danger:#e5484d;--shadow:0 10px 30px -12px #0003;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0f131b;--panel:#171c27;--line:#272e3d;--fg:#e6e9f0;--muted:#8b95a8;--hover:#212939;--shadow:0 10px 30px -12px #000a;color-scheme:dark}}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button svg,.logo svg,.tth svg,label svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#cv{fill:none;stroke:none}
.muted{color:var(--muted)}.sp{flex:1}kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font:12px ui-monospace,monospace;background:var(--panel)}
/* top bar */
#top{display:flex;align-items:center;gap:8px;height:52px;padding:0 10px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.logo{display:flex;align-items:center;gap:7px;border:0;background:transparent;font-size:17px;padding:6px 8px;border-radius:8px;color:var(--accent)}.logo b{color:var(--fg)}.logo:hover{background:var(--hover)}
#docname{border:1px solid transparent;background:transparent;padding:6px 8px;border-radius:8px;font-weight:600;min-width:120px;width:min(32vw,300px)}#docname:hover{border-color:var(--line)}#docname:focus{outline:2px solid var(--accent);background:var(--panel)}
#saveState{font-size:12px;white-space:nowrap}
.grp{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}.ib{width:34px;height:34px;display:inline-grid;place-items:center;border:0;background:transparent;border-radius:8px}.ib svg{width:18px;height:18px}.ib:hover:not(:disabled){background:var(--hover)}.ib:disabled{opacity:.35;cursor:default}.grp .ib{border-radius:0}
.zl{border:0;background:transparent;min-width:54px;height:34px;font-size:13px}.zl:hover{background:var(--hover)}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);border-radius:9px;padding:7px 14px;font-weight:600}.btn:hover{filter:brightness(1.08)}.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}.btn.ghost:hover{background:var(--hover)}.btn.wide{display:block;text-align:center}
.only-small{display:none}
/* layout */
#app{flex:1;display:flex;min-height:0;position:relative;overflow:hidden}html{overflow:hidden}
#left{width:252px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.search{padding:10px}.search input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
#lib{flex:1;overflow:auto;padding:0 8px 8px}#lib details{border-bottom:1px solid var(--line)}#lib summary{padding:10px 6px;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}#lib summary::before{content:'›';display:inline-block;transition:transform .15s;color:var(--muted)}#lib details[open] summary::before{transform:rotate(90deg)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:2px 0 10px}.shp{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:transparent;display:grid;place-items:center;padding:2px;color:var(--fg)}.shp:hover{background:var(--hover);border-color:var(--line)}.shp svg{width:100%;height:auto;max-height:34px;stroke:currentColor;overflow:visible}.shp[hidden]{display:none}
.libfoot{padding:10px;border-top:1px solid var(--line)}
#stage{flex:1;position:relative;min-width:0;background:#fff}#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;outline:none;background:#fff}
#tools{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:3px;z-index:3;box-shadow:var(--shadow)}.tl{width:36px;height:34px;display:grid;place-items:center;border:0;background:transparent;border-radius:8px;color:var(--fg)}.tl svg{width:19px;height:19px}.tl:hover{background:var(--hover)}.tl.on{background:var(--accent);color:#fff}
#right{width:276px;flex:none;background:var(--panel);border-left:1px solid var(--line);overflow:auto;min-height:0}
.inline-edit{position:absolute;z-index:6;resize:none;border:2px solid var(--accent);background:#fff;color:#111;border-radius:4px;padding:2px 4px;outline:none;overflow:hidden;box-shadow:0 0 0 3px #2f6fed33}
/* inspector */
#inspector section{padding:12px 14px;border-bottom:1px solid var(--line)}#inspector h3{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.row{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}.row>label:first-child{width:72px;color:var(--muted);font-size:12.5px;flex:none}.row input[type=text],.row textarea,.row select,.row input[type=number]{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 8px;min-width:0}.row select{flex:1}.row input[type=number]{width:70px}.row textarea{flex:1;resize:vertical;min-height:50px}.row input[type=range]{flex:1;accent-color:var(--accent)}.row input[type=text]{flex:1}
.swatches{display:flex;flex-wrap:wrap;gap:4px;flex:1}.swatch{width:18px;height:18px;border-radius:5px;border:1px solid #0003;padding:0}.swatch.on{outline:2px solid var(--accent);outline-offset:1px}.swatch.none{background:linear-gradient(135deg,#fff 45%,#e5484d 46%,#e5484d 54%,#fff 55%)}.swatches input[type=color]{width:22px;height:22px;padding:0;border:0;background:transparent}
.tgrp{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.tg{border:0;background:transparent;padding:5px 9px;min-width:30px}.tg+.tg{border-left:1px solid var(--line)}.tg:hover{background:var(--hover)}.tg.on{background:var(--accent);color:#fff}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.btnrow button{border:1px solid var(--line);background:transparent;border-radius:8px;padding:5px 9px;font-size:12.5px}.btnrow button:hover:not(:disabled){background:var(--hover)}.btnrow button:disabled{opacity:.4}.btnrow .danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}.grid5 label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:2px}.grid5 input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:5px 4px;min-width:0}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px}.chk input{accent-color:var(--accent)}.tips{margin:0;padding-left:18px;color:var(--muted);font-size:13px}.tips li{margin-bottom:6px}
/* bottom bar */
#bottom{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;background:var(--panel);border-top:1px solid var(--line);flex:none}
#pages{display:flex;gap:2px;overflow:auto;min-width:0}.pg{border:0;background:transparent;border-radius:8px 8px 0 0;padding:8px 14px;white-space:nowrap;color:var(--muted)}.pg:hover{background:var(--hover)}.pg.on{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px var(--accent)}.pgedit{padding:5px 8px;border:1px solid var(--accent);border-radius:7px;width:120px}
/* menus, dialogs */
.menu{position:fixed;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:5px;min-width:200px;display:flex;flex-direction:column}.menu[hidden]{display:none}.menu button,.menu .mi{border:0;background:transparent;text-align:left;padding:8px 12px;border-radius:7px;cursor:pointer;display:block}.menu button:hover:not(:disabled),.menu .mi:hover{background:var(--hover)}.menu button:disabled{opacity:.4}.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
dialog{border:1px solid var(--line);border-radius:16px;padding:0;background:var(--panel);color:var(--fg);width:min(880px,94vw);max-height:90vh;box-shadow:var(--shadow)}dialog::backdrop{background:#0008}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}.dlg-h h2{margin:0;font-size:18px}.dlg-b{padding:6px 18px 18px}.dlg-b h3{margin:18px 0 10px;font-size:14px}
.tgrid,.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.tcard{border:1px solid var(--line);background:transparent;border-radius:12px;padding:8px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}.tcard:hover{border-color:var(--accent);background:var(--hover)}.tth{width:100%;height:96px;display:grid;place-items:center;background:#fff;border-radius:8px;overflow:hidden}.tth img{max-width:100%;max-height:100%}.tth svg{width:30px;height:30px;stroke:#667}
.dcard{position:relative;border:1px solid var(--line);border-radius:12px;padding:8px}.dcard.cur{border-color:var(--accent)}.dopen{border:0;background:transparent;width:100%;text-align:left;display:flex;flex-direction:column;gap:4px;padding:0}.dth{display:grid;place-items:center;height:96px;background:#fff;border-radius:8px;overflow:hidden}.dth img{max-width:100%;max-height:100%}.dcard small{color:var(--muted)}.dact{position:absolute;top:12px;right:12px;display:none;gap:4px}.dcard:hover .dact,.dcard:focus-within .dact{display:flex}.dact button{border:1px solid var(--line);background:var(--panel);border-radius:7px;width:28px;height:28px}
.keys{width:100%;border-collapse:collapse}.keys td{padding:8px 4px;border-bottom:1px solid var(--line)}.keys td:last-child{text-align:right;color:var(--muted)}
#toast{position:fixed;left:50%;bottom:60px;transform:translate(-50%,20px);background:#1c2330;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:50}#toast.on{opacity:1;transform:translate(-50%,0)}
#printbox{display:none}
@media print{body>*:not(#printbox){display:none!important}body.printing #printbox{display:block}@page{margin:12mm}}
@media (max-width:900px){.only-small{display:inline-grid}#left,#right{position:absolute;top:0;bottom:0;z-index:8;box-shadow:var(--shadow);transform:translateX(-105%);transition:transform .2s}#right{right:0;transform:translateX(105%)}body.show-left #left{transform:none}body.show-right #right{transform:none}#left{left:0}#docname{width:130px}#saveState{display:none}.logo b{display:none}}
.hint{margin:-4px 0 9px;color:var(--muted);font-size:12px}.hint code{background:var(--bg);padding:0 4px;border-radius:4px}
.row>label:first-child{width:84px}