/* Scoped via .settings-dropdown ancestor. All colors via the host
     page's CSS custom properties — no hardcoded light/dark splits. */
  .settings-dropdown { position: relative; display: inline-block; }
  .settings-trigger {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    padding: 0;
  }
  .settings-trigger:hover,
  .settings-trigger[aria-expanded="true"] {
    background: rgba(127, 127, 127, 0.12);
    border-color: rgba(127, 127, 127, 0.18);
  }
  .settings-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--card-bg, white);
    color: var(--text-dark, #1a1f2e);
    border: 1px solid var(--border, #e3e8f0);
    border-radius: 10px;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.10),
      0 12px 30px -10px rgba(0, 0, 0, 0.25);
    padding: 8px 0;
    z-index: 100;
    animation: settings-menu-in .12s ease-out;
  }
  @keyframes settings-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .settings-menu[hidden] { display: none; }
  .settings-menu-section { padding: 4px 0; }
  .settings-menu-label {
    padding: 4px 14px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #5f6b80);
  }
  .settings-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-dark, #1a1f2e);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s;
  }
  .settings-menu-option:hover { background: rgba(127, 127, 127, 0.10); }
  .settings-menu-option.active {
    color: var(--fuergy-blue, #2674ff);
    font-weight: 600;
  }
  .settings-menu-glyph {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted, #5f6b80);
  }
  .settings-menu-glyph--code { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
  .settings-menu-option.active .settings-menu-glyph { color: var(--fuergy-blue, #2674ff); }
  .settings-menu-check {
    margin-left: auto;
    color: var(--fuergy-blue, #2674ff);
    font-weight: 700;
  }
  .settings-menu-separator {
    height: 1px;
    background: var(--border, #e3e8f0);
    margin: 4px 0;
    opacity: 0.6;
  }