:root{
    --bg:#F1F3F6;
    --surface:#FFFFFF;
    --surface-2:#E7EBF0;
    --surface-3:#DCE2E9;
    --text:#12161C;
    --text-dim:#5B6472;
    --text-faint:#8891A0;
    --border:#D8DEE6;
    --accent:#0F6E5C;
    --accent-text:#FFFFFF;
    --accent-2:#B8582A;
    --danger:#B0342E;
    --home-color:#0F6E5C;
    --draw-color:#8891A0;
    --away-color:#B8582A;
    --shadow: 0 1px 2px rgba(20,24,30,.06);
    --radius-sm:3px;
    --radius-md:6px;
    --font-display:'Space Grotesk', system-ui, sans-serif;
    --font-body:'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;

    --l-premier:#6B3FA0;
    --l-laliga:#D9782F;
    --l-bundesliga:#C81E3A;
    --l-seriea:#1C6DD0;
    --l-ligue1:#1F8A70;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0B0F14;
      --surface:#121821;
      --surface-2:#1B222C;
      --surface-3:#242D39;
      --text:#E7ECF2;
      --text-dim:#96A1B1;
      --text-faint:#5F6B7C;
      --border:#26303C;
      --accent:#2DD4BF;
      --accent-text:#04201B;
      --accent-2:#F0A857;
      --danger:#F0605A;
      --home-color:#2DD4BF;
      --draw-color:#8A96A6;
      --away-color:#F0A857;
      --shadow: 0 1px 2px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B0F14;
    --surface:#121821;
    --surface-2:#1B222C;
    --surface-3:#242D39;
    --text:#E7ECF2;
    --text-dim:#96A1B1;
    --text-faint:#5F6B7C;
    --border:#26303C;
    --accent:#2DD4BF;
    --accent-text:#04201B;
    --accent-2:#F0A857;
    --danger:#F0605A;
    --home-color:#2DD4BF;
    --draw-color:#8A96A6;
    --away-color:#F0A857;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent);color:var(--accent-text);}

  a{color:inherit;}
  button{font-family:inherit;}
  input,select,textarea{font-family:inherit;font-size:14px;}

  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

  /* ---------- layout shell ---------- */
  #app{min-height:100vh;display:flex;flex-direction:column;}

  .topbar{
    position:sticky;top:0;z-index:20;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }
  .topbar-inner{
    max-width:1180px;margin:0 auto;padding:14px 20px;
    display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;}
  .brand-logo{
    width:46px;height:46px;object-fit:contain;display:block;flex:none;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
  }
  .brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1.15;}
  .brand-mark{
    font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-0.01em;
  }
  .brand-sub{font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono);margin-top:4px;white-space:nowrap;}

  .page-identity{
    position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
    margin:0 0 24px;padding:14px 18px;background:var(--surface);
    border:1px solid var(--border);border-left:4px solid #d4af37;border-radius:var(--radius-md);
  }
  .page-identity-logo{width:42px;height:42px;object-fit:contain;flex:none;}
  .page-identity-copy{display:flex;flex-direction:column;gap:2px;}
  .page-identity-title{font-family:var(--font-display);font-size:15px;font-weight:700;}
  .page-identity-sub{font-size:12px;color:var(--text-faint);}

  .tabs{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:var(--radius-md);}
  .tab-btn{
    border:0;background:transparent;color:var(--text-dim);
    padding:7px 14px;border-radius:4px;font-size:13.5px;font-weight:500;cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .tab-btn:hover{color:var(--text);}
  .tab-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow);}

  .theme-toggle{
    border:1px solid var(--border);background:var(--surface);color:var(--text-dim);
    width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;font-size:15px;
    display:flex;align-items:center;justify-content:center;
  }
  .theme-toggle:hover{color:var(--text);border-color:var(--text-faint);}

  .league-filter{
    max-width:1180px;margin:0 auto;padding:0 20px 14px;
    display:flex;gap:8px;flex-wrap:wrap;
  }
  .chip{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--border);background:var(--surface);
    padding:5px 12px 5px 9px;border-radius:100px;cursor:pointer;
    font-size:12.5px;font-weight:500;color:var(--text-dim);
    transition:border-color .15s ease, color .15s ease;
  }
  .chip:hover{color:var(--text);}
  .chip.active{border-color:var(--chip-color, var(--accent));color:var(--text);background:color-mix(in srgb, var(--chip-color, var(--accent)) 12%, var(--surface));}
  .chip-dot{width:8px;height:8px;border-radius:50%;background:var(--chip-color, var(--accent));flex:none;}

  main{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:24px 20px 80px;}

  /* ---------- generic ---------- */
  .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:32px 0 14px;}
  .section-head:first-child{margin-top:0;}
  .section-title{font-family:var(--font-display);font-weight:600;font-size:16px;display:flex;align-items:center;gap:9px;}
  .section-count{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}

  .btn{
    display:inline-flex;align-items:center;gap:7px;border-radius:var(--radius-md);
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    padding:9px 16px;font-size:13.5px;font-weight:500;cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .btn:hover{border-color:var(--text-faint);}
  .btn:disabled{opacity:.5;cursor:not-allowed;}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);}
  .btn-primary:hover{filter:brightness(1.06);border-color:var(--accent);}
  .btn-ghost{border-color:transparent;background:transparent;padding:9px 10px;}
  .btn-ghost:hover{background:var(--surface-2);}
  .btn-sm{padding:6px 11px;font-size:12.5px;}
  .btn-danger{color:var(--danger);}

  .card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  }

  .empty-state{
    border:1px dashed var(--border);border-radius:var(--radius-md);
    padding:46px 24px;text-align:center;color:var(--text-dim);
  }
  .empty-state h3{font-family:var(--font-display);font-size:16px;color:var(--text);margin:0 0 6px;font-weight:600;}
  .empty-state p{margin:0 0 18px;font-size:13.5px;max-width:420px;margin-left:auto;margin-right:auto;}
  .empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

  .toast-stack{position:fixed;bottom:18px;right:18px;z-index:60;display:flex;flex-direction:column;gap:8px;}
  .toast{
    background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
    padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;box-shadow:0 4px 18px rgba(0,0,0,.14);
    max-width:320px;
  }
  .toast.error{border-left-color:var(--danger);}

  /* ---------- dashboard match grid ---------- */
  .matchday-label{
    font-size:12px;color:var(--text-faint);font-family:var(--font-mono);
    margin:22px 0 10px;text-transform:uppercase;letter-spacing:.04em;
  }
  .match-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(272px,1fr));gap:12px;}
  .match-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
    padding:16px;cursor:pointer;transition:border-color .15s ease, transform .1s ease;
    display:flex;flex-direction:column;gap:12px;
  }
  .match-card:hover{border-color:var(--text-faint);}
  .match-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .league-tag{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-dim);font-weight:500;}
  .league-dot{width:7px;height:7px;border-radius:50%;background:var(--tag-color,var(--accent));flex:none;}
  .match-date{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);}
  .match-teams{display:flex;flex-direction:column;gap:3px;}
  .team-line{font-family:var(--font-display);font-weight:600;font-size:16.5px;letter-spacing:-.01em;}
  .team-line.away{color:var(--text-dim);font-weight:500;font-size:15px;}
  .quick-probs{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--surface-2);}
  .quick-probs > div{height:100%;}
  .quick-probs-legend{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
  .card-footer-btn{
    text-align:left;font-size:12.5px;color:var(--accent);font-weight:600;padding-top:2px;
    border-top:1px solid var(--border);margin-top:2px;padding-top:10px;
  }

  /* ---------- match detail ---------- */
  .back-link{background:none;border:0;color:var(--text-dim);font-size:13px;cursor:pointer;padding:6px 0;margin-bottom:16px;font-weight:500;}
  .back-link:hover{color:var(--text);}
  .detail-header{margin-bottom:24px;}
  .detail-league{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);margin-bottom:10px;}
  .detail-teams{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,4vw,32px);letter-spacing:-.015em;line-height:1.15;}
  .detail-teams .vs{color:var(--text-faint);font-weight:500;padding:0 10px;font-size:.6em;}
  .detail-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--text-dim);}
  .detail-meta b{color:var(--text);font-weight:600;}

  .confidence-badge{
    display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
    padding:3px 9px;border-radius:100px;border:1px solid var(--border);color:var(--text-dim);
  }
  .confidence-dot{width:6px;height:6px;border-radius:50%;}

  .detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start;}
  @media (max-width:820px){.detail-grid{grid-template-columns:1fr;}}

  .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 18px 16px;}
  .panel-title{font-family:var(--font-display);font-weight:600;font-size:14px;margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;}
  .panel + .panel{margin-top:16px;}
  .chart-wrap{position:relative;height:150px;}
  .chart-wrap.tall{height:210px;}

  .stat-rows{display:flex;flex-direction:column;gap:10px;}
  .stat-row{display:flex;align-items:center;gap:10px;font-size:13px;}
  .stat-row .stat-label{width:112px;flex:none;color:var(--text-dim);}
  .stat-row .stat-bars{flex:1;display:flex;gap:6px;align-items:center;}
  .stat-bar-track{flex:1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
  .stat-bar-fill{height:100%;border-radius:3px;}
  .stat-value{width:38px;text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}

  .form-pills{display:flex;gap:5px;}
  .form-pill{
    width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;font-family:var(--font-mono);color:#fff;
  }
  .form-v{background:var(--home-color);}
  .form-n{background:var(--text-faint);}
  .form-d{background:var(--danger);}

  .team-compare-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .team-compare-col h4{font-size:12.5px;margin:0 0 8px;color:var(--text-dim);font-weight:600;}

  table.h2h{width:100%;border-collapse:collapse;font-size:12.5px;}
  table.h2h th{text-align:left;color:var(--text-faint);font-weight:500;font-size:11px;padding:0 8px 8px 0;text-transform:uppercase;letter-spacing:.03em;}
  table.h2h td{padding:8px 8px 8px 0;border-top:1px solid var(--border);}
  table.h2h td.score{font-family:var(--font-mono);font-weight:600;}

  .analysis-box{white-space:pre-wrap;font-size:13.5px;line-height:1.65;color:var(--text);}
  .analysis-placeholder{color:var(--text-faint);font-size:13px;}
  .analysis-loading{color:var(--text-dim);font-size:13px;display:flex;align-items:center;gap:8px;}
  .spinner{
    width:13px;height:13px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ---------- forms ---------- */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media (max-width:600px){.form-grid{grid-template-columns:1fr;}}
  .field{display:flex;flex-direction:column;gap:5px;}
  .field label{font-size:12px;color:var(--text-dim);font-weight:500;}
  .field input, .field select, .field textarea{
    border:1px solid var(--border);background:var(--bg);color:var(--text);
    border-radius:var(--radius-sm);padding:9px 10px;font-size:13.5px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;}
  .field textarea{resize:vertical;min-height:120px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;}
  .form-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
  .hint{font-size:12px;color:var(--text-faint);margin:6px 0 0;}
  .divider{height:1px;background:var(--border);margin:28px 0;}

  .preview-table-wrap{overflow-x:auto;margin-top:14px;}
  table.preview{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;}
  table.preview th{text-align:left;color:var(--text-faint);font-weight:500;padding:6px 10px 6px 0;border-bottom:1px solid var(--border);}
  table.preview td{padding:7px 10px 7px 0;border-bottom:1px solid var(--border);}

  .teams-league-group{margin-bottom:26px;}
  .teams-league-head{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:14.5px;margin-bottom:10px;}
  .team-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 4px;border-top:1px solid var(--border);font-size:13.5px;
  }
  .team-row:first-of-type{border-top:none;}
  .team-row-stats{display:flex;gap:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);}

  @media (max-width:640px){
    .topbar-inner{gap:12px;}
    .brand-logo{width:40px;height:40px;}
    .brand-mark{font-size:17px;}
    .brand-sub{font-size:10.5px;}
    .tabs{order:3;width:100%;}
    .tab-btn{flex:1;padding:7px 8px;}
    .page-identity{padding:11px 13px;margin-bottom:18px;}
    .page-identity-logo{width:36px;height:36px;}
    main{padding:18px 14px 70px;}
  }

