/* EDGE PREVIEW — real-data prototype of the "Edge Apex" visual concept.
   Not linked from any nav; reachable only at /edge-preview. Read-only,
   same API endpoints as the main dashboard (see edge_preview.js). */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ep-bg: #f5f4fb;
  --ep-ink: #14101f;
  --ep-ink-soft: #5b5570;
  --ep-violet: #7c3aed;
  --ep-violet-deep: #4c1d95;
  --ep-cyan: #22d3ee;
  --ep-pink: #ec4899;
  --ep-panel: #ffffff;
  --ep-panel-border: #e6e3f2;
  --ep-sidebar: #130f1f;
  --ep-sidebar-ink: #a79fc2;
  --ep-good: #16a383;
  --ep-bad: #e4486b;
  --ep-radius: 18px;
  --ep-font-display: 'Bricolage Grotesque', 'Manrope', sans-serif;
  --ep-font-body: 'Manrope', sans-serif;
}

#edge-preview, #edge-preview * { box-sizing: border-box; }

#edge-preview {
  font-family: var(--ep-font-body);
  background: var(--ep-bg);
  color: var(--ep-ink);
  min-height: 100vh;
  display: flex;
}

#edge-preview a { color: inherit; text-decoration: none; }

/* ---- sidebar ---- */
.ep-sidebar {
  width: 248px;
  flex: none;
  background: var(--ep-sidebar);
  color: var(--ep-sidebar-ink);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100vh;
}
.ep-brand { display: flex; align-items: center; gap: 10px; }
.ep-brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--ep-violet), var(--ep-cyan));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ep-font-display); font-weight: 800; color: #fff; font-size: 16px;
}
.ep-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.ep-brand-text b { font-family: var(--ep-font-display); font-size: 15px; color: #fff; letter-spacing: 0.01em; }
.ep-brand-text small { font-size: 10px; letter-spacing: 0.14em; color: var(--ep-sidebar-ink); }

.ep-sport-switch { display: flex; flex-direction: column; gap: 6px; }
.ep-sport-switch a {
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--ep-sidebar-ink);
}
.ep-sport-switch a.active { background: rgba(124,58,237,0.22); color: #fff; }
.ep-sport-switch a[data-disabled] { opacity: 0.45; cursor: default; }

.ep-nav-label { font-size: 10.5px; letter-spacing: 0.14em; color: #6b6484; margin: 4px 0 -8px; }
.ep-nav { display: flex; flex-direction: column; gap: 3px; }
.ep-nav button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ep-sidebar-ink);
}
.ep-nav button.active { background: rgba(124,58,237,0.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(124,58,237,0.4); }
.ep-nav button[disabled] { opacity: 0.4; cursor: default; }

.ep-sidebar-foot {
  margin-top: auto; padding: 16px; border-radius: 14px;
  background: radial-gradient(120% 140% at 20% 0%, rgba(124,58,237,0.35), rgba(19,15,31,0) 60%), rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.3);
}
.ep-sidebar-foot b { display: block; color: #fff; font-family: var(--ep-font-display); font-size: 13px; margin-bottom: 4px; }
.ep-sidebar-foot p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ep-sidebar-ink); }
.ep-live-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10.5px;
  color: var(--ep-cyan); letter-spacing: 0.08em;
}
.ep-live-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ep-cyan); }

