:root {
  color-scheme: dark;
  --bg: #212121;
  --panel: #292929;
  --line: rgba(245, 244, 240, .14);
  --text: #f5f4f0;
  --muted: #aaa69f;
  --accent: #f18817;
  --accent-dark: rgba(241, 136, 23, .14);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
.onboarding { position:fixed; inset:0; z-index:100; display:grid; place-items:end center; padding:18px; background:rgba(10,10,10,.76); backdrop-filter:blur(12px); box-sizing:border-box; }
.onboarding[hidden] { display:none; }
.onboarding-card { position:relative; width:min(480px,100%); min-height:330px; overflow:hidden; box-sizing:border-box; background:linear-gradient(155deg,rgba(241,136,23,.13),transparent 42%),#242424; border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:28px; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.onboarding-skip { position:absolute; right:19px; top:18px; border:0; background:none; color:var(--muted); font-size:10px; cursor:pointer; }
.onboarding-step { display:none; padding-top:36px; }
.onboarding-step.active { display:block; }
.onboarding-number { color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.16em; }
.onboarding-step h2 { margin:14px 0 9px; max-width:360px; font-size:29px; line-height:1.06; letter-spacing:-.04em; }
.onboarding-step p { max-width:380px; color:var(--muted); font-size:12px; line-height:1.6; }
.onboarding-footer { position:absolute; left:28px; right:28px; bottom:43px; display:flex; align-items:center; justify-content:space-between; }
.onboarding-dots { display:flex; gap:5px; }
.onboarding-dots i { width:5px; height:5px; border-radius:50%; background:#555; }
.onboarding-dots i.active { width:18px; border-radius:6px; background:var(--accent); }
#onboardingNext { border:0; border-radius:11px; padding:12px 22px; color:#212121; background:var(--accent); font-weight:900; cursor:pointer; }
.onboarding-card>small { position:absolute; left:28px; bottom:20px; color:#777; font-size:8px; }
button, a { font: inherit; }
.shell { width: min(100%, 720px); margin: 0 auto; padding: env(safe-area-inset-top) 18px calc(104px + env(safe-area-inset-bottom)); }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; }
.brand b { font-size: 14px; letter-spacing: .15em; display: block; }
.brand small { color: var(--muted); font-size: 10px; display: block; margin-top: 3px; }
.live { font-size:9px; font-weight:800; letter-spacing:.14em; color:var(--muted); display:flex; align-items:center; gap:7px; }
.live i { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(241,136,23,.68); }
.hero { padding: 44px 4px 28px; position: relative; overflow: hidden; }
.eyebrow, .label { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
h1 { font-size: clamp(38px, 10vw, 64px); line-height: .98; letter-spacing: -.055em; margin: 14px 0 18px; max-width: 620px; text-wrap:balance; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 410px; margin: 0; }
.stats { margin-top: 28px; display:flex; gap:10px; align-items:baseline; }
.stats b { font-size: 28px; color: var(--accent); }
.stats span { color: var(--muted); font-size: 12px; }
.search-panel { background:linear-gradient(145deg,rgba(241,136,23,.035),transparent 34%),var(--panel); border: 1px solid var(--line); padding: 18px; border-radius: 18px; box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025); }
.segmented { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; background:#181818; padding:4px; border-radius:12px; margin-top:10px; }
.segmented button { border:0; color:var(--muted); background:transparent; min-height:44px; padding:10px 8px; border-radius:9px; font-size:12px; line-height:1.2; font-weight:700; white-space:nowrap; cursor:pointer; }
.segmented button.active { color:#212121; background:var(--accent); box-shadow:0 5px 18px rgba(241,136,23,.2); }
.date-label { margin-top:20px; }
.dates { display:flex; gap:8px; overflow:auto; padding:10px 1px 2px; scrollbar-width:none; }
.dates::-webkit-scrollbar { display:none; }
.date-button { flex:0 0 63px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:12px; padding:9px 4px; cursor:pointer; }
.date-button b, .date-button span { display:block; }
.date-button b { font-size:16px; color:var(--text); margin-top:3px; }
.date-button span { font-size:9px; text-transform:uppercase; }
.date-button.active { border-color:rgba(241,136,23,.7); background:var(--accent-dark); box-shadow:0 7px 24px rgba(241,136,23,.1),inset 0 0 18px rgba(241,136,23,.045); }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; padding-top:17px; border-top:1px solid var(--line); }
.filter-grid label span { display:block; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.14em; margin:0 0 7px 2px; }
.filter-grid select { width:100%; appearance:none; color:var(--text); background:#181818; border:1px solid var(--line); border-radius:10px; padding:11px 30px 11px 11px; font-size:11px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 15px,calc(100% - 11px) 15px;background-size:4px 4px;background-repeat:no-repeat; }
.results { padding-top:30px; }
.results-head { display:flex; align-items:center; justify-content:space-between; }
.results h2 { font-size:21px; letter-spacing:-.02em; margin:0; }
.results-head p { color:var(--muted); font-size:10px; margin:4px 0 0; }
#refresh { border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; }
.session-list { display:grid; gap:10px; margin-top:16px; }
.session-card { position:relative; overflow:hidden; display:grid; grid-template-columns:72px 1fr; gap:14px; background:radial-gradient(circle at 38px 38px,rgba(241,136,23,.14) 0,rgba(241,136,23,.055) 30%,transparent 68%),var(--panel); border:1px solid var(--line); border-radius:16px; padding:17px; box-shadow:0 12px 32px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.02); }
.time-column { position:relative; border-right:1px solid var(--line); }
.time { display:block; position:relative; font-size:22px; letter-spacing:-.04em; text-shadow:0 0 22px rgba(241,136,23,.2); }
.duration { color:var(--muted); font-size:10px; display:block; margin-top:4px; }
.arena-line { display:flex; gap:8px; align-items:flex-start; justify-content:space-between; }
.arena { margin:0; font-size:15px; line-height:1.2; }
.favorite { width:28px; height:28px; display:grid; place-items:center; padding:0; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:8px; font-size:0; line-height:1; cursor:pointer; flex:0 0 auto; }
.favorite:before { content:"☆"; display:block; font:18px/1 Arial,sans-serif; transform:translateY(0); }
.favorite.saved:before { content:"★"; font-size:16px; transform:translateY(0); }
.favorite.saved { color:var(--accent); border-color:rgba(241,136,23,.38); background:var(--accent-dark); }
.address { color:var(--muted); font-size:11px; margin:5px 0 12px; line-height:1.35; }
.meta { display:flex; gap:7px; margin-bottom:14px; }
.meta span { border:1px solid var(--line); border-radius:6px; padding:5px 7px; color:#d4d1ca; font-size:10px; }
.actions { display:grid; grid-template-columns:1fr auto; gap:7px; }
.call { display:flex; align-items:center; justify-content:space-between; background:var(--accent); color:#212121; text-decoration:none; border-radius:9px; padding:11px 13px; font-size:12px; font-weight:800; }
.call span { font-size:17px; line-height:10px; }
.call.disabled { pointer-events:none; background:#353535; color:#85817b; }
.request { display:flex; align-items:center; justify-content:center; border:1px solid #54514d; color:var(--text); text-decoration:none; border-radius:9px; padding:10px 12px; font-size:10px; font-weight:700; }
.request[hidden] { display:none; }
.source-row { margin-top:11px; }
.source-row .source { display:inline-flex; min-height:44px; align-items:center; justify-content:center; color:#d4d1ca; font-size:11px; font-weight:700; text-decoration:none; border:1px solid #494641; border-radius:10px; padding:10px 14px; background:rgba(255,255,255,.025); }
.source-row .source:after { content:"↗"; margin-left:7px; color:var(--accent); font-size:12px; }
.source { display:grid; place-items:center; color:var(--muted); text-decoration:none; border:1px solid var(--line); border-radius:9px; padding:0 10px; font-size:10px; }
.verified { color:#817d77; font-size:8px; margin:9px 0 0; }
.verified.stale { color:#d8a866; }
.quick-actions { display:flex; gap:14px; margin-top:10px; }
.quick-actions a,.quick-actions button { border:0; padding:0; background:none; color:var(--muted); font-size:9px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.quick-actions button:disabled { display:none; }
.state { color:var(--muted); text-align:center; padding:42px 18px; border:1px dashed var(--line); border-radius:16px; line-height:1.5; }
.reset-filters,.state button { display:block; margin:16px auto 0; border:0; border-radius:10px; padding:11px 15px; background:var(--accent); color:#212121; font-size:11px; font-weight:800; cursor:pointer; }
.alerts-panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
.alerts-panel h3 { margin:0 0 5px; font-size:19px; }
.alerts-panel>p { color:var(--muted); font-size:11px; line-height:1.5; margin:0 0 20px; }
.alert-fields { display:grid; gap:13px; }
.field-title { display:block; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.12em; margin-bottom:6px; }
.alert-mode { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:11px; background:#181818; }
.alert-mode button,.weekday-picker button { border:0; border-radius:8px; padding:10px 5px; color:var(--muted); background:transparent; cursor:pointer; font-size:10px; font-weight:800; }
.alert-mode button.active,.weekday-picker button.active { color:#212121; background:var(--accent); }
.weekday-picker { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.weekday-picker button { min-width:0; padding:10px 0; background:#181818; }
.current-alert { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; padding:14px; border:1px solid rgba(241,136,23,.38); border-radius:12px; background:rgba(241,136,23,.08); }
.current-alert.disabled { border-color:var(--line); background:#202020; }
.current-alert div { display:grid; gap:4px; min-width:0; }
.current-alert span { color:var(--accent); font-size:7px; font-weight:900; letter-spacing:.12em; }
.current-alert.disabled span { color:var(--muted); }
.current-alert strong { font-size:11px; }
.current-alert small { color:var(--muted); font-size:9px; }
.current-alert button { flex:0 0 auto; border:1px solid var(--line); border-radius:9px; padding:9px 10px; color:var(--text); background:transparent; font-size:9px; font-weight:800; cursor:pointer; }
.alert-fields label span { display:block; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.12em; margin-bottom:6px; }
.alert-fields select,.alert-fields input:not([type="checkbox"]) { width:100%; min-width:0; color:var(--text); background:#181818; border:1px solid var(--line); border-radius:10px; padding:11px; }
.time-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; }
.time-pair label { display:block; width:100%; min-width:0; }
.alert-check { display:flex; align-items:center; min-width:0; gap:10px; color:#cbd4d1; font-size:11px; line-height:1.35; }
.alert-check input { width:20px; height:20px; flex:0 0 20px; margin:0; padding:0; accent-color:var(--accent); }
.save-alert { border:0; border-radius:10px; background:var(--accent); color:#212121; padding:12px; font-weight:800; cursor:pointer; }
.alert-status { min-height:16px; margin:8px 0 0; color:var(--accent); font-size:10px; }
.subscription-panel { display:grid; gap:14px; }
.subscription-intro { position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(241,136,23,.15),rgba(241,136,23,.025) 55%),var(--panel); border:1px solid rgba(241,136,23,.28); border-radius:18px; padding:22px; }
.subscription-intro:after { content:""; position:absolute; width:150px; height:150px; border:1px solid rgba(241,136,23,.12); border-radius:50%; right:-62px; top:-75px; box-shadow:0 0 45px rgba(241,136,23,.08); }
.subscription-intro .kicker { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.16em; margin:0 0 10px; }
.subscription-intro h3 { margin:0; font-size:24px; letter-spacing:-.03em; }
.subscription-intro>p { color:var(--muted); font-size:11px; line-height:1.55; margin:9px 0 0; max-width:420px; }
.access-status { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }
.access-status span { color:var(--muted); font-size:9px; }
.access-status b { color:var(--text); font-size:11px; text-align:right; }
.plan-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.plan-card { position:relative; display:flex; flex-direction:column; min-height:120px; padding:17px; color:var(--text); text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:15px; }
.plan-card.recommended { border-color:rgba(241,136,23,.5); box-shadow:0 9px 28px rgba(241,136,23,.07); }
.plan-card .badge { position:absolute; right:10px; top:10px; color:var(--accent); font-size:7px; font-weight:900; letter-spacing:.09em; }
.plan-card span { color:var(--muted); font-size:10px; }
.plan-card strong { margin-top:auto; font-size:19px; }
.plan-card small { color:var(--muted); font-size:8px; margin-top:4px; }
.subscription-note { color:var(--muted); font-size:9px; line-height:1.5; text-align:center; margin:2px 12px; }
.trial-button { display:block; border:0; border-radius:12px; padding:14px; background:var(--accent); color:#212121; text-align:center; text-decoration:none; font-size:11px; font-weight:900; }
.feedback-button { display:block; border:1px solid var(--line); border-radius:12px; padding:13px; background:transparent; color:var(--text); font-size:10px; font-weight:800; text-align:center; text-decoration:none; cursor:pointer; }
.support-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.support-actions .feedback-button { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; height:100%; margin:0; padding:12px 10px; line-height:1.25; }
.feedback-form { display:grid; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; }
.feedback-form h3 { margin:0; font-size:18px; }
.feedback-form p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.feedback-form textarea { min-height:120px; resize:vertical; box-sizing:border-box; width:100%; padding:12px; color:var(--text); background:#181818; border:1px solid var(--line); border-radius:11px; font:inherit; font-size:11px; line-height:1.5; }
.feedback-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.feedback-actions button { border:1px solid var(--line); border-radius:10px; padding:11px; background:transparent; color:var(--text); font-weight:800; cursor:pointer; }
.feedback-actions button:last-child { border-color:var(--accent); background:var(--accent); color:#212121; }
.feedback-result { min-height:14px; margin:0; color:var(--accent); font-size:9px; }
.arena-directory { display:grid; gap:12px; }
.arena-search { display:grid; gap:8px; }
.arena-search span { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.14em; }
.arena-combobox { position:relative; }
.arena-search input { width:100%; min-height:46px; border:1px solid var(--line); border-radius:11px; padding:0 48px 0 42px; color:var(--text); background:#181818; font-size:12px; outline:none; }
.arena-search input::-webkit-search-cancel-button { display:none; }
.arena-search input:focus-visible { border-color:rgba(241,136,23,.7); box-shadow:0 0 0 3px rgba(241,136,23,.1); }
.arena-search-icon { pointer-events:none; position:absolute; z-index:2; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; }
.arena-picker-toggle { position:absolute; z-index:3; right:3px; top:3px; width:40px; height:40px; display:grid; place-items:center; border:0; border-left:1px solid var(--line); border-radius:0 9px 9px 0; color:var(--muted); background:#181818; cursor:pointer; }
.arena-picker-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
.arena-picker-toggle.open svg { transform:rotate(180deg); }
.arena-picker-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.arena-search-options { position:absolute; z-index:15; left:0; right:0; top:calc(100% + 6px); max-height:300px; overflow:auto; padding:5px; border:1px solid #4b4843; border-radius:12px; background:#181818; box-shadow:0 20px 42px rgba(0,0,0,.52); }
.arena-search-options[hidden] { display:none; }
.arena-search-options button { width:100%; min-height:48px; display:grid; gap:3px; padding:9px 11px; border:0; border-radius:8px; color:var(--text); background:transparent; text-align:left; cursor:pointer; }
.arena-search-options button:hover,.arena-search-options button:focus-visible { outline:none; background:rgba(241,136,23,.1); }
.arena-search-options button b { overflow:hidden; font-size:11px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.arena-search-options button span { overflow:hidden; color:var(--muted); font-size:8px; font-weight:400; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; }
.arena-search-options p { margin:0; padding:15px 11px; color:var(--muted); font-size:10px; }
.arena-directory-count { margin:2px 0 0; color:var(--muted); font-size:9px; }
.arena-directory-list { display:grid; gap:10px; }
.arena-directory-card { display:grid; gap:15px; padding:17px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(241,136,23,.045),transparent 38%),var(--panel); box-shadow:0 12px 32px rgba(0,0,0,.14); }
.arena-directory-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.arena-directory-head>div { min-width:0; }
.arena-directory-head h3 { margin:0; font-size:15px; line-height:1.2; }
.arena-directory-head p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }
.arena-status { flex:0 0 auto; max-width:132px; padding:5px 7px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:8px; line-height:1.3; text-align:right; }
.arena-status.available { border-color:rgba(241,136,23,.35); color:#d8a866; background:rgba(241,136,23,.06); }
.arena-directory-actions { display:flex; flex-wrap:wrap; gap:7px; }
.arena-contact { min-height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #514e49; border-radius:9px; padding:9px 12px; color:var(--text); text-decoration:none; font-size:10px; font-weight:800; }
.arena-contact.primary { border-color:var(--accent); background:var(--accent); color:#212121; }
.arena-contact.source-contact { flex:1 1 150px; }
.bottom-nav { position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:20; margin:0; width:min(100%,720px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:rgba(30,30,30,.96); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border-top:1px solid rgba(245,244,240,.12); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); box-shadow:0 -14px 38px rgba(0,0,0,.34); }
.bottom-nav button { min-width:0; min-height:49px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:0; color:#817e78; background:transparent; padding:5px 2px; border-radius:10px; cursor:pointer; transition:color .18s ease,background .18s ease; }
.bottom-nav button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav button span { font-size:9px; line-height:1; font-weight:700; white-space:nowrap; }
.bottom-nav button.active { color:var(--accent); background:rgba(241,136,23,.055); }
@media (min-width: 600px) {
  .shell { padding-left:28px; padding-right:28px; }
  .hero { min-height:310px; padding-right:260px; display:flex; flex-direction:column; justify-content:center; }
  .hero h1 { font-size:46px; }
  .session-list { grid-template-columns:1fr 1fr; }
  .arena-directory-list { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .support-actions { grid-template-columns:1fr 1fr; }
  .time-pair { grid-template-columns:minmax(0,1fr); width:100%; min-width:0; }
  .time-pair input[type="time"] { display:block; box-sizing:border-box; width:100%; min-width:0; max-width:100%; inline-size:100%; min-inline-size:0; -webkit-appearance:none; appearance:none; }
  .bottom-nav button span { font-size:8px; }
  .arena-directory-head { display:grid; gap:9px; }
  .arena-status { max-width:none; width:max-content; text-align:left; }
}
