/* ================================================================
   หน้าตั้งค่า (settings.html) ใช้ตัวแปรสีชุดเดียวกับ style.css
   ================================================================ */
.settings-page { background: var(--bg-alt); }
.settings-main { padding: calc(var(--header-h) + 32px) 0 64px; }
.back-icon { rotate: 180deg; }
.settings-page .btn-primary:hover .back-icon { translate: -4px 0; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1100px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 1400px; }
}
.settings-col { display: grid; gap: 20px; min-width: 0; }
.settings-head .eyebrow .icon { animation: spin 12s linear infinite; }
.settings-head .section-title { margin-top: 6px; }
.settings-head .lead { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 1rem; }
.settings-head .lead .icon { color: var(--c1); }

.set-card {
  padding: clamp(18px, 3vw, 26px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 20px 40px -34px rgb(var(--shadow) / .7);
}
.set-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.set-card-head h2 { font-size: 1.2rem; }
.set-card-head p { color: var(--muted); font-size: .95rem; }
.set-icon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--c2), var(--c1)); color: var(--on-c1);
}
.set-icon .icon { width: 22px; height: 22px; }

/* ปุ่มเลือกแบบการ์ด: input radio อยู่ในการ์ด มองไม่เห็นแต่ยังใช้คีย์บอร์ดได้ */
.layout-opt input, .theme-opt input, .lang-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.layout-opt:has(input:focus-visible), .theme-opt:has(input:focus-visible), .lang-opt:has(input:focus-visible) {
  outline: 3px solid var(--c2); outline-offset: 3px;
}

/* ----- รูปแบบหน้าเว็บ ----- */
.layout-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.layout-opt {
  position: relative; display: grid; gap: 10px; padding: 10px 10px 14px;
  border-radius: 16px; border: 2px solid var(--line); background: var(--bg);
  cursor: pointer; transition: border-color .3s, transform .3s var(--ease-back), box-shadow .3s;
}
.layout-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 50%, var(--line)); }
.layout-opt:has(input:checked) { border-color: var(--c1); box-shadow: 0 0 0 4px var(--glow); }
.opt-text { display: grid; gap: 2px; padding-inline: 4px; line-height: 1.4; }
.opt-text b { font-family: var(--font-head); font-size: 1.05rem; }
.opt-text small { color: var(--muted); font-size: .85rem; }
.opt-check {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--c1); color: var(--on-c1);
  opacity: 0; transform: scale(.4); transition: .35s var(--ease-back);
}
.opt-check .icon { width: 16px; height: 16px; }
.layout-opt:has(input:checked) .opt-check { opacity: 1; transform: none; }

