:root{font-family:Arial,Helvetica,sans-serif;color-scheme:dark;background:#081421;color:#e8eff5;font-size:15px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#172940,#07121e 72%)}.top-bar{padding:17px max(22px,calc((100vw - 1120px)/2));display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #314259;background:#0a1627}.brand{font-size:23px;letter-spacing:1.3px;font-weight:900}.brand span{color:#ffa334}.brand small{font-size:10px;letter-spacing:2.1px;margin-left:14px;color:#c2d2df}.top-right{display:flex;align-items:center;gap:14px}#accountStatus{font-size:11px;letter-spacing:1px;color:#98a8ba}.container{max-width:1120px;margin:0 auto;padding:24px 20px 50px}.page-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.page-title h1{font-size:28px;margin:4px 0}.muted{color:#96aabd;line-height:1.5}.page-title p{margin:7px 0}.pill{border-radius:6px;padding:8px 12px;border:1px solid #b67837;color:#ffbb73;font-weight:700;font-size:11px;white-space:nowrap}.panel{border:1px solid #33455a;background:rgba(17,34,51,.96);padding:24px;border-radius:13px;margin:0 0 18px;box-shadow:0 10px 35px #0003}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:19px}.section-heading h2{font-size:17px;margin:0}.section-hint{font-size:12px;color:#8ea7bf}.event-row{display:flex;align-items:end;gap:12px}.event-row.second-row{margin-top:13px}.field{display:flex;flex-direction:column;gap:8px}.grow{flex:1;min-width:0}label{font-size:12px;font-weight:700;letter-spacing:.2px;color:#dce8f3}input,select{background:#0a1725;border:1px solid #456078;border-radius:7px;padding:12px;color:#fff;font-size:16px;outline:0;width:100%;min-height:44px}input:focus,select:focus{border-color:#ffac47;box-shadow:0 0 0 2px #ffac4725}input:disabled{opacity:.5}.button{border-radius:7px;cursor:pointer;padding:12px 15px;font-size:13px;font-weight:800;min-height:44px;border:1px solid #567087;color:#e9f1f7;background:#23374d}.button:disabled{opacity:.36;cursor:default}.button-main{background:#ffad43;border-color:#ffad43;color:#131a25}.button-main:hover:not(:disabled){background:#ffc576}.button-ghost:hover:not(:disabled){background:#33516c}.button-danger{border-color:#ad4848;color:#ffbbbb;background:#3c1a26}.button-danger:hover:not(:disabled){background:#5b2a31}.event-info{border:1px solid #2d4860;background:#0a1929;border-radius:8px;margin-top:16px;padding:12px;color:#9cb5cd;font-size:13px;line-height:1.5}.event-info strong{color:#f2f6fa}.driver-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.driver-card{border:1px solid #3a5068;background:#0c1c2e;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}.driver-card input{font-size:21px;font-weight:800}.driver-summary{min-height:38px;line-height:1.55;font-size:13px;color:#b6c9db}.driver-summary b{color:white}.driver-summary .error{color:#ffacb1}.row-tools,.publish-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:15px}.mode-row{display:flex;gap:12px}.radio-box{display:flex;align-items:center;gap:8px;background:#0b1929;border:1px solid #334f67;border-radius:7px;padding:12px 15px;cursor:pointer}.radio-box input{min-height:unset;width:auto;accent-color:#ffaa42}.winner-field{max-width:330px;margin-top:15px}.preview-heading{display:flex;justify-content:space-between;gap:20px;margin-top:20px;margin-bottom:9px;font-size:12px;color:#ffa338}.preview-heading span{color:#8aa2b7}.preview-box{aspect-ratio:16/9;position:relative;border:1px solid #3f5269;border-radius:9px;background:
  linear-gradient(
    rgba(5, 15, 25, 0.30),
    rgba(5, 15, 25, 0.50)
  ),
  url('/preview-background.jpg') center center / cover no-repeat,
  #0a1421;overflow:hidden}.preview-box iframe{width:100%;height:100%;border:0;display:block;background:transparent}.publish-row .button-main{flex:2}.publish-row .button-danger{flex:1}.feedback{font-size:13px;min-height:18px;color:#8fe2b4;padding-top:9px}.feedback.error{color:#ff9b9b}.published-state{font-size:12px;color:#aac2d7;padding-top:7px}footer{text-align:center;font-size:12px;color:#6f8294;margin-top:25px}.hidden{display:none!important}.login-wrap{min-height:calc(100vh - 85px);display:flex;align-items:center;justify-content:center;padding:30px 16px}.login-panel{width:100%;max-width:390px;display:flex;flex-direction:column;gap:14px}.login-panel h1{margin:0}.login-panel p{margin:0 0 6px}.alert{padding:18px;margin:20px 0;border-radius:8px}.alert-error{background:#51212c;color:#ffd4d4}
@media(max-width:750px){.brand small{display:block;margin:5px 0 0}.top-bar{padding:15px}.page-title h1{font-size:23px}.panel{padding:18px}.event-row{flex-wrap:wrap}.button-field .button{width:100%}.driver-grid{grid-template-columns:1fr}.section-heading,.preview-heading{align-items:start;flex-direction:column;gap:5px}.mode-row{flex-wrap:wrap}.page-title{align-items:start}.event-row.second-row .grow{flex-basis:100%}}
/* Winner selection buttons */

.winner-field {
  max-width: none;
  width: 100%;
}

.winner-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2px;
}

