:root {
  --black:#0a0a0a; --charcoal:#161616; --card:#1c1c1c; --steel:#2d2d2d; --steel-light:#3a3a3a;
  --amber:#F7931A; --orange:#FF6B35; --gold:#FFD700; --red:#C41E3A; --green:#4ade80; --blue:#60a5fa;
  --silver:#C0C0C0; --muted:#8a8a8a; --white:#fff; --off:#E8E8E8;
  --display:'Oswald',sans-serif; --body:'Barlow',sans-serif; --mono:'Fira Code',Consolas,monospace;
  --nav-h:64px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body { min-height:100%; background:var(--black); color:var(--off); font-family:var(--body); line-height:1.5; font-size:16px; overscroll-behavior-y:none; }
[x-cloak] { display:none !important; }
a { color:var(--amber); text-decoration:none; }
button { font:inherit; }
img { max-width:100%; }

/* layout */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(10px + var(--safe-t)) 14px 10px; background:rgba(10,10,10,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--steel); }
.topbar .brand { display:flex; align-items:center; gap:10px; }
.topbar .brand img { height:30px; }
.topbar .title { font-family:var(--display); font-size:1.15rem; text-transform:uppercase; letter-spacing:.04em; color:var(--white); }
.topbar .back { background:none; border:0; color:var(--amber); font-size:1rem; padding:6px 8px 6px 0; }
.iconbtn { position:relative; background:var(--charcoal); border:1px solid var(--steel); color:var(--off); width:38px; height:38px; border-radius:10px; font-size:1.1rem; display:inline-flex; align-items:center; justify-content:center; }
.dot { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
main { padding:16px 14px calc(var(--nav-h) + var(--safe-b) + 20px); max-width:720px; margin:0 auto; }
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(5,1fr); height:calc(var(--nav-h) + var(--safe-b)); padding-bottom:var(--safe-b); background:rgba(14,14,14,.96); backdrop-filter:blur(10px); border-top:1px solid var(--steel); }
.tabbar button { background:none; border:0; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; position:relative; }
.tabbar button .ic { font-size:1.35rem; line-height:1; }
.tabbar button.active { color:var(--amber); }
.tabbar button .dot { top:4px; right:calc(50% - 22px); }

