/* Liquid glass helpers */
:root{
  --glass-blur: 18px;
  --glass-sat: 160%;
  --glass-bright: 110%;
  --glass-alpha: .075;
  --glass-alpha-2: .10;
  --shine: rgba(255,255,255,.12);
  --shine-2: rgba(255,255,255,.06);
}
body[data-theme="light"]{
  --glass-alpha: .55;
  --glass-alpha-2: .70;
  --shine: rgba(255,255,255,.75);
  --shine-2: rgba(255,255,255,.55);
}

/* LiquidGlass surface (used for header/tabs/toast/panels) */
.lg{
  background:
    radial-gradient(220px 140px at 28% 12%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(200px 140px at 70% 120%, rgba(255,212,0,.12), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,var(--glass-alpha)), rgba(0,0,0,.10));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-out-soft);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  position:relative;
  overflow:hidden;
}
.lg::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(260px 180px at 30% 18%, var(--shine), transparent 60%),
    radial-gradient(260px 180px at 85% 115%, rgba(255,212,0,.18), transparent 60%);
  pointer-events:none;
  opacity:.85;
  mix-blend-mode: screen;
}
.lg::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 55%);
  transform: translateX(-18%) rotate(20deg);
  opacity:.65;
  pointer-events:none;
}

:root{
  --accent:#FFD400;

  /* Dark (Tesla-like) neumorphism */
  --bg:#0B0F14;
  --surface:#0F1520;
  --surface2:#0C121B;
  --text:#EAF0FF;
  --muted:#93A2C5;

  --ok:#41E39A;
  --danger:#FF5A6A;

  --r-xl:24px;
  --r-lg:20px;
  --r-md:16px;
  --r-sm:14px;

  /* Neumorphic shadows */
  --shadow-out: 14px 14px 28px rgba(0,0,0,.55),
                -12px -12px 24px rgba(255,255,255,.04);
  --shadow-out-soft: 10px 10px 22px rgba(0,0,0,.50),
                     -10px -10px 20px rgba(255,255,255,.035);

  --shadow-in: inset 10px 10px 18px rgba(0,0,0,.55),
               inset -10px -10px 18px rgba(255,255,255,.04);

  --stroke: rgba(255,255,255,.06);
  --stroke-2: rgba(255,255,255,.09);

  --glass: rgba(255,255,255,.04);
  --glass-2: rgba(255,255,255,.06);
}

body[data-theme="light"]{
  /* Light neumorphism */
  --bg:#ECEFF6;
  --surface:#F2F4FA;
  --surface2:#EEF1F8;
  --text:#0B1220;
  --muted:#5A677F;

  --shadow-out: 14px 14px 28px rgba(20,24,40,.14),
                -12px -12px 24px rgba(255,255,255,.85);
  --shadow-out-soft: 10px 10px 22px rgba(20,24,40,.12),
                     -10px -10px 20px rgba(255,255,255,.75);

  --shadow-in: inset 10px 10px 18px rgba(20,24,40,.12),
               inset -10px -10px 18px rgba(255,255,255,.85);

  --stroke: rgba(20,24,40,.10);
  --stroke-2: rgba(20,24,40,.14);

  --glass: rgba(255,255,255,.60);
  --glass-2: rgba(255,255,255,.75);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1100px 700px at 20% -20%, rgba(255,212,0,.10), transparent 60%),
    radial-gradient(900px 500px at 120% 10%, rgba(255,212,0,.08), transparent 55%),
    radial-gradient(700px 420px at 55% 120%, rgba(65,227,154,.06), transparent 55%),
    var(--bg);
  color:var(--text);
}

.app{
  max-width:560px;
  margin:0 auto;
  padding:18px 14px 28px;
}

/* Common neumorphic surface */
.neo{
  background: linear-gradient(145deg, rgba(255,255,255,.03), rgba(0,0,0,.06));
  border:1px solid var(--stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-out);
}

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--glass), rgba(0,0,0,.04));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-out-soft);
  backdrop-filter: blur(14px);
}

