/* Match Signal — Premium Analytics Terminal
   Pilot layer for the main Upcoming / Prediction Desk only.
   Keep this file focused on layout, hierarchy, consistency and accessible states. */
:root {
  --ms-bg: #0a1017;
  --ms-panel: #101a25;
  --ms-panel2: #142130;
  --ms-border: #2a3a4b;
  --ms-text: #edf3f8;
  --ms-muted: #9aabba;
  --ms-cyan: #70d7cc;
  --ms-green: #68d9a7;
  --ms-violet: #a19af6;
  --ms-amber: #f0c875;
  --ms-red: #f17d8b;
  --ms-radius-card: 14px;
  --ms-radius-panel: 18px;
}

html { background: var(--ms-bg); }
body {
  background:
    radial-gradient(800px 360px at 50% -160px, rgba(79, 169, 174, .11), transparent 75%),
    linear-gradient(180deg, #0c131c 0%, #0a1017 48%, #090f15 100%);
  color: var(--ms-text);
  line-height: 1.55;
}
.ms-wrap {
  width: min(100%, 1440px);
  padding: 22px clamp(14px, 2.2vw, 30px) 64px;
}
.ms-wrap:before { display: none; }

/* Navigation: one quiet, stable bar instead of a floating neon effect. */
.ms-nav {
  position: sticky;
  top: 8px;
  z-index: 40;
  gap: 14px;
  padding: 10px 12px;
  margin: 0 0 22px;
  border: 1px solid #2b3d4e;
  border-radius: 15px;
  background: rgba(11, 18, 27, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  backdrop-filter: blur(14px);
}
.ms-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border-color: rgba(112, 215, 204, .38);
  background: #13242b;
  box-shadow: none;
}
.ms-mark:after { display: none; }
.ms-brand { filter: none; }
.ms-brand h1 { font-size: 18px; letter-spacing: -.025em; }
.ms-brand p { margin-top: 1px; font-size: 10px; }
.ms-tabs { gap: 5px; }
.ms-btn {
  min-height: 36px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #111b26;
  border-color: #2a3b4b;
  font-size: 11px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.ms-btn:hover, .ms-btn.active {
  transform: none;
  border-color: rgba(112, 215, 204, .6);
  background: rgba(112, 215, 204, .09);
  box-shadow: none;
}

/* Clear title hierarchy and more restrained surfaces. */
.ms-hero {
  margin-bottom: 16px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #2c4654;
  border-radius: var(--ms-radius-panel);
  background:
    linear-gradient(110deg, rgba(18, 34, 46, .98), rgba(13, 22, 32, .98) 65%, rgba(17, 24, 37, .98));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .20);
}
.ms-hero:after { display: none; }
.ms-eyebrow {
  color: var(--ms-cyan);
  font-size: 10px;
  letter-spacing: .13em;
}
.ms-hero h2 {
  max-width: 880px;
  margin: 10px 0 11px;
  font-size: clamp(28px, 3.7vw, 44px);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ms-hero p {
  max-width: 780px;
  color: #afbdca;
  font-size: 13px;
  line-height: 1.65;
}

/* Metric cards align to a shared baseline and stop competing with the board. */
.ms-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 16px;
}
.ms-metric {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  background: linear-gradient(145deg, #121e2a, #0e1721);
  box-shadow: none;
}
.ms-metric:after { display: none; }
.ms-metric small {
  display: block;
  color: var(--ms-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.4;
}
.ms-metric strong {
  margin-top: 7px;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Panels have predictable spacing and restrained depth. */
.ms-panel {
  padding: clamp(14px, 1.8vw, 22px);
  margin-bottom: 16px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-panel);
  background: rgba(14, 22, 32, .96);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .17);
}
.ms-panel-head {
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(154, 171, 186, .14);
}
.ms-panel-head h2 {
  color: #c3d0da;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .105em;
}
.ms-status {
  gap: 7px;
  font-size: 10px;
}
.ms-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px rgba(104, 217, 167, .09);
}

/* Shared filters: aligned controls, visible focus and no cramped search field. */
.ms-up-toolbar {
  grid-template-columns: minmax(150px, 190px) minmax(140px, 170px) minmax(220px, 1fr);
  gap: 9px;
}
.ms-up-toolbar select,
.ms-up-toolbar input,
.ms-toolbar select,
.ms-toolbar input {
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #304354;
  border-radius: 10px;
  background: #0b141d;
  color: var(--ms-text);
  font: inherit;
  font-size: 12px;
}
.ms-up-toolbar select:focus-visible,
.ms-up-toolbar input:focus-visible,
.ms-toolbar select:focus-visible,
.ms-toolbar input:focus-visible,
.ms-btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ms-cyan);
  outline-offset: 3px;
}
.ms-up-summary {
  align-items: flex-start;
  margin: 12px 0 14px;
  color: var(--ms-muted);
  font-size: 10px;
  line-height: 1.5;
}
.ms-up-summary span { min-width: 0; }
.ms-up-summary span:last-child {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(240, 200, 117, .25);
  border-radius: 6px;
  background: rgba(240, 200, 117, .055);
  color: #e8d19d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Qualified Best entry is a distinct route, not a competing hero. */
.ms-qualified-best-entry {
  padding: 15px;
  margin: 14px 0 18px;
  border: 1px solid rgba(112, 215, 204, .23);
  border-radius: 13px;
  background: linear-gradient(110deg, rgba(22, 43, 51, .50), rgba(15, 25, 35, .7));
}
.ms-qualified-best-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ms-qualified-best-head h3 {
  margin: 0 0 5px;
  color: var(--ms-text);
  font-size: 14px;
  line-height: 1.35;
}
.ms-qualified-best-head p {
  max-width: 760px;
  margin: 0;
  color: var(--ms-muted);
  font-size: 11px;
  line-height: 1.55;
}
.ms-qualified-best-open {
  flex: 0 0 auto;
  align-self: center;
  border-color: rgba(112, 215, 204, .42);
  background: rgba(112, 215, 204, .09);
  color: #dff8f3;
}
.ms-qualified-data-status {
  border: 1px solid rgba(154, 171, 186, .15);
  background: rgba(154, 171, 186, .045);
  line-height: 1.5;
}
.ms-qualified-best-summary {
  gap: 8px;
}

/* Fixture list: consistent columns, clear date grouping and restrained hover. */
.ms-up-board { gap: 19px; }
.ms-up-day { gap: 8px; min-width: 0; }
.ms-up-day-head {
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(154, 171, 186, .16);
}
.ms-up-day-head h3 {
  color: #c2d0dc;
  font-size: 10px;
  letter-spacing: .1em;
}
.ms-up-day-head span {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.ms-up-row {
  grid-template-columns: minmax(98px, 125px) minmax(0, 1fr) minmax(132px, 170px);
  gap: 14px;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid #2a3a49;
  border-radius: 12px;
  background: linear-gradient(110deg, #121e2a, #101923 70%);
  box-shadow: none;
}
.ms-up-row:hover {
  border-color: rgba(112, 215, 204, .42);
  background: linear-gradient(110deg, #15232f, #111d27 70%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
.ms-up-time b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ms-up-time span { font-size: 10px; }
.ms-up-meta { row-gap: 4px; font-size: 10px; }
.ms-sport-pill { color: var(--ms-cyan); }
.ms-up-match {
  margin: 7px 0;
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ms-up-details { gap: 8px 12px; font-size: 10px; }
.ms-up-status { min-width: 0; align-content: start; }
.ms-up-status-badge {
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 8px;
}
.ms-up-qual { border-radius: 5px; }

/* Respect motion preferences and keep dense layouts stable at narrow widths. */
@media (max-width: 960px) {
  .ms-wrap { padding-top: 16px; }
  .ms-nav { position: relative; top: auto; }
  .ms-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-up-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ms-up-toolbar input { grid-column: 1 / -1; }
  .ms-up-row { grid-template-columns: minmax(88px, 105px) minmax(0, 1fr); }
  .ms-up-status {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
  }
}
@media (max-width: 640px) {
  .ms-wrap { padding: 12px 12px 42px; }
  .ms-nav { padding: 9px; margin-bottom: 15px; border-radius: 12px; }
  .ms-brand { gap: 8px; }
  .ms-brand h1 { font-size: 16px; }
  .ms-tabs { width: 100%; gap: 5px; }
  .ms-btn { min-height: 34px; padding: 7px 8px; font-size: 10px; }
  .ms-hero { padding: 20px 17px; border-radius: 15px; }
  .ms-hero h2 { font-size: clamp(26px, 8vw, 34px); }
  .ms-hero p { font-size: 12px; }
  .ms-metrics { gap: 8px; }
  .ms-metric { padding: 12px; border-radius: 11px; }
  .ms-metric small { font-size: 8px; }
  .ms-metric strong { font-size: 20px; }
  .ms-panel { padding: 12px; border-radius: 14px; }
  .ms-panel-head { align-items: flex-start; }
  .ms-up-toolbar { grid-template-columns: minmax(0, 1fr); }
  .ms-up-toolbar input { grid-column: auto; }
  .ms-up-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .ms-qualified-best-head { align-items: flex-start; flex-direction: column; }
  .ms-qualified-best-open { align-self: flex-start; white-space: normal; }
  .ms-up-row { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px; }
  .ms-up-time { display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .ms-up-status { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-btn { transition: none; }
}