/* type + blocks */
h1 { font-family:var(--display); font-size:1.7rem; text-transform:uppercase; color:var(--white); line-height:1.1; margin-bottom:6px; }
h2 { font-family:var(--display); font-size:1.2rem; text-transform:uppercase; color:var(--white); letter-spacing:.03em; margin:22px 0 10px; }
h3 { font-family:var(--display); font-size:1.05rem; color:var(--white); }
.eyebrow { color:var(--amber); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:600; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
.mono { font-family:var(--mono); }
.card { background:var(--card); border:1px solid var(--steel); border-radius:14px; padding:14px; margin-bottom:12px; }
.card.hl { border-color:rgba(247,147,26,.5); background:linear-gradient(160deg,#1f1708 0%,#141414 60%); }
.card.tap { cursor:pointer; }
.card.tap:active { transform:scale(.995); }
.row { display:flex; align-items:center; gap:12px; }
.row.between { justify-content:space-between; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--orange),var(--amber)); color:#0a0a0a; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; padding:12px 18px; border:0; border-radius:10px; cursor:pointer; width:100%; }
.btn:disabled { opacity:.55; cursor:default; }
.btn.ghost { background:transparent; border:1px solid var(--steel-light); color:var(--off); }
.btn.ghost:hover { border-color:var(--amber); }
.btn.sm { width:auto; padding:8px 12px; font-size:.8rem; border-radius:8px; }
.btn.danger { background:transparent; border:1px solid rgba(196,30,58,.6); color:#f87171; }
.btn.inline { width:auto; }
.pill { display:inline-block; font-size:.7rem; padding:3px 9px; border-radius:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; background:rgba(247,147,26,.15); color:var(--amber); }
.pill.green { background:rgba(74,222,128,.15); color:var(--green); }
.pill.blue { background:rgba(96,165,250,.15); color:var(--blue); }
.pill.red { background:rgba(196,30,58,.2); color:#f87171; }
.pill.grey { background:rgba(255,255,255,.08); color:var(--silver); }
label { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:10px 0 5px; font-weight:600; }
input, select, textarea { width:100%; background:var(--black); color:var(--white); border:1px solid var(--steel); border-radius:10px; padding:12px 13px; font:inherit; font-size:1rem; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--amber); }
textarea { min-height:90px; resize:vertical; }
.msg { padding:12px 14px; border-radius:10px; margin:10px 0; font-size:.92rem; }
.msg.ok { background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.4); color:#bbf7d0; }
.msg.err { background:rgba(196,30,58,.15); border:1px solid rgba(196,30,58,.5); color:#fecaca; }
.msg.info { background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.4); color:#dbeafe; }
.empty { text-align:center; color:var(--muted); padding:28px 10px; }
.empty .big { font-size:2.2rem; margin-bottom:6px; }
.codebox { display:flex; gap:8px; }
.codebox input { font-family:var(--mono); font-size:1.6rem; letter-spacing:.5em; text-align:center; }
.sheet { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.7); display:flex; align-items:flex-end; justify-content:center; }
.sheet .panel { width:100%; max-width:720px; max-height:92vh; overflow:auto; background:#141414; border:1px solid var(--steel); border-radius:18px 18px 0 0; padding:16px 16px calc(16px + var(--safe-b)); }
.sheet .handle { width:44px; height:5px; border-radius:3px; background:var(--steel-light); margin:0 auto 12px; }
.more-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.more-list button { background:var(--card); border:1px solid var(--steel); color:var(--off); border-radius:12px; padding:14px 12px; text-align:left; display:flex; align-items:center; gap:10px; font-size:.95rem; position:relative; }
.more-list button .ic { font-size:1.3rem; }
.more-list button .dot { top:8px; right:8px; }

/* home */
.hero { background:radial-gradient(ellipse at top,rgba(247,147,26,.14) 0%,transparent 60%); border:1px solid var(--steel); border-radius:16px; padding:18px 16px; margin-bottom:12px; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.countdown div { background:rgba(0,0,0,.4); border:1px solid var(--steel); border-radius:10px; text-align:center; padding:8px 4px; }
.countdown b { display:block; font-family:var(--display); font-size:1.6rem; color:var(--gold); line-height:1.1; }
.countdown span { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.quick { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.quick button { background:var(--card); border:1px solid var(--steel); color:var(--off); border-radius:12px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.quick button .ic { font-size:1.4rem; }

/* tickets */
.ticket { background:#fff; color:#0a0a0a; border-radius:16px; overflow:hidden; margin-bottom:14px; border:1px solid var(--steel); }
.ticket .head { background:linear-gradient(135deg,var(--orange),var(--amber)); padding:10px 14px; display:flex; justify-content:space-between; align-items:center; font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; }
.ticket .head .tier { font-size:1.05rem; font-weight:700; }
.ticket .body { padding:14px; display:flex; gap:14px; align-items:center; }
.ticket .qr { width:118px; height:118px; border:1px solid #ddd; border-radius:8px; flex-shrink:0; background:#fff; }
.ticket .meta { flex:1; min-width:0; }
.ticket .meta .name { font-weight:700; font-size:1.05rem; }
.ticket .meta .code { font-family:var(--mono); font-size:.85rem; letter-spacing:.08em; color:#444; margin:4px 0; }
.ticket .meta .st { font-size:.78rem; color:#666; }
.ticket .foot { display:flex; gap:8px; padding:0 14px 12px; flex-wrap:wrap; }
.ticket .foot button { background:#111; color:#fff; border:0; border-radius:8px; padding:8px 12px; font-size:.8rem; font-weight:600; }
.ticket .foot button.alt { background:#eee; color:#111; }
.ticket.sent { opacity:.75; }
.present { position:fixed; inset:0; z-index:60; background:#fff; color:#0a0a0a; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; }
.present img { width:min(78vw,360px); height:auto; border:1px solid #ddd; border-radius:12px; }
.present .code { font-family:var(--mono); font-size:1.2rem; letter-spacing:.15em; margin-top:12px; }
.present .close { position:absolute; top:calc(14px + var(--safe-t)); right:14px; background:#111; color:#fff; border:0; border-radius:50%; width:40px; height:40px; font-size:1.3rem; }

/* schedule */
.daytabs { display:flex; gap:8px; margin-bottom:12px; }
.daytabs button { flex:1; background:var(--card); border:1px solid var(--steel); color:var(--off); padding:10px; border-radius:10px; font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; }
.daytabs button.active { border-color:var(--amber); color:var(--amber); }
.slot { display:grid; grid-template-columns:72px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--steel); }
.slot .time { font-family:var(--mono); font-size:.85rem; color:var(--silver); padding-top:2px; }
.slot .time small { display:block; color:var(--muted); font-size:.72rem; }
.slot .what .t { font-weight:700; color:var(--white); }
.slot .what .d { font-size:.85rem; color:var(--silver); margin-top:2px; }
.slot.break .what .t { color:var(--silver); font-weight:500; }
.slot.now { background:rgba(247,147,26,.08); margin:0 -8px; padding:10px 8px; border-radius:10px; }
.kind { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; padding:2px 7px; border-radius:8px; background:rgba(255,255,255,.08); color:var(--silver); margin-left:6px; vertical-align:middle; }

/* speakers */
.sgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.scard { background:var(--card); border:1px solid var(--steel); border-radius:12px; overflow:hidden; cursor:pointer; }
.scard img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.scard .n { padding:8px 10px 2px; font-weight:700; color:var(--white); font-size:.95rem; }
.scard .r { padding:0 10px 10px; font-size:.75rem; color:var(--muted); line-height:1.3; }
.sdetail img { width:100%; max-height:380px; object-fit:cover; border-radius:14px; }
.sdetail .bio { color:var(--silver); margin-top:10px; line-height:1.55; }
.sdetail .bio a { color:var(--amber); }
.topics { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }

/* chat */
.thread { display:flex; flex-direction:column; gap:8px; padding-bottom:8px; }
.bubble { max-width:84%; padding:10px 13px; border-radius:14px; font-size:.95rem; line-height:1.4; word-break:break-word; }
.bubble .body { white-space:pre-wrap; }
.bubble.user { align-self:flex-end; background:var(--amber); color:#0a0a0a; border-bottom-right-radius:4px; }
.bubble.staff { align-self:flex-start; background:var(--card); border:1px solid var(--steel); border-bottom-left-radius:4px; }
.bubble .who { display:block; font-size:.68rem; opacity:.7; margin-bottom:2px; text-transform:uppercase; letter-spacing:.06em; }
.bubble .when { display:block; font-size:.66rem; opacity:.6; margin-top:4px; text-align:right; }
.composer { position:fixed; left:0; right:0; bottom:calc(var(--nav-h) + var(--safe-b)); background:#111; border-top:1px solid var(--steel); padding:8px 10px; display:flex; gap:8px; z-index:25; }
.composer textarea { min-height:44px; max-height:120px; padding:10px 12px; border-radius:12px; }
.composer button { width:auto; padding:0 16px; border-radius:12px; }

/* venue */
.mapframe { width:100%; height:62vh; border:1px solid var(--steel); border-radius:14px; background:#000; }
.dir-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.dir-grid a { display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--card); border:1px solid var(--steel); border-radius:12px; padding:12px 6px; color:var(--off); font-size:.8rem; text-align:center; }
.dir-grid a .ic { font-size:1.4rem; }

/* live */
.player { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--steel); }
.player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.livepill { display:inline-flex; align-items:center; gap:6px; }
.livepill i { width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(196,30,58,.6); animation:pulse 1.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(196,30,58,.6)} 70%{box-shadow:0 0 0 10px rgba(196,30,58,0)} 100%{box-shadow:0 0 0 0 rgba(196,30,58,0)} }

/* invite */
.bignum { font-family:var(--display); font-size:2.4rem; color:var(--gold); line-height:1; }
.codeshow { font-family:var(--mono); font-size:1.5rem; letter-spacing:.2em; color:var(--white); background:#000; border:1px dashed var(--amber); border-radius:10px; padding:12px; text-align:center; }
.share-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }

/* news */
.newsframe { width:100%; height:70vh; border:1px solid var(--steel); border-radius:14px; background:#fff; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + var(--safe-b) + 14px); background:#222; color:#fff; border:1px solid var(--steel-light); border-radius:12px; padding:10px 16px; z-index:70; font-size:.9rem; max-width:90vw; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.skeleton { background:linear-gradient(90deg,#1a1a1a 25%,#242424 37%,#1a1a1a 63%); background-size:400% 100%; animation:sk 1.4s infinite; border-radius:10px; height:70px; margin-bottom:10px; }
@keyframes sk { 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.install-banner { background:linear-gradient(135deg,#1f1708,#141414); border:1px solid rgba(247,147,26,.5); border-radius:14px; padding:12px 14px; margin-bottom:12px; }
@media (min-width:720px) { .tabbar { max-width:720px; left:50%; transform:translateX(-50%); border-left:1px solid var(--steel); border-right:1px solid var(--steel); } .composer { max-width:720px; left:50%; transform:translateX(-50%); } }
