/* ================= BASE ================= */
 :root{
     --f1-bg:#020617;
     --f1-panel:#0f172a;
     --f1-border:rgba(255,255,255,.08);
     --f1-text:#e5e7eb;
     --f1-muted:#9ca3af;
     --f1-blue:#93C5FD;
}
/* RESET */
 *{
     box-sizing:border-box;
}
 body{
     margin:0;
     background: radial-gradient(circle at top, #0f172a 0%, #020617 70%);
     color:var(--f1-text);
     font-family:'Titillium Web', sans-serif;
     min-height:100vh;
}
/* Links */
 a{
     color:var(--f1-blue);
     text-decoration:none;
}
 a:hover{
     color:#93c5fd;
}
/* Headings */
 h2{
     font-size:1.35rem;
     font-weight:800;
     letter-spacing:.06em;
     text-transform:uppercase;
}
/* ================= NAVBAR ================= */
 .f1-navbar{
     background:linear-gradient(180deg,#0f172a,#020617);
     border-bottom:1px solid rgba(96,165,250,.25);
     min-height:64px;
    /* ? fixes jumping height */
     padding:0 16px;
}
 .f1-navbar .container-fluid{
     min-height:64px;
}
 .f1-navbar .navbar-brand{
     color:var(--f1-blue);
     font-weight:900;
     font-size:1.25rem;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link{
     color:#cbd5e1;
     font-weight:700;
     letter-spacing:.05em;
     padding:0 16px;
     height:64px;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link:hover{
     color:var(--f1-blue);
}
 .f1-navbar .nav-link.active{
     color:var(--f1-blue);
     border-bottom:2px solid var(--f1-blue);
}
/* mobile toggler */
 .navbar-toggler{
     border-color:var(--f1-blue);
}
 .navbar-toggler-icon{
     filter:invert(1);
}
/* ===== SITE ===== */
/* ===== CONTAINER ===== */
 .container{
     max-width:1200px;
}
/* ===== RACE LIST ===== */
 .season-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:12px 24px;
}
/* Back to season */
 .season-back {
     text-decoration: none;
     font-weight: 700;
     font-size: 0.85rem;
     color: #3fe0a2;
}
 .season-back:hover {
     color: #6fffd1;
}
/* ================= SEASON RACE CARDS ================= */
 .race-card{
     position: relative;
     padding: 6px 8px 7px;
    /* MUCH tighter */
     background: linear-gradient(180deg,#0c1a26,#08121b);
     border: 1px solid #1b3550;
     border-radius: 6px;
     box-shadow: 0 0 6px rgba(0,120,255,.12);
}
/* Remove floaty movement – makes grid denser */
 .race-card:hover{
     box-shadow: 0 0 10px rgba(0,150,255,.25);
}
/* Race title + date */
 .race-link{
     font-size: 15px;
     line-height: 1.15;
     display:block;
     padding:12px 16px;
     background:#0f172a;
     border-radius:10px;
     border-left:4px solid #60a5fa;
     font-weight:700;
     transition:.15s;
}
 .race-link:hover{
     background:#020617;
     border-left-color:#93c5fd;
     transform:translateX(4px);
}
 .race-date{
     color:var(--f1-muted);
     font-size:0.85em;
     opacity:.75;
}
/* Status badge inside tile */
 .race-status{
     position:absolute;
     top:4px;
     right:6px;
}
 .race-status .badge{
     font-size: 10px;
     letter-spacing:.4px;
     padding:2px 6px;
     border-radius:12px;
     font-weight:400;
}
/* OPEN */
 .badge.bg-success{
     background:#1cffac !important;
     color:#003b22;
}

/* CLOSING */
 .badge.bg-closing{
     background:#FF6F00 !important;
    color:#FFFFFF;
}

/* LOCKED */
 .badge.bg-danger{
     background:#ff5c5c !important;
}

/* FINISHED */
 .badge.bg-secondary{
     background:#5b6f87 !important;
}
/* ================= F1 DRIVER PICK COLORS ================= */
/* Base select */
 .f1-select {
     max-width: 280px;
     width: 100%;
     padding: 6px 10px;
     font-weight: 650;
     letter-spacing: 0.02em;
     min-height: 30px;
     min-width: 300px;
     font-size: 0.92rem;
     border-radius: 8px;
     background-color: #0b1220;
     border: 1px solid rgba(255,255,255,.08);
     color: #e5e7eb;
     transition: all .2s ease;
}
/* Hover = highlight */
 .f1-select:hover {
     border-color: rgba(255,200,0,.5);
}
/* Focus = race ready */
 .f1-select:focus {
     outline: none;
     border-color: #ffcc33;
     box-shadow: 0 0 0 2px rgba(255,204,51,.25);
}
/* Changed picks glow */
 .f1-select.changed {
     border-color: #22c55e;
     box-shadow: 0 0 0 1px rgba(34,197,94,.6);
}
 .f1-select option:checked {
     font-weight: 900;
     background-color: #0b1220;
}
 .pole-select{
     margin-top: 2px;
     padding-bottom: 6px;
     margin-bottom: 6px;
     border-bottom: 1px dashed rgba(147,197,253,.25);
}
 .f1-pos-label{
     padding-top: 4px;
     text-align:left;
     font-weight:700;
     color:#fff;
}
/* Selected row in dropdown */
 .f1-select option:checked {
     outline:2px solid white;
}
/* Force the SELECT to always use its team color, never inherit grey from option rendering */
 .f1-select{
     -webkit-appearance: none;
     appearance: none;
     background-clip: padding-box;
}
/* Re-apply team background after option selection (Chrome fix) */
 .f1-select.team-redbull {
     background-color:#4781D7 !important;
}
 .f1-select.team-ferrari {
     background-color:#dc0000 !important;
}
 .f1-select.team-mercedes {
     background-color:#00d2be !important;
}
 .f1-select.team-mclaren {
     background-color:#ff8700 !important;
}
 .f1-select.team-astonmartin {
     background-color:#006f62 !important;
}
 .f1-select.team-alpine {
     background-color:#0090ff !important;
}
 .f1-select.team-williams {
     background-color:#00a3e0 !important;
}
 .f1-select.team-sauber {
     background-color:#52e252 !important;
}
 .f1-select.team-haas {
     background-color:#b6babd !important;
}
 .f1-select.team-racingbulls {
     background-color:#000B8D !important;
}
 .f1-select.team-audi {
     background-color:#F50537!important;
}
/* Race date next to GP title */
 h4 .text-muted{
     color: #aaa !important;
    /* lighter or darker */
     opacity: 0.8;
    /* control how muted */
     font-weight: 500;
     letter-spacing: 0.04em;
}
 .lock-modal{
     position:fixed;
     inset:0;
     background:rgba(0,0,0,.75);
     display:none;
     align-items:center;
     justify-content:center;
     z-index:9999;
}
 .lock-box{
     background:#111;
     border:2px solid gold;
     padding:30px 40px;
     border-radius:12px;
     color:#fff;
     max-width:400px;
     text-align:center;
     box-shadow:0 0 40px rgba(255,215,0,.5);
}
 .lock-actions{
     margin-top:25px;
     display:flex;
     justify-content:space-between;
}
 .lock-actions button{
     padding:10px 24px;
     border-radius:20px;
     border:none;
     font-weight:700;
}
 .confirm-lock{
     background:gold;
     color:#111;
}
/* ===== ADMIN ===== */
 .admin-filters{
     background:#0f172a;
     padding:10px 14px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
}
 .admin-filters span{
     color:#60a5fa;
     font-weight:900;
     letter-spacing:.06em;
     text-transform:uppercase;
}
 .admin-filters label{
     color:#cbd5e1;
     font-weight:700;
}
 .admin-filters .form-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:700;
}
 .admin-filters .form-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
/* ------------------------------------------------- Grid Picks ------------------------------------------------- */
/* F1 grid for picks */
 .f1-grid{
     display:grid;
     grid-template-columns: 40px 1fr;
     gap: 6px 6px;
     max-width:650px;
}
 .f1-row{
     display: contents;
}
 .f1-submit-wrapper {
     margin-top: 16px;
     padding-top: 12px;
     border-top: 1px solid rgba(255,255,255,.08);
}
 .f1-submit:hover{
     background:#ff1e1e;
}
 .f1-select.changed{
     animation:f1flash .2s ease;
}
 @keyframes f1flash{
     from{
         box-shadow:0 0 0px #fff;
    }
     to{
         box-shadow:0 0 10px #fff;
    }
}
/* ============ LANDING PAGE ============ */
 .landing-hero{
     display:grid;
     grid-template-columns: 1.2fr 1fr;
     min-height:60vh;
     align-items:center;
     gap:60px;
}
 .hero-content h1{
     font-size:3.4rem;
     font-weight:900;
     line-height:1.1;
}
 .hero-content span{
     color:#facc15;
}
 .hero-content p{
     margin-top:20px;
     font-size:1.2rem;
     color:#9ca3af;
}
 .hero-buttons{
     margin-top:30px;
     display:flex;
     gap:16px;
}
 .btn-gold{
     background:linear-gradient(135deg,#facc15,#f59e0b);
     color:#000;
     padding:14px 28px;
     border-radius:12px;
     font-weight:900;
}
 .btn-outline{
     border:2px solid #facc15;
     color:#facc15;
     padding:14px 28px;
     border-radius:12px;
     font-weight:800;
}
 .preview-card{
     background:rgba(15,23,42,.9);
     border-radius:20px;
     padding:24px;
     box-shadow:0 0 40px rgba(250,204,21,.15);
}
 .preview-row{
     padding:6px;
     margin-bottom:4px;
     border-radius:12px;
     font-weight:400;
}
 .preview-row.gold{
     background:rgba(250,204,21,.25);
}
 .preview-row.silver{
     background:rgba(203,213,225,.2);
}
 .preview-row.bronze{
     background:rgba(205,127,50,.25);
}
 .how-it-works{
     margin-top:20px;
     display:grid;
     grid-template-columns: repeat(3,1fr);
     gap:30px;
}
 .how-card{
     background:rgba(15,23,42,.9);
     padding:30px;
     border-radius:18px;
     text-align:center;
}
 .preview-header {
     text-align: center;
     font-size: 0.85rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(255, 215, 0, 0.85);
    /* gold glow */
     margin-bottom: 10px;
     font-weight: 600;
}
/* ============================ Hall of Fame Layout ============================ */
 h1 {
     text-align: center;
     font-size: 2.6rem;
     margin: 40px 0 10px;
     color: #ffd700;
     letter-spacing: 0.08em;
}
 h2 {
     margin: 50px 0 20px;
     font-size: 1.2rem;
     border-bottom: 2px solid rgba(255,215,0,0.3);
     padding-bottom: 8px;
     color: #fff;
}
/* ============================ Champions Wall ============================ */
 .hof-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
     gap: 20px;
}
 .hof-card {
     background: linear-gradient(145deg, #121212, #1b1b1b);
     border: 1px solid rgba(255,215,0,0.15);
     border-radius: 14px;
     padding: 18px;
     text-align: center;
     box-shadow: 0 8px 30px rgba(0,0,0,0.6);
     position: relative;
     overflow: hidden;
}
 .hof-card.champion::before {
     content: "πŸ†";
     position: absolute;
     top: 10px;
     right: 14px;
     font-size: 2rem;
     opacity: 0.2;
}
 .hof-season {
     font-size: 0.8rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
}
 .hof-name {
     font-size: 1.3rem;
     font-weight: 600;
     margin: 10px 0;
     color: #ffd700;
}
 .hof-points {
     font-size: 1rem;
     color: #fff;
     opacity: 0.9;
}
/* ============================ Dynasty Club ============================ */
 .dynasty-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
     gap: 15px;
}
 .dynasty-card {
     background: #111;
     border-left: 4px solid #ffd700;
     padding: 14px 18px;
     border-radius: 10px;
     font-weight: 600;
}
/* ============================ Tables (Podiums / All-Time) ============================ */
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
}
 th {
     text-align: left;
     padding: 12px;
     background: rgba(255,215,0,0.1);
     color: #ffd700;
     font-size: 0.95rem;
     letter-spacing: 0.1em;
}
 td {
     padding: 12px;
     border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* ================= BASE ================= */
 .f1-submit-row{
	max-width: 150px;
     display:flex;
     justify-content:flex-start;
    /* not center */
     padding-left:68px;
    /* same left as select boxes */
     margin-top:30px;
}
 .btn-outline:hover{
     border-color:#fde68a;
     color:#fde68a;
     background-color: rgba(250, 204, 21, 0.08);
    /* very subtle gold tint */
}
 .btn-outline:active{
     background-color: rgba(250, 204, 21, 0.15);
     border-color:#facc15;
     color:#facc15;
}
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 9999;
     background: linear-gradient(180deg, rgba(8,8,12,.98), rgba(4,4,6,.94));
     backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(255,215,0,.2);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 6px 22px;
}
 .nav-left {
     font-size: 1rem;
     letter-spacing: .05em;
}
 .nav-links a {
     padding: 4px 10px;
     margin-left: 14px;
     font-size: .9rem;
}
 body {
     padding-top: 98px;
}
 .page-login .container{
     display:flex;
     justify-content:center;
}
 .f1-login-card{
     background: linear-gradient(180deg,#0f172a,#020617);
     border:1px solid var(--f1-border);
     border-radius:18px;
     padding:32px 34px 36px;
     width:100%;
     max-width:420px;
    /* ? this fixes the “too wide” problem */
     box-shadow: 0 0 0 1px rgba(147,197,253,.1), 0 30px 80px rgba(0,0,0,.8);
}
 .f1-login-card form{
     display:flex;
     flex-direction:column;
     gap:14px;
    /* space between inputs + button */
}

 .f1-login-btn{
 	 margin-top: 10px;
     background: linear-gradient(180deg, rgba(147,197,253,.35), rgba(59,130,246,.12) ), linear-gradient(180deg,#0f172a,#020617);
     color: var(--f1-text);
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     font-size: .95rem;
     border: 1px solid rgba(147,197,253,.35);
     border-radius: 10px;
     padding: 10px 18px;
    /* ? smaller height */
     width: 100%;
     height: 44px;
    /* ? matches input height */
     box-shadow: 0 0 0 1px rgba(147,197,253,.12), 0 6px 18px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.05);
     transition: all .15s ease;
     cursor:pointer;
	 max-width: 100%;
}
/* Hover — armed */
 .f1-login-btn:hover{
     box-shadow: 0 0 0 1px rgba(147,197,253,.3), 0 8px 26px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.08);
     transform: translateY(-1px);
}
/* Active — ignition */
 .f1-login-btn:active{
     transform: translateY(2px);
     box-shadow: 0 0 0 1px rgba(147,197,253,.2), 0 3px 8px rgba(59,130,246,.3), inset 0 2px 5px rgba(0,0,0,.6);
}
 .f1-input{
     background: linear-gradient(180deg,rgba(147,197,253,.06),rgba(2,6,23,.9));
     border:1px solid rgba(147,197,253,.25);
     color: var(--f1-text);
     padding:6px 14px;
     border-radius:10px;
     width:100%;
     height:44px;
     font-size:.95rem;
     font-weight:500;
     letter-spacing:.02em;
     box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 1px rgba(147,197,253,.05);
     transition:.15s ease;
}
/* placeholder */
 .f1-input::placeholder{
     color: var(--f1-muted);
}
/* hover */
 .f1-input:hover{
     border-color: rgba(147,197,253,.45);
}
/* focus — live terminal */
 .f1-input:focus{
     outline:none;
     border-color: var(--f1-blue);
     box-shadow: 0 0 0 2px rgba(147,197,253,.35), inset 0 1px 3px rgba(0,0,0,.7);
}
 .f1-alert{
     border-radius:12px;
     padding:14px 16px;
     margin-bottom:16px;
     font-weight:600;
     letter-spacing:.02em;
     border:1px solid;
     box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
/* ERROR – red race warning */
 .f1-alert-error{
     background: linear-gradient(180deg,#3b0a0a,#140202);
     border-color: #dc2626;
     color:#fecaca;
     box-shadow: 0 0 12px rgba(220,38,38,.4), inset 0 0 10px rgba(0,0,0,.8);
}
/* SUCCESS – green system ok */
 .f1-alert-success{
     background: linear-gradient(180deg,#052e16,#020617);
     border-color:#22c55e;
     color:#bbf7d0;
     box-shadow: 0 0 12px rgba(34,197,94,.4), inset 0 0 10px rgba(0,0,0,.8);
}

 .f1-form-row > div {
     flex: 1;
}
 .f1-form-btn {
     flex: 0;
}
 .f1-btn-sm {
     background: linear-gradient(135deg,#2563eb,#3b82f6);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(59,130,246,.35);
     transition: .15s ease;
}
 .f1-btn-sm:hover {
     box-shadow: 0 0 18px rgba(59,130,246,.6);
     transform: translateY(-1px);
}
 .f1-btn-danger-sm {
     background: linear-gradient(135deg,#7f1d1d,#dc2626);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(220,38,38,.4);
     transition: .15s ease;
}
 .f1-btn-danger-sm:hover {
     box-shadow: 0 0 18px rgba(220,38,38,.7);
     transform: translateY(-1px);
}
 .f1-form-row {
     display: grid;
     grid-template-columns: 2fr 2fr 1fr auto;
     gap: 18px;
     align-items: end;
}

 .f1-form-row label {
     font-size: .85rem;
     color: var(--f1-muted);
     margin-bottom: 6px;
     display: block;
}
 .f1-form-row .f1-logihn-btn {
     height: 46px;
     padding: 0 26px;
}
 .f1-admin-card {
     background: linear-gradient(180deg,#0b1222,#050914);
     border: 1px solid rgba(255,255,255,.08);
     border-radius: 20px;
     padding: 20px 24px;
     box-shadow: inset 0 0 40px rgba(255,255,255,.04), 0 0 60px rgba(59,130,246,.15);
}
/* FORCE horizontal admin add row */
/* --- Add Driver horizontal bar --- */
 .f1-add-row{
     display:flex !important;
     align-items:flex-end;
     gap:16px;
     width:100%;
}
/* Input columns */
 .f1-add-row .field{
     display:flex;
     flex-direction:column;
}
/* Width control */
 .f1-add-row .name {
     flex:2;
}
 .f1-add-row .team {
     flex:2;
}
 .f1-add-row .num {
     flex:1;
     max-width:90px;
}
/* Prevent button from stretching */
 .f1-add-row button{
     flex:0 0 140px;
     width:140px;
     height:46px;
     margin:0;
     align-self:flex-end;
}
/* ===== F1 Admin Results ===== */
 .admin-filters{
     margin-bottom:20px;
}
/* Compact selects */
 .compact{
     width:100%;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     padding:6px 10px;
     border:1px solid rgba(255,255,255,0.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
}
/* Add-result container */
 .f1-add-results{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Save/Delete buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     margin-bottom:8px;
     width:100%;
}
 .f1-btn-delete{
     background:linear-gradient(180deg,#ff6b6b,#c0392b);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(255,80,80,.6);
     width:100%;
}
 .f1-btn-save:hover{
     filter:brightness(1.1);
}
 .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* Race blocks */
 .race-block-even{
     background:rgba(0,0,0,.25);
}
 .race-block-odd{
     background:rgba(0,0,0,.35);
}
/* ===== F1 Races Admin ===== */
 .f1-race-panel{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     width:100%;
     margin-bottom:8px;
}
 .f1-btn-save:hover, .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* ===== Admin compact tables ===== */
 .admin-table{
     width:100%;
     table-layout: fixed;
    /* THIS is the key */
     border-collapse: collapse;
}
/* Cells */
 .admin-table th, .admin-table td{
     white-space:nowrap;
     padding:8px 10px;
     text-align:center;
}
/* Compact inputs inside admin tables */
 .admin-table input, .admin-table select{
     width:auto;
     min-width:60px;
     padding:6px 10px;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     border:1px solid rgba(255,255,255,.12);
     box-shadow: inset 0 0 10px rgba(0,150,255,.2);
}
/* Larger fields */
 .admin-table input[name="name"]{
     min-width:180px;
}
 .admin-table input[type="date"], .admin-table input[type="datetime-local"]{
     min-width:160px;
}
/* Checkboxes */
 .admin-table input[type="checkbox"]{
     transform:scale(1.3);
     accent-color:#4e7cff;
}
/* Admin buttons */
 .admin-table .f1-btn-save{
     width:100%;
}
 .admin-table .f1-btn-delete{
     width:100%;
}
/* Horizontal scroll for admin tables */
 .admin-table-wrap{
     overflow-x:auto;
     padding-bottom:10px;
}
/* ===== Force widths for admin race table fields ===== */
/* Season */
 .admin-table input[name="season"]{
     width:80px;
}
/* Round */
 .admin-table input[name="round"]{
     width:70px;
     text-align:center;
}
/* Date */
 .admin-table input[name="race_date"]{
     width:140px;
}
/* Reminder */
 .admin-table input[name="reminder_time"]{
     width:190px;
}
/* Race name */
 .admin-table input[name="name"]{
     width:200px;
}
 .admin-table th:last-child, .admin-table td:last-child{
     width:140px;
     min-width:140px;
     max-width:140px;
     text-align:center;
}
 .admin-table th:nth-child(6), .admin-table td:nth-child(6){
     width:220px;
}
 .admin-table th:nth-child(3), .admin-table td:nth-child(3){
     width:70px;
     text-align:center;
}
 .admin-table td input{
     width:100%;
     max-width:100%;
     box-sizing:border-box;
}
/* Fix admin table button sizing */
 .admin-table td:last-child{
     padding:6px 8px;
     vertical-align:middle;
}
/* Compact Save button */
 .admin-table .btn-save{
     height:38px;
     min-height:38px;
     padding:0 18px;
     font-size:14px;
     border-radius:12px;
     background:linear-gradient(180deg,#5f7cff,#3b56d9);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(90,120,255,.35), inset 0 0 10px rgba(255,255,255,.15);
     cursor:pointer;
}
/* Hover effect */
 .admin-table .btn-save:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(90,120,255,.55), inset 0 0 14px rgba(255,255,255,.2);
}
/* Delete button */
 .admin-table .btn-delete{
     height:38px;
     min-height:38px;
     padding:0 14px;
     margin-top:6px;
     font-size:13px;
     border-radius:12px;
     background:linear-gradient(180deg,#ff5a5a,#cc2f2f);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(255,90,90,.4), inset 0 0 10px rgba(255,255,255,.12);
     cursor:pointer;
}
 .admin-table .btn-delete:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(255,90,90,.65), inset 0 0 14px rgba(255,255,255,.18);
}
/* Allow Actions column to grow vertically */
 .admin-table td.actions{
     overflow: visible !important;
     height: auto !important;
     padding-top: 10px;
     padding-bottom: 10px;
}
/* Stack buttons vertically inside Actions */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:8px;
     align-items:center;
}
/* Allow admin rows to grow vertically */
 .admin-table tr{
     height: auto !important;
     min-height: 0 !important;
     overflow: visible !important;
}
/* Make action cells flexible */
 .admin-table td.actions{
     overflow: visible !important;
     vertical-align: middle;
}
/* Stack buttons */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:10px;
     align-items:center;
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown{
     background: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 14px 20px 16px;
     box-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:20px;
}
 .f1-countdown-label{
     font-size: .7rem;
     font-weight: 800;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--f1-blue);
     opacity: .85;
     margin-bottom: 6px;
}
/* Time row */
 .f1-countdown-time{
     display: flex;
     align-items: baseline;
     gap: 6px;
     font-family: 'Titillium Web', sans-serif;
}
/* Units */
 .f1-countdown-time .unit{
     display: flex;
     align-items: baseline;
     gap: 2px;
}
 .f1-countdown-time b{
     font-size: 1.6rem;
     font-weight: 900;
     color: #facc15;
     text-shadow: 0 0 14px rgba(250,204,21,.65);
     min-width: 2ch;
     text-align: right;
}
 .f1-countdown-time em{
     font-size: .65rem;
     font-style: normal;
     font-weight: 700;
     letter-spacing: .12em;
     color: var(--f1-muted);
     margin-left: 2px;
}
/* Separators */
 .f1-countdown-time .sep{
     font-size: 1.4rem;
     font-weight: 900;
     color: rgba(255,255,255,.4);
     margin: 0 2px;
}
/* Blinking last colon (broadcast feel) */
 .f1-countdown-time .blink{
     animation: blink 1s steps(1) infinite;
}
 @keyframes blink{
     50%{
         opacity: 0;
    }
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown.warning{
     border-color: #e10600;
     box-shadow: 0 0 25px rgba(225,6,0,.6), inset 0 0 20px rgba(225,6,0,.25);
}
 .f1-countdown.warning .f1-countdown-label{
     color: #e10600;
}
 .f1-countdown.warning b{
     color: #ff5c5c;
     text-shadow: 0 0 16px rgba(255,92,92,.9);
}
/* ================= F1 SUBMIT BUTTON ================= */
 .f1-row:last-child{
     margin-top: 18px;
}
 @media (max-width: 600px){
     .f1-submit-gold{
         width: 100%;
         text-align: center;
    }
}
 .f1-race-header.warning + form .f1-submit-gold{
     background: linear-gradient( 135deg, #e10600, #ff5c5c, #e10600 );
     color: #fff;
     box-shadow: 0 0 0 1px rgba(225,6,0,.9), 0 10px 30px rgba(225,6,0,.7);
}
/* Container above the grid */
 .last-race-btn-wrap {
     margin-bottom: 15px;
     text-align: left;
    /* aligns left with the form */
}
/* Align vertically with countdown box if needed */
 #f1CountdownWrapper form.ms-3 {
     display: flex;
     align-items: center;
}
 .f1-submit-btn {
     position: relative;
     padding: 7px 10px;
    /* slightly wider, not taller */
     font-size: 0.82rem;
    /* more readable */
     letter-spacing: 0.06em;
     font-weight: 700;
     text-transform: uppercase;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     background: linear-gradient(135deg,#ffb300,#ffcc33,#ffb300);
     color: #1a1a1a;
     box-shadow: 0 0 0 2px rgba(255,200,0,.4), 0 8px 18px rgba(255,180,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
     transition: all .25s ease;
}
/* Hover */
 .f1-submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 0 0 1px rgba(255,200,0,.35), 0 6px 14px rgba(255,180,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Pressed */
 .f1-submit-btn:active {
     transform: translateY(1px);
     box-shadow: 0 0 0 1px rgba(255,220,80,.6), 0 10px 24px rgba(255,180,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
/* Disabled */
 .f1-submit-btn:disabled {
     background: linear-gradient(135deg,#777,#999);
     color: #222;
     cursor: not-allowed;
     box-shadow: none;
     opacity: .6;
}
/* ----------------- Lock in Picks ----------------- */
.f1-btn-row button {
      width: 100%;
    }
 .f1-submit-gold {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(180deg,#052e16,#020617);
    /* login-style success base */
     border: 1px solid #22c55e;
    /* success border by default */
     color: #bbf7d0;
    /* matching login success text */
     font-weight: 700;
     font-size: 0.9rem;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     border-radius: 6px;
     cursor: pointer;
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(34,197,94,.8), 0 8px 28px rgba(34,197,94,.45);
     transition: all .12s ease;
}
/* Make Lock in Picks same height as Use Last Race Picks */
 .f1-submit-gold:hover {
     background: linear-gradient(180deg,#065e1f,#02270a);
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(34,197,94,1), 0 12px 36px rgba(34,197,94,.7);
}
 .f1-submit-gold:active {
     transform: translateY(1px);
     box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(34,197,94,.9);
}
 .f1-submit-gold:disabled {
     background: linear-gradient(180deg,#3b0a0a,#140202);
    /* locked/error style */
     border: 1px solid #dc2626;
     color: #fecaca;
     cursor: not-allowed;
     box-shadow: none;
}
/* ----------------- Use Last Race Picks ----------------- */
 .btn-copy-last {
     background: linear-gradient(180deg, #020617, #020617);
    /* near-black */
     border: 1px solid rgba(96, 165, 250, 0.45);
    /* #60a5fa glow border */
     color: #93C5FD;
    /* base blue text */
     font-weight: 700;
     font-size: 0.9rem;
     margin-bottom: 10px;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     box-shadow: 0 0 10px rgba(96, 165, 250, 0.15);
}
 .btn-copy-last:hover:not(:disabled) {
     background: linear-gradient(180deg, #020617, #020617);
     border-color: #60a5fa;
     color: #e0f2fe;
    /* brighter sky text */
     box-shadow: 0 0 12px rgba(96, 165, 250, 0.55), inset 0 0 8px rgba(96, 165, 250, 0.25);
}
 .btn-copy-last:disabled {
     background: linear-gradient(180deg, #020617, #020617);
     border: 1px solid rgba(148, 163, 184, 0.25);
     color: rgba(148, 163, 184, 0.5);
     cursor: not-allowed;
     box-shadow: none;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
    /* wrap on small screens */
}
 .f1-header-msg {
     white-space: nowrap;
     font-size: 0.95rem;
     line-height: 1.2;
}
 .f1-submit-gold {
     m8in-width: 150px;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
    /* wraps on small screens */
}
 .f1-countdown {
     display: flex;
     align-items: center;
     padding: 16px;
     border-radius: 12px;
     background: rgba(0,0,0,0.5);
     min-height: 80px;
    /* sets a consistent height */
}
 .f1-top-controls form {
     display: flex;
     align-items: stretch;
    /* make buttons match countdown height */
}
 .f1-top-controls button {
     min-height: 80px;
    /* same as countdown height */
     padding: 0 20px;
     font-size: 1rem;
     border-radius: 12px;
}
 .f1-msg {
     padding: 6px 24px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: .04em;
     white-space: nowrap;
}
/* ------------------ Messages match login card style ------------------ */
 .f1-msg-success {
     color: #22c55e;
     animation: f1-success-pulse 0.9s ease-out;
}
 @keyframes f1-success-pulse {
     0% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
     30% {
         transform: scale(1.08);
         text-shadow: 0 0 16px rgba(34,197,94,0.9);
    }
     100% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
}
 .f1-msg-success {
     color: #22c55e;
     position: relative;
     overflow: hidden;
}
 .f1-msg-success::after {
     content: '';
     position: absolute;
     top: 0;
     left: -120%;
     width: 120%;
     height: 100%;
     background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
     animation: f1-shine 1.2s ease-out;
}
 @keyframes f1-shine {
     to {
         left: 120%;
    }
}
 .f1-msg-error {
     color: #dc2626;
     animation: f1-shake 0.4s ease-in-out;
}
 @keyframes f1-shake {
     0% {
         transform: translateX(0);
    }
     25% {
         transform: translateX(-6px);
    }
     50% {
         transform: translateX(6px);
    }
     75% {
         transform: translateX(-4px);
    }
     100% {
         transform: translateX(0);
    }
}
 .f1-msg-warn {
     color: #ff8700;
     animation: f1-warn-glow 1.2s ease-in-out infinite alternate;
}
 @keyframes f1-warn-glow {
     from {
         text-shadow: 0 0 0 rgba(255,135,0,0);
    }
     to {
         text-shadow: 0 0 10px rgba(255,135,0,.9);
    }
}
/* Hover highlight for clickable rows */
 .race-row {
     cursor: pointer;
     transition: all 0.2s ease;
}
 .race-row:hover {
     background: rgba(15, 23, 42, 0.85);
    /* deep slate like admin-filters */
     box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35), 0 0 18px rgba(96, 165, 250, 0.25);
     color: #e0f2fe;
    /* soft sky text */
}
 .custom-select .options {
     position: absolute;
     top: 36px;
    /* same distance from top of select box */
     left: 0;
     right: 0;
}
/* Navbar group dropdown custom style */
/* =============================== User + Group Switcher (Navbar) =============================== */
 .user-group-nav .nav-link {
     font-weight: 600;
}
/* Active group (blue text) */
 .group-switch {
     color: #93C5FD !important;
     font-weight: 700;
}
/* Remove Bootstrap caret color */
 .group-switch::after {
     filter: brightness(1.3);
}
/* Dropdown container */
 .group-dropdown {
     background: #0f172a;
    /* navbar blue */
     border: none;
     border-radius: 0 0 10px 10px;
     box-shadow: 0 10px 30px rgba(0,0,0,.35);
     padding: 6px 0;
}
/* Dropdown items */
 .group-dropdown-item {
     color: #93C5FD;
     font-weight: 600;
     padding: 8px 18px;
     background: transparent;
}
/* Hover effect */
 .group-dropdown-item:hover {
     background: rgba(255,255,255,0.08);
     color: #ffffff;
}
/* Active group */
 .group-dropdown-item.active {
     color: #ffffff;
     background: rgba(255,255,255,0.15);
}
/* Remove Bootstrap default white */
 .dropdown-menu {
     --bs-dropdown-bg: transparent;
     --bs-dropdown-link-hover-bg: transparent;
     --bs-dropdown-link-active-bg: transparent;
}
/* =============================== Pulse when picks close soon =============================== */
 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(220,53,69,.6);
    }
     70% {
         box-shadow: 0 0 0 10px rgba(220,53,69,0);
    }
     100% {
         box-shadow: 0 0 0 0 rgba(220,53,69,0);
    }
}
 .badge-pulse {
     animation: pulse 1.2s infinite;
}
/* =============================== Dimmed / locked races =============================== */
 .race-locked {
     opacity: 0.65;
     pointer-events: none;
}
/* =============================== Race card visuals =============================== */
 .race-card {
     transition: opacity 0.25s ease, filter 0.25s ease;
}
 .race-status {
     margin-top: 6px;
}
 .race-card.race-dim .race-locked {
     opacity: 0.65;
}
/* Optional: keep text readable */
 .race-card.race-dim .race-link, .race-card.race-dim .race-status {
     opacity: 1;
}
/* Optional: cursor + subtle feel */
 .race-card.race-dim {
     filter: grayscale(15%);
}
 .race-card.race-dim:hover {
     opacity: 0.75;
}
 .badge-pulse {
     position: relative;
     z-index: 2;
}
 .mini-bonus {
     color: gold;
     font-size: 11px;
     margin-left: 4px;
     vertical-align: middle;
}
/* ===== Bonus legend ===== */
 .bonus-legend {
     display: flex;
     align-items: center;
    /* ? vertical centering */
     flex-wrap: wrap;
     gap: 10px 14px;
     margin-top: 14px;
     margin-bottom: 28px;
     padding: 10px 12px;
     background: var(--f1-panel);
     border: 1px solid var(--f1-border);
     border-radius: 10px;
     font-size: 0.75rem;
     color: var(--f1-muted);
}
 .bonus-legend strong {
     color: var(--f1-text);
     font-weight: 600;
     margin-right: 4px;
}
 .bonus-legend span {
     background: rgba(147, 197, 253, 0.08);
    /* f1-blue hint */
     border: 1px solid rgba(147, 197, 253, 0.25);
     color: var(--f1-blue);
     padding: 3px 8px;
     border-radius: 999px;
    /* pill style */
     font-weight: 600;
     white-space: nowrap;
}
/* =============================== LEADERBOARD BASE =============================== */
 .leaderboard {
     border-collapse: collapse;
     width: 100%;
}
 .leaderboard-wrap {
     width: 100%;
     overflow-x: auto;
}
 table.leaderboard {
     width: 100%;
     border-collapse: collapse;
     background: #0f172a;
     border-radius: 14px;
     overflow: hidden;
}
/* =============================== CELLS =============================== */
 .leaderboard th, .leaderboard td {
     padding: 5px 7px;
     font-size: 0.85rem;
     line-height: 1.15;
     vertical-align: middle;
     border: 1px solid #333;
     text-align: center;
     white-space: nowrap;
}
/* All headers */
 .leaderboard th {
     background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
     padding-top: 6px;
     padding-bottom: 6px;
     color: #ffffff;
     font-weight: 700;
     position: sticky;
     top: 0;
     z-index: 4;
	 border-bottom: 2px solid rgba(255,255,255,.25);
}

/* =============================== PICK CELLS =============================== */
 .leaderboard-picks th {
     position: relative;
     padding: 6px 8px 6px;
     font-weight: 700;
}
 .leaderboard-picks td {
     position: relative;
     padding: 6px 8px 22px;
     font-weight: 400;
}
/* Score bubble */
 .leaderboard-picks .score {
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 0.72rem;
     font-weight: 600;
     color: #3fe0a2;
     background: rgba(63,224,162,0.18);
     border-radius: 999px;
     padding: 2px 9px;
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4);
}
/* Glow for tables that have scores */
 .leaderboard:has(.score) td {
     background: rgba(255,255,255,0.03);
     border-radius: 8px;
}
/* Correct picks */
 .leaderboard-picks td.correct_pk {
     background: linear-gradient( 180deg, rgba(63,224,162,.22), rgba(63,224,162,.06) );
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4), 0 0 10px rgba(63,224,162,.15);
}
/* Player */
 .leaderboard-picks .player {
     font-weight: 700;
     font-size: 0.85rem;
     vertical-align: middle;
     background: linear-gradient( 180deg, rgba(63,224,162,.35), rgba(63,224,162,.12) );
     border-radius: 10px;
}


/* Base style for total */
 td.player {
     font-weight: bold;
     text-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #ffff;
    /* default background */
     transition: all 0.3s ease;
}

/* Red score bubble for wrong picks */
 .leaderboard-picks td.wrong .score {
     color: #ff6b6b;
     background: rgba(224,63,63,0.18);
     box-shadow: inset 0 0 0 1px rgba(224,63,63,.4);
}
/* Optional: partial score bubble */
 .leaderboard-picks td.partial .score {
     color: #ff9f1c;
     background: rgba(255,165,0,0.18);
     box-shadow: inset 0 0 0 1px rgba(255,165,0,0.4);
}
/* ================= TOTAL COLUMN ================= */
/* Base style for total */
 td.total-score {
     font-weight: bold;
     tex6t-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #222;
    /* default background */
     transition: all 0.3s ease;
}
/* =============================== ADMIN INPUTS =============================== */
 .leaderboard input, .leaderboard select {
     width: 100%;
     background: #0b1020;
     color: #fff;
     border-radius: 10px;
     padding: 5px 8px;
     border: 1px solid rgba(255,255,255,.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
     font-size: 0.85rem;
}
 .leaderboard input[type="checkbox"] {
     transform: scale(1.25);
     accent-color: #4e7cff;
}
 td.total-score.normal {
     color: #D3D3D3;
    /* plain white text */
     background: rgba(205, 127, 50, 0.05);
    /* subtle gray/transparent */
     font-weight: 400 !important;
}
/* Highlight the top 1 scorer */
 td.total-score.top1 {
     baackground: rgba(255, 215, 0, 0.10) !important;
     color: #b9a200 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 2nd place */
 td.total-score.top2 {
     baackground: rgba(192, 192, 192, 0.10) !important;
     color: #999B9B !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 3rd place */
 td.total-score.top3 {
     baackground: rgba(205, 127, 50, 0.10) !important;
     color: #b07a45 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Clickable cells */
 .leaderboard td.clickable {
     cursor: pointer;
}
/* Actual Qualifying & Race Result Table (1/2 width, left-aligned) */
 .leaderboard-results-wrap {
     widtth: 50%;
    /* 1/3 of page width */
     margin: 0 0 20px 0;
    /* top/bottom spacing, left-aligned */
     overflow-x: auto;
    /* allow horizontal scroll if needed */
}
 .leaderboard-results-wrap table {
     width: 100%;
     border-collapse: collapse;
}
 .leaderboard-results-wrap th, .leaderboard-results-wrap td {
     padding: 6px 10px;
     text-align: center;
}
/* =============================== PODIUM COLORS - Races =============================== */
 .leaderboard td.podium-bronze:nth-child(n+3) {
     background: rgba(205, 127, 50, 0.05) !important;
     color: #b07a45 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-gold:nth-child(n+3) {
     background: rgba(255, 215, 0, 0.05) !important;
     color: #b9a200 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-silver:nth-child(n+3) {
     background: rgba(192, 192, 192, 0.05) !important;
     color: #999B9B !important;
     font-weight: 700 !important;
}
/* =============================== PODIUM COLORS - Total - Line 3 first 3 columns formatting =============================== */
/* BRONZE */
 .laeaderboard tbody tr:nth-child(4) td.user-cell:nth-child(-n+3) {
     color: #b07a45 !important;
     font-weight: 900 !important;
}
/* GOLD */
 .leaaderboard tbody tr:nth-child(2) td.user-cell:nth-child(-n+3) {
     color: #b9a200 !important;
     font-weight: 900 !important;
}
/* SILVER */
 .leaaderboard tbody tr:nth-child(3) td.user-cell:nth-child(-n+3) {
     color: #999B9B !important;
     font-weight: 900 !important;
}
/* =============================== STICKY COLUMNS =============================== */
 .leaderhboard-wrap {
     overflow-x: auto;
     position: relative;
}
/* =============================== HEADER COLORS =============================== */
 .leaderboard td {
     background: #0b1020;
     box-shadow: -2px 0 8px rgba(0,0,0,.4);
}

/* ================= COLUMN HOVER LINE ================= */
 .hover-columns {
     position: relative;
}

/* =============================== RACE HEADER =============================== */
 .leaderboard th.race-header {
     position: relative;
     color: #60A5FA;
     font-weight: 700;
     letter-spacing: 0.45px;
     text-transform: uppercase;
}
 .leaderboard th.race-header::after {
     content: "";
     position: absolute;
     left: 20%;
     right: 20%;
     bottom: -2px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #e10600, transparent);
     opacity: 0.6;
     transition: all .2s ease;
}
 .leaderboard th.race-header:hover::after {
     left: 8%;
     right: 8%;
     opacity: 1;
}
 .season-select {
     background:#0f172a;
     padding-top:2px;
     padding-bottom:2px;
     padding-left:16px;
     padding-right:16px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
     margin-left: 24px;
    /* try 12–24px */
}
 .admin-filters .season-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:500;
}
 .admin-filters .season-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
 #race-tooltip {
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     background: linear-gradient(180deg, #1b2042, #0b1020);
     color: #fff;
     padding: 6px 10px;
     border-radius: 8px;
     font-size: 0.75rem;
     font-weight: 600;
     white-space: nowrap;
     border: 1px solid rgba(255,255,255,0.12);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 10px 28px rgba(0,0,0,0.65), inset 0 0 10px rgba(255,0,0,0.2);
     opacity: 0;
     transform: translateY(6px);
     transition: opacity .15s ease-out, transform .18s cubic-bezier(.2,.8,.2,1);
}
 #race-tooltip::before {
     content: "";
     position: absolute;
     top: 0;
     left: 10px;
     right: 10px;
     height: 2px;
     background: linear-gradient( 90deg, transparent, #e10600, transparent );
     border-radius: 2px;
}
/* Center bonus number vertically + horizontally */
 .leaderboard-picks .bonus-score {
     font-size: 0.85rem;
     font-weight: 700;
     padding: 2px 8px;
     vertical-align: middle;
     border-radius: 999px;
     background: rgba(78,124,255,0.18);
     color: #22c55e;
     line-height: 1;
}

/* zero bonus */
 .leaderboard-picks .bonus-score.is-zero {
     color: var(--f1-muted);
     background: transparent;
     box-shadow: none;
     font-weight: 500;
}
/*IMPROVEMENTS */
 .leaderboard-picks .score {
     color: #22c55e;
     background: rgba(34,197,94,.15);
     box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
}
 .leaderboard-picks td.wrong .score {
     color: #ef4444;
     background: rgba(239,68,68,.15);
     box-shadow: inset 0 0 0 1px rgba(239,68,68,.35);
}
 .leaderboard-picks td.partial .score {
     color: #f59e0b;
     background: rgba(245,158,11,.15);
     box-shadow: inset 0 0 0 1px rgba(245,158,11,.35);
}

 .leaderboard-picks .score {
     line-height: 1;
}
 .leaderboard input, .leaderboard select {
     background: var(--f1-bg);
     border: 1px solid var(--f1-border);
     box-shadow: inset 0 0 0 1px rgba(147,197,253,.15);
}

/* =================================
   RULES ACCORDION – SINGLE PANEL (CLEAN)
   ================================= */
.rules-subtitle strong {
    color: #facc15;
}


#rulesAccordion {
    margin-top: 0.25rem;
    background: linear-gradient(180deg, #0b1222, #050914);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(255,255,255,.04);
}

/* Items become rows */
#rulesAccordion .accordion-item {
    background: transparent;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* Divider between rows */
#rulesAccordion .accordion-item + .accordion-item {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Header */
#rulesAccordion .accordion-header {
    margin: 0;
}

#rulesAccordion .accordion-button {
    background: transparent;
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.25;
}

/* Active */
#rulesAccordion .accordion-button:not(.collapsed) {
    color: #facc15;
    background: rgba(250,204,21,0.06);
}

/* Focus */
#rulesAccordion .accordion-button:focus {
    box-shadow: none;
}

/* Chevron */
#rulesAccordion .accordion-button::after {
    filter: invert(1);
    opacity: 0.7;
}

/* Body */
#rulesAccordion .accordion-collapse {
    background: rgba(255,255,255,0.02);
}

#rulesAccordion .accordion-body {
    padding: 0.55rem 0.9rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

/* Text */
#rulesAccordion strong {
    color: #facc15;
}

/* Lists */
#rulesAccordion .accordion-body ul {
    padding-left: 1.6rem;
    margin-left: 0;
}

#rulesAccordion .accordion-body li {
    padding-left: 0.2rem;
}

#rulesAccordion li::marker {
    content: "";
}

#rulesAccordion {
    list-style: none;
    padding-left: 0; /* optional: removes default indent */
}

/* Tables */
#rulesAccordion table {
    margin: 0.4rem 0;
    background: transparent;
    color: #fff;
}

#rulesAccordion thead {
    background: rgba(255,255,255,0.08);
    color: #ffd700;
}

#rulesAccordion td,
#rulesAccordion th {
    border-color: rgba(255,255,255,0.15);
}

/* Rounded ends */
#rulesAccordion .accordion-item:first-child .accordion-button {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

#rulesAccordion .accordion-item:last-child .accordion-collapse {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Desktop */
@media (min-width: 992px) {
    #rulesAccordion .accordion-button {
        font-size: 0.9rem;
        padding: 0.45rem 0.85rem;
    }
}
/* Active indicator bar */
#rulesAccordion .accordion-item {
    position: relative;
}

#rulesAccordion .accordion-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: linear-gradient(180deg, #facc15, #eab308);
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.2s ease, transform 0.25s ease;
    border-radius: 2px;
}

/* Show when active */
#rulesAccordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
    opacity: 1;
    transform: scaleY(1);
}
/* Scroll-highlight */
#rulesAccordion .accordion-item.is-visible > .accordion-header .accordion-button {
    background: rgba(96,165,250,0.08);
}
/* ===============================
   RULES ACCORDION – TABLE WIDTH FIX
   =============================== */

