/* ========== Base + Theme ========= */
*{box-sizing:border-box}
:root{
  --bar-h:64px;
  --bg: radial-gradient(1200px 600px at 70% -100px,#0c2f5f 0,#061324 60%,#050b15 100%);
  --card: rgba(12,20,40,.6);
  --card-border: rgba(255,255,255,.12);
  --text: #e8f1ff;
  --muted: #cfe3ff;
  --primary: #0ea5e9;
  --shadow: 0 20px 40px rgba(0,0,0,.35);
}
html[data-theme="light"]{
  --bg: radial-gradient(1200px 600px at 70% -160px,#e6f3ff 0,#f7fbff 60%,#ffffff 100%);
  --card: rgba(255,255,255,.8);
  --card-border: rgba(10,30,60,.12);
  --text: #0b2142;
  --muted: #27496d;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* IMPORTANT: allow pages to scroll */
html,body{height:100%;margin:0;overflow:auto}

body{
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg)
}

/* ========== Top bar ========== */
.topbar{
  position:fixed;z-index:10;left:0;top:0;right:0;height:var(--bar-h);
  display:flex;justify-content:space-between;align-items:center;
  padding:env(safe-area-inset-top) 16px 12px 16px;
  border-bottom:1px solid var(--card-border);
  backdrop-filter:blur(6px) saturate(120%)
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:32px;width:auto}
.actions{display:flex;gap:10px;align-items:center}
.primary, .secondary{border-radius:14px;padding:10px 14px;font-weight:700;cursor:pointer}
.primary{background:var(--primary);color:#fff;border:0}
.primary.xl{padding:14px 18px;font-size:18px}
.primary:disabled{opacity:.5;cursor:not-allowed}
.secondary{background:transparent;color:var(--muted);border:1px solid var(--card-border)}
.secondary:hover{background:rgba(255,255,255,.06)}
.hidden{display:none !important}

/* ========== Screens / Layout ========== */
/* Use min-height so long pages can extend and scroll */
.app{
  min-height:100svh;
  padding:calc(var(--bar-h)) 12px 0 12px;
  display:grid;place-items:center
}
.screen{display:none;width:100%;height:100%;}
.screen.active{display:grid;place-items:center}

/* ========== Menu cards ========== */
.menu{display:grid;grid-template-columns:1fr;gap:18px;width:min(1000px,96vw)}
.card{border-radius:18px;padding:20px;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow)}
.card.hero{display:grid;gap:12px}
.card.hero h2{margin:0;font-size:clamp(20px,2.8vw,28px)}
.card.hero p{margin:0 0 6px 0;opacity:.85}
.card.info h3{margin:0 0 8px 0}
.card.info ul{margin:0;padding-left:18px;opacity:.9}
.card .cta{display:flex;gap:10px;flex-wrap:wrap}

/* ========== Scanner view ========== */
.video-wrap{
  position:relative;
  width:min(100vw, 1000px);
  height:calc(100svh - var(--bar-h) - 12px);
  background:#000;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)
}
#video{width:100%;height:100%;object-fit:cover;background:#000}
.overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto}
.loader{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:10px 14px;background:rgba(0,0,0,.55);border:1px solid var(--card-border);border-radius:12px
}
.status{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  padding:10px 12px;background:rgba(10,15,25,.8);border:1px solid var(--card-border);
  border-radius:12px;max-width:90%
}
.status p{margin:0;color:var(--muted)}

#model-caption{
  position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:3;
  background:rgba(8,20,40,.35);backdrop-filter:blur(8px) saturate(120%);
  border:1px solid var(--card-border);border-radius:16px;padding:14px 16px;max-width:92%;text-align:center
}
#model-caption strong{display:block;font-weight:900;font-size:clamp(16px,2.2vw,22px)}
#model-caption .desc{display:block;font-size:clamp(12px,1.8vw,16px);opacity:.95;margin-top:6px}

/* Hide A-Frame VR/AR buttons */
.a-enter-vr,.a-enter-ar,.a-enter-vr-button,.a-enter-ar-button{display:none !important}
:fullscreen .video-wrap, .video-wrap:fullscreen{ width:100vw; height:100vh; border-radius:0 }

