/* BetCode Pro — clean UI layer (loads after style.css) */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:24px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ===== CONVERTER CARD ===== */
.app .converterCard,.app .resultCard{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-4);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.app .converterCard .sectionHeading,.app .resultCard .resultTop{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);
}
.app .converterCard h2,.app .resultCard h2{margin:2px 0 4px;font-size:var(--fs-xl);letter-spacing:-.02em}
.app .converterCard .muted{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.app .converterCard .eyebrow,.app .resultCard .eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);
}
.app .converterCard .liveBadge{
  font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:999px;
  color:var(--accent);background:rgba(183,255,60,.1);border:1px solid rgba(183,255,60,.25);
}

/* route: FROM -> TO */
.app .routeBox{
  background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--sp-3);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.app .routePoint{display:flex;align-items:center;gap:var(--sp-3)}
.app .routePoint>div{flex:1;min-width:0}
.app .routeNumber{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--bg);background:var(--accent);border-radius:50%;
}
.app .routeBox label,.app .inputHeading label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-bottom:4px;
}
.app .routeConnector{padding-left:11px;color:var(--accent);font-size:var(--fs-lg);line-height:1}
.app .converterCard select,.app .converterCard input,.app .converterCard textarea{
  width:100%;min-height:48px;padding:0 var(--sp-3);
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font:inherit;font-size:16px; /* 16px stops iOS zoom */
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.app .converterCard textarea{padding:var(--sp-3);min-height:120px;resize:vertical}
.app .converterCard select:focus,.app .converterCard input:focus,.app .converterCard textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,255,60,.15);
}

/* code input */
.app .inputHeading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
.app .inputHeading span{font-size:12px;color:var(--muted)}
.app .codeRow{display:flex;gap:var(--sp-2)}
.app .codeRow input{flex:1;font-weight:600;letter-spacing:.04em}

/* buttons */
.app .converterCard button,.app .resultCard button{
  min-height:48px;padding:0 var(--sp-4);border:0;border-radius:var(--radius-sm);
  font:inherit;font-weight:700;font-size:var(--fs-md);cursor:pointer;
  color:#0a0f06;background:var(--accent);
  transition:transform .15s var(--ease),filter .2s var(--ease);
}
.app .converterCard button:active,.app .resultCard button:active{transform:scale(.98)}
.app .converterCard button:hover,.app .resultCard button:hover{filter:brightness(1.06)}
.app .converterCard button.secondary,.app .resultCard button.secondary{
  background:var(--surface-3);color:var(--text);border:1px solid var(--border);
}
.app #convert{
  width:100%;min-height:54px;font-size:var(--fs-lg);
  display:flex;justify-content:center;align-items:center;gap:var(--sp-2);
  box-shadow:0 10px 28px rgba(183,255,60,.2);
}

/* multi-convert */
.app .multiConvertBar{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3);border:1px dashed var(--border);border-radius:var(--radius-sm);
}
.app .multiConvertBar b{display:block;font-size:var(--fs-md)}
.app .multiConvertBar small,.app .multiPanel small{color:var(--muted);font-size:12px}
.app .multiPanel{display:flex;flex-direction:column;gap:var(--sp-3)}
.app .multiPanel.hidden{display:none}

/* hints / status / recovery */
.app .conversionHint{font-size:var(--fs-sm);color:var(--muted);line-height:1.45;text-align:center}
.app .recoveryPanel{
  padding:var(--sp-4);border-radius:var(--radius-sm);
  border:1px solid rgba(255,107,107,.35);background:rgba(255,107,107,.07);
}
.app .recoveryPanel.hidden{display:none}
.app .recoveryHead b{display:block;margin:2px 0}
.app .recoveryHead .eyebrow{color:var(--danger)}
.app .recoveryActions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.app .recoveryActions button{flex:1}

/* ===== RESULT CARD ===== */
.app .resultCard.hidden{display:none}
.app .resultRoute{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  font-size:var(--fs-sm);font-weight:700;color:var(--muted);
}
.app .resultRoute .routeArrow{color:var(--accent)}
.app .resultCode{
  text-align:center;font-size:32px;font-weight:800;letter-spacing:.08em;
  padding:var(--sp-5) var(--sp-3);border-radius:var(--radius-sm);
  background:var(--surface-3);border:1px solid rgba(183,255,60,.3);color:var(--accent);
  word-break:break-all;
}
.app .resultCard .actions{display:flex;gap:var(--sp-2)}
.app .resultCard .actions button{flex:1}
.app .actionStatus{min-height:18px;text-align:center;font-size:var(--fs-sm);color:var(--success)}
.app .resultSummary span{display:block;font-weight:700}
.app .resultSummary small{color:var(--muted);font-size:12px}
.app .resultCard .stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.app .resultCard .stats>div{
  background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--sp-3);text-align:center;
}
.app .resultCard .stats b{display:block;font-size:var(--fs-xl)}
.app .resultCard .stats small{color:var(--muted);font-size:12px}
.app .matchStatus{
  display:flex;gap:var(--sp-3);align-items:center;
  padding:var(--sp-3);border-radius:var(--radius-sm);
  background:var(--surface-3);border:1px solid var(--border);
}
.app .matchStatus small{display:block;color:var(--muted);font-size:12px}

/* ===== MATCH RADAR (shell) ===== */
html .matchRadarPage .hidden{display:none !important}
html .matchRadarPage{padding:0}
html .matchRadarPageShell{max-width:1100px;margin:0 auto;padding:var(--sp-4) var(--sp-4) 48px;display:flex;flex-direction:column;gap:var(--sp-4)}

