/* ============================================================
   theme.css — ระบบธีมกลาง (ใช้ร่วมกันทุกหน้า)
   โหลดไฟล์นี้ "หลัง" <style> ในหน้า เพื่อให้ทับค่าสีเดิมได้
   ควบคุมด้วย  <body data-theme="purple|blue|green|sunset" data-mode="dark|light">
   ============================================================ */

:root{
  --accent:#9d8bff;
  --b1:#6d5dfc;  --b2:#ff5d8f;  --b3:#23d5ab;     /* สี blob 3 ก้อน */
  --g1:#0f1226; --g2:#2a1a5e; --g3:#3d1a52; --g4:#0e2f47; --g5:#1a1340;
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.6);
  --glass:rgba(255,255,255,.07);
  --glass-strong:rgba(255,255,255,.13);
  --glass-line:rgba(255,255,255,.14);
}

/* ---------- โทนสี ---------- */
body[data-theme="purple"]{ --accent:#9d8bff; --b1:#6d5dfc; --b2:#ff5d8f; --b3:#23d5ab;
  --g1:#0f1226; --g2:#2a1a5e; --g3:#3d1a52; --g4:#0e2f47; --g5:#1a1340; }
body[data-theme="blue"]{   --accent:#5cc8ff; --b1:#3a7bff; --b2:#23d5ab; --b3:#5cc8ff;
  --g1:#0a1326; --g2:#10294f; --g3:#103a52; --g4:#0e2f47; --g5:#0a1c3a; }
body[data-theme="green"]{  --accent:#3ee0b0; --b1:#23d5ab; --b2:#2bcbba; --b3:#7be0a0;
  --g1:#08160f; --g2:#0f3a2c; --g3:#103d2e; --g4:#0b2f2a; --g5:#0a2418; }
body[data-theme="sunset"]{ --accent:#ffb36b; --b1:#ff7a45; --b2:#ff5d8f; --b3:#ffd166;
  --g1:#1a0f12; --g2:#4f1a2e; --g3:#5e2a1a; --g4:#3d1a2f; --g5:#2a1320; }

/* ---------- พื้นหลัง + blob ใช้ตัวแปร ---------- */
body{ background:linear-gradient(-45deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5),var(--g1)) !important;
      background-size:400% 400% !important; color:var(--text); }
.blob.a{ background:var(--b1) !important; }
.blob.b{ background:var(--b2) !important; }
.blob.c{ background:var(--b3) !important; }
/* blob ไล่สีนุ่มเสมอ (ไม่กระทบ hover ปุ่ม/การ์ด) */
.blob{ transition:background .8s ease, opacity .8s ease; }
.clock .greet{ color:var(--accent) !important; transition:color .6s ease; }
.search:focus{ border-color:var(--accent) !important; }
/* เปลี่ยนธีม → ใส่คลาส theme-anim ชั่วคราว ให้สี/พื้นผิวค่อยๆ ไล่ (ไม่ทำให้ hover ช้า) */
body.theme-anim,
body.theme-anim .card, body.theme-anim .btn, body.theme-anim .panel,
body.theme-anim .group, body.theme-anim .search, body.theme-anim .title h1,
body.theme-anim .title p, body.theme-anim .group-title, body.theme-anim .meta span,
body.theme-anim .clock .time, body.theme-anim .clock .date{
  transition:background .6s ease, color .6s ease, border-color .6s ease !important; }

/* ============================================================
   โหมดสว่าง (Light)
   ============================================================ */
body[data-mode="light"]{
  --text:#1c2030;
  --text-dim:rgba(28,32,48,.62);
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.78);
  --glass-line:rgba(0,0,0,.10);
  --g1:#eef1ff; --g2:#e6e1ff; --g3:#ffe9f2; --g4:#e3f6ff; --g5:#f1ecff;
  color:var(--text);
}
body[data-mode="light"] .blob{ opacity:.30; }
body[data-mode="light"] .title h1{ color:var(--text); }
body[data-mode="light"] .title p,
body[data-mode="light"] .clock .date,
body[data-mode="light"] .meta span,
body[data-mode="light"] .group-title{ color:var(--text-dim) !important; }
body[data-mode="light"] .clock .time{ color:var(--text); }

body[data-mode="light"] .btn,
body[data-mode="light"] .search,
body[data-mode="light"] .card,
body[data-mode="light"] .panel,
body[data-mode="light"] .group{
  color:var(--text);
  background:var(--glass) !important;
  border-color:var(--glass-line) !important;
}
body[data-mode="light"] .card:hover{ background:var(--glass-strong) !important; }
/* ปุ่มหลัก/ปุ่มรอง คงสีเด่นไว้แม้ในโหมดสว่าง */
body[data-mode="light"] .btn.primary{
  color:#fff; background:linear-gradient(135deg,var(--b1),var(--b2)) !important;
  border-color:transparent !important; }
body[data-mode="light"] .btn.danger{
  color:#d23362; background:rgba(255,93,143,.14) !important;
  border-color:rgba(255,93,143,.4) !important; }
body[data-mode="light"] .btn.danger:hover{ color:#fff;
  background:rgba(255,93,143,.85) !important; }
body[data-mode="light"] .card .meta b,
body[data-mode="light"] .card{ color:var(--text); }
body[data-mode="light"] .search::placeholder{ color:rgba(28,32,48,.45); }
body[data-mode="light"] input,
body[data-mode="light"] select{ color:var(--text);
  background:rgba(255,255,255,.6) !important; border-color:var(--glass-line) !important; }
body[data-mode="light"] label{ color:var(--text-dim); }
body[data-mode="light"] .card::after{
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),
            rgba(109,93,252,.18), transparent 60%) !important; }

