/* ===================== KOP APP — shared design system ===================== */
*{box-sizing:border-box;}
body{margin:0;background:#020617;font-family:'Inter',system-ui,sans-serif;color:#fff;}
a{color:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(120,160,255,.12);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}
.kop-hscroll{overflow-x:auto;scrollbar-width:thin;}
.kop-anton{font-family:'Anton',sans-serif;font-weight:400;}

/* ---- frame ---- */
.kop-pagewrap{min-height:100vh;background:radial-gradient(1100px 700px at 28% -12%, #0c2150 0%, #03081a 58%);}
.kop-shell{min-height:100vh;display:flex;background:linear-gradient(168deg,#0a1226 0%,#03081a 100%);animation:kopReveal .55s cubic-bezier(.16,1,.3,1) both;}
@keyframes kopReveal{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.kop-main{flex:1;min-width:0;padding:22px 26px 30px;}

/* ---- sidebar ---- */
.kop-aside{width:214px;flex:none;position:sticky;top:0;align-self:flex-start;height:100vh;padding:22px 16px;display:flex;flex-direction:column;gap:18px;border-right:1px solid rgba(110,150,255,.06);}
.kop-aside-logo{padding:2px 6px 2px;display:block;}
.kop-aside-logo img{height:46px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(59,157,255,.35));}
.kop-nav{display:flex;flex-direction:column;gap:3px;}
.kop-nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:#8b95b5;font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease;}
.kop-nav-item svg{width:18px;height:18px;flex:none;}
.kop-nav-item span.lbl{flex:1;}
.kop-nav-item:not(.active):hover{background:rgba(110,150,255,.07);color:#cdd7ef;}
.kop-nav-item.active{background:linear-gradient(135deg,#3b9dff,#2563eb);box-shadow:0 8px 22px rgba(37,99,235,.5),0 0 0 1px rgba(120,180,255,.25);color:#fff;font-weight:600;}
.kop-pill{font-size:9px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:6px;flex:none;}
.kop-pill-live{background:#ff2d55;color:#fff;animation:kopLive 1.4s ease-in-out infinite;}
.kop-pill-elite{background:linear-gradient(135deg,#22d37e,#0fa968);color:#04241a;}
@keyframes kopLive{0%,100%{box-shadow:0 0 12px rgba(255,45,85,.55);}50%{box-shadow:0 0 4px rgba(255,45,85,.25);}}

/* sidebar promo */
.kop-promo{margin-top:auto;position:relative;border-radius:18px;overflow:hidden;padding:16px 15px 15px;background:radial-gradient(120% 90% at 80% 0%,#143a7a 0%,#0a1838 55%,#070f24 100%);border:1px solid rgba(59,157,255,.25);box-shadow:0 0 28px rgba(37,99,235,.2);text-decoration:none;display:block;}
.kop-promo img{position:absolute;right:-14px;top:-10px;width:84px;height:auto;opacity:.95;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));}
.kop-promo .kk{font-size:9px;font-weight:800;letter-spacing:1.4px;color:#3ee08f;margin-bottom:48px;position:relative;}
.kop-promo .tt{font-size:16px;font-weight:800;line-height:1.15;position:relative;}
.kop-promo .ds{font-size:10.5px;color:#9fb0d6;line-height:1.45;margin:6px 0 12px;position:relative;}
.kop-promo .bt{position:relative;width:100%;border:none;cursor:pointer;background:linear-gradient(135deg,#3b9dff,#2563eb);color:#fff;font-family:inherit;font-size:12px;font-weight:700;padding:9px;border-radius:11px;box-shadow:0 8px 20px rgba(37,99,235,.5);}

/* ---- header ---- */
.kop-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;}
.kop-mlogo{display:none;width:38px;height:38px;object-fit:contain;flex:none;}
.kop-head h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px;}
.kop-head .sub{font-size:12.5px;color:#7c88aa;margin-top:3px;}
.kop-grow{flex:1;}
.kop-search{display:flex;align-items:center;gap:10px;background:#0a1126;border:1px solid rgba(110,150,255,.1);border-radius:12px;padding:9px 14px;width:280px;text-decoration:none;transition:border-color .2s;margin:0;}
.kop-search:hover,.kop-search:focus-within{border-color:rgba(59,157,255,.4);}
.kop-search input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;font-size:12.5px;color:#eaf1ff;}
.kop-search input::placeholder{color:#5d6a8c;}
.kop-iconbtn{position:relative;width:42px;height:42px;flex:none;border-radius:12px;background:#0a1126;border:1px solid rgba(110,150,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s;}
.kop-bell-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#ff3b5c;border:2px solid #0a1126;box-shadow:0 0 8px rgba(255,59,92,.7);}
.kop-iconbtn:hover{border-color:rgba(59,157,255,.4);}
.kop-iconbtn .dot{position:absolute;top:-5px;right:-5px;background:#ff2d55;color:#fff;font-size:9.5px;font-weight:700;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #070d20;box-shadow:0 0 10px rgba(255,45,85,.7);}
.kop-avatar{width:42px;height:42px;flex:none;border-radius:12px;overflow:hidden;border:1px solid rgba(59,157,255,.3);background:#0a1838;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.kop-avatar img{width:100%;height:100%;object-fit:cover;}

/* notif dropdown */
.kop-notif{position:absolute;top:52px;right:0;width:320px;background:#0b1426;border:1px solid rgba(110,150,255,.16);border-radius:16px;box-shadow:0 26px 60px rgba(0,0,0,.6);padding:8px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;}
.kop-notif.open{opacity:1;visibility:visible;transform:none;}
.kop-notif h4{margin:0;padding:8px 10px 10px;font-size:13px;font-weight:800;display:flex;justify-content:space-between;align-items:center;}
.kop-notif h4 a{font-size:11px;color:#4d97ff;text-decoration:none;font-weight:600;}
.kop-notif-i{display:flex;gap:10px;padding:10px;border-radius:11px;text-decoration:none;color:inherit;transition:background .15s;}
.kop-notif-i:hover{background:rgba(110,150,255,.06);}
.kop-notif-i .ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;}
.kop-notif-i .tx{font-size:12px;font-weight:600;line-height:1.35;}
.kop-notif-i .tm{font-size:10px;color:#7c88aa;margin-top:2px;}

/* ---- generic ui ---- */
.kop-card{background:#080e22;border:1px solid rgba(110,150,255,.09);border-radius:18px;}
.kop-card-link{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.kop-card-link:hover{transform:translateY(-3px);border-color:rgba(59,157,255,.45)!important;box-shadow:0 14px 34px rgba(8,14,34,.6),0 0 0 1px rgba(59,157,255,.25),0 0 30px rgba(37,99,235,.22)!important;}
.kop-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.kop-section-head h2{margin:0;font-size:15px;font-weight:700;}
.kop-seemore{font-size:12px;font-weight:600;color:#4d97ff;text-decoration:none;cursor:pointer;}
.kop-page-head{margin-bottom:22px;}
.kop-page-head .kik{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#4d97ff;margin-bottom:8px;}
.kop-page-head h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.5px;}
.kop-page-head p{margin:7px 0 0;font-size:13.5px;color:#8b95b5;max-width:620px;}

.kop-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font:inherit;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b9dff,#2563eb);box-shadow:0 10px 24px rgba(37,99,235,.45);border-radius:12px;padding:11px 18px;font-size:13.5px;text-decoration:none;transition:transform .18s,box-shadow .18s;}
.kop-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,99,235,.55);}
.kop-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font:inherit;font-weight:700;font-size:13px;color:#cfe6ff;background:rgba(59,157,255,.14);border:1px solid rgba(59,157,255,.4);border-radius:11px;padding:9px 16px;text-decoration:none;transition:background .18s;}
.kop-btn-ghost:hover{background:rgba(59,157,255,.22);}
.kop-btn-gold{background:linear-gradient(135deg,#fbbf24,#d97706);color:#1a1206;box-shadow:0 12px 28px rgba(217,119,6,.45);}
.kop-input{width:100%;background:#0a1126;border:1px solid rgba(110,150,255,.14);border-radius:12px;padding:13px 15px;font:inherit;font-size:14px;color:#fff;outline:none;transition:border-color .2s;}
.kop-input:focus{border-color:rgba(59,157,255,.55);}
.kop-input::placeholder{color:#5d6a8c;}
.kop-label{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#9fb0d6;margin-bottom:7px;display:block;}

/* badges */
.kop-badge{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:8px;}
.kop-badge-signal{background:rgba(59,157,255,.24);border:1px solid rgba(59,157,255,.55);color:#e9f4ff;}
.kop-badge-affiche{background:rgba(245,160,60,.24);border:1px solid rgba(245,160,60,.55);color:#ffe2b0;}
.kop-badge-value{background:rgba(34,211,126,.16);border:1px solid rgba(34,211,126,.32);color:#3ee08f;}
.kop-badge-live{background:rgba(255,45,85,.18);border:1px solid rgba(255,45,85,.45);color:#ff6f8b;animation:kopBadgeLive 1.8s ease-in-out infinite;}
@keyframes kopBadgeLive{0%,100%{box-shadow:0 0 0 rgba(255,45,85,0);}50%{box-shadow:0 0 8px rgba(255,45,85,.45);}}
.kop-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#9fb0d6;}
.kop-chip img{width:15px;height:15px;object-fit:contain;}

/* team crest pill (initials fallback) */
.kop-crest{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:none;}

/* confidence bar (animated) */
.kop-confwrap .top{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.4px;color:#9fb0d6;margin-bottom:5px;}
.kop-confwrap .track{height:6px;border-radius:5px;background:rgba(255,255,255,.16);}
.kop-conf{width:0;height:100%;border-radius:5px;background:linear-gradient(90deg,#1f9cff,#22d37e);box-shadow:0 0 12px rgba(34,211,126,.45);transition:width 1.1s cubic-bezier(.16,1,.3,1);}

/* confidence ring */
.kop-ring{position:relative;width:36px;height:36px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.kop-ring .in{width:28px;height:28px;border-radius:50%;background:#080e22;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:#cfe6ff;}

/* big match card (photo full-bleed + fade) */
.kop-match{position:relative;display:block;height:230px;text-decoration:none;color:inherit;background:#080e22;border:1px solid rgba(110,150,255,.09);border-radius:16px;overflow:hidden;}
.kop-match .ph{position:absolute;inset:0;background-size:cover;background-position:50% 28%;}
.kop-match .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,24,.35) 0%,rgba(4,9,24,0) 28%,rgba(4,9,24,0) 42%,rgba(4,9,24,.55) 62%,rgba(6,11,28,.93) 84%,#060b1c 100%);}
.kop-match--live .fade{background:linear-gradient(180deg,rgba(4,9,24,.18) 0%,rgba(4,9,24,0) 22%,rgba(4,9,24,0) 48%,rgba(4,9,24,.45) 65%,rgba(6,11,28,.9) 84%,#060b1c 100%);}
.kop-livepulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff2d55;flex:none;animation:kopPulse 1.5s ease-out infinite;}
@keyframes kopPulse{0%{box-shadow:0 0 0 0 rgba(255,45,85,.8);}65%{box-shadow:0 0 0 7px rgba(255,45,85,0);}100%{box-shadow:0 0 0 0 rgba(255,45,85,0);}}
.kop-match .top{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;}
.kop-match .top .lg{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#eef3ff;text-shadow:0 1px 5px rgba(0,0,0,.85);}
.kop-match .top .lg img{width:15px;height:15px;object-fit:contain;}
.kop-match .bot{position:absolute;left:0;right:0;bottom:0;padding:0 14px 14px;}
.kop-match .teams{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.kop-match .teams .t{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;}
.kop-match .teams .t img{width:30px;height:30px;object-fit:contain;}
.kop-match .teams .t .nm{font-size:11px;font-weight:700;text-shadow:0 1px 5px rgba(0,0,0,.6);}
.kop-match .teams .vs{font-size:11px;font-weight:700;color:#aebbd6;}

/* compact match row */
.kop-mini-row{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;background:#080e22;border:1px solid rgba(110,150,255,.09);border-radius:13px;padding:11px 12px;}
.kop-mini-row .nm{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kop-mini-row .ml{font-size:10px;color:#7c88aa;display:flex;align-items:center;gap:5px;margin-top:2px;}
.kop-mini-row .ml img{width:12px;height:12px;object-fit:contain;}

/* value bet card */
.kop-vbet{background:linear-gradient(168deg,#0e1730,#080d1c);border:1px solid rgba(110,150,255,.14);border-radius:16px;padding:16px;}
.kop-vbet .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.kop-vbet .mt{font-size:13.5px;font-weight:700;margin-bottom:4px;}
.kop-vbet .pk{font-size:11px;color:#9fb0d6;margin-bottom:15px;}
.kop-vbet .ft{display:flex;align-items:flex-end;justify-content:space-between;padding-top:13px;border-top:1px solid rgba(110,150,255,.1);}
.kop-vbet .lab{font-size:9px;font-weight:700;letter-spacing:.4px;color:#8fa0c4;margin-bottom:7px;}
.kop-vbet .edge{font-family:'Anton',sans-serif;font-size:25px;line-height:1;color:#3ee08f;}
.kop-vbet .cote{font-size:17px;font-weight:800;color:#fff;line-height:1;}

/* tables (standings / scorers) */
.kop-table{width:100%;border-collapse:collapse;}
.kop-table th{font-size:10px;color:#5d6a8c;font-weight:600;text-align:left;padding:0 8px 10px;letter-spacing:.03em;}
.kop-table td{padding:9px 8px;font-size:12px;border-top:1px solid rgba(110,150,255,.07);}
.kop-table td.c,.kop-table th.c{text-align:center;}
.kop-table td.r,.kop-table th.r{text-align:right;}
.kop-table .team{display:flex;align-items:center;gap:9px;font-weight:600;}
.kop-rankbox{width:20px;height:20px;border-radius:6px;background:#1a2440;color:#cdd7ef;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:10px;flex:none;}
.kop-rankbox.top{background:linear-gradient(135deg,#22d37e,#0fa968);color:#04241a;}

/* tabs */
.kop-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.kop-tab{font-size:12.5px;font-weight:700;color:#9fb0d6;background:#0a1126;border:1px solid rgba(110,150,255,.12);border-radius:10px;padding:8px 14px;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:7px;}
.kop-tab img{width:15px;height:15px;object-fit:contain;}
.kop-tab:hover{color:#fff;border-color:rgba(59,157,255,.4);}
.kop-tab.active{background:linear-gradient(135deg,#3b9dff,#2563eb);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(37,99,235,.4);}

/* app footer line */
.kop-appfoot{display:flex;align-items:center;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(110,150,255,.07);font-size:10.5px;color:#5d6a8c;flex-wrap:wrap;}
.kop-appfoot .t{font-weight:700;color:#7c88aa;}
.kop-appfoot .r{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(110,150,255,.14);padding:3px 8px;border-radius:7px;}
.kop-appfoot a{color:#7c88aa;text-decoration:none;}
.kop-appfoot a:hover{color:#cfe6ff;}

/* welcome splash */
.kop-splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;background:radial-gradient(1100px 700px at 50% -10%, #0c2150 0%, #03081a 62%);transition:opacity .55s ease,visibility .55s;}
.kop-splash.hide{opacity:0;visibility:hidden;}
.kop-splash-fox{width:150px;height:auto;filter:drop-shadow(0 16px 30px rgba(37,99,235,.5));animation:kopReveal .6s cubic-bezier(.16,1,.3,1) both;}
.kop-splash-check{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.5px;color:#3ee08f;text-transform:uppercase;margin-top:6px;}
.kop-splash-check span{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#22d37e,#0fa968);display:flex;align-items:center;justify-content:center;}
.kop-splash-title{font-family:'Anton',sans-serif;font-size:38px;letter-spacing:1px;margin:10px 0 4px;text-transform:uppercase;}
.kop-splash-sub{font-size:15px;color:#9fb0d6;max-width:420px;line-height:1.5;}
.kop-splash-sub b{color:#fff;}
.kop-splash-loader{margin-top:22px;width:180px;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;}
.kop-splash-loader i{display:block;height:100%;width:40%;border-radius:5px;background:linear-gradient(90deg,#1f9cff,#22d37e);animation:kopLoad 1.7s ease-in-out forwards;}
@keyframes kopLoad{0%{width:6%;}60%{width:72%;}100%{width:100%;}}

/* helpers / grids */
.kop-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kop-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.kop-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kop-body{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;}
.kop-col{display:flex;flex-direction:column;gap:20px;min-width:0;}
.kop-hype{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kop-mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.kop-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:1080px){.kop-mgrid{grid-template-columns:1fr 1fr!important;}}
@media(max-width:640px){.kop-mgrid{grid-template-columns:1fr!important;}}

/* ---- mobile bottom tab bar (injecté par kop-shell.js) ---- */
.kop-tabbar{display:none;}
.kop-tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;background:none;border:none;cursor:pointer;font:inherit;text-decoration:none;color:#7c88aa;padding:6px 2px;-webkit-tap-highlight-color:transparent;}
.kop-tabbar-item .ic{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;}
.kop-tabbar-item .ic svg{width:21px;height:21px;}
.kop-tabbar-item .tl{font-size:10px;font-weight:600;letter-spacing:.1px;line-height:1;}
.kop-tabbar-item.active{color:#3b9dff;}
.kop-tabbar-item.active .ic{filter:drop-shadow(0 0 8px rgba(59,157,255,.55));}
.kop-tabbar-dot{position:absolute;top:-2px;right:-3px;width:7px;height:7px;border-radius:50%;background:#ff2d55;box-shadow:0 0 8px rgba(255,45,85,.8);animation:kopLive 1.4s ease-in-out infinite;}

/* "Plus" drawer / sheet */
.kop-sheet-overlay{display:none;position:fixed;inset:0;z-index:120;background:rgba(2,6,23,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s ease;}
.kop-sheet-overlay.open{opacity:1;}
.kop-sheet{position:absolute;left:0;right:0;bottom:0;background:#080e22;border-top:1px solid rgba(110,150,255,.16);border-radius:20px 20px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px rgba(0,0,0,.6);transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);max-height:80vh;overflow-y:auto;}
.kop-sheet-overlay.open .kop-sheet{transform:none;}
.kop-sheet-grip{width:42px;height:4px;border-radius:4px;background:rgba(150,170,210,.3);margin:2px auto 12px;}
.kop-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 4px;}
.kop-sheet-head span{font-size:13px;font-weight:800;color:#cdd7ef;letter-spacing:.02em;}
.kop-sheet-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(110,150,255,.14);background:#0a1126;color:#9fb0d6;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kop-sheet-list{display:flex;flex-direction:column;gap:2px;}
.kop-sheet-item{display:flex;align-items:center;gap:13px;min-height:48px;padding:10px 12px;border-radius:12px;color:#cdd7ef;font-size:14px;font-weight:500;text-decoration:none;}
.kop-sheet-item svg{width:20px;height:20px;flex:none;color:#8b95b5;}
.kop-sheet-item .lbl{flex:1;}
.kop-sheet-item:active{background:rgba(110,150,255,.08);}
.kop-sheet-item.active{background:linear-gradient(135deg,#3b9dff,#2563eb);color:#fff;}
.kop-sheet-item.active svg{color:#fff;}
.kop-sheet-sep{height:1px;background:rgba(110,150,255,.1);margin:8px 6px;}

/* ---- responsive ---- */
@media (max-width:1080px){
  .kop-aside{display:none!important;}
  .kop-mlogo{display:block!important;}
  .kop-body{grid-template-columns:1fr!important;}
  .kop-grid-4{grid-template-columns:1fr 1fr!important;}
  .kop-main{padding:18px 18px 26px!important;}
  /* place pour la bottom bar */
  .kop-main{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;}
  .kop-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:110;align-items:stretch;background:rgba(8,14,34,.92);backdrop-filter:blur(14px);border-top:1px solid rgba(110,150,255,.12);padding:4px 4px env(safe-area-inset-bottom);box-shadow:0 -8px 30px rgba(0,0,0,.45);}
  .kop-sheet-overlay{display:block;}
  .kop-sheet-overlay:not(.open){pointer-events:none;}
}
@media (max-width:640px){
  .kop-search{display:none!important;}
  .kop-grid-2,.kop-grid-3{grid-template-columns:1fr!important;}
  .kop-grid-4{grid-template-columns:1fr 1fr!important;}
  .kop-hype{grid-template-columns:1fr!important;}
  .kop-mini{grid-template-columns:1fr!important;}
  .kop-splash-title{font-size:30px;}
  .kop-page-head h1{font-size:25px;}
  /* header app : greeting compact, pas de chevauchement */
  .kop-head{gap:12px;margin-bottom:18px;}
  .kop-head h1{font-size:18px;}
  .kop-head .sub{font-size:11.5px;}
  .kop-mlogo{width:34px;height:34px;}
  .kop-iconbtn{width:40px;height:40px;}
  .kop-avatar{width:40px;height:40px;}
  /* dropdown notif : ne déborde pas */
  .kop-notif{position:fixed;top:64px;left:12px;right:12px;width:auto;}
  /* page head plus compact */
  .kop-page-head{margin-bottom:18px;}
  .kop-page-head p{font-size:12.5px;}
  /* tabs scrollables sans déborder */
  .kop-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-2px;padding-bottom:2px;}
  .kop-tabs::-webkit-scrollbar{display:none;}
  .kop-tab{flex:none;}
  /* tableaux : scroll horizontal contenu dans la carte */
  .kop-table{min-width:420px;}
}
@media (max-width:380px){
  .kop-tabbar-item .tl{font-size:9px;}
  .kop-head h1{font-size:16.5px;}
  .kop-page-head h1{font-size:22px;}
}

/* Bandeau preuve sociale (>=70% des pronos de la veille gagnés) */
.kop-spbar{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:11px 16px;border-radius:13px;background:linear-gradient(100deg,rgba(34,211,126,.14),rgba(34,211,126,.04));border:1px solid rgba(34,211,126,.28);}
.kop-spico{font-size:18px;flex:none;line-height:1;}
.kop-sptxt{font-size:13px;color:#cfe9d8;line-height:1.4;}
.kop-sptxt b{color:#3ee08f;font-weight:800;}
.kop-splink{margin-left:auto;flex:none;font-size:12px;font-weight:700;color:#3ee08f;text-decoration:none;white-space:nowrap;border:1px solid rgba(34,211,126,.4);padding:6px 12px;border-radius:9px;}
.kop-splink:hover{background:rgba(34,211,126,.12);}
.kop-spx{flex:none;background:none;border:none;color:#7c9a86;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;}
.kop-spx:hover{color:#cfe9d8;}
@media (max-width:600px){
  .kop-splink{display:none;}
  .kop-spbar{margin-bottom:14px;padding:10px 13px;gap:10px;}
  .kop-sptxt{font-size:12px;}
}

/* ===== Feature verrouillée : flou + cadenas + CTA upgrade (réutilisable) ===== */
.kop-locked{position:relative;overflow:hidden;border-radius:14px;min-height:96px;}
.kop-locked .kop-locked-blur{filter:blur(7px);opacity:.45;pointer-events:none;user-select:none;}
.kop-lock-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px;background:rgba(8,12,26,.62);}
.kop-lock-badge{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:8px;}
.kop-lock-badge.elite{color:#1a1206;background:linear-gradient(135deg,#fbbf24,#d97706);}
.kop-lock-badge.pro{color:#fff;background:linear-gradient(135deg,#3b82f6,#0ea5e9);}
.kop-lock-txt{font-size:12.5px;color:#e8edf8;font-weight:600;max-width:260px;line-height:1.4;}
.kop-lock-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;text-decoration:none;padding:9px 16px;border-radius:10px;border:none;cursor:pointer;font-family:inherit;}
.kop-lock-cta.elite{color:#1a1206;background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 8px 20px rgba(217,119,6,.4);}
.kop-lock-cta.pro{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 8px 20px rgba(37,99,235,.4);}
.kop-lock-cta:hover{transform:translateY(-1px);}

/* ===== Modal plein écran "feature verrouillée" (KOP.featureGate) ===== */
.kop-gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,8,22,.74);backdrop-filter:blur(7px);opacity:0;transition:opacity .25s ease;}
.kop-gate.on{opacity:1;}
.kop-gate-card{position:relative;width:100%;max-width:430px;text-align:center;padding:30px 26px 26px;border-radius:24px;background:linear-gradient(168deg,#10182e,#090d18);border:1px solid rgba(110,150,255,.16);box-shadow:0 40px 110px rgba(0,0,0,.7);transform:translateY(14px) scale(.97);transition:transform .28s cubic-bezier(.16,1,.3,1);}
.kop-gate.on .kop-gate-card{transform:none;}
.kop-gate-card.elite{box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 0 1px rgba(251,191,36,.16),0 0 60px rgba(217,119,6,.18);}
.kop-gate-card.pro{box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 0 1px rgba(59,157,255,.16),0 0 60px rgba(37,99,235,.2);}
.kop-gate-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid rgba(110,150,255,.18);background:rgba(255,255,255,.05);color:#cfd9ef;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.kop-gate-x:hover{background:rgba(255,255,255,.12);}
.kop-gate-foxwrap{width:96px;height:96px;margin:4px auto 6px;display:flex;align-items:center;justify-content:center;position:relative;}
.kop-gate-foxwrap::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(59,157,255,.22),transparent 70%);}
.kop-gate-fox{width:96px;height:96px;object-fit:contain;position:relative;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));}
.kop-gate-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 11px;border-radius:20px;margin-bottom:12px;}
.kop-gate-badge.elite{color:#1a1206;background:linear-gradient(135deg,#fbbf24,#d97706);}
.kop-gate-badge.pro{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);}
.kop-gate-title{font-family:'Anton',sans-serif;font-size:25px;color:#fff;margin:0 0 8px;letter-spacing:.3px;}
.kop-gate-msg{font-size:13.5px;line-height:1.55;color:#aebbd6;margin:0 auto 22px;max-width:340px;}
.kop-gate-cta{display:inline-block;width:100%;font-size:15px;font-weight:800;text-decoration:none;padding:14px;border-radius:13px;border:none;cursor:pointer;font-family:inherit;transition:transform .12s;}
.kop-gate-cta.elite{color:#1a1206;background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 12px 30px rgba(217,119,6,.42);}
.kop-gate-cta.pro{color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 12px 30px rgba(37,99,235,.42);}
.kop-gate-cta:hover{transform:translateY(-2px);}
.kop-gate-alt{display:inline-block;margin-top:14px;font-size:12.5px;color:#8fa0c4;text-decoration:none;font-weight:600;}
.kop-gate-alt:hover{color:#cfd9ef;}

/* ===================== ROUTEUR — feedback de navigation ===================== */
/* Barre de progression fine en haut pendant le chargement d'un onglet. */
html.kop-nav-busy::before{content:'';position:fixed;top:0;left:0;right:0;height:2.5px;z-index:99999;background:linear-gradient(90deg,#1f9cff,#22d37e);animation:kopNavBar .7s ease-in-out infinite alternate;transform-origin:left;pointer-events:none;}
@keyframes kopNavBar{0%{transform:scaleX(.15);opacity:.65;}100%{transform:scaleX(.92);opacity:1;}}
/* View Transitions : fondu rapide entre onglets (navigateurs compatibles). */
::view-transition-old(root),::view-transition-new(root){animation-duration:.15s;}

/* ===================== SKELETONS (états de chargement) ===================== */
.kop-skel{position:relative;overflow:hidden;background:#0e1730;border:1px solid rgba(110,150,255,.08);border-radius:14px;min-height:20px;}
.kop-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(160,190,255,.06),transparent);animation:kopSkel 1.15s infinite;}
@keyframes kopSkel{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.kop-skel-card{height:210px;border-radius:18px;}
.kop-skel-row{height:52px;margin-bottom:10px;}
.kop-skel-text{height:13px;border-radius:7px;margin-bottom:9px;}
/* Pendant le fondu View Transition, l'overlay de snapshot ne doit PAS bloquer
   les clics (sinon les navigations très rapides "tombent dans le vide"). */
::view-transition{pointer-events:none;}

/* ===================== CARTES MATCH COMPACTES (mobile) ===================== */
/* <=640px : cartes moins hautes -> ~2,5-3 cartes visibles par écran au lieu
   de 1,5. L'image reste (identité visuelle) mais en bandeau réduit. */
@media (max-width: 640px){
  .kop-match{height:172px;}
  .kop-match .teams{margin-bottom:8px;}
  .kop-match .teams .t{gap:3px;}
  .kop-match .teams .t img,.kop-match .teams .t .kop-crest{width:24px!important;height:24px!important;}
  .kop-match .teams .nm{font-size:12px;}
  .kop-match .bot{padding:0 12px 11px;}
  .kop-match .top{top:10px;left:10px;right:10px;}
}

/* ===================== TOUR GUIDÉ (spotlight onboarding) =====================
   Style "grosses webapps" : l'interface réelle s'assombrit, la zone présentée
   reste éclairée (halo), une bulle l'explique, le spot GLISSE vers la suivante. */
.kop-tour{position:fixed;inset:0;z-index:100000;}
.kop-tour-block{position:fixed;inset:0;}/* bloque les clics pendant le tour */
.kop-tour-spot{position:fixed;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(2,6,20,.78),0 0 0 3px rgba(59,157,255,.85),0 0 34px 6px rgba(59,130,246,.55);
  transition:top .45s cubic-bezier(.16,1,.3,1),left .45s cubic-bezier(.16,1,.3,1),width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),border-radius .3s,opacity .3s;}
.kop-tour-spot.center{opacity:0;}/* étapes "centre" : pas de découpe, voile plein */
.kop-tour-veil{position:fixed;inset:0;background:rgba(2,6,20,.78);opacity:0;transition:opacity .3s;pointer-events:none;}
.kop-tour-veil.on{opacity:1;}
.kop-tour-tip{position:fixed;width:min(340px,calc(100vw - 28px));background:linear-gradient(168deg,#0e1a36 0%,#0a1226 100%);border:1px solid rgba(110,150,255,.28);border-radius:18px;padding:20px 20px 16px;box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 1px rgba(59,157,255,.1);
  transition:top .45s cubic-bezier(.16,1,.3,1),left .45s cubic-bezier(.16,1,.3,1);z-index:2;}
.kop-tour-tip.center{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 28px));text-align:center;padding:26px 24px 20px;}
.kop-tour-fox{width:88px;height:88px;object-fit:contain;margin:0 auto 10px;display:block;filter:drop-shadow(0 8px 22px rgba(37,99,235,.5));}
.kop-tour-kick{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#3ee08f;text-transform:uppercase;margin-bottom:6px;}
.kop-tour-title{font-family:'Anton',sans-serif;font-size:19px;line-height:1.15;color:#fff;margin:0 0 7px;}
.kop-tour-tip.center .kop-tour-title{font-size:24px;}
.kop-tour-txt{font-size:12.5px;line-height:1.6;color:#9fb0d6;margin:0;}
.kop-tour-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;}
.kop-tour-dots{display:flex;gap:6px;}
.kop-tour-dots i{width:6px;height:6px;border-radius:50%;background:rgba(150,170,210,.3);transition:all .25s;}
.kop-tour-dots i.on{background:#3b9dff;width:17px;border-radius:4px;}
.kop-tour-btns{display:flex;align-items:center;gap:10px;}
.kop-tour-skip{background:none;border:none;color:#7c88aa;font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:4px;}
.kop-tour-skip:hover{color:#cfd9ef;}
.kop-tour-next{border:none;cursor:pointer;font:inherit;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);padding:10px 18px;border-radius:11px;box-shadow:0 8px 22px rgba(37,99,235,.45);}
.kop-tour-next.done{background:linear-gradient(135deg,#22d37e,#0fa968);color:#04241a;box-shadow:0 8px 22px rgba(16,185,129,.4);}

/* ===================== OVERLAY ANALYSE (global : survit au routeur) ===================== */

  .aload-ov{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;background:rgba(3,7,18,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .3s;}
  .aload-ov.on{opacity:1;pointer-events:auto;}
  .aload-box{width:min(430px,90vw);text-align:center;padding:20px;}
  .aload-box .fx{width:120px;height:120px;object-fit:contain;margin:0 auto 18px;display:block;filter:drop-shadow(0 12px 30px rgba(37,99,235,.5));animation:aloadBounce 1.4s ease-in-out infinite;}
  .aload-box .tt{font-family:'Anton',sans-serif;font-size:23px;color:#fff;margin-bottom:8px;}
  .aload-box .ms{font-size:13.5px;color:#9fb6da;min-height:20px;transition:opacity .3s;}
  .aload-box .bar{margin:20px auto 0;max-width:300px;height:7px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
  .aload-box .bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#1f9cff,#22d37e);box-shadow:0 0 14px rgba(34,211,126,.45);width:4%;transition:width .7s cubic-bezier(.3,.8,.4,1);}
@keyframes aloadBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* ===================== TOASTS ===================== */
#kop-toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100001;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;}
.kop-toast{display:flex;align-items:center;gap:12px;background:linear-gradient(168deg,#0e1c38,#0a1226);border:1px solid rgba(62,224,143,.35);border-radius:14px;padding:12px 18px;font-size:13px;font-weight:700;color:#eaf1ff;box-shadow:0 14px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s;pointer-events:auto;max-width:min(480px,92vw);}
.kop-toast.on{opacity:1;transform:none;}
.kop-toast.error{border-color:rgba(255,90,120,.4);}
.kop-toast.info{border-color:rgba(59,157,255,.4);}
.kop-toast .act{flex:none;color:#04241a;background:linear-gradient(135deg,#3ee08f,#0fa968);padding:7px 13px;border-radius:9px;font-size:12px;font-weight:800;text-decoration:none;}
@media(max-width:640px){#kop-toasts{bottom:calc(74px + env(safe-area-inset-bottom));}}

/* ===================== SIGNAL DU JOUR : contour animé rotatif ===================== */
.kop-signal-ring{position:relative;border-radius:18px;padding:2px;overflow:hidden;height:100%;box-sizing:border-box;display:block;}
.kop-signal-ring .kop-match{height:calc(100% - 0px);}
.kop-signal-ring::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0%,#3ee08f 12%,#7dc0ff 26%,transparent 40%);animation:kopRingSpin 3.2s linear infinite;}
@keyframes kopRingSpin{100%{transform:rotate(360deg);}}
.kop-signal-ring>*{position:relative;z-index:1;border-radius:16px;overflow:hidden;display:block;}
.kop-signal-caption{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.kop-signal-caption i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(62,224,143,.55));}
.kop-signal-caption i:last-child{background:linear-gradient(90deg,rgba(62,224,143,.55),transparent);}
.kop-signal-caption span{flex:none;font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;background:linear-gradient(90deg,#3ee08f,#7dc0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.kop-signal-ring+*{margin-top:0;}
#dash-featured>div{display:flex;flex-direction:column;}
#dash-featured .kop-signal-ring{flex:1;}

/* Desktop : le lien logo mobile ne réserve aucun espace (greeting collé à gauche). */
@media(min-width:1081px){.kop-head > a:first-child{display:none;}}

/* Popup victoire : punch style paris sportifs */
.win-punch{animation:winPunch .55s cubic-bezier(.2,1.6,.4,1);}
@keyframes winPunch{0%{transform:scale(.4) rotate(-3deg);opacity:0;}60%{transform:scale(1.12) rotate(1.2deg);}100%{transform:scale(1) rotate(0);opacity:1;}}
.win-amount{display:inline-block;animation:winAmt .7s cubic-bezier(.2,1.5,.4,1) .15s backwards;}
@keyframes winAmt{0%{transform:scale(.3) translateY(14px);opacity:0;}65%{transform:scale(1.18);}100%{transform:scale(1);opacity:1;}}

/* ===================== SUGGESTIONS RECHERCHE (header) ===================== */
#kop-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:400;background:linear-gradient(168deg,#0e1a36,#0a1226);border:1px solid rgba(110,150,255,.22);border-radius:14px;box-shadow:0 20px 54px rgba(0,0,0,.6);overflow:hidden;display:none;}
#kop-suggest.on{display:block;}
#kop-suggest .ks-item{display:flex;align-items:center;gap:10px;padding:11px 14px;text-decoration:none;color:#eaf1ff;font-size:12.5px;border-bottom:1px solid rgba(110,150,255,.07);transition:background .12s;}
#kop-suggest .ks-item:last-child{border-bottom:none;}
#kop-suggest .ks-item:hover{background:rgba(59,130,246,.1);}
#kop-suggest .ks-item .nm{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#kop-suggest .ks-item .nm i{font-style:normal;font-size:10px;color:#5b6a8c;font-weight:800;}
#kop-suggest .ks-item .wh{flex:none;font-size:10.5px;color:#8fa0c4;}
#kop-suggest .ks-empty{padding:13px 14px;font-size:12px;color:#7c88aa;}