:root{
 --bg:#020d18;
 --panel:#061b2d;
 --line:rgba(65,170,225,.2);
 --text:#eef8ff;
 --muted:#819bad;
 --cyan:#34ceff;
 --green:#43e3a8;
 --yellow:#ffd65a;
 --orange:#ff9c43;
 --red:#ff5069
}

*{box-sizing:border-box}

body{
 margin:0;
 min-height:100vh;
 font-family:Arial,Helvetica,sans-serif;
 color:var(--text);
 background:
 radial-gradient(circle at 75% 0,rgba(14,116,180,.20),transparent 35%),
 #020d18
}

.shell{
 width:100%;
 padding:28px 34px
}

header{
 display:flex;
 justify-content:space-between;
 align-items:center
}

.brand{
 display:flex;
 align-items:center;
 gap:12px
}

.logo{
 width:52px;
 height:52px;
 display:grid;
 place-items:center;
 border:1px solid #168bc0;
 border-radius:15px;
 color:var(--cyan);
 font-size:36px;
 background:#062038
}

.brand>div:last-child{
 display:flex;
 flex-direction:column
}

.brand strong{
 font-size:19px;
 letter-spacing:.06em
}

.brand span{
 color:var(--cyan);
 font-size:12px;
 font-weight:bold;
 letter-spacing:.16em;
 margin-top:5px
}

.status,.update{
 display:flex;
 align-items:center;
 gap:9px;
 color:#91aeaa;
 font-size:11px;
 border:1px solid rgba(67,227,168,.22);
 padding:10px 14px;
 border-radius:999px;
 background:rgba(4,46,48,.3)
}

.status i,.update i,footer i{
 width:8px;
 height:8px;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 12px var(--green)
}

.hero{
 min-height:240px;
 display:grid;
 grid-template-columns:1fr 380px;
 align-items:center;
 position:relative;
 overflow:hidden
}

.hero small,.title small,.stats small{
 color:var(--cyan);
 font-weight:bold;
 font-size:10px;
 letter-spacing:.13em
}

.hero h1{
 font-size:66px;
 line-height:.92;
 margin:9px 0 15px;
 letter-spacing:-.05em
}

.hero h1 span{
 color:var(--cyan)
}

.hero p{
 max-width:680px;
 line-height:1.5;
 color:#a5b7c4;
 font-size:16px
}

.update{
 width:max-content;
 color:#9eb4c3;
 border-color:rgba(51,193,244,.2)
}

.radar{
 width:220px;
 height:220px;
 position:relative;
 justify-self:center
}

.radar span{
 position:absolute;
 border:1px solid rgba(53,203,255,.22);
 border-radius:50%;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%)
}

.radar span:nth-child(1){width:70px;height:70px}
.radar span:nth-child(2){width:140px;height:140px}
.radar span:nth-child(3){width:210px;height:210px}

.radar b{
 position:absolute;
 width:10px;
 height:10px;
 background:var(--orange);
 border-radius:50%;
 left:65%;
 top:35%;
 box-shadow:0 0 20px var(--orange)
}

.stats{
 display:grid;
 grid-template-columns:1.6fr 1fr 1fr 1fr;
 gap:12px
}