/* ---- main column ---- */
.ep-main { flex: 1; padding: 34px 40px 60px; max-width: 1280px; }
.ep-eyebrow { font-size: 11.5px; letter-spacing: 0.14em; color: var(--ep-ink-soft); text-transform: uppercase; font-weight: 700; }
.ep-eyebrow .ep-dot { color: var(--ep-good); margin: 0 6px; }
.ep-h1 { font-family: var(--ep-font-display); font-weight: 800; font-size: 46px; line-height: 1.05; margin: 8px 0 6px; }
.ep-h1 em { font-style: normal; background: linear-gradient(90deg, var(--ep-violet), var(--ep-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ep-sub { color: var(--ep-ink-soft); font-size: 15px; margin: 0 0 26px; }

/* ---- hero ---- */
.ep-hero {
  position: relative; border-radius: 22px; overflow: hidden; padding: 34px 38px;
  background: radial-gradient(120% 160% at 10% 0%, #2b1159 0%, #140b29 46%, #0b0716 100%);
  color: #fff; margin-bottom: 18px;
}
.ep-hero-tag { font-size: 11px; letter-spacing: 0.12em; opacity: 0.75; display: flex; align-items: center; gap: 10px; }
.ep-hero-tag .ep-pill { background: rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.ep-hero-mid { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 22px 0 18px; flex-wrap: wrap; }
.ep-hero-team { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 220px; }
.ep-hero-team img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)); }
.ep-hero-team span { font-family: var(--ep-font-display); font-weight: 800; font-size: 22px; text-align: center; line-height: 1.1; }
.ep-hero-vs { font-family: var(--ep-font-display); font-size: 20px; opacity: 0.7; }
.ep-hero-meta { text-align: center; font-size: 13px; opacity: 0.75; margin-bottom: 16px; }
.ep-hero-prob {
  display: flex; align-items: center; gap: 18px; justify-content: center; max-width: 560px; margin: 0 auto 22px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 16px 22px;
}
.ep-hero-prob b { font-size: 26px; font-family: var(--ep-font-display); }
.ep-hero-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; display: flex; }
.ep-hero-bar i { display: block; height: 100%; }
.ep-hero-prob small { display: block; font-size: 10.5px; opacity: 0.6; margin-top: 3px; text-align: center; }
.ep-hero-note { text-align: center; font-size: 12.5px; opacity: 0.55; }
.ep-hero-strip {
  display: flex; gap: 0; margin-top: 20px; border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.ep-hero-strip > div { flex: 1; padding: 12px 16px; border-right: 1px solid rgba(255,255,255,0.08); font-size: 12px; }
.ep-hero-strip > div:last-child { border-right: none; }
.ep-hero-strip b { display: block; font-size: 13px; margin-bottom: 2px; }
.ep-hero-strip small { opacity: 0.6; }

/* ---- grid of cards ---- */
.ep-section-title { font-family: var(--ep-font-display); font-weight: 800; font-size: 20px; margin: 30px 0 14px; }
.ep-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .ep-grid { grid-template-columns: 1fr; } }

.ep-card {
  background: var(--ep-panel); border: 1px solid var(--ep-panel-border); border-radius: var(--ep-radius);
  padding: 18px 20px;
}
.ep-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ep-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ep-card-head h3::before { content: ''; width: 4px; height: 16px; border-radius: 3px; background: var(--ep-violet); display: inline-block; }
.ep-card-tag { font-size: 10px; letter-spacing: 0.08em; font-weight: 700; color: #fff; background: var(--ep-good); padding: 3px 9px; border-radius: 999px; }

.ep-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ep-panel-border); }
.ep-row:last-child { border-bottom: none; }
.ep-row-status { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #efe9fd; color: var(--ep-violet-deep); white-space: nowrap; }
.ep-row-status.ep-status-live { background: #0e3f33; color: #4ee8c3; }
.ep-row-status.ep-status-finished { background: #15131f; color: #c9c3e0; }
.ep-row-teams { flex: 1; min-width: 0; }
.ep-row-teams b { display: block; font-size: 13.5px; }
.ep-row-teams small { color: var(--ep-ink-soft); font-size: 11.5px; }
.ep-row-score { font-family: var(--ep-font-display); font-weight: 800; font-size: 14px; color: var(--ep-ink-soft); }
.ep-row-prob { font-size: 12.5px; font-weight: 700; color: var(--ep-good); white-space: nowrap; }
.ep-row-prob.ep-na { color: var(--ep-ink-soft); font-weight: 500; }

.ep-empty { color: var(--ep-ink-soft); font-size: 13px; padding: 14px 0; }
.ep-footnote { font-size: 11.5px; color: var(--ep-ink-soft); margin-top: 12px; }

.ep-badge-live {
  position: fixed; bottom: 18px; right: 22px; font-size: 10.5px; letter-spacing: 0.08em; font-weight: 700;
  background: #0e3f33; color: #4ee8c3; padding: 7px 14px; border-radius: 999px;
}