:root {
      /* Default Dark Theme - Neuromorphic */
      color-scheme: dark;
      
      /* Solid background for Neuro - Dark Blue/Purple tint */
      --bg: #121432; 
      --glass: #121432; 
      --glass-strong: #121432;
      
      --border: rgba(255, 255, 255, 0.05);
      --text: #e6f1ff;
      --muted: #a0a8c0;
      
      --accent: #007bff;   /* Pure Blue */
      --accent-2: #9d4edd; /* Purple */
      
      --danger: #ff6b6b;
      --ok: #00e676;
      
      --input-bg: #1e1f2e;
      
      /* Neuromorphic Shadows - Dark (Softer) */
      --shadow-light: rgba(255, 255, 255, 0.03);
      --shadow-dark: rgba(0, 0, 0, 0.35);
      
      --card-shadow: 10px 10px 20px var(--shadow-dark), 
                     -10px -10px 20px var(--shadow-light);
                     
      --btn-shadow: 6px 6px 10px var(--shadow-dark), 
                    -6px -6px 10px var(--shadow-light);
                    
      --btn-shadow-inset: inset 6px 6px 10px var(--shadow-dark), 
                          inset -6px -6px 10px var(--shadow-light);
    }

    /* Neuromorphic Light Theme */
    body.light-theme {
      color-scheme: light;
      --bg: #e0e5ec;
      --glass: #e0e5ec; /* Opaque for neuro */
      --glass-strong: #e0e5ec;
      --border: rgba(255, 255, 255, 0.4);
      --text: #4a4a4a;
      --muted: #7a7a7a;
      
      --accent: #007bff;
      --accent-2: #9d4edd;
      
      --input-bg: #e0e5ec;
      
      /* Neuromorphic Shadows */
      --shadow-light: #ffffff;
      --shadow-dark: #a3b1c6;
      
      --card-shadow: 9px 9px 16px var(--shadow-dark), 
                     -9px -9px 16px var(--shadow-light);
                     
      --btn-shadow: 6px 6px 10px var(--shadow-dark), 
                    -6px -6px 10px var(--shadow-light);
                    
      --btn-shadow-inset: inset 6px 6px 10px var(--shadow-dark), 
                          inset -6px -6px 10px var(--shadow-light);
    }

    body.light-theme .card {
      border: 1px solid rgba(255,255,255,0.2);
    }

    body.light-theme button, 
    body.light-theme input, 
    body.light-theme select {
      border: none; /* Neuro relies on shadow */
      box-shadow: var(--btn-shadow);
      color: var(--text);
    }

    body.light-theme button:active, 
    body.light-theme button.active {
      box-shadow: var(--btn-shadow-inset);
    }
    
    body.light-theme .pill {
        background: #e0e5ec;
        box-shadow: var(--btn-shadow);
        border: none;
    }
    
    body.light-theme .token-grid label {
        background: #e0e5ec;
        box-shadow: var(--btn-shadow);
        border: none;
        color: var(--text); /* Dark text for readability */
    }
    
    body.light-theme .token-grid label:hover {
        filter: brightness(0.95);
    }
    
    body.light-theme .token-grid label.active {
        box-shadow: var(--btn-shadow-inset);
        background: #e0e5ec;
        border: none;
    }
    
    /* Color-coded active pills in light mode - same logic as dark mode */
    body.light-theme .token-grid label.hrv-low.active {
        color: #d32f2f; /* Darker red for light mode readability */
        background: rgba(255, 71, 87, 0.2);
    }
    
    body.light-theme .token-grid label.hrv-medium.active {
        color: #f57c00; /* Darker orange for light mode readability */
        background: rgba(255, 193, 7, 0.2);
    }
    
    body.light-theme .token-grid label.hrv-high.active {
        color: #00c853; /* Darker green for light mode readability */
        background: rgba(0, 230, 118, 0.2);
    }
    
    /* Non-active pills in light mode should also be color-coded */
    body.light-theme .token-grid label.hrv-low:not(.active) {
        color: #d32f2f;
        background: rgba(255, 71, 87, 0.1);
        opacity: 1 !important; /* Override dark mode opacity */
        filter: none !important; /* Override dark mode grayscale */
    }
    
    body.light-theme .token-grid label.hrv-medium:not(.active) {
        color: #f57c00;
        background: rgba(255, 193, 7, 0.1);
        opacity: 1 !important;
        filter: none !important;
    }
    
    body.light-theme .token-grid label.hrv-high:not(.active) {
        color: #00c853;
        background: rgba(0, 230, 118, 0.1);
        opacity: 1 !important;
        filter: none !important;
    }
    
    body.light-theme .token-grid label:not(.active):hover {
        opacity: 0.8 !important; /* Slight fade on hover instead of grayscale */
        filter: none !important;
    }

    /* Theme Toggle Switch */
    .theme-toggle {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      max-width: 36px;
      max-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    
    body.light-theme .theme-toggle {
        box-shadow: var(--btn-shadow);
        color: #ffa500; /* Sun color */
    }
    
    body:not(.light-theme) .theme-toggle:hover {
        background: rgba(255,255,255,0.1);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      padding: 24px;
      /* iOS safe area insets for notch / Dynamic Island */
      padding-top: max(24px, env(safe-area-inset-top, 24px));
      padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
      padding-left: max(24px, env(safe-area-inset-left, 24px));
      padding-right: max(24px, env(safe-area-inset-right, 24px));
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;
    }
    h1, h2, h3, h4 { margin: 0 0 8px; letter-spacing: 0.5px; font-weight: 600; }
    p { margin: 0; color: var(--muted); font-weight: 300; }
    
    .layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 20px;
    }
    .card {
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      backdrop-filter: blur(12px);
      box-shadow: var(--card-shadow);
      position: relative;
    }
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      position: relative;
    }
    .pill {
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(0, 123, 255, 0.15);
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      border: 1px solid rgba(0, 123, 255, 0.3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    /* Map card toolbar — pills, legend, and import on one row */
    .map-card-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 6px;
      margin-bottom: 12px;
      min-height: 36px;
      position: relative;
      padding-right: 42px;
      overflow: visible;
      z-index: 100;
    }
    .map-pill-group {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: 0 1 auto;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      max-width: min(100%, calc(100% - 150px));
      min-width: 0;
    }
    .map-pill-group::-webkit-scrollbar {
      display: none;
    }
    .map-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: auto;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      padding: 0 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.05);
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      border: 1px solid var(--border);
      text-transform: none;
      letter-spacing: 0;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: "Poppins", sans-serif;
      line-height: 1.1;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .map-pill:hover {
      background: rgba(0, 123, 255, 0.1);
      border-color: rgba(0, 123, 255, 0.3);
      color: var(--text);
    }
    .map-pill.active {
      background: rgba(0, 123, 255, 0.2);
      color: var(--accent);
      border-color: rgba(0, 123, 255, 0.5);
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
    }
    body.light-theme .map-pill {
      background: #e0e5ec;
      box-shadow: var(--btn-shadow);
      border: none;
      color: var(--muted);
    }
    body.light-theme .map-pill:hover {
      filter: brightness(0.95);
      color: var(--text);
    }
    body.light-theme .map-pill.active {
      box-shadow: var(--btn-shadow-inset);
      background: rgba(0, 123, 255, 0.15);
      color: var(--accent);
    }

    /* Hide telemetry columns when the loaded window has no values */
    #telemetry-table.hide-col-ambientTemp th[data-key="ambientTemp"],
    #telemetry-table.hide-col-ambientTemp td:nth-child(8) {
      display: none;
    }
    #telemetry-table.hide-col-calibratedAt th[data-key="calibratedAt"],
    #telemetry-table.hide-col-calibratedAt td:nth-child(9) {
      display: none;
    }
    
    /* Aggregate Metric Selector (under Points dropdown in blurred box) */
    .aggregate-metric-selector {
      position: absolute;
      top: 60px;
      right: 12px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 4px 6px;
      background: rgba(18, 20, 50, 0.5);
      border: 1px solid var(--border);
      border-radius: 6px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      font-family: "Poppins", sans-serif;
      transition: all 0.2s ease;
    }
    body.light-theme .aggregate-metric-selector {
      background: rgba(224, 229, 236, 0.5);
    }
    .aggregate-metric-selector .agg-radio {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 9px;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 3px;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .aggregate-metric-selector .agg-radio:hover {
      background: rgba(0, 123, 255, 0.15);
      color: var(--text);
    }
    .aggregate-metric-selector .agg-radio input[type="radio"] {
      width: 10px;
      height: 10px;
      accent-color: var(--accent);
      cursor: pointer;
      margin: 0;
    }
    .aggregate-metric-selector .agg-radio input[type="radio"]:checked + span {
      color: var(--accent);
      font-weight: 600;
    }
    body.light-theme .aggregate-metric-selector .agg-radio {
      color: var(--muted);
    }
    body.light-theme .aggregate-metric-selector .agg-radio:hover {
      background: rgba(0, 123, 255, 0.15);
      color: var(--text);
    }
    body.light-theme .aggregate-metric-selector .agg-radio input[type="radio"]:checked + span {
      color: var(--accent);
    }
    
    /* Chart header pills */
    .chart-pill {
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0, 123, 255, 0.15);
      color: var(--accent);
      font-size: 13px;
      font-weight: 600;
      border: 1px solid rgba(0, 123, 255, 0.3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    
    .chart-import-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      max-width: 32px;
      max-height: 32px;
      border-radius: 50%;
      background: var(--input-bg);
      color: var(--text);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--btn-shadow);
      margin-left: auto;
      flex-shrink: 0;
    }
    
    .chart-import-btn:hover {
      background: rgba(0, 123, 255, 0.15);
      color: var(--accent);
      transform: translateY(-1px);
    }
    
    .chart-import-btn:active {
      transform: translateY(0);
      box-shadow: var(--btn-shadow-inset);
    }
    
    .chart-import-btn svg {
      width: 16px;
      height: 16px;
      transform: rotate(180deg);
    }

    .redo-hrv-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 16px;
      background: var(--input-bg);
      color: var(--text);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--btn-shadow);
      font-size: 11px;
      font-weight: 500;
      font-family: inherit;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .redo-hrv-btn:hover {
      background: rgba(0, 123, 255, 0.15);
      color: var(--accent);
      transform: translateY(-1px);
    }
    .redo-hrv-btn:active {
      transform: translateY(0);
      box-shadow: var(--btn-shadow-inset);
    }
    .redo-hrv-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    .redo-hrv-btn svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }


    /* Tooltip positioned above the element instead of below */
    .tooltip-above[data-tooltip]:hover::after,
    .tooltip-above[data-tooltip]:focus::after {
      top: auto;
      bottom: calc(100% + 6px);
      transform: translateX(-50%);
    }
    .tooltip-above[data-tooltip]:hover::before,
    .tooltip-above[data-tooltip]:focus::before {
      top: auto;
      bottom: 100%;
      border-bottom-color: transparent;
      border-top-color: var(--input-bg);
      margin-top: 0;
      margin-bottom: -2px;
    }

    body.light-theme .chart-pill {
      background: rgba(0, 123, 255, 0.1);
      box-shadow: var(--btn-shadow);
      border: none;
    }
    
    .controls {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 12px;
    }
    
    button, input, select {
      border-radius: 8px;
      border: none; /* Neuro style */
      background: var(--input-bg);
      color: var(--text);
      padding: 10px 14px;
      font-size: 13px;
      font-family: "Poppins", sans-serif;
      transition: all 0.2s ease;
      outline: none;
      box-shadow: var(--btn-shadow);
      height: 38px; /* Consistent height for all controls */
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
    }
    button {
      cursor: pointer;
      font-weight: 500;
      /* Remove glass/flat specific styles */
      /* background: rgba(0, 123, 255, 0.1); */
      /* border-color: rgba(0, 123, 255, 0.3); */
      color: var(--text);
    }
    button:hover {
      transform: translateY(-1px);
      box-shadow: var(--btn-shadow); /* Maintain or enhance shadow */
      filter: brightness(1.1); /* Simple highlight */
    }
    button:active, button.active { 
      transform: translateY(0);
      box-shadow: var(--btn-shadow-inset);
    }
    
    select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }
    select:focus, input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    }
    
    input[type="datetime-local"] {
      color-scheme: dark;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    th, td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      white-space: nowrap;
    }
    th {
      color: var(--accent);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.5px;
    }
    tbody tr:hover { background: rgba(255,255,255,0.03); }
    
    .flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    
    .status { font-size: 12px; color: var(--muted); font-weight: 500; }
    .status.ok { color: var(--ok); }
    .status.err { color: var(--danger); }
    
    .status-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      font-size: 12px;
      min-width: 140px;
      font-weight: 500;
    }
    .status-chip.ok { color: var(--ok); border-color: rgba(0, 230, 118, 0.3); background: rgba(0, 230, 118, 0.05); }
    .status-chip.err { color: var(--danger); border-color: rgba(255, 107, 107, 0.3); background: rgba(255, 107, 107, 0.05); }
    .status-chip.loading { color: var(--accent); border-color: rgba(0, 123, 255, 0.3); background: rgba(0, 123, 255, 0.05); }
    
    .spinner {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255,255,255,0.1);
      border-top: 2px solid var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    
    .token-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 0;
    }
    
    .token-grid-label {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 600;
      white-space: nowrap;
      font-family: "Poppins", sans-serif;
    }
    .token-grid label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 500;
    }
    .token-grid label .token-label-text {
      white-space: nowrap;
    }
    .token-grid label .token-warning-icon {
      color: #ff4757;
      font-size: 14px;
    }
    .token-grid label .token-settings-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      padding: 0;
      font-size: 12px;
      line-height: 1;
    }
    .token-grid label .token-settings-btn:hover {
      color: var(--text);
      border-color: var(--border);
      background: rgba(255,255,255,0.06);
    }
    .token-grid label:hover {
      background: rgba(255,255,255,0.06);
    }
    .token-grid label.active {
      background: rgba(157, 78, 221, 0.2);
      color: #e0bbff;
      border-color: rgba(157, 78, 221, 0.5);
    }
    /* Grey out disabled (non-active) token pills */
    .token-grid label:not(.active) {
      opacity: 0.35 !important;
      filter: grayscale(0.7) !important;
    }
    .token-grid label:not(.active):hover {
      opacity: 0.5 !important;
      filter: grayscale(0.5) !important;
    }
    .token-grid label.token-no-data:not(.active) {
      opacity: 0.25 !important;
    }
    .token-grid input { display: none; }
    
    /* Custom tooltip for token-grid */
    .token-tooltip {
      position: fixed;
      background: rgba(10, 25, 47, 0.98) !important;
      color: #e6f1ff !important;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.6;
      max-width: 300px;
      min-width: 200px;
      z-index: 99999 !important;
      pointer-events: none;
      border: 1px solid rgba(100, 255, 218, 0.5) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
      white-space: pre-line;
      font-family: "Poppins", sans-serif;
      display: none;
    }
    .token-tooltip.visible {
      display: block !important;
    }
    .token-grid label {
      position: relative;
    }
    
    /* HRV status colors for tokens */
    .token-grid label.hrv-low {
      background: rgba(255, 71, 87, 0.25);
      color: #ff6b6b;
      border-color: rgba(255, 71, 87, 0.6);
    }
    .token-grid label.hrv-low.active {
      background: rgba(255, 71, 87, 0.35);
      color: #ff4757;
      border-color: rgba(255, 71, 87, 0.8);
    }
    .token-grid label.hrv-medium {
      background: rgba(255, 193, 7, 0.25);
      color: #ffc107;
      border-color: rgba(255, 193, 7, 0.6);
    }
    .token-grid label.hrv-medium.active {
      background: rgba(255, 193, 7, 0.35);
      color: #ffca2c;
      border-color: rgba(255, 193, 7, 0.8);
    }
    .token-grid label.hrv-high {
      background: rgba(0, 230, 118, 0.25);
      color: #00e676;
      border-color: rgba(0, 230, 118, 0.6);
    }
    .token-grid label.hrv-high.active {
      background: rgba(0, 230, 118, 0.35);
      color: #00ff88;
      border-color: rgba(0, 230, 118, 0.8);
    }

    /* "Show more" button for device overflow */
    .token-show-more-btn {
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      color: var(--accent);
      padding: 6px 14px;
      border-radius: 6px;
      border: 1px dashed var(--accent);
      background: transparent;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .token-show-more-btn:hover {
      background: rgba(157, 78, 221, 0.15);
      border-style: solid;
    }

    /* Device modal overlay */
    .device-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }
    .device-modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      min-width: 340px;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }
    .device-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .device-modal-close {
      background: transparent;
      border: none;
      color: var(--muted);
      font-size: 18px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      line-height: 1;
    }
    .device-modal-close:hover {
      color: var(--text);
      background: rgba(255,255,255,0.08);
    }
    .device-modal-actions {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .device-modal-action-btn {
      font-size: 11px;
      padding: 5px 12px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-weight: 500;
      transition: all 0.15s ease;
    }
    .device-modal-action-btn:hover {
      color: var(--text);
      border-color: var(--accent);
      background: rgba(157, 78, 221, 0.1);
    }
    .device-modal-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .device-modal-grid label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 500;
    }
    .device-modal-grid label:hover {
      background: rgba(255,255,255,0.06);
    }
    .device-modal-grid label.active {
      background: rgba(157, 78, 221, 0.2);
      color: #e0bbff;
      border-color: rgba(157, 78, 221, 0.5);
    }
    .device-modal-grid label:not(.active) {
      opacity: 0.45;
    }
    .device-modal-grid label:not(.active):hover {
      opacity: 0.7;
    }
    .device-modal-grid input { display: none; }
    .device-modal-grid label .token-label-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .device-modal-grid label .token-settings-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 4px; border: 1px solid transparent;
      background: transparent; color: var(--muted); cursor: pointer; padding: 0; font-size: 12px;
    }
    .device-modal-grid label .token-settings-btn:hover { color: var(--text); border-color: var(--border); background: rgba(255,255,255,0.06); }
    .device-modal-grid label .token-warning-icon { color: #ff4757; font-size: 14px; }

    /* HRV status colors in modal */
    .device-modal-grid label.hrv-low { background: rgba(255, 71, 87, 0.25); color: #ff6b6b; border-color: rgba(255, 71, 87, 0.6); }
    .device-modal-grid label.hrv-low.active { background: rgba(255, 71, 87, 0.35); color: #ff4757; border-color: rgba(255, 71, 87, 0.8); }
    .device-modal-grid label.hrv-medium { background: rgba(255, 193, 7, 0.25); color: #ffc107; border-color: rgba(255, 193, 7, 0.6); }
    .device-modal-grid label.hrv-medium.active { background: rgba(255, 193, 7, 0.35); color: #ffca2c; border-color: rgba(255, 193, 7, 0.8); }
    .device-modal-grid label.hrv-high { background: rgba(0, 230, 118, 0.25); color: #00e676; border-color: rgba(0, 230, 118, 0.6); }
    .device-modal-grid label.hrv-high.active { background: rgba(0, 230, 118, 0.35); color: #00ff88; border-color: rgba(0, 230, 118, 0.8); }

    /* Light theme modal overrides */
    body.light-theme .device-modal { background: #f0f4f8; border-color: #d0d5dd; }
    body.light-theme .device-modal-header { color: #1a1a2e; }
    body.light-theme .device-modal-close { color: #666; }
    body.light-theme .device-modal-close:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }
    body.light-theme .device-modal-action-btn { color: #555; border-color: #ccc; }
    body.light-theme .device-modal-action-btn:hover { color: #1a1a2e; }
    body.light-theme .device-modal-grid label { background: #e0e5ec; color: #333; border: none; box-shadow: var(--btn-shadow); }
    body.light-theme .device-modal-grid label.active { box-shadow: var(--btn-shadow-inset); }
    body.light-theme .device-modal-grid label:not(.active) { opacity: 0.5; filter: none; }
    body.light-theme .token-show-more-btn { color: #6c5ce7; border-color: #6c5ce7; }
    body.light-theme .token-show-more-btn:hover { background: rgba(108, 92, 231, 0.1); }

    @media (max-width: 600px) {
      .device-modal { min-width: unset; width: 95vw; padding: 16px; }
      .device-modal-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* toggle */
    .toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 13px;
      color: var(--muted);
      user-select: none;
      height: 38px; /* Match other controls */
    }
    .toggle input { display: none; }
    .toggle .slider {
      position: relative;
      width: 44px;
      height: 24px;
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      border: 1px solid var(--border);
      transition: all 0.2s ease;
    }
    
    body.light-theme .toggle .slider {
      border-color: #7a7a7a;
    }
    .toggle .slider::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e6f1ff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    .toggle input:checked + .slider {
      background: var(--accent);
      border-color: var(--accent);
    }
    .toggle input:checked + .slider::after {
      transform: translateX(20px);
      background: #fff;
    }
    .toggle .toggle-label { color: var(--text); font-weight: 500; }

    @media (max-width: 1100px) {
      .layout { 
        grid-template-columns: 1fr; 
      }
    }
    
    /* Map container to match chart width */
    .map-container {
      flex: 0 0 50% !important;
    }
    
    /* Map card: full width on mobile with padding */
    @media (max-width: 768px) {
      .layout {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      
      /* Map card should be full width on mobile and expand to fit content */
      .layout > .card[style*="grid-row: span 2"] {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* Prevent map card from being scrollable */
      }
      
      #map {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
        overflow: visible !important; /* Prevent map from being scrollable */
      }
      
      div[style*="height:calc(520px + 120px)"],
      .map-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* Prevent map container from being scrollable */
        padding-bottom: 0 !important; /* No padding needed - time slider is below */
      }
      
      /* Map container uses flexbox to stack map and time slider */
      .map-container {
        display: flex !important;
        flex-direction: column !important;
      }
      
      /* Map itself should maintain aspect ratio and use flexbox column for time slider */
      .map-container #map {
        aspect-ratio: auto !important; /* Remove aspect ratio constraint - let content determine height */
        height: auto !important;
        min-height: auto !important;
        flex: 0 0 auto !important;
        position: relative !important;
        overflow: visible !important; /* Allow time slider to flow below */
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 0 !important;
      }
      
      /* Mapbox map canvas should take only the space it needs (3:4 aspect ratio) */
      .map-container #map > .maplibregl-canvas-container,
      .map-container #map > .maplibregl-map,
      .map-container #map canvas.maplibregl-canvas {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
        flex: 0 0 auto !important;
        position: relative !important;
        order: 1 !important;
      }
      
      /* Time slider appears below map on mobile - full width, no gap */
      .map-time-slider {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto !important;
        order: 2 !important; /* Ensure it comes after map content */
        z-index: auto !important;
      }
    }
    
    /* Map background color in dark mode */
    #map {
      background-color: #1e1f2e;
    }
    
    body.light-theme #map {
      background-color: #e0e5ec;
    }
    
    /* Map loader */
    .map-loader {
      width: 100px;
      height: 100px;
      background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 1) 0%,
        rgb(220, 220, 220) 40%,
        rgb(170, 170, 170) 98%,
        rgb(10, 10, 10) 100%
      );
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
    }

    .map-loader:before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 100%;
      border-bottom: 0 solid #ffffff05;
      box-shadow: 0 -10px 20px 20px #ffffff40 inset,
        0 -5px 15px 10px #ffffff50 inset, 0 -2px 5px #ffffff80 inset,
        0 -3px 2px #ffffffbb inset, 0 2px 0px #ffffff, 0 2px 3px #ffffff,
        0 5px 5px #ffffff90, 0 10px 15px #ffffff60, 0 10px 20px 20px #ffffff40;
      filter: blur(3px);
      animation: 2s rotate linear infinite;
    }

    @keyframes rotate {
      100% { transform: rotate(360deg) }
    }
    
    .map-loader.hidden {
      display: none;
    }
    
    /* Map legend */
    .map-legend {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      position: relative;
      flex: 0 0 auto;
      margin-left: auto;
      white-space: nowrap;
      z-index: 101;
    }
    
    /* Map import button - top-right of map toolbar */
    .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header #map-import,
    .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header .map-import-btn {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      margin: 0;
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      padding: 0;
      flex-shrink: 0;
    }
    
    .map-legend-label {
      color: var(--text);
      font-weight: 500;
      font-size: 11px;
    }
    
    .map-legend-text {
      color: var(--muted);
      font-size: 10px;
    }
    
    .map-legend-gradient {
      width: 96px;
      height: 14px;
      background: linear-gradient(to right, #ff4757, #ffa502, #2ed573);
      border-radius: 5px;
      border: 1px solid var(--border);
      position: relative;
      flex-shrink: 0;
      cursor: pointer;
    }
    .map-legend-gradient:hover {
      border-color: rgba(0, 123, 255, 0.5);
      box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.15);
    }
    
    /* Color Scale Menu — above map controls, layers, and tooltips */
    .color-scale-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      left: auto;
      background: rgba(18, 20, 50, 0.95);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px;
      z-index: 100010;
      min-width: 200px;
      max-height: 400px;
      overflow-y: auto;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }
    
    body.light-theme .color-scale-menu {
      background: rgba(224, 229, 236, 0.95);
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    
    .color-scale-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 4px;
    }
    
    .color-scale-option:last-child {
      margin-bottom: 0;
    }
    
    .color-scale-option:hover {
      background: rgba(0, 123, 255, 0.15);
    }
    
    .color-scale-option.active {
      background: rgba(0, 123, 255, 0.25);
      border: 1px solid var(--accent);
    }
    
    .color-scale-preview {
      width: 100px;
      height: 16px;
      border-radius: 4px;
      border: 1px solid var(--border);
      flex-shrink: 0;
      display: block;
    }
    
    .color-scale-option span {
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
    }
    
    /* Mobile responsive styles for Latest Values section */
    @media (max-width: 768px) {
      /* Body and layout */
      body {
        padding: 12px !important;
        padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
      }
      
      .layout {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 12px;
      }
      
      /* Cards - reduced padding for mobile */
      .card {
        padding: 16px;
        border-radius: 12px;
      }
      
      /* General card headers - can stack on mobile */
      .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
      }
      
      /* Chart card headers: keep pill and import button on same line, aligned right */
      /* Target cards that are NOT the map card (which has grid-row: span 2) */
      .layout > .card:not([style*="grid-row: span 2"]):not([style*="grid-column: span 2"]) .card-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap;
        gap: 8px;
      }
      
      /* Chart pill aligns to left */
      .layout > .card:not([style*="grid-row: span 2"]):not([style*="grid-column: span 2"]) .card-header > .chart-pill {
        flex-shrink: 0;
        margin-right: auto; /* Push to left, allow space for button on right */
      }
      
      /* Chart import button aligns to right */
      .layout > .card:not([style*="grid-row: span 2"]):not([style*="grid-column: span 2"]) .card-header > .chart-import-btn {
        flex-shrink: 0;
        margin-left: auto; /* Push to right */
      }
      
      /* Device selection container aligns to left on mobile */
      .device-selection-container {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
      }
      
      /* Device selection label aligns to left */
      .token-grid-label {
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        width: 100% !important;
      }
      
      /* Token grid flows horizontally on mobile */
      .token-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 6px !important;
      }
      
      .token-grid label {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
      }
      
      /* Map card header stays one row on mobile */
      .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        width: 100%;
        padding-right: 42px;
      }
      
      .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header .map-pill-group {
        flex-shrink: 0;
      }
      
      .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header .map-legend {
        margin-left: auto;
        width: auto;
        flex-basis: auto;
        order: unset;
        margin-top: 0;
      }
      
      .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header > button#map-import {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
      }
      
      /* Map import stays compact — exclude from global 44px touch-target rule */
      .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header #map-import {
        min-height: 30px !important;
        padding: 0 !important;
      }
      
      /* Buttons - larger touch targets (map toolbar pills stay compact) */
      button:not(.map-pill):not(#map-import), input:not([type="checkbox"]), select {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px; /* Minimum touch target size */
      }
      
      .map-card-header .map-pill {
        width: auto !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 5px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        border-radius: 999px !important;
      }
      
      .icon-button {
        padding: 10px 14px;
        min-height: 44px;
      }
      
      /* Controls - better stacking */
      .controls-row {
        gap: 8px;
      }
      
      .control-group {
        gap: 6px;
      }

      .control-group-refresh-row {
        flex-direction: column;
        align-items: stretch;
      }

      .auto-refresh-inline {
        justify-content: flex-start;
      }
      
      .control-separator {
        height: 20px;
      }
      
      /* Tables - horizontal scroll and responsive */
      .card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      table {
        font-size: 12px;
        min-width: 100%;
      }
      
      th, td {
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
      }
      
      th {
        font-size: 10px;
      }
      
      /* Charts: constrain width only. Never force height:auto on all canvases — it breaks
         Chart.js (and time-slider histogram) which rely on explicit box/canvas dimensions. */
      canvas {
        max-width: 100%;
      }
      
      /* Chart containers - responsive heights */
      div[style*="height:260px"] {
        height: auto !important;
        min-height: 200px;
        max-height: 300px;
      }
      
      /* Map container - allow full expansion on mobile */
      div[style*="height:calc(520px + 120px)"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
      }
      
      /* Map - full width on mobile with 3:4 aspect ratio */
      #map {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        min-height: 300px;
        height: auto !important;
      }
      
      .layout > .card[style*="grid-row: span 2"] {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* Prevent map card from being scrollable */
      }
      
      .map-container,
      div[style*="height:calc(520px + 120px)"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* Prevent map container from being scrollable */
        padding-bottom: 0 !important; /* No padding needed - time slider is below */
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important; /* No gap between map and time slider */
      }
      
      .map-container #map {
        width: 100% !important;
        aspect-ratio: auto !important; /* Remove aspect ratio constraint - let content determine height */
        height: auto !important;
        min-height: auto !important;
        flex: 0 0 auto !important;
        position: relative !important;
        overflow: visible !important; /* Allow time slider to flow below */
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 0 !important;
        gap: 0 !important; /* No gap between map canvas and time slider */
        margin-bottom: 0 !important;
      }
      
      /* Mapbox map canvas should take only the space it needs (3:4 aspect ratio) */
      .map-container #map > .maplibregl-canvas-container,
      .map-container #map > .maplibregl-map,
      .map-container #map canvas.maplibregl-canvas {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
        flex: 0 0 auto !important;
        position: relative !important;
        order: 1 !important;
      }
      
      /* Time slider appears below map on mobile - full width, no gap */
      .map-time-slider {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto !important;
        order: 2 !important; /* Ensure it comes after map content */
        z-index: auto !important;
      }
      
      /* Ensure map buttons/icons are well rendered on mobile */
      .map-view-select {
        font-size: 14px !important;
        padding: 8px 12px !important;
        min-height: 36px !important;
        z-index: 1000;
      }
      
      .map-pill {
        width: auto !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 5px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
      }
      
      .map-legend-gradient {
        width: 72px !important;
        height: 10px !important;
      }
      
      .map-legend-label,
      .map-legend-text {
        font-size: 10px !important;
      }
      
      .layout > .card[style*="grid-row: span 2"] .card-header.map-card-header #map-import {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
      }
      
      .aggregate-metric-selector {
        top: 55px !important;
        right: 8px !important;
        padding: 3px 4px !important;
        gap: 2px !important;
        flex-direction: column !important;
        z-index: 1000 !important;
      }
      .aggregate-metric-selector .agg-radio {
        font-size: 8px !important;
        padding: 2px 3px !important;
      }
      .aggregate-metric-selector .agg-radio input[type="radio"] {
        width: 8px !important;
        height: 8px !important;
      }
      
      .map-legend {
        font-size: 11px !important;
      }
      
      .map-legend-label,
      .map-legend-text {
        font-size: 10px !important;
      }
      
      #map-import {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
      }
      
      #map-import svg {
        width: 18px !important;
        height: 18px !important;
      }
      
      .time-slider-toggle,
      .time-slider-controls button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
      }
      
      .time-slider-toggle svg,
      .time-slider-controls button svg {
        width: 14px !important;
        height: 14px !important;
      }
      
      #time-slider-speed {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
      }
      
      /* Latest values container */
      .latest-values-container {
        flex-direction: column !important;
        gap: 12px;
      }
      
      .latest-values-item {
        width: 100% !important;
        flex: none !important;
        min-width: 100% !important;
      }
      
      .map-container {
        flex: none !important;
        width: 100% !important;
      }
      
      /* Header controls - stack better */
      .header-container {
        gap: 12px;
      }
      
      .controls-section {
        width: 100%;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start !important; /* Align buttons to left on mobile */
        gap: 8px;
      }
      
      .controls-row {
        justify-content: flex-start !important; /* Align buttons to left on mobile */
      }
      
      /* Theme toggle and Help button - position in upper right on mobile, same row as branding */
      .card:first-child {
        position: relative !important;
        overflow: visible !important;
      }
      
      .header-container {
        position: relative !important;
        overflow: visible !important;
      }
      
      .brand-section {
        position: relative !important;
        width: 100% !important;
        padding-right: 110px !important; /* Make room for theme toggle and help button */
        overflow: visible !important;
      }
      
      /* Theme toggle - perfectly round, same size, aligned */
      .brand-section #theme-toggle,
      #theme-toggle {
        position: fixed !important;
        top: 24px !important;
        right: calc(20px + 54px) !important; /* Card padding + help button width + gap */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1001 !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: var(--input-bg) !important;
        border: 1px solid var(--border) !important;
        box-shadow: var(--btn-shadow) !important;
        box-sizing: border-box !important;
      }
      
      /* Theme toggle SVG icons */
      #theme-toggle svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      
      /* Help button - perfectly round, same size, aligned */
      .brand-section #help-btn,
      #help-btn {
        position: fixed !important;
        top: 24px !important;
        right: 20px !important; /* Card padding */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1001 !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: var(--input-bg) !important;
        border: 1px solid var(--border) !important;
        box-shadow: var(--btn-shadow) !important;
        box-sizing: border-box !important;
      }
      
      /* Help button text hidden, icon centered */
      #help-btn span {
        display: none !important;
      }
      
      /* Help button SVG icon */
      #help-btn svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      
      /* Hide theme toggle control-group from normal flow but keep button visible */
      .controls-row-1 .control-group:first-child {
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      
      .controls-row-1 .control-group:first-child #theme-toggle {
        position: fixed !important;
        top: 24px !important;
        right: calc(20px + 54px) !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1001 !important;
        box-sizing: border-box !important;
      }
      
      /* Hide help button control-group from normal flow but keep button visible */
      .controls-row-2 .control-group:last-child {
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      
      .controls-row-2 .control-group:last-child #help-btn {
        position: fixed !important;
        top: 24px !important;
        right: 20px !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1001 !important;
        box-sizing: border-box !important;
      }
      
      /* Hide separators on mobile - buttons auto-distribute */
      /* Hide separators on mobile - buttons auto-distribute */
      .control-separator {
        display: none !important;
      }
      
      /* Auto-distribute control groups */
      .control-group {
        flex: 0 1 auto;
        min-width: fit-content;
        margin: 0;
      }
      
      /* Ensure controls-section uses flex-wrap for auto-distribution */
      .controls-section {
        flex-wrap: wrap !important;
        gap: 8px !important;
      }
      
      .controls-row {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
      }
      
      /* Status chip - adjust position */
      .status-chip {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 12px;
        width: 100%;
        min-width: auto;
      }
      
      /* Map controls - adjust sizes for very small screens */
      .map-view-select {
        font-size: 13px !important;
        padding: 8px 28px 8px 10px !important;
        min-width: 40px !important;
        min-height: 40px !important;
      }
      
      #map-import {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
      }
      
      .map-pill {
        width: auto !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 5px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
      }
      
      .map-legend-gradient {
        width: 64px !important;
      }
      
      .aggregate-metric-selector {
        top: 55px !important;
        right: 8px !important;
      }
      
      .time-slider-toggle,
      .time-slider-controls button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
      }
      
      .time-slider-toggle svg,
      .time-slider-controls button svg {
        width: 16px !important;
        height: 16px !important;
      }
      
      #time-slider-speed {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
      }
      
      .map-time-slider {
        font-size: 10px;
        padding: 8px 10px;
        max-width: calc(100% - 32px);
      }
      
      /* Token grid - wrap better */
      .token-grid {
        gap: 6px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        width: 100% !important;
      }
      
      .token-grid label {
        font-size: 11px;
        padding: 5px 10px;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
      }
      
      /* Help window - full screen on mobile */
      .help-window-container {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
      }
      
      .help-window-header {
        padding: 16px 20px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: var(--bg);
        z-index: 10;
      }
      
      .help-window-header h2 {
        font-size: 18px;
        line-height: 1.3;
      }
      
      .help-close-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      
      .help-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 40vh;
        min-height: 180px;
        flex-shrink: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
      }
      
      .help-window-body {
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        min-height: 0;
      }
      
      .help-search-container {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        background: var(--input-bg);
        z-index: 5;
      }
      
      .help-search {
        padding: 14px 16px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 48px;
        border-radius: 10px;
        touch-action: manipulation;
      }
      
      .help-tabs {
        padding: 8px 12px;
        gap: 6px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .help-tab {
        padding: 14px 16px;
        font-size: 15px;
        min-height: 48px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.15s ease, transform 0.1s ease;
        border-radius: 8px;
      }
      
      .help-tab:active {
        transform: scale(0.98);
        background: rgba(0, 123, 255, 0.1);
      }
      
      .help-tab-label {
        font-size: 15px;
      }
      
      .help-tab-match-count {
        font-size: 12px;
        padding: 4px 8px;
      }
      
      .help-tab-arrow {
        font-size: 12px;
        transition: transform 0.2s ease;
      }
      
      .help-tab-subsections.expanded {
        padding: 8px 12px 12px 12px;
      }
      
      .help-subsection {
        padding: 12px 14px;
        font-size: 14px;
        min-height: 44px;
        margin-left: 8px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.15s ease, transform 0.1s ease;
        border-radius: 6px;
      }
      
      .help-subsection:active {
        transform: scale(0.98);
        background: rgba(0, 123, 255, 0.08);
      }
      
      .help-subsection-match-count {
        font-size: 11px;
        padding: 3px 6px;
      }
      
      .help-content {
        padding: 20px 16px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        min-height: 0;
      }
      
      .help-section h3 {
        font-size: 18px;
        margin-bottom: 14px;
        position: sticky;
        top: 0;
        background: var(--bg);
        padding: 8px 0;
        z-index: 1;
      }
      
      .help-section h4 {
        font-size: 15px;
        margin-top: 20px;
        margin-bottom: 10px;
        scroll-margin-top: 60px;
      }
      
      .help-section p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 14px;
      }
      
      .help-section ul, .help-section ol {
        padding-left: 20px;
        margin-bottom: 14px;
      }
      
      .help-section li {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 10px;
      }
      
      .help-section code {
        font-size: 12px;
        padding: 3px 8px;
        word-break: break-word;
      }
      
      .help-feature {
        padding: 14px;
        margin-bottom: 20px;
        border-radius: 10px;
      }
      
      .help-feature h5 {
        font-size: 15px;
        margin-bottom: 10px;
      }
      
      .help-feature p {
        font-size: 14px;
        line-height: 1.6;
      }
      
      .help-feature ul, .help-feature ol {
        margin-top: 10px;
        padding-left: 18px;
      }
      
      .help-feature li {
        font-size: 13px;
        margin-bottom: 6px;
      }
      
      /* Help window footer on mobile */
      .help-window-footer {
        flex-shrink: 0;
        padding: 12px 16px !important;
        font-size: 10px !important;
      }
    }
    
    /* Additional mobile optimizations for very small screens */
    @media (max-width: 480px) {
      body {
        padding: 8px !important;
        padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
      }
      
      .card {
        padding: 12px;
      }
      
      .layout {
        gap: 8px;
      }
      
      button, input, select {
        padding: 10px 12px;
        font-size: 13px;
      }
      
      th, td {
        padding: 6px 8px;
        font-size: 11px;
      }
      
      #map {
        min-height: 250px;
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
        overflow: visible !important; /* Prevent map from being scrollable */
      }
      
      div[style*="height:calc(520px + 120px)"],
      .map-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* Prevent map container from being scrollable */
        padding-bottom: 0 !important; /* No padding needed - time slider is below */
        display: flex !important;
        flex-direction: column !important;
      }
      
      /* Ensure map card expands to fit all content including time slider */
      .layout > .card[style*="grid-row: span 2"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
      }
      
      .map-container #map {
        width: 100% !important;
        aspect-ratio: auto !important; /* Remove aspect ratio constraint - let content determine height */
        height: auto !important;
        min-height: auto !important;
        flex: 0 0 auto !important;
        position: relative !important;
        overflow: visible !important; /* Allow time slider to flow below */
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 0 !important;
      }
      
      /* Mapbox map canvas should take only the space it needs (3:4 aspect ratio) */
      .map-container #map > .maplibregl-canvas-container,
      .map-container #map > .maplibregl-map,
      .map-container #map canvas.maplibregl-canvas {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
        flex: 0 0 auto !important;
        position: relative !important;
        order: 1 !important;
      }
      
      /* Time slider appears below map on mobile - full width, no gap */
      .map-time-slider {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto !important;
        order: 2 !important; /* Ensure it comes after map content */
        z-index: auto !important;
      }
      
      /* Help window optimizations for very small screens */
      .help-window-container {
        border-radius: 0;
      }
      
      .help-window-header {
        padding: 12px 16px;
      }
      
      .help-window-header h2 {
        font-size: 16px;
      }
      
      .help-sidebar {
        max-height: 35vh;
        min-height: 140px;
      }
      
      .help-search {
        padding: 12px 14px;
        min-height: 44px;
      }
      
      .help-tabs {
        padding: 6px 10px;
        gap: 4px;
      }
      
      .help-tab {
        padding: 12px 14px;
        font-size: 14px;
        min-height: 44px;
      }
      
      .help-tab-label {
        font-size: 14px;
      }
      
      .help-subsection {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 40px;
        margin-left: 6px;
      }
      
      .help-content {
        padding: 16px 12px;
      }
      
      .help-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
      }
      
      .help-section h4 {
        font-size: 14px;
        margin-top: 16px;
        margin-bottom: 8px;
      }
      
      .help-section p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 12px;
      }
      
      .help-section li {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 8px;
      }
      
      .help-feature {
        padding: 12px;
        margin-bottom: 16px;
      }
      
      .help-feature h5 {
        font-size: 14px;
        margin-bottom: 8px;
      }
      
      .help-feature p {
        font-size: 13px;
        line-height: 1.5;
      }
      
      .help-feature li {
        font-size: 12px;
        margin-bottom: 5px;
      }
      
      .help-window-footer {
        padding: 10px 12px !important;
        font-size: 10px !important;
      }
      
      .help-window-footer p {
        font-size: 10px !important;
      }
    }
    
    .custom-interval-container {
        display: none;
        align-items: center;
        gap: 8px;
        position: relative;
        background: var(--glass-strong);
        padding: 4px 8px;
        border-radius: 8px;
        border: 1px solid var(--border);
        animation: fadeIn 0.3s ease;
    }
    .custom-interval-container.tr-cal-open {
        z-index: 100020;
    }
    body.tr-cal-popover-open {
        overflow: visible;
    }
    .custom-range-trigger {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      background: rgba(148,163,184,0.12);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 10px;
      cursor: pointer;
      white-space: nowrap;
    }
    .custom-range-trigger:hover { background: rgba(148,163,184,0.2); }
    .tr-cal-popover {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 200000 !important;
      min-width: 280px;
      background: var(--card-bg, #1e293b);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 20px 48px rgba(0,0,0,0.55);
      padding: 12px;
      pointer-events: auto;
      isolation: isolate;
    }
    .tr-cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      font-weight: 600;
      font-size: 13px;
    }
    .tr-cal-head button {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      color: var(--text);
    }
    .tr-cal-weekhead {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      margin-bottom: 4px;
    }
    .tr-cal-weekhead span {
      font-size: 10px;
      text-align: center;
      color: var(--muted);
      font-weight: 600;
    }
    .tr-cal-body {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
    }
    .tr-cal-cell { min-height: 36px; }
    .tr-cal-blank { visibility: hidden; }
    .tr-cal-day {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: rgba(148,163,184,0.06);
      color: var(--text);
      cursor: pointer;
      padding: 2px 0 4px;
    }
    .tr-cal-day:hover { border-color: var(--border); }
    .tr-cal-inrange { background: rgba(99,102,241,0.18); }
    .tr-cal-selected { border-color: rgba(99,102,241,0.7); font-weight: 700; }
    .tr-cal-today { box-shadow: inset 0 0 0 1px rgba(45,212,191,0.45); }
    .tr-cal-daynum { font-size: 12px; line-height: 1.1; }
    .tr-cal-todaylbl {
      font-size: 7px;
      letter-spacing: 0.06em;
      font-weight: 700;
      color: #2dd4bf;
      line-height: 1;
      margin-top: 1px;
    }
    .tr-cal-dot {
      position: absolute;
      bottom: 3px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #00e676;
    }
    .tr-cal-error { font-size: 11px; color: #ff6b6b; min-height: 14px; margin-top: 6px; }
    .tr-cal-hint {
      font-size: 11px;
      color: var(--muted);
      margin-top: 8px;
      line-height: 1.3;
    }
    .tr-cal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 8px;
    }
    .tr-cal-actions button {
      font-size: 11px;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: rgba(148,163,184,0.1);
      color: var(--text);
      cursor: pointer;
    }
    .tr-cal-apply { background: rgba(99,102,241,0.35); border-color: rgba(99,102,241,0.55); }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
    
    .custom-interval-container span {
        font-size: 12px;
        color: var(--muted);
        font-weight: 500;
    }
    
    /* REMOVED OLD BRAND TITLE STYLE THAT HAD GRADIENT */
    /*
    .brand-title {
      font-size: 2rem;
      background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 50%, #9d4edd 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: fadeInBrand 1.2s ease-out;
    }
    */
    /* Replaced by above general rule, but ensuring we don't have conflicting rules */
    
    @keyframes fadeInBrand { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
    
    .brand-subtitle {
      font-size: 0.75rem; 
      color: var(--muted);
      font-weight: 400;
      letter-spacing: 0.5px;
      opacity: 0.8;
      margin-top: 4px;
    }

    .icon-beat {
        display: inline-block;
        transition: transform 0.3s ease;
    }
    .beating .icon-beat {
        animation: heartbeat 1.5s infinite;
    }
    @keyframes heartbeat {
        0% { transform: scale(1); }
        15% { transform: scale(1.15); }
        30% { transform: scale(1); }
        45% { transform: scale(1.15); }
        60% { transform: scale(1); }
        100% { transform: scale(1); }
    }

    /* GeoWell Loader Style */
    .loader-wrapper {
      position: relative;
      display: inline-flex; 
      align-items: center;
      justify-content: flex-start; /* Align left */
      width: auto;
      min-width: 280px; /* Ensure space for animation */
      overflow: visible; /* Allow background animation to extend beyond bounds */
      
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      user-select: none;
      color: #fff; /* White by default */
    }
    
    .brand-title {
        font-size: 2.8rem; /* Bigger */
        color: #fff;
        background: none;
        -webkit-text-fill-color: currentcolor;
        animation: fadeInBrand 1.2s ease-out;
        white-space: nowrap;
        margin: 0;
        line-height: 1.2;
        overflow: visible; /* Allow overflow for animation */
    }
    
    body.light-theme .brand-title {
        color: #4a4a4a;
        -webkit-text-fill-color: #4a4a4a;
    }

    .loader {
      position: absolute;
      top: -20px; /* Extend beyond bounds */
      left: -20px; /* Extend beyond bounds */
      height: calc(100% + 40px); /* Add padding for overflow */
      width: calc(100% + 40px); /* Add padding for overflow */
      z-index: 1;
      pointer-events: none; /* Allow clicks through */
      overflow: visible; /* Allow animation to exceed bounds */

      background-color: transparent;
      mask: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 6px,
        black 7px,
        black 8px
      );
    }

    /* Header Layout */
    .header-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
        overflow: visible; /* Allow branding animation to extend beyond */
    }

    @media (min-width: 1200px) {
        .header-container {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
    }

    .brand-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align left */
        min-width: 250px;
        overflow: visible; /* Allow branding animation to extend beyond */
    }

    .controls-section {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        flex: 1;
        margin-left: auto; /* Align to right */
    }
    
    .controls-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    .control-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .control-group .countdown-label,
    .control-group .countdown-value {
        display: inline-flex;
        align-items: center;
    }
    
    #countdown-group {
        width: 200px;
        flex-shrink: 0;
    }
    
    .countdown-label {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .countdown-value {
        width: 65px;
        text-align: right;
        flex-shrink: 0;
        display: inline-block;
    }
    
    .control-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .control-separator {
        width: 1px;
        height: 24px;
        background: var(--border);
        flex-shrink: 0;
    }
    
    .icon-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* Refresh row: manual refresh + auto-refresh toggle & interval */
    .control-group-refresh-row {
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .auto-refresh-inline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 2px 0;
    }

    .auto-refresh-inline select {
        min-width: 88px;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--text);
    }

    .toggle-compact .toggle-label {
        font-size: 11px;
        max-width: none;
    }

    .loader::after {
      content: "";
      position: absolute;
      top: -20px; /* Extend beyond loader bounds */
      left: -20px; /* Extend beyond loader bounds */
      width: calc(100% + 40px); /* Extend beyond bounds */
      height: calc(100% + 40px); /* Extend beyond bounds */

      background-image: radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%),
        radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%),
        radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
        radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
        radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
      mask: radial-gradient(
        circle at 50% 50%,
        transparent 0%,
        transparent 10%,
        black 25%
      );
      animation:
        transform-animation 2s infinite alternate,
        opacity-animation 4s infinite;
      animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
    }

    @keyframes transform-animation {
      0% {
        transform: translate(-55%);
      }
      100% {
        transform: translate(55%);
      }
    }

    @keyframes opacity-animation {
      0%,
      100% {
        opacity: 0;
      }
      15% {
        opacity: 1;
      }
      65% {
        opacity: 0;
      }
    }

    .loader-letter {
      display: inline-block;
      /* opacity: 0;  Start visible, only animate when loading class is active */
      z-index: 2;
    }
    
    /* Only animate when parent has 'loading' class */
    .brand-loading .loader-letter {
        opacity: 0;
        animation: loader-letter-anim 4s infinite linear;
    }
    
    .brand-loading .loader {
        display: block;
    }
    
    .loader { display: none; } /* Hidden by default */

    .loader-letter:nth-child(1) { animation-delay: 0.1s; }
    .loader-letter:nth-child(2) { animation-delay: 0.205s; }
    .loader-letter:nth-child(3) { animation-delay: 0.31s; }
    .loader-letter:nth-child(4) { animation-delay: 0.415s; }
    .loader-letter:nth-child(5) { animation-delay: 0.521s; }
    .loader-letter:nth-child(6) { animation-delay: 0.626s; }
    .loader-letter:nth-child(7) { animation-delay: 0.731s; }
    /* GeoWell has 7 letters + TM */
    .loader-letter:nth-child(8) { animation-delay: 0.837s; } 

    @keyframes loader-letter-anim {
      0% {
        opacity: 0;
      }
      5% {
        opacity: 1;
        text-shadow: 0 0 4px #fff;
        transform: scale(1.1) translateY(-2px);
      }
      20% {
        opacity: 0.2;
      }
      100% {
        opacity: 0;
      }
    }
    /* Chart Loaders */
    .chart-loader-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none; /* Hidden by default */
        justify-content: center;
        align-items: center;
        background: rgba(13, 16, 26, 0.4);
        backdrop-filter: blur(2px);
        z-index: 10;
        border-radius: 12px;
    }

    /* HR Loader */
    .chart-loader-hr {
      --color-one: red;
      --color-two: blue;
      --color-three: yellow;
      --color-fore: cyan;
      --color-five: white;
      --time-animation: 1s;
      --size: 100px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-radius: 50%;
    }

    .chart-loader-hr .sphere {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      border-radius: 50%;
      width: var(--size);
      height: var(--size);
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 70%);
    }

    .chart-loader-hr .sphere::before {
      content: "";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      box-shadow: inset calc(var(--size) / -20) calc(var(--size) / -20) calc(var(--size) / 10) var(--color-fore), inset calc(var(--size) / 10) 0 calc(var(--size) / 5) var(--color-three);
      animation: rotation calc(var(--time-animation) * 2) linear infinite, colorize calc(var(--time-animation) * 2) ease-in-out infinite;
    }

    .chart-loader-hr .sphere::after {
      content: "";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      z-index: -1;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, var(--color-one) 20%, var(--color-two) 80%);
      animation: rotation calc(var(--time-animation) * 2) linear infinite, colorblur calc(var(--time-animation) * 2) ease-in-out infinite;
    }

    .chart-loader-hr svg {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--size);
      height: var(--size);
      animation: rotation calc(var(--time-animation) * 3) cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite;
    }

    .chart-loader-hr svg #shapes circle { fill: var(--color-five); }
    .chart-loader-hr svg #blurriness g, .chart-loader-hr svg #clipping ellipse, .chart-loader-hr svg #shapes g:nth-of-type(2), .chart-loader-hr svg #fade ellipse { filter: blur(7px); }
    .chart-loader-hr svg #waves g path { will-change: d; stroke-width: 7px; }
    .chart-loader-hr svg #waves g path:nth-of-type(1) { animation: wave-one var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite; }
    .chart-loader-hr svg #waves g path:nth-of-type(2) { animation: wave-two var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) calc(var(--time-animation) / -2) infinite reverse; }
    .chart-loader-hr svg #waves g path:nth-of-type(3) { animation: wave-one var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) calc(var(--time-animation) / -2) infinite; }
    .chart-loader-hr svg #waves g path:nth-of-type(4) { animation: wave-two var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite reverse; }

    /* HRV Loader */
    .chart-loader-hrv {
      --color-one: #ffbf48;
      --color-two: #be4a1d;
      --color-three: #ffbf4780;
      --color-fore: #bf4a1d80;
      --color-five: white;
      --time-animation: 1s; /* Match HR speed */
      --size: 100px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-radius: 50%;
      transform: scaleX(-1); /* Mirrored Geometry */
    }

    .chart-loader-hrv .sphere {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      border-radius: 50%;
      width: var(--size);
      height: var(--size);
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 70%);
    }

    .chart-loader-hrv .sphere::before {
      content: "";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      box-shadow: inset calc(var(--size) / -20) calc(var(--size) / -20) calc(var(--size) / 10) var(--color-fore), inset calc(var(--size) / 10) 0 calc(var(--size) / 5) var(--color-three);
      animation: rotation calc(var(--time-animation) * 2) linear infinite, colorize calc(var(--time-animation) * 2) ease-in-out infinite;
    }

    .chart-loader-hrv .sphere::after {
      content: "";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      z-index: -1;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, var(--color-one) 20%, var(--color-two) 80%);
      animation: rotation calc(var(--time-animation) * 2) linear infinite, colorblur calc(var(--time-animation) * 2) ease-in-out infinite;
    }

    .chart-loader-hrv svg {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--size);
      height: var(--size);
      animation: rotation calc(var(--time-animation) * 3) cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite;
    }

    .chart-loader-hrv svg #shapes-hrv circle { fill: var(--color-five); }
    .chart-loader-hrv svg #blurriness-hrv g, .chart-loader-hrv svg #clipping-hrv ellipse, .chart-loader-hrv svg #shapes-hrv g:nth-of-type(2), .chart-loader-hrv svg #fade-hrv ellipse { filter: blur(7px); }
    .chart-loader-hrv svg #waves-hrv g path { will-change: d; stroke-width: 7px; }
    .chart-loader-hrv svg #waves-hrv g path:nth-of-type(1) { animation: wave-one var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite; }
    .chart-loader-hrv svg #waves-hrv g path:nth-of-type(2) { animation: wave-two var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) calc(var(--time-animation) / -2) infinite reverse; }
    .chart-loader-hrv svg #waves-hrv g path:nth-of-type(3) { animation: wave-one var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) calc(var(--time-animation) / -2) infinite; }
    .chart-loader-hrv svg #waves-hrv g path:nth-of-type(4) { animation: wave-two var(--time-animation) cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite reverse; }

    /* Animations */
    @keyframes wave-one { 0% { d: path("M5,50 C10,50 15,50 20,50 C25,50 30,50 95,50"); } 50% { d: path("M5,50 C25,50 30,20 50,20 C70,20 75,50 95,50"); } 100% { d: path("M5,50 C70,50 75,50 80,50 C85,50 90,50 95,50"); } }
    @keyframes wave-two { 0% { d: path("M5,50 C10,50 15,50 20,50 C25,50 30,50 95,50"); } 50% { d: path("M5,50 C25,50 30,80 50,80 C70,80 75,50 95,50"); } 100% { d: path("M5,50 C70,50 75,50 80,50 C85,50 90,50 95,50"); } }
    @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes colorize { 0% { filter: hue-rotate(0deg); } 20% { filter: hue-rotate(-30deg); } 40% { filter: hue-rotate(-60deg); } 60% { filter: hue-rotate(-90deg); } 80% { filter: hue-rotate(-45deg); } 100% { filter: hue-rotate(0deg); } }
    @keyframes colorblur { 0% { filter: hue-rotate(0deg) blur(calc(var(--size) / 15)); } 20% { filter: hue-rotate(-30deg) blur(calc(var(--size) / 15)); } 40% { filter: hue-rotate(-60deg) blur(calc(var(--size) / 15)); } 60% { filter: hue-rotate(-90deg) blur(calc(var(--size) / 15)); } 80% { filter: hue-rotate(-45deg) blur(calc(var(--size) / 15)); } 100% { filter: hue-rotate(0deg) blur(calc(var(--size) / 15)); } }
    @keyframes roundness { 0% { filter: contrast(15); } 20% { filter: contrast(3); } 40% { filter: contrast(3); } 60% { filter: contrast(15); } 100% { filter: contrast(15); } }
    
    /* Generic Chart Loader */
    .chart-loader-generic {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        background: rgba(13, 16, 26, 0.45);
        backdrop-filter: blur(2px);
        z-index: 10;
        border-radius: 12px;
    }
    .chart-loader-generic .chart-spinner {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,0.1);
        border-top-color: var(--accent, #6e8efb);
        animation: chart-spin 0.8s linear infinite;
    }
    body.light-theme .chart-loader-generic {
        background: rgba(255, 255, 255, 0.55);
    }
    .chart-loader-generic .chart-spinner::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: rgba(110, 142, 251, 0.3);
        animation: chart-spin 1.6s linear infinite reverse;
    }
    @keyframes chart-spin {
        to { transform: rotate(360deg); }
    }

    /* Map Toggle Button */
    .map-toggle-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 1000;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--glass-strong);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: "Poppins", sans-serif;
      backdrop-filter: blur(12px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .map-toggle-btn:hover {
      background: rgba(0, 123, 255, 0.2);
      border-color: var(--accent);
      transform: translateY(-1px);
    }
    .map-toggle-btn:active {
      transform: translateY(0);
    }
    
    /* Map View Dropdown Selector */
    .map-view-select {
      position: absolute !important;
      top: 12px !important;
      right: 12px !important;
      z-index: 1001 !important;
      padding: 6px 32px 6px 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--glass-strong);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: "Poppins", sans-serif;
      backdrop-filter: blur(12px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23e6f1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    .map-view-select:hover {
      background-color: rgba(0, 123, 255, 0.2);
      border-color: var(--accent);
    }
    .map-view-select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    }
    .map-view-select option {
      background: var(--glass-strong);
      color: var(--text);
      padding: 8px;
    }
    .map-view-select option:disabled {
      color: var(--muted);
      opacity: 0.5;
    }
    body.light-theme .map-view-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    }

    /* Map Layer Toggle Panel */
    .map-layer-panel {
      position: absolute !important;
      bottom: 16px !important;
      right: 12px !important;
      z-index: 1001 !important;
      min-width: 120px;
      background: var(--glass-strong);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      padding: 8px 10px;
      backdrop-filter: blur(16px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .map-layer-toggle-btn {
      display: none;
    }
    .add-mark-btn {
      background: none;
      border: 1px solid #4CAF50;
      color: #4CAF50;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      margin-left: 2px;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    @media (max-width: 768px) {
      .map-layer-panel {
        padding: 0;
        min-width: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        align-items: flex-end;
      }
      .map-layer-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--glass-strong);
        border: 1px solid rgba(255,255,255,0.12);
        backdrop-filter: blur(16px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        color: var(--text);
        font-size: 18px;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }
      .map-layer-body {
        display: none;
        flex-direction: column;
        gap: 2px;
        margin-top: 6px;
        background: var(--glass-strong);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        padding: 8px 10px;
        backdrop-filter: blur(16px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      }
      .map-layer-body.expanded {
        display: flex;
      }
      body.light-theme .map-layer-toggle-btn {
        background: rgba(255,255,255,0.92);
        border-color: rgba(0,0,0,0.1);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      }
      body.light-theme .map-layer-body {
        background: rgba(255,255,255,0.92);
        border-color: rgba(0,0,0,0.1);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      }
    }
    @media (min-width: 769px) {
      .map-layer-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
    }
    .map-layer-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 6px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .map-layer-item:hover {
      background: rgba(255,255,255,0.08);
    }
    .map-layer-item input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      margin: 0;
      border-radius: 3px;
      border: 1.5px solid rgba(255, 255, 255, 0.28);
      background: rgba(0, 0, 0, 0.22);
      cursor: pointer;
      display: inline-grid;
      place-content: center;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .map-layer-item input[type="checkbox"]::after {
      content: "";
      width: 3px;
      height: 6px;
      border: solid #fff;
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg) scale(0);
      margin-top: -1px;
      transition: transform 0.12s ease;
    }
    .map-layer-item input[type="checkbox"]:checked {
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(0, 188, 212, 0.15);
    }
    .map-layer-item input[type="checkbox"]:checked::after {
      transform: rotate(45deg) scale(1);
    }
    body.light-theme .map-layer-item input[type="checkbox"] {
      border-color: rgba(15, 23, 42, 0.22);
      background: rgba(255, 255, 255, 0.85);
    }
    .add-mark-btn:hover {
      background: #4CAF50 !important;
      color: #fff !important;
    }
    body.light-theme .map-layer-panel {
      background: rgba(255,255,255,0.92);
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }

    /* Mark Groups Filter Panel */
    .map-group-filter {
      border-top: 1px solid rgba(255,255,255,0.1);
      margin-top: 4px;
      padding-top: 4px;
    }
    .map-group-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 6px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
    }
    .map-group-toggle:hover { background: rgba(255,255,255,0.08); }
    .map-group-toggle .arrow {
      display: inline-block;
      transition: transform 0.2s ease;
      font-size: 9px;
    }
    .map-group-toggle .arrow.expanded { transform: rotate(90deg); }
    .map-group-list {
      max-height: 160px;
      overflow-y: auto;
      padding-left: 4px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.2) transparent;
    }
    .map-group-list::-webkit-scrollbar { width: 4px; }
    .map-group-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
    .map-group-item {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 2px 6px;
      border-radius: 5px;
      font-size: 10.5px;
      color: var(--text);
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .map-group-item:hover { background: rgba(255,255,255,0.08); }
    .map-group-item input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      margin: 0;
      border-radius: 3px;
      border: 1.5px solid rgba(255, 255, 255, 0.28);
      background: rgba(0, 0, 0, 0.22);
      cursor: pointer;
      display: inline-grid;
      place-content: center;
      transition: border-color 0.15s, background 0.15s;
    }
    .map-group-item input[type="checkbox"]::after {
      content: "";
      width: 3px;
      height: 6px;
      border: solid #fff;
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg) scale(0);
      margin-top: -1px;
      transition: transform 0.12s ease;
    }
    .map-group-item input[type="checkbox"]:checked {
      background: var(--accent);
      border-color: var(--accent);
    }
    .map-group-item input[type="checkbox"]:checked::after {
      transform: rotate(45deg) scale(1);
    }
    body.light-theme .map-group-item input[type="checkbox"] {
      border-color: rgba(15, 23, 42, 0.22);
      background: rgba(255, 255, 255, 0.85);
    }
    .map-group-item .group-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      min-width: 18px;
      min-height: 18px;
      border-radius: 50%;
      font-size: 11px;
      line-height: 1;
      flex-shrink: 0;
      border: 1.5px solid rgba(255,255,255,0.7);
      box-sizing: border-box;
    }
    .map-group-item .group-icon.default-icon {
      position: relative;
    }
    .map-group-item .group-icon.default-icon::after {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #fff;
    }
    .map-group-new-btn {
      display: block;
      width: 100%;
      text-align: left;
      padding: 3px 6px;
      font-size: 10.5px;
      font-weight: 600;
      color: #4CAF50;
      background: none;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      transition: background 0.15s;
    }
    .map-group-new-btn:hover { background: rgba(76,175,80,0.15); }
    .map-group-edit-btn {
      margin-left: auto;
      padding: 0 3px;
      font-size: 10px;
      color: var(--text-secondary, #888);
      background: none;
      border: none;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .map-group-item:hover .map-group-edit-btn { opacity: 1; }

    /* Group Management Dialog */
    .group-dialog-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 10100;
    }
    .group-dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10101;
      background: var(--bg, #1a1a2e);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 14px;
      padding: 20px;
      min-width: 320px;
      max-width: 400px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }
    .group-dialog h3 {
      margin: 0 0 14px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }
    .group-dialog label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary, #888);
      margin-bottom: 4px;
    }
    .group-dialog input[type="text"] {
      width: 100%;
      padding: 7px 10px;
      font-size: 13px;
      background: var(--input-bg, #222);
      color: var(--text, #eee);
      border: 1px solid var(--border, #444);
      border-radius: 7px;
      outline: none;
      box-sizing: border-box;
    }
    .group-dialog input[type="text"]:focus {
      border-color: #4CAF50;
    }
    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
      margin: 6px 0 12px;
      max-height: 180px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.2) transparent;
    }
    .emoji-grid::-webkit-scrollbar { width: 4px; }
    .emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
    .emoji-grid button {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      background: var(--input-bg, #222);
      border: 2px solid transparent;
      border-radius: 7px;
      cursor: pointer;
      padding: 0;
      transition: border-color 0.15s, transform 0.1s;
    }
    .emoji-grid button:hover { transform: scale(1.1); }
    .emoji-grid button.selected { border-color: #4CAF50; background: rgba(76,175,80,0.15); }
    .emoji-grid .default-circle-option {
      width: 18px;
      height: 18px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #000;
      border: 1.5px solid #fff;
      position: relative;
    }
    .emoji-grid .default-circle-option::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #fff;
    }
    .color-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 4px;
      margin: 6px 0 14px;
    }
    .color-grid button {
      width: 28px;
      height: 28px;
      padding: 0;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: border-color 0.15s, transform 0.1s;
    }
    .color-grid button:hover { transform: scale(1.12); }
    .color-grid button.selected { border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76,175,80,0.4); }
    .group-dialog-footer {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 6px;
    }
    .group-dialog-footer button {
      padding: 7px 16px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 7px;
      border: none;
      cursor: pointer;
    }
    .group-dialog-footer .group-save-btn { background: #4CAF50; color: #fff; }
    .group-dialog-footer .group-save-btn:hover { background: #43a047; }
    .group-dialog-footer .group-cancel-btn { background: var(--input-bg, #333); color: var(--text, #ccc); border: 1px solid var(--border, #444); }
    .group-dialog-footer .group-delete-btn { background: #f44336; color: #fff; margin-right: auto; }
    .group-dialog-footer .group-delete-btn:hover { background: #d32f2f; }

    body.light-theme .group-dialog {
      background: #fff;
      border-color: rgba(0,0,0,0.1);
    }
    
    /* Map Time Slider */
    .map-time-slider {
      position: absolute;
      bottom: 16px;
      left: 16px;
      right: 16px;
      max-width: 500px;
      background: rgba(18, 20, 50, 0.5); /* Semi-transparent dark background */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      z-index: 1000;
      font-size: 11px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
    }
    .map-time-slider.collapsed {
      max-width: fit-content;
      padding: 6px 10px;
      border-radius: 20px;
    }
    .map-time-slider.collapsed .time-slider-content {
      display: none;
    }
    .map-time-slider.collapsed .time-slider-header {
      margin-bottom: 0;
    }
    .map-time-slider.collapsed .time-slider-header #time-slider-start,
    .map-time-slider.collapsed .time-slider-header #time-slider-end {
      display: none;
    }
    .map-time-slider.collapsed .time-slider-toggle svg {
      transform: rotate(0deg); /* Down arrow when collapsed */
    }
    .time-slider-toggle {
      width: 20px;
      height: 20px;
      min-width: 20px;
      min-height: 20px;
      max-width: 20px;
      max-height: 20px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      padding: 0;
      box-sizing: border-box;
      margin-right: 8px;
    }
    .time-slider-toggle:hover {
      background: rgba(0, 123, 255, 0.2);
      border-color: var(--accent);
    }
    .time-slider-toggle svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      transition: transform 0.3s ease;
      transform: rotate(180deg); /* Up arrow when expanded */
    }
    .time-slider-content {
      transition: all 0.3s ease;
    }
    .time-slider-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 10px;
    }
    .time-slider-controls {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .time-slider-controls button {
      width: 26px;
      height: 26px;
      min-width: 26px;
      min-height: 26px;
      max-width: 26px;
      max-height: 26px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      cursor: pointer;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      padding: 0;
      position: relative;
      box-sizing: border-box;
    }
    .time-slider-controls button svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
    }
    .time-slider-controls button .icon-moving-window,
    .time-slider-controls button .icon-incremental-window {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .time-slider-controls button:hover {
      background: rgba(0, 123, 255, 0.2);
      border-color: var(--accent);
    }
    .time-slider-controls button.active {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }
    .time-slider-controls select {
      height: 26px;
      min-height: 26px;
      max-height: 26px;
      width: auto;
      padding: 0 6px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 10px;
      cursor: pointer;
      box-sizing: border-box;
    }
    .time-slider-histogram {
      height: 50px;
      margin-bottom: 4px;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    .time-slider-histogram.time-slider-histogram--skin,
    .time-slider-histogram.time-slider-histogram--stress {
      height: 68px;
    }
    .time-slider-histogram canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .time-slider-track {
      position: relative;
      height: 12px;
      background: var(--input-bg);
      border-radius: 6px;
      margin: 0 6px;
    }
    .time-slider-range {
      position: absolute;
      height: 100%;
      background: var(--accent);
      opacity: 0.4;
      border-radius: 6px;
      pointer-events: none;
    }
    .time-slider-handle {
      position: absolute;
      width: 18px;
      height: 18px;
      background: var(--accent);
      border: 2px solid white;
      border-radius: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      cursor: ew-resize;
      z-index: 10;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      transition: transform 0.1s ease;
    }
    .time-slider-handle:hover {
      transform: translate(-50%, -50%) scale(1.15);
    }
    .time-slider-handle:active {
      transform: translate(-50%, -50%) scale(1.1);
    }
    .time-slider-selection {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      color: var(--text);
      font-weight: 500;
      font-size: 10px;
    }
    body.light-theme .map-time-slider {
      background: rgba(224, 229, 236, 0.5); /* Semi-transparent light background */
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    
    /* Pulsating Glow Animation */
    @keyframes pulseGlow {
      0%, 100% {
        opacity: 0.3;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
      }
      50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
      }
    }
    
    /* Tooltip System */
    [data-tooltip] {
      position: relative;
    }
    [data-tooltip]:hover::after,
    [data-tooltip]:focus::after {
      content: attr(data-tooltip);
      position: absolute;
      top: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 14px;
      background: var(--input-bg);
      color: var(--text);
      border-radius: 6px;
      font-size: 12px;
      z-index: 99999 !important;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border);
      pointer-events: none;
      max-width: 450px;
      min-width: 200px;
      white-space: normal;
      text-align: left;
      line-height: 1.5;
    }
    [data-tooltip]:hover::before,
    [data-tooltip]:focus::before {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-bottom-color: var(--input-bg);
      margin-top: -2px;
      z-index: 100000 !important;
      pointer-events: none;
    }
    /* Ensure tooltips on map elements are visible and positioned above */
    #map [data-tooltip]:hover::after,
    #map [data-tooltip]:focus::after {
      z-index: 100002 !important;
      top: auto !important;
      bottom: calc(100% + 4px) !important;
      transform: translateX(-50%) !important;
    }
    #map [data-tooltip]:hover::before,
    #map [data-tooltip]:focus::before {
      z-index: 100003 !important;
      top: auto !important;
      bottom: 100% !important;
      border-bottom-color: transparent !important;
      border-top-color: var(--input-bg) !important;
      margin-top: 0 !important;
      margin-bottom: -2px !important;
    }
    
    /* Time slider controls: show tooltips above */
    .time-slider-controls [data-tooltip]:hover::after,
    .time-slider-controls [data-tooltip]:focus::after {
      top: auto;
      bottom: calc(100% + 4px);
      transform: translateX(-50%);
    }
    .time-slider-controls [data-tooltip]:hover::before,
    .time-slider-controls [data-tooltip]:focus::before {
      top: auto;
      bottom: 100%;
      border-bottom-color: transparent;
      border-top-color: var(--input-bg);
      margin-top: 0;
      margin-bottom: -2px;
    }
    
    /* Help Window */
    .help-window {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .help-window-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
    }
    body.light-theme .help-window-overlay {
      background: rgba(255, 255, 255, 0.85);
    }
    .help-window-container {
      position: relative;
      width: 90%;
      max-width: 1200px;
      max-height: 90vh;
      background: var(--bg);
      border-radius: 16px;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      z-index: 10001;
    }
    .help-window-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
    }
    .help-window-header h2 {
      margin: 0;
      font-size: 24px;
      color: var(--text);
    }
    .help-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--input-bg);
      border: none;
      color: var(--text);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .help-close-btn:hover {
      background: var(--accent);
      color: white;
    }
    .help-window-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .help-sidebar {
      width: 280px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background: var(--input-bg);
      border-radius: 0 0 0 16px;
    }
    .help-search-container {
      padding: 12px;
      border-bottom: 1px solid var(--border);
    }
    .help-search {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 13px;
      font-family: "Poppins", sans-serif;
      outline: none;
      transition: all 0.2s ease;
    }
    .help-search:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
    }
    .help-tabs {
      display: flex;
      flex-direction: column;
      padding: 8px;
      gap: 0;
    }
    .help-tab {
      padding: 12px 16px;
      background: transparent;
      border: none;
      color: var(--muted);
      text-align: left;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s ease;
      font-size: 14px;
      font-weight: 500;
      box-shadow: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
    .help-tab-label {
      flex: 1;
    }
    .help-tab-match-count {
      font-size: 11px;
      background: rgba(0, 123, 255, 0.2);
      color: var(--accent);
      padding: 2px 6px;
      border-radius: 10px;
      margin-right: 8px;
      font-weight: 500;
      opacity: 0.7;
    }
    .help-tab-arrow {
      font-size: 10px;
      transition: transform 0.2s ease;
      opacity: 0.6;
    }
    .help-tab.expanded .help-tab-arrow {
      transform: rotate(180deg);
    }
    .help-tab:hover {
      background: rgba(0, 123, 255, 0.1);
      color: var(--text);
    }
    .help-tab.active {
      background: rgba(0, 123, 255, 0.2);
      color: var(--accent);
      font-weight: 600;
    }
    .help-tab-subsections {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      padding: 0 8px;
    }
    .help-tab-subsections.expanded {
      max-height: 500px;
      padding: 4px 8px 8px 8px;
    }
    .help-subsection {
      padding: 8px 12px;
      margin: 2px 0;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: var(--muted);
      transition: all 0.2s ease;
      margin-left: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .help-subsection-label {
      flex: 1;
    }
    .help-subsection-match-count {
      font-size: 10px;
      background: rgba(0, 123, 255, 0.15);
      color: var(--accent);
      padding: 2px 5px;
      border-radius: 8px;
      font-weight: 500;
      opacity: 0.6;
    }
    .help-subsection:hover {
      background: rgba(0, 123, 255, 0.1);
      color: var(--text);
    }
    .help-subsection.active {
      background: rgba(0, 123, 255, 0.15);
      color: var(--accent);
      font-weight: 500;
    }
    .help-subsection.highlight {
      background: rgba(255, 193, 7, 0.2);
      color: var(--text);
    }
    .help-content {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }
    .help-section {
      display: none;
    }
    .help-section.active {
      display: block;
    }
    .help-section h3 {
      margin-top: 0;
      margin-bottom: 16px;
      color: var(--text);
      font-size: 20px;
    }
    .help-section h4 {
      margin-top: 24px;
      margin-bottom: 12px;
      color: var(--accent);
      font-size: 16px;
    }
    .help-section p {
      margin-bottom: 16px;
      line-height: 1.6;
      color: var(--text);
    }
    .help-section ul, .help-section ol {
      margin-bottom: 16px;
      padding-left: 24px;
      color: var(--text);
    }
    .help-section li {
      margin-bottom: 8px;
      line-height: 1.6;
    }
    .help-section code {
      background: var(--input-bg);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 13px;
      color: var(--accent);
    }
    .help-feature {
      margin-bottom: 24px;
      padding: 16px;
      background: var(--input-bg);
      border-radius: 8px;
      border-left: 3px solid var(--accent);
    }
    .help-feature h5 {
      margin-top: 0;
      margin-bottom: 8px;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
    }
    .help-feature p {
      margin-bottom: 8px;
      font-size: 13px;
      color: var(--muted);
    }
    .help-feature p:last-child {
      margin-bottom: 0;
    }
    .help-section mark {
      background: rgba(255, 193, 7, 0.4);
      color: var(--text);
      padding: 2px 4px;
      border-radius: 3px;
      font-weight: 500;
    }

    /* ============================================================================
       ALERTS SYSTEM STYLES
       ============================================================================ */
    
    /* Alert Settings Dialog */
    .alert-dialog {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .alert-dialog-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
    }
    body.light-theme .alert-dialog-overlay {
      background: rgba(255, 255, 255, 0.85);
    }
    .alert-dialog-container {
      position: relative;
      width: 90%;
      max-width: 520px;
      max-height: 90vh;
      background: var(--bg);
      border-radius: 16px;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      z-index: 10001;
      overflow: hidden;
    }
    .alert-dialog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      background: var(--input-bg);
    }
    .alert-dialog-header h2 {
      margin: 0;
      font-size: 20px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .alert-dialog-header h2 svg {
      color: var(--accent);
    }
    .alert-dialog-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .alert-dialog-close:hover {
      background: #f72585;
      border-color: #f72585;
      color: white;
    }
    .alert-dialog-body {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }
    .alert-dialog-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      background: var(--input-bg);
      gap: 12px;
    }

    /* Device Settings Dialog */
    .device-settings-container {
      max-width: 720px;
    }
    .device-settings-container.has-collection-zones {
      max-width: min(1140px, 96vw);
    }
    .device-settings-container.has-collection-zones .alert-dialog-body {
      max-height: min(78vh, 860px);
      overflow-y: auto;
    }
    .device-settings-section {
      margin-bottom: 16px;
    }
    .device-settings-section h3 {
      margin: 0 0 10px;
      font-size: 14px;
      color: var(--text);
      letter-spacing: 0.3px;
    }
    .device-settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }
    .device-settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .device-settings-field input,
    .device-settings-field select {
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 12px;
    }
    .device-settings-toggle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
    }
    .device-settings-toggle-grid label {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 10px;
    }
    .device-settings-target {
      font-size: 12px;
      color: var(--muted);
    }
    
    /* Alert Settings Form */
    .alert-settings-section {
      margin-bottom: 24px;
    }
    .alert-settings-section:last-child {
      margin-bottom: 0;
    }
    .alert-settings-section h3 {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 12px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .alert-settings-section h3 .metric-badge {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 500;
    }
    .alert-settings-section h3 .metric-badge.hr {
      background: rgba(247, 37, 133, 0.2);
      color: #f72585;
    }
    .alert-settings-section h3 .metric-badge.hrv {
      background: rgba(0, 255, 255, 0.2);
      color: #00ffff;
    }
    .alert-range-inputs {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .alert-range-input {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .alert-range-input label {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .alert-range-input input {
      width: 100%;
      padding: 10px 12px;
      background: var(--input-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      font-family: "Poppins", sans-serif;
      text-align: center;
      transition: all 0.2s ease;
    }
    .alert-range-input input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }
    .alert-range-separator {
      font-size: 14px;
      color: var(--muted);
      padding-top: 20px;
    }
    .alert-range-hint {
      font-size: 11px;
      color: var(--muted);
      margin-top: 8px;
      opacity: 0.8;
    }

    /* Notification type toggles */
    .alert-notif-toggles {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .alert-notif-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.03);
      cursor: pointer;
    }
    .alert-notif-toggle-row:hover {
      background: rgba(255,255,255,0.06);
    }
    .alert-notif-toggle-row > span {
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
    }
    
    /* Alert Enable Toggle */
    .alert-enable-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: var(--input-bg);
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .alert-enable-row span {
      font-size: 14px;
      color: var(--text);
      font-weight: 500;
    }
    
    /* Alert Dialog Buttons */
    .alert-btn {
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: "Poppins", sans-serif;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .alert-btn-primary {
      background: var(--accent);
      border: none;
      color: white;
    }
    .alert-btn-primary:hover {
      background: #0056b3;
      transform: translateY(-1px);
    }
    .alert-btn-secondary {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .alert-btn-secondary:hover {
      background: var(--input-bg);
      border-color: var(--muted);
    }
    .alert-btn-danger {
      background: rgba(247, 37, 133, 0.1);
      border: 1px solid rgba(247, 37, 133, 0.3);
      color: #f72585;
    }
    .alert-btn-danger:hover {
      background: #f72585;
      border-color: #f72585;
      color: white;
    }
    .alert-btn-view-alerts {
      background: rgba(0, 255, 255, 0.1);
      border: 1px solid rgba(0, 255, 255, 0.3);
      color: #00ffff;
    }
    .alert-btn-view-alerts:hover {
      background: rgba(0, 255, 255, 0.2);
      border-color: rgba(0, 255, 255, 0.5);
    }
    
    /* Alert Count Badge */
    .alert-count-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: #f72585;
      color: white;
      font-size: 10px;
      font-weight: 600;
      border-radius: 9px;
      margin-left: 6px;
    }
    .alert-count-badge.empty {
      background: var(--muted);
      opacity: 0.5;
    }
    
    /* Alert Table Dialog */
    .alert-table-container {
      max-width: 900px;
    }
    .alert-table-wrapper {
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
    .alert-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .alert-table th {
      position: sticky;
      top: 0;
      background: var(--input-bg);
      padding: 12px 16px;
      text-align: left;
      font-weight: 600;
      color: var(--text);
      border-bottom: 2px solid var(--border);
      white-space: nowrap;
    }
    .alert-table td {
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
    }
    .alert-table tr:hover td {
      background: rgba(0, 123, 255, 0.05);
    }
    .alert-table .alert-type {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .alert-table .alert-type.over {
      background: rgba(247, 37, 133, 0.15);
      color: #f72585;
    }
    .alert-table .alert-type.under {
      background: rgba(58, 12, 163, 0.2);
      color: #7b68ee;
    }
    .alert-table .alert-metric {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
    }
    .alert-table .alert-metric.hr {
      background: rgba(247, 37, 133, 0.1);
      color: #f72585;
    }
    .alert-table .alert-metric.hrv {
      background: rgba(0, 255, 255, 0.1);
      color: #00ffff;
    }
    .alert-table-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--muted);
    }
    .alert-table-empty svg {
      width: 48px;
      height: 48px;
      margin-bottom: 12px;
      opacity: 0.4;
    }
    .alert-table-empty p {
      margin: 0;
      font-size: 14px;
    }
    .alert-table-summary {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 0;
      font-size: 12px;
      color: var(--muted);
    }
    .alert-table-summary span {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    /* Alert Download Button */
    .alert-download-btn {
      padding: 6px 12px;
      height: auto;
      min-height: 28px;
      border-radius: 6px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 12px;
      font-weight: 500;
      font-family: "Poppins", sans-serif;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      opacity: 0.85;
      white-space: nowrap;
    }
    .alert-download-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      color: inherit;
      display: block;
      flex-shrink: 0;
    }
    .alert-download-btn:hover {
      background: var(--input-bg);
      border-color: var(--accent);
      color: var(--accent);
      opacity: 1;
    }
    .alert-download-btn:hover svg {
      color: inherit;
    }
    .alert-download-btn:active {
      transform: scale(0.95);
    }
    
    /* Notification Container */
    .notification-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10002;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 380px;
      pointer-events: none;
    }
    
    /* Individual Notification */
    .notification {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      padding: 14px 16px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      pointer-events: auto;
      animation: notificationSlideIn 0.3s ease-out;
      transition: all 0.3s ease;
    }
    .notification.dismissing {
      animation: notificationSlideOut 0.3s ease-in forwards;
    }
    @keyframes notificationSlideIn {
      from {
        opacity: 0;
        transform: translateX(100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes notificationSlideOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(100%);
      }
    }
    .notification-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .notification-icon.over {
      background: rgba(247, 37, 133, 0.15);
      color: #f72585;
    }
    .notification-icon.under {
      background: rgba(58, 12, 163, 0.2);
      color: #7b68ee;
    }
    .notification-content {
      flex: 1;
      min-width: 0;
    }
    .notification-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
    }
    .notification-message {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }
    .notification-close {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      flex-shrink: 0;
      opacity: 0.8;
      padding: 0;
    }
    .notification-close:hover {
      background: var(--input-bg);
      color: var(--text);
      opacity: 1;
    }
    .notification-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: var(--accent);
      border-radius: 0 0 12px 12px;
      animation: notificationProgress 5s linear forwards;
    }
    @keyframes notificationProgress {
      from { width: 100%; }
      to { width: 0%; }
    }
    
    /* Chart Alert Icons */
    .chart-alert-icon {
      position: absolute;
      width: 16px;
      height: 16px;
      transform: translate(-50%, -50%);
      pointer-events: auto;
      cursor: pointer;
      z-index: 100;
    }
    .chart-alert-icon.over {
      color: #f72585;
    }
    .chart-alert-icon.under {
      color: #7b68ee;
    }
    .chart-alert-icon:hover {
      transform: translate(-50%, -50%) scale(1.2);
    }

    .chart-ping-overlay {
      z-index: 110;
    }
    .chart-ping-icon {
      position: absolute;
      width: 16px;
      height: 16px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      color: #FFC107;
      z-index: 111;
    }
    .chart-ping-icon.has-message {
      pointer-events: auto;
      cursor: pointer;
      color: #FF6D00;
      z-index: 112;
    }

    /* Chart Ping Popup */
    .chart-ping-popup {
      position: absolute;
      z-index: 500;
      background: #0a192f;
      color: #e6f1ff;
      border: 1px solid #1e3a5f;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      font-family: 'Poppins', sans-serif;
      max-width: 220px;
      word-wrap: break-word;
      pointer-events: auto;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    }
    .chart-ping-popup::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #0a192f;
    }
    .chart-ping-popup.arrow-top::after {
      bottom: auto;
      top: -6px;
      border-top: none;
      border-bottom: 6px solid #0a192f;
    }
    .chart-ping-popup .popup-label {
      color: #FFC107;
      font-weight: 700;
      margin-bottom: 2px;
    }
    .chart-ping-popup .popup-msg {
      color: #FF6D00;
      font-weight: 600;
    }

    /* Map Alert Markers */
    .map-alert-marker {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 12px;
      font-weight: bold;
      cursor: pointer;
      animation: alertPulse 2s infinite;
    }
    .map-alert-marker.over {
      background: rgba(247, 37, 133, 0.9);
      color: white;
      box-shadow: 0 0 0 4px rgba(247, 37, 133, 0.3);
    }
    .map-alert-marker.under {
      background: rgba(123, 104, 238, 0.9);
      color: white;
      box-shadow: 0 0 0 4px rgba(123, 104, 238, 0.3);
    }
    @keyframes alertPulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }
    
    /* Alerts Button Badge */
    .alerts-button-wrapper {
      position: relative;
      display: inline-flex;
    }
    .alerts-button-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      background: #f72585;
      color: white;
      font-size: 9px;
      font-weight: 600;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: badgePop 0.3s ease-out;
    }
    @keyframes badgePop {
      0% { transform: scale(0); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    .alerts-button-badge.hidden {
      display: none;
    }

    /* Risk scalebar */
    .risk-scalebar {
      position: relative;
      margin: 6px 12px 8px;
      padding-bottom: 16px;
    }
    .risk-bar-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .risk-segments {
      display: flex;
      height: 10px;
      border-radius: 5px;
      overflow: hidden;
      flex: 1;
    }
    .risk-segments > div {
      flex: 1;
    }
    .risk-indicator {
      position: absolute;
      top: 1px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 3px rgba(0,0,0,0.5);
      transform: translateX(-4px);
      transition: left 0.3s ease;
    }
    .risk-label {
      position: absolute;
      top: 14px;
      font-size: 9px;
      color: var(--text-secondary, #aaa);
      transition: left 0.3s ease;
      white-space: nowrap;
    }
    .explain-btn {
      cursor: pointer;
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid var(--border, #444);
      background: transparent;
      color: var(--text-secondary, #888);
      transition: all 0.2s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .explain-btn:hover {
      background: var(--border, #333);
      color: #fff;
    }
    .risk-explain-text {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, margin 0.3s ease;
      margin-top: 0;
      font-size: 11px;
      line-height: 1.4;
      color: var(--text-secondary, #999);
    }
    .risk-explain-text.open {
      max-height: 120px;
      margin-top: 6px;
    }

/* ─── Health Metrics Card Panel ──────────────────────────────────── */
.metrics-panel .metric-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 5px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid var(--border);
}
.metrics-panel .metric-card:hover {
  filter: brightness(1.15);
}
.metrics-panel .metric-card .metric-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.metrics-panel .metric-card .metric-info {
  flex: 1;
  margin: 0 8px;
  min-width: 0;
}
.metrics-panel .metric-card .metric-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metrics-panel .metric-card .metric-value {
  font-size: 11px;
  color: var(--text-muted);
}
.metrics-panel .metric-card .rag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.metrics-panel .metric-expanded {
  display: none;
  width: 100%;
  padding: 8px 0 4px;
}
.metrics-panel .metric-expanded.open {
  display: block;
}
.metrics-panel .metric-expanded .metric-chart-wrap {
  width: 100%;
  height: 180px;
  margin-top: 8px;
  position: relative;
  min-height: 140px;
}
.metrics-panel .metric-expanded .metric-chart-wrap canvas.metric-chart-canvas {
  width: 100% !important;
  height: 100% !important;
  margin-top: 0;
  display: block;
}
.metrics-panel .metric-expanded .metric-detail-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.metrics-panel .metric-expanded .metric-source {
  font-size: 10px;
  color: #607D8B;
  margin-top: 2px;
}
.metrics-panel .metric-expanded .metric-recommendation {
  font-size: 12px;
  color: #81C784;
  margin-top: 2px;
  font-weight: 600;
}
.metrics-panel .metric-expanded .metric-missing {
  font-size: 11px;
  color: #FFB74D;
  margin-top: 2px;
}
.metrics-panel .calc-btn {
  background: transparent;
  color: #00BCD4;
  border: 1px solid #00BCD4;
  border-radius: 12px;
  padding: 3px 14px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}
.metrics-panel .calc-btn:hover {
  background: rgba(0, 188, 212, 0.15);
}
/* ============================================================================
   GEO WELL CHECKBOX DESIGN SYSTEM — config form + collection zones
============================================================================ */
.gw-check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.gw-check-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.gw-check-box::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  margin-top: -2px;
  transition: transform 0.12s ease;
}
.gw-check-input:checked + .gw-check-box {
  background: var(--accent, #00bcd4);
  border-color: var(--accent, #00bcd4);
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.18);
}
.gw-check-input:checked + .gw-check-box::after {
  transform: rotate(45deg) scale(1);
}
.gw-check-input:focus-visible + .gw-check-box {
  outline: 2px solid rgba(56, 189, 248, 0.85);
  outline-offset: 2px;
}
.gw-check-input:disabled + .gw-check-box {
  opacity: 0.45;
  cursor: not-allowed;
}
.gw-check-text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text, #e6f1ff);
  font-weight: 500;
}
.gw-check-row-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
}
.gw-check-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  min-height: 48px;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.gw-check-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
.gw-check-card:has(.gw-check-input:checked) {
  border-color: rgba(0, 188, 212, 0.45);
  background: rgba(0, 188, 212, 0.08);
}
.gw-check-card-inline {
  min-height: auto;
  padding: 8px 12px;
}
.gw-check-card-span {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
.gw-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 900px) {
  .gw-check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================================
   CONFIG FORM — used by index.html (#device-settings-dialog) and org.html.
   Rendered from CONFIG_SCHEMA by js/config-form.js. Kept self-contained so
   it can be dropped into any host page without re-styling individual fields.
============================================================================ */
.cf-section {
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: var(--input-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
}
.cf-section-title {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #a0a8c0);
}
.cf-section-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted, #a0a8c0);
}
.cf-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) {
  .cf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 10px; }
  .cf-section { padding: 16px 18px; }
}
.cf-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-row.cf-bool.gw-check-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 48px;
  justify-content: center;
}
.cf-row.cf-bool.gw-check-row:has(.gw-check-input:checked) {
  border-color: rgba(0, 188, 212, 0.4);
  background: rgba(0, 188, 212, 0.07);
}
.cf-row.cf-bool .gw-check-row-label { width: 100%; }
.cf-row.cf-bool .cf-help {
  margin: 0;
  padding-left: 34px;
  font-size: 11px;
}
.cf-row .cf-label { font-size: 12px; color: var(--muted, #a0a8c0); }
.cf-row input[type="number"],
.cf-row input[type="text"],
.cf-row select {
  background: var(--bg, #121432);
  color: var(--text, #e6f1ff);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.cf-row input[readonly] { opacity: 0.7; cursor: not-allowed; }
.cf-input-row {
  display: flex; align-items: center; gap: 6px;
}
.cf-units {
  font-size: 11px; color: var(--muted, #a0a8c0);
  white-space: nowrap;
}
.cf-help {
  font-size: 11px; color: var(--muted, #a0a8c0);
  line-height: 1.35;
  grid-column: 1 / -1;
}
.cf-advanced {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.06));
}
.cf-advanced > summary {
  cursor: pointer; font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted, #a0a8c0);
  margin-bottom: 8px;
}

/* ============================================================================
   VERSION PILL — visible on every screen so users can tell which build they
   are on (v6 collection-zones line, v5 preview, etc.).
============================================================================ */
.v5-pill,
.v6-pill {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #22D3EE 0%, #7C3AED 100%);
  border-radius: 999px;
  vertical-align: middle;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.45),
              0 0 0 1px rgba(255,255,255,0.08) inset;
  user-select: none;
}

/* Top of page v5 banner (one-line, dismissible via session storage). */
.v5-banner {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 12px;
  font-size: 12px;
  background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(124,58,237,0.18));
  border-bottom: 1px solid rgba(124, 58, 237, 0.35);
  color: var(--text, #e6f1ff);
}
.v5-banner strong { color: var(--accent, #22D3EE); }
.v5-banner a { color: inherit; text-decoration: underline; }
.v5-banner .v5-banner-close {
  margin-left: 10px; cursor: pointer; opacity: 0.7; border: none;
  background: transparent; color: inherit; font-size: 14px; line-height: 1;
}
.v5-banner .v5-banner-close:hover { opacity: 1; }

/* ============================================================================
   ORG MANAGER — geowell.space/v4/org.html
   Matches main dashboard: Poppins, neuromorphic cards, v4 cyan→purple accents.
============================================================================ */
body.org-page {
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.org-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(34, 211, 238, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(124, 58, 237, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(0, 123, 255, 0.08), transparent 60%),
    var(--bg);
}
.org-shell {
  position: relative; z-index: 1;
  max-width: 960px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top, 20px)) max(20px, env(safe-area-inset-right, 20px)) max(32px, env(safe-area-inset-bottom, 32px)) max(20px, env(safe-area-inset-left, 20px));
}
.org-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.org-brand .brand-title {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 600; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 4px;
}
.org-brand .brand-subtitle {
  font-size: 13px; color: var(--muted); font-weight: 300; margin: 0;
}
.org-brand .brand-subtitle a {
  color: var(--accent); text-decoration: none;
}
.org-brand .brand-subtitle a:hover { text-decoration: underline; }
.org-topbar-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.org-link-dashboard {
  font-size: 12px; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  transition: color 0.15s, border-color 0.15s;
}
.org-link-dashboard:hover {
  color: var(--text); border-color: rgba(34, 211, 238, 0.35);
}
.org-login-wrap {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 24px 0 48px; min-height: 50vh;
}
.org-login-card {
  width: 100%; max-width: 420px; padding: 32px 28px;
}
.org-login-card .org-panel-title {
  font-size: 1.25rem; font-weight: 600; margin: 0 0 6px;
}
.org-login-card .org-panel-desc {
  font-size: 13px; color: var(--muted); margin: 0 0 24px; line-height: 1.5;
}
.org-field { margin-bottom: 18px; }
.org-field label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--muted); margin-bottom: 8px; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.org-field input {
  width: 100%; padding: 13px 16px; font-size: 14px;
  font-family: inherit; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 12px; outline: none;
  box-shadow: var(--btn-shadow); transition: border-color 0.15s, box-shadow 0.15s;
}
.org-field input:focus {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: var(--btn-shadow-inset), 0 0 0 3px rgba(34, 211, 238, 0.08);
}
.org-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; font-size: 13px; font-weight: 600; font-family: inherit;
  border-radius: 12px; border: none; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.org-btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #6366f1 55%, #7c3aed 100%);
  color: #fff; box-shadow: var(--btn-shadow);
}
.org-btn-primary:hover { transform: translateY(-1px); opacity: 0.95; }
.org-btn-primary:active { transform: translateY(0); box-shadow: var(--btn-shadow-inset); }
.org-btn-primary.org-btn-block { width: 100%; margin-top: 8px; }
.org-btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); box-shadow: none;
}
.org-btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.12); }
.org-btn-sm { padding: 8px 14px; font-size: 12px; border-radius: 10px; }
.org-status {
  font-size: 13px; padding: 10px 14px; border-radius: 10px; margin-top: 14px;
}
.org-status.ok {
  background: rgba(0, 230, 118, 0.1); color: var(--ok);
  border: 1px solid rgba(0, 230, 118, 0.25);
}
.org-status.err {
  background: rgba(255, 107, 107, 0.1); color: var(--danger);
  border: 1px solid rgba(255, 107, 107, 0.25);
}
.org-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.org-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.org-org-name {
  font-size: 1.1rem; font-weight: 600; margin: 0;
}
.org-device-count {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: rgba(34, 211, 238, 0.12); color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.25);
}
.org-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 720px) { .org-grid { grid-template-columns: 1fr; } }
.org-panel { padding: 22px 20px; }
.org-panel-title {
  font-size: 14px; font-weight: 600; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.org-panel-desc {
  font-size: 12px; color: var(--muted); margin: 0 0 16px; line-height: 1.45;
}
.org-panel-icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(124,58,237,0.15));
  color: #22d3ee; font-size: 16px;
}
.org-pair-display {
  margin-top: 16px; padding: 20px 16px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(34,211,238,0.06), rgba(124,58,237,0.08));
  border: 1px solid rgba(124, 58, 237, 0.22);
  text-align: center;
}
.org-pair-code {
  font-family: "SF Mono", "Consolas", "Courier New", monospace;
  font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 700;
  letter-spacing: 0.22em; margin: 8px 0 12px;
  background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 50%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.org-pair-meta {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.org-pair-countdown { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.org-manual details { margin: 0; }
.org-manual summary {
  cursor: pointer; font-size: 12px; color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: 6px;
  user-select: none; padding: 4px 0;
}
.org-manual summary::-webkit-details-marker { display: none; }
.org-manual summary::before {
  content: "▸"; font-size: 10px; transition: transform 0.15s;
}
.org-manual details[open] summary::before { transform: rotate(90deg); }
.org-manual summary:hover { color: var(--text); }
.org-manual-body { margin-top: 14px; }
.org-manual-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.org-manual-row input { flex: 1; min-width: 160px; }
.org-devices-panel { padding: 22px 20px; }
.org-devices-panel .org-panel-title { margin-bottom: 16px; }
.org-empty {
  text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px;
}
.org-empty-icon {
  font-size: 2rem; opacity: 0.4; margin-bottom: 12px;
}
.org-device-card {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
  transition: border-color 0.15s;
}
.org-device-card:hover { border-color: rgba(34, 211, 238, 0.2); }
.org-device-card:last-child { margin-bottom: 0; }
.org-device-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.org-device-id {
  font-family: "SF Mono", Consolas, monospace; font-size: 13px; font-weight: 600;
  color: var(--text); word-break: break-all;
}
.org-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.org-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.org-badge-green {
  background: rgba(0, 230, 118, 0.12); color: var(--ok);
  border: 1px solid rgba(0, 230, 118, 0.25);
}
.org-badge-green::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.org-badge-orange {
  background: rgba(255, 193, 7, 0.12); color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.25);
}
.org-badge-orange::before { background: #ffc107; }
.org-badge-red {
  background: rgba(255, 107, 107, 0.12); color: var(--danger);
  border: 1px solid rgba(255, 107, 107, 0.25);
}
.org-badge-red::before { background: var(--danger); }
.org-device-meta { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.org-toggle-config {
  font-size: 12px; font-weight: 500; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit;
}
.org-toggle-config:hover { text-decoration: underline; }
.org-device-config { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.org-device-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.org-device-actions .org-hint { font-size: 11px; color: var(--muted); flex: 1; min-width: 180px; }
.org-hidden { display: none !important; }
body.light-theme .org-link-dashboard { background: var(--input-bg); }
body.light-theme .org-pair-display {
  background: linear-gradient(145deg, rgba(34,211,238,0.08), rgba(124,58,237,0.06));
}
body.light-theme .org-device-card { background: var(--glass); }


/* ============================================================================
   v5.2 HEALTH METRICS — gxo-style bucket-grid cards
     • Daily   → single row of 24 hourly cells (00..23)
     • Weekly  → 7×24 = 168 hourly cells (Mo..Su × 00..23)
     • Monthly → calendar grid of daily cells (1..lastDay)
   Each cell is a vertical range bar (p25–p75) with a dot at the median,
   coloured by BENCHMARKED (own baseline) or OVERALL (clinical thresholds).
   ============================================================================ */

:root {
  --hm5-bg:                 #0b1226;
  --hm5-panel-bg:           rgba(15,23,42,0.42);
  --hm5-card-bg:            linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018) 65%);
  --hm5-card-border:        rgba(148,163,184,0.18);
  --hm5-card-border-strong: rgba(148,163,184,0.28);
  --hm5-card-shadow:        0 22px 48px -28px rgba(15,23,42,0.55),
                            0 2px 10px rgba(15,23,42,0.20);
  --hm5-text:               #e5ecff;
  --hm5-text-soft:          #cbd5f5;
  --hm5-muted:              #94a3c7;
  --hm5-cell-empty-bg:      rgba(148,163,184,0.06);
  --hm5-cell-empty-border:  rgba(148,163,184,0.18);
  --hm5-track-bg:           rgba(148,163,184,0.10);
  --hm5-divider:            rgba(148,163,184,0.16);
  --hm5-btn-bg:             rgba(148,163,184,0.08);
  --hm5-btn-bg-active:      rgba(99,102,241,0.22);
  --hm5-btn-border:         rgba(148,163,184,0.22);
  --hm5-btn-text:           #cbd5f5;
  --hm5-btn-text-active:    #ffffff;
}
body.light-theme {
  --hm5-bg:                 #f4f6fb;
  --hm5-panel-bg:           rgba(255,255,255,0.65);
  --hm5-card-bg:            linear-gradient(180deg, #ffffff, #f8faff 70%);
  --hm5-card-border:        rgba(15,23,42,0.08);
  --hm5-card-border-strong: rgba(15,23,42,0.14);
  --hm5-card-shadow:        0 12px 32px -20px rgba(60,80,140,0.22),
                            0 2px 8px rgba(60,80,140,0.06);
  --hm5-text:               #0f172a;
  --hm5-text-soft:          #1f2a4d;
  --hm5-muted:              #6c7393;
  --hm5-cell-empty-bg:      rgba(15,23,42,0.04);
  --hm5-cell-empty-border:  rgba(15,23,42,0.10);
  --hm5-track-bg:           rgba(15,23,42,0.06);
  --hm5-divider:            rgba(15,23,42,0.06);
  --hm5-btn-bg:             rgba(15,23,42,0.04);
  --hm5-btn-bg-active:      rgba(99,102,241,0.14);
  --hm5-btn-border:         rgba(15,23,42,0.10);
  --hm5-btn-text:           #1f2a4d;
  --hm5-btn-text-active:    #1e3a8a;
}

/* ── Panel chrome ───────────────────────────────────────────────────────── */
.metrics-panel.hm5-panel {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}
.hm5-bottom-wrap,
.hm5-middle-wrap {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}
/* Top hero summaries grow to fill the panel height (matches the tall
   map next to them). The `.hm5-cards-top` grid stretches; we tell the
   panel's column flow to give all remaining space to it. */
.metrics-panel.hm5-panel .hm5-cards-top { flex: 1; min-height: 0; }
.metrics-panel.hm5-panel .hm5-cards-top:has(.hm5-bootloader) {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  align-content: stretch;
}
.hm5-cards-top:has(.hm5-bootloader) .hm5-bootloader {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 280px;
}
.hm5-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 4px;
  min-width: 0;
}
.hm5-title { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.hm5-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--hm5-text);
}
.hm5-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--hm5-muted);
}
.hm5-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(140deg, rgba(99,102,241,0.18), rgba(45,212,191,0.14));
  color: #c7d2fe;
}
body.light-theme .hm5-icon { background: linear-gradient(140deg, rgba(99,102,241,0.16), rgba(45,212,191,0.10)); color: #4338ca; }
.hm5-right { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm5-device-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--hm5-btn-border);
  border-radius: 999px;
  background: var(--hm5-btn-bg);
}
.hm5-device-chip select {
  background: transparent;
  color: var(--hm5-text);
  border: 0;
  outline: 0;
  font-size: 12px;
  max-width: 240px;
}
.hm5-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,0.18);
}

