:root{
  --bg:#f4f3f0; --panel:#ffffff; --ink:#16161a; --mute:#6b6b72; --line:#e2e0da; --acc:#1f5eff; --acc-ink:#fff;
  --chip:#ebe9e3; --stage:#d9d7d1; --sel:#1f5eff; --danger:#c62828;
  --r:10px; --ui:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121214; --panel:#1b1b1f; --ink:#ececf0; --mute:#9a9aa3; --line:#2c2c33; --chip:#26262c; --stage:#0c0c0e; --acc:#5b8cff;
}}
:root[data-theme="dark"]{--bg:#121214; --panel:#1b1b1f; --ink:#ececf0; --mute:#9a9aa3; --line:#2c2c33; --chip:#26262c; --stage:#0c0c0e; --acc:#5b8cff;}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--ui)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 12px}
button:hover{border-color:var(--mute)}
button.pri{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover{background:var(--chip)}
select,input[type=search],input[type=number],input[type=text],textarea{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-width:0}

.bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.01em;font-size:16px}
.seg{display:flex;background:var(--chip);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-weight:500}
.seg button.on{background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:650}
.seg .n{color:var(--mute);font-weight:500;font-size:12px;margin-left:4px}
#q{flex:1;min-width:180px;max-width:420px;margin-left:auto}
.filters{display:flex;gap:10px;align-items:flex-start;padding:12px 16px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.chips button{background:var(--chip);border:0;border-radius:999px;padding:5px 11px;font-size:13px}
.chips button.on{background:var(--ink);color:var(--bg)}
.chips button i{font-style:normal;opacity:.6;margin-left:4px;font-size:12px}
.hint{margin:8px 16px 0;color:var(--mute);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:14px 16px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s;text-align:left;padding:0}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.thumb{height:190px;background:var(--stage);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.thumb .sc{position:absolute;left:50%;top:50%;transform-origin:0 0}
.thumb .page{box-shadow:0 1px 4px rgba(0,0,0,.25)}
.card .meta{padding:9px 11px 11px}
.card .nm{font-weight:600;font-size:13.5px;line-height:1.3}
.card .sub{color:var(--mute);font-size:12px;margin-top:2px}

/* editor */
#editor{position:fixed;inset:0;background:var(--bg);z-index:20;display:flex;flex-direction:column}
#editor[hidden]{display:none}
.ebar{gap:10px}
.etitle{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.etitle b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etitle span{color:var(--mute);font-size:12px}
.zoom{display:flex;align-items:center;gap:2px}
.zoom span{min-width:46px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}
.acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cp{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute)}
.cp input{width:64px}
.cp select{max-width:130px}
.dd{position:relative}
.dd .menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;min-width:300px;z-index:30}
.dd.open .menu{display:flex;flex-direction:column;gap:4px}
.dd .menu button{border:0;text-align:left;background:transparent}
.dd .menu button:hover{background:var(--chip)}
.dd .menu label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute);padding:6px 8px}
.ebody{flex:1;display:flex;min-height:0}
.stagewrap{flex:1;overflow:auto;background:var(--stage);position:relative}
.stage{padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:max-content;min-height:100%}
.stage .scaler{transform-origin:0 0}
.stage .page{box-shadow:0 2px 14px rgba(0,0,0,.28)}
.side{width:340px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:0;border-radius:0;background:transparent;padding:10px;font-weight:500;color:var(--mute)}
.tabs button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.pane{overflow:auto;padding:14px;flex:1}
.pane[hidden]{display:none}
.fld{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.fld>span{font-size:12px;color:var(--mute);font-weight:500}
.fld textarea{resize:vertical;min-height:38px;font-size:13px}
.fld input,.fld select{font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pane h4{margin:14px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.pane h4:first-child{margin-top:0}
.addrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.addrow button{font-size:12.5px;padding:5px 9px}
.note{font-size:12.5px;color:var(--mute);line-height:1.5}
.note b{color:var(--ink)}
.note ol,.note ul{padding-left:18px;margin:6px 0}
.danger{color:var(--danger)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;opacity:0;transition:.2s;pointer-events:none;z-index:99;font-size:13px}
#toast.show{opacity:1;transform:translateX(-50%)}
#offscreen{position:fixed;left:-30000px;top:0;pointer-events:none}
#printroot{display:none}

/* ---------- page rendering (shared by screen, export and print) ---------- */
.page{background:#fff;color:#000;position:relative;overflow:hidden;font-family:"Inter",Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.page *{box-sizing:border-box}
.page .el{position:absolute}
.page .tx{display:flex;flex-direction:column;overflow:hidden;line-height:1.12;white-space:pre-wrap;word-break:break-word}
.page .tx.nw{white-space:pre}
.page .tx.inv{background:#000;color:#fff}
.page .bc svg,.page .qr svg{display:block;width:100%;height:100%}
.page .bc .hr{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:"JetBrains Mono",monospace;line-height:1;white-space:nowrap;letter-spacing:.06em}
.page .bad{background:repeating-linear-gradient(45deg,#fdd,#fdd 4px,#fff 4px,#fff 8px);color:#b00;font:600 7pt/1.1 Inter,sans-serif;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #b00}
.page .imgf{background:center/contain no-repeat}
.page .imgf.cover{background-size:cover}
.page .guide{outline:0.2mm dashed #b8b8b8;outline-offset:-0.1mm}
.page .imgf.ph{border:1px dashed #9a9a9a;color:#8a8a8a;display:flex;align-items:center;justify-content:center;font:500 7pt Inter,sans-serif;text-align:center;cursor:pointer}
.edit .page .el{cursor:move}
.edit .page .el:hover{outline:1px dashed rgba(31,94,255,.6)}
.edit .page .el.sel{outline:1.5px solid var(--sel);outline-offset:0}
.edit .page .el.editing{cursor:text;outline:1.5px solid #f59e0b}
.edit .page .f{outline:none;border-radius:2px;cursor:text}
.edit .page .f:hover{background:rgba(31,94,255,.08);box-shadow:0 0 0 1px rgba(31,94,255,.35)}
.edit .page .f:focus{background:rgba(245,158,11,.12);box-shadow:0 0 0 1px #f59e0b}
.page .f{white-space:pre-wrap}
.page .f:empty::before{content:"\200b"}
/* doc helpers used by Epson templates */
.page .d{position:absolute;inset:0}
.page table{border-collapse:collapse}
.page .num{text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .side{position:fixed;left:0;right:0;bottom:0;width:auto;height:45vh;border-left:0;border-top:1px solid var(--line);z-index:4}
  .ebody{padding-bottom:45vh}
  .cp{display:none}
  .etitle span{display:none}
  #q{order:5;max-width:none;flex-basis:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .thumb{height:150px}
}

@media print{
  body{background:#fff !important}
  body>*:not(#printroot){display:none !important}
  #printroot{display:block !important}
  #printroot .page{box-shadow:none !important;break-after:page;page-break-after:always;margin:0}
  #printroot .page:last-child{break-after:auto;page-break-after:auto}
  .page .imgf.ph,.page .ph-hide{visibility:hidden !important}
  .page .guide{outline:none !important}
}