:root{
  /* F1's own brand red, used only for the logo mark — fixed regardless of theme. */
  --f1-red:#e8002d;
}
body{
  padding:18px 12px 60px;
}
.wrap{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.card{overflow:hidden}  /* surface (bg/border/radius) comes from shared.css */

/* ---- header ---- */
.top{background:var(--card);color:var(--text);border-bottom:1px solid var(--border);padding:16px 18px;display:flex;align-items:center;gap:12px}
.logo{background:var(--f1-red);color:#fff;font-weight:800;font-style:italic;font-size:15px;
  padding:5px 9px;border-radius:6px;letter-spacing:-1px}
.top h1{font-size:19px;font-weight:500;margin:0;flex:1}
.season{background:var(--surface-alt);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;
  padding:5px 8px;font-size:13px;font-family:inherit;cursor:pointer}
.season:focus{outline:none;border-color:var(--accent)}

/* ---- race tabs ---- */
.racetabs{background:var(--surface-alt);display:flex;overflow-x:auto;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.racetabs::-webkit-scrollbar{height:5px}
.racetabs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}
.rtab{flex:0 0 auto;color:var(--text-secondary);background:none;border:none;cursor:pointer;
  padding:14px 16px 12px;font-size:13px;font-weight:600;white-space:nowrap;
  border-bottom:3px solid transparent;font-family:inherit;line-height:1.2;text-align:center}
.rtab small{display:block;font-weight:400;font-size:11px;color:var(--text-faint);margin-top:2px}
.rtab.active{color:var(--text);border-bottom-color:var(--accent)}
.rtab.done small{color:var(--text-faint)}
.rtab.live{color:var(--danger-text)}
.rtab.live small{color:var(--danger-text)}

/* ---- body ---- */
.body{padding:18px}
.rdetails{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--border)}
.rdetails h2{margin:0 0 6px;font-size:18px;font-weight:500}
.rdetails .loc{color:var(--text-secondary);font-size:14px}
.rdetails a{color:var(--accent);text-decoration:none}
.rdetails a:hover{text-decoration:underline}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.4px;vertical-align:middle;margin-left:6px}
.badge.up{background:var(--accent-soft);color:var(--accent)}
.badge.live{background:var(--danger-bg);color:var(--danger-text)}
.badge.done{background:var(--success-bg);color:var(--success-text)}

/* weekend schedule strip */
.sched{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.schip{background:var(--surface-alt);border:1px solid var(--border);border-radius:10px;padding:7px 11px;
  font-size:12px;min-width:128px}
.schip .sl{color:var(--text-secondary);font-weight:600;display:flex;justify-content:space-between;gap:8px}
.schip .sd{margin-top:2px;font-weight:500}
.schip .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}
.dot.done{background:var(--success-text)} .dot.up{background:var(--accent)} .dot.live{background:var(--danger-text)}
.schip-caldd{display:flex;justify-content:flex-end;margin-top:6px}

/* add-to-calendar dropdown */
.caldd{position:relative;display:inline-block}
.calbtn{background:var(--card);border:1px solid var(--border-strong);border-radius:6px;cursor:pointer;
  font-size:11px;padding:3px 7px;color:var(--text-secondary);font-family:inherit;white-space:nowrap;line-height:1.4}
.calbtn:hover{color:var(--text);border-color:var(--accent)}
.calbtn.main{font-size:12px;padding:5px 10px;background:var(--surface-alt)}
.calico{margin-right:5px}
.calmenu{position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--border-strong);
  border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:30;min-width:190px;overflow:hidden;padding:4px;
  display:none}
.calmenu.open{display:block}
.calmenu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--text);padding:8px 10px;border-radius:6px;white-space:nowrap}
.calmenu button:hover{background:var(--surface-alt)}

/* inner tabs */
.itabs{display:flex;gap:4px;margin:16px 0 4px;border-bottom:1px solid var(--border)}
.itab{background:none;border:none;cursor:pointer;padding:9px 14px;font-size:14px;font-weight:600;
  color:var(--text-secondary);border-bottom:3px solid transparent;font-family:inherit;margin-bottom:-1px}
.itab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* tables */
.sectitle{font-size:15px;font-weight:600;margin:16px 0 4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:right;color:var(--text-secondary);font-weight:500;font-size:12px;padding:10px 8px;
  border-bottom:1px solid var(--border)}
th.l,td.l{text-align:left}
td{padding:11px 8px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:none}
.pos{color:var(--text-secondary);width:26px;text-align:center;font-variant-numeric:tabular-nums}
.drv{display:flex;align-items:center;gap:10px}
.flag{font-size:18px;line-height:1;width:22px;text-align:center}
.tcolor{width:3px;align-self:stretch;border-radius:3px;min-height:30px}
.dname{font-weight:600;line-height:1.15}
.dteam{color:var(--text-secondary);font-size:12px;line-height:1.2;margin-top:1px}
.mono{font-variant-numeric:tabular-nums}
.best{font-weight:700}
.pts{font-weight:700}
.fl{color:#9b59ff;font-weight:700;font-size:11px;margin-left:5px}

.count{background:var(--surface-alt);border:1px dashed var(--border-strong);border-radius:12px;padding:22px;text-align:center;margin-top:14px}
.count .big{font-size:26px;font-weight:700;margin:6px 0}
.count .small{color:var(--text-secondary);font-size:13px}

.note{color:var(--text-secondary);font-size:12px;padding:12px 18px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.note a{color:var(--accent);text-decoration:none}
.refresh{background:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;
  padding:4px 10px;font-size:12px;color:var(--text-secondary);font-family:inherit}

.stabs{display:flex;gap:18px;justify-content:center;padding:16px 0 0}
.stab{background:none;border:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--text-secondary);
  padding-bottom:10px;border-bottom:3px solid transparent;font-family:inherit}
.stab.active{color:var(--text);border-bottom-color:var(--accent)}

.loading,.err{padding:40px 18px;text-align:center;color:var(--text-secondary);font-size:14px}
.err button{margin-top:10px}
.spin{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:s 1s linear infinite;margin:0 auto 12px}
@keyframes s{to{transform:rotate(360deg)}}
@media(max-width:560px){
  .body{padding:14px} .dteam{font-size:11px} td,th{padding:9px 5px}
  .rtab{padding:12px 12px 10px}
}