/* ══════════════════════════════════════
       MRMS VIEWER
       ══════════════════════════════════════ */
    #mrms-view {
      width: min(1020px, 97vw);
      padding: 48px 24px 120px;
      text-align: center;
      margin: 0 auto;
    }

    .mrms-product-bar {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }

    .mrms-product-btn {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 6px 16px;
      cursor: pointer;
      transition: color 0.2s, background 0.2s, border-color 0.2s;
    }
    .mrms-product-btn:hover { color: var(--text); border-color: rgba(139,32,192,0.4); }
    .mrms-product-btn.active {
      color: var(--teal);
      background: rgba(139,32,192,0.12);
      border-color: rgba(139,32,192,0.55);
    }

    .mrms-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 14px;
    }

    .mrms-loop-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--teal);
      background: rgba(139,32,192,0.1);
      border: 1px solid rgba(139,32,192,0.4);
      border-radius: 20px;
      padding: 6px 16px;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .mrms-loop-btn:hover { background: rgba(139,32,192,0.2); box-shadow: 0 0 14px rgba(139,32,192,0.3); }
    .mrms-loop-btn.playing { color: #ec3754; border-color: rgba(236,55,84,0.5); background: rgba(236,55,84,0.1); }

    .mrms-timestamp {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: var(--text-muted);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 5px 12px;
      letter-spacing: 0.03em;
    }

    .mrms-warnings-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      user-select: none;
    }
    .mrms-warnings-label input { accent-color: var(--teal); cursor: pointer; }

    .mrms-map-wrap {
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(139,32,192,0.2);
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      min-height: 420px;
      margin-bottom: 16px;
    }

    #mrms-map { width: 100%; height: 520px; }

    #mrms-map .leaflet-control-attribution {
      background: rgba(0,0,0,0.65) !important;
      color: rgba(255,255,255,0.4) !important;
      font-size: 9px !important;
    }

    .mrms-legend {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      padding: 10px 0 4px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .mrms-legend-bar {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .mrms-legend-gradient {
      width: 140px;
      height: 10px;
      border-radius: 3px;
    }

    .mrms-legend-label {
      font-size: 10.5px;
      color: var(--text-muted);
      min-width: 24px;
    }

    .mrms-loop-scrubber {
      display: none;
      align-items: center;
      gap: 10px;
      justify-content: center;
      margin-bottom: 10px;
    }
    .mrms-loop-scrubber.visible { display: flex; }
    .mrms-loop-scrubber input[type=range] {
      width: 220px;
      accent-color: var(--teal);
    }
    .mrms-loop-frame-label {
      font-size: 11px;
      color: var(--teal);
      font-family: 'Courier New', monospace;
      min-width: 80px;
      text-align: right;
    }

    .mrms-source-bar {
      font-size: 11px;
      color: rgba(255,255,255,0.25);
      margin-top: 6px;
      letter-spacing: 0.03em;
    }

    /* ══════════════════════════════════════