/* AllGood Ad Factory — LIGHT theme (ครีม/แอมเบอร์) = ค่าเริ่มต้น
   ─────────────────────────────────────────────────────────────
   โหลด "หลัง" app.css และหลัง <style> ของแต่ละหน้าเสมอ (ลิงก์สุดท้ายใน <head>)
   กติกา: ทุก rule scope ด้วย :root:not(.dark) — theme.js เติม class .dark ที่
   <html> เมื่อผู้ใช้เลือกโหมดมืด แล้วธีมมืดเดิม (app.css + <style> ของหน้า)
   กลับมาทั้งชุดโดยไม่ต้องแตะไฟล์เดิมเลย

   เทคนิคที่ใช้ (แก้ HTML/JS เดิมไม่ได้ — MV3 ported verbatim):
   • !important = ทับ inline style เดิมที่ hardcode สีมืดไว้ในหน้า
   • [style*="#xxxxxx"]  = จับ inline style ที่เขียนตรงใน HTML / innerHTML
     (attribute เก็บ hex ตามตัวอักษรเดิม)
   • [style*="rgb(r, g, b)"] = จับ style ที่ JS เซ็ตผ่าน style.cssText —
     Chrome serialize hex เป็น rgb() ใน attribute (extension นี้รันบน Chrome เท่านั้น)
   • ของที่ "ตั้งใจมืด" ไม่แตะ: จอมือถือ live-preview (#phone),
     กล่อง log (#logBox = เทอร์มินัล ตัวหนังสือในนั้น JS ใส่สีอ่อนเอง) */

/* ========== 1) ตัวแปรหลัก (ทับ :root ของ app.css + ที่ dashboard/gallery/index
   ประกาศซ้ำใน <style> ตัวเอง — specificity :root:not(.dark) ชนะ :root) ========== */
:root:not(.dark){
  color-scheme:light;
  --bg:#FAF6EE; --card:#FFFFFF; --card2:#FBF7EF; --in:#F5EFE3;
  --line:#E5DCC8; --line2:#ECE4D2;
  --txt:#1F1B14; --dim:#8A8272; --dim2:#A39A87; --lbl:#6B6252;
  /* amber เข้มกว่าที่สเปกนิด (#F59E0B→#B45309) เพราะ --acc ถูกใช้เป็น "สีตัวหนังสือ"
     เกือบทุกที่ (ลิงก์/หัวข้อ/ตัวเลข) — #F59E0B บนครีมอ่านไม่ออก (contrast ~2.9)
     ส่วน gradient/ tint เหลืองของแบรนด์ hardcode ไว้แล้ว ไม่โดนกระทบ */
  --acc:#B45309;
  --acc2:#3B6CE7; --ok:#16A34A; --bad:#DC2626;
}

/* ========== 2) Global (คู่กับ app.css) ========== */
/* body: แสงเรือง radial เดิมเป็นฟ้า rgba(79,124,255,.10) บนกรมท่า — โหมดสว่าง
   เปลี่ยนเป็นแสงแอมเบอร์จางๆ บนครีม (dashboard/gallery ประกาศ body ซ้ำ ก็ชนะได้
   เพราะ selector นี้ specificity สูงกว่า + ไฟล์มาหลัง) */