/* header */
html .matchRadarPageHeader{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0 var(--sp-3)}
html .matchRadarPageHeader h1{flex:1 0 100%;order:3;margin:2px 0 0;font-size:30px;letter-spacing:-.025em;line-height:1.1}
html .matchRadarPageHeader .eyebrow{flex:1 0 100%;order:2;margin-top:var(--sp-3);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
html .matchRadarPageHeader p{flex:1 0 100%;order:4;margin:4px 0 0;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
html body .matchRadarBack,html body .matchRadarLiveLink{
  order:1;display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);
  font-size:var(--fs-sm);font-weight:600;color:var(--text);text-decoration:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
}
html body .matchRadarLiveLink{margin-left:auto;color:var(--accent);border-color:rgba(183,255,60,.3)}

/* workspaces: stacked on phone, side by side on wide screens */
html body .matchRadarDualWorkspace{display:flex;flex-direction:column;gap:var(--sp-4)}
@media (min-width:980px){
  html body .matchRadarDualWorkspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
}
html .matchRadarPage .radarWorkspace,html .matchRadarPage .matchRadarWorkspace{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-4);box-shadow:none;margin:0;display:flex;flex-direction:column;gap:var(--sp-4);
}
html .matchRadarPage .sectionHeading h2{margin:4px 0;font-size:22px;letter-spacing:-.02em;line-height:1.2}
html .matchRadarPage .muted{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
html .matchRadarPage .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted)}

/* status + verified badges */
html body .radarTitleRow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
html body .radarLiveStatus,html body .radarVerifiedBadge,html body .analystVerifiedBadge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;
  padding:5px 10px;border-radius:999px;color:var(--accent);
  background:rgba(183,255,60,.08);border:1px solid rgba(183,255,60,.25);
}

/* summary stats */
html body .radarSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
html body .radarSummaryItem{
  background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--sp-3);display:flex;flex-direction:column;gap:2px;min-width:0;
}
html body .radarSummaryLabel{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
html body .radarSummaryItem b,html body .radarSummaryItem strong{font-size:24px;line-height:1.1}
html body .radarSummaryItem small{display:none}

/* filter bar: one scrollable row of pills */
html body .radarFilterBar{
  display:flex;gap:var(--sp-2);overflow-x:auto;padding:2px 0;background:none;border:0;
  scrollbar-width:none;
}
html body .radarFilterBar::-webkit-scrollbar{display:none}
html body .radarFilterButton{
  flex:0 0 auto;min-height:40px;padding:0 var(--sp-4);border-radius:999px;
  font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);cursor:pointer;
}
html body .radarFilterButton.is-active{color:#0a0f06;background:var(--accent);border-color:var(--accent)}

/* empty / status */
html body .radarEmpty,html body .radarStatus,html body .analystStatus{
  padding:var(--sp-5) var(--sp-4);text-align:center;font-size:var(--fs-sm);color:var(--muted);
  border:1px dashed var(--border);border-radius:var(--radius-sm);
}

/* player search */
html body .playerRadarSearchControls{display:flex;gap:var(--sp-2);flex-wrap:wrap}
html body .playerRadarSearchControls input{
  flex:1 1 180px;min-height:48px;padding:0 var(--sp-3);font:inherit;font-size:16px;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
}
html body .playerRadarSearchControls input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,255,60,.15)}
html body .playerRadarSearchControls button{
  min-height:48px;padding:0 var(--sp-4);font:inherit;font-weight:700;font-size:var(--fs-md);
  color:#0a0f06;background:var(--accent);border:0;border-radius:var(--radius-sm);cursor:pointer;
}
html body .playerRadarQuickTags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
html body .playerRadarQuickTags button{
  min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-sm);color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
}
html body .playerRadarPreview{padding:var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
html body .playerRadarEmptyCopy{text-align:center;display:flex;flex-direction:column;gap:var(--sp-2)}
html body .playerRadarEmptyCopy h3{margin:0;font-size:var(--fs-lg)}
html body .playerRadarGuide{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);font-size:12px;color:var(--muted)}

/* ===== MATCH RADAR CARDS ===== */
html body .radarResults{display:flex;flex-direction:column;gap:var(--sp-3)}
html body .radarCard{
  display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-4);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:none;transition:border-color .2s var(--ease),transform .15s var(--ease);
}
html body .radarCard:active{transform:scale(.995);border-color:rgba(183,255,60,.35)}

/* top row: competition + signal chip + time */
html body .radarCardTop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
html body .radarCardCompetition{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  flex:1 1 auto;min-width:0;
}
html body .radarCardStatus{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--muted)}
html body .radarStatusLabel{font-weight:600;color:var(--text)}
html body .radarUpdatedAt{font-size:12px;color:var(--muted)}

/* signal chip */
html body .radarSignal,html body .radarSignalCount,html body .radarAttention{
  display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:999px;color:var(--warning);
  background:rgba(255,202,104,.1);border:1px solid rgba(255,202,104,.3);
}
html body .radarSignalStrong,html body .radarAttentionHigh{color:var(--accent);background:rgba(183,255,60,.1);border-color:rgba(183,255,60,.3)}
html body .radarSignalModerate,html body .radarAttentionMedium{color:var(--warning)}
html body .radarAttentionLow{color:var(--muted);background:var(--surface-3);border-color:var(--border)}

