* {
    box-sizing: border-box;
    font-family: Inter, system-ui, sans-serif;
}

.h2h-grid {
    max-width: 1400px;
    margin: 30px auto;
}
.driver a {
    color: inherit;          
    text-decoration: none; 
}
.driver a:hover {
    text-decoration: underline;
    opacity: 0.85;
}
.grid-header,
.team-row {
    display: grid;
    grid-template-columns:
        360px   
        1.5fr    
        120px    
        120px    
        1.5fr
        20px
        ;   
    align-items: center;
    padding: 18px 24px;
    background: #f0ebeb;
    border-radius: 12px;
    margin-bottom: 12px;
}
.team-row strong {
    font-weight: 800;
}

.h2h-mini {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}
.grid-header {
    display: grid;
    grid-template-columns:
        360px
        1.5fr
        120px
        120px
        1.5fr
        20px;
    align-items: center;
    padding: 16px 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    border-bottom: 2px solid #ccc;
    margin-bottom: 10px;
}

.team-row {
    display: grid;
    grid-template-columns: 360px 1fr; 
    padding: 16px 20px;
    background: #f0ebeb;
    border-radius: 12px;
    gap: 12px;
}
.subgrid {
    display: grid;
    gap: 8px;
}
.team-subgrid {
    display: grid;
    gap: 10px;
}
.subrow {
    display: grid;
    grid-template-columns: 1.5fr 120px 120px 1.5fr 20px; 
    align-items: center;
    gap: 10px;
}
.team {
    font-weight: 800;
    font-size: 18px;
    color: #3B3939;
}

