/*
 * ReplayHub v34.10 · Visual Design System
 * Phase A — global color/material layer only.
 * No layout, grid, spacing, route or behavior changes.
 */

:root{
  color-scheme:dark;
  --rh-bg-0:#05080b;
  --rh-bg-1:#080d11;
  --rh-bg-2:#0b1116;
  --rh-panel:#0d1419;
  --rh-panel-2:#10181e;
  --rh-panel-3:#151e24;
  --rh-gold:#d3a04b;
  --rh-gold-bright:#e4b35f;
  --rh-gold-soft:#bc8435;
  --rh-gold-deep:#795421;
  --rh-gold-glow:rgba(211,160,75,.18);
  --rh-ivory:#f2f0eb;
  --rh-text-soft:#d5d2cb;
  --rh-muted:#91999f;
  --rh-muted-deep:#68727a;
  --rh-line:rgba(209,218,224,.13);
  --rh-line-soft:rgba(209,218,224,.075);
  --rh-line-gold:rgba(211,160,75,.34);
  --rh-shadow:0 18px 48px rgba(0,0,0,.34);
  --rh-success:#4fb774;
  --rh-warning:#d8a646;
  --rh-danger:#dc625a;
  --rh-info:#7da3bb;

  --bg:var(--rh-bg-0);
  --p:rgba(15,22,27,.96);
  --p2:rgba(8,13,17,.92);
  --line:var(--rh-line-soft);
  --line2:rgba(211,160,75,.13);
  --text:var(--rh-ivory);
  --muted:var(--rh-muted);
  --cyan:var(--rh-gold-bright);
  --gold:var(--rh-gold);
  --ok:var(--rh-success);
  --warn:var(--rh-warning);
  --bad:var(--rh-danger);
}

body{
  background:
    radial-gradient(circle at 48% -12%,rgba(211,160,75,.075),transparent 31%),
    radial-gradient(circle at 9% 30%,rgba(125,163,187,.028),transparent 30%),
    radial-gradient(circle at 92% 62%,rgba(211,160,75,.025),transparent 29%),
    linear-gradient(160deg,#05080b 0%,#0a1014 48%,#05080b 100%);
  color:var(--rh-ivory);
}

body::before{
  opacity:.16;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.011) 1px,transparent 1px);
  background-size:64px 64px;
}

body::after{
  background:
    radial-gradient(circle at 50% -10%,rgba(211,160,75,.055),transparent 34%),
    radial-gradient(circle at 8% 72%,rgba(211,160,75,.018),transparent 30%),
    linear-gradient(135deg,rgba(211,160,75,.012),transparent 40%,rgba(125,163,187,.008));
  mix-blend-mode:screen;
}

