/* IOS_NATIVE_THEME_1
   Single visual system for the iPhone/PWA product.
   Decorative color is graphite + restrained warm gold. Semantic green/red
   remain reserved for result/live states. This layer is intentionally loaded
   by the cold-start guard before the main iOS shell is hydrated. */

html[data-ios-native-theme="1"] {
  color-scheme: dark;
  --bg: #090b0f;
  --frame: #0c0f14;
  --panel: #11151b;
  --card-header: #151a22;
  --table-header: #0f1319;
  --header-bar: #0d1015;
  --text: #f5f5f7;
  --text-body: #e5e5ea;
  --muted: #8e8e93;
  --muted-2: #636366;
  --border: rgba(255,255,255,.075);
  --border-emphasis: rgba(214,183,94,.28);
  --accent: #d6b75e;
  --accent-hover: #ead486;
  --accent-border: rgba(214,183,94,.42);
  --accent-soft: rgba(214,183,94,.10);
  --accent-dark: rgba(214,183,94,.14);
  --ios-ok: #30d158;
  --ios-ok-soft: rgba(48,209,88,.12);
  --ios-draw: #d6b75e;
  --ios-draw-soft: rgba(214,183,94,.12);
  --ios-bad: #ff453a;
  --ios-bad-soft: rgba(255,69,58,.12);
  background: #090b0f;
}

html[data-ios-native-theme="1"],
html[data-ios-native-theme="1"] body,
html[data-ios-native-theme="1"] #iosAppShell,
html[data-ios-native-theme="1"] .ios-shell-view,
html[data-ios-native-theme="1"] .ios-detail-overlay.modal-overlay,
html[data-ios-native-theme="1"] .ios-detail-page.match-detail-sheet,
html[data-ios-native-theme="1"] .lmc-overlay,
html[data-ios-native-theme="1"] .lmc-sheet {
  background-color: #090b0f !important;
  color: #f5f5f7 !important;
}

html[data-ios-native-theme="1"] body {
  background-image: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cold start: the loading screen must already look like the final app. */
html[data-ios-native-theme="1"][data-ios-week-hydration="loading"] #iosAppShell {
  background: #090b0f !important;
}
html[data-ios-native-theme="1"] .ios-empty,
html[data-ios-native-theme="1"] .ios-search-empty {
  color: #8e8e93 !important;
  font-weight: 600 !important;
}
html[data-ios-native-theme="1"] .ios-empty-card {
  border: 1px solid rgba(255,255,255,.07) !important;
  background: #11151b !important;
  color: #8e8e93 !important;
}

/* Header — one quiet iOS navigation bar, no green/turquoise legacy tint. */
html[data-ios-native-theme="1"] .ios-panel-header {
  background: rgba(13,16,21,.94) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
}
html[data-ios-native-theme="1"] .ios-panel-header h1,
html[data-ios-native-theme="1"] .ios-page-head h2,
html[data-ios-native-theme="1"] .ios-panel-heading h2,
html[data-ios-native-theme="1"] .ios-week-detail-head h2 {
  color: #f5f5f7 !important;
  letter-spacing: -.02em !important;
}
html[data-ios-native-theme="1"] .ios-panel-heading > span,
html[data-ios-native-theme="1"] .ios-product-subtitle,
html[data-ios-native-theme="1"] .ios-updated-label,
html[data-ios-native-theme="1"] .ios-panel-header #updated {
  color: #8e8e93 !important;
}
html[data-ios-native-theme="1"] .ios-brand-icon {
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.28) !important;
}

