:root {
      --bg:       #05080f;
      --card-bg:  #0d1420;
      --primary:  #ff4b00;
      --secondary:#ffa500;
      --accent:   #ff1a6e;
      --text:     #d8dfe8;
      --muted:    #64748b;
      --panel:    rgba(5,8,15,0.85);
      --border:   rgba(255,75,0,0.25);
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    body, html {
      width:100%; height:100%;
      font-family: 'Rajdhani', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
    }

    /* ── MAP ── */
    #map {
    width:100%; height:100%;
    z-index:1;
    background:#05080f;
    filter: saturate(0.4) brightness(0.6);
    }

    /* ── OVERLAY ── */
    .ui {
      position:absolute; inset:0;
      z-index:1000;
      pointer-events:none;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:18px;
      gap:14px;
    }
    .ui > * { pointer-events:auto; }

    /* ── HEADER ── */
    .header {
      background: var(--panel);
      backdrop-filter: blur(16px);
      border: 1px solid var(--border);
      border-radius:14px;
      padding:14px 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      max-width:960px;
      margin:0 auto;
      width:100%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,75,0,0.15);
    }

    .logo {
      font-family:'Share Tech Mono', monospace;
      font-size:1.1rem;
      color: var(--primary);
      letter-spacing:3px;
      text-transform:uppercase;
      display:flex; align-items:center; gap:10px;
    }
    .logo span { color:var(--text); font-size:0.75rem; letter-spacing:1px; opacity:0.6; }

    .pulse-dot {
      width:10px; height:10px;
      background:var(--primary);
      border-radius:50%;
      position:relative;
      flex-shrink:0;
    }
    .pulse-dot::after {
      content:'';
      position:absolute; inset:-4px;
      border-radius:50%;
      border:2px solid var(--primary);
      animation: ripple 2s infinite;
    }
    @keyframes ripple {
      0%  { transform:scale(1); opacity:0.8; }
      100%{ transform:scale(3); opacity:0; }
    }

    .stats {
      display:flex; gap:24px; align-items:center;
      font-size:0.82rem; color:var(--muted);
      font-family:'Share Tech Mono', monospace;
    }
    .stats b { color:var(--text); }
    .stat-sep { opacity:0.2; }

    /* ── FILTER BAR ── */
    .filter-bar {
      display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
    }
    .flt-btn {
      background: var(--panel);
      backdrop-filter:blur(10px);
      border:1px solid var(--border);
      border-radius:8px;
      padding:7px 16px;
      font-family:'Share Tech Mono', monospace;
      font-size:0.75rem;
      color:var(--muted);
      cursor:pointer;
      transition: all 0.2s;
      letter-spacing:1px;
    }
    .flt-btn:hover  { border-color:var(--secondary); color:var(--secondary); }
    .flt-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }

    /* ── DETAILS PANEL ── */
    .details {
      background: var(--panel);
      backdrop-filter:blur(16px);
      border:1px solid var(--border);
      border-top:3px solid var(--primary);
      border-radius:14px;
      padding:18px 20px;
      max-width:380px;
      width:100%;
      display:none;
      animation: slideUp 0.25s ease-out;
      box-shadow: 0 -8px 40px rgba(255,75,0,0.12);
    }
    @keyframes slideUp {
      from { transform:translateY(60px); opacity:0; }
      to   { transform:translateY(0);    opacity:1; }
    }

    .det-header {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      margin-bottom:14px;
    }
    .det-mag {
      font-size:2.2rem;
      font-weight:700;
      line-height:1;
      font-family:'Share Tech Mono', monospace;
    }
    .det-place {
      font-size:0.82rem;
      opacity:0.65;
      margin-top:4px;
      max-width:240px;
      line-height:1.4;
    }
    .close-btn {
      background:none;
      border:none;
      color:var(--muted);
      cursor:pointer;
      font-size:1.1rem;
      padding:2px 6px;
      border-radius:6px;
      transition:color 0.2s;
    }
    .close-btn:hover { color:var(--primary); }

    .det-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .det-cell small {
      font-family:'Share Tech Mono', monospace;
      font-size:0.68rem;
      color:var(--secondary);
      letter-spacing:1px;
      display:block;
      margin-bottom:2px;
    }
    .det-cell p {
      font-size:0.95rem;
      font-weight:600;
    }

    hr.sep { border:none; border-top:1px solid rgba(255,255,255,0.07); margin:14px 0; }

    /* ── LOADING ── */
    .loading-screen {
      position:fixed; inset:0;
      background:var(--bg);
      z-index:9999;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:18px;
      transition: opacity 0.5s;
    }
    .loader-ring {
      width:52px; height:52px;
      border:3px solid #1e2a3a;
      border-top-color:var(--primary);
      border-radius:50%;
      animation:spin 0.9s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .loading-txt {
      font-family:'Share Tech Mono', monospace;
      font-size:0.8rem;
      letter-spacing:3px;
      color:var(--muted);
      animation: blink 1.4s infinite;
    }
    @keyframes blink { 50%{opacity:0.3;} }

    /* ── MAGNITUDE COLOR CLASSES ── */
    .mag-minor  { color:#4ade80; }
    .mag-light  { color:#facc15; }
    .mag-moderate { color:var(--secondary); }
    .mag-strong { color:var(--primary); }
    .mag-major  { color:var(--accent); }

    /* ── LEAFLET OVERRIDES ── */
    .leaflet-popup-content-wrapper {
      background:var(--card-bg) !important;
      color:var(--text) !important;
      border-radius:10px;
      border:1px solid var(--border);
      font-family:'Rajdhani', sans-serif;
      font-size:0.9rem;
    }
    .leaflet-popup-tip { background:var(--card-bg) !important; }
    .leaflet-control-zoom a {
      background:var(--card-bg) !important;
      color:var(--text) !important;
      border:1px solid var(--border) !important;
    }

    /* ── QUAKE ICON ── */
    .quake-marker {
      border-radius:50%;
      border:2px solid rgba(255,255,255,0.4);
      display:flex; align-items:center; justify-content:center;
      font-family:'Share Tech Mono', monospace;
      font-weight:bold;
      color:#fff;
      animation: quakePulse 3s ease-in-out infinite;
      cursor:pointer;
      text-shadow:0 1px 3px rgba(0,0,0,0.8);
    }
    @keyframes quakePulse {
      0%,100%{ box-shadow:0 0 0 0 rgba(255,75,0,0.5); }
      50%    { box-shadow:0 0 0 8px rgba(255,75,0,0); }
    }

    /* ── USER DOT ── */
    .user-dot {
      background:#3b82f6;
      border:3px solid #fff;
      border-radius:50%;
      box-shadow:0 0 20px #3b82f6, 0 0 40px rgba(59,130,246,0.4);
      animation:userPulse 1.8s infinite;
    }
    @keyframes userPulse {
      0%  { transform:scale(1);   box-shadow:0 0 0 0 rgba(59,130,246,0.7); }
      70% { transform:scale(1.2); box-shadow:0 0 0 12px rgba(59,130,246,0); }
      100%{ transform:scale(1);   box-shadow:0 0 0 0 rgba(59,130,246,0); }
    }

    /* ── TOAST ── */
    .toast {
      position:fixed;
      bottom:100px; left:50%; transform:translateX(-50%);
      background:var(--card-bg);
      border:1px solid var(--border);
      border-radius:10px;
      padding:10px 20px;
      font-family:'Share Tech Mono', monospace;
      font-size:0.78rem;
      color:var(--secondary);
      z-index:9998;
      opacity:0;
      transition:opacity 0.3s;
      pointer-events:none;
      white-space:nowrap;
    }
    .toast.show { opacity:1; }