:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#F2F2F5; --surface-2:#E9E9ED; --ink:#1D1D1F; --muted:#6E6E73; --line:#E3E3E8;
  --accent:#1D1D1F; --accent-ink:#FFFFFF; --gold:#9A6F12; --silver:#6B7479;
  --good:#1F8A4C; --bad:#C8372B; --warn:#A56A08; --info:#2D5F9A;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","IBM Plex Sans",Roboto,sans-serif;
  --font-mono:"SF Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
  --font-legend:"Cinzel",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font-ui)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:12px;height:60px}
.brand{font-family:var(--font-legend);font-weight:700;font-size:22px;letter-spacing:.06em;text-decoration:none;display:flex;align-items:center;gap:8px}
.brand img{height:34px;width:auto;border-radius:6px}
.brand small{font:500 11px var(--font-ui);color:var(--muted);letter-spacing:0}
.spacer{flex:1}
nav.tabs{display:flex;gap:4px}
nav.tabs a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:500}
nav.tabs a.on{background:var(--surface);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:500;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{opacity:.9}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.panel{background:var(--surface);border-radius:var(--radius);padding:18px;margin:14px 0}
.panel h2{margin:0 0 12px;font-size:17px}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-family:var(--font-mono)}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:720px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} nav.tabs a{padding:8px}}
@media (max-width:460px){.g2{grid-template-columns:1fr}}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
label.f input,label.f select,label.f textarea{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 11px;font-size:15px;color:var(--ink);width:100%}
label.f textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #1D1D1F22;border-color:#1D1D1F66}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;box-shadow:var(--shadow);z-index:99;max-width:90vw}
.toast.err{background:var(--bad)}

/* auth */
.auth{max-width:420px;margin:8vh auto;padding:0 16px}
.auth .card{background:var(--surface);border-radius:20px;padding:28px}
.auth h1{font-family:var(--font-legend);text-align:center;letter-spacing:.08em;margin:0 0 4px}
.auth p.sub{text-align:center;color:var(--muted);margin:0 0 20px}
.linkish{background:none;border:0;color:var(--info);cursor:pointer;padding:0;text-decoration:underline}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.stat{background:var(--surface);border-radius:var(--radius);padding:12px 14px}
.stat b{display:block;font-size:20px}
.stat span{font-size:12px;color:var(--muted)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spot{display:flex;gap:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.spot b{color:var(--ink)}

/* list */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.toolbar input[type=search]{flex:1;min-width:180px;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.toolbar select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.list{display:flex;flex-direction:column;gap:2px;background:var(--surface);border-radius:var(--radius);padding:6px}
.it{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:10px;text-decoration:none;background:var(--bg)}
.it:hover{outline:1px solid var(--line)}
.thumb{width:56px;height:56px;border-radius:8px;background:var(--surface-2);object-fit:cover;display:block}
.it .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .m{font-size:12.5px;color:var(--muted)}
.it .p{text-align:right;font-size:13px}
.it .p b{font-size:15px}
.pill{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted);font-weight:600}
.pill.for_sale,.pill.listed{background:#E6F3EC;color:var(--good)}
.pill.sold{background:#F1F1F3;color:#8E8E93}
.pill.at_grader,.pill.incoming{background:#FFF3DF;color:var(--warn)}
.empty{background:var(--surface);border-radius:var(--radius);padding:40px 16px;text-align:center;color:var(--muted)}

/* item */
.itemhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.itemhead h1{font-size:20px;margin:0;flex:1;min-width:200px}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.ph{position:relative;width:110px;height:110px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .bar{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;background:rgba(0,0,0,.55)}
.ph .bar button{background:none;border:0;color:#fff;cursor:pointer;padding:4px 6px;font-size:13px}
.ph .star{position:absolute;top:4px;left:4px;background:var(--gold);color:#fff;font-size:10px;padding:1px 6px;border-radius:6px;font-weight:700}
.addph{width:110px;height:110px;border:2px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);text-align:center;font-size:13px}
.calc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:13px}
.calc div{background:var(--bg);border-radius:10px;padding:8px 10px}
.calc b{display:block;font-size:15px}
.pos{color:var(--good)} .neg{color:var(--bad)}
canvas.label{background:#fff;border:1px solid var(--line);border-radius:6px;max-width:100%;image-rendering:pixelated}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t td,table.t th{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.scan{max-width:460px;margin:8vh auto;padding:0 16px;text-align:center}
.scan .card{background:var(--surface);border-radius:20px;padding:24px}