:root{
  --blue:#0a6ec9; --blue-d:#08529b; --blue-dd:#063d75; --blue-h:#1a7fd6; --blue-line:#0c5fae;
  --ink:#141a22; --mut:#66707b; --line:#e2e7ec; --bg:#eef2f6;
  --side:#12233a; --side2:#1a2e49; --side3:#243c5c; --side-line:#0d1c30;
  --odd:#243c5c; --odd-h:#2e4a70; --gold:#ffc21e; --gold-d:#c98a00;
  --txt-d:#c4d0de;
  --it-g:#00934b; --it-r:#e63328;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1400px;margin:0 auto}

/* Tricolore accent stripe */
.tricolore{height:4px;display:flex}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--it-g)}
.tricolore i:nth-child(2){background:#fff}
.tricolore i:nth-child(3){background:var(--it-r)}

/* Header */
header{background:linear-gradient(180deg,var(--blue),var(--blue-d));color:#fff;padding:15px 18px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:44px;height:44px;flex:none}
.logo .name{font-size:23px;font-weight:900;letter-spacing:-.4px;line-height:1}
.logo .name b{color:var(--gold);font-weight:900}
.logo .tag{font-size:11.5px;font-weight:600;opacity:.85;margin-top:2px;text-transform:uppercase;letter-spacing:.6px}
.head-right{margin-left:auto;display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:800;border-radius:8px;padding:0 18px;height:41px;cursor:pointer;border:none;font-size:14px;white-space:nowrap;transition:transform .05s,filter .15s}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-gold{background:var(--gold);color:#3a2c00}
.btn-gold:hover{filter:brightness(1.06)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-h)}

/* Primary nav */
.nav1{background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:34px}
.nav1 a{padding:14px 4px;font-weight:700;color:#5a626b;border-bottom:3px solid transparent;text-transform:uppercase;font-size:13.5px;letter-spacing:.4px}
.nav1 a.on{color:var(--blue-d);border-bottom-color:var(--blue)}
.nav2{background:#f3f6f9;border-bottom:1px solid var(--line);display:flex;gap:24px;padding:9px 18px;overflow-x:auto;scrollbar-width:none}
.nav2::-webkit-scrollbar{display:none}
.nav2 a{font-size:12.5px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.nav2 a.on{color:var(--blue-d)}
.nav2 a:hover{color:var(--blue-d)}
.navsite{background:#fff;border-bottom:1px solid var(--line);display:flex;gap:6px;padding:9px 18px;overflow-x:auto;scrollbar-width:none}
.navsite::-webkit-scrollbar{display:none}
.navsite a{font-size:13px;font-weight:700;color:var(--blue-d);padding:6px 12px;border-radius:6px;white-space:nowrap}
.navsite a:hover{background:#e9f2fb}
.navsite a.on{background:var(--blue);color:#fff}

/* Layout */
.layout{display:grid;grid-template-columns:248px minmax(0,1fr) 300px;gap:14px;padding:14px 18px;align-items:start}

/* Sidebar (sport menu) */
.side{background:var(--side);border-radius:10px;overflow:hidden;color:var(--txt-d);font-size:13px}
.side .filt{display:flex;gap:4px;padding:10px;flex-wrap:wrap;border-bottom:1px solid var(--side-line)}
.side .filt span{font-size:11px;font-weight:700;padding:4px 7px;border-radius:4px;background:var(--side3);cursor:pointer;color:#aeb9c8}
.side .filt span.on{background:var(--blue);color:#fff}
.side .search{padding:10px}
.side .search input{width:100%;background:var(--side3);border:none;border-radius:6px;padding:9px 12px;color:#fff;font-size:13px}
.side .search input::placeholder{color:#8b98a9}
.days{display:flex;gap:3px;padding:0 10px 10px;border-bottom:1px solid var(--side-line)}
.days a{flex:1;text-align:center;font-size:11px;font-weight:700;padding:6px 0;border-radius:4px;background:var(--side3);color:#aeb9c8}
.days a:hover{background:var(--blue);color:#fff}
.qf{margin:10px;background:var(--gold);color:#3a2c00;font-weight:800;text-align:center;padding:11px;border-radius:6px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.side-h{background:var(--side2);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.4px;padding:11px 12px;color:#fff;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--side-line)}
.side-h .c{background:var(--blue);color:#fff;border-radius:10px;font-size:11px;padding:1px 8px}
.srow{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid var(--side-line);cursor:pointer}
.srow:hover{background:var(--side2)}
.srow .ico{width:18px;height:18px;flex:none;opacity:.92}
.srow .nm{flex:1;font-weight:600;color:#e7edf4}
.srow.sub{padding-left:20px;font-size:12.5px}
.srow.sub .nm{color:#c2ccd8;font-weight:500}
.srow .c{color:#8b98a9;font-size:12px;font-variant-numeric:tabular-nums}
.flag{width:18px;height:13px;border-radius:2px;flex:none;background:#555;overflow:hidden;display:inline-block}

/* Center */
.main{min-width:0;display:flex;flex-direction:column;gap:14px}
.hero{background:linear-gradient(120deg,var(--blue-dd),var(--blue));border-radius:12px;padding:26px 28px;color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--it-g),#fff,var(--it-r))}
.hero:after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.hero .kick{font-size:13px;font-weight:700;letter-spacing:.5px;opacity:.92;text-transform:uppercase}
.hero h1{font-size:27px;font-weight:900;margin:8px 0 6px;line-height:1.15;max-width:660px}
.hero p{font-size:14.5px;opacity:.94;max-width:610px;margin-bottom:16px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.phero{background:linear-gradient(120deg,var(--blue-dd),var(--blue));border-radius:12px;padding:22px 26px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden}
.phero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--it-g),#fff,var(--it-r))}
.phero .kick{font-size:12.5px;font-weight:700;letter-spacing:.5px;opacity:.9;text-transform:uppercase}
.phero h1{font-size:23px;font-weight:900;margin-top:6px;line-height:1.2}
.crumb{font-size:12px;color:var(--mut);margin-bottom:10px;font-weight:600}
.crumb a{color:var(--blue-d)}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-h{background:var(--blue);color:#fff;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.4px;padding:11px 16px;display:flex;align-items:center;gap:9px}
.card-h .live{margin-left:auto;font-size:11px;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:10px}

/* match rows */
.match{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center}
.match:last-child{border-bottom:none}
.match .when{font-size:11.5px;color:var(--mut);font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.match .lg{background:#e9f2fb;color:var(--blue-d);border-radius:4px;padding:1px 7px;font-size:10.5px;font-weight:700}
.match .teams{font-weight:700;font-size:14.5px}
.match .teams .vs{color:var(--mut);font-weight:600;margin:0 6px;font-size:12px}
.odds{display:flex;gap:6px}
.odd{background:var(--odd);color:#fff;border-radius:6px;padding:7px 0;width:62px;text-align:center;cursor:pointer;line-height:1.1}
.odd:hover{background:var(--odd-h)}
.odd .k{display:block;font-size:10px;color:#a9b6c8;font-weight:700;margin-bottom:2px}
.odd .v{font-weight:800;color:var(--gold);font-size:14px}

/* SEO content */
.seo{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 30px}
.seo h2{font-size:21px;font-weight:800;margin:26px 0 12px;color:var(--ink)}
.seo h2:first-child{margin-top:0}
.seo h3{font-size:16px;font-weight:800;margin:18px 0 8px;color:#2c333a}
.seo p{color:#3a424b;margin-bottom:12px}
.seo ul,.seo ol{margin:10px 0 14px 4px;list-style:none;color:#3a424b}
.seo li{position:relative;padding:5px 0 5px 24px}
.seo ul li:before{content:"";position:absolute;left:3px;top:13px;width:7px;height:7px;border-radius:2px;background:var(--blue)}
.seo ol{counter-reset:n}.seo ol li{counter-increment:n}
.seo ol li:before{content:counter(n);position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:5px;background:#e9f2fb;color:var(--blue-d);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.otable{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:14px 0;font-size:13.5px}
.otable td{padding:11px 14px;border-bottom:1px solid var(--line)}
.otable tr:last-child td{border-bottom:none}
.otable td:first-child{font-weight:700;width:42%;background:#f5f8fb}
.codebox{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:#e9f2fb;border:1px dashed var(--blue);border-radius:8px;padding:14px 18px;margin:14px 0}
.codebox b{font-size:18px;color:var(--blue-d);letter-spacing:2px;font-weight:900}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.pc .col{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fafbfc}
.pc h3{margin:0 0 10px;font-size:15px}
.pc .pro h3{color:var(--it-g)}.pc .con h3{color:#d9663a}
.pc ul{margin:0}.pc li{padding:5px 0 5px 24px;font-size:13.5px}
.pc ul li:before{content:none}
.pc .pro li:before{content:"✓";position:absolute;left:2px;color:var(--it-g);font-weight:800}
.pc .con li:before{content:"–";position:absolute;left:4px;color:#d9663a;font-weight:800}
.faq details{border:1px solid var(--line);border-radius:8px;margin-bottom:9px;overflow:hidden}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px;background:#fafbfc}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--blue);font-weight:800;font-size:19px}
.faq details[open] summary:after{content:"–"}
.faq .ans{padding:12px 16px;color:#3a424b}
.intlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.intlinks a{background:#e9f2fb;color:var(--blue-d);font-weight:700;font-size:13px;padding:7px 13px;border-radius:6px}
.intlinks a:hover{background:var(--blue);color:#fff}
.rating{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:14px 0;background:#fafbfc}
.rating .num{font-size:36px;font-weight:900;color:var(--blue-d);line-height:1}
.rating .st{color:var(--gold-d);font-size:17px;letter-spacing:1px}
.rating .by{color:var(--mut);font-size:12.5px;margin-top:3px}

/* multi-column markdown tables (confronto bonus, ecc — diverso da .otable key-value) */
.mdtable{overflow-x:auto;margin:14px 0}
.mdtable table{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mdtable th,.mdtable td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left}
.mdtable th{background:#f5f8fb;font-weight:800;color:var(--ink)}
.mdtable tr:last-child td{border-bottom:none}

/* CTA box nelle sottopagine */
.ctabox{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,var(--blue-dd),var(--blue));border-radius:12px;padding:18px 22px;margin:20px 0;color:#fff}
.ctabox b{color:var(--gold)}
.ctabox .btn{height:42px;padding:0 24px}

/* modello email/testo da copiare (blockquote) */
.mailbox{background:#f5f8fb;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:16px 20px;margin:16px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;color:#2c333a;white-space:pre-wrap}
.mailbox .lab{font-family:'Segoe UI',Roboto,system-ui,Arial,sans-serif;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--blue-d);margin-bottom:8px}

/* nota breve (avviso/consiglio) */
.note{background:#fff8e6;border-left:4px solid var(--gold-d);border-radius:0 8px 8px 0;padding:12px 16px;margin:14px 0;color:#3a424b;font-size:13.5px}

/* footer cluster nel fondo articolo sottopagina */
.clusterFoot{display:flex;gap:8px 16px;flex-wrap:wrap;padding:16px 0 4px;border-top:1px solid var(--line);font-size:13px;margin-top:8px}
.clusterFoot a{color:var(--blue-d);font-weight:700}

/* Right column */
.rcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.schedina .card-h{background:var(--side)}
.sched-tabs{display:flex;gap:5px;padding:10px 12px;background:var(--side2)}
.sched-tabs span{width:30px;height:30px;border-radius:6px;background:var(--side3);color:#aeb9c8;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.sched-tabs span.on{background:var(--blue);color:#fff}
.sched-empty{padding:24px 16px;text-align:center;color:var(--mut)}
.sched-empty .big{font-weight:800;color:#2c333a;margin-bottom:4px}
.promo{padding:18px 16px;text-align:center}
.promo .lab{font-size:12px;font-weight:700;color:var(--blue-d);text-transform:uppercase;letter-spacing:.4px}
.promo .amt{font-size:24px;font-weight:900;margin:6px 0 2px;color:var(--ink)}
.promo .sub{font-size:13px;color:var(--mut);margin-bottom:14px}
.appbox{padding:16px;display:flex;gap:12px;align-items:center}
.appbox .ic{width:40px;height:40px;border-radius:9px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.appbox .t{font-weight:800;font-size:14px}.appbox .s{font-size:12px;color:var(--mut)}

/* Footer */
footer{background:var(--side);color:#aeb9c8;margin-top:18px;padding:26px 18px}
.foot-in{max-width:1400px;margin:0 auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px}
.foot-nav a{color:#cdd6e2;font-weight:600;font-size:13px}
.foot-nav a:hover{color:#fff}
.foot-comp{display:flex;align-items:flex-start;gap:14px;background:#0d1c30;border-radius:9px;padding:14px 16px;font-size:12.5px;line-height:1.55;margin-bottom:12px}
.foot-comp .age{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.foot-low{font-size:12px;color:#7c8697}

@media(max-width:1080px){
  .layout{grid-template-columns:220px minmax(0,1fr)}
  .rcol{display:none}
}
@media(max-width:820px){
  .layout{grid-template-columns:minmax(0,1fr);padding:12px}
  .side{display:none}
  .nav1{gap:24px}
  .hero h1{font-size:22px}
  .pc{grid-template-columns:1fr}
  .seo{padding:20px}
  .match{grid-template-columns:1fr}
  .odds{justify-content:flex-start}
}
@media(max-width:480px){
  .logo .name{font-size:20px}.logo svg{width:38px;height:38px}
  .head-right .btn{padding:0 12px;font-size:13px}
  .odd{width:56px}
}