@import "base.css";
@import "layout.css";
@import "components.css";
@import "cards.css";
@import "buttons.css";
@import "comparison.css";
@import "badges.css";
@import "fighter.css";
@import "events.css";
@import "rankings.css";
@import "studio.css";

/* ==========================================================
   Fight Lab v0.9
   Main Stylesheet
========================================================== */

/* ==========================================================
   Base
========================================================== */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #111;
    color: white;
}

.container {
    width: calc(100% - 48px);
    max-width: none;
    margin: 24px auto;
    box-sizing: border-box;
}

/* ==========================================================
   Header
========================================================== */

header {
    background: #c1121f;
    padding: 20px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

header h1 {
    margin: 0;
    letter-spacing: 1px;
}

/* ==========================================================
   Navigation
========================================================== */

nav {
    background: #1d1d1d;
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 15px;
    border-bottom: 1px solid #333;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color .2s;
}

nav a:hover {
    color: #ffcc00;
}

/* ==========================================================
   Dashboard Layout
========================================================== */

.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 900px) {

    .dashboard {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   Cards
========================================================== */

.card {
    background: #1b1b1b;
    border: 1px solid #2d2d2d;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    transition: transform .2s ease, box-shadow .2s ease;
    margin-bottom: 20px;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

.card h1 {
    margin: 0 0 6px;
}

.card h2 {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c1121f;
    color: white;
    font-size: 1.35rem;
}

.card h3 {
    margin: 0 0 18px;
    color: #aaaaaa;
}

.card p {
    margin: 8px 0;
    line-height: 1.5;
}

/* ==========================================================
   Comparison Cards
========================================================== */

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 30px;
}

.fighter-card {
    background: #181818;
    border: 1px solid #2d2d2d;
    border-radius: 10px;
    padding: 25px;
}

.fighter-card h2 {
    color: #ffcc00;
    text-align: center;
    margin-bottom: 20px;
}

.fighter-card p {
    margin: 10px 0;
}

/* ==========================================================
   Forms
========================================================== */

input[type=text],
input[type=date],
input[type=number],
select,
textarea {

    width: 100%;
    padding: 12px;
    font-size: 16px;
    background: #2a2a2a;
    color: white;
    border: 1px solid #444;
    border-radius: 6px;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

/* ==========================================================
   Buttons
========================================================== */

button {
    background: #c1121f;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: .2s;
}

button:hover {
    background: #ef233c;
    transform: translateY(-1px);
}

/* ==========================================================
   Tables
========================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

th {
    background: #c1121f;
    color: white;
    text-align: left;
    padding: 14px;
}

td {
    padding: 14px;
    border-bottom: 1px solid #333;
}

tbody tr:nth-child(even) {
    background: #1b1b1b;
}

tbody tr:hover {
    background: #292929;
}

.fighter-table {
    width: 100%;
    border-collapse: collapse;
}

.fighter-table th {
    background: #c1121f;
    color: white;
    padding: 10px;
}

.fighter-table td {
    padding: 10px;
    border-bottom: 1px solid #333;
}

.fighter-table tr:last-child td {
    border-bottom: none;
}

.fighter-table tr:hover {
    background: #252525;
}

/* ==========================================================
   Last Five Results
========================================================== */

.last-five {
    display: flex;
    gap: 8px;
}

.result-box {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    color: white;
}

.result-win {
    background: #16a34a;
}

.result-loss {
    background: #dc2626;
}

.result-draw {
    background: #f59e0b;
}

.result-none {
    background: #6b7280;
}

/* ==========================================================
   Links
========================================================== */

a {
    color: #ffcc00;
    text-decoration: none;
}

a:hover {
    color: white;
}

/* ==========================================================
   Misc
========================================================== */

hr {
    border: none;
    border-top: 1px solid #333;
    margin: 22px 0;
}
/* ==========================================================
   Fight History
========================================================== */

.fight-history-card {

    background: #222;

    border: 1px solid #333;

    border-radius: 10px;

    padding: 18px;

    margin-bottom: 18px;

}

.fight-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.fight-result {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: bold;

    color: white;

}

.fight-result.win {

    background: #16a34a;

}

.fight-result.loss {

    background: #dc2626;

}

.fight-result.draw {

    background: #ca8a04;

}
/* ==========================================================
   Fighter Profile
========================================================== */

/* ==========================================================
   Fighter Hero
========================================================== */

.fighter-profile-header{

    display:flex;

    align-items:center;

    gap:35px;

    margin-bottom:35px;

}

.fighter-photo{

    width:260px;

    height:340px;

    object-fit:contain;

    object-position:top center;

    background:#111;

    border:3px solid #c1121f;

    border-radius:14px;

    box-shadow:0 10px 25px rgba(0,0,0,.45);

    flex-shrink:0;

}

.fighter-profile-info{

    flex:1;

}

.fighter-profile-info h1{

    margin:0;

    font-size:48px;

    color:white;

}

.fighter-profile-info h3{

    margin:12px 0 18px;

    color:#bbbbbb;

    font-size:24px;

    font-style:italic;

}

.division-badge{

    display:inline-block;

    padding:10px 22px;

    background:#c1121f;

    border-radius:999px;

    color:white;

    font-size:15px;

    font-weight:bold;

    letter-spacing:1px;

}

@media(max-width:900px){

    .fighter-profile-header{

        flex-direction:column;

        text-align:center;

    }

    .fighter-photo{

        width:220px;

        height:300px;

    }

}

/* ==========================================================
   Fighter Profile Stat Grid
========================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin:10px 0 30px;

}

.stat-box{

    background:#181818;

    border:1px solid #2b2b2b;

    border-radius:12px;

    padding:18px;

    text-align:center;

    transition:.2s;

}

.stat-box:hover{

    border-color:#c1121f;

    transform:translateY(-2px);

}

.stat-label{

    display:block;

    color:#999;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.stat-value{

    display:block;

    color:white;

    font-size:28px;

    font-weight:bold;

}

@media(max-width:900px){

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Resume Score
========================================================== */

.resume-score {

    text-align: center;

    margin: 25px 0;

}

.resume-number {

    font-size: 72px;

    font-weight: bold;

    color: #ffcc00;

    line-height: 1;

}

.resume-grade {

    font-size: 32px;

    font-weight: bold;

    color: white;

    margin-top: 10px;

}

.resume-score + hr {

    margin-top: 25px;

}
/* ==========================================================
   Application Layout (Milestone 3)
========================================================== */

body {

    margin: 0;

    background: #111;

    color: white;

    font-family: Arial, Helvetica, sans-serif;

}

.app-layout {

    display: flex;

    min-height: 100vh;

}

.sidebar {

    width: 240px;

    background: #181818;

    border-right: 1px solid #333;

    position: fixed;

    left: 0;

    top: 0;

    bottom: 0;

    overflow-y: auto;

}

.logo {

    padding: 30px 20px;

    text-align: center;

    border-bottom: 1px solid #333;

}

.logo h1 {

    margin: 0;

    color: #ffffff;

}

.logo p {

    margin-top: 10px;

    color: #aaaaaa;

    font-size: .9rem;

}

.sidebar-nav {

    display: flex;

    flex-direction: column;

    padding: 15px;

}

.sidebar-nav a {

    color: white;

    text-decoration: none;

    padding: 14px 16px;

    margin-bottom: 8px;

    border-radius: 8px;

    transition: .2s;

    font-weight: bold;

}

.sidebar-nav a:hover {

    background: #c1121f;

}

.main-content {

    margin-left: 240px;

    padding: 35px;

    width: calc(100% - 240px);

    box-sizing: border-box;

}

@media (max-width: 900px) {

    .app-layout {

        flex-direction: column;

    }

    .sidebar {

        position: relative;

        width: 100%;

        border-right: none;

        border-bottom: 1px solid #333;

    }

    .main-content {

        margin-left: 0;

        width: 100%;

        padding: 20px;

    }

}

/* ==========================================================
   Rankings Pro (Fight Lab v0.8)
========================================================== */

.resume-badge {

    display: inline-block;

    min-width: 55px;

    padding: 8px 12px;

    border-radius: 8px;

    font-weight: bold;

    font-size: 18px;

    text-align: center;

    color: white;

}

.resume-badge.elite {

    background: #16a34a;

}

.resume-badge.excellent {

    background: #2563eb;

}

.resume-badge.good {

    background: #ca8a04;

}

.resume-badge.average {

    background: #ea580c;

}

.resume-badge.low {

    background: #dc2626;

}

/* ----------------------------- */

.grade-badge {

    display: inline-block;

    min-width: 50px;

    padding: 6px 12px;

    background: #2d2d2d;

    border: 1px solid #555;

    border-radius: 999px;

    font-weight: bold;

    text-align: center;

}

/* ----------------------------- */

.scout {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: .9rem;

    font-weight: bold;

}

.scout.elite {

    background: #16a34a;

    color: white;

}

.scout.advanced {

    background: #2563eb;

    color: white;

}

.scout.basic {

    background: #ca8a04;

    color: white;

}

.scout.database {

    background: #444;

    color: #ddd;

}

/* ----------------------------- */

.fighter-table td {

    vertical-align: middle;

}

.fighter-table td:first-child {

    font-size: 22px;

    font-weight: bold;

    width: 70px;

}

.fighter-table tbody tr {

    transition: .15s;

}

.fighter-table tbody tr:hover {

    transform: scale(1.01);

}

/* ----------------------------- */

.fighter-table small {

    color: #888;

    font-size: .85rem;

}

/* ==========================================
   Rankings Toolbar
========================================== */

.ranking-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ranking-toolbar input,
.ranking-toolbar select {
    min-width: 180px;
}

.ranking-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-weight: bold;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================
   Professional Pagination
========================================================== */

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:30px;

    flex-wrap:wrap;

}

.pagination a,
.pagination .current-page{

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:#2b2b2b;

    color:white;

    font-weight:bold;

    text-decoration:none;

    transition:.2s;

}

.pagination a:hover{

    background:#c1121f;

}

.current-page{

    background:#ffcc00 !important;

    color:#111 !important;

}

/* ==========================================================
   Fight Lab Performance Card
========================================================== */

.card-subtitle{

    color:#aaa;

    margin-top:-8px;

    margin-bottom:20px;

    font-size:14px;

}

.performance-item{

    margin-bottom:24px;

}

.performance-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:8px;

}

.performance-score{

    font-size:20px;

    font-weight:bold;

    color:#ffcc00;

}

.performance-bar{

    width:100%;

    height:12px;

    background:#2b2b2b;

    border-radius:8px;

    overflow:hidden;

}

.performance-fill{

    height:100%;

    background:linear-gradient(
        90deg,
        #c1121f,
        #ffcc00
    );

}

.performance-tier{

    margin-top:6px;

    font-size:13px;

    color:#bbb;

}

/* ==========================================================
   Fight Lab Hero Card
========================================================== */

.hero-card{

    text-align:center;

}

.hero-title{

    font-size:22px;

    font-weight:bold;

    color:#ffcc00;

    margin-bottom:15px;

}

.hero-score{

    font-size:72px;

    font-weight:900;

    color:white;

    line-height:1;

}

.hero-grade{

    margin-top:10px;

    font-size:28px;

    font-weight:bold;

    color:#ffcc00;

}

.hero-scout{

    margin-top:8px;

    font-size:18px;

    color:#cccccc;

}

.hero-record{

    display:flex;

    justify-content:space-around;

    text-align:center;

    margin:20px 0;

}

.hero-record strong{

    color:#ffcc00;

}

.hero-tier{

    margin-top:20px;

    padding:14px;

    border-radius:8px;

    font-weight:bold;

    font-size:18px;

}

.hero-tier.elite{

    background:#5b3cc4;

}

.hero-tier.champion{

    background:#c1121f;

}

.hero-tier.contender{

    background:#d97706;

}

.hero-tier.ranked{

    background:#2563eb;

}

.hero-tier.solid{

    background:#15803d;

}

.hero-tier.prospect{

    background:#555;

}

/* =====================================================
   Fight Lab Division Navigation
===================================================== */

.division-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.division-tabs a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    color: #ddd;
    background: #1b1b1b;
    border: 1px solid #333;
    transition: all .2s ease;
}

