/* Driver center follows the broadcast palette: translucent graphite, cyan and orange. */
.account-center { min-width: 0; }
.account-center .page-header { align-items: center; }
.account-center .page-header-actions { gap: 8px; }
.account-driver-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: 'identity' 'actions' 'footer'; gap: 20px 24px; padding: clamp(22px,3vw,36px); overflow: hidden; border: 1px solid rgba(185,204,223,.2); border-radius: 8px; background: linear-gradient(90deg,rgba(6,13,19,.95),rgba(8,17,25,.73) 54%,rgba(7,16,24,.46)),var(--driver-profile-image,url('/assets/racing-track-night.png')) center 54% / cover; box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.account-driver-hero::after { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(var(--cyan),rgba(73,213,239,0)); }
.account-driver-identity { grid-area: identity; display: flex; align-items: center; gap: 24px; min-width: 0; }
.account-driver-hero .identity-avatar { width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(234,245,255,.5); box-shadow: 0 5px 30px rgba(0,0,0,.35); font-size: 28px; }
.account-driver-identity .driver-identity-visual { flex-shrink: 0; }
.account-driver-name { min-width: 0; }
.account-driver-title { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.account-nickname { min-width: 0; max-width: 100%; }
.account-nickname-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.account-nickname-row h2 { min-width: 0; }
.account-nickname-pen { flex: 0 0 30px; display: grid; place-items: center; width: 30px; min-height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #a8bdcb; cursor: pointer; }
.account-nickname-pen:hover { color: var(--cyan); background: rgba(87,190,210,.09); }
.account-nickname-pen:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.account-nickname-input { width: 100%; max-width: 18em; min-width: 0; padding: 1px 6px 3px; border: 1px solid rgba(112,217,230,.66); border-radius: 4px; background: rgba(5,18,26,.72); color: #f0f7fb; font-family: inherit; font-size: clamp(26px,3vw,40px); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; outline: none; }
.account-nickname-input:focus { box-shadow: 0 0 0 2px rgba(66,211,228,.12); }
.account-nickname-input[aria-invalid="true"] { border-color: #ff9d97; }
.account-nickname-error, .account-nickname-status { display: block; margin-top: 7px; max-width: 32em; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.account-nickname-error { color: #ffb1ae; font-weight: 600; }
.account-nickname-status { color: #a6c1d1; }
.account-nickname [hidden] { display: none; }
.account-signature { min-width:0; max-width:100%; margin-top:10px; color:#afc2ce; }
.account-signature-row { display:flex; align-items:center; gap:5px; min-width:0; }
.account-signature-row > span { min-width:0; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.account-signature-row > span.is-empty { color:#8299a8; }
.account-signature-pen { flex-basis:25px; width:25px; min-height:28px; }
.account-signature-input { width:100%; max-width:42em; min-width:0; padding:5px 7px; border:1px solid rgba(112,217,230,.66); border-radius:4px; background:rgba(5,18,26,.72); color:#f0f7fb; font:inherit; font-size:12px; line-height:1.6; outline:none; }
.account-signature-input:focus { box-shadow:0 0 0 2px rgba(66,211,228,.12); }
.account-signature-input[aria-invalid="true"] { border-color:#ff9d97; }
.account-signature [hidden] { display:none; }
.account-driver-title .driver-level-badge { height:19px; min-width:36px; padding:0 6px; font-size:11px; }
.account-driver-grade { display:block; margin-top:7px; color:#d4c29a; font-size:13px; letter-spacing:.12em; }
.account-experience { min-width:0; }
.account-experience-track { height:4px; overflow:hidden; background:rgba(139,182,205,.13); border-radius:3px; margin-top:4px; }
.account-experience-track > span { display:block; height:100%; background:linear-gradient(90deg,#43a7b8,#75d8e2); }
.account-experience > small { color:#8ca6b5; font-size:11px; line-height:1.6; }
.account-experience-rules { border-top:1px solid rgba(176,206,224,.1); margin-top:20px; padding-top:12px; color:#839aa9; font-size:11px; line-height:1.75; }
.account-experience-rules p { margin:3px 0; }
.account-section-eyebrow { margin: 0 0 9px; color: #8ca4b5; letter-spacing: .16em; font-size: 10px; line-height: 1.4; font-weight: 750; }
.account-driver-name h2 { margin: 0; font-size: clamp(26px,3vw,40px); letter-spacing: -.025em; overflow-wrap: anywhere; line-height: 1.25; }
.account-driver-name > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 0; color: #a7bac9; font-size: 13px; overflow-wrap: anywhere; }
.account-role-tag { padding: 4px 9px; border: 1px solid rgba(192,219,233,.18); border-radius: 4px; background: rgba(131,175,196,.06); font-size: 11px; color: #d3e0e8; }
.account-identity-actions { grid-area: actions; display: flex; gap: 8px; flex-wrap: wrap; align-self: center; justify-content: flex-end; }
.account-driver-footer { grid-area: footer; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,394px); align-items: end; gap: 24px; border-top: 1px solid rgba(194,218,231,.16); padding-top: 20px; min-width: 0; }
.account-driver-progress { min-width: 0; }
.account-profile-summary { display: grid; grid-template-columns: minmax(0,1.75fr) repeat(2,minmax(0,1fr)); gap: clamp(12px,2.5vw,36px); }
.account-profile-summary > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.account-profile-summary > div > span { color: #94aaba; font-size: 12px; }
.account-profile-summary strong { font-size: 24px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.account-profile-summary strong small { font-size: 11px; color: #a3b9c8; font-weight: 500; }
.account-panel { min-width: 0; margin-top: 20px; padding: clamp(20px,2.3vw,28px); border: 1px solid rgba(171,200,217,.16); border-radius: 8px; background: linear-gradient(125deg,rgba(17,30,39,.83),rgba(10,21,30,.76)); backdrop-filter: blur(14px); box-shadow: 0 8px 28px rgba(0,0,0,.13); }
.account-panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; }
.account-panel-heading > div { min-width: 0; }
.account-panel-heading .account-section-eyebrow { margin-bottom: 6px; }
.account-panel-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; font-weight: 800; }
.account-panel-heading > div > p:last-child { margin: 8px 0 0; color: #99adbc; font-size: 13px; line-height: 1.6; }
.account-section-count { display: inline-flex; justify-content: center; align-items: center; min-width: 30px; padding: 4px 7px; border: 1px solid rgba(144,194,216,.18); border-radius: 3px; background: rgba(76,161,197,.07); color: #a1bbc8; font-size: 11px; font-weight: 650; }
.account-game-bindings { align-self: end; justify-self: end; width: 100%; min-width: 0; max-width: 394px; padding: 11px 12px 12px; border: 1px solid rgba(176,212,229,.24); border-radius: 7px; background: linear-gradient(135deg,rgba(36,58,71,.43),rgba(10,23,33,.35)); backdrop-filter: blur(14px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.account-game-bindings-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; min-width: 0; }
.account-game-bindings-heading h3 { margin: 0; color: #d4e6f1; font-size: 12px; font-weight: 650; line-height: 1.45; }
.account-game-bindings-heading h3 small { margin-left: 7px; color: #8cabbc; font-size: 10px; font-weight: 500; white-space: nowrap; }
.account-game-bindings .account-game-add { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 4px; padding: 5px 8px; min-height: 28px; border-color: rgba(151,200,224,.16); background: rgba(47,104,126,.12); font-size: 11px; line-height: 1.3; }
.account-game-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; min-width: 0; }
.account-game-tile { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid rgba(155,199,224,.26); border-radius: 5px; background: linear-gradient(125deg,rgba(37,83,102,.48),rgba(18,43,60,.27)); color: #e0f0f7; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .16s,border-color .16s; }
.account-game-tile span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-game-tile:hover { border-color: rgba(111,219,231,.6); background: rgba(46,105,130,.42); }
.account-game-tile:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.account-game-empty { margin: 0; color: #a0b6c5; font-size: 11px; line-height: 1.7; }
.account-race-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 14px; }
.account-race-card { position: relative; min-width: 0; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:18px; align-content:start; padding: 20px; border: 1px solid rgba(163,201,220,.2); border-radius: 5px; background: linear-gradient(110deg,rgba(11,23,31,.94),rgba(12,25,35,.67)),var(--account-race-image,url('/assets/racing-track-night.png')) center / cover; }
.account-race-card-top { grid-column:1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-race-card-top > span:first-child { font-size: 12px; color: #9cb6c6; overflow-wrap: anywhere; }
.account-race-card h3 { grid-column:1; margin: 17px 0 12px; font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
.account-race-card > p { grid-column:1; min-width:0; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; color: #89a4b7; font-size: 12px; margin: 0 0 20px; }
.account-race-card > p strong { color: #c6dce8; font-weight: 550; overflow-wrap: anywhere; }
.account-race-card > .btn { grid-column:1; min-width:0; width:100%; max-width:164px; justify-content:space-between; gap:8px; white-space:normal; }
.account-race-card > .btn > span { flex-shrink:0; }
.account-race-start { grid-column:2; grid-row:2 / span 3; align-self:center; justify-self:end; display:grid; justify-items:end; gap:6px; text-align:right; font-size:12px; line-height:1.6; }
.account-race-start > span { color:#89a4b7; }
.account-race-start time,.account-race-start strong { color:#c6dce8; font-weight:550; white-space:nowrap; }
.account-empty-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 21px; border: 1px dashed rgba(158,194,211,.2); border-radius: 5px; background: rgba(10,22,31,.24); }
.account-empty-symbol { display: grid; place-items: center; width: 50px; height: 50px; color: #89b6ca; background: rgba(117,182,206,.06); border-radius: 50%; flex-shrink: 0; }
.account-empty-inline > div { flex: 1; min-width: 200px; }
.account-empty-inline h3 { margin: 0 0 8px; font-size: 16px; }
.account-empty-inline p { margin: 0; font-size: 13px; line-height: 1.65; color: #91a9b9; }
.account-center .btn { border-radius: 5px; }
.account-center .auth-card { border-radius: 8px; padding: clamp(24px,4vw,38px); background: linear-gradient(145deg,rgba(24,43,54,.83),rgba(9,19,28,.88)); backdrop-filter: blur(14px); }
.account-auth-layout { min-height: 0; padding: 12px 0 30px; }
.account-auth-layout form > .page-subtitle { margin-bottom: 24px; }
.account-auth-layout .account-login-methods { margin: 0 0 25px; background: rgba(5,15,23,.5); }
.account-login-methods[hidden], .account-auth-layout form[hidden] { display: none; }
.account-email-fields { min-width: 0; }
.account-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; margin-top: 18px; }
.account-code-row .field { margin: 0; min-width: 0; }
.account-code-row .btn { height: 46px; margin-top: 28px; padding-inline: 14px; white-space: nowrap; }
.field .account-field-error, .account-form-error { display: block; color: #ffb1ae; font-size: 12px; font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; }
.field .account-field-error { margin-top: 7px; }
.account-form-error { margin: 0 0 18px; padding: 10px 12px; border-left: 2px solid #ff8d87; background: rgba(190,67,61,.1); }
.field .account-field-error[hidden], .account-form-error[hidden] { display: none; }
.input[aria-invalid="true"] { border-color: #ed8f88; box-shadow: 0 0 0 1px rgba(237,143,136,.18); }
.account-email-status { min-height: 20px; margin: 12px 0 0; color: #9eb8c8; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.account-verified-email { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 14px 16px; border: 1px solid rgba(132,195,217,.2); border-radius: 5px; background: rgba(63,159,192,.06); }
.account-verified-email > span { color: #96afc0; font-size: 12px; }
.account-verified-email > strong { min-width: 0; color: #d7edf6; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#register-form > .field + .field, #email-bind-form > .field { margin-top: 20px; }
#register-form > .account-email-fields { margin-top: 20px; }
#email-rebind-current-form > .account-email-fields, #email-rebind-new-form > .account-email-fields { margin-top: 20px; }
#email-rebind-current-form[hidden], #email-rebind-new-form[hidden] { display: none; }
.account-login-panel .account-dialog-note { margin-bottom: 0; }
.account-bootstrap-panel { max-width: 760px; }
.account-avatar-dialog { min-width: 0; }
.account-crop-editor { width: min(100%,340px); margin-inline: auto; }
.account-crop-stage { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid rgba(145,192,214,.33); border-radius: 5px; overflow: hidden; background: #09141e; }
.account-crop-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.account-crop-stage canvas.has-image { cursor: grab; }
.account-crop-stage canvas.is-dragging { cursor: grabbing; }
.account-crop-guides { pointer-events: none; position: absolute; inset: 0; border: 1px solid rgba(244,252,255,.8); border-radius: 50%; box-shadow: 0 0 0 100px rgba(0,0,0,.34); }
.account-crop-placeholder { pointer-events: none; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ccdee9; font-size: 17px; line-height: 1.6; background: rgba(9,20,30,.98); }
.account-crop-placeholder small { font-size: 12px; color: #86a5b7; }
.account-crop-placeholder[hidden] { display: none; }
.account-crop-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 14px; margin-bottom: 12px; }
.account-crop-controls input[type="hidden"] { display: none; }
.account-crop-controls output { color: #52e1e7; font-variant-numeric: tabular-nums; }
.account-dialog-note { margin: 18px 0 16px; color: #8ba9bc; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.account-avatar-dialog-actions { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.account-avatar-dialog .modal-actions { border-top: 1px solid rgba(162,203,222,.14); padding-top: 18px; }
#password-form .field + .field, #game-account-form .field + .field { margin-top: 20px; }
#game-account-form .account-unbind { margin-right: auto; }

@media (min-width: 1050px) {
  .account-center { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 20px; }
  .account-center > .page-header, .account-center > .account-driver-hero, .account-center > .account-auth-layout, .account-center > .account-bootstrap-panel, .account-center > .account-login-panel { grid-column: 1/-1; }
  .account-center > .page-header { margin-bottom: 4px; }
  .account-center > .account-panel, .account-center > .owned-committees-section { margin-top: 0; }
}

@media (max-width: 920px) {
  .account-driver-hero { gap: 22px 16px; }
  .account-driver-footer { grid-template-columns: minmax(0,1fr); }
  .account-driver-identity { gap: 18px; }
}
@media (max-width: 620px) {
  .account-center .page-header { align-items: flex-start; }
  .account-center .page-header-actions .btn { min-height: 37px; padding-inline: 10px; font-size: 12px; }
  .account-driver-hero { grid-template-columns: 1fr; padding: 22px 20px; gap: 20px; }
  .account-driver-identity { gap: 16px; align-items: flex-start; }
  .account-driver-hero .identity-avatar { width: 66px; height: 66px; font-size: 23px; }
  .account-driver-name h2 { font-size: 27px; }
  .account-nickname-input { font-size: 27px; }
  .account-driver-name > p:last-child { margin-top: 9px; gap: 8px; font-size: 12px; }
  .account-driver-name .account-section-eyebrow { font-size: 9px; letter-spacing: .1em; }
  .account-identity-actions { flex-direction: row; justify-content: flex-start; }
  .account-identity-actions .btn { flex: 1 1 calc(50% - 8px); }
  .account-driver-footer { gap: 18px; padding-top: 17px; }
  .account-profile-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
  .account-profile-summary .account-experience { grid-column: 1/-1; }
  .account-profile-summary strong { font-size: 23px; }
  .account-profile-summary > div > span { font-size: 11px; }
  .account-panel { padding: 20px 18px; margin-top: 16px; }
  .account-panel-heading { gap: 14px; margin-bottom: 16px; }
  .account-panel-heading h2 { font-size: 19px; }
  .account-race-grid { grid-template-columns: 1fr; }
  .account-game-bindings { padding: 9px 10px 10px; }
  .account-game-bindings .account-game-add { min-height: 34px; }
  .account-game-tile { height: 44px; padding-inline: 7px; font-size: 11px; }
  .account-race-card { padding:19px; column-gap:12px; }
  .account-race-start { font-size:11px; }
  .account-race-card > .btn { padding-inline:10px; font-size:11px; }
  .account-race-card h3 { font-size: 22px; }
  .account-empty-inline { padding: 18px; gap: 14px; }
  .account-empty-symbol { width: 40px; height: 40px; }
  .account-empty-inline > div { min-width: min(200px,100%); }
  .account-empty-inline > .btn { width: 100%; }
  .account-crop-editor { width: min(100%,300px); }
  .account-code-row { gap: 8px; }
  .account-code-row .btn { padding-inline: 10px; font-size: 12px; }
}