:root{--accent:#1D4ED8}
@media (prefers-color-scheme:dark){:root{--accent:#60A5FA;--accent-ink:#0b1626}}
.zone{display:grid;place-items:center;text-align:center;gap:6px;min-height:200px;border:2px dashed color-mix(in oklab,var(--accent) 45%,var(--line));border-radius:var(--r-panel);background:color-mix(in oklab,var(--accent) 5%,var(--surface));cursor:pointer;padding:24px;transition:background .2s,border-color .2s}
.zone:hover,.zone.over{background:color-mix(in oklab,var(--accent) 12%,var(--surface));border-color:var(--accent)}
.zone b{font-size:18px}
.zone span{color:var(--muted);font-size:14px}
.zone .btn{margin-top:8px;pointer-events:none;color:var(--accent-ink)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 16px;margin-top:18px}
input[type=range]{width:100%;accent-color:var(--accent);height:44px}
.rangehead{display:flex;justify-content:space-between}
.rangehead output{font-weight:700;color:var(--accent)}
#list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
#list li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border-radius:var(--r-ctl);background:var(--surface-2)}
#list img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:var(--bg)}
#list .meta{display:grid;min-width:0}
#list .meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#list .meta span{font-size:14px;color:var(--muted)}
#list .meta .good{color:var(--accent);font-weight:700}
#list li.bad .meta span{color:#c2410c}
.outhead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:20px}
#total{font-weight:700}
.privacy-note{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-top:12px}