/* ── Card layout grids ──────────────────────────────────────────────────── */
.hm5-cards {
  display: grid;
  gap: 14px;
  min-width: 0;
}
/* Top section sits inside the metrics-panel (right of map). On wide
   screens the two summary cards split that column 1fr/1fr → each summary
   ends up at ~1/4 of the page width (since the panel itself is 1/2).
   Force equal-height rows so a single-column stack on narrow widths
   still produces two cards of identical height. */
.hm5-cards-top {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  align-content: stretch;
  height: 100%;
  min-height: 0;
}
@media (min-width: 980px) {
  .hm5-cards-top { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
}
/* Top cards stretch to fill the full panel height so they're visually
   balanced with the (tall) map next to them. align-items: stretch is the
   grid default, but spell it out so it survives future rule edits. */
.hm5-cards-top { align-items: stretch; }
.hm5-cards-top .hm5-card { height: 100%; min-height: 0; display: flex; }
.hm5-cards-top .hm5-card-inner { flex: 1; min-height: 0; }

/* .layout first-row equal heights: the map sets the row height, the
   metrics-panel grid cell stretches to match (grid default), and inside
   that panel the cards-top stretches to fill — chain is unbroken. */
.layout { align-items: stretch; }
.metrics-panel.hm5-panel { min-height: 0; height: 100%; }

/* Middle row (below map): two heatmaps, equal width, full page width. */
.hm5-cards-middle {
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .hm5-cards-middle { grid-template-columns: 1fr 1fr; }
}

/* Bottom row: up to 4 metric cards per row. Falls back gracefully on
   narrower viewports. */
.hm5-cards-bottom {
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .hm5-cards-bottom { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hm5-cards-bottom { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1440px) { .hm5-cards-bottom { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* Bottom-A: signature trio (Stress Risk · pNN50 · Skin Temperature).
   Bottom-B: four-up (Respiratory · Pressure · Nervous System · RELAX).
   Both rows use `auto-fit` so the visible cards always evenly fill
   the row width. When a card hides itself (kind:'latest' with no
   history), `auto-fit` collapses its column track and the remaining
   cards reflow to absorb the freed space — i.e. 4 cards → 1/4 each,
   3 visible → 1/3 each, 2 visible → 1/2 each, 1 visible → full row.
   `min(280px, 100%)` clamps the min track width so we don't try to
   fit a 280px column inside a 200px viewport. */
.hm5-cards-bottom-a,
.hm5-cards-bottom-b {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: stretch;
}

.hm5-bottom-a-wrap,
.hm5-bottom-b-wrap {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}
.hm5-bottom-b-wrap { margin-top: 14px; }

/* ── Card shell ─────────────────────────────────────────────────────────── */
.hm5-card {
  position: relative;
  background: var(--hm5-card-bg);
  border: 1px solid var(--hm5-card-border);
  border-radius: 22px;
  padding: 0;
  box-shadow: var(--hm5-card-shadow);
  min-width: 0;
  /* overflow:hidden so the decoration layers (backdrop, vignette, scrim)
     — which over-scan with `transform: scale(1.06)` and `filter: blur()`
     to keep their edges soft — never spill past the rounded corners of
     the card. Info-icon popovers no longer need overflow:visible because
     they're portalled to <body> on hover via JS (setupInfoPopoverPortal),
     so they escape the card stacking context cleanly. */
  overflow: hidden;
  isolation: isolate;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 220ms ease;
}
.hm5-card > .hm5-hero-backdrop,
.hm5-card > .hm5-hero-vignette,
.hm5-card > .hm5-hero-scrim,
.hm5-card-heatmap::before {
  border-radius: inherit;
}
.hm5-card:hover { border-color: var(--hm5-card-border-strong); }

.hm5-card-inner {
  position: relative;
  z-index: 2;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Heatmap cards get a subtler texture — no gradient vignette, just a faint
   top-left highlight to keep them visually grouped with the hero cards. */
.hm5-card-heatmap::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(99,102,241,0.08) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(45,212,191,0.06) 0%, transparent 50%);
}
body.light-theme .hm5-card-heatmap::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(99,102,241,0.05) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(45,212,191,0.04) 0%, transparent 55%);
}

/* ── Cards: gradient vignette + optional anatomy backdrop ───────────────
   Per-tint colour stops drive a soft radial vignette behind the content.
   The `--hero-color` (decile colour of the period's median) bleeds in too,
   so the card subtly shifts hue as the user's state changes. Applies to
   every card kind — heatmaps, hero, thermometer, latest — so the whole
   row breathes in the dominant value's hue. */
.hm5-card-hero,
.hm5-card-thermometer,
.hm5-card-heatmap,
.hm5-card-latest {
  --hero-color: #6366f1; /* fallback before data loads */
  --tint-a:     #6366f1;
  --tint-b:     #22d3ee;
}
.hm5-tint-violet { --tint-a: #a78bfa; --tint-b: #6366f1; }
.hm5-tint-amber  { --tint-a: #fbbf24; --tint-b: #f97316; }
.hm5-tint-rose   { --tint-a: #fb7185; --tint-b: #f472b6; }
.hm5-tint-teal   { --tint-a: #2dd4bf; --tint-b: #14b8a6; }
.hm5-tint-cyan   { --tint-a: #67e8f9; --tint-b: #38bdf8; }

/* Radial vignette with a DARKER CORE — inverted from the usual "bright
   centre, dark edges" treatment. The dominant value's hue (--hero-color)
   blooms outward from the centre, with a deep desaturated core that
   makes the gauge / number pop. Inspired by the dark-core dashboard
   tiles the user referenced (Glucose / Variability / Vitamin D style). */
.hm5-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Outer bloom of the hero hue — strong at the edges, fades to
       transparent at the centre. */
    radial-gradient(ellipse 110% 90% at 50% 50%,
      transparent 0%,
      color-mix(in srgb, var(--hero-color) 14%, transparent) 38%,
      color-mix(in srgb, var(--hero-color) 28%, transparent) 70%,
      color-mix(in srgb, var(--hero-color) 38%, transparent) 100%),
    /* Tint-A bloom from the top-left corner. */
    radial-gradient(ellipse 65% 55% at 18% 22%,
      color-mix(in srgb, var(--tint-a) 26%, transparent) 0%,
      transparent 70%),
    /* Tint-B bloom from the bottom-right corner. */
    radial-gradient(ellipse 65% 55% at 82% 80%,
      color-mix(in srgb, var(--tint-b) 22%, transparent) 0%,
      transparent 70%),
    /* DARK CORE: a deep wash through the middle of the card that
       quietens the centre so the gauge / number contrast cleanly. */
    radial-gradient(ellipse 55% 45% at 50% 50%,
      rgba(8, 12, 24, 0.45) 0%,
      rgba(8, 12, 24, 0.18) 55%,
      transparent 100%);
  filter: blur(10px);
  transform: scale(1.06); /* over-scan so blur edges don't leak */
}
body.light-theme .hm5-hero-vignette {
  background:
    radial-gradient(ellipse 110% 90% at 50% 50%,
      transparent 0%,
      color-mix(in srgb, var(--hero-color) 10%, transparent) 38%,
      color-mix(in srgb, var(--hero-color) 20%, transparent) 70%,
      color-mix(in srgb, var(--hero-color) 28%, transparent) 100%),
    radial-gradient(ellipse 65% 55% at 18% 22%,
      color-mix(in srgb, var(--tint-a) 18%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 65% 55% at 82% 80%,
      color-mix(in srgb, var(--tint-b) 14%, transparent) 0%,
      transparent 70%),
    /* In light theme the "dark core" uses a soft ink-wash so it reads as
       a gentle inner-shadow rather than a heavy dark spot. */
    radial-gradient(ellipse 55% 45% at 50% 50%,
      rgba(15, 23, 42, 0.10) 0%,
      rgba(15, 23, 42, 0.04) 55%,
      transparent 100%);
  filter: blur(12px);
  transform: scale(1.06);
}

/* Backdrop: anatomy image fills the card, centered, cropped to cover.
   Dark theme uses `screen` blend so dark-on-dark image areas drop out and
   only the bright structures (vessels, X-ray glow) read through. Light
   theme uses `multiply` so the same image registers as a subtle shadow.
   Opacity is dialled down and a soft blur is applied so the image reads
   as ambient texture, never competing with the gauge or number. */
.hm5-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.14;
  mix-blend-mode: screen;
  filter: saturate(110%) contrast(100%) blur(1px);
}
body.light-theme .hm5-hero-backdrop {
  opacity: 0.10;
  mix-blend-mode: multiply;
  filter: saturate(105%) brightness(1.08) contrast(95%) blur(1px);
}

/* Scrim: a soft radial darkening between the backdrop and the content.
   Pulls the centre / lower-centre of the card into a darker patch where
   the number sits, so even busy backdrops never compete with it. The
   gradient is shallow enough that the backdrop still bleeds through at
   the corners (where there's no text). */
.hm5-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 65%,
      rgba(8, 12, 24, 0.55) 0%,
      rgba(8, 12, 24, 0.30) 45%,
      rgba(8, 12, 24, 0.00) 75%);
}
body.light-theme .hm5-hero-scrim {
  background:
    radial-gradient(ellipse 70% 55% at 50% 65%,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.35) 45%,
      rgba(255, 255, 255, 0.00) 75%);
}

.hm5-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
/* Right-hand stack in the header: WHEN-controls (grain segment + period
   nav) flow inline so the user can pick the time window without their
   eye leaving the title. Live-value pill (heatmap headval) tags along
   on the same row when present. */
.hm5-card-headctl {
  display: flex; flex-direction: row; align-items: center;
  gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  min-width: 0;
}

/* Secondary toggles row (My Baseline / General Population · RMSSD / SDNN). Lives
   directly under the header so HOW the data is interpreted is one row
   below WHEN it's measured. Cards with no toggles render a hidden
   spacer of the same height so HR and HRV summaries stay aligned. */
.hm5-card-toggles {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: -4px;
}
.hm5-card-toggles-spacer {
  visibility: hidden;
  /* Match the height of the tallest toggle (stacked RMSSD / short-term)
     so the gauge below sits at the same y-offset on HR and HRV. */
  min-height: 34px;
}

/* ── Bottom 1/4 cards: header only holds mode toggle (upper-right) +
   live pill. Grain seg + nav drop to a dedicated WHEN-row below with a
   space-between layout so Day/Week/Month sit anchored on the left and
   the date nav sits anchored on the right — neither side ever wraps
   onto the other, regardless of how wide the date string is. */
.hm5-card-bottom .hm5-card-headctl {
  flex-wrap: nowrap;
  gap: 6px;
}
.hm5-card-bottom .hm5-mode-seg button {
  padding: 3px 8px;
  font-size: 10px;
}

.hm5-card-when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -4px;
  min-width: 0;
}
.hm5-card-when .hm5-grain-seg,
.hm5-card-when .hm5-nav {
  flex: 0 0 auto;
}
.hm5-card-when .hm5-grain-seg { margin-right: auto; }
.hm5-card-when .hm5-nav        { margin-left: auto; }

/* Make sure the date label inside .hm5-nav doesn't blow the row apart.
   Truncate gracefully when the bottom card is exceptionally narrow. */
.hm5-card-bottom .hm5-nav-label {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm5-card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm5-card-titles h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hm5-text);
}
.hm5-card-sub { font-size: 11px; color: var(--hm5-muted); letter-spacing: 0.02em; }
.hm5-card-headval {
  display: inline-flex; align-items: baseline; gap: 4px;
  color: var(--hm5-text);
}
.hm5-card-headnum { font-size: 22px; font-weight: 700; }
.hm5-card-headunit { font-size: 12px; color: var(--hm5-muted); }

/* ── Card controls (grain seg, nav arrows, mode seg) ───────────────────── */
.hm5-card-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.hm5-grain-seg, .hm5-mode-seg, .hm5-metric-seg, .hm5-hr-score-seg {
  display: inline-flex;
  background: var(--hm5-btn-bg);
  border: 1px solid var(--hm5-btn-border);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
}
.hm5-grain-seg button, .hm5-mode-seg button, .hm5-metric-seg button, .hm5-hr-score-seg button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--hm5-btn-text);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.hm5-grain-seg button.active,
.hm5-mode-seg button.active,
.hm5-metric-seg button.active,
.hm5-hr-score-seg button.active {
  background: var(--hm5-btn-bg-active);
  color: var(--hm5-btn-text-active);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.35);
}
.hm5-grain-seg button:hover:not(.active),
.hm5-mode-seg button:hover:not(.active),
.hm5-metric-seg button:hover:not(.active),
.hm5-hr-score-seg button:hover:not(.active) {
  color: var(--hm5-text);
}

