:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.1);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --gold1: #d4af37;
  --gold2: #f4d03f;
  --blue1: #3b82f6;
  --blue2: #60a5fa;
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 18px 60px rgba(0,0,0,0.55);

  /* Screen theme vars (overridden per video) */
  --screen-bg: #0f172a;
  --screen-text: rgba(255,255,255,0.92);
  --screen-muted: rgba(255,255,255,0.68);
  --screen-border: rgba(255,255,255,0.10);
  --screen-card: rgba(255,255,255,0.06);
  --screen-card2: rgba(255,255,255,0.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 30% 20%, rgba(59,130,246,0.20), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(212,175,55,0.18), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, #0f1b2f 35%, #0b1220 100%);
}

/* Hub */
body.hub{display:flex; align-items:center; justify-content:center; padding:40px;}
.hub-wrap{width:min(1100px, 96vw)}
.hub-header{margin-bottom:18px}
.brand{display:flex; gap:14px; align-items:center}
.brand-mark{
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  color:#101826; font-weight:900; letter-spacing:-0.5px;
  box-shadow: 0 10px 30px rgba(212,175,55,0.22);
}
.brand-title{font-size:22px; font-weight:800}
.brand-sub{font-size:14px; color: var(--muted)}

.hub-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px}
.card{
  display:block; text-decoration:none; color:inherit;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.card:hover{transform: translateY(-3px); background: var(--panel2); border-color: rgba(255,255,255,0.18)}
.card-kicker{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.75)}
.card-title{margin-top:8px; font-size:18px; font-weight:800}
.card-meta{margin-top:10px; font-size:13px; color: var(--muted)}

.hub-notes{margin-top:18px; background: rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:16px}
.hub-notes h2{margin:0 0 10px; font-size:16px}
.hub-notes ol{margin:0 0 8px; padding-left:18px; color: rgba(255,255,255,0.85)}
.muted{margin:0; color: var(--muted); font-size:13px}

@media (max-width: 980px){
  .hub-grid{grid-template-columns: 1fr;}
}

/* Player */
.player{
  display:flex;
  height:100%;
  padding: 28px;
}
.stage{
  width: min(1280px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items: stretch;
}

.panel{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}

.panel-title{font-weight:900; letter-spacing:-0.2px}
.panel-actions{display:flex; gap:8px; align-items:center}
.badge{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(212,175,55,0.16);
  border: 1px solid rgba(212,175,55,0.28);
  color: rgba(255,255,255,0.92);
}
.kbd{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}

.viewport{
  position:relative;
  height: calc(100% - 54px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

/* Device mock */
.device{
  width: min(760px, 100%);
  height: min(520px, 64vh);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.55);
  position:relative;
  overflow:hidden;
}

.device.mobile{width: min(360px, 80vw); height: min(640px, 72vh); border-radius: 32px;}

.device::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(600px 420px at 30% 10%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(520px 380px at 85% 25%, rgba(212,175,55,0.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}

.screen{
  position:absolute; inset: 14px;
  border-radius: 18px;
  overflow:hidden;
  background: var(--screen-bg);
  color: var(--screen-text);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Simplified UI inside device */
.ui-topbar{height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; background: rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.10)}
.ui-brand{display:flex; align-items:center; gap:10px}
.ui-dot{width:12px; height:12px; border-radius:4px; background: linear-gradient(135deg, var(--gold1), var(--gold2));}
.ui-title{font-weight:900}
.ui-pill{font-size:12px; padding: 6px 10px; border-radius:999px; background: rgba(59,130,246,0.14); border:1px solid rgba(59,130,246,0.22)}

.ui-body{padding:14px; height: calc(100% - 54px); overflow:hidden; position:relative}
.ui-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
.ui-card{background: var(--screen-card); border:1px solid var(--screen-border); border-radius:14px; padding:12px; min-height:84px}
.ui-card h4{margin:0 0 6px; font-size:13px}
.ui-card p{margin:0; font-size:12px; color: var(--screen-muted); line-height:1.35}
.ui-cta{margin-top:12px; display:flex; gap:10px}
.ui-btn{padding:10px 12px; border-radius:12px; font-size:12px; font-weight:800; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08)}
.ui-btn.primary{background: linear-gradient(135deg, var(--gold1), var(--gold2)); color:#101826; border-color: rgba(212,175,55,0.55)}

/* Per-video themes */
body.customer{
  --screen-bg: #ffffff;
  --screen-text: #0f172a;
  --screen-muted: rgba(15, 23, 42, 0.70);
  --screen-border: rgba(15, 23, 42, 0.12);
  --screen-card: #f7fafc;
  --screen-card2: #eef2ff;
}

body.admin{
  --screen-bg: #f7f7fb;
  --screen-text: #111827;
  --screen-muted: rgba(17, 24, 39, 0.72);
  --screen-border: rgba(17, 24, 39, 0.12);
  --screen-card: #ffffff;
  --screen-card2: #f3f4f6;
}

body.staff{
  --screen-bg: #0b1020;
  --screen-text: rgba(255,255,255,0.92);
  --screen-muted: rgba(255,255,255,0.68);
  --screen-border: rgba(255,255,255,0.12);
  --screen-card: rgba(255,255,255,0.06);
  --screen-card2: rgba(255,255,255,0.10);
}

/* Realistic UI templates (ui.html) */
.ui-grid.ui-free{
  grid-template-columns: 1fr;
  gap: 10px;
}

.mock{
  display: grid;
  gap: 10px;
}

.mock-card{
  background: var(--screen-card);
  border: 1px solid var(--screen-border);
  border-radius: 14px;
  padding: 12px;
}

.mock-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mock-title{font-weight:950; letter-spacing:-0.2px}
.mock-sub{font-size:12px; color: var(--screen-muted)}

.mock-search{
  display:flex; align-items:center; gap: 8px;
  background: var(--screen-card2);
  border: 1px solid var(--screen-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
  color: var(--screen-muted);
}

.mock-chips{display:flex; gap:8px; flex-wrap:wrap}
.mock-chip{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--screen-border);
  background: var(--screen-card);
  color: inherit;
}
.mock-chip.active{background: rgba(102,126,234,0.18); border-color: rgba(102,126,234,0.45)}

.mock-list{display:grid; gap:10px}
.mock-item{
  display:flex; gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--screen-border);
  background: var(--screen-card);
}
.mock-thumb{
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(102,126,234,0.55), rgba(118,75,162,0.55));
  flex: 0 0 auto;
}
.mock-item-main{flex:1; min-width:0}
.mock-item-name{font-weight: 950; font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mock-item-meta{font-size: 11px; color: var(--screen-muted); margin-top: 2px}
.mock-item-right{display:grid; justify-items:end; gap: 6px}
.mock-price{font-weight: 950; font-size: 12px}
.mock-badge{
  font-size: 10px;
  font-weight: 950;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--screen-border);
  background: rgba(0,0,0,0.06);
}
.mock-badge.ok{background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35)}
.mock-badge.warn{background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35)}
.mock-badge.bad{background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35)}