/* teams */
html body .radarTeams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-3)}
html body .radarTeam{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
html body .radarTeamAway{text-align:right;align-items:flex-end}
html body .radarTeamRole{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html body .radarTeamDivider{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);padding:4px 8px;border-radius:999px;background:var(--surface-3)}

/* evidence chips */
html body .radarEvidence{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
html body .radarEvidenceItem{
  font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;
  color:var(--muted);background:var(--surface-3);border:1px solid var(--border);
}

/* the 3 count tiles: compact row, not heavy blocks */
html body .radarSignals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
html body .radarSignals>*{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--sp-2) var(--sp-3);background:var(--surface-3);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:18px;font-weight:800;color:var(--text);
}
html body .radarSignals>* small,html body .radarSignals>* span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* footer line */
html body .radarObservation{
  display:flex;justify-content:space-between;gap:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);
}
html body .radarObservation *{font-size:12px}
html body .radarMatchCount{font-size:var(--fs-sm);color:var(--muted)}

/* ===== MATCH RADAR CARDS v2 (exact structure) ===== */
html .matchRadarPage .radarCard{
  display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
}
html .matchRadarPage .radarCard::before{display:none}
html .matchRadarPage .radarCard:hover{transform:none;border-color:rgba(183,255,60,.3)}

html .matchRadarPage .radarCardTop{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0;padding:0;border:0}
html .matchRadarPage .radarCardCompetition{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.3}
html .matchRadarPage .radarCardTop>span{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 10px;border-radius:999px;color:var(--warning);background:rgba(255,202,104,.1);border:1px solid rgba(255,202,104,.3)}
html .matchRadarPage .radarCardStatus{display:flex;align-items:center;gap:var(--sp-2);margin:0;padding:0;border:0;font-size:var(--fs-sm);color:var(--muted)}
html .matchRadarPage .radarStatusLabel{font-size:var(--fs-sm);font-weight:700;color:var(--accent)}

/* teams: one per row, large names */
html .matchRadarPage .radarTeams{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:var(--sp-3) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
html .matchRadarPage .radarTeam,html .matchRadarPage .radarTeamAway{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:var(--sp-3);min-width:0}
html .matchRadarPage .radarTeamRole{flex:0 0 48px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
html .matchRadarPage .radarTeam strong{font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
html .matchRadarPage .radarTeamDivider{display:none}

/* signal chips */
html .matchRadarPage .radarSignals{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0}
html .matchRadarPage .radarSignals>*{display:inline-flex;padding:5px 10px;font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-3);border:1px solid var(--border);border-radius:999px;flex-direction:row}

/* 3 evidence tiles */
html .matchRadarPage .radarEvidence{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin:0}
html .matchRadarPage .radarEvidenceItem{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-3) var(--sp-2);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-sm)}
html .matchRadarPage .radarEvidenceItem strong{font-size:20px;font-weight:800;line-height:1.1;color:var(--text)}
html .matchRadarPage .radarEvidenceItem small{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted)}

html .matchRadarPage .radarObservation{display:flex;justify-content:space-between;gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border);font-size:12px;color:var(--muted)}

/* ===== MATCH RADAR POLISH ===== */
html .matchRadarPageHeader{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);align-items:center}
html .matchRadarPageHeader>*{order:0}
html .matchRadarPageHeader h1,html .matchRadarPageHeader .eyebrow,html .matchRadarPageHeader p{grid-column:1/-1}
html .matchRadarPageHeader .eyebrow{order:3}
html .matchRadarPageHeader h1{order:4}
html .matchRadarPageHeader p{order:5}
html body .matchRadarBack,html body .matchRadarLiveLink{order:1;width:auto;margin:0;justify-content:center;min-height:44px}
html body .matchRadarLiveLink{order:2}

html .matchRadarPage .radarWorkspace{order:1}
html .matchRadarPage .matchRadarWorkspace{order:2}

html body .playerRadarSearchControls{flex-direction:column}
html body .playerRadarSearchControls button{width:100%}
html body .playerRadarSearchControls button:disabled{
  color:var(--muted);background:var(--surface-3);border:1px solid var(--border);cursor:not-allowed;
}
html body .playerRadarQuickTags{justify-content:center}
html body .playerRadarGuide>*{padding:var(--sp-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center}

/* ===== PLAYER ANALYSE BUTTON ===== */
html body #playerRadarLoad{
  width:100%;min-height:48px;padding:0 var(--sp-4);font:inherit;font-size:var(--fs-md);font-weight:700;
  border-radius:var(--radius-sm);border:0;cursor:pointer;
  color:#0a0f06;background:var(--accent);box-shadow:none;
}
html body #playerRadarLoad::before,html body #playerRadarLoad::after{display:none !important;content:none !important;animation:none !important}
html body #playerRadarLoad:disabled{
  color:var(--muted);background:var(--surface-3);border:1px solid var(--border);cursor:not-allowed;opacity:1;
}

/* ===== PLAYER ANALYSE BUTTON v2 (beats .matchRadarPage #playerRadarLoad) ===== */
html .matchRadarPage #playerRadarLoad{
  width:100%;min-height:48px;padding:0 var(--sp-4);font:inherit;font-size:var(--fs-md);font-weight:700;
  border-radius:var(--radius-sm);border:0;cursor:pointer;
  color:#0a0f06;background:var(--accent);box-shadow:none;opacity:1;filter:none;
}
html .matchRadarPage #playerRadarLoad::before,
html .matchRadarPage #playerRadarLoad::after{display:none !important;content:none !important;animation:none !important}
html .matchRadarPage #playerRadarLoad:hover:not(:disabled){filter:brightness(1.06);transform:none}
html .matchRadarPage #playerRadarLoad:disabled{
  color:var(--muted);background:var(--surface-3);border:1px solid var(--border);cursor:not-allowed;opacity:1;box-shadow:none;
}

