:root{
    --bg:#0A0E17;
    --panel:#10151F;
    --panel-2:#141A26;
    --line:#232B3B;
    --text:#DDE3EE;
    --text-dim:#7C879C;
    --sig-quake:#F2A65A;
    --sig-storm:#5AC8FA;
    --alert-red:#FF4B4B;
    --alert-orange:#F2A65A;
    --alert-green:#3FCF8E;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; width:100%; overflow:hidden; background:var(--bg); font-family:'IBM Plex Mono', monospace; color:var(--text);}
  #app{position:relative; height:100vh; width:100vw;}
  #map{position:absolute; inset:0; z-index:1;}
  .leaflet-container{background:#0A0E17 !important;}
  .leaflet-tile-pane{
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.6);
  }

  /* ---- Top bar ---- */
  #topbar{
    position:absolute; top:0; left:0; right:0; z-index:500;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; background:linear-gradient(180deg, rgba(10,14,23,0.96) 0%, rgba(10,14,23,0.82) 70%, transparent 100%);
    pointer-events:none;
  }
  #topbar .brand{display:flex; align-items:baseline; gap:10px; pointer-events:auto;}
  #topbar h1{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:19px; letter-spacing:0.2px;
    color:#fff;
  }
  #topbar .sub{font-size:11px; color:var(--text-dim); letter-spacing:0.3px;}
  #clock{font-size:12px; color:var(--text-dim); pointer-events:auto; text-align:right;}
  #clock .date{color:var(--text);}

  /* ---- Side panel ---- */
  #panel{
    position:absolute; top:0; right:0; bottom:0; width:360px; z-index:400;
    background:var(--panel); border-left:1px solid var(--line);
    display:flex; flex-direction:column;
    transform:translateX(0); transition:transform .25s ease;
  }
  #panel.collapsed{transform:translateX(340px);}
  #panelToggle{
    position:absolute; top:14px; left:-34px; width:34px; height:34px;
    background:var(--panel); border:1px solid var(--line); border-right:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text-dim); font-size:14px;
  }
  #panelToggle:hover{color:#fff;}

  #panelHead{
    padding:64px 18px 12px 18px; border-bottom:1px solid var(--line);
  }
  #panelHead h2{
    font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600;
    letter-spacing:0.5px; color:var(--text-dim); margin-bottom:10px;
  }
  #summaryRow{display:flex; gap:8px;}
  .stat{
    flex:1; background:var(--panel-2); border:1px solid var(--line);
    padding:8px 10px;
  }
  .stat .n{font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:700; color:#fff; line-height:1;}
  .stat .l{font-size:9.5px; color:var(--text-dim); margin-top:4px; letter-spacing:0.3px;}

  #filters{
    display:flex; flex-wrap:wrap; gap:6px; padding:12px 18px; border-bottom:1px solid var(--line);
  }
  .filter-chip{
    font-size:10.5px; padding:5px 9px; border:1px solid var(--line); color:var(--text-dim);
    cursor:pointer; user-select:none; letter-spacing:0.2px; display:flex; align-items:center; gap:5px;
  }
  .filter-chip .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
  .filter-chip.active{color:#fff; border-color:currentColor;}
  .filter-chip[data-cat="quake"].active{color:var(--sig-quake);}
  .filter-chip[data-cat="storm"].active{color:var(--sig-storm);}

  #feed{flex:1; overflow-y:auto; padding:6px 0;}
  #feed::-webkit-scrollbar{width:6px;}
  #feed::-webkit-scrollbar-thumb{background:var(--line);}

  .feed-item{
    padding:11px 18px; border-bottom:1px solid var(--line); cursor:pointer;
    display:flex; gap:10px; align-items:flex-start;
  }
  .feed-item:hover{background:var(--panel-2);}
  .feed-marker{width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0;}
  .feed-body{flex:1; min-width:0;}
  .feed-title{font-family:'Space Grotesk', sans-serif; font-size:12.5px; color:var(--text); font-weight:500; line-height:1.35;}
  .feed-meta{font-size:10px; color:var(--text-dim); margin-top:4px; display:flex; gap:8px; flex-wrap:wrap;}
  .feed-meta .lvl{padding:1px 5px; border:1px solid currentColor;}

  #loadingNote{padding:14px 18px; font-size:11px; color:var(--text-dim); line-height:1.6;}
  #sourceStatus{
    padding:10px 18px; border-top:1px solid var(--line); font-size:10px; color:var(--text-dim);
    display:flex; flex-direction:column; gap:5px;
  }
  #sourceStatus .row{display:flex; justify-content:space-between; align-items:center;}
  .src-state{display:flex; align-items:center; gap:5px;}
  .src-dot{width:6px; height:6px; border-radius:50%; background:var(--text-dim);}
  .src-dot.ok{background:var(--alert-green);}
  .src-dot.err{background:var(--alert-red);}
  .src-dot.pending{background:var(--sig-quake); animation:pulse 1.2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

  /* Legend */
  #legend{
    position:absolute; bottom:16px; left:16px; z-index:400;
    background:rgba(16,21,31,0.92); border:1px solid var(--line); padding:10px 14px;
    font-size:10.5px; color:var(--text-dim); display:flex; gap:14px; flex-wrap:wrap; max-width:calc(100% - 400px);
  }
  #legend .li{display:flex; align-items:center; gap:6px;}
  #legend .dot{width:8px; height:8px; border-radius:50%;}

  /* Popup styling */
  .leaflet-popup-content-wrapper{
    background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:0;
    font-family:'IBM Plex Mono', monospace;
  }
  .leaflet-popup-tip{background:var(--panel); border:1px solid var(--line);}
  .leaflet-popup-content{margin:12px 14px; font-size:11.5px; line-height:1.5;}
  .pop-title{font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; color:#fff; margin-bottom:6px;}
  .pop-row{color:var(--text-dim); font-size:10.5px;}
  .leaflet-popup-close-button{color:var(--text-dim) !important;}

  @media (max-width: 720px){
    #panel{width:88vw;}
    #panel.collapsed{transform:translateX(calc(88vw - 20px));}
    #legend{max-width:calc(100% - 40px); bottom:auto; top:78px;}
  }