.winner-choice {
  min-width: 0;
  min-height: 80px;
  border: 1px solid #405a73;
  border-radius: 9px;
  background: #0c1c2e;
  color: #eaf1f8;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  transition: border-color .15s, background .15s;
}

.winner-choice:hover:not(:disabled) {
  border-color: #ffad43;
  background: #1d3044;
}

.winner-choice:focus-visible {
  outline: 2px solid #ffad43;
  outline-offset: 3px;
}

.winner-choice:disabled {
  opacity: .55;
  cursor: default;
}

.winner-choice.is-selected {
  background: #36291f;
  border-color: #ffad43;
  box-shadow: inset 0 0 0 1px #ffad43;
}

.winner-side {
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: #a8bdd0;
}

.winner-choice.is-selected .winner-side {
  color: #ffbd68;
}

.winner-driver {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.winner-help {
  font-size: 12px;
  color: #90acc4;
  line-height: 1.5;
}

@media (max-width: 650px) {
  .winner-actions {
    grid-template-columns: 1fr;
  }
}

/* RallyX Graphics — Operator UI improvements */

.container {
  max-width: 1240px;
}

.page-title {
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.page-title > div:first-child {
  flex: 1 1 420px;
}

.page-title h1 {
  font-size: clamp(23px, 2.3vw, 32px);
}

.page-title .muted {
  max-width: 670px;
  font-size: 13px;
}

/* Published screen status */

.published-state {
  margin-left: auto;
  padding: 13px 18px;
  border: 1px solid #486078;
  border-radius: 10px;
  background: #102338;
  color: #c8d8e8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.published-state.is-on-air {
  background: #123529;
  border-color: #287e5a;
  color: #a7f0c5;
}

/* Cleaner panels */

.panel {
  border-radius: 14px;
}

.section-heading h2 {
  font-size: 18px;
}

.driver-card {
  border-radius: 12px;
  transition: border-color .15s ease;
}

.driver-card:focus-within {
  border-color: #ffad43;
}

.driver-card input {
  font-size: 23px;
  letter-spacing: .03em;
}

/* Display mode selection */

.mode-row {
  gap: 12px;
  flex-wrap: wrap;
}

.radio-box {
  min-height: 48px;
  transition: border-color .15s ease;
}

.radio-box:has(input:checked) {
  border-color: #ffad43;
  background: #30271e;
}

/* Preview area */

.preview-heading {
  margin-top: 24px;
}

.preview-box {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Main operator actions */

.publish-row {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.publish-row .button {
  width: 100%;
  min-height: 54px;
  font-size: 13px;
}

#publishButton {
  font-size: 15px;
  font-weight: 900;
}

#newBattleButton {
  background: #173d59;
  border-color: #39769d;
  color: #e7f4ff;
}

#newBattleButton:hover:not(:disabled) {
  background: #245a7d;
}

#clearButton {
  font-weight: 900;
}

.button:focus-visible {
  outline: 2px solid #ffad43;
  outline-offset: 3px;
}

/* Tablet and mobile */

@media (max-width: 800px) {
  .page-title {
    flex-direction: column;
    align-items: stretch;
  }

  .page-title > div:first-child {
    flex-basis: auto;
  }

  .published-state {
    margin-left: 0;
  }

  .publish-row {
    grid-template-columns: 1fr 1fr;
  }

  #publishButton {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .publish-row {
    grid-template-columns: 1fr;
  }

  #publishButton {
    grid-column: auto;
  }
}

/* Published status below control buttons */

.published-state {
  margin-left: 0;
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 11px;
}

/* Preview publish status */

.draft-publish-state {
  margin-top: 14px;
  border: 1px solid #486078;
  border-radius: 9px;
  background: #102338;
  color: #c8d8e8;
  padding: 12px 15px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.draft-publish-state.is-dirty {
  background: #3a2815;
  border-color: #d9973c;
  color: #ffcc86;
}

.draft-publish-state.is-current {
  background: #123529;
  border-color: #287e5a;
  color: #a7f0c5;
}

/* Publish button states */

#publishButton {
  background: #253a4d;
  border-color: #526b81;
  color: #d2e0ec;
  box-shadow: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

#publishButton:hover:not(:disabled) {
  background: #344e65;
}

#publishButton.is-publish-dirty {
  background: #ffad43;
  border-color: #ffad43;
  color: #131a25;
  box-shadow: 0 0 0 2px #ffad4330;
}

#publishButton.is-publish-dirty:hover:not(:disabled) {
  background: #ffc576;
}