/* Metric toggle (RMSSD / SDNN) — a touch wider than grain/mode buttons so
   the two-line label (metric name + tiny sub-caption) reads cleanly. */
.hm5-metric-seg button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.0;
  padding: 3px 9px;
  min-width: 46px;
  gap: 0;
}
.hm5-metric-sub {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  opacity: 0.6;
}
.hm5-metric-seg button.active .hm5-metric-sub { opacity: 0.85; }

/* Wide-screen expansion for the metric toggle (RMSSD / SDNN). When the
   viewport gives us room, this is the primary "what am I looking at?"
   control on the HRV heatmap — make it bigger, with more breathing
   room around the labels, so it doesn't read as a footnote sitting
   next to the heavier grain segment. Scoped to the metric segment
   only; grain/mode pills stay compact. */
@media (min-width: 1100px) {
  .hm5-metric-seg { padding: 3px; }
  .hm5-metric-seg button {
    padding: 6px 14px;
    min-width: 60px;
    font-size: 11px;
    letter-spacing: 0.06em;
    gap: 1px;
  }
  .hm5-metric-sub { font-size: 9px; letter-spacing: 0.04em; }
}
@media (min-width: 1440px) {
  .hm5-metric-seg { padding: 4px; }
  .hm5-metric-seg button {
    padding: 8px 18px;
    min-width: 72px;
    font-size: 12px;
    letter-spacing: 0.08em;
    gap: 2px;
  }
  .hm5-metric-sub { font-size: 10px; letter-spacing: 0.04em; }
}

