*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial;background:#f6f9fd;color:#09213f}button{cursor:pointer}#login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#071b34,#126b76)}.card{width:400px;max-width:92vw;background:white;padding:38px;border-radius:25px;text-align:center;box-shadow:0 30px 80px #0018}.logo{font-size:55px}em{font-style:normal;color:#1879ef}.card input{width:100%;padding:14px;margin:7px 0;border:1px solid #d7e3f0;border-radius:12px}.card button,.new button{width:100%;padding:14px;border:0;border-radius:12px;background:#1879ef;color:white;font-weight:800}.card p{color:#7b8da3}#le{color:#c33;margin-top:10px}header{height:74px;background:white;display:flex;align-items:center;padding:0 3%;gap:30px;border-bottom:1px solid #e3edf7;font-size:20px}nav{flex:1;text-align:center;font-size:14px;color:#38516e}header button{border:0;border-radius:9px;padding:9px;margin-left:5px}main{max-width:1450px;margin:auto;padding:22px}.hero{height:250px;border-radius:24px;padding:38px 46px;color:white;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(115deg,#071b34,#0b3f61 60%,#13747a)}.hero h1{font-size:47px;line-height:1.04;margin:12px 0}.ball{font-size:145px;margin-right:7%}.filters{display:grid;grid-template-columns:1fr 180px;gap:12px;margin:18px 0;padding:14px;background:white;border-radius:18px}.filters input,.filters button{padding:12px;border:1px solid #dce7f4;border-radius:10px}.filters button{background:#1879ef;color:white;font-weight:bold}.grid{display:grid;grid-template-columns:2.2fr .9fr;gap:18px}.panel,.pick,.super{background:white;border:1px solid #dce7f4;border-radius:20px;padding:20px}.super{margin-top:15px}.match{display:grid;grid-template-columns:120px 1fr 50px 1fr 120px;align-items:center;padding:15px;margin:10px 0;border:1px solid #e1ebf6;border-radius:15px}.team{font-weight:bold}.live{background:#effaf5;color:#07965f;padding:10px;border-radius:10px}.loading{padding:30px;text-align:center;background:#f5f8fc;border-radius:13px}#admin{position:fixed;inset:0;background:#06172dcc;display:grid;place-items:center;z-index:10}.adminbox{background:white;width:min(850px,94vw);max-height:85vh;overflow:auto;border-radius:22px;padding:25px;position:relative}#close{position:absolute;right:20px}.new{display:grid;grid-template-columns:1fr 1fr 120px 170px;gap:8px;margin:20px 0}.new input,.new select{padding:11px;border:1px solid #d9e4ef;border-radius:10px}.new button{padding:10px}.userrow{display:grid;grid-template-columns:1fr 100px 100px 160px;align-items:center;padding:12px;border-top:1px solid #e6edf5}@media(max-width:800px){nav{display:none}.grid{grid-template-columns:1fr}.new{grid-template-columns:1fr}.ball{font-size:75px}.hero h1{font-size:34px}}
/* FIX: hidden elements must never render */
[hidden] {
    display: none !important;
}

/* API-Football match cards */
.match {
    grid-template-columns: 190px 1fr 55px 1fr 125px;
    gap: 14px;
}

.leagueInfo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leagueInfo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.leagueInfo small,
.leagueInfo b,
.leagueInfo span {
    display: block;
}

.leagueInfo small {
    color: #8495a9;
    font-size: 10px;
}

.leagueInfo b {
    font-size: 12px;
    margin: 2px 0;
}

.leagueInfo span {
    color: #1879ef;
    font-weight: 700;
}

.team {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.vs {
    text-align: center;
    color: #8da0b6;
    font-weight: 700;
}

.analysisBtn {
    border: 0;
    background: #eaf3ff;
    color: #1269d7;
    border-radius: 11px;
    padding: 10px;
    font-weight: 700;
}

/* Match Analysis */
#analysisModal {
    position: fixed;
    inset: 0;
    background: rgba(5,22,43,.72);
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 25px;
}

#analysisModal[hidden] {
    display: none !important;
}

.analysisBox {
    position: relative;
    width: min(900px,96vw);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 24px;
    padding: 30px;
}

