:root{
  --bg1:#0b1020;
  --bg2:#0a0f22;
  --card:#121a33;
  --line:#26315b;
  --muted:#93a4c7;
  --text:#e8eeff;
  --primary:#2a6bf2;
  --danger:#b33a4a;

  --r:18px;
  --shadow: 0 12px 38px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 900px at 30% 0%, #1a2660 0%, var(--bg1) 55%);
  color:var(--text);
}

.app{min-height:100%; display:flex; flex-direction:column}

.topbar{
  height:58px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  background:rgba(10,14,30,0.70);
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:30;
}
.topbar .left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topbar .right{display:flex; align-items:center; gap:8px}
.brand{font-weight:900; letter-spacing:.5px}
.pill{
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(12,19,48,0.7);
  color:var(--muted);
}
.pill span{color:var(--text)}

.grid{
  flex:1;
  display:grid;
  grid-template-columns: 1.2fr 1.6fr 1.1fr;
  gap:12px;
  padding:12px;
}

.card{
  background:rgba(18,26,51,0.86);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px;
  box-shadow: var(--shadow);
  min-height:0;
}

.cardHead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(38,49,91,.6);
  margin-bottom:10px;
}
.title{font-weight:900}
.sub{font-size:12px; color:var(--muted); margin-top:2px}
.kbd{
  border:1px solid var(--line);
  background:rgba(10,15,34,.9);
  border-radius:12px;
  padding:6px 8px;
  font-size:12px;
  color:var(--muted);
}

.muted{color:var(--muted)}
.out{
  background:rgba(10,15,34,.92);
  border:1px solid rgba(38,49,91,.7);
  border-radius:14px;
  padding:10px;
  max-height:200px;
  overflow:auto;
  font-size:12px;
  color:#bcd0ff;
  white-space:pre-wrap;
}

.btn{
  border:1px solid rgba(38,49,91,.9);
  background:linear-gradient(180deg, #2b3a76 0%, #1f2a55 100%);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
}
.btn.ghost{
  background:transparent;
  border-color:rgba(38,49,91,.8);
}
.btn.primary{
  background:linear-gradient(180deg, #2d78ff 0%, var(--primary) 100%);
  border-color:#2d78ff;
}
.btn.danger{
  background:linear-gradient(180deg, #d34a5e 0%, var(--danger) 100%);
  border-color:#d34a5e;
}
.btn.big{
  width:100%;
  padding:16px 14px;
  font-size:18px;
  border-radius:16px;
}
.btn:active{transform: translateY(1px)}

.scanBox{
  display:flex; gap:10px; align-items:center;
}
.scanInput{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(38,49,91,.9);
  background:rgba(14,21,48,.95);
  color:var(--text);
  outline:none;
  font-size:18px;
  font-weight:700;
}
.scanInput:focus{border-color:#2d78ff; box-shadow: 0 0 0 3px rgba(45,120,255,.18)}
.hintRow{margin:10px 0 6px 0}
.hint{font-size:12px; color:var(--muted)}

.resultsHead{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px;
  font-weight:800;
}
.results{
  margin-top:8px;
  display:grid;
  gap:8px;
  max-height: calc(100vh - 220px);
  overflow:auto;
  padding-right:4px;
}
.result{
  padding:10px;
  border:1px solid rgba(38,49,91,.9);
  border-radius:16px;
  background:rgba(12,19,48,.92);
  display:flex;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
.result:hover{border-color:#2d78ff}
.result.active{outline:2px solid rgba(45,120,255,.55)}
.result .desc{font-weight:900}
.result .meta{font-size:12px; color:var(--muted); margin-top:2px}
.result .price{font-weight:900; white-space:nowrap}

.cartList{
  max-height: calc(100vh - 220px);
  overflow:auto;
  padding-right:4px;
  display:grid;
  gap:8px;
}
.cartItem{
  border:1px solid rgba(38,49,91,.9);
  border-radius:16px;
  background:rgba(12,19,48,.92);
  padding:10px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
}
.cartItem .desc{font-weight:900}
.cartItem .meta{font-size:12px; color:var(--muted); margin-top:2px}
.qtyBox{display:flex; align-items:center; gap:8px}
.qtyBtn{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(38,49,91,.9);
  background:rgba(16,26,58,.95);
  color:var(--text);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}
.qtyBtn:active{transform: translateY(1px)}
.qtyNum{min-width:48px; text-align:center; font-weight:900}
.cartFooter{
  border-top:1px solid rgba(38,49,91,.6);
  margin-top:10px;
  padding-top:10px;
}
.totals{display:grid; gap:8px}
.trow{display:flex; justify-content:space-between; align-items:center; font-weight:800}
.trow.big{font-size:26px}
.trow.big span:last-child{font-weight:950}

.payGrid{display:grid; gap:10px}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:800}
input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(38,49,91,.9);
  background:rgba(14,21,48,.95);
  color:var(--text);
  outline:none;
  font-weight:700;
}
input:focus, select:focus{border-color:#2d78ff; box-shadow: 0 0 0 3px rgba(45,120,255,.18)}
.check{
  display:flex; gap:10px; align-items:center;
  font-size:13px;
  color:var(--text);
  user-select:none;
}
.check input{width:18px; height:18px}

.payBtns{display:grid; grid-template-columns: 1fr; gap:10px}

.modal{
  position:fixed; inset:0;
  display:none;
  z-index:40;
}
.modal[aria-hidden="false"]{display:block}
.modalBackdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.modalCard{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width:min(720px, calc(100vw - 24px));
  background:rgba(18,26,51,.96);
  border:1px solid rgba(38,49,91,.9);
  border-radius:22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modalHead{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px;
  border-bottom:1px solid rgba(38,49,91,.6);
}
.modalBody{padding:14px; display:grid; gap:12px}
.help{font-size:12px; margin-top:6px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.rowBtns{display:flex; gap:10px; flex-wrap:wrap}

.toast{
  position:fixed;
  left:50%; bottom:16px;
  transform: translateX(-50%);
  background:rgba(12,19,48,.95);
  border:1px solid rgba(38,49,91,.9);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  box-shadow: var(--shadow);
  display:none;
  z-index:60;
  max-width: calc(100vw - 24px);
}
.toast[aria-hidden="false"]{display:block}

@media (max-width: 1100px){
  .grid{grid-template-columns: 1fr; }
  .results, .cartList{max-height: 44vh}
  .grid2{grid-template-columns:1fr}
}