:root{
  --bg:#0b0f14;
  --card:#111826;
  --card2:#0f1623;
  --text:#e9eef7;
  --muted:#98a2b3;
  --line:#233044;
  --primary:#f6c445;
  --danger:#ff5c5c;
  --ok:#3ce3a4;

  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius:18px;

  --btnText:#121212;

  --overlay: rgba(0,0,0,.55);
  --surface: rgba(17,24,38,.92);
  --surfaceBorder: rgba(255,255,255,.10);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family: Inter, system-ui, Arial, sans-serif;
  background: radial-gradient(1100px 600px at 20% -10%, rgba(246,196,69,.18), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(60,227,164,.12), transparent 50%),
              var(--bg);
  color:var(--text);
}

.app{min-height:100vh; display:flex; flex-direction:column;}
.main{flex:1; padding:18px; max-width:1080px; width:100%; margin:0 auto;}
.page{animation:fade .18s ease;}
@keyframes fade{from{opacity:.4; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.hide{display:none !important;}

.card{
  background: rgba(17,24,38,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}

#pageLogin, #pageRegister{
  min-height: calc(100vh - 36px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.authCard{max-width:460px; width:100%; margin:0 auto; padding:20px;}
.authLogoWrap{display:flex; justify-content:center; margin:6px 0 12px 0;}
.authLogo{
  width:min(210px, 62vw);
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.35));
}

h1,h2,h3{margin:0 0 8px 0;}
.muted{color:var(--muted);}
.small{font-size:12px;}

.field{display:flex; flex-direction:column; gap:8px; margin:10px 0;}
label{font-size:12px; color:var(--muted);}
input{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,22,35,.85);
  color:var(--text);
  padding:12px 12px;
  border-radius:14px;
  outline:none;
  width:100%;
}
input:focus{border-color: rgba(246,196,69,.7);}

.passWrap{position:relative; display:flex; align-items:center;}
.passWrap input{ padding-right:48px; }

.passToggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,22,35,.65);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.passToggle span{font-size:20px; color: var(--muted); line-height:1;}
.passToggle:hover{filter:brightness(1.08);}
.passToggle:hover span{color: var(--primary);}

.capsHint{
  font-size:12px;
  color:#ffd1d1;
  background: rgba(255,92,92,.10);
  border:1px solid rgba(255,92,92,.22);
  padding:8px 10px;
  border-radius:12px;
}

button{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,22,35,.85);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
}
button:hover{filter:brightness(1.05);}

.primary{
  background: linear-gradient(135deg, rgba(246,196,69,.95), rgba(246,196,69,.65));
  color:var(--btnText);
  font-weight:800;
  border:1px solid rgba(246,196,69,.55);
}
.danger{
  background: rgba(255,92,92,.14);
  border-color: rgba(255,92,92,.25);
  color:#ffd1d1;
}
.ghost{background: transparent;}
.link{background:transparent; border:none; padding:0; color:var(--primary); font-weight:700;}
.smallBtn{padding:10px 12px; border-radius:12px;}
.divider{height:1px; background: rgba(255,255,255,.08); margin:14px 0;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:720px){ .grid2{grid-template-columns:1fr;} }

/* ✅ Powered by centered */
.poweredBy,
.poweredAuthRow{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  opacity:.9;
}
.poweredLabel{font-size:12px; color:var(--muted);}
.poweredText{display:none; font-size:13px; font-weight:700; color:var(--muted);}
.poweredLogo{height:28px; max-width:180px; object-fit:contain;}

.adminTopRow{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin:10px 0 14px 0;
}
.adminLeft{justify-self:start;}
.adminCenter{justify-self:center;}
.adminRight{justify-self:end;}
.adminLogoCenter{
  width:min(170px, 46vw);
  height:auto;
  display:block;
  opacity:.95;
}

/* ✅ Scan point chip + flicker dot */
.scanPointChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,22,35,.65);
  font-weight:900;
  font-size:13px;
}
.pulseDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(60,227,164,.95);
  box-shadow: 0 0 0 0 rgba(60,227,164,.55);
  animation: pulseGreen 1.05s infinite;
}
.chipText{font-weight:900;}

