/* ── Application Settings Screen ─────────────────────── */
    .settings-screen {
      display: none;
      position: fixed; inset: 0;
      background: var(--clr-bg);
      z-index: 9200;
      flex-direction: column;
    }
    .settings-screen.active { display: flex; }

    .settings-toolbar {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 16px; background: #2c3e50; color: #fff; flex-shrink: 0;
    }
    .settings-toolbar strong {
      font-size: 1rem;
      display: flex; align-items: center; gap: 8px;
    }
    .settings-toolbar strong svg { width: 20px; height: 20px; }
    .settings-toolbar-actions { display: flex; gap: 8px; }
    .settings-toolbar-actions button {
      padding: 7px 16px; border: none; border-radius: 4px;
      font-weight: 600; cursor: pointer; font-size: .85rem;
    }
    .settings-save-btn { background: var(--clr-primary); color: #fff; }
    .settings-save-btn:hover { filter: brightness(1.1); }
    .settings-close-btn { background: rgba(255,255,255,.2); color: #fff; }
    .settings-close-btn:hover { filter: brightness(1.2); }

    .settings-body { flex: 1; display: flex; min-height: 0; }

    .settings-nav {
      width: 230px; flex-shrink: 0;
      background: var(--clr-white);
      border-right: 1px solid #dfe6e9;
      padding: 14px 10px;
      display: flex; flex-direction: column; gap: 4px;
      overflow-y: auto;
    }
    .settings-nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      border: none; border-radius: var(--radius);
      background: transparent;
      color: var(--clr-dark);
      font-size: .88rem; font-weight: 600; text-align: left;
      cursor: pointer;
      transition: background .12s, color .12s;
    }
    .settings-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
    .settings-nav-item:hover { background: var(--clr-light); }
    .settings-nav-item.active { background: rgba(52,152,219,.14); color: var(--clr-primary); }

    .settings-content { flex: 1; overflow-y: auto; padding: 24px 28px; }
    .settings-section {
      display: none;
      max-width: 720px;
      flex-direction: column;
      gap: 16px;
    }
    .settings-section.active { display: flex; }
    .settings-section-title {
      margin: 0;
      color: var(--clr-dark);
      border-bottom: 1px solid #dfe6e9;
      padding-bottom: 8px;
      font-size: 1rem;
    }
    .settings-hint {
      margin: 4px 0 0;
      font-size: .82rem;
      color: #7f8c8d;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .settings-body { flex-direction: column; }
      .settings-nav {
        width: 100%;
        flex-direction: row; flex-wrap: wrap;
        border-right: none; border-bottom: 1px solid #dfe6e9;
        padding: 8px;
      }
      .settings-content { padding: 16px; }
    }