:root{
  --bg:#f4f6f6;--card:#fff;--ink:#12201f;--mute:#5b6b69;--line:#d9e1e0;
  --acc:#0f766e;--acc-ink:#fff;--danger:#b42318;--r:14px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1514;--card:#16201f;--ink:#e8f0ef;--mute:#93a5a2;--line:#273735;--acc:#2dd4bf;--acc-ink:#042f2b;--danger:#f97066}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
[hidden]{display:none!important}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.top h1{margin:0;font-size:20px;display:flex;align-items:center;gap:8px}
.logo{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#14b8a6,#0f766e);display:inline-block;position:relative}
.logo::after{content:"";position:absolute;inset:5px;border:2px solid #fff;border-radius:2px}

main{max-width:720px;margin:0 auto;padding:14px 14px 20px}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 10px}
button,select,input{font:inherit;color:inherit}
button{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 14px;cursor:pointer}
button:active{transform:scale(.98)}
button.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:600}
button.ghost{background:transparent}
button.danger{color:var(--danger)}
select,input[type=number]{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
label{display:block;font-size:13px;color:var(--mute);margin-bottom:10px}
label select,label input[type=number]{margin-top:4px;font-size:16px;color:var(--ink)}
label.check{display:flex;gap:10px;align-items:center;color:var(--ink);font-size:15px}
label.check input{width:20px;height:20px;accent-color:var(--acc)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;border:2px dashed var(--acc);border-radius:var(--r);background:var(--card);cursor:pointer;color:var(--mute);text-align:center}
.drop strong{color:var(--acc);font-size:18px}
.drop.over{background:color-mix(in srgb,var(--acc) 12%,var(--card))}
.bar{display:flex;gap:10px;align-items:flex-end;margin:14px 0 4px}
.bar label{flex:1;margin:0}

.card{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:12px}
.card .thumbwrap{flex:0 0 88px;height:88px;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#0001 0 25%,transparent 0 50%) 0 0/12px 12px;border-radius:8px}
.card canvas.thumb{box-shadow:0 1px 4px #0004;background:#fff}
.meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.nm{display:flex;justify-content:space-between;gap:8px;align-items:center}
.nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:14px}
.nm button{padding:2px 9px;border:none;background:transparent;color:var(--mute);font-size:18px}
.dims{display:flex;align-items:center;gap:6px}
.dims input{min-width:0;text-align:center;padding:8px 4px}
.dims small{color:var(--mute)}
.dims button{padding:8px 10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row select{flex:1;min-width:110px;padding:8px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{border:none;border-radius:0;padding:8px 13px;font-size:18px;line-height:1}
.stepper span{min-width:34px;text-align:center;font-weight:600}
.row.small button{padding:7px 12px;font-size:14px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:6px}
.seg button{flex:1;border:none;border-radius:0;background:transparent}
.seg button.on{background:var(--acc);color:var(--acc-ink);font-weight:600}

.actions{display:flex;gap:8px}
.actions button{flex:1;padding:12px}
.actions .primary{flex:2}
.hint{font-size:13px;color:var(--mute);margin:10px 0}
.warn{font-size:14px;color:var(--danger);margin:6px 0}
.empty{text-align:center;color:var(--mute);padding:28px 10px}
figure{margin:14px 0;text-align:center}
figure canvas{width:100%;max-width:480px;height:auto;background:#fff;box-shadow:0 2px 12px #0003;border-radius:2px}
figcaption{font-size:12px;color:var(--mute);margin-top:6px}

.tabs{position:fixed;bottom:0;left:0;right:0;z-index:6;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;border:none;border-radius:0;background:transparent;padding:14px 4px;color:var(--mute);font-weight:600}
.tabs button.on{color:var(--acc);box-shadow:inset 0 3px 0 var(--acc)}
.tabs small{margin-left:5px;background:var(--acc);color:var(--acc-ink);border-radius:9px;padding:1px 7px;font-size:11px}
.tabs small:empty{display:none}

dialog{border:none;border-radius:18px;padding:16px;width:min(94vw,420px);background:var(--card);color:var(--ink)}
dialog::backdrop{background:#000a}
dialog h3{margin:0 0 10px}
#cropCv{display:block;margin:0 auto;max-width:100%;touch-action:none;background:#888;border-radius:6px;cursor:grab}
.zoom{margin:12px 0 8px}
.zoom input{width:100%;accent-color:var(--acc)}
.dlgbtns{display:flex;gap:8px}
.dlgbtns .primary{flex:1}

#busy{position:fixed;inset:0;background:#0008;z-index:20;display:flex;align-items:center;justify-content:center}
#busy .box{background:var(--card);padding:18px 22px;border-radius:14px;display:flex;gap:12px;align-items:center}
.spin{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#111d;color:#fff;padding:10px 16px;border-radius:12px;z-index:30;max-width:90vw;text-align:center;font-size:14px}

#printArea{display:none}
@media print{
  html,body{background:#fff!important;padding:0!important}
  body>*:not(#printArea){display:none!important}
  #printArea{display:block}
  #printArea .pp{overflow:hidden;break-after:page;page-break-after:always}
  #printArea .pp:last-child{break-after:auto;page-break-after:auto}
  #printArea img{display:block;width:100%;height:100%}
}

/* canvas editor */
:root{--stage:#8b9a98}
@media (prefers-color-scheme:dark){:root{--stage:#2a3836}}
.ctools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ctools button{padding:9px 12px}
.ctools button:disabled{opacity:.4}
.ctools .tog.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
#stage{position:relative;height:clamp(300px,calc(100vh - 235px),820px);height:clamp(300px,calc(100dvh - 235px),820px);border-radius:var(--r);overflow:hidden;background:var(--stage);border:1px solid var(--line)}
#stage canvas{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:6px}
.pgrid label{margin:0}
.pgrid input{padding:8px 4px;text-align:center;font-size:15px}
.row.small button.on{background:color-mix(in srgb,var(--acc) 18%,var(--card));border-color:var(--acc)}
.row.small button:disabled{opacity:.4}

.ctools select{flex:1;min-width:120px;width:auto;padding:9px 10px}

#paperChip{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;color:#fff;background:#0007;padding:2px 10px;border-radius:10px;pointer-events:none;white-space:nowrap}
.ctools .gear{margin-left:auto;font-size:18px;padding:6px 14px}
.colorin{width:100%;height:42px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--card);margin-top:4px}
#settings{max-height:88vh;overflow:auto}
#settings .seg{margin-bottom:12px}
#settings .dlgbtns{margin-top:10px}

/* ---- single non-scrolling screen ---- */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;display:flex;flex-direction:column;padding:0}
.top{position:static;flex:0 0 auto;padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
.topbtns{display:flex;gap:6px;align-items:center}
.top .ghost{padding:8px 12px}
.top .gear{font-size:18px;padding:6px 12px}
.menu{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 6px);z-index:10;min-width:190px;padding:6px;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0005}
.pop button{border:none;background:transparent;text-align:left;padding:11px 12px;border-radius:8px}
.pop button:active,.pop button:hover{background:color-mix(in srgb,var(--acc) 14%,var(--card))}
main{flex:1 1 0;min-height:0;width:100%;max-width:1000px;margin:0 auto;padding:8px 10px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.ctools{flex:0 0 auto;margin-bottom:8px;flex-wrap:nowrap}
.ctools button{padding:9px 12px;white-space:nowrap}
#stage{flex:1 1 0;min-height:0;height:auto}
#sheet{position:absolute;left:8px;right:8px;bottom:8px;max-height:62%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 24px #0005;overflow:hidden}
.sheetbar{display:flex;justify-content:space-between;gap:10px;width:100%;border:none;border-radius:0;background:transparent;padding:11px 14px;font-weight:600;font-size:14px;text-align:left}
.sheetbar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheetbar span:last-child{color:var(--acc);flex:none}
#sheet #props{display:none;overflow:auto;border:none;border-top:1px solid var(--line);border-radius:0;margin:0;padding:12px 14px}
#sheet.open #props{display:block}

#props .pgrid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}

.ctools button,.top .ghost{display:inline-flex;align-items:center;justify-content:center;width:44px;height:42px;padding:0}
.top .gear{font-size:20px}

/* actions live in the top bar now */
.topbtns>button,.menu>button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:42px;padding:0}
.topbtns{gap:6px}
.tog.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.topbtns button:disabled{opacity:.4}
.top{gap:8px}
@media (max-width:430px){.top .name{display:none}.top{padding-left:10px;padding-right:10px}.topbtns{margin-left:auto}}

/* icon set */
.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.i.s{width:17px;height:17px}
.pop button{display:flex;align-items:center;gap:12px}
.row.small button{display:inline-flex;align-items:center;gap:6px}
#sheetCaret{display:inline-flex;align-items:center;gap:4px}
#sheetCaret .i{transition:transform .15s}
#sheet.open #sheetCaret .i{transform:rotate(180deg)}

/* uniform top-bar buttons; snap shows "off" by graying the magnet */
.topbtns>button,.menu>button{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.topbtns>button.tog.on{background:var(--card);color:var(--ink);border-color:var(--line)}
.topbtns>button.tog:not(.on){color:var(--mute);opacity:.45}
.topbtns>button:disabled{opacity:.35}

/* compact settings dialog */
#settings{padding:16px 16px 14px;width:min(92vw,400px)}
#settings h3{margin:0 0 12px;font-size:18px}
#settings label,#settings .fld{margin-bottom:10px}
#settings .lbl{display:block;font-size:13px;color:var(--mute);margin-bottom:4px}
#settings .fld .seg{margin:0;height:42px}
#settings .seg button{padding:0 8px}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
#settings select,#settings input[type=number]{height:42px;padding:0 10px}
#settings .colorin{height:42px;margin-top:4px}
#settings label.check{margin:2px 0 12px}
#settings .dlgbtns{margin-top:4px;gap:10px}
#settings .dlgbtns .danger{display:inline-flex;align-items:center;gap:6px;flex:none}
#settings .dlgbtns .primary{flex:1}

img.logo{width:28px;height:28px;border-radius:7px;background:none;display:block}

.pop{white-space:nowrap}
@media (max-width:350px){.top h1{display:none}.topbtns{margin:0 auto}}

/* borderless, background-less toolbar icons */
.topbtns>button,.menu>button,.topbtns>button.tog.on{background:transparent;border:none;box-shadow:none}
.topbtns{gap:2px}
.topbtns>button:active,.menu>button:active,.menu>button[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 10%,transparent)}
@media (hover:hover){.topbtns>button:hover:not(:disabled),.menu>button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}}