.hm5-nav {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 3px;
  border: 1px solid var(--hm5-btn-border);
  border-radius: 999px;
  background: var(--hm5-btn-bg);
  min-width: 0;
}
.hm5-nav button {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.06);
  color: var(--hm5-text-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
body.light-theme .hm5-nav button { background: rgba(15,23,42,0.05); }
.hm5-nav button:hover { background: var(--hm5-btn-bg-active); color: var(--hm5-btn-text-active); }
.hm5-nav-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--hm5-text);
  white-space: nowrap;
  padding: 0 3px;
}

/* ── Grid container ─────────────────────────────────────────────────────────
   STABILITY: reserve a fixed minimum height per card kind / grain so the
   page doesn't jump when the user toggles Daily ↔ Weekly ↔ Monthly. The
   value is sized to the TALLEST grain view; shorter grains (e.g. week's
   7×24 colour-only grid) sit centred inside the reserved space.

   Heatmap cards (HR / HRV bucket grids) get the deepest reservation —
   monthly calendar runs ~5 rows × 58px ≈ 320px.
   Hero / thermometer / latest cards reserve enough for a gauge + caption
   stack. The card outer height stops oscillating across grain changes,
   eliminating the visible row-jump on the dashboard. */
.hm5-card-grid {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hm5-card-heatmap .hm5-card-grid {
  min-height: 320px;
}
.hm5-card-hero .hm5-card-grid,
.hm5-card-thermometer .hm5-card-grid {
  min-height: 270px;
}
/* Hero-dual reserves enough height for two stacked arches without
   exceeding the map's row in the top row. v5.0.46 holds at 380px even
   after bumping the compact gauge to 200×120 — the gain comes from
   tightening `.hm5-card-inner` gaps and shrinking the scale ramp
   width (see below) rather than from extending the card. */
.hm5-card-hero-dual .hm5-card-grid {
  min-height: 380px;
}
/* Squeeze the vertical chrome of the dual-arch card so the arches can
   take a bigger share of the reserved height. Tightens both the inner
   stack gap (header → controls → grid → footer) and the gap between
   the header and the gauge specifically. */
.hm5-card-hero-dual .hm5-card-inner { gap: 6px; padding-bottom: 12px; }
.hm5-card-hero-dual .hm5-card-controls { margin-bottom: -2px; }
/* Mode toggle (My Baseline / General Population) for hero-dual lives in the upper
   right corner of the header — same compact treatment as the bottom 1/4
   cards so it doesn't dominate the title row. Only HRV summary actually
   shows it (HR summary's dual arches are value-driven and don't accept
   benchmarking), but the rule is keyed off the layout, not the metric. */
.hm5-card-hero-dual .hm5-card-headctl { flex-wrap: nowrap; gap: 6px; }
.hm5-card-hero-dual .hm5-grain-seg button {
  font-size: 10px;
  padding: 4px 6px;
}
.hm5-card-hero-dual .hm5-mode-seg button {
  padding: 3px 8px;
  font-size: 10px;
}
/* Hero-dual secondary row: grain seg (left) + nav (right) in a
   space-between layout right below the header. Tighter top margin
   than the bottom-card version because the header is already compact. */
.hm5-card-hero-dual .hm5-card-when { margin-top: -2px; }
.hm5-card-latest .hm5-card-grid {
  min-height: 200px;
}
/* The day / week / month inner grids stretch to the reserved width but
   don't pull beyond their natural height — letting them sit centred
   inside the stable card-grid envelope. */
.hm5-day-grid, .hm5-week-grid, .hm5-month-grid {
  margin: auto 0;
}
.hm5-loading, .hm5-empty-grid, .hm5-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--hm5-text);
  font-style: italic;
  background: rgba(8, 12, 24, 0.55);
  border: 1px dashed var(--hm5-cell-empty-border);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Empty interval — map & charts (biometrics summary stays independent) */