.mock-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 950;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--screen-border);
  background: var(--screen-card2);
}
.mock-btn.primary{background: linear-gradient(135deg, var(--gold1), var(--gold2)); border-color: rgba(212,175,55,0.55); color: #101826}

.mock-two-col{display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 10px}
.mock-totals{display:grid; gap: 8px}
.mock-total-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size: 12px; color: var(--screen-muted); font-weight: 900}
.mock-total-row strong{color: var(--screen-text)}

.mock-sidebar{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: stretch;
}
.mock-nav{display:grid; gap: 8px}
.mock-nav a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: inherit;
  border: 1px solid var(--screen-border);
  background: var(--screen-card);
  font-weight: 950;
  font-size: 12px;
}
.mock-nav a.active{background: rgba(102,126,234,0.18); border-color: rgba(102,126,234,0.45)}

@media (max-width: 520px){
  .mock-two-col{grid-template-columns: 1fr;}
}

/* Right-side narration */
.narration{
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.scene-title{font-size:22px; font-weight:950; letter-spacing:-0.3px; margin:0}
.scene-sub{margin:0; color: var(--muted); line-height:1.45}

.progress{
  height:10px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow:hidden;
}
.progress > div{
  height:100%;
  width:0;
  background: linear-gradient(90deg, var(--blue1), var(--gold1));
}

.caption{
  background: rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px;
  color: rgba(255,255,255,0.88);
  line-height:1.45;
}

.hint{color: var(--muted); font-size:12px;}

/* Callouts */
.callout{
  position:absolute;
  border: 2px solid rgba(212,175,55,0.95);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.18);
  border-radius: 16px;
  opacity:0;
  transform: scale(0.98);
  transition: opacity .35s ease, transform .35s ease;
}
.callout.show{opacity:1; transform: scale(1)}
.callout-label{
  position:absolute;
  top:-12px; left:12px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  color: #101826;
}

.fade{
  opacity:0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.fade.in{opacity:1; transform: translateY(0)}

@media (max-width: 1050px){
  .stage{grid-template-columns:1fr;}
  .device{height: min(520px, 55vh)}
  .device.mobile{height: min(640px, 62vh)}
}