.division-tabs a:hover {
    background: #2b2b2b;
    border-color: #c1121f;
    color: white;
    transform: translateY(-2px);
}

.division-tabs a.active {
    background: #c1121f;
    color: white;
    border-color: #c1121f;
    box-shadow: 0 0 12px rgba(193,18,31,.35);
}

@media (max-width: 768px) {

    .division-tabs {
        gap: 8px;
    }

    .division-tabs a {
        padding: 8px 14px;
        font-size: 13px;
    }

}

/* ==========================================================
   Rankings Dashboard
========================================================== */

.ranking-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.ranking-stat {
    background: #1b1b1b;
    border: 1px solid #2d2d2d;
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    transition: .2s;
}

.ranking-stat:hover {
    transform: translateY(-2px);
    border-color: #c1121f;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

.ranking-value {
    font-size: 34px;
    font-weight: 800;
    color: #ffcc00;
    line-height: 1;
    margin-bottom: 8px;
}

.ranking-label {
    color: #bbbbbb;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

@media (max-width: 900px) {

    .ranking-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .ranking-dashboard {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   Fight Lab Division Badge
========================================================== */

.division-badge {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    background: #c1121f;

    color: white;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: .4px;

    white-space: nowrap;

}

/* ==========================================================
   Champion Banner
========================================================== */

.champion-banner {

    text-align: center;

    background: linear-gradient(135deg, #7b1113, #c1121f);

    color: white;

    border: 2px solid gold;

    margin-bottom: 25px;

}

.champion-banner h2 {

    margin-bottom: 8px;

    font-size: 32px;

    letter-spacing: 1px;

}

.champion-banner p {

    margin: 0;

    font-size: 18px;

    color: #f5f5f5;

}

/* ==========================================
   Fight Hub
========================================== */

.fight-card {

    margin-bottom: 30px;

}

.fight-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    text-align: center;

}

.fight-card-header h2 {

    margin: 0;

}

.fight-vs {

    font-size: 34px;

    font-weight: bold;

    color: #c1121f;

}

/* ==========================================================
   Fight Lab Event Hub Pro
========================================================== */

.event-matchup {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    gap: 30px;

    align-items: center;

    margin-bottom: 25px;

}

.corner {

    text-align: center;

}

.corner h2 {

    margin-bottom: 10px;

}

.corner .record {

    color: #bbbbbb;

    font-size: 14px;

    margin-bottom: 15px;

}

.corner-stat {

    background: #222;

    border: 1px solid #333;

    border-radius: 8px;

    padding: 12px;

    margin-bottom: 10px;

}

.corner-stat-label {

    color: #999;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.corner-stat-value {

    margin-top: 6px;

    font-size: 24px;

    font-weight: bold;

    color: #ffcc00;

}

.vs-column {

    text-align: center;

}

.vs-circle {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: #c1121f;

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    font-weight: bold;

    margin: auto;

}

.prediction-banner {

    margin-top: 20px;

    padding: 20px;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #191919,
        #2a2a2a
    );

    border: 1px solid #333;

    text-align: center;

}

.confidence-bar {

    width: 100%;

    height: 14px;

    background: #333;

    border-radius: 999px;

    overflow: hidden;

    margin: 15px 0;

}

.confidence-fill {

    height: 100%;

    background: linear-gradient(
        90deg,
        #c1121f,
        #ffcc00
    );

}

@media (max-width:900px){

    .event-matchup{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Fighter Headshots
========================================================== */

.fighter-info{

    display:flex;

    align-items:center;

    gap:16px;

}

.fighter-headshot{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #c1121f;

    background:#1b1b1b;

    box-shadow:0 0 12px rgba(0,0,0,.35);

    transition:.2s;

    flex-shrink:0;

}

.fighter-headshot:hover{

    transform:scale(1.08);

    border-color:#ffcc00;

}

.fighter-info strong{

    font-size:17px;

    color:white;

}

.fighter-info small{

    display:block;

    margin-top:4px;

    color:#9ca3af;

    font-size:13px;

    letter-spacing:.4px;

}

/* ==========================================================
   Fighter Hero Pro
========================================================== */

.fighter-hero-stats{

    display:flex;

    gap:18px;

    margin-top:30px;

    flex-wrap:wrap;

}

.hero-stat{

    background:#202020;

    border:1px solid #333;

    border-radius:12px;

    padding:18px 24px;

    min-width:140px;

    text-align:center;

    transition:.2s;

}

.hero-stat:hover{

    border-color:#c1121f;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.hero-label{

    display:block;

    font-size:12px;

    color:#999;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.hero-value{

    display:block;

    font-size:26px;

    font-weight:800;

    color:#ffcc00;

}

.fighter-stat-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:35px;

}

.fighter-stat-card{

    background:#1d1d1d;

    border:1px solid #333;

    border-radius:12px;

    padding:22px;

    text-align:center;

    transition:.2s;

}

.fighter-stat-card:hover{

    border-color:#c1121f;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(0,0,0,.35);

}

.fighter-stat-title{

    color:#999;

    text-transform:uppercase;

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:10px;

}

.fighter-stat-value{

    font-size:28px;

    font-weight:bold;

    color:white;

}

@media(max-width:900px){

    .fighter-hero-stats{

        justify-content:center;

    }

    .fighter-stat-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    .fighter-stat-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Rankings Pro
========================================================== */

.rank-gold{

    background:linear-gradient(
        90deg,
        rgba(255,215,0,.18),
        rgba(255,215,0,.05)
    ) !important;

}

.rank-silver{

    background:linear-gradient(
        90deg,
        rgba(192,192,192,.18),
        rgba(192,192,192,.05)
    ) !important;

}

.rank-bronze{

    background:linear-gradient(
        90deg,
        rgba(205,127,50,.18),
        rgba(205,127,50,.05)
    ) !important;

}

.fighter-table tbody tr{

    transition:.2s;

}

.fighter-table tbody tr:hover{

    transform:scale(1.01);

}

/* ==========================================================
   Rankings Pro
========================================================== */

.fighter-info{

    display:flex;

    align-items:center;

    gap:18px;

    color:white;

    text-decoration:none;

}

.fighter-info:hover{

    color:white;

}

.fighter-headshot{

    width:64px;

    height:64px;

    border-radius:50%;

    object-fit:cover;

    object-position:top center;

    border:3px solid #333;

    background:#111;

    transition:.2s;

}

.fighter-table tbody tr:hover .fighter-headshot{

    border-color:#c1121f;

    transform:scale(1.08);

}

.fighter-info strong{

    display:block;

    font-size:18px;

}

.fighter-info small{

    color:#999;

    font-size:13px;

}

.resume-badge{

    display:inline-block;

    min-width:72px;

    padding:8px 14px;

    border-radius:999px;

    background:#c1121f;

    color:white;

    font-weight:bold;

}

.grade-badge{

    display:inline-block;

    min-width:55px;

    padding:8px 12px;

    border-radius:999px;

    background:#333;

    color:#ffcc00;

    font-weight:bold;

}

.scout{

    display:inline-block;

    min-width:95px;

    padding:8px 12px;

    border-radius:999px;

    font-weight:bold;

}

.scout.elite{

    background:#6f42c1;

    color:white;

}

.scout.contender{

    background:#c1121f;

    color:white;

}

.scout.prospect{

    background:#198754;

    color:white;

}

.scout.veteran{

    background:#0d6efd;

    color:white;

}

.rank-cell{

    font-size:24px;

    font-weight:bold;

    text-align:center;

}

/* ==========================================================
   Fight Lab Event Center v1.0
========================================================== */

.event-fighter{

    flex:1;
    text-align:center;

}

.event-headshot{

    width:180px;
    height:240px;
    object-fit:contain;
    object-position:top center;

    background:#111;

    border:3px solid #c1121f;
    border-radius:14px;

    box-shadow:0 10px 25px rgba(0,0,0,.45);

    margin-bottom:18px;

    transition:.2s;

}

.event-headshot:hover{

    transform:scale(1.03);

    border-color:#ffcc00;

}

.event-fighter h2{

    margin:12px 0 8px;

    border:none;

    font-size:28px;

}

.fight-card-header{

    display:grid;

    grid-template-columns:1fr 220px 1fr;

    align-items:center;

    gap:40px;

}

.fight-vs{

    text-align:center;

}

.fight-vs h1{

    font-size:54px;

    color:#c1121f;

    margin:0;

}

.fight-vs .resume-badge{

    margin-top:15px;

    display:inline-block;

}

.fight-card{

    transition:.2s;

}

.fight-card:hover{

    border-color:#c1121f;

    box-shadow:0 12px 30px rgba(0,0,0,.45);

}

.comparison-grid{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:15px;

}

.comparison-grid button{

    width:100%;

}

@media(max-width:1000px){

    .fight-card-header{

        grid-template-columns:1fr;

        gap:25px;

    }

    .event-headshot{

        width:220px;
        height:300px;

    }

}

/* ==========================================================
   Fight Lab Event Center v1.1
========================================================== */

.event-record{

    margin:8px 0 14px;

    color:#d5d5d5;

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

}

.fight-card{

    border:2px solid #2b2b2b;

    border-radius:18px;

    overflow:hidden;

}

.fight-card:hover{

    border-color:#c1121f;

    transform:translateY(-2px);

    transition:.2s;

}

.fight-card-header{

    align-items:flex-start;

}

.event-headshot{

    width:220px;

    height:300px;

}

.fight-vs{

    padding-top:25px;

}

.fight-vs h1{

    font-size:64px;

    margin-bottom:20px;

}

.fight-pick-title{

    color:#ffcc00;

    font-size:18px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:12px;

}

.fight-pick-name{

    font-size:34px;

    font-weight:900;

    line-height:1.15;

    margin-bottom:18px;

}

.confidence-badge{

    display:inline-block;

    min-width:120px;

    padding:14px 24px;

    border-radius:30px;

    font-size:30px;

    font-weight:900;

    color:white;

}

.confidence-high{

    background:#16a34a;

}

.confidence-medium{

    background:#ca8a04;

}

.confidence-low{

    background:#ea580c;

}

.division-badge{

    margin-top:12px;

}

.resume-badge{

    margin-top:14px;

}

.grade-badge{

    margin-top:10px;

}

.comparison-grid button{

    font-size:16px;

    font-weight:700;

    padding:14px;

}

.comparison-grid button:hover{

    transform:translateY(-2px);

}

/* ==========================================================
   Fight Preview Comparison Bars
========================================================== */

progress{

    width:100%;

    height:18px;

    border-radius:10px;

    overflow:hidden;

}

progress::-webkit-progress-bar{

    background:#2b2b2b;

    border-radius:10px;

}

progress::-webkit-progress-value{

    background:#c1121f;

    border-radius:10px;

}

progress::-moz-progress-bar{

    background:#c1121f;

}

/* ==========================================================
   Tale of the Tape
========================================================== */

.winner-stat{

    font-weight:bold;

    color:#22c55e;

    font-size:18px;

}

/* ==========================================================
   Event Header
========================================================== */

.event-header{

    border:2px solid #c1121f;

    border-radius:20px;

}

.event-banner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    flex-wrap:wrap;

}

.event-status{

    text-align:right;

}

.live-badge{

    display:inline-block;

    background:#c1121f;

    color:white;

    padding:12px 24px;

    border-radius:30px;

    font-size:18px;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:15px;

}

/* ===========================================
   Division Cards
=========================================== */

.division-card{

    text-align:center;

    transition:0.25s;

}

.division-card:hover{

    transform:translateY(-4px);

}

.division-card h2{

    margin-bottom:10px;

}

.division-card hr{

    margin:20px 0;

}

.ranking-mode-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.ranking-mode-tabs a {
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    background: #222;
    color: #ddd;
}

.ranking-mode-tabs a.active {
    background: #c1121f;
    color: white;
}

.ranking-mode-tabs a.disabled {
    opacity: .55;
    cursor: default;
}

.ranking-mode-tabs small {
    display: block;
    font-size: .7rem;
    margin-top: 3px;
}

/* ==========================
   DATA STUDIO
========================== */

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

.dashboard-card {
    text-align: center;
}

.dashboard-card h2 {
    margin-bottom: 20px;
}

.dashboard-number {
    font-size: 42px;
    font-weight: bold;
    color: #ffd700;
    margin: 20px 0;
}

.dashboard-status {
    font-size: 18px;
    font-weight: bold;
}

.ready {
    color: #3ddc84;
}

.warning {
    color: #ffb020;
}

.button-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.button-row .btn {
    text-decoration: none;
}

.dashboard-link {
    text-decoration: none;
    color: inherit;
}

.dashboard-link:hover {
    transform: translateY(-3px);
}

.dashboard-link .dashboard-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.dashboard-link:hover .dashboard-card {
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* ===========================
   Matchup Breakdown
=========================== */

.matchup-row {
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    gap: 15px;
    align-items: center;
    margin: 12px 0;
}

.matchup-label {
    font-weight: bold;
}

.matchup-bar {
    height: 16px;
    background: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #444;
}

.matchup-fill {
    height: 100%;
    transition: width .4s ease;
}

.matchup-positive {
    background: #2ecc71;
}

.matchup-negative {
    background: #e74c3c;
}

.matchup-score {
    text-align: right;
    font-weight: bold;
}

.matchup-total {
    margin-top: 20px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px;
    border-top: 1px solid #444;
}

/* =======================================
   Fight Lab Intelligence Card
======================================= */

.score-overview {
    text-align: center;
    margin-bottom: 25px;
}

.overall-number {
    font-size: 56px;
    font-weight: bold;
    color: #ffd700;
    line-height: 1;
}

.overall-grade {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin-top: 5px;
}

.overall-label {
    color: #bbbbbb;
    margin-top: 8px;
    font-size: 14px;
}

.score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.score-row {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.score-breakdown progress {
    width: 100%;
    height: 12px;
}

/* ==========================================================
   Fighter Card Headings
========================================================== */

.card h3{

    margin-top:30px;

    margin-bottom:18px;

    color:#ffcc00;

    font-size:20px;

    font-weight:700;

}

/* ==========================================================
   Recent Form Card
========================================================== */

.recent-form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:25px;

}

.form-stat{

    background:#181818;

    border:1px solid #333;

    border-radius:12px;

    padding:20px;

    text-align:center;

}

.form-label{

    display:block;

    color:#999;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:10px;

}

.form-value{

    font-size:34px;

    font-weight:800;

    color:#ffcc00;

}

.last-five-large{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-top:20px;

}

.fight-result-large{

    width:64px;

    height:64px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:bold;

    color:white;

}

.fight-result-large.win{

    background:#16a34a;

}

.fight-result-large.loss{

    background:#dc2626;

}

.fight-result-large.draw{

    background:#ca8a04;

}

.fight-result-large.none{

    background:#555;

}

@media(max-width:700px){

    .recent-form-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Scouting Report
========================================================== */

.scouting-summary{

    font-size:18px;

    line-height:1.8;

    color:#dddddd;

    margin-bottom:25px;

}

.scouting-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}

.scouting-section{

    background:#181818;

    border:1px solid #333;

    border-radius:12px;

    padding:20px;

}

.scouting-section h3{

    margin-top:0;

    color:#ffcc00;

}

.scouting-section ul{

    padding-left:20px;

    line-height:1.9;

}

.scouting-section li{

    margin-bottom:8px;

}

@media(max-width:900px){

    .scouting-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================
   Fight Result Badges
========================== */

.result-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    border-radius:50%;

    font-size:15px;

    font-weight:700;

    color:#fff;

    margin-right:8px;

}

.result-badge.win{

    background:#2eaf52;

}

.result-badge.loss{

    background:#d71920;

}

.result-badge.draw{

    background:#777;

}

.recent-form{

    display:flex;

    gap:8px;

    margin-top:10px;

}

.recent-form.right{

    justify-content:flex-end;

}

/* ===================================
   Fight Preview Dashboard
=================================== */

.comparison-grid-3 {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    align-items: start;

    margin-top: 30px;

    margin-bottom: 20px;

}

.comparison-grid-3 > div {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.comparison-grid-3 .card {

    margin-bottom: 0;

    height: auto;

}

@media (max-width:1100px) {

    .comparison-grid-3 {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width:700px) {

    .comparison-grid-3 {

        grid-template-columns: 1fr;

    }

}

.analysis-card{

    margin-top:15px;

    border:1px solid #333;

    border-radius:10px;

    overflow:hidden;

}

.analysis-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

}

.analysis-score{

    font-size:22px;

    font-weight:bold;

    color:#ffcc33;

    margin-right:12px;

}

.analysis-grade{

    background:#d62828;

    color:white;

    padding:4px 10px;

    border-radius:20px;

    font-weight:bold;

}

.analysis-body{

    padding:20px;

}

.analysis-table{

    width:100%;

    border-collapse:collapse;

}

.analysis-table td{

    padding:8px;

    border-bottom:1px solid #333;

}

.analysis-notes{

    margin-top:20px;

}

.analysis-notes ul{

    margin-top:10px;

}

.analysis-card{

    margin-top:15px;

    border:1px solid #333;

    border-radius:10px;

    overflow:hidden;

}

.analysis-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

}

.analysis-score{

    color:#ffcc33;

    font-size:24px;

    font-weight:bold;

    margin-right:15px;

}

.analysis-grade{

    background:#c1121f;

    color:white;

    padding:4px 12px;

    border-radius:20px;

    font-weight:bold;

}

.analysis-body{

    padding:20px;

}

.analysis-table{

    width:100%;

    border-collapse:collapse;

}

.analysis-table td{

    padding:8px;

    border-bottom:1px solid #333;

}

.analysis-notes{

    margin-top:20px;

}

.analysis-notes ul{

    margin-top:10px;

}

.report-section{

    margin-top:25px;

}

.fight-report-text{

    font-size:16px;

    line-height:1.8;

}

.report-section ul{

    margin-top:10px;

    padding-left:20px;

}

.report-section li{

    margin-bottom:8px;

}

.compare-header{

    display:flex;

    justify-content:space-around;

    align-items:center;

    text-align:center;

}

.fighter-column{

    width:40%;

}

.fighter-photo{

    width:180px;

    border-radius:12px;

}

.vs{

    font-size:48px;

    font-weight:bold;

    color:#c1121f;

}

.matchup-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:center;

}

.matchup-vs{

    font-size:64px;

    font-weight:bold;

    color:#c1121f;

}

.fighter-side{

    width:40%;

}

.fighter-side h2{

    margin-top:15px;

}

.fighter-photo{

    width:220px;

    border-radius:12px;

}

.advantage-bar{

    position:relative;

    width:100%;

    height:28px;

    background:#2b2b2b;

    border-radius:14px;

    overflow:hidden;

}

.advantage-fill{

    height:100%;

    transition:.35s;

}

.fighter1{

    background:#1e88e5;

}

.fighter2{

    background:#c1121f;

}

.advantage-label{

    position:absolute;

    left:12px;

    top:5px;

    font-size:13px;

    font-weight:bold;

    color:white;

}

.matchup-row{

    display:grid;

    grid-template-columns:1fr 180px 1fr;

    margin-top:20px;

    font-weight:bold;

    align-items:center;

}

.matchup-name.right{

    text-align:right;

}

.bar-row{

    display:grid;

    grid-template-columns:1fr 150px 1fr;

    align-items:center;

    gap:15px;

    margin:10px 0;

}

.left-bar,
.right-bar{

    height:16px;

    background:#333;

    border-radius:10px;

    overflow:hidden;

}

.left-fill{

    height:100%;

    background:#1e88e5;

    float:right;

}

.right-fill{

    height:100%;

    background:#c1121f;

}

.center-score{

    text-align:center;

    font-weight:bold;

}

.winner-text{

    text-align:center;

    margin-bottom:20px;

    color:#ffcc33;

    font-weight:bold;

}

/* ==========================================================
   Fight Lab Matchup Intelligence
   ========================================================== */

.matchup-intelligence-card {
    margin-top: 25px;
    padding: 22px;
    background: #181818;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.matchup-intelligence-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #ffcc00;
    font-size: 22px;
}

.matchup-intelligence-card p {
    color: #aaa;
    margin-bottom: 22px;
}

.matchup-intelligence-table {
    width: 100%;
}

.matchup-intelligence-row {
    display: grid;
    grid-template-columns: 1fr 180px 1fr;
    align-items: center;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid #333;
}

.matchup-intelligence-row:last-child {
    border-bottom: none;
}

.matchup-intelligence-row .matchup-value {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    color: white;
}

.matchup-intelligence-row .matchup-label {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.matchup-intelligence-row:first-child .matchup-value:first-child,
.matchup-intelligence-row:nth-child(2) .matchup-value:first-child,
.matchup-intelligence-row:nth-child(3) .matchup-value:first-child,
.matchup-intelligence-row:last-child .matchup-value:first-child {
    color: #22c55e;
}

.matchup-intelligence-row .matchup-value:last-child {
    color: #ef4444;
}

.matchup-intelligence-row.matchup-overall {
    margin-top: 8px;
    padding: 18px 0;
    border-top: 2px solid #555;
}

.matchup-intelligence-row.matchup-overall .matchup-value {
    font-size: 26px;
}

.matchup-fighter-labels {
    display: grid;
    grid-template-columns: 1fr 180px 1fr;
    gap: 15px;
    margin-top: 18px;
    align-items: center;
    text-align: center;
}

.matchup-fighter-labels strong {
    color: white;
    font-size: 16px;
}

.matchup-fighter-labels span {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.matchup-adjustment {
    margin-top: 20px;
    padding: 12px;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    text-align: center;
    color: #aaa;
}

.matchup-adjustment strong {
    color: #ffcc00;
    font-size: 18px;
}

@media (max-width: 700px) {

    .matchup-intelligence-row {
        grid-template-columns: 1fr;
        gap: 5px;
        text-align: center;
    }

    .matchup-intelligence-row .matchup-label {
        order: -1;
        margin-bottom: 5px;
    }

    .matchup-fighter-labels {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}

/* ==========================================================
   Division Champion Cards
   Compact UFC-style fighter presentation
   ========================================================== */

.champion-card {
    text-align: center;
    padding: 25px;
}

.champion-card h2 {
    margin-bottom: 15px;
}

/* Champion photo */
.champion-card .event-headshot {
    width: 150px;
    height: 190px;
    object-fit: contain;
    object-position: top center;

    display: block;
    margin: 0 auto 15px;

    background: #111;
    border: 2px solid #c1121f;
    border-radius: 12px;

    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* Fighter name */
.champion-card > h2 {
    font-size: 26px;
    margin: 8px 0 12px;
}

/* Resume line */
.champion-card p {
    margin: 10px 0 18px;
}

/* Champion profile button */
.champion-card button {
    margin-top: 5px;
}

/* Make the champion section feel more like a featured fighter */
.champion-card:hover .event-headshot {
    transform: scale(1.03);
    border-color: #ffcc00;
}

/* ==========================================================
   Interim Champion
   ========================================================== */

.champion-card.interim-champion {
    border-color: #555;
}

.champion-card.interim-champion .event-headshot {
    border-color: #888;
}

.champion-card.interim-champion:hover .event-headshot {
    border-color: #ffcc00;
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 600px) {

    .champion-card {
        padding: 20px;
    }

    .champion-card .event-headshot {
        width: 130px;
        height: 165px;
    }

    .champion-card > h2 {
        font-size: 23px;
    }

}

/* ==========================================================
   UFC Championship Cards - Side by Side
   ========================================================== */

.championship-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.championship-grid .champion-card {
    margin: 0;
    min-width: 0;
}

.championship-grid .champion-card .event-headshot {
    width: 180px;
    height: 210px;

    object-fit: cover;
    object-position: top center;

    padding: 0;
}

@media (max-width: 700px) {

    .championship-grid {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   Full-Screen Responsive Layout
   ----------------------------------------------------------
   Use the available screen width on large monitors while
   keeping comfortable margins and responsive behavior on
   laptops, tablets, and phones.
   ========================================================== */

@media (min-width: 1401px) {

    .container {
        width: calc(100% - 48px);
        max-width: none;
    }

    .card {
        padding: 28px;
    }

    table {
        font-size: 15px;
    }

    th {
        padding: 15px 14px;
    }

    td {
        padding: 15px 14px;
    }

    .fighter-table th,
    .fighter-table td {
        padding: 11px 12px;
    }
}

@media (max-width: 1400px) and (min-width: 901px) {

    .container {
        width: calc(100% - 40px);
        max-width: none;
    }
}

@media (max-width: 900px) {

    .container {
        width: calc(100% - 30px);
        max-width: none;
        margin: 20px auto;
    }
}

@media (max-width: 600px) {

    .container {
        width: calc(100% - 20px);
        max-width: none;
        margin: 12px auto;
    }

    .card {
        padding: 18px;
    }
}
/* Fight Preview Tale of the Tape alignment */
.card .fighter-table td:first-child,
.card .fighter-table td:last-child {
    font-size: 16px;
    font-weight: 600;
    width: auto;
}
.card .fighter-table td.winner-stat {
    font-size: 16px;
    font-weight: 600;
}