:root{--bg:#f4f3ef;--card:#fff;--ink:#1d1c1a;--muted:#6b6963;--line:#e4e2dc;--accent:#7a4f9e;--accent-ink:#fff;--ok:#2f8a4c;--warn:#b8791b;--err:#c23b3b;--r:14px}
@media (prefers-color-scheme:dark){:root{--bg:#161513;--card:#22211e;--ink:#f1efe9;--muted:#a19d95;--line:#35332e;--accent:#b48ad6;--accent-ink:#1a1420}}
*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header h1{font-size:17px;margin:0;flex:1;font-weight:650}
header a{font-size:14px;text-decoration:none}
main{max-width:980px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
h2{font-size:16px;margin:0 0 10px}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
input[type=text],input[type=password],input[type=search],textarea,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
button,.btn{appearance:none;border:0;border-radius:10px;padding:12px 16px;font:inherit;font-weight:600;background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;display:inline-block}
button.sec,.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.small{padding:7px 10px;font-size:13px;font-weight:500}
button.danger{background:transparent;color:var(--err);border:1px solid var(--line)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted);font-size:13px}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:26px 16px;text-align:center;color:var(--muted);background:var(--bg)}
.drop strong{color:var(--ink)}
.drop input{display:none}
.sel{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:12px}
.sel img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.sel .prog{height:4px;background:var(--line);border-radius:2px;margin-top:4px;overflow:hidden}
.sel .prog i{display:block;height:100%;width:0;background:var(--accent)}
.suggest{position:relative}
.suggest ul{position:absolute;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;z-index:9;max-height:320px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.suggest li{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.suggest li:last-child{border-bottom:0}
.suggest li:hover{background:var(--bg)}
.suggest img,.pth{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#fff;border:1px solid var(--line);flex:none}
.pth{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px}
.badge{font-size:11px;padding:2px 7px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.draft{color:var(--warn);border-color:var(--warn)}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.err{color:var(--err);border-color:var(--err)}
.chosen{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.chosen .t{flex:1;min-width:0}.chosen .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group{margin-bottom:22px}
.group .head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.group .head .t{flex:1;min-width:200px}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.ph{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.ph .img{position:relative;aspect-ratio:1;background:#fff;cursor:pointer}
.ph .img img{width:100%;height:100%;object-fit:contain;display:block}
.ph .img .tag{position:absolute;left:8px;top:8px;font-size:11px;background:rgba(0,0,0,.55);color:#fff;padding:2px 7px;border-radius:99px}
.ph .img .num{position:absolute;right:8px;top:8px;font-size:12px;font-weight:700;background:var(--accent);color:var(--accent-ink);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ph .img .spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);color:#333;font-size:13px}
.ph .body{padding:8px 10px 10px}
.ph .warn{font-size:12px;color:var(--warn);margin:4px 0}
.ph .errt{font-size:12px;color:var(--err);margin:4px 0}
.ph .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ph .acts button{padding:6px 9px;font-size:12px}
.uploadbox{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.uploadbox .row>*{flex:1;min-width:180px}
.list a{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.list a:last-child{border-bottom:0}
.list .t{flex:1;min-width:0}.list .t b{display:block}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;font-size:14px;z-index:20;max-width:90vw}
dialog{border:0;border-radius:var(--r);padding:18px;max-width:420px;width:92vw;background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.range{display:flex;gap:10px;align-items:center}.range input{flex:1}
.login{max-width:380px;margin:12vh auto}
.help{font-size:13px;color:var(--muted);line-height:1.5}
.help li{margin:3px 0}
@media (max-width:520px){main{padding:12px}.photos{grid-template-columns:repeat(2,1fr)}}