:root{
  --bg:#EEF1F6; --paper:#FFFFFF; --ink:#16213A; --ink-2:#4B5878; --ink-3:#8A94AD;
  --line:#D9DEE9; --navy:#1B2A4A; --yellow:#FFCB05; --red:#E3350D; --green:#2E9E5B; --blue:#2A75BB;
  --chip:#F2F4F9; --shadow:0 1px 2px rgba(22,33,58,.06), 0 8px 24px -12px rgba(22,33,58,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1524; --paper:#182036; --ink:#EEF1F8; --ink-2:#B6BFD6; --ink-3:#7F8AA8;
    --line:#2A3452; --navy:#0B1020; --chip:#222C46; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1524; --paper:#182036; --ink:#EEF1F8; --ink-2:#B6BFD6; --ink-3:#7F8AA8;
  --line:#2A3452; --navy:#0B1020; --chip:#222C46; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif; font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--blue)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.hidden{display:none !important}

/* header */
.hdr{background:var(--navy); color:#fff; padding:22px 0 18px; position:relative; overflow:hidden; padding-top:calc(22px + env(safe-area-inset-top))}
.hdr::after{content:""; position:absolute; right:-60px; top:-90px; width:260px; height:260px; border-radius:50%; border:34px solid rgba(255,255,255,.06); border-top-color:rgba(255,203,5,.55); transform:rotate(-30deg); pointer-events:none}
.hdr .wrap{position:relative}
.hdr h1{margin:0; font-size:clamp(24px,4vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.05}
.hdr p{margin:8px 0 0; color:#C6CFE4; max-width:62ch}
.topline{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.topline nav{display:flex; gap:6px; flex-wrap:wrap}
.topline nav a,.topline nav button{color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:7px 12px; text-decoration:none; font-weight:600; font-size:14px; cursor:pointer}
.sync{display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:13px; color:#C6CFE4}
.sync::before{content:""; width:9px; height:9px; border-radius:50%; background:#8A94AD}
.sync.on::before{background:#4ADE80}
.stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.stat{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px 14px; min-width:118px}
.stat b{display:block; font-size:24px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums}
.stat span{font-size:13px; color:#C6CFE4}
.stat.pos b{color:#4ADE80} .stat.neg b{color:#F87171} .stat.warn b{color:var(--yellow)}

/* controls */
.tabs{display:flex; gap:6px; padding:16px 0 0; overflow-x:auto}
.tab{border:0; background:transparent; padding:8px 14px; border-radius:12px; font-weight:600; cursor:pointer; color:var(--ink-2); white-space:nowrap}
.tab[aria-selected="true"]{background:var(--paper); color:var(--ink); box-shadow:var(--shadow)}
.bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:12px}
.search{flex:1 1 220px; display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:9px 12px}
.search input{border:0; background:transparent; flex:1; min-width:0; outline:none}
.search svg{flex:none; color:var(--ink-3)}
select{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:9px 12px}
.btn{border:1px solid var(--line); background:var(--paper); border-radius:12px; padding:9px 14px; cursor:pointer; font-weight:500}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn.accent{background:var(--yellow); color:#16213A; border-color:var(--yellow); font-weight:700}
.btn.danger{color:var(--red)}
.btn.sm{padding:6px 10px; font-size:14px; border-radius:10px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding-top:10px}
.chip{border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:6px 13px; cursor:pointer; font-size:14px; font-weight:500}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.msg{padding-top:10px; font-size:14px; color:var(--ink-2); min-height:20px}
.msg.err{color:var(--red)}

/* cards */
.grid{padding:16px 0 70px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.card{background:var(--paper); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; position:relative}
.card.soldout{opacity:.62}
.band{height:10px}
.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1}
.top{display:flex; justify-content:space-between; gap:10px; align-items:center}
.set{font-size:13px; font-weight:600}
.cat{font-size:12px; font-weight:600; background:var(--chip); color:var(--ink-2); border-radius:8px; padding:3px 8px; white-space:nowrap}
.hero{display:flex; gap:12px; align-items:center}
.thumb{flex:none; width:84px; height:84px; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--chip); cursor:zoom-in; display:grid; place-items:center; font-weight:800; font-size:22px; color:var(--ink-3)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
h2{margin:0; font-size:18px; font-weight:700; line-height:1.2; letter-spacing:-.01em}
.status{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600}
.status::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--green)}
.status.low::before{background:var(--yellow)} .status.out::before{background:var(--red)}
.flag{font-size:12px; color:var(--red); font-weight:600}
.qty{display:flex; align-items:center; gap:8px}
.qty button{width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--paper); cursor:pointer; font-size:18px; line-height:1}
.qty output{min-width:34px; text-align:center; font-weight:800; font-size:22px; font-variant-numeric:tabular-nums}
.qty small{color:var(--ink-3); font-size:13px}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.kv > div{background:var(--bg); border-radius:10px; padding:8px 10px}
.kv label{font-size:12px; color:var(--ink-3); display:block}
.kv b{font-size:16px; font-variant-numeric:tabular-nums}
.kv input{width:100%; border:0; background:transparent; padding:0; font-weight:700; font-size:16px; outline:none}
.kv small{display:block; font-size:11px; color:var(--ink-3)}
.code{border-top:1px solid var(--line); padding-top:10px; display:flex; gap:12px; align-items:center}
.code svg{width:150px; height:52px; flex:none; background:#fff; border-radius:6px; padding:3px 6px}
.code .nums{font-size:12px; color:var(--ink-2); line-height:1.5; font-variant-numeric:tabular-nums}
.code .nums b{display:block; color:var(--ink); font-weight:600; letter-spacing:.04em}
.actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto}
.link{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:12px; background:var(--yellow); color:#16213A; text-decoration:none; font-weight:700; font-size:15px; grid-column:1/-1}
.link.verify{background:var(--chip); color:var(--ink-2); font-weight:600}
.sold{background:var(--navy); color:#fff; border:0; border-radius:12px; padding:10px; font-weight:700; cursor:pointer}
.sold:disabled{opacity:.4; cursor:not-allowed}
.edit{border:1px solid var(--line); background:var(--paper); border-radius:12px; padding:10px; font-weight:600; cursor:pointer}
.empty{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--ink-2)}

/* table */
.tablewrap{overflow-x:auto; background:var(--paper); border-radius:18px; box-shadow:var(--shadow); margin:16px 0 70px}
table{border-collapse:collapse; width:100%; min-width:720px; font-size:14px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-weight:600; color:var(--ink-2); font-size:13px}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
.pos{color:var(--green)} .neg{color:var(--red)}
tfoot td{font-weight:700; background:var(--bg)}

/* dialogs & forms */
dialog{border:0; border-radius:18px; padding:0; background:var(--paper); color:var(--ink); width:min(92vw,520px); box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(10,14,28,.7)}
dialog form,.panel{padding:18px 20px 20px; display:grid; gap:12px}
dialog h3{margin:0 0 4px; font-size:20px}
dialog label,.panel label{display:grid; gap:4px; font-size:13px; color:var(--ink-2)}
dialog input,dialog select,dialog textarea,.panel input,.panel select,.panel textarea{border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--bg); width:100%; font-size:15px; color:var(--ink)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.foot{display:flex; gap:8px; justify-content:flex-end; margin-top:4px; flex-wrap:wrap}
.foot .spacer{flex:1}
.check{display:flex !important; align-items:center; gap:10px; font-size:15px !important; color:var(--ink) !important}
.check input{width:20px !important; height:20px}
#zoom{width:min(92vw,640px)} #zoom img{display:block; width:100%; height:auto} #zoom p{margin:0; padding:12px 16px; font-weight:600}
.panel{background:var(--paper); border-radius:18px; box-shadow:var(--shadow); margin:16px 0}
.panel h3{margin:0}
.hint{font-size:13px; color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){ .qty output{transition:transform .15s} .qty output.bump{transform:scale(1.25)} }
@media (max-width:480px){ .wrap{padding:0 14px} .actions{grid-template-columns:1fr} .two{grid-template-columns:1fr} }

/* auth / landing */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px}
.authbox{background:var(--paper); border-radius:22px; box-shadow:var(--shadow); width:min(440px,100%); overflow:hidden}
.authbox .brand{background:var(--navy); color:#fff; padding:26px 24px}
.authbox .brand h1{margin:0; font-size:30px; font-weight:800; letter-spacing:-.02em}
.authbox .brand p{margin:6px 0 0; color:#C6CFE4}
.authbox form{padding:20px 24px 24px}
.switch{text-align:center; font-size:14px; color:var(--ink-2); padding-bottom:20px}
.switch button{border:0; background:none; color:var(--blue); text-decoration:underline; cursor:pointer; padding:0}

/* public profile */
.pic{aspect-ratio:4/3; background:var(--chip); display:grid; place-items:center; overflow:hidden; position:relative}
.pic img{width:100%; height:100%; object-fit:cover; display:block}
.pic span{font-weight:800; font-size:28px; color:var(--ink-3)}
.pic .tag{position:absolute; left:10px; top:10px; font-size:12px; font-weight:700; padding:4px 9px; border-radius:8px; color:#fff}
.price{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.price small{font-size:13px; font-weight:500; color:var(--ink-3); display:block}
.bottom{display:flex; justify-content:space-between; align-items:end; margin-top:auto; padding-top:10px; gap:8px}
.ask{display:block; text-align:center; margin-top:10px; padding:10px; border-radius:12px; background:var(--navy); color:#fff; text-decoration:none; font-weight:700}
.contact{display:inline-flex; align-items:center; gap:8px; margin-top:16px; background:var(--yellow); color:#16213A; text-decoration:none; font-weight:700; padding:11px 16px; border-radius:12px}

/* chart / snapshot bar (header) */
.chartbar{margin-top:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px 16px}
.chartbar-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.chartbar-head h3{margin:0; font-size:13px; color:#C6CFE4; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.3)}
.btn.ghost:hover{border-color:#fff}
.chart{display:flex; gap:32px; flex-wrap:wrap}
.chartcol{flex:1 1 220px; min-width:200px}
.chartcol h4{margin:0 0 8px; font-size:11px; color:#8FA0C6; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.mrow{display:grid; grid-template-columns:96px 1fr 78px; align-items:center; gap:10px; margin-bottom:7px}
.mlabel{font-size:12px; color:#C6CFE4}
.mtrack{background:rgba(255,255,255,.12); border-radius:6px; height:10px; overflow:hidden}
.mfill{height:100%; border-radius:6px; min-width:3px}
.mval{text-align:right; font-size:13px; font-variant-numeric:tabular-nums; font-weight:700; color:#fff}

/* view toggle */
.viewToggle{display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.vtbtn{border:0; background:var(--paper); padding:9px 14px; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-2)}
.vtbtn + .vtbtn{border-left:1px solid var(--line)}
.vtbtn[aria-pressed="true"]{background:var(--navy); color:#fff}

/* purchase source badge on tiled cards */
.src{font-size:12px; color:var(--ink-3); font-weight:500; margin-top:-4px}

/* condensed inventory table */
table.condensed{min-width:960px}
table.condensed td.name{white-space:normal; font-weight:600; min-width:180px}
table.condensed .dot{display:inline-block; width:10px; height:10px; border-radius:50%}
table.condensed input[data-f="cost"]{width:84px; border:1px solid var(--line); border-radius:8px; padding:5px 7px; background:var(--bg); text-align:right; font-weight:600}
table.condensed .actions-c{display:flex; gap:6px; white-space:nowrap}
table.condensed tr.soldout{opacity:.55}