/* ============================================================
   codepg.dev — ระบบธีมกลาง (Light / Dark) + ปรับขนาดตัวอักษร
   โหลดหลัง <style> ของแต่ละหน้า จึงเขียนทับค่าเดิมได้
   ออกแบบให้อ่านง่ายสำหรับผู้อบรมทุกวัย (คอนทราสต์สูง โทนทางการ)
   ============================================================ */

/* ---------- ตัวแปรพื้นผิว/ข้อความ (ค่าเริ่มต้น = โหมดมืด เหมือนเดิมทุกประการ) ---------- */
:root{
  --surface-1: rgba(255,255,255,.04);
  --surface-2: #15122b;
  --surface-header: rgba(33,29,59,.92);
  --text-2: #d9d3ea;
  --text-ok: #eafffb;
  --text-danger: #ff9db5;
  --text-hint: #ffe9a8;
  --cp-zoom: 1;
}

/* ---------- ขนาดตัวอักษรทั้งเว็บ (ปุ่ม ก- / ก+) ---------- */
html{ zoom: var(--cp-zoom, 1); }

/* ============================================================
   โหมดสว่าง (ค่าเริ่มต้นของเว็บ) — พื้นขาว ตัวอักษรเข้ม อ่านง่าย
   ============================================================ */
html[data-theme="light"]{
  /* พื้นหลัง / พื้นผิว */
  --grape: #f3f5f9;
  --grape-soft: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #eef1f7;
  --surface-header: rgba(255,255,255,.96);
  /* ข้อความ */
  --paper: #1a2030;
  --muted: #515a70;
  --text-2: #3f475c;
  --text-ok: #065f46;
  --text-danger: #b91c1c;
  --text-hint: #7c4a03;
  --line: rgba(20,28,48,.14);
  /* สีเน้น — เข้มขึ้นเพื่อให้อ่านออกบนพื้นขาว */
  --sun:#a16207; --mint:#0f766e; --pink:#be185d; --peri:#4338ca; --gold:#a16207;
  --cv:#7e22ce; --gd:#047857; --gpt:#047857; --flow:#1d4ed8;
  --gem:#4f46e5; --gem-2:#6d28d9;
  --img:#c2410c; --img-2:#a16207;
  --cine:#b91c1c; --cine-2:#c2410c;
  --suno:#a21caf; --suno-2:#be185d;
  --song:#be185d; --song-2:#a16207;
  --okmd:#0369a1; --okmd-2:#0369a1;
  --aqua:#0369a1; --sky:#0369a1; --tg:#0369a1;
  --green:#047857; --coral:#c2410c; --n8n:#be123c;
  --cy:#0e7490; --violet:#6d28d9; --lime:#15803d; --fb:#1554b8;
}

/* พื้นหลังหน้า — ตัดไล่เฉดสีเรืองแสงออก ให้ดูสะอาดเป็นทางการ */
html[data-theme="light"] body{
  background: var(--grape);
  color: var(--paper);
}
/* หน้าแรก: ใช้ภาพพื้นหลังโทนสว่าง + ม่านขาวเพื่อให้ตัวอักษรเข้มอ่านง่าย */
html[data-theme="light"] body::before{
  display:block;
  background-image:url('images/home-bg-light.jpg');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
html[data-theme="light"] body::after{
  background:
    radial-gradient(1100px 620px at 15% -8%, rgba(255,255,255,.60), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(248,250,253,.88) 42%, rgba(243,245,249,.97) 100%);
}
@media (max-width:720px){
  /* จอแคบ: เลื่อนเฟรมให้เห็นคน และเพิ่มความทึบของม่านให้อ่านง่ายขึ้น */
  html[data-theme="light"] body::before{ background-position:26% top; }
  html[data-theme="light"] body::after{
    background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(248,250,253,.90) 38%, rgba(243,245,249,.98) 100%);
  }
}

/* หัวเว็บ */
html[data-theme="light"] header{
  background: var(--surface-header);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}