/* ===== PLAYER ANALYSE BUTTON v3 (final) ===== */
html .matchRadarPage #playerRadarLoad:disabled{
  opacity:1 !important;
  color:var(--muted) !important;
  background:var(--surface-3) !important;
  border:1px solid var(--border) !important;
  box-shadow:none !important;
}
html .matchRadarPage #playerRadarLoad:not(:disabled){
  opacity:1 !important;
  color:#0a0f06 !important;
  background:var(--accent) !important;
  border:0 !important;
  font-size:var(--fs-md) !important;
}

/* ===== PLAYER RADAR EMPTY STATE v2 ===== */
html .matchRadarPage #playerRadarVisualization{min-height:0 !important;height:auto !important;padding:var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
html .matchRadarPage #playerRadarVisualization .matchRadarUnavailable{min-height:0 !important;margin:0;padding:var(--sp-4);text-align:center}
html .matchRadarPage #playerRadarMetrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}


/* ===== MATCHES FIRST ===== */
html .matchRadarPage .radarWorkspace{order:1 !important}
html .matchRadarPage .matchRadarWorkspace{order:2 !important}

/* ===== RADAR STATS + TEAM ALIGNMENT ===== */
html .matchRadarPage .radarSummary{display:grid !important;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
html .matchRadarPage .radarSummaryItem{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;gap:4px;padding:var(--sp-3);min-width:0}
html .matchRadarPage .radarSummaryItem>*{width:auto;text-align:left;margin:0}
html .matchRadarPage .radarSummaryLabel{font-size:10px;letter-spacing:.08em;line-height:1.3}
html .matchRadarPage .radarSummaryItem b,html .matchRadarPage .radarSummaryItem strong,html .matchRadarPage .radarSummaryItem span:not(.radarSummaryLabel){font-size:20px;font-weight:800;line-height:1.1;color:var(--text)}
html .matchRadarPage .radarSummaryItem small{display:none !important}

html .matchRadarPage .radarTeams{align-items:stretch !important}
html .matchRadarPage .radarTeam,html .matchRadarPage .radarTeamHome,html .matchRadarPage .radarTeamAway{
  display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;
  text-align:left !important;gap:var(--sp-3);
}
html .matchRadarPage .radarTeamRole{flex:0 0 56px !important;text-align:left !important}
html .matchRadarPage .radarTeam strong{text-align:left !important;flex:1 1 auto;min-width:0}
html .matchRadarPage .radarWorkspace{margin-top:0 !important}

/* ===== DASHBOARD ===== */
html #mainApp .mobileAppShell{max-width:680px;margin:0 auto;padding:0 var(--sp-4) 110px;display:flex;flex-direction:column;gap:var(--sp-5)}
html #mainApp .systemStatusSpace{display:none}

/* icons */
html #mainApp .uiIcon{display:inline-grid;place-items:center;width:24px;height:24px;color:inherit;background:none;border:0}
html #mainApp .uiIcon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* header */
html #mainApp .mobileAppHeader{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) 0 0;margin:0}
html #mainApp .mobileBrand strong{display:block;font-size:var(--fs-lg);font-weight:800;letter-spacing:.06em;color:var(--accent)}
html #mainApp .mobileBrand span{font-size:var(--fs-sm);color:var(--muted)}
html #mainApp .mobileProfileBadge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--surface-2);border:1px solid var(--border)}

/* top tabs: one clean segmented row */
html #mainApp .mobileTopTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:0}
html #mainApp .mobileTopTab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 2px;border:0;border-radius:10px;background:transparent;color:var(--muted);box-shadow:none}
html #mainApp .mobileTopTab small{font-size:11px;font-weight:600}
html #mainApp .mobileTopTab.active{background:var(--surface-3);color:var(--accent)}

/* hero */
html #mainApp .dashboardHero{position:relative;overflow:hidden;min-height:300px;border-radius:var(--radius);border:1px solid var(--border);display:flex;align-items:flex-end;margin:0}
html #mainApp .dashboardHeroOverlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,18,.15) 0%,rgba(8,11,18,.88) 70%)}
html #mainApp .dashboardWelcome{position:relative;padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
html #mainApp .dashboardWelcome .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
html #mainApp .dashboardWelcome h2{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.02em}
html #mainApp .dashboardWelcome p{margin:0;font-size:var(--fs-md);line-height:1.5;color:#c4ccd8}
html #mainApp .heroActions .primary{min-height:48px;padding:0 var(--sp-5);border:0;border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-md);font-weight:700;color:#0a0f06;background:var(--accent)}

/* quick actions: 2x2 grid */
html #mainApp .quickActionsSection{display:flex;flex-direction:column;gap:var(--sp-3);margin:0}
html #mainApp .mobileSectionLabel{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
html #mainApp .quickActions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:0;padding:0;background:none;border:0}
html #mainApp .quickAction{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);min-height:104px;padding:var(--sp-4);text-align:left;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none}
html #mainApp .quickAction .uiIcon{width:40px;height:40px;border-radius:12px;color:var(--accent);background:rgba(183,255,60,.1)}
html #mainApp .quickAction strong{font-size:var(--fs-md);font-weight:700}
html #mainApp .quickAction i{position:absolute;top:var(--sp-4);right:var(--sp-4);font-style:normal;color:var(--muted)}
html #mainApp .quickAction:active{border-color:rgba(183,255,60,.4)}

/* bottom nav: fixed, never covers content */
html #mainApp .mobileBottomNav{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;margin:0 !important;transform:none !important;
  display:grid !important;grid-template-columns:repeat(4,1fr);gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px)) !important;
  background:rgba(8,11,18,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0;border-top:1px solid var(--border);border-radius:0 !important;z-index:50}