.tabs{display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.tabsFill .tab{flex:1; justify-content:center;}
.tab{padding:10px 12px; border-radius:999px; display:flex; gap:8px; align-items:center; justify-content:center;}
.tab span{font-size:18px; color:var(--muted);}
.tab.active{
  background: rgba(246,196,69,.16);
  border-color: rgba(246,196,69,.35);
  color:#ffe7a5;
}
.tab.active span{color: var(--primary);}

.scanCard .row{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.rowBetween{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.row{display:flex; align-items:center; gap:10px;}
.rowCenter{justify-content:center;}

.select{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,22,35,.85);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  outline:none;
}
.scanTop{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}

.cameraBox{
  position:relative;
  width:100%;
  height:360px;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  margin-top:12px;
}
@media (max-width:560px){ .cameraBox{height:420px;} }
.cameraBox video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scaleX(-1);
}
.cameraHint{
  position:absolute;
  inset:auto 10px 10px 10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  color: rgba(255,255,255,.8);
}

/* Dashboard */
.gridDash{display:grid; grid-template-columns: 1.2fr 1.6fr; gap:12px;}
@media (max-width:900px){ .gridDash{grid-template-columns:1fr;} }

.bigNumber{font-size:34px; font-weight:900; margin:8px 0;}
.progress{height:10px; background: rgba(255,255,255,.10); border-radius:999px; overflow:hidden;}
.bar{height:100%; width:0%; background: rgba(246,196,69,.85);}

.kv{display:grid; grid-template-columns: 120px 1fr; gap:10px; margin-top:10px;}
.k{color:var(--muted); font-size:12px;}
.v{font-weight:700;}
.kv .v{word-break: break-word; overflow-wrap:anywhere;}

/* user logo + nav */
.userBrandBar{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px 0 8px 0;
}
.userLogoTop{
  width:min(170px, 46vw);
  height:auto;
  display:block;
  opacity:.96;
}

.topNav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  background: rgba(11,15,20,.85);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  margin:0 0 12px 0;
  backdrop-filter: blur(10px);
}
.navBtn{
  flex:1;
  min-height:52px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: transparent;
  gap:4px;
}
.navBtn span.material-icons-outlined{
  font-size:24px;
  color: var(--muted);
  transition: transform .15s ease, color .15s ease;
}
.navLbl{font-size:11px; color: var(--muted); font-weight:700;}
.navBtn.active span.material-icons-outlined{color: var(--primary); transform: scale(1.12);}
.navBtn.active .navLbl{color: var(--primary);}
.navBtn.active{
  background: rgba(246,196,69,.16);
  border-color: rgba(246,196,69,.35);
  color:#ffe7a5;
}

/* Hero */
.hero{
  height:220px;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(0deg, rgba(11,15,20,.55), rgba(11,15,20,.55)),
    url("https://images.unsplash.com/photo-1529634597503-139d3726fed5?auto=format&fit=crop&w=1200&q=60");
  background-size:cover;
  background-position:center;
  box-shadow: var(--shadow);
}
.heroOverlay{height:100%; padding:16px; display:flex; flex-direction:column; justify-content:space-between;}
.heroTop{display:flex; align-items:center; gap:10px;}
.heroTitle{font-weight:900; font-size:18px;}
.heroTyped{
  margin-top:6px;
  font-size:13px;
  color: rgba(255,255,255,.86);
  font-weight:700;
  min-height:18px;
}
.heroTyped .caret{
  display:inline-block;
  width:8px;
  margin-left:2px;
  opacity:.9;
  animation:blink .9s infinite;
}
@keyframes blink{ 50%{opacity:.2;} }

.searchBox{display:flex; gap:10px; align-items:center;}
.searchBox input{flex:1;}
.sectionHead{display:flex; justify-content:space-between; align-items:center; margin:14px 0 10px 0;}

.posterGrid{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;}
@media (max-width:560px){ .posterGrid{grid-template-columns: 1fr;} }

.poster{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,22,35,.75);
  cursor:pointer;
}
.posterImg{height:190px; background-size:cover; background-position:center;}
.posterBody{padding:12px;}
.posterTitle{font-weight:900; font-size:15px;}
.posterBtns{display:flex; gap:10px; margin-top:10px;}
.posterBtns button{flex:1;}

.searchInline{width:240px; padding:10px 12px; border-radius:14px;}
.eventList{display:flex; flex-direction:column; gap:10px; margin-top:12px; max-height: calc(100vh - 260px); overflow:auto;}

.eventRow{
  display:grid;
  grid-template-columns: 72px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,22,35,.65);
}
.eventThumb{
  width:72px; height:72px; border-radius:16px;
  background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.08);
}
.eventMeta .t{font-weight:900;}
.eventMeta .s{font-size:12px; color:var(--muted); margin-top:4px;}

