:root{--bg:#f6f3ee;--card:#fff;--ink:#1d1b18;--mute:#6f6a62;--line:#e4ded4;--keep:#2f7a4a;--kill:#a3302c;--acc:#1d1b18}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#161513;--card:#211f1c;--ink:#efe9e0;--mute:#a59f95;--line:#35322d;--keep:#6cc08b;--kill:#e07a6f;--acc:#efe9e0}}
:root[data-theme="dark"]{--bg:#161513;--card:#211f1c;--ink:#efe9e0;--mute:#a59f95;--line:#35322d;--keep:#6cc08b;--kill:#e07a6f;--acc:#efe9e0}
[hidden]{display:none!important}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 -apple-system,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.mark{font-weight:700;letter-spacing:.08em;font-size:13px}.mark span{font-weight:500;letter-spacing:0;color:var(--mute)}
#lock{min-height:100dvh;display:grid;place-items:center;padding:16px}
#lock form{width:min(320px,100%);display:grid;gap:10px}#lock input{font-size:22px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);letter-spacing:.3em;text-align:center}
#lock button{padding:12px;border-radius:10px;border:0;background:var(--acc);color:var(--bg);font-weight:600}#pinerr{color:var(--kill);min-height:1.4em;margin:0}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);padding:calc(10px + env(safe-area-inset-top)) 16px 8px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.counts{font-size:13px;color:var(--mute);white-space:nowrap}.counts b.k{color:var(--keep)}.counts b.x{color:var(--kill)}
.bar{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 16px}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg:empty{display:none}
.seg button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:13px}.seg button[aria-pressed=true]{background:var(--acc);color:var(--bg);border-color:var(--acc)}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:4px 16px 16px;max-width:1500px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card.keep{border-color:var(--keep);box-shadow:0 0 0 1px var(--keep)}.card.kill{opacity:.55}.card.kill:focus-within{opacity:1}
.ph{position:relative;aspect-ratio:2/3;background:#e9e4dc;border:0;padding:0;display:block;width:100%}.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .v{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:3px 7px;border-radius:999px}
.ph .pending{position:absolute;inset:0;display:grid;place-items:center;color:#8a847a;font-size:13px}
.tx{padding:10px 12px 12px;display:grid;gap:6px}.id{font-size:12px;color:var(--mute)}.id b{color:var(--ink)}
.nm{font-weight:650}.bd{font-size:12px;color:var(--mute)}.art{font-size:13px}
.act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}.act button{padding:10px;border-radius:9px;border:1px solid var(--line);background:transparent;font-weight:600}
.act .k[aria-pressed=true]{background:var(--keep);border-color:var(--keep);color:#fff}.act .x[aria-pressed=true]{background:var(--kill);border-color:var(--kill);color:#fff}
textarea{width:100%;min-height:40px;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:8px;font:inherit;font-size:16px;background:transparent;color:var(--ink)}
.saved{font-size:11px;color:var(--mute);min-height:1em}
.foot{color:var(--mute);font-size:12px;padding:0 16px calc(24px + env(safe-area-inset-bottom));max-width:1500px;margin:0 auto}
#lb{position:fixed;inset:0;z-index:20;background:rgba(10,10,10,.92);display:grid;place-items:center;padding:16px}#lb img{max-width:100%;max-height:86dvh;border-radius:8px}
#lbx{position:absolute;top:calc(8px + env(safe-area-inset-top));right:12px;background:none;border:0;color:#fff;font-size:34px}#lbcap{color:#ddd;font-size:13px;margin-top:8px;text-align:center}
@media (hover:hover){.seg button:hover{border-color:var(--mute)}}