:root {
  --account-bg: #050d18;
  --account-panel: #0a1727;
  --account-panel-high: #102238;
  --account-rim: rgba(75, 108, 143, 0.48);
  --account-gold: #f0b444;
  --account-gold-bright: #ffd77b;
  --account-text: #f2eadb;
  --account-muted: #98abc1;
}

body.ares-account-page,
body.ares-billing-page {
  min-height: 100vh;
  color: var(--account-text);
  background:
    radial-gradient(circle at 14% 4%, rgba(240, 180, 68, 0.11), transparent 27rem),
    radial-gradient(circle at 88% 26%, rgba(27, 84, 116, 0.16), transparent 34rem),
    linear-gradient(180deg, #07111e 0%, var(--account-bg) 55%, #040a12 100%);
  font-family: 'Syne', system-ui, sans-serif;
}

/* Prevent the original account-page component names from restyling the shared header. */
.ares-account-page #ares-account-reference-header .topbar,
.ares-billing-page #ares-account-reference-header .topbar {
  width: 100%;
  min-height: 0;
  padding: 0;
}

.ares-account-page #ares-account-reference-header .topbar-inner,
.ares-billing-page #ares-account-reference-header .topbar-inner {
  width: min(100%, 1400px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
}

.ares-account-page #ares-account-reference-header .brand,
.ares-billing-page #ares-account-reference-header .brand {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ares-account-page #ares-account-reference-header .nav,
.ares-billing-page #ares-account-reference-header .nav {
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ares-account-page #ares-account-reference-header .header-tools,
.ares-billing-page #ares-account-reference-header .header-tools {
  flex: 0 0 auto;
  min-width: 0;
}

.ares-account-page #ares-account-reference-header .pro-button,
.ares-account-page #ares-account-reference-header .account-button,
.ares-billing-page #ares-account-reference-header .pro-button,
.ares-billing-page #ares-account-reference-header .account-button {
  flex: 0 0 auto;
}

.ares-account-page main,
.ares-billing-page main {
  width: min(calc(100% - 40px), 1280px);
  margin-inline: auto;
  padding: 42px 0 78px;
}

.ares-account-page .signed-in-heading,
.ares-billing-page .billing-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(240, 180, 68, 0.36);
  border-radius: 16px;
  background:
    linear-gradient(100deg, rgba(5, 13, 24, 0.96) 0%, rgba(7, 22, 38, 0.84) 54%, rgba(8, 24, 39, 0.46) 100%),
    url('/assets/media/report-backgrounds/report-football-network.webp') center 44% / cover;
  box-shadow: 0 28px 74px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.04);
}

.ares-account-page .signed-in-heading::after,
.ares-billing-page .billing-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 42%, rgba(240, 180, 68, 0.18), transparent 31%);
}

.ares-account-page .signed-in-heading > *,
.ares-billing-page .billing-hero > * {
  position: relative;
  z-index: 1;
}

.ares-account-page h1,
.ares-billing-page h1 {
  max-width: 900px;
  margin: 8px 0 10px;
  color: var(--account-text);
  font: 600 clamp(38px, 5vw, 64px) / 1.04 'Cinzel', serif;
  letter-spacing: -0.025em;
}

.ares-account-page .lead,
.ares-billing-page .lead {
  max-width: 720px;
  margin: 0;
  color: #b4c3d3;
  font-size: 15px;
}

.ares-account-page .kpis,
.ares-billing-page .kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

.ares-account-page .kpi,
.ares-billing-page .kpi {
  position: relative;
  min-height: 112px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--account-rim);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(17, 37, 59, 0.98), rgba(8, 23, 39, 0.98));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.035);
}

.ares-account-page .kpi::before,
.ares-billing-page .kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--account-gold-bright), rgba(240, 180, 68, 0.12));
}