.dashboard-interval-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: var(--muted, #9ca3af);
  background: color-mix(in srgb, var(--card-bg, #1a1a2e) 90%, transparent);
  backdrop-filter: blur(2px);
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
}
.dashboard-interval-empty[hidden] {
  display: none !important;
}
.dashboard-interval-empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e5e7eb);
}
.dashboard-interval-empty-hint {
  margin: 0;
  font-size: 12px;
  opacity: 0.85;
}
#map-interval-empty {
  border-radius: 12px;
}

/* ── First-paint loader for the Health Metrics panel ───────────────────
   Replaces the old dashed "Waiting…" box. A soft cyan→indigo pulsing
   orb plus a shimmer-coloured label with three breathing dots — reads
   as a calm, intentional loading state rather than an error/empty
   placeholder. Sized to fill the full metrics column (same height as
   the map) so the layout doesn't snap when cards arrive. */
.hm5-bootloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 56px 24px;
  min-height: 280px;
  width: 100%;
  box-sizing: border-box;
  background: radial-gradient(ellipse 80% 60% at 50% 30%,
    color-mix(in srgb, #22D3EE 14%, transparent) 0%,
    color-mix(in srgb, #6366F1 8%, transparent) 45%,
    transparent 75%);
  border-radius: 24px;
}
.hm5-bootloader-orb {
  position: relative;
  width: 96px; height: 96px;
}
.hm5-bootloader-pulse,
.hm5-bootloader-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.hm5-bootloader-pulse {
  background: radial-gradient(circle at 50% 50%,
    rgba(34, 211, 238, 0.55) 0%,
    rgba(99, 102, 241, 0.35) 40%,
    rgba(15, 17, 21, 0) 70%);
  animation: hm5BootPulse 1.8s ease-in-out infinite;
}
.hm5-bootloader-core {
  inset: 24px;
  background: radial-gradient(circle at 50% 40%,
    #5EE0FF 0%,
    #2962FF 55%,
    #1E40AF 100%);
  box-shadow:
    0 8px 28px -8px rgba(34, 211, 238, 0.6),
    inset 0 -6px 18px -6px rgba(0, 0, 0, 0.45);
  animation: hm5BootCore 1.8s ease-in-out infinite;
}
@keyframes hm5BootPulse {
  0%   { transform: scale(0.9); opacity: 0.6; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}
@keyframes hm5BootCore {
  0%   { transform: scale(0.95); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(0.95); }
}
.hm5-bootloader-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hm5-text);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--hm5-text) 65%, transparent) 0%,
    #22D3EE 50%,
    color-mix(in srgb, var(--hm5-text) 65%, transparent) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hm5BootShimmer 2.6s ease-in-out infinite;
}
@keyframes hm5BootShimmer {
  0%   { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}
.hm5-bootloader-dots {
  display: inline-flex; gap: 4px;
  -webkit-text-fill-color: initial;
}
.hm5-bootloader-dots i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #22D3EE;
  opacity: 0.35;
  animation: hm5BootDot 1.4s ease-in-out infinite;
}
.hm5-bootloader-dots i:nth-child(2) { animation-delay: 0.18s; }
.hm5-bootloader-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes hm5BootDot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}
body.light-theme .hm5-bootloader {
  background: radial-gradient(ellipse 80% 60% at 50% 30%,
    color-mix(in srgb, #22D3EE 18%, transparent) 0%,
    color-mix(in srgb, #6366F1 10%, transparent) 45%,
    transparent 75%);
}
body.light-theme .hm5-bootloader-pulse {
  background: radial-gradient(circle at 50% 50%,
    rgba(34, 130, 230, 0.45) 0%,
    rgba(99, 102, 241, 0.25) 40%,
    rgba(15, 17, 21, 0) 70%);
}

/* Last-seen panel: shown when the current period has no data but the
   device has *something* in history (e.g. respRate / LF-HF / pressure
   when the watch has stopped emitting that channel). Reads as "Last
   reading 18.4 brpm — 2 days ago · Sun, 24 May 2026, 13:00". */
.hm5-lastseen {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px 18px;
  border-radius: 14px;
  background: rgba(8, 12, 24, 0.55);
  border: 1px solid var(--hm5-cell-empty-border);
  backdrop-filter: blur(4px);
  text-align: center;
}
.hm5-lastseen-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hm5-muted);
}
.hm5-lastseen-value {
  font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: var(--hm5-text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 6px 16px rgba(0,0,0,0.35);
}
.hm5-lastseen-when {
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  justify-content: center;
  font-size: 11px;
}
.hm5-lastseen-ago { font-weight: 700; color: var(--hm5-text); }
.hm5-lastseen-sep { color: var(--hm5-muted); opacity: 0.7; }
.hm5-lastseen-iso { color: var(--hm5-muted); }
.hm5-lastseen-meta { font-size: 10.5px; color: var(--hm5-muted); }

/* RAG-coloured value (geowear-11 palette). Value text shifts hue based
   on the decile bucket the latest reading falls into. Status pill picks
   up the same hue. When the value can't be classified (no clinical
   table), the default white value text is used. */
.hm5-lastseen-value.hm5-rag-green  { color: #7CD992; }
.hm5-lastseen-value.hm5-rag-amber  { color: #FFB68A; }
.hm5-lastseen-value.hm5-rag-red    { color: #FFB4AB; }

.hm5-lastseen-pill {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid currentColor;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.hm5-lastseen-pill.hm5-rag-green { color: #7CD992; }
.hm5-lastseen-pill.hm5-rag-amber { color: #FFB68A; }
.hm5-lastseen-pill.hm5-rag-red   { color: #FFB4AB; }

body.light-theme .hm5-lastseen-value.hm5-rag-green { color: #1f9d4f; }
body.light-theme .hm5-lastseen-value.hm5-rag-amber { color: #b8721c; }
body.light-theme .hm5-lastseen-value.hm5-rag-red   { color: #c0322a; }
body.light-theme .hm5-lastseen-pill { background: rgba(15, 23, 42, 0.05); text-shadow: 0 1px 1px rgba(255,255,255,0.7); }
body.light-theme .hm5-lastseen-pill.hm5-rag-green { color: #1f9d4f; }
body.light-theme .hm5-lastseen-pill.hm5-rag-amber { color: #b8721c; }
body.light-theme .hm5-lastseen-pill.hm5-rag-red   { color: #c0322a; }

body.light-theme .hm5-lastseen {
  background: rgba(255, 255, 255, 0.7);
}

/* ── Info icon ("i" in a circle) + popover ─────────────────────────────
   Replaces inline "p25 … · p75 … · n=…" meta strings with a small,
   discoverable affordance. Hover OR keyboard-focus reveals a glossary
   panel sized to its content, anchored above the icon with a soft
   neumorphic surface. Works on touch via :focus-within (the icon is
   tabindex=0 so a tap focuses it). */
.hm5-hero-pill-row,
.hm5-lastseen-pillrow {
  display: inline-flex; align-items: center; gap: 8px;
}
.hm5-info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--hm5-text);
  cursor: pointer;
  /* Poppins (loaded in <head>) matches the rest of the dashboard chrome;
     non-italic 700 so the lowercase "i" reads as a deliberate symbol
     rather than a stray serif glyph. */
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11.5px; font-weight: 700; font-style: normal; line-height: 1;
  letter-spacing: 0;
  user-select: none;
  outline: none;
  transition: background 140ms ease, transform 140ms ease;
}
.hm5-info:hover, .hm5-info:focus { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.hm5-info-glyph { pointer-events: none; }

body.light-theme .hm5-info {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--hm5-text);
}
body.light-theme .hm5-info:hover,
body.light-theme .hm5-info:focus { background: rgba(15, 23, 42, 0.10); }

.hm5-info-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 50;
  min-width: 220px;
  max-width: 280px;
  padding: 12px 14px;
  background: rgba(15, 20, 36, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #e8eef8;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}
.hm5-info:hover .hm5-info-pop,
.hm5-info:focus .hm5-info-pop,
.hm5-info:focus-within .hm5-info-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* Arrow under the popover pointing at the icon. */
.hm5-info-pop::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 20, 36, 0.96);
}

/* Floating popover — portalled to <body> on hover so it sits above every
   card stacking context. JS sets `top`/`left` in screen-space; we just
   make sure it's positioned fixed at the very top of the z-stack. */
.hm5-info-pop.hm5-info-pop-floating {
  position: fixed;
  bottom: auto;
  left: 0; top: 0;
  transform: none;
  z-index: 99999;
  opacity: 1;
  pointer-events: auto;
  /* The portalled popover lives outside the card; if the user hovers it
     for >80ms after leaving the icon it stays open (mouseleave handler
     re-checks for :hover before restoring). */
}
/* Arrow direction depends on whether JS flipped the popover above or
   below the icon. `[data-flip="up"]` is the default (popover above
   the icon, arrow points down off the bottom). */
.hm5-info-pop.hm5-info-pop-floating[data-flip="down"]::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(15, 20, 36, 0.96);
}
body.light-theme .hm5-info-pop.hm5-info-pop-floating[data-flip="down"]::after {
  border-bottom-color: #ffffff;
}

.hm5-info-dl {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 6px;
}
.hm5-info-dl dt {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.hm5-info-val {
  color: var(--hero-color, #93c5fd);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.hm5-info-dl dd {
  grid-column: 1 / -1;
  margin: 0 0 4px 0;
  color: #b8c2d6;
  font-weight: 400;
  font-size: 10.5px;
}
.hm5-info-dl dd:last-child { margin-bottom: 0; }

body.light-theme .hm5-info-pop {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  color: #1f2937;
  box-shadow: 0 14px 30px -10px rgba(15, 23, 42, 0.20),
              0 0 0 1px rgba(15, 23, 42, 0.04);
}
body.light-theme .hm5-info-pop::after { border-top-color: #ffffff; }
body.light-theme .hm5-info-dl dt { color: #0f172a; }
body.light-theme .hm5-info-dl dd { color: #475569; }
body.light-theme .hm5-lastseen-value {
  text-shadow: 0 1px 2px rgba(255,255,255,0.8), 0 6px 14px rgba(15,23,42,0.18);
}
body.light-theme .hm5-loading,
body.light-theme .hm5-empty-grid,
body.light-theme .hm5-empty {
  background: rgba(255, 255, 255, 0.7);
  color: var(--hm5-muted);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* ── Heatmap cell: fully filled, decile-coloured, with corner label +
      big centre value. The label sits in the TOP-LEFT (time / day name /
      day number) and the median value is rendered LARGE in the centre —
      matches what the user asked for: "small labels in the corner of the
      bucket and the actual value in the centre". */
.hm5-hcell {
  --cell-color: rgba(148,163,184,0.18);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cell-color);
  border-radius: 6px;
  min-width: 0;
  cursor: default;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cell-color) 60%, white 40%),
    inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
    0 1px 2px color-mix(in srgb, var(--cell-color) 40%, transparent);
  color: rgba(255,255,255,0.95);
  overflow: hidden;
}
.hm5-hcell:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  z-index: 3;
}
.hm5-hcell-empty {
  background: var(--hm5-cell-empty-bg);
  border: 1px dashed var(--hm5-cell-empty-border);
  box-shadow: none;
  color: var(--hm5-muted);
}
.hm5-hcell-blank { visibility: hidden; pointer-events: none; }

/* Corner label (HH / Mo / day#) — always top-left, monospace-ish, tiny. */
.hm5-hcell-corner {
  position: absolute;
  top: 4px; left: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.85);
  user-select: none;
  line-height: 1;
}
.hm5-hcell-empty .hm5-hcell-corner {
  color: var(--hm5-muted);
  text-shadow: none;
}
body.light-theme .hm5-hcell-corner {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Centre value: BIG median number, perfectly centred in the cell. */
.hm5-hcell-value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  user-select: none;
  line-height: 1;
}
body.light-theme .hm5-hcell-value {
  color: rgba(255,255,255,0.98);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* ── Day grid: 8 columns × 3 rows (00-07, 08-15, 16-23). Wider cells fit
      the median value more comfortably and the 3-row block is squarer
      against the half-page wide HR / HRV heatmap cards. ─────────────── */
.hm5-day-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.hm5-hcell-day {
  height: 78px;
  border-radius: 10px;
}
.hm5-hcell-day .hm5-hcell-value { font-size: 22px; }
.hm5-hcell-day .hm5-hcell-corner { font-size: 10px; }

/* ── Week grid: 7 days × 24 hours — too tight for value text ───────── */
.hm5-week-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hm5-week-header, .hm5-week-row {
  display: grid;
  grid-template-columns: 30px repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.hm5-week-header span {
  font-size: 9px;
  font-weight: 600;
  color: var(--hm5-muted);
  text-align: center;
  letter-spacing: 0.04em;
}
.hm5-week-header span:first-child { text-align: left; }
.hm5-week-day-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--hm5-text-soft);
  letter-spacing: 0.04em;
  text-align: right;
  padding-right: 4px;
}
.hm5-hcell-week {
  height: 22px;
  border-radius: 5px;
}
/* Week zoom: hide BOTH corner label and centre value — colour only. */
.hm5-hcell-week .hm5-hcell-corner,
.hm5-hcell-week .hm5-hcell-value { display: none; }

/* ── Month grid: 7-col calendar with daily cells ───────────────────────── */
.hm5-month-grid { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hm5-month-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.hm5-month-header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hm5-muted);
  text-align: center;
}
.hm5-month-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.hm5-hcell-month {
  height: 58px;
  border-radius: 10px;
}
.hm5-hcell-month .hm5-hcell-corner { font-size: 10px; }
.hm5-hcell-month .hm5-hcell-value  { font-size: 20px; }

/* ── Hero body: big median + range bar ──────────────────────────────────── */
.hm5-hero {
  --hero-color: #6366f1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 4px 2px;
}
.hm5-hero-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.hm5-hero-number {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hm5-text);
  background: linear-gradient(180deg, var(--hm5-text), color-mix(in srgb, var(--hm5-text) 80%, var(--hero-color) 20%));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* drop-shadow works through the transparent text-fill, unlike text-shadow.
     Two-stop halo: tight dark blur for legibility on busy backdrops, plus
     a softer wider glow that helps the number "lift" off the card. */
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
/* Top hero (HR/HRV Summary, full height of map row): bigger gauge, bigger
   number, anchored to the TOP of the card so HR and HRV line up at the
   same eye-level (centring made them drift around vertically when the
   metadata strings differ in length between cards). */
.hm5-card-top .hm5-hero-number { font-size: 64px; }
.hm5-card-top .hm5-gauge       { max-width: 340px; }
.hm5-card-top .hm5-card-inner  { justify-content: flex-start; }
.hm5-card-top .hm5-hero        { gap: 18px; margin-top: 4px; }

/* ── Dual-arch hero (HR Summary, HRV Summary) ─────────────────────────
   Two semi-circular gauges STACKED vertically in a single card — one
   above the other. Each section is self-contained: label, gauge, big
   number, decile pill + info icon, and its own colour-scale ramp
   directly underneath the arch. A subtle dashed divider separates the
   two sections so the user reads each one as a unit. The TINT of the
   whole card tracks the TOP arch (HR or RMSSD) so the card stays
   chromatically anchored to its primary metric. */
.hm5-hero-dual {
  display: flex;
  flex-direction: column;
  /* v5.0.52 — gap up from 4px → 12px now that the numbers live inside
     each arch (the .hm5-hero-dual-number row was removed). Gives the
     two arches real breathing room and lets the divider sit clearly
     between them instead of feeling crammed. */
  gap: 12px;
  min-width: 0;
  padding: 0;
}
.hm5-hero-dual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Section-internal gap up from 2px → 6px so label → arch → pill row
     → scale ramp sit comfortably stacked. */
  gap: 6px;
  min-width: 0;
  padding: 0;
  --hero-color: #6366f1;
}
.hm5-hero-dual-col + .hm5-hero-dual-col {
  border-top: 1px dashed var(--hm5-divider);
  padding-top: 14px;
}
.hm5-hero-dual-col-empty .hm5-hero-dual-empty {
  margin: 12px 0 4px;
  font-size: 11px;
  color: var(--hm5-muted);
  font-style: italic;
  letter-spacing: 0.02em;
  padding: 14px 18px;
  border: 1px dashed var(--hm5-cell-empty-border);
  border-radius: 10px;
  background: rgba(8, 12, 24, 0.35);
  text-align: center;
  min-width: 100px;
}
.hm5-hero-dual-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm5-muted);
  text-align: center;
  line-height: 1.15;
}
.hm5-hero-dual-sub {
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.75;
  font-size: 9.5px;
}
.hm5-hero-dual-number {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--hm5-text), color-mix(in srgb, var(--hm5-text) 80%, var(--hero-color) 20%));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30));
  margin-top: 0;
}
body.light-theme .hm5-hero-dual-number {
  filter:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.8))
    drop-shadow(0 4px 12px rgba(15, 23, 42, 0.18));
}
.hm5-hero-dual-pillrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.hm5-hero-dual-col .hm5-gauge {
  width: 100%;
  /* v5.0.52 — bumped from 240 → 280 to match the larger compact viewBox
     (240×140) introduced when the number moved INSIDE the arch. The
     arch reads bigger AND the centred number sits at a comfortable
     reading size (~38px). */
  max-width: 280px;
  aspect-ratio: 240 / 140;
  height: auto;
  margin: 0 auto;
}
.hm5-card-top .hm5-hero-dual-col .hm5-gauge { max-width: 280px; }

/* Inline colour-scale ramp under each arch. Compact endpoint labels
   left + right, 10-stop palette ramp in the centre. v5.0.46 makes the
   ramp narrower and chunkier — taller (12px) so each decile band is a
   readable bar instead of a hairline, and narrower (max 140px) so the
   arch above gets all the lateral room it needs to grow. */
.hm5-hero-dual-scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 9.5px;
  color: var(--hm5-muted);
  width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
}
.hm5-hero-dual-scale-label {
  flex: 0 0 auto;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hm5-hero-dual-scale-ramp {
  display: inline-flex;
  align-items: stretch;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--hm5-cell-empty-border);
  min-width: 80px;
  max-width: 140px;
  flex: 1 1 100px;
}
.hm5-hero-dual-scale-ramp span { flex: 1 1 auto; }