.stats article,.panel,.strong-grid article{
 border:1px solid var(--line);
 border-radius:17px;
 background:linear-gradient(145deg,#08243a,#041725)
}

.stats article{
 min-height:125px;
 padding:18px;
 display:flex;
 flex-direction:column
}

.stats article>span:last-child{
 color:var(--muted);
 font-size:11px;
 margin-top:7px
}

.number{
 font-size:42px;
 margin-top:auto
}

.number.time{
 font-size:28px
}

.orange-text{
 color:var(--orange)
}

.last{
 display:flex;
 align-items:center;
 gap:14px;
 margin-top:19px
}

.last>div{
 display:flex;
 flex-direction:column;
 gap:6px
}

.last span{
 color:var(--muted);
 font-size:11px
}

.mag{
 min-width:43px;
 min-height:43px;
 padding:7px;
 display:grid;
 place-items:center;
 border-radius:10px;
 color:#031019;
 font-weight:900
}

.green{background:var(--green);fill:var(--green)}
.cyan{background:var(--cyan);fill:var(--cyan)}
.yellow{background:var(--yellow);fill:var(--yellow)}
.orange{background:var(--orange);fill:var(--orange)}
.red{background:var(--red);fill:var(--red);color:white}

.content{
 display:grid;
 grid-template-columns:minmax(0,1.7fr) minmax(300px,.65fr);
 gap:13px;
 margin-top:13px
}

.panel{
 padding:18px
}

.title h2{
 margin:4px 0 12px;
 font-size:20px
}

.map{
 overflow:hidden;
 border-radius:13px;
 border:1px solid rgba(55,150,202,.14);
 background:#031522
}

.map svg{
 display:block;
 width:100%;
 height:auto
}

.grid{
 stroke:#2181ae;
 stroke-width:.7;
 stroke-dasharray:3 8;
 opacity:.14
}

.italia{
 fill:#0a3047;
 font-size:82px;
 font-weight:bold;
 letter-spacing:.15em
}

.point{
 opacity:.88;
 stroke:rgba(255,255,255,.25);
 stroke-width:1
}

.recent{
 max-height:590px;
 overflow:hidden
}

.event{
 display:flex;
 align-items:center;
 gap:11px;
 padding:10px 2px;
 border-bottom:1px solid rgba(100,160,190,.11)
}

.event>div:last-child{
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:5px
}

.event strong{
 font-size:12px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis
}

.event span{
 color:var(--muted);
 font-size:10px
}

.strong-section{
 margin-top:14px
}

.strong-grid{
 display:grid;
 grid-template-columns:repeat(6,1fr);
 gap:10px
}

.strong-grid article{
 padding:14px
}

.strong-grid .mag{
 display:inline-flex;
 min-height:auto
}

.strong-grid h3{
 font-size:13px;
 line-height:1.35;
 min-height:35px
}

.strong-grid span{
 display:block;
 color:var(--muted);
 font-size:9px;
 margin-top:4px
}

footer{
 margin-top:15px;
 border:1px solid rgba(55,140,190,.17);
 border-radius:14px;
 min-height:58px;
 padding:12px 16px;
 display:flex;
 align-items:center;
 gap:24px;
 color:#708b9d;
 font-size:10px
}

footer div{
 display:flex;
 align-items:center;
 gap:8px
}

footer div:nth-child(2){
 margin-left:auto
}

footer strong{
 color:var(--green)
}

@media(max-width:900px){
 .shell{padding:20px 15px}
 .hero{grid-template-columns:1fr}
 .radar{position:absolute;right:-80px;opacity:.25}
 .stats{grid-template-columns:1fr 1fr}
 .content{grid-template-columns:1fr}
 .strong-grid{grid-template-columns:repeat(3,1fr)}
 footer{flex-wrap:wrap}
 footer div:nth-child(2){margin-left:0}
}

@media(max-width:550px){
 .hero h1{font-size:46px}
 .status{font-size:0}
 .status:after{content:"LIVE";font-size:9px}
 .stats{grid-template-columns:1fr}
 .strong-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:380px){
 .strong-grid{grid-template-columns:1fr}
}

/* ===== Radar Italia migliorato ===== */

.title{
 display:flex;
 justify-content:space-between;
 align-items:flex-end;
 gap:14px;
 flex-wrap:wrap;
}

.legend{
 display:flex;
 align-items:center;
 gap:12px;
 flex-wrap:wrap;
 margin-bottom:10px;
}

.legend span{
 display:flex;
 align-items:center;
 gap:5px;
 color:var(--muted);
 font-size:10px;
}

.legend i{
 width:9px;
 height:9px;
 display:inline-block;
 border-radius:50%;
}

.coord{
 fill:#44697f;
 font-size:12px;
}

.italia{
 fill:#0d3550;
 font-size:82px;
 font-weight:bold;
 letter-spacing:.15em;
 opacity:.28;
}

.italy-shape{
 fill:rgba(31,110,159,.12);
 stroke:rgba(66,192,255,.26);
 stroke-width:2.2;
}

.italy-shape.island{
 fill:rgba(31,110,159,.10);
}

.point{
 opacity:.90;
 stroke:rgba(255,255,255,.22);
 stroke-width:1.1;
 transition:.18s;
}

.point:hover{
 opacity:1;
 stroke:#ffffff;
 stroke-width:1.8;
}

.pulse-ring{
 fill:none;
 stroke-width:2.2;
}

.pulse-ring.green{stroke:var(--green)}
.pulse-ring.cyan{stroke:var(--cyan)}
.pulse-ring.yellow{stroke:var(--yellow)}
.pulse-ring.orange{stroke:var(--orange)}
.pulse-ring.red{stroke:var(--red)}

.event strong{
 white-space:normal;
 overflow:visible;
 text-overflow:unset;
 line-height:1.35;
}

@media(max-width:700px){
 .legend{
  display:none;
 }

 .coord{
  font-size:10px;
 }

 .italia{
  font-size:60px;
 }
}

/* ===== V3 - Sagoma Italia più realistica + allineamenti ===== */

.italy-bg{
 opacity:.98;
}

.italy-shape{
 fill:rgba(22,90,135,.16);
 stroke:rgba(61,182,245,.26);
 stroke-width:2;
 vector-effect:non-scaling-stroke;
}

.italy-shape.detail{
 fill:rgba(22,90,135,.12);
 stroke:rgba(61,182,245,.22);
}

.italy-shape.island{
 fill:rgba(22,90,135,.14);
 stroke:rgba(61,182,245,.24);
}

.coord{
 fill:#56778c;
 font-size:12px;
}

.italia{
 fill:#0d3550;
 font-size:82px;
 font-weight:bold;
 letter-spacing:.15em;
 opacity:.20;
}

.point{
 opacity:.92;
 stroke:rgba(255,255,255,.18);
 stroke-width:1.1;
 transition:.18s;
}

.point:hover{
 opacity:1;
 stroke:#ffffff;
 stroke-width:1.8;
}

.legend{
 margin-left:auto;
 justify-content:flex-end;
}

.strong-section .title{
 display:block;
}

.strong-section .title small{
 display:block;
}

.strong-section .title h2{
 margin-top:4px;
 text-align:left;
}

@media(max-width:700px){
 .coord{
  font-size:10px;
 }

 .italia{
  font-size:58px;
 }
}

/* ===== FIX: rimuove la sagoma fake dell'Italia ===== */

.italy-bg{
    display:none !important;
}

.italia{
    opacity:.14 !important;
    fill:#10354b !important;
}

.map{
    background:
        radial-gradient(circle at center, rgba(10,70,108,.10), transparent 48%),
        #031522 !important;
}

/* ===== Vera cartina geografica Italia ===== */

.italy-realmap{
    opacity:.98;
}

.italy-realmap-fill{
    fill:rgba(24,92,140,.14);
    stroke:rgba(72,194,255,.28);
    stroke-width:1.6;
    vector-effect:non-scaling-stroke;
}

.italia{
    opacity:.10 !important;
    fill:#123a52 !important;
}

.map{
    background:
        radial-gradient(circle at center, rgba(9,76,117,.10), transparent 46%),
        #031522 !important;
}

/* ===== V10 - GISCO real map + titolo singola riga ===== */

.hero h1.hero-title-one{
    white-space:nowrap;
    font-size:clamp(42px,4.9vw,70px);
    line-height:1;
    letter-spacing:-.045em;
}

.hero h1.hero-title-one span{
    color:var(--cyan);
}

.italy-bg{
    display:none !important;
}

.italy-realmap{
    opacity:1;
}

.italy-realmap-fill{
    fill:rgba(19,92,140,.17);
    stroke:rgba(69,194,255,.40);
    stroke-width:1.6;
    vector-effect:non-scaling-stroke;
}

.italia{
    opacity:.06 !important;
}

@media(max-width:700px){
    .hero h1.hero-title-one{
        font-size:clamp(29px,8vw,43px);
        white-space:nowrap;
    }
}

/* ===== V20 - Browser performance fix ===== */

.italy-realmap,
.italy-bg{
    display:none !important;
}

.point{
    filter:none !important;
}

.map svg{
    contain:layout paint;
}


/* ===== V30 - Radar Canvas ultraleggero ===== */

.canvas-map{
    overflow:hidden;
    background:#031522;
}

#quakeCanvas{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
}