.brand{display:flex; gap:10px; align-items:center}
.logo{
  width:40px;height:40px;
  border-radius:14px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
}
.brandText{line-height:1.05}
.brandTitle{font-weight:900; letter-spacing:.2px; font-size:16px}
.brandSub{font-size:11px; color:var(--muted); letter-spacing:.18em; margin-top:4px; text-transform:uppercase}

.headerActions{display:flex; gap:10px}

/* Icon button - neumorphic */
.iconBtn{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  position:relative; overflow:hidden;
}
.iconBtn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.iconBtn:active{
  transform: translateY(0) scale(.98);
  box-shadow: var(--shadow-in);
}
.icon{
  width:20px;height:20px;
  opacity:.95;
}

/* Queues */
.queues{
  margin-top:14px;
  display:flex; flex-wrap:wrap;
  gap:10px;
}
.queueBtn{
  padding:10px 14px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
  color:var(--text);
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.queueBtn:hover{ transform: translateY(-1px); }
.queueBtn:active{ box-shadow: var(--shadow-in); transform: translateY(0) scale(.98); }
.queueBtn.active{
  border-color: rgba(255,212,0,.55);
  box-shadow:
    0 0 0 1px rgba(255,212,0,.20),
    14px 14px 28px rgba(0,0,0,.45),
    -12px -12px 24px rgba(255,255,255,.04);
  background:
    radial-gradient(120px 80px at 30% 20%, rgba(255,212,0,.28), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.07));
}

/* Status card */
.statusCard{
  margin-top:14px;
  padding:16px;
  border-radius: var(--r-xl);
  border:1px solid var(--stroke);
  background:
    radial-gradient(360px 220px at 20% 0%, rgba(65,227,154,.08), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.statusLeft{min-width:0}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
  font-weight:900;
}
.pillIcon{width:18px;height:18px; opacity:.95}
.timer{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  display:flex; align-items:center; gap:8px;
}

.statusVisual{
  width:60px; height:60px;
  border-radius: 22px;
  border:1px solid rgba(65,227,154,.18);
  background:
    radial-gradient(circle at 35% 30%, rgba(65,227,154,.28), rgba(65,227,154,.06));
  box-shadow: var(--shadow-out-soft);
  position:relative;
  overflow:hidden;
  animation: floaty 3.2s ease-in-out infinite;
}
.statusVisual.off{
  border-color: rgba(255,90,106,.24);
  background: radial-gradient(circle at 35% 30%, rgba(255,90,106,.22), rgba(255,90,106,.06));
}
.statusVisual::after{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 55%);
  transform: translateX(-30%) rotate(25deg);
  opacity:.65;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
}

/* Tabs - Tesla-like bar */
.tabs{
  margin-top:14px;
  padding:10px;
  border-radius: 22px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
  display:flex; gap:8px;
  position:relative;
  overflow:hidden;
}

.tab{
  flex:1;
  padding:12px 10px;
  border-radius: 18px;
  border:1px solid transparent;
  background: transparent;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .15s ease, color .2s ease;
  position:relative;
  z-index:2;
}
.tab:hover{ transform: translateY(-1px); color:var(--text); }
.tab:active{ transform: translateY(0) scale(.98); }
.tab.active{ color:var(--text); }

.tabGlow{
  position:absolute;
  top:10px; bottom:10px; left:10px;
  width:calc((100% - 34px)/4);
  border-radius: 18px;
  background:
    radial-gradient(160px 120px at 30% 20%, rgba(255,212,0,.18), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.07));
  border:1px solid rgba(255,212,0,.20);
  box-shadow: var(--shadow-out-soft);
  transition: left .26s cubic-bezier(.2,.9,.2,1);
  z-index:1;
}

/* Panels */
.content{ margin-top:14px; }
.panel{
  padding:16px;
  border-radius: var(--r-xl);
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out);
}
.hidden{display:none}

/* Empty state */
.empty{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:30px 12px;
  gap:10px;
  color:var(--muted);
  text-align:center;
}
.empty img{width:44px;height:44px; opacity:.9; animation: pop .45s ease}
@keyframes pop{from{transform:scale(.92); opacity:.15} to{transform:scale(1); opacity:1}}