/* Let tables size to content */
#rulesAccordion table {
    width: auto !important;          /* <-- key line */
    max-width: 100%;
    margin: 0.75rem 0 !important;    /* left aligned */
    display: inline-table;           /* prevents stretching */
}

/* Kill Bootstrap full-width behavior */
#rulesAccordion .table {
    width: auto !important;
}

/* Dark theme enforcement */
#rulesAccordion table,
#rulesAccordion thead,
#rulesAccordion tbody,
#rulesAccordion tr,
#rulesAccordion th,
#rulesAccordion td {
    background-color: transparent !important;
}

/* Header row */
#rulesAccordion thead th {
    background: rgba(250, 204, 21, 0.14) !important;
    color: #facc15 !important;
    white-space: nowrap;
}

/* Body rows */
#rulesAccordion tbody tr {
    background: rgba(255,255,255,0.03) !important;
}

#rulesAccordion tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.06) !important;
}

/* Text */
#rulesAccordion td,
#rulesAccordion th {
    color: #e5e7eb !important;
    white-space: nowrap;
}
/* ===============================
   POINTS LIST – TABLELESS
   =============================== */

#rulesAccordion .points-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 1.5rem;
    width: fit-content;
    margin: 0.75rem 0;
}

/* Row */
#rulesAccordion .points-list > div {
    display: contents;
}

/* Position label */
#rulesAccordion .points-list span {
    color: #e5e7eb;
    font-weight: 500;
    white-space: nowrap;
}

/* Points value */
#rulesAccordion .points-list strong {
    color: #facc15;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* Optional subtle divider every row */
#rulesAccordion .points-list span,
#rulesAccordion .points-list strong {
    padding: 0.15rem 0;
}

/* Slight glow on hover (optional but nice) */
#rulesAccordion .points-list > div:hover span,
#rulesAccordion .points-list > div:hover strong {
    color: #fde68a;
}
#rulesAccordion .points-list div:nth-child(-n+3) strong {
    color: #ffd700;
}
@media (max-width: 600px) {
    #rulesAccordion .points-list {
        grid-template-columns: 1fr auto;
        width: 100%;
    }
}
/* Dark theme links inside rules accordion */
#rulesAccordion a {
    color: #facc15; /* soft gold */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 204, 21, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

#rulesAccordion a:hover {
    color: #fde047; /* brighter gold */
    border-bottom-color: rgba(250, 204, 21, 0.75);
}

/* Optional: subtle external-link cue */
#rulesAccordion a[target="_blank"]::after {
    content: "?";
    font-size: 0.75em;
    margin-left: 0.25rem;
    opacity: 0.6;
}
/* Fix invisible dropdown text */
select.f1-input {
    background-color: #111;
    color: #fff;
    border: 1px solid #444;
}

/* Dropdown options */
select.f1-input option {
    background-color: #111;   /* menu background */
    color: #fff;             /* text */
}

/* Hovered option (Chrome / Edge) */
select.f1-input option:hover {
    background-color: #e10600;
    color: #fff;
}

/* Selected option inside list */
select.f1-input option:checked {
    background-color: #e10600;
    color: #fff;
}
/* Gold, Silver, Bronze styling based on rank classes */
.user-cell.top1 {
    color: #b9a200 !important;  /* gold */
    font-weight: 900 !important;
}
.user-cell.top2 {
    color: #c0c0c0 !important;  /* silver */
    font-weight: 700 !important;
}
.user-cell.top3 {
    color: #cd7f32 !important;  /* bronze */
    font-weight: 700 !important;
}
@media (max-width: 600px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tile.big {
    grid-column: span 1;
  }
}
@media (max-width: 600px) {
  .tile {
    padding: 16px;
    border-radius: 14px;
  }

  .tile h3 {
    font-size: 1.1rem;
  }

  .tile .tile-value {
    font-size: 1.8rem;
  }
}
@media (max-width: 600px) {
  .swipe-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
  }

  .swipe-row .tile {
    min-width: 160px;
    flex-shrink: 0;
  }
}
/* ============ STICKY HEADER ============ */
.mobile-header {
  display: none;
}

@media (max-width: 600px) {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(90deg,#1a1a2e,#0f3460);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
  }

  .mobile-header small {
    font-size: .6rem;
    opacity: .7;
    display:block;
  }
}

/* ============ TAP TO EXPAND ============ */
.tile.expandable {
  cursor: pointer;
}

.tile.expanded {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 0 25px rgba(241,196,15,.9);
}

/* ============ MOMENTUM METER ============ */
.meter {
  background:#111;
  border-radius:20px;
  overflow:hidden;
  height:12px;
  margin-top:8px;
}

.meter span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#e74c3c,#f1c40f,#2ecc71);
  width:0%;
  transition:1s;
}
.tile.wide {
  grid-column: span 2;
}
.dashboard-grid.stats {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width:600px){
  .dashboard-grid.stats {
    grid-template-columns: 1fr;
  }
}
.tile {
  min-height: 90px;
  justify-content:flex-start;
}

@media (max-width:600px){
  .tile {
    min-height: 120px;
  }
}
@media (max-width: 768px){
    #page-container{
        padding: 0 8px;
    }
    body{
        padding-top: 80px; /* smaller navbar height on mobile */
    }
}
@media (max-width: 600px){
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 12px;
    }
    .nav-links a{
        margin-left: 0;
        margin-top: 6px;
        font-size: .85rem;
    }
}
@media (max-width: 600px){
    .f1-top-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .f1-top-controls form,
    .f1-top-controls button {
        width: 100%;
        min-height: auto; /* let buttons shrink */
    }
    .f1-countdown {
        min-height: 60px;
        padding: 12px;
    }
}
.locked-list {
    list-style: none;       /* Remove bullets */
    padding-left: 0;        /* Remove default indentation */
    margin-left: 0;         /* Optional: reset left margin */
}

/* ==========================================
   HALL OF FAME PODIUM - COMPACT VERSION
========================================== */
.hof-podium-stage {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
    align-items: end;
    margin-top: 54px;
}