html #mainApp .mobileBottomItem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border:0;border-radius:12px;background:transparent;color:var(--muted);box-shadow:none}
html #mainApp .mobileBottomItem small{font-size:11px;font-weight:600}
html #mainApp .mobileBottomItem.active{color:var(--accent)}

/* ===== DASHBOARD POLISH ===== */
/* 1. hide the old big brand block once logged in */
html body:has(#mainApp:not(.hidden)) .appHeader{display:none !important}

/* 2. calm the hero image so its baked-in text disappears */
html #mainApp .dashboardHeroOverlay{background:linear-gradient(180deg,rgba(8,11,18,.62) 0%,rgba(8,11,18,.94) 62%,rgba(8,11,18,.98) 100%)}
html #mainApp .dashboardHero{min-height:280px}

/* 3. label fits its text */
html #mainApp .dashboardWelcome .eyebrow{display:inline-flex;align-self:flex-start;width:fit-content;padding:0;background:none;border:0;border-radius:0}

/* 4. one nav only: bottom bar stays, top tabs hidden */
html #mainApp .mobileTopTabs{display:none !important}

/* ===== HERO: hide baked-in image text, keep players on the right ===== */
html #mainApp .dashboardHeroOverlay{
  background:
    linear-gradient(90deg,rgba(8,11,18,.98) 0%,rgba(8,11,18,.94) 48%,rgba(8,11,18,.45) 100%),
    linear-gradient(180deg,rgba(8,11,18,.2) 0%,rgba(8,11,18,.9) 100%);
}
html #mainApp .dashboardWelcome{padding:var(--sp-5) var(--sp-4);max-width:100%}
html #mainApp .dashboardWelcome h2{text-shadow:none}

/* ===== MY FOOTBALL DESK ===== */
html #mainApp .footballDesk,html #mainApp .accountVault{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-4);box-shadow:none;margin:0;display:flex;flex-direction:column;gap:var(--sp-4);
}
html #mainApp .footballDeskHeading{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:var(--sp-3)}
html #mainApp .footballDesk .eyebrow,html #mainApp .accountVault .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
html #mainApp .footballDesk h2{margin:4px 0;font-size:22px;line-height:1.2;letter-spacing:-.02em}
html #mainApp .footballDesk h3,html #mainApp .accountVault h3{margin:2px 0 0;font-size:var(--fs-lg);font-weight:700}
html #mainApp .footballDesk .muted,html #mainApp .accountVault .muted{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
html #mainApp .footballDeskBadge{font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 10px;border-radius:999px;color:var(--accent);background:rgba(183,255,60,.08);border:1px solid rgba(183,255,60,.25)}

/* counters */
html #mainApp .footballDeskSummary{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
html #mainApp .footballDeskSummaryItem{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
html #mainApp .footballDeskSummaryItem strong{font-size:26px;font-weight:800;line-height:1.1}
html #mainApp .footballDeskSummaryItem small{font-size:12px;color:var(--muted)}

/* follow panel: select full width, buttons below */
html #mainApp .footballDeskFollow,html #mainApp .footballDeskPanel{padding:var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:var(--sp-3)}
html #mainApp .footballDeskFollowControls{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
html #mainApp .footballDeskSelect{grid-column:1/-1;width:100%;min-height:48px;padding:0 var(--sp-3);font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
html #mainApp .footballDeskFollowControls #deskSaveMatch{grid-column:1/-1}
html #mainApp .footballDeskFollowControls button,html #mainApp .accountVault .planActions button{
  min-height:46px;padding:0 var(--sp-3);font:inherit;font-size:var(--fs-sm);font-weight:700;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--text);background:var(--surface-3);border:1px solid var(--border);box-shadow:none;
}
html #mainApp .footballDeskFollowControls button.primary,html #mainApp .accountVault .planActions button:not(.secondary){color:#0a0f06;background:var(--accent);border:0}
html #mainApp .footballDeskHint{font-size:12px;line-height:1.5;color:var(--muted)}
html #mainApp .footballDeskGrid{display:flex;flex-direction:column;gap:var(--sp-3)}
html #mainApp .footballDeskEmpty{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3);text-align:center;border:1px dashed var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm)}
html #mainApp .footballDeskEmpty span{color:var(--muted);font-size:12px}

/* ===== ACCOUNT & PLANS ===== */
html #mainApp .accountHead{display:flex;flex-direction:column;gap:var(--sp-3);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
html #mainApp #accountState{align-self:flex-start;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;color:var(--muted);background:var(--surface-3);border:1px solid var(--border)}
html #mainApp .accountDetails,html #mainApp .planPanel{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
html #mainApp .accountDetails>div,html #mainApp .planInfo,html #mainApp .creditInfo{display:flex;flex-direction:column;gap:3px;padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
html #mainApp .accountDetails small,html #mainApp .planInfo small,html #mainApp .creditInfo small{font-size:12px;color:var(--muted)}
html #mainApp .planInfo strong,html #mainApp .creditInfo strong{font-size:24px;font-weight:800;line-height:1.1;text-transform:capitalize}
html #mainApp .accountVault .planActions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
html #mainApp .plansPanel{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
html #mainApp .plansPanel.hidden{display:none}
html #mainApp .planOptions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
html #mainApp .planOption{display:flex;flex-direction:column;gap:3px;padding:var(--sp-3);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm)}
html #mainApp .planOption span{font-size:12px;color:var(--muted)}
html #mainApp .planOption b{font-size:12px;color:var(--accent)}