#analysisClose {
    position: absolute;
    right: 20px;
    top: 20px;
    border: 0;
    background: #eef3f8;
    border-radius: 10px;
    padding: 9px 12px;
}

.analysisLeague {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #71859e;
}

.analysisLeague img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.analysisTeams {
    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    align-items: center;
    text-align: center;
    margin: 25px 0 35px;
}

.analysisTeams img {
    width: 85px;
    height: 85px;
    object-fit: contain;
}

.analysisTeams > strong {
    color: #8da0b6;
}

.predictionGrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.analysisCard {
    background: #f5f9fd;
    border: 1px solid #dfebf6;
    border-radius: 15px;
    padding: 17px;
}

.analysisCard span,
.analysisCard small {
    display: block;
    color: #7a8da4;
    font-size: 12px;
}

.analysisCard strong {
    display: block;
    margin: 7px 0;
}

.compareGrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}

.compareGrid > div {
    background: #f7faff;
    border-radius: 13px;
    padding: 14px;
    text-align: center;
}

.compareGrid span {
    display: block;
    color: #72869e;
    margin-bottom: 8px;
}

.compareGrid b {
    display: block;
}

@media(max-width:700px){
    .predictionGrid,
    .compareGrid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== MatchLens Analysis V2 ===== */

.mainPrediction {
    margin: 10px 0 28px;
    padding: 22px 25px;
    border-radius: 18px;
    background: linear-gradient(135deg,#eafff5,#f5fffb);
    border: 1px solid #bfead8;
}

.mainPrediction > span {
    color: #07965f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.mainPrediction h2 {
    margin: 7px 0;
    color: #073b2a;
}

.mainPrediction p {
    margin: 0;
    color: #526d64;
}

.sectionTitle {
    margin: 27px 0 13px;
}

.resultProbabilities {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.resultProbabilities > div {
    background: #f4f8fd;
    border: 1px solid #dfebf6;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
}

.resultProbabilities span {
    display: block;
    color: #7a8da4;
    font-size: 12px;
}

.resultProbabilities b {
    display: block;
    font-size: 27px;
    margin: 5px 0;
    color: #0b2c51;
}

.resultProbabilities small {
    color: #6f8298;
}

.secondaryPredictions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.secondaryPredictions > div {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px;
}

.secondaryPredictions span {
    display: block;
    color: #7c8da2;
    font-size: 12px;
    margin-bottom: 5px;
}

.whyPrediction {
    background: #f6faff;
    border-left: 4px solid #1879ef;
    border-radius: 12px;
    padding: 14px 20px;
}

.whyPrediction p {
    margin: 8px 0;
}

.metricsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.metric {
    background: #f7faff;
    border: 1px solid #e2ebf5;
    border-radius: 15px;
    padding: 16px;
}

.metricTitle {
    font-weight: 800;
    margin-bottom: 13px;
}

.metricRow {
    display: grid;
    grid-template-columns: 105px 1fr 45px;
    gap: 9px;
    align-items: center;
    margin: 8px 0;
    font-size: 12px;
}

.metricBar {
    height: 8px;
    background: #e5edf6;
    border-radius: 10px;
    overflow: hidden;
}

.metricBar i {
    display: block;
    height: 100%;
    background: #1879ef;
    border-radius: 10px;
}

.metricRow.away .metricBar i {
    background: #08a86b;
}

.analysisNote {
    margin-top: 22px;
    padding: 13px;
    background: #fff9e9;
    border-radius: 12px;
    color: #796b43;
    font-size: 11px;
}

@media(max-width:700px){
    .resultProbabilities {
        grid-template-columns: repeat(3,1fr);
    }

    .secondaryPredictions,
    .metricsGrid {
        grid-template-columns: 1fr;
    }
}

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

#mainNav {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

#mainNav button {
    border:0;
    background:transparent;
    padding:11px 13px;
    border-radius:11px;
    color:#38516e;
    font-weight:650;
}

#mainNav button:hover,
#mainNav button.active {
    background:#eaf3ff;
    color:#1269d7;
}

.betslipNav {
    position:relative;
}

#betslipCount {
    display:inline-grid;
    place-items:center;
    min-width:20px;
    height:20px;
    margin-left:4px;
    padding:0 5px;
    border-radius:20px;
    background:#1879ef;
    color:white;
    font-size:10px;
}

