:root{--bg:#f8fafc;--fg:#0f172a;--mut:#64748b;--pri:#0f766e;--card:#fff;--bd:#e2e8f0;--red:#b91c1c}
@media(prefers-color-scheme:dark){:root{--bg:#0b1220;--fg:#e5e7eb;--mut:#94a3b8;--card:#131c2e;--bd:#223049;--pri:#14b8a6}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{border:1px solid var(--bd);background:var(--card);border-radius:10px;padding:.55rem .9rem;cursor:pointer}
button.primary{background:var(--pri);color:#fff;border-color:var(--pri)}
button.danger{color:var(--red);border-color:var(--red)}
button.ghost{background:transparent;border-color:transparent}
input{width:100%;padding:.65rem .8rem;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
.top{position:sticky;top:0;z-index:5;background:var(--bg);padding:calc(env(safe-area-inset-top) + .5rem) .8rem .5rem;border-bottom:1px solid var(--bd)}
.row{display:flex;align-items:center;gap:.5rem}
.row h1{flex:1;font-size:1.3rem;margin:0}
.chips{display:flex;gap:.4rem;overflow-x:auto;padding:.55rem .1rem .15rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;white-space:nowrap;border-radius:999px;padding:.3rem .85rem;font-size:.88rem;background:transparent;color:var(--mut);border:1px solid var(--bd)}
.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
select{width:100%;padding:.65rem .8rem;border:1px solid var(--bd);border-radius:10px;background:var(--card);color:var(--fg);font:inherit}
.catlist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;max-height:50vh;overflow:auto}
.catlist li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:.4rem .4rem .4rem .8rem}
.catlist button{padding:.3rem .6rem;font-size:.85rem}
#catAdd input{flex:1}
.list{padding:.6rem .8rem 6rem;display:grid;gap:.5rem}
.item{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:.7rem .8rem;user-select:none;-webkit-user-select:none}
.item .t{flex:1;min-width:0}
.item .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .t small,.muted{color:var(--mut)}
.item .star{font-size:1.4rem;background:none;border:0;padding:.2rem .4rem;color:var(--mut)}
.item .star.on{color:#f59e0b}
.item input[type=checkbox]{width:1.3rem;height:1.3rem}
.item.sel{outline:2px solid var(--pri)}
.empty{text-align:center;color:var(--mut);padding:3rem 1rem}
.fab{position:fixed;right:1rem;bottom:calc(env(safe-area-inset-bottom) + 1rem);width:3.6rem;height:3.6rem;border-radius:50%;background:var(--pri);color:#fff;font-size:2rem;line-height:1;border:0;box-shadow:0 4px 14px #0004;padding:0}
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:.3rem;align-items:center;padding:.6rem .8rem calc(env(safe-area-inset-bottom) + .6rem);background:var(--card);border-top:1px solid var(--bd);flex-wrap:wrap}
.selbar span{flex:1;min-width:4rem}
.viewer{position:fixed;inset:0;z-index:10;background:#475569;display:flex;flex-direction:column}
.vbar{display:flex;align-items:center;gap:.3rem;padding:calc(env(safe-area-inset-top) + .4rem) .5rem .4rem;background:var(--bg)}
.vbar span{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pages{flex:1;overflow:auto;touch-action:pan-x pan-y pinch-zoom;padding:.5rem;-webkit-overflow-scrolling:touch}
.pages img{display:block;margin:0 auto .5rem;width:100%;height:auto;background:#fff}
.pages canvas{display:block;margin:0 auto .5rem;background:#fff;max-width:none}
dialog{border:1px solid var(--bd);border-radius:16px;background:var(--bg);color:var(--fg);width:min(92vw,28rem);padding:1.1rem}
dialog::backdrop{background:#0008}
.stack{display:grid;gap:.7rem}
.stack h2{margin:0}
label{display:grid;gap:.25rem;font-size:.9rem;color:var(--mut)}
.encrypt-option{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--card);border:1px solid var(--bd);border-radius:12px;color:var(--fg);cursor:pointer}
.encrypt-option input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.encrypt-switch{position:relative;flex:none;width:2.7rem;height:1.55rem;border-radius:999px;background:var(--bd);transition:background .18s ease}
.encrypt-switch::after{content:"";position:absolute;left:.18rem;top:.18rem;width:1.19rem;height:1.19rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s ease}
.encrypt-option input:checked+.encrypt-switch{background:var(--pri)}
.encrypt-option input:checked+.encrypt-switch::after{transform:translateX(1.15rem)}
.encrypt-option input:focus-visible+.encrypt-switch{outline:3px solid var(--pri);outline-offset:3px}
.encrypt-copy{display:grid;gap:.1rem}
.encrypt-copy strong{font-size:.92rem}
.encrypt-copy small{color:var(--mut);font-size:.8rem}
#cam{width:100%;border-radius:12px;background:#000}
progress{width:100%}
pre{white-space:pre-wrap;margin:0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 6rem);background:#0f172a;color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:30;max-width:90vw}