/* Shared visual language for the game screens. */
:root{font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI','Apple Color Emoji','Segoe UI Emoji',sans-serif;--bg:#f2f2f0;--surface:#fff;--soft:#f0f1ef;--text:#20231f;--muted:#676d68;--line:#dedfdb;--accent:#bf2335;--accent-text:#a21a2d;--shadow:none}
:root[data-theme=dark]{--bg:#141414;--surface:#202020;--soft:#2b2b2b;--text:#f2f2f2;--muted:#b3b3b3;--line:#3d3d3d;--accent:#bf2335;--accent-text:#ff7e89;--shadow:none}
body{font-size:15px;line-height:1.45}
.sidebar{width:220px;padding:28px 16px;border:0;overflow-y:auto}
.brand{padding:0 8px 30px;gap:10px;font-size:20px;font-weight:750}
.brand-icon{width:36px;height:36px;border-radius:5px;font-size:21px}
.sidebar nav{gap:3px}
.navitem{border-radius:4px;padding:11px 12px;font-weight:600}
.navitem.active{background:var(--soft);color:var(--accent-text)}
.sidebar-foot{font-size:13px}
main{width:min(1160px,100%);padding:32px 42px 72px}
header{margin-bottom:26px}
h1,h2,h3{letter-spacing:0}
h1{font-size:28px;font-weight:700}
h2{font-size:19px;font-weight:700}
h3{font-size:15px;font-weight:700}
.eyebrow,.label,.task-label,.profile-kicker,.platinum-label,.platinum-status,.achievement-status,.achievement-count small,.race-overline,.race-live,.race-person-copy span,.race-track-caption,.result-place,.result-reward>span{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.theme,.avatar{width:40px;height:40px;border:0;border-radius:4px}
.hero{min-height:190px;padding:28px;background:var(--surface);color:var(--text);border-radius:5px}
.hero:after{display:none}
.hero h2{margin:7px 0;font-size:28px;letter-spacing:0}
.hero p{color:var(--muted);line-height:1.5}
.hero-icon{font-size:80px;transform:none;filter:none;margin-right:7%}
.button{border-radius:4px;padding:11px 16px;color:#fff;font-weight:700}
.button.secondary{background:var(--soft)}
.button.small{font-size:13px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #c32a3d;outline-offset:2px}
.stat,.card,.rows,.level-card,.profile-card,.achievement-item{border:0;border-radius:5px;box-shadow:none}
.stat,.card{padding:20px}
.stats{gap:10px;margin-top:12px}
.stat strong{font-size:20px}
.grid,.forms{gap:10px}
.car-icon,.profile-detail-icon,.achievement-icon,.level-badge,.platinum-icon{border:0;border-radius:4px}
.badge{border-radius:3px;font-size:12px;font-weight:600;background:#f9e4e7;color:#9e172a}
:root[data-theme=dark] .badge{background:#4a252a;color:#ffd4da}
.muted,.details,.form label,.feature-note,.achievement-note,.achievement-copy p,.achievement-progress small,.profile-stat-rows span,.profile-stat-rows strong,.profile-subtitle,.profile-since,.profile-stats span,.profile-result-name small,.level-copy small,.level-title span,.feature-line,.race-progression,.race-progression span,.race-progression p,.race-progression ul,.race-extras{font-size:13px}
.form input,.form select,.form textarea,.profile-search-form input,.dealership-filters input,.dealership-filters select,.clan-search-form input{border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{border-color:#c32a3d}
.notice{border-radius:4px}
.rows{background:var(--surface)}
.row{border-bottom:1px solid var(--line)}
.level-card{background:var(--surface)}
.level-badge{width:46px;height:46px;color:#fff;font-size:20px}
.brand-icon,.avatar,.profile-avatar.large{color:#fff}
.achievement-xp{color:var(--accent-text)}
.progress-track,.feature-bar{border-radius:2px}
.achievement-tabs{gap:6px}
.achievement-tab{border:0;border-radius:4px;background:var(--surface);font-weight:600}
.achievement-tab.active{background:var(--text);color:var(--surface)}
.achievement-list{gap:6px}
.achievement-item{background:var(--surface)}
.achievement-item.is-unlocked .achievement-icon{background:#f9e4e7}
:root[data-theme=dark] .achievement-item.is-unlocked .achievement-icon{background:#4a252a}
.achievement-status,.achievement-xp small{font-size:12px}
.platinum-card{border:0;border-radius:5px;background:#343b42;color:#fff}
.platinum-icon{background:#ffffff16}
.platinum-label,.platinum-copy p{color:#e0e4e8}
.platinum-status{border-radius:3px;font-size:12px}
.platinum-card.unlocked .platinum-status{background:var(--accent);color:#fff}
.profile-banner{min-height:0;background:var(--surface);color:var(--text)}
.profile-kicker,.profile-subtitle,.profile-since{color:var(--muted)}
.profile-avatar,.profile-avatar.large,.profile-avatar.small{border:0;border-radius:5px}
.profile-back{border:0;border-radius:4px;background:var(--soft);color:var(--text);font-size:13px}
.profile-vip{border-radius:3px;background:var(--accent);color:#fff;font-size:12px}
.profile-clan-link:hover{color:var(--text)}
.profile-stat-rows>div{border-color:var(--line)}
.ranking-own{border-radius:4px}
.race-panel{border:0;border-radius:6px;box-shadow:0 12px 50px #0004}
.race-person{border:0;border-radius:4px;background:var(--soft)}
.race-person-copy span,.race-person-copy small{font-size:12px;letter-spacing:0}
.race-live,.race-count,.racer-avatar,.result-person .racer-avatar,.result-reward,.race-progression,.race-extras{border-radius:4px}
.result-reward{border:0;background:var(--soft)}
.race-track-caption,.result-reward>span,.result-place{font-size:12px;letter-spacing:0}
.race-track{border-radius:5px}
@media(max-width:950px){.sidebar{width:195px}main{padding:28px}}
@media(max-width:650px){
  main{padding:20px 16px 105px}
  header{margin-bottom:18px}
  h1{font-size:25px}
  .hero{min-height:175px;padding:20px}
  .hero h2{font-size:24px}
  .hero p{font-size:13px}
  .hero-icon{font-size:55px;margin:0}
  .stat,.card{padding:16px}
  .stat strong{font-size:18px}
  .mobile-nav{border-top:1px solid var(--line)}
  .mobile-nav .navitem{min-width:69px;border-radius:3px;font-size:11px}
  .mobile-nav .navitem span{font-size:17px}
  .level-badge{width:42px;height:42px;border-radius:4px}
  .level-card-compact .level-copy{flex:1 1 calc(100% - 56px)}
  .level-card-compact .level-link{margin-left:53px}
  .platinum-icon,.achievement-icon{border-radius:4px}
  .race-panel{border-radius:6px}
  .race-person .racer-avatar{border-radius:4px}
}