.canvas-map svg{
    display:none !important;
}

/* ===== Ultimi terremoti scrollabile ===== */

.recent{
    max-height:650px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(52,206,255,.45) rgba(3,21,34,.35);
}

/* Titolo sempre visibile durante lo scroll */
.recent .title{
    position:sticky;
    top:0;
    z-index:5;
    margin:-18px -18px 5px;
    padding:18px 18px 10px;
    background:linear-gradient(
        180deg,
        rgba(8,36,58,.99) 80%,
        rgba(8,36,58,.92)
    );
}

/* Scrollbar Chrome / Edge */
.recent::-webkit-scrollbar{
    width:7px;
}

.recent::-webkit-scrollbar-track{
    background:rgba(3,21,34,.35);
    border-radius:10px;
}

.recent::-webkit-scrollbar-thumb{
    background:rgba(52,206,255,.38);
    border-radius:10px;
}

.recent::-webkit-scrollbar-thumb:hover{
    background:rgba(52,206,255,.65);
}

/* ===== Footer legale ===== */

.public-footer{
    margin-top:16px;
    min-height:64px;
    padding:13px 17px;
    display:flex;
    align-items:center;
    gap:22px;
    border:1px solid rgba(55,140,190,.17);
    border-radius:14px;
    background:rgba(3,19,32,.58);
    color:#708b9d;
    font-size:10px;
}