.ticketList{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.ticketRow{
  padding:12px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,22,35,.65);
  display:flex; justify-content:space-between; align-items:center;
}
.badge{
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
}
.badge.ok{background: rgba(60,227,164,.12); border-color: rgba(60,227,164,.25); color:#c9ffea;}
.badge.bad{background: rgba(255,92,92,.12); border-color: rgba(255,92,92,.25); color:#ffd1d1;}

/* ✅ QR in tickets */
.ticketRight{display:flex; align-items:center; gap:10px;}
.qrMini{
  width:38px; height:38px; object-fit:contain;
  border-radius:10px; padding:4px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.qrMiniPlaceholder{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.qrWrap{display:flex; justify-content:center; padding:10px 0;}
.qrBig{
  width:min(320px, 90%);
  height:auto;
  object-fit:contain;
  border-radius:18px;
  padding:10px;
  background: #fff;
  border:1px solid rgba(0,0,0,.10);
}

/* Modal */
.modalOverlay{
  position:fixed; inset:0;
  background: var(--overlay);
  display:grid; place-items:center;
  z-index:50;
}
.modal{
  width:min(560px, 92vw);
  max-height: min(84vh, 720px);
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid var(--surfaceBorder);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modalTop{
  padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.modalTitle{font-weight:900;}
.modalBody{padding:14px; overflow:auto;}
.modalActions{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; gap:10px; justify-content:flex-end;
  flex-wrap:wrap;
}

.ticketPreview{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,22,35,.75);
  padding:12px;
}
.ticketImgFake{
  height:220px;
  border-radius: 16px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  display:grid; place-items:center;
  color: rgba(255,255,255,.75);
  margin-bottom:12px;
}

.lockRow{display:flex; gap:10px; align-items:center;}
.iconBtn{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  padding:0;
  background: rgba(255,255,255,.06);
}
.iconBtn span{color: var(--muted);}
.iconBtn:hover span{color: var(--primary);}

/* ✅ Settings top bar layout */
.settingsTopBar{margin-bottom:6px;}
.settingsTopRight{display:flex; gap:10px; align-items:center;}

/* dots animation */
.dotsTraffic{display:flex; gap:10px; align-items:center; justify-content:center;}
.dot{
  width:12px;height:12px;border-radius:999px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.d1{animation:traffic1 1.6s infinite;}
.d2{animation:traffic2 1.6s infinite;}
.d3{animation:traffic3 1.6s infinite;}
@keyframes traffic1{
  0%{background: rgba(255,92,92,.95); transform:translateY(0);}
  40%{background: rgba(255,92,92,.35); transform:translateY(-3px);}
  100%{background: rgba(255,92,92,.35); transform:translateY(0);}
}
@keyframes traffic2{
  0%{background: rgba(246,196,69,.35); transform:translateY(0);}
  40%{background: rgba(246,196,69,.95); transform:translateY(-3px);}
  100%{background: rgba(246,196,69,.35); transform:translateY(0);}
}
@keyframes traffic3{
  0%{background: rgba(60,227,164,.35); transform:translateY(0);}
  60%{background: rgba(60,227,164,.35); transform:translateY(0);}
  85%{background: rgba(60,227,164,.95); transform:translateY(-3px);}
  100%{background: rgba(60,227,164,.35); transform:translateY(0);}
}

/* Splash */
.splashOverlay{
  position:fixed; inset:0; z-index:9999;
  display:none; place-items:center;
  background: var(--overlay);
  backdrop-filter: blur(10px);
}
.splashOverlay.show{display:grid;}
.splashInner{
  width:min(520px, 92vw);
  border-radius: 22px;
  border:1px solid var(--surfaceBorder);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding:22px 18px;
  text-align:center;
}

/* ✅ Scan result pulse dots (VALID / INVALID) */
.statusDot{
  width:44px;
  height:44px;
  border-radius:999px;
  margin:0 auto 10px auto;
  position:relative;
  display:grid;
  place-items:center;
}
.statusDot::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:999px;
  display:block;
}
.statusDot.ok::before{ background: rgba(60,227,164,.95); }
.statusDot.bad::before{ background: rgba(255,92,92,.95); }

.statusDot.ok{ box-shadow: 0 0 0 0 rgba(60,227,164,.55); animation: pulseGreen 1.05s infinite; }
.statusDot.bad{ box-shadow: 0 0 0 0 rgba(255,92,92,.55); animation: pulseRed 1.05s infinite; }

@keyframes pulseGreen{
  0%{ box-shadow: 0 0 0 0 rgba(60,227,164,.55); opacity:1; transform:scale(1); }
  70%{ box-shadow: 0 0 0 14px rgba(60,227,164,0); opacity:.9; transform:scale(1.03); }
  100%{ box-shadow: 0 0 0 0 rgba(60,227,164,0); opacity:1; transform:scale(1); }
}
@keyframes pulseRed{
  0%{ box-shadow: 0 0 0 0 rgba(255,92,92,.55); opacity:1; transform:scale(1); }
  70%{ box-shadow: 0 0 0 14px rgba(255,92,92,0); opacity:.9; transform:scale(1.03); }
  100%{ box-shadow: 0 0 0 0 rgba(255,92,92,0); opacity:1; transform:scale(1); }
}

.scanStatusWrap{ text-align:center; padding:10px 0; }
.scanStatusText{ font-weight:900; font-size:14px; margin:0; }
.scanStatusSub{ margin-top:6px; font-size:12px; color:var(--muted); }
.modalTitle.centered{ width:100%; text-align:center; }

/* Dashboard lists */
.list{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
.miniRow{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.miniRow .k{font-weight:900;}
.miniRow .v{font-weight:900;}
.feed{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
.feedRow{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.feedMain{flex:1;}

/* Light Theme (neutral + green readable) */
body.light{
  --bg:#f3f4f6;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --shadow: 0 18px 46px rgba(15,23,42,.12);
  --primary:#0b5f3d;
  --btnText:#ffffff;

  --overlay: rgba(15,23,42,.28);
  --surface: rgba(255,255,255,.92);
  --surfaceBorder: rgba(15,23,42,.12);
}
body.light{
  background: radial-gradient(1100px 600px at 20% -10%, rgba(11,95,61,.10), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(148,163,184,.14), transparent 55%),
              var(--bg);
}
body.light .card{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08) !important;
}
body.light input{
  background: rgba(255,255,255,.98);
  border-color: rgba(15,23,42,.12);
  color: var(--text);
}
body.light button{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.12);
  color: var(--text);
}
body.light .ghost{background: transparent;}
body.light .primary{
  background: linear-gradient(180deg, rgba(11,95,61,.98), rgba(11,95,61,.88));
  border: 1px solid rgba(11,95,61,.35);
  color:#fff;
}
body.light .link{color: rgba(11,95,61,.95);}
body.light .divider{background: rgba(15,23,42,.10);}

body.light .topNav{
  background: rgba(255,255,255,.88);
  border-color: rgba(15,23,42,.10);
}
body.light .navBtn.active{
  background: rgba(11,95,61,.10);
  border-color: rgba(11,95,61,.18);
}
body.light .navBtn.active span.material-icons-outlined,
body.light .navBtn.active .navLbl{color: rgba(11,95,61,.98);}

body.light .ticketPreview{
  background: rgba(255,255,255,.90);
  border-color: rgba(15,23,42,.12);
}
body.light .ticketImgFake{
  background: rgba(15,23,42,.03);
  border-color: rgba(15,23,42,.14);
  color: rgba(15,23,42,.70);
}
body.light .poster{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.10);
}
body.light .eventRow,
body.light .ticketRow{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.10);
}
body.light .cameraHint{
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.80);
  border-color: rgba(15,23,42,.12);
}
body.light .heroTitle{
  color:#fff !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.45);
}
body.light .heroTyped{ color: rgba(255,255,255,.90); }

/* Light theme logo switch */
body.light .poweredLogo{ content: url("images/360-digital-light.png"); }
body.light .qrMini{
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
}
body.light .miniRow,
body.light .feedRow{
  background: rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.08);
}

@media (max-width:420px){
  .searchInline{ width:100%; }
  .rowBetween{ flex-direction:column; align-items:stretch; }
}

/* ================================
   ✅ QR PLACEHOLDER (MODAL) — BIG + FIT (NO OVERFLOW)
   ================================ */
.qrStage{
  width: 100%;
  max-width: 520px;
  margin: 10px auto 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.qrStage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
}
.qrStage .qrStageText{
  font-weight: 900;
  color: rgba(255,255,255,.75);
  text-align: center;
  padding: 12px;
}
@media (max-width: 420px){
  .qrStage{ max-width: 92vw; }
}