@media (min-width: 1440px) {
  .hm5-card-top .hm5-hero-dual-number { font-size: 34px; }
}
/* Tight 4-up layout: ratchet down hero typography so the gauge + number
   still fit comfortably without wrapping. */
@media (min-width: 1440px) {
  /* v5.0.45 — bottom-A hero cards (Stress Risk, HRV Stability) sit
     in a 1/3 column so they have plenty of room. The old 220px max
     made the arches feel cramped; 320px gives them parity with the
     top non-dual hero cards and matches the visual weight of the
     thermometer next to them. The hero number scales up to 48px so
     the median figure stays legible under the larger arch. */
  .hm5-card-bottom .hm5-hero-number { font-size: 48px; }
  .hm5-card-bottom .hm5-gauge       { max-width: 320px; }
}
body.light-theme .hm5-hero-number {
  background: linear-gradient(180deg, var(--hm5-text), color-mix(in srgb, var(--hm5-text) 70%, var(--hero-color) 30%));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* On light backgrounds a pale glow + tight grey halo lifts the number
     off the backdrop without going inky-dark. */
  filter:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.8))
    drop-shadow(0 6px 16px rgba(15, 23, 42, 0.18));
}
.hm5-hero-unit {
  font-size: 18px;
  font-weight: 600;
  margin-left: 6px;
  color: var(--hm5-muted);
  -webkit-text-fill-color: var(--hm5-muted);
}
.hm5-hero-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hm5-hero-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hero-color) 85%, white 15%),
    color-mix(in srgb, var(--hero-color) 70%, black 30%));
  box-shadow:
    0 4px 14px -6px color-mix(in srgb, var(--hero-color) 70%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hm5-hero-meta {
  font-size: 11px;
  color: var(--hm5-muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
body.light-theme .hm5-hero-meta { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); }

/* ── Semi-circular gauge (replaces the old linear range bar) ─────────────
   SVG sits ABOVE the big median number. Strokes are wide, with the
   p25–p75 segment in the active decile colour, a soft full-arc behind it,
   and a glowing dot on the median position. */
.hm5-hero {
  align-items: center;
  text-align: center;
}
/* Number on top, caption (pill + meta) stacked below, all centred.
   Mirrors the HRV summary card so HR and HRV read identically. */
.hm5-hero-main {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
}
.hm5-hero-number { text-align: center; }
.hm5-hero-caption { align-items: center; }

.hm5-gauge {
  /* v5.0.45 — bumped from 280px → 360px so the bottom-A hero arches
     (Stress Risk, HRV Stability) read at a glance from across the room.
     The dual-arch compact gauges in the top row override this via the
     `.hm5-hero-dual-col .hm5-gauge` rule below (capped at 200px) so the
     summary cards stay aligned with the map height. */
  width: min(360px, 100%);
  /* Explicit aspect-ratio so the SVG renders with non-zero height on
     initial paint even when the container hasn't laid out yet. The
     viewBox is 260×156, so the natural ratio is 260/156. Some browsers
     collapse `height: auto` on innerHTML-injected SVG to the 150-px
     legacy default until a reflow happens — `aspect-ratio` forces a
     correct height immediately on first render. */
  aspect-ratio: 260 / 156;
  height: auto;
  display: block;
  margin: 0 auto -4px;
}
.hm5-gauge-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--hm5-muted) 35%, transparent);
  stroke-width: 12;
  stroke-linecap: round;
  opacity: 0.45;
}
body.light-theme .hm5-gauge-bg {
  stroke: color-mix(in srgb, var(--hm5-muted) 50%, transparent);
}
.hm5-gauge-slab {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--hero-color) 60%, transparent));
}
.hm5-gauge-dot {
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--hero-color) 80%, transparent));
  stroke: rgba(255,255,255,0.92);
  stroke-width: 2;
}
/* Centered value rendered INSIDE the arch (used by bottom-a hero cards
   so the card body is compact enough to share a row with RELAX at 1/4
   each). The SVG text picks up the hero gradient via fill + drop-shadow
   so it matches the legacy .hm5-hero-number treatment. */
