/* ==========================================================
   TECH ION SUPPORT - เมนูตั้งค่า (ฟันเฟือง) มุมขวาบน ใช้ร่วมกันทุกหน้า
   ต้องมี token: --card --ink --muted --line --brand --brand-soft (มีทั้ง 2 หน้า)
========================================================== */
.prefs { position: relative; display: inline-flex; align-items: center; }
.prefs-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18);
  cursor: pointer; padding: 0;
}
.prefs-btn:hover, .prefs-btn[aria-expanded="true"] { background: rgba(255,255,255,.2); }

.prefs-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 2000;
  min-width: 230px; padding: 6px;
  background: var(--card, #fff); color: var(--ink, #172033);
  border: 1px solid var(--line, #e2e8f0); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10,25,58,.18);
  font-family: "Prompt", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .95rem;
}
.prefs-panel[hidden] { display: none; }
.prefs-head { font-size: .8rem; color: var(--muted, #64748b); padding: 6px 10px 4px; }
.prefs-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left; color: inherit;
  background: none; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.prefs-row:hover { background: var(--brand-soft, #e8f0fd); }
.prefs-row span { flex: 1; }
.prefs-row small { color: var(--muted, #64748b); font-size: .8rem; }
.prefs-row.is-on { color: var(--brand, #155fd5); font-weight: 600; }
.prefs-row .prefs-chev, .prefs-row .prefs-check { margin-left: auto; color: var(--muted, #64748b); }
.prefs-row.is-on .prefs-check { color: var(--brand, #155fd5); }
.prefs-back { color: var(--muted, #64748b); border-bottom: 1px solid var(--line, #e2e8f0); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.prefs-back span { font-weight: 600; color: var(--ink, #172033); }