.hof-podium {
    background: linear-gradient(180deg, #0b0b0b, #151515);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255,215,0,.12);
    position: relative;
    font-size: 0.9rem;
}

.hof-podium.gold { transform: translateY(-20px); border: 2px solid gold; box-shadow:0 0 60px rgba(255,215,0,.3); }
.hof-podium.silver { border: 2px solid #aaa; }
.hof-podium.bronze { border: 2px solid #cd7f32; }

.hof-podium h3 { margin: 10px 0 15px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.hof-podium.gold h3 { color: gold; }
.hof-podium.silver h3 { color: #ddd; }
.hof-podium.bronze h3 { color: #cd7f32; }

.hof-podium-rank {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid gold;
}

.hof-podium-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hof-podium-row span {
    color: #eee;
}

.hof-podium-row b {
    font-weight: 700;
    color: gold;
}

.hof-podium-row .medal-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}
.f1-submit-wrapper {
    position: relative;
    width: 100%;
}

#f1-inline-message {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: -10px;
    width: 100%;
    z-index: 20;
    pointer-events: none;
}



/* Responsive for mobile */
@media (max-width: 768px){
    .hof-podium-stage { grid-template-columns: 1fr; gap: 12px; }
    .hof-podium-rank { top: -16px; width: 36px; height: 36px; font-size: 16px; }
    .hof-podium-row { font-size: 0.8rem; padding: 4px 0; }
    .hof-podium-row .medal-icon { width: 14px; height: 14px; }
}

    /* The glow box that wraps submit */
    .page-picks .f1-countdown.glow-box {
        display: flex;
        justify-content: center;
    }

    /* The inner row */
    .page-picks .f1-countdown .f1-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Wrapper that holds message + button */
    .page-picks .f1-submit-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /* Error / warning message box */
    #f1-inline-message .f1-msg {
	font-weight:900;
        text-align: center;
        max-width: 100%;
    }

    /* Button row */
    .page-picks .f1-btn-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Lock in Picks button */
    .page-picks .f1-submit-btn {
        width: auto;
        min-width: 220px;
    }
.hero-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* ================= PICKS STUFF ================= */
 .f1-countdowny{
     bacykground: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 8px 10px 8px;
     buox-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:5px;
}
.f1-focused {
    animation: focusFlash 1.2s ease-out;
}
/* =======================
   SCORECARD (MOBILE)
   ======================= */

.scorecard { margin: 10px 0 16px; }

/* Header */
.scorecard-header{
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.sc-title{ font-size: 1.05rem; font-weight: 600; color:#fff; }
.sc-meta{ margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }

.pill{
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ddd;
}

/* List */
.scorecard-list{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Each card row */
.scorecard-row{
  width: 100%;
  box-sizing: border-box;

  display:grid;
  grid-template-columns: 1fr auto; /* left block | right block */
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: inherit;
}

.scorecard-row:active{ transform: scale(0.99); }

/* Left block = title line + date line */
.sc-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
/* Title line: round | name | tag */
.sc-race{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:28px;
}
/* Round pill */
.sc-round{
  font-size:.8rem;
  opacity:.8;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
}

/* Race name */
.sc-name{
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height: 1.1;
  min-width: 0;
}

/* BEST/WORST tag */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  white-space:nowrap;
  line-height:1;
  flex-shrink:0;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#ddd;
  font-size: .75rem;
}

/* Best / worst styling */
.tag-best{
  background: linear-gradient(90deg,#ffb300,#ff6a00);
  border-color: rgba(255,200,0,.35);
  color:#111;
  font-weight:700;
}

.tag-worst{
  background: rgba(255,80,80,0.10);
  border-color: rgba(255,80,80,.35);
  box-shadow: 0 0 6px rgba(255,80,80,.12);
  color:#ffd6d6;
  font-weight:700;
}

/* Date line: align under the NAME column (not under round) */
.sc-date{
  margin-top: 4px;
  font-size:.8rem;
  opacity:.8;
  line-height: 1.1;

  /* This is the key alignment fix:
     must roughly match .sc-round width + column gap.
     Adjust 54–66px if you change font sizes/padding. */
  padding-left: 58px;
}

/* Right block (medal + points + delta if you use it) */
.sc-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width: 90px; /* keeps column stable even if medal missing */
}

/* Points */
.sc-points{
  font-size:1.05rem;
  font-weight:700;
  width: 40px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* Optional delta styling (if you render it) */
.sc-delta{
  font-size:.85rem;
  font-weight:700;
  width: 44px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:.9;
}
.delta-up{ color:#77ffb0; }
.delta-down{ color:#ff7a7a; }
.delta-flat{ color:#ddd; }

/* Optional medals border hint on the card itself */
.medal-gold{ border-color: rgba(255,215,0,0.35); }
.medal-silver{ border-color: rgba(192,192,192,0.35); }
.medal-bronze{ border-color: rgba(205,127,50,0.35); }

.sc-round{
  flex:0 0 auto;   /* prevents stretching */
}

.tag{
  flex:0 0 auto;
}

.sc-date{
  margin-top:2px;
  padding-left:0;  /* IMPORTANT: remove earlier padding-left */
  line-height:1.1;
}

/* ===== SCORECARD HARD OVERRIDES ===== */

/* Card layout */
.scorecard-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
}

/* Left side must stack normally */
.sc-left{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  min-width:0 !important;
}

/* Title line: round + name + tag inline */
.sc-race{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:auto !important;
  min-width:0 !important;
}

/* Prevent these from becoming full-width bars */
.sc-round,
.sc-name,
.tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  flex:0 0 auto !important;
}

/* Let name shrink/ellipsis but not push layout */
.sc-name{
  flex: 0 1 190px;   /* LOCK name column width */
  min-width: 0;
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.1;
}
/* Tag stays small */
.tag{
  height:22px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}
.tag,
.tag-empty{
  width:72px;        /* fixed tag column width */
  justify-content:center;
}
.tag-empty{
  opacity:0;
  pointer-events:none;
}
/* Date is just text (not a bar) */
.sc-date{
  margin-top:2px;
  font-size:.8rem;
  opacity:.8;
}
/* Right side fixed alignment */
.sc-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-width:90px !important;
}
.online-counter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  border:1px solid rgba(255,255,255,0.12);
}

.online-active{
  background: rgba(46,204,113,0.12);
  color:#7dffb5;
}

.online-inactive{
  background: rgba(255,255,255,0.05);
  color:#888;
}

.online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2ecc71;
  box-shadow:0 0 6px rgba(46,204,113,.4);
  display:inline-block;
}

/* Optional: make dot grey when inactive */
.online-inactive .online-dot{
  background:#666;
  box-shadow:none;
}

.online-active .online-dot{ animation: pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(46,204,113,.45); }
  70%{ box-shadow:0 0 0 6px rgba(46,204,113,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

/* --- Next race: picks window progress bar --- */
.picks-progress-wrap{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  margin-top:10px;
}
.picks-progress-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(46,204,113,.95), rgba(241,196,15,.95), rgba(231,76,60,.95));
  transition: width .35s ease;
}

/* --- Urgent pulse when picks are open and not submitted --- */
.tile.urgent{
  box-shadow: 0 0 0 rgba(231,76,60,0.0);
  animation: urgentPulse 1.6s ease-in-out infinite;
}
@keyframes urgentPulse{
  0%   { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
  50%  { box-shadow: 0 0 12px rgba(231,76,60,0.25), 0 0 28px rgba(231,76,60,0.10); }
  100% { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
}

.ptg-logo{
  display:inline-flex;
  align-items:flex-end;
  gap:14px;
  position:relative;
  line-height:1;
}

/* Red “grid bars” */
.ptg-mark{
  display:inline-flex;
  gap:6px;
  transform:skewX(-12deg);
  margin-bottom:2px;
}
.ptg-bar{
  width:10px;
  height:38px;              /* tweak height here */
  border-radius:2px;
  background:linear-gradient(180deg,#ff2a2a 0%, #b10000 70%, #4a0000 100%);
  box-shadow:0 0 0 rgba(0,0,0,0); /* keep clean, not gamer-glow */
}
.ptg-bar.b1{ opacity:1; }
.ptg-bar.b2{ opacity:.92; }
.ptg-bar.b3{ opacity:.84; }

/* Wordmark */
.ptg-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:56px;           /* tweak size here */
  letter-spacing:-0.7px;
  background:linear-gradient(180deg,#f3f7ff 0%, #cfe1ff 55%, #8db7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* subtle depth like your sample */
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Underline glow */
.ptg-underline{
  position:absolute;
  left:78px;                /* start under the text (adjust if needed) */
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(64,160,255,0) 0%, rgba(64,160,255,.95) 35%, rgba(64,160,255,0) 100%);
  filter: blur(.2px);
  box-shadow: 0 0 14px rgba(64,160,255,.35);
}

/* Title row (puts info next to title) */
.tile-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}
.tile-title-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* Info icon */
.tile .info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  color:#9aa4b2;
  font-size:.85rem;
  line-height:1;
  padding:2px 4px;
  border-radius:6px;
  transition:color 0.2s ease, background 0.2s ease;
}
.tile .info:hover{ color:#ffffff; background:transparent; }

.tile .info:hover .info-tooltip,
.tile .info:focus .info-tooltip{
  display:block;
}

.tile .info{ opacity:.85; }
.tile .info:hover{ opacity:1; color:#fff; }

.f1-input-locked{
    background:#0b1020;
    color:#7f8aa3;
    cursor:not-allowed;
}

.user-name {
    cursor:pointer;
    font-weight:600;
}

.dropdown-menu {
    background:#111827;
    border:1px solid rgba(255,255,255,0.08);
}

.dropdown-item {
    color:#e5e7eb;
}

.dropdown-item:hover {
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.dropdown-item.active {
    background:#e10600;
    color:#fff;
}

/* ================= MODERN NAV PILLS ================= */

.user-group-nav{
    gap:10px;
}

.user-group-nav .nav-item{
    display:flex;
    align-items:center;
}

.nav-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    max-width:260px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    color:#e5e7eb;
    font-weight:600;
    font-size:.92rem;
    line-height:1;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    transition:all .18s ease;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

button.nav-pill{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}

.nav-pill:hover{
    color:#fff;
    border-color:rgba(147,197,253,.35);
    box-shadow:0 8px 22px rgba(0,0,0,.24);
    transform:translateY(-1px);
}

.nav-pill:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(147,197,253,.28), 0 8px 22px rgba(0,0,0,.24);
}

.nav-pill::after{
    margin-left:2px;
    opacity:.75;
}

.nav-pill-user{
    background:linear-gradient(180deg, rgba(147,197,253,.16), rgba(255,255,255,.04));
}

.nav-pill-group{
    background:linear-gradient(180deg, rgba(63,224,162,.14), rgba(255,255,255,.04));
}

.nav-pill-static{
    cursor:default;
}

.nav-pill-static:hover{
    transform:none;
}

.nav-pill-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    font-size:.95rem;
    flex:0 0 20px;
    opacity:.9;
}

.nav-pill-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    flex:0 0 24px;
    font-size:.78rem;
    font-weight:800;
    color:#fff;
    background:#93c5fd;
}

.nav-pill-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ================= MODERN DROPDOWNS ================= */

.modern-dropdown{
    min-width:240px;
    margin-top:10px !important;
    padding:8px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg,#0f172a,#0b1220);
    box-shadow:0 18px 40px rgba(0,0,0,.38);
}

.modern-dropdown-header{
    padding:6px 10px 8px;
    color:#93C5FD;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.modern-dropdown-divider{
    margin:6px 0;
    border-color:rgba(255,255,255,0.08);
}

.modern-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:10px;
    padding:10px 12px;
    color:#e5e7eb;
    font-weight:600;
    transition:all .15s ease;
}

.modern-dropdown-item:hover{
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.modern-dropdown-item.active{
    background:rgba(147,197,253,.14);
    color:#fff;
}

.dropdown-item-icon{
    width:18px;
    text-align:center;
    flex:0 0 18px;
    opacity:.9;
}

.danger-item:hover{
    background:rgba(239,68,68,.12);
    color:#fecaca;
}

.invite-form input{
    font-size:.85rem;
}

.invite-form button{
    font-size:.85rem;
}

.modern-dropdown .invite-form{
    max-width:220px;
}/* ================= BASE ================= */
 :root{
     --f1-bg:#020617;
     --f1-panel:#0f172a;
     --f1-border:rgba(255,255,255,.08);
     --f1-text:#e5e7eb;
     --f1-muted:#9ca3af;
     --f1-blue:#93C5FD;
}
/* RESET */
 *{
     box-sizing:border-box;
}
 body{
     margin:0;
     background: radial-gradient(circle at top, #0f172a 0%, #020617 70%);
     color:var(--f1-text);
     font-family:'Titillium Web', sans-serif;
     min-height:100vh;
}
/* Links */
 a{
     color:var(--f1-blue);
     text-decoration:none;
}
 a:hover{
     color:#93c5fd;
}
/* Headings */
 h2{
     font-size:1.35rem;
     font-weight:800;
     letter-spacing:.06em;
     text-transform:uppercase;
}
/* ================= NAVBAR ================= */
 .f1-navbar{
     background:linear-gradient(180deg,#0f172a,#020617);
     border-bottom:1px solid rgba(96,165,250,.25);
     min-height:64px;
    /* ? fixes jumping height */
     padding:0 16px;
}
 .f1-navbar .container-fluid{
     min-height:64px;
}
 .f1-navbar .navbar-brand{
     color:var(--f1-blue);
     font-weight:900;
     font-size:1.25rem;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link{
     color:#cbd5e1;
     font-weight:700;
     letter-spacing:.05em;
     padding:0 16px;
     height:64px;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link:hover{
     color:var(--f1-blue);
}
 .f1-navbar .nav-link.active{
     color:var(--f1-blue);
     border-bottom:2px solid var(--f1-blue);
}
/* mobile toggler */
 .navbar-toggler{
     border-color:var(--f1-blue);
}
 .navbar-toggler-icon{
     filter:invert(1);
}
/* ===== SITE ===== */
/* ===== CONTAINER ===== */
 .container{
     max-width:1200px;
}
/* ===== RACE LIST ===== */
 .season-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:12px 24px;
}
/* Back to season */
 .season-back {
     text-decoration: none;
     font-weight: 700;
     font-size: 0.85rem;
     color: #3fe0a2;
}
 .season-back:hover {
     color: #6fffd1;
}
/* ================= SEASON RACE CARDS ================= */
 .race-card{
     position: relative;
     padding: 6px 8px 7px;
    /* MUCH tighter */
     background: linear-gradient(180deg,#0c1a26,#08121b);
     border: 1px solid #1b3550;
     border-radius: 6px;
     box-shadow: 0 0 6px rgba(0,120,255,.12);
}
/* Remove floaty movement – makes grid denser */
 .race-card:hover{
     box-shadow: 0 0 10px rgba(0,150,255,.25);
}
/* Race title + date */
 .race-link{
     font-size: 15px;
     line-height: 1.15;
     display:block;
     padding:12px 16px;
     background:#0f172a;
     border-radius:10px;
     border-left:4px solid #60a5fa;
     font-weight:700;
     transition:.15s;
}
 .race-link:hover{
     background:#020617;
     border-left-color:#93c5fd;
     transform:translateX(4px);
}
 .race-date{
     color:var(--f1-muted);
     font-size:0.85em;
     opacity:.75;
}
/* Status badge inside tile */
 .race-status{
     position:absolute;
     top:4px;
     right:6px;
}
 .race-status .badge{
     font-size: 10px;
     letter-spacing:.4px;
     padding:2px 6px;
     border-radius:12px;
     font-weight:400;
}
/* OPEN */
 .badge.bg-success{
     background:#1cffac !important;
     color:#003b22;
}

/* CLOSING */
 .badge.bg-closing{
     background:#FF6F00 !important;
    color:#FFFFFF;
}

/* LOCKED */
 .badge.bg-danger{
     background:#ff5c5c !important;
}

/* FINISHED */
 .badge.bg-secondary{
     background:#5b6f87 !important;
}
/* ================= F1 DRIVER PICK COLORS ================= */
/* Base select */
 .f1-select {
     max-width: 280px;
     width: 100%;
     padding: 6px 10px;
     font-weight: 650;
     letter-spacing: 0.02em;
     min-height: 30px;
     min-width: 300px;
     font-size: 0.92rem;
     border-radius: 8px;
     background-color: #0b1220;
     border: 1px solid rgba(255,255,255,.08);
     color: #e5e7eb;
     transition: all .2s ease;
}
/* Hover = highlight */
 .f1-select:hover {
     border-color: rgba(255,200,0,.5);
}
/* Focus = race ready */
 .f1-select:focus {
     outline: none;
     border-color: #ffcc33;
     box-shadow: 0 0 0 2px rgba(255,204,51,.25);
}
/* Changed picks glow */
 .f1-select.changed {
     border-color: #22c55e;
     box-shadow: 0 0 0 1px rgba(34,197,94,.6);
}
 .f1-select option:checked {
     font-weight: 900;
     background-color: #0b1220;
}
 .pole-select{
     margin-top: 2px;
     padding-bottom: 6px;
     margin-bottom: 6px;
     border-bottom: 1px dashed rgba(147,197,253,.25);
}
 .f1-pos-label{
     padding-top: 4px;
     text-align:left;
     font-weight:700;
     color:#fff;
}
/* Selected row in dropdown */
 .f1-select option:checked {
     outline:2px solid white;
}
/* Force the SELECT to always use its team color, never inherit grey from option rendering */
 .f1-select{
     -webkit-appearance: none;
     appearance: none;
     background-clip: padding-box;
}
/* Re-apply team background after option selection (Chrome fix) */
 .f1-select.team-redbull {
     background-color:#4781D7 !important;
}
 .f1-select.team-ferrari {
     background-color:#dc0000 !important;
}
 .f1-select.team-mercedes {
     background-color:#00d2be !important;
}
 .f1-select.team-mclaren {
     background-color:#ff8700 !important;
}
 .f1-select.team-astonmartin {
     background-color:#006f62 !important;
}
 .f1-select.team-alpine {
     background-color:#0090ff !important;
}
 .f1-select.team-williams {
     background-color:#00a3e0 !important;
}
 .f1-select.team-sauber {
     background-color:#52e252 !important;
}
 .f1-select.team-haas {
     background-color:#b6babd !important;
}
 .f1-select.team-racingbulls {
     background-color:#000B8D !important;
}
 .f1-select.team-audi {
     background-color:#F50537!important;
}
/* Race date next to GP title */
 h4 .text-muted{
     color: #aaa !important;
    /* lighter or darker */
     opacity: 0.8;
    /* control how muted */
     font-weight: 500;
     letter-spacing: 0.04em;
}
 .lock-modal{
     position:fixed;
     inset:0;
     background:rgba(0,0,0,.75);
     display:none;
     align-items:center;
     justify-content:center;
     z-index:9999;
}
 .lock-box{
     background:#111;
     border:2px solid gold;
     padding:30px 40px;
     border-radius:12px;
     color:#fff;
     max-width:400px;
     text-align:center;
     box-shadow:0 0 40px rgba(255,215,0,.5);
}
 .lock-actions{
     margin-top:25px;
     display:flex;
     justify-content:space-between;
}
 .lock-actions button{
     padding:10px 24px;
     border-radius:20px;
     border:none;
     font-weight:700;
}
 .confirm-lock{
     background:gold;
     color:#111;
}
/* ===== ADMIN ===== */
 .admin-filters{
     background:#0f172a;
     padding:10px 14px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
}
 .admin-filters span{
     color:#60a5fa;
     font-weight:900;
     letter-spacing:.06em;
     text-transform:uppercase;
}
 .admin-filters label{
     color:#cbd5e1;
     font-weight:700;
}
 .admin-filters .form-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:700;
}
 .admin-filters .form-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
/* ------------------------------------------------- Grid Picks ------------------------------------------------- */
/* F1 grid for picks */
 .f1-grid{
     display:grid;
     grid-template-columns: 40px 1fr;
     gap: 6px 6px;
     max-width:650px;
}
 .f1-row{
     display: contents;
}
 .f1-submit-wrapper {
     margin-top: 16px;
     padding-top: 12px;
     border-top: 1px solid rgba(255,255,255,.08);
}
 .f1-submit:hover{
     background:#ff1e1e;
}
 .f1-select.changed{
     animation:f1flash .2s ease;
}
 @keyframes f1flash{
     from{
         box-shadow:0 0 0px #fff;
    }
     to{
         box-shadow:0 0 10px #fff;
    }
}
/* ============ LANDING PAGE ============ */
 .landing-hero{
     display:grid;
     grid-template-columns: 1.2fr 1fr;
     min-height:60vh;
     align-items:center;
     gap:60px;
}
 .hero-content h1{
     font-size:3.4rem;
     font-weight:900;
     line-height:1.1;
}
 .hero-content span{
     color:#facc15;
}
 .hero-content p{
     margin-top:10px;
     font-size:1.2rem;
     color:#9ca3af;
}
 .hero-buttons{
     margin-top:10px;
     display:flex;
     gap:16px;
}
 .btn-gold{
     background:linear-gradient(135deg,#facc15,#f59e0b);
     color:#000;
     padding:14px 28px;
     border-radius:12px;
     font-weight:900;
}
 .btn-outline{
     border:2px solid #facc15;
     color:#facc15;
     padding:14px 28px;
     border-radius:12px;
     font-weight:800;
}
 .preview-card{
     background:rgba(15,23,42,.9);
     border-radius:20px;
     padding:24px;
     box-shadow:0 0 40px rgba(250,204,21,.15);
}
 .preview-row{
     padding:14px;
     margin-bottom:10px;
     border-radius:12px;
     font-weight:700;
}
 .preview-row.gold{
     background:rgba(250,204,21,.25);
}
 .preview-row.silver{
     background:rgba(203,213,225,.2);
}
 .preview-row.bronze{
     background:rgba(205,127,50,.25);
}
 .how-it-works{
     margin-top:20px;
     display:grid;
     grid-template-columns: repeat(3,1fr);
     gap:30px;
}
 .how-card{
     background:rgba(15,23,42,.9);
     padding:30px;
     border-radius:18px;
     text-align:center;
}
 .preview-header {
     text-align: center;
     font-size: 0.85rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(255, 215, 0, 0.85);
    /* gold glow */
     margin-bottom: 10px;
     font-weight: 600;
}
/* ============================ Hall of Fame Layout ============================ */
 h1 {
     text-align: center;
     font-size: 2.6rem;
     margin: 40px 0 10px;
     color: #ffd700;
     letter-spacing: 0.08em;
}
 h2 {
     margin: 50px 0 20px;
     font-size: 1.2rem;
     border-bottom: 2px solid rgba(255,215,0,0.3);
     padding-bottom: 8px;
     color: #fff;
}
/* ============================ Champions Wall ============================ */
 .hof-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
     gap: 20px;
}
 .hof-card {
     background: linear-gradient(145deg, #121212, #1b1b1b);
     border: 1px solid rgba(255,215,0,0.15);
     border-radius: 14px;
     padding: 18px;
     text-align: center;
     box-shadow: 0 8px 30px rgba(0,0,0,0.6);
     position: relative;
     overflow: hidden;
}
 .hof-card.champion::before {
     content: "πŸ†";
     position: absolute;
     top: 10px;
     right: 14px;
     font-size: 2rem;
     opacity: 0.2;
}
 .hof-season {
     font-size: 0.8rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
}
 .hof-name {
     font-size: 1.3rem;
     font-weight: 600;
     margin: 10px 0;
     color: #ffd700;
}
 .hof-points {
     font-size: 1rem;
     color: #fff;
     opacity: 0.9;
}
/* ============================ Dynasty Club ============================ */
 .dynasty-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
     gap: 15px;
}
 .dynasty-card {
     background: #111;
     border-left: 4px solid #ffd700;
     padding: 14px 18px;
     border-radius: 10px;
     font-weight: 600;
}
/* ============================ Tables (Podiums / All-Time) ============================ */
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
}
 th {
     text-align: left;
     padding: 12px;
     background: rgba(255,215,0,0.1);
     color: #ffd700;
     font-size: 0.95rem;
     letter-spacing: 0.1em;
}
 td {
     padding: 12px;
     border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* ================= BASE ================= */
 .f1-submit-row{
	max-width: 150px;
     display:flex;
     justify-content:flex-start;
    /* not center */
     padding-left:68px;
    /* same left as select boxes */
     margin-top:30px;
}
 .btn-outline:hover{
     border-color:#fde68a;
     color:#fde68a;
     background-color: rgba(250, 204, 21, 0.08);
    /* very subtle gold tint */
}
 .btn-outline:active{
     background-color: rgba(250, 204, 21, 0.15);
     border-color:#facc15;
     color:#facc15;
}
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 9999;
     background: linear-gradient(180deg, rgba(8,8,12,.98), rgba(4,4,6,.94));
     backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(255,215,0,.2);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 6px 22px;
}
 .nav-left {
     font-size: 1rem;
     letter-spacing: .05em;
}
 .nav-links a {
     padding: 4px 10px;
     margin-left: 14px;
     font-size: .9rem;
}
 body {
     padding-top: 98px;
}
 .page-login .container{
     display:flex;
     justify-content:center;
}
 .f1-login-card{
     background: linear-gradient(180deg,#0f172a,#020617);
     border:1px solid var(--f1-border);
     border-radius:18px;
     padding:32px 34px 36px;
     width:100%;
     max-width:420px;
    /* ? this fixes the “too wide” problem */
     box-shadow: 0 0 0 1px rgba(147,197,253,.1), 0 30px 80px rgba(0,0,0,.8);
}
 .f1-login-card form{
     display:flex;
     flex-direction:column;
     gap:14px;
    /* space between inputs + button */
}

 .f1-login-btn{
 	 margin-top: 10px;
     background: linear-gradient(180deg, rgba(147,197,253,.35), rgba(59,130,246,.12) ), linear-gradient(180deg,#0f172a,#020617);
     color: var(--f1-text);
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     font-size: .95rem;
     border: 1px solid rgba(147,197,253,.35);
     border-radius: 10px;
     padding: 10px 18px;
    /* ? smaller height */
     width: 100%;
     height: 44px;
    /* ? matches input height */
     box-shadow: 0 0 0 1px rgba(147,197,253,.12), 0 6px 18px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.05);
     transition: all .15s ease;
     cursor:pointer;
	 max-width: 100%;
}
/* Hover — armed */
 .f1-login-btn:hover{
     box-shadow: 0 0 0 1px rgba(147,197,253,.3), 0 8px 26px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.08);
     transform: translateY(-1px);
}
/* Active — ignition */
 .f1-login-btn:active{
     transform: translateY(2px);
     box-shadow: 0 0 0 1px rgba(147,197,253,.2), 0 3px 8px rgba(59,130,246,.3), inset 0 2px 5px rgba(0,0,0,.6);
}
 .f1-input{
     background: linear-gradient(180deg,rgba(147,197,253,.06),rgba(2,6,23,.9));
     border:1px solid rgba(147,197,253,.25);
     color: var(--f1-text);
     padding:6px 14px;
     border-radius:10px;
     width:100%;
     height:44px;
     font-size:.95rem;
     font-weight:500;
     letter-spacing:.02em;
     box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 1px rgba(147,197,253,.05);
     transition:.15s ease;
}
/* placeholder */
 .f1-input::placeholder{
     color: var(--f1-muted);
}
/* hover */
 .f1-input:hover{
     border-color: rgba(147,197,253,.45);
}
/* focus — live terminal */
 .f1-input:focus{
     outline:none;
     border-color: var(--f1-blue);
     box-shadow: 0 0 0 2px rgba(147,197,253,.35), inset 0 1px 3px rgba(0,0,0,.7);
}
 .f1-alert{
     border-radius:12px;
     padding:14px 16px;
     margin-bottom:16px;
     font-weight:600;
     letter-spacing:.02em;
     border:1px solid;
     box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
/* ERROR – red race warning */
 .f1-alert-error{
     background: linear-gradient(180deg,#3b0a0a,#140202);
     border-color: #dc2626;
     color:#fecaca;
     box-shadow: 0 0 12px rgba(220,38,38,.4), inset 0 0 10px rgba(0,0,0,.8);
}
/* SUCCESS – green system ok */
 .f1-alert-success{
     background: linear-gradient(180deg,#052e16,#020617);
     border-color:#22c55e;
     color:#bbf7d0;
     box-shadow: 0 0 12px rgba(34,197,94,.4), inset 0 0 10px rgba(0,0,0,.8);
}

 .f1-form-row > div {
     flex: 1;
}
 .f1-form-btn {
     flex: 0;
}
 .f1-btn-sm {
     background: linear-gradient(135deg,#2563eb,#3b82f6);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(59,130,246,.35);
     transition: .15s ease;
}
 .f1-btn-sm:hover {
     box-shadow: 0 0 18px rgba(59,130,246,.6);
     transform: translateY(-1px);
}
 .f1-btn-danger-sm {
     background: linear-gradient(135deg,#7f1d1d,#dc2626);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(220,38,38,.4);
     transition: .15s ease;
}
 .f1-btn-danger-sm:hover {
     box-shadow: 0 0 18px rgba(220,38,38,.7);
     transform: translateY(-1px);
}
 .f1-form-row {
     display: grid;
     grid-template-columns: 2fr 2fr 1fr auto;
     gap: 18px;
     align-items: end;
}

 .f1-form-row label {
     font-size: .85rem;
     color: var(--f1-muted);
     margin-bottom: 6px;
     display: block;
}
 .f1-form-row .f1-logihn-btn {
     height: 46px;
     padding: 0 26px;
}
 .f1-admin-card {
     background: linear-gradient(180deg,#0b1222,#050914);
     border: 1px solid rgba(255,255,255,.08);
     border-radius: 20px;
     padding: 20px 24px;
     box-shadow: inset 0 0 40px rgba(255,255,255,.04), 0 0 60px rgba(59,130,246,.15);
}
/* FORCE horizontal admin add row */
/* --- Add Driver horizontal bar --- */
 .f1-add-row{
     display:flex !important;
     align-items:flex-end;
     gap:16px;
     width:100%;
}
/* Input columns */
 .f1-add-row .field{
     display:flex;
     flex-direction:column;
}
/* Width control */
 .f1-add-row .name {
     flex:2;
}
 .f1-add-row .team {
     flex:2;
}
 .f1-add-row .num {
     flex:1;
     max-width:90px;
}
/* Prevent button from stretching */
 .f1-add-row button{
     flex:0 0 140px;
     width:140px;
     height:46px;
     margin:0;
     align-self:flex-end;
}
/* ===== F1 Admin Results ===== */
 .admin-filters{
     margin-bottom:20px;
}
/* Compact selects */
 .compact{
     width:100%;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     padding:6px 10px;
     border:1px solid rgba(255,255,255,0.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
}
/* Add-result container */
 .f1-add-results{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Save/Delete buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     margin-bottom:8px;
     width:100%;
}
 .f1-btn-delete{
     background:linear-gradient(180deg,#ff6b6b,#c0392b);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(255,80,80,.6);
     width:100%;
}
 .f1-btn-save:hover{
     filter:brightness(1.1);
}
 .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* Race blocks */
 .race-block-even{
     background:rgba(0,0,0,.25);
}
 .race-block-odd{
     background:rgba(0,0,0,.35);
}
/* ===== F1 Races Admin ===== */
 .f1-race-panel{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     width:100%;
     margin-bottom:8px;
}
 .f1-btn-save:hover, .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* ===== Admin compact tables ===== */
 .admin-table{
     width:100%;
     table-layout: fixed;
    /* THIS is the key */
     border-collapse: collapse;
}
/* Cells */
 .admin-table th, .admin-table td{
     white-space:nowrap;
     padding:8px 10px;
     text-align:center;
}
/* Compact inputs inside admin tables */
 .admin-table input, .admin-table select{
     width:auto;
     min-width:60px;
     padding:6px 10px;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     border:1px solid rgba(255,255,255,.12);
     box-shadow: inset 0 0 10px rgba(0,150,255,.2);
}
/* Larger fields */
 .admin-table input[name="name"]{
     min-width:180px;
}
 .admin-table input[type="date"], .admin-table input[type="datetime-local"]{
     min-width:160px;
}
/* Checkboxes */
 .admin-table input[type="checkbox"]{
     transform:scale(1.3);
     accent-color:#4e7cff;
}
/* Admin buttons */
 .admin-table .f1-btn-save{
     width:100%;
}
 .admin-table .f1-btn-delete{
     width:100%;
}
/* Horizontal scroll for admin tables */
 .admin-table-wrap{
     overflow-x:auto;
     padding-bottom:10px;
}
/* ===== Force widths for admin race table fields ===== */
/* Season */
 .admin-table input[name="season"]{
     width:80px;
}
/* Round */
 .admin-table input[name="round"]{
     width:70px;
     text-align:center;
}
/* Date */
 .admin-table input[name="race_date"]{
     width:140px;
}
/* Reminder */
 .admin-table input[name="reminder_time"]{
     width:190px;
}
/* Race name */
 .admin-table input[name="name"]{
     width:200px;
}
 .admin-table th:last-child, .admin-table td:last-child{
     width:140px;
     min-width:140px;
     max-width:140px;
     text-align:center;
}
 .admin-table th:nth-child(6), .admin-table td:nth-child(6){
     width:220px;
}
 .admin-table th:nth-child(3), .admin-table td:nth-child(3){
     width:70px;
     text-align:center;
}
 .admin-table td input{
     width:100%;
     max-width:100%;
     box-sizing:border-box;
}
/* Fix admin table button sizing */
 .admin-table td:last-child{
     padding:6px 8px;
     vertical-align:middle;
}
/* Compact Save button */
 .admin-table .btn-save{
     height:38px;
     min-height:38px;
     padding:0 18px;
     font-size:14px;
     border-radius:12px;
     background:linear-gradient(180deg,#5f7cff,#3b56d9);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(90,120,255,.35), inset 0 0 10px rgba(255,255,255,.15);
     cursor:pointer;
}
/* Hover effect */
 .admin-table .btn-save:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(90,120,255,.55), inset 0 0 14px rgba(255,255,255,.2);
}
/* Delete button */
 .admin-table .btn-delete{
     height:38px;
     min-height:38px;
     padding:0 14px;
     margin-top:6px;
     font-size:13px;
     border-radius:12px;
     background:linear-gradient(180deg,#ff5a5a,#cc2f2f);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(255,90,90,.4), inset 0 0 10px rgba(255,255,255,.12);
     cursor:pointer;
}
 .admin-table .btn-delete:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(255,90,90,.65), inset 0 0 14px rgba(255,255,255,.18);
}
/* Allow Actions column to grow vertically */
 .admin-table td.actions{
     overflow: visible !important;
     height: auto !important;
     padding-top: 10px;
     padding-bottom: 10px;
}
/* Stack buttons vertically inside Actions */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:8px;
     align-items:center;
}
/* Allow admin rows to grow vertically */
 .admin-table tr{
     height: auto !important;
     min-height: 0 !important;
     overflow: visible !important;
}
/* Make action cells flexible */
 .admin-table td.actions{
     overflow: visible !important;
     vertical-align: middle;
}
/* Stack buttons */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:10px;
     align-items:center;
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown{
     background: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 14px 20px 16px;
     box-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:20px;
}
 .f1-countdown-label{
     font-size: .7rem;
     font-weight: 800;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--f1-blue);
     opacity: .85;
     margin-bottom: 6px;
}
/* Time row */
 .f1-countdown-time{
     display: flex;
     align-items: baseline;
     gap: 6px;
     font-family: 'Titillium Web', sans-serif;
}
/* Units */
 .f1-countdown-time .unit{
     display: flex;
     align-items: baseline;
     gap: 2px;
}
 .f1-countdown-time b{
     font-size: 1.6rem;
     font-weight: 900;
     color: #facc15;
     text-shadow: 0 0 14px rgba(250,204,21,.65);
     min-width: 2ch;
     text-align: right;
}
 .f1-countdown-time em{
     font-size: .65rem;
     font-style: normal;
     font-weight: 700;
     letter-spacing: .12em;
     color: var(--f1-muted);
     margin-left: 2px;
}
/* Separators */
 .f1-countdown-time .sep{
     font-size: 1.4rem;
     font-weight: 900;
     color: rgba(255,255,255,.4);
     margin: 0 2px;
}
/* Blinking last colon (broadcast feel) */
 .f1-countdown-time .blink{
     animation: blink 1s steps(1) infinite;
}
 @keyframes blink{
     50%{
         opacity: 0;
    }
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown.warning{
     border-color: #e10600;
     box-shadow: 0 0 25px rgba(225,6,0,.6), inset 0 0 20px rgba(225,6,0,.25);
}
 .f1-countdown.warning .f1-countdown-label{
     color: #e10600;
}
 .f1-countdown.warning b{
     color: #ff5c5c;
     text-shadow: 0 0 16px rgba(255,92,92,.9);
}
/* ================= F1 SUBMIT BUTTON ================= */
 .f1-row:last-child{
     margin-top: 18px;
}
 @media (max-width: 600px){
     .f1-submit-gold{
         width: 100%;
         text-align: center;
    }
}
 .f1-race-header.warning + form .f1-submit-gold{
     background: linear-gradient( 135deg, #e10600, #ff5c5c, #e10600 );
     color: #fff;
     box-shadow: 0 0 0 1px rgba(225,6,0,.9), 0 10px 30px rgba(225,6,0,.7);
}
/* Container above the grid */
 .last-race-btn-wrap {
     margin-bottom: 15px;
     text-align: left;
    /* aligns left with the form */
}
/* Align vertically with countdown box if needed */
 #f1CountdownWrapper form.ms-3 {
     display: flex;
     align-items: center;
}
 .f1-submit-btn {
     position: relative;
     padding: 7px 10px;
    /* slightly wider, not taller */
     font-size: 0.82rem;
    /* more readable */
     letter-spacing: 0.06em;
     font-weight: 700;
     text-transform: uppercase;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     background: linear-gradient(135deg,#ffb300,#ffcc33,#ffb300);
     color: #1a1a1a;
     box-shadow: 0 0 0 2px rgba(255,200,0,.4), 0 8px 18px rgba(255,180,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
     transition: all .25s ease;
}
/* Hover */
 .f1-submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 0 0 1px rgba(255,200,0,.35), 0 6px 14px rgba(255,180,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Pressed */
 .f1-submit-btn:active {
     transform: translateY(1px);
     box-shadow: 0 0 0 1px rgba(255,220,80,.6), 0 10px 24px rgba(255,180,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
/* Disabled */
 .f1-submit-btn:disabled {
     background: linear-gradient(135deg,#777,#999);
     color: #222;
     cursor: not-allowed;
     box-shadow: none;
     opacity: .6;
}
/* ----------------- Lock in Picks ----------------- */
.f1-btn-row button {
      width: 100%;
    }
 .f1-submit-gold {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(180deg,#052e16,#020617);
    /* login-style success base */
     border: 1px solid #22c55e;
    /* success border by default */
     color: #bbf7d0;
    /* matching login success text */
     font-weight: 700;
     font-size: 0.9rem;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     border-radius: 6px;
     cursor: pointer;
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(34,197,94,.8), 0 8px 28px rgba(34,197,94,.45);
     transition: all .12s ease;
}
/* Make Lock in Picks same height as Use Last Race Picks */
 .f1-submit-gold:hover {
     background: linear-gradient(180deg,#065e1f,#02270a);
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(34,197,94,1), 0 12px 36px rgba(34,197,94,.7);
}
 .f1-submit-gold:active {
     transform: translateY(1px);
     box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(34,197,94,.9);
}
 .f1-submit-gold:disabled {
     background: linear-gradient(180deg,#3b0a0a,#140202);
    /* locked/error style */
     border: 1px solid #dc2626;
     color: #fecaca;
     cursor: not-allowed;
     box-shadow: none;
}
/* ----------------- Use Last Race Picks ----------------- */
 .btn-copy-last {
     background: linear-gradient(180deg, #020617, #020617);
    /* near-black */
     border: 1px solid rgba(96, 165, 250, 0.45);
    /* #60a5fa glow border */
     color: #93C5FD;
    /* base blue text */
     font-weight: 700;
     font-size: 0.9rem;
     margin-bottom: 10px;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     box-shadow: 0 0 10px rgba(96, 165, 250, 0.15);
}
 .btn-copy-last:hover:not(:disabled) {
     background: linear-gradient(180deg, #020617, #020617);
     border-color: #60a5fa;
     color: #e0f2fe;
    /* brighter sky text */
     box-shadow: 0 0 12px rgba(96, 165, 250, 0.55), inset 0 0 8px rgba(96, 165, 250, 0.25);
}
 .btn-copy-last:disabled {
     background: linear-gradient(180deg, #020617, #020617);
     border: 1px solid rgba(148, 163, 184, 0.25);
     color: rgba(148, 163, 184, 0.5);
     cursor: not-allowed;
     box-shadow: none;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
    /* wrap on small screens */
}
 .f1-header-msg {
     white-space: nowrap;
     font-size: 0.95rem;
     line-height: 1.2;
}
 .f1-submit-gold {
     m8in-width: 150px;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
    /* wraps on small screens */
}
 .f1-countdown {
     display: flex;
     align-items: center;
     padding: 16px;
     border-radius: 12px;
     background: rgba(0,0,0,0.5);
     min-height: 80px;
    /* sets a consistent height */
}
 .f1-top-controls form {
     display: flex;
     align-items: stretch;
    /* make buttons match countdown height */
}
 .f1-top-controls button {
     min-height: 80px;
    /* same as countdown height */
     padding: 0 20px;
     font-size: 1rem;
     border-radius: 12px;
}
 .f1-msg {
     padding: 6px 24px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: .04em;
     white-space: nowrap;
}
/* ------------------ Messages match login card style ------------------ */
 .f1-msg-success {
     color: #22c55e;
     animation: f1-success-pulse 0.9s ease-out;
}
 @keyframes f1-success-pulse {
     0% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
     30% {
         transform: scale(1.08);
         text-shadow: 0 0 16px rgba(34,197,94,0.9);
    }
     100% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
}
 .f1-msg-success {
     color: #22c55e;
     position: relative;
     overflow: hidden;
}
 .f1-msg-success::after {
     content: '';
     position: absolute;
     top: 0;
     left: -120%;
     width: 120%;
     height: 100%;
     background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
     animation: f1-shine 1.2s ease-out;
}
 @keyframes f1-shine {
     to {
         left: 120%;
    }
}
 .f1-msg-error {
     color: #dc2626;
     animation: f1-shake 0.4s ease-in-out;
}
 @keyframes f1-shake {
     0% {
         transform: translateX(0);
    }
     25% {
         transform: translateX(-6px);
    }
     50% {
         transform: translateX(6px);
    }
     75% {
         transform: translateX(-4px);
    }
     100% {
         transform: translateX(0);
    }
}
 .f1-msg-warn {
     color: #ff8700;
     animation: f1-warn-glow 1.2s ease-in-out infinite alternate;
}
 @keyframes f1-warn-glow {
     from {
         text-shadow: 0 0 0 rgba(255,135,0,0);
    }
     to {
         text-shadow: 0 0 10px rgba(255,135,0,.9);
    }
}
/* Hover highlight for clickable rows */
 .race-row {
     cursor: pointer;
     transition: all 0.2s ease;
}
 .race-row:hover {
     background: rgba(15, 23, 42, 0.85);
    /* deep slate like admin-filters */
     box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35), 0 0 18px rgba(96, 165, 250, 0.25);
     color: #e0f2fe;
    /* soft sky text */
}
 .custom-select .options {
     position: absolute;
     top: 36px;
    /* same distance from top of select box */
     left: 0;
     right: 0;
}
/* Navbar group dropdown custom style */
/* =============================== User + Group Switcher (Navbar) =============================== */
 .user-group-nav .nav-link {
     font-weight: 600;
}
/* Active group (blue text) */
 .group-switch {
     color: #93C5FD !important;
     font-weight: 700;
}
/* Remove Bootstrap caret color */
 .group-switch::after {
     filter: brightness(1.3);
}
/* Dropdown container */
 .group-dropdown {
     background: #0f172a;
    /* navbar blue */
     border: none;
     border-radius: 0 0 10px 10px;
     box-shadow: 0 10px 30px rgba(0,0,0,.35);
     padding: 6px 0;
}
/* Dropdown items */
 .group-dropdown-item {
     color: #93C5FD;
     font-weight: 600;
     padding: 8px 18px;
     background: transparent;
}
/* Hover effect */
 .group-dropdown-item:hover {
     background: rgba(255,255,255,0.08);
     color: #ffffff;
}
/* Active group */
 .group-dropdown-item.active {
     color: #ffffff;
     background: rgba(255,255,255,0.15);
}
/* Remove Bootstrap default white */
 .dropdown-menu {
     --bs-dropdown-bg: transparent;
     --bs-dropdown-link-hover-bg: transparent;
     --bs-dropdown-link-active-bg: transparent;
}
/* =============================== Pulse when picks close soon =============================== */
 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(220,53,69,.6);
    }
     70% {
         box-shadow: 0 0 0 10px rgba(220,53,69,0);
    }
     100% {
         box-shadow: 0 0 0 0 rgba(220,53,69,0);
    }
}
 .badge-pulse {
     animation: pulse 1.2s infinite;
}
/* =============================== Dimmed / locked races =============================== */
 .race-locked {
     opacity: 0.65;
     pointer-events: none;
}
/* =============================== Race card visuals =============================== */
 .race-card {
     transition: opacity 0.25s ease, filter 0.25s ease;
}
 .race-status {
     margin-top: 6px;
}
 .race-card.race-dim .race-locked {
     opacity: 0.65;
}
/* Optional: keep text readable */
 .race-card.race-dim .race-link, .race-card.race-dim .race-status {
     opacity: 1;
}
/* Optional: cursor + subtle feel */
 .race-card.race-dim {
     filter: grayscale(15%);
}
 .race-card.race-dim:hover {
     opacity: 0.75;
}
 .badge-pulse {
     position: relative;
     z-index: 2;
}
 .mini-bonus {
     color: gold;
     font-size: 11px;
     margin-left: 4px;
     vertical-align: middle;
}
/* ===== Bonus legend ===== */
 .bonus-legend {
     display: flex;
     align-items: center;
    /* ? vertical centering */
     flex-wrap: wrap;
     gap: 10px 14px;
     margin-top: 14px;
     margin-bottom: 28px;
     padding: 10px 12px;
     background: var(--f1-panel);
     border: 1px solid var(--f1-border);
     border-radius: 10px;
     font-size: 0.75rem;
     color: var(--f1-muted);
}
 .bonus-legend strong {
     color: var(--f1-text);
     font-weight: 600;
     margin-right: 4px;
}
 .bonus-legend span {
     background: rgba(147, 197, 253, 0.08);
    /* f1-blue hint */
     border: 1px solid rgba(147, 197, 253, 0.25);
     color: var(--f1-blue);
     padding: 3px 8px;
     border-radius: 999px;
    /* pill style */
     font-weight: 600;
     white-space: nowrap;
}
/* =============================== LEADERBOARD BASE =============================== */
 .leaderboard {
     border-collapse: collapse;
     width: 100%;
}
 .leaderboard-wrap {
     width: 100%;
     overflow-x: auto;
}
 table.leaderboard {
     width: 100%;
     border-collapse: collapse;
     background: #0f172a;
     border-radius: 14px;
     overflow: hidden;
}
/* =============================== CELLS =============================== */
 .leaderboard th, .leaderboard td {
     padding: 5px 7px;
     font-size: 0.85rem;
     line-height: 1.15;
     vertical-align: middle;
     border: 1px solid #333;
     text-align: center;
     white-space: nowrap;
}
/* All headers */
 .leaderboard th {
     background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
     padding-top: 6px;
     padding-bottom: 6px;
     color: #ffffff;
     font-weight: 700;
     position: sticky;
     top: 0;
     z-index: 4;
	 border-bottom: 2px solid rgba(255,255,255,.25);
}

/* =============================== PICK CELLS =============================== */
 .leaderboard-picks th {
     position: relative;
     padding: 6px 8px 6px;
     font-weight: 700;
}
 .leaderboard-picks td {
     position: relative;
     padding: 6px 8px 22px;
     font-weight: 400;
}
/* Score bubble */
 .leaderboard-picks .score {
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 0.72rem;
     font-weight: 600;
     color: #3fe0a2;
     background: rgba(63,224,162,0.18);
     border-radius: 999px;
     padding: 2px 9px;
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4);
}
/* Glow for tables that have scores */
 .leaderboard:has(.score) td {
     background: rgba(255,255,255,0.03);
     border-radius: 8px;
}
/* Correct picks */
 .leaderboard-picks td.correct_pk {
     background: linear-gradient( 180deg, rgba(63,224,162,.22), rgba(63,224,162,.06) );
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4), 0 0 10px rgba(63,224,162,.15);
}
/* Player */
 .leaderboard-picks .player {
     font-weight: 700;
     font-size: 0.85rem;
     vertical-align: middle;
     background: linear-gradient( 180deg, rgba(63,224,162,.35), rgba(63,224,162,.12) );
     border-radius: 10px;
}


/* Base style for total */
 td.player {
     font-weight: bold;
     text-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #ffff;
    /* default background */
     transition: all 0.3s ease;
}

/* Red score bubble for wrong picks */
 .leaderboard-picks td.wrong .score {
     color: #ff6b6b;
     background: rgba(224,63,63,0.18);
     box-shadow: inset 0 0 0 1px rgba(224,63,63,.4);
}
/* Optional: partial score bubble */
 .leaderboard-picks td.partial .score {
     color: #ff9f1c;
     background: rgba(255,165,0,0.18);
     box-shadow: inset 0 0 0 1px rgba(255,165,0,0.4);
}
/* ================= TOTAL COLUMN ================= */
/* Base style for total */
 td.total-score {
     font-weight: bold;
     tex6t-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #222;
    /* default background */
     transition: all 0.3s ease;
}
/* =============================== ADMIN INPUTS =============================== */
 .leaderboard input, .leaderboard select {
     width: 100%;
     background: #0b1020;
     color: #fff;
     border-radius: 10px;
     padding: 5px 8px;
     border: 1px solid rgba(255,255,255,.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
     font-size: 0.85rem;
}
 .leaderboard input[type="checkbox"] {
     transform: scale(1.25);
     accent-color: #4e7cff;
}
 td.total-score.normal {
     color: #D3D3D3;
    /* plain white text */
     background: rgba(205, 127, 50, 0.05);
    /* subtle gray/transparent */
     font-weight: 400 !important;
}
/* Highlight the top 1 scorer */
 td.total-score.top1 {
     baackground: rgba(255, 215, 0, 0.10) !important;
     color: #b9a200 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 2nd place */
 td.total-score.top2 {
     baackground: rgba(192, 192, 192, 0.10) !important;
     color: #999B9B !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 3rd place */
 td.total-score.top3 {
     baackground: rgba(205, 127, 50, 0.10) !important;
     color: #b07a45 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Clickable cells */
 .leaderboard td.clickable {
     cursor: pointer;
}
/* Actual Qualifying & Race Result Table (1/2 width, left-aligned) */
 .leaderboard-results-wrap {
     widtth: 50%;
    /* 1/3 of page width */
     margin: 0 0 20px 0;
    /* top/bottom spacing, left-aligned */
     overflow-x: auto;
    /* allow horizontal scroll if needed */
}
 .leaderboard-results-wrap table {
     width: 100%;
     border-collapse: collapse;
}
 .leaderboard-results-wrap th, .leaderboard-results-wrap td {
     padding: 6px 10px;
     text-align: center;
}
/* =============================== PODIUM COLORS - Races =============================== */
 .leaderboard td.podium-bronze:nth-child(n+3) {
     background: rgba(205, 127, 50, 0.05) !important;
     color: #b07a45 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-gold:nth-child(n+3) {
     background: rgba(255, 215, 0, 0.05) !important;
     color: #b9a200 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-silver:nth-child(n+3) {
     background: rgba(192, 192, 192, 0.05) !important;
     color: #999B9B !important;
     font-weight: 700 !important;
}
/* =============================== PODIUM COLORS - Total - Line 3 first 3 columns formatting =============================== */
/* BRONZE */
 .laeaderboard tbody tr:nth-child(4) td.user-cell:nth-child(-n+3) {
     color: #b07a45 !important;
     font-weight: 900 !important;
}
/* GOLD */
 .leaaderboard tbody tr:nth-child(2) td.user-cell:nth-child(-n+3) {
     color: #b9a200 !important;
     font-weight: 900 !important;
}
/* SILVER */
 .leaaderboard tbody tr:nth-child(3) td.user-cell:nth-child(-n+3) {
     color: #999B9B !important;
     font-weight: 900 !important;
}
/* =============================== STICKY COLUMNS =============================== */
 .leaderhboard-wrap {
     overflow-x: auto;
     position: relative;
}
/* =============================== HEADER COLORS =============================== */
 .leaderboard td {
     background: #0b1020;
     box-shadow: -2px 0 8px rgba(0,0,0,.4);
}

/* ================= COLUMN HOVER LINE ================= */
 .hover-columns {
     position: relative;
}

 .leaderboard-wrap.hover-columns {
     position: relative;
     overflow: visible;
    /* important */
}
/* =============================== RACE HEADER =============================== */
 .leaderboard th.race-header {
     position: relative;
     color: #60A5FA;
     font-weight: 700;
     letter-spacing: 0.45px;
     text-transform: uppercase;
}
 .leaderboard th.race-header::after {
     content: "";
     position: absolute;
     left: 20%;
     right: 20%;
     bottom: -2px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #e10600, transparent);
     opacity: 0.6;
     transition: all .2s ease;
}
 .leaderboard th.race-header:hover::after {
     left: 8%;
     right: 8%;
     opacity: 1;
}
 .season-select {
     background:#0f172a;
     padding-top:2px;
     padding-bottom:2px;
     padding-left:16px;
     padding-right:16px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
     margin-left: 24px;
    /* try 12–24px */
}
 .admin-filters .season-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:500;
}
 .admin-filters .season-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
 #race-tooltip {
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     background: linear-gradient(180deg, #1b2042, #0b1020);
     color: #fff;
     padding: 6px 10px;
     border-radius: 8px;
     font-size: 0.75rem;
     font-weight: 600;
     white-space: nowrap;
     border: 1px solid rgba(255,255,255,0.12);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 10px 28px rgba(0,0,0,0.65), inset 0 0 10px rgba(255,0,0,0.2);
     opacity: 0;
     transform: translateY(6px);
     transition: opacity .15s ease-out, transform .18s cubic-bezier(.2,.8,.2,1);
}
 #race-tooltip::before {
     content: "";
     position: absolute;
     top: 0;
     left: 10px;
     right: 10px;
     height: 2px;
     background: linear-gradient( 90deg, transparent, #e10600, transparent );
     border-radius: 2px;
}
/* Center bonus number vertically + horizontally */
 .leaderboard-picks .bonus-score {
     font-size: 0.85rem;
     font-weight: 700;
     padding: 2px 8px;
     vertical-align: middle;
     border-radius: 999px;
     background: rgba(78,124,255,0.18);
     color: #22c55e;
     line-height: 1;
}

/* zero bonus */
 .leaderboard-picks .bonus-score.is-zero {
     color: var(--f1-muted);
     background: transparent;
     box-shadow: none;
     font-weight: 500;
}
/*IMPROVEMENTS */
 .leaderboard-picks .score {
     color: #22c55e;
     background: rgba(34,197,94,.15);
     box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
}
 .leaderboard-picks td.wrong .score {
     color: #ef4444;
     background: rgba(239,68,68,.15);
     box-shadow: inset 0 0 0 1px rgba(239,68,68,.35);
}
 .leaderboard-picks td.partial .score {
     color: #f59e0b;
     background: rgba(245,158,11,.15);
     box-shadow: inset 0 0 0 1px rgba(245,158,11,.35);
}

 .leaderboard-picks .score {
     line-height: 1;
}
 .leaderboard input, .leaderboard select {
     background: var(--f1-bg);
     border: 1px solid var(--f1-border);
     box-shadow: inset 0 0 0 1px rgba(147,197,253,.15);
}

/* =================================
   RULES ACCORDION – SINGLE PANEL (CLEAN)
   ================================= */
.rules-subtitle strong {
    color: #facc15;
}


#rulesAccordion {
    margin-top: 0.25rem;
    background: linear-gradient(180deg, #0b1222, #050914);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(255,255,255,.04);
}

/* Items become rows */
#rulesAccordion .accordion-item {
    background: transparent;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* Divider between rows */
#rulesAccordion .accordion-item + .accordion-item {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Header */
#rulesAccordion .accordion-header {
    margin: 0;
}

#rulesAccordion .accordion-button {
    background: transparent;
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.25;
}

/* Active */
#rulesAccordion .accordion-button:not(.collapsed) {
    color: #facc15;
    background: rgba(250,204,21,0.06);
}

/* Focus */
#rulesAccordion .accordion-button:focus {
    box-shadow: none;
}

/* Chevron */
#rulesAccordion .accordion-button::after {
    filter: invert(1);
    opacity: 0.7;
}

/* Body */
#rulesAccordion .accordion-collapse {
    background: rgba(255,255,255,0.02);
}

#rulesAccordion .accordion-body {
    padding: 0.55rem 0.9rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

/* Text */
#rulesAccordion strong {
    color: #facc15;
}

/* Lists */
#rulesAccordion .accordion-body ul {
    padding-left: 1.6rem;
    margin-left: 0;
}

#rulesAccordion .accordion-body li {
    padding-left: 0.2rem;
}

#rulesAccordion li::marker {
    content: "";
}

#rulesAccordion {
    list-style: none;
    padding-left: 0; /* optional: removes default indent */
}

/* Tables */
#rulesAccordion table {
    margin: 0.4rem 0;
    background: transparent;
    color: #fff;
}

#rulesAccordion thead {
    background: rgba(255,255,255,0.08);
    color: #ffd700;
}

#rulesAccordion td,
#rulesAccordion th {
    border-color: rgba(255,255,255,0.15);
}

/* Rounded ends */
#rulesAccordion .accordion-item:first-child .accordion-button {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

#rulesAccordion .accordion-item:last-child .accordion-collapse {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Desktop */
@media (min-width: 992px) {
    #rulesAccordion .accordion-button {
        font-size: 0.9rem;
        padding: 0.45rem 0.85rem;
    }
}
/* Active indicator bar */
#rulesAccordion .accordion-item {
    position: relative;
}

#rulesAccordion .accordion-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: linear-gradient(180deg, #facc15, #eab308);
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.2s ease, transform 0.25s ease;
    border-radius: 2px;
}

/* Show when active */
#rulesAccordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
    opacity: 1;
    transform: scaleY(1);
}
/* Scroll-highlight */
#rulesAccordion .accordion-item.is-visible > .accordion-header .accordion-button {
    background: rgba(96,165,250,0.08);
}
/* ===============================
   RULES ACCORDION – TABLE WIDTH FIX
   =============================== */

/* Let tables size to content */
#rulesAccordion table {
    width: auto !important;          /* <-- key line */
    max-width: 100%;
    margin: 0.75rem 0 !important;    /* left aligned */
    display: inline-table;           /* prevents stretching */
}

/* Kill Bootstrap full-width behavior */
#rulesAccordion .table {
    width: auto !important;
}

/* Dark theme enforcement */
#rulesAccordion table,
#rulesAccordion thead,
#rulesAccordion tbody,
#rulesAccordion tr,
#rulesAccordion th,
#rulesAccordion td {
    background-color: transparent !important;
}

/* Header row */
#rulesAccordion thead th {
    background: rgba(250, 204, 21, 0.14) !important;
    color: #facc15 !important;
    white-space: nowrap;
}

/* Body rows */
#rulesAccordion tbody tr {
    background: rgba(255,255,255,0.03) !important;
}

