:root{
  --bg:#07060D;        /* page background (near-black, slight violet) */
  --card:#110E1C;      /* surface: cards, tiles, stat cards, buttons */
  --card2:#1A1530;     /* raised surface: modal, table header, hover */
  --line:#2A2347;      /* borders, dividers, table lines */
  --fg:#F2EEFF;        /* main text */
  --mut:#A39BC2;       /* muted text, qty, labels */
  --acc:#FF2BE0;       /* primary: active nav, primary buttons, focus */
  --on-acc:#07060D;    /* text on --acc */
  --acc2:#00D6FF;      /* secondary accent: outline buttons, links, focus ring */
  --price:#5CEBFF;     /* prices: brightest high-contrast cyan, reads across a table */
  --ok:#22E39A;        /* success, positive profit */
  --bad:#FF3D7F;       /* danger, negative numbers, errors */
  --warn:#FFC23D;      /* warnings, below-min price floor */
  --blue:#3D8BFF;      /* graded-slab badge */
  --jp:#C46BFF;        /* JP badge (logo purple, lifted for contrast) */
  --hdr:#0B0916;       /* header background */
  --inp:#0B0916;       /* inputs, selects, image wells */
  --toast:#1A1530;     /* toast background */
  --offline-bg:#3A2A00;
  --offline-fg:#FFD27A;
  --backdrop:rgba(4,3,10,.80);
  --grad:linear-gradient(90deg,#FC00FC 0%,#A400FE 40%,#4902FC 60%,#006AFF 80%,#00D6FF 100%);
  --glow-acc:0 0 10px rgba(255,43,224,.45);
  --glow-acc2:0 0 10px rgba(0,214,255,.45);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc2)}
header{position:sticky;top:0;z-index:5;background:var(--hdr);display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap;border-bottom:1px solid transparent;border-image:var(--grad) 1}
header .logo img{height:32px;display:block}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
nav a,.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);text-decoration:none;cursor:pointer;font:inherit;min-height:40px}
nav a.on,.btn.pri{background:var(--acc);color:var(--on-acc);border-color:var(--acc);box-shadow:var(--glow-acc);font-weight:700}
.btn.out{border-color:var(--acc2);color:var(--acc2)} .btn.bad{border-color:var(--bad);color:var(--bad)} .btn.sm{min-height:30px;padding:4px 8px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
main{max-width:1200px;margin:0 auto;padding:12px}
input,select,textarea{background:var(--inp);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;min-height:40px;width:100%}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:2px solid var(--acc2);outline-offset:1px}
label{display:block;font-size:13px;color:var(--mut)} label>input,label>select,label>textarea{margin-top:3px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:end} .row>*{flex:1 1 140px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.tile .img{aspect-ratio:5/7;background:var(--inp);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--mut);font-size:12px;text-align:center}
.tile .img img{width:100%;height:100%;object-fit:contain}
.tile .nm{font-weight:700;font-size:14px} .mut{color:var(--mut);font-size:13px}
.price{color:var(--price);font-weight:800} .tbd{color:var(--warn);font-weight:700}
.badge{display:inline-block;padding:1px 6px;border-radius:6px;font-size:11px;border:1px solid var(--line);color:var(--mut)} .badge.slab{border-color:var(--blue);color:var(--blue)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
table{width:100%;border-collapse:collapse;font-size:14px} th,td{padding:6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle} th{background:var(--card2);position:sticky;top:0}
td input,td select{min-height:32px;padding:4px 6px} .tw{overflow:auto;max-height:70vh}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px} .stat b{display:block;font-size:20px}
.pos{color:var(--ok)} .neg{color:var(--bad)}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--toast);border:1px solid var(--acc2);padding:10px 14px;border-radius:10px;display:none;z-index:20;max-width:90vw}
#toast.err{border-color:var(--bad);color:var(--bad)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.cartn{background:var(--acc2);color:var(--on-acc);border-radius:9px;padding:0 6px;font-size:12px;font-weight:800}
.hide{display:none!important}
.alpha{font-size:11px;color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:0 5px}
@media (max-width:600px){.grid{grid-template-columns:repeat(2,1fr)} header .logo img{height:26px}}
.noimg{padding:10px;color:var(--mut);font-size:12px;line-height:1.3;border:1px dashed var(--line);border-radius:8px;margin:8px}.noimg b{color:var(--fg);font-size:13px}
#fbbtn{position:fixed;right:12px;bottom:12px;z-index:15;background:var(--card);box-shadow:var(--glow-acc2)}
.modal{position:fixed;inset:0;background:var(--backdrop);z-index:30;display:flex;align-items:center;justify-content:center;padding:12px}
main{padding-bottom:70px}
#cardmodal{align-items:center}
#cardmodal .dlg{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 0 24px rgba(255,43,224,.25);width:min(920px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:14px;outline:none}
#cardmodal .mx{position:sticky;top:0;float:right;z-index:2;min-width:40px;min-height:40px;font-size:18px}
#cardmodal h2{margin:0 0 8px;padding-right:44px}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start}
.mimg{background:var(--inp);border-radius:12px;display:flex;align-items:center;justify-content:center;min-height:260px;overflow:auto;max-height:75dvh}
.mimg .zimg{width:100%;max-height:70dvh;object-fit:contain;cursor:zoom-in;transition:transform .2s}
.mimg .zimg.zoomed{max-height:none;width:180%;cursor:zoom-out}
.mimg .noimg{font-size:15px;padding:30px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0 0 10px} dl.kv dt{color:var(--mut)} dl.kv dd{margin:0}
.mprice{font-size:26px;margin:8px 0} .owner{border:1px dashed var(--warn);border-radius:10px;padding:8px 10px;margin:8px 0} .owner h3{margin:0 0 6px;color:var(--warn);font-size:14px}
.mnav{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.tile{cursor:pointer} .tile:focus-visible{outline:2px solid var(--acc2)} tr.clk{cursor:pointer} tr.clk:hover td{background:var(--card2)}
body.noscroll{overflow:hidden}
@media (max-width:700px){.mgrid{grid-template-columns:1fr} .mimg{min-height:200px;max-height:60dvh} .mimg .zimg{max-height:58dvh} #cardmodal{padding:6px} #cardmodal .dlg{padding:10px;max-height:calc(100dvh - 12px)}}
.iw,.mimg{position:relative}
.foilb{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;line-height:1}
.foilb svg{width:22px;height:22px;filter:drop-shadow(0 0 4px rgba(252,0,252,.75)) drop-shadow(0 0 6px rgba(0,214,255,.5))}
.foilb .fl{display:none;font-size:11px;font-weight:800;color:var(--fg);background:var(--card2);border:1px solid var(--acc);border-radius:6px;padding:2px 5px;box-shadow:var(--glow-acc)}
.foilb.lbl .fl,.foilb:hover .fl,.tile:focus-visible .foilb .fl{display:inline-block}
.iw>.foilb,.mimg>.foilb{position:absolute;top:6px;right:6px;z-index:1;flex-direction:row-reverse}
.mimg>.foilb svg{width:30px;height:30px} .mimg>.foilb .fl{display:inline-block}
td .foilb svg{width:18px;height:18px}
.chk{display:flex;align-items:center;gap:6px;color:var(--fg);font-size:14px;min-height:40px;flex:0 1 auto!important} .chk input{width:20px;min-height:20px;accent-color:var(--acc)}