/* ===== Bet Builder ===== */

.betslipPage {
    max-width:1450px;
    margin:auto;
    padding:35px 22px;
}

.betslipHeader {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.betslipHeader h1 {
    margin:5px 0;
    font-size:35px;
}

.betslipHeader p {
    color:#73869d;
}

.betslipHeader button {
    border:0;
    background:#edf3f9;
    padding:11px 16px;
    border-radius:11px;
}

.betslipLayout {
    display:grid;
    grid-template-columns:1fr 350px;
    gap:20px;
}

.betslipItems,
.betslipSummary {
    background:white;
    border:1px solid #dce7f4;
    border-radius:20px;
    padding:20px;
}

.emptyBetslip {
    padding:60px 20px;
    text-align:center;
    color:#8294a9;
}

.betItem {
    display:grid;
    grid-template-columns:1fr 100px 40px;
    align-items:center;
    gap:15px;
    padding:17px;
    border:1px solid #e2ebf5;
    border-radius:15px;
    margin-bottom:10px;
}

.betItem small {
    color:#8193a8;
}

.betItem h3 {
    margin:4px 0;
}

.betItem strong {
    color:#1269d7;
}

.betItem > button {
    border:0;
    background:#f1f5f9;
    border-radius:9px;
    padding:8px;
}

.betChance {
    text-align:center;
}

.betChance span {
    display:block;
    font-size:10px;
    color:#8395aa;
}

.betChance b {
    font-size:20px;
    color:#07965f;
}

.betslipSummary > span {
    color:#75899f;
    font-size:12px;
}

.ticketProbability {
    font-size:52px;
    font-weight:850;
    color:#0a2d53;
    margin:8px 0;
}

.ticketRisk {
    display:inline-block;
    background:#fff4d9;
    color:#8a6414;
    padding:7px 12px;
    border-radius:20px;
    font-weight:700;
}

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

.ticketStats > div {
    background:#f5f9fd;
    border-radius:13px;
    padding:13px;
}

.ticketStats span,
.ticketStats b {
    display:block;
}

.ticketStats span {
    color:#7e90a5;
    font-size:11px;
}

.ticketStats b {
    font-size:20px;
    margin-top:4px;
}

.ticketNotice {
    margin-top:20px;
    color:#8392a4;
    font-size:11px;
    line-height:1.5;
}

@media(max-width:900px){

    #mainNav {
        overflow-x:auto;
        justify-content:flex-start;
    }

    #mainNav button {
        white-space:nowrap;
    }

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


.matchFilters {
    grid-template-columns: 1fr 1fr 180px;
}

.matchFilters label {
    background: #fff;
    border: 1px solid #dce7f4;
    border-radius: 12px;
    padding: 7px 12px;
}

.matchFilters label > span {
    display: block;
    font-size: 10px;
    color: #7b8ea5;
    margin-bottom: 2px;
}

.matchFilters input,
.matchFilters select {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #153654;
    font-weight: 700;
    padding: 5px 0;
}

@media(max-width:800px){
    .matchFilters {
        grid-template-columns: 1fr;
    }
}

.ticketBuilder {
    background:white;
    border:1px solid #dce7f4;
    border-radius:20px;
    padding:20px;
    margin-bottom:16px;
}

.ticketBuilder h2 {
    margin-top:0;
}

.ticketBuilderGrid {
    display:grid;
    grid-template-columns:1fr 1.4fr 1.2fr 150px;
    gap:10px;
    align-items:end;
}

.ticketBuilderGrid label {
    border:1px solid #dce7f4;
    border-radius:12px;
    padding:8px 11px;
}

.ticketBuilderGrid label span {
    display:block;
    color:#7c8fa5;
    font-size:10px;
    margin-bottom:5px;
}

.ticketBuilderGrid select {
    width:100%;
    border:0;
    outline:0;
    background:white;
    font-weight:650;
}

#addTicketPick {
    height:49px;
    border:0;
    border-radius:12px;
    background:#1879ef;
    color:white;
    font-weight:800;
}

#addTicketPick:disabled {
    opacity:.4;
    cursor:not-allowed;
}

.ticketPickInfo {
    margin-top:12px;
    color:#647b94;
    font-size:12px;
}