#rulesAccordion tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.06) !important;
}

/* Text */
#rulesAccordion td,
#rulesAccordion th {
    color: #e5e7eb !important;
    white-space: nowrap;
}
/* ===============================
   POINTS LIST – TABLELESS
   =============================== */

#rulesAccordion .points-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 1.5rem;
    width: fit-content;
    margin: 0.75rem 0;
}

/* Row */
#rulesAccordion .points-list > div {
    display: contents;
}

/* Position label */
#rulesAccordion .points-list span {
    color: #e5e7eb;
    font-weight: 500;
    white-space: nowrap;
}

/* Points value */
#rulesAccordion .points-list strong {
    color: #facc15;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* Optional subtle divider every row */
#rulesAccordion .points-list span,
#rulesAccordion .points-list strong {
    padding: 0.15rem 0;
}

/* Slight glow on hover (optional but nice) */
#rulesAccordion .points-list > div:hover span,
#rulesAccordion .points-list > div:hover strong {
    color: #fde68a;
}
#rulesAccordion .points-list div:nth-child(-n+3) strong {
    color: #ffd700;
}
@media (max-width: 600px) {
    #rulesAccordion .points-list {
        grid-template-columns: 1fr auto;
        width: 100%;
    }
}
/* Dark theme links inside rules accordion */
#rulesAccordion a {
    color: #facc15; /* soft gold */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 204, 21, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

#rulesAccordion a:hover {
    color: #fde047; /* brighter gold */
    border-bottom-color: rgba(250, 204, 21, 0.75);
}

/* Optional: subtle external-link cue */
#rulesAccordion a[target="_blank"]::after {
    content: "?";
    font-size: 0.75em;
    margin-left: 0.25rem;
    opacity: 0.6;
}
/* Fix invisible dropdown text */
select.f1-input {
    background-color: #111;
    color: #fff;
    border: 1px solid #444;
}

/* Dropdown options */
select.f1-input option {
    background-color: #111;   /* menu background */
    color: #fff;             /* text */
}

/* Hovered option (Chrome / Edge) */
select.f1-input option:hover {
    background-color: #e10600;
    color: #fff;
}

/* Selected option inside list */
select.f1-input option:checked {
    background-color: #e10600;
    color: #fff;
}
/* Gold, Silver, Bronze styling based on rank classes */
.user-cell.top1 {
    color: #b9a200 !important;  /* gold */
    font-weight: 900 !important;
}
.user-cell.top2 {
    color: #c0c0c0 !important;  /* silver */
    font-weight: 700 !important;
}
.user-cell.top3 {
    color: #cd7f32 !important;  /* bronze */
    font-weight: 700 !important;
}
@media (max-width: 600px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tile.big {
    grid-column: span 1;
  }
}
@media (max-width: 600px) {
  .tile {
    padding: 16px;
    border-radius: 14px;
  }

  .tile h3 {
    font-size: 1.1rem;
  }

  .tile .tile-value {
    font-size: 1.8rem;
  }
}
@media (max-width: 600px) {
  .swipe-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
  }

  .swipe-row .tile {
    min-width: 160px;
    flex-shrink: 0;
  }
}
/* ============ STICKY HEADER ============ */
.mobile-header {
  display: none;
}

@media (max-width: 600px) {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(90deg,#1a1a2e,#0f3460);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
  }

  .mobile-header small {
    font-size: .6rem;
    opacity: .7;
    display:block;
  }
}

/* ============ TAP TO EXPAND ============ */
.tile.expandable {
  cursor: pointer;
}

.tile.expanded {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 0 25px rgba(241,196,15,.9);
}

/* ============ MOMENTUM METER ============ */
.meter {
  background:#111;
  border-radius:20px;
  overflow:hidden;
  height:12px;
  margin-top:8px;
}

.meter span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#e74c3c,#f1c40f,#2ecc71);
  width:0%;
  transition:1s;
}
.tile.wide {
  grid-column: span 2;
}
.dashboard-grid.stats {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width:600px){
  .dashboard-grid.stats {
    grid-template-columns: 1fr;
  }
}
.tile {
  min-height: 90px;
  justify-content:flex-start;
}

@media (max-width:600px){
  .tile {
    min-height: 120px;
  }
}
@media (max-width: 768px){
    #page-container{
        padding: 0 8px;
    }
    body{
        padding-top: 80px; /* smaller navbar height on mobile */
    }
}
@media (max-width: 600px){
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 12px;
    }
    .nav-links a{
        margin-left: 0;
        margin-top: 6px;
        font-size: .85rem;
    }
}
@media (max-width: 600px){
    .f1-top-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .f1-top-controls form,
    .f1-top-controls button {
        width: 100%;
        min-height: auto; /* let buttons shrink */
    }
    .f1-countdown {
        min-height: 60px;
        padding: 12px;
    }
}
.locked-list {
    list-style: none;       /* Remove bullets */
    padding-left: 0;        /* Remove default indentation */
    margin-left: 0;         /* Optional: reset left margin */
}

/* ==========================================
   HALL OF FAME PODIUM - COMPACT VERSION
========================================== */
.hof-podium-stage {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
    align-items: end;
    margin-top: 54px;
}

