/* Viewer shell — gallery + single-screen browser for the demo site. */
:root{
  --ink:#0F172A; --muted:#64748B; --faint:#94A3B8;
  --accent:#6558D3; --accent-hover:#5345C4; --accent-soft:#EEECFC; --accent-border:#D8D4F8;
  --line:#E2E8F0; --line-soft:#F1F5F9; --bg:#F8FAFC; --panel:#fff; --nav:#0F172A;
  --r-card:16px; --r-ctl:12px;
  --shadow:0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.02);
  --shadow-lift:0 8px 24px rgba(15,23,42,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{height:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  min-height:100%;overflow-x:hidden;   /* any vertical scrollbar belongs to the page, far right */
}
a{color:inherit;text-decoration:none}
#app{min-height:100vh;display:flex;flex-direction:column}

/* ---------- top bar ---------- */
.bar{
  height:64px;flex:none;position:sticky;top:0;z-index:5;background:var(--nav);color:#fff;
  display:flex;align-items:center;gap:14px;padding:0 16px;
}
.bar .logo{display:flex;align-items:center;gap:10px;flex:none}
.bar .logo .mk{width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,#7C6FE0,#6558D3 55%,#5345C4);display:grid;place-items:center;font-weight:700;font-size:13px}
.bar .logo b{font-size:14.5px;display:block;line-height:1.2}
.bar .logo .sub{font-size:11px;color:#94A3B8;display:block}
.bar .sep{width:1px;height:26px;background:rgba(255,255,255,.14);flex:none}
.bar .title{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .sp{margin-left:auto}
.bar .demo{font-size:11px;color:#94A3B8;white-space:nowrap}
.btn{
  font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:10px;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16);
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{background:rgba(255,255,255,.18)}
.btn.pri{background:var(--accent);border-color:var(--accent)}
.btn[disabled]{opacity:.35;pointer-events:none}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:9999px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border)}

/* ---------- gallery ---------- */
.gal{flex:1}
.gal .hero{background:var(--nav);color:#fff;padding:8px 0 40px;border-radius:0 0 24px 24px}
.gal .in{max-width:1240px;margin:0 auto;padding:0 24px}
.gal h1{font-size:26px;font-weight:700}
.gal .lede{color:#CBD5E1;font-size:14px;margin-top:8px;max-width:730px;line-height:1.6}
.gal .stats{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.gal .stats div b{display:block;font-size:20px}
.gal .stats div span{font-size:11.5px;color:#94A3B8}
.gal h2{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin:36px 0 0}
.gal .sub{font-size:12.5px;color:var(--muted);margin-top:7px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;padding-bottom:8px}
.cards.mob{grid-template-columns:repeat(5,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:block;cursor:pointer;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.card .shot{position:relative;background:var(--bg);overflow:hidden}
.card .shot::after{content:"";position:absolute;inset:0}       /* swallow clicks on the frame */
.card.p .shot{aspect-ratio:16/9}
.card.m .shot{aspect-ratio:430/906}
.card iframe{position:absolute;top:0;left:0;border:0;pointer-events:none;transform-origin:top left}
.card.p iframe{width:1440px;height:810px}      /* scaled by viewer.js so the desktop layout shows */
.card.m iframe{width:430px;height:906px}
.card .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:11px}
.card .cb{padding:11px 13px;border-top:1px solid var(--line)}
.card .n{font-size:10px;color:var(--accent);font-weight:700;letter-spacing:.06em}
.card b{font-size:13px;display:block;margin-top:1px}
.card .d{font-size:11.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.45}
.cards.mob .card .d{display:none}
.foot{max-width:1240px;margin:0 auto;padding:26px 24px 40px;font-size:11.5px;color:var(--muted);line-height:1.6}

/* ---------- viewer ---------- */
.view{flex:1;display:flex;min-height:calc(100vh - 56px)}
.side{width:236px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding-bottom:14px}
.side .grp{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding:14px 16px 6px;font-weight:700}
.side a{display:flex;gap:9px;align-items:center;padding:7px 16px;font-size:12.8px;color:var(--muted);
  border-left:3px solid transparent}
.side a .ix{font-size:10px;color:var(--faint);width:16px;flex:none}
.side a:hover{color:var(--ink)}
.side a.on{background:var(--accent-soft);color:var(--accent);font-weight:650;border-left-color:var(--accent)}
.side a:hover{background:var(--bg)}
.stage{flex:1;min-width:0;background:var(--bg);display:grid;place-items:center;padding:16px;overflow:hidden}
.stage iframe{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  box-shadow:var(--shadow-lift);display:block}
.stage.full{place-items:stretch;padding:0}
.stage.full iframe{border:0;border-radius:0;box-shadow:none;width:100%;height:100%}
.sel{display:none}

@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.mob{grid-template-columns:repeat(3,1fr)}
  .side{display:none}
  .sel{display:block;font-size:12.5px;padding:5px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.1);color:#fff;max-width:190px}
  .sel option{color:#1a2332}
  .bar .demo,.bar .logo .sub{display:none}
}
@media (max-width:640px){
  .cards,.cards.mob{grid-template-columns:1fr}
  .bar .title{display:none}
}