.driver {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.driver a {
    color: #1f1f1f;
    text-decoration: none;
}

.driver a:hover {
    text-decoration: underline;
}

.h2h {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}
.avg-gap {
    text-align: center;
    font-weight: 700;
}

.avg-gap.win { color: #2ecc71; }
.avg-gap.lose { color: #e74c3c; }
.h2h.win { color: #2ecc71; }
.h2h.lose { color: #e74c3c; }

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
}

.dot.win { background: #2ecc71; }
.dot.lose { background: #e74c3c; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

.note {
    margin-top: 12px;
    font-size: 12px;
    color: #777;
}
.races {
    text-align: center;
    font-weight: 700;
}
.dot.draw { background: #999; }
.h2h.draw { color: #999; }
.actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;     
}

.actions a {
    display: inline-flex; 
}

.actions button {
    padding: 4px 6px;
    line-height: 1;
}

@media (max-width: 992px) {
    .grid-header {
        display: none;
    }

    .team-row {
        display: block; 
        padding: 15px;
        margin-bottom: 25px;
    }

    .team {
        display: block;
        text-align: center;
        font-size: 20px;
        border-bottom: 2px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .subgrid {
        gap: 20px;
    }

    .subrow {
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: 
            "d1 d2"
            "q r"
            "act act";
        gap: 12px;
        background: #fff;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid #e0dedb;
    }

    .subrow .driver.left { 
        grid-area: d1; 
        justify-content: flex-start;
    }
    .subrow .driver.right { 
        grid-area: d2; 
        justify-content: flex-end; 
        text-align: right;
    }

    .h2h-mini {
        font-size: 16px;
        padding: 8px;
        background: #f9f9f9;
        border-radius: 4px;
    }
    
    .h2h-mini:nth-child(2) { grid-area: q; } 
    .h2h-mini:nth-child(3) { grid-area: r; }

    .h2h-mini::before {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        color: #888;
        margin-bottom: 4px;
    }
    .h2h-mini:nth-child(2)::before { content: "Qualifying"; }
    .h2h-mini:nth-child(3)::before { content: "Race"; }

    .actions {
        grid-area: act;
        width: 100%;
        border-top: 1px solid #eee;
        padding-top: 10px;
        justify-content: space-around;
    }
    
    .actions button {
        width: 100%;
        padding: 10px; 
    }
}

@media (max-width: 480px) {
    .subrow {
        grid-template-columns: 1fr;
        grid-template-areas: "d1" "d2" "q" "r" "act";
        text-align: center;
    }
    .subrow .driver { justify-content: center !important; }
}
  .team-compare td a {
    font-size: 16px;
    font-weight: 600;
  }
  .team-compare td span {
    font-size: 18px;
    font-weight: bold;
  }
.team-compare {
    margin: 0 auto;
    width: auto;
    max-width: 1000px;
}

.team-compare td {
    vertical-align: middle;
}

.team-compare td.pilots {
    text-align: center;   
    font-size: 16px;
}

.team-compare td.results {
    text-align: right;    
    font-size: 18px;
    font-weight: bold;
}


.team-compare a {
    font-weight: bold;
    text-decoration: none;
}

.team-name {
    display: block;
    text-align: center;
    font-size: 20px;
    margin-bottom: 5px;
    color: #0088cc; 
}

.team-compare td .text-success,
.team-compare td .text-danger {
    font-size: 18px; 
    font-weight: bold;
}

    .team-name {
    margin: 0 0 4px 0;        
    padding-bottom: 2px;    
    border-bottom: 3px solid #0088cc; 
    display: inline-block;   
  }
  
  .team-name.fullwidth {
    display: block;
    width: 100%;
  }
.centered-panel {
    width: 75%;            
    max-width: 1400px;     
    min-width: 900px;      
    margin: 0 auto;        
    padding-left: 20px;
    padding-right: 20px;
  }


  .centered-panel .nav-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .centered-panel .tab-content {
    width: 100%;
  }


  .centered-panel .team-compare {
    width: 100%;
    margin: 0;
  }

  .centered-panel .team-compare td,
  .centered-panel .team-compare th {
    padding: 8px 10px;
    vertical-align: middle;
  }
.centered-table {
  width: 70%;
  max-width: 1100px;   
  margin: 0 auto;      
  table-layout: auto;  
}

@media (max-width: 992px) {
  .centered-table {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

  @media (max-width: 1200px) {
    .centered-panel {
      width: 85%;
      min-width: 700px;
    }
  }

  @media (max-width: 992px) {
    .centered-panel {
      width: 95%;
      min-width: 0;
      padding-left: 10px;
      padding-right: 10px;
    }
    .centered-panel .team-compare td,
    .centered-panel .team-compare th {
      padding: 8px 6px;
    }
  }

  @media (max-width: 576px) {
    .centered-panel {
      width: 100%;
      padding-left: 8px;
      padding-right: 8px;
    }
  }
  .h2h-grid1 {
    max-width: 1400px;
    margin: 30px auto;
    --col-team: 400px;
    --col-driver1: 1.5fr;
    --col-gap: 180px;
    --col-driver2: 1.5fr;
    --col-races: 80px;
}

.grid-header1,
.team-row1 {
    display: grid;
    grid-template-columns: var(--col-team) var(--col-driver1) var(--col-gap) var(--col-driver2) var(--col-races);
    align-items: center;
    padding: 16px 22px;
    column-gap: 20px;
}

.grid-header1 {
  padding: 18px 24px;
    font-weight: 700;
    text-transform: uppercase;
    background: #f0ebeb;
    color: #555;
    margin-bottom: 12px;
    border-radius: 12px;
}

.team-row1 {
    background: #f0ebeb;
    border-radius: 12px;
    margin-bottom: 14px;
}

.team-subgrid1 {
    grid-column: 2 / span 4; 
    display: grid;
    gap: 15px;
}

.subrow1 {
    display: grid;
    grid-template-columns: var(--col-driver1) var(--col-gap) var(--col-driver2) var(--col-races);
    align-items: center;
    column-gap: 20px; 
}
.grid-header1 span:nth-child(3) {
    text-align: center;
}

.team1 {
    font-weight: 800;
    font-size: 18px;
}

.driver1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.avg-gap1 {
    text-align: center;
    font-weight: 700;
   
    padding: 4px 0;
}


.avg-gap1.win, .dot.win { color: #2ecc71; background-color: #2ecc71; }
.avg-gap1.lose, .dot.lose { color: #e74c3c; background-color: #e74c3c; }

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.races1 {
    font-weight: 700;
}
@media (max-width: 850px) {
 
    .grid-header1 {
        display: none;
    }

    .team-row1 {
        display: flex;
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }

    .team1 {
        font-size: 18px;
        text-align: center;
        border-bottom: 2px solid #ddd;
        padding-bottom: 10px;
        width: 100%;
    }

    .team-subgrid1 {
        grid-column: 1 / -1; 
        width: 100%;
    }

    .subrow1 {
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: 
            "d1 d2"
            "gap races";
        gap: 10px;
        background: #fff;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .subrow1 .driver1:first-child { grid-area: d1; justify-content: flex-start; }
    .subrow1 .driver1:nth-child(3) { grid-area: d2; justify-content: flex-end; }
    .subrow1 .avg-gap1 { 
        grid-area: gap; 
        text-align: left; 
        font-size: 14px;
        border-top: 1px solid #eee;
        padding-top: 8px;
    }
    .subrow1 .races1 { 
        grid-area: races; 
        text-align: right; 
        font-size: 14px;
        border-top: 1px solid #eee;
        padding-top: 8px;
    }

    .avg-gap1::before { content: "Gap: "; color: #888; font-weight: 400; }
    .races1::before { content: "Races: "; color: #888; font-weight: 400; }
}