.hof-podium {
    background: linear-gradient(180deg, #0b0b0b, #151515);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255,215,0,.12);
    position: relative;
    font-size: 0.9rem;
}

.hof-podium.gold { transform: translateY(-20px); border: 2px solid gold; box-shadow:0 0 60px rgba(255,215,0,.3); }
.hof-podium.silver { border: 2px solid #aaa; }
.hof-podium.bronze { border: 2px solid #cd7f32; }

.hof-podium h3 { margin: 10px 0 15px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.hof-podium.gold h3 { color: gold; }
.hof-podium.silver h3 { color: #ddd; }
.hof-podium.bronze h3 { color: #cd7f32; }

.hof-podium-rank {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid gold;
}

.hof-podium-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hof-podium-row span {
    color: #eee;
}

.hof-podium-row b {
    font-weight: 700;
    color: gold;
}

.hof-podium-row .medal-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}
.f1-submit-wrapper {
    position: relative;
    width: 100%;
}

#f1-inline-message {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: -10px;
    width: 100%;
    z-index: 20;
    pointer-events: none;
}



/* Responsive for mobile */
@media (max-width: 768px){
    .hof-podium-stage { grid-template-columns: 1fr; gap: 12px; }
    .hof-podium-rank { top: -16px; width: 36px; height: 36px; font-size: 16px; }
    .hof-podium-row { font-size: 0.8rem; padding: 4px 0; }
    .hof-podium-row .medal-icon { width: 14px; height: 14px; }
}

    /* The glow box that wraps submit */
    .page-picks .f1-countdown.glow-box {
        display: flex;
        justify-content: center;
    }

    /* The inner row */
    .page-picks .f1-countdown .f1-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Wrapper that holds message + button */
    .page-picks .f1-submit-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /* Error / warning message box */
    #f1-inline-message .f1-msg {
	font-weight:900;
        text-align: center;
        max-width: 100%;
    }

    /* Button row */
    .page-picks .f1-btn-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Lock in Picks button */
    .page-picks .f1-submit-btn {
        width: auto;
        min-width: 220px;
    }
.hero-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* ================= PICKS STUFF ================= */
 .f1-countdowny{
     bacykground: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 8px 10px 8px;
     buox-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:5px;
}
.f1-focused {
    animation: focusFlash 1.2s ease-out;
}
/* =======================
   SCORECARD (MOBILE)
   ======================= */

.scorecard { margin: 10px 0 16px; }

/* Header */
.scorecard-header{
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.sc-title{ font-size: 1.05rem; font-weight: 600; color:#fff; }
.sc-meta{ margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }

.pill{
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ddd;
}

/* List */
.scorecard-list{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Each card row */
.scorecard-row{
  width: 100%;
  box-sizing: border-box;

  display:grid;
  grid-template-columns: 1fr auto; /* left block | right block */
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: inherit;
}

.scorecard-row:active{ transform: scale(0.99); }

/* Left block = title line + date line */
.sc-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
/* Title line: round | name | tag */
.sc-race{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:28px;
}
/* Round pill */
.sc-round{
  font-size:.8rem;
  opacity:.8;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
}

/* Race name */
.sc-name{
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height: 1.1;
  min-width: 0;
}

/* BEST/WORST tag */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  white-space:nowrap;
  line-height:1;
  flex-shrink:0;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#ddd;
  font-size: .75rem;
}

/* Best / worst styling */
.tag-best{
  background: linear-gradient(90deg,#ffb300,#ff6a00);
  border-color: rgba(255,200,0,.35);
  color:#111;
  font-weight:700;
}

.tag-worst{
  background: rgba(255,80,80,0.10);
  border-color: rgba(255,80,80,.35);
  box-shadow: 0 0 6px rgba(255,80,80,.12);
  color:#ffd6d6;
  font-weight:700;
}

/* Date line: align under the NAME column (not under round) */
.sc-date{
  margin-top: 4px;
  font-size:.8rem;
  opacity:.8;
  line-height: 1.1;

  /* This is the key alignment fix:
     must roughly match .sc-round width + column gap.
     Adjust 54–66px if you change font sizes/padding. */
  padding-left: 58px;
}

/* Right block (medal + points + delta if you use it) */
.sc-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width: 90px; /* keeps column stable even if medal missing */
}

/* Points */
.sc-points{
  font-size:1.05rem;
  font-weight:700;
  width: 40px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* Optional delta styling (if you render it) */
.sc-delta{
  font-size:.85rem;
  font-weight:700;
  width: 44px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:.9;
}
.delta-up{ color:#77ffb0; }
.delta-down{ color:#ff7a7a; }
.delta-flat{ color:#ddd; }

/* Optional medals border hint on the card itself */
.medal-gold{ border-color: rgba(255,215,0,0.35); }
.medal-silver{ border-color: rgba(192,192,192,0.35); }
.medal-bronze{ border-color: rgba(205,127,50,0.35); }

.sc-round{
  flex:0 0 auto;   /* prevents stretching */
}

.tag{
  flex:0 0 auto;
}

.sc-date{
  margin-top:2px;
  padding-left:0;  /* IMPORTANT: remove earlier padding-left */
  line-height:1.1;
}

/* ===== SCORECARD HARD OVERRIDES ===== */

/* Card layout */
.scorecard-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
}

/* Left side must stack normally */
.sc-left{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  min-width:0 !important;
}

/* Title line: round + name + tag inline */
.sc-race{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:auto !important;
  min-width:0 !important;
}

/* Prevent these from becoming full-width bars */
.sc-round,
.sc-name,
.tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  flex:0 0 auto !important;
}

/* Let name shrink/ellipsis but not push layout */
.sc-name{
  flex: 0 1 190px;   /* LOCK name column width */
  min-width: 0;
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.1;
}
/* Tag stays small */
.tag{
  height:22px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}
.tag,
.tag-empty{
  width:72px;        /* fixed tag column width */
  justify-content:center;
}
.tag-empty{
  opacity:0;
  pointer-events:none;
}
/* Date is just text (not a bar) */
.sc-date{
  margin-top:2px;
  font-size:.8rem;
  opacity:.8;
}
/* Right side fixed alignment */
.sc-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-width:90px !important;
}
.online-counter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  border:1px solid rgba(255,255,255,0.12);
}

.online-active{
  background: rgba(46,204,113,0.12);
  color:#7dffb5;
}

.online-inactive{
  background: rgba(255,255,255,0.05);
  color:#888;
}

.online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2ecc71;
  box-shadow:0 0 6px rgba(46,204,113,.4);
  display:inline-block;
}

/* Optional: make dot grey when inactive */
.online-inactive .online-dot{
  background:#666;
  box-shadow:none;
}

.online-active .online-dot{ animation: pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(46,204,113,.45); }
  70%{ box-shadow:0 0 0 6px rgba(46,204,113,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

/* --- Next race: picks window progress bar --- */
.picks-progress-wrap{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  margin-top:10px;
}
.picks-progress-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(46,204,113,.95), rgba(241,196,15,.95), rgba(231,76,60,.95));
  transition: width .35s ease;
}

/* --- Urgent pulse when picks are open and not submitted --- */
.tile.urgent{
  box-shadow: 0 0 0 rgba(231,76,60,0.0);
  animation: urgentPulse 1.6s ease-in-out infinite;
}
@keyframes urgentPulse{
  0%   { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
  50%  { box-shadow: 0 0 12px rgba(231,76,60,0.25), 0 0 28px rgba(231,76,60,0.10); }
  100% { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
}

.ptg-logo{
  display:inline-flex;
  align-items:flex-end;
  gap:14px;
  position:relative;
  line-height:1;
}

/* Red “grid bars” */
.ptg-mark{
  display:inline-flex;
  gap:6px;
  transform:skewX(-12deg);
  margin-bottom:2px;
}
.ptg-bar{
  width:10px;
  height:38px;              /* tweak height here */
  border-radius:2px;
  background:linear-gradient(180deg,#ff2a2a 0%, #b10000 70%, #4a0000 100%);
  box-shadow:0 0 0 rgba(0,0,0,0); /* keep clean, not gamer-glow */
}
.ptg-bar.b1{ opacity:1; }
.ptg-bar.b2{ opacity:.92; }
.ptg-bar.b3{ opacity:.84; }

/* Wordmark */
.ptg-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:56px;           /* tweak size here */
  letter-spacing:-0.7px;
  background:linear-gradient(180deg,#f3f7ff 0%, #cfe1ff 55%, #8db7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* subtle depth like your sample */
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Underline glow */
.ptg-underline{
  position:absolute;
  left:78px;                /* start under the text (adjust if needed) */
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(64,160,255,0) 0%, rgba(64,160,255,.95) 35%, rgba(64,160,255,0) 100%);
  filter: blur(.2px);
  box-shadow: 0 0 14px rgba(64,160,255,.35);
}

/* Title row (puts info next to title) */
.tile-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}
.tile-title-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* Info icon */
.tile .info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  color:#9aa4b2;
  font-size:.85rem;
  line-height:1;
  padding:2px 4px;
  border-radius:6px;
  transition:color 0.2s ease, background 0.2s ease;
}
.tile .info:hover{ color:#ffffff; background:transparent; }

.tile .info:hover .info-tooltip,
.tile .info:focus .info-tooltip{
  display:block;
}

.tile .info{ opacity:.85; }
.tile .info:hover{ opacity:1; color:#fff; }

.f1-input-locked{
    background:#0b1020;
    color:#7f8aa3;
    cursor:not-allowed;
}

.user-name {
    cursor:pointer;
    font-weight:600;
}

.dropdown-menu {
    background:#111827;
    border:1px solid rgba(255,255,255,0.08);
}

.dropdown-item {
    color:#e5e7eb;
}

.dropdown-item:hover {
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.dropdown-item.active {
    background:#e10600;
    color:#fff;
}

/* ================= MODERN NAV PILLS ================= */

.user-group-nav{
    gap:10px;
}

.user-group-nav .nav-item{
    display:flex;
    align-items:center;
}

.nav-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    max-width:260px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    color:#e5e7eb;
    font-weight:600;
    font-size:.92rem;
    line-height:1;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    transition:all .18s ease;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

button.nav-pill{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}

.nav-pill:hover{
    color:#fff;
    border-color:rgba(147,197,253,.35);
    box-shadow:0 8px 22px rgba(0,0,0,.24);
    transform:translateY(-1px);
}

.nav-pill:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(147,197,253,.28), 0 8px 22px rgba(0,0,0,.24);
}

.nav-pill::after{
    margin-left:2px;
    opacity:.75;
}

.nav-pill-user{
    background:linear-gradient(180deg, rgba(147,197,253,.16), rgba(255,255,255,.04));
}

.nav-pill-group{
    background:linear-gradient(180deg, rgba(63,224,162,.14), rgba(255,255,255,.04));
}

.nav-pill-static{
    cursor:default;
}

.nav-pill-static:hover{
    transform:none;
}

.nav-pill-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    font-size:.95rem;
    flex:0 0 20px;
    opacity:.9;
}

.nav-pill-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    flex:0 0 24px;
    font-size:.78rem;
    font-weight:800;
    color:#fff;
    background:#93c5fd;
    box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}

.nav-pill-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ================= MODERN DROPDOWNS ================= */

.modern-dropdown{
    min-width:240px;
    margin-top:10px !important;
    padding:8px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg,#0f172a,#0b1220);
    box-shadow:0 18px 40px rgba(0,0,0,.38);
}

.modern-dropdown-header{
    padding:6px 10px 8px;
    color:#93C5FD;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.modern-dropdown-divider{
    margin:6px 0;
    border-color:rgba(255,255,255,0.08);
}

.modern-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:10px;
    padding:10px 12px;
    color:#e5e7eb;
    font-weight:600;
    transition:all .15s ease;
}

.modern-dropdown-item:hover{
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.modern-dropdown-item.active{
    background:rgba(147,197,253,.14);
    color:#fff;
}

.dropdown-item-icon{
    width:18px;
    text-align:center;
    flex:0 0 18px;
    opacity:.9;
}

.danger-item:hover{
    background:rgba(239,68,68,.12);
    color:#fecaca;
}

.invite-form input{
    font-size:.85rem;
}

.invite-form button{
    font-size:.85rem;
}

.modern-dropdown .invite-form{
    max-width:220px;
}

/* =========================================
   Column hover glow (dark site blue)
========================================= */
/* ================= BASE ================= */
 :root{
     --f1-bg:#020617;
     --f1-panel:#0f172a;
     --f1-border:rgba(255,255,255,.08);
     --f1-text:#e5e7eb;
     --f1-muted:#9ca3af;
     --f1-blue:#93C5FD;
}
/* RESET */
 *{
     box-sizing:border-box;
}
 body{
     margin:0;
     background: radial-gradient(circle at top, #0f172a 0%, #020617 70%);
     color:var(--f1-text);
     font-family:'Titillium Web', sans-serif;
     min-height:100vh;
}
/* Links */
 a{
     color:var(--f1-blue);
     text-decoration:none;
}
 a:hover{
     color:#93c5fd;
}
/* Headings */
 h2{
     font-size:1.35rem;
     font-weight:800;
     letter-spacing:.06em;
     text-transform:uppercase;
}
/* ================= NAVBAR ================= */
 .f1-navbar{
     background:linear-gradient(180deg,#0f172a,#020617);
     border-bottom:1px solid rgba(96,165,250,.25);
     min-height:64px;
    /* ? fixes jumping height */
     padding:0 16px;
}
 .f1-navbar .container-fluid{
     min-height:64px;
}
 .f1-navbar .navbar-brand{
     color:var(--f1-blue);
     font-weight:900;
     font-size:1.25rem;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link{
     color:#cbd5e1;
     font-weight:700;
     letter-spacing:.05em;
     padding:0 16px;
     height:64px;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link:hover{
     color:var(--f1-blue);
}
 .f1-navbar .nav-link.active{
     color:var(--f1-blue);
     border-bottom:2px solid var(--f1-blue);
}
/* mobile toggler */
 .navbar-toggler{
     border-color:var(--f1-blue);
}
 .navbar-toggler-icon{
     filter:invert(1);
}
/* ===== SITE ===== */
/* ===== CONTAINER ===== */
 .container{
     max-width:1200px;
}
/* ===== RACE LIST ===== */
 .season-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:12px 24px;
}
/* Back to season */
 .season-back {
     text-decoration: none;
     font-weight: 700;
     font-size: 0.85rem;
     color: #3fe0a2;
}
 .season-back:hover {
     color: #6fffd1;
}
/* ================= SEASON RACE CARDS ================= */
 .race-card{
     position: relative;
     padding: 6px 8px 7px;
    /* MUCH tighter */
     background: linear-gradient(180deg,#0c1a26,#08121b);
     border: 1px solid #1b3550;
     border-radius: 6px;
     box-shadow: 0 0 6px rgba(0,120,255,.12);
}
/* Remove floaty movement – makes grid denser */
 .race-card:hover{
     box-shadow: 0 0 10px rgba(0,150,255,.25);
}
/* Race title + date */
 .race-link{
     font-size: 15px;
     line-height: 1.15;
     display:block;
     padding:12px 16px;
     background:#0f172a;
     border-radius:10px;
     border-left:4px solid #60a5fa;
     font-weight:700;
     transition:.15s;
}
 .race-link:hover{
     background:#020617;
     border-left-color:#93c5fd;
     transform:translateX(4px);
}
 .race-date{
     color:var(--f1-muted);
     font-size:0.85em;
     opacity:.75;
}
/* Status badge inside tile */
 .race-status{
     position:absolute;
     top:4px;
     right:6px;
}
 .race-status .badge{
     font-size: 10px;
     letter-spacing:.4px;
     padding:2px 6px;
     border-radius:12px;
     font-weight:400;
}
/* OPEN */
 .badge.bg-success{
     background:#1cffac !important;
     color:#003b22;
}

/* CLOSING */
 .badge.bg-closing{
     background:#FF6F00 !important;
    color:#FFFFFF;
}

/* LOCKED */
 .badge.bg-danger{
     background:#ff5c5c !important;
}

/* FINISHED */
 .badge.bg-secondary{
     background:#5b6f87 !important;
}
/* ================= F1 DRIVER PICK COLORS ================= */
/* Base select */
 .f1-select {
     max-width: 280px;
     width: 100%;
     padding: 6px 10px;
     font-weight: 650;
     letter-spacing: 0.02em;
     min-height: 30px;
     min-width: 300px;
     font-size: 0.92rem;
     border-radius: 8px;
     background-color: #0b1220;
     border: 1px solid rgba(255,255,255,.08);
     color: #e5e7eb;
     transition: all .2s ease;
}
/* Hover = highlight */
 .f1-select:hover {
     border-color: rgba(255,200,0,.5);
}
/* Focus = race ready */
 .f1-select:focus {
     outline: none;
     border-color: #ffcc33;
     box-shadow: 0 0 0 2px rgba(255,204,51,.25);
}
/* Changed picks glow */
 .f1-select.changed {
     border-color: #22c55e;
     box-shadow: 0 0 0 1px rgba(34,197,94,.6);
}
 .f1-select option:checked {
     font-weight: 900;
     background-color: #0b1220;
}
 .pole-select{
     margin-top: 2px;
     padding-bottom: 6px;
     margin-bottom: 6px;
     border-bottom: 1px dashed rgba(147,197,253,.25);
}
 .f1-pos-label{
     padding-top: 4px;
     text-align:left;
     font-weight:700;
     color:#fff;
}
/* Selected row in dropdown */
 .f1-select option:checked {
     outline:2px solid white;
}
/* Force the SELECT to always use its team color, never inherit grey from option rendering */
 .f1-select{
     -webkit-appearance: none;
     appearance: none;
     background-clip: padding-box;
}
/* Re-apply team background after option selection (Chrome fix) */
 .f1-select.team-redbull {
     background-color:#4781D7 !important;
}
 .f1-select.team-ferrari {
     background-color:#dc0000 !important;
}
 .f1-select.team-mercedes {
     background-color:#00d2be !important;
}
 .f1-select.team-mclaren {
     background-color:#ff8700 !important;
}
 .f1-select.team-astonmartin {
     background-color:#006f62 !important;
}
 .f1-select.team-alpine {
     background-color:#0090ff !important;
}
 .f1-select.team-williams {
     background-color:#00a3e0 !important;
}
 .f1-select.team-sauber {
     background-color:#52e252 !important;
}
 .f1-select.team-haas {
     background-color:#b6babd !important;
}
 .f1-select.team-racingbulls {
     background-color:#000B8D !important;
}
 .f1-select.team-audi {
     background-color:#F50537!important;
}
/* Race date next to GP title */
 h4 .text-muted{
     color: #aaa !important;
    /* lighter or darker */
     opacity: 0.8;
    /* control how muted */
     font-weight: 500;
     letter-spacing: 0.04em;
}
 .lock-modal{
     position:fixed;
     inset:0;
     background:rgba(0,0,0,.75);
     display:none;
     align-items:center;
     justify-content:center;
     z-index:9999;
}
 .lock-box{
     background:#111;
     border:2px solid gold;
     padding:30px 40px;
     border-radius:12px;
     color:#fff;
     max-width:400px;
     text-align:center;
     box-shadow:0 0 40px rgba(255,215,0,.5);
}
 .lock-actions{
     margin-top:25px;
     display:flex;
     justify-content:space-between;
}
 .lock-actions button{
     padding:10px 24px;
     border-radius:20px;
     border:none;
     font-weight:700;
}
 .confirm-lock{
     background:gold;
     color:#111;
}
/* ===== ADMIN ===== */
 .admin-filters{
     background:#0f172a;
     padding:10px 14px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
}
 .admin-filters span{
     color:#60a5fa;
     font-weight:900;
     letter-spacing:.06em;
     text-transform:uppercase;
}
 .admin-filters label{
     color:#cbd5e1;
     font-weight:700;
}
 .admin-filters .form-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:700;
}
 .admin-filters .form-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
/* ------------------------------------------------- Grid Picks ------------------------------------------------- */
/* F1 grid for picks */
 .f1-grid{
     display:grid;
     grid-template-columns: 40px 1fr;
     gap: 6px 6px;
     max-width:650px;
}
 .f1-row{
     display: contents;
}
 .f1-submit-wrapper {
     margin-top: 16px;
     padding-top: 12px;
     border-top: 1px solid rgba(255,255,255,.08);
}
 .f1-submit:hover{
     background:#ff1e1e;
}
 .f1-select.changed{
     animation:f1flash .2s ease;
}
 @keyframes f1flash{
     from{
         box-shadow:0 0 0px #fff;
    }
     to{
         box-shadow:0 0 10px #fff;
    }
}
/* ============ LANDING PAGE ============ */
 .landing-hero{
     display:grid;
     grid-template-columns: 1.2fr 1fr;
     min-height:60vh;
     align-items:center;
     gap:60px;
}
 .hero-content h1{
     font-size:3.4rem;
     font-weight:900;
     line-height:1.1;
}
 .hero-content span{
     color:#facc15;
}
 .hero-content p{
     margin-top:20px;
     font-size:1.2rem;
     color:#9ca3af;
}
 .hero-buttons{
     margin-top:30px;
     display:flex;
     gap:16px;
}
 .btn-gold{
     background:linear-gradient(135deg,#facc15,#f59e0b);
     color:#000;
     padding:14px 28px;
     border-radius:12px;
     font-weight:900;
}
 .btn-outline{
     border:2px solid #facc15;
     color:#facc15;
     padding:14px 28px;
     border-radius:12px;
     font-weight:800;
}
 .preview-card{
     background:rgba(15,23,42,.9);
     border-radius:20px;
     padding:24px;
     box-shadow:0 0 40px rgba(250,204,21,.15);
}
 .preview-row{
     padding:14px;
     margin-bottom:10px;
     border-radius:12px;
     font-weight:700;
}
 .preview-row.gold{
     background:rgba(250,204,21,.25);
}
 .preview-row.silver{
     background:rgba(203,213,225,.2);
}
 .preview-row.bronze{
     background:rgba(205,127,50,.25);
}
 .how-it-works{
     margin-top:20px;
     display:grid;
     grid-template-columns: repeat(3,1fr);
     gap:30px;
}
 .how-card{
     background:rgba(15,23,42,.9);
     padding:30px;
     border-radius:18px;
     text-align:center;
}
 .preview-header {
     text-align: center;
     font-size: 0.85rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(255, 215, 0, 0.85);
    /* gold glow */
     margin-bottom: 10px;
     font-weight: 600;
}
/* ============================ Hall of Fame Layout ============================ */
 h1 {
     text-align: center;
     font-size: 2.6rem;
     margin: 40px 0 10px;
     color: #ffd700;
     letter-spacing: 0.08em;
}
 h2 {
     margin: 50px 0 20px;
     font-size: 1.2rem;
     border-bottom: 2px solid rgba(255,215,0,0.3);
     padding-bottom: 8px;
     color: #fff;
}
/* ============================ Champions Wall ============================ */
 .hof-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
     gap: 20px;
}
 .hof-card {
     background: linear-gradient(145deg, #121212, #1b1b1b);
     border: 1px solid rgba(255,215,0,0.15);
     border-radius: 14px;
     padding: 18px;
     text-align: center;
     box-shadow: 0 8px 30px rgba(0,0,0,0.6);
     position: relative;
     overflow: hidden;
}
 .hof-card.champion::before {
     content: "πŸ†";
     position: absolute;
     top: 10px;
     right: 14px;
     font-size: 2rem;
     opacity: 0.2;
}
 .hof-season {
     font-size: 0.8rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
}
 .hof-name {
     font-size: 1.3rem;
     font-weight: 600;
     margin: 10px 0;
     color: #ffd700;
}
 .hof-points {
     font-size: 1rem;
     color: #fff;
     opacity: 0.9;
}
/* ============================ Dynasty Club ============================ */
 .dynasty-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
     gap: 15px;
}
 .dynasty-card {
     background: #111;
     border-left: 4px solid #ffd700;
     padding: 14px 18px;
     border-radius: 10px;
     font-weight: 600;
}
/* ============================ Tables (Podiums / All-Time) ============================ */
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
}
 th {
     text-align: left;
     padding: 12px;
     background: rgba(255,215,0,0.1);
     color: #ffd700;
     font-size: 0.95rem;
     letter-spacing: 0.1em;
}
 td {
     padding: 12px;
     border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* ================= BASE ================= */
 .f1-submit-row{
	max-width: 150px;
     display:flex;
     justify-content:flex-start;
    /* not center */
     padding-left:68px;
    /* same left as select boxes */
     margin-top:30px;
}
 .btn-outline:hover{
     border-color:#fde68a;
     color:#fde68a;
     background-color: rgba(250, 204, 21, 0.08);
    /* very subtle gold tint */
}
 .btn-outline:active{
     background-color: rgba(250, 204, 21, 0.15);
     border-color:#facc15;
     color:#facc15;
}
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 9999;
     background: linear-gradient(180deg, rgba(8,8,12,.98), rgba(4,4,6,.94));
     backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(255,215,0,.2);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 6px 22px;
}
 .nav-left {
     font-size: 1rem;
     letter-spacing: .05em;
}
 .nav-links a {
     padding: 4px 10px;
     margin-left: 14px;
     font-size: .9rem;
}
 body {
     padding-top: 98px;
}
 .page-login .container{
     display:flex;
     justify-content:center;
}
 .f1-login-card{
     background: linear-gradient(180deg,#0f172a,#020617);
     border:1px solid var(--f1-border);
     border-radius:18px;
     padding:32px 34px 36px;
     width:100%;
     max-width:420px;
    /* ? this fixes the “too wide” problem */
     box-shadow: 0 0 0 1px rgba(147,197,253,.1), 0 30px 80px rgba(0,0,0,.8);
}
 .f1-login-card form{
     display:flex;
     flex-direction:column;
     gap:14px;
    /* space between inputs + button */
}

 .f1-login-btn{
 	 margin-top: 10px;
     background: linear-gradient(180deg, rgba(147,197,253,.35), rgba(59,130,246,.12) ), linear-gradient(180deg,#0f172a,#020617);
     color: var(--f1-text);
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     font-size: .95rem;
     border: 1px solid rgba(147,197,253,.35);
     border-radius: 10px;
     padding: 10px 18px;
    /* ? smaller height */
     width: 100%;
     height: 44px;
    /* ? matches input height */
     box-shadow: 0 0 0 1px rgba(147,197,253,.12), 0 6px 18px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.05);
     transition: all .15s ease;
     cursor:pointer;
	 max-width: 100%;
}
/* Hover — armed */
 .f1-login-btn:hover{
     box-shadow: 0 0 0 1px rgba(147,197,253,.3), 0 8px 26px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.08);
     transform: translateY(-1px);
}
/* Active — ignition */
 .f1-login-btn:active{
     transform: translateY(2px);
     box-shadow: 0 0 0 1px rgba(147,197,253,.2), 0 3px 8px rgba(59,130,246,.3), inset 0 2px 5px rgba(0,0,0,.6);
}
 .f1-input{
     background: linear-gradient(180deg,rgba(147,197,253,.06),rgba(2,6,23,.9));
     border:1px solid rgba(147,197,253,.25);
     color: var(--f1-text);
     padding:6px 14px;
     border-radius:10px;
     width:100%;
     height:44px;
     font-size:.95rem;
     font-weight:500;
     letter-spacing:.02em;
     box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 1px rgba(147,197,253,.05);
     transition:.15s ease;
}
/* placeholder */
 .f1-input::placeholder{
     color: var(--f1-muted);
}
/* hover */
 .f1-input:hover{
     border-color: rgba(147,197,253,.45);
}
/* focus — live terminal */
 .f1-input:focus{
     outline:none;
     border-color: var(--f1-blue);
     box-shadow: 0 0 0 2px rgba(147,197,253,.35), inset 0 1px 3px rgba(0,0,0,.7);
}
 .f1-alert{
     border-radius:12px;
     padding:14px 16px;
     margin-bottom:16px;
     font-weight:600;
     letter-spacing:.02em;
     border:1px solid;
     box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
/* ERROR – red race warning */
 .f1-alert-error{
     background: linear-gradient(180deg,#3b0a0a,#140202);
     border-color: #dc2626;
     color:#fecaca;
     box-shadow: 0 0 12px rgba(220,38,38,.4), inset 0 0 10px rgba(0,0,0,.8);
}
/* SUCCESS – green system ok */
 .f1-alert-success{
     background: linear-gradient(180deg,#052e16,#020617);
     border-color:#22c55e;
     color:#bbf7d0;
     box-shadow: 0 0 12px rgba(34,197,94,.4), inset 0 0 10px rgba(0,0,0,.8);
}

 .f1-form-row > div {
     flex: 1;
}
 .f1-form-btn {
     flex: 0;
}
 .f1-btn-sm {
     background: linear-gradient(135deg,#2563eb,#3b82f6);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(59,130,246,.35);
     transition: .15s ease;
}
 .f1-btn-sm:hover {
     box-shadow: 0 0 18px rgba(59,130,246,.6);
     transform: translateY(-1px);
}
 .f1-btn-danger-sm {
     background: linear-gradient(135deg,#7f1d1d,#dc2626);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(220,38,38,.4);
     transition: .15s ease;
}
 .f1-btn-danger-sm:hover {
     box-shadow: 0 0 18px rgba(220,38,38,.7);
     transform: translateY(-1px);
}
 .f1-form-row {
     display: grid;
     grid-template-columns: 2fr 2fr 1fr auto;
     gap: 18px;
     align-items: end;
}

 .f1-form-row label {
     font-size: .85rem;
     color: var(--f1-muted);
     margin-bottom: 6px;
     display: block;
}
 .f1-form-row .f1-logihn-btn {
     height: 46px;
     padding: 0 26px;
}
 .f1-admin-card {
     background: linear-gradient(180deg,#0b1222,#050914);
     border: 1px solid rgba(255,255,255,.08);
     border-radius: 20px;
     padding: 20px 24px;
     box-shadow: inset 0 0 40px rgba(255,255,255,.04), 0 0 60px rgba(59,130,246,.15);
}
/* FORCE horizontal admin add row */
/* --- Add Driver horizontal bar --- */
 .f1-add-row{
     display:flex !important;
     align-items:flex-end;
     gap:16px;
     width:100%;
}
/* Input columns */
 .f1-add-row .field{
     display:flex;
     flex-direction:column;
}
/* Width control */
 .f1-add-row .name {
     flex:2;
}
 .f1-add-row .team {
     flex:2;
}
 .f1-add-row .num {
     flex:1;
     max-width:90px;
}
/* Prevent button from stretching */
 .f1-add-row button{
     flex:0 0 140px;
     width:140px;
     height:46px;
     margin:0;
     align-self:flex-end;
}
/* ===== F1 Admin Results ===== */
 .admin-filters{
     margin-bottom:20px;
}
/* Compact selects */
 .compact{
     width:100%;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     padding:6px 10px;
     border:1px solid rgba(255,255,255,0.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
}
/* Add-result container */
 .f1-add-results{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Save/Delete buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     margin-bottom:8px;
     width:100%;
}
 .f1-btn-delete{
     background:linear-gradient(180deg,#ff6b6b,#c0392b);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(255,80,80,.6);
     width:100%;
}
 .f1-btn-save:hover{
     filter:brightness(1.1);
}
 .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* Race blocks */
 .race-block-even{
     background:rgba(0,0,0,.25);
}
 .race-block-odd{
     background:rgba(0,0,0,.35);
}
/* ===== F1 Races Admin ===== */
 .f1-race-panel{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     width:100%;
     margin-bottom:8px;
}
 .f1-btn-save:hover, .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* ===== Admin compact tables ===== */
 .admin-table{
     width:100%;
     table-layout: fixed;
    /* THIS is the key */
     border-collapse: collapse;
}
/* Cells */
 .admin-table th, .admin-table td{
     white-space:nowrap;
     padding:8px 10px;
     text-align:center;
}
/* Compact inputs inside admin tables */
 .admin-table input, .admin-table select{
     width:auto;
     min-width:60px;
     padding:6px 10px;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     border:1px solid rgba(255,255,255,.12);
     box-shadow: inset 0 0 10px rgba(0,150,255,.2);
}
/* Larger fields */
 .admin-table input[name="name"]{
     min-width:180px;
}
 .admin-table input[type="date"], .admin-table input[type="datetime-local"]{
     min-width:160px;
}
/* Checkboxes */
 .admin-table input[type="checkbox"]{
     transform:scale(1.3);
     accent-color:#4e7cff;
}
/* Admin buttons */
 .admin-table .f1-btn-save{
     width:100%;
}
 .admin-table .f1-btn-delete{
     width:100%;
}
/* Horizontal scroll for admin tables */
 .admin-table-wrap{
     overflow-x:auto;
     padding-bottom:10px;
}
/* ===== Force widths for admin race table fields ===== */
/* Season */
 .admin-table input[name="season"]{
     width:80px;
}
/* Round */
 .admin-table input[name="round"]{
     width:70px;
     text-align:center;
}
/* Date */
 .admin-table input[name="race_date"]{
     width:140px;
}
/* Reminder */
 .admin-table input[name="reminder_time"]{
     width:190px;
}
/* Race name */
 .admin-table input[name="name"]{
     width:200px;
}
 .admin-table th:last-child, .admin-table td:last-child{
     width:140px;
     min-width:140px;
     max-width:140px;
     text-align:center;
}
 .admin-table th:nth-child(6), .admin-table td:nth-child(6){
     width:220px;
}
 .admin-table th:nth-child(3), .admin-table td:nth-child(3){
     width:70px;
     text-align:center;
}
 .admin-table td input{
     width:100%;
     max-width:100%;
     box-sizing:border-box;
}
/* Fix admin table button sizing */
 .admin-table td:last-child{
     padding:6px 8px;
     vertical-align:middle;
}
/* Compact Save button */
 .admin-table .btn-save{
     height:38px;
     min-height:38px;
     padding:0 18px;
     font-size:14px;
     border-radius:12px;
     background:linear-gradient(180deg,#5f7cff,#3b56d9);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(90,120,255,.35), inset 0 0 10px rgba(255,255,255,.15);
     cursor:pointer;
}
/* Hover effect */
 .admin-table .btn-save:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(90,120,255,.55), inset 0 0 14px rgba(255,255,255,.2);
}
/* Delete button */
 .admin-table .btn-delete{
     height:38px;
     min-height:38px;
     padding:0 14px;
     margin-top:6px;
     font-size:13px;
     border-radius:12px;
     background:linear-gradient(180deg,#ff5a5a,#cc2f2f);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(255,90,90,.4), inset 0 0 10px rgba(255,255,255,.12);
     cursor:pointer;
}
 .admin-table .btn-delete:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(255,90,90,.65), inset 0 0 14px rgba(255,255,255,.18);
}
/* Allow Actions column to grow vertically */
 .admin-table td.actions{
     overflow: visible !important;
     height: auto !important;
     padding-top: 10px;
     padding-bottom: 10px;
}
/* Stack buttons vertically inside Actions */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:8px;
     align-items:center;
}
/* Allow admin rows to grow vertically */
 .admin-table tr{
     height: auto !important;
     min-height: 0 !important;
     overflow: visible !important;
}
/* Make action cells flexible */
 .admin-table td.actions{
     overflow: visible !important;
     vertical-align: middle;
}
/* Stack buttons */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:10px;
     align-items:center;
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown{
     background: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 14px 20px 16px;
     box-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:20px;
}
 .f1-countdown-label{
     font-size: .7rem;
     font-weight: 800;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--f1-blue);
     opacity: .85;
     margin-bottom: 6px;
}
/* Time row */
 .f1-countdown-time{
     display: flex;
     align-items: baseline;
     gap: 6px;
     font-family: 'Titillium Web', sans-serif;
}
/* Units */
 .f1-countdown-time .unit{
     display: flex;
     align-items: baseline;
     gap: 2px;
}
 .f1-countdown-time b{
     font-size: 1.6rem;
     font-weight: 900;
     color: #facc15;
     text-shadow: 0 0 14px rgba(250,204,21,.65);
     min-width: 2ch;
     text-align: right;
}
 .f1-countdown-time em{
     font-size: .65rem;
     font-style: normal;
     font-weight: 700;
     letter-spacing: .12em;
     color: var(--f1-muted);
     margin-left: 2px;
}
/* Separators */
 .f1-countdown-time .sep{
     font-size: 1.4rem;
     font-weight: 900;
     color: rgba(255,255,255,.4);
     margin: 0 2px;
}
/* Blinking last colon (broadcast feel) */
 .f1-countdown-time .blink{
     animation: blink 1s steps(1) infinite;
}
 @keyframes blink{
     50%{
         opacity: 0;
    }
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown.warning{
     border-color: #e10600;
     box-shadow: 0 0 25px rgba(225,6,0,.6), inset 0 0 20px rgba(225,6,0,.25);
}
 .f1-countdown.warning .f1-countdown-label{
     color: #e10600;
}
 .f1-countdown.warning b{
     color: #ff5c5c;
     text-shadow: 0 0 16px rgba(255,92,92,.9);
}
/* ================= F1 SUBMIT BUTTON ================= */
 .f1-row:last-child{
     margin-top: 18px;
}
 @media (max-width: 600px){
     .f1-submit-gold{
         width: 100%;
         text-align: center;
    }
}
 .f1-race-header.warning + form .f1-submit-gold{
     background: linear-gradient( 135deg, #e10600, #ff5c5c, #e10600 );
     color: #fff;
     box-shadow: 0 0 0 1px rgba(225,6,0,.9), 0 10px 30px rgba(225,6,0,.7);
}
/* Container above the grid */
 .last-race-btn-wrap {
     margin-bottom: 15px;
     text-align: left;
    /* aligns left with the form */
}
/* Align vertically with countdown box if needed */
 #f1CountdownWrapper form.ms-3 {
     display: flex;
     align-items: center;
}
 .f1-submit-btn {
     position: relative;
     padding: 7px 10px;
    /* slightly wider, not taller */
     font-size: 0.82rem;
    /* more readable */
     letter-spacing: 0.06em;
     font-weight: 700;
     text-transform: uppercase;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     background: linear-gradient(135deg,#ffb300,#ffcc33,#ffb300);
     color: #1a1a1a;
     box-shadow: 0 0 0 2px rgba(255,200,0,.4), 0 8px 18px rgba(255,180,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
     transition: all .25s ease;
}
/* Hover */
 .f1-submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 0 0 1px rgba(255,200,0,.35), 0 6px 14px rgba(255,180,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Pressed */
 .f1-submit-btn:active {
     transform: translateY(1px);
     box-shadow: 0 0 0 1px rgba(255,220,80,.6), 0 10px 24px rgba(255,180,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
/* Disabled */
 .f1-submit-btn:disabled {
     background: linear-gradient(135deg,#777,#999);
     color: #222;
     cursor: not-allowed;
     box-shadow: none;
     opacity: .6;
}
/* ----------------- Lock in Picks ----------------- */
.f1-btn-row button {
      width: 100%;
    }
 .f1-submit-gold {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(180deg,#052e16,#020617);
    /* login-style success base */
     border: 1px solid #22c55e;
    /* success border by default */
     color: #bbf7d0;
    /* matching login success text */
     font-weight: 700;
     font-size: 0.9rem;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     border-radius: 6px;
     cursor: pointer;
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(34,197,94,.8), 0 8px 28px rgba(34,197,94,.45);
     transition: all .12s ease;
}
/* Make Lock in Picks same height as Use Last Race Picks */
 .f1-submit-gold:hover {
     background: linear-gradient(180deg,#065e1f,#02270a);
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(34,197,94,1), 0 12px 36px rgba(34,197,94,.7);
}
 .f1-submit-gold:active {
     transform: translateY(1px);
     box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(34,197,94,.9);
}
 .f1-submit-gold:disabled {
     background: linear-gradient(180deg,#3b0a0a,#140202);
    /* locked/error style */
     border: 1px solid #dc2626;
     color: #fecaca;
     cursor: not-allowed;
     box-shadow: none;
}
/* ----------------- Use Last Race Picks ----------------- */
 .btn-copy-last {
     background: linear-gradient(180deg, #020617, #020617);
    /* near-black */
     border: 1px solid rgba(96, 165, 250, 0.45);
    /* #60a5fa glow border */
     color: #93C5FD;
    /* base blue text */
     font-weight: 700;
     font-size: 0.9rem;
     margin-bottom: 10px;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     box-shadow: 0 0 10px rgba(96, 165, 250, 0.15);
}
 .btn-copy-last:hover:not(:disabled) {
     background: linear-gradient(180deg, #020617, #020617);
     border-color: #60a5fa;
     color: #e0f2fe;
    /* brighter sky text */
     box-shadow: 0 0 12px rgba(96, 165, 250, 0.55), inset 0 0 8px rgba(96, 165, 250, 0.25);
}
 .btn-copy-last:disabled {
     background: linear-gradient(180deg, #020617, #020617);
     border: 1px solid rgba(148, 163, 184, 0.25);
     color: rgba(148, 163, 184, 0.5);
     cursor: not-allowed;
     box-shadow: none;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
    /* wrap on small screens */
}
 .f1-header-msg {
     white-space: nowrap;
     font-size: 0.95rem;
     line-height: 1.2;
}
 .f1-submit-gold {
     m8in-width: 150px;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
    /* wraps on small screens */
}
 .f1-countdown {
     display: flex;
     align-items: center;
     padding: 16px;
     border-radius: 12px;
     background: rgba(0,0,0,0.5);
     min-height: 80px;
    /* sets a consistent height */
}
 .f1-top-controls form {
     display: flex;
     align-items: stretch;
    /* make buttons match countdown height */
}
 .f1-top-controls button {
     min-height: 80px;
    /* same as countdown height */
     padding: 0 20px;
     font-size: 1rem;
     border-radius: 12px;
}
 .f1-msg {
     padding: 6px 24px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: .04em;
     white-space: nowrap;
}
/* ------------------ Messages match login card style ------------------ */
 .f1-msg-success {
     color: #22c55e;
     animation: f1-success-pulse 0.9s ease-out;
}
 @keyframes f1-success-pulse {
     0% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
     30% {
         transform: scale(1.08);
         text-shadow: 0 0 16px rgba(34,197,94,0.9);
    }
     100% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
}
 .f1-msg-success {
     color: #22c55e;
     position: relative;
     overflow: hidden;
}
 .f1-msg-success::after {
     content: '';
     position: absolute;
     top: 0;
     left: -120%;
     width: 120%;
     height: 100%;
     background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
     animation: f1-shine 1.2s ease-out;
}
 @keyframes f1-shine {
     to {
         left: 120%;
    }
}
 .f1-msg-error {
     color: #dc2626;
     animation: f1-shake 0.4s ease-in-out;
}
 @keyframes f1-shake {
     0% {
         transform: translateX(0);
    }
     25% {
         transform: translateX(-6px);
    }
     50% {
         transform: translateX(6px);
    }
     75% {
         transform: translateX(-4px);
    }
     100% {
         transform: translateX(0);
    }
}
 .f1-msg-warn {
     color: #ff8700;
     animation: f1-warn-glow 1.2s ease-in-out infinite alternate;
}
 @keyframes f1-warn-glow {
     from {
         text-shadow: 0 0 0 rgba(255,135,0,0);
    }
     to {
         text-shadow: 0 0 10px rgba(255,135,0,.9);
    }
}
/* Hover highlight for clickable rows */
 .race-row {
     cursor: pointer;
     transition: all 0.2s ease;
}
 .race-row:hover {
     background: rgba(15, 23, 42, 0.85);
    /* deep slate like admin-filters */
     box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35), 0 0 18px rgba(96, 165, 250, 0.25);
     color: #e0f2fe;
    /* soft sky text */
}
 .custom-select .options {
     position: absolute;
     top: 36px;
    /* same distance from top of select box */
     left: 0;
     right: 0;
}
/* Navbar group dropdown custom style */
/* =============================== User + Group Switcher (Navbar) =============================== */
 .user-group-nav .nav-link {
     font-weight: 600;
}
/* Active group (blue text) */
 .group-switch {
     color: #93C5FD !important;
     font-weight: 700;
}
/* Remove Bootstrap caret color */
 .group-switch::after {
     filter: brightness(1.3);
}
/* Dropdown container */
 .group-dropdown {
     background: #0f172a;
    /* navbar blue */
     border: none;
     border-radius: 0 0 10px 10px;
     box-shadow: 0 10px 30px rgba(0,0,0,.35);
     padding: 6px 0;
}
/* Dropdown items */
 .group-dropdown-item {
     color: #93C5FD;
     font-weight: 600;
     padding: 8px 18px;
     background: transparent;
}
/* Hover effect */
 .group-dropdown-item:hover {
     background: rgba(255,255,255,0.08);
     color: #ffffff;
}
/* Active group */
 .group-dropdown-item.active {
     color: #ffffff;
     background: rgba(255,255,255,0.15);
}
/* Remove Bootstrap default white */
 .dropdown-menu {
     --bs-dropdown-bg: transparent;
     --bs-dropdown-link-hover-bg: transparent;
     --bs-dropdown-link-active-bg: transparent;
}
/* =============================== Pulse when picks close soon =============================== */
 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(220,53,69,.6);
    }
     70% {
         box-shadow: 0 0 0 10px rgba(220,53,69,0);
    }
     100% {
         box-shadow: 0 0 0 0 rgba(220,53,69,0);
    }
}
 .badge-pulse {
     animation: pulse 1.2s infinite;
}
/* =============================== Dimmed / locked races =============================== */
 .race-locked {
     opacity: 0.65;
     pointer-events: none;
}
/* =============================== Race card visuals =============================== */
 .race-card {
     transition: opacity 0.25s ease, filter 0.25s ease;
}
 .race-status {
     margin-top: 6px;
}
 .race-card.race-dim .race-locked {
     opacity: 0.65;
}
/* Optional: keep text readable */
 .race-card.race-dim .race-link, .race-card.race-dim .race-status {
     opacity: 1;
}
/* Optional: cursor + subtle feel */
 .race-card.race-dim {
     filter: grayscale(15%);
}
 .race-card.race-dim:hover {
     opacity: 0.75;
}
 .badge-pulse {
     position: relative;
     z-index: 2;
}
 .mini-bonus {
     color: gold;
     font-size: 11px;
     margin-left: 4px;
     vertical-align: middle;
}
/* ===== Bonus legend ===== */
 .bonus-legend {
     display: flex;
     align-items: center;
    /* ? vertical centering */
     flex-wrap: wrap;
     gap: 10px 14px;
     margin-top: 14px;
     margin-bottom: 28px;
     padding: 10px 12px;
     background: var(--f1-panel);
     border: 1px solid var(--f1-border);
     border-radius: 10px;
     font-size: 0.75rem;
     color: var(--f1-muted);
}
 .bonus-legend strong {
     color: var(--f1-text);
     font-weight: 600;
     margin-right: 4px;
}
 .bonus-legend span {
     background: rgba(147, 197, 253, 0.08);
    /* f1-blue hint */
     border: 1px solid rgba(147, 197, 253, 0.25);
     color: var(--f1-blue);
     padding: 3px 8px;
     border-radius: 999px;
    /* pill style */
     font-weight: 600;
     white-space: nowrap;
}
/* =============================== LEADERBOARD BASE =============================== */
 .leaderboard {
     border-collapse: collapse;
     width: 100%;
}
 .leaderboard-wrap {
     width: 100%;
     overflow-x: auto;
}
 table.leaderboard {
     width: 100%;
     border-collapse: collapse;
     background: #0f172a;
     border-radius: 14px;
     overflow: hidden;
}
/* =============================== CELLS =============================== */
 .leaderboard th, .leaderboard td {
     padding: 5px 7px;
     font-size: 0.85rem;
     line-height: 1.15;
     vertical-align: middle;
     border: 1px solid #333;
     text-align: center;
     white-space: nowrap;
}
/* All headers */
 .leaderboard th {
     background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
     padding-top: 6px;
     padding-bottom: 6px;
     color: #ffffff;
     font-weight: 700;
     position: sticky;
     top: 0;
     z-index: 4;
	 border-bottom: 2px solid rgba(255,255,255,.25);
}

/* =============================== PICK CELLS =============================== */
 .leaderboard-picks th {
     position: relative;
     padding: 6px 8px 6px;
     font-weight: 700;
}
 .leaderboard-picks td {
     position: relative;
     padding: 6px 8px 22px;
     font-weight: 400;
}
/* Score bubble */
 .leaderboard-picks .score {
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 0.72rem;
     font-weight: 600;
     color: #3fe0a2;
     background: rgba(63,224,162,0.18);
     border-radius: 999px;
     padding: 2px 9px;
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4);
}
/* Glow for tables that have scores */
 .leaderboard:has(.score) td {
     background: rgba(255,255,255,0.03);
     border-radius: 8px;
}
/* Correct picks */
 .leaderboard-picks td.correct_pk {
     background: linear-gradient( 180deg, rgba(63,224,162,.22), rgba(63,224,162,.06) );
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4), 0 0 10px rgba(63,224,162,.15);
}
/* Player */
 .leaderboard-picks .player {
     font-weight: 700;
     font-size: 0.85rem;
     vertical-align: middle;
     background: linear-gradient( 180deg, rgba(63,224,162,.35), rgba(63,224,162,.12) );
     border-radius: 10px;
}


/* Base style for total */
 td.player {
     font-weight: bold;
     text-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #ffff;
    /* default background */
     transition: all 0.3s ease;
}

/* Red score bubble for wrong picks */
 .leaderboard-picks td.wrong .score {
     color: #ff6b6b;
     background: rgba(224,63,63,0.18);
     box-shadow: inset 0 0 0 1px rgba(224,63,63,.4);
}
/* Optional: partial score bubble */
 .leaderboard-picks td.partial .score {
     color: #ff9f1c;
     background: rgba(255,165,0,0.18);
     box-shadow: inset 0 0 0 1px rgba(255,165,0,0.4);
}
/* ================= TOTAL COLUMN ================= */
/* Base style for total */
 td.total-score {
     font-weight: bold;
     tex6t-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #222;
    /* default background */
     transition: all 0.3s ease;
}
/* =============================== ADMIN INPUTS =============================== */
 .leaderboard input, .leaderboard select {
     width: 100%;
     background: #0b1020;
     color: #fff;
     border-radius: 10px;
     padding: 5px 8px;
     border: 1px solid rgba(255,255,255,.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
     font-size: 0.85rem;
}
 .leaderboard input[type="checkbox"] {
     transform: scale(1.25);
     accent-color: #4e7cff;
}
 td.total-score.normal {
     color: #D3D3D3;
    /* plain white text */
     background: rgba(205, 127, 50, 0.05);
    /* subtle gray/transparent */
     font-weight: 400 !important;
}
/* Highlight the top 1 scorer */
 td.total-score.top1 {
     baackground: rgba(255, 215, 0, 0.10) !important;
     color: #b9a200 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 2nd place */
 td.total-score.top2 {
     baackground: rgba(192, 192, 192, 0.10) !important;
     color: #999B9B !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 3rd place */
 td.total-score.top3 {
     baackground: rgba(205, 127, 50, 0.10) !important;
     color: #b07a45 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Clickable cells */
 .leaderboard td.clickable {
     cursor: pointer;
}
/* Actual Qualifying & Race Result Table (1/2 width, left-aligned) */
 .leaderboard-results-wrap {
     widtth: 50%;
    /* 1/3 of page width */
     margin: 0 0 20px 0;
    /* top/bottom spacing, left-aligned */
     overflow-x: auto;
    /* allow horizontal scroll if needed */
}
 .leaderboard-results-wrap table {
     width: 100%;
     border-collapse: collapse;
}
 .leaderboard-results-wrap th, .leaderboard-results-wrap td {
     padding: 6px 10px;
     text-align: center;
}
/* =============================== PODIUM COLORS - Races =============================== */
 .leaderboard td.podium-bronze:nth-child(n+3) {
     background: rgba(205, 127, 50, 0.05) !important;
     color: #b07a45 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-gold:nth-child(n+3) {
     background: rgba(255, 215, 0, 0.05) !important;
     color: #b9a200 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-silver:nth-child(n+3) {
     background: rgba(192, 192, 192, 0.05) !important;
     color: #999B9B !important;
     font-weight: 700 !important;
}
/* =============================== PODIUM COLORS - Total - Line 3 first 3 columns formatting =============================== */
/* BRONZE */
 .laeaderboard tbody tr:nth-child(4) td.user-cell:nth-child(-n+3) {
     color: #b07a45 !important;
     font-weight: 900 !important;
}
/* GOLD */
 .leaaderboard tbody tr:nth-child(2) td.user-cell:nth-child(-n+3) {
     color: #b9a200 !important;
     font-weight: 900 !important;
}
/* SILVER */
 .leaaderboard tbody tr:nth-child(3) td.user-cell:nth-child(-n+3) {
     color: #999B9B !important;
     font-weight: 900 !important;
}
/* =============================== STICKY COLUMNS =============================== */
 .leaderhboard-wrap {
     overflow-x: auto;
     position: relative;
}
/* =============================== HEADER COLORS =============================== */
 .leaderboard td {
     background: #0b1020;
     box-shadow: -2px 0 8px rgba(0,0,0,.4);
}

/* ================= COLUMN HOVER LINE ================= */
 .hover-columns {
     position: relative;
}

/* =============================== RACE HEADER =============================== */
 .leaderboard th.race-header {
     position: relative;
     color: #60A5FA;
     font-weight: 700;
     letter-spacing: 0.45px;
     text-transform: uppercase;
}
 .leaderboard th.race-header::after {
     content: "";
     position: absolute;
     left: 20%;
     right: 20%;
     bottom: -2px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #e10600, transparent);
     opacity: 0.6;
     transition: all .2s ease;
}
 .leaderboard th.race-header:hover::after {
     left: 8%;
     right: 8%;
     opacity: 1;
}
 .season-select {
     background:#0f172a;
     padding-top:2px;
     padding-bottom:2px;
     padding-left:16px;
     padding-right:16px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
     margin-left: 24px;
    /* try 12–24px */
}
 .admin-filters .season-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:500;
}
 .admin-filters .season-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
 #race-tooltip {
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     background: linear-gradient(180deg, #1b2042, #0b1020);
     color: #fff;
     padding: 6px 10px;
     border-radius: 8px;
     font-size: 0.75rem;
     font-weight: 600;
     white-space: nowrap;
     border: 1px solid rgba(255,255,255,0.12);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 10px 28px rgba(0,0,0,0.65), inset 0 0 10px rgba(255,0,0,0.2);
     opacity: 0;
     transform: translateY(6px);
     transition: opacity .15s ease-out, transform .18s cubic-bezier(.2,.8,.2,1);
}
 #race-tooltip::before {
     content: "";
     position: absolute;
     top: 0;
     left: 10px;
     right: 10px;
     height: 2px;
     background: linear-gradient( 90deg, transparent, #e10600, transparent );
     border-radius: 2px;
}
/* Center bonus number vertically + horizontally */
 .leaderboard-picks .bonus-score {
     font-size: 0.85rem;
     font-weight: 700;
     padding: 2px 8px;
     vertical-align: middle;
     border-radius: 999px;
     background: rgba(78,124,255,0.18);
     color: #22c55e;
     line-height: 1;
}

/* zero bonus */
 .leaderboard-picks .bonus-score.is-zero {
     color: var(--f1-muted);
     background: transparent;
     box-shadow: none;
     font-weight: 500;
}
/*IMPROVEMENTS */
 .leaderboard-picks .score {
     color: #22c55e;
     background: rgba(34,197,94,.15);
     box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
}
 .leaderboard-picks td.wrong .score {
     color: #ef4444;
     background: rgba(239,68,68,.15);
     box-shadow: inset 0 0 0 1px rgba(239,68,68,.35);
}
 .leaderboard-picks td.partial .score {
     color: #f59e0b;
     background: rgba(245,158,11,.15);
     box-shadow: inset 0 0 0 1px rgba(245,158,11,.35);
}

 .leaderboard-picks .score {
     line-height: 1;
}
 .leaderboard input, .leaderboard select {
     background: var(--f1-bg);
     border: 1px solid var(--f1-border);
     box-shadow: inset 0 0 0 1px rgba(147,197,253,.15);
}

/* =================================
   RULES ACCORDION – SINGLE PANEL (CLEAN)
   ================================= */
.rules-subtitle strong {
    color: #facc15;
}


#rulesAccordion {
    margin-top: 0.25rem;
    background: linear-gradient(180deg, #0b1222, #050914);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(255,255,255,.04);
}

/* Items become rows */
#rulesAccordion .accordion-item {
    background: transparent;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* Divider between rows */
#rulesAccordion .accordion-item + .accordion-item {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Header */
#rulesAccordion .accordion-header {
    margin: 0;
}

#rulesAccordion .accordion-button {
    background: transparent;
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.25;
}

/* Active */
#rulesAccordion .accordion-button:not(.collapsed) {
    color: #facc15;
    background: rgba(250,204,21,0.06);
}

/* Focus */
#rulesAccordion .accordion-button:focus {
    box-shadow: none;
}

/* Chevron */
#rulesAccordion .accordion-button::after {
    filter: invert(1);
    opacity: 0.7;
}

/* Body */
#rulesAccordion .accordion-collapse {
    background: rgba(255,255,255,0.02);
}

#rulesAccordion .accordion-body {
    padding: 0.55rem 0.9rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

/* Text */
#rulesAccordion strong {
    color: #facc15;
}

/* Lists */
#rulesAccordion .accordion-body ul {
    padding-left: 1.6rem;
    margin-left: 0;
}

#rulesAccordion .accordion-body li {
    padding-left: 0.2rem;
}

#rulesAccordion li::marker {
    content: "";
}

#rulesAccordion {
    list-style: none;
    padding-left: 0; /* optional: removes default indent */
}

/* Tables */
#rulesAccordion table {
    margin: 0.4rem 0;
    background: transparent;
    color: #fff;
}

#rulesAccordion thead {
    background: rgba(255,255,255,0.08);
    color: #ffd700;
}

#rulesAccordion td,
#rulesAccordion th {
    border-color: rgba(255,255,255,0.15);
}

/* Rounded ends */
#rulesAccordion .accordion-item:first-child .accordion-button {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

#rulesAccordion .accordion-item:last-child .accordion-collapse {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Desktop */
@media (min-width: 992px) {
    #rulesAccordion .accordion-button {
        font-size: 0.9rem;
        padding: 0.45rem 0.85rem;
    }
}
/* Active indicator bar */
#rulesAccordion .accordion-item {
    position: relative;
}

#rulesAccordion .accordion-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: linear-gradient(180deg, #facc15, #eab308);
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.2s ease, transform 0.25s ease;
    border-radius: 2px;
}

/* Show when active */
#rulesAccordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
    opacity: 1;
    transform: scaleY(1);
}
/* Scroll-highlight */
#rulesAccordion .accordion-item.is-visible > .accordion-header .accordion-button {
    background: rgba(96,165,250,0.08);
}
/* ===============================
   RULES ACCORDION – TABLE WIDTH FIX
   =============================== */

/* Let tables size to content */
#rulesAccordion table {
    width: auto !important;          /* <-- key line */
    max-width: 100%;
    margin: 0.75rem 0 !important;    /* left aligned */
    display: inline-table;           /* prevents stretching */
}

/* Kill Bootstrap full-width behavior */
#rulesAccordion .table {
    width: auto !important;
}

/* Dark theme enforcement */
#rulesAccordion table,
#rulesAccordion thead,
#rulesAccordion tbody,
#rulesAccordion tr,
#rulesAccordion th,
#rulesAccordion td {
    background-color: transparent !important;
}

/* Header row */
#rulesAccordion thead th {
    background: rgba(250, 204, 21, 0.14) !important;
    color: #facc15 !important;
    white-space: nowrap;
}

/* Body rows */
#rulesAccordion tbody tr {
    background: rgba(255,255,255,0.03) !important;
}