.public-footer>div{
    display:flex;
    align-items:center;
    gap:7px;
}

.footer-live i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 12px var(--green);
}

.footer-live strong{
    color:var(--green);
}

.footer-source{
    margin-left:auto;
}

.footer-legal{
    white-space:nowrap;
}

.footer-legal a{
    color:#8ebbd3;
    text-decoration:none;
}

.footer-legal a:hover{
    color:var(--cyan);
}

@media(max-width:900px){
    .public-footer{
        flex-wrap:wrap;
    }

    .footer-source{
        margin-left:0;
    }

    .footer-legal{
        width:100%;
        white-space:normal;
    }
}

/* ===== Avviso cookie tecnico ===== */

.cookie-notice{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:9999;
    max-width:850px;
    margin:auto;
    opacity:0;
    transform:translateY(15px);
    pointer-events:none;
    transition:.2s;
}

.cookie-notice.show{
    opacity:1;
    transform:none;
    pointer-events:auto;
}

.cookie-inner{
    display:flex;
    align-items:center;
    gap:15px;
    padding:14px 16px;
    border:1px solid rgba(52,206,255,.32);
    border-radius:15px;
    background:rgba(3,21,34,.97);
    box-shadow:0 15px 50px rgba(0,0,0,.40);
}

.cookie-text{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.cookie-text strong{
    color:#eef8ff;
    font-size:13px;
}

.cookie-text span{
    color:#94adbe;
    font-size:12px;
    line-height:1.45;
}

.cookie-text a{
    color:var(--cyan);
}

.cookie-inner button{
    min-width:58px;
    height:36px;
    border:1px solid #1498d5;
    border-radius:9px;
    background:#0b719f;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

@media(max-width:550px){
    .cookie-inner{
        align-items:flex-start;
    }
}