:root{
    --bg:#0e141b; --panel:#141d26; --elev:#1a242f; --line:#273542;
    --text:#e4ebf2; --muted:#8395a6; --faint:#5d6c7b;
    --accent:#e8a63c; --live:#ff5347;
    --cat-piazze:#e8a63c; --cat-mare:#3ea8c9; --cat-montagna:#6fbf8b;
    --cat-meteo:#b98ce0; --cat-traffico:#e06a5a; --cat-altro:#95a4b2;
    --r:10px;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *,*::before,*::after{box-sizing:inherit}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; min-height:100vh;
  }
  h1,h2,h3,.gk{font-family:"Space Grotesk","IBM Plex Sans",sans-serif}
  a{color:var(--accent); text-decoration:none}
  button{font-family:inherit; cursor:pointer; color:inherit}

  header{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    padding:12px 20px; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#131c25,#0e141b);
    position:sticky; top:0; z-index:500;
  }
  .brand{display:flex; align-items:baseline; gap:12px; margin-right:auto}
  .brand .mark{font-size:20px; font-weight:700; letter-spacing:-.01em}
  .brand .mark b{color:var(--accent); font-weight:700}
  .brand .sub{font-size:12px; color:var(--faint); letter-spacing:.04em}
  .count{font-family:"Space Grotesk"; font-size:13px; color:var(--muted)}
  .count b{color:var(--text); font-weight:600}
  .live-dot{display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--live); margin-right:6px; vertical-align:middle;
    box-shadow:0 0 0 0 rgba(255,83,71,.6); animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,83,71,.55)}70%{box-shadow:0 0 0 7px rgba(255,83,71,0)}100%{box-shadow:0 0 0 0 rgba(255,83,71,0)}}
  @media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

  .seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
  .seg button{background:transparent; border:0; padding:7px 14px; font-size:13px; color:var(--muted)}
  .seg button.on{background:var(--elev); color:var(--text)}
  .btn{background:var(--elev); border:1px solid var(--line); border-radius:var(--r);
    padding:8px 14px; font-size:13px; font-weight:500; white-space:nowrap}
  .btn:hover{border-color:var(--accent); color:var(--text)}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#1b1206; font-weight:600}
  .btn.ghost{background:transparent}
  .btn.icon{padding:8px 11px}

  .toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 20px; border-bottom:1px solid var(--line); background:var(--panel)}
  .search{flex:1; min-width:160px; position:relative}
  .search input{width:100%; background:var(--bg); border:1px solid var(--line);
    border-radius:var(--r); color:var(--text); padding:8px 12px 8px 34px; font-size:14px}
  .search input:focus{outline:none; border-color:var(--accent)}
  .search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint)}
  .chips{display:flex; gap:7px; flex-wrap:wrap}
  .chip{display:inline-flex; align-items:center; gap:7px; background:var(--bg);
    border:1px solid var(--line); border-radius:99px; padding:5px 12px; font-size:12.5px; color:var(--muted)}
  .chip .d{width:8px; height:8px; border-radius:50%}
  .chip.on{color:var(--text); border-color:var(--faint); background:var(--elev)}
  .chip:hover{border-color:var(--faint)}

  main{flex:1; position:relative; min-height:0}
  #map{position:absolute; inset:0; background:#0b1016}
  .leaflet-container{background:#0b1016; font-family:inherit}
  .view{position:absolute; inset:0; overflow:auto}
  .view[hidden]{display:none}

  #wall{padding:16px; display:grid; gap:14px;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); align-content:start}
  .tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
    display:flex; flex-direction:column}
  .tile .screen{position:relative; aspect-ratio:16/9; background:#090d12; overflow:hidden}
  .tile .screen iframe,.tile .screen video,.tile .screen img{width:100%; height:100%; border:0; display:block; object-fit:cover}
  .poster{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; color:var(--muted); background:
      radial-gradient(120% 90% at 50% 20%, #17222d, #0c1116); cursor:pointer}
  .poster:hover{color:var(--text)}
  .poster .play{width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; background:rgba(232,166,60,.12)}
  .poster .play svg{color:var(--accent)}
  .poster small{font-size:11.5px; letter-spacing:.03em; color:var(--faint)}
  .tile .bar{display:flex; align-items:center; gap:9px; padding:9px 11px}
  .tile .bar .d{width:9px; height:9px; border-radius:50%; flex:none}
  .tile .bar .nm{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tile .bar .cat{font-size:11px; color:var(--faint)}
  .tile .bar .sp{margin-left:auto; display:flex; gap:4px}
  .tile .bar button{background:transparent; border:0; color:var(--faint); padding:4px; border-radius:6px; line-height:0}
  .tile .bar button:hover{color:var(--text); background:var(--elev)}

  .empty{max-width:640px; margin:6vh auto; padding:28px 24px; text-align:center}
  .empty h2{font-size:24px; margin:0 0 6px; letter-spacing:-.01em}
  .empty p{color:var(--muted); margin:0 auto 20px; max-width:52ch}
  .sources{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px}
  .sources a{display:inline-flex; align-items:center; gap:8px; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; font-size:13px; color:var(--text)}
  .sources a:hover{border-color:var(--accent)}
  .sources a small{color:var(--faint); font-weight:400}
  .hint{margin-top:26px; font-size:12.5px; color:var(--faint); line-height:1.7}

  .overlay{position:fixed; inset:0; background:rgba(6,9,13,.72); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; padding:18px; z-index:1000}
  .overlay[hidden]{display:none}
  .modal{background:var(--panel); border:1px solid var(--line); border-radius:14px;
    width:100%; max-width:560px; max-height:calc(100vh - 40px); overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .modal.wide{max-width:920px}
  .modal .mh{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line)}
  .modal .mh h3{margin:0; font-size:16px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .modal .mb{padding:18px}
  .player-wrap{aspect-ratio:16/9; background:#090d12; border-radius:10px; overflow:hidden; position:relative}
  .player-wrap iframe,.player-wrap video,.player-wrap img{width:100%; height:100%; border:0; display:block; object-fit:contain}
  .fail{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; color:var(--muted); text-align:center; padding:20px}

  label.fld{display:block; margin-bottom:13px; font-size:12.5px; color:var(--muted)}
  label.fld span{display:block; margin-bottom:5px; letter-spacing:.02em}
  .fld input,.fld select,.fld textarea{width:100%; background:var(--bg); border:1px solid var(--line);
    border-radius:8px; color:var(--text); padding:9px 11px; font-size:14px; font-family:inherit}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--accent)}
  .row2{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
  .modal .mf{display:flex; gap:9px; justify-content:space-between; align-items:center; padding:14px 18px; border-top:1px solid var(--line)}
  .modal .mf .r{display:flex; gap:9px}
  .detect{font-size:11.5px; color:var(--faint); margin:-6px 0 13px}
  .detect b{color:var(--accent); font-weight:600}
  .iconbtn{background:transparent; border:0; color:var(--faint); padding:6px; border-radius:6px; line-height:0}
  .iconbtn:hover{color:var(--text); background:var(--elev)}

  .pickbar{position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:600;
    background:var(--accent); color:#1b1206; padding:8px 16px; border-radius:99px; font-size:13px;
    font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.4); display:flex; gap:12px; align-items:center}
  .pickbar[hidden]{display:none}
  .pickbar button{background:rgba(0,0,0,.15); border:0; color:#1b1206; border-radius:99px; padding:3px 10px; font-size:12px}

  footer{padding:9px 20px; border-top:1px solid var(--line); background:var(--panel);
    font-size:11.5px; color:var(--faint); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
  footer a{color:var(--muted)}

  .leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--elev); color:var(--text); border:1px solid var(--line)}
  .leaflet-popup-content{margin:11px 13px; font-family:inherit}
  .pop h4{margin:0 0 3px; font-size:14px; font-family:"Space Grotesk"}
  .pop .pc{font-size:11.5px; color:var(--faint); margin-bottom:8px}
  .leaflet-bar a{background:var(--elev); color:var(--text); border-color:var(--line)}

  @media (max-width:640px){
    header{padding:10px 14px} .toolbar{padding:9px 14px}
    .brand .sub{display:none} .row2{grid-template-columns:1fr 1fr}
    #wall{grid-template-columns:1fr; padding:12px}
  }
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}


/* === CYBER OPS SKIN === */
:root{
  --bg:#02070b;
  --panel:#061018;
  --elev:#0a1720;
  --line:#123849;
  --text:#d9fbff;
  --muted:#6fa0ad;
  --faint:#426876;
  --accent:#26e6ff;
  --live:#46ff9a;
  --cat-piazze:#26e6ff;
  --cat-mare:#00a8ff;
  --cat-montagna:#46ff9a;
  --cat-meteo:#b27cff;
  --cat-traffico:#ff4d6d;
  --cat-altro:#7a93a0;
}

body{
  background:
    linear-gradient(rgba(38,230,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,230,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% -20%, #0c2632 0, #02070b 48%, #010407 100%);
  background-size:32px 32px,32px 32px,auto;
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

body::before{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:.13;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.018) 4px
  );
  mix-blend-mode:screen;
}

header{
  background:rgba(3,12,18,.92);
  border-bottom:1px solid rgba(38,230,255,.38);
  box-shadow:0 0 30px rgba(38,230,255,.08);
  backdrop-filter:blur(12px);
}

.brand .mark{
  text-transform:uppercase;
  letter-spacing:.08em;
  text-shadow:0 0 16px rgba(38,230,255,.45);
}
.brand .mark b{color:var(--accent)}
.brand .sub{
  color:#4d8594;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.count{
  border:1px solid rgba(70,255,154,.2);
  background:rgba(70,255,154,.04);
  border-radius:4px;
  padding:5px 9px;
}
.live-dot{
  background:var(--live);
  box-shadow:0 0 14px rgba(70,255,154,.8);
}

.seg,.btn,.search input,.chip,.tile,.modal,.fld input,.fld select,.fld textarea{
  border-radius:4px;
}
.seg,.btn,.chip,.tile,.modal{
  box-shadow:inset 0 0 0 1px rgba(38,230,255,.015);
}
.btn.primary{
  background:rgba(38,230,255,.10);
  border-color:var(--accent);
  color:var(--accent);
  text-shadow:0 0 8px rgba(38,230,255,.5);
  box-shadow:0 0 18px rgba(38,230,255,.08), inset 0 0 18px rgba(38,230,255,.035);
}
.btn.primary:hover{
  background:rgba(38,230,255,.18);
  box-shadow:0 0 24px rgba(38,230,255,.16);
}
.btn:hover,.chip:hover{
  border-color:rgba(38,230,255,.65);
}

.toolbar{
  background:rgba(4,13,20,.9);
  border-bottom:1px solid rgba(38,230,255,.18);
}
.search input{
  background:#02080d;
  border-color:#0f3443;
  color:#d9fbff;
}
.search input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(38,230,255,.07),0 0 18px rgba(38,230,255,.08);
}
.chip{
  background:#030b10;
  border-color:#12313d;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.chip.on{
  background:rgba(38,230,255,.055);
  border-color:rgba(38,230,255,.38);
}

.tile{
  position:relative;
  background:linear-gradient(180deg,rgba(6,19,28,.98),rgba(3,11,17,.98));
  border-color:#124153;
  box-shadow:0 12px 35px rgba(0,0,0,.35),0 0 0 1px rgba(38,230,255,.025);
}
.tile::before,.tile::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:5;
  width:18px;
  height:18px;
}
.tile::before{
  top:-1px;left:-1px;
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
}
.tile::after{
  right:-1px;bottom:-1px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
}
.tile:hover{
  border-color:rgba(38,230,255,.65);
  box-shadow:0 14px 42px rgba(0,0,0,.45),0 0 22px rgba(38,230,255,.08);
}
.tile .screen{
  background:
    linear-gradient(rgba(38,230,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(38,230,255,.025) 1px,transparent 1px),
    #010609;
  background-size:24px 24px;
}
.poster{
  background:
    radial-gradient(circle at 50% 35%,rgba(38,230,255,.12),transparent 32%),
    linear-gradient(180deg,#05121a,#02070b);
}
.poster .play{
  border-color:rgba(38,230,255,.45);
  background:rgba(38,230,255,.06);
  box-shadow:0 0 22px rgba(38,230,255,.12);
}
.poster .play svg{color:var(--accent)}
.tile .bar{
  border-top:1px solid rgba(38,230,255,.12);
}
.tile .bar .nm{
  text-transform:uppercase;
  letter-spacing:.035em;
}

.empty h2{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  text-shadow:0 0 16px rgba(38,230,255,.35);
}

.modal{
  background:#051019;
  border-color:rgba(38,230,255,.42);
  box-shadow:0 25px 80px rgba(0,0,0,.65),0 0 35px rgba(38,230,255,.08);
}
.modal .mh{
  background:linear-gradient(90deg,rgba(38,230,255,.07),transparent);
  border-bottom-color:rgba(38,230,255,.2);
}
.modal .mh h3{
  text-transform:uppercase;
  letter-spacing:.06em;
}

#map{
  filter:saturate(.8) contrast(1.08) hue-rotate(135deg);
}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:#061018;
  border-color:rgba(38,230,255,.4);
}

footer{
  background:#02080d;
  border-top:1px solid rgba(38,230,255,.18);
  text-transform:uppercase;
  letter-spacing:.04em;
}

::selection{background:rgba(38,230,255,.28);color:white}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#02070b}
::-webkit-scrollbar-thumb{background:#0d3340;border:2px solid #02070b}
::-webkit-scrollbar-thumb:hover{background:#145064}