/* Rows */
.row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0;
  border-bottom:1px dashed rgba(255,255,255,.07);
}
body[data-theme="light"] .row{ border-bottom-color: rgba(20,24,40,.12); }
.row:last-child{border-bottom:0}

.badge{
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,212,0,.20);
  background: linear-gradient(145deg, rgba(255,212,0,.14), rgba(0,0,0,.04));
  box-shadow: var(--shadow-out-soft);
  font-weight:900;
}


/* Tab content layout */
.tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.tabIcon{
  width:26px;height:26px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
}
.tabIcon img{ width:16px; height:16px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.18)); opacity:.92 }
body[data-theme="light"] .tabIcon img{ opacity:.85 }

.tab.active .tabIcon{
  border-color: rgba(255,212,0,.22);
  background:
    radial-gradient(90px 60px at 35% 25%, rgba(255,212,0,.16), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.07));
}

/* Hour grid like the reference */
.hoursGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
.hourCell{
  border-radius:18px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
  padding:10px 10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:64px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.hourCell:hover{ transform: translateY(-1px); }
.hourCell:active{ transform: translateY(0) scale(.99); box-shadow: var(--shadow-in); }

.hourIcon{
  width:30px;height:30px;
  border-radius:14px;
  display:grid; place-items:center;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
}
.hourIcon img{ width:18px; height:18px; }

.hourTime{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.hourCell.on{
  border-color: rgba(65,227,154,.18);
}
.hourCell.on .hourIcon{
  border-color: rgba(65,227,154,.18);
  background: radial-gradient(circle at 35% 30%, rgba(65,227,154,.22), rgba(65,227,154,.06));
}
.hourCell.on .hourIcon img{ color: var(--ok); }

.hourCell.off{
  border-color: rgba(255,90,106,.20);
}
.hourCell.off .hourIcon{
  border-color: rgba(255,90,106,.20);
  background: radial-gradient(circle at 35% 30%, rgba(255,90,106,.18), rgba(255,90,106,.06));
}
.hourCell.off .hourIcon img{ color: var(--danger); }

/* Panel header row */
.panelHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.panelTitle{
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--muted);
}
.panelDate{
  font-weight:900;
  font-size:12px;
  color:var(--text);
  opacity:.92;
}


/* Apply liquid glass */
.header, .tabs, .panel, .toast{
  background:
    radial-gradient(220px 140px at 28% 12%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(200px 140px at 70% 120%, rgba(255,212,0,.12), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,var(--glass-alpha)), rgba(0,0,0,.10)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  position:relative;
  overflow:hidden;
}
.header::before, .tabs::before, .panel::before, .toast::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(260px 180px at 30% 18%, var(--shine), transparent 60%),
    radial-gradient(260px 180px at 85% 115%, rgba(255,212,0,.18), transparent 60%);
  opacity:.80;
  mix-blend-mode: screen;
  pointer-events:none;
}
.header::after, .tabs::after, .panel::after, .toast::after{
  content:"";
  position:absolute;
  inset:-50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 55%);
  transform: translateX(-22%) rotate(18deg);
  opacity:.55;
  pointer-events:none;
}

.header > *, .tabs > *, .panel > *, .toast > *{ position:relative; z-index:2; }

/* Toast */
.toast{
  margin-top:12px;
  border-radius: 22px;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-out-soft);
  padding:12px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  animation: toastIn .32s cubic-bezier(.2,.9,.2,1);
}
@keyframes toastIn{
  from{ transform: translateY(-10px) scale(.98); opacity:0 }
  to{ transform: translateY(0) scale(1); opacity:1 }
}
.toast.hidden{ display:none; }
.toastIcon{
  width:36px;height:36px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
  display:grid; place-items:center;
}
.toastIcon img{ width:18px;height:18px; opacity:.92; }
.toastText{ font-weight:900; color:var(--text); font-size:13px; flex:1; }
.toastClose{
  width:34px;height:34px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: transparent;
  color:var(--muted);
  font-size:20px;
  cursor:pointer;
  box-shadow: var(--shadow-out-soft);
  transition: transform .15s ease, box-shadow .2s ease;
}
.toastClose:active{ transform: scale(.98); box-shadow: var(--shadow-in); }