/* The centred value matches the arch colour so eye + arch read as one
   unit. We mix a touch of text colour in (~20%) to keep the number
   legible against the colourful vignette. Drop-shadow keeps it lifted
   off whatever backdrop sits behind the gauge. */
.hm5-gauge-cval {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  fill: color-mix(in srgb, var(--hero-color) 80%, var(--hm5-text) 20%);
  letter-spacing: -0.02em;
  dominant-baseline: alphabetic;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
body.light-theme .hm5-gauge-cval {
  fill: color-mix(in srgb, var(--hero-color) 70%, var(--hm5-text) 30%);
  filter:
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.7))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}
.hm5-gauge-cunit {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  fill: color-mix(in srgb, var(--hero-color) 65%, var(--hm5-muted) 35%);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  dominant-baseline: alphabetic;
  opacity: 0.9;
}
.hm5-gauge-cstat {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  fill: var(--hm5-muted);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  dominant-baseline: alphabetic;
  opacity: 0.88;
}
.hm5-hcell-value-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.hm5-hcell-stat,
.hm5-hero-stat,
.hm5-lastseen-stat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  user-select: none;
}
.hm5-hero-stat,
.hm5-lastseen-stat {
  margin-top: -2px;
  text-align: center;
  color: var(--hm5-muted);
  text-shadow: none;
}
body.light-theme .hm5-hcell-stat {
  color: rgba(255,255,255,0.92);
}
body.light-theme .hm5-hero-stat,
body.light-theme .hm5-lastseen-stat {
  color: var(--hm5-muted);
}
/* Inline-value hero: drop the standalone number row, tighten the body
   so the card stays short. The caption (pill + info) becomes the only
   element under the gauge. */
