:root {
  --rrsp-color: #8b5a00;
  --tfsa-color: #197a75;
}

.dark {
  --rrsp-color: #ffe47a;
  --tfsa-color: #3cc4bd;
}

      /* Mode / segmented toggle */
      .seg-btn {
        flex: 1;
        text-align: center;
        padding: 0.55rem 0.5rem;
        border-radius: 0.7rem;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-secondary);
        transition: all 0.2s ease;
        cursor: pointer;
      }
      .seg-btn.active {
        background-color: var(--bg-surface);
        color: var(--accent-emerald);
        box-shadow: 0 2px 8px -2px rgba(18, 22, 25, 0.08);
      }

      /* Range sliders */
      input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 5px;
        border-radius: 999px;
        background: var(--bg-secondary);
        accent-color: var(--accent-emerald);
        cursor: pointer;
      }
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--accent-emerald);
        border: 3px solid var(--bg-surface);
        box-shadow: 0 0 0 1px var(--border-active);
        cursor: pointer;
        margin-top: -0.5px;
      }
      input[type="range"]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--accent-emerald);
        border: 3px solid var(--bg-surface);
        box-shadow: 0 0 0 1px var(--border-active);
        cursor: pointer;
      }

      .num-field {
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-main);
        color: var(--text-primary);
        border-radius: 0.65rem;
      }
      .num-field:focus {
        outline: none;
        border-color: var(--accent-emerald);
      }

      /* Toggle switch */
      .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 22px;
        flex-shrink: 0;
      }
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .switch-track {
        position: absolute;
        inset: 0;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-main);
        border-radius: 999px;
        transition: 0.2s;
      }
      .switch-track::before {
        content: "";
        position: absolute;
        height: 14px;
        width: 14px;
        left: 3px;
        top: 3px;
        background-color: var(--text-muted);
        border-radius: 50%;
        transition: 0.2s;
      }
      .switch input:checked + .switch-track {
        background-color: var(--accent-emerald);
        border-color: var(--accent-emerald);
      }
      .switch input:checked + .switch-track::before {
        transform: translateX(18px);
        background-color: white;
      }

      .stat-tile {
        border-radius: 1.25rem;
        padding: 1.1rem 1.25rem;
        border: 1px solid var(--border-main);
      }