/* Status card (center big like reference) */
.statusCard{
  margin-top:14px;
  padding:18px 16px;
  border-radius: 28px;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-out);
  display:flex;
  justify-content:center;
}
.statusMain{
  width:100%;
  max-width:440px;
  position:relative;
  padding:22px 16px 18px;
  border-radius: 26px;
  border:1px solid var(--stroke);
  background:
    radial-gradient(320px 220px at 50% 25%, rgba(65,227,154,.10), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  box-shadow: var(--shadow-in);
  overflow:hidden;
  text-align:center;
}
.statusHalo{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 50% 40%, rgba(65,227,154,.22), transparent 55%),
    radial-gradient(circle at 65% 80%, rgba(255,212,0,.16), transparent 60%);
  opacity:.85;
  filter: blur(10px);
  pointer-events:none;
  transform: rotate(8deg);
}
.statusBigIcon{
  width:84px;height:84px;
  border-radius: 30px;
  margin: 0 auto 14px;
  border:1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
  box-shadow: var(--shadow-out-soft);
  display:grid; place-items:center;
  position:relative;
}
.statusBigIcon::before{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), transparent 55%);
  transform: translateX(-16%) rotate(20deg);
  opacity:.75;
}
.statusBigIcon img{ width:34px; height:34px; position:relative; z-index:2; }
.statusTitle{
  font-size:24px;
  font-weight:1000;
  letter-spacing:.04em;
}
.statusSub{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-weight:800;
}
.statusSubIcon{
  width:28px;height:28px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-out-soft);
  display:grid; place-items:center;
}
.statusSubIcon img{ width:16px;height:16px; opacity:.9; }

/* Safe spacer for iOS home indicator */
.safeSpacer{ height: 18px; }

/* Tighten grid on small screens */
@media (max-width:420px){
  .hoursGrid{ grid-template-columns: repeat(4, 1fr); }
}


/* Client JS Debugger (realtime) */
#jsdbg{
  position:fixed;
  left:10px; right:10px;
  top:10px;
  z-index:99998;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,16,.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
  display:none;
}
body[data-theme="light"] #jsdbg{
  background: rgba(245,247,252,.78);
  border-color: rgba(20,24,40,.12);
  color: #0B1220;
}
#jsdbg.show{ display:block; }
#jsdbg .h{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
body[data-theme="light"] #jsdbg .h{ border-bottom-color: rgba(20,24,40,.12); }
#jsdbg .t{
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  color: var(--accent);
}
#jsdbg .btns{display:flex; gap:8px}
#jsdbg button{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius:12px;
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
}
body[data-theme="light"] #jsdbg button{
  border-color: rgba(20,24,40,.14);
  background: rgba(20,24,40,.06);
  color: #0B1220;
}
#jsdbg button:active{ transform: scale(.98); }
#jsdbg .body{
  max-height:36vh;
  overflow:auto;
  padding:10px 12px 12px;
}
#jsdbg .secTitle{
  font-weight:900;
  opacity:.8;
  margin:8px 0 6px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
}
#jsdbg pre{
  white-space:pre-wrap;
  word-break:break-word;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:8px 10px;
  margin:0 0 8px;
}
body[data-theme="light"] #jsdbg pre{
  background: rgba(20,24,40,.06);
  border-color: rgba(20,24,40,.12);
}
#jsdbgToggleFab{
  position:fixed;
  right:12px;
  bottom:72px;
  z-index:99997;
  width:52px;height:52px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,16,.62);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  display:none;
  place-items:center;
  cursor:pointer;
}
#jsdbgToggleFab.show{ display:grid; }
#jsdbgToggleFab span{
  font-weight:1000;
  color: var(--accent);
  letter-spacing:.04em;
}