/* ========== Intro animation ========== */
.intro{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:999}
.intro-card{
  display:grid;gap:12px;place-items:center;background:var(--card);border:1px solid var(--card-border);
  border-radius:20px;padding:26px 28px;transform:scale(.96);opacity:0;animation:intro 1100ms ease forwards
}
.intro-logo{height:60px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.24))}
.intro h1{margin:0;font-weight:900}
.intro h1 span{color:#9bd5ff}
@keyframes intro{
  0%{opacity:0;transform:translateY(8px) scale(.96)}
  60%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:1}
}
/* ===== Premium overlay UI ===== */
.premium-bar{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:4; flex-wrap:wrap
}
.premium-bar .chip{
  background:var(--primary); color:#fff; border:0; border-radius:14px;
  padding:8px 12px; font-weight:700; cursor:pointer
}
.premium-mask{ position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:4 }
.premium-modal{
  position:absolute; left:50%; top:12%; transform:translateX(-50%);
  width:min(92vw,720px); background:var(--card); border:1px solid var(--card-border);
  border-radius:16px; box-shadow:var(--shadow); padding:16px; z-index:5;
  backdrop-filter:blur(8px) saturate(120%)
}
.premium-modal h3{ margin:0 0 8px 0 }
.premium-modal .close{ position:absolute; right:10px; top:10px; border:0; background:transparent; font-size:20px; color:var(--text); cursor:pointer }

/* ===== Admin enhancements (cards/grid) ===== */
.admin-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
.admin-card{ background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:14px; box-shadow:var(--shadow) }
.admin-card .row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
.admin-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
/* --- Responsive camera height with new viewport units --- */
@supports (height: 100dvh) {
  .video-wrap{ height: calc(100dvh - var(--bar-h) - 12px); }
}
.video-wrap{ padding-bottom: env(safe-area-inset-bottom); }

/* --- Premium buttons: compact, scrollable chip bar --- */
.premium-bar{
  position:absolute;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + 8px);
  transform:translateX(-50%);
  z-index:4;
  display:flex; gap:8px; padding:6px 8px;
  max-width:92vw; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:16px; border:1px solid var(--card-border);
  background:rgba(10,15,25,.45); backdrop-filter:blur(10px) saturate(140%);
}
.premium-bar::-webkit-scrollbar{ display:none; }
.premium-bar .chip{
  border:0; border-radius:999px; padding:8px 12px;
  background:var(--primary); color:#fff; font-weight:700; white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.25); cursor:pointer;
}

/* --- Premium modal --- */
.premium-mask{ position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:4 }
.premium-modal{
  position:absolute; left:50%; top:15%; transform:translateX(-50%);
  width:min(92vw,720px); max-height:min(70vh,600px); overflow:auto;
  background:var(--card); border:1px solid var(--card-border);
  border-radius:16px; box-shadow:var(--shadow); padding:16px; z-index:5;
  backdrop-filter:blur(10px) saturate(140%);
}
.premium-modal .close{
  position:absolute; right:10px; top:10px; border:0; background:transparent;
  font-size:20px; color:var(--text); cursor:pointer;
}

/* --- Caption / status: smaller on phones, safe-area aware --- */
@media (max-width: 480px){
  :root { --bar-h: 56px; }
  .topbar{ height:var(--bar-h); }
  .actions .secondary, .actions .primary { padding:8px 12px; border-radius:12px; }
  #model-caption{
    bottom: calc(72px + env(safe-area-inset-bottom));
    padding:12px; border-radius:14px;
    max-width:92vw;
  }
  #model-caption strong{ font-size:16px; }
  #model-caption .desc{ font-size:13px; }
  .status{
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding:8px 10px; font-size:13px;
  }
  .video-wrap{ border-radius:16px; }
}
@media (max-width: 1024px){
  #model-caption strong{ font-size:18px; }
  #model-caption .desc{ font-size:14px; }
}