:root{
  --bg:#EDF2EF;--surface:#FFFFFF;--surface2:#F6F9F7;--ink:#0F2420;--muted:#5D6D68;--line:#DCE4E0;
  --brand:#0E5A4F;--brand2:#0A443C;--brand-ink:#FFFFFF;--gold:#D99A1E;--soft:#E1EEE9;
  --danger:#C2362B;--warn:#C26A12;--ok:#1C9B6E;--shadow:0 1px 2px rgba(15,36,32,.06),0 8px 24px -12px rgba(15,36,32,.18);
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#06140F;--surface:#0D221D;--surface2:#112A24;--ink:#E8F1EE;--muted:#8FA59F;--line:#1D3832;
  --brand:#2FBF9B;--brand2:#0A3A32;--brand-ink:#04110D;--gold:#F0B946;--soft:#14322B;
  --danger:#F07F74;--warn:#F2A65A;--ok:#38D19C;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#06140F;--surface:#0D221D;--surface2:#112A24;--ink:#E8F1EE;--muted:#8FA59F;--line:#1D3832;
  --brand:#2FBF9B;--brand2:#0A3A32;--brand-ink:#04110D;--gold:#F0B946;--soft:#14322B;
  --danger:#F07F74;--warn:#F2A65A;--ok:#38D19C;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Readex Pro","Segoe UI",Tahoma,sans-serif;font-size:15px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#0A3A32}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a{color:var(--brand)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
aside{background:linear-gradient(170deg,#0E5A4F 0%,#0A3A32 70%,#082C26 100%);color:#E6F2EE;position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px));display:flex;flex-direction:column;padding:20px 14px;gap:6px;overflow:auto}
.logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.logo .seal{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;position:relative;overflow:hidden}
.logo .seal svg{width:24px;height:24px;color:#F0B946}
.logo b{display:block;font-size:1rem;font-weight:600;line-height:1.25}
.logo span{font-size:.75rem;opacity:.7}
.navbtn{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;color:inherit;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:500;text-align:start;position:relative;transition:background .2s}
.navbtn svg{width:19px;height:19px;flex:none;opacity:.85}
.navbtn:hover{background:rgba(255,255,255,.08)}
.navbtn[aria-current="page"]{background:rgba(255,255,255,.14)}
.navbtn[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:#F0B946}
.navbtn .badge{margin-inline-start:auto;background:#F0B946;color:#2A1C00;border-radius:999px;font-size:.7rem;padding:0 7px;font-weight:600}
.side-foot{margin-top:auto;display:grid;gap:10px;padding-top:16px}
.showbtn{display:flex;align-items:center;justify-content:center;gap:8px;background:#F0B946;color:#2A1C00;border:0;border-radius:12px;padding:12px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .2s}
.showbtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(240,185,70,.7)}
.live{display:flex;align-items:center;gap:8px;font-size:.78rem;opacity:.8;padding:0 8px}
.pulse{width:8px;height:8px;border-radius:50%;background:#38D19C;box-shadow:0 0 0 0 rgba(56,209,156,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,209,156,.6)}70%{box-shadow:0 0 0 9px rgba(56,209,156,0)}100%{box-shadow:0 0 0 0 rgba(56,209,156,0)}}
.topbar{display:none}
main{padding:26px 30px 70px;min-width:0;max-width:1500px;width:100%}
.pagehead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.pagehead h1{margin:0;font-size:1.55rem;font-weight:600;line-height:1.25}
.pagehead p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.pagehead .spacer{flex:1}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  aside{display:none}
  .topbar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#0A3A32;color:#fff;gap:4px;padding:10px 10px 0;overflow-x:auto;align-items:flex-end}
  .topbar .navbtn{flex-direction:column;gap:2px;font-size:.72rem;padding:6px 10px 10px;border-radius:10px 10px 0 0;white-space:nowrap;width:auto}
  .topbar .navbtn[aria-current="page"]::before{display:none}
  .topbar .navbtn[aria-current="page"]{background:var(--bg);color:var(--ink)}
  main{padding:18px 14px 60px}
}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);min-width:0;position:relative}
.card h2{font-size:1.02rem;font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.card h2 .sub{font-weight:400;color:var(--muted);font-size:.82rem}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g2{grid-template-columns:1fr 1fr}
.g21{grid-template-columns:1.6fr 1fr}
@media (max-width:1100px){.g2,.g21{grid-template-columns:1fr}}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:500;font-size:.9rem;text-decoration:none;color:var(--ink);transition:transform .12s,border-color .2s,background .2s}
.btn:hover{border-color:var(--brand);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#2A1C00}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.78rem;border:1px solid var(--line);background:var(--surface);white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;flex:none}
.code{direction:ltr;display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.04em;padding:1px 7px;border-radius:6px;background:var(--soft);color:var(--ink);white-space:nowrap}
.flag{font-size:.74rem;color:var(--warn);white-space:nowrap}
.track{height:10px;background:var(--soft);border-radius:6px;overflow:hidden;position:relative}
.fill{height:100%;border-radius:6px;transition:width 1s cubic-bezier(.2,.8,.2,1);width:0}
.avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:600;flex:none}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.notice{background:var(--soft);border-radius:12px;padding:12px 16px;font-size:.88rem}
.fade-in{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.stagger>*{animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) both}
.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.15s}.stagger>*:nth-child(5){animation-delay:.2s}.stagger>*:nth-child(6){animation-delay:.25s}.stagger>*:nth-child(n+7){animation-delay:.3s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lift{transition:transform .2s,box-shadow .2s,border-color .2s}
.lift:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 18px 34px -16px rgba(15,36,32,.3)}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 140% at 100% 0%,#13705F 0%,#0B4A41 45%,#082F29 100%);color:#EAF6F2;border:0;overflow:hidden}
.hero::after{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:280px;height:280px;border-radius:50%;border:40px solid rgba(240,185,70,.09)}
.hero .label{font-size:.9rem;opacity:.8}
.hero .big{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;line-height:1.05;letter-spacing:-.01em}
.hero .of{font-size:1rem;opacity:.75}
.hero .track{background:rgba(255,255,255,.12);height:14px}
.hero .fill{background:linear-gradient(90deg,#F0B946,#FFD978)}
.params{display:grid;gap:14px;background:rgba(255,255,255,.07);border-radius:14px;padding:16px;min-width:260px;position:relative;z-index:1}
.params .p{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stepper{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border-radius:10px;padding:3px}
.stepper button{width:30px;height:30px;border-radius:8px;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:1.1rem;line-height:1}
.stepper button:hover{background:rgba(255,255,255,.2)}
.stepper output{min-width:38px;text-align:center;font-weight:600;font-size:1.05rem}
input[type=range]{accent-color:#F0B946;width:140px}
.thr{font-size:1.6rem;font-weight:700;color:#FFD978}

/* ---------- KPI ---------- */
.kpi{display:flex;gap:14px;align-items:flex-start}
.kpi .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.kpi .ic svg{width:22px;height:22px}
.kpi .v{font-size:1.65rem;font-weight:700;line-height:1.2}
.kpi .l{color:var(--muted);font-size:.84rem}
.kpi .s{font-size:.78rem;color:var(--muted);margin-top:2px}

/* ---------- race cards ---------- */
.race{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.rc{cursor:pointer;border-top:5px solid var(--c);overflow:hidden}
.rc .nm{font-size:1.08rem;font-weight:600}
.rc .num{font-size:1.9rem;font-weight:700;line-height:1.1;color:var(--c)}
.lane{position:relative;height:18px;background:var(--soft);border-radius:9px;margin:12px 0 8px;overflow:visible}
.lane .seg{position:absolute;inset-block:0;inset-inline-start:0;border-radius:9px;transition:width 1.1s cubic-bezier(.2,.8,.2,1);width:0}
.lane .seg.prob{opacity:.3}
.lane .mark{position:absolute;top:-6px;bottom:-6px;width:3px;border-radius:2px;background:var(--ink);transition:inset-inline-start .8s}
.rc.won{box-shadow:0 0 0 2px var(--c),0 14px 36px -14px var(--c)}
.won-badge{display:inline-flex;align-items:center;gap:4px;background:var(--c);color:#fff;border-radius:999px;padding:1px 10px;font-size:.74rem;font-weight:600;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.addcard{border:2px dashed var(--line);background:transparent;box-shadow:none;display:grid;place-items:center;text-align:center;cursor:pointer;color:var(--muted);min-height:180px}
.addcard:hover{border-color:var(--brand);color:var(--brand)}
.addcard svg{width:34px;height:34px}

/* ---------- donut / treemap ---------- */
.donut-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.donut{width:200px;height:200px;flex:none}
.donut circle.seg{transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1),opacity .2s;cursor:pointer}
.donut.hl circle.seg{opacity:.25}.donut.hl circle.seg.on{opacity:1}
.legend{display:grid;gap:6px;flex:1;min-width:200px}
.legend .li{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:.88rem}
.legend .li:hover,.legend .li.on{background:var(--soft)}
.legend .li i{width:11px;height:11px;border-radius:3px;flex:none}
.legend .li b{margin-inline-start:auto;font-weight:600}
.tm{position:relative;height:340px;border-radius:12px;overflow:hidden}
.tm .t{position:absolute;padding:6px 8px;overflow:hidden;cursor:pointer;color:#fff;border:2px solid var(--surface);border-radius:8px;transition:filter .2s,transform .2s;animation:tmIn .6s cubic-bezier(.2,.8,.2,1) both;background:repeating-linear-gradient(135deg,#55645F 0 8px,#5B6A65 8px 16px)}
.tm .tf{position:absolute;inset-inline:0;bottom:0;height:0;transition:height 1.3s cubic-bezier(.2,.8,.2,1);box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.tm .tl{position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.tm-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font-size:.8rem;color:var(--muted);align-items:center}
.tm-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
.tm .t:hover{filter:brightness(1.12);z-index:2}
.tm .t b{display:block;font-size:.85rem;font-weight:600;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.tm .t span{font-size:.72rem;opacity:.85}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes tmIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.scale{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--muted);margin-top:10px}
.scale .bar{flex:1;max-width:180px;height:8px;border-radius:4px;background:linear-gradient(90deg,#6D7F7A,#0E5A4F)}

/* ---------- tables / lists ---------- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:10px 8px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500;font-size:.8rem;white-space:nowrap}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:end}
tbody tr{transition:background .15s}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--soft)}
.scroll{overflow-x:auto}
.mini{display:flex;height:8px;width:90px;border-radius:4px;overflow:hidden;background:var(--soft)}
.mini span{height:100%}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar input,.toolbar select,.f input,.f select,.f textarea{border:1px solid var(--line);background:var(--surface2);border-radius:10px;padding:9px 12px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.toolbar input:focus,.toolbar select:focus,.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.toolbar input[type=search]{flex:1;min-width:220px}
label.f{display:grid;gap:5px;font-size:.84rem;color:var(--muted)}
.f textarea{min-height:76px;resize:vertical;width:100%}
.f input,.f select{width:100%}
.lb{display:grid;gap:12px}
.lb .it{display:grid;grid-template-columns:28px 40px 1fr auto;gap:10px;align-items:center}
.lb .rk{font-weight:700;color:var(--muted);text-align:center}
.lb .it:first-child .rk{color:var(--gold)}

/* ---------- ring ---------- */
.ring circle.p{transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1)}
.profile-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;border-top:6px solid var(--c);overflow:hidden}
.profile-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);pointer-events:none}
.profile-hero h1{margin:0;font-size:1.8rem}
.log{display:grid;gap:10px;max-height:440px;overflow:auto}
.log .e{border-inline-start:3px solid var(--line);padding:4px 12px;border-radius:2px}
.overdue{color:var(--danger);font-weight:500}

/* ---------- dialogs ---------- */
dialog{border:0;border-radius:18px;background:var(--surface);color:var(--ink);padding:0;width:min(560px,94vw);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog[open]{animation:dlgIn .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
dialog::backdrop{background:rgba(4,16,13,.55);backdrop-filter:blur(3px)}
dialog.sheet{margin:0;margin-inline-start:auto;height:100%;max-height:100%;width:min(620px,100vw);border-radius:0;border-inline-start:1px solid var(--line)}
dialog.sheet[open]{animation:sheetIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetIn{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
.dlg{padding:24px;display:grid;gap:14px}
.dlg h2{margin:0;font-size:1.2rem}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alloc{display:grid;grid-template-columns:1fr 140px;gap:8px 12px;align-items:center}
.alloc input{border:1px solid var(--line);background:var(--surface2);border-radius:10px;padding:8px 10px;width:100%;text-align:end;font-variant-numeric:tabular-nums}
.alloc .nm{display:flex;align-items:center;gap:8px;font-size:.9rem}
.alloc .nm i{width:11px;height:11px;border-radius:3px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:32px;height:32px;border-radius:10px;border:3px solid transparent;cursor:pointer;transition:transform .15s}
.swatches button:hover{transform:scale(1.1)}
.swatches button[aria-pressed="true"]{border-color:var(--ink)}
.togglechips{display:flex;gap:8px;flex-wrap:wrap}
.togglechips button{border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.togglechips button i{width:9px;height:9px;border-radius:50%}
.togglechips button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
@media (max-width:560px){.fg{grid-template-columns:1fr}.alloc{grid-template-columns:1fr 110px}}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.3);z-index:80;display:flex;align-items:center;gap:8px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.tip{position:fixed;z-index:90;pointer-events:none;background:var(--ink);color:var(--bg);font-size:.8rem;padding:6px 10px;border-radius:8px;opacity:0;transition:opacity .12s;max-width:240px;line-height:1.4}

/* ---------- presentation (TV) ---------- */
#show{position:fixed;inset:0;z-index:100;background:radial-gradient(120% 120% at 100% 0%,#0F4A40 0%,#061A16 55%,#030D0B 100%);color:#EAF4F1;display:none;flex-direction:column;padding:calc(2vw + env(safe-area-inset-top,0px)) 3vw calc(2vw + env(safe-area-inset-bottom,0px));overflow:hidden}
#show.on{display:flex;animation:fadeUp .4s both}
#show{--soft:rgba(255,255,255,.09);--ink:#EAF4F1;--muted:#9FB5AE;--surface:#061A16;--line:rgba(255,255,255,.1);color-scheme:dark}
.sh-top{display:flex;align-items:center;gap:2vw}
.sh-top .ttl{font-size:clamp(1rem,1.6vw,1.6rem);font-weight:600}
.sh-top .clock{font-size:clamp(1rem,1.8vw,1.9rem);font-weight:600;direction:ltr;color:#F0B946;font-variant-numeric:tabular-nums}
.sh-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:2vw 0}
.slide{animation:slideIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes slideIn{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
.sh-nav{display:flex;align-items:center;gap:12px}
.sh-nav button{background:rgba(255,255,255,.08);border:0;color:#fff;border-radius:10px;width:44px;height:44px;cursor:pointer;display:grid;place-items:center}
.sh-nav button:hover{background:rgba(255,255,255,.18)}
.sh-nav svg{width:20px;height:20px}
.sh-dots{display:flex;gap:6px;flex:1;justify-content:center}
.sh-dots span{height:6px;width:26px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.sh-dots span.on::after{content:"";position:absolute;inset:0;background:#F0B946;transform-origin:right;animation:prog var(--dur,12s) linear forwards}
.sh-dots span.done{background:rgba(240,185,70,.6)}
#show.paused .sh-dots span.on::after{animation-play-state:paused}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tv-big{font-size:clamp(3rem,8vw,8.5rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.tv-mid{font-size:clamp(1.6rem,3.4vw,3.4rem);font-weight:700;line-height:1.1}
.tv-lbl{font-size:clamp(.9rem,1.4vw,1.4rem);opacity:.75}
.tv-grid{display:grid;gap:2.2vw}
.tv-race{display:grid;gap:1.8vw}
.tv-race .r .top{display:flex;justify-content:space-between;align-items:baseline;font-size:clamp(1rem,1.9vw,2rem);margin-bottom:.6vw}
.tv-race .r .top b{font-weight:600}
.tv-race .lane{height:clamp(18px,2.4vw,40px);background:rgba(255,255,255,.08);border-radius:999px}
.tv-race .lane .seg{border-radius:999px}
.tv-race .lane .mark{background:#F0B946;width:4px}
.tv-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:2vw;padding:2vw}
.tv-tm{height:62vh}
.tv-tm .t{border-color:#061A16}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- AI chat assistant ---------- */
.chat-fab{position:fixed;inset-inline-end:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;width:62px;height:62px;border-radius:20px;border:0;cursor:pointer;background:linear-gradient(145deg,#13705F,#0A3A32);color:#F0B946;box-shadow:0 14px 34px -10px rgba(10,58,50,.7);display:grid;place-items:center;transition:transform .2s}
.chat-fab:hover{transform:translateY(-3px) scale(1.04)}
.chat-fab svg{width:28px;height:28px}
.chat-fab::after{content:"";position:absolute;top:8px;inset-inline-end:8px;width:10px;height:10px;border-radius:50%;background:#38D19C;box-shadow:0 0 0 3px #0A3A32}
.chat{position:fixed;inset-inline-end:24px;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:61;width:min(420px,calc(100vw - 32px));height:min(620px,calc(100vh - 140px));background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);display:none;flex-direction:column;overflow:hidden}
.chat.on{display:flex;animation:dlgIn .3s cubic-bezier(.2,.9,.3,1.2)}
.chat-head{background:linear-gradient(150deg,#0E5A4F,#0A3A32);color:#EAF6F2;padding:14px 16px;display:flex;align-items:center;gap:10px}
.chat-head b{display:block;font-size:.98rem}
.chat-head span{font-size:.75rem;opacity:.75}
.chat-head button{margin-inline-start:auto;background:rgba(255,255,255,.1);border:0;color:#fff;width:34px;height:34px;border-radius:10px;cursor:pointer}
.chat-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface2)}
.msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:.9rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;animation:fadeUp .3s both}
.msg.me{align-self:flex-start;background:var(--brand);color:var(--brand-ink);border-end-start-radius:4px}
.msg.ai{align-self:flex-end;background:var(--surface);border:1px solid var(--line);border-end-end-radius:4px}
.msg.ai b{font-weight:600}
.msg.err{border-color:var(--danger);color:var(--danger)}
.typing{display:flex;gap:5px;padding:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-sugg{display:flex;flex-wrap:wrap;gap:6px}
.chat-sugg button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:.8rem;cursor:pointer;color:var(--ink)}
.chat-sugg button:hover{border-color:var(--brand)}
.chat-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface)}
.chat-foot textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--surface2);border-radius:12px;padding:10px 12px;max-height:110px;min-height:44px;color:var(--ink)}
.chat-foot button{width:46px;border-radius:12px;border:0;background:var(--brand);color:var(--brand-ink);cursor:pointer}
.chat-foot button:disabled{opacity:.5}
@media (max-width:600px){.chat{inset-inline-end:8px;width:calc(100vw - 16px);bottom:calc(88px + env(safe-area-inset-bottom,0px))}}