/* ═══════════════════════════════════════════════════════
   UEFA CHAMPIONS LEAGUE 2026/27 — Grille de pronostics
   Palette : Bleu nuit UCL + Or étoile + Blanc
   ═══════════════════════════════════════════════════════ */
:root{
    --ucl-dark:  #0D1B2A;   /* bleu nuit profond */
    --ucl-blue:  #1B3A6B;   /* bleu UCL */
    --ucl-blue2: #2A5298;   /* bleu clair */
    --ucl-gold:  #FFD700;   /* or étoile */
    --ucl-gold2: #FFA500;   /* or chaud */
    --ucl-star:  #F5C518;   /* or doux */
    --ucl-white: #FFFFFF;
    --ucl-gray:  #8A9BB0;
    --ucl-light: #E8EFF8;
    --ucl-card:  #162236;   /* fond des cartes */
    --ucl-card2: #1E2E45;
    --ucl-border:#2A3F5F;
    --ucl-green: #00C851;
    --ucl-red:   #FF3D3D;
    --tr: all .22s ease;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--ucl-dark);color:var(--ucl-white);
    min-height:100vh;overflow-x:hidden;
}

/* ══════════════════ ÉTOILES BACKGROUND ══════════════════ */
body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(27,58,107,.6) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(42,82,152,.4) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(13,27,42,1) 0%, transparent 100%);
}

/* ══════════════════ HEADER ══════════════════ */
#appHeader{
    position:sticky;top:0;z-index:100;
    background:linear-gradient(135deg, var(--ucl-dark), var(--ucl-blue));
    border-bottom:2px solid var(--ucl-gold);
    padding:10px 16px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 4px 20px rgba(255,215,0,.2);
}

.ucl-logo-wrap{display:flex;align-items:center;gap:10px;}
.ucl-logo-svg{width:36px;height:36px;flex-shrink:0;}
.ucl-title-wrap{}
.ucl-title{font-size:13px;font-weight:900;color:var(--ucl-white);letter-spacing:.5px;}
.ucl-subtitle{font-size:10px;color:var(--ucl-gray);font-weight:600;}

.header-user-btn{
    display:flex;align-items:center;gap:8px;
    background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);
    border-radius:20px;padding:6px 12px;cursor:pointer;transition:var(--tr);
}
.header-user-btn:hover{background:rgba(255,215,0,.2);}
.header-user-crest{width:22px;height:22px;border-radius:50%;object-fit:contain;}
.header-user-name{font-size:12px;font-weight:800;color:var(--ucl-white);}