/* ภาพร่าง (wireframe) แบบคอม + แบบมือถือคู่กัน */
.wf-pair { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 6px; align-items: stretch; }
.wf.wf-phone {
  aspect-ratio: auto; align-content: start; gap: 4px; padding: 7px 5px;
  border-radius: 9px; border-width: 2px; border-color: color-mix(in srgb, var(--text) 30%, var(--line));
}
.wf-phone .wf-hero { min-height: 0; padding: 5px; gap: 3px; }
.wf-phone.wf-grand .wf-hero { min-height: 44%; }
.wf-phone .wf-t1 { height: 5px; width: 80%; }
.wf-phone .wf-t2 { height: 4px; width: 60%; }
.wf-phone .wf-btn { height: 5px; width: 50%; }
.wf-phone .wf-pic { height: 34%; min-height: 22px; }
.wf-phone .wf-list i { height: 9px; grid-template-columns: 34% 1fr; }
.wf-phone .wf-list i::after { height: 4px; margin-top: 2px; }
.wf-card { height: 24px; background: var(--wf-ink); border-radius: 4px !important; }
.wf-card.is-tint { height: 30px; background: color-mix(in srgb, var(--c1) 45%, var(--surface)); }
.wf-num { width: 30%; height: 7px; background: var(--c1); }
.wf .is-ink { background: var(--wf-ink); opacity: 1; }
.wf-phone .wf-t1.is-ink { background: color-mix(in srgb, var(--text) 45%, transparent); }
.wf {
  --wf-ink: color-mix(in srgb, var(--text) 18%, transparent);
  display: grid; gap: 6px; aspect-ratio: 4 / 3; padding: 8px; overflow: hidden;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
}
.wf i, .wf b, .wf s { display: block; border-radius: 3px; text-decoration: none; }
.wf-t1 { width: 60%; height: 8px; background: currentColor; }
.wf-t2 { width: 42%; height: 5px; background: currentColor; opacity: .6; }
.wf-btn { width: 26%; height: 8px; border-radius: 99px !important; background: var(--c2) !important; margin-top: 2px; }
.wf-hero { display: grid; align-content: end; gap: 4px; padding: 8px; border-radius: 6px; color: var(--on-c1); background: linear-gradient(135deg, var(--c2), var(--c1)); }
.wf-grand .wf-hero { min-height: 58%; }
.wf-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.wf-row3 i { height: 100%; min-height: 22px; background: var(--wf-ink); }
.wf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-height: 55%; color: var(--text); }
.wf-txt { display: grid; align-content: center; gap: 4px; }
.wf-txt .wf-t1 { width: 90%; }
.wf-txt .wf-t2 { width: 70%; }
.wf-txt .wf-btn { width: 45%; }
.wf-pic { border-radius: 6px !important; background: linear-gradient(135deg, var(--c2), var(--c1)); }
.wf-list { display: grid; gap: 5px; }
.wf-list i { display: grid !important; grid-template-columns: 30% 1fr; gap: 5px; height: 14px; }
.wf-list b { background: var(--wf-ink); }
.wf-list i::after { content: ''; height: 5px; margin-top: 4px; border-radius: 3px; background: var(--wf-ink); }
.wf-hero.is-center { justify-items: center; min-height: 48%; }
.wf-hero.is-center .wf-t1 { width: 70%; height: 11px; }
.wf-zig { display: grid; gap: 5px; }
.wf-zig i { display: grid !important; grid-template-columns: 55% 1fr; gap: 6px; height: 22px; }
.wf-zig i.is-rev { grid-template-columns: 1fr 55%; }
.wf-zig i.is-rev b { order: 2; }
.wf-zig b { background: color-mix(in srgb, var(--c1) 45%, var(--surface)); border-radius: 4px; }
.wf-zig s { height: 5px; margin-top: 8px; background: var(--wf-ink); }

/* ----- ธีมสี ----- */
.theme-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.theme-opt {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 4px;
  border-radius: 14px; border: 2px solid var(--line); background: var(--bg);
  font-size: .88rem; font-weight: 600; text-align: center; cursor: pointer;
  transition: transform .3s var(--ease-back), border-color .3s, box-shadow .3s;
}
.theme-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 50%, var(--line)); }
.theme-opt:has(input:checked) { border-color: var(--c1); box-shadow: 0 0 0 4px var(--glow); }
.theme-opt:has(input:checked) .swatch-dot .icon { opacity: 1; transform: none; }

.theme-group { margin: 4px 0 10px; font-weight: 600; color: var(--muted); font-size: .9rem; }
.theme-options + .theme-group { margin-top: 18px; }