::selection{background:var(--rh-gold);color:#080a0c}
::-webkit-scrollbar-thumb{background:#293139;border-color:var(--rh-bg-0)}
::-webkit-scrollbar-thumb:hover{background:var(--rh-gold-soft)}
*{scrollbar-color:#39434a transparent}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible{
  outline-color:var(--rh-gold-bright);
  box-shadow:0 0 0 3px rgba(211,160,75,.12);
}

.top{
  background:linear-gradient(180deg,rgba(5,8,11,.985),rgba(5,8,11,.91),transparent);
}

.top::after{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(211,160,75,.22) 18%,
    rgba(228,179,95,.82) 50%,
    rgba(211,160,75,.22) 82%,
    transparent
  );
  box-shadow:0 0 20px rgba(211,160,75,.13);
}

.logo{
  background:linear-gradient(145deg,#12191e,#090e12);
  border-color:rgba(211,160,75,.31);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 28px rgba(0,0,0,.28),
    0 0 22px rgba(211,160,75,.055);
}

.btn{
  background:linear-gradient(180deg,rgba(19,27,33,.92),rgba(12,18,23,.94));
  border-color:rgba(209,218,224,.14);
  color:var(--rh-text-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.btn:hover{
  border-color:rgba(211,160,75,.42);
  color:var(--rh-ivory);
  box-shadow:
    0 9px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.btn.primary,
.btn.gold{
  background:linear-gradient(180deg,var(--rh-gold-bright),#c58c37);
  border:1px solid rgba(240,195,116,.72);
  color:#090b0d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 22px rgba(211,160,75,.14);
}

.btn.primary:hover,
.btn.gold:hover{
  border-color:#efc579;
  color:#07090b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 28px rgba(211,160,75,.22);
}

.rh-shell-nav .btn.active,
.rh-tabs .btn.active{
  background:linear-gradient(180deg,rgba(211,160,75,.16),rgba(121,84,33,.12))!important;
  border-color:rgba(211,160,75,.55)!important;
  color:#efc57a!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(211,160,75,.035),
    0 7px 22px rgba(0,0,0,.20)!important;
}

.rh-shell-nav .btn.attention{
  border-color:rgba(216,166,70,.42);
  color:#f0c471;
  background:rgba(216,166,70,.075);
}

.card{
  background:
    linear-gradient(145deg,rgba(17,25,31,.965),rgba(8,13,17,.975));
  border-color:rgba(209,218,224,.105);
  border-top-color:rgba(211,160,75,.30);
  box-shadow:
    0 18px 46px rgba(0,0,0,.31),
    inset 0 1px 0 rgba(255,255,255,.032),
    0 0 0 1px rgba(211,160,75,.010);
}

.card::after{
  background:
    linear-gradient(
      125deg,
      rgba(211,160,75,.020),
      transparent 27%,
      transparent 74%,
      rgba(125,163,187,.010)
    );
}

.card.hoverable:hover,
.stat-highlight:hover{
  border-color:rgba(211,160,75,.38);
}

.stat-highlight{
  background:linear-gradient(180deg,rgba(20,28,34,.86),rgba(10,15,19,.90));
  border-color:rgba(209,218,224,.10);
}

.metric small,
.stat-highlight small,
.rh-kpi small{color:var(--rh-muted)}

.metric b,
.stat-highlight b,
.rh-kpi b{color:var(--rh-ivory)}

.hero::before{
  background:
    radial-gradient(circle at 12% 0%,rgba(211,160,75,.13),transparent 55%),
    radial-gradient(circle at 92% 100%,rgba(125,163,187,.035),transparent 42%);
}

.hero::after{
  background:
    radial-gradient(
      circle,
      rgba(211,160,75,.095),
      rgba(211,160,75,.025) 36%,
      transparent 68%
    );
}

.hero h1{
  background:linear-gradient(100deg,var(--rh-ivory) 42%,#e8c178 82%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.rh-page-hero{
  border-color:rgba(209,218,224,.105);
  border-top-color:rgba(211,160,75,.35);
  background:linear-gradient(135deg,rgba(18,26,32,.96),rgba(7,12,16,.965));
  box-shadow:0 18px 46px rgba(0,0,0,.30);
}

.rh-page-hero:after{
  background:
    radial-gradient(
      circle,
      rgba(211,160,75,.13),
      rgba(211,160,75,.025) 40%,
      transparent 69%
    );
}

.rh-kicker,
.rh-subtle-gold,
.pt{color:var(--rh-gold-bright)}

.pt::before{color:rgba(211,160,75,.46)}

.rh-hub-note{
  border-color:rgba(211,160,75,.24);
  background:linear-gradient(90deg,rgba(211,160,75,.065),rgba(125,163,187,.018));
}

.rh-platform-only{border-color:rgba(211,160,75,.30)}

.input,
.select,
.textarea{
  background:rgba(5,9,12,.90);
  border-color:rgba(209,218,224,.16);
  color:var(--rh-ivory);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.016);
}

.input:hover,
.select:hover,
.textarea:hover{border-color:rgba(211,160,75,.27)}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:rgba(228,179,95,.76);
  box-shadow:0 0 0 3px rgba(211,160,75,.10);
}

.input::placeholder,
.textarea::placeholder{color:#667079}

.table th,
.table td,
.rh-list-row,
.divider{border-color:rgba(209,218,224,.075)}

.table th{color:#7f8991}
.table tr:hover>td{background:rgba(211,160,75,.035)}
.rh-search-example{border-color:rgba(209,218,224,.075)}

.rh-coverage-row,
.rh-funnel,
.rh-priority-box{
  background:rgba(7,12,16,.66);
  border-color:rgba(209,218,224,.085);
}

.teamlink,
.rh-link,
.wrap a:not(.btn):not(.brand):not([style*="color:inherit"]){
  color:var(--rh-gold)!important;
}

.teamlink:hover,
.rh-link:hover,
.wrap a:not(.btn):not(.brand):not([style*="color:inherit"]):hover{
  color:#efc477!important;
  border-color:var(--rh-gold);
  text-shadow:0 0 12px rgba(211,160,75,.15);
}

.progress{background:#11171c}
.progress i{
  background:linear-gradient(
    90deg,
    #a8742c,
    var(--rh-gold),
    var(--rh-gold-bright)
  );
}

.ok{
  background:rgba(79,183,116,.10);
  color:#a9e8bc;
  border-color:rgba(79,183,116,.27);
}

.warn{
  background:rgba(216,166,70,.10);
  color:#efd295;
  border-color:rgba(216,166,70,.28);
}

.bad{
  background:rgba(220,98,90,.10);
  color:#efb0aa;
  border-color:rgba(220,98,90,.29);
}

.tag{
  background:rgba(79,183,116,.075);
  border-color:rgba(79,183,116,.22);
  color:#a9e8bc;
}

.tag.warn{
  background:rgba(216,166,70,.075);
  border-color:rgba(216,166,70,.25);
  color:#efd295;
}

.tag.bad{
  background:rgba(220,98,90,.075);
  border-color:rgba(220,98,90,.25);
  color:#efb0aa;
}

.dangerbox,
.rh-danger-zone{
  border-color:rgba(220,98,90,.32);
  background:linear-gradient(180deg,rgba(31,13,16,.77),rgba(15,8,10,.84));
}

.empty,
.rh-empty{
  background:rgba(6,10,13,.58);
  border-color:rgba(209,218,224,.10);
  color:var(--rh-muted);
}
/* ==================================================================
   ReplayHub v34.10.1 · Visual Design Polish · Phase B
   Material/state cleanup only. No geometry or layout declarations.
   ================================================================== */

:root{
  --rh-muted:#9aa2a8;
  --muted:var(--rh-muted);
}

/* ui_consistency.html is injected inside <body> and therefore appears
   after the global <head> stylesheet. Higher specificity + !important
   makes the ReplayHub gold selected-state canonical regardless of order. */
html body .rh-shell-nav .btn.active,
html body .rh-tabs .btn.active,
html body .ops-tabs a.active,
html body .review-tabs a.active{
  background:
    linear-gradient(
      180deg,
      rgba(211,160,75,.17),
      rgba(121,84,33,.085)
    )!important;
  border-color:rgba(211,160,75,.58)!important;
  color:#efc57a!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(211,160,75,.025),
    0 7px 20px rgba(0,0,0,.20)!important;
}

html body .ops-tabs a:hover,
html body .review-tabs a:hover{
  border-color:rgba(211,160,75,.38)!important;
  color:var(--rh-ivory)!important;
  background:rgba(211,160,75,.045)!important;
}

/* Dashboard-local steel "public" button becomes neutral graphite. */
html body .cc2-public{
  background:linear-gradient(180deg,rgba(18,26,31,.94),rgba(9,14,18,.96))!important;
  border-color:rgba(209,218,224,.15)!important;
  color:var(--rh-text-soft)!important;
}

html body .cc2-public:hover{
  border-color:rgba(211,160,75,.36)!important;
  color:var(--rh-ivory)!important;
}

/* Chrome/Edge autofill must not turn secure login fields blue/steel. */
html body input.input:-webkit-autofill,
html body input.input:-webkit-autofill:hover,
html body input.input:-webkit-autofill:active,
html body textarea.textarea:-webkit-autofill,
html body select.select:-webkit-autofill{
  -webkit-text-fill-color:var(--rh-ivory)!important;
  caret-color:var(--rh-ivory)!important;
  -webkit-box-shadow:0 0 0 1000px #060b0f inset!important;
  box-shadow:0 0 0 1000px #060b0f inset!important;
  border-color:rgba(209,218,224,.17)!important;
}

html body input.input:-webkit-autofill:focus,
html body textarea.textarea:-webkit-autofill:focus,
html body select.select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--rh-ivory)!important;
  -webkit-box-shadow:
    0 0 0 1000px #060b0f inset,
    0 0 0 3px rgba(211,160,75,.10)!important;
  box-shadow:
    0 0 0 1000px #060b0f inset,
    0 0 0 3px rgba(211,160,75,.10)!important;
  border-color:rgba(228,179,95,.76)!important;
}

/* Chromium also exposes the standardized autofill pseudo-class. */
html body input.input:autofill{
  color:var(--rh-ivory)!important;
  background:#060b0f!important;
  border-color:rgba(209,218,224,.17)!important;
}

/* Warning cards should stay graphite with an amber edge, not become
   large muddy brown/olive surfaces. Semantic amber is preserved. */
html body .card.warn,
html body .metric.warn,
html body .action-card.warn,
html body .cap-action.warn{
  background:
    linear-gradient(
      145deg,
      rgba(16,23,29,.975),
      rgba(216,166,70,.035)
    )!important;
  border-color:rgba(216,166,70,.30)!important;
  color:var(--rh-ivory)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 30px rgba(0,0,0,.20)!important;
}

/* Preserve warning-colored numeric/status emphasis inside neutral surfaces. */
html body .metric.warn b,
html body .card.warn .warn,
html body .action-card.warn .tag{
  color:#efd295;
}

/* Search/autocomplete: replace the last blue-steel interaction language. */
html body .rh-ac,
html body .rh-team-ac{
  background:rgba(5,10,14,.988)!important;
  border-color:rgba(211,160,75,.30)!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.028)!important;
}

html body .rh-ac-item:hover,
html body .rh-ac-item.active,
html body .rh-team-option:hover,
html body .rh-team-option.active{
  background:rgba(211,160,75,.085)!important;
  color:var(--rh-ivory)!important;
}

html body .rh-ac-item:focus-visible,
html body .rh-team-option:focus-visible{
  outline-color:var(--rh-gold-bright)!important;
}

/* Upload wizard active step: gold identity, not legacy cyan. */
html body .wstep.active{
  border-color:rgba(211,160,75,.60)!important;
  color:#f0c77b!important;
  background:rgba(211,160,75,.070)!important;
}

html body .wstep.done{
  border-color:rgba(79,183,116,.34)!important;
  color:#a9e8bc!important;
  background:rgba(79,183,116,.045)!important;
}

/* Old logo chrome becomes neutral graphite with a restrained gold edge. */
html body .league-card-logo,
html body .league-top-logo,
html body .league-hero-logo{
  border-color:rgba(211,160,75,.20)!important;
  background:
    linear-gradient(
      145deg,
      rgba(18,26,31,.92),
      rgba(7,12,16,.96)
    )!important;
}

/* Legacy public status banner cyan is reduced to neutral graphite + gold. */
html body .status-banner{
  background:
    linear-gradient(
      120deg,
      rgba(16,23,29,.96),
      rgba(211,160,75,.032)
    )!important;
  border-color:rgba(209,218,224,.11)!important;
}

html body .status-banner.locked{
  border-color:rgba(216,166,70,.30)!important;
}

html body .status-banner.final{
  border-color:rgba(79,183,116,.30)!important;
}

/* Replay explorer dropdown should follow the same search language. */
html body .rh-team-ac{
  border-color:rgba(211,160,75,.30)!important;
}

html body .rh-team-name{
  color:var(--rh-ivory)!important;
}

/* Keep neutral card borders from drifting back toward blue/steel. */
html body .league-card-logo-fallback,
html body .league-top-logo-fallback,
html body .league-hero-logo-fallback{
  border-color:rgba(211,160,75,.22)!important;
}