@media(max-width:900px){
    .ticketBuilderGrid {
        grid-template-columns:1fr;
    }
}

.sportSelector {
    display:flex;
    gap:8px;
    margin:0 0 12px;
}

.sportBtn {
    border:1px solid #dce7f4;
    background:white;
    color:#38516e;
    border-radius:12px;
    padding:11px 18px;
    font-weight:750;
}

.sportBtn.active {
    background:#1879ef;
    border-color:#1879ef;
    color:white;
}


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

.basketStats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.basketStats > div {
    background:#f5f9fd;
    border:1px solid #dfebf6;
    border-radius:16px;
    padding:18px;
}

.basketStats h3 {
    margin-top:0;
}

.basketStats p {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #e5edf5;
    padding:9px 0;
    margin:0;
}

@media(max-width:700px){
    .basketStats {
        grid-template-columns:1fr;
    }
}


.pick,
.super {
    cursor:pointer;
    transition:.18s ease;
}

.pick:hover,
.super:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(20,55,90,.10);
    border-color:#b8d4f1;
}


/* ==========================================
   WINMATCH TOP PICKS V3
   ========================================== */

#top3Expand,
#top6Expand {
    margin-top:14px;
    padding:16px;
    background:#fff;
    border:1px solid #d9e5f2;
    border-radius:18px;
}

.top3Title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding-bottom:14px;
    border-bottom:1px solid #e6eef6;
}

.top3Title h2 {
    margin:3px 0 0;
    font-size:21px;
    color:#082c52;
}

.top3Title span {
    font-size:10px;
    font-weight:800;
    letter-spacing:.7px;
    color:#1675e8;
}

.top3List {
    display:grid;
    gap:12px;
    margin-top:14px;
}

.topPick {
    position:relative;
    display:grid;
    grid-template-columns:45px minmax(0,1fr) 105px;
    gap:13px;
    align-items:center;

    padding:16px;
    margin:0;

    background:#f8fbff;
    border:1px solid #dce8f5;
    border-radius:15px;
}

.topPick:first-child {
    background:linear-gradient(135deg,#f4fbff,#f5fff9);
    border-color:#bcded4;
}

.topNumber {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;

    border-radius:12px;
    background:#e7f1ff;

    color:#126bd7;
    font-size:17px;
    font-weight:900;
}

.topPick:first-child .topNumber {
    background:#dcf7e9;
    color:#078653;
}

.topMatch small {
    display:block;
    margin-bottom:5px;
    color:#778ba2;
    font-size:10px;
}

.topMatch > strong {
    display:block;
    margin-bottom:10px;

    color:#082c52;
    font-size:14px;
    line-height:1.35;
}

.topMatch > span {
    display:block;
    padding:9px 11px;

    background:#fff;
    border:1px solid #e0eaf4;
    border-radius:10px;

    color:#516b84;
    font-size:11px;
}

.topMatch > span b {
    display:block;
    margin-top:3px;
    color:#0b67cf;
    font-size:13px;
}

.topMatch p {
    margin:8px 2px 0;
    color:#71859a;
    font-size:10px;
    line-height:1.4;
}

.topConfidence {
    text-align:center;
    padding:10px 5px;
}

.topConfidence small {
    display:block;
    color:#8093a8;
    font-size:9px;
}

.topConfidence > b {
    display:block;
    margin:4px 0 9px;

    color:#07945c;
    font-size:27px;
    line-height:1;
}

.topConfidence button {
    width:100%;
    border:0;
    border-radius:9px;

    padding:8px 7px;

    background:#e7f2ff;
    color:#126bd7;

    font-size:10px;
    font-weight:800;
}

.combinedScore {
    min-width:110px;
    padding:9px 12px;

    background:#eefaf5;
    border-radius:12px;

    text-align:center;
}

.combinedScore small {
    display:block;
    color:#688478;
    font-size:9px;
}

.combinedScore b {
    display:block;
    margin-top:2px;

    color:#078653;
    font-size:23px;
}

@media(max-width:700px) {

    .topPick {
        grid-template-columns:40px 1fr;
    }

    .topConfidence {
        grid-column:2;
        display:flex;
        align-items:center;
        gap:10px;
        text-align:left;
    }

    .topConfidence > b {
        margin:0;
    }

    .topConfidence button {
        width:auto;
    }
}