/* ---------- half-time breakdown & betting proposal (standalone app additions) ---------- */
.half-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:500px){.half-grid{grid-template-columns:1fr;}}
.half-col{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;}
.half-col h5{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--text-dim);}
.half-row{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:6px;}
.half-row .half-label{width:64px;flex:none;color:var(--text-dim);font-family:var(--font-mono);font-size:11.5px;}
.half-row .half-bar-track{flex:1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
.half-row .half-bar-fill{height:100%;background:var(--accent);border-radius:3px;}
.half-row .half-val{width:34px;text-align:right;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.half-expected{margin-top:8px;font-size:11.5px;color:var(--text-faint);}

.scores-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.score-chip{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px;background:var(--bg);
}
.score-chip .score-val{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;}
.score-chip .score-p{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}

.bet-picks{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.bet-pick{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:13px;
}
.bet-pick.niveau-prudent, .bet-pick.niveau-à-éviter{border-left-color:var(--text-faint);}
.bet-pick.niveau-modéré{border-left-color:var(--accent-2);}
.bet-pick-left{display:flex;flex-direction:column;gap:2px;}
.bet-pick-market{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em;}
.bet-pick-selection{font-weight:600;font-family:var(--font-display);}
.bet-pick-prob{font-family:var(--font-mono);font-size:13px;color:var(--accent);font-weight:600;flex:none;}
.bet-note{font-size:12.5px;color:var(--text-dim);margin:4px 0;line-height:1.5;}
.bet-warning{font-size:11.5px;color:var(--text-faint);margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}

.source-badge{font-size:10.5px;font-family:var(--font-mono);color:var(--text-faint);border:1px solid var(--border);border-radius:100px;padding:2px 8px;margin-left:8px;}