:root{
  --bg:#12151a; --panel:#1a1f27; --panel2:#222833; --line:#2e3644;
  --ink:#e8ecf2; --dim:#98a3b3; --dimmer:#6b7686;
  --win:#4ade80; --warn:#fbbf24; --bad:#f87171; --link:#7dd3fc;
  --r:12px;
}
*{box-sizing:border-box}
/* The [hidden] attribute is only display:none in the UA stylesheet, so ANY
   author rule that sets display beats it. .gate and .sheet both set
   display:grid, which meant the login overlay never went away after a
   successful login ("the Enter button does nothing") and the invisible sheet
   sat on top of the app swallowing every tap. Anything toggled by .hidden in
   app.js depends on this line. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
h1{font-size:1.15rem;margin:0;letter-spacing:.02em}
h2{font-size:1rem;margin:0 0 .2rem}
button,input{font:inherit}
button{cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:.6rem .9rem}
button.primary{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600}
button.ghost{background:transparent;color:var(--dim)}
button:active{transform:translateY(1px)}
input{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:.6rem .7rem;width:100%}
input:focus{outline:2px solid #2563eb;outline-offset:1px}

header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding:.7rem .8rem .5rem;display:flex;flex-direction:column;gap:.5rem}
nav{display:flex;gap:.4rem}
nav button{padding:.4rem .8rem;font-size:.85rem;color:var(--dim);background:transparent}
nav button.on{background:var(--panel2);color:var(--ink)}

section{padding:.8rem}
.addbar{display:flex;gap:.5rem;align-items:stretch;margin-bottom:.7rem;flex-wrap:wrap}
.addbar #scanBtn{flex:0 0 auto}
.addbar form{display:flex;gap:.5rem;flex:1 1 200px}
.addbar form input{flex:1}

.msg{margin:.2rem 0 .7rem;padding:.5rem .7rem;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:.9rem}
.msg.bad{border-color:#7f1d1d;color:#fecaca}
.msg.good{border-color:#14532d;color:#bbf7d0}
.err{color:var(--bad);font-size:.85rem}

/* ---- gate ---- */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;padding:1rem}
.gatebox{width:min(340px,100%);display:flex;flex-direction:column;gap:.6rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}
.gatebox p{margin:0;color:var(--dim);font-size:.9rem}

/* ---- scanner ---- */
#scanner{position:relative;margin-bottom:.7rem;border-radius:var(--r);overflow:hidden;background:#000}
#video{width:100%;max-height:46vh;object-fit:cover;display:block}
.scanhud{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .6rem;background:rgba(0,0,0,.62);font-size:.85rem}

/* ---- item cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.7rem;margin-bottom:.7rem}
.chead{display:flex;gap:.65rem;align-items:flex-start}
.chead img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:8px;flex:0 0 auto}
.cname{flex:1;min-width:0}
.cname b{display:block;font-size:.97rem;line-height:1.25}
.cname span{display:block;color:var(--dim);font-size:.79rem;margin-top:.12rem}
.kill{background:transparent;border:0;color:var(--dimmer);font-size:1.15rem;padding:.1rem .3rem;line-height:1}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;margin-top:.6rem}
.cell{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.5rem .55rem;text-align:left;min-height:66px;display:flex;flex-direction:column;justify-content:space-between}
.cell .st{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.cell .pr{font-size:1.12rem;font-weight:700;margin-top:.15rem}
.cell .sub2{font-size:.68rem;color:var(--dimmer);margin-top:.1rem;line-height:1.3}
.cell.best{border-color:var(--win);box-shadow:inset 0 0 0 1px rgba(74,222,128,.28)}
.cell.best .pr{color:var(--win)}
.cell.empty .pr{color:var(--dimmer);font-weight:500;font-size:.9rem}
.cell.unverified .pr::after{content:"*";color:var(--warn)}
.cell.needsmatch{border-color:var(--warn)}

.deal{margin-top:.5rem;font-size:.8rem;color:var(--warn);background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.28);border-radius:9px;padding:.4rem .55rem}
.deal b{color:#fde68a}

.foot{color:var(--dimmer);font-size:.76rem;margin-top:1rem;line-height:1.5}
.legend{color:var(--dimmer);font-size:.74rem;margin:.2rem 0 .8rem;line-height:1.5}

.manualbox{background:var(--panel);border:1px solid var(--warn);border-radius:var(--r);padding:.7rem;margin-bottom:.7rem}
.manualbox p{margin:0 0 .5rem;font-size:.88rem}
.manualbox form{display:flex;flex-direction:column;gap:.45rem}

/* ---- deals ---- */
.dstore{margin-bottom:1.1rem}
.dstore h2{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.dstore h2 small{color:var(--dimmer);font-weight:400;font-size:.72rem}
.drow{display:flex;justify-content:space-between;gap:.7rem;padding:.42rem .1rem;border-bottom:1px solid var(--line);font-size:.87rem}
.drow:last-child{border-bottom:0}
.drow span{color:var(--dim);flex:1;min-width:0}
.drow b{flex:0 0 auto}
.note{color:var(--dimmer);font-size:.8rem;padding:.4rem 0}

/* ---- sheet ---- */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:end center;z-index:40}
.sheetbox{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;padding:1rem;max-height:86vh;overflow:auto}
.sheetbox .sub{color:var(--dim);font-size:.82rem;margin:0 0 .8rem}
.sheetbox form{display:flex;gap:.5rem;margin-bottom:.8rem}
.cand{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.5rem;border:1px solid var(--line);border-radius:10px;margin-bottom:.4rem;font-size:.85rem}
.cand div{flex:1;min-width:0}
.cand small{display:block;color:var(--dimmer)}
@media(min-width:560px){.grid{grid-template-columns:repeat(4,1fr)}}