/* ============================================================
   theme.css — NetMon · ธีม "Kinduem Hub Glass + Day/Night" (ชุดเดียวกับ hub.kinduem.com)
   ต้นแบบ: hub assets/css/tokens.css (ตัวแปรสีทั้งสองโหมด, ผิวกระจก, ลายลูกบาศก์, ปุ่มสลับ .theme-toggle)
   สลับธีมด้วย <html data-theme="dark|light"> (ตั้งโดย theme.js ใน <head> ก่อนหน้าวาด) · ค่าเริ่มต้น = มืด
   ไฟล์นี้มีแค่ "ตัวแปรสี + ผิว + ปุ่มสลับ" — ชิ้นส่วนหน้าตาของ NetMon อยู่ใน includes/ui.php และ <style> ของแต่ละหน้า
   (ห้ามใส่ class กลางชื่อทั่วไปอย่าง .btn/.modal/.field ที่นี่ — ชนกับ class เดิมของแต่ละหน้า)
   ============================================================ */

:root {
    color-scheme: dark;

    /* พื้น */
    --bg-page:    #0b1220;
    --bg-panel:   #1e293b;
    --bg-deep:    #0f172a;
    --bg-card:    #0b1220;
    --border:     #334155;
    --border-soft:#475569;

    /* ตัวอักษร */
    --text-main:  #e5e7eb;
    --text-dim:   #94a3b8;
    --text-faint: #64748b;
    --text-soft:  #cbd5e1;   /* รองจากหลัก (ชิป/ปุ่มรอง) */
    --text-strong:#ffffff;   /* ตัวอักษรตอน hover ที่เดิมเป็นขาว */

    /* สีนำของทั้งระบบ = ฟ้าน้ำเงิน */
    --accent:       #38bdf8;
    --accent-soft:  #7dd3fc;
    --accent-btn:   #2563eb;
    --accent-btn-hover: #3b82f6;

    /* สถานะ */
    --ok:    #34d399;
    --warn:  #fbbf24;
    --bad:   #fb7185;
    --ok-ink:   #6ee7b7;
    --warn-ink: #fcd34d;
    --bad-ink:  #fda4af;
    --blue-ink: #93c5fd;
    --purple-ink: #d8b4fe;
    --amber:    #f59e0b;   /* ส้ม "หลุดแล้วกลับมา" / ตัวอักษรเตือนส้ม */

    /* ดาวน์โหลด / อัพโหลด (สีเดียวกับแท่งในกราฟ) */
    --nm-down: #34d399;
    --nm-up:   #60a5fa;

    /* แท่งสถานะรายชั่วโมงในแถบสาขา — ความหมายเดิมทุกสี */
    --beat-empty:     #2f3f57;   /* ไม่มีข้อมูล */
    --beat-closed:    #33517f;   /* ปิดร้าน·เครื่องปิด (น้ำเงินเข้ม) */
    --beat-closed-on: #5fa8e6;   /* ปิดร้าน·เครื่องเปิด (น้ำเงินอ่อน) */
    --beat-partial:   #f59e0b;   /* หลุดแล้วกลับมา (ส้ม) */

    /* ปุ่มรองแบบทึบ (เดิม #334155 / hover #475569) */
    --btn-solid:       #334155;
    --btn-solid-hover: #475569;

    /* ผิวกระจก — แผง/การ์ด/ตาราง (blur ใช้เฉพาะแถบข้าง/แถบบนที่พื้นหลังนิ่ง) */
    --glass-bg: linear-gradient(155deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 46%, rgba(255,255,255,.045) 100%), rgba(15,23,42,.58);
    --glass-strong: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(17,26,46,.9);
    --glass-border: rgba(255,255,255,.09);
    --glass-hi: inset 0 1px 0 rgba(255,255,255,.08);
    --glass-shadow: 0 18px 40px rgba(0,0,0,.35);
    --glass-blur: blur(16px) saturate(140%);

    /* สีกลางที่เคย hard-code ไว้ตามจุดต่างๆ */
    --hover-bg:     rgba(148,163,184,.10);
    --thead-bg:     rgba(13,20,36,.92);
    --row-line:     rgba(148,163,184,.12);
    --btn-sec-bg:   rgba(51,65,85,.55);
    --btn-sec-hover:rgba(71,85,105,.8);
    --backdrop:     rgba(2,6,23,.6);
    --scroll-thumb: #33517f;
    --scroll-thumb-hover: #4f7bb5;

    /* แถบข้าง/แถบบน (กระจกเบลอ — พื้นข้างหลังนิ่ง) */
    --side-bg: linear-gradient(180deg, rgba(13,21,38,.78) 0%, rgba(9,14,26,.7) 100%);
    --topbar-bg: rgba(11,18,32,.62);

    /* แถบเตือน (ส้ม / แดง) */
    --amber-banner-bg: #78350f;
    --amber-banner-bd: #b45309;
    --amber-banner-tx: #fde68a;
    --amber-banner-hi: #fff7ed;
    --red-banner-bg: linear-gradient(135deg,#7f1d1d,#991b1b);
    --red-banner-bd: #ef4444;
    --red-banner-tx: #fecaca;

    /* กราฟ Chart.js (อ่านค่าด้วย getComputedStyle ตอนวาด/สลับธีม) */
    --chart-text:   #8aa0b8;
    --chart-legend: #e6edf5;
    --chart-total:  #e5edf7;
    --chart-total-fill: rgba(148,163,184,.10);
    --chart-others: #64748b;
    --chart-ping:   #f59e0b;
    --chart-gb:     #4ade80;

    /* ลายลูกบาศก์ 3D บนพื้นหลัง (นิ่ง ไม่ขยับ) */
    --art-cubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0L56 16L28 32L0 16Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M0 16L28 32L28 65L0 49Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M56 16L28 32L28 65L56 49Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M0 49L28 65L0 81L-28 65Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M-28 65L0 81L0 114L-28 98Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M28 65L0 81L0 114L28 98Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M56 49L84 65L56 81L28 65Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M28 65L56 81L56 114L28 98Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M84 65L56 81L56 114L84 98Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M0 -49L28 -33L0 -17L-28 -33Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M-28 -33L0 -17L0 16L-28 0Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M28 -33L0 -17L0 16L28 0Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M56 -49L84 -33L56 -17L28 -33Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M28 -33L56 -17L56 16L28 0Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M84 -33L56 -17L56 16L84 0Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M28 98L56 114L28 130L0 114Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M0 114L28 130L28 163L0 147Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M56 114L28 130L28 163L56 147Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M28 -98L56 -82L28 -66L0 -82Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M0 -82L28 -66L28 -33L0 -49Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M56 -82L28 -66L28 -33L56 -49Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M0 16L28 32L56 16M28 32V65M0 49L28 65L56 49M0 81V114M56 81V114M28 0V-17' fill='none' stroke='%23fff' stroke-opacity='0.05' stroke-width='.6'/%3E%3C/svg%3E");
    --art-glow: radial-gradient(900px 520px at 12% -8%, rgba(14,116,144,.28), transparent 70%),
                radial-gradient(800px 560px at 100% 110%, rgba(29,78,216,.22), transparent 70%);
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg-page:    #e8f1fa;
    --bg-panel:   #ffffff;
    --bg-deep:    #f6f9fc;
    --bg-card:    #ffffff;
    --border:     #d5e1ec;
    --border-soft:#bccbdb;

    --text-main:  #0f1e33;
    --text-dim:   #4a5d75;
    --text-faint: #6f8299;
    --text-soft:  #334155;
    --text-strong:#0f1e33;

    --accent:       #0284c7;
    --accent-soft:  #0369a1;
    --accent-btn:   #2563eb;
    --accent-btn-hover: #1d4ed8;

    --ok:    #059669;
    --warn:  #b45309;
    --bad:   #e11d48;
    --ok-ink:   #047857;
    --warn-ink: #92400e;
    --bad-ink:  #be123c;
    --blue-ink: #1d4ed8;
    --purple-ink: #7e22ce;
    --amber:    #b45309;

    --nm-down: #059669;
    --nm-up:   #2563eb;

    --beat-empty:     #d3dde8;
    --beat-closed:    #4b6487;
    --beat-closed-on: #8fc8f2;
    --beat-partial:   #f59e0b;

    --btn-solid:       #e2eaf3;
    --btn-solid-hover: #d3dfec;

    --glass-bg: linear-gradient(155deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 100%);
    --glass-strong: linear-gradient(155deg, #ffffff, rgba(255,255,255,.94));
    --glass-border: rgba(15,40,80,.10);
    --glass-hi: inset 0 1px 0 rgba(255,255,255,.9);
    --glass-shadow: 0 14px 34px rgba(30,64,120,.10);

    --hover-bg:     rgba(2,132,199,.07);
    --thead-bg:     rgba(241,246,251,.97);
    --row-line:     rgba(15,40,80,.08);
    --btn-sec-bg:   rgba(255,255,255,.9);
    --btn-sec-hover:#eaf2fa;
    --backdrop:     rgba(15,30,51,.35);
    --scroll-thumb: #bccbdb;
    --scroll-thumb-hover: #94a3b8;

    --side-bg: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(246,250,254,.78) 100%);
    --topbar-bg: rgba(255,255,255,.72);

    --amber-banner-bg: #fff7ed;
    --amber-banner-bd: #f59e0b;
    --amber-banner-tx: #7c2d12;
    --amber-banner-hi: #431407;
    --red-banner-bg: #fff1f2;
    --red-banner-bd: #fb7185;
    --red-banner-tx: #9f1239;

    --chart-text:   #4a5d75;
    --chart-legend: #0f1e33;
    --chart-total:  #0f2a4a;
    --chart-total-fill: rgba(15,42,74,.06);
    --chart-others: #94a3b8;
    --chart-ping:   #d97706;
    --chart-gb:     #059669;

    --art-cubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0L56 16L28 32L0 16Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M0 16L28 32L28 65L0 49Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M56 16L28 32L28 65L56 49Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M0 49L28 65L0 81L-28 65Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M-28 65L0 81L0 114L-28 98Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M28 65L0 81L0 114L28 98Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M56 49L84 65L56 81L28 65Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M28 65L56 81L56 114L28 98Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M84 65L56 81L56 114L84 98Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M0 -49L28 -33L0 -17L-28 -33Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M-28 -33L0 -17L0 16L-28 0Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M28 -33L0 -17L0 16L28 0Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M56 -49L84 -33L56 -17L28 -33Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M28 -33L56 -17L56 16L28 0Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M84 -33L56 -17L56 16L84 0Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M28 98L56 114L28 130L0 114Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M0 114L28 130L28 163L0 147Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M56 114L28 130L28 163L56 147Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M28 -98L56 -82L28 -66L0 -82Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M0 -82L28 -66L28 -33L0 -49Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M56 -82L28 -66L28 -33L56 -49Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M0 16L28 32L56 16M28 32V65M0 49L28 65L56 49M0 81V114M56 81V114M28 0V-17' fill='none' stroke='%230b3a66' stroke-opacity='0.06' stroke-width='.6'/%3E%3C/svg%3E");
    --art-glow: radial-gradient(900px 520px at 10% -10%, rgba(125,211,252,.45), transparent 70%),
                radial-gradient(800px 560px at 100% 110%, rgba(147,197,253,.4), transparent 70%);
}

/* พื้นหลัง: แสงฟุ้ง + ลายลูกบาศก์ 3D จางลงตรงกลาง (ชั้น fixed แยก ไม่วาดใหม่ตอนเลื่อน) */
body.nm-body { background: var(--bg-page); color: var(--text-main); }
body.nm-body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--art-glow), var(--art-cubes) 0 0 / 112px 196px;
    -webkit-mask-image: radial-gradient(130% 95% at 60% 40%, rgba(0,0,0,.35) 0%, #000 75%);
            mask-image: radial-gradient(130% 95% at 60% 40%, rgba(0,0,0,.35) 0%, #000 75%);
}

/* แผงกระจกใช้ซ้ำ */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-hi), var(--glass-shadow);
    border-radius: 1rem;
}

