:root {
    --cream:#F8F5F0;--cream-dark:#EEE9E0;--ink:#1A1614;--ink-soft:#3D3835;--ink-muted:#6B6460;
    --red:#C0392B;--red-light:#FDECEA;--red-dim:#7B241C;
    --orange:#D35400;--orange-light:#FEF0E6;
    --yellow:#C9A227;--yellow-light:#FEF9E7;
    --green:#1E8449;--green-light:#E9F7EF;
    --blue:#2980b9;--blue-light:#E8F0FE;
    --surface:#FFFFFF;--border:#D4CEC6;--border-soft:#EEE9E0;
    --shadow-sm:0 1px 3px rgba(26,22,20,.07);
    --shadow-md:0 4px 16px rgba(26,22,20,.11);
    --shadow-lg:0 12px 40px rgba(26,22,20,.17);
    --radius:8px;
    --font-d:'Playfair Display',Georgia,serif;
    --font-b:'DM Sans',system-ui,sans-serif;
    --font-m:'DM Mono',monospace;
    --ease:background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), opacity .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
  }
  [data-theme="dark"]{
    --cream:#1A1614;--cream-dark:#231E1C;--ink:#F5F2EE;--ink-soft:#D4CEC6;--ink-muted:#9E9590;
    --surface:#201C1A;--border:#352F2C;--border-soft:#2A2522;
    --red-light:#3D0C08;--orange-light:#3D1C05;--yellow-light:#332800;--green-light:#0D2E1A;
    --blue-light:#0A2A3A;
    --shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5);--shadow-lg:0 12px 40px rgba(0,0,0,.6);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-b);background:var(--cream);color:var(--ink);font-size:15px;line-height:1.6;overflow-x:hidden;transition:background .3s,color .3s;max-width:100vw}
  ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--cream-dark)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
  
  /* HEADER — limit transition to background only; backdrop-filter composited separately */
  header{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border);backdrop-filter:blur(16px);background:rgba(248,245,240,.93);transition:background .3s,border-color .3s;will-change:background}
  [data-theme="dark"] header{background:rgba(26,22,20,.93)}
  .header-inner{max-width:1440px;margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;gap:16px;min-width:0}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
  .logo-mark{width:32px;height:32px;background:var(--red);border-radius:8px;display:grid;place-items:center;flex-shrink:0}
  .logo-mark svg{width:17px;height:17px}
  .logo-name{font-family:var(--font-d);font-size:1.1rem;font-weight:700;white-space:nowrap}
  .logo-name span{color:var(--red)}
  .live-badge{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:500;color:var(--red);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border:1px solid rgba(192,57,43,.3);border-radius:20px;flex-shrink:0;white-space:nowrap}
  .live-dot{width:6px;height:6px;background:var(--red);border-radius:50%;animation:pdot 2s infinite}
  @keyframes pdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}
  .header-nav{display:flex;gap:2px;margin-left:auto}
  .nav-btn{background:none;border:none;padding:6px 13px;border-radius:6px;font-family:var(--font-b);font-size:.82rem;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:var(--ease);white-space:nowrap;touch-action:manipulation}
  .nav-btn:hover,.nav-btn.active{background:var(--cream-dark);color:var(--ink)}
  .theme-btn{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);background:var(--cream-dark);cursor:pointer;display:grid;place-items:center;color:var(--ink-soft);flex-shrink:0;transition:var(--ease);touch-action:manipulation}
  .theme-btn:hover{background:var(--border)}
  .theme-btn svg{width:15px;height:15px}
  .icon-moon{display:none}[data-theme="dark"] .icon-sun{display:none}[data-theme="dark"] .icon-moon{display:block}
  
  /* TICKER */
  .ticker{background:var(--ink);color:var(--cream);padding:7px 0;overflow:hidden;position:relative}
  [data-theme="dark"] .ticker{background:var(--red-dim)}
  .ticker-lbl{position:absolute;left:0;top:0;bottom:0;background:var(--red);color:#fff;font-family:var(--font-m);font-size:.67rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;padding:0 14px;display:flex;align-items:center;z-index:1;white-space:nowrap}
  .ticker-track{display:flex;gap:48px;animation:tick 80s linear infinite;padding-left:120px;white-space:nowrap;will-change:transform;transform:translateZ(0)}
  .ticker-track:hover{animation-play-state:paused}
  @keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  .ticker-item{font-size:.74rem;font-family:var(--font-m);opacity:.75;display:flex;align-items:center;gap:8px}
  .ticker-sep{color:var(--red);opacity:.7}[data-theme="dark"] .ticker-sep{color:#F1948A}
  
  /* TIME FILTER BAR */
  .time-filter-bar{background:var(--surface);border-bottom:1px solid var(--border-soft);padding:8px 28px;display:flex;gap:8px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .time-range-chips{display:flex;gap:8px;align-items:center;flex-shrink:0}
  .mobile-time-select,.mobile-tab-select{display:none;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font-b);font-size:.82rem;color:var(--ink);cursor:pointer;outline:none;transition:var(--ease);flex-shrink:0}
  .mobile-time-select:focus,.mobile-tab-select:focus{border-color:var(--red)}
  .mobile-tab-select{width:100%;margin-bottom:14px;font-size:.85rem;padding:9px 14px}
  .time-chip{padding:4px 14px;border-radius:20px;border:1px solid var(--border);background:none;font-family:var(--font-b);font-size:.75rem;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:var(--ease);display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;touch-action:manipulation}
  .time-chip:hover,.time-chip.active{background:var(--ink);border-color:var(--ink);color:var(--cream)}
  [data-theme="dark"] .time-chip:hover,[data-theme="dark"] .time-chip.active{background:var(--red);border-color:var(--red)}
  .chip-count{background:var(--cream-dark);color:var(--ink-soft);padding:1px 5px;border-radius:10px;font-size:.65rem;margin-left:4px}
  .time-chip.active .chip-count{background:rgba(255,255,255,.2);color:white}
  
  /* STATS BAR */
  .stats-bar{background:var(--surface);border-bottom:1px solid var(--border-soft)}
  .stats-inner{max-width:1440px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr)}
  .stat{padding:14px 24px;border-right:1px solid var(--border-soft);min-width:0}
  .stat:last-child{border-right:none}
  .stat-lbl{font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);font-family:var(--font-m);margin-bottom:3px}
  .stat-val{font-family:var(--font-d);font-size:1.65rem;font-weight:700;color:var(--ink);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.65rem;display:block}
  .stat-val.red{color:var(--red)}.stat-val.orange{color:var(--orange)}
  .stat-sub{font-size:.68rem;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shimmer{animation:shim 1.5s infinite}
  @keyframes shim{0%,100%{opacity:.25}50%{opacity:.8}}
  
  /* MAP — explicit height on map-wrap prevents CLS; contain:paint stops map from affecting layout of siblings */
  .map-wrap{position:relative;height:56vh;min-height:300px;max-height:600px;overflow:hidden;contain:paint layout}
  .map-wrap.fullscreen{position:fixed!important;inset:0!important;height:100dvh!important;max-height:none!important;min-height:0!important;z-index:1100!important}
  #map{width:100%;height:100%}
  
  /* Legend collapsible */
  .map-legend{position:absolute;top:14px;left:14px;z-index:15;pointer-events:all}
  .legend-toggle-pill{display:flex;align-items:center;gap:6px;background:rgba(8,6,5,.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#fff;padding:5px 12px 5px 8px;cursor:pointer;font-family:var(--font-m);font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;touch-action:manipulation;transition:background .2s;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35)}
  .legend-toggle-pill:hover{background:rgba(30,20,18,.95)}
  .legend-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;box-shadow:0 0 6px rgba(192,57,43,.7)}
  .legend-pill-arrow{font-size:.55rem;opacity:.6;transition:transform .2s;margin-left:2px}
  .map-legend.collapsed .legend-pill-arrow{transform:rotate(-90deg)}
  .legend-body{margin-top:6px;background:rgba(8,6,5,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:10px 13px;color:#fff;font-size:.69rem;font-family:var(--font-m);box-shadow:0 4px 16px rgba(0,0,0,.4);animation:fin .15s ease both}
  .map-legend.collapsed .legend-body{display:none}
  .map-legend-title{font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;opacity:.35;margin-bottom:8px}
  .leg-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;white-space:nowrap}
  .leg-row:last-child{margin-bottom:0}
  .leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .new-badge{background:var(--blue);color:white;font-size:.58rem;padding:1px 5px;border-radius:10px}
  
  /* Map fullscreen button */
  .map-fullscreen-btn{position:absolute;top:14px;right:14px;width:36px;height:36px;background:rgba(8,6,5,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:30;transition:var(--ease),right .32s cubic-bezier(.4,0,.2,1);touch-action:manipulation}
  .map-fullscreen-btn:hover{background:rgba(40,28,24,.95)}
  .map-fullscreen-btn svg{width:15px;height:15px;display:block}
  /* When side panel is open, move fullscreen btn so it doesn't overlap close btn */
  .map-wrap.panel-open .map-fullscreen-btn{right:calc(360px + 14px)}
  
  /* Side panel – desktop only; hidden on mobile (use bottom sheet) */
  .side-panel{position:absolute;top:0;right:0;width:360px;height:100%;background:var(--surface);border-left:1px solid var(--border);z-index:20;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column}
  .side-panel.open{transform:translateX(0)}
  .side-panel .close-btn{position:relative;z-index:35}
  .panel-hdr{padding:16px 18px;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-shrink:0}
  .panel-brand{font-family:var(--font-d);font-size:1.05rem;font-weight:700;line-height:1.25;color:var(--ink)}
  .panel-src{font-size:.65rem;color:var(--red);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.07em;margin-top:3px}
  .close-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-muted);font-size:.95rem;flex-shrink:0;transition:var(--ease);touch-action:manipulation}
  .close-btn:hover{background:var(--red-light);color:var(--red)}
  .panel-body{padding:14px 18px;flex:1}
  .psec{margin-bottom:16px}
  .psec-title{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-muted);font-family:var(--font-m);margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--border-soft)}
  .drow{display:flex;justify-content:space-between;align-items:flex-start;padding:5px 0;border-bottom:1px solid var(--border-soft);gap:12px}
  .drow:last-child{border-bottom:none}
  .dkey{font-size:.68rem;color:var(--ink-muted);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
  .dval{font-size:.78rem;color:var(--ink);font-weight:500;text-align:right;word-break:break-word}
  .reason-text{font-size:.82rem;line-height:1.6;color:var(--ink-soft)}
  .share-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  .share-btn{flex:1;min-width:70px;padding:8px;border:none;border-radius:var(--radius);font-size:.7rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;touch-action:manipulation}
  .share-twitter{background:#1DA1F2;color:white}
  .share-copy{background:var(--cream-dark);color:var(--ink)}
  .depth-indicator{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:12px;font-size:.65rem;background:var(--cream-dark);color:var(--ink-soft)}
  .sev{padding:2px 9px;border-radius:20px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-m);display:inline-block;white-space:nowrap;flex-shrink:0}
  .sev-critical{background:var(--red-light);color:var(--red)}
  .sev-high{background:var(--orange-light);color:var(--orange)}
  .sev-medium{background:var(--yellow-light);color:var(--yellow)}
  .sev-low{background:var(--green-light);color:var(--green)}
  [data-theme="dark"] .sev-critical{background:#3D0C08;color:#F1948A}
  [data-theme="dark"] .sev-high{background:#3D1C05;color:#F0A36C}
  [data-theme="dark"] .sev-medium{background:#332800;color:#F4D03F}
  [data-theme="dark"] .sev-low{background:#0D2E1A;color:#82E0AA}
  
  /* MAIN */
  .main{max-width:1440px;margin:0 auto;padding:32px 28px 80px}
  .sec-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
  .sec-title{font-family:var(--font-d);font-size:1.45rem;font-weight:700;color:var(--ink);line-height:1.1}
  .sec-title span{color:var(--red)}
  .sec-sub{font-size:.78rem;color:var(--ink-muted);margin-top:3px}
  .tabs{display:flex;gap:2px;background:var(--cream-dark);border-radius:10px;padding:3px;margin-bottom:26px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;width:fit-content}
  .tab-btn{padding:7px 17px;border-radius:8px;border:none;background:none;font-family:var(--font-b);font-size:.81rem;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:var(--ease);white-space:nowrap;touch-action:manipulation}
  .tab-btn.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
  /* content-visibility: auto lets the browser skip painting off-screen tab panels → measurable LCP gain */
  .tab-panel{display:none;content-visibility:auto;contain-intrinsic-size:0 600px}.tab-panel.active{display:block;content-visibility:visible}
  .filter-bar{display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
  .chip{padding:5px 13px;border-radius:20px;border:1px solid var(--border);background:none;font-family:var(--font-b);font-size:.74rem;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:var(--ease);white-space:nowrap;touch-action:manipulation}
  .chip:hover,.chip.active{background:var(--ink);border-color:var(--ink);color:var(--cream)}
  [data-theme="dark"] .chip:hover,[data-theme="dark"] .chip.active{background:var(--red);border-color:var(--red)}
  .filter-divider{width:1px;height:22px;background:var(--border);flex-shrink:0}
  .sort-toggle{margin-left:auto;display:flex;gap:4px;flex-shrink:0}
  .sort-btn{background:none;border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:.7rem;cursor:pointer;white-space:nowrap;touch-action:manipulation}
  .sort-btn.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  
  /* FIX: Prevent huge cards when few earthquakes */
  .quake-grid {
      display: grid;
      gap: 7px;
      align-items: start;  /* Prevents vertical stretching of cards */
  }
  
  /* Reduce INP: touch-action:manipulation kills the 300ms tap delay; contain:content prevents row paint from forcing full-list reflow */
  .quake-row{display:grid;grid-template-columns:30px 1fr auto auto auto;align-items:center;gap:12px;padding:11px 16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);min-width:0;overflow:hidden;contain:content}
  /* Ensure cards don't stretch vertically */
  .quake-row { max-width: 100%; width: 100%; height: auto; }
  .quake-row .r-brand, .quake-row .r-product { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .quake-row .r-date, .quake-row .r-type { flex-shrink: 0; white-space: nowrap; }
  .quake-row:hover{border-color:var(--red);box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .quake-row.new{background:var(--blue-light);border-color:var(--blue)}
  .quake-row.selected{background:var(--red-light);border-color:var(--red)}
  [data-theme="dark"] .quake-row.selected{background:var(--red-dim)}
  .r-icon{font-size:1.1rem;text-align:center;flex-shrink:0}
  .r-info{min-width:0;overflow:hidden}
  .r-brand{font-weight:600;font-size:.87rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r-product{font-size:.72rem;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;display:flex;gap:4px;align-items:center}
  .r-type{font-size:.68rem;font-family:var(--font-m);color:var(--ink-muted);background:var(--cream-dark);padding:2px 7px;border-radius:4px;flex-shrink:0;white-space:nowrap}
  .r-date{font-size:.68rem;font-family:var(--font-m);color:var(--ink-muted);text-align:right;flex-shrink:0;line-height:1.5;white-space:nowrap}
  .r-src{font-size:.6rem;opacity:.6}
  .felt-badge{padding:2px 6px;border-radius:12px;font-size:.6rem;background:var(--blue-light);color:var(--blue);flex-shrink:0}
  .new-tag{position:absolute;top:-4px;left:20px;background:var(--blue);color:white;font-size:.6rem;padding:2px 8px;border-radius:20px;font-weight:600}
  .count-note{font-size:.7rem;color:var(--ink-muted);text-align:right;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft)}
  
  /* Active filter indicator */
  .active-filter-indicator {
      display: inline-block;
      background: var(--red-light);
      color: var(--red);
      font-family: var(--font-m);
      font-size: .7rem;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 12px;
  }
  [data-theme="dark"] .active-filter-indicator {
      background: var(--red-dim);
      color: #F1948A;
  }
  
  .mag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:11px}
  .mag-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px;cursor:pointer;transition:var(--ease);touch-action:manipulation}
  .mag-card:hover{border-color:var(--red);box-shadow:var(--shadow-md)}
  .mag-card.selected{border-color:var(--red);background:var(--red-light)}
  [data-theme="dark"] .mag-card.selected{background:var(--red-dim)}
  .mag-icon{font-size:1.5rem;margin-bottom:6px}
  .mag-name{font-family:var(--font-d);font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:3px}
  .mag-count{font-family:var(--font-d);font-size:1.7rem;font-weight:700;color:var(--red);line-height:1}
  .mag-lbl{font-size:.67rem;color:var(--ink-muted);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
  .mag-bar{height:3px;background:var(--border);border-radius:2px;margin-top:10px;overflow:hidden}
  .mag-bar-fill{height:100%;background:var(--red);border-radius:2px;transition:width .9s cubic-bezier(.4,0,.2,1)}
  .search-row{display:flex;gap:9px;margin-bottom:22px}
  .search-input{flex:1;padding:9px 15px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font-b);font-size:.88rem;color:var(--ink);outline:none;transition:var(--ease);min-width:0}
  .search-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.09)}
  .search-btn{padding:9px 18px;background:var(--red);color:#fff;border:none;border-radius:var(--radius);font-family:var(--font-b);font-size:.83rem;font-weight:600;cursor:pointer;transition:var(--ease);white-space:nowrap;touch-action:manipulation}
  .search-btn:hover{background:var(--red-dim)}
  .compare-picker-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);font-family:var(--font-m);margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .timeline-filters{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
  .tl-filter-row{display:flex;gap:8px;flex-wrap:wrap}
  .tl-filter-row .search-input{flex:1;min-width:120px}
  .tl-filter-row .search-btn{flex-shrink:0}
  .compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:16px}
  .compare-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px}
  .compare-card.selected{border-color:var(--red);box-shadow:var(--shadow-md)}
  .compare-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-soft)}
  .compare-mag{font-family:var(--font-d);font-size:1.8rem;font-weight:700;color:var(--red);line-height:1}
  .compare-place{font-weight:600;margin-bottom:8px;font-size:.87rem}
  .compare-detail{display:flex;justify-content:space-between;padding:4px 0;font-size:.8rem;gap:8px}
  .compare-detail .label{color:var(--ink-muted);font-family:var(--font-m);font-size:.7rem;text-transform:uppercase;flex-shrink:0}
  .big-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
  .big-stat{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px}
  .big-stat.alert{background:var(--red-light);border-color:rgba(192,57,43,.2)}
  .big-stat-lbl{font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);font-family:var(--font-m);margin-bottom:4px}
  .big-stat.alert .big-stat-lbl{color:var(--red)}
  .big-stat-val{font-family:var(--font-d);font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1}
  .big-stat.alert .big-stat-val{color:var(--red)}
  .breakdown-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .breakdown-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:18px}
  .bd-title{font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);font-family:var(--font-m);margin-bottom:13px}
  .bd-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .bd-row:last-child{margin-bottom:0}
  .bd-lbl{font-size:.8rem;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bd-bar-wrap{width:90px;flex-shrink:0}
  .bd-bar-bg{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
  .bd-bar-fill{height:100%;border-radius:2px;transition:width .85s cubic-bezier(.4,0,.2,1)}
  .bd-num{font-size:.72rem;font-family:var(--font-m);color:var(--ink-muted);width:34px;text-align:right;flex-shrink:0}
  .top-countries{list-style:none;padding:0}
  .top-countries > li{display:block;border-bottom:1px solid var(--border-soft)}
  .top-countries > li:last-child{border-bottom:none}
  .top-countries span:first-child{font-weight:500}
  .top-countries span:last-child{font-family:var(--font-m);color:var(--red)}
  .spinner-wrap{display:flex;align-items:center;justify-content:center;padding:44px 24px;color:var(--ink-muted);font-size:.8rem;gap:9px}
  .spinner{width:15px;height:15px;border:2px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
  @keyframes spin{to{transform:rotate(360deg)}}
  .empty{text-align:center;padding:52px 24px;color:var(--ink-muted);font-size:.84rem}
  .empty-icon{font-size:2.2rem;margin-bottom:8px;display:block;opacity:.3}
  .fade-in{animation:fin .32s ease both}
  @keyframes fin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
  .pulse-marker{border-radius:50%;border:2px solid rgba(255,255,255,.7);cursor:pointer;animation:mp 2.5s ease-out infinite;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:box-shadow}
  @keyframes mp{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
  footer{background:#0F0D0C;color:rgba(245,242,238,.4);padding:22px;text-align:center;font-size:.7rem;font-family:var(--font-m);line-height:1.9}
  footer a{color:rgba(245,242,238,.6);text-decoration:none}footer a:hover{color:#fff}
  
  /* BOTTOM SHEET */
  .qs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1150;opacity:0;pointer-events:none;transition:opacity .25s ease}
  .qs-overlay.open{opacity:1;pointer-events:all}
  .quake-sheet{position:fixed;bottom:0;left:0;right:0;max-height:88vh;background:var(--surface);border-radius:20px 20px 0 0;z-index:1160;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.25)}
  .quake-sheet.open{transform:translateY(0)}
  .qs-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:12px auto 0;flex-shrink:0}
  @media(min-width:601px){
    .quake-sheet{left:50%;right:auto;width:460px;max-height:90vh;transform:translate(-50%,100%)}
    .quake-sheet.open{transform:translate(-50%,0)}
  }
  
  /* RESPONSIVE */
  @media(max-width:1024px){
    .stats-inner{grid-template-columns:repeat(2,1fr)}
    .header-nav{display:none}
    .big-stats{grid-template-columns:repeat(2,1fr)}
    .breakdown-grid{grid-template-columns:1fr}
    .quake-row{grid-template-columns:30px 1fr auto auto}
    .r-date .r-src{display:none}
  }
  @media(max-width:768px){
    .side-panel{display:none!important}
    .map-wrap{height:44vh;min-height:240px;max-height:none}
    .stats-inner{grid-template-columns:repeat(2,1fr);padding:0 16px}
    .stat{padding:10px 14px}
    .stat-val{font-size:1.2rem}
    .main{padding:20px 16px 70px}
    .time-filter-bar{padding:7px 16px}
    .big-stats{grid-template-columns:1fr 1fr}
    .compare-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:600px){
    .header-inner{padding:0 14px;height:54px;gap:10px}
    .stats-inner{padding:0 14px}
    .stat{padding:9px 12px}
    .stat-val{font-size:1.05rem}
    .stat-lbl{font-size:.6rem;letter-spacing:.07em}
    .stat-sub{font-size:.62rem}
    .map-wrap{height:40vh;min-height:220px}
    .time-filter-bar{padding:6px 14px}
    .time-chip{font-size:.68rem;padding:3px 10px}
    .main{padding:14px 14px 68px}
    .sec-title{font-size:1.2rem}
    .tab-btn{padding:6px 12px;font-size:.75rem}
    .mag-grid{grid-template-columns:repeat(2,1fr)}
    .compare-grid{grid-template-columns:1fr}
    .filter-bar{gap:5px}
    .search-row{flex-direction:column}
    .search-btn{width:100%;text-align:center;justify-content:center}
    .quake-row{grid-template-columns:26px 1fr auto;gap:9px;padding:10px 12px}
    .r-type,.r-date{display:none}
    .sev{padding:2px 7px;font-size:.59rem}
    .r-brand{font-size:.83rem}
    .r-product{font-size:.68rem}
    .bd-bar-wrap{width:55px}
    .big-stat-val{font-size:1.4rem}
    .breakdown-grid{grid-template-columns:1fr}
    /* leaderboard */
    .lb-row{padding:8px 0;gap:8px}
    .lb-rank{width:24px;font-size:.75rem}
    .lb-icon{font-size:1rem;width:20px}
    .lb-place{font-size:.8rem}
    .lb-meta{font-size:.65rem}
    .lb-count-badge{font-size:.62rem;padding:2px 6px}
    .lb-extra{font-size:.6rem}
    .lb-filter-row{flex-direction:column;align-items:flex-start;gap:8px}
    .lb-filter-label{min-width:auto}
    .lb-chips{width:100%}
    .lb-chip{font-size:.7rem;padding:4px 10px}
  }
  /* Galaxy S8 / very narrow (360px) */
  @media(max-width:400px){
    .header-inner{padding:0 10px;height:50px;gap:7px}
    .logo-name{font-size:.9rem}
    .logo-mark{width:27px;height:27px}
    .live-badge{display:none}
    .theme-btn{width:30px;height:30px}
    .stats-inner{padding:0 10px}
    .stat{padding:8px 9px}
    .stat-val{font-size:.95rem}
    .stat-lbl{font-size:.56rem}
    .stat-sub{font-size:.58rem}
    .map-wrap{height:36vh;min-height:200px}
    .time-filter-bar{padding:5px 10px}
    .time-chip{font-size:.63rem;padding:3px 8px}
    .main{padding:11px 10px 68px}
    .tab-btn{padding:5px 9px;font-size:.7rem}
    .quake-row{padding:8px 10px;gap:7px}
    .r-brand{font-size:.79rem}
    .r-product{font-size:.64rem}
    .sev{font-size:.56rem;padding:2px 5px}
    .mag-grid{grid-template-columns:1fr 1fr;gap:7px}
    .compare-grid{grid-template-columns:1fr}
    .map-legend{top:8px;left:8px}
    .map-fullscreen-btn{top:8px;right:8px;width:32px;height:32px}
    .map-fullscreen-btn svg{width:13px;height:13px}
    .big-stats{grid-template-columns:1fr 1fr;gap:7px}
    .big-stat{padding:11px}
    .big-stat-val{font-size:1.2rem}
    .sec-title{font-size:1.1rem}
  }
  
  /* ── MOBILE DROPDOWNS (small screen navigation) ── */
  @media(max-width:767px){
    .time-range-chips{display:none}
    .mobile-time-select{display:block}
    .tabs{display:none}
    .mobile-tab-select{display:block}
  }
  
  /* ── MAPLIBRE ATTRIBUTION FIX ── */
  /* Keep attribution compact and non-intrusive */
  .maplibregl-ctrl-attrib{opacity:.55;transition:opacity .2s}
  .maplibregl-ctrl-attrib:hover,.maplibregl-ctrl-attrib.maplibregl-compact-show{opacity:1}
  .maplibregl-ctrl-attrib:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner{display:none!important}
  .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block!important}
  @media(max-width:768px){
    .maplibregl-ctrl-attrib{opacity:.35}
    .maplibregl-ctrl-attrib-inner{font-size:.6rem!important;max-width:200px}
  }
  
  /* ── TIMELINE PAGINATION ── */
  .timeline-pagination,.quakes-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;padding:14px 0;border-top:1px solid var(--border-soft)}
  .tl-pg-btn{padding:7px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font-b);font-size:.8rem;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:var(--ease);touch-action:manipulation}
  .tl-pg-btn:hover:not(:disabled){background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .tl-pg-btn:disabled{opacity:.35;cursor:default}
  [data-theme="dark"] .tl-pg-btn:hover:not(:disabled){background:var(--red);border-color:var(--red)}
  .tl-pg-info{font-size:.78rem;font-family:var(--font-m);color:var(--ink-muted);white-space:nowrap;text-align:center}
  
  /* ── IMPROVED COMPARE CARDS ── */
  .compare-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:0;overflow:hidden;position:relative}
  .compare-card.selected{border-color:var(--red);box-shadow:var(--shadow-md)}
  .compare-card-top{padding:14px 16px 10px;border-bottom:1px solid var(--border-soft)}
  .compare-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .compare-mag{font-family:var(--font-d);font-size:2rem;font-weight:700;color:var(--red);line-height:1}
  .compare-mag-bar-wrap{height:6px;background:var(--border);border-radius:3px;margin:8px 0;overflow:hidden}
  .compare-mag-bar{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
  .compare-place{font-weight:600;font-size:.87rem;color:var(--ink);line-height:1.4;margin-bottom:4px}
  .compare-time{font-size:.68rem;color:var(--ink-muted);font-family:var(--font-m)}
  .compare-body{padding:10px 16px 14px}
  .compare-detail{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border-soft);font-size:.8rem;gap:8px}
  .compare-detail:last-child{border-bottom:none}
  .compare-detail .label{color:var(--ink-muted);font-family:var(--font-m);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
  .compare-detail .value{font-weight:500;color:var(--ink);text-align:right;word-break:break-word}
  .compare-detail .value.highlight{color:var(--green);font-weight:700}
  .compare-detail .value.warn{color:var(--red)}
  .compare-best-badge{font-size:.56rem;background:var(--green-light);color:var(--green);padding:1px 5px;border-radius:8px;font-weight:600;margin-left:4px;vertical-align:middle}
  .compare-actions{padding:0 16px 12px;display:flex;gap:8px}
  
  /* ── IMPROVED COUNTRY SUBREGION LIST ── */
  .country-sub-list{list-style:none;padding:0;margin:0;background:var(--cream-dark);border-top:1px solid var(--border-soft)}
  .country-sub-item{display:flex;justify-content:space-between;align-items:center;padding:5px 12px 5px 24px;border-bottom:1px solid var(--border-soft);font-size:.77rem}
  .country-sub-item:last-child{border-bottom:none}
  .country-sub-name{color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .country-sub-count{font-family:var(--font-m);color:var(--ink-muted);font-size:.72rem;flex-shrink:0;margin-left:8px}
  .country-row-header{display:flex;justify-content:space-between;align-items:center;padding:8px 0;cursor:pointer;user-select:none}
  .country-row-header:hover .country-row-name{color:var(--red)}
  .country-row-name{font-weight:500;display:flex;align-items:center;gap:6px;transition:color .15s;font-size:.85rem;color:var(--ink)}
  .country-row-count{font-family:var(--font-m);color:var(--red);font-weight:600;font-size:.82rem}
  .country-chevron{font-size:.55rem;opacity:.4;transition:transform .2s;flex-shrink:0;display:inline-block}
  
  /* ── SEARCH TIP ── */
  .search-tip{font-size:.78rem;color:var(--ink-muted);background:var(--cream-dark);border:1px solid var(--border-soft);border-radius:var(--radius);padding:9px 14px;margin-bottom:20px;line-height:1.5}
  .search-tip-link{background:none;border:none;color:var(--red);font-size:.78rem;cursor:pointer;padding:0;font-family:var(--font-b);text-decoration:underline;text-underline-offset:2px;touch-action:manipulation}
  .search-tip-link:hover{color:var(--red-dim)}
  .search-note{font-size:.73rem;color:var(--ink-muted);font-family:var(--font-m);margin-bottom:10px;padding:6px 0}
  
  /* ══════════════════════════════════════════════════════
     LEADERBOARDS
  ══════════════════════════════════════════════════════ */
  .lb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:4px}
  .lb-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:0;min-width:0;overflow:hidden}
  .lb-title{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:3px}
  .lb-subtitle{font-size:.72rem;color:var(--ink-muted);font-family:var(--font-m);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em}
  .lb-list{display:flex;flex-direction:column;gap:0}
  
  /* ── LEADERBOARD ROW IMPROVEMENTS ── */
  .lb-icon {
      font-size: 1.2rem;
      flex-shrink: 0;
      width: 24px;
      text-align: center;
  }
  
  .lb-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 0;
      border-bottom: 1px solid var(--border-soft);
      cursor: pointer;
      transition: var(--ease);
      min-width: 0;
  }
  
  .lb-row:hover {
      background: var(--cream-dark);
      margin: 0 -8px;
      padding: 9px 8px;
      border-radius: 6px;
      border-bottom-color: transparent;
  }
  
  .lb-rank {
      font-family: var(--font-m);
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--ink-muted);
      width: 28px;
      text-align: center;
      flex-shrink: 0;
  }
  
  .lb-info {
      flex: 1;
      min-width: 0;
  }
  
  .lb-place {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .lb-meta {
      font-size: 0.68rem;
      color: var(--ink-muted);
      font-family: var(--font-m);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .lb-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      flex-shrink: 0;
  }
  
  .lb-extra {
      font-size: 0.65rem;
      font-family: var(--font-m);
      color: var(--ink-muted);
      white-space: nowrap;
  }
  
  .lb-count-badge {
      background: var(--cream-dark);
      color: var(--ink);
      font-size: 0.68rem;
      font-family: var(--font-m);
      padding: 2px 8px;
      border-radius: 20px;
      font-weight: 500;
      white-space: nowrap;
  }
  
  /* ── MEDAL COLORS ── */
  .lb-row:nth-child(1) .lb-rank {
      color: #C9A227;
      font-weight: 700;
  }
  
  .lb-row:nth-child(2) .lb-rank {
      color: #9E9590;
      font-weight: 600;
  }
  
  .lb-row:nth-child(3) .lb-rank {
      color: #D35400;
      font-weight: 600;
  }
  
  /* ── REGION ROW HOVER ── */
  .lb-row-region {
      cursor: pointer;
  }
  
  .lb-row-region:hover .lb-place {
      color: var(--red);
  }
  
  .lb-row-region:hover .lb-extra {
      color: var(--red);
      opacity: 1;
  }
  
  /* ── TODAY'S TOP CARD ACCENT ── */
  .lb-card-today {
      border-top: 3px solid var(--red);
      background: var(--surface);
  }
  
  /* ── FILTER BAR IMPROVEMENTS ── */
  .lb-filters {
      background: var(--cream-dark);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius);
      padding: 16px 18px;
      margin-bottom: 24px;
  }
  
  .lb-filter-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
  }
  
  .lb-filter-row:first-child {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-soft);
  }
  
  .lb-filter-label {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--ink-muted);
      font-family: var(--font-m);
      min-width: 70px;
  }
  
  .lb-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      flex: 1;
  }
  
  .lb-chip {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 0.75rem;
      font-family: var(--font-b);
      font-weight: 500;
      color: var(--ink-soft);
      cursor: pointer;
      transition: var(--ease);
      white-space: nowrap;
  }
  
  .lb-chip:hover {
      border-color: var(--red);
      color: var(--red);
  }
  
  .lb-chip.active {
      background: var(--red);
      border-color: var(--red);
      color: white;
  }
  
  .lb-year-select {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius);
      padding: 4px 8px;
      font-size: 0.75rem;
      font-family: var(--font-b);
      color: var(--ink);
      cursor: pointer;
      height: 30px;
  }
  
  /* ── IMPROVED REGION DETAIL PANEL (MODAL) ── */
  .region-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.2s ease;
  }
  
  .region-modal-content {
      background: var(--surface);
      border-radius: var(--radius);
      max-width: 700px;
      width: 100%;
      max-height: 80vh;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      animation: slideUp 0.3s ease;
  }
  
  .region-modal-header {
      padding: 18px 20px;
      border-bottom: 1px solid var(--border-soft);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--cream-dark);
  }
  
  .region-modal-title {
      font-family: var(--font-d);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
  }
  
  .region-modal-count {
      font-size: 0.8rem;
      font-family: var(--font-m);
      color: var(--ink-muted);
      font-weight: normal;
  }
  
  .region-modal-close {
      width: 32px;
      height: 32px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
      cursor: pointer;
      display: grid;
      place-items: center;
      color: var(--ink-muted);
      font-size: 1rem;
      transition: var(--ease);
  }
  
  .region-modal-close:hover {
      background: var(--red-light);
      color: var(--red);
      border-color: var(--red);
  }
  
  .region-modal-body {
      padding: 16px;
      overflow-y: auto;
      max-height: calc(80vh - 80px);
      background: var(--surface);
  }
  
  .region-modal-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border-bottom: 1px solid var(--border-soft);
      cursor: pointer;
      transition: var(--ease);
      border-radius: 6px;
  }
  
  .region-modal-row:hover {
      background: var(--cream-dark);
      transform: translateX(4px);
  }
  
  .region-modal-row:last-child {
      border-bottom: none;
  }
  
  .region-modal-row-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
  }
  
  .region-modal-row-info {
      flex: 1;
      min-width: 0;
  }
  
  .region-modal-row-place {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--ink);
      margin-bottom: 4px;
      word-break: break-word;
  }
  
  .region-modal-row-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 0.75rem;
      color: var(--ink-muted);
      font-family: var(--font-m);
      align-items: center;
  }
  
  @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  
  @keyframes slideUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  /* ── SKELETON LOADING ── */
  .skeleton-row{display:grid;grid-template-columns:30px 1fr auto auto auto;align-items:center;gap:12px;padding:11px 16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);margin-bottom:7px}
  .skeleton-block{border-radius:4px;background:linear-gradient(90deg,var(--border-soft) 25%,var(--cream-dark) 50%,var(--border-soft) 75%);background-size:200% 100%;animation:skel 1.4s ease infinite}
  @keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
  [data-theme="dark"] .skeleton-block{background:linear-gradient(90deg,var(--border) 25%,var(--border-soft) 50%,var(--border) 75%);background-size:200% 100%;animation:skel 1.4s ease infinite}

  /* ── ABOUT PAGE ── */
  .about-wrap{max-width:960px}
  .about-hero{display:flex;align-items:center;gap:18px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-soft)}
  .about-logo-mark{width:58px;height:58px;background:var(--red);border-radius:14px;display:grid;place-items:center;flex-shrink:0}
  .about-title{font-family:var(--font-d);font-size:1.6rem;font-weight:700;color:var(--ink);line-height:1.15}
  .about-tagline{font-size:.85rem;color:var(--ink-muted);margin-top:5px;line-height:1.5}
  .about-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:28px}
  .about-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px 22px;transition:var(--ease)}
  .about-card:hover{border-color:var(--red);box-shadow:var(--shadow-md)}
  .about-card-icon{font-size:1.6rem;margin-bottom:9px}
  .about-card-title{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-soft)}
  .about-card-body{font-size:.82rem;color:var(--ink-soft);line-height:1.75}
  .about-link{color:var(--red);text-decoration:none;font-weight:500}
  .about-link:hover{text-decoration:underline;text-underline-offset:2px}
  .about-mag-row{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:.78rem;color:var(--ink-soft)}
  .about-footer-note{font-size:.72rem;color:var(--ink-muted);font-family:var(--font-m);border-top:1px solid var(--border-soft);padding-top:18px;line-height:2.2}
  @media(max-width:600px){
    .about-hero{flex-direction:column;align-items:flex-start;gap:12px}
    .about-logo-mark{width:48px;height:48px}
    .about-title{font-size:1.25rem}
    .about-grid{grid-template-columns:1fr}
    .region-modal-content{max-height:90vh}
    .region-modal-title{font-size:1rem}
    .region-modal-count{font-size:.7rem}
    .region-modal-row{padding:10px}
    .region-modal-row-icon{font-size:1.2rem}
    .region-modal-row-place{font-size:.85rem}
  }
  /* Remove problematic min-height that caused huge cards */
  .quake-grid,
  #timeline-quakes {
      min-height: auto;
  }
  #search-results,
  #mag-quakes {
      min-height: 300px;
  }