:root {
  --red: #B0E0E6;
  --red2: #B0E0E6;
  --ui-scale: 1;
}

body {
  background: radial-gradient(circle at 72% -20%, #24464b66, transparent 38%), var(--bg);
}

.brand-mark {
  color: #071013;
  box-shadow: 10px 0 0 #28484c;
}

.nav-item.active {
  background: linear-gradient(90deg, #17272a, #15191d);
}

.topbar {
  justify-content: flex-end;
  min-height: 48px;
}

.header-actions > select,
.header-actions > .primary {
  height: 44px;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
}

.header-actions > select { padding: 0 34px 0 12px; }
#crew-filter { min-width: 190px; }
#app-scale { min-width: 150px; }

.header-actions > .primary {
  min-width: 142px;
  padding: 0 14px;
  white-space: nowrap;
}

@media (min-width: 751px) {
  .app-shell { min-height: calc(100vh / var(--ui-scale)); }
  .sidebar { height: calc(100vh / var(--ui-scale)); min-height: calc(100vh / var(--ui-scale)); }
}

.primary {
  color: #071013;
  box-shadow: 0 8px 22px #b0e0e62e;
}

.primary:hover {
  background: #c7f4f8;
}

.metric.feature {
  background: linear-gradient(125deg, #142326, #12161b);
}

.speed-ring {
  border-color: #243c40;
  border-top-color: var(--red);
}

.activity:first-child .place {
  color: #071013;
}

.bar-fill {
  background: linear-gradient(90deg, var(--red), #d2f5f8);
}

.entity-card .card-top > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.entity-card .card-top small {
  display: block;
  margin-top: 0;
}

.tag {
  border-color: #42666b;
}

.choice-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-field legend {
  margin-bottom: 8px;
  color: #8f99a2;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.choice {
  position: relative;
  display: block !important;
  cursor: pointer;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #303840;
  border-radius: 3px;
  color: #aab3ba;
  background: #0c0f12;
  font-size: .78rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  transition: .16s ease;
}

.choice input:checked + span {
  border-color: var(--red);
  color: #071013;
  background: var(--red);
  box-shadow: 0 0 0 1px #b0e0e633;
}

.choice input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.choice-field > small {
  display: block;
  margin-top: 7px;
  color: #68727c;
  font-size: .68rem;
}

.distance-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 8px;
}

.track-form-actions,
.crew-form-actions,
.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.track-form-actions .primary {
  flex: 1;
}

.crew-form-actions .primary {
  flex: 1;
}

.entity-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entity-form-actions .primary {
  flex: 1;
}

.edit-button {
  border: 1px solid #354148;
  border-radius: 3px;
  padding: 6px 10px;
  color: var(--red);
  background: transparent;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.edit-button:hover {
  border-color: var(--red);
  background: #b0e0e610;
}

#race-type-display[readonly] {
  color: var(--red);
  background: #12191d;
  cursor: not-allowed;
}

.crew-card.expanded {
  grid-column: 1 / -1;
}

.racer-card.expanded { grid-column: 1 / -1; }
.racer-car-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.racer-car-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.racer-car-head h4 { margin: 0; font: 700 1.35rem var(--display); text-transform: uppercase; }
.racer-car-head label { display: grid; min-width: min(320px, 100%); gap: 6px; color: #8f99a2; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.racer-car-head select { padding: 9px 11px; }
.racer-car-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.racer-car-stats > div { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 14px; border: 1px solid #293238; background: #0a0e11; }
.racer-car-stats strong { font: 800 1.55rem var(--display); }
.racer-car-stats small { margin: 5px 0 0; color: var(--muted); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.racer-car-context { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: var(--muted); font-size: .7rem; }
.car-library-card { min-height: 104px; }
.car-library-card[hidden] { display: none; }
.car-reference { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; color: var(--muted); font-size: .7rem; }

.garage-search-bar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: -10px 0 18px 316px; padding: 14px 16px; border: 1px solid var(--line); background: #0e1216; }
.garage-search-controls { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(130px, 1fr) minmax(150px, 1fr); gap: 10px; flex: 1; }
.garage-search-bar label { display: grid; width: 100%; gap: 7px; color: #8f99a2; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.garage-search-bar input, .garage-search-bar select { padding: 10px 12px; }
#garage-search-results { flex: none; color: var(--red); font: 700 .8rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
#app-scale { width: auto; min-width: 150px; }

.crew-roster-toggle {
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 6px 11px;
  color: #071013;
  background: var(--red);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}

.crew-roster-toggle:hover {
  filter: brightness(1.08);
}

.crew-roster {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.crew-roster-head,
.crew-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 190px);
  align-items: center;
  gap: 16px;
}

.crew-roster-head {
  padding: 0 12px 5px;
  color: #71808b;
  font-size: .63rem;
  letter-spacing: .13em;
}

.crew-roster-head span {
  text-align: left;
}

.crew-member {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #252e34;
  background: #0b0f12;
}

.crew-member > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.crew-member strong {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
}

.crew-member small {
  color: var(--red);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.crew-member select {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border-color: #354148;
  color: #eef4f6;
  background: #10161a;
  font-weight: 700;
}

@media (max-width: 620px) {
  .crew-roster-head,
  .crew-member {
    grid-template-columns: 1fr;
  }

  .crew-roster-head span {
    display: none;
  }

  .crew-member > div {
    margin-bottom: 3px;
  }

  .racer-car-head { align-items: stretch; flex-direction: column; }
  .racer-car-head label { min-width: 0; }
  .racer-car-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .racer-car-context { flex-direction: column; }
}

@media (max-width: 1050px) {
  .garage-search-bar { margin-left: 0; }
}

@media (max-width: 750px) {
  #app-scale { display: block; min-width: 112px; padding-inline: 8px; }
}

@media (max-width: 520px) {
  .garage-search-bar { align-items: stretch; flex-direction: column; }
  .garage-search-controls { grid-template-columns: 1fr; }
  #garage-search-results { align-self: flex-end; }
}

#tracks .section-intro h2,
#cars .section-intro h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.library-count {
  display: inline-flex;
  min-width: 34px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid var(--red);
  border-radius: 999px;
  color: #071013;
  background: var(--red);
  font-family: Arial, sans-serif;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
}

#battles .section-intro h2,
#points .section-intro h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.battle-layout,
.battle-list {
  display: grid;
  gap: 18px;
}

.battle-form {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--red) 9%, transparent), transparent 42%),
    #0e1216;
}

.battle-form h3,
.round-form h3 {
  margin: 0;
  font: 700 1.75rem var(--display);
  text-transform: uppercase;
}

.battle-form-header { cursor: pointer; margin: -10px; padding: 10px; transition: background .18s ease; }
.battle-form-header:hover { background: color-mix(in srgb, var(--red) 6%, transparent); }
.battle-form-header:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.battle-form-body[hidden] { display: none; }
.battle-form.collapsed .battle-form-header { margin-bottom: -10px; }

.form-title-row,
.battle-card-head,
.round-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.form-title-row {
  margin-bottom: 20px;
}

.battle-format-badge {
  min-width: 52px;
  padding: 7px 10px;
  border: 1px solid var(--red);
  color: #071013;
  background: var(--red);
  font: 800 .9rem var(--display);
  text-align: center;
}

#battle-submit {
  padding: 8px 13px;
  font-size: .76rem;
}

.lineup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  margin-top: 24px;
}

.lineup-grid fieldset {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  background: #0a0e11;
}

.lineup-grid legend {
  padding: 0 8px;
  color: var(--red);
  font: 700 .8rem var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.versus-mark {
  display: grid;
  place-items: center;
  color: var(--red);
  font: 800 1.7rem var(--display);
}

.driver-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.driver-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.driver-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.driver-choice span {
  display: flex;
  min-height: 54px;
  flex-direction: column;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid #293238;
  background: #11171b;
  transition: .18s ease;
}

.driver-choice input:checked + span {
  border-color: var(--red);
  color: #071013;
  background: var(--red);
}

.driver-choice b { font-size: .85rem; }
.driver-choice small { color: #7c8992; font-size: .67rem; }
.driver-choice input:checked + span small { color: #203038; }
.compact-empty { grid-column: 1 / -1; padding: 18px 10px; }

.battle-bans-editor {
  min-width: 0;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #0a0e11;
}

.battle-bans-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.battle-bans-head h4 {
  margin: 0;
  font: 700 1.2rem var(--display);
  text-transform: uppercase;
}

.battle-bans-head h4 span { display: inline-grid; min-width: 25px; height: 25px; place-items: center; margin-left: 6px; border-radius: 999px; color: #071013; background: var(--red); font: 800 .72rem Arial, sans-serif; vertical-align: middle; }
.banned-cars-current { display: flex; flex-wrap: wrap; gap: 7px; }
.banned-cars-current > span { display: grid; padding: 7px 10px; border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 8%, #0b0f12); }
.banned-cars-current b { font-size: .76rem; }
.banned-cars-current small { color: var(--muted); font-size: .62rem; }
.banned-cars-current p { margin: 0; color: var(--muted); font-size: .78rem; }
.ban-car-picker-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ban-car-picker-panel[hidden] { display: none; }

.banned-cars-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  align-items: center;
  gap: 12px;
}

[data-banned-count] {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}

.banned-car-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.banned-car-choice { position: relative; min-width: 0; cursor: pointer; }
.banned-car-choice[hidden] { display: none; }
.banned-car-choice input { position: absolute; opacity: 0; pointer-events: none; }
.banned-car-choice span { display: grid; min-height: 50px; align-content: center; padding: 8px 10px; border: 1px solid #283138; background: #11171b; transition: .16s ease; }
.banned-car-choice b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.banned-car-choice small { color: #77848c; font-size: .62rem; }
.banned-car-choice input:checked + span { border-color: var(--red); color: #071013; background: var(--red); }
.banned-car-choice input:checked + span small { color: #25343a; }
.battle-bans-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.battle-bans-actions small { color: var(--muted); }
.battle-bans-actions > div { display: flex; gap: 8px; }
.view-hidden { display: none !important; }

.battle-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #12171c, #0c1013);
}

.battle-card-head { padding: 20px; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.battle-card-head:hover { background: color-mix(in srgb, var(--red) 6%, transparent); }
.battle-card-head:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.battle-card.expanded .battle-card-head { background: color-mix(in srgb, var(--red) 4%, transparent); }
.battle-card-head button { cursor: pointer; }
.battle-card-head h3 { margin: 0 0 4px; font: 700 1.45rem var(--display); text-transform: uppercase; }
.battle-card-head > div:first-child { flex: 1; min-width: 210px; }
.battle-card-head > div:first-child > small { color: var(--muted); }

.battle-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px;
  border-inline: 1px solid var(--line);
}

.battle-score div { display: flex; align-items: baseline; gap: 10px; }
.battle-score span { color: var(--muted); font: 700 .78rem var(--display); }
.battle-score strong { font: 800 2.4rem/1 var(--display); }
.battle-score > b { color: #56616a; }

.battle-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.battle-status { color: var(--red); font: 700 .72rem var(--display); letter-spacing: .08em; }
.battle-detail { padding: 0 20px 20px; border-top: 1px solid var(--line); }

.lineup-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 0;
}

.lineup-summary > div:first-child,
.lineup-summary > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
.lineup-summary > div:last-child { justify-content: flex-end; }
.lineup-summary > div > small { width: 100%; color: var(--muted); text-transform: uppercase; }
.lineup-summary > div:last-child > small { text-align: right; }
.lineup-summary span { padding: 5px 8px; border: 1px solid #2b353c; background: #0b0f12; font-size: .74rem; }
.series-score { text-align: center; }
.series-score strong { display: block; margin-top: 5px; font: 800 2rem var(--display); }

.battle-rounds { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 16px; align-items: start; }
.round-card { margin-top: 10px; border: 1px solid #293138; background: #0a0e11; }
.round-head { padding: 12px 14px; border-bottom: 1px solid #222a30; }
.round-head > div:first-child { display: grid; }
.round-head small { color: var(--muted); margin-top: 3px; }
.round-score { display: flex; gap: 9px; align-items: center; color: var(--red); }

.finish-order { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finish-order > div { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #1d2429; }
.finish-position { color: var(--red); font: 800 1rem var(--display); }
.finish-order strong { display: flex; min-width: 0; align-items: center; gap: 8px; }
.finish-car { overflow: hidden; max-width: 150px; padding: 2px 6px; border: 1px solid #334149; color: var(--muted); font: 600 .62rem var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.finish-order small { color: var(--muted); }
.finish-order b { color: var(--red); }

.round-form { display: grid; gap: 14px; position: sticky; top: 20px; }
.round-form > label { display: grid; gap: 7px; color: #8f99a2; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.position-entry-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 200px) 58px; gap: 10px; padding-left: 38px; color: #71808b; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.position-entry-head span:last-child { text-align: center; }
.position-entry { display: grid; gap: 6px; max-height: 410px; overflow: auto; padding-right: 3px; }
.position-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(130px, 200px) 58px; gap: 10px; align-items: center; min-height: 56px; padding: 7px 9px; border: 1px solid transparent; background: #0a0e11; cursor: grab; transition: border-color .15s ease, background .15s ease, opacity .15s ease; }
.position-row:hover { border-color: #35434b; background: #0e1418; }
.position-row.dragging { opacity: .48; border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, #0a0e11); cursor: grabbing; }
.drag-handle { color: #65737c; font-size: 1.25rem; letter-spacing: -5px; transform: rotate(90deg); user-select: none; }
.position-driver { display: grid; min-width: 0; }
.position-driver b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.position-driver small { color: var(--red); font-size: .65rem; }
.position-row select { min-width: 0; padding: 8px 28px 8px 9px; font-size: .72rem; }
.fixed-position { display: grid; min-width: 52px; min-height: 38px; place-items: center; border: 1px solid #344149; color: #071013; background: var(--red); font: 800 1rem var(--display); }

.points-form { align-self: start; }
.field-label { display: block; margin-bottom: 9px; color: #8f99a2; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.points-position-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.points-position-grid label { gap: 4px; }
.points-position-grid label span { color: var(--red); font: 700 .7rem var(--display); }
.points-position-grid input { padding: 9px 6px; text-align: center; }
.form-help { color: var(--muted); line-height: 1.5; }
.point-card { min-height: 150px; }
.points-strip { display: grid; grid-template-columns: repeat(8, minmax(38px, 1fr)); gap: 4px; margin-top: auto; padding-top: 18px; }
.points-strip span { display: grid; place-items: center; padding: 6px 3px; background: #090d10; border-top: 2px solid #263138; }
.points-strip small { margin: 0; color: var(--muted); }
.points-strip b { font: 700 .9rem var(--display); }

dialog.leaderboard-dialog {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  padding: 0;
}

.leaderboard-dialog-head,
.leaderboard-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
}

.leaderboard-dialog-head { border-bottom: 1px solid var(--line); }
.leaderboard-dialog-head h3 { margin: 0; }
.leaderboard-dialog-foot { justify-content: flex-end; border-top: 1px solid var(--line); }
#racer-leaderboard-content { max-height: min(62vh, 620px); padding: 10px 18px; overflow: auto; }
.leaderboard-points { color: var(--red); font: 800 1.2rem var(--display); }

@media (max-width: 1100px) {
  .battle-card-head { align-items: flex-start; flex-wrap: wrap; }
  .battle-score { order: 3; width: 100%; justify-content: center; border: 1px solid var(--line); }
  .battle-rounds { grid-template-columns: 1fr; }
  .round-form { position: static; }
}

@media (max-width: 750px) {
  .sidebar nav { overflow-x: auto; justify-content: flex-start; }
  .nav-item { min-width: 72px; }
  .lineup-grid { grid-template-columns: 1fr; }
  .versus-mark { min-height: 34px; }
  .driver-picker { grid-template-columns: 1fr; }
  .banned-car-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lineup-summary { grid-template-columns: 1fr; }
  .lineup-summary > div:last-child { justify-content: flex-start; }
  .lineup-summary > div:last-child > small { text-align: left; }
  .series-score { text-align: left; }
  .finish-order { grid-template-columns: 1fr; }
  .points-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 520px) {
  .battle-card-head { padding: 16px; }
  .battle-detail { padding: 0 14px 14px; }
  .battle-actions { justify-content: flex-start; }
  .battle-bans-head { align-items: stretch; flex-direction: column; }
  .banned-cars-toolbar { grid-template-columns: 1fr; }
  .banned-car-picker { grid-template-columns: 1fr; }
  .battle-bans-actions { align-items: stretch; flex-direction: column; }
  .points-position-grid { grid-template-columns: repeat(2, 1fr); }
}
.cloud-login{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:rgba(3,7,9,.88);backdrop-filter:blur(18px)}
.cloud-login-card{width:min(460px,100%);padding:42px;border:1px solid #29363b;background:linear-gradient(145deg,#11191d,#090d0f);box-shadow:0 28px 90px rgba(0,0,0,.55);text-align:center}
.cloud-login-card .brand-mark{display:inline-grid;margin-bottom:22px}
.cloud-login-card h2{margin:4px 0 12px;font-family:'Barlow Condensed',sans-serif;font-size:2.6rem;text-transform:uppercase}
.cloud-login-card p:not(.eyebrow){margin:0 auto 28px;max-width:360px;color:#92a4ad;line-height:1.6}
.cloud-login-card .primary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;text-decoration:none}
.permission-readonly form,.permission-readonly .edit-button,.permission-readonly .icon-button,.permission-readonly [data-save-bans],.permission-readonly [data-cancel-bans],.permission-readonly [data-toggle-ban-picker],.permission-readonly [data-edit-round],.permission-readonly [data-delete-round]{display:none!important}
.account-access-layout{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(520px,1.2fr);gap:18px;align-items:start}.account-list,.role-permissions{display:grid;gap:10px;margin-top:16px}
.account-row,.role-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:1px solid #29363b;background:rgba(5,10,13,.48)}.account-row div{display:grid;gap:4px}.account-row small,.role-card p{color:#92a4ad}.account-row select{min-width:130px}
.role-card{display:grid;align-items:stretch}.role-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.role-card .primary{padding:8px 12px;min-height:34px}
.permission-grid{display:grid!important;grid-template-columns:minmax(150px,1fr) 52px 52px;gap:8px 14px;align-items:center}.permission-grid>b,.permission-grid>span{text-transform:uppercase;font-size:11px;letter-spacing:.12em;color:#b0e0e6}.permission-grid input{justify-self:center;width:18px;height:18px}
@media(max-width:1000px){.account-access-layout{grid-template-columns:1fr}}

/* CUH metallic intelligence theme */
:root{--cuh-blue:#82dcff;--cuh-cyan:#b0e0e6;--cuh-panel:rgba(6,16,24,.78);--cuh-line:rgba(130,220,255,.34)}
body{background:#02070b;color:#eef7fb}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:#02070b}
.app-shell{position:relative;background:transparent}.app-shell::before{content:"";position:fixed;z-index:-1;top:0;right:0;bottom:0;left:240px;pointer-events:none;background:linear-gradient(90deg,rgba(2,7,11,.86),rgba(2,8,13,.54) 50%,rgba(2,7,11,.78)),linear-gradient(180deg,rgba(1,5,8,.25),rgba(1,5,8,.72)),url('cuh-background.jpg') center/contain no-repeat}
.sidebar{border-right:1px solid rgba(130,220,255,.24);background:linear-gradient(180deg,rgba(3,10,16,.97),rgba(3,10,16,.9));box-shadow:12px 0 45px rgba(0,0,0,.3)}
.brand{align-items:center;flex-direction:column;padding:22px 14px 28px;text-align:center;border-bottom:1px solid rgba(130,220,255,.18)}
.brand-emblem{display:block;width:126px;height:146px;background:url('cuh-logo.jpg') center/contain no-repeat;filter:drop-shadow(0 0 12px rgba(60,174,255,.42))}
.brand>div{display:grid;gap:2px}.brand strong{font:800 1.2rem 'Barlow Condensed',sans-serif;letter-spacing:.42em;margin-left:.42em}.brand small{color:#b8c6ce;font-size:.52rem;letter-spacing:.2em}
.nav-item{position:relative;border-left:3px solid transparent;color:#afbdc7;font-weight:600}.nav-item:hover{color:#e7f8ff;background:rgba(130,220,255,.06)}.nav-item.active{border-left-color:var(--cuh-blue);color:#e9faff;background:linear-gradient(90deg,rgba(104,205,255,.22),rgba(104,205,255,.05));box-shadow:inset 0 0 22px rgba(71,180,238,.1)}
.nav-item span{color:#76caed}.side-foot{border-top:1px solid rgba(130,220,255,.18);background:rgba(2,8,12,.55)}
main{background:transparent}.topbar{background:linear-gradient(180deg,rgba(3,11,17,.94),rgba(3,11,17,.52));border-bottom:1px solid rgba(130,220,255,.12);backdrop-filter:blur(8px)}
.view{padding-top:24px}.overview-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 0 24px}.overview-hero h1{margin:2px 0 8px;font:800 clamp(3rem,5vw,5.4rem)/.85 'Barlow Condensed',sans-serif;letter-spacing:.015em;text-transform:uppercase;color:#f5f8fa;text-shadow:0 3px 0 #74838c,0 8px 18px rgba(0,0,0,.75)}.overview-hero>div>span{display:block;width:140px;height:3px;background:linear-gradient(90deg,var(--cuh-blue),transparent);box-shadow:0 0 10px rgba(130,220,255,.8)}.overview-hero>p{color:#b7c7cf;font-size:.64rem;letter-spacing:.55em;white-space:nowrap}.eyebrow{color:#82dcff!important;letter-spacing:.22em}
.panel,.metric,.entity-card,.battle-card,.garage-search-bar{border:1px solid var(--cuh-line)!important;background:linear-gradient(135deg,rgba(10,24,34,.86),rgba(3,11,17,.74))!important;box-shadow:inset 0 1px rgba(255,255,255,.035),0 14px 34px rgba(0,0,0,.22);backdrop-filter:blur(9px)}
.metric{min-height:128px;border-radius:3px}.metric>span,.metric div>span{color:#b8c6ce;letter-spacing:.08em}.metric strong{color:#f3f8fb;text-shadow:0 0 18px rgba(130,220,255,.18)}.metric.feature{background:linear-gradient(135deg,rgba(11,28,39,.92),rgba(4,13,20,.74))!important}.speed-ring{border-color:#69cef7!important;box-shadow:0 0 20px rgba(73,189,244,.14)}
.panel-head{border-bottom:1px solid rgba(130,220,255,.2)}.panel-head h2,.section-intro h2,.panel h3{color:#f0f6f9;text-shadow:0 2px 0 rgba(77,94,104,.65);letter-spacing:.04em}.dashboard-grid{gap:16px}.dashboard-grid:first-of-type{grid-template-columns:minmax(0,1.55fr) minmax(320px,.78fr)}
table th{color:#a8c4d2;border-bottom-color:rgba(130,220,255,.24)}table td{border-bottom-color:rgba(130,220,255,.1)}tbody tr:hover{background:rgba(130,220,255,.055)}
button.primary,.fixed-position,.battle-format-badge{border-color:#a9edff!important;background:linear-gradient(180deg,#c4f1fa,#8fd9e8)!important;color:#061016!important;box-shadow:0 0 22px rgba(130,220,255,.23);font-weight:800}button.primary:hover{filter:brightness(1.08);box-shadow:0 0 30px rgba(130,220,255,.36)}
input,select,textarea{border-color:rgba(130,220,255,.24)!important;background:rgba(3,10,15,.8)!important;color:#eef8fc!important}input:focus,select:focus,textarea:focus{border-color:#82dcff!important;box-shadow:0 0 0 2px rgba(130,220,255,.09)}
.library-count{background:#b0e0e6!important;color:#061016!important}.status-dot{background:#48efb1!important;box-shadow:0 0 12px #48efb1}.cloud-login{background:rgba(1,5,8,.82)}.cloud-login-card{border-color:var(--cuh-line);background:linear-gradient(145deg,rgba(10,24,34,.96),rgba(3,10,15,.96));box-shadow:0 0 65px rgba(70,178,230,.14)}
.discord-activity .overview-hero h1{font-size:clamp(2.6rem,5vw,4.8rem)}
@media(max-width:900px){.overview-hero{align-items:start;flex-direction:column}.overview-hero>p{white-space:normal}.dashboard-grid:first-of-type{grid-template-columns:1fr}}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.nav-item svg,.top-cloud svg,.race-footer svg,.metric-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item{display:grid!important;grid-template-columns:22px 25px 1fr;align-items:center;gap:9px;text-align:left}.nav-item>span{font-size:.52rem!important}.nav-item svg{width:22px;height:22px;color:#83dafa}.nav-item.active svg{filter:drop-shadow(0 0 6px rgba(130,220,255,.7))}
.topbar{justify-content:space-between!important}.top-cloud{display:flex;align-items:center;gap:9px;margin-right:auto;color:#85dcfa;font:700 .65rem 'Inter',sans-serif;letter-spacing:.13em;text-transform:uppercase}.top-cloud svg{width:22px;height:22px}.top-cloud b,.live-feed b,.race-footer b{width:8px;height:8px;border-radius:50%;background:#48efb1;box-shadow:0 0 10px #48efb1}
.metric{display:flex!important;align-items:center;gap:18px}.metric>div:not(.speed-ring){display:grid;min-width:0}.metric-icon{flex:0 0 48px;width:48px;height:48px;color:#8bdfff;filter:drop-shadow(0 0 8px rgba(130,220,255,.32))}.metric:not(.feature) strong{line-height:1.05}.metric.feature .metric-icon{flex-basis:44px;width:44px;height:44px}.metric.feature .speed-ring{margin-left:auto}
.live-feed{display:flex;align-items:center;gap:8px;color:#b5c9d3;font-size:.68rem}.live-feed b{display:block;width:7px;height:7px}
.race-footer{position:fixed;z-index:50;right:0;bottom:0;left:var(--sidebar-width,220px);display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:42px;padding:0 28px;border-top:1px solid rgba(130,220,255,.22);background:rgba(2,8,12,.91);backdrop-filter:blur(10px);color:#aebec7;font-size:.56rem;letter-spacing:.26em}.race-footer span{display:flex;align-items:center;gap:8px}.race-footer svg{width:19px;height:19px;color:#82dcff}.race-footer strong{color:#d0d9de;font-weight:500;letter-spacing:.4em}main{padding-bottom:42px}
.activity-list>div{position:relative;padding-left:48px!important}.activity-list>div::before{content:"";position:absolute;left:17px;top:50%;width:21px;height:21px;transform:translateY(-50%);background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382dcff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v5l3 2M9 2h6'/%3E%3C/svg%3E");filter:drop-shadow(0 0 5px rgba(130,220,255,.45))}
@media(max-width:750px){.top-cloud{display:none}.race-footer{display:none}main{padding-bottom:0}.nav-item{display:flex!important}.nav-item svg{width:20px;height:20px}.nav-item>span{display:none!important}.brand-emblem{width:56px;height:62px;background-size:155px auto}}
@media(max-width:750px){.app-shell::before{left:0;bottom:68px;background-size:contain;background-position:center top}}
.battle-crew-filter{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px;padding:16px 20px}.battle-crew-filter label{display:grid;gap:7px;min-width:300px;color:#9eb1bc;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.battle-crew-filter small{color:var(--muted)}

/* Full-screen CUH presentation */
.app-shell::before{inset:0;background:linear-gradient(90deg,rgba(1,6,10,.76),rgba(2,8,13,.43) 46%,rgba(1,6,10,.7)),linear-gradient(180deg,rgba(1,5,8,.12),rgba(1,5,8,.58)),url('cuh-background.jpg') center center/cover no-repeat}
.sidebar{padding:14px 0 12px;background:linear-gradient(180deg,rgba(2,9,15,.9),rgba(2,9,15,.82));backdrop-filter:blur(12px)}
.brand{margin:0 0 10px;padding:0 8px 12px;border-bottom:1px solid rgba(130,220,255,.2)}
.brand-emblem{width:min(190px,100%);height:270px;background-image:url('cuh-background.jpg');background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 0 15px rgba(60,174,255,.48))}
.brand>div{display:none}
.sidebar nav{padding:0 10px}
.side-foot{margin-inline:10px}
@media(max-width:750px){.app-shell::before{inset:0 0 68px;background-position:center;background-size:cover}.sidebar{padding:8px}.brand{display:none}.sidebar nav{padding:0}}

/* Discord Activity: keep one clean scrolling surface and avoid fixed UI collisions. */
html.discord-activity{height:100%;overflow:hidden}
html.discord-activity body{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
html.discord-activity .app-shell{height:auto;min-height:100%}
html.discord-activity .sidebar{height:100vh;min-height:100vh;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
html.discord-activity .sidebar nav{padding-bottom:18px}
html.discord-activity .side-foot,html.discord-activity .race-footer{display:none}
html.discord-activity main{min-width:0;padding-bottom:72px;overflow:visible}
html.discord-activity #toast{bottom:18px}

/* Shared web + Activity footer cleanup. Cloud state remains in the top bar. */
.race-footer,.side-foot{display:none!important}
.sidebar nav{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
main{padding-bottom:72px}