:root:not(.dark) body{
  background:radial-gradient(1200px 600px at 80% -10%,rgba(245,158,11,.07),transparent 60%),var(--bg);
}
/* sidebar: เดิมพื้นกรมท่า rgba(15,21,38,.85) + เส้น #1e2740 hardcode */
:root:not(.dark) .sidebar{background:rgba(255,252,245,.92);border-right-color:var(--line)}
:root:not(.dark) .nav-item{color:var(--lbl)}                       /* เดิม #c7cfe8 (อ่อนบนมืด) */
:root:not(.dark) .nav-item:hover{background:var(--in)}             /* เดิม #141b30 */
:root:not(.dark) .nav-item.on{color:#92400E;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5)}  /* เดิมตัวหนังสือ #ffd873 */
@media(max-width:820px){
  :root:not(.dark) .sidebar{border-bottom-color:var(--line)}       /* เดิม #1e2740 (มือถือ) */
}
/* chip เลือกอยู่: เดิมตัวหนังสือ #ffd873 (เหลืองอ่อนบนมืด) → น้ำตาลแอมเบอร์เข้ม */
:root:not(.dark) .chip.on{color:#92400E}
/* 🔑 แถบสถานะ license (ท้าย sidebar): เดิม base ใน app.css เป็นสี tint บนพื้นมืด
   (.lic-ok ใช้ var(--ok) ฯลฯ) → โหมดสว่างพื้น tint จางเกินไป สลับเป็นพาสเทล+ตัวหนังสือเข้ม
   (โทนเดียวกับ .testbox.ok/.bad ด้านล่าง) */
:root:not(.dark) .lic-ok{background:#e7f6e7;color:#1a7f37}
:root:not(.dark) .lic-warn{background:#fff3cd;color:#8a6d00}
:root:not(.dark) .lic-off{background:#ffe8d9;color:#b4500a}
:root:not(.dark) .lic-bad{background:#fde8e8;color:#b42318}
/* badge ฟ้า: เดิมตัวหนังสือ #8fb0ff (ฟ้าอ่อนบนมืด) บน tint ฟ้าจาง */
:root:not(.dark) .badge-blue{color:#2B55D6}
/* textarea ในการ์ดวิดีโอ (app.css .var textarea): เดิมพื้น #0b1020 + ตัวหนังสือ var(--txt)
   → โหมดสว่าง txt เกือบดำบนกรมท่า = อ่านไม่ออก */
:root:not(.dark) .var textarea{background:var(--in)}

/* ── error banner กลาง (index/gallery = .err{background:#3a1520;...} ใน <style>,
   dashboard = inline บน div#err) — ทั้ง 3 หน้าใช้ id="err" เหมือนกัน
   (จงใจใช้ #err ไม่ใช่ .err เพราะหน้า products/scripts ใช้ class .err
   เป็นแค่สีตัวหนังสือ ไม่ใช่กล่อง) */
:root:not(.dark) #err{background:#FDECEC!important;border-color:#F0B4B4!important;color:#9F1D1D!important}

/* ── inline style มืดที่โผล่ซ้ำหลายหน้า (topbar ของ index/gallery/dashboard
   เขียน inline เหมือนกันทั้ง 3 หน้า) ── */
/* แถบหัวเพจ: เดิม background:rgba(15,21,38,.7)+blur */
:root:not(.dark) [style*="rgba(15,21,38"]{background-color:rgba(255,252,245,.85)!important}
/* เส้นขอบกรมท่า #1e2740 (border หัวเพจ + border-top ของ footNav ใน index) */
:root:not(.dark) [style*="#1e2740"]{border-color:var(--line)!important}
/* ชิพ/ปุ่มพื้นกรมท่า #141b30 (กล่องเครดิต, ปุ่มโหมดหน้าเดียว —
   ปุ่มเฟือง⚙️ เปลี่ยนเป็น <a> ใช้ var(--card2) แล้ว ไม่ต้องอาศัย rule นี้
   แตะแค่สีพื้นผ่าน CSS ไม่ยุ่ง markup/พฤติกรรม) */
:root:not(.dark) [style*="#141b30"]{background-color:var(--card)!important}
/* พื้นช่องมืด #12192e (label กล่องติ๊กใน STEP3 ×3, แถวเสียงโคลนใน settings —
   ตัวหนังสือข้างในเป็น var(--lbl)/var(--txt) พอสว่างแล้วกลายเป็นเกือบดำบนกรมท่า)
   + ฟอร์ม rgb() สำหรับแถวเสียง/ปุ่ม ▶ ที่ index.js เซ็ตผ่าน cssText */
:root:not(.dark) [style*="#12192e"],
:root:not(.dark) [style*="rgb(18, 25, 46)"]{background-color:var(--in)!important}
/* เส้นขอบกรมท่า #2a3352 (label เดียวกัน, <hr> ใน settings modal, วงเลขสเต็ป)
   + ฟอร์ม rgb() ของแถวเสียง */
:root:not(.dark) [style*="#2a3352"],
:root:not(.dark) [style*="rgb(42, 51, 82)"]{border-color:var(--line)!important}
/* เส้นประ/ขอบ #3a466c (ปุ่ม ＋เพิ่มคลิป, ปุ่มติ๊กเสียง) + rgb() form — ใช้เฉด
   warm เข้มกว่า --line หน่อยให้เส้นประยังเห็น */
:root:not(.dark) [style*="#3a466c"],
:root:not(.dark) [style*="rgb(58, 70, 108)"]{border-color:#D6C9AC!important}
/* ขอบ #2f3a5c (ลิงก์ ⬇โหลด ใน gallery.js/index.js, กรอบ clip-thumb) + rgb() form */
:root:not(.dark) [style*="#2f3a5c"],
:root:not(.dark) [style*="rgb(47, 58, 92)"]{border-color:var(--line)!important}
/* พื้น #0c1122 (ช่องรูป placeholder 📦 ใน cook.js/project-ui.js)
   — ยกเว้น #logBox ที่ตั้งใจคงมืดแบบเทอร์มินัล */
:root:not(.dark) [style*="#0c1122"]:not(#logBox){background-color:var(--in)!important}

/* ── ตัวหนังสือสีอ่อน (ออกแบบมาไว้บนพื้นมืด) ที่ inline อยู่ใน HTML/innerHTML —
   ยกเว้นใน #logBox (คงมืด) และของใน #phone ไม่โดนเพราะใช้คนละสี ── */
:root:not(.dark) [style*="#c7cfe8"]:not(#logBox *){color:var(--dim)!important}      /* ปุ่ม topbar, usageBox */
:root:not(.dark) [style*="#8b94b8"]{color:var(--dim)!important}                     /* ลิงก์ ▶ ฟังเพลง, วงเลขสเต็ป */
:root:not(.dark) [style*="#7ee6a8"]:not(#logBox *){color:#15803D!important}         /* ✅ เสร็จแล้ว!, วงสเต็ปผ่านแล้ว */
:root:not(.dark) [style*="#4ade80"]{color:#15803D!important}                        /* ป้าย 🇹🇭 เสียงไทย ในแถวเสียง */
:root:not(.dark) [style*="color:#ffc53d"]{color:#92400E!important}                  /* ⚠️ เตือนเสียงไม่ใช่ไทย */
:root:not(.dark) [style*="#ff8f8f"]{color:var(--bad)!important}                     /* ปุ่มลบ 🗑/✕ บนการ์ดสว่าง */
:root:not(.dark) [style*="#ff9b9b"]{color:var(--bad)!important}                     /* ปุ่ม ✋ยกเลิก / 🗑 ลบบท */
:root:not(.dark) [style*="#ffb3bb"]{color:var(--bad)!important}                     /* ปุ่ม 🗑 ลบงานนี้ (gallery) */
:root:not(.dark) [style*="#8fb0ff"]{color:#2B55D6!important}                        /* เลขลำดับบท (ฟ้าอ่อน) */
:root:not(.dark) [style*="#5c2a35"]{border-color:#F0B4B4!important}                 /* ขอบปุ่มลบงาน (gallery) */

/* ========== 3) index.html — สร้างคลิป AI ========== */
/* skeleton loader: เดิม gradient กรมท่า #222b47/#2e3960 */
:root:not(.dark) .skel{background:linear-gradient(90deg,#EFE8D8,#F8F3E7,#EFE8D8);background-size:800px 100%}
/* กล่องผลทดสอบ API key: เดิมโทนมืด #12301f / #3a1520 */
:root:not(.dark) .testbox.ok{background:#EAF4EC;border-color:#9BD4AE;color:#166534}
:root:not(.dark) .testbox.bad{background:#FDECEC;border-color:#F0B4B4;color:#9F1D1D}
/* สเต็ปเปอร์ (index.js เซ็ตสีผ่าน cssText → จับด้วยฟอร์ม rgb):
   ตัวหนังสือปุ่มเดิม #e8ecf8 (ปัจจุบัน) / #a9b2d6 (ผ่านแล้ว) / #6f79a0 (ยังไม่ถึง)
   = ขาว/ฟ้าอ่อนบนพื้นสว่าง มองไม่เห็น */
:root:not(.dark) #stepper button[style*="rgb(232, 236, 248)"]{color:var(--txt)!important}
:root:not(.dark) #stepper button[style*="rgb(169, 178, 214)"]{color:var(--lbl)!important}
:root:not(.dark) #stepper button[style*="rgb(111, 121, 160)"]{color:var(--dim2)!important}
/* วงเลขสเต็ปที่ยังไม่ถึง: เดิมพื้น #1a2138 (innerHTML → hex ตรงตัว) */
:root:not(.dark) #stepper span[style*="#1a2138"]{background:var(--in)!important;color:var(--dim)!important}
/* เส้นเชื่อมระหว่างสเต็ป: เดิม #1e2740 (cssText → rgb) */
:root:not(.dark) #stepper span[style*="rgb(30, 39, 64)"]{background:var(--line)!important}
/* ปุ่ม ▶ ฟังตัวอย่างเสียง: พื้นถูกสลับเป็น --in แล้ว (rule #12192e ด้านบน)
   แต่ตัวหนังสือเดิม #ffc53d (เหลืองบนมืด) — บนครีมจาง → แอมเบอร์เข้ม */
:root:not(.dark) #voiceList button[style*="rgb(18, 25, 46)"]{color:#92400E!important}
/* หมายเหตุ: #phone (จอมือถือ preview), #phoneBg, #pvHeadline/#pvSub (ขาวบนวิดีโอ),
   #logBox (เทอร์มินัล) ตั้งใจคงมืด — ไม่มี override */

/* ========== 4) dashboard.html ========== */
/* ปุ่มลิงก์ navlink: เดิมพื้น #141b30 + ตัวหนังสือ #c7cfe8 ใน <style> ของหน้า */
:root:not(.dark) .navlink{background:var(--card);color:var(--txt)}

/* ========== 5) gallery.html ========== */
/* ป้ายงานไม่ครบ: เดิมพื้น #3a1520 ตัวหนังสือ #ffb3bb */
:root:not(.dark) .b-inc{background:#FDECEC;color:#B91C1C}
/* ป้าย batch: เดิมตัวหนังสือ #8fb0ff บน tint ฟ้า */
:root:not(.dark) .b-batch{color:#2B55D6}

/* ========== 7) scripts.html — เจนบท ========== */
/* thumbnail placeholder สินค้า: เดิมพื้น #22283f */
:root:not(.dark) .pcell .pthumb{background:#EDE5D3}
/* ป้ายสถานะบท: เดิม idea=#ffd873, real=#7fe0a1/#3ddc84 (อ่อนบนมืด) */
:root:not(.dark) .tag.idea{color:#92400E}
:root:not(.dark) .tag.real{color:#15803D;border-color:var(--ok)}

/* ========== 8) products.html — สินค้า ========== */
/* thumbnail placeholder: เดิมพื้น #22283f */
:root:not(.dark) .prod .thumb{background:#EDE5D3}

/* ========== 9) cook.html ==========
   หน้านี้ใช้ตัวแปรล้วน ไม่มีสีมืด hardcode — ตัวแปรข้อ 1 จัดการครบแล้ว */
