:root{
  --bg:#14161b;--panel:#1b1e25;--panel2:#232731;--raised:#2a2f3a;--border:#313745;
  --text:#e9ebf1;--muted:#98a0b3;--faint:#6b7386;--accent:#5b8cff;--accent-hi:#7aa2ff;--accent-lo:#2b3d66;
  --good:#37c98b;--warn:#f2a33a;--danger:#ff5f5f;
  font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,sans-serif;font-size:13px;color:var(--text);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);overflow:hidden}
body{display:flex;flex-direction:column}
.hidden{display:none!important}
.muted{color:var(--muted)} .hint{color:var(--muted);font-size:12px} .spacer{flex:1}
button{font:inherit;color:inherit;cursor:pointer}
.btn{background:var(--raised);border:1px solid var(--border);border-radius:7px;padding:6px 12px;line-height:20px;white-space:nowrap}
.btn:hover{background:#333948;border-color:#3d4455}.btn:active{background:#262b35}
.btn:disabled{color:var(--faint);background:var(--panel2);cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.big{font-size:15px;padding:11px 24px;border-radius:10px}
.btn.good{background:#1f3b31;border-color:#2c6b52;color:#c9f5e2;font-weight:600}.btn.good:hover{background:#26493c}
.btn.icon{width:44px;font-size:17px;padding:3px}
.btn.grow,.grow{flex:1}
.link{background:none;border:none;color:var(--accent-hi);padding:2px 0;text-align:left}
.link:hover{color:#fff;text-decoration:underline}.link:disabled{color:var(--faint);text-decoration:none;cursor:default}
input[type=text]{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:6px 8px;color:var(--text);font:inherit}
input[type=text]:focus{outline:none;border-color:var(--accent)}
hr{border:none;border-top:1px solid var(--border);width:100%;margin:6px 0}

/* top bar */
.topbar{height:58px;flex:none;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-right:16px;color:var(--text);text-decoration:none}
.namebox{display:flex;align-items:center;gap:8px;margin-left:8px}
.namebox label{color:var(--muted)}
#albumName{font-size:14px;font-weight:600;width:240px}
body:not(.has-album) .album-only{display:none}

/* welcome */
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow:auto}
.card{width:min(640px,100%);background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:36px 40px;text-align:center}
.card h1{font-size:28px;font-weight:600;margin:14px 0 10px}
.steps{list-style:none;display:flex;justify-content:space-around;padding:0;margin:22px 0}
.steps li{display:flex;flex-direction:column;align-items:center;gap:3px}
.steps b{width:34px;height:34px;border-radius:17px;background:var(--accent-lo);display:grid;place-items:center;font-weight:600}
.steps strong{font-size:15px}.steps span{color:var(--muted)}
.open-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dropzone{margin-top:16px;border:2px dashed var(--border);border-radius:12px;padding:18px;color:var(--muted)}
.dropzone.over,body.dragging .dropzone{border-color:var(--accent);color:var(--text);background:#5b8cff14}
.privacy{color:#9fdcc3;margin:16px 0 0}
.foot{margin-top:18px}

/* workspace */
.workspace{flex:1;display:flex;min-height:0}
.panel{background:var(--panel);display:flex;flex-direction:column;min-height:0}
.panel.left{width:250px;flex:none;padding:12px 6px 10px 10px;border-right:1px solid var(--border)}
.panel.right{width:330px;flex:none;padding:14px 16px;gap:10px;border-left:1px solid var(--border);overflow:auto}
.section{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:1px}
.h2{font-size:15px;font-weight:600}
.filename{color:var(--accent-hi);font-weight:600;min-height:18px}
.pages{list-style:none;margin:6px 0;padding:0 4px 0 0;overflow:auto;flex:1}
.pages li{display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px;margin:2px 0;cursor:pointer}
.pages li:hover{background:var(--panel2)}
.pages li.sel{background:var(--accent-lo)}
.thumb{width:64px;height:88px;flex:none;display:grid;place-items:center;position:relative;background:var(--panel2);border-radius:3px}
.thumb img{max-width:64px;max-height:88px;display:block}
.thumb .tw{position:relative;display:inline-block;line-height:0}.thumb i{position:absolute;top:2px;right:2px;margin:0}
.pages .t1{font-size:13px}.pages .t2{color:var(--muted);font-size:12px}
.pages li.sel .t2{color:#cdd7f0}
.dot{display:inline-block;width:11px;height:11px;border-radius:6px;border:2px solid var(--panel);vertical-align:-1px;margin:0 3px 0 6px}
.dot.ok{background:var(--good)}.dot.warn{background:var(--warn)}.dot.todo{background:var(--faint)}
.legend{color:var(--muted);font-size:12px;padding-top:6px}
.legend .dot{margin-left:0}

.center{flex:1;display:flex;flex-direction:column;min-width:0}
.toolrow{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border)}
.tool{background:var(--raised);border:1px solid var(--border);border-radius:7px;padding:6px 10px}
.tool:hover{background:#333948}.tool:disabled{color:var(--faint);background:var(--panel2);cursor:default}
.tool.on{background:var(--accent-lo);border-color:var(--accent);color:#fff}
.seg{display:flex}.seg>button{border-radius:0;margin-left:-1px;background:var(--raised);border:1px solid var(--border);padding:5px 8px}
.seg>button:first-child{border-radius:7px 0 0 7px;margin-left:0}.seg>button:last-child{border-radius:0 7px 7px 0}
.seg.tools>button{padding:6px 10px}
.seg.tools{margin-right:12px}
.seg>button.on{background:var(--accent-lo);border-color:var(--accent);color:#fff;font-weight:600;position:relative;z-index:1}
.seg>button:disabled{color:var(--faint);cursor:default}
.presets>button{flex:1}
.viewport{flex:1;position:relative;overflow:hidden;background:var(--bg);cursor:grab;touch-action:none}
.viewport.panning{cursor:grabbing}
.viewport.mode-click,.viewport.mode-draw{cursor:crosshair}
.stage{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 0 0 1px #000a,0 10px 40px #0008}
.stage img{display:block;user-select:none;-webkit-user-drag:none}
#overlay{position:absolute;left:0;top:0;overflow:visible}
.box{cursor:move}
.box polygon{fill:var(--good);fill-opacity:.08;stroke:var(--good)}
.box.flag polygon{fill:var(--warn);stroke:var(--warn)}
.box:hover polygon{fill-opacity:.18}
.box.sel polygon{fill:var(--accent);fill-opacity:.2;stroke:var(--accent)}
.box .badge{fill:var(--good)}.box.flag .badge{fill:var(--warn)}.box.sel .badge{fill:var(--accent)}
.box .badge-shadow{fill:#0009}
.box text{fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.box.flag:not(.sel) text{fill:#1b1300}
.handle{fill:#fff;stroke:var(--accent);cursor:move}
.rubber{fill:#5b8cff28;stroke:var(--accent-hi)}
.busy{position:absolute;inset:auto 0 18px 0;margin:auto;width:max-content;display:flex;gap:10px;align-items:center;background:#000b;padding:8px 14px;border-radius:20px}
.spinner{width:16px;height:16px;border:2px solid #fff4;border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hintbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--panel);border-top:1px solid var(--border)}

.preview{flex:1;min-height:230px;background:var(--bg);border:1px solid var(--border);border-radius:8px;display:grid;place-items:center;position:relative;overflow:hidden}
.preview canvas{max-width:calc(100% - 12px);max-height:calc(100% - 12px)}
.preview #previewMsg{position:absolute;text-align:center;padding:10px}
.row{display:flex;align-items:center;gap:8px}
.num{width:38px;text-align:right}
input[type=range]{flex:1;accent-color:var(--accent)}
.check{display:flex;gap:8px;align-items:center;color:var(--text)}
.check input{accent-color:var(--accent);width:16px;height:16px}

.status{height:28px;flex:none;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--panel);border-top:1px solid var(--border);color:var(--muted);font-size:12px}
progress{accent-color:var(--accent);width:180px;height:10px}

dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:22px 26px;width:min(480px,92vw)}
dialog::backdrop{background:#0009}
dialog h2{margin:0 0 10px;font-size:18px}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
#exportBar{width:100%}
.warn{color:var(--warn)}
@media (max-width:1000px){.panel.right{width:270px}.panel.left{width:190px}#albumName{width:150px}}

/* greeting + account menu */
.hello{position:relative;padding:6px 10px;border-radius:8px;cursor:default;white-space:nowrap;font-weight:600}
.hello::before{content:"";display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--good);margin-right:8px;vertical-align:1px}
.hello:hover{background:var(--panel2)}
.hello-menu{display:none;position:absolute;right:0;top:100%;margin-top:4px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:6px;min-width:180px;z-index:20;box-shadow:0 10px 30px #0008}
.hello:hover .hello-menu,.hello:focus-within .hello-menu{display:flex;flex-direction:column}
.hello-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.hello-menu a{color:var(--text);text-decoration:none;font-weight:400;padding:7px 10px;border-radius:6px}
.hello-menu a:hover{background:var(--accent-lo)}
.foot a{color:var(--muted)}.foot a:hover{color:var(--text)}
#helloBig{color:var(--accent-hi)}