#rulesAccordion tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.06) !important;
}

/* Text */
#rulesAccordion td,
#rulesAccordion th {
    color: #e5e7eb !important;
    white-space: nowrap;
}
/* ===============================
   POINTS LIST – TABLELESS
   =============================== */

#rulesAccordion .points-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 1.5rem;
    width: fit-content;
    margin: 0.75rem 0;
}

/* Row */
#rulesAccordion .points-list > div {
    display: contents;
}

/* Position label */
#rulesAccordion .points-list span {
    color: #e5e7eb;
    font-weight: 500;
    white-space: nowrap;
}

/* Points value */
#rulesAccordion .points-list strong {
    color: #facc15;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* Optional subtle divider every row */
#rulesAccordion .points-list span,
#rulesAccordion .points-list strong {
    padding: 0.15rem 0;
}

/* Slight glow on hover (optional but nice) */
#rulesAccordion .points-list > div:hover span,
#rulesAccordion .points-list > div:hover strong {
    color: #fde68a;
}
#rulesAccordion .points-list div:nth-child(-n+3) strong {
    color: #ffd700;
}
@media (max-width: 600px) {
    #rulesAccordion .points-list {
        grid-template-columns: 1fr auto;
        width: 100%;
    }
}
/* Dark theme links inside rules accordion */
#rulesAccordion a {
    color: #facc15; /* soft gold */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 204, 21, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

#rulesAccordion a:hover {
    color: #fde047; /* brighter gold */
    border-bottom-color: rgba(250, 204, 21, 0.75);
}

/* Optional: subtle external-link cue */
#rulesAccordion a[target="_blank"]::after {
    content: "?";
    font-size: 0.75em;
    margin-left: 0.25rem;
    opacity: 0.6;
}
/* Fix invisible dropdown text */
select.f1-input {
    background-color: #111;
    color: #fff;
    border: 1px solid #444;
}

/* Dropdown options */
select.f1-input option {
    background-color: #111;   /* menu background */
    color: #fff;             /* text */
}

/* Hovered option (Chrome / Edge) */
select.f1-input option:hover {
    background-color: #e10600;
    color: #fff;
}

/* Selected option inside list */
select.f1-input option:checked {
    background-color: #e10600;
    color: #fff;
}
/* Gold, Silver, Bronze styling based on rank classes */
.user-cell.top1 {
    color: #b9a200 !important;  /* gold */
    font-weight: 900 !important;
}
.user-cell.top2 {
    color: #c0c0c0 !important;  /* silver */
    font-weight: 700 !important;
}
.user-cell.top3 {
    color: #cd7f32 !important;  /* bronze */
    font-weight: 700 !important;
}
@media (max-width: 600px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tile.big {
    grid-column: span 1;
  }
}
@media (max-width: 600px) {
  .tile {
    padding: 16px;
    border-radius: 14px;
  }

  .tile h3 {
    font-size: 1.1rem;
  }

  .tile .tile-value {
    font-size: 1.8rem;
  }
}
@media (max-width: 600px) {
  .swipe-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
  }

  .swipe-row .tile {
    min-width: 160px;
    flex-shrink: 0;
  }
}
/* ============ STICKY HEADER ============ */
.mobile-header {
  display: none;
}

@media (max-width: 600px) {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(90deg,#1a1a2e,#0f3460);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
  }

  .mobile-header small {
    font-size: .6rem;
    opacity: .7;
    display:block;
  }
}

/* ============ TAP TO EXPAND ============ */
.tile.expandable {
  cursor: pointer;
}

.tile.expanded {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 0 25px rgba(241,196,15,.9);
}

/* ============ MOMENTUM METER ============ */
.meter {
  background:#111;
  border-radius:20px;
  overflow:hidden;
  height:12px;
  margin-top:8px;
}

.meter span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#e74c3c,#f1c40f,#2ecc71);
  width:0%;
  transition:1s;
}
.tile.wide {
  grid-column: span 2;
}
.dashboard-grid.stats {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width:600px){
  .dashboard-grid.stats {
    grid-template-columns: 1fr;
  }
}
.tile {
  min-height: 90px;
  justify-content:flex-start;
}

@media (max-width:600px){
  .tile {
    min-height: 120px;
  }
}
@media (max-width: 768px){
    #page-container{
        padding: 0 8px;
    }
    body{
        padding-top: 80px; /* smaller navbar height on mobile */
    }
}
@media (max-width: 600px){
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 12px;
    }
    .nav-links a{
        margin-left: 0;
        margin-top: 6px;
        font-size: .85rem;
    }
}
@media (max-width: 600px){
    .f1-top-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .f1-top-controls form,
    .f1-top-controls button {
        width: 100%;
        min-height: auto; /* let buttons shrink */
    }
    .f1-countdown {
        min-height: 60px;
        padding: 12px;
    }
}
.locked-list {
    list-style: none;       /* Remove bullets */
    padding-left: 0;        /* Remove default indentation */
    margin-left: 0;         /* Optional: reset left margin */
}

/* ==========================================
   HALL OF FAME PODIUM - COMPACT VERSION
========================================== */
.hof-podium-stage {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
    align-items: end;
    margin-top: 54px;
}

