/* ============================================================
   theme-cms.css — ธีมสำเร็จรูปของเว็บ ZONE KUN (แยกจากไฟล์หลัก)
   วิธีทำงาน: แอดมินเลือกธีมที่ตั้งค่า > "สไตล์ธีมเว็บไซต์" -> เก็บใน Firebase -> ผู้เข้าชมทุกคนเห็นตามแอดมิน
   ตัวธีมทำงานโดยตั้ง attribute  data-site-theme="<id>"  บน <html> แล้วไฟล์นี้เขียนทับ "ตัวแปรสี" (CSS variables) ของเว็บเท่านั้น
   ไม่ยุ่งกับเลย์เอาต์/ตัวหนังสือ/ขนาดใดๆ — ธีม "default" = ไม่มี attribute = หน้าตาเดิมของเว็บเป๊ะ
   รองรับทั้งโหมดสว่าง (data-theme="light") และมืด (data-theme="dark") ทุกธีม
   หมายเหตุ: สีอิสระที่แอดมินตั้งไว้เอง (ตั้งค่า > ธีมสีเว็บไซต์) จะ "ทับ" ธีมนี้เฉพาะ 8 ตัวแปรหลัก (สีเน้น/พื้นหลัง/ตัวอักษร)
   ไฟล์นี้สร้างอัตโนมัติจากสเปกชุดเดียวกับ theme-cms.js และผ่านการตรวจ contrast (WCAG AA) ทุกธีมแล้ว
   ============================================================ */