/* ============================================================
   แผงสลับธีม (ลอยมุมซ้ายล่าง)
   ============================================================ */
#themeBtn{ position:fixed; left:22px; bottom:24px; z-index:60; width:48px; height:48px;
  border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:22px;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,.35); transition:.2s; }
#themeBtn:hover{ transform:rotate(25deg) scale(1.08); background:rgba(255,255,255,.22); }
body[data-mode="light"] #themeBtn{ color:#1c2030; background:rgba(255,255,255,.7);
  border-color:rgba(0,0,0,.1); }

#themePanel{ position:fixed; left:22px; bottom:82px; z-index:61; width:220px; padding:16px;
  border-radius:18px; color:var(--text);
  background:rgba(30,33,60,.72); backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.2); box-shadow:0 16px 44px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px) scale(.95); pointer-events:none; transition:.22s; }
#themePanel.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
body[data-mode="light"] #themePanel{ background:rgba(255,255,255,.85); color:#1c2030;
  border-color:rgba(0,0,0,.08); }
#themePanel .tp-title{ font-size:12px; opacity:.7; margin-bottom:9px; letter-spacing:.3px; }
.tp-colors{ display:flex; gap:10px; margin-bottom:16px; }
.tp-sw{ width:34px; height:34px; border-radius:11px; cursor:pointer; border:2px solid transparent;
  transition:.15s; position:relative; }
.tp-sw:hover{ transform:scale(1.1); }
.tp-sw.active{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.3); }
body[data-mode="light"] .tp-sw.active{ border-color:#1c2030; }
.tp-sw[data-t="purple"]{ background:linear-gradient(135deg,#6d5dfc,#ff5d8f); }
.tp-sw[data-t="blue"]{   background:linear-gradient(135deg,#3a7bff,#5cc8ff); }
.tp-sw[data-t="green"]{  background:linear-gradient(135deg,#23d5ab,#7be0a0); }
.tp-sw[data-t="sunset"]{ background:linear-gradient(135deg,#ff7a45,#ffd166); }

.tp-mode{ display:flex; gap:8px; }
.tp-mode button{ flex:1; padding:9px; border-radius:11px; cursor:pointer; font-size:13px;
  color:var(--text); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  transition:.15s; display:flex; align-items:center; justify-content:center; gap:5px; }
.tp-mode button:hover{ background:rgba(255,255,255,.2); }
.tp-mode button.active{ background:linear-gradient(135deg,var(--b1),var(--b2)); border-color:transparent; font-weight:600; }
body[data-mode="light"] .tp-mode button{ color:#1c2030; background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); }
body[data-mode="light"] .tp-mode button.active{ color:#fff; }

/* โลโก้หุ่นยนต์ในหัวเว็บ */
.brand{ display:flex; align-items:center; gap:13px; }
.brand .logo{ width:46px; height:46px; flex:0 0 46px; border-radius:13px;
  box-shadow:0 6px 18px rgba(0,0,0,.3); }