.hm5-hero-inline {
  gap: 6px;
  padding: 2px 4px 4px;
}
.hm5-hero-inline .hm5-hero-main { gap: 6px; }
.hm5-hero-inline .hm5-hero-caption { margin-top: -4px; }
/* When the bottom-a row has acquired the RELAX card (3 → 4 cards) the
   four cards still fill the wrap via auto-fit. Cap the gauge a touch
   smaller so the 1/4 cards don't blow out vertically when the arch
   would otherwise scale up to 360px. */
.hm5-cards-bottom-a-with-relax .hm5-card-bottom .hm5-gauge {
  max-width: 260px;
}
body.light-theme .hm5-gauge-dot {
  stroke: rgba(255,255,255,1);
  stroke-width: 2.5;
}
.hm5-gauge-tick {
  fill: var(--hm5-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Vertical thermometer (skin temp special-case) ───────────────────── */
.hm5-thermo {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 10px;
  align-items: center;
}
.hm5-thermo > svg {
  width: 100%;
  aspect-ratio: 160 / 280;
  height: auto;
  max-height: 260px;
}
.hm5-thermo-shell {
  fill: color-mix(in srgb, var(--hm5-card-bg) 80%, white 20%);
  stroke: color-mix(in srgb, var(--hm5-muted) 60%, transparent);
  stroke-width: 1.5;
}
body.light-theme .hm5-thermo-shell {
  fill: rgba(255,255,255,0.85);
}
.hm5-thermo-band {
  fill: color-mix(in srgb, var(--hero-color) 30%, transparent);
  rx: 4;
}
.hm5-thermo-median-tick {
  stroke: rgba(255,255,255,0.85);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hero-color) 80%, transparent));
}
body.light-theme .hm5-thermo-median-tick {
  stroke: rgba(15,23,42,0.7);
}
.hm5-thermo-tick {
  stroke: var(--hm5-muted);
  stroke-width: 1;
}
.hm5-thermo-tlabel {
  fill: var(--hm5-muted);
  font-size: 10px;
  font-weight: 600;
}
.hm5-thermo-main {
  align-items: flex-start;
  text-align: left;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.hm5-thermo .hm5-hero-number  { text-align: left; font-size: 44px; }
.hm5-thermo .hm5-hero-caption { align-items: flex-start; }

/* ── Footer legend strip ────────────────────────────────────────────────── */
.hm5-card-foot {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--hm5-divider);
}
.hm5-leg-label { font-size: 10px; font-weight: 600; color: var(--hm5-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.hm5-leg-ramp {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--hm5-btn-border);
}
.hm5-leg-ramp span {
  display: inline-block;
  width: 14px; height: 8px;
}
.hm5-leg-hint {
  font-size: 11px;
  color: var(--hm5-muted);
  margin-left: auto;
}

/* ── Light theme overrides for cells ───────────────────────────────────── */
body.light-theme .hm5-cell-median {
  background: #0f172a;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
}

/* ── RELAX (box-breathing) card ─────────────────────────────────────────
   A chrome-less call-to-action card. No header / footer / toggles —
   just an eyebrow + title + duration chips + a big blue gradient
   button. Persisted post-session stats sit under the button.
   Visually it's a quiet, calm card so users return to it without
   thinking the dashboard is asking them to "fix" anything.
   ─────────────────────────────────────────────────────────────────── */
.hm5-card-relax {
  background: linear-gradient(155deg,
    color-mix(in srgb, #22D3EE 18%, var(--hm5-card-bg) 82%),
    color-mix(in srgb, #1E40AF 22%, var(--hm5-card-bg) 78%));
  border-color: color-mix(in srgb, #22D3EE 26%, var(--hm5-card-border) 74%);
}
body.light-theme .hm5-card-relax {
  background: linear-gradient(155deg,
    color-mix(in srgb, #22D3EE 12%, var(--hm5-card-bg) 88%),
    color-mix(in srgb, #1E40AF 12%, var(--hm5-card-bg) 88%));
}
.hm5-relax-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 45% at 50% 90%, rgba(34, 211, 238, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(30, 64, 175, 0.18) 0%, transparent 60%);
}
.hm5-relax-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 18px 14px 14px;
}
.hm5-relax-titles {
  display: flex; flex-direction: column; gap: 2px;
  text-align: center;
  margin-bottom: 4px;
}
.hm5-relax-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, #22D3EE 70%, var(--hm5-muted) 30%);
}
.hm5-relax-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hm5-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hm5-relax-sub {
  font-size: 11px;
  color: var(--hm5-muted);
}
.hm5-relax-chiprow {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.hm5-relax-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--hm5-text-soft);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, border-color 140ms ease;
}
/* The UNLIMITED chip carries a longer label than the timed chips
   (UNLIMITED ∞). Keep it visually grouped with the others — same
   pill metrics — but allow the glyph to ride a hair larger than the
   surrounding caps so the ∞ reads as the symbolic accent. */
.hm5-relax-chip-unl {
  letter-spacing: 0.06em;
  white-space: nowrap;
}
body.light-theme .hm5-relax-chip {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.10);
}
.hm5-relax-chip:hover { background: rgba(34, 211, 238, 0.10); border-color: rgba(34, 211, 238, 0.35); color: var(--hm5-text); }
.hm5-relax-chip.active {
  background: rgba(34, 211, 238, 0.20);
  border-color: rgba(34, 211, 238, 0.55);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
body.light-theme .hm5-relax-chip.active {
  background: rgba(34, 211, 238, 0.22);
  border-color: rgba(34, 130, 230, 0.55);
  color: #0c4a6e;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}
.hm5-relax-cta {
  appearance: none;
  border: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 44px;
  width: min(300px, 92%);
  min-height: 0;
  border-radius: 32px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  background: linear-gradient(135deg, #22D3EE 0%, #2962FF 55%, #1E40AF 100%);
  box-shadow:
    0 10px 22px -10px rgba(30, 64, 175, 0.70),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 -4px 14px -8px rgba(34, 211, 238, 0.55) inset;
  transition: transform 140ms ease, box-shadow 200ms ease, filter 200ms ease;
  align-self: center;
  margin: 8px auto 0;
}
.hm5-relax-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    0 14px 28px -12px rgba(30, 64, 175, 0.80),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 -4px 18px -8px rgba(34, 211, 238, 0.70) inset;
}
.hm5-relax-cta:active { transform: translateY(0); filter: brightness(0.96); }
.hm5-relax-cta-glyph {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
  line-height: 0;
  padding: 0;
  overflow: hidden;
}
.hm5-relax-cta-glyph svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  /* nudge right so the triangle reads centred in the circle */
  transform: translateX(1px);
}
.hm5-relax-cta-glyph svg polygon {
  fill: currentColor;
}
.hm5-relax-cta-text {
  letter-spacing: 0.16em;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.hm5-relax-summary {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px;
  font-size: 11px;
  color: var(--hm5-muted);
  padding: 8px 4px 0;
  min-height: 18px;
  text-align: center;
}
.hm5-relax-summary-empty { font-style: italic; opacity: 0.85; }
.hm5-relax-summary-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in srgb, #22D3EE 60%, var(--hm5-muted) 40%);
}
.hm5-relax-summary-val { font-weight: 700; color: var(--hm5-text); }
.hm5-relax-summary-sep { opacity: 0.5; }
.hm5-relax-summary-when { color: var(--hm5-muted); }

/* ── Fullscreen breathing overlay ──────────────────────────────────────
   Cyan/royal-blue/night-sky orb on a near-black field. Mirrors
   geowear-11's BreathingOrbView aesthetic. */
.hm5-relax-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(15, 23, 42, 0.85) 0%, rgba(8, 12, 24, 0.98) 70%, #05070d 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hm5RelaxFadeIn 240ms ease both;
}
.hm5-relax-overlay.hm5-relax-overlay-leaving {
  animation: hm5RelaxFadeOut 280ms ease both;
}
@keyframes hm5RelaxFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm5RelaxFadeOut { from { opacity: 1; } to { opacity: 0; } }
.hm5-relax-overlay .hm5-relax-orb {
  width: min(72vmin, 560px);
  height: min(72vmin, 560px);
  pointer-events: none;
}
.hm5-relax-orb-body { transition: opacity 200ms ease; }
.hm5-relax-halo     { mix-blend-mode: screen; }
.hm5-relax-close {
  position: absolute;
  top: 16px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 20, 36, 0.55);
  color: #e8eef8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease, transform 140ms ease;
}
.hm5-relax-close:hover { background: rgba(34, 211, 238, 0.18); transform: scale(1.05); }
.hm5-relax-total {
  position: absolute;
  /* Sits just above the big END button — the END button takes the
     centre-bottom anchor; the elapsed/remaining timer hovers above it. */
  bottom: 116px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(232, 238, 248, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
/* Big "END" button at centre-bottom of the fullscreen orb. White text
   on a white stroke + transparent fill — looks like a hollow capsule
   that doesn't fight the breathing orb for attention but is impossible
   to miss when the user wants out. Mirrors the X in the corner. */
.hm5-relax-end {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  appearance: none;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 14px 56px;
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.hm5-relax-end:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #ffffff;
  transform: translate(-50%, -1px);
}
.hm5-relax-end:active { transform: translate(-50%, 0); background: rgba(255, 255, 255, 0.16); }
.hm5-relax-end:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.85);
  outline-offset: 3px;
}
.hm5-relax-phase,
.hm5-relax-count {
  font-family: 'Poppins', system-ui, sans-serif;
  text-shadow: 0 0.25px 0.5px rgba(0, 0, 0, 0.4);
}

/* When the body has .hm5-relax-active we lock background scroll so the
   page can't shift underneath the fullscreen overlay. */
body.hm5-relax-active {
  overflow: hidden;
}

/* ── Collection zones editor (v6) ── */
.device-settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.device-settings-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.device-settings-tab.active {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.06);
}
.collection-zones-root .cz-grid {
  display: grid;
  grid-template-columns: minmax(280px, 36fr) minmax(380px, 64fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .collection-zones-root .cz-grid {
    grid-template-columns: 1fr;
  }
  .collection-zones-root .cz-card-map {
    order: -1;
  }
}
.collection-zones-root .cz-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(68vh, 640px);
  overflow-y: auto;
  padding-right: 4px;
}
.collection-zones-root .cz-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
}
.collection-zones-root .cz-card-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #a0a8c0);
  font-weight: 600;
}
.collection-zones-root .cz-card-desc {
  margin: -6px 0 10px;
  font-size: 12px;
  color: var(--muted, #a0a8c0);
  line-height: 1.4;
}
.collection-zones-root .cz-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.collection-zones-root .cz-field-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.collection-zones-root .cz-field-label {
  font-size: 11px;
  color: var(--muted, #a0a8c0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.collection-zones-root .cz-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg, rgba(0, 0, 0, 0.25));
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
}
.collection-zones-root .cz-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.collection-zones-root .cz-card-map {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
  position: sticky;
  top: 0;
}
.collection-zones-root .cz-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.collection-zones-root .cz-map-header .cz-card-title {
  margin: 0;
}
.collection-zones-root .cz-basemap-toggle {
  display: flex;
  gap: 6px;
}
.collection-zones-root .cz-btn.cz-basemap {
  padding: 6px 12px;
  font-size: 11px;
}
.collection-zones-root .cz-btn.cz-basemap.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(56, 189, 248, 0.12);
}
.collection-zones-root .cz-map {
  flex: 1;
  min-height: 380px;
  width: 100%;
  cursor: crosshair;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.collection-zones-root .cz-map-hint {
  margin: 0;
  font-size: 11px;
  color: var(--muted, #a0a8c0);
  line-height: 1.4;
}
.collection-zones-root .cz-btn.cz-mode.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(56, 189, 248, 0.12);
}
.collection-zones-root .cz-zone-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.collection-zones-root .cz-zone-empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #a0a8c0);
  line-height: 1.45;
}
.collection-zones-root .cz-zone-card {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
}
.collection-zones-root .cz-zone-card.active {
  box-shadow: 0 0 0 1px var(--accent);
  background: rgba(0, 188, 212, 0.06);
}
.collection-zones-root .cz-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.collection-zones-root .cz-zone-meta {
  font-size: 11px;
  color: var(--muted, #a0a8c0);
  margin-bottom: 8px;
  line-height: 1.35;
}
.collection-zones-root .cz-zone-actions {
  display: flex;
  gap: 8px;
}
.collection-zones-root .cz-chip {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.collection-zones-root .cz-chip-inclusion { background: rgba(34,197,94,0.2); color: #86efac; }
.collection-zones-root .cz-chip-exclusion { background: rgba(239,68,68,0.2); color: #fca5a5; }
.collection-zones-root .cz-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.collection-zones-root .cz-btn.cz-btn-add {
  flex: 1;
  min-width: 120px;
}
.collection-zones-root .cz-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.collection-zones-root .cz-search-row { position: relative; }
.collection-zones-root .cz-search-results {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: var(--surface, #121432);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 180px;
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.collection-zones-root .cz-geocode-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}
.collection-zones-root .cz-geocode-item:hover { background: rgba(255,255,255,0.06); }
.collection-zones-root .cz-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.collection-zones-root .cz-metrics-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #a0a8c0);
  line-height: 1.45;
}
.collection-zones-root .cz-card-schedule .cz-add-rule {
  margin-top: 10px;
}
.collection-zones-root .cz-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.collection-zones-root .cz-status {
  font-size: 12px;
  color: var(--muted, #a0a8c0);
  flex: 1;
  min-width: 160px;
}
.collection-zones-root .cz-err { color: #f87171; }
.device-settings-container.has-collection-zones .alert-dialog-container {
  max-width: min(1140px, 96vw);
}
.org-collection-panel { margin-top: 16px; }
.org-collection-panel .collection-zones-root .cz-sidebar {
  max-height: none;
}
.org-collection-panel .collection-zones-root .cz-grid {
  grid-template-columns: minmax(260px, 34fr) minmax(420px, 66fr);
}
.org-collection-panel .collection-zones-root .cz-map {
  min-height: 440px;
}
.org-collection-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── Privacy one-pager wizard ── */
#privacy-wizard-dialog .alert-dialog-container {
  max-width: min(1120px, 96vw);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
}
#privacy-wizard-dialog .alert-dialog-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.pw-dialog-mount { height: 100%; min-height: 0; }
.privacy-wizard {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: min(78vh, 780px);
}
.privacy-wizard[data-mode="embedded"],
.privacy-wizard[data-mode="inline"] { max-height: min(72vh, 720px); }
.pw-sticky-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface, #121432);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px 10px;
}
.pw-scope-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pw-scope-label { font-size: 12px; color: var(--muted, #a0a8c0); font-weight: 500; }
.pw-scope-select { min-width: 220px; max-width: 100%; }
.pw-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-nav-pill {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.pw-nav-pill:hover { background: rgba(255, 255, 255, 0.08); }
.pw-scroll { flex: 1; overflow-y: auto; padding: 16px 18px 24px; min-height: 0; }
.pw-section {
  scroll-margin-top: 120px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.pw-section-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.pw-section-desc, .pw-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted, #a0a8c0); }
.pw-info-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .pw-info-grid { grid-template-columns: 1fr 1fr; } }
.pw-info-card { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border); }
.pw-info-card h4 { margin: 0 0 6px; font-size: 14px; }
.pw-info-card p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted, #a0a8c0); }
.pw-info-inclusion { border-left: 4px solid #22c55e; }
.pw-info-exclusion { border-left: 4px solid #ef4444; }
.pw-enable-card { max-width: 360px; }
.pw-zone-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 520px) { .pw-zone-actions { grid-template-columns: 1fr 1fr; } }
.pw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 18px; border-radius: 10px;
  border: 1px solid var(--border); font-size: 14px; font-weight: 600; cursor: pointer;
}
.pw-btn-inclusion { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: #86efac; }
.pw-btn-exclusion { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #fca5a5; }
.pw-btn-primary { background: var(--accent, #00bcd4); border-color: var(--accent); color: #fff; }
.pw-btn-secondary { background: rgba(255,255,255,0.05); margin-top: 12px; }
.pw-btn-ghost { background: transparent; color: var(--muted, #a0a8c0); }
.pw-btn-link { background: none; border: none; color: var(--accent); font-size: 12px; padding: 4px 0; min-height: auto; cursor: pointer; text-decoration: underline; }
.pw-map-section .cz-map { min-height: 360px; width: 100%; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.pw-map-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pw-review-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pw-review-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.pw-review-meta { font-size: 11px; color: var(--muted, #a0a8c0); width: 100%; }

/* ── Service health (footer LIVE + status modal/page) ── */
.service-health-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0 2px;
  border: none;
  background: none;
  color: var(--ok, #00e676);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  vertical-align: baseline;
  text-decoration: none;
}
.service-health-footer-link:hover { text-decoration: underline; }
.service-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
.service-health-window {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-health-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.service-health-container {
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--card, #1a1a24);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.service-health-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.service-health-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.service-health-body {
  padding: 20px;
  overflow: auto;
}
.service-health-summary p {
  margin: 0 0 6px;
  font-size: 13px;
}
.service-health-updated {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
}
.service-health-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 14px 0 10px;
  font-size: 12px;
}
.service-health-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.service-health-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.service-health-chart-wrap {
  position: relative;
  height: 280px;
  margin: 8px 0 12px;
}
.service-health-note {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
}
.service-health-body-page {
  min-height: 100vh;
  background: var(--bg, #0f0f14);
  color: var(--text, #e0e0e0);
  font-family: "Poppins", sans-serif;
}
.service-health-page-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}
.service-health-page-head h1 {
  margin: 0 0 6px;
  font-size: 24px;
}
.service-health-page-sub {
  margin: 0 0 20px;
  color: var(--muted, #888);
  font-size: 13px;
}
.service-health-back {
  margin-top: 24px;
  font-size: 13px;
}
.service-health-back a { color: var(--accent, #7c4dff); }

.map-sos-popup-body { color: #0a192f; font-size: 13px; }
.map-sos-popup-title { color: #D32F2F; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.map-sos-popup-msg { margin: 6px 0; font-weight: 600; color: #b71c1c; }
.map-sos-popup-meta { font-size: 11px; color: #666; margin-bottom: 2px; }
.map-sos-popup-acked { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: #2e7d32; }
.sos-ack-btn {
  margin-top: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #D32F2F;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sos-ack-btn:hover { background: #b71c1c; }
.pw-review-empty { margin: 0; font-size: 12px; color: var(--muted, #a0a8c0); font-style: italic; }
.pw-footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px 16px; background: var(--surface, #121432); }
.pw-first-run-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pw-footer-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.pw-footer-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border); }
.device-settings-container.has-collection-zones #device-settings-zones { min-height: 420px; }
.org-collection-panel .privacy-wizard { max-height: none; }
.org-collection-panel .pw-scroll { max-height: min(70vh, 680px); }