/* Controls — selected state is a subtle tint, never a mustard slab. */
html[data-ios-native-theme="1"] #iosPanelFilters .ios-filter,
html[data-ios-native-theme="1"] .ios-season,
html[data-ios-native-theme="1"] .ios-filter {
  border: 1px solid rgba(255,255,255,.075) !important;
  background: #12161d !important;
  color: #98989d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-ios-native-theme="1"] #iosPanelFilters .ios-filter--active,
html[data-ios-native-theme="1"] .ios-season--active,
html[data-ios-native-theme="1"] .ios-filter--active {
  border-color: rgba(214,183,94,.38) !important;
  background: rgba(214,183,94,.12) !important;
  color: #f0d781 !important;
}
html[data-ios-native-theme="1"] .ios-match-search {
  border: 1px solid rgba(255,255,255,.075) !important;
  background: #11151b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-ios-native-theme="1"] .ios-match-search svg { stroke: #8e8e93 !important; }
html[data-ios-native-theme="1"] .ios-match-search input { color: #f5f5f7 !important; }
html[data-ios-native-theme="1"] .ios-match-search input::placeholder { color: #636366 !important; }

/* KPI block — quiet hierarchy, numbers first. */
html[data-ios-native-theme="1"] #iosPanelKpis .ios-kpi-strip,
html[data-ios-native-theme="1"] #iosPanelKpis .ios-kpi-foot > span {
  border-color: rgba(255,255,255,.07) !important;
  background: #11151b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-ios-native-theme="1"] #iosPanelKpis .ios-kpi-strip > div {
  border-color: rgba(255,255,255,.06) !important;
}
html[data-ios-native-theme="1"] #iosPanelKpis small { color: #75757b !important; }
html[data-ios-native-theme="1"] #iosPanelKpis b { color: #f5f5f7 !important; }
html[data-ios-native-theme="1"] #iosPanelKpis .ios-kpi-coupon b:not(.is-closed) { color: #e0c46f !important; }

/* Match list — Apple-card geometry and a single surface color. */
html[data-ios-native-theme="1"] .ios-match-card {
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  background: #11151b !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-ios-native-theme="1"] .ios-match-card:active {
  background: #151a22 !important;
  border-color: rgba(214,183,94,.25) !important;
}
html[data-ios-native-theme="1"] .ios-match-no {
  color: #73737a !important;
  border-right-color: rgba(255,255,255,.055) !important;
}
html[data-ios-native-theme="1"] .ios-team-row b { color: #f5f5f7 !important; }
html[data-ios-native-theme="1"] .ios-match-time { color: #6f6f75 !important; }
html[data-ios-native-theme="1"] .ios-card-meta > span {
  border-color: rgba(255,255,255,.065) !important;
  background: rgba(255,255,255,.035) !important;
  color: #8e8e93 !important;
}
html[data-ios-native-theme="1"] .ios-card-meta > .ios-card-v4 {
  border-color: rgba(214,183,94,.28) !important;
  background: rgba(214,183,94,.10) !important;
  color: #e3c86f !important;
}
html[data-ios-native-theme="1"] .ios-card-meta > .ios-card-v3 {
  color: #77777e !important;
}
html[data-ios-native-theme="1"] .ios-match-state {
  border-color: rgba(255,255,255,.065) !important;
  background: #0d1117 !important;
  color: #a1a1a7 !important;
}
html[data-ios-native-theme="1"] .ios-match-state--live { color: #ff6961 !important; }

/* Bottom tab bar — iOS style translucent bar, one gold active cue. */
html[data-ios-native-theme="1"] .ios-tab-bar {
  background: rgba(13,16,21,.92) !important;
  border-top: 1px solid rgba(255,255,255,.075) !important;
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
}
html[data-ios-native-theme="1"] .ios-tab { color: #73737a !important; }
html[data-ios-native-theme="1"] .ios-tab--active { color: #e2c76f !important; }
html[data-ios-native-theme="1"] .ios-tab--active::before { background: #d6b75e !important; }

/* Detail page — remove the old gold-outline-heavy dashboard feeling. */
html[data-ios-native-theme="1"] .ios-detail-page .modal-head {
  background: rgba(9,11,15,.94) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
}
html[data-ios-native-theme="1"] .ios-detail-final .detail-tabs {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
html[data-ios-native-theme="1"] .ios-detail-final .detail-tab {
  color: #7d7d83 !important;
  border-color: transparent !important;
  background: transparent !important;
}
html[data-ios-native-theme="1"] .ios-detail-final .detail-tab.active {
  color: #e2c76f !important;
  border-color: rgba(214,183,94,.42) !important;
  background: rgba(214,183,94,.08) !important;
}
html[data-ios-native-theme="1"] .ios-detail-final .detail-section,
html[data-ios-native-theme="1"] .ios-detail-final .detail-summary-card,
html[data-ios-native-theme="1"] .ios-detail-final .venue-card,
html[data-ios-native-theme="1"] .analysis-card,
html[data-ios-native-theme="1"] .prediction-card,
html[data-ios-native-theme="1"] .form-card,
html[data-ios-native-theme="1"] .h2h-card,
html[data-ios-native-theme="1"] .standings-card {
  border-color: rgba(255,255,255,.07) !important;
  background: #11151b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}
html[data-ios-native-theme="1"] .ios-detail-final .ios-summary-premium {
  border-color: rgba(255,255,255,.07) !important;
  background: #11151b !important;
}
html[data-ios-native-theme="1"] .ios-detail-final .ios-summary-premium > h4 {
  border-bottom-color: rgba(255,255,255,.06) !important;
  color: #f5f5f7 !important;
}

/* Prediction colors: gold = choice, semantic green/red only = outcome/risk. */
html[data-ios-native-theme="1"] .ios-v4-decision,
html[data-ios-native-theme="1"] .ios-v4-pick,
html[data-ios-native-theme="1"] .ios-analysis-pick {
  border-color: rgba(214,183,94,.26) !important;
  background: rgba(214,183,94,.09) !important;
  color: #e4cb79 !important;
}
html[data-ios-native-theme="1"] .ios-prob-track,
html[data-ios-native-theme="1"] .prediction-bar-track { background: rgba(255,255,255,.06) !important; }
html[data-ios-native-theme="1"] .ios-prob-fill,
html[data-ios-native-theme="1"] .prediction-bar-fill { background: #d6b75e !important; }

/* Tables */
html[data-ios-native-theme="1"] table,
html[data-ios-native-theme="1"] .standings-table,
html[data-ios-native-theme="1"] .h2h-list,
html[data-ios-native-theme="1"] .form-list {
  color: #e5e5ea !important;
}
html[data-ios-native-theme="1"] th { background: #0e1218 !important; color: #8e8e93 !important; }
html[data-ios-native-theme="1"] td,
html[data-ios-native-theme="1"] th { border-color: rgba(255,255,255,.055) !important; }

/* Live center — same product, not a separate skin. */
html[data-ios-native-theme="1"] .lmc-sheet {
  background: #090b0f !important;
  border: 0 !important;
}
html[data-ios-native-theme="1"] .lmc-header,
html[data-ios-native-theme="1"] .lmc-tabs {
  background: rgba(13,16,21,.94) !important;
  border-color: rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
}
html[data-ios-native-theme="1"] .lmc-tab {
  color: #7d7d83 !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-ios-native-theme="1"] .lmc-tab.active {
  color: #e2c76f !important;
  background: rgba(214,183,94,.08) !important;
  border-color: rgba(214,183,94,.30) !important;
}
html[data-ios-native-theme="1"] .lmc-card,
html[data-ios-native-theme="1"] .lmc-event,
html[data-ios-native-theme="1"] .lmc-stat-card,
html[data-ios-native-theme="1"] .lmc-lineup-card,
html[data-ios-native-theme="1"] .lmc-venue-quick {
  background: #11151b !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Generic legacy surfaces visible before/under the iOS shell: keep them in the
   same palette so no old turquoise frame can flash during hydration. */
html[data-ios-native-theme="1"] header,
html[data-ios-native-theme="1"] .main-tabs,
html[data-ios-native-theme="1"] .kpi,
html[data-ios-native-theme="1"] .week-block,
html[data-ios-native-theme="1"] .match-card,
html[data-ios-native-theme="1"] .detail-card,
html[data-ios-native-theme="1"] .modal-content {
  background-color: #11151b !important;
  border-color: rgba(255,255,255,.07) !important;
  color: #f5f5f7 !important;
}
html[data-ios-native-theme="1"] .main-tab.active,
html[data-ios-native-theme="1"] .match-view-tab.active,
html[data-ios-native-theme="1"] .toggle-btn.active,
html[data-ios-native-theme="1"] .coupon-tab.active {
  background: rgba(214,183,94,.10) !important;
  border-color: rgba(214,183,94,.34) !important;
  color: #e2c76f !important;
}
html[data-ios-native-theme="1"] .dashboard-heading .section-tag,
html[data-ios-native-theme="1"] .brand-subtitle { color: #8e8e93 !important; }

/* Pending fixtures should read as quiet context, not the dominant card action.
   Live and finished-with-score states keep their stronger treatment. */
html[data-ios-native-theme="1"] .ios-match-state:not(.ios-match-state--live):not(:has(small)) {
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #656d79 !important;
}
html[data-ios-native-theme="1"] .ios-match-state:not(.ios-match-state--live):not(:has(small)) b {
  color: #737c89 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  white-space: nowrap;
}

@media (max-width: 430px) {
  html[data-ios-native-theme="1"] .ios-panel-content,
  html[data-ios-native-theme="1"] #iosWeeksRoot,
  html[data-ios-native-theme="1"] #iosViewCoupons,
  html[data-ios-native-theme="1"] #iosViewNotifications { padding-left: 12px !important; padding-right: 12px !important; }
  html[data-ios-native-theme="1"] .ios-match-card { min-height: 104px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ios-native-theme="1"] *,
  html[data-ios-native-theme="1"] *::before,
  html[data-ios-native-theme="1"] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}