.ares-account-page .kpi span,
.ares-billing-page .kpi span {
  color: var(--account-muted);
  font: 9px 'DM Mono', monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ares-account-page .kpi strong,
.ares-billing-page .kpi strong {
  display: block;
  margin-top: 12px;
  color: var(--account-gold-bright);
  font: 600 clamp(18px, 2.1vw, 27px) 'DM Mono', monospace;
  overflow-wrap: anywhere;
}

.ares-account-page .panel,
.ares-billing-page .panel {
  border: 1px solid var(--account-rim);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(16, 34, 56, 0.97), rgba(7, 20, 34, 0.98));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.035);
}

.ares-account-page .panel h2,
.ares-billing-page .panel h2 {
  color: var(--account-text);
  font: 600 21px 'Cinzel', serif;
}

.ares-account-page .panel p,
.ares-billing-page .panel p {
  color: var(--account-muted);
}

.ares-account-page .account-grid,
.ares-billing-page .grid {
  gap: 18px;
}

.ares-account-page .account-grid {
  align-items: start;
}

.ares-account-page .alert-channel-options {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.ares-account-page .alert-channel-options legend {
  margin-bottom: 8px;
  color: var(--account-muted);
  font-size: 12px;
}

.ares-account-page .alert-channel-options label {
  min-height: 66px !important;
  padding: 12px 14px;
  border: 1px solid rgba(76, 111, 147, 0.55);
  border-radius: 9px;
  background: rgba(3, 13, 24, 0.48);
}

.ares-account-page .alert-channel-options strong,
.ares-account-page .alert-channel-options small {
  display: block;
}

.ares-account-page .field-help {
  display: block;
  margin-top: 7px;
  color: var(--account-muted);
  font-size: 11px;
  line-height: 1.45;
}

.ares-account-page .alert-channel-options strong {
  color: var(--account-text);
}

.ares-account-page .alert-channel-options small {
  margin-top: 3px;
  color: var(--account-muted);
}

#ares-account-reference-header .account-menu {
  position: relative;
  flex: 0 0 auto;
}

#ares-account-reference-header .account-menu-panel {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 10px);
  right: 0;
  width: min(290px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid rgba(240, 180, 68, 0.4);
  border-radius: 12px;
  background: linear-gradient(145deg, #102238, #071522);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

#ares-account-reference-header .account-menu-panel[hidden] {
  display: none;
}

#ares-account-reference-header .account-menu-summary {
  display: grid;
  gap: 4px;
  padding: 11px 12px 13px;
  border-bottom: 1px solid rgba(75, 108, 143, 0.42);
}

#ares-account-reference-header .account-menu-summary span {
  color: var(--account-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

#ares-account-reference-header .account-menu-summary strong {
  color: var(--account-gold-bright);
  font-size: 12px;
}

#ares-account-reference-header .account-menu-panel a,
#ares-account-reference-header .account-menu-panel button {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--account-text);
  font: 600 12px/1.3 'Syne', sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

#ares-account-reference-header .account-menu-panel a:hover,
#ares-account-reference-header .account-menu-panel a:focus-visible,
#ares-account-reference-header .account-menu-panel button:hover,
#ares-account-reference-header .account-menu-panel button:focus-visible {
  background: rgba(240, 180, 68, 0.12);
  color: var(--account-gold-bright);
}

.ares-account-main input:not([type='checkbox']),
.ares-account-main select,
.ares-billing-main input:not([type='checkbox']),
.ares-billing-main select {
  display: block;
  max-width: 100%;
  min-height: 48px;
  border-color: rgba(76, 111, 147, 0.7);
  border-radius: 8px;
  background: rgba(3, 13, 24, 0.82);
  color: var(--account-text);
}

.ares-account-main input[type='checkbox'],
.ares-billing-main input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--account-gold);
}

.ares-account-main label:has(> input[type='checkbox']),
.ares-billing-main label:has(> input[type='checkbox']) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.ares-account-page .ares-account-button,
.ares-billing-page .button {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(240, 180, 68, 0.55);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240, 180, 68, 0.18), rgba(180, 115, 18, 0.1));
  color: var(--account-gold-bright);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.ares-account-page .ares-account-button:hover,
.ares-billing-page .button:hover {
  background: linear-gradient(135deg, rgba(240, 180, 68, 0.3), rgba(180, 115, 18, 0.18));
}