.hof-podium {
    background: linear-gradient(180deg, #0b0b0b, #151515);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255,215,0,.12);
    position: relative;
    font-size: 0.9rem;
}

.hof-podium.gold { transform: translateY(-20px); border: 2px solid gold; box-shadow:0 0 60px rgba(255,215,0,.3); }
.hof-podium.silver { border: 2px solid #aaa; }
.hof-podium.bronze { border: 2px solid #cd7f32; }

.hof-podium h3 { margin: 10px 0 15px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.hof-podium.gold h3 { color: gold; }
.hof-podium.silver h3 { color: #ddd; }
.hof-podium.bronze h3 { color: #cd7f32; }

.hof-podium-rank {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid gold;
}

.hof-podium-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hof-podium-row span {
    color: #eee;
}

.hof-podium-row b {
    font-weight: 700;
    color: gold;
}

.hof-podium-row .medal-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}
.f1-submit-wrapper {
    position: relative;
    width: 100%;
}

#f1-inline-message {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: -10px;
    width: 100%;
    z-index: 20;
    pointer-events: none;
}



/* Responsive for mobile */
@media (max-width: 768px){
    .hof-podium-stage { grid-template-columns: 1fr; gap: 12px; }
    .hof-podium-rank { top: -16px; width: 36px; height: 36px; font-size: 16px; }
    .hof-podium-row { font-size: 0.8rem; padding: 4px 0; }
    .hof-podium-row .medal-icon { width: 14px; height: 14px; }
}

    /* The glow box that wraps submit */
    .page-picks .f1-countdown.glow-box {
        display: flex;
        justify-content: center;
    }

    /* The inner row */
    .page-picks .f1-countdown .f1-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Wrapper that holds message + button */
    .page-picks .f1-submit-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /* Error / warning message box */
    #f1-inline-message .f1-msg {
	font-weight:900;
        text-align: center;
        max-width: 100%;
    }

    /* Button row */
    .page-picks .f1-btn-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Lock in Picks button */
    .page-picks .f1-submit-btn {
        width: auto;
        min-width: 220px;
    }
.hero-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* ================= PICKS STUFF ================= */
 .f1-countdowny{
     bacykground: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 8px 10px 8px;
     buox-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:5px;
}
.f1-focused {
    animation: focusFlash 1.2s ease-out;
}
/* =======================
   SCORECARD (MOBILE)
   ======================= */

.scorecard { margin: 10px 0 16px; }

/* Header */
.scorecard-header{
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.sc-title{ font-size: 1.05rem; font-weight: 600; color:#fff; }
.sc-meta{ margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }

.pill{
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ddd;
}

/* List */
.scorecard-list{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Each card row */
.scorecard-row{
  width: 100%;
  box-sizing: border-box;

  display:grid;
  grid-template-columns: 1fr auto; /* left block | right block */
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: inherit;
}

.scorecard-row:active{ transform: scale(0.99); }

/* Left block = title line + date line */
.sc-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
/* Title line: round | name | tag */
.sc-race{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:28px;
}
/* Round pill */
.sc-round{
  font-size:.8rem;
  opacity:.8;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
}

/* Race name */
.sc-name{
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height: 1.1;
  min-width: 0;
}

/* BEST/WORST tag */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  white-space:nowrap;
  line-height:1;
  flex-shrink:0;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#ddd;
  font-size: .75rem;
}

/* Best / worst styling */
.tag-best{
  background: linear-gradient(90deg,#ffb300,#ff6a00);
  border-color: rgba(255,200,0,.35);
  color:#111;
  font-weight:700;
}

.tag-worst{
  background: rgba(255,80,80,0.10);
  border-color: rgba(255,80,80,.35);
  box-shadow: 0 0 6px rgba(255,80,80,.12);
  color:#ffd6d6;
  font-weight:700;
}

/* Date line: align under the NAME column (not under round) */
.sc-date{
  margin-top: 4px;
  font-size:.8rem;
  opacity:.8;
  line-height: 1.1;

  /* This is the key alignment fix:
     must roughly match .sc-round width + column gap.
     Adjust 54–66px if you change font sizes/padding. */
  padding-left: 58px;
}

/* Right block (medal + points + delta if you use it) */
.sc-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width: 90px; /* keeps column stable even if medal missing */
}

/* Points */
.sc-points{
  font-size:1.05rem;
  font-weight:700;
  width: 40px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* Optional delta styling (if you render it) */
.sc-delta{
  font-size:.85rem;
  font-weight:700;
  width: 44px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:.9;
}
.delta-up{ color:#77ffb0; }
.delta-down{ color:#ff7a7a; }
.delta-flat{ color:#ddd; }

/* Optional medals border hint on the card itself */
.medal-gold{ border-color: rgba(255,215,0,0.35); }
.medal-silver{ border-color: rgba(192,192,192,0.35); }
.medal-bronze{ border-color: rgba(205,127,50,0.35); }

.sc-round{
  flex:0 0 auto;   /* prevents stretching */
}

.tag{
  flex:0 0 auto;
}

.sc-date{
  margin-top:2px;
  padding-left:0;  /* IMPORTANT: remove earlier padding-left */
  line-height:1.1;
}

/* ===== SCORECARD HARD OVERRIDES ===== */

/* Card layout */
.scorecard-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
}

/* Left side must stack normally */
.sc-left{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  min-width:0 !important;
}

/* Title line: round + name + tag inline */
.sc-race{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:auto !important;
  min-width:0 !important;
}

/* Prevent these from becoming full-width bars */
.sc-round,
.sc-name,
.tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  flex:0 0 auto !important;
}

/* Let name shrink/ellipsis but not push layout */
.sc-name{
  flex: 0 1 190px;   /* LOCK name column width */
  min-width: 0;
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.1;
}
/* Tag stays small */
.tag{
  height:22px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}
.tag,
.tag-empty{
  width:72px;        /* fixed tag column width */
  justify-content:center;
}
.tag-empty{
  opacity:0;
  pointer-events:none;
}
/* Date is just text (not a bar) */
.sc-date{
  margin-top:2px;
  font-size:.8rem;
  opacity:.8;
}
/* Right side fixed alignment */
.sc-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-width:90px !important;
}
.online-counter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  border:1px solid rgba(255,255,255,0.12);
}

.online-active{
  background: rgba(46,204,113,0.12);
  color:#7dffb5;
}

.online-inactive{
  background: rgba(255,255,255,0.05);
  color:#888;
}

.online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2ecc71;
  box-shadow:0 0 6px rgba(46,204,113,.4);
  display:inline-block;
}

/* Optional: make dot grey when inactive */
.online-inactive .online-dot{
  background:#666;
  box-shadow:none;
}

.online-active .online-dot{ animation: pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(46,204,113,.45); }
  70%{ box-shadow:0 0 0 6px rgba(46,204,113,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

/* --- Next race: picks window progress bar --- */
.picks-progress-wrap{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  margin-top:10px;
}
.picks-progress-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(46,204,113,.95), rgba(241,196,15,.95), rgba(231,76,60,.95));
  transition: width .35s ease;
}

/* --- Urgent pulse when picks are open and not submitted --- */
.tile.urgent{
  box-shadow: 0 0 0 rgba(231,76,60,0.0);
  animation: urgentPulse 1.6s ease-in-out infinite;
}
@keyframes urgentPulse{
  0%   { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
  50%  { box-shadow: 0 0 12px rgba(231,76,60,0.25), 0 0 28px rgba(231,76,60,0.10); }
  100% { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
}

.ptg-logo{
  display:inline-flex;
  align-items:flex-end;
  gap:14px;
  position:relative;
  line-height:1;
}

/* Red “grid bars” */
.ptg-mark{
  display:inline-flex;
  gap:6px;
  transform:skewX(-12deg);
  margin-bottom:2px;
}
.ptg-bar{
  width:10px;
  height:38px;              /* tweak height here */
  border-radius:2px;
  background:linear-gradient(180deg,#ff2a2a 0%, #b10000 70%, #4a0000 100%);
  box-shadow:0 0 0 rgba(0,0,0,0); /* keep clean, not gamer-glow */
}
.ptg-bar.b1{ opacity:1; }
.ptg-bar.b2{ opacity:.92; }
.ptg-bar.b3{ opacity:.84; }

/* Wordmark */
.ptg-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:56px;           /* tweak size here */
  letter-spacing:-0.7px;
  background:linear-gradient(180deg,#f3f7ff 0%, #cfe1ff 55%, #8db7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* subtle depth like your sample */
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Underline glow */
.ptg-underline{
  position:absolute;
  left:78px;                /* start under the text (adjust if needed) */
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(64,160,255,0) 0%, rgba(64,160,255,.95) 35%, rgba(64,160,255,0) 100%);
  filter: blur(.2px);
  box-shadow: 0 0 14px rgba(64,160,255,.35);
}

/* Title row (puts info next to title) */
.tile-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}
.tile-title-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* Info icon */
.tile .info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  color:#9aa4b2;
  font-size:.85rem;
  line-height:1;
  padding:2px 4px;
  border-radius:6px;
  transition:color 0.2s ease, background 0.2s ease;
}
.tile .info:hover{ color:#ffffff; background:transparent; }

.tile .info:hover .info-tooltip,
.tile .info:focus .info-tooltip{
  display:block;
}

.tile .info{ opacity:.85; }
.tile .info:hover{ opacity:1; color:#fff; }

.f1-input-locked{
    background:#0b1020;
    color:#7f8aa3;
    cursor:not-allowed;
}

.user-name {
    cursor:pointer;
    font-weight:600;
}

.dropdown-menu {
    background:#111827;
    border:1px solid rgba(255,255,255,0.08);
}

.dropdown-item {
    color:#e5e7eb;
}

.dropdown-item:hover {
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.dropdown-item.active {
    background:#e10600;
    color:#fff;
}

/* ================= MODERN NAV PILLS ================= */

.user-group-nav{
    gap:10px;
}

.user-group-nav .nav-item{
    display:flex;
    align-items:center;
}

.nav-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    max-width:260px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    color:#e5e7eb;
    font-weight:600;
    font-size:.92rem;
    line-height:1;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    transition:all .18s ease;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

button.nav-pill{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}

.nav-pill:hover{
    color:#fff;
    border-color:rgba(147,197,253,.35);
    box-shadow:0 8px 22px rgba(0,0,0,.24);
    transform:translateY(-1px);
}

.nav-pill:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(147,197,253,.28), 0 8px 22px rgba(0,0,0,.24);
}

.nav-pill::after{
    margin-left:2px;
    opacity:.75;
}

.nav-pill-user{
    background:linear-gradient(180deg, rgba(147,197,253,.16), rgba(255,255,255,.04));
}

.nav-pill-group{
    background:linear-gradient(180deg, rgba(63,224,162,.14), rgba(255,255,255,.04));
}

.nav-pill-static{
    cursor:default;
}

.nav-pill-static:hover{
    transform:none;
}

.nav-pill-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    font-size:.95rem;
    flex:0 0 20px;
    opacity:.9;
}

.nav-pill-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    flex:0 0 24px;
    font-size:.78rem;
    font-weight:800;
    color:#fff;
    background:#93c5fd;
    box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}

.nav-pill-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ================= MODERN DROPDOWNS ================= */

.modern-dropdown{
    min-width:240px;
    margin-top:10px !important;
    padding:8px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg,#0f172a,#0b1220);
    box-shadow:0 18px 40px rgba(0,0,0,.38);
}

.modern-dropdown-header{
    padding:6px 10px 8px;
    color:#93C5FD;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.modern-dropdown-divider{
    margin:6px 0;
    border-color:rgba(255,255,255,0.08);
}

.modern-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:10px;
    padding:10px 12px;
    color:#e5e7eb;
    font-weight:600;
    transition:all .15s ease;
}

.modern-dropdown-item:hover{
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.modern-dropdown-item.active{
    background:rgba(147,197,253,.14);
    color:#fff;
}

.dropdown-item-icon{
    width:18px;
    text-align:center;
    flex:0 0 18px;
    opacity:.9;
}

.danger-item:hover{
    background:rgba(239,68,68,.12);
    color:#fecaca;
}

.invite-form input{
    font-size:.85rem;
}

.invite-form button{
    font-size:.85rem;
}

.modern-dropdown .invite-form{
    max-width:220px;
}/* ================= BASE ================= */
 :root{
     --f1-bg:#020617;
     --f1-panel:#0f172a;
     --f1-border:rgba(255,255,255,.08);
     --f1-text:#e5e7eb;
     --f1-muted:#9ca3af;
     --f1-blue:#93C5FD;
}
/* RESET */
 *{
     box-sizing:border-box;
}
 body{
     margin:0;
     background: radial-gradient(circle at top, #0f172a 0%, #020617 70%);
     color:var(--f1-text);
     font-family:'Titillium Web', sans-serif;
     min-height:100vh;
}
/* Links */
 a{
     color:var(--f1-blue);
     text-decoration:none;
}
 a:hover{
     color:#93c5fd;
}
/* Headings */
 h2{
     font-size:1.35rem;
     font-weight:800;
     letter-spacing:.06em;
     text-transform:uppercase;
}
/* ================= NAVBAR ================= */
 .f1-navbar{
     background:linear-gradient(180deg,#0f172a,#020617);
     border-bottom:1px solid rgba(96,165,250,.25);
     min-height:64px;
    /* ? fixes jumping height */
     padding:0 16px;
}
 .f1-navbar .container-fluid{
     min-height:64px;
}
 .f1-navbar .navbar-brand{
     color:var(--f1-blue);
     font-weight:900;
     font-size:1.25rem;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link{
     color:#cbd5e1;
     font-weight:700;
     letter-spacing:.05em;
     padding:0 16px;
     height:64px;
     display:flex;
     align-items:center;
}
 .f1-navbar .nav-link:hover{
     color:var(--f1-blue);
}
 .f1-navbar .nav-link.active{
     color:var(--f1-blue);
     border-bottom:2px solid var(--f1-blue);
}
/* mobile toggler */
 .navbar-toggler{
     border-color:var(--f1-blue);
}
 .navbar-toggler-icon{
     filter:invert(1);
}
/* ===== SITE ===== */
/* ===== CONTAINER ===== */
 .container{
     max-width:1200px;
}
/* ===== RACE LIST ===== */
 .season-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:12px 24px;
}
/* Back to season */
 .season-back {
     text-decoration: none;
     font-weight: 700;
     font-size: 0.85rem;
     color: #3fe0a2;
}
 .season-back:hover {
     color: #6fffd1;
}
/* ================= SEASON RACE CARDS ================= */
 .race-card{
     position: relative;
     padding: 6px 8px 7px;
    /* MUCH tighter */
     background: linear-gradient(180deg,#0c1a26,#08121b);
     border: 1px solid #1b3550;
     border-radius: 6px;
     box-shadow: 0 0 6px rgba(0,120,255,.12);
}
/* Remove floaty movement – makes grid denser */
 .race-card:hover{
     box-shadow: 0 0 10px rgba(0,150,255,.25);
}
/* Race title + date */
 .race-link{
     font-size: 15px;
     line-height: 1.15;
     display:block;
     padding:12px 16px;
     background:#0f172a;
     border-radius:10px;
     border-left:4px solid #60a5fa;
     font-weight:700;
     transition:.15s;
}
 .race-link:hover{
     background:#020617;
     border-left-color:#93c5fd;
     transform:translateX(4px);
}
 .race-date{
     color:var(--f1-muted);
     font-size:0.85em;
     opacity:.75;
}
/* Status badge inside tile */
 .race-status{
     position:absolute;
     top:4px;
     right:6px;
}
 .race-status .badge{
     font-size: 10px;
     letter-spacing:.4px;
     padding:2px 6px;
     border-radius:12px;
     font-weight:400;
}
/* OPEN */
 .badge.bg-success{
     background:#1cffac !important;
     color:#003b22;
}

/* CLOSING */
 .badge.bg-closing{
     background:#FF6F00 !important;
    color:#FFFFFF;
}

/* LOCKED */
 .badge.bg-danger{
     background:#ff5c5c !important;
}

/* FINISHED */
 .badge.bg-secondary{
     background:#5b6f87 !important;
}
/* ================= F1 DRIVER PICK COLORS ================= */
/* Base select */
 .f1-select {
     max-width: 280px;
     width: 100%;
     padding: 6px 10px;
     font-weight: 650;
     letter-spacing: 0.02em;
     min-height: 30px;
     min-width: 300px;
     font-size: 0.92rem;
     border-radius: 8px;
     background-color: #0b1220;
     border: 1px solid rgba(255,255,255,.08);
     color: #e5e7eb;
     transition: all .2s ease;
}
/* Hover = highlight */
 .f1-select:hover {
     border-color: rgba(255,200,0,.5);
}
/* Focus = race ready */
 .f1-select:focus {
     outline: none;
     border-color: #ffcc33;
     box-shadow: 0 0 0 2px rgba(255,204,51,.25);
}
/* Changed picks glow */
 .f1-select.changed {
     border-color: #22c55e;
     box-shadow: 0 0 0 1px rgba(34,197,94,.6);
}
 .f1-select option:checked {
     font-weight: 900;
     background-color: #0b1220;
}
 .pole-select{
     margin-top: 2px;
     padding-bottom: 6px;
     margin-bottom: 6px;
     border-bottom: 1px dashed rgba(147,197,253,.25);
}
 .f1-pos-label{
     padding-top: 4px;
     text-align:left;
     font-weight:700;
     color:#fff;
}
/* Selected row in dropdown */
 .f1-select option:checked {
     outline:2px solid white;
}
/* Force the SELECT to always use its team color, never inherit grey from option rendering */
 .f1-select{
     -webkit-appearance: none;
     appearance: none;
     background-clip: padding-box;
}
/* Re-apply team background after option selection (Chrome fix) */
 .f1-select.team-redbull {
     background-color:#4781D7 !important;
}
 .f1-select.team-ferrari {
     background-color:#dc0000 !important;
}
 .f1-select.team-mercedes {
     background-color:#00d2be !important;
}
 .f1-select.team-mclaren {
     background-color:#ff8700 !important;
}
 .f1-select.team-astonmartin {
     background-color:#006f62 !important;
}
 .f1-select.team-alpine {
     background-color:#0090ff !important;
}
 .f1-select.team-williams {
     background-color:#00a3e0 !important;
}
 .f1-select.team-sauber {
     background-color:#52e252 !important;
}
 .f1-select.team-haas {
     background-color:#b6babd !important;
}
 .f1-select.team-racingbulls {
     background-color:#000B8D !important;
}
 .f1-select.team-audi {
     background-color:#F50537!important;
}
/* Race date next to GP title */
 h4 .text-muted{
     color: #aaa !important;
    /* lighter or darker */
     opacity: 0.8;
    /* control how muted */
     font-weight: 500;
     letter-spacing: 0.04em;
}
 .lock-modal{
     position:fixed;
     inset:0;
     background:rgba(0,0,0,.75);
     display:none;
     align-items:center;
     justify-content:center;
     z-index:9999;
}
 .lock-box{
     background:#111;
     border:2px solid gold;
     padding:30px 40px;
     border-radius:12px;
     color:#fff;
     max-width:400px;
     text-align:center;
     box-shadow:0 0 40px rgba(255,215,0,.5);
}
 .lock-actions{
     margin-top:25px;
     display:flex;
     justify-content:space-between;
}
 .lock-actions button{
     padding:10px 24px;
     border-radius:20px;
     border:none;
     font-weight:700;
}
 .confirm-lock{
     background:gold;
     color:#111;
}
/* ===== ADMIN ===== */
 .admin-filters{
     background:#0f172a;
     padding:10px 14px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
}
 .admin-filters span{
     color:#60a5fa;
     font-weight:900;
     letter-spacing:.06em;
     text-transform:uppercase;
}
 .admin-filters label{
     color:#cbd5e1;
     font-weight:700;
}
 .admin-filters .form-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:700;
}
 .admin-filters .form-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
/* ------------------------------------------------- Grid Picks ------------------------------------------------- */
/* F1 grid for picks */
 .f1-grid{
     display:grid;
     grid-template-columns: 40px 1fr;
     gap: 6px 6px;
     max-width:650px;
}
 .f1-row{
     display: contents;
}
 .f1-submit-wrapper {
     margin-top: 16px;
     padding-top: 12px;
     border-top: 1px solid rgba(255,255,255,.08);
}
 .f1-submit:hover{
     background:#ff1e1e;
}
 .f1-select.changed{
     animation:f1flash .2s ease;
}
 @keyframes f1flash{
     from{
         box-shadow:0 0 0px #fff;
    }
     to{
         box-shadow:0 0 10px #fff;
    }
}
/* ============ LANDING PAGE ============ */
 .landing-hero{
     display:grid;
     grid-template-columns: 1.2fr 1fr;
     min-height:60vh;
     align-items:center;
     gap:60px;
}
 .hero-content h1{
     font-size:3.4rem;
     font-weight:900;
     line-height:1.1;
}
 .hero-content span{
     color:#facc15;
}
 .hero-content p{
     margin-top:20px;
     font-size:1.2rem;
     color:#9ca3af;
}
 .hero-buttons{
     margin-top:30px;
     display:flex;
     gap:16px;
}
 .btn-gold{
     background:linear-gradient(135deg,#facc15,#f59e0b);
     color:#000;
     padding:14px 28px;
     border-radius:12px;
     font-weight:900;
}
 .btn-outline{
     border:2px solid #facc15;
     color:#facc15;
     padding:14px 28px;
     border-radius:12px;
     font-weight:800;
}
 .preview-card{
     background:rgba(15,23,42,.9);
     border-radius:20px;
     padding:24px;
     box-shadow:0 0 40px rgba(250,204,21,.15);
}
 .preview-row{
     padding:14px;
     margin-bottom:10px;
     border-radius:12px;
     font-weight:700;
}
 .preview-row.gold{
     background:rgba(250,204,21,.25);
}
 .preview-row.silver{
     background:rgba(203,213,225,.2);
}
 .preview-row.bronze{
     background:rgba(205,127,50,.25);
}
 .how-it-works{
     margin-top:20px;
     display:grid;
     grid-template-columns: repeat(3,1fr);
     gap:30px;
}
 .how-card{
     background:rgba(15,23,42,.9);
     padding:30px;
     border-radius:18px;
     text-align:center;
}
 .preview-header {
     text-align: center;
     font-size: 0.85rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(255, 215, 0, 0.85);
    /* gold glow */
     margin-bottom: 10px;
     font-weight: 600;
}
/* ============================ Hall of Fame Layout ============================ */
 h1 {
     text-align: center;
     font-size: 2.6rem;
     margin: 40px 0 10px;
     color: #ffd700;
     letter-spacing: 0.08em;
}
 h2 {
     margin: 50px 0 20px;
     font-size: 1.2rem;
     border-bottom: 2px solid rgba(255,215,0,0.3);
     padding-bottom: 8px;
     color: #fff;
}
/* ============================ Champions Wall ============================ */
 .hof-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
     gap: 20px;
}
 .hof-card {
     background: linear-gradient(145deg, #121212, #1b1b1b);
     border: 1px solid rgba(255,215,0,0.15);
     border-radius: 14px;
     padding: 18px;
     text-align: center;
     box-shadow: 0 8px 30px rgba(0,0,0,0.6);
     position: relative;
     overflow: hidden;
}
 .hof-card.champion::before {
     content: "πŸ†";
     position: absolute;
     top: 10px;
     right: 14px;
     font-size: 2rem;
     opacity: 0.2;
}
 .hof-season {
     font-size: 0.8rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
}
 .hof-name {
     font-size: 1.3rem;
     font-weight: 600;
     margin: 10px 0;
     color: #ffd700;
}
 .hof-points {
     font-size: 1rem;
     color: #fff;
     opacity: 0.9;
}
/* ============================ Dynasty Club ============================ */
 .dynasty-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
     gap: 15px;
}
 .dynasty-card {
     background: #111;
     border-left: 4px solid #ffd700;
     padding: 14px 18px;
     border-radius: 10px;
     font-weight: 600;
}
/* ============================ Tables (Podiums / All-Time) ============================ */
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
}
 th {
     text-align: left;
     padding: 12px;
     background: rgba(255,215,0,0.1);
     color: #ffd700;
     font-size: 0.95rem;
     letter-spacing: 0.1em;
}
 td {
     padding: 12px;
     border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* ================= BASE ================= */
 .f1-submit-row{
	max-width: 150px;
     display:flex;
     justify-content:flex-start;
    /* not center */
     padding-left:68px;
    /* same left as select boxes */
     margin-top:30px;
}
 .btn-outline:hover{
     border-color:#fde68a;
     color:#fde68a;
     background-color: rgba(250, 204, 21, 0.08);
    /* very subtle gold tint */
}
 .btn-outline:active{
     background-color: rgba(250, 204, 21, 0.15);
     border-color:#facc15;
     color:#facc15;
}
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 9999;
     background: linear-gradient(180deg, rgba(8,8,12,.98), rgba(4,4,6,.94));
     backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(255,215,0,.2);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 6px 22px;
}
 .nav-left {
     font-size: 1rem;
     letter-spacing: .05em;
}
 .nav-links a {
     padding: 4px 10px;
     margin-left: 14px;
     font-size: .9rem;
}
 body {
     padding-top: 98px;
}
 .page-login .container{
     display:flex;
     justify-content:center;
}
 .f1-login-card{
     background: linear-gradient(180deg,#0f172a,#020617);
     border:1px solid var(--f1-border);
     border-radius:18px;
     padding:32px 34px 36px;
     width:100%;
     max-width:420px;
    /* ? this fixes the “too wide” problem */
     box-shadow: 0 0 0 1px rgba(147,197,253,.1), 0 30px 80px rgba(0,0,0,.8);
}
 .f1-login-card form{
     display:flex;
     flex-direction:column;
     gap:14px;
    /* space between inputs + button */
}

 .f1-login-btn{
 	 margin-top: 10px;
     background: linear-gradient(180deg, rgba(147,197,253,.35), rgba(59,130,246,.12) ), linear-gradient(180deg,#0f172a,#020617);
     color: var(--f1-text);
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     font-size: .95rem;
     border: 1px solid rgba(147,197,253,.35);
     border-radius: 10px;
     padding: 10px 18px;
    /* ? smaller height */
     width: 100%;
     height: 44px;
    /* ? matches input height */
     box-shadow: 0 0 0 1px rgba(147,197,253,.12), 0 6px 18px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.05);
     transition: all .15s ease;
     cursor:pointer;
	 max-width: 100%;
}
/* Hover — armed */
 .f1-login-btn:hover{
     box-shadow: 0 0 0 1px rgba(147,197,253,.3), 0 8px 26px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.08);
     transform: translateY(-1px);
}
/* Active — ignition */
 .f1-login-btn:active{
     transform: translateY(2px);
     box-shadow: 0 0 0 1px rgba(147,197,253,.2), 0 3px 8px rgba(59,130,246,.3), inset 0 2px 5px rgba(0,0,0,.6);
}
 .f1-input{
     background: linear-gradient(180deg,rgba(147,197,253,.06),rgba(2,6,23,.9));
     border:1px solid rgba(147,197,253,.25);
     color: var(--f1-text);
     padding:6px 14px;
     border-radius:10px;
     width:100%;
     height:44px;
     font-size:.95rem;
     font-weight:500;
     letter-spacing:.02em;
     box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 1px rgba(147,197,253,.05);
     transition:.15s ease;
}
/* placeholder */
 .f1-input::placeholder{
     color: var(--f1-muted);
}
/* hover */
 .f1-input:hover{
     border-color: rgba(147,197,253,.45);
}
/* focus — live terminal */
 .f1-input:focus{
     outline:none;
     border-color: var(--f1-blue);
     box-shadow: 0 0 0 2px rgba(147,197,253,.35), inset 0 1px 3px rgba(0,0,0,.7);
}
 .f1-alert{
     border-radius:12px;
     padding:14px 16px;
     margin-bottom:16px;
     font-weight:600;
     letter-spacing:.02em;
     border:1px solid;
     box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
/* ERROR – red race warning */
 .f1-alert-error{
     background: linear-gradient(180deg,#3b0a0a,#140202);
     border-color: #dc2626;
     color:#fecaca;
     box-shadow: 0 0 12px rgba(220,38,38,.4), inset 0 0 10px rgba(0,0,0,.8);
}
/* SUCCESS – green system ok */
 .f1-alert-success{
     background: linear-gradient(180deg,#052e16,#020617);
     border-color:#22c55e;
     color:#bbf7d0;
     box-shadow: 0 0 12px rgba(34,197,94,.4), inset 0 0 10px rgba(0,0,0,.8);
}

 .f1-form-row > div {
     flex: 1;
}
 .f1-form-btn {
     flex: 0;
}
 .f1-btn-sm {
     background: linear-gradient(135deg,#2563eb,#3b82f6);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(59,130,246,.35);
     transition: .15s ease;
}
 .f1-btn-sm:hover {
     box-shadow: 0 0 18px rgba(59,130,246,.6);
     transform: translateY(-1px);
}
 .f1-btn-danger-sm {
     background: linear-gradient(135deg,#7f1d1d,#dc2626);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 6px 12px;
     font-size: .8rem;
     box-shadow: 0 0 10px rgba(220,38,38,.4);
     transition: .15s ease;
}
 .f1-btn-danger-sm:hover {
     box-shadow: 0 0 18px rgba(220,38,38,.7);
     transform: translateY(-1px);
}
 .f1-form-row {
     display: grid;
     grid-template-columns: 2fr 2fr 1fr auto;
     gap: 18px;
     align-items: end;
}

 .f1-form-row label {
     font-size: .85rem;
     color: var(--f1-muted);
     margin-bottom: 6px;
     display: block;
}
 .f1-form-row .f1-logihn-btn {
     height: 46px;
     padding: 0 26px;
}
 .f1-admin-card {
     background: linear-gradient(180deg,#0b1222,#050914);
     border: 1px solid rgba(255,255,255,.08);
     border-radius: 20px;
     padding: 20px 24px;
     box-shadow: inset 0 0 40px rgba(255,255,255,.04), 0 0 60px rgba(59,130,246,.15);
}
/* FORCE horizontal admin add row */
/* --- Add Driver horizontal bar --- */
 .f1-add-row{
     display:flex !important;
     align-items:flex-end;
     gap:16px;
     width:100%;
}
/* Input columns */
 .f1-add-row .field{
     display:flex;
     flex-direction:column;
}
/* Width control */
 .f1-add-row .name {
     flex:2;
}
 .f1-add-row .team {
     flex:2;
}
 .f1-add-row .num {
     flex:1;
     max-width:90px;
}
/* Prevent button from stretching */
 .f1-add-row button{
     flex:0 0 140px;
     width:140px;
     height:46px;
     margin:0;
     align-self:flex-end;
}
/* ===== F1 Admin Results ===== */
 .admin-filters{
     margin-bottom:20px;
}
/* Compact selects */
 .compact{
     width:100%;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     padding:6px 10px;
     border:1px solid rgba(255,255,255,0.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
}
/* Add-result container */
 .f1-add-results{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Save/Delete buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     margin-bottom:8px;
     width:100%;
}
 .f1-btn-delete{
     background:linear-gradient(180deg,#ff6b6b,#c0392b);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(255,80,80,.6);
     width:100%;
}
 .f1-btn-save:hover{
     filter:brightness(1.1);
}
 .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* Race blocks */
 .race-block-even{
     background:rgba(0,0,0,.25);
}
 .race-block-odd{
     background:rgba(0,0,0,.35);
}
/* ===== F1 Races Admin ===== */
 .f1-race-panel{
     background:linear-gradient(145deg,#0a1020,#050912);
     border-radius:20px;
     padding:20px;
     box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 20px rgba(0,150,255,.15);
     margin-bottom:30px;
}
/* Buttons */
 .f1-btn-save{
     background:linear-gradient(180deg,#4e7cff,#2c55d4);
     border:none;
     color:white;
     padding:8px 16px;
     border-radius:12px;
     cursor:pointer;
     box-shadow:0 0 10px rgba(0,140,255,.6);
     width:100%;
     margin-bottom:8px;
}
 .f1-btn-save:hover, .f1-btn-delete:hover{
     filter:brightness(1.1);
}
/* ===== Admin compact tables ===== */
 .admin-table{
     width:100%;
     table-layout: fixed;
    /* THIS is the key */
     border-collapse: collapse;
}
/* Cells */
 .admin-table th, .admin-table td{
     white-space:nowrap;
     padding:8px 10px;
     text-align:center;
}
/* Compact inputs inside admin tables */
 .admin-table input, .admin-table select{
     width:auto;
     min-width:60px;
     padding:6px 10px;
     background:#0b1020;
     color:#fff;
     border-radius:10px;
     border:1px solid rgba(255,255,255,.12);
     box-shadow: inset 0 0 10px rgba(0,150,255,.2);
}
/* Larger fields */
 .admin-table input[name="name"]{
     min-width:180px;
}
 .admin-table input[type="date"], .admin-table input[type="datetime-local"]{
     min-width:160px;
}
/* Checkboxes */
 .admin-table input[type="checkbox"]{
     transform:scale(1.3);
     accent-color:#4e7cff;
}
/* Admin buttons */
 .admin-table .f1-btn-save{
     width:100%;
}
 .admin-table .f1-btn-delete{
     width:100%;
}
/* Horizontal scroll for admin tables */
 .admin-table-wrap{
     overflow-x:auto;
     padding-bottom:10px;
}
/* ===== Force widths for admin race table fields ===== */
/* Season */
 .admin-table input[name="season"]{
     width:80px;
}
/* Round */
 .admin-table input[name="round"]{
     width:70px;
     text-align:center;
}
/* Date */
 .admin-table input[name="race_date"]{
     width:140px;
}
/* Reminder */
 .admin-table input[name="reminder_time"]{
     width:190px;
}
/* Race name */
 .admin-table input[name="name"]{
     width:200px;
}
 .admin-table th:last-child, .admin-table td:last-child{
     width:140px;
     min-width:140px;
     max-width:140px;
     text-align:center;
}
 .admin-table th:nth-child(6), .admin-table td:nth-child(6){
     width:220px;
}
 .admin-table th:nth-child(3), .admin-table td:nth-child(3){
     width:70px;
     text-align:center;
}
 .admin-table td input{
     width:100%;
     max-width:100%;
     box-sizing:border-box;
}
/* Fix admin table button sizing */
 .admin-table td:last-child{
     padding:6px 8px;
     vertical-align:middle;
}
/* Compact Save button */
 .admin-table .btn-save{
     height:38px;
     min-height:38px;
     padding:0 18px;
     font-size:14px;
     border-radius:12px;
     background:linear-gradient(180deg,#5f7cff,#3b56d9);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(90,120,255,.35), inset 0 0 10px rgba(255,255,255,.15);
     cursor:pointer;
}
/* Hover effect */
 .admin-table .btn-save:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(90,120,255,.55), inset 0 0 14px rgba(255,255,255,.2);
}
/* Delete button */
 .admin-table .btn-delete{
     height:38px;
     min-height:38px;
     padding:0 14px;
     margin-top:6px;
     font-size:13px;
     border-radius:12px;
     background:linear-gradient(180deg,#ff5a5a,#cc2f2f);
     border:none;
     color:white;
     box-shadow: 0 0 12px rgba(255,90,90,.4), inset 0 0 10px rgba(255,255,255,.12);
     cursor:pointer;
}
 .admin-table .btn-delete:hover{
     transform:translateY(-1px);
     box-shadow: 0 0 18px rgba(255,90,90,.65), inset 0 0 14px rgba(255,255,255,.18);
}
/* Allow Actions column to grow vertically */
 .admin-table td.actions{
     overflow: visible !important;
     height: auto !important;
     padding-top: 10px;
     padding-bottom: 10px;
}
/* Stack buttons vertically inside Actions */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:8px;
     align-items:center;
}
/* Allow admin rows to grow vertically */
 .admin-table tr{
     height: auto !important;
     min-height: 0 !important;
     overflow: visible !important;
}
/* Make action cells flexible */
 .admin-table td.actions{
     overflow: visible !important;
     vertical-align: middle;
}
/* Stack buttons */
 .admin-table .action-stack{
     display:flex;
     flex-direction:column;
     gap:10px;
     align-items:center;
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown{
     background: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 14px 20px 16px;
     box-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:20px;
}
 .f1-countdown-label{
     font-size: .7rem;
     font-weight: 800;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--f1-blue);
     opacity: .85;
     margin-bottom: 6px;
}
/* Time row */
 .f1-countdown-time{
     display: flex;
     align-items: baseline;
     gap: 6px;
     font-family: 'Titillium Web', sans-serif;
}
/* Units */
 .f1-countdown-time .unit{
     display: flex;
     align-items: baseline;
     gap: 2px;
}
 .f1-countdown-time b{
     font-size: 1.6rem;
     font-weight: 900;
     color: #facc15;
     text-shadow: 0 0 14px rgba(250,204,21,.65);
     min-width: 2ch;
     text-align: right;
}
 .f1-countdown-time em{
     font-size: .65rem;
     font-style: normal;
     font-weight: 700;
     letter-spacing: .12em;
     color: var(--f1-muted);
     margin-left: 2px;
}
/* Separators */
 .f1-countdown-time .sep{
     font-size: 1.4rem;
     font-weight: 900;
     color: rgba(255,255,255,.4);
     margin: 0 2px;
}
/* Blinking last colon (broadcast feel) */
 .f1-countdown-time .blink{
     animation: blink 1s steps(1) infinite;
}
 @keyframes blink{
     50%{
         opacity: 0;
    }
}
/* ================= F1 COUNTDOWN ================= */
 .f1-countdown.warning{
     border-color: #e10600;
     box-shadow: 0 0 25px rgba(225,6,0,.6), inset 0 0 20px rgba(225,6,0,.25);
}
 .f1-countdown.warning .f1-countdown-label{
     color: #e10600;
}
 .f1-countdown.warning b{
     color: #ff5c5c;
     text-shadow: 0 0 16px rgba(255,92,92,.9);
}
/* ================= F1 SUBMIT BUTTON ================= */
 .f1-row:last-child{
     margin-top: 18px;
}
 @media (max-width: 600px){
     .f1-submit-gold{
         width: 100%;
         text-align: center;
    }
}
 .f1-race-header.warning + form .f1-submit-gold{
     background: linear-gradient( 135deg, #e10600, #ff5c5c, #e10600 );
     color: #fff;
     box-shadow: 0 0 0 1px rgba(225,6,0,.9), 0 10px 30px rgba(225,6,0,.7);
}
/* Container above the grid */
 .last-race-btn-wrap {
     margin-bottom: 15px;
     text-align: left;
    /* aligns left with the form */
}
/* Align vertically with countdown box if needed */
 #f1CountdownWrapper form.ms-3 {
     display: flex;
     align-items: center;
}
 .f1-submit-btn {
     position: relative;
     padding: 7px 10px;
    /* slightly wider, not taller */
     font-size: 0.82rem;
    /* more readable */
     letter-spacing: 0.06em;
     font-weight: 700;
     text-transform: uppercase;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     background: linear-gradient(135deg,#ffb300,#ffcc33,#ffb300);
     color: #1a1a1a;
     box-shadow: 0 0 0 2px rgba(255,200,0,.4), 0 8px 18px rgba(255,180,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
     transition: all .25s ease;
}
/* Hover */
 .f1-submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 0 0 1px rgba(255,200,0,.35), 0 6px 14px rgba(255,180,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Pressed */
 .f1-submit-btn:active {
     transform: translateY(1px);
     box-shadow: 0 0 0 1px rgba(255,220,80,.6), 0 10px 24px rgba(255,180,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
/* Disabled */
 .f1-submit-btn:disabled {
     background: linear-gradient(135deg,#777,#999);
     color: #222;
     cursor: not-allowed;
     box-shadow: none;
     opacity: .6;
}
/* ----------------- Lock in Picks ----------------- */
.f1-btn-row button {
      width: 100%;
    }
 .f1-submit-gold {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(180deg,#052e16,#020617);
    /* login-style success base */
     border: 1px solid #22c55e;
    /* success border by default */
     color: #bbf7d0;
    /* matching login success text */
     font-weight: 700;
     font-size: 0.9rem;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     border-radius: 6px;
     cursor: pointer;
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(34,197,94,.8), 0 8px 28px rgba(34,197,94,.45);
     transition: all .12s ease;
}
/* Make Lock in Picks same height as Use Last Race Picks */
 .f1-submit-gold:hover {
     background: linear-gradient(180deg,#065e1f,#02270a);
     box-shadow: inset 0 -2px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(34,197,94,1), 0 12px 36px rgba(34,197,94,.7);
}
 .f1-submit-gold:active {
     transform: translateY(1px);
     box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(34,197,94,.9);
}
 .f1-submit-gold:disabled {
     background: linear-gradient(180deg,#3b0a0a,#140202);
    /* locked/error style */
     border: 1px solid #dc2626;
     color: #fecaca;
     cursor: not-allowed;
     box-shadow: none;
}
/* ----------------- Use Last Race Picks ----------------- */
 .btn-copy-last {
     background: linear-gradient(180deg, #020617, #020617);
    /* near-black */
     border: 1px solid rgba(96, 165, 250, 0.45);
    /* #60a5fa glow border */
     color: #93C5FD;
    /* base blue text */
     font-weight: 700;
     font-size: 0.9rem;
     margin-bottom: 10px;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     box-shadow: 0 0 10px rgba(96, 165, 250, 0.15);
}
 .btn-copy-last:hover:not(:disabled) {
     background: linear-gradient(180deg, #020617, #020617);
     border-color: #60a5fa;
     color: #e0f2fe;
    /* brighter sky text */
     box-shadow: 0 0 12px rgba(96, 165, 250, 0.55), inset 0 0 8px rgba(96, 165, 250, 0.25);
}
 .btn-copy-last:disabled {
     background: linear-gradient(180deg, #020617, #020617);
     border: 1px solid rgba(148, 163, 184, 0.25);
     color: rgba(148, 163, 184, 0.5);
     cursor: not-allowed;
     box-shadow: none;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
    /* wrap on small screens */
}
 .f1-header-msg {
     white-space: nowrap;
     font-size: 0.95rem;
     line-height: 1.2;
}
 .f1-submit-gold {
     m8in-width: 150px;
}
 .f1-top-controls {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
    /* wraps on small screens */
}
 .f1-countdown {
     display: flex;
     align-items: center;
     padding: 16px;
     border-radius: 12px;
     background: rgba(0,0,0,0.5);
     min-height: 80px;
    /* sets a consistent height */
}
 .f1-top-controls form {
     display: flex;
     align-items: stretch;
    /* make buttons match countdown height */
}
 .f1-top-controls button {
     min-height: 80px;
    /* same as countdown height */
     padding: 0 20px;
     font-size: 1rem;
     border-radius: 12px;
}
 .f1-msg {
     padding: 6px 24px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: .04em;
     white-space: nowrap;
}
/* ------------------ Messages match login card style ------------------ */
 .f1-msg-success {
     color: #22c55e;
     animation: f1-success-pulse 0.9s ease-out;
}
 @keyframes f1-success-pulse {
     0% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
     30% {
         transform: scale(1.08);
         text-shadow: 0 0 16px rgba(34,197,94,0.9);
    }
     100% {
         transform: scale(1);
         text-shadow: 0 0 0 rgba(34,197,94,0);
    }
}
 .f1-msg-success {
     color: #22c55e;
     position: relative;
     overflow: hidden;
}
 .f1-msg-success::after {
     content: '';
     position: absolute;
     top: 0;
     left: -120%;
     width: 120%;
     height: 100%;
     background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
     animation: f1-shine 1.2s ease-out;
}
 @keyframes f1-shine {
     to {
         left: 120%;
    }
}
 .f1-msg-error {
     color: #dc2626;
     animation: f1-shake 0.4s ease-in-out;
}
 @keyframes f1-shake {
     0% {
         transform: translateX(0);
    }
     25% {
         transform: translateX(-6px);
    }
     50% {
         transform: translateX(6px);
    }
     75% {
         transform: translateX(-4px);
    }
     100% {
         transform: translateX(0);
    }
}
 .f1-msg-warn {
     color: #ff8700;
     animation: f1-warn-glow 1.2s ease-in-out infinite alternate;
}
 @keyframes f1-warn-glow {
     from {
         text-shadow: 0 0 0 rgba(255,135,0,0);
    }
     to {
         text-shadow: 0 0 10px rgba(255,135,0,.9);
    }
}
/* Hover highlight for clickable rows */
 .race-row {
     cursor: pointer;
     transition: all 0.2s ease;
}
 .race-row:hover {
     background: rgba(15, 23, 42, 0.85);
    /* deep slate like admin-filters */
     box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35), 0 0 18px rgba(96, 165, 250, 0.25);
     color: #e0f2fe;
    /* soft sky text */
}
 .custom-select .options {
     position: absolute;
     top: 36px;
    /* same distance from top of select box */
     left: 0;
     right: 0;
}
/* Navbar group dropdown custom style */
/* =============================== User + Group Switcher (Navbar) =============================== */
 .user-group-nav .nav-link {
     font-weight: 600;
}
/* Active group (blue text) */
 .group-switch {
     color: #93C5FD !important;
     font-weight: 700;
}
/* Remove Bootstrap caret color */
 .group-switch::after {
     filter: brightness(1.3);
}
/* Dropdown container */
 .group-dropdown {
     background: #0f172a;
    /* navbar blue */
     border: none;
     border-radius: 0 0 10px 10px;
     box-shadow: 0 10px 30px rgba(0,0,0,.35);
     padding: 6px 0;
}
/* Dropdown items */
 .group-dropdown-item {
     color: #93C5FD;
     font-weight: 600;
     padding: 8px 18px;
     background: transparent;
}
/* Hover effect */
 .group-dropdown-item:hover {
     background: rgba(255,255,255,0.08);
     color: #ffffff;
}
/* Active group */
 .group-dropdown-item.active {
     color: #ffffff;
     background: rgba(255,255,255,0.15);
}
/* Remove Bootstrap default white */
 .dropdown-menu {
     --bs-dropdown-bg: transparent;
     --bs-dropdown-link-hover-bg: transparent;
     --bs-dropdown-link-active-bg: transparent;
}
/* =============================== Pulse when picks close soon =============================== */
 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(220,53,69,.6);
    }
     70% {
         box-shadow: 0 0 0 10px rgba(220,53,69,0);
    }
     100% {
         box-shadow: 0 0 0 0 rgba(220,53,69,0);
    }
}
 .badge-pulse {
     animation: pulse 1.2s infinite;
}
/* =============================== Dimmed / locked races =============================== */
 .race-locked {
     opacity: 0.65;
     pointer-events: none;
}
/* =============================== Race card visuals =============================== */
 .race-card {
     transition: opacity 0.25s ease, filter 0.25s ease;
}
 .race-status {
     margin-top: 6px;
}
 .race-card.race-dim .race-locked {
     opacity: 0.65;
}
/* Optional: keep text readable */
 .race-card.race-dim .race-link, .race-card.race-dim .race-status {
     opacity: 1;
}
/* Optional: cursor + subtle feel */
 .race-card.race-dim {
     filter: grayscale(15%);
}
 .race-card.race-dim:hover {
     opacity: 0.75;
}
 .badge-pulse {
     position: relative;
     z-index: 2;
}
 .mini-bonus {
     color: gold;
     font-size: 11px;
     margin-left: 4px;
     vertical-align: middle;
}
/* ===== Bonus legend ===== */
 .bonus-legend {
     display: flex;
     align-items: center;
    /* ? vertical centering */
     flex-wrap: wrap;
     gap: 10px 14px;
     margin-top: 14px;
     margin-bottom: 28px;
     padding: 10px 12px;
     background: var(--f1-panel);
     border: 1px solid var(--f1-border);
     border-radius: 10px;
     font-size: 0.75rem;
     color: var(--f1-muted);
}
 .bonus-legend strong {
     color: var(--f1-text);
     font-weight: 600;
     margin-right: 4px;
}
 .bonus-legend span {
     background: rgba(147, 197, 253, 0.08);
    /* f1-blue hint */
     border: 1px solid rgba(147, 197, 253, 0.25);
     color: var(--f1-blue);
     padding: 3px 8px;
     border-radius: 999px;
    /* pill style */
     font-weight: 600;
     white-space: nowrap;
}
/* =============================== LEADERBOARD BASE =============================== */
 .leaderboard {
     border-collapse: collapse;
     width: 100%;
}
 .leaderboard-wrap {
     width: 100%;
     overflow-x: auto;
}
 table.leaderboard {
     width: 100%;
     border-collapse: collapse;
     background: #0f172a;
     border-radius: 14px;
     overflow: hidden;
}
/* =============================== CELLS =============================== */
 .leaderboard th, .leaderboard td {
     padding: 5px 7px;
     font-size: 0.85rem;
     line-height: 1.15;
     vertical-align: middle;
     border: 1px solid #333;
     text-align: center;
     white-space: nowrap;
}
/* All headers */
 .leaderboard th {
     background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
     padding-top: 6px;
     padding-bottom: 6px;
     color: #ffffff;
     font-weight: 700;
     position: sticky;
     top: 0;
     z-index: 4;
	 border-bottom: 2px solid rgba(255,255,255,.25);
}

/* =============================== PICK CELLS =============================== */
 .leaderboard-picks th {
     position: relative;
     padding: 6px 8px 6px;
     font-weight: 700;
}
 .leaderboard-picks td {
     position: relative;
     padding: 6px 8px 22px;
     font-weight: 400;
}
/* Score bubble */
 .leaderboard-picks .score {
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 0.72rem;
     font-weight: 600;
     color: #3fe0a2;
     background: rgba(63,224,162,0.18);
     border-radius: 999px;
     padding: 2px 9px;
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4);
}
/* Glow for tables that have scores */
 .leaderboard:has(.score) td {
     background: rgba(255,255,255,0.03);
     border-radius: 8px;
}
/* Correct picks */
 .leaderboard-picks td.correct_pk {
     background: linear-gradient( 180deg, rgba(63,224,162,.22), rgba(63,224,162,.06) );
     box-shadow: inset 0 0 0 1px rgba(63,224,162,.4), 0 0 10px rgba(63,224,162,.15);
}
/* Player */
 .leaderboard-picks .player {
     font-weight: 700;
     font-size: 0.85rem;
     vertical-align: middle;
     background: linear-gradient( 180deg, rgba(63,224,162,.35), rgba(63,224,162,.12) );
     border-radius: 10px;
}


/* Base style for total */
 td.player {
     font-weight: bold;
     text-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #ffff;
    /* default background */
     transition: all 0.3s ease;
}

/* Red score bubble for wrong picks */
 .leaderboard-picks td.wrong .score {
     color: #ff6b6b;
     background: rgba(224,63,63,0.18);
     box-shadow: inset 0 0 0 1px rgba(224,63,63,.4);
}
/* Optional: partial score bubble */
 .leaderboard-picks td.partial .score {
     color: #ff9f1c;
     background: rgba(255,165,0,0.18);
     box-shadow: inset 0 0 0 1px rgba(255,165,0,0.4);
}
/* ================= TOTAL COLUMN ================= */
/* Base style for total */
 td.total-score {
     font-weight: bold;
     tex6t-align: center;
     padding: 6px 8px;
     border-radius: 6px;
     position: relative;
     color: #eee;
     background: #222;
    /* default background */
     transition: all 0.3s ease;
}
/* =============================== ADMIN INPUTS =============================== */
 .leaderboard input, .leaderboard select {
     width: 100%;
     background: #0b1020;
     color: #fff;
     border-radius: 10px;
     padding: 5px 8px;
     border: 1px solid rgba(255,255,255,.1);
     box-shadow: inset 0 0 10px rgba(0,150,255,.15);
     font-size: 0.85rem;
}
 .leaderboard input[type="checkbox"] {
     transform: scale(1.25);
     accent-color: #4e7cff;
}
 td.total-score.normal {
     color: #D3D3D3;
    /* plain white text */
     background: rgba(205, 127, 50, 0.05);
    /* subtle gray/transparent */
     font-weight: 400 !important;
}
/* Highlight the top 1 scorer */
 td.total-score.top1 {
     baackground: rgba(255, 215, 0, 0.10) !important;
     color: #b9a200 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 2nd place */
 td.total-score.top2 {
     baackground: rgba(192, 192, 192, 0.10) !important;
     color: #999B9B !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Highlight 3rd place */
 td.total-score.top3 {
     baackground: rgba(205, 127, 50, 0.10) !important;
     color: #b07a45 !important;
     box-shadow: none !important;
     font-weight: 700 !important;
}
/* Clickable cells */
 .leaderboard td.clickable {
     cursor: pointer;
}
/* Actual Qualifying & Race Result Table (1/2 width, left-aligned) */
 .leaderboard-results-wrap {
     widtth: 50%;
    /* 1/3 of page width */
     margin: 0 0 20px 0;
    /* top/bottom spacing, left-aligned */
     overflow-x: auto;
    /* allow horizontal scroll if needed */
}
 .leaderboard-results-wrap table {
     width: 100%;
     border-collapse: collapse;
}
 .leaderboard-results-wrap th, .leaderboard-results-wrap td {
     padding: 6px 10px;
     text-align: center;
}
/* =============================== PODIUM COLORS - Races =============================== */
 .leaderboard td.podium-bronze:nth-child(n+3) {
     background: rgba(205, 127, 50, 0.05) !important;
     color: #b07a45 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-gold:nth-child(n+3) {
     background: rgba(255, 215, 0, 0.05) !important;
     color: #b9a200 !important;
     font-weight: 700 !important;
}
 .leaderboard td.podium-silver:nth-child(n+3) {
     background: rgba(192, 192, 192, 0.05) !important;
     color: #999B9B !important;
     font-weight: 700 !important;
}
/* =============================== PODIUM COLORS - Total - Line 3 first 3 columns formatting =============================== */
/* BRONZE */
 .laeaderboard tbody tr:nth-child(4) td.user-cell:nth-child(-n+3) {
     color: #b07a45 !important;
     font-weight: 900 !important;
}
/* GOLD */
 .leaaderboard tbody tr:nth-child(2) td.user-cell:nth-child(-n+3) {
     color: #b9a200 !important;
     font-weight: 900 !important;
}
/* SILVER */
 .leaaderboard tbody tr:nth-child(3) td.user-cell:nth-child(-n+3) {
     color: #999B9B !important;
     font-weight: 900 !important;
}
/* =============================== STICKY COLUMNS =============================== */
 .leaderhboard-wrap {
     overflow-x: auto;
     position: relative;
}
/* =============================== HEADER COLORS =============================== */
 .leaderboard td {
     background: #0b1020;
     box-shadow: -2px 0 8px rgba(0,0,0,.4);
}

/* ================= COLUMN HOVER LINE ================= */
 .hover-columns {
     position: relative;
}

 .leaderboard-wrap.hover-columns {
     position: relative;
     overflow: visible;
    /* important */
}
/* =============================== RACE HEADER =============================== */
 .leaderboard th.race-header {
     position: relative;
     color: #60A5FA;
     font-weight: 700;
     letter-spacing: 0.45px;
     text-transform: uppercase;
}
 .leaderboard th.race-header::after {
     content: "";
     position: absolute;
     left: 20%;
     right: 20%;
     bottom: -2px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #e10600, transparent);
     opacity: 0.6;
     transition: all .2s ease;
}
 .leaderboard th.race-header:hover::after {
     left: 8%;
     right: 8%;
     opacity: 1;
}
 .season-select {
     background:#0f172a;
     padding-top:2px;
     padding-bottom:2px;
     padding-left:16px;
     padding-right:16px;
     border-radius:12px;
     border:1px solid rgba(96,165,250,.35);
     box-shadow:0 0 20px rgba(96,165,250,.25);
     margin-left: 24px;
    /* try 12–24px */
}
 .admin-filters .season-select{
     background:#020617;
     color:white;
     border:1px solid rgba(96,165,250,.6);
     font-weight:500;
}
 .admin-filters .season-select:focus{
     border-color:#60a5fa;
     box-shadow:0 0 0 2px rgba(96,165,250,.5);
}
 #race-tooltip {
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     background: linear-gradient(180deg, #1b2042, #0b1020);
     color: #fff;
     padding: 6px 10px;
     border-radius: 8px;
     font-size: 0.75rem;
     font-weight: 600;
     white-space: nowrap;
     border: 1px solid rgba(255,255,255,0.12);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 10px 28px rgba(0,0,0,0.65), inset 0 0 10px rgba(255,0,0,0.2);
     opacity: 0;
     transform: translateY(6px);
     transition: opacity .15s ease-out, transform .18s cubic-bezier(.2,.8,.2,1);
}
 #race-tooltip::before {
     content: "";
     position: absolute;
     top: 0;
     left: 10px;
     right: 10px;
     height: 2px;
     background: linear-gradient( 90deg, transparent, #e10600, transparent );
     border-radius: 2px;
}
/* Center bonus number vertically + horizontally */
 .leaderboard-picks .bonus-score {
     font-size: 0.85rem;
     font-weight: 700;
     padding: 2px 8px;
     vertical-align: middle;
     border-radius: 999px;
     background: rgba(78,124,255,0.18);
     color: #22c55e;
     line-height: 1;
}

/* zero bonus */
 .leaderboard-picks .bonus-score.is-zero {
     color: var(--f1-muted);
     background: transparent;
     box-shadow: none;
     font-weight: 500;
}
/*IMPROVEMENTS */
 .leaderboard-picks .score {
     color: #22c55e;
     background: rgba(34,197,94,.15);
     box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
}
 .leaderboard-picks td.wrong .score {
     color: #ef4444;
     background: rgba(239,68,68,.15);
     box-shadow: inset 0 0 0 1px rgba(239,68,68,.35);
}
 .leaderboard-picks td.partial .score {
     color: #f59e0b;
     background: rgba(245,158,11,.15);
     box-shadow: inset 0 0 0 1px rgba(245,158,11,.35);
}

 .leaderboard-picks .score {
     line-height: 1;
}
 .leaderboard input, .leaderboard select {
     background: var(--f1-bg);
     border: 1px solid var(--f1-border);
     box-shadow: inset 0 0 0 1px rgba(147,197,253,.15);
}

/* =================================
   RULES ACCORDION – SINGLE PANEL (CLEAN)
   ================================= */
.rules-subtitle strong {
    color: #facc15;
}


#rulesAccordion {
    margin-top: 0.25rem;
    background: linear-gradient(180deg, #0b1222, #050914);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(255,255,255,.04);
}

/* Items become rows */
#rulesAccordion .accordion-item {
    background: transparent;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* Divider between rows */
#rulesAccordion .accordion-item + .accordion-item {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Header */
#rulesAccordion .accordion-header {
    margin: 0;
}

#rulesAccordion .accordion-button {
    background: transparent;
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.25;
}

/* Active */
#rulesAccordion .accordion-button:not(.collapsed) {
    color: #facc15;
    background: rgba(250,204,21,0.06);
}

/* Focus */
#rulesAccordion .accordion-button:focus {
    box-shadow: none;
}

/* Chevron */
#rulesAccordion .accordion-button::after {
    filter: invert(1);
    opacity: 0.7;
}

/* Body */
#rulesAccordion .accordion-collapse {
    background: rgba(255,255,255,0.02);
}

#rulesAccordion .accordion-body {
    padding: 0.55rem 0.9rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

/* Text */
#rulesAccordion strong {
    color: #facc15;
}

/* Lists */
#rulesAccordion .accordion-body ul {
    padding-left: 1.6rem;
    margin-left: 0;
}

#rulesAccordion .accordion-body li {
    padding-left: 0.2rem;
}

#rulesAccordion li::marker {
    content: "";
}

#rulesAccordion {
    list-style: none;
    padding-left: 0; /* optional: removes default indent */
}

/* Tables */
#rulesAccordion table {
    margin: 0.4rem 0;
    background: transparent;
    color: #fff;
}

#rulesAccordion thead {
    background: rgba(255,255,255,0.08);
    color: #ffd700;
}

#rulesAccordion td,
#rulesAccordion th {
    border-color: rgba(255,255,255,0.15);
}

/* Rounded ends */
#rulesAccordion .accordion-item:first-child .accordion-button {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

#rulesAccordion .accordion-item:last-child .accordion-collapse {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Desktop */
@media (min-width: 992px) {
    #rulesAccordion .accordion-button {
        font-size: 0.9rem;
        padding: 0.45rem 0.85rem;
    }
}
/* Active indicator bar */
#rulesAccordion .accordion-item {
    position: relative;
}

#rulesAccordion .accordion-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: linear-gradient(180deg, #facc15, #eab308);
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.2s ease, transform 0.25s ease;
    border-radius: 2px;
}

/* Show when active */
#rulesAccordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
    opacity: 1;
    transform: scaleY(1);
}
/* Scroll-highlight */
#rulesAccordion .accordion-item.is-visible > .accordion-header .accordion-button {
    background: rgba(96,165,250,0.08);
}
/* ===============================
   RULES ACCORDION – TABLE WIDTH FIX
   =============================== */

/* Let tables size to content */
#rulesAccordion table {
    width: auto !important;          /* <-- key line */
    max-width: 100%;
    margin: 0.75rem 0 !important;    /* left aligned */
    display: inline-table;           /* prevents stretching */
}

/* Kill Bootstrap full-width behavior */
#rulesAccordion .table {
    width: auto !important;
}

/* Dark theme enforcement */
#rulesAccordion table,
#rulesAccordion thead,
#rulesAccordion tbody,
#rulesAccordion tr,
#rulesAccordion th,
#rulesAccordion td {
    background-color: transparent !important;
}

/* Header row */
#rulesAccordion thead th {
    background: rgba(250, 204, 21, 0.14) !important;
    color: #facc15 !important;
    white-space: nowrap;
}

/* Body rows */
#rulesAccordion tbody tr {
    background: rgba(255,255,255,0.03) !important;
}

#rulesAccordion tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.06) !important;
}

/* Text */
#rulesAccordion td,
#rulesAccordion th {
    color: #e5e7eb !important;
    white-space: nowrap;
}
/* ===============================
   POINTS LIST – TABLELESS
   =============================== */