/* ══════════════════ BANNIÈRE CLUBS DÉFILANTE ══════════════════ */
.clubs-banner-wrap{
    background:linear-gradient(135deg,var(--ucl-blue),var(--ucl-dark));
    border-bottom:1px solid var(--ucl-border);
    overflow:hidden;height:44px;position:relative;
}
.clubs-banner-wrap::before,.clubs-banner-wrap::after{
    content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;
}
.clubs-banner-wrap::before{left:0;background:linear-gradient(90deg,var(--ucl-blue),transparent);}
.clubs-banner-wrap::after{right:0;background:linear-gradient(-90deg,var(--ucl-blue),transparent);}
.clubs-strip{
    display:flex;align-items:center;gap:16px;
    animation:scrollClubs 40s linear infinite;
    white-space:nowrap;height:100%;
}
.clubs-strip:hover{animation-play-state:paused;}
.clubs-strip-item{
    display:flex;align-items:center;justify-content:center;
    height:30px;width:30px;flex-shrink:0;
}
.clubs-strip-item img{
    height:28px;width:28px;object-fit:contain;
    filter:drop-shadow(0 0 4px rgba(255,215,0,.4));
    transition:var(--tr);
}
.clubs-strip-item img:hover{transform:scale(1.3);}
@keyframes scrollClubs{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════ NAVIGATION ══════════════════ */
.nav-wrap{
    background:var(--ucl-card);
    border-bottom:1px solid var(--ucl-border);
    overflow-x:auto;display:flex;
    scrollbar-width:none;position:sticky;top:60px;z-index:99;
}
.nav-wrap::-webkit-scrollbar{display:none;}
.nav-tab{
    flex-shrink:0;display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:10px 14px;cursor:pointer;
    border:none;background:transparent;color:var(--ucl-gray);
    font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    transition:var(--tr);border-bottom:2px solid transparent;position:relative;
}
.nav-tab .ni{font-size:16px;}
.nav-tab.active,.nav-tab:hover{color:var(--ucl-gold);}
.nav-tab.active{border-bottom-color:var(--ucl-gold);}
.nav-tab.active .ni{filter:drop-shadow(0 0 6px rgba(255,215,0,.6));}
.nav-badge{
    position:absolute;top:6px;right:8px;
    background:var(--ucl-red);color:white;
    font-size:8px;font-weight:900;
    width:14px;height:14px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.nav-badge.hidden{display:none;}

/* ══════════════════ CONTENUS ══════════════════ */
#mainContent{position:relative;z-index:1;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ══════════════════ ÉCUSSONS / CRESTS ══════════════════ */
.crest{display:inline-block;vertical-align:middle;}
.crest img{object-fit:contain;border-radius:2px;}
.crest-xs img{width:16px;height:16px;}
.crest-sm img{width:22px;height:22px;}
.crest-md img{width:32px;height:32px;}
.crest-lg img{width:44px;height:44px;}
.crest-xl img{width:60px;height:60px;}
.crest-placeholder{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--ucl-blue);color:var(--ucl-gold);
    font-size:8px;font-weight:900;border-radius:4px;
    width:22px;height:22px;
}

/* ══════════════════ CARTES MATCH ══════════════════ */
.match-card{
    background:var(--ucl-card);
    border:1px solid var(--ucl-border);
    border-radius:14px;margin:8px 12px;
    overflow:hidden;transition:var(--tr);
    box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.match-card:hover{border-color:rgba(255,215,0,.3);
    box-shadow:0 8px 24px rgba(255,215,0,.1);}
.match-card-header{
    display:flex;align-items:center;gap:8px;
    padding:8px 14px;
    background:linear-gradient(135deg,var(--ucl-card2),var(--ucl-card));
    border-bottom:1px solid var(--ucl-border);
    font-size:11px;color:var(--ucl-gray);font-weight:700;
}
.match-card-header .badge-journee{
    background:linear-gradient(135deg,var(--ucl-gold),var(--ucl-gold2));
    color:var(--ucl-dark);font-size:9px;font-weight:900;
    padding:2px 8px;border-radius:8px;
}
.match-teams{
    display:flex;align-items:center;justify-content:center;
    gap:12px;padding:14px 16px;
}
.match-team{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    flex:1;text-align:center;
}
.match-team-name{font-size:12px;font-weight:800;color:var(--ucl-white);}
.match-score-center{
    display:flex;align-items:center;gap:8px;
    font-size:28px;font-weight:900;color:var(--ucl-gold);
    text-shadow:0 0 20px rgba(255,215,0,.4);
}
.match-score-sep{color:var(--ucl-gray);font-size:20px;}
.match-score-pending{
    font-size:14px;font-weight:800;color:var(--ucl-gray);
    background:var(--ucl-dark);padding:4px 12px;border-radius:8px;
    border:1px solid var(--ucl-border);
}

/* ══════════════════ RÉSULTAT OFFICIEL ══════════════════ */
.official-result-player{
    margin:4px 12px;border-radius:10px;padding:8px 12px;
    display:flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;color:var(--ucl-white);
    border:1px solid var(--ucl-border);background:var(--ucl-card2);
}
.official-result-pts5{background:linear-gradient(135deg,#00a651,#00c96a)!important;border-color:#00a651!important;}
.official-result-pts4{background:linear-gradient(135deg,#00838f,#00bcd4)!important;border-color:#00838f!important;}
.official-result-pts3{background:linear-gradient(135deg,var(--ucl-blue),var(--ucl-blue2))!important;border-color:var(--ucl-blue)!important;}
.official-result-pts2{background:linear-gradient(135deg,#6a1b9a,#9c27b0)!important;border-color:#6a1b9a!important;}
.official-result-pts1{background:linear-gradient(135deg,#e65100,#ff8f00)!important;border-color:#e65100!important;color:#fff!important;}
.official-result-pts0{background:linear-gradient(135deg,#b71c1c,#e53935)!important;border-color:#b71c1c!important;}
.official-result-none{background:var(--ucl-card2);}
.official-result-pending{background:var(--ucl-card2);border:1px dashed var(--ucl-border);}
.orp-label{color:var(--ucl-gold);font-weight:800;font-size:11px;}
.orp-score{font-size:15px;font-weight:900;}

/* ══════════════════ BADGES POINTS ══════════════════ */
.pts-badge{
    display:inline-flex;align-items:center;justify-content:center;
    padding:3px 8px;border-radius:10px;font-size:10px;font-weight:900;
    color:white;white-space:nowrap;
}
.pts5{background:linear-gradient(135deg,#00a651,#00c96a);}
.pts4{background:linear-gradient(135deg,#00838f,#00bcd4);}
.pts3{background:linear-gradient(135deg,var(--ucl-blue),var(--ucl-blue2));}
.pts2{background:linear-gradient(135deg,#6a1b9a,#9c27b0);}
.pts1{background:linear-gradient(135deg,#e65100,#ff8f00);color:#fff;}
.pts0{background:linear-gradient(135deg,#b71c1c,#e53935);}
.pts10{background:linear-gradient(135deg,#c8920a,var(--ucl-gold));color:#1a1200;}

/* ══════════════════ PRONOSTICS GRILLE ══════════════════ */
.bets-table-outer{overflow:hidden;border-radius:0 0 14px 14px;}
.bets-table-inner{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;background:var(--ucl-border);
}
@media(min-width:900px){.bets-table-inner{grid-template-columns:repeat(8,1fr);}}
@media(min-width:600px) and (max-width:899px){.bets-table-inner{grid-template-columns:repeat(5,1fr);}}
@media(max-width:599px){.bets-table-inner{grid-template-columns:repeat(3,1fr);}}

.bet-row{
    display:flex;flex-direction:column;gap:4px;padding:10px 8px;
    background:var(--ucl-card);transition:var(--tr);
    min-height:100px;box-sizing:border-box;
}
.bet-row:hover{background:var(--ucl-card2);}
.bet-row-me{background:rgba(255,215,0,.08)!important;border-left:3px solid var(--ucl-gold);}
.bet-row-pts4{background:rgba(0,131,143,.2)!important;border-left:3px solid #00838f!important;}
.bet-row-pts3{background:rgba(27,58,107,.3)!important;border-left:3px solid var(--ucl-blue)!important;}
.bet-row-pts2{background:rgba(106,27,154,.2)!important;border-left:3px solid #6a1b9a!important;}
.bet-row-pts1{background:rgba(230,81,0,.2)!important;border-left:3px solid #e65100!important;}
.bet-row-pts0{background:rgba(183,28,28,.2)!important;border-left:3px solid #b71c1c!important;}

.bet-player{display:flex;align-items:center;gap:4px;min-width:0;width:100%;flex-wrap:nowrap;}
.bet-player strong{font-size:11px;color:var(--ucl-white);font-weight:700;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.bet-player-crest{width:16px;height:16px;object-fit:contain;flex-shrink:0;}
.bet-times-row{display:flex;gap:3px;flex-wrap:wrap;width:100%;}
.bet-score-zone{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%;margin-top:auto;}

.score-input{
    width:40px;padding:5px 3px;text-align:center;
    border:2px solid var(--ucl-border);border-radius:8px;
    font-size:15px;font-weight:900;background:var(--ucl-dark);
    color:var(--ucl-white);transition:var(--tr);
}
.score-input:focus{outline:none;border-color:var(--ucl-gold);}
.my-input{border-color:var(--ucl-gold)!important;background:rgba(255,215,0,.08)!important;}
.admin-input{border-color:var(--ucl-blue)!important;}
.bet-sep{color:var(--ucl-gray);font-weight:700;}
.readonly-score{font-size:16px;font-weight:900;color:var(--ucl-white);}
.no-bet{font-size:10px;color:var(--ucl-gray);font-weight:700;}
.no-bet-locked{color:var(--ucl-red);}
.bet-pts{margin-top:2px;}
.bet-time-admin{font-size:9px;font-weight:700;color:var(--ucl-gray);
    background:rgba(255,255,255,.05);padding:1px 5px;border-radius:6px;}
.bet-time-locked{background:rgba(0,200,81,.15);color:#00c851;}

/* ══════════════════ BOUTONS ══════════════════ */
.btn-primary{
    background:linear-gradient(135deg,var(--ucl-gold),var(--ucl-gold2));
    color:var(--ucl-dark);border:none;border-radius:12px;
    padding:10px 20px;font-size:13px;font-weight:900;
    cursor:pointer;transition:var(--tr);width:100%;
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn-validate{
    background:rgba(0,200,81,.15);color:#00c851;
    border:1px solid rgba(0,200,81,.3);border-radius:8px;
    padding:4px 8px;font-size:10px;font-weight:800;cursor:pointer;
    transition:var(--tr);
}
.btn-validate:hover{background:rgba(0,200,81,.3);}
.btn-icon{background:rgba(255,255,255,.08);border:1px solid var(--ucl-border);
    border-radius:6px;padding:3px 7px;cursor:pointer;font-size:12px;transition:var(--tr);}
.btn-icon:hover{background:rgba(255,255,255,.15);}
.btn-icon-red{background:rgba(255,61,61,.1);border:1px solid rgba(255,61,61,.3);
    border-radius:6px;padding:3px 7px;cursor:pointer;font-size:12px;transition:var(--tr);}
.btn-icon-red:hover{background:rgba(255,61,61,.25);}

/* ══════════════════ ACCORDÉON ══════════════════ */
.accordion-btn{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;background:var(--ucl-card2);
    border:none;border-top:1px solid var(--ucl-border);
    color:var(--ucl-white);cursor:pointer;font-size:12px;font-weight:800;
    transition:var(--tr);
}
.accordion-btn:hover{background:rgba(255,215,0,.08);}
.accordion-body{display:none;}
.accordion-body.open{display:block;}
.acc-arrow{transition:var(--tr);}
.accordion-btn.open .acc-arrow{transform:rotate(180deg);}

/* ══════════════════ CLASSEMENT ══════════════════ */
.rank-table{width:100%;border-collapse:collapse;background:var(--ucl-card);}
.rank-table th{
    background:linear-gradient(135deg,var(--ucl-dark),var(--ucl-blue));
    color:var(--ucl-gold);padding:10px 12px;font-size:11px;font-weight:800;
    text-align:left;white-space:nowrap;
}
.rank-table td{
    padding:10px 12px;border-bottom:1px solid var(--ucl-border);
    font-size:12px;color:var(--ucl-white);
}
.rank-table tr:hover td{background:rgba(255,215,0,.05);}
.rank-pos-1 td{background:rgba(255,215,0,.12)!important;border-left:3px solid var(--ucl-gold);}
.rank-pos-2 td{background:rgba(192,192,192,.08)!important;border-left:3px solid #c0c0c0;}
.rank-pos-3 td{background:rgba(205,127,50,.1)!important;border-left:3px solid #cd7f32;}
.rank-table-scroll{overflow-x:auto;}

/* ══════════════════ PODIUM ══════════════════ */
.podium-box{display:flex;align-items:flex-end;justify-content:center;gap:8px;
    padding:16px 12px 0;margin-bottom:16px;}
.podium-step{display:flex;flex-direction:column;align-items:center;flex:1;max-width:140px;}
.podium-avatar{font-size:32px;margin-bottom:4px;
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;}
.podium-avatar img{width:40px;height:40px;object-fit:contain;
    border-radius:50%;border:2px solid var(--ucl-gold);}
.podium-name{font-weight:800;font-size:12px;color:var(--ucl-white);
    text-align:center;margin-bottom:2px;}
.podium-pts{font-size:10px;color:var(--ucl-gray);margin-bottom:6px;}
.podium-pillar{width:100%;border-radius:6px 6px 0 0;position:relative;
    display:flex;align-items:center;justify-content:center;}
.podium-pillar-1{height:80px;background:linear-gradient(180deg,#FFD700,#FFA500);}
.podium-pillar-2{height:60px;background:linear-gradient(180deg,#B8C0CC,#8A9099);}
.podium-pillar-3{height:45px;background:linear-gradient(180deg,#CD9B6A,#9B6A3A);}
.podium-medal{font-size:20px;}
.podium-crown{position:absolute;top:-16px;font-size:18px;}

/* ══════════════════ DÉROULEMENT ══════════════════ */
.dr-section{margin:12px;}
.dr-date-header{
    font-size:11px;font-weight:900;color:var(--ucl-gold);
    padding:6px 12px;margin:12px 0 4px;
    background:rgba(255,215,0,.08);border-radius:8px;
    border-left:3px solid var(--ucl-gold);
    display:flex;align-items:center;gap:8px;
}
.dr-row{
    background:var(--ucl-card);border:1px solid var(--ucl-border);
    border-radius:12px;padding:12px 14px;margin-bottom:6px;
    cursor:pointer;transition:var(--tr);
    display:flex;flex-direction:column;gap:6px;
}
.dr-row:hover{border-color:rgba(255,215,0,.3);transform:translateX(3px);}
.dr-row-finished{background:rgba(0,200,81,.05);border-color:rgba(0,200,81,.2);}
.dr-match-teams{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;}
.dr-score{font-size:15px;font-weight:900;color:var(--ucl-gold);}
.dr-meta{font-size:10px;color:var(--ucl-gray);display:flex;gap:12px;flex-wrap:wrap;}
.dr-mybet{font-size:11px;font-weight:700;color:var(--ucl-white);
    background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.2);
    padding:3px 8px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;}
.dr-mybet-empty{background:rgba(255,255,255,.04);border-color:var(--ucl-border);
    color:var(--ucl-gray);border-style:dashed;}
.dr-mybet-locked{border-color:var(--ucl-gold);}
.dr-mybet-novote{background:rgba(255,61,61,.1);border-color:rgba(255,61,61,.3);color:var(--ucl-red);}

/* ══════════════════ SETUP ADMIN ══════════════════ */
.setup-card{
    background:var(--ucl-card);border:1px solid var(--ucl-border);
    border-radius:14px;padding:18px;margin:10px 12px;
}
.scard-header{font-size:13px;font-weight:900;color:var(--ucl-gold);
    margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.setup-info{font-size:12px;color:var(--ucl-gray);line-height:1.5;margin-bottom:10px;}
.setup-hero{
    text-align:center;font-size:22px;font-weight:900;
    color:var(--ucl-gold);padding:20px;
    text-shadow:0 0 30px rgba(255,215,0,.4);
}

/* ══════════════════ UCL LIVE ══════════════════ */
.live-header{text-align:center;padding:16px;margin-bottom:8px;}
.live-title{font-size:18px;font-weight:900;
    background:linear-gradient(135deg,var(--ucl-gold),var(--ucl-gold2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.live-update{font-size:11px;color:var(--ucl-gray);margin-top:4px;}
.live-loading{text-align:center;padding:40px;color:var(--ucl-gray);font-weight:700;}
.live-table{width:100%;border-collapse:collapse;font-size:11px;}
.live-table th{padding:6px 8px;font-weight:800;color:var(--ucl-gold);
    background:var(--ucl-card2);text-align:center;}
.live-table td{padding:6px 8px;text-align:center;border-bottom:1px solid var(--ucl-border);
    color:var(--ucl-white);}
.live-table .live-team{text-align:left!important;font-weight:700;
    display:flex;align-items:center;gap:6px;}
.live-table tr:hover td{background:rgba(255,215,0,.04);}
.live-pts{font-weight:900;color:var(--ucl-gold)!important;}
.live-pos{font-weight:900;color:var(--ucl-gray);}
.live-pos-diff{color:var(--ucl-green);font-weight:800;}
.live-neg-diff{color:var(--ucl-red);font-weight:800;}
.live-section{background:var(--ucl-card);border:1px solid var(--ucl-border);
    border-radius:14px;margin:10px 12px;overflow:hidden;}
.live-section-title{
    padding:10px 14px;font-weight:900;font-size:12px;
    background:linear-gradient(135deg,var(--ucl-blue),var(--ucl-dark));
    color:var(--ucl-gold);border-bottom:1px solid var(--ucl-border);
}
.live-row-q{background:rgba(0,200,81,.06)!important;}
.live-row-elim{background:rgba(255,61,61,.04)!important;color:rgba(255,255,255,.4)!important;}
.live-badge-q{background:#00c851;color:white;font-size:9px;font-weight:800;
    padding:2px 6px;border-radius:8px;white-space:nowrap;}
.live-badge-e{background:var(--ucl-red);color:white;font-size:9px;font-weight:800;
    padding:2px 6px;border-radius:8px;white-space:nowrap;}
.live-table-scroll{overflow-x:auto;}

/* ══════════════════ TOAST ══════════════════ */
#toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
    z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{padding:10px 20px;border-radius:12px;font-size:13px;font-weight:700;
    color:white;animation:toastIn .3s ease;backdrop-filter:blur(10px);
    max-width:340px;text-align:center;
    background:rgba(27,58,107,.95);border:1px solid rgba(255,215,0,.3);
    box-shadow:0 8px 24px rgba(0,0,0,.4);}
.toast.success{background:rgba(0,166,81,.9);}
.toast.warn{background:rgba(230,81,0,.9);}
.toast.lock{background:rgba(183,28,28,.9);}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════ CONNEXION ══════════════════ */
#loginScreen{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:20px;
}
.login-card{
    background:var(--ucl-card);border:1px solid var(--ucl-border);
    border-radius:20px;padding:32px 28px;max-width:360px;width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center;
}
.login-logo{font-size:48px;margin-bottom:12px;
    filter:drop-shadow(0 0 20px rgba(255,215,0,.5));}
.login-title{font-size:20px;font-weight:900;color:var(--ucl-white);margin-bottom:4px;}
.login-sub{font-size:12px;color:var(--ucl-gray);margin-bottom:24px;}
.login-input{
    width:100%;padding:12px 16px;border-radius:12px;
    background:var(--ucl-dark);border:2px solid var(--ucl-border);
    color:var(--ucl-white);font-size:14px;margin-bottom:10px;
    transition:var(--tr);
}
.login-input:focus{outline:none;border-color:var(--ucl-gold);}
.login-input::placeholder{color:var(--ucl-gray);}

/* ══════════════════ CHAT ══════════════════ */
.chat-msg{
    background:var(--ucl-card);border:1px solid var(--ucl-border);
    border-radius:12px;padding:10px 14px;margin:6px 12px;
}
.chat-msg-header{font-size:11px;font-weight:800;color:var(--ucl-gold);margin-bottom:4px;}
.chat-msg-text{font-size:12px;color:var(--ucl-white);line-height:1.5;}
.chat-msg-system{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.05);}

/* ══════════════════ FIFA SYNC STATUS ══════════════════ */
.ucl-sync-status{
    font-size:12px;font-weight:700;color:var(--ucl-gray);
    padding:8px 12px;background:rgba(255,255,255,.04);
    border-radius:8px;margin-top:8px;border:1px solid var(--ucl-border);
}
.ucl-sync-ok{color:var(--ucl-green);background:rgba(0,200,81,.08);}
.ucl-sync-error{color:var(--ucl-red);background:rgba(255,61,61,.08);}

/* ══════════════════ LOCK CONTROLS ══════════════════ */
.lock-controls{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.lock-control-row{display:flex;align-items:center;justify-content:space-between;
    padding:10px 12px;background:rgba(255,255,255,.04);border-radius:10px;
    border:1px solid var(--ucl-border);}
.lock-control-label{font-weight:800;font-size:12px;color:var(--ucl-white);}
.btn-lock-toggle{padding:6px 14px;border-radius:16px;font-size:11px;font-weight:800;
    cursor:pointer;border:none;transition:var(--tr);}
.btn-lock-off{background:rgba(0,200,81,.15);color:#00c851;}
.btn-lock-off:hover{background:#00c851;color:white;}
.btn-lock-on{background:rgba(255,61,61,.15);color:var(--ucl-red);}
.btn-lock-on:hover{background:var(--ucl-red);color:white;}

/* ══════════════════ DOT / TAG ME ══════════════════ */
.dot-me{color:var(--ucl-gold);font-size:10px;}
.tag-me{background:linear-gradient(135deg,var(--ucl-gold),var(--ucl-gold2));
    color:var(--ucl-dark);padding:1px 6px;border-radius:8px;
    font-size:8px;font-weight:900;flex-shrink:0;}
.lock-icon{font-size:10px;flex-shrink:0;}

/* ══════════════════ SELECT / INPUTS ══════════════════ */
.select-wrap{position:relative;display:inline-flex;align-items:center;}
.select-wrap select{
    appearance:none;background:var(--ucl-dark);color:var(--ucl-white);
    border:2px solid var(--ucl-border);border-radius:10px;
    padding:8px 32px 8px 12px;font-size:12px;font-weight:700;cursor:pointer;
    transition:var(--tr);
}
.select-wrap select:focus{outline:none;border-color:var(--ucl-gold);}
.sel-arrow{position:absolute;right:10px;pointer-events:none;color:var(--ucl-gray);}
.filter-lbl{font-size:11px;font-weight:800;color:var(--ucl-gray);margin-bottom:6px;display:block;}

/* ══════════════════ CHAMPION TAB ══════════════════ */
.champion-bet-card{
    background:var(--ucl-card);border:1px solid var(--ucl-border);
    border-radius:12px;padding:14px;margin:6px 0;
    transition:var(--tr);
}
.champion-bet-card:hover{border-color:rgba(255,215,0,.3);}
.champ-card-me{background:rgba(255,215,0,.06)!important;border-color:rgba(255,215,0,.4)!important;}
.champ-card-win{background:rgba(0,200,81,.08)!important;border-color:rgba(0,200,81,.4)!important;}
.champ-card-player{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.champ-player-avatar{width:24px;height:24px;object-fit:contain;}
.champ-player-name{font-size:13px;font-weight:800;color:var(--ucl-white);}
.champion-bets-grid{display:grid;grid-template-columns:repeat(2,1fr);
    gap:10px;padding:12px;}
@media(min-width:600px){.champion-bets-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.champion-bets-grid{grid-template-columns:repeat(4,1fr);}}

/* ══════════════════ PHASE DE LIGUE ══════════════════ */
.journee-header{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;margin:16px 12px 4px;
    background:linear-gradient(135deg,rgba(255,215,0,.1),rgba(255,165,0,.05));
    border:1px solid rgba(255,215,0,.2);border-radius:10px;
    font-size:13px;font-weight:900;color:var(--ucl-gold);
}
.no-clubs-banner{
    text-align:center;padding:40px 20px;
    background:var(--ucl-card);border:2px dashed var(--ucl-border);
    border-radius:16px;margin:20px 12px;
    color:var(--ucl-gray);font-size:13px;font-weight:700;line-height:2;
}
.no-clubs-banner .ucl-star-big{font-size:40px;display:block;margin-bottom:12px;}

/* ══════════════════ MOBILE ══════════════════ */
@media(max-width:600px){
    #appHeader{padding:8px 12px;}
    .match-card{margin:6px 8px;}
    .setup-card{margin:8px;}
    .rank-table-scroll{overflow-x:auto;}
    .champion-bets-grid{grid-template-columns:1fr;}
    .bets-table-inner{grid-template-columns:repeat(3,1fr);}
}