.ares-account-page .service-card {
  min-height: 180px;
  border-color: var(--account-rim);
  background: linear-gradient(150deg, rgba(18, 40, 65, 0.95), rgba(7, 20, 34, 0.98));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.ares-account-page .service-card:hover {
  border-color: rgba(240, 180, 68, 0.55);
  transform: translateY(-2px);
}

.ares-billing-page .billing-hero .eyebrow,
.ares-account-page .eyebrow {
  color: var(--account-gold);
  font: 10px 'DM Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ares-billing-page #ares-billing-message,
.ares-billing-page .notice {
  border: 1px solid rgba(240, 180, 68, 0.3);
  border-left: 3px solid var(--account-gold);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(240, 180, 68, 0.1), rgba(14, 32, 52, 0.9));
  color: #b8c6d5;
}

.ares-billing-page #ares-billing-signed-in > .grid .panel {
  position: relative;
  min-height: 220px;
  padding: 28px;
  overflow: hidden;
}

.ares-billing-page #ares-billing-signed-in > .grid .panel::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(240, 180, 68, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(240, 180, 68, 0.08);
}

.ares-billing-page .table-wrap,
.ares-account-page .table-wrap {
  border-color: var(--account-rim);
  background: rgba(3, 13, 24, 0.5);
}

.ares-account-page .footer,
.ares-billing-page .footer {
  margin-top: 0;
  border-top: 1px solid rgba(240, 180, 68, 0.25);
}

.ares-account-page #ares-account-reference-footer,
.ares-billing-page #ares-account-reference-footer {
  width: 100%;
  padding: 0 20px;
}

.ares-account-page #ares-account-reference-footer .trust-strip,
.ares-billing-page #ares-account-reference-footer .trust-strip {
  width: min(100%, 1280px);
  margin: 0 auto 10px;
}

.ares-account-page #ares-account-reference-footer .footer,
.ares-billing-page #ares-account-reference-footer .footer {
  margin-inline: -20px;
}

.ares-account-page .account-primary-action {
  margin-top: 18px;
}

html:not([data-ares-authenticated]) .ares-account-page #ares-account-signed-out,
html[data-ares-authenticated='true'] .ares-account-page #ares-account-signed-out {
  display: none !important;
}

.ares-account-page .account-primary-action:empty {
  display: none;
}

.ares-account-page .account-primary-action .ares-billing-summary {
  margin-top: 12px;
}

.ares-account-page .account-section-heading {
  margin: 38px 0 14px;
}

.ares-account-page .account-section-heading h2 {
  margin: 5px 0 4px;
  font: 700 clamp(24px, 3vw, 34px) 'Syne', sans-serif;
}

.ares-account-page .account-section-heading p:last-child {
  margin: 0;
  color: var(--account-muted);
}

.ares-account-page .account-settings-grid,
.ares-account-page .account-activity-grid {
  display: grid;
  gap: 18px;
}

.ares-account-page .account-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ares-account-page .account-activity-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
}

.ares-account-page .account-activity-grid > .panel {
  margin-top: 0;
}

.ares-account-page .account-explore summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  color: var(--account-text);
}

.ares-account-page .account-explore summary strong {
  font: 700 17px 'Syne', sans-serif;
}

.ares-account-page .account-explore summary span:last-child {
  color: var(--account-muted);
  font-size: 12px;
}

.ares-account-page .account-service-map {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .ares-account-page main,
  .ares-billing-page main {
    width: min(calc(100% - 22px), 1280px);
    padding-top: 24px;
  }

  .ares-account-page .kpis,
  .ares-billing-page .kpis,
  .ares-account-page .account-grid,
  .ares-account-page .account-settings-grid,
  .ares-account-page .account-activity-grid,
  .ares-billing-page .grid {
    grid-template-columns: 1fr;
  }

  .ares-account-page .account-explore summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .ares-account-page .signed-in-heading,
  .ares-billing-page .billing-hero {
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ares-account-page *,
  .ares-billing-page * {
    transition: none !important;
  }
}