/* ช่องวันที่ (เดิมบังคับ color-scheme:dark) — โหมดสว่างใช้ปฏิทินสว่าง */
:root[data-theme="light"] input[type=date] { color-scheme: light; }

/* ---- ปฏิทิน flatpickr (หน้ารีพอร์ท/ประวัติหลุดโหลดธีม dark.css จาก CDN อยู่แล้ว) — โหมดสว่างทาสีทับ ---- */
:root[data-theme="light"] .flatpickr-calendar { background: #ffffff; box-shadow: 0 14px 34px rgba(30,64,120,.18); border: 1px solid #d5e1ec; }
:root[data-theme="light"] .flatpickr-calendar.arrowTop::after { border-bottom-color: #ffffff; }
:root[data-theme="light"] .flatpickr-calendar.arrowBottom::after { border-top-color: #ffffff; }
:root[data-theme="light"] .flatpickr-months .flatpickr-month,
:root[data-theme="light"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-theme="light"] span.flatpickr-weekday,
:root[data-theme="light"] .flatpickr-weekdays { background: #ffffff; color: #0f1e33; fill: #0f1e33; }
:root[data-theme="light"] .flatpickr-current-month input.cur-year { color: #0f1e33; }
:root[data-theme="light"] .flatpickr-months .flatpickr-prev-month,
:root[data-theme="light"] .flatpickr-months .flatpickr-next-month { color: #0f1e33; fill: #0f1e33; }
:root[data-theme="light"] .flatpickr-months .flatpickr-prev-month:hover svg,
:root[data-theme="light"] .flatpickr-months .flatpickr-next-month:hover svg { fill: #0284c7; }
:root[data-theme="light"] .flatpickr-day { color: #0f1e33; }
:root[data-theme="light"] .flatpickr-day:hover,
:root[data-theme="light"] .flatpickr-day:focus { background: #e0f2fe; border-color: #e0f2fe; }
:root[data-theme="light"] .flatpickr-day.today { border-color: #0284c7; }
:root[data-theme="light"] .flatpickr-day.prevMonthDay,
:root[data-theme="light"] .flatpickr-day.nextMonthDay,
:root[data-theme="light"] .flatpickr-day.flatpickr-disabled { color: rgba(15,30,51,.3); }
:root[data-theme="light"] .flatpickr-day.selected,
:root[data-theme="light"] .flatpickr-day.selected:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; }
:root[data-theme="light"] .numInputWrapper span.arrowUp::after { border-bottom-color: #0f1e33; }
:root[data-theme="light"] .numInputWrapper span.arrowDown::after { border-top-color: #0f1e33; }

/* ============================================================
   ปุ่มสลับโหมด — ล้างสไตล์ button กลางของบางหน้า (button{background..} / button:hover{..})
   ที่จะทับแคปซูล (ความเฉพาะเจาะจงสูงกว่า button:hover จึงชนะเสมอ)
   ============================================================ */
button.theme-toggle, button.theme-toggle:hover, button.theme-toggle:focus, button.theme-toggle:active {
    background: none; border: 0; padding: 0; margin: 0; min-width: 0; color: inherit;
    box-shadow: none; filter: none; font-size: inherit; transform: none; border-radius: 999px;
}

/* ============================================================
   ปุ่มสลับโหมดมืด/สว่าง — แคปซูลฉากกลางคืน ⇄ กลางวัน
   มืด: ฟ้าคืน ดาวกะพริบ ดาวตก เมฆ พระจันทร์เต็มดวงเรืองแสงอยู่ขวา
   สว่าง: ฟ้ากลางวัน เมฆขาว พระอาทิตย์อยู่ซ้าย
   ขยับแค่ transform/opacity เท่านั้น (ไม่แตะ box-shadow/filter ใน keyframes)
   ============================================================ */
.theme-toggle {
    --tt-w: 64px; --tt-h: 30px; --tt-k: 24px;
    position: relative; flex: 0 0 auto; width: var(--tt-w); height: var(--tt-h);
    padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle .tt-track {
    position: absolute; inset: 0; overflow: hidden; border-radius: inherit; isolation: isolate;
    background: linear-gradient(180deg, #070b24 0%, #141c4a 62%, #24306b 100%);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.08),
                0 0 0 1px rgba(255,255,255,.1), 0 6px 18px rgba(8,12,40,.45);
}
/* ฟ้ากลางวัน — ซ้อนทับแล้วค่อยๆ เฟดเข้า */
.theme-toggle .tt-track::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
    background: linear-gradient(180deg, #3aa0f0 0%, #6fc3ff 60%, #a9dcff 100%);
    transition: opacity .5s ease;
}
/* ดาว */
.theme-toggle .tt-stars {
    position: absolute; inset: 0; z-index: 1; transition: opacity .4s ease;
    background:
        radial-gradient(1px 1px at 12% 28%, #fff 99%, transparent),
        radial-gradient(1px 1px at 24% 62%, #dbe6ff 99%, transparent),
        radial-gradient(1.4px 1.4px at 36% 22%, #fff 99%, transparent),
        radial-gradient(1px 1px at 47% 48%, #c7d6ff 99%, transparent),
        radial-gradient(1px 1px at 58% 18%, #fff 99%, transparent),
        radial-gradient(1.2px 1.2px at 30% 40%, #fff 99%, transparent),
        radial-gradient(1px 1px at 8% 70%, #dbe6ff 99%, transparent);
    animation: tt-twinkle 3.2s ease-in-out infinite;
}
@keyframes tt-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* ดาวตก */
.theme-toggle .tt-shoot {
    position: absolute; z-index: 1; top: 6px; left: 46%; width: 14px; height: 1px; opacity: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
    transform: rotate(-28deg);
    animation: tt-shoot 5.5s ease-in 1.5s infinite;
}
@keyframes tt-shoot {
    0%, 82% { opacity: 0; transform: translate(0, 0) rotate(-28deg); }
    86% { opacity: 1; }
    94%, 100% { opacity: 0; transform: translate(-20px, 11px) rotate(-28deg); }
}
/* จันทร์เสี้ยวเล็กมุมซ้าย (ตอนกลางคืน) */
.theme-toggle .tt-crescent {
    position: absolute; z-index: 1; left: 9px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
    box-shadow: 3px -2px 0 0 #f6c453; transform: rotate(-20deg); transition: opacity .35s ease, transform .5s ease;
}
/* เมฆ — ก้อนกลมซ้อนกันแถวล่าง 2 ชั้น */
.theme-toggle .tt-clouds, .theme-toggle .tt-clouds::before {
    position: absolute; left: -6px; right: -6px; bottom: -6px; height: 18px; z-index: 2;
    background:
        radial-gradient(circle at 6% 100%,  var(--tt-cloud) 0 8px,  transparent 8.5px),
        radial-gradient(circle at 20% 90%,  var(--tt-cloud) 0 9px,  transparent 9.5px),
        radial-gradient(circle at 34% 100%, var(--tt-cloud) 0 7px,  transparent 7.5px),
        radial-gradient(circle at 50% 95%,  var(--tt-cloud) 0 10px, transparent 10.5px),
        radial-gradient(circle at 66% 100%, var(--tt-cloud) 0 8px,  transparent 8.5px),
        radial-gradient(circle at 82% 92%,  var(--tt-cloud) 0 9px,  transparent 9.5px),
        radial-gradient(circle at 96% 100%, var(--tt-cloud) 0 8px,  transparent 8.5px);
    transition: transform .6s cubic-bezier(.65,.05,.36,1);
}
.theme-toggle .tt-clouds { --tt-cloud: rgba(170,190,240,.55); }
.theme-toggle .tt-clouds::before {
    content: ""; left: -2px; right: -10px; bottom: 5px; z-index: -1;
    --tt-cloud: rgba(120,140,210,.35); transform: translateX(6px);
}
/* ลูกบิด = พระจันทร์ (มืด) / พระอาทิตย์ (สว่าง) */
.theme-toggle .tt-knob {
    position: absolute; z-index: 3; top: calc((var(--tt-h) - var(--tt-k)) / 2); left: 3px;
    width: var(--tt-k); height: var(--tt-k); border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #ffffff 0%, #eef2fb 45%, #c8d2e8 100%);
    box-shadow: 0 0 8px 2px rgba(220,230,255,.55), 0 0 22px 6px rgba(150,170,255,.28), inset -2px -2px 4px rgba(120,135,170,.35);
    transform: translateX(calc(var(--tt-w) - var(--tt-k) - 6px));
    transition: transform .55s cubic-bezier(.65,.05,.36,1), background .5s ease, box-shadow .5s ease;
}
/* หลุมบนดวงจันทร์ */
.theme-toggle .tt-knob::before, .theme-toggle .tt-knob::after {
    content: ""; position: absolute; border-radius: 50%; background: rgba(140,155,190,.45); transition: opacity .3s ease;
}
.theme-toggle .tt-knob::before { width: 6px; height: 6px; top: 6px; left: 12px; }
.theme-toggle .tt-knob::after  { width: 4px; height: 4px; top: 14px; left: 6px; }

:root[data-theme="light"] .theme-toggle .tt-track::before { opacity: 1; }
:root[data-theme="light"] .theme-toggle .tt-stars,
:root[data-theme="light"] .theme-toggle .tt-shoot { opacity: 0; animation: none; }
:root[data-theme="light"] .theme-toggle .tt-crescent { opacity: 0; transform: rotate(-20deg) translateY(-8px); }
:root[data-theme="light"] .theme-toggle .tt-clouds { --tt-cloud: rgba(255,255,255,.95); transform: translateX(-4px); }
:root[data-theme="light"] .theme-toggle .tt-clouds::before { --tt-cloud: rgba(255,255,255,.7); }
:root[data-theme="light"] .theme-toggle .tt-knob {
    transform: translateX(0);
    background: radial-gradient(circle at 35% 32%, #fff8cf 0%, #ffd84a 48%, #f6a823 100%);
    box-shadow: 0 0 8px 2px rgba(255,214,90,.7), 0 0 22px 7px rgba(255,190,60,.35), inset -2px -2px 4px rgba(214,120,10,.35);
}
:root[data-theme="light"] .theme-toggle .tt-knob::before,
:root[data-theme="light"] .theme-toggle .tt-knob::after { opacity: 0; }
:root[data-theme="light"] .theme-toggle .tt-track {
    box-shadow: inset 0 2px 6px rgba(10,60,120,.35), inset 0 -1px 0 rgba(255,255,255,.4),
                0 0 0 1px rgba(15,40,80,.12), 0 6px 16px rgba(30,100,180,.25);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle *, .theme-toggle *::before, .theme-toggle *::after { animation: none !important; transition: none !important; }
}