/* ---- sakura : ซากุระ ---- */
html[data-site-theme="sakura"][data-theme="light"]{
  --zk-0:#FFFFFF;--zk-1:#FAF9FA;--zk-2:#F6F4F5;--zk-3:#E8E3E5;--zk-4:#D8CFD2;--zk-5:#AC9AA1;--zk-6:#7E6770;--zk-7:#5A494F;--zk-8:#46393E;--zk-9:#2A2225;--zk-10:#191516;--zk-11:#0B090A;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(255,255,255,0.85), transparent 30%), radial-gradient(circle at 80% 12%, rgba(173,31,83,0.1), transparent 34%), radial-gradient(circle at 50% 94%, rgba(173,31,83,0.08), transparent 44%), linear-gradient(135deg,#FEF8FA 0%,#F7E8EE 52%,#EFD7E0 100%);
  --grid-line:rgba(173,31,83,0.05);
  --text:#311C23;
  --head:#1B0D13;
  --muted:#503A42;
  --faint:#816A72;
  --line:rgba(121,21,58,0.16);
  --chip:rgba(173,31,83,0.09);
  --btn:linear-gradient(180deg,#D92668 0%,#79153A 100%);
  --btn-text:#FFFFFF;
  --btn-rim:rgba(255,255,255,.22);
  --head-grad:linear-gradient(120deg,#1B0D13 0%,#79153A 48%,#D92668 100%);
  --accent:#AD1F53;
  --accent-text:#FFFFFF;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#EAB8CA 42%,#B46482 100%);
  --shadow-soft:0 18px 50px rgba(121,21,58,0.14);
  --shadow-deep:0 30px 80px rgba(121,21,58,0.22);
  --read-paper-bd:rgba(121,21,58,0.12);
  --read-paper-shadow:0 10px 28px rgba(121,21,58,0.12);
}
html[data-site-theme="sakura"][data-theme="dark"]{
  --zk-0:#000000;--zk-1:#0B090A;--zk-2:#1A1416;--zk-3:#2B2225;--zk-4:#3F3136;--zk-5:#5B484F;--zk-6:#987C86;--zk-7:#AE98A0;--zk-8:#D9CED2;--zk-9:#E9E2E5;--zk-10:#F6F4F4;--zk-11:#FBF9FA;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(243,145,181,0.13), transparent 27%), radial-gradient(circle at 74% 18%, rgba(243,145,181,0.08), transparent 32%), radial-gradient(circle at 50% 92%, rgba(0,0,0,.6), transparent 42%), linear-gradient(135deg,#281A1F 0%,#1B1014 42%,#0D0709 100%);
  --grid-line:rgba(243,145,181,0.045);
  --text:#F1EAEC;
  --head:#FBF9FA;
  --muted:#DDD0D4;
  --faint:#A8949C;
  --line:rgba(243,145,181,0.18);
  --chip:rgba(243,145,181,0.13);
  --btn:linear-gradient(180deg,#F391B5 0%,#EC5189 100%);
  --btn-text:#0A0A0A;
  --btn-rim:rgba(255,255,255,.45);
  --head-grad:linear-gradient(120deg,#FFFFFF 0%,#F391B5 48%,#EC5189 100%);
  --accent:#F391B5;
  --accent-text:#0A0A0A;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#E6B3C5 42%,#95506A 100%);
  --shadow-soft:0 18px 60px rgba(0,0,0,.42);
  --shadow-deep:0 32px 100px rgba(0,0,0,.58);
  --read-paper:#261D20;
  --read-paper-text:#F3EDEF;
  --read-paper-bd:rgba(243,145,181,0.14);
}
/* ---- ocean : มหาสมุทร ---- */
html[data-site-theme="ocean"][data-theme="light"]{
  --zk-0:#FFFFFF;--zk-1:#F9FAFA;--zk-2:#F4F5F6;--zk-3:#E3E6E8;--zk-4:#CFD4D8;--zk-5:#9AA4AC;--zk-6:#67747E;--zk-7:#49525A;--zk-8:#394046;--zk-9:#22272A;--zk-10:#151719;--zk-11:#090A0B;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(255,255,255,0.85), transparent 30%), radial-gradient(circle at 80% 12%, rgba(24,91,149,0.1), transparent 34%), radial-gradient(circle at 50% 94%, rgba(24,91,149,0.08), transparent 44%), linear-gradient(135deg,#F8FBFE 0%,#E8F0F7 52%,#D7E4EF 100%);
  --grid-line:rgba(24,91,149,0.05);
  --text:#1C2731;
  --head:#0D151B;
  --muted:#3A4650;
  --faint:#6A7681;
  --line:rgba(16,59,96,0.16);
  --chip:rgba(24,91,149,0.09);
  --btn:linear-gradient(180deg,#1F76C1 0%,#103B60 100%);
  --btn-text:#FFFFFF;
  --btn-rim:rgba(255,255,255,.22);
  --head-grad:linear-gradient(120deg,#0D151B 0%,#103B60 48%,#1F76C1 100%);
  --accent:#185B95;
  --accent-text:#FFFFFF;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#B8D3EA 42%,#648FB4 100%);
  --shadow-soft:0 18px 50px rgba(16,59,96,0.14);
  --shadow-deep:0 30px 80px rgba(16,59,96,0.22);
  --read-paper-bd:rgba(16,59,96,0.12);
  --read-paper-shadow:0 10px 28px rgba(16,59,96,0.12);
}
html[data-site-theme="ocean"][data-theme="dark"]{
  --zk-0:#000000;--zk-1:#090A0B;--zk-2:#14171A;--zk-3:#22272B;--zk-4:#31393F;--zk-5:#48525B;--zk-6:#7C8B98;--zk-7:#98A4AE;--zk-8:#CED4D9;--zk-9:#E2E6E9;--zk-10:#F4F5F6;--zk-11:#F9FAFB;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(125,188,242,0.13), transparent 27%), radial-gradient(circle at 74% 18%, rgba(125,188,242,0.08), transparent 32%), radial-gradient(circle at 50% 92%, rgba(0,0,0,.6), transparent 42%), linear-gradient(135deg,#1A2228 0%,#10161B 42%,#070A0D 100%);
  --grid-line:rgba(125,188,242,0.045);
  --text:#EAEDF1;
  --head:#F9FAFB;
  --muted:#D0D7DD;
  --faint:#949FA8;
  --line:rgba(125,188,242,0.18);
  --chip:rgba(125,188,242,0.13);
  --btn:linear-gradient(180deg,#7DBCF2 0%,#3C9AEC 100%);
  --btn-text:#0A0A0A;
  --btn-rim:rgba(255,255,255,.45);
  --head-grad:linear-gradient(120deg,#FFFFFF 0%,#7DBCF2 48%,#3C9AEC 100%);
  --accent:#7DBCF2;
  --accent-text:#0A0A0A;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#B3CEE6 42%,#507595 100%);
  --shadow-soft:0 18px 60px rgba(0,0,0,.42);
  --shadow-deep:0 32px 100px rgba(0,0,0,.58);
  --read-paper:#1D2126;
  --read-paper-text:#EDF0F3;
  --read-paper-bd:rgba(125,188,242,0.14);
}
/* ---- mint : มิ้นต์ ---- */
html[data-site-theme="mint"][data-theme="light"]{
  --zk-0:#FFFFFF;--zk-1:#F9FAFA;--zk-2:#F4F6F5;--zk-3:#E3E8E7;--zk-4:#CFD8D6;--zk-5:#9AACA7;--zk-6:#677E78;--zk-7:#495A55;--zk-8:#394643;--zk-9:#222A28;--zk-10:#151918;--zk-11:#090B0B;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(255,255,255,0.85), transparent 30%), radial-gradient(circle at 80% 12%, rgba(29,114,90,0.1), transparent 34%), radial-gradient(circle at 50% 94%, rgba(29,114,90,0.08), transparent 44%), linear-gradient(135deg,#F8FEFC 0%,#E8F7F3 52%,#D7EFE8 100%);
  --grid-line:rgba(29,114,90,0.05);
  --text:#1C312B;
  --head:#0D1B17;
  --muted:#3A504A;
  --faint:#6A817A;
  --line:rgba(16,65,51,0.16);
  --chip:rgba(29,114,90,0.09);
  --btn:linear-gradient(180deg,#218367 0%,#104133 100%);
  --btn-text:#FFFFFF;
  --btn-rim:rgba(255,255,255,.22);
  --head-grad:linear-gradient(120deg,#0D1B17 0%,#104133 48%,#218367 100%);
  --accent:#1D725A;
  --accent-text:#FFFFFF;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#B8EADC 42%,#64B49E 100%);
  --shadow-soft:0 18px 50px rgba(16,65,51,0.14);
  --shadow-deep:0 30px 80px rgba(16,65,51,0.22);
  --read-paper-bd:rgba(16,65,51,0.12);
  --read-paper-shadow:0 10px 28px rgba(16,65,51,0.12);
}
html[data-site-theme="mint"][data-theme="dark"]{
  --zk-0:#000000;--zk-1:#090B0B;--zk-2:#141A18;--zk-3:#222B28;--zk-4:#313F3B;--zk-5:#485B56;--zk-6:#7C9890;--zk-7:#98AEA8;--zk-8:#CED9D6;--zk-9:#E2E9E7;--zk-10:#F4F6F5;--zk-11:#F9FBFA;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(108,229,195,0.13), transparent 27%), radial-gradient(circle at 74% 18%, rgba(108,229,195,0.08), transparent 32%), radial-gradient(circle at 50% 92%, rgba(0,0,0,.6), transparent 42%), linear-gradient(135deg,#1A2824 0%,#101B18 42%,#070D0C 100%);
  --grid-line:rgba(108,229,195,0.045);
  --text:#EAF1EF;
  --head:#F9FBFA;
  --muted:#D0DDD9;
  --faint:#94A8A2;
  --line:rgba(108,229,195,0.18);
  --chip:rgba(108,229,195,0.13);
  --btn:linear-gradient(180deg,#6CE5C3 0%,#2FDAAA 100%);
  --btn-text:#0A0A0A;
  --btn-rim:rgba(255,255,255,.45);
  --head-grad:linear-gradient(120deg,#FFFFFF 0%,#6CE5C3 48%,#2FDAAA 100%);
  --accent:#6CE5C3;
  --accent-text:#0A0A0A;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#B3E6D7 42%,#509582 100%);
  --shadow-soft:0 18px 60px rgba(0,0,0,.42);
  --shadow-deep:0 32px 100px rgba(0,0,0,.58);
  --read-paper:#1D2623;
  --read-paper-text:#EDF3F1;
  --read-paper-bd:rgba(108,229,195,0.14);
}
/* ---- lavender : ลาเวนเดอร์ ---- */
html[data-site-theme="lavender"][data-theme="light"]{
  --zk-0:#FFFFFF;--zk-1:#FAF9FA;--zk-2:#F5F4F6;--zk-3:#E5E3E8;--zk-4:#D3CFD8;--zk-5:#A29AAC;--zk-6:#71677E;--zk-7:#51495A;--zk-8:#3F3946;--zk-9:#26222A;--zk-10:#171519;--zk-11:#0A090B;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(255,255,255,0.85), transparent 30%), radial-gradient(circle at 80% 12%, rgba(98,41,174,0.1), transparent 34%), radial-gradient(circle at 50% 94%, rgba(98,41,174,0.08), transparent 44%), linear-gradient(135deg,#FBF8FE 0%,#EFE8F7 52%,#E1D7EF 100%);
  --grid-line:rgba(98,41,174,0.05);
  --text:#251C31;
  --head:#130D1B;
  --muted:#433A50;
  --faint:#746A81;
  --line:rgba(70,29,124,0.16);
  --chip:rgba(98,41,174,0.09);
  --btn:linear-gradient(180deg,#7A39D0 0%,#461D7C 100%);
  --btn-text:#FFFFFF;
  --btn-rim:rgba(255,255,255,.22);
  --head-grad:linear-gradient(120deg,#130D1B 0%,#461D7C 48%,#7A39D0 100%);
  --accent:#6229AE;
  --accent-text:#FFFFFF;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#CEB8EA 42%,#8764B4 100%);
  --shadow-soft:0 18px 50px rgba(70,29,124,0.14);
  --shadow-deep:0 30px 80px rgba(70,29,124,0.22);
  --read-paper-bd:rgba(70,29,124,0.12);
  --read-paper-shadow:0 10px 28px rgba(70,29,124,0.12);
}
html[data-site-theme="lavender"][data-theme="dark"]{
  --zk-0:#000000;--zk-1:#0A090B;--zk-2:#17141A;--zk-3:#26222B;--zk-4:#37313F;--zk-5:#50485B;--zk-6:#887C98;--zk-7:#A298AE;--zk-8:#D3CED9;--zk-9:#E5E2E9;--zk-10:#F5F4F6;--zk-11:#FAF9FB;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(194,159,239,0.13), transparent 27%), radial-gradient(circle at 74% 18%, rgba(194,159,239,0.08), transparent 32%), radial-gradient(circle at 50% 92%, rgba(0,0,0,.6), transparent 42%), linear-gradient(135deg,#201A28 0%,#15101B 42%,#0A070D 100%);
  --grid-line:rgba(194,159,239,0.045);
  --text:#EDEAF1;
  --head:#FAF9FB;
  --muted:#D5D0DD;
  --faint:#9D94A8;
  --line:rgba(194,159,239,0.18);
  --chip:rgba(194,159,239,0.13);
  --btn:linear-gradient(180deg,#C29FEF 0%,#9A61E5 100%);
  --btn-text:#0A0A0A;
  --btn-rim:rgba(255,255,255,.45);
  --head-grad:linear-gradient(120deg,#FFFFFF 0%,#C29FEF 48%,#9A61E5 100%);
  --accent:#C29FEF;
  --accent-text:#0A0A0A;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#C9B3E6 42%,#6E5095 100%);
  --shadow-soft:0 18px 60px rgba(0,0,0,.42);
  --shadow-deep:0 32px 100px rgba(0,0,0,.58);
  --read-paper:#211D26;
  --read-paper-text:#EFEDF3;
  --read-paper-bd:rgba(194,159,239,0.14);
}
/* ---- sunset : ซันเซ็ต ---- */
html[data-site-theme="sunset"][data-theme="light"]{
  --zk-0:#FFFFFF;--zk-1:#FAFAF9;--zk-2:#F6F4F4;--zk-3:#E8E4E3;--zk-4:#D8D1CF;--zk-5:#AC9E9A;--zk-6:#7E6D67;--zk-7:#5A4D49;--zk-8:#463C39;--zk-9:#2A2422;--zk-10:#191615;--zk-11:#0B0A09;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(255,255,255,0.85), transparent 30%), radial-gradient(circle at 80% 12%, rgba(184,58,20,0.1), transparent 34%), radial-gradient(circle at 50% 94%, rgba(184,58,20,0.08), transparent 44%), linear-gradient(135deg,#FEFAF8 0%,#F7ECE8 52%,#EFDDD7 100%);
  --grid-line:rgba(184,58,20,0.05);
  --text:#31211C;
  --head:#1B110D;
  --muted:#503F3A;
  --faint:#816F6A;
  --line:rgba(129,41,14,0.16);
  --chip:rgba(184,58,20,0.09);
  --btn:linear-gradient(180deg,#CF4217 0%,#81290E 100%);
  --btn-text:#FFFFFF;
  --btn-rim:rgba(255,255,255,.22);
  --head-grad:linear-gradient(120deg,#1B110D 0%,#81290E 48%,#CF4217 100%);
  --accent:#B83A14;
  --accent-text:#FFFFFF;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#EAC4B8 42%,#B47764 100%);
  --shadow-soft:0 18px 50px rgba(129,41,14,0.14);
  --shadow-deep:0 30px 80px rgba(129,41,14,0.22);
  --read-paper-bd:rgba(129,41,14,0.12);
  --read-paper-shadow:0 10px 28px rgba(129,41,14,0.12);
}
html[data-site-theme="sunset"][data-theme="dark"]{
  --zk-0:#000000;--zk-1:#0B0A09;--zk-2:#1A1514;--zk-3:#2B2422;--zk-4:#3F3531;--zk-5:#5B4C48;--zk-6:#98827C;--zk-7:#AE9D98;--zk-8:#D9D1CE;--zk-9:#E9E4E2;--zk-10:#F6F4F4;--zk-11:#FBFAF9;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(247,142,110,0.13), transparent 27%), radial-gradient(circle at 74% 18%, rgba(247,142,110,0.08), transparent 32%), radial-gradient(circle at 50% 92%, rgba(0,0,0,.6), transparent 42%), linear-gradient(135deg,#281D1A 0%,#1B1310 42%,#0D0907 100%);
  --grid-line:rgba(247,142,110,0.045);
  --text:#F1EBEA;
  --head:#FBF9F9;
  --muted:#DDD3D0;
  --faint:#A89994;
  --line:rgba(247,142,110,0.18);
  --chip:rgba(247,142,110,0.13);
  --btn:linear-gradient(180deg,#F78E6E 0%,#F4592A 100%);
  --btn-text:#0A0A0A;
  --btn-rim:rgba(255,255,255,.45);
  --head-grad:linear-gradient(120deg,#FFFFFF 0%,#F78E6E 48%,#F4592A 100%);
  --accent:#F78E6E;
  --accent-text:#0A0A0A;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#E6BEB3 42%,#956050 100%);
  --shadow-soft:0 18px 60px rgba(0,0,0,.42);
  --shadow-deep:0 32px 100px rgba(0,0,0,.58);
  --read-paper:#261F1D;
  --read-paper-text:#F3EEED;
  --read-paper-bd:rgba(247,142,110,0.14);
}
/* ---- honey : น้ำผึ้ง ---- */
html[data-site-theme="honey"][data-theme="light"]{
  --zk-0:#FFFFFF;--zk-1:#FAFAF9;--zk-2:#F6F5F4;--zk-3:#E8E6E3;--zk-4:#D8D5CF;--zk-5:#ACA69A;--zk-6:#7E7767;--zk-7:#5A5449;--zk-8:#464239;--zk-9:#2A2822;--zk-10:#191815;--zk-11:#0B0B09;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(255,255,255,0.85), transparent 30%), radial-gradient(circle at 80% 12%, rgba(138,97,15,0.1), transparent 34%), radial-gradient(circle at 50% 94%, rgba(138,97,15,0.08), transparent 44%), linear-gradient(135deg,#FEFCF8 0%,#F7F2E8 52%,#EFE7D7 100%);
  --grid-line:rgba(138,97,15,0.05);
  --text:#312A1C;
  --head:#1B170D;
  --muted:#50493A;
  --faint:#81796A;
  --line:rgba(83,58,9,0.16);
  --chip:rgba(138,97,15,0.09);
  --btn:linear-gradient(180deg,#976B11 0%,#533A09 100%);
  --btn-text:#FFFFFF;
  --btn-rim:rgba(255,255,255,.22);
  --head-grad:linear-gradient(120deg,#1B170D 0%,#533A09 48%,#976B11 100%);
  --accent:#8A610F;
  --accent-text:#FFFFFF;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#EADAB8 42%,#B49A64 100%);
  --shadow-soft:0 18px 50px rgba(83,58,9,0.14);
  --shadow-deep:0 30px 80px rgba(83,58,9,0.22);
  --read-paper-bd:rgba(83,58,9,0.12);
  --read-paper-shadow:0 10px 28px rgba(83,58,9,0.12);
}
html[data-site-theme="honey"][data-theme="dark"]{
  --zk-0:#000000;--zk-1:#0B0B09;--zk-2:#1A1814;--zk-3:#2B2822;--zk-4:#3F3A31;--zk-5:#5B5548;--zk-6:#988E7C;--zk-7:#AEA798;--zk-8:#D9D5CE;--zk-9:#E9E7E2;--zk-10:#F6F5F4;--zk-11:#FBFAF9;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(247,198,100,0.13), transparent 27%), radial-gradient(circle at 74% 18%, rgba(247,198,100,0.08), transparent 32%), radial-gradient(circle at 50% 92%, rgba(0,0,0,.6), transparent 42%), linear-gradient(135deg,#28241A 0%,#1B1810 42%,#0D0B07 100%);
  --grid-line:rgba(247,198,100,0.045);
  --text:#F1EEEA;
  --head:#FBFAF9;
  --muted:#DDD8D0;
  --faint:#A8A194;
  --line:rgba(247,198,100,0.18);
  --chip:rgba(247,198,100,0.13);
  --btn:linear-gradient(180deg,#F7C664 0%,#F3AD20 100%);
  --btn-text:#0A0A0A;
  --btn-rim:rgba(255,255,255,.45);
  --head-grad:linear-gradient(120deg,#FFFFFF 0%,#F7C664 48%,#F3AD20 100%);
  --accent:#F7C664;
  --accent-text:#0A0A0A;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#E6D4B3 42%,#957E50 100%);
  --shadow-soft:0 18px 60px rgba(0,0,0,.42);
  --shadow-deep:0 32px 100px rgba(0,0,0,.58);
  --read-paper:#26231D;
  --read-paper-text:#F3F1ED;
  --read-paper-bd:rgba(247,198,100,0.14);
}
/* ---- cocoa : โกโก้ครีม ---- */
html[data-site-theme="cocoa"][data-theme="light"]{
  --zk-0:#FFFFFF;--zk-1:#FAFAF9;--zk-2:#F6F5F4;--zk-3:#E8E5E3;--zk-4:#D8D3CF;--zk-5:#ACA29A;--zk-6:#7E7267;--zk-7:#5A5149;--zk-8:#463F39;--zk-9:#2A2622;--zk-10:#191715;--zk-11:#0B0A09;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(255,255,255,0.85), transparent 30%), radial-gradient(circle at 80% 12%, rgba(103,74,50,0.1), transparent 34%), radial-gradient(circle at 50% 94%, rgba(103,74,50,0.08), transparent 44%), linear-gradient(135deg,#FEFBF8 0%,#F7EFE8 52%,#EFE2D7 100%);
  --grid-line:rgba(103,74,50,0.05);
  --text:#31251C;
  --head:#1B140D;
  --muted:#50443A;
  --faint:#81746A;
  --line:rgba(62,44,30,0.16);
  --chip:rgba(103,74,50,0.09);
  --btn:linear-gradient(180deg,#896343 0%,#3E2C1E 100%);
  --btn-text:#FFFFFF;
  --btn-rim:rgba(255,255,255,.22);
  --head-grad:linear-gradient(120deg,#1B140D 0%,#3E2C1E 48%,#896343 100%);
  --accent:#674A32;
  --accent-text:#FFFFFF;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#EACFB8 42%,#B48864 100%);
  --shadow-soft:0 18px 50px rgba(62,44,30,0.14);
  --shadow-deep:0 30px 80px rgba(62,44,30,0.22);
  --read-paper-bd:rgba(62,44,30,0.12);
  --read-paper-shadow:0 10px 28px rgba(62,44,30,0.12);
}
html[data-site-theme="cocoa"][data-theme="dark"]{
  --zk-0:#000000;--zk-1:#0B0A09;--zk-2:#1A1714;--zk-3:#2B2622;--zk-4:#3F3731;--zk-5:#5B5148;--zk-6:#98887C;--zk-7:#AEA298;--zk-8:#D9D3CE;--zk-9:#E9E5E2;--zk-10:#F6F5F4;--zk-11:#FBFAF9;
  --bg-grad:radial-gradient(circle at 16% 8%, rgba(215,180,152,0.13), transparent 27%), radial-gradient(circle at 74% 18%, rgba(215,180,152,0.08), transparent 32%), radial-gradient(circle at 50% 92%, rgba(0,0,0,.6), transparent 42%), linear-gradient(135deg,#28201A 0%,#1B1510 42%,#0D0A07 100%);
  --grid-line:rgba(215,180,152,0.045);
  --text:#F1EDEA;
  --head:#FBFAF9;
  --muted:#DDD6D0;
  --faint:#A89D94;
  --line:rgba(215,180,152,0.18);
  --chip:rgba(215,180,152,0.13);
  --btn:linear-gradient(180deg,#D7B498 0%,#C38F65 100%);
  --btn-text:#0A0A0A;
  --btn-rim:rgba(255,255,255,.45);
  --head-grad:linear-gradient(120deg,#FFFFFF 0%,#D7B498 48%,#C38F65 100%);
  --accent:#D7B498;
  --accent-text:#0A0A0A;
  --disc:radial-gradient(circle at 32% 26%,#ffffff,#E6C9B3 42%,#956F50 100%);
  --shadow-soft:0 18px 60px rgba(0,0,0,.42);
  --shadow-deep:0 32px 100px rgba(0,0,0,.58);
  --read-paper:#26211D;
  --read-paper-text:#F3EFED;
  --read-paper-bd:rgba(215,180,152,0.14);
}

/* ============================================================
   ตัวเลือกธีมในหน้าตั้งค่าแอดมิน (.tcms-*) — ใช้ตัวแปรสีของเว็บ จึงปรับตามธีมที่เลือกอยู่เสมอ
   ============================================================ */
.tcms-wrap{display:flex;flex-direction:column;gap:12px}
.tcms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.tcms-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:9px;border:1px solid var(--line);border-radius:var(--r-sm,16px);background:var(--glass-flat);color:var(--text);text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.tcms-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.tcms-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tcms-card.is-preview{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.tcms-card.is-saved::after{content:attr(data-badge);position:absolute;top:6px;right:6px;padding:1px 8px;border-radius:999px;font-size:.62rem;font-weight:700;background:var(--accent);color:var(--accent-text)}
.tcms-sw{display:grid;grid-template-columns:1fr 1fr;height:54px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tcms-sw i{display:block;position:relative}
.tcms-sw i::after{content:"";position:absolute;right:6px;bottom:6px;width:16px;height:16px;border-radius:50%;background:var(--dot);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tcms-name{font-weight:700;font-size:.82rem;line-height:1.25}
.tcms-desc{font-size:.68rem;color:var(--muted);line-height:1.3}
.tcms-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tcms-status{flex:1 1 180px;font-size:.78rem;color:var(--muted)}
.tcms-btn{padding:9px 16px;border-radius:999px;font-weight:700;font-size:.8rem;border:1px solid var(--line);background:var(--glass-flat);color:var(--text)}
.tcms-btn.primary{background:var(--btn);color:var(--btn-text);border-color:transparent}
.tcms-btn[disabled]{opacity:.5;cursor:not-allowed}
.tcms-note{font-size:.72rem;color:var(--muted)}