/* ===== CONVERTER NOTE + ACCOUNT + WIDTH FIXES ===== */
html .engineNote{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
html .engineNote span:first-child{flex:0 0 auto;font-size:var(--fs-md);color:var(--accent)}
html .engineNote span{font-size:var(--fs-sm)}
html #mainApp .accountDetails{border:0 !important;padding:0 !important;margin:0 !important}
html #mainApp .accountHead{border-bottom:0;padding-bottom:0}
html #mainApp .mobileAppShell{padding-left:0;padding-right:0}

/* ===== PUBLIC LANDING ===== */
/* one brand only: hide the big header block while the public page shows */
html body:has(#publicHome:not(.hidden)) .appHeader{display:none !important}

html .publicHome .heroSection .heroCopy h2{
  font-size:clamp(30px,8.4vw,42px) !important;line-height:1.1 !important;letter-spacing:-.025em !important;margin:var(--sp-3) 0 !important;
}
html .publicHome .heroSection .heroCopy .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
html .publicHome .heroText{font-size:var(--fs-md);line-height:1.55;color:var(--muted)}

/* ===== HISTORY VAULT ===== */
html .historyVault{padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
html .historyVault .sectionHeading{display:flex !important;flex-direction:row !important;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
html .historyVault h3{margin:2px 0 4px;font-size:var(--fs-lg)}
html #clearHistory{flex:0 0 auto;width:auto !important;min-height:36px !important;padding:0 var(--sp-4) !important;font-size:var(--fs-sm) !important;
  color:var(--text);background:var(--surface-3);border:1px solid var(--border);border-radius:999px}
html #history{padding:var(--sp-5) var(--sp-3);text-align:center;font-size:var(--fs-sm);color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius-sm)}

/* ===== TRUST CENTRE ===== */
html .trustCentre{padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
html .trustCentreHeading{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:var(--sp-3)}
html .trustCentre h2{margin:4px 0;font-size:22px;line-height:1.2;letter-spacing:-.02em}
html .trustCentreGrid{display:flex;flex-direction:column;gap:var(--sp-3)}
html .trustCentreCard{
  display:grid !important;grid-template-columns:44px 1fr;grid-template-areas:"icon eyebrow" "icon title" "text text";
  column-gap:var(--sp-3);row-gap:2px;padding:var(--sp-4) !important;
  background:var(--surface-2) !important;border:1px solid var(--border) !important;border-radius:var(--radius-sm) !important;box-shadow:none !important;
}
html .trustCentreCard::before{display:none !important}
html .trustCentreIcon{grid-area:icon;width:44px;height:44px;display:grid;place-items:center;font-size:18px;color:var(--accent);background:rgba(183,255,60,.1);border-radius:12px}
html .trustCentreCard .eyebrow{grid-area:eyebrow;align-self:end;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
html .trustCentreCard h3{grid-area:title;margin:0;font-size:var(--fs-md);font-weight:700}
html .trustCentreCard p{grid-area:text;margin:var(--sp-3) 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}
html .trustCentrePrinciples{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
html .trustCentrePrinciples>div{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
html .trustCentrePrinciples span{font-size:var(--fs-sm);color:var(--muted)}
html .trustCentreNote{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}

/* ===== PUBLIC LANDING PAGE ===== */
html #publicHome{max-width:680px;margin:0 auto;padding:0 var(--sp-4) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-6)}
html #publicHome .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}

/* nav */
html #publicHome .publicNav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin:0 calc(-1*var(--sp-4));padding:var(--sp-3) var(--sp-4);background:rgba(8,11,18,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
html #publicHome .publicBrand{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
html #publicHome .publicBrandIcon{width:36px;height:36px;border-radius:10px;flex:0 0 36px}
html #publicHome .publicBrand strong{display:block;font-size:var(--fs-md);font-weight:700;line-height:1.2}
html #publicHome .publicBrand span{display:none}
html #publicHome .publicNavActions{display:flex;gap:var(--sp-2)}
html #publicHome .navLoginBtn,html #publicHome .navGetStarted{min-height:40px;padding:0 var(--sp-4);font:inherit;font-size:var(--fs-sm);font-weight:700;border-radius:999px;cursor:pointer;box-shadow:none}
html #publicHome .navLoginBtn{color:var(--text);background:var(--surface-2);border:1px solid var(--border)}
html #publicHome .navGetStarted{color:#0a0f06;background:var(--accent);border:0}

/* hero */
html #publicHome .heroSection{display:flex;flex-direction:column;gap:var(--sp-5);padding-top:var(--sp-4)}
html #publicHome .heroCopy{display:flex;flex-direction:column;gap:var(--sp-3)}
html #publicHome .heroCopy h2{margin:0;font-size:clamp(30px,8.4vw,40px) !important;line-height:1.1 !important;letter-spacing:-.025em !important}
html #publicHome .heroText{margin:0;font-size:var(--fs-md);line-height:1.55;color:var(--muted)}
html #publicHome .heroActions{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
html #publicHome .heroActions button{min-height:52px;padding:0 var(--sp-5);font:inherit;font-size:var(--fs-md);font-weight:700;border-radius:var(--radius-sm);cursor:pointer;box-shadow:none}
html #publicHome #heroGetStarted{color:#0a0f06;background:var(--accent);border:0}
html #publicHome #heroLogin{color:var(--text);background:var(--surface-2);border:1px solid var(--border)}
html #publicHome .heroTrust{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);color:var(--muted)}
html #publicHome .heroTrust span{color:var(--muted)}

/* hero preview card */
html #publicHome .heroPreview{position:relative}
html #publicHome .previewGlow{display:none}
html #publicHome .previewWindow{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transform:none !important}
html #publicHome .previewTop{display:flex;justify-content:space-between;align-items:center}
html #publicHome .previewEyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
html #publicHome .previewTop strong{font-size:var(--fs-md)}
html #publicHome .previewDot{color:var(--accent);font-size:12px}
html #publicHome .previewField,html #publicHome .previewMarkets>div:not(.previewArrow){display:flex;flex-direction:column;gap:3px;padding:var(--sp-3);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-sm)}
html #publicHome .previewField span,html #publicHome .previewMarkets span{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
html #publicHome .previewMarkets{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-2);align-items:center}
html #publicHome .previewArrow{color:var(--accent);font-size:var(--fs-lg)}
html #publicHome .previewButton{display:grid;place-items:center;min-height:48px;font-weight:700;color:#0a0f06;background:var(--accent);border-radius:var(--radius-sm)}
html #publicHome .previewStatus{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--muted)}
html #publicHome .previewStatus span{color:var(--accent)}

/* trust strip */
html #publicHome .trustStrip{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
html #publicHome .trustStrip>div{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
html #publicHome .trustStrip span{font-size:var(--fs-sm);color:var(--muted)}

/* section headings */
html #publicHome .homeSection{display:flex;flex-direction:column;gap:var(--sp-4)}
html #publicHome .homeSection .sectionHeading{display:flex;flex-direction:column;gap:var(--sp-2)}
html #publicHome .homeSection h2{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.02em}
html #publicHome .homeSection .sectionHeading p{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}

/* one card style for all grids */
html #publicHome .stepsGrid,html #publicHome .featureGrid,html #publicHome .securityGrid,html #publicHome .pricingGrid,html #publicHome .faqGrid{display:flex;flex-direction:column;gap:var(--sp-3)}
html #publicHome .homeCard,html #publicHome .priceCard,html #publicHome .faqItem{
  display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none}
html #publicHome .homeCard::before,html #publicHome .homeCard::after{display:none !important}
html #publicHome .homeCard h3,html #publicHome .priceCard h3{margin:0;font-size:var(--fs-lg);font-weight:700}
html #publicHome .homeCard p,html #publicHome .priceDescription{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}
html #publicHome .stepNumber{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
html #publicHome .featureIcon,html #publicHome .securityIcon{width:44px;height:44px;display:grid;place-items:center;font-size:18px;color:var(--accent);background:rgba(183,255,60,.1);border-radius:12px}
html #publicHome .securityNote{display:flex;flex-direction:column;gap:4px;padding:var(--sp-4);font-size:var(--fs-sm);line-height:1.5;color:var(--muted);border:1px solid var(--border);border-radius:var(--radius-sm)}
html #publicHome .securityNote strong{color:var(--text)}

/* pricing */
html #publicHome .priceBadge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;padding:4px 10px;border-radius:999px;color:var(--accent);background:rgba(183,255,60,.08);border:1px solid rgba(183,255,60,.25)}
html #publicHome .priceFeatures{margin:var(--sp-2) 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-sm)}
html #publicHome .priceFeatures li::before{content:"✓";margin-right:var(--sp-2);color:var(--accent)}
html #publicHome .priceButton{min-height:48px;font:inherit;font-weight:700;border-radius:var(--radius-sm);color:#0a0f06;background:var(--accent);border:0;cursor:pointer}
html #publicHome .priceButton:disabled{color:var(--muted);background:var(--surface-3);border:1px solid var(--border);cursor:not-allowed}

/* FAQ */
html #publicHome .faqItem{padding:0}
html #publicHome .faqItem summary{padding:var(--sp-4);font-size:var(--fs-md);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
html #publicHome .faqItem summary::-webkit-details-marker{display:none}
html #publicHome .faqItem summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}
html #publicHome .faqItem[open] summary::after{content:"–"}
html #publicHome .faqItem p{margin:0;padding:0 var(--sp-4) var(--sp-4);font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}

/* closing CTA + footer */
html #publicHome .homeCta{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);text-align:center;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid rgba(183,255,60,.25);border-radius:var(--radius)}
html #publicHome .homeCta h2{margin:0;font-size:24px;line-height:1.2}
html #publicHome .homeCta p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
html #publicHome #bottomGetStarted{min-height:52px;font:inherit;font-size:var(--fs-md);font-weight:700;color:#0a0f06;background:var(--accent);border:0;border-radius:var(--radius-sm);cursor:pointer}
html #publicHome .publicFooter{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
html #publicHome .publicFooter p{margin:2px 0 0}

/* ===== LANDING FIXES ===== */
html #publicHome .heroActions{display:flex;flex-direction:column;gap:var(--sp-2);height:auto !important;min-height:0 !important}
html #publicHome .heroActions button{flex:none !important;height:auto !important;min-height:52px !important;width:100%}
html #publicHome .heroCopy,html #publicHome .heroCopy h2,html #publicHome .heroText{max-width:100% !important;width:100%}
html #publicHome .navLoginBtn{display:inline-flex !important;align-items:center}
html #publicHome .heroTrust span::before,html #publicHome .heroTrust::before{display:none !important;content:none !important}
html #publicHome .heroPreview,html #publicHome .heroPreview::before,html #publicHome .heroPreview::after{background-image:none !important}
html #publicHome .homeSection .sectionHeading{margin:0 !important;padding:0 !important;min-height:0 !important}
html #publicHome .homeSection{margin:0 !important}
html #publicHome .faqItem summary{min-height:0 !important;line-height:1.4}
html #publicHome .faqGrid{gap:var(--sp-2)}
html #publicHome .publicFooter>div{padding:0 !important;margin:0 !important;text-align:left}
html #publicHome .publicFooter strong{display:block;padding:0 !important;margin:0 !important}

/* ===== DASHBOARD HERO IMAGE (restore) ===== */
html #mainApp .dashboardHero.redesignedHero{
  background-image:url("/assets/hero-football.png") !important;
  background-size:cover !important;
  background-position:72% center !important;
  background-repeat:no-repeat !important;
}
html #mainApp .dashboardHero.redesignedHero .dashboardHeroOverlay{
  background:
    linear-gradient(90deg,rgba(8,11,18,.96) 0%,rgba(8,11,18,.86) 38%,rgba(8,11,18,.25) 100%),
    linear-gradient(180deg,rgba(8,11,18,.05) 0%,rgba(8,11,18,.7) 100%) !important;
}

/* ===== AUTH SCREENS ===== */
html .authCard{max-width:480px;margin:0 auto;padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
html .authCard .authIntro{margin-bottom:var(--sp-3)}
html .authCard h2{margin:4px 0;font-size:26px;letter-spacing:-.02em}
html .authCard label{margin:var(--sp-3) 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html .authCard input{width:100%;min-height:50px;padding:0 var(--sp-4);font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
html .authCard input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,255,60,.15)}

/* password eye sits inside the field */
html .authCard .passwordWrap{position:relative;display:block;margin:0;padding:0;height:auto}
html .authCard .passwordWrap input{padding-right:52px}
html .authCard .togglePassword{position:absolute !important;top:50% !important;right:6px !important;bottom:auto !important;left:auto !important;
  transform:translateY(-50%) !important;width:40px !important;height:40px !important;min-height:0 !important;padding:0 !important;margin:0 !important;
  display:grid;place-items:center;font-size:16px;line-height:1;border:0;border-radius:10px;background:transparent !important;box-shadow:none !important;filter:grayscale(1) opacity(.7)}

/* primary action */
html .authCard #loginBtn,html .authCard #registerBtn{width:100%;min-height:52px;margin-top:var(--sp-4);font:inherit;font-size:var(--fs-md);font-weight:700;color:#0a0f06;background:var(--accent);border:0;border-radius:var(--radius-sm);cursor:pointer}

/* text links, not boxed buttons */
html .authCard .forgotBtn,html .authCard .linkBtn{
  width:auto !important;min-height:0 !important;height:auto !important;padding:4px 2px !important;margin:0 !important;
  font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--accent) !important;background:none !important;border:0 !important;box-shadow:none !important;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html .authCard .forgotBtn{align-self:flex-end;margin-top:var(--sp-2) !important}
html .authCard .switchText{margin:var(--sp-4) 0 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--muted)}

/* ===== AUTH: clean eye icon + compact brand ===== */
html .authCard .togglePassword{font-size:0 !important;color:transparent !important;filter:none !important}
html .authCard .togglePassword::before{
  content:"" !important;display:block !important;width:22px;height:22px;opacity:.75;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>") !important;
  position:static !important;transform:none !important;border:0 !important;box-shadow:none !important}
html .authCard .togglePassword::after{display:none !important;content:none !important}

html body:has(#loginScreen:not(.hidden)) .appHeader,
html body:has(#registerScreen:not(.hidden)) .appHeader{padding:var(--sp-5) 0 var(--sp-3)}
html body:has(#loginScreen:not(.hidden)) .appHeader .mark,
html body:has(#registerScreen:not(.hidden)) .appHeader .mark{width:44px;height:44px;flex:0 0 44px;font-size:18px}
html body:has(#loginScreen:not(.hidden)) .appHeader h1,
html body:has(#registerScreen:not(.hidden)) .appHeader h1{font-size:var(--fs-xl);line-height:1.1}
html body:has(#loginScreen:not(.hidden)) .appHeader .brand,
html body:has(#registerScreen:not(.hidden)) .appHeader .brand{flex-direction:row;align-items:center;gap:var(--sp-3)}
html body:has(#loginScreen:not(.hidden)) .appHeader .headerBadge,
html body:has(#registerScreen:not(.hidden)) .appHeader .headerBadge{display:none}

/* ===== EXTERNAL CONVERTER NOTE ===== */
html .externalNote{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);text-align:left;font-size:var(--fs-sm);line-height:1.5;color:var(--muted);background:var(--surface-2);border:1px solid rgba(183,255,60,.3);border-radius:var(--radius-sm)}
html .externalNote b{font-size:var(--fs-md);color:var(--text)}
html .externalNote strong{color:var(--accent);letter-spacing:.04em}
html .externalNote a{display:grid;place-items:center;min-height:48px;font-weight:700;color:#0a0f06;background:var(--accent);border-radius:var(--radius-sm);text-decoration:none}

/* BETCODE_EYE_SLASH2 */
html .authCard .togglePassword.is-visible::after{display:block !important;content:"" !important;position:absolute !important;left:50% !important;top:50% !important;right:auto !important;bottom:auto !important;width:24px !important;height:2px !important;background:#b7ff3c !important;border:0 !important;border-radius:2px !important;transform:translate(-50%,-50%) rotate(-45deg) !important;box-shadow:0 0 0 1.5px #141b28 !important}