#rulesAccordion .points-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 1.5rem;
    width: fit-content;
    margin: 0.75rem 0;
}

/* Row */
#rulesAccordion .points-list > div {
    display: contents;
}

/* Position label */
#rulesAccordion .points-list span {
    color: #e5e7eb;
    font-weight: 500;
    white-space: nowrap;
}

/* Points value */
#rulesAccordion .points-list strong {
    color: #facc15;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* Optional subtle divider every row */
#rulesAccordion .points-list span,
#rulesAccordion .points-list strong {
    padding: 0.15rem 0;
}

/* Slight glow on hover (optional but nice) */
#rulesAccordion .points-list > div:hover span,
#rulesAccordion .points-list > div:hover strong {
    color: #fde68a;
}
#rulesAccordion .points-list div:nth-child(-n+3) strong {
    color: #ffd700;
}
@media (max-width: 600px) {
    #rulesAccordion .points-list {
        grid-template-columns: 1fr auto;
        width: 100%;
    }
}
/* Dark theme links inside rules accordion */
#rulesAccordion a {
    color: #facc15; /* soft gold */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 204, 21, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

#rulesAccordion a:hover {
    color: #fde047; /* brighter gold */
    border-bottom-color: rgba(250, 204, 21, 0.75);
}

/* Optional: subtle external-link cue */
#rulesAccordion a[target="_blank"]::after {
    content: "?";
    font-size: 0.75em;
    margin-left: 0.25rem;
    opacity: 0.6;
}
/* Fix invisible dropdown text */
select.f1-input {
    background-color: #111;
    color: #fff;
    border: 1px solid #444;
}

/* Dropdown options */
select.f1-input option {
    background-color: #111;   /* menu background */
    color: #fff;             /* text */
}

/* Hovered option (Chrome / Edge) */
select.f1-input option:hover {
    background-color: #e10600;
    color: #fff;
}

/* Selected option inside list */
select.f1-input option:checked {
    background-color: #e10600;
    color: #fff;
}
/* Gold, Silver, Bronze styling based on rank classes */
.user-cell.top1 {
    color: #b9a200 !important;  /* gold */
    font-weight: 900 !important;
}
.user-cell.top2 {
    color: #c0c0c0 !important;  /* silver */
    font-weight: 700 !important;
}
.user-cell.top3 {
    color: #cd7f32 !important;  /* bronze */
    font-weight: 700 !important;
}
@media (max-width: 600px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tile.big {
    grid-column: span 1;
  }
}
@media (max-width: 600px) {
  .tile {
    padding: 16px;
    border-radius: 14px;
  }

  .tile h3 {
    font-size: 1.1rem;
  }

  .tile .tile-value {
    font-size: 1.8rem;
  }
}
@media (max-width: 600px) {
  .swipe-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
  }

  .swipe-row .tile {
    min-width: 160px;
    flex-shrink: 0;
  }
}
/* ============ STICKY HEADER ============ */
.mobile-header {
  display: none;
}

@media (max-width: 600px) {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(90deg,#1a1a2e,#0f3460);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
  }

  .mobile-header small {
    font-size: .6rem;
    opacity: .7;
    display:block;
  }
}

/* ============ TAP TO EXPAND ============ */
.tile.expandable {
  cursor: pointer;
}

.tile.expanded {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 0 25px rgba(241,196,15,.9);
}

/* ============ MOMENTUM METER ============ */
.meter {
  background:#111;
  border-radius:20px;
  overflow:hidden;
  height:12px;
  margin-top:8px;
}

.meter span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#e74c3c,#f1c40f,#2ecc71);
  width:0%;
  transition:1s;
}
.tile.wide {
  grid-column: span 2;
}
.dashboard-grid.stats {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width:600px){
  .dashboard-grid.stats {
    grid-template-columns: 1fr;
  }
}
.tile {
  min-height: 90px;
  justify-content:flex-start;
}

@media (max-width:600px){
  .tile {
    min-height: 120px;
  }
}
@media (max-width: 768px){
    #page-container{
        padding: 0 8px;
    }
    body{
        padding-top: 80px; /* smaller navbar height on mobile */
    }
}
@media (max-width: 600px){
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 12px;
    }
    .nav-links a{
        margin-left: 0;
        margin-top: 6px;
        font-size: .85rem;
    }
}
@media (max-width: 600px){
    .f1-top-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .f1-top-controls form,
    .f1-top-controls button {
        width: 100%;
        min-height: auto; /* let buttons shrink */
    }
    .f1-countdown {
        min-height: 60px;
        padding: 12px;
    }
}
.locked-list {
    list-style: none;       /* Remove bullets */
    padding-left: 0;        /* Remove default indentation */
    margin-left: 0;         /* Optional: reset left margin */
}

/* ==========================================
   HALL OF FAME PODIUM - COMPACT VERSION
========================================== */
.hof-podium-stage {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
    align-items: end;
    margin-top: 54px;
}

.hof-podium {
    background: linear-gradient(180deg, #0b0b0b, #151515);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255,215,0,.12);
    position: relative;
    font-size: 0.9rem;
}

.hof-podium.gold { transform: translateY(-20px); border: 2px solid gold; box-shadow:0 0 60px rgba(255,215,0,.3); }
.hof-podium.silver { border: 2px solid #aaa; }
.hof-podium.bronze { border: 2px solid #cd7f32; }

.hof-podium h3 { margin: 10px 0 15px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.hof-podium.gold h3 { color: gold; }
.hof-podium.silver h3 { color: #ddd; }
.hof-podium.bronze h3 { color: #cd7f32; }

.hof-podium-rank {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid gold;
}

.hof-podium-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hof-podium-row span {
    color: #eee;
}

.hof-podium-row b {
    font-weight: 700;
    color: gold;
}

.hof-podium-row .medal-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}
.f1-submit-wrapper {
    position: relative;
    width: 100%;
}

#f1-inline-message {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: -10px;
    width: 100%;
    z-index: 20;
    pointer-events: none;
}



/* Responsive for mobile */
@media (max-width: 768px){
    .hof-podium-stage { grid-template-columns: 1fr; gap: 12px; }
    .hof-podium-rank { top: -16px; width: 36px; height: 36px; font-size: 16px; }
    .hof-podium-row { font-size: 0.8rem; padding: 4px 0; }
    .hof-podium-row .medal-icon { width: 14px; height: 14px; }
}

    /* The glow box that wraps submit */
    .page-picks .f1-countdown.glow-box {
        display: flex;
        justify-content: center;
    }

    /* The inner row */
    .page-picks .f1-countdown .f1-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Wrapper that holds message + button */
    .page-picks .f1-submit-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /* Error / warning message box */
    #f1-inline-message .f1-msg {
	font-weight:900;
        text-align: center;
        max-width: 100%;
    }

    /* Button row */
    .page-picks .f1-btn-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Lock in Picks button */
    .page-picks .f1-submit-btn {
        width: auto;
        min-width: 220px;
    }
.hero-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* ================= PICKS STUFF ================= */
 .f1-countdowny{
     bacykground: linear-gradient(180deg,#0f172a,#020617);
     border: 1px solid rgba(96,165,250,.35);
     border-radius: 14px;
     padding: 8px 10px 8px;
     buox-shadow: inset 0 0 20px rgba(147,197,253,.08), 0 0 30px rgba(59,130,246,.25);
     display: inline-block;
     min-width: 350px;
margin-top:5px;
}
.f1-focused {
    animation: focusFlash 1.2s ease-out;
}
/* =======================
   SCORECARD (MOBILE)
   ======================= */

.scorecard { margin: 10px 0 16px; }

/* Header */
.scorecard-header{
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.sc-title{ font-size: 1.05rem; font-weight: 600; color:#fff; }
.sc-meta{ margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }

.pill{
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ddd;
}

/* List */
.scorecard-list{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Each card row */
.scorecard-row{
  width: 100%;
  box-sizing: border-box;

  display:grid;
  grid-template-columns: 1fr auto; /* left block | right block */
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: inherit;
}

.scorecard-row:active{ transform: scale(0.99); }

/* Left block = title line + date line */
.sc-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
/* Title line: round | name | tag */
.sc-race{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:28px;
}
/* Round pill */
.sc-round{
  font-size:.8rem;
  opacity:.8;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
}

/* Race name */
.sc-name{
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height: 1.1;
  min-width: 0;
}

/* BEST/WORST tag */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  white-space:nowrap;
  line-height:1;
  flex-shrink:0;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#ddd;
  font-size: .75rem;
}

/* Best / worst styling */
.tag-best{
  background: linear-gradient(90deg,#ffb300,#ff6a00);
  border-color: rgba(255,200,0,.35);
  color:#111;
  font-weight:700;
}

.tag-worst{
  background: rgba(255,80,80,0.10);
  border-color: rgba(255,80,80,.35);
  box-shadow: 0 0 6px rgba(255,80,80,.12);
  color:#ffd6d6;
  font-weight:700;
}

/* Date line: align under the NAME column (not under round) */
.sc-date{
  margin-top: 4px;
  font-size:.8rem;
  opacity:.8;
  line-height: 1.1;

  /* This is the key alignment fix:
     must roughly match .sc-round width + column gap.
     Adjust 54–66px if you change font sizes/padding. */
  padding-left: 58px;
}

/* Right block (medal + points + delta if you use it) */
.sc-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width: 90px; /* keeps column stable even if medal missing */
}

/* Points */
.sc-points{
  font-size:1.05rem;
  font-weight:700;
  width: 40px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* Optional delta styling (if you render it) */
.sc-delta{
  font-size:.85rem;
  font-weight:700;
  width: 44px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:.9;
}
.delta-up{ color:#77ffb0; }
.delta-down{ color:#ff7a7a; }
.delta-flat{ color:#ddd; }

/* Optional medals border hint on the card itself */
.medal-gold{ border-color: rgba(255,215,0,0.35); }
.medal-silver{ border-color: rgba(192,192,192,0.35); }
.medal-bronze{ border-color: rgba(205,127,50,0.35); }

.sc-round{
  flex:0 0 auto;   /* prevents stretching */
}

.tag{
  flex:0 0 auto;
}

.sc-date{
  margin-top:2px;
  padding-left:0;  /* IMPORTANT: remove earlier padding-left */
  line-height:1.1;
}

/* ===== SCORECARD HARD OVERRIDES ===== */

/* Card layout */
.scorecard-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
}

/* Left side must stack normally */
.sc-left{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  min-width:0 !important;
}

/* Title line: round + name + tag inline */
.sc-race{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:auto !important;
  min-width:0 !important;
}

/* Prevent these from becoming full-width bars */
.sc-round,
.sc-name,
.tag{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  flex:0 0 auto !important;
}

/* Let name shrink/ellipsis but not push layout */
.sc-name{
  flex: 0 1 190px;   /* LOCK name column width */
  min-width: 0;
  font-weight:600;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.1;
}
/* Tag stays small */
.tag{
  height:22px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}
.tag,
.tag-empty{
  width:72px;        /* fixed tag column width */
  justify-content:center;
}
.tag-empty{
  opacity:0;
  pointer-events:none;
}
/* Date is just text (not a bar) */
.sc-date{
  margin-top:2px;
  font-size:.8rem;
  opacity:.8;
}
/* Right side fixed alignment */
.sc-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-width:90px !important;
}
.online-counter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  border:1px solid rgba(255,255,255,0.12);
}

.online-active{
  background: rgba(46,204,113,0.12);
  color:#7dffb5;
}

.online-inactive{
  background: rgba(255,255,255,0.05);
  color:#888;
}

.online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2ecc71;
  box-shadow:0 0 6px rgba(46,204,113,.4);
  display:inline-block;
}

/* Optional: make dot grey when inactive */
.online-inactive .online-dot{
  background:#666;
  box-shadow:none;
}

.online-active .online-dot{ animation: pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(46,204,113,.45); }
  70%{ box-shadow:0 0 0 6px rgba(46,204,113,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

/* --- Next race: picks window progress bar --- */
.picks-progress-wrap{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  margin-top:10px;
}
.picks-progress-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(46,204,113,.95), rgba(241,196,15,.95), rgba(231,76,60,.95));
  transition: width .35s ease;
}

/* --- Urgent pulse when picks are open and not submitted --- */
.tile.urgent{
  box-shadow: 0 0 0 rgba(231,76,60,0.0);
  animation: urgentPulse 1.6s ease-in-out infinite;
}
@keyframes urgentPulse{
  0%   { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
  50%  { box-shadow: 0 0 12px rgba(231,76,60,0.25), 0 0 28px rgba(231,76,60,0.10); }
  100% { box-shadow: 0 0 0 rgba(231,76,60,0.00), 0 0 0 rgba(231,76,60,0.00); }
}

.ptg-logo{
  display:inline-flex;
  align-items:flex-end;
  gap:14px;
  position:relative;
  line-height:1;
}

/* Red “grid bars” */
.ptg-mark{
  display:inline-flex;
  gap:6px;
  transform:skewX(-12deg);
  margin-bottom:2px;
}
.ptg-bar{
  width:10px;
  height:38px;              /* tweak height here */
  border-radius:2px;
  background:linear-gradient(180deg,#ff2a2a 0%, #b10000 70%, #4a0000 100%);
  box-shadow:0 0 0 rgba(0,0,0,0); /* keep clean, not gamer-glow */
}
.ptg-bar.b1{ opacity:1; }
.ptg-bar.b2{ opacity:.92; }
.ptg-bar.b3{ opacity:.84; }

/* Wordmark */
.ptg-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:56px;           /* tweak size here */
  letter-spacing:-0.7px;
  background:linear-gradient(180deg,#f3f7ff 0%, #cfe1ff 55%, #8db7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* subtle depth like your sample */
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Underline glow */
.ptg-underline{
  position:absolute;
  left:78px;                /* start under the text (adjust if needed) */
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(64,160,255,0) 0%, rgba(64,160,255,.95) 35%, rgba(64,160,255,0) 100%);
  filter: blur(.2px);
  box-shadow: 0 0 14px rgba(64,160,255,.35);
}

/* Title row (puts info next to title) */
.tile-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}
.tile-title-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* Info icon */
.tile .info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  color:#9aa4b2;
  font-size:.85rem;
  line-height:1;
  padding:2px 4px;
  border-radius:6px;
  transition:color 0.2s ease, background 0.2s ease;
}
.tile .info:hover{ color:#ffffff; background:transparent; }

.tile .info:hover .info-tooltip,
.tile .info:focus .info-tooltip{
  display:block;
}

.tile .info{ opacity:.85; }
.tile .info:hover{ opacity:1; color:#fff; }

.f1-input-locked{
    background:#0b1020;
    color:#7f8aa3;
    cursor:not-allowed;
}

.user-name {
    cursor:pointer;
    font-weight:600;
}

.dropdown-menu {
    background:#111827;
    border:1px solid rgba(255,255,255,0.08);
}

.dropdown-item {
    color:#e5e7eb;
}

.dropdown-item:hover {
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.dropdown-item.active {
    background:#e10600;
    color:#fff;
}

/* ================= MODERN NAV PILLS ================= */

.user-group-nav{
    gap:10px;
}

.user-group-nav .nav-item{
    display:flex;
    align-items:center;
}

.nav-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    max-width:260px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    color:#e5e7eb;
    font-weight:600;
    font-size:.92rem;
    line-height:1;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    transition:all .18s ease;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

button.nav-pill{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}

.nav-pill:hover{
    color:#fff;
    border-color:rgba(147,197,253,.35);
    box-shadow:0 8px 22px rgba(0,0,0,.24);
    transform:translateY(-1px);
}

.nav-pill:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(147,197,253,.28), 0 8px 22px rgba(0,0,0,.24);
}

.nav-pill::after{
    margin-left:2px;
    opacity:.75;
}

.nav-pill-user{
    background:linear-gradient(180deg, rgba(147,197,253,.16), rgba(255,255,255,.04));
}

.nav-pill-group{
    background:linear-gradient(180deg, rgba(63,224,162,.14), rgba(255,255,255,.04));
}

.nav-pill-static{
    cursor:default;
}

.nav-pill-static:hover{
    transform:none;
}

.nav-pill-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    font-size:.95rem;
    flex:0 0 20px;
    opacity:.9;
}

.nav-pill-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    flex:0 0 24px;
    font-size:.78rem;
    font-weight:800;
    color:#000;
    background:#93C5FD;
}

.nav-pill-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ================= MODERN DROPDOWNS ================= */

.modern-dropdown{
    min-width:240px;
    margin-top:10px !important;
    padding:8px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg,#0f172a,#0b1220);
    box-shadow:0 18px 40px rgba(0,0,0,.38);
}

.modern-dropdown-header{
    padding:6px 10px 8px;
    color:#93C5FD;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.modern-dropdown-divider{
    margin:6px 0;
    border-color:rgba(255,255,255,0.08);
}

.modern-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:10px;
    padding:10px 12px;
    color:#e5e7eb;
    font-weight:600;
    transition:all .15s ease;
}

.modern-dropdown-item:hover{
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.modern-dropdown-item.active{
    background:rgba(147,197,253,.14);
    color:#fff;
}

.dropdown-item-icon{
    width:18px;
    text-align:center;
    flex:0 0 18px;
    opacity:.9;
}

.danger-item:hover{
    background:rgba(239,68,68,.12);
    color:#fecaca;
}

.invite-form input{
    font-size:.85rem;
}

.invite-form button{
    font-size:.85rem;
}

.modern-dropdown .invite-form{
    max-width:220px;
}

/* =========================================
   COLUMN HOVER GLOW (site accent color)
========================================= */

.column-hover-line{
    position:absolute;
    top:0;
    bottom:0;
    width:0;
    pointer-events:none;
    opacity:0;

    transition:
        opacity .18s ease,
        left .14s ease,
        width .14s ease;

    /* site accent glow */
    background: linear-gradient(
        to bottom,
        rgba(96,165,250,0.03),
        rgba(96,165,250,0.18),
        rgba(96,165,250,0.03)
    );

    box-shadow:
        0 0 10px rgba(96,165,250,0.35),
        inset 0 0 8px rgba(96,165,250,0.25);

    border-left:1px solid rgba(96,165,250,0.45);
    border-right:1px solid rgba(96,165,250,0.25);
}

/* =========================================
   CELL HOVER
========================================= */

.leaderboard td.race-cell{
    transition: background .15s ease;
}

.leaderboard td.race-cell:hover{
    background: rgba(96,165,250,0.08);
}

/* =========================================
   PODIUM HOVER
========================================= */

.leaderboard td.podium-gold:hover{
    background: rgba(255,215,0,0.14);
}

.leaderboard td.podium-silver:hover{
    background: rgba(192,192,192,0.14);
}

.leaderboard td.podium-bronze:hover{
    background: rgba(205,127,50,0.14);
}

.dropdown-item-icon{
    width:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:10px;
    opacity:.85;
}

.dropdown-item-icon i{
    font-size:18px;
}

/* ================================
   Modern Navbar Dropdown
================================ */

.dropdown-menu{
    background: linear-gradient(
        180deg,
        rgba(10,18,40,0.95),
        rgba(8,14,30,0.96)
    );

    border:1px solid rgba(59,130,246,0.18);
    border-radius:16px;

    padding:10px;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.55),
        0 0 12px rgba(59,130,246,.15);

    min-width:220px;
}

/* section header */

.dropdown-menu .dropdown-header{
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.08em;

    color:#7da2ff;

    padding:6px 12px 4px;
    text-transform:uppercase;
}

/* divider */

.dropdown-menu .dropdown-divider{
    border-color:rgba(255,255,255,.06);
    margin:8px 0;
}

/* ================================
   Dropdown Items
================================ */

.modern-dropdown-item{
    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 12px;
    border-radius:10px;

    color:#d6dbe6;
    font-weight:500;

    transition:all .18s ease;
}

/* icon */

.dropdown-item-icon{
    width:22px;
    display:flex;
    align-items:center;
    justify-content:center;

    opacity:.8;
}

.dropdown-item-icon i{
    font-size:18px;
}

/* hover */

.modern-dropdown-item:hover{
    background:rgba(59,130,246,.10);
    color:#ffffff;

    box-shadow:
        inset 0 0 0 1px rgba(59,130,246,.18);
}

/* active page */

.modern-dropdown-item.active{
    background:rgba(59,130,246,.18);
    color:#ffffff;

    box-shadow:
        inset 0 0 0 1px rgba(59,130,246,.28);
}

.dropdown-item.active .dropdown-item-icon i{
    color:#60a5fa;
}

.dropdown-item-icon{
    width:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:10px;
}

.dropdown-item-icon i{
    font-size:18px;
    opacity:.75;
}

.dropdown-item.active .dropdown-item-icon i{
    color:#60a5fa;
    opacity:1;
}
.nav-pill-group .nav-pill-icon i{
    color:#93c5fd !important;
    font-size:16px;
    line-height:1;
    opacity:1 !important;
    text-shadow:0 0 6px rgba(37,99,235,.25);
}

/* ===============================
   RECORD LIST STYLE
================================ */

.hof-record-list{
    max-width:600px;
}

.hof-record-row{
    display:flex;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hof-record-icon{
    width:40px;
    font-size:1.2rem;
    text-align:center;
}

.hof-record-name{
    flex:1;
    font-weight:500;
}

.hof-record-value{
    font-weight:600;
    color:#d1d5db;
}

.hof-record-list{
    max-width: 700px;
    margin-bottom: 28px;
}

.hof-record-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hof-record-icon{
    width:40px;
    flex:0 0 40px;
    text-align:center;
    font-size:1.15rem;
}

.hof-record-name{
    flex:1;
    font-weight:600;
    color:#fff;
}

.hof-record-value{
    font-weight:700;
    color:#d1d5db;
}

.hof-emoji{
    font-size:1.8rem;
    margin-bottom:6px;
    line-height:1;
}

.hof-emoji-hot{
    filter: drop-shadow(0 0 6px rgba(239,68,68,.55));
}

.hof-emoji-rocket{
    filter: drop-shadow(0 0 6px rgba(59,130,246,.55));
}

/* =================================
   HOF HIGHLIGHT RECORDS
================================= */

.hof-highlight-row{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap:20px;
    margin-bottom:28px;
}

.hof-highlight{
    text-align:center;
}

.hof-highlight-title{
    font-size:.85rem;
    letter-spacing:.04em;
    color:#9ca3af;
    margin-bottom:6px;
    text-transform:uppercase;
}

/* =========================================
   FALLBACK RECORDS - IMPROVED LOOK & FEEL
========================================= */

.hof-featured-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    margin:18px 0 28px;
}

.hof-feature-card{
    background:linear-gradient(180deg,#101828,#0b1220);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:22px 18px;
    text-align:center;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.hof-feature-icon{
    font-size:1.9rem;
    line-height:1;
    margin-bottom:10px;
}

.hof-feature-hot{
    filter:drop-shadow(0 0 8px rgba(239,68,68,.45));
}

.hof-feature-rocket{
    filter:drop-shadow(0 0 8px rgba(59,130,246,.45));
}

.hof-feature-time{
    filter:drop-shadow(0 0 8px rgba(16,185,129,.45));
}

.hof-feature-label{
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#93C5FD;
    margin-bottom:8px;
}

.hof-feature-name{
    font-size:1.18rem;
    font-weight:700;
    color:#fff;
    margin-bottom:4px;
}

.hof-feature-value{
    font-size:1.02rem;
    font-weight:800;
    color:#f8fafc;
}

.hof-feature-sub{
    margin-top:6px;
    font-size:.82rem;
    color:rgba(255,255,255,.62);
}

.hof-record-sections{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-top:4px;
}

.hof-record-card{
    background:linear-gradient(180deg,#0f172a,#0b1220);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:16px 16px 10px;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
}

.hof-record-card-title{
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#93C5FD;
    margin-bottom:10px;
}

.hof-record-list{
    margin:0;
}

.hof-record-row{
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:10px;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.hof-record-row:last-child{
    border-bottom:none;
}

.hof-record-icon{
    width:34px;
    text-align:center;
    font-size:1rem;
    opacity:.95;
}

.hof-rank-number{
    font-weight:800;
    color:#cbd5e1;
}

.hof-record-name{
    min-width:0;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hof-record-value{
    font-weight:800;
    color:#dbe4f0;
    white-space:nowrap;
}

@media (max-width: 991.98px){
    .hof-featured-grid{
        grid-template-columns:1fr;
    }

    .hof-record-sections{
        grid-template-columns:1fr;
    }
}