/* ----- โหมดสี: ภาพตัวอย่างสว่าง / มืด / ครึ่งๆ ----- */
.mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mode-opt {
  position: relative; display: grid; gap: 10px; padding: 10px 10px 12px;
  border-radius: 16px; border: 2px solid var(--line); background: var(--bg); cursor: pointer;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-back);
}
.mode-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mode-opt:has(input:focus-visible) { outline: 3px solid var(--c2); outline-offset: 3px; }
.mode-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 50%, var(--line)); }
.mode-opt:has(input:checked) { border-color: var(--c1); box-shadow: 0 0 0 4px var(--glow); }
.mode-preview {
  --mp-bg: #f6f7fb; --mp-ink: #cfd6e4;
  display: grid; align-content: center; gap: 6px; aspect-ratio: 16 / 9; padding: 12px;
  border-radius: 10px; background: var(--mp-bg); border: 1px solid var(--line);
}
.mode-preview i { display: block; height: 7px; border-radius: 4px; background: var(--mp-ink); }
.mode-preview i:first-child { width: 55%; background: linear-gradient(90deg, var(--p2), var(--p1)); }
.mode-preview i:nth-child(2) { width: 85%; }
.mode-preview i:nth-child(3) { width: 65%; }
.mode-dark .mode-preview { --mp-bg: #121722; --mp-ink: #2c3446; }
.mode-auto .mode-preview { background: linear-gradient(135deg, #f6f7fb 50%, #121722 50%); }
.mode-auto .mode-preview i { background: linear-gradient(90deg, #cfd6e4 50%, #2c3446 50%); }
.mode-auto .mode-preview i:first-child { background: linear-gradient(90deg, var(--p2), var(--p1)); }
.mode-name { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.mode-name .icon { color: var(--c1); }

/* ----- ฟอนต์ ----- */
.font-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.font-opt {
  position: relative; display: grid; gap: 8px; padding: 12px;
  border-radius: 16px; border: 2px solid var(--line); background: var(--bg); cursor: pointer;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-back);
}
.font-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.font-opt:has(input:focus-visible) { outline: 3px solid var(--c2); outline-offset: 3px; }
.font-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 50%, var(--line)); }
.font-opt:has(input:checked) { border-color: var(--c1); box-shadow: 0 0 0 4px var(--glow); }
.font-opt:has(input:checked) .opt-check { opacity: 1; transform: none; }
.font-opt .opt-check { top: 10px; right: 10px; }
.font-sample { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); line-height: 1.35; }
.font-sample b { font-size: 1.35rem; font-weight: 600; color: var(--c1); }
.font-sample span { color: var(--muted); font-size: .92rem; }
.font-opt .opt-text { padding-inline: 2px; }

/* ----- สวิตช์เปิด/ปิด ----- */
.set-notice { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-size: .95rem; }
.set-notice .icon { color: var(--accent); margin-top: 3px; }
.fx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.switch-master { padding: 14px 16px; margin-bottom: 6px; border: 0; border-radius: 14px; background: var(--bg-alt); }
.switch-master b { font-family: var(--font-head); }
.sw-text { display: grid; min-width: 0; line-height: 1.4; }
.sw-text small { color: var(--muted); font-size: .85rem; }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 48px; height: 28px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  transition: background-color .3s;
}
.switch::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3);
  transition: translate .35s var(--ease-back), width .2s;
}
.switch:checked { background: var(--c1); }
.switch:checked::before { translate: 20px 0; }
.switch:indeterminate { background: color-mix(in srgb, var(--c1) 50%, transparent); }
.switch:indeterminate::before { translate: 10px 0; }
.switch:active::before { width: 26px; }
.switch:checked:active::before { translate: 16px 0; }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.switch:focus-visible { outline: 3px solid var(--c2); outline-offset: 3px; }
[data-mode="dark"] .switch:checked::before { background: var(--on-c1); }

/* ----- ภาษา ----- */
.lang-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lang-opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg);
  font-weight: 600; cursor: pointer; transition: border-color .3s, box-shadow .3s;
}
.lang-opt .icon { color: var(--c1); opacity: 0; transform: scale(.4); transition: .3s var(--ease-back); }
.lang-opt:hover { border-color: color-mix(in srgb, var(--c1) 50%, var(--line)); }
.lang-opt:has(input:checked) { border-color: var(--c1); box-shadow: 0 0 0 4px var(--glow); }
.lang-opt:has(input:checked) .icon { opacity: 1; transform: none; }

.set-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--c1); color: var(--c1); }