/* การ์ด/กล่องเนื้อหา — ขาวสะอาด ขอบบาง เงาอ่อน */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .mission:not(.done),
html[data-theme="light"] .pcard:not(.hi),
html[data-theme="light"] .prov,
html[data-theme="light"] .work,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .qmodal-box,
html[data-theme="light"] .menu-pop,
html[data-theme="light"] .howto>li{
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
html[data-theme="light"] .card{ backdrop-filter:none; -webkit-backdrop-filter:none; }
/* กล่องที่มีสถานะพิเศษ: พื้นขาวเหมือนกัน แต่ปล่อยให้ขอบ/ไฮไลต์เดิมทำงานต่อ */
html[data-theme="light"] .mission.done,
html[data-theme="light"] .pcard.hi{ background:#ffffff; }
html[data-theme="light"] .card:hover,
html[data-theme="light"] .prov:hover,
html[data-theme="light"] .work:hover{ box-shadow: 0 10px 26px rgba(16,24,40,.12); }

/* กล่องโค้ด/พื้นผิวจม */
html[data-theme="light"] .pc-body,
html[data-theme="light"] .prompt-pre,
html[data-theme="light"] .flowbox,
html[data-theme="light"] .lyr,
html[data-theme="light"] .quiz-choice,
html[data-theme="light"] .role,
html[data-theme="light"] .fwc,
html[data-theme="light"] .fcard,
html[data-theme="light"] .dlcard,
html[data-theme="light"] .song,
html[data-theme="light"] .shot,
html[data-theme="light"] .mono,
html[data-theme="light"] .cmd,
html[data-theme="light"] .bubble,
html[data-theme="light"] pre{
  background: var(--surface-2);
  color: var(--paper);
}
html[data-theme="light"] .mono{ color: var(--mint); }

/* ช่องกรอกข้อมูล */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .search{
  background:#ffffff; color:var(--paper); border-color:var(--line);
}
html[data-theme="light"] ::placeholder{ color:#8a90a3; }

/* ปุ่มกลาง ๆ / แท็บที่ยังไม่เลือก
   สำคัญ: ต้อง :not(...) สถานะ active/done ไว้ ไม่งั้นจะทับพื้นหลังสีเน้นจนตัวอักษรขาวบนขาว */
html[data-theme="light"] .btn-home,
html[data-theme="light"] .btn-reset,
html[data-theme="light"] .tab:not(.active):not(.done),
html[data-theme="light"] .chip:not(.active),
html[data-theme="light"] .q-btn.ghost,
html[data-theme="light"] .copy,
html[data-theme="light"] .avatar,
html[data-theme="light"] .ptab:not(.active){
  background:#ffffff; color:var(--paper); border:1px solid var(--line);
}
/* แท็บที่ทำเสร็จแล้ว: พื้นขาว แต่คงขอบสีมิ้นต์ไว้ */
html[data-theme="light"] .tab.done:not(.active){ background:#ffffff; color:var(--paper); }
html[data-theme="light"] .menu-item{ color:var(--paper); }
html[data-theme="light"] .menu-item:hover{ background:#eef1f7; }

/* ตัวเลขนับใน chip / แท็บ (เฉพาะตัวที่ยังไม่ถูกเลือก) */
html[data-theme="light"] .chip:not(.active) .cnt,
html[data-theme="light"] .tab:not(.active):not(.done) .num{ background:#e6eaf2; color:#404a60; }

/* ตัวหนังสือบนปุ่มสีเน้น — บังคับขาวเพื่อคอนทราสต์ (รายชื่อสร้างอัตโนมัติจากทุกหน้า) */
html[data-theme="light"] :is(
  .ac-item.sel, .btn-cf, .btn-done, .btn-done.is-done, .btn-figma, .btn-live, .btn-menu,
  .btn-open, .btn-quiz, .btn-run, .btn-slide, .btn.go, .btn.green, .btn.n8n, .btn.primary,
  .btn.tg, .chip.active, .chip.ready b, .cta .go, .dlbtn, .dlbtn.alt, .done-btn,
  .done-btn.is-done, .dot.code, .dot.eye, .gate-btn, .howto>li::before, .live .pulse,
  .lockbadge, .m-cloud, .m-copy, .m-dl, .mcard.bonus .mnum, .mission .num, .mission.done .num,
  .mnum, .msg.ai .av, .msg.user .av, .pc-copy, .pc-no, .posterwrap .dl, .ptab.active, .q-btn,
  .rhead .cnt, .send, .shot .sn, .shot.feature .sn, .song .dl, .step .num, .tab.active,
  .tab.done .num, .tester .send, .toast, .vidwrap .dl, .visit, .wk-btn.open, .wk-type, tr.win .rk
),
html[data-theme="light"] :is(
  .btn-menu, .btn-slide, .btn-quiz, .done-btn, .q-btn, .pc-copy, .tab.active, .chip.active,
  .mission .num, .toast, .visit, .send, .gate-btn
) *{
  color:#ffffff !important;
}
/* แถบเลื่อน/สวิตช์ ไม่ต้องบังคับสีตัวอักษร */
html[data-theme="light"] .switch input:checked + .track,
html[data-theme="light"] .score-toggle input:checked + .sw{ color:inherit; }

/* กล่องแจ้งเตือน/ไฮไลต์ — โทนอ่อนอ่านง่าย */
html[data-theme="light"] .warn,
html[data-theme="light"] .note-sec,
html[data-theme="light"] .banner,
html[data-theme="light"] .g-note,
html[data-theme="light"] .pnote{
  background:#fff8e6; border-color:#f2d391; color:#4a3a12;
}
html[data-theme="light"] .warn b,
html[data-theme="light"] .note-sec b,
html[data-theme="light"] .banner b,
html[data-theme="light"] .g-note b{ color:#8a5a00; }
html[data-theme="light"] .warn.red{ background:#fef2f2; border-color:#f5b5b5; color:#5b1a1a; }
html[data-theme="light"] .warn.red b{ color:#b91c1c; }
html[data-theme="light"] .goal{ background:#f2f6ff; border-color:#c9dbff; }
html[data-theme="light"] .quote{ background:#f6f4ff; }

/* คำใบ้ (details.hint) */
html[data-theme="light"] details.hint p{ color:var(--text-hint); }
html[data-theme="light"] details.hint summary{ color:#8a5a00; }

/* แบบทดสอบ */
html[data-theme="light"] .quiz-choice.correct{ background:#e7f8f2; border-color:#0f766e; color:#065f46; }
html[data-theme="light"] .quiz-choice.wrong{ background:#fdeaee; border-color:#be185d; color:#8c1338; }

/* ตาราง */
html[data-theme="light"] thead th{ background:#eef1f7; }
html[data-theme="light"] tbody tr.win{ background:#fff6d9; }

/* ลดแสงเรือง/เงาจัด ให้ดูเป็นทางการ */
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-menu,
html[data-theme="light"] .tab.active,
html[data-theme="light"] .chip.active,
html[data-theme="light"] .done-btn,
html[data-theme="light"] .q-btn,
html[data-theme="light"] .pc-copy,
html[data-theme="light"] .toast{ box-shadow: 0 2px 6px rgba(16,24,40,.12); }
html[data-theme="light"] .logo{ filter:none; }
html[data-theme="light"] .modal{ background: rgba(16,24,40,.45); }
html[data-theme="light"] .qmodal,
html[data-theme="light"] .pmodal,
html[data-theme="light"] .wm-overlay{ background: rgba(16,24,40,.45); }

/* ---------- อ่านง่ายขึ้นทั้งสองโหมด: ตัวอักษรขั้นต่ำ + ระยะบรรทัด ---------- */
body{ line-height:1.75; }
.panel p, .mission li, .clist li, .howto p, .guide li{ font-size:15px; }
.note, .panel .note, .pc-meta, .pc-short, .shot-th, .scene-meta{ font-size:14px !important; }
td, th{ font-size:14.5px; }

/* ---------- หน้าเกมจับไม้ (ออกแบบเป็นโทนสว่างอยู่แล้ว) — ทำโหมดมืดให้เข้าชุด ---------- */
html[data-page="stick"][data-theme="dark"]{
  --ink:#f3f1fa; --card-bg:#2a2545; --muted:#a9a3c4; --line:#3a3358;
}
html[data-page="stick"][data-theme="dark"] body{
  background:linear-gradient(160deg,#1b1834 0%, #211d3b 45%, #241b33 100%);
}
html[data-page="stick"][data-theme="dark"] input.t,
html[data-page="stick"][data-theme="dark"] .role-btn{ background:#221d3c; color:var(--ink); }
html[data-page="stick"][data-theme="dark"] .chip{ background:#2f2950; }
html[data-page="stick"][data-theme="dark"] .chip b{ background:#3c3564; color:#cfc9e6; }
html[data-page="stick"][data-theme="dark"] .chip.ready{ background:#1f3f34; border-color:#2f6b52; }
html[data-page="stick"][data-theme="dark"] thead th{ background:#2f2950; }
html[data-page="stick"][data-theme="dark"] .btn.ghost{ background:#332d55; color:#c6c0e0; }
html[data-page="stick"][data-theme="dark"] .btn.ghost.warn{ background:#43222b; }
html[data-page="stick"][data-theme="dark"] .roomtag{ background:#2f2950; }
html[data-page="stick"][data-theme="dark"] .score-toggle{ background:#2a2545; color:#f0c98a; }

/* ============================================================
   แถบเครื่องมือ: ขนาดตัวอักษร + สลับธีม (มุมขวาล่าง)
   ============================================================ */
.cp-bar{
  position:fixed; right:14px; bottom:14px; z-index:9999;
  display:flex; align-items:center; gap:6px;
  background:var(--grape-soft); border:1px solid var(--line);
  border-radius:999px; padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  font-family:'Kanit','Sarabun',sans-serif;
}
html[data-theme="light"] .cp-bar{ background:#ffffff; box-shadow:0 6px 20px rgba(16,24,40,.18); }
.cp-bar button{
  width:40px; height:40px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--paper);
  font-family:inherit; font-weight:700; font-size:15px; line-height:1;
  display:grid; place-items:center; transition:.15s;
}
.cp-bar button:hover{ background:rgba(125,125,155,.16); }
.cp-bar button:active{ transform:scale(.94); }
.cp-bar .cp-size{ font-size:12px; color:var(--muted); min-width:42px; text-align:center; font-weight:600; }
.cp-bar .cp-sep{ width:1px; height:24px; background:var(--line); margin:0 2px; }
@media (max-width:520px){
  .cp-bar{ right:10px; bottom:10px; padding:5px; gap:4px; }
  .cp-bar button{ width:36px; height:36px; font-size:14px; }
  .cp-bar .cp-size{ display:none; }
}
@media print{ .cp-bar{ display:none; } }