/* ==========================================================
   TECH ION SUPPORT - เมนูตั้งค่า (ฟันเฟือง) มุมขวาบน ใช้ร่วมกันทุกหน้า
   หน้าตาเดียวกับ docs-portal: หัวข้อ + กลุ่มปุ่ม ธีม / ภาษา
   ต้องมี token: --card --ink --muted --line --brand (มีทั้ง 2 หน้า)
========================================================== */
.prefs { position: relative; display: inline-flex; align-items: center; }
.prefs-btn {
  width: 34px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25);
  cursor: pointer; padding: 0;
}
.prefs-btn:hover, .prefs-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

.prefs-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 2000;
  min-width: 15rem; padding: .75rem;
  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,.25);
  font-family: "Prompt", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .95rem; text-align: left;
}
.prefs-panel[hidden] { display: none; }
.prefs-title { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #64748b); }
.prefs-group { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .35rem 0; border-top: 1px solid var(--line, #e2e8f0); }
.prefs-label { flex-basis: 100%; font-size: .85rem; color: var(--muted, #64748b); }
.prefs-group button {
  font: inherit; font-size: .9rem; line-height: 1.3; cursor: pointer;
  padding: .3rem .7rem; border-radius: 8px;
  background: var(--card, #fff); color: var(--ink, #172033); border: 1px solid var(--line, #e2e8f0);
}
.prefs-group button:hover { border-color: var(--muted, #64748b); }
.prefs-group button[aria-pressed="true"] { background: var(--brand, #155fd5); border-color: var(--brand, #155fd5); color: #fff; }