/* ----- ตัวอย่างหน้าเว็บ ----- */
.settings-preview { display: none; }
@media (min-width: 1100px) {
  .settings-preview { display: grid; gap: 12px; position: sticky; top: calc(var(--header-h) + 20px); }
}
.preview-note { color: var(--muted); margin-top: -4px; }
.preview-switch { display: flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.preview-switch button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none; font-weight: 600; font-size: .9rem; white-space: nowrap; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.preview-switch button[aria-pressed="true"] { background: var(--c1); color: var(--on-c1); }
/* โหมดมือถือ: กรอบโทรศัพท์ */
.preview-device { transition: width .45s var(--ease), border-radius .45s var(--ease), padding .45s var(--ease); }
.preview-device.is-mobile {
  position: relative; justify-self: center; width: fit-content; max-width: 100%; padding: 28px 12px 16px; border-radius: 44px;
  background: #0d1017; border: 1px solid #2a3040;
}
/* ลำโพง/กล้องอยู่ที่ขอบเครื่องเหนือจอ ไม่บังหน้าเว็บ */
.preview-device.is-mobile::before {
  content: ''; position: absolute; top: 11px; left: 50%; width: 64px; height: 6px; margin-left: -32px;
  border-radius: 999px; background: #2a3040;
}
.preview-device.is-mobile .preview-bar { display: none; }
.preview-device.is-mobile .preview-screen {
  height: clamp(420px, calc(100vh - var(--header-h) - 190px), 720px); min-height: 0; width: auto; max-width: 100%;
  aspect-ratio: 390 / 800; border-radius: 30px;
}
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.preview-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.preview-head small { color: var(--muted); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 #22c55e; animation: ping 2s infinite; }
.preview-device { border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 70px -40px rgb(var(--shadow) / .8); }
.preview-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.preview-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.preview-bar span:first-child { background: #ff5f57; }
.preview-bar span:nth-child(2) { background: #febc2e; }
.preview-bar span:nth-child(3) { background: #28c840; }
.preview-screen { position: relative; height: calc(100vh - var(--header-h) - 140px); min-height: 420px; overflow: hidden; background: var(--bg); }
.preview-screen iframe { position: absolute; top: 0; left: 0; width: 1280px; border: 0; transform-origin: 0 0; }

/* ----- กล่องยืนยัน ----- */
.confirm-dialog {
  width: min(400px, calc(100vw - 32px)); padding: 28px 24px 22px; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-align: center;
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / .45);
}
.confirm-dialog[open] { animation: panelIn .4s var(--ease-back); }
.confirm-dialog::backdrop { background: rgb(5 10 20 / .5); backdrop-filter: blur(3px); }
.confirm-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); }
.confirm-icon .icon { width: 28px; height: 28px; }
.confirm-dialog h2 { margin-top: 12px; font-size: 1.3rem; }
.confirm-dialog p { margin-top: 6px; color: var(--muted); }
.confirm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.confirm-actions .btn { flex: 1; }

/* ----- แจ้งบันทึกแล้ว ----- */
.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 300;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 600;
  box-shadow: 0 16px 30px -12px rgb(0 0 0 / .5);
  translate: -50% 20px; opacity: 0; pointer-events: none;
  transition: translate .4s var(--ease-back), opacity .3s;
}
.toast .icon { color: #22c55e; }
.toast.is-shown { translate: -50% 0; opacity: 1; }

/* ----- จอเล็ก ----- */
@media (max-width: 720px) {
  .layout-options { grid-template-columns: 1fr; }
  .layout-opt { padding: 10px; }
  .wf-pair { max-width: 320px; }
  .opt-check { top: 10px; right: 10px; }
  .theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .font-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-list { grid-template-columns: 1fr; }
  .set-actions .btn { flex: 1 1 200px; }
}
@media (max-width: 420px) {
  .lang-options { grid-template-columns: 1fr; }
  .font-options { grid-template-columns: 1fr; }
  .mode-options { gap: 8px; }
  .mode-opt { padding: 6px 6px 10px; }
  .mode-name { font-size: .88rem; }
  /* ซ่อนข้อความปุ่มกลับ แต่โปรแกรมอ่านหน้าจอยังอ่านได้ */
  .settings-page .header-tools .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .settings-page .header-tools .btn { padding-inline: 12px; }
}