/* ==========================================================================
   SETTINGS + QUEUE + ONBOARDING. Thème "Noir".
   ========================================================================== */

/* ================= FILE D'ATTENTE ================= */
.queue-current {
  border: 1px solid var(--hairline-2); border-radius: var(--r-1);
  padding: var(--s3); font-weight: var(--w-medium);
  border-left: 2px solid var(--red);
  background: var(--glass-2); color: var(--ink);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.queue-pos { font-size: var(--t-micro); color: var(--ink-faint); margin-left: auto; flex-shrink: 0; }
.queue-item .rm {
  background: none; border: none; color: var(--ink-faint);
  font-size: 16px; padding: 8px; cursor: pointer; flex-shrink: 0;
}
.queue-item .rm:active { color: var(--red); }
.queue-item.dragging { opacity: .5; }
.queue-item .grip { color: var(--ink-faint); font-size: 16px; cursor: grab; padding: 8px 2px; background: none; border: none; display: inline-flex; align-items: center; }
.queue-item .grip:disabled { opacity: .3; cursor: default; }
.queue-foot { text-align: center; padding: var(--s3); color: var(--ink-faint); font-size: var(--t-meta); }

/* ================= RÉGLAGES ================= */
.set-row {
  display: flex; align-items: center; gap: var(--s3);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s3) 2px;
}
.set-row .grow .t { font-weight: var(--w-medium); }
.set-row .grow .d { font-size: var(--t-meta); color: var(--ink-dim); }
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
.switch i {
  position: absolute; inset: 0; border-radius: var(--r-round);
  background: var(--surface-3); transition: background var(--fast); pointer-events: none;
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  transition: transform var(--fast);
}
.switch input:checked + i { background: var(--red); }
.switch input:checked + i::after { transform: translateX(20px); }
.seg { display: flex; border: 1px solid var(--hairline); border-radius: var(--r-1); padding: 3px; gap: 3px; }
.seg button {
  flex: 1; border: none; background: none; color: var(--ink-dim);
  border-radius: 6px; padding: 8px 0;
  font-weight: var(--w-medium); font-size: var(--t-meta); font-family: var(--font); cursor: pointer;
}
.seg button.is-on { background: var(--ink); color: var(--bg); }
.danger-zone {
  border: 1px solid var(--red); border-radius: var(--r-2); padding: var(--s3); margin-top: var(--s4);
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.danger-zone .btn { border-color: var(--red); color: var(--red); background: none; }
.app-version { text-align: center; padding: var(--s4) 0; color: var(--ink-faint); }

/* ================= ONBOARDING ================= */
.onboard-dots { display: flex; gap: 6px; justify-content: center; margin: var(--s4) 0; }
.onboard-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); }
.onboard-dots i.on { background: var(--red); width: 18px; border-radius: 3px; }

/* profil / stats : bloc verre dépoli (pas de dégradé de couleur) */
.profile-hero {
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-2); padding: var(--s4);
  color: var(--ink); margin-bottom: var(--s3);
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}
.profile-hero .n { font-size: 28px; font-weight: var(--w-bold); line-height: 1; }
.profile-hero .l { font-size: var(--t-meta); color: var(--ink-dim); margin-top: 4px; }