*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#0a0c10; --panel:#12161d; --panel2:#171c25; --line:#232b37;
    --txt:#e7ecf3; --dim:#8b97a8; --dim2:#5d6878;
    --acc:#e10600; --gold:#ffc94d; --green:#4ade80; --red:#f87171;
    --team:#e10600;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  html,body{height:100%}
  body{
    background:var(--bg); color:var(--txt); overflow:hidden;
    font:14px/1.45 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  #app{height:100vh;display:flex;flex-direction:column}

  /* ---------- header ---------- */
  header{
    display:flex;align-items:center;gap:18px;padding:10px 18px;
    background:linear-gradient(90deg,var(--panel) 0%,#0f1319 100%);
    border-bottom:1px solid var(--line);flex:0 0 auto;
  }
  .logo{font-weight:800;letter-spacing:.22em;font-size:15px}
  .logo b{color:var(--acc)}
  .hbadge{
    font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--dim);
    background:var(--panel2);border:1px solid var(--line);padding:6px 9px;border-radius:5px;
  }
  .hbadge span{color:var(--txt)}
  .hbadge .spulse{color:var(--gold);font-weight:800;animation:spulse 1.1s ease-in-out infinite}
  @keyframes spulse{
    0%,100%{opacity:1;text-shadow:0 0 0 rgba(255,201,77,0)}
    50%{opacity:.55;text-shadow:0 0 10px rgba(255,201,77,.8)}
  }
  .hspacer{flex:1}
  .hbtn{
    font:600 11px/1 inherit;letter-spacing:.06em;color:var(--dim);cursor:pointer;
    background:transparent;border:1px solid var(--line);padding:7px 11px;border-radius:5px;
  }
  .hbtn:hover{color:var(--txt);border-color:var(--dim2)}

  /* ---------- layout ---------- */
  main{flex:1;display:grid;grid-template-columns:280px 1fr 320px;gap:1px;background:var(--line);min-height:0}
  .col{background:var(--bg);overflow-y:auto;overflow-x:hidden;padding:12px}
  .col::-webkit-scrollbar{width:7px}
  .col::-webkit-scrollbar-thumb{background:#242c38;border-radius:4px}
  .col::-webkit-scrollbar-track{background:transparent}

  .card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:11px 12px;margin-bottom:10px}
  .card.flush{padding:0;overflow:hidden}
  h3{
    font:700 10px/1 inherit;letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim2);margin-bottom:9px;
  }

  /* ---------- driver panel ---------- */
  .who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .num{
    font:800 20px/1 var(--mono);color:#0a0c10;background:var(--team);
    padding:8px 7px;border-radius:6px;min-width:40px;text-align:center;
  }
  .who .nm{font-weight:700;font-size:15px;line-height:1.1}
  .who .tm{font-size:11px;color:var(--team);font-weight:600;letter-spacing:.04em}

  .stat{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:11px}
  .stat .lb{width:74px;color:var(--dim);flex:0 0 auto}
  .stat .bar{flex:1;height:6px;background:#1e242e;border-radius:3px;overflow:hidden;position:relative}
  .stat .fill{height:100%;background:var(--team);border-radius:3px}
  .stat .vl{width:22px;text-align:right;font:600 11px var(--mono);color:var(--txt);flex:0 0 auto}
  .stat .up{
    flex:0 0 auto;width:17px;height:17px;border-radius:4px;border:1px solid var(--team);
    background:transparent;color:var(--team);cursor:pointer;font:700 12px/1 inherit;
  }
  .stat .up:hover{background:var(--team);color:#0a0c10}

  .kv{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;color:var(--dim)}
  .kv b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
  .xpbar{height:5px;background:#1e242e;border-radius:3px;overflow:hidden;margin:6px 0 3px}
  .xpbar i{display:block;height:100%;background:var(--gold)}

  .duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;text-align:center;margin-bottom:7px}
  .duel .s{font:800 19px/1 var(--mono)}
  .duel .l{font-size:9.5px;color:var(--dim2);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
  .duel .vs{font-size:10px;color:var(--dim2)}
  .win{color:var(--green)} .lose{color:var(--red)}

  /* ---------- center ---------- */
  .track{
    display:flex;align-items:flex-start;gap:14px;padding:13px 14px;
    background:linear-gradient(135deg,var(--panel) 0%,#0e1218 100%);
    border:1px solid var(--line);border-radius:8px;margin-bottom:10px;
  }
  .track .fg{font-size:34px;line-height:1}
  .track .tn{font-weight:700;font-size:19px;letter-spacing:-.01em}
  .track .tc{font-size:11.5px;color:var(--dim);margin-top:1px}
  .track .meta{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
  .track .meta div{font-size:10.5px;color:var(--dim2)}
  .track .meta b{display:block;color:var(--txt);font:600 12px var(--mono);margin-top:2px}
  .rnd{margin-left:auto;text-align:right;flex:0 0 auto}
  .rnd .r1{font:800 26px/1 var(--mono);color:var(--team)}
  .rnd .r2{font-size:9.5px;color:var(--dim2);letter-spacing:.1em;text-transform:uppercase;margin-top:3px}

  .phase{display:flex;gap:6px;margin-bottom:10px}
  .ph{
    flex:1;text-align:center;padding:7px 4px;border-radius:6px;border:1px solid var(--line);
    background:var(--panel);font:600 10px/1 inherit;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
  }
  .ph.on{border-color:var(--team);color:var(--txt);background:var(--panel2)}
  .ph.done{color:var(--dim)}

  .btn{
    display:block;width:100%;padding:12px;border-radius:7px;border:none;cursor:pointer;
    background:var(--team);color:#0a0c10;font:800 13px/1 inherit;letter-spacing:.09em;text-transform:uppercase;
    transition:filter .12s;
  }
  .btn:hover{filter:brightness(1.15)}
  .btn.ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
  .btn.ghost:hover{border-color:var(--dim2);filter:none}
  .btn[disabled]{opacity:.35;cursor:default;filter:none}

  .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
  .opt{
    text-align:left;padding:10px;border-radius:7px;cursor:pointer;
    background:var(--panel);border:1px solid var(--line);color:var(--txt);font:inherit;
  }
  .opt:hover{border-color:var(--dim2)}
  .opt.sel{border-color:var(--team);background:var(--panel2)}
  .opt .ot{font-weight:700;font-size:12.5px;margin-bottom:3px}
  .opt .od{font-size:10.5px;color:var(--dim);line-height:1.35}

  .setup{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
  .srow{display:flex;align-items:center;gap:9px}
  .srow .sl{width:96px;font-size:11.5px;color:var(--dim)}
  .srow .pips{display:flex;gap:4px;flex:1}
  .srow .pip{flex:1;height:8px;border-radius:2px;background:#1e242e}
  .srow .pip.on{background:var(--team)}
  .sbtn{
    width:24px;height:24px;border-radius:5px;border:1px solid var(--line);background:var(--panel2);
    color:var(--txt);cursor:pointer;font:700 14px/1 inherit;
  }
  .sbtn:hover{border-color:var(--team)}
  .sbtn[disabled]{opacity:.3;cursor:default}

  /* práctica: sensación y telemetría */
  .feelm{margin:8px 0 12px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
  .feellb{font-size:11.5px;color:var(--dim);margin-bottom:6px}
  .feellb .feel-good{color:#3ddc84}.feellb .feel-ok{color:var(--gold)}.feellb .feel-bad{color:#ff5d5d}
  .feebar{height:6px;border-radius:3px;background:#1e242e;overflow:hidden}
  .feefill{height:100%;background:linear-gradient(90deg,var(--team),#3ddc84);border-radius:3px;transition:width .25s}
  .pracbtns{display:flex;gap:8px;flex-wrap:wrap}
  .pracbtns .btn{flex:1;min-width:150px}
  .tele{font-size:11px;color:var(--gold);background:rgba(255,204,0,.06);border-left:2px solid var(--gold);border-radius:3px;padding:4px 8px;margin:2px 0 7px}

  /* results table */
  table{width:100%;border-collapse:collapse;font-size:12px}
  th{
    font:700 9.5px/1 inherit;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
    text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);background:var(--panel2);
  }
  td{padding:5px 8px;border-bottom:1px solid #1a202a}
  tr:last-child td{border-bottom:none}
  tr.me td{background:rgba(225,6,0,.09)}
  tr.me td:first-child{box-shadow:inset 3px 0 0 var(--team)}
  tr.mate td{background:rgba(255,255,255,.035)}
  tr.elim td{opacity:.4}
  tr.elim td:last-child{color:var(--red);opacity:.7}
  .pos{font:700 12px var(--mono);color:var(--dim);width:26px}
  .tb{display:inline-block;width:3px;height:11px;border-radius:2px;margin-right:7px;vertical-align:-1px}
  .num-c{text-align:right;font:600 12px var(--mono);font-variant-numeric:tabular-nums}
  .dim{color:var(--dim)}
  .gap{font:500 11px var(--mono);color:var(--dim2)}

  /* log */
  .log{max-height:230px;overflow-y:auto;padding:2px 0}
  .log::-webkit-scrollbar{width:6px}
  .log::-webkit-scrollbar-thumb{background:#242c38;border-radius:3px}
  .le{display:flex;gap:9px;padding:4px 2px;font-size:11.5px;border-bottom:1px solid #161c25;animation:fin .25s ease}
  @keyframes fin{from{opacity:0;transform:translateY(-3px)}to{opacity:1}}
  .le .lp{font:700 10px var(--mono);color:var(--dim2);flex:0 0 34px;padding-top:1px}
  .le.hot{color:var(--gold)} .le.bad{color:var(--red)} .le.good{color:var(--green)}
  .le.you{background:rgba(225,6,0,.07);border-radius:4px}

  .decision{border:1px solid var(--team);border-radius:8px;padding:11px;margin-bottom:10px;background:var(--panel2)}
  .decision .dq{font-weight:700;font-size:13px;margin-bottom:9px}
  .dopts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}

  /* race header: sector + clima + tú + simular */
  .racehead{display:flex;gap:8px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
  .wxf{display:flex;align-items:center;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:4px 8px}
  .wxf .wxlb{font:600 10px/1 var(--mono);letter-spacing:.08em;color:var(--dim2);margin-right:4px}
  .wx{font-size:11px;line-height:1;opacity:.55;padding:2px;border-radius:3px}
  .wx.now{opacity:1;background:rgba(255,204,0,.12)}
  .wx.wet{opacity:1}
  .raceinfo{display:flex;gap:16px;margin-bottom:10px;font-size:11.5px;color:var(--dim);flex-wrap:wrap}
  .raceinfo .ri b{color:var(--txt);font-weight:700}
  /* gomas en la tabla en vivo */
  .tyre{
    display:inline-flex;align-items:center;gap:3px;font:700 10px/1 var(--mono);color:#0a0c10;
    padding:2px 4px;border-radius:3px;position:relative;
  }
  .tyre b{position:absolute;top:-5px;right:-5px;background:var(--panel2);border:1px solid var(--line);color:#c9d3df;font:700 8px/1 var(--mono);padding:1px 2px;border-radius:3px}
  .tyre i.fresh{width:4px;height:4px;border-radius:50%;background:#3ddc84;position:absolute;bottom:-3px;right:3px;box-shadow:0 0 4px #3ddc84}
  .tyre.soft{background:#ff4d4d}
  .tyre.med{background:#f5c518}
  .tyre.hard{background:#e8e8e8}
  .tyre.inter{background:#4dc3ff}
  .tyre.full{background:#9b6dff}
  .tyre .tx{color:#0a0c10}
  .legend{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
  .legend .tyre{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em}

  /* duelo de equipo */
  .dchip{font:800 9px/1 var(--mono);letter-spacing:.06em;padding:3px 5px;border-radius:3px}
  .dchip.v{background:rgba(61,220,132,.14);color:#3ddc84;border:1px solid rgba(61,220,132,.35)}
  .dchip.c{background:rgba(255,93,93,.12);color:#ff5d5d;border:1px solid rgba(255,93,93,.3)}
  .dchip.none{background:var(--panel2);color:var(--dim2)}

  /* right col tabs */
  .tabs{display:flex;gap:3px;margin-bottom:9px}
  .tab{
    flex:1;padding:7px 3px;border-radius:6px;border:1px solid var(--line);background:var(--panel);
    color:var(--dim2);cursor:pointer;font:700 9.5px/1 inherit;letter-spacing:.06em;text-transform:uppercase;
  }
  .tab.on{background:var(--panel2);color:var(--txt);border-color:var(--dim2)}

  .cal{font-size:11.5px}
  .cal .c{display:flex;gap:8px;padding:5px 7px;border-radius:5px;align-items:center}
  .cal .c.click:hover{background:var(--panel2)}
  .cal .c.past{color:var(--dim2)}
  .cal .c.now{background:var(--panel2);color:var(--txt);box-shadow:inset 2px 0 0 var(--team)}
  .cal .cn{font:600 10px var(--mono);color:var(--dim2);width:20px}
  .cal .cr{margin-left:auto;font:700 11px var(--mono)}

  /* logros permanentes */
  .achgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ach{
    display:flex;gap:8px;align-items:flex-start;padding:8px 9px;border-radius:7px;
    background:var(--panel);border:1px solid var(--line);opacity:.55;
  }
  .ach.got{opacity:1;border-color:rgba(255,201,77,.4);background:linear-gradient(135deg,var(--panel) 0%,#191309 100%)}
  .ach .aic{font-size:18px;line-height:1.2}
  .ach .atx b{display:block;font-size:11px;line-height:1.2;margin-bottom:2px}
  .ach .atx .dim{font-size:9.8px;line-height:1.3}

  /* rivalidades */
  .rival{padding:5px 0;border-bottom:1px dashed var(--line)}
  .rival:last-child{border-bottom:none}
  .rivalh{display:flex;align-items:center;gap:7px;font-size:11.5px}
  .rivalh b{margin-left:auto;font:600 11px var(--mono);color:var(--txt);font-variant-numeric:tabular-nums}
  .rivalscore{flex:1;height:5px;background:#1e242e;border-radius:3px;overflow:hidden;margin:0 4px}
  .rivalscore i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--gold));border-radius:3px}

  /* overlay */
  #ov{
    position:fixed;inset:0;background:rgba(6,8,11,.9);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;
  }
  #ov.hide{display:none}
  .modal{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    width:min(720px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:22px 24px;
  }
  .modal::-webkit-scrollbar{width:7px}
  .modal::-webkit-scrollbar-thumb{background:#242c38;border-radius:4px}
  .modal h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
  .modal .sub{color:var(--dim);font-size:12.5px;margin-bottom:18px}
  .field{margin-bottom:14px}
  .field label{display:block;font:700 9.5px/1 inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);margin-bottom:6px}
  input[type=text]{
    width:100%;padding:10px 11px;border-radius:6px;border:1px solid var(--line);
    background:#0d1116;color:var(--txt);font:14px inherit;
  }
  input[type=text]:focus{outline:none;border-color:var(--team)}
  .teams{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .tcard{
    padding:9px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel2);
    cursor:pointer;text-align:left;color:var(--txt);font:inherit;
  }
  .tcard:hover{border-color:var(--dim2)}
  .tcard.sel{border-color:currentColor}
  .tcard .tn2{font-weight:700;font-size:11.5px;line-height:1.15}
  .tcard .tt{font:600 9.5px var(--mono);color:var(--dim2);margin-top:3px}
  .seat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hr{height:1px;background:var(--line);margin:16px 0}
  .big{font:800 30px/1 var(--mono)}
  .center{text-align:center}
  .trophy{font-size:46px;margin-bottom:8px}
  .pill{display:inline-block;padding:3px 8px;border-radius:20px;font:700 10px var(--mono);background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
  .cups{color:var(--gold);font-weight:700}
  .press{position:relative;overflow:hidden}
  .press:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold),var(--acc))}
  .press-mast{font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-bottom:7px}
  .press-title{font:800 13px/1.25 var(--mono);color:var(--txt);margin-bottom:5px}
  .press-player{font:600 11px/1.3 inherit;color:var(--gold);margin-bottom:8px}
  .press-champ{font:500 10.5px/1.3 inherit;color:var(--dim2);margin-bottom:8px}
  .press .press-line{font-size:10.8px;line-height:1.45;color:var(--dim);border-top:1px dashed var(--line);padding-top:6px;margin-top:6px}
  .press-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--line)}
  .press-row:first-of-type{border-top:0}
  .press-row .press-flag{font-size:15px;line-height:1;margin-top:1px}
  .press-row .press-title{font:700 11px/1.25 inherit;color:var(--txt);margin-bottom:2px}
  .press-row .press-sub{font-size:10px;color:var(--dim)}
  .press-row:hover .press-title{color:var(--gold)}