:root{
  --bg:#0d0d0d;
  --panel:#0f141a;
  --line:#242a33;
  --text:#e7ecf5;
  --sub:#b7c0cd;
  --blue:#0A84FF;              /* brighter iOS blue */
  --grayBtn:#2C2C2E;           /* solid dark gray button */
  --warn:#ffcc00;
}

/* layout */
html, body { height:100%; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
}

/* content area above nav, pushes bottom area down like the screenshot */
.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-bottom:calc(90px + env(safe-area-inset-bottom)); /* space for tab bar */
}

/* pass card */
.card{
  width:min(400px,92%);
  margin:20px auto 0;
  padding:18px 18px 16px;
  background:var(--blue);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  color:#fff;
}
.card-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;opacity:.95}
.brand{margin:6px 0 0 0;font-size:22px;font-weight:700}
.qty{font-weight:700}
.qr{display:flex;justify-content:center;margin:18px 0}
.qr img{width:170px;height:170px;background:#fff;padding:12px;border-radius:14px}
.details{display:flex;justify-content:space-between;gap:12px}
.detail .label{font-size:12px;opacity:.85}
.detail .value{font-size:14px;font-weight:600}
.detail.right{text-align:right}

/* bottom section (note + buttons + dot) */
.bottom-section{display:flex;flex-direction:column;align-items:center;margin:14px 0 0}
.note{
  width:min(400px,92%);
  text-align:center;
  color:#d7dce4;
  font-size:14px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
  margin:0 0 12px;
}
.btn{
  width:min(400px,92%);
  padding:16px;
  margin:7px auto;
  font-size:16px;
  font-weight:700;
  border-radius:12px;
  border:none;
  cursor:pointer;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-gray{background:var(--grayBtn);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-blue{background:var(--blue);color:#fff}
.btn-ghost{background:transparent;color:#b9c2d0;font-weight:600}

.pager-dot{
  width:6px;height:6px;border-radius:999px;background:#d7dce4;opacity:.35;margin:10px 0 0;
}

/* bottom tab bar with your icons */
.tabs{
  position:fixed;inset:auto 0 0 0;
  display:flex;justify-content:space-around;align-items:center;
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0b1016,#0a0f14);
  z-index:100;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:#9fb0c8;font-size:12px;opacity:.7;
}
.tab img{width:22px;height:22px;object-fit:contain}
.tab.active{color:var(--blue);opacity:1;font-weight:700}

/* slide-up bottom sheet */
.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:120;
}
.backdrop.show{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;left:50%;transform:translate(-50%,100%);
  bottom:0;width:100%;max-width:480px;background:#0e1319;
  border-radius:16px 16px 0 0;padding:10px 16px 16px;
  box-shadow:0 -24px 50px rgba(0,0,0,.6);
  transition:transform .32s ease;z-index:130;
}
.sheet.show{transform:translate(-50%,0)}
.sheet-handle{width:46px;height:5px;border-radius:999px;background:#2a3443;margin:8px auto 10px}

/* logo at top of sheet */
.logo-wrap{display:flex;justify-content:center;margin:6px 0 8px}
.logo-img{width:62px;height:62px;border-radius:999px;border:3px solid #1e2632;object-fit:cover}
.logo-fallback{display:none;width:62px;height:62px;border-radius:999px;border:3px solid #1e2632;
  align-items:center;justify-content:center;background:#1a2130;color:#e7ecf5;font-weight:800}

/* card-like panel inside sheet */
.sheet-card{
  width:min(420px,92%);margin:0 auto;border-radius:16px;background:#173251;
  padding:14px 10px 10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
.qr-big{display:flex;justify-content:center}
.qr-big img{width:220px;height:220px;background:#fff;border-radius:14px;padding:12px}
.current-time{font-size:13px;color:#c7d2df;text-align:center;margin-top:8px}
.current-time strong{color:#eaf1fb}

/* scanner lane */
.scanner{
  position:relative;height:64px;border-radius:12px;background:#121821;
  margin:18px auto 8px;width:min(320px,86%);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.scan-line{
  position:absolute;top:0;bottom:0;width:3px;background:var(--blue);
  box-shadow:0 0 8px rgba(10,132,255,.85);
  animation:scan 2.2s ease-in-out infinite;
}
@keyframes scan{0%{left:10%}50%{left:90%}100%{left:10%}}
.scanner .icons{position:relative;display:flex;gap:56px;font-size:30px;z-index:2}

/* warnings + sheet buttons */
.warn{color:var(--warn);font-size:13px;text-align:center;margin:8px 0 8px}

/* animation overlay */
.anim-screen{
  position:fixed;inset:0;background:#1c1c1e;display:none;
  align-items:center;justify-content:center;flex-direction:column;z-index:200;
}
.arc{width:120px;height:120px}
.check{width:100px;height:100px}
.pieces{color:#fff;font-size:42px;letter-spacing:6px}
.ll-logo{width:120px;height:auto}
.tagline{margin-top:16px;color:#bfbfbf;opacity:0}

/* empty state after redeem */
.empty{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);z-index:50}