/* v1.82: additive presentation layer; original states and functionality retained. */
:root {
  --ui-accent:#8bafff; --ui-accent-soft:rgba(120,157,255,.12);
  --ui-surface:#101c32; --ui-raised:#16243e; --ui-base:#091223;
  --ui-border:rgba(152,183,237,.17); --ui-ink:#eff5ff; --ui-muted:#a0b1cd;
  --ui-shadow:0 12px 36px rgba(0,0,0,.16); --ui-sidebar:#0b172b;
}
html[data-theme="black"] { --ui-accent:#c4cfff; --ui-accent-soft:rgba(174,186,235,.10); --ui-surface:#101114; --ui-raised:#191b20; --ui-base:#08090b; --ui-border:#2b2e36; --ui-ink:#f2f3f7; --ui-muted:#a2a6b2; --ui-sidebar:#0c0d10; }
html[data-theme="white"] { --ui-accent:#4058c9; --ui-accent-soft:#e9edff; --ui-surface:#fff; --ui-raised:#f3f5fa; --ui-base:#edf0f6; --ui-border:#d8deeb; --ui-ink:#182033; --ui-muted:#5a6375; --ui-shadow:0 8px 30px rgba(40,54,86,.05); --ui-sidebar:#f9faff; }
html { scroll-padding-top:24px; scrollbar-width:thin; scrollbar-color:var(--ui-border) var(--ui-base); }
html body.modern-shell { font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif; font-size:16px; background:var(--ui-base) !important; color:var(--ui-ink); --panel:var(--ui-surface); --panel-2:var(--ui-raised); --text:var(--ui-ink); --muted:var(--ui-muted); --line:var(--ui-border); --radius:18px; }
body.modern-shell *::-webkit-scrollbar { width:9px; height:9px; }
body.modern-shell *::-webkit-scrollbar-track { background:transparent; box-shadow:none; }
body.modern-shell *::-webkit-scrollbar-thumb { background:var(--ui-border); border:2px solid var(--ui-base); box-shadow:none; }
body.modern-shell .app { width:auto; max-width:1800px; margin:0 auto 0 250px; padding:32px 32px 48px !important; }
body.modern-shell .hero { text-align:left; justify-content:space-between; gap:24px; min-height:90px; margin:0 0 26px !important; padding:0 0 23px; border-bottom:1px solid var(--ui-border); }
.modern-shell .title-wrap { width:auto; min-width:0; }
.modern-shell .title-wrap h1 { font-size:clamp(22px,2.2vw,34px); font-weight:650; letter-spacing:-.045em; line-height:1.18; text-shadow:none !important; }
.shell-eyebrow { margin-bottom:8px; color:var(--ui-muted); font-size:12px; font-weight:650; letter-spacing:.19em; }
.shell-profile { display:flex; align-items:center; gap:9px; padding:8px 12px; background:var(--ui-raised); border:1px solid var(--ui-border); border-radius:10px; font-size:14px; }
.shell-profile-mark { width:23px; height:23px; display:grid; place-items:center; background:var(--ui-accent-soft); border-radius:6px; color:var(--ui-accent); }
.modern-shell .hero .top-theme-corner { position:static !important; inset:auto !important; z-index:auto; flex-wrap:wrap; flex-shrink:0; max-width:420px; gap:8px; }
.modern-shell .top-theme-corner .theme-picker { padding:5px 9px; gap:7px; box-shadow:none; background:var(--ui-surface); border-radius:10px; font-size:12px; font-weight:500; }
.modern-shell .top-theme-corner .theme-picker select { min-width:88px; border:0; padding:5px 20px 5px 4px; font-size:14px; border-radius:5px; background-color:transparent; }
.modern-shell #trackerSwitch { position:fixed; left:0; top:0; bottom:0; width:250px; padding:26px 17px 20px; margin:0; border:0; border-right:1px solid var(--ui-border); border-radius:0; background:var(--ui-sidebar); box-shadow:none; z-index:20; overflow-y:auto; }
.shell-brand { display:flex; align-items:center; gap:12px; padding:0 9px 30px; font-size:19px; font-weight:750; letter-spacing:.025em; }
.shell-brand-emblem { width:38px; height:42px; display:grid; place-items:center; border:1px solid var(--ui-border); border-radius:12px 12px 17px 17px; background:var(--ui-accent-soft); color:var(--ui-accent); font-size:15px; letter-spacing:-1px; }
.shell-brand small { display:block; font-size:12px; letter-spacing:.14em; color:var(--ui-muted); margin-top:3px; font-weight:500; }
.shell-nav-label { padding:0 12px; margin:14px 0 12px; font-size:12px; color:var(--ui-muted); letter-spacing:.09em; text-transform:uppercase; }
.modern-shell .tracker-row { flex-direction:column; align-items:stretch; gap:6px; }
.modern-shell .tracker-tab { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid transparent; border-radius:11px; padding:13px 14px; font-size:15px; font-weight:600; background:transparent; color:var(--ui-muted); }
.modern-shell .tracker-tab::before { content:'◈'; width:20px; color:var(--ui-muted); font-size:18px; }
.modern-shell #trackerPkpBtn::before { content:'▦'; }
.modern-shell .tracker-tab.active { background:var(--ui-accent-soft); color:var(--ui-ink); border-color:var(--ui-border); box-shadow:inset 3px 0 var(--ui-accent); }
.modern-shell .tracker-tab.active::before { color:var(--ui-accent); }
.modern-shell .tracker-tab:hover { transform:none; background:var(--ui-raised); color:var(--ui-ink); }
.modern-shell .tracker-subtabs { gap:5px; padding-top:12px; margin-top:12px; }
.modern-shell .tracker-subtab { min-width:50px; padding:8px; border-radius:8px; font-weight:600; font-size:13px; color:var(--ui-muted); background:var(--ui-surface); }
.modern-shell .tracker-subtab.active { color:var(--ui-accent); border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.modern-shell .tracker-context-label { font-size:12px; text-align:left; line-height:1.5; padding:5px 12px; }
.modern-shell .tracker-actions { flex-direction:column; align-items:stretch; padding-top:10px; margin-top:16px; border-top:1px solid var(--ui-border); gap:6px; }
.modern-shell .tracker-actions .btn { justify-content:flex-start; text-align:left; background:transparent; border-color:transparent; box-shadow:none; font-size:14px; font-weight:500; padding:12px 10px; border-radius:10px; }
.modern-shell .tracker-actions .btn:hover { background:var(--ui-raised); border-color:var(--ui-border); transform:none; }
.modern-shell .tactics-summary { align-self:flex-end; font-size:12px; padding-right:12px; }
.shell-nav-footer { border-top:1px solid var(--ui-border); padding-top:18px; margin-top:28px; display:grid; gap:12px; }
.shell-nav-footer .btn { width:100%; font-size:14px; }
.shell-signature { color:var(--ui-muted); text-align:center; font-size:12px; letter-spacing:.08em; }
.modern-shell .grid { gap:24px; grid-template-columns:minmax(320px,.85fr) minmax(0,1.4fr); align-items:start; }
.modern-shell .panel { border:1px solid var(--ui-border); border-radius:18px; background:var(--ui-surface); box-shadow:var(--ui-shadow); overflow:hidden; }
.modern-shell .panel-header { padding:20px 24px; border-bottom:1px solid var(--ui-border); background:transparent; }
.modern-shell .panel-header h2 { font-size:18px; font-weight:650; letter-spacing:-.02em; }
.modern-shell .panel-body { padding:22px 24px; }
.modern-shell .field label { font-size:14px; font-weight:550; color:var(--ui-muted); }
.modern-shell input:not([type="checkbox"]):not([type="range"]), .modern-shell select, .modern-shell textarea { background-color:var(--ui-raised); color:var(--ui-ink); border-color:var(--ui-border); border-radius:10px; font-size:15px; }
.modern-shell input:focus-visible, .modern-shell select:focus-visible, .modern-shell textarea:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; box-shadow:none; }
.modern-shell .btn { border-radius:10px; font-weight:600; transition:background .16s,border-color .16s,transform .16s; }
.modern-shell .btn.primary { background:var(--ui-accent); color:#10172e; border-color:var(--ui-accent); box-shadow:none; }
html[data-theme="white"] .modern-shell .btn.primary { color:white; }
.modern-shell .btn.ghost { background:var(--ui-raised); color:var(--ui-ink); border-color:var(--ui-border); }
.modern-shell .btn:focus-visible, .modern-shell button:focus-visible, .modern-shell a:focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
.modern-shell .mode-tabs { padding:5px; background:var(--ui-raised); border:1px solid var(--ui-border); border-radius:12px; gap:4px; }
.modern-shell .mode-tab { background:transparent; color:var(--ui-muted); border:1px solid transparent; border-radius:8px; font-size:14px; padding:10px 12px; font-weight:600; }
.modern-shell .mode-tab.active { background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-border); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.modern-shell .season-card { border-radius:12px; background:var(--ui-raised); border-color:var(--ui-border); padding:16px; }
.modern-shell .calendar-controls { margin:22px 0 14px; }
.modern-shell .month-title { font-size:16px; font-weight:650; }
.modern-shell .calendar .day { border-radius:9px; transition:border-color .15s,background .15s; }
.modern-shell .calendar .day.selected { outline:2px solid var(--ui-accent); outline-offset:-2px; }
.modern-shell .calendar-auto-actions .mini { font-size:12px; line-height:1.6; }
.modern-shell .stat-card, .modern-shell .stats-section, .modern-shell .compare-kpi, .modern-shell .opponents-section, .modern-shell .entry-card, .modern-shell .match-card { border-radius:13px; border-color:var(--ui-border); box-shadow:none; }
.modern-shell .stats-section { padding:20px; background:var(--ui-raised); }
.modern-shell .stats-section-title { font-size:17px; letter-spacing:-.02em; }
.modern-shell .history-panel { margin-top:26px !important; }
.modern-shell .table-wrap { border-radius:12px; border-color:var(--ui-border); }
.modern-shell th { font-size:13px; font-weight:600; }
.modern-shell td { font-size:14px; }
.modern-shell .modal-card, .modern-shell .modal-panel { border-radius:20px; border-color:var(--ui-border); }
.modern-shell .mini { line-height:1.55; }
.modern-shell .site-update-footer { color:var(--ui-muted); border-top:1px solid var(--ui-border); margin-top:32px; padding-top:18px; font-size:12px; line-height:1.7; }
/* Full-screen garage: original PNGs remain unmodified, each viewport selects its original third. */
html.garage-open { overflow:hidden; }
#garageDialog { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; color:var(--ui-ink); background:var(--ui-base); overflow-y:auto; overscroll-behavior:contain; }
#garageDialog::backdrop { background:var(--ui-base); }
.garage-layout { min-height:100%; display:flex; flex-direction:column; max-width:1920px; margin:0 auto; padding:28px 42px 22px; }
.garage-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.garage-top .shell-brand { padding:0; }
.garage-settings { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.garage-segment { display:flex; gap:3px; padding:4px; border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-surface); }
.garage-segment button { border:0; background:transparent; color:var(--ui-muted); border-radius:6px; padding:7px 10px; font:inherit; font-size:12px; cursor:pointer; }
.garage-segment button[aria-pressed="true"] { background:var(--ui-raised); color:var(--ui-ink); box-shadow:0 1px 5px rgba(0,0,0,.14); }
.garage-heading { text-align:center; padding:30px 0 22px; }
.garage-heading .shell-eyebrow { color:var(--ui-accent); }
.garage-heading h2 { font-size:clamp(26px,3.5vw,48px); letter-spacing:-.045em; font-weight:600; margin:0; line-height:1.15; }
.garage-stage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; max-width:1450px; margin:auto; min-height:340px; height:clamp(340px,59vh,740px); border:1px solid #343740; border-radius:22px; overflow:hidden; background:#000; box-shadow:0 24px 80px rgba(0,0,0,.22); }
.garage-car { position:relative; isolation:isolate; overflow:hidden; border:0; padding:0; margin:0; border-radius:0; color:#fff; background:#000; font:inherit; cursor:pointer; text-align:center; -webkit-tap-highlight-color:transparent; }
.garage-car + .garage-car { border-left:1px solid #45464e; }
.garage-art { position:absolute; inset:0; background-repeat:no-repeat; background-size:auto 100%; background-position:center; pointer-events:none; }
.garage-car[data-garage-profile="przemo"] { --garage-pos:100%; --garage-hover:url('./assets/garage/fennec.png'); }
.garage-car[data-garage-profile="potek"] { --garage-pos:50%; --garage-hover:url('./assets/garage/octane.png'); }
.garage-car[data-garage-profile="kindax"] { --garage-pos:0%; --garage-hover:url('./assets/garage/gizmo.png'); }
.garage-art { background-image:url('./assets/garage/base.png'); background-size:300% 100%; background-position:var(--garage-pos) center; }
.garage-art-active { background-image:var(--garage-hover); opacity:0; transition:opacity .25s ease; }
.garage-car:hover .garage-art-active, .garage-car:focus-visible .garage-art-active { opacity:1; }
.garage-car::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 30%,transparent 58%,rgba(0,0,0,.93)); z-index:1; }
.garage-car-index { position:absolute; left:24px; top:22px; z-index:2; font-size:12px; color:#aeb1bc; letter-spacing:.1em; }
.garage-car-tag { position:absolute; right:24px; top:22px; z-index:2; font-size:12px; color:#c3c7d0; letter-spacing:.16em; text-transform:uppercase; }
.garage-car-label { position:absolute; z-index:2; bottom:28px; left:12px; right:12px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .2s; }
.garage-car-label strong { font-size:clamp(24px,3.4vw,48px); letter-spacing:-.04em; font-weight:550; }
.garage-car-label .garage-enter { font-size:13px; display:flex; gap:14px; align-items:center; color:#b9beca; }
.garage-arrow { display:grid; place-items:center; border:1px solid #51555e; width:28px; height:28px; border-radius:50%; transition:background .2s,color .2s; }
.garage-car:hover .garage-car-label, .garage-car:focus-visible .garage-car-label { transform:translateY(-5px); }
.garage-car:hover .garage-arrow, .garage-car:focus-visible .garage-arrow { background:#fff; color:#111; border-color:#fff; }
#garageDialog .garage-car:focus-visible { outline:3px solid #d7e2ff; outline-offset:-5px; }
.garage-car:disabled { cursor:wait; }
.garage-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0 0; width:100%; max-width:1450px; margin:0 auto; }
.garage-hint { color:var(--ui-muted); font-size:13px; }
.garage-bottom button, #garageClose { border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-ink); border-radius:10px; padding:11px 16px; cursor:pointer; font:inherit; font-size:14px; }
#garageStatus { min-height:20px; font-size:14px; color:var(--ui-accent); text-align:center; margin-top:8px; }
#garageClose[hidden] { display:none; }
@media (min-width:1800px) { body.modern-shell .app { margin-left:270px; } }
@media (max-width:1200px) {
  body.modern-shell .app { margin-left:220px; padding:24px 20px 40px !important; }
  .modern-shell #trackerSwitch { width:220px; padding:22px 12px; }
  .modern-shell .hero { flex-wrap:wrap; gap:16px; }
  .modern-shell .hero .top-theme-corner { max-width:none; }
  .modern-shell .grid { grid-template-columns:minmax(285px,.85fr) minmax(0,1.2fr); gap:16px; }
  .modern-shell .panel-body,.modern-shell .panel-header { padding:18px; }
}
@media (max-width:960px) {
  body.modern-shell .app { margin:0; padding:20px 16px 36px !important; }
  .modern-shell #trackerSwitch { position:static; width:auto; border:1px solid var(--ui-border); border-radius:16px; margin-bottom:20px; padding:16px; }
  .modern-shell #trackerSwitch .shell-brand,.modern-shell #trackerSwitch .shell-nav-label,.modern-shell .shell-signature { display:none; }
  .modern-shell .tracker-row { flex-direction:row; flex-wrap:wrap; }
  .modern-shell .tracker-tab { flex:1; width:auto; min-width:110px; justify-content:center; padding:11px 10px; }
  .modern-shell .tracker-actions { flex-direction:row; gap:4px; flex-wrap:wrap; }
  .modern-shell .tracker-actions .btn { flex:1 1 180px; }
  .modern-shell .shell-nav-footer { margin:10px 0 0; padding:10px 0 0; }
  .modern-shell .shell-nav-footer .btn { width:auto; justify-self:end; }
  .modern-shell .grid { grid-template-columns:minmax(280px,.85fr) minmax(0,1.2fr); }
  .garage-layout { padding:20px 22px 14px; }
  .garage-settings { gap:8px; }
  .garage-heading { padding:30px 0 24px; }
}
@media (max-width:700px) {
  .modern-shell .grid { grid-template-columns:minmax(0,1fr); }
  .modern-shell .hero { margin-bottom:18px !important; min-height:0; }
  .modern-shell .hero .top-theme-corner { justify-content:flex-start; }
  .modern-shell .tracker-tab { min-width:0; font-size:13px; padding:11px 6px; gap:4px; }
  .modern-shell .tracker-tab::before { display:none; }
  .modern-shell .panel-body,.modern-shell .panel-header { padding:16px; }
  .garage-layout { padding:18px 12px 12px; }
  .garage-top { flex-wrap:wrap; justify-content:center; gap:16px; }
  .garage-top .shell-brand { font-size:17px; }
  .garage-settings { justify-content:center; }
  .garage-heading { padding:24px 0 18px; }
  .garage-stage { height:390px; min-height:300px; border-radius:14px; }
  .garage-art { background-size:auto 100%; width:300%; left:-100%; }
  .garage-car[data-garage-profile="przemo"] .garage-art { background-position:100% center; }
  .garage-car[data-garage-profile="kindax"] .garage-art { background-position:0% center; }
  .garage-car-tag { top:18px; right:0; left:0; font-size:11px; letter-spacing:.08em; }
  .garage-car-index { display:none; }
  .garage-car-label { bottom:22px; gap:12px; }
  .garage-car-label strong { font-size:23px; }
  .garage-enter [data-garage-text] { display:none; }
  .garage-car-label .garage-enter { font-size:12px; }
  .garage-bottom { flex-direction:column; padding-top:16px; gap:12px; }
  .garage-hint { font-size:12px; }
}
@media (max-height:650px) and (min-width:701px) { .garage-heading { padding:18px 0; } .garage-stage { min-height:280px; height:52vh; } .garage-layout { padding-top:18px; } }
@media (prefers-reduced-motion:reduce) { .modern-shell *, .modern-shell *::before, .modern-shell *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* Keep original car proportions; clip the image thirds without modifying supplied pixels. */
#garageDialog .garage-art { position:absolute; inset:auto; top:0; left:50%; width:auto; height:100%; max-width:none; background:none; pointer-events:none; user-select:none; }
#garageDialog [data-garage-profile="przemo"] .garage-art { transform:translateX(-83.333333%); clip-path:inset(0 0 0 66.666667%); }
#garageDialog [data-garage-profile="potek"] .garage-art { transform:translateX(-50%); clip-path:inset(0 33.333333%); }
#garageDialog [data-garage-profile="kindax"] .garage-art { transform:translateX(-16.666667%); clip-path:inset(0 66.666667% 0 0); }
@media(max-width:700px) { .garage-stage { height:310px; min-height:310px; } }