/* =================================================================== theme.css — ระบบธีมสีของทั้งร้าน (ใช้ร่วมกันทุกหน้า) - เลือกได้หลายธีมสี (data-theme บน ) + โหมดปกติ/มืด (class "dark" บน ) - อิงบนคลาส Tailwind ที่ใช้อยู่จริงในโปรเจกต์ แทนที่ค่าสีด้วย CSS variable เพื่อไม่ต้องแก้ class เดิมในทุกหน้า (ครอบคลุม index.html, admin.html, login.html, order-status.html) =================================================================== */ /* ---------- 1) โครงสี พื้นหลัง/ตัวอักษร ตามโหมดปกติ/มืด (ใช้ร่วมกันทุกธีมสี) ---------- */ html:not(.dark) { --bg-page: #f3f4f6; --bg-card: #ffffff; --bg-surface-1: #f9fafb; --bg-surface-2: #f3f4f6; --bg-surface-3: #e5e7eb; --bg-surface-4: #d1d5db; --bg-inverse: #1f2937; --bg-inverse-2: #111827; --text-inverse: #ffffff; --text-strong: #1f2937; --text-secondary: #374151; --text-body: #4b5563; --text-muted: #6b7280; --text-faint: #9ca3af; --border-color: #e5e7eb; --border-color-strong: #d1d5db; --overlay-bg: rgba(0, 0, 0, 0.5); --chip-dim: 1; } html.dark { --bg-page: #101317; --bg-card: #1a1e24; --bg-surface-1: #20252c; --bg-surface-2: #262b33; --bg-surface-3: #323844; --bg-surface-4: #3e4550; --bg-inverse: #f3f4f6; --bg-inverse-2: #ffffff; --text-inverse: #1a1e24; --text-strong: #f3f4f6; --text-secondary: #e5e7eb; --text-body: #cbd5e1; --text-muted: #aab2bd; --text-faint: #8b93a0; --border-color: #333a44; --border-color-strong: #414954; --overlay-bg: rgba(0, 0, 0, 0.65); --chip-dim: 0.16; } /* ---------- 2) ธีมสี (สีหลักของร้าน/ปุ่ม/แบรนด์ + สีคู่สำหรับหัวข้อย่อย/แท็บย่อย) ---------- */ html[data-theme="red"] { --primary: #ef4444; --primary-strong: #dc2626; --primary-ring: #f87171; --primary-soft: #fef2f2; --primary-soft-text: #b91c1c; --primary-border: #fecaca; --secondary: #06b6d4; --secondary-strong: #0891b2; --secondary-ring: #22d3ee; --secondary-soft: #ecfeff; --secondary-soft-text: #0e7490; --secondary-border: #a5f3fc; } html.dark[data-theme="red"] { --primary: #f87171; --primary-strong: #ef4444; --primary-ring: #fca5a5; --primary-soft: rgba(220,38,38,0.16); --primary-soft-text: #fca5a5; --primary-border: rgba(248,113,113,0.4); --secondary: #22d3ee; --secondary-strong: #06b6d4; --secondary-ring: #67e8f9; --secondary-soft: rgba(8,145,178,0.16); --secondary-soft-text: #67e8f9; --secondary-border: rgba(34,211,238,0.4); } html[data-theme="orange"] { --primary: #f97316; --primary-strong: #ea580c; --primary-ring: #fb923c; --primary-soft: #fff7ed; --primary-soft-text: #c2410c; --primary-border: #fed7aa; --secondary: #3b82f6; --secondary-strong: #2563eb; --secondary-ring: #60a5fa; --secondary-soft: #eff6ff; --secondary-soft-text: #1d4ed8; --secondary-border: #bfdbfe; } html.dark[data-theme="orange"] { --primary: #fb923c; --primary-strong: #f97316; --primary-ring: #fdba74; --primary-soft: rgba(234,88,12,0.16); --primary-soft-text: #fdba74; --primary-border: rgba(251,146,60,0.4); --secondary: #60a5fa; --secondary-strong: #3b82f6; --secondary-ring: #93c5fd; --secondary-soft: rgba(37,99,235,0.16); --secondary-soft-text: #93c5fd; --secondary-border: rgba(96,165,250,0.4); } html[data-theme="amber"] { --primary: #f59e0b; --primary-strong: #d97706; --primary-ring: #fbbf24; --primary-soft: #fffbeb; --primary-soft-text: #b45309; --primary-border: #fde68a; --secondary: #6366f1; --secondary-strong: #4f46e5; --secondary-ring: #818cf8; --secondary-soft: #eef2ff; --secondary-soft-text: #4338ca; --secondary-border: #c7d2fe; } html.dark[data-theme="amber"] { --primary: #fbbf24; --primary-strong: #f59e0b; --primary-ring: #fcd34d; --primary-soft: rgba(217,119,6,0.16); --primary-soft-text: #fcd34d; --primary-border: rgba(251,191,36,0.4); --secondary: #818cf8; --secondary-strong: #6366f1; --secondary-ring: #a5b4fc; --secondary-soft: rgba(79,70,229,0.16); --secondary-soft-text: #a5b4fc; --secondary-border: rgba(129,140,248,0.4); } html[data-theme="lime"] { --primary: #84cc16; --primary-strong: #65a30d; --primary-ring: #a3e635; --primary-soft: #f7fee7; --primary-soft-text: #4d7c0f; --primary-border: #d9f99d; --secondary: #a855f7; --secondary-strong: #9333ea; --secondary-ring: #c084fc; --secondary-soft: #faf5ff; --secondary-soft-text: #7e22ce; --secondary-border: #e9d5ff; } html.dark[data-theme="lime"] { --primary: #a3e635; --primary-strong: #84cc16; --primary-ring: #bef264; --primary-soft: rgba(101,163,13,0.16); --primary-soft-text: #bef264; --primary-border: rgba(163,230,53,0.4); --secondary: #c084fc; --secondary-strong: #a855f7; --secondary-ring: #d8b4fe; --secondary-soft: rgba(147,51,234,0.16); --secondary-soft-text: #d8b4fe; --secondary-border: rgba(192,132,252,0.4); } html[data-theme="green"] { --primary: #22c55e; --primary-strong: #16a34a; --primary-ring: #4ade80; --primary-soft: #f0fdf4; --primary-soft-text: #15803d; --primary-border: #bbf7d0; --secondary: #ec4899; --secondary-strong: #db2777; --secondary-ring: #f472b6; --secondary-soft: #fdf2f8; --secondary-soft-text: #be185d; --secondary-border: #fbcfe8; } html.dark[data-theme="green"] { --primary: #4ade80; --primary-strong: #22c55e; --primary-ring: #86efac; --primary-soft: rgba(22,163,74,0.16); --primary-soft-text: #86efac; --primary-border: rgba(74,222,128,0.4); --secondary: #f472b6; --secondary-strong: #ec4899; --secondary-ring: #f9a8d4; --secondary-soft: rgba(219,39,119,0.16); --secondary-soft-text: #f9a8d4; --secondary-border: rgba(244,114,182,0.4); } html[data-theme="teal"] { --primary: #14b8a6; --primary-strong: #0d9488; --primary-ring: #2dd4bf; --primary-soft: #f0fdfa; --primary-soft-text: #0f766e; --primary-border: #99f6e4; --secondary: #f43f5e; --secondary-strong: #e11d48; --secondary-ring: #fb7185; --secondary-soft: #fff1f2; --secondary-soft-text: #be123c; --secondary-border: #fecdd3; } html.dark[data-theme="teal"] { --primary: #2dd4bf; --primary-strong: #14b8a6; --primary-ring: #5eead4; --primary-soft: rgba(13,148,136,0.16); --primary-soft-text: #5eead4; --primary-border: rgba(45,212,191,0.4); --secondary: #fb7185; --secondary-strong: #f43f5e; --secondary-ring: #fda4af; --secondary-soft: rgba(225,29,72,0.16); --secondary-soft-text: #fda4af; --secondary-border: rgba(251,113,133,0.4); } html[data-theme="cyan"] { --primary: #06b6d4; --primary-strong: #0891b2; --primary-ring: #22d3ee; --primary-soft: #ecfeff; --primary-soft-text: #0e7490; --primary-border: #a5f3fc; --secondary: #ef4444; --secondary-strong: #dc2626; --secondary-ring: #f87171; --secondary-soft: #fef2f2; --secondary-soft-text: #b91c1c; --secondary-border: #fecaca; } html.dark[data-theme="cyan"] { --primary: #22d3ee; --primary-strong: #06b6d4; --primary-ring: #67e8f9; --primary-soft: rgba(8,145,178,0.16); --primary-soft-text: #67e8f9; --primary-border: rgba(34,211,238,0.4); --secondary: #f87171; --secondary-strong: #ef4444; --secondary-ring: #fca5a5; --secondary-soft: rgba(220,38,38,0.16); --secondary-soft-text: #fca5a5; --secondary-border: rgba(248,113,113,0.4); } html[data-theme="blue"] { --primary: #3b82f6; --primary-strong: #2563eb; --primary-ring: #60a5fa; --primary-soft: #eff6ff; --primary-soft-text: #1d4ed8; --primary-border: #bfdbfe; --secondary: #f59e0b; --secondary-strong: #d97706; --secondary-ring: #fbbf24; --secondary-soft: #fffbeb; --secondary-soft-text: #b45309; --secondary-border: #fde68a; } html.dark[data-theme="blue"] { --primary: #60a5fa; --primary-strong: #3b82f6; --primary-ring: #93c5fd; --primary-soft: rgba(37,99,235,0.16); --primary-soft-text: #93c5fd; --primary-border: rgba(96,165,250,0.4); --secondary: #fbbf24; --secondary-strong: #f59e0b; --secondary-ring: #fcd34d; --secondary-soft: rgba(217,119,6,0.16); --secondary-soft-text: #fcd34d; --secondary-border: rgba(251,191,36,0.4); } html[data-theme="indigo"] { --primary: #6366f1; --primary-strong: #4f46e5; --primary-ring: #818cf8; --primary-soft: #eef2ff; --primary-soft-text: #4338ca; --primary-border: #c7d2fe; --secondary: #84cc16; --secondary-strong: #65a30d; --secondary-ring: #a3e635; --secondary-soft: #f7fee7; --secondary-soft-text: #4d7c0f; --secondary-border: #d9f99d; } html.dark[data-theme="indigo"] { --primary: #818cf8; --primary-strong: #6366f1; --primary-ring: #a5b4fc; --primary-soft: rgba(79,70,229,0.16); --primary-soft-text: #a5b4fc; --primary-border: rgba(129,140,248,0.4); --secondary: #a3e635; --secondary-strong: #84cc16; --secondary-ring: #bef264; --secondary-soft: rgba(101,163,13,0.16); --secondary-soft-text: #bef264; --secondary-border: rgba(163,230,53,0.4); } html[data-theme="purple"] { --primary: #a855f7; --primary-strong: #9333ea; --primary-ring: #c084fc; --primary-soft: #faf5ff; --primary-soft-text: #7e22ce; --primary-border: #e9d5ff; --secondary: #22c55e; --secondary-strong: #16a34a; --secondary-ring: #4ade80; --secondary-soft: #f0fdf4; --secondary-soft-text: #15803d; --secondary-border: #bbf7d0; } html.dark[data-theme="purple"] { --primary: #c084fc; --primary-strong: #a855f7; --primary-ring: #d8b4fe; --primary-soft: rgba(147,51,234,0.16); --primary-soft-text: #d8b4fe; --primary-border: rgba(192,132,252,0.4); --secondary: #4ade80; --secondary-strong: #22c55e; --secondary-ring: #86efac; --secondary-soft: rgba(22,163,74,0.16); --secondary-soft-text: #86efac; --secondary-border: rgba(74,222,128,0.4); } html[data-theme="pink"] { --primary: #ec4899; --primary-strong: #db2777; --primary-ring: #f472b6; --primary-soft: #fdf2f8; --primary-soft-text: #be185d; --primary-border: #fbcfe8; --secondary: #14b8a6; --secondary-strong: #0d9488; --secondary-ring: #2dd4bf; --secondary-soft: #f0fdfa; --secondary-soft-text: #0f766e; --secondary-border: #99f6e4; } html.dark[data-theme="pink"] { --primary: #f472b6; --primary-strong: #ec4899; --primary-ring: #f9a8d4; --primary-soft: rgba(219,39,119,0.16); --primary-soft-text: #f9a8d4; --primary-border: rgba(244,114,182,0.4); --secondary: #2dd4bf; --secondary-strong: #14b8a6; --secondary-ring: #5eead4; --secondary-soft: rgba(13,148,136,0.16); --secondary-soft-text: #5eead4; --secondary-border: rgba(45,212,191,0.4); } html[data-theme="rose"] { --primary: #f43f5e; --primary-strong: #e11d48; --primary-ring: #fb7185; --primary-soft: #fff1f2; --primary-soft-text: #be123c; --primary-border: #fecdd3; --secondary: #f97316; --secondary-strong: #ea580c; --secondary-ring: #fb923c; --secondary-soft: #fff7ed; --secondary-soft-text: #c2410c; --secondary-border: #fed7aa; } html.dark[data-theme="rose"] { --primary: #fb7185; --primary-strong: #f43f5e; --primary-ring: #fda4af; --primary-soft: rgba(225,29,72,0.16); --primary-soft-text: #fda4af; --primary-border: rgba(251,113,133,0.4); --secondary: #fb923c; --secondary-strong: #f97316; --secondary-ring: #fdba74; --secondary-soft: rgba(234,88,12,0.16); --secondary-soft-text: #fdba74; --secondary-border: rgba(251,146,60,0.4); } html[data-theme="sky"] { --primary: #0ea5e9; --primary-strong: #0284c7; --primary-ring: #38bdf8; --primary-soft: #f0f9ff; --primary-soft-text: #0369a1; --primary-border: #bae6fd; --secondary: #f97316; --secondary-strong: #ea580c; --secondary-ring: #fb923c; --secondary-soft: #fff7ed; --secondary-soft-text: #c2410c; --secondary-border: #fed7aa; } html.dark[data-theme="sky"] { --primary: #38bdf8; --primary-strong: #0ea5e9; --primary-ring: #7dd3fc; --primary-soft: rgba(2,132,199,0.16); --primary-soft-text: #7dd3fc; --primary-border: rgba(56,189,248,0.4); --secondary: #fb923c; --secondary-strong: #f97316; --secondary-ring: #fdba74; --secondary-soft: rgba(234,88,12,0.16); --secondary-soft-text: #fdba74; --secondary-border: rgba(251,146,60,0.4); } html[data-theme="emerald"] { --primary: #10b981; --primary-strong: #059669; --primary-ring: #34d399; --primary-soft: #ecfdf5; --primary-soft-text: #047857; --primary-border: #a7f3d0; --secondary: #ec4899; --secondary-strong: #db2777; --secondary-ring: #f472b6; --secondary-soft: #fdf2f8; --secondary-soft-text: #be185d; --secondary-border: #fbcfe8; } html.dark[data-theme="emerald"] { --primary: #34d399; --primary-strong: #10b981; --primary-ring: #6ee7b7; --primary-soft: rgba(5,150,105,0.16); --primary-soft-text: #6ee7b7; --primary-border: rgba(52,211,153,0.4); --secondary: #f472b6; --secondary-strong: #ec4899; --secondary-ring: #f9a8d4; --secondary-soft: rgba(219,39,119,0.16); --secondary-soft-text: #f9a8d4; --secondary-border: rgba(244,114,182,0.4); } html[data-theme="violet"] { --primary: #8b5cf6; --primary-strong: #7c3aed; --primary-ring: #a78bfa; --primary-soft: #f5f3ff; --primary-soft-text: #6d28d9; --primary-border: #ddd6fe; --secondary: #84cc16; --secondary-strong: #65a30d; --secondary-ring: #a3e635; --secondary-soft: #f7fee7; --secondary-soft-text: #4d7c0f; --secondary-border: #d9f99d; } html.dark[data-theme="violet"] { --primary: #a78bfa; --primary-strong: #8b5cf6; --primary-ring: #c4b5fd; --primary-soft: rgba(124,58,237,0.16); --primary-soft-text: #c4b5fd; --primary-border: rgba(167,139,250,0.4); --secondary: #a3e635; --secondary-strong: #84cc16; --secondary-ring: #bef264; --secondary-soft: rgba(101,163,13,0.16); --secondary-soft-text: #bef264; --secondary-border: rgba(163,230,53,0.4); } html[data-theme="fuchsia"] { --primary: #d946ef; --primary-strong: #c026d3; --primary-ring: #e879f9; --primary-soft: #fdf4ff; --primary-soft-text: #a21caf; --primary-border: #f5d0fe; --secondary: #22c55e; --secondary-strong: #16a34a; --secondary-ring: #4ade80; --secondary-soft: #f0fdf4; --secondary-soft-text: #15803d; --secondary-border: #bbf7d0; } html.dark[data-theme="fuchsia"] { --primary: #e879f9; --primary-strong: #d946ef; --primary-ring: #f0abfc; --primary-soft: rgba(192,38,211,0.16); --primary-soft-text: #f0abfc; --primary-border: rgba(232,121,249,0.4); --secondary: #4ade80; --secondary-strong: #22c55e; --secondary-ring: #86efac; --secondary-soft: rgba(22,163,74,0.16); --secondary-soft-text: #86efac; --secondary-border: rgba(74,222,128,0.4); } html[data-theme="yellow"] { --primary: #eab308; --primary-strong: #ca8a04; --primary-ring: #facc15; --primary-soft: #fefce8; --primary-soft-text: #a16207; --primary-border: #fef08a; --secondary: #3b82f6; --secondary-strong: #2563eb; --secondary-ring: #60a5fa; --secondary-soft: #eff6ff; --secondary-soft-text: #1d4ed8; --secondary-border: #bfdbfe; } html.dark[data-theme="yellow"] { --primary: #facc15; --primary-strong: #eab308; --primary-ring: #fde047; --primary-soft: rgba(202,138,4,0.16); --primary-soft-text: #fde047; --primary-border: rgba(250,204,21,0.4); --secondary: #60a5fa; --secondary-strong: #3b82f6; --secondary-ring: #93c5fd; --secondary-soft: rgba(37,99,235,0.16); --secondary-soft-text: #93c5fd; --secondary-border: rgba(96,165,250,0.4); } html[data-theme="slate"] { --primary: #64748b; --primary-strong: #475569; --primary-ring: #94a3b8; --primary-soft: #f8fafc; --primary-soft-text: #334155; --primary-border: #e2e8f0; --secondary: #f43f5e; --secondary-strong: #e11d48; --secondary-ring: #fb7185; --secondary-soft: #fff1f2; --secondary-soft-text: #be123c; --secondary-border: #fecdd3; } html.dark[data-theme="slate"] { --primary: #94a3b8; --primary-strong: #64748b; --primary-ring: #cbd5e1; --primary-soft: rgba(71,85,105,0.16); --primary-soft-text: #cbd5e1; --primary-border: rgba(148,163,184,0.4); --secondary: #fb7185; --secondary-strong: #f43f5e; --secondary-ring: #fda4af; --secondary-soft: rgba(225,29,72,0.16); --secondary-soft-text: #fda4af; --secondary-border: rgba(251,113,133,0.4); } /* ---------- 3) พื้นฐานหน้า ---------- */ body { background-color: var(--bg-page) !important; color: var(--text-body); transition: background-color .15s ease, color .15s ease; } /* ---------- 4) แทนที่คลาสพื้นหลัง/ตัวอักษรที่เป็นโครงสร้าง (การ์ด, พื้นผิว, เส้นขอบ) ---------- */ .bg-white { background-color: var(--bg-card) !important; } .bg-gray-50 { background-color: var(--bg-surface-1) !important; } .bg-gray-100 { background-color: var(--bg-surface-2) !important; } .bg-gray-200 { background-color: var(--bg-surface-3) !important; } .bg-gray-300 { background-color: var(--bg-surface-4) !important; } .bg-gray-800 { background-color: var(--bg-inverse) !important; } .bg-gray-900 { background-color: var(--bg-inverse-2) !important; } .hover\:bg-gray-300:hover { background-color: var(--bg-surface-4) !important; } .hover\:bg-gray-900:hover { background-color: var(--bg-inverse-2) !important; } .bg-black { background-color: var(--overlay-bg) !important; } .text-gray-400 { color: var(--text-faint) !important; } .text-gray-500 { color: var(--text-muted) !important; } .text-gray-600 { color: var(--text-body) !important; } .text-gray-700 { color: var(--text-secondary) !important; } .text-gray-800 { color: var(--text-strong) !important; } .border, .border-t, .border-b, .border-l, .border-r, .border-gray-200 { border-color: var(--border-color) !important; } .border-gray-400 { border-color: var(--border-color-strong) !important; } .divide-y > * + * { border-color: var(--border-color) !important; } input, select, textarea { background-color: var(--bg-card); color: var(--text-strong); border-color: var(--border-color-strong); } input::placeholder, textarea::placeholder { color: var(--text-faint); } /* ---------- 5) สีแบรนด์/ปุ่มหลัก (แทนที่ "แดง" เดิมด้วยธีมสีที่เลือก) ---------- */ .bg-red-500 { background-color: var(--primary) !important; } .bg-red-600 { background-color: var(--primary-strong) !important; } .hover\:bg-red-600:hover { background-color: var(--primary-strong) !important; } .hover\:bg-red-700:hover { background-color: var(--primary-strong) !important; } .text-red-500 { color: var(--primary) !important; } .text-red-700 { color: var(--primary-soft-text) !important; } .bg-red-50 { background-color: var(--primary-soft) !important; } .bg-red-100 { background-color: var(--primary-soft) !important; } .bg-red-200 { background-color: var(--primary-border) !important; } .border-red-100, .border-red-200 { border-color: var(--primary-border) !important; } .ring-red-400 { --tw-ring-color: var(--primary-ring) !important; } .focus\:ring-red-400:focus { --tw-ring-color: var(--primary-ring) !important; } .accent-red-500 { accent-color: var(--primary) !important; } .tab-btn.active { background-color: var(--primary-strong) !important; color: var(--text-inverse) !important; } /* ---------- 5b) ราคา/ยอดรวม/หน้าชำระเงิน: ตรึงเป็นสีแดงเดิม (สีในธีม "แดง" อันแรก) เสมอ ไม่เปลี่ยนตามธีมสีหรือโหมดมืดที่เลือกไว้ ใช้คู่กับคลาส .price-text แทน .text-red-500 เฉพาะจุดแสดงราคา/ยอดรวม/ยอดโอนเท่านั้น ปุ่ม/องค์ประกอบอื่นยังคงใช้สีธีมตามปกติ */ .price-text { color: #ef4444 !important; } /* ---------- 6) สีสถานะ (เขียว/เหลือง/น้ำเงิน/ม่วง/ส้ม ฯลฯ) คงความหมายเดิมไว้ แต่ให้พื้นหลัง+ตัวอักษรคู่กันชัดเจนในโหมดมืด (ของเดิมใช้ filter:brightness() กับสีที่เข้มอยู่แล้ว ทำให้ตัวอักษรยังเข้มเกินไป กลืนกับพื้นหลังที่จางมาก แก้เป็นกำหนดสีตรงๆ แทน) */ html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; } html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.18) !important; } html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; } html.dark .bg-amber-200 { background-color: rgba(245, 158, 11, 0.28) !important; } html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; } html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; } html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; } html.dark .bg-gray-600, html.dark .bg-gray-700 { background-color: var(--bg-surface-4) !important; } html.dark .text-green-600, html.dark .text-green-700 { color: #6ee7a0 !important; } html.dark .text-emerald-700, html.dark .text-emerald-900 { color: #6ee7c7 !important; } html.dark .text-amber-500, html.dark .text-amber-600 { color: #fbbf24 !important; } html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; } html.dark .text-blue-500, html.dark .text-blue-700 { color: #7db8fb !important; } html.dark .text-purple-600, html.dark .text-purple-700 { color: #d5a6fa !important; } html.dark .text-orange-700 { color: #fdb579 !important; } html.dark .border-green-200 { border-color: rgba(74, 222, 128, 0.4) !important; } html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(251, 191, 36, 0.4) !important; } /* ---------- 7) ตัวเลือกธีม/สวิตช์โหมด (ใช้ร่วมกันหน้าลูกค้า/แอดมิน) ---------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: rgba(255,255,255,0.2); color: inherit; font-size: 16px; line-height: 1; border: none; cursor: pointer; } .theme-toggle-btn:hover { background: rgba(255,255,255,0.32); } .theme-swatch { width: 34px; height: 34px; border-radius: 9999px; cursor: pointer; border: 3px solid var(--bg-card); box-shadow: 0 0 0 1.5px var(--border-color-strong); transition: transform .1s ease; } .theme-swatch:hover { transform: scale(1.08); } .theme-swatch.selected { box-shadow: 0 0 0 2.5px var(--primary-strong); }