@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap');

  :root{
    --navy: #0B1120;
    --navy-2: #121B2E;
    --pitch: #1B4332;
    --gold: #D4AF37;
    --off-white: #F2F0E9;
    --slate: #8B96A8;
    --danger: #C0574A;
    --success: #4A9F6E;
    --scoreboard-bg: #15181B;
    --radius: 10px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background: var(--navy);
    color: var(--off-white);
    font-family:'Inter', sans-serif;
    min-height:100vh;
  }
  /* ---------- LOGIN SCREEN ---------- */
  #login-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
      radial-gradient(circle at 50% 0%, rgba(201,154,58,0.12), transparent 60%),
      var(--navy);
  }
  .login-card{
    width:100%;
    max-width:380px;
    background: var(--navy-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding:32px 28px;
    text-align:center;
  }
  .league-crest{
    width:64px;height:64px;
    margin:0 auto 16px;
    display:flex;align-items:center;justify-content:center;
  }
  .league-crest img{ width:100%; height:100%; object-fit:contain; }
  .login-card h1{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-size:18px;
    margin:0 0 4px;
    color: var(--off-white);
  }
  .login-card p.sub{
    color:var(--slate);
    font-size:13px;
    margin:0 0 24px;
  }
  .field{
    text-align:left;
    margin-bottom:14px;
  }
  .field label{
    display:block;
    font-size:12px;
    color:var(--slate);
    margin-bottom:6px;
  }
  .field input, .field select{
    width:100%;
    padding:11px 12px;
    background: var(--navy);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:6px;
    color:var(--off-white);
    font-family:'Inter',sans-serif;
    font-size:14px;
  }
  .field input:focus{
    outline:2px solid var(--gold);
    outline-offset:1px;
  }
  .btn-primary{
    width:100%;
    padding:12px;
    background: var(--gold);
    color: var(--navy);
    border:none;
    border-radius:6px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    margin-top:6px;
  }
  .btn-primary:hover{ filter:brightness(1.08); }
  .demo-hint{
    margin-top:18px;
    font-size:11.5px;
    color:var(--slate);
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:14px;
  }
  .demo-hint code{
    background:rgba(255,255,255,0.06);
    padding:2px 6px;
    border-radius:4px;
    color:var(--off-white);
  }
  .apply-link{
    display:block;
    text-align:center;
    margin-top:14px;
    font-size:12.5px;
    color:var(--gold);
    text-decoration:none;
    font-weight:600;
    cursor:pointer;
  }
  .apply-link:hover{ text-decoration:underline; }

  /* ---------- DASHBOARD ---------- */
  #dashboard{ display:none; }
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    background: var(--navy-2);
    border-bottom:1px solid rgba(255,255,255,0.08);
    flex-wrap:nowrap;
    gap:8px;
  }
  :root{
    --club-accent: #C9A63A;
    --club-secondary: #1B4332;
  }
  .club-badge{
    display:flex;align-items:center;gap:10px;
  }
  .club-logo{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;
    flex-shrink:0;
  }
  .club-logo img{ width:100%; height:100%; object-fit:contain; }
  .club-logo.no-img{
    background: linear-gradient(135deg, var(--club-accent), var(--club-secondary));
    color:#fff; border-radius:50%; width:38px; height:38px;
  }
  .club-name{ font-size:12px; color:var(--slate); white-space:nowrap; }
  .club-name strong{ display:block; color:var(--off-white); font-size:13px; white-space:nowrap; }

  .club-preview{
    display:flex; align-items:center; gap:8px;
    padding:8px 16px;
    background: rgba(255,255,255,0.02);
    border-bottom:1px solid rgba(255,255,255,0.06);
    font-size:11px; color:var(--slate);
  }
  .club-preview select{
    flex:1; max-width:200px;
    padding:5px 8px;
    background: var(--navy-2);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:6px;
    color:var(--off-white);
    font-size:12px;
  }

  .league-mark{
    display:flex;flex-direction:column;align-items:center;
    font-family:'Oswald',sans-serif;
    letter-spacing:0.12em;
    font-size:11px;
    color:var(--slate);
    text-transform:uppercase;
    flex-shrink:0;
  }
  .league-mark .crest-mini{
    width:32px;height:32px;
    margin-bottom:4px;
    object-fit:contain;
  }

  .player-block{
    text-align:left;
    flex-shrink:0;
  }
  .player-block .pname{
    font-family:'Oswald',sans-serif;
    font-size:14px;
    letter-spacing:0.03em;
    white-space:nowrap;
  }
  .player-block .pmoney{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color: var(--gold);
    margin-top:2px;
    white-space:nowrap;
  }
  .player-block .pmoney .sep{ color:var(--slate); margin:0 3px; }

  @media (max-width: 480px){
    .topbar{ padding:12px 12px; gap:6px; }
    .club-name span:not(.club-label){ } /* placeholder */
    .club-label{ display:none; }
    .league-label{ display:none; }
    .club-name strong{ font-size:12px; }
    .player-block .pname{ font-size:12px; }
    .player-block .pmoney{ font-size:11px; }
    .league-mark .crest-mini{ width:22px; height:22px; }
  }

  nav.menu{
    display:flex;
    gap:4px;
    padding:0 20px;
    background: var(--navy-2);
    border-bottom:1px solid rgba(255,255,255,0.08);
    overflow-x:auto;
  }
  nav.menu button{
    background:none;border:none;
    color:var(--slate);
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    padding:12px 14px;
    cursor:pointer;
    border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  .club-stripe{
    height:5px;
    background: linear-gradient(90deg, var(--club-accent), var(--club-secondary));
  }

  nav.menu button.active{
    color:var(--off-white);
    border-bottom:3px solid var(--club-accent);
  }

  main{
    padding:24px 20px 60px;
    max-width:640px;
    margin:0 auto;
  }

  .scoreboard{
    background: var(--scoreboard-bg);
    border:1px solid rgba(201,154,58,0.35);
    border-radius: var(--radius);
    padding:22px;
    text-align:center;
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
    box-shadow: 0 8px 24px rgba(255,255,255,0.12);
  }
  .scoreboard::before{
    content:"";
    position:absolute; inset:0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
    pointer-events:none;
  }
  .scoreboard .label{
    font-size:11px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:#9AA0A6;
    margin-bottom:8px;
  }
  .scoreboard .amount{
    font-family:'Space Mono', monospace;
    font-weight:700;
    font-size:clamp(28px, 8vw, 40px);
    color: var(--gold);
    text-shadow: 0 0 6px rgba(201,154,58,0.9), 0 0 18px rgba(201,154,58,0.6), 0 0 34px rgba(201,154,58,0.35);
    opacity:0;
    animation: flicker-in 0.6s ease-out forwards;
  }
  @keyframes flicker-in{
    0%{opacity:0; transform:translateY(4px);}
    50%{opacity:0.4;}
    100%{opacity:1; transform:translateY(0);}
  }
  .scoreboard .salary-line{
    margin-top:10px;
    font-family:'Space Mono', monospace;
    font-size:14px;
    color:#C9CDD1;
  }
  .scoreboard .salary-line strong{ color:#F2F0E9; }

  .card{
    background: var(--navy-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding:18px;
    margin-bottom:14px;
  }
  .card h3{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--slate);
    margin:0 0 12px;
  }
  .tx-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
    font-size:13px;
  }
  .tx-row:last-child{ border-bottom:none; }
  .tx-desc{ color:var(--off-white); }
  .tx-date{ display:block; font-size:11px; color:var(--slate); margin-top:2px;}
  .tx-amount.pos{ color:var(--success); font-family:'Space Mono',monospace; }
  .tx-amount.neg{ color:var(--danger); font-family:'Space Mono',monospace; }

  .badge{
    display:inline-flex;align-items:center;gap:6px;
    background: rgba(212,175,55,0.12);
    border:1px solid rgba(212,175,55,0.3);
    color:var(--gold);
    font-size:11px;
    padding:5px 10px;
    border-radius:20px;
    margin-right:6px;
    margin-bottom:6px;
  }

  .section-title{
    font-family:'Oswald',sans-serif;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--off-white);
    margin:24px 0 12px;
  }
  .section-title:first-child{ margin-top:0; }

  .shop-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:8px;
  }
  .shop-card{
    position:relative;
    border-radius: var(--radius);
    overflow:hidden;
    aspect-ratio:3/4;
    background: linear-gradient(160deg, #2A2E33, #14171A);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  }
  .shop-card-icon{
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    display:flex;align-items:center;justify-content:center;
    font-size:56px;
    opacity:0.9;
  }
  .shop-card-img{
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:1;
  }
  .shop-color-select{
    width:100%;
    font-size:12px;
    padding:6px 8px;
    margin-bottom:8px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(0,0,0,0.4);
    color:#F2F0E9;
  }
  .shop-card-overlay{
    position:relative;
    z-index:2;
    background: linear-gradient(0deg, rgba(0,0,0,0.88) 10%, rgba(0,0,0,0.55) 55%, transparent 100%);
    padding:34px 12px 12px;
  }
  .shop-tag{
    display:inline-block;
    font-size:9.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--gold);
    border:1px solid rgba(201,154,58,0.5);
    padding:2px 7px;
    border-radius:10px;
    margin-bottom:6px;
  }
  .shop-name{
    font-size:13px;
    font-weight:600;
    color:#F2F0E9;
    line-height:1.25;
    margin-bottom:8px;
  }
  .shop-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
  }
  .shop-price{
    font-family:'Space Mono', monospace;
    font-size:13px;
    color:var(--gold);
    font-weight:700;
  }
  .shop-buy{
    background: var(--gold);
    color:#14171A;
    border:none;
    border-radius:6px;
    padding:6px 10px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
  }
  .shop-buy:hover{ filter:brightness(1.08); }
  .shop-buy.locked{
    background: rgba(255,255,255,0.08);
    color: var(--slate);
    cursor:not-allowed;
  }
  .shop-buy.locked:hover{ filter:none; }

  .locked-banner{
    background: rgba(168,69,58,0.08);
    border:1px solid rgba(168,69,58,0.3);
    color: var(--danger);
    font-size:12.5px;
    padding:10px 14px;
    border-radius:8px;
    margin-bottom:16px;
    text-align:center;
    font-weight:600;
  }

  #boutique-view{ display:none; }
  #admin-view{ display:none; }
  #historique-view{ display:none; }
  #classement-view{ display:none; }

  .shop-search{
    width:100%;
    padding:11px 14px;
    background: var(--navy-2);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:20px;
    color:var(--off-white);
    font-family:'Inter',sans-serif;
    font-size:13px;
    margin-bottom:20px;
  }
  .shop-search::placeholder{ color:var(--slate); }
  .shop-empty{
    text-align:center;
    color:var(--slate);
    font-size:13px;
    padding:20px 0;
    display:none;
  }

  .stat-row{
    margin-bottom:12px;
  }
  .stat-row:last-child{ margin-bottom:0; }
  .stat-row-top{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:5px;
  }
  .stat-row-top .stat-label{ color:var(--off-white); }
  .stat-row-top .stat-value{ font-family:'Space Mono',monospace; color:var(--gold); font-weight:700; }
  .stat-row-top .stat-value.max{ color: var(--success); }
  .stat-bar-bg{
    width:100%;
    height:6px;
    background: rgba(255,255,255,0.08);
    border-radius:4px;
    overflow:hidden;
  }
  .stat-bar-fill{
    height:100%;
    background: var(--gold);
    border-radius:4px;
  }
  .stat-bar-fill.max{ background: var(--success); }
  .shop-buy.maxed{
    background: rgba(255,255,255,0.08);
    color: var(--slate);
    cursor:not-allowed;
  }
  .shop-buy.maxed:hover{ filter:none; }

  .podium{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:10px;
    margin-bottom:20px;
  }
  .podium-spot{
    flex:1;
    max-width:110px;
    background: var(--navy-2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding:14px 8px;
    text-align:center;
  }
  .podium-spot.gold{ order:2; padding-top:22px; border-color:rgba(201,154,58,0.4); }
  .podium-spot.silver{ order:1; }
  .podium-spot.bronze{ order:3; }
  .podium-rank{ font-family:'Oswald',sans-serif; font-size:20px; font-weight:700; }
  .podium-spot.gold .podium-rank{ color:var(--gold); font-size:26px; }
  .podium-spot.silver .podium-rank{ color:#9AA0A6; }
  .podium-spot.bronze .podium-rank{ color:#B5764A; }
  .podium-crest{
    width:34px;height:34px;border-radius:50%;
    background: linear-gradient(135deg, var(--pitch), #0d2b1f);
    margin:6px auto;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
  }
  .podium-name{ font-size:12px; font-weight:600; margin-top:4px; }
  .podium-amount{ font-family:'Space Mono',monospace; font-size:11px; color:var(--gold); margin-top:2px; }

  .rank-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .rank-row:last-child{ border-bottom:none; }
  .rank-num{ font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; color:var(--slate); width:20px; }
  .rank-club{
    width:30px;height:30px;border-radius:50%;
    background: linear-gradient(135deg, var(--pitch), #0d2b1f);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;flex-shrink:0;
  }
  .rank-info{ flex:1; font-size:13px; }
  .rank-info .sub{ display:block; font-size:11px; color:var(--slate); }
  .rank-amount{ font-family:'Space Mono',monospace; font-size:13px; color:var(--gold); font-weight:600; }
  .rank-row.me{ background:rgba(201,154,58,0.08); border-radius:8px; padding:11px 8px; margin:0 -8px; }

  .hist-filters{
    display:flex;
    gap:6px;
    overflow-x:auto;
    margin-bottom:16px;
    padding-bottom:2px;
  }
  .hist-filter{
    background: var(--navy-2);
    border:1px solid rgba(255,255,255,0.08);
    color:var(--slate);
    font-size:12px;
    padding:8px 12px;
    border-radius:20px;
    white-space:nowrap;
    cursor:pointer;
  }
  .hist-filter.active{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
    font-weight:600;
  }
  .hist-month{
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--slate);
    margin:18px 0 6px;
  }
  .hist-month:first-child{ margin-top:0; }
  .hist-row-icon{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;
    flex-shrink:0;
    margin-right:10px;
  }
  .hist-row-icon.salaire{ background:rgba(74,159,110,0.15); }
  .hist-row-icon.prime{ background:rgba(201,154,58,0.15); }
  .hist-row-icon.achat{ background:rgba(168,69,58,0.15); }
  .hist-line{
    display:flex;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .hist-line:last-child{ border-bottom:none; }
  .hist-line-text{ flex:1; font-size:13px; }
  .hist-line-text .sub{ display:block; font-size:11px; color:var(--slate); margin-top:2px; }
  .hist-line-amount{ font-family:'Space Mono',monospace; font-size:13px; font-weight:600; flex-shrink:0; }
  .hist-line-amount.pos{ color:var(--success); }
  .hist-line-amount.neg{ color:var(--danger); }

  .admin-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:4px;
  }
  .admin-header h2{
    font-family:'Oswald',sans-serif;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin:0;
  }
  .admin-header p{
    color:var(--slate);
    font-size:12px;
    margin:2px 0 20px;
  }

  .admin-tabs{
    display:flex;
    gap:6px;
    overflow-x:auto;
    margin-bottom:16px;
    padding-bottom:2px;
  }
  .admin-tab{
    background: var(--navy-2);
    border:1px solid rgba(255,255,255,0.08);
    color:var(--slate);
    font-size:12px;
    padding:8px 12px;
    border-radius:20px;
    white-space:nowrap;
    cursor:pointer;
  }
  .admin-tab.active{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
    font-weight:600;
  }
  .admin-panel{ display:none; }
  .admin-panel.active{ display:block; }

  .admin-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .admin-row:last-child{ border-bottom:none; }
  .admin-row-info{ font-size:13px; }
  .admin-row-info .sub{ display:block; font-size:11px; color:var(--slate); margin-top:2px; }
  .admin-row-actions{ display:flex; gap:6px; flex-shrink:0; }

  .mini-btn{
    background:none;
    border:1px solid rgba(255,255,255,0.12);
    color:var(--off-white);
    font-size:11px;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    white-space:nowrap;
  }
  .mini-btn.gold{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
    font-weight:600;
  }
  .mini-btn.done{
    background: rgba(74,159,110,0.15);
    border-color: rgba(74,159,110,0.4);
    color: var(--success);
  }
  .mini-btn.danger{
    border-color: rgba(192,87,74,0.4);
    color: var(--danger);
  }

  .admin-form-row{
    display:flex;
    gap:8px;
    margin-bottom:10px;
    flex-wrap:wrap;
  }
  .admin-form-row select, .admin-form-row input{
    flex:1;
    min-width:110px;
    padding:9px 10px;
    background: var(--navy);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:6px;
    color:var(--off-white);
    font-size:13px;
    font-family:'Inter',sans-serif;
  }

  .admin-locked{
    border:1px solid rgba(168,69,58,0.35) !important;
    background: rgba(168,69,58,0.04);
  }
  .lock-tag{
    display:inline-block;
    font-size:10.5px;
    letter-spacing:0.04em;
    color: var(--danger);
    background: rgba(168,69,58,0.12);
    border:1px solid rgba(168,69,58,0.3);
    padding:3px 9px;
    border-radius:12px;
    margin-bottom:10px;
  }

  .prime-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
    font-size:13px;
  }
  .prime-row:last-child{ border-bottom:none; }
  .prime-row label{ display:flex; align-items:center; gap:8px; }
  .prime-row input[type="text"]{
    width:100px;
    padding:6px 8px;
    background: var(--navy);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:6px;
    color:var(--off-white);
    font-size:12px;
  }
  .prime-row.hidden{ display:none; }

  .logout{
    display:block;
    margin:26px auto 0;
    background:none;
    border:1px solid rgba(255,255,255,0.15);
    color:var(--slate);
    padding:8px 16px;
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
  }