/* บังคับ HTML5 hidden attribute ให้ทำงานเสมอ ไม่ว่า element นั้นจะมี display:flex/grid */
[hidden] { display: none !important; }

:root {
    color-scheme: light;
    /* ===== Theme Variables (default light theme) ===== */
    --card-bg: #ffffff;
    --card-bg-soft: #f8f9fa;
    --card-bg-softer: #eef1f4;
    --card-text: #2d3436;
    --card-text-muted: #636e72;
    --card-text-soft: #95a5a6;
    --card-text-faint: #b2bec3;
    --card-border: #dfe6e9;
    --card-border-soft: #e8ecef;
    --card-shadow: rgba(0,0,0,0.15);
    --card-shadow-soft: rgba(0,0,0,0.08);
    --accent: #0984e3;
    --accent-soft: #74b9ff;
    --accent-bg: #f0f6fc;
    --accent-bg-strong: #e8f4fd;
    --skel-base: #eef1f4;
    --skel-shine: #dde3e8;
    --input-bg: #ffffff;
    --input-text: #2d3436;
    --input-border: #dfe6e9;
    --topnav-bg: rgba(255,255,255,0.15);
    --footer-color: rgba(255,255,255,0.85);
    --footer-link: #ffffff;
}

/* Dark theme variable overrides — affects ALL widgets via vars */
body.theme-dark {
    --card-bg: #2c3e50;
    --card-bg-soft: #34495e;
    --card-bg-softer: #3d566e;
    --card-text: #ecf0f1;
    --card-text-muted: #bdc3c7;
    --card-text-soft: #95a5a6;
    --card-text-faint: #7f8c8d;
    --card-border: #455a73;
    --card-border-soft: #3d566e;
    --card-shadow: rgba(0,0,0,0.4);
    --card-shadow-soft: rgba(0,0,0,0.25);
    --accent: #74b9ff;
    --accent-soft: #0984e3;
    --accent-bg: rgba(116,185,255,0.12);
    --accent-bg-strong: rgba(116,185,255,0.2);
    --skel-base: #34495e;
    --skel-shine: #455a73;
    --input-bg: #34495e;
    --input-text: #ecf0f1;
    --input-border: #4a627a;
    --topnav-bg: rgba(0,0,0,0.35);
    --footer-color: rgba(255,255,255,0.85);
    --footer-link: #74b9ff;
}

/* ===== Tom Select Theme Override ===== */
.ts-wrapper {
    font-family: inherit;
}

.ts-wrapper .ts-control {
    border: 1.5px solid #dfe6e9 !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    background: #ffffff !important;
    color: #2d3436 !important;
    font-size: 0.92rem !important;
    min-height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    cursor: pointer !important;
}

.ts-wrapper:not(.disabled).focus .ts-control,
.ts-wrapper .ts-control:hover {
    border-color: #0984e3 !important;
}

.ts-wrapper:not(.disabled).focus .ts-control {
    box-shadow: 0 0 0 3px rgba(9,132,227,0.15) !important;
}

.ts-wrapper.single .ts-control {
    background-image: none !important;
    padding-right: 36px !important;
}

.ts-wrapper.single .ts-control::after {
    content: '\f0d7';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #95a5a6;
    pointer-events: none;
    font-size: 0.7rem;
}

/* Item ที่เลือกแล้ว */
.ts-wrapper .ts-control > .item {
    color: #2d3436 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 500;
}

/* Dropdown */
.ts-dropdown {
    border: 1px solid #e8ecef !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    margin-top: 4px !important;
    padding: 6px !important;
    background: white !important;
    overflow: hidden !important;
}

.ts-dropdown .option {
    padding: 9px 12px !important;
    border-radius: 8px !important;
    color: #2d3436 !important;
    font-size: 0.9rem !important;
    transition: background 0.12s !important;
    margin: 1px 0 !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: #f0f6fc !important;
    color: #0984e3 !important;
}

.ts-dropdown .option.selected {
    background: #e8f4fd !important;
    color: #0984e3 !important;
    font-weight: 600 !important;
}

.ts-dropdown .option[data-selectable] {
    cursor: pointer;
}

/* Tom Select arrow ใหม่ — ใช้ SVG */
.ts-wrapper.single .ts-control {
    position: relative;
}

.ts-wrapper.single .ts-control::before {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2395a5a6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.2s;
    pointer-events: none;
}

.ts-wrapper.single.dropdown-active .ts-control::before {
    transform: translateY(-50%) rotate(180deg);
}

.ts-wrapper.single .ts-control::after { display: none; }

/* รองรับใน custom channel rows (เล็กกว่า) */
.custom-channel-row .ts-wrapper .ts-control {
    padding: 7px 12px !important;
    font-size: 0.85rem !important;
}

/* ===== Skeleton Loader ===== */
.skel {
    background: linear-gradient(90deg, #eef1f4 25%, #dde3e8 50%, #eef1f4 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

.skel::after { content: '\00a0'; }

.skel-line {
    height: 10px;
    border-radius: 4px;
    margin: 6px 0;
}

.skel-line.w-20  { width: 20%; }
.skel-line.w-30  { width: 30%; }
.skel-line.w-40  { width: 40%; }
.skel-line.w-50  { width: 50%; }
.skel-line.w-60  { width: 60%; }
.skel-line.w-70  { width: 70%; }
.skel-line.w-80  { width: 80%; }
.skel-line.w-100 { width: 100%; }

.skel-block {
    border-radius: 12px;
    background: linear-gradient(90deg, #eef1f4 25%, #dde3e8 50%, #eef1f4 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel-circle {
    border-radius: 50%;
    background: linear-gradient(90deg, #eef1f4 25%, #dde3e8 50%, #eef1f4 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}

@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton variants — news item, rain card, weather card */
.skel-news-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 4px solid #dfe6e9;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.skel-news-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
}

.skel-news-body { flex: 1; }

.skel-rain-card {
    border-radius: 14px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef1f4 100%);
    padding: 16px;
    border-left: 5px solid #dfe6e9;
    min-height: 220px;
}

.skel-rain-card .skel-line { background-color: rgba(0,0,0,0.08); }
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== Flaticon Base ===== */
.fi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.fi::before { line-height: 1; }

.fi-lg { font-size: 1.4rem; }
.fi-xl { font-size: 2rem; }
.fi-2x { font-size: 2.6rem; }
.fi-3x { font-size: 3.4rem; }

/* Icon ในการ์ดและส่วนต่างๆ ปรับให้พอดี */
h1 .fi, h2 .fi, h3 .fi {
    margin-right: 6px;
    font-size: 0.9em;
    color: #0984e3;
}

button .fi, .btn-locate .fi, .btn-primary .fi {
    margin-right: 4px;
}

.cl-icon .fi {
    font-size: 2rem;
    color: #0984e3;
}

.cm-emoji .fi,
.sun-emoji .fi {
    font-size: 1.8rem;
    color: #f39c12;
}

/* Sun widget — Meteocons animated icons (sunrise/sunset) */
.sun-emoji .meteo-icon,
.sun-emoji .meteo-icon > img,
.sun-emoji .meteo-icon > svg {
    width: 44px;
    height: 44px;
    display: block;
}
.sun-emoji .meteo-icon { display: inline-flex; align-items: center; justify-content: center; }
.sun-label-icon .meteo-icon,
.sun-label-icon .meteo-icon > img {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.rainfall-sub .fi { color: inherit; }

.rc-stat-label .fi { color: #636e72; font-size: 0.9em; }
.rc-soil-label .fi { color: #0984e3; font-size: 0.9em; }

.widget-drag-handle .fi { font-size: 0.95rem; }
.widget-remove .fi { font-size: 0.75rem; }
.widget-resize-handle .fi { font-size: 0.85rem; transform: rotate(45deg); }

/* nav icons */
.brand .fi, .nav-right .fi { margin-right: 4px; color: rgba(255,255,255,0.95); }
.brand .fi { color: white; font-size: 1.1em; }

body {
    font-family: 'K2D', -apple-system, "Sukhumvit Set", "Helvetica Neue", sans-serif;
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: #2d3436;
    padding: 20px;
    padding-top: 92px; /* เว้นที่ให้ .topnav แบบ fixed */
    transition: background 0.4s ease;
}

/* ===== Font Themes ===== */
body.font-sarabun       { font-family: 'Sarabun', 'Sukhumvit Set', sans-serif; }
body.font-prompt        { font-family: 'Prompt', 'Sukhumvit Set', sans-serif; }
body.font-kanit         { font-family: 'Kanit', 'Sukhumvit Set', sans-serif; }
body.font-mitr          { font-family: 'Mitr', 'Sukhumvit Set', sans-serif; }
body.font-anuphan       { font-family: 'Anuphan', 'Sukhumvit Set', sans-serif; }
body.font-k2d           { font-family: 'K2D', 'Sukhumvit Set', sans-serif; }
body.font-itim          { font-family: 'Itim', 'Sukhumvit Set', cursive; }
body.font-mali          { font-family: 'Mali', 'Sukhumvit Set', cursive; }
body.font-noto-thai     { font-family: 'Noto Sans Thai', 'Sukhumvit Set', sans-serif; }
body.font-ibm-plex-thai { font-family: 'IBM Plex Sans Thai', 'Sukhumvit Set', sans-serif; }

/* ===== Color Themes (เปลี่ยน background + accent) ===== */
body.theme-ocean {
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); background-attachment: fixed;
    --accent: #0e7490;
    --accent-soft: #6dd5ed;
    --accent-bg: rgba(33,147,176,0.12);
    --accent-bg-strong: rgba(33,147,176,0.22);
}
body.theme-sunset {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); background-attachment: fixed;
    --accent: #d35400;
    --accent-soft: #feb47b;
    --accent-bg: rgba(255,126,95,0.14);
    --accent-bg-strong: rgba(255,126,95,0.24);
}
body.theme-forest {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); background-attachment: fixed;
    --accent: #11998e;
    --accent-soft: #38ef7d;
    --accent-bg: rgba(17,153,142,0.14);
    --accent-bg-strong: rgba(17,153,142,0.24);
}
body.theme-lavender {
    background: linear-gradient(135deg, #9d50bb 0%, #6e48aa 100%); background-attachment: fixed;
    --accent: #8e44ad;
    --accent-soft: #c39bd3;
    --accent-bg: rgba(157,80,187,0.14);
    --accent-bg-strong: rgba(157,80,187,0.24);
}
body.theme-rose {
    background: linear-gradient(135deg, #ff5e7e 0%, #ffaaa5 100%); background-attachment: fixed;
    --accent: #e91e63;
    --accent-soft: #ffaaa5;
    --accent-bg: rgba(255,94,126,0.14);
    --accent-bg-strong: rgba(255,94,126,0.24);
}
body.theme-dark { background: linear-gradient(135deg, #232526 0%, #414345 100%); background-attachment: fixed; }

/* ===== Additional light themes ===== */
body.theme-mint {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); background-attachment: fixed;
    --accent: #00897b;
    --accent-soft: #84fab0;
    --accent-bg: rgba(0,137,123,0.14);
    --accent-bg-strong: rgba(0,137,123,0.24);
}
body.theme-citrus {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); background-attachment: fixed;
    --accent: #f57c00;
    --accent-soft: #fda085;
    --accent-bg: rgba(245,124,0,0.14);
    --accent-bg-strong: rgba(245,124,0,0.24);
}
body.theme-slate {
    background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%); background-attachment: fixed;
    --accent: #455a64;
    --accent-soft: #90a4ae;
    --accent-bg: rgba(69,90,100,0.10);
    --accent-bg-strong: rgba(69,90,100,0.20);
}
body.theme-cherry {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); background-attachment: fixed;
    --accent: #c2185b;
    --accent-soft: #f093fb;
    --accent-bg: rgba(194,24,91,0.14);
    --accent-bg-strong: rgba(194,24,91,0.24);
}

/* ===== Additional dark themes ===== */
/* ต้องอยู่หลัง body.theme-dark { background: ... } เพื่อ override gradient */
body.theme-dark.theme-midnight {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); background-attachment: fixed;
    --accent: #74b9ff;
    --accent-soft: #5dade2;
    --accent-bg: rgba(116,185,255,0.16);
    --accent-bg-strong: rgba(116,185,255,0.28);
}
body.theme-dark.theme-nocturne {
    background: linear-gradient(135deg, #1a0033 0%, #4a148c 100%); background-attachment: fixed;
    --accent: #ba68c8;
    --accent-soft: #ce93d8;
    --accent-bg: rgba(186,104,200,0.16);
    --accent-bg-strong: rgba(186,104,200,0.28);
}
body.theme-dark.theme-coal {
    background: linear-gradient(135deg, #000000 0%, #1c1c1c 100%); background-attachment: fixed;
    --accent: #ff6b6b;
    --accent-soft: #ff8a80;
    --accent-bg: rgba(255,107,107,0.16);
    --accent-bg-strong: rgba(255,107,107,0.28);
}
body.theme-dark.theme-emerald {
    background: linear-gradient(135deg, #0b3d2e 0%, #134e3a 50%, #1e6b50 100%); background-attachment: fixed;
    --accent: #4ade80;
    --accent-soft: #6ee7a7;
    --accent-bg: rgba(74,222,128,0.16);
    --accent-bg-strong: rgba(74,222,128,0.28);
}
body.theme-dark.theme-crimson {
    background: linear-gradient(135deg, #2a0a14 0%, #5c0a24 50%, #7a1335 100%); background-attachment: fixed;
    --accent: #ff5e7e;
    --accent-soft: #ff8aa5;
    --accent-bg: rgba(255,94,126,0.16);
    --accent-bg-strong: rgba(255,94,126,0.28);
}
/* New dark themes — มาคู่กับ auto-mint / auto-citrus / auto-slate / auto-cherry */
body.theme-dark.theme-pine {
    background: linear-gradient(135deg, #0a2f1f 0%, #0e4734 50%, #186b4f 100%); background-attachment: fixed;
    --accent: #5eead4;
    --accent-soft: #99f6e4;
    --accent-bg: rgba(94,234,212,0.16);
    --accent-bg-strong: rgba(94,234,212,0.28);
}
body.theme-dark.theme-ember {
    background: linear-gradient(135deg, #2b1404 0%, #5a2a0c 50%, #8a3f12 100%); background-attachment: fixed;
    --accent: #fbbf24;
    --accent-soft: #fcd34d;
    --accent-bg: rgba(251,191,36,0.16);
    --accent-bg-strong: rgba(251,191,36,0.28);
}
body.theme-dark.theme-graphite {
    background: linear-gradient(135deg, #1b1f24 0%, #262c33 50%, #3a4148 100%); background-attachment: fixed;
    --accent: #94a3b8;
    --accent-soft: #cbd5e1;
    --accent-bg: rgba(148,163,184,0.16);
    --accent-bg-strong: rgba(148,163,184,0.28);
}
body.theme-dark.theme-plum {
    background: linear-gradient(135deg, #2d0a1f 0%, #4f1338 50%, #7a1d52 100%); background-attachment: fixed;
    --accent: #f472b6;
    --accent-soft: #f9a8d4;
    --accent-bg: rgba(244,114,182,0.16);
    --accent-bg-strong: rgba(244,114,182,0.28);
}

/* ===== Parallax themes — animated floating blob background (เหมือนหน้า login) ===== */
body.theme-dark.theme-aurora,
body.theme-dark.theme-nebula,
body.theme-dark.theme-eclipse {
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}
body.theme-dark.theme-aurora {
    background: linear-gradient(135deg,#1a2540 0%,#0a1230 50%,#0e1a3a 100%);
    --accent: #74b9ff;
    --accent-soft: #5dade2;
    --accent-bg: rgba(116,185,255,0.16);
    --accent-bg-strong: rgba(116,185,255,0.28);
    --px-blob1: rgba(116,185,255,0.45);
    --px-blob2: rgba(162,155,254,0.4);
    --px-blob3: rgba(0,206,201,0.35);
}
body.theme-dark.theme-nebula {
    background: linear-gradient(135deg,#1c0f3a 0%,#0d0530 50%,#2a124d 100%);
    --accent: #a29bfe;
    --accent-soft: #d6c5ff;
    --accent-bg: rgba(162,155,254,0.16);
    --accent-bg-strong: rgba(162,155,254,0.28);
    --px-blob1: rgba(162,155,254,0.45);
    --px-blob2: rgba(255,99,196,0.4);
    --px-blob3: rgba(116,185,255,0.32);
}
body.theme-dark.theme-eclipse {
    background: linear-gradient(135deg,#2d1b1a 0%,#0f0a14 50%,#1f0f1a 100%);
    --accent: #ff7e5f;
    --accent-soft: #feb47b;
    --accent-bg: rgba(255,126,95,0.16);
    --accent-bg-strong: rgba(255,126,95,0.28);
    --px-blob1: rgba(255,126,95,0.42);
    --px-blob2: rgba(255,99,99,0.38);
    --px-blob3: rgba(254,180,123,0.32);
}
/* animated floating blobs — fixed position (ไม่เลื่อนตาม scroll) */
body.theme-aurora::before,
body.theme-aurora::after,
body.theme-nebula::before,
body.theme-nebula::after,
body.theme-eclipse::before,
body.theme-eclipse::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
body.theme-aurora::before,
body.theme-nebula::before,
body.theme-eclipse::before {
    width: 560px; height: 560px;
    top: -140px; left: -140px;
    background: radial-gradient(circle, var(--px-blob1, rgba(116,185,255,0.45)), transparent 70%);
    animation: theme-blob1 20s ease-in-out infinite alternate;
}
body.theme-aurora::after,
body.theme-nebula::after,
body.theme-eclipse::after {
    width: 660px; height: 660px;
    bottom: -180px; right: -200px;
    background: radial-gradient(circle, var(--px-blob2, rgba(162,155,254,0.4)), transparent 70%);
    animation: theme-blob2 24s ease-in-out infinite alternate;
}
@keyframes theme-blob1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 100px) scale(1.12); }
}
@keyframes theme-blob2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-100px, -60px) scale(1.08); }
}
/* container ต้องมี z-index สูงกว่า blobs เพื่อให้คลิกได้ */
body.theme-aurora .container,
body.theme-nebula .container,
body.theme-eclipse .container { position: relative; z-index: 1; }
body.theme-aurora .topnav,
body.theme-nebula .topnav,
body.theme-eclipse .topnav { z-index: 1000; }
@media (prefers-reduced-motion: reduce) {
    body.theme-aurora::before, body.theme-aurora::after,
    body.theme-nebula::before, body.theme-nebula::after,
    body.theme-eclipse::before, body.theme-eclipse::after { animation: none; }
}

/* Dark mode adjustments — text/nav contrast */
body.theme-dark .topnav { background: rgba(0,0,0,0.35); }
body.theme-dark .footer { color: rgba(255,255,255,0.85); }
body.theme-dark .footer a { color: #74b9ff; }

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== App splash (first load) =====
   พื้นหลังโปร่งใส — สืบทอดธีมที่ user เลือก (body's gradient ส่องผ่าน)
   + scrim บางๆ (frosted blur) เพื่อให้เนื้อหาหลังกลายเป็นพื้นหลังนุ่มๆ */
.app-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    transition: opacity 0.45s ease, visibility 0.45s ease;
    /* Safety net — auto-fade ใน 8s ถ้า JS โหลดไม่สำเร็จ (กันค้างถาวร) */
    animation: app-splash-failsafe 9s ease forwards;
}
@keyframes app-splash-failsafe {
    0%, 88%   { opacity: 1; visibility: visible; pointer-events: auto; }
    100%      { opacity: 0; visibility: hidden;  pointer-events: none; }
}
/* default fallback — ตอน body ยังไม่ได้ apply theme (เช่น user ยังไม่ login) */
body:not([class*="theme-"]) .app-splash {
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
}
.app-splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.app-splash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 20px 60px rgba(15,52,96,0.3);
    color: #fff;
    animation: app-splash-pop 0.4s ease both;
}
@keyframes app-splash-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-splash-logo {
    width: 240px;
    height: 240px;
    border-radius: 32px;
    object-fit: contain;
    display: flex; align-items: center; justify-content: center;
}
.app-splash-logo-img {
    background: transparent;
    padding: 0;
}
.app-splash-logo-default {
    background: rgba(255,255,255,0.2);
}
.app-splash-logo-default .fi { font-size: 4rem; color: #fff; }
.app-splash-spinner {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.app-splash-spinner span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    animation: app-splash-dot 1.2s ease-in-out infinite;
}
.app-splash-spinner span:nth-child(2) { animation-delay: 0.15s; }
.app-splash-spinner span:nth-child(3) { animation-delay: 0.3s; }
@keyframes app-splash-dot {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%           { transform: scale(1); opacity: 1; }
}
.app-splash-text {
    font-size: 0.85rem;
    opacity: 0.9;
}
/* Adapt to dark theme — สลับสีตอน user theme เป็นมืด */
body.theme-dark .app-splash {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
}

/* ===== Top Nav (fixed) ===== */
.topnav {
    position: fixed;
    top: 12px;
    left: 16px;
    right: 16px;
    z-index: 1000;       /* ต้องสูงกว่า Leaflet panes (200-700) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: 12px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 6px 24px rgba(15,52,96,0.16);
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 10px;
}

/* Leaflet ต้องไม่ทับ topnav + dropdowns */
.leaflet-pane,
.leaflet-top,
.leaflet-bottom { z-index: 400 !important; }
.leaflet-control { z-index: 500 !important; }
.leaflet-popup-pane { z-index: 600 !important; }

.topnav .brand {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* legacy nav rules kept minimal — nav-pill is the new standard */

/* ===== Auth Pages ===== */
body.auth-body { padding: 0; overflow: hidden; }
/* form ยาวเกินจอ (เช่น ลงทะเบียนหน่วยงาน) — ปลดล็อก scroll */
body.auth-body-scroll { overflow-y: auto; }
body.auth-body-scroll .auth-wrap {
    align-items: flex-start;
    min-height: 100vh;
    overflow: visible;
    padding-top: 40px; padding-bottom: 40px;
}
.auth-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* ใช้โทนสี "ฟ้าคลาสสิค" — ตรงกับ theme default ของระบบ */
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    overflow: hidden;
}
/* ===== Parallax background — 4 ชั้น layered floating blobs ===== */
.auth-wrap::before,
.auth-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.auth-wrap::before {
    width: 520px; height: 520px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(116,185,255,0.3) 50%, transparent 75%);
    animation: parallax-blob1 18s ease-in-out infinite alternate;
}
.auth-wrap::after {
    width: 620px; height: 620px;
    bottom: -160px; right: -180px;
    background: radial-gradient(circle, rgba(162,155,254,0.5), rgba(108,92,231,0.28) 50%, transparent 75%);
    animation: parallax-blob2 22s ease-in-out infinite alternate;
}
.auth-bg-stars {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.35), transparent),
        radial-gradient(2px 2px at 15% 75%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 92% 45%, rgba(255,255,255,0.35), transparent);
    animation: parallax-stars 60s linear infinite;
    pointer-events: none;
}
.auth-bg-blob3 {
    position: absolute; z-index: 0; pointer-events: none;
    width: 360px; height: 360px;
    top: 40%; left: 60%;
    border-radius: 50%;
    filter: blur(70px);
    background: radial-gradient(circle, rgba(0,206,201,0.45), rgba(0,184,148,0.22) 60%, transparent 80%);
    animation: parallax-blob3 26s ease-in-out infinite alternate;
}
@keyframes parallax-blob1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 80px) scale(1.12); }
}
@keyframes parallax-blob2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-80px, -50px) scale(1.08); }
}
@keyframes parallax-blob3 {
    0%   { transform: translate(0, 0) scale(0.9); }
    100% { transform: translate(-120px, 60px) scale(1.15); }
}
@keyframes parallax-stars {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100px, -60px); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-wrap::before, .auth-wrap::after, .auth-bg-blob3, .auth-bg-stars { animation: none; }
}

.auth-card {
    position: relative;
    /* โทนฟ้าคลาสสิคแบบเข้มกว่า bg เล็กน้อย — สีคล้าย accent ของ theme default (#0984e3) */
    background: rgba(9, 86, 159, 0.62);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 30px 80px rgba(9,52,96,0.4), 0 1px 0 rgba(255,255,255,0.08) inset;
    width: 100%;
    max-width: 420px;
    color: #f5f9fc;
    z-index: 2;
}
/* card กว้างขึ้น — สำหรับฟอร์มที่มี field เยอะ (เช่น ลงทะเบียนหน่วยงาน) */
.auth-card.auth-card-wide {
    max-width: 640px;
    padding: 40px 44px;
}
@media (max-width: 700px) {
    .auth-card.auth-card-wide { max-width: 100%; padding: 28px 22px; }
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.auth-logo-img {
    max-width: 240px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
}
.auth-logo .fi {
    font-size: 3.5rem;
    color: var(--accent, #74b9ff);
}

.auth-title {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: #ffffff;
}

.auth-sub {
    text-align: center;
    color: rgba(255,255,255,0.72);
    margin-bottom: 24px;
    font-size: 0.9rem;
}
/* ===== Dark-themed form (scope only ใน .auth-card) ===== */
.auth-card .auth-form label {
    color: rgba(255,255,255,0.88);
}
.auth-card .auth-form input {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: #ffffff;
}
.auth-card .auth-form input::placeholder { color: rgba(255,255,255,0.4); }
.auth-card .auth-form input:focus {
    border-color: var(--accent, #74b9ff);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px rgba(116,185,255,0.2);
}
.auth-card .auth-form small {
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.auth-card .pwd-strength-tips {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.auth-card .auth-foot {
    color: rgba(255,255,255,0.7);
}
.auth-card .auth-foot a {
    color: #74b9ff;
}
.auth-card .alert-error {
    background: rgba(231,76,60,0.18);
    border: 1px solid rgba(231,76,60,0.4);
    color: #ffcdc3;
}

.auth-form, .settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form label, .settings-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: #2d3436;
    font-weight: 600;
}

.auth-form input, .settings-form input,
.settings-form select {
    padding: 11px 14px;
    border: 1px solid #dfe6e9;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-form input:focus, .settings-form input:focus,
.settings-form select:focus {
    outline: none;
    border-color: #0984e3;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.15);
}

.auth-form small, .settings-form small {
    color: #b2bec3;
    font-weight: 400;
    font-size: 0.75rem;
}

.btn-primary {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    color: white;
    border: none;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(9,132,227,0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(9,132,227,0.4);
}

.auth-foot {
    text-align: center;
    margin-top: 20px;
    font-size: 0.85rem;
    color: #636e72;
    line-height: 1.8;
}

.auth-foot a { color: #0984e3; text-decoration: none; font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.alert-error { background: #ffe0e0; color: #c0392b; border-left: 4px solid #c0392b; }
.alert-success { background: #d4f5e2; color: #00684a; border-left: 4px solid #00b894; }

/* ===== Settings Page ===== */
.settings-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-width: 720px;
    margin: 0 auto;
}

.settings-card h1 { margin-bottom: 4px; font-size: 1.5rem; }
.settings-sub { color: #636e72; margin-bottom: 24px; font-size: 0.9rem; }

.settings-form fieldset,
.settings-card fieldset {
    border: 1px solid #dfe6e9;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: white;
}

.settings-form legend,
.settings-card fieldset legend {
    padding: 0 8px;
    font-weight: 700;
    color: #2d3436;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* labels/inputs ใน fieldset ที่ไม่ได้อยู่ใน .settings-form */
.settings-card fieldset label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: #2d3436;
    font-weight: 600;
}

.settings-card fieldset input,
.settings-card fieldset select {
    padding: 11px 14px;
    border: 1px solid #dfe6e9;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.settings-card fieldset input:focus,
.settings-card fieldset select:focus {
    outline: none;
    border-color: #0984e3;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.15);
}

.settings-card fieldset small {
    color: #b2bec3;
    font-weight: 400;
    font-size: 0.75rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.checkbox {
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    cursor: pointer;
}

.checkbox input { width: 18px; height: 18px; cursor: pointer; }

/* ===== Font Picker (in settings) ===== */
.font-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.font-card {
    position: relative;
    border-radius: 12px;
    padding: 16px 14px;
    cursor: pointer;
    background: white;
    border: 2px solid #dfe6e9;
    transition: all 0.18s;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    overflow: hidden;
}

.font-card:hover {
    transform: translateY(-2px);
    border-color: #0984e3;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.font-card.active,
.font-card:has(input:checked) {
    border-color: #0984e3;
    background: linear-gradient(135deg, rgba(116,185,255,0.12), rgba(9,132,227,0.06));
    box-shadow: 0 4px 14px rgba(9,132,227,0.18);
}

.font-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.font-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #2d3436;
}

.font-card-sample {
    font-size: 1rem;
    color: #636e72;
    font-weight: 500;
}

.font-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0984e3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.18s, transform 0.18s;
    font-size: 0.72rem;
}

.font-card.active .font-card-check,
.font-card:has(input:checked) .font-card-check {
    opacity: 1;
    transform: scale(1);
}

/* ===== Theme Picker (in settings) — เห็น preview dashboard ในแต่ละการ์ด ===== */
.theme-group {
    margin-top: 18px;
}
.theme-group:first-of-type { margin-top: 10px; }
.theme-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #636e72;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #dfe6e9;
}
.theme-group-label .fi { font-size: 1rem; color: var(--accent, #0984e3); }
body.theme-dark .theme-group-label {
    color: #b2bec3;
    border-bottom-color: rgba(255,255,255,0.1);
}

.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.theme-card {
    position: relative;
    border-radius: 14px;
    padding: 0;
    min-height: 170px;
    cursor: pointer;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    color: white;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: all 0.18s;
    border: 3px solid transparent;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    overflow: hidden;
}

.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

.theme-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-card.active,
.theme-card:has(input:checked) {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 10px 24px rgba(0,0,0,0.25);
}

/* Mini preview ภายในการ์ด — เรียบง่าย 1 card + 2 lines + 1 pill */
.theme-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: transparent;
}
.tp-card {
    background: var(--p-bg);
    color: var(--p-text);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    overflow: hidden;
    width: 100%;
}
.tp-card-only { width: 100%; }
.tp-line {
    height: 6px;
    border-radius: 3px;
    background: var(--p-text);
    opacity: 0.4;
}
.tp-line-1 { width: 70%; opacity: 0.65; height: 7px; }
.tp-line-2 { width: 45%; opacity: 0.3; }
.tp-pill {
    width: 38px;
    height: 12px;
    border-radius: 6px;
    background: var(--p-accent);
    margin-top: 4px;
}

/* Auto theme card — half white half dark to indicate split */
.theme-card-auto .theme-preview {
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.4) 100%);
}

.theme-meta {
    background: rgba(0,0,0,0.45);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    gap: 6px;
}

.theme-name {
    font-size: 0.82rem;
    color: #fff;
    background: transparent;
    padding: 0;
}

.theme-auto-badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.theme-auto-badge .fi { font-size: 0.65rem; }

.theme-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.18s, transform 0.18s;
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 2;
}

.theme-card.active .theme-check,
.theme-card:has(input:checked) .theme-check {
    opacity: 1;
    transform: scale(1);
}

/* ===== Settings Tabs ===== */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid #dfe6e9;
    overflow-x: auto;
    padding-bottom: 0;
}

.settings-tab {
    background: transparent;
    border: none;
    padding: 12px 18px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #636e72;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-tab:hover {
    color: #0984e3;
    background: rgba(9,132,227,0.04);
}

.settings-tab.active {
    color: #0984e3;
    border-bottom-color: #0984e3;
}

.settings-tab .fi { font-size: 0.9rem; }

.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; animation: fadeIn 0.2s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-save-btn { margin-top: 16px; }

input:disabled {
    background: #f5f7fa !important;
    color: #95a5a6 !important;
    cursor: not-allowed;
}

/* ===== TV Channel Picker ===== */
.tv-channel-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 1100px) {
    .tv-channel-picker { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .tv-channel-picker { grid-template-columns: 1fr; }
}

.tv-channel-pick {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #dfe6e9;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
}

.tv-channel-pick:hover {
    border-color: var(--ch-color, #0984e3);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.tv-channel-pick input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ch-color, #0984e3);
    cursor: pointer;
}

.tv-channel-pick:has(input:checked) {
    border-color: var(--ch-color, #0984e3);
    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(9,132,227,0.06));
}

.tv-pick-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ch-color, #0984e3);
    flex-shrink: 0;
}

.tv-pick-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
    color: #2d3436;
}

.tv-pick-cat {
    font-size: 0.7rem;
    color: #95a5a6;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f5f7fa;
}

/* Channel pick card wrapper (รวม checkbox + edit panel) */
.tv-channel-pick-card {
    border: 1.5px solid #dfe6e9;
    border-radius: 10px;
    background: white;
    overflow: hidden;
    transition: all 0.15s;
}

.tv-channel-pick-card:hover {
    border-color: var(--ch-color, #0984e3);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.tv-channel-pick-card:has(input[type="checkbox"]:checked) {
    border-color: var(--ch-color, #0984e3);
}

.tv-channel-pick-card.has-override {
    border-color: var(--ch-color, #0984e3);
    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(9,132,227,0.04));
}

.tv-channel-pick-card .tv-channel-pick {
    margin: 0;
    border: none;
    background: transparent !important;
    border-radius: 0;
    transform: none !important;
    box-shadow: none !important;
}

.tv-channel-pick-card .tv-channel-pick:hover {
    background: rgba(0,0,0,0.02) !important;
}

.ch-edit-toggle {
    background: transparent;
    border: none;
    color: #95a5a6;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.15s;
    margin-left: auto;
}

.ch-edit-toggle:hover {
    background: rgba(0,0,0,0.05);
    color: #0984e3;
}

.tv-channel-pick-card.expanded .ch-edit-toggle {
    color: #0984e3;
    background: rgba(9,132,227,0.1);
}

/* tv-channel-edit ปกติซ่อนใน card — แสดงเมื่อย้ายเข้า modal */
.tv-channel-edit {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* เมื่ออยู่ใน modal — รูปแบบสะอาด vertical */
.ch-edit-modal-card .tv-channel-edit {
    padding: 0;
    background: transparent;
    border-top: none;
}

.ch-edit-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ch-edit-modal-card .ch-edit-row:has(.ch-edit-color),
.ch-edit-modal-card .ch-edit-row:has(.ch-edit-reset) {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ch-edit-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--card-text, #2d3436);
}
.ch-edit-modal-card .ch-edit-label { min-width: 110px; }

.ch-edit-url {
    flex: 1;
    padding: 10px 12px !important;
    font-size: 0.92rem !important;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 8px;
    font-family: inherit;
    color: var(--input-text, #2d3436);
    background: var(--input-bg, #fff);
    width: 100%;
    box-sizing: border-box;
}
.ch-edit-url:focus { outline: none; border-color: var(--accent, #0984e3); }

.ch-edit-color {
    width: 56px;
    height: 36px;
    padding: 2px !important;
    border-radius: 8px;
    border: 1.5px solid var(--card-border, #dfe6e9);
    cursor: pointer;
    flex-shrink: 0;
}

.ch-edit-reset {
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, #dfe6e9);
    color: var(--card-text-muted, #636e72);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: all 0.15s;
}

.ch-edit-reset:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231,76,60,0.06);
}

.ch-edit-status {
    font-size: 0.85rem;
    color: #00b894;
    font-weight: 600;
    padding: 8px 12px;
    background: rgba(0,184,148,0.1);
    border-radius: 8px;
    text-align: center;
}

/* ===== Custom Channel Rows ===== */
#customChannelsList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.custom-saved-badge {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,184,148,0.3);
}

.custom-saved-badge .fi { font-size: 1rem; }

/* ===== Built-in TV channels — row layout (เหมือน custom channels) ===== */
.tv-channel-rows {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.tv-row {
    display: grid;
    /* checkbox | name | URL | cat | color | force-live | reset */
    grid-template-columns: 36px minmax(140px, 1.2fr) minmax(180px, 2.5fr) minmax(70px, 90px) 42px 36px 36px;
    gap: 6px;
    align-items: center;
    padding: 5px 8px;
    background: white;
    border: 1.5px solid #dfe6e9;
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.tv-row:has(input[type="checkbox"]:checked) {
    border-color: var(--ch-color, #0984e3);
}
.tv-row.has-override {
    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(9,132,227,0.04));
}
body.theme-dark .tv-row {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
}
body.theme-dark .tv-row:has(input[type="checkbox"]:checked) {
    border-color: var(--ch-color, #0984e3);
}

/* Checkbox (left) */
.tv-row-check {
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin: 0;
    width: 100%;
    height: 100%;
}
.tv-row-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.tv-row-checkmark {
    width: 20px; height: 20px;
    border: 2px solid #b2bec3;
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: white;
    transition: all 0.15s;
    flex-shrink: 0;
}
.tv-row-check input:checked + .tv-row-checkmark {
    background: var(--ch-color, #0984e3);
    border-color: var(--ch-color, #0984e3);
}
.tv-row-check input:checked + .tv-row-checkmark::after {
    content: '';
    width: 5px; height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
body.theme-dark .tv-row-checkmark { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.3); }

/* Name + colored dot */
.tv-row-name {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.9rem; font-weight: 500;
    color: #2d3436;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.theme-dark .tv-row-name { color: #ecf0f1; }
.tv-row-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ch-color, #0984e3);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}
body.theme-dark .tv-row-dot { box-shadow: 0 0 0 2px rgba(0,0,0,0.4); }

/* URL override input */
.tv-row-url {
    padding: 7px 10px !important;
    font-size: 0.82rem !important;
    border: 1px solid #dfe6e9 !important;
    border-radius: 6px !important;
    font-family: inherit;
    background: #f8f9fa !important;
    color: #2d3436 !important;
    min-width: 0;
    width: 100%;
}
.tv-row-url:focus {
    outline: none !important;
    border-color: #0984e3 !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12) !important;
}
body.theme-dark .tv-row-url {
    background: rgba(0,0,0,0.2) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #ecf0f1 !important;
}
body.theme-dark .tv-row-url:focus { background: rgba(0,0,0,0.35) !important; }

/* Category badge (read-only) */
.tv-row-cat {
    font-size: 0.72rem;
    padding: 4px 10px;
    background: rgba(0,0,0,0.05);
    color: #636e72;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-dark .tv-row-cat { background: rgba(255,255,255,0.08); color: #b2bec3; }

/* Color picker */
.tv-row-color {
    padding: 2px !important;
    height: 32px;
    width: 42px;
    cursor: pointer;
    border: 1px solid #dfe6e9 !important;
    border-radius: 6px;
    background: transparent;
}
body.theme-dark .tv-row-color { border-color: rgba(255,255,255,0.15) !important; }

/* Force LIVE toggle — บังคับให้ chip แสดง LIVE badge ตลอด (ช่อง 24/7 ที่ API ตรวจไม่เจอ) */
.tv-row-force-live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f5f6fa;
    border: 1px solid #dfe6e9;
    color: #95a5a6;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
}
.tv-row-force-live input {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    cursor: pointer;
    margin: 0;
}
.tv-row-force-live:hover { border-color: #e74c3c; }
.tv-row-force-live:has(input:checked) {
    background: #e74c3c;
    color: #fff;
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(231,76,60,0.18);
}
.tv-row-force-live .fi { font-size: 0.9rem; pointer-events: none; }
body.theme-dark .tv-row-force-live {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
}
body.theme-dark .tv-row-force-live:has(input:checked) {
    background: #e74c3c;
    color: #fff;
    border-color: #c0392b;
}

/* Reset button */
.tv-row-reset {
    background: #f5f6fa;
    border: 1px solid #dfe6e9;
    color: #636e72;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 0.85rem;
}
.tv-row-reset:hover {
    background: #fff3e0;
    color: #e67e22;
    border-color: #ffb74d;
}
body.theme-dark .tv-row-reset {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: #b2bec3;
}
body.theme-dark .tv-row-reset:hover { background: rgba(243,156,18,0.2); color: #ffcc80; }

/* Responsive — mobile/narrow */
@media (max-width: 760px) {
    .tv-row {
        grid-template-columns: 32px 1fr 36px 36px 36px;
        grid-template-areas:
            "check name color force reset"
            "url url url url url"
            "cat cat cat cat cat";
        gap: 6px 8px;
    }
    .tv-row-check      { grid-area: check; }
    .tv-row-name       { grid-area: name; }
    .tv-row-url        { grid-area: url; }
    .tv-row-color      { grid-area: color; }
    .tv-row-force-live { grid-area: force; }
    .tv-row-reset      { grid-area: reset; }
    .tv-row-cat        { grid-area: cat; justify-self: start; }
}

.custom-channel-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(180px, 2.5fr) minmax(150px, 170px) 42px 36px;
    gap: 6px;
    align-items: center;
}

/* Tom Select dropdown ของหมวด (custom_cat) — ขยายให้กว้างพอแสดง 'เด็ก / การ์ตูน' ใน 1 บรรทัด */
.custom-channel-row .ts-wrapper .ts-dropdown {
    min-width: 180px;
}
.custom-channel-row .ts-wrapper .ts-dropdown .option,
.custom-channel-row .ts-wrapper .ts-control .item {
    white-space: nowrap;
}

.custom-channel-row input,
.custom-channel-row select {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    font-family: inherit;
    background: white;
    color: #2d3436;
    min-width: 0;
}

.custom-channel-row input:focus,
.custom-channel-row select:focus {
    outline: none;
    border-color: #0984e3;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12);
}

.cc-color {
    padding: 2px !important;
    height: 36px;
    width: 42px;
    cursor: pointer;
}

.cc-remove {
    background: #ffe9e6;
    border: 1px solid #ffd5d0;
    color: #e74c3c;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.cc-remove:hover {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

.btn-secondary {
    background: white;
    border: 1.5px dashed #0984e3;
    color: #0984e3;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: all 0.15s;
}

.btn-secondary:hover {
    background: rgba(9,132,227,0.06);
    border-style: solid;
}

@media (max-width: 700px) {
    .custom-channel-row {
        grid-template-columns: 1fr 42px 36px;
        grid-template-areas:
            "name name name"
            "url url url"
            "cat color remove";
        gap: 6px;
    }
    .custom-channel-row .cc-name { grid-column: 1 / -1; }
    .custom-channel-row .cc-url  { grid-column: 1 / -1; }
}

/* ===== Custom Select (สะอาด อ่านง่าย) ===== */
.custom-select {
    position: relative;
    display: inline-block;
    min-width: 220px;
    font-family: inherit;
}

.cs-trigger {
    background: #ffffff !important;
    background-image: none !important;
    border: 1.5px solid #dfe6e9;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: inherit;
    color: #2d3436 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.cs-trigger:hover { border-color: #0984e3; }

.custom-select.open .cs-trigger {
    border-color: #0984e3;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12);
}

.cs-current,
.cs-option > .cs-icon ~ .cs-text {
    /* shared spacing */
}

.cs-current {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.cs-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.cs-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.cs-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2d3436 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cs-sub {
    font-size: 0.72rem;
    color: #7a8a99 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.cs-arrow {
    color: #95a5a6;
    transition: transform 0.2s;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.custom-select.open .cs-arrow {
    transform: rotate(180deg);
    color: #0984e3;
}

.cs-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    width: max-content;
    max-width: 340px;
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    border: 1px solid #e8ecef;
    padding: 8px;
    z-index: 100;
    max-height: 380px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.custom-select.open .cs-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cs-option {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.12s, border-color 0.12s;
    text-align: left;
    color: #2d3436 !important;
    -webkit-appearance: none;
    appearance: none;
}

.cs-option:hover {
    background: #eef4fb !important;
    border-color: #c7e0f5;
}

.cs-option.active {
    background: #e8f4fd !important;
    border-color: #74b9ff;
}

.cs-option.active .cs-title {
    color: #0984e3 !important;
}

.cs-check {
    color: #0984e3;
    font-weight: 700;
    opacity: 0;
    margin-left: auto;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.cs-option.active .cs-check { opacity: 1; }

/* ===== Widget Container & Cards ===== */
.widgets-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
    align-items: start;
    gap: 20px;
    margin-bottom: 24px;
}
/* layout-aligned (default) — widgets ใน *แถวเดียวกัน* สูงเท่ากัน (stretch)
   แต่แถวต่างๆ ความสูงไม่จำเป็นต้องเท่ากัน — แต่ละแถวสูงตามเนื้อหาที่สูงที่สุดในแถวนั้น */
.widgets-container.layout-aligned {
    grid-auto-rows: auto;
    align-items: stretch;
}
/* layout-compact — widget สูงตามเนื้อหา + เลื่อนเติมช่องว่างแนวนอน (dense packing) */
.widgets-container.layout-compact {
    grid-auto-flow: row dense;
    align-items: start;
}
/* layout-masonry — Pinterest-style vertical fill via CSS columns
   trade-off: widget sizes (1/2, 1/3, 1/4) ไม่มีผล — ทุกการ์ดเรียงเป็น column width เท่ากัน */
.widgets-container.layout-masonry {
    display: block;
    column-count: 3;
    column-gap: 20px;
}
/* base style สำหรับ widget ใน masonry — แต่ไม่ตั้ง display
   ปล่อยให้ tab visibility rules (.widget.tab-current { display: block }, .widget-hidden { display: none })
   ทำงานปกติ — masonry จะแสดงเฉพาะ widget ที่ visible ใน tab ปัจจุบัน */
.widgets-container.layout-masonry > .widget {
    width: 100%;
    grid-column: unset !important;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 20px 0;
}
@media (max-width: 1100px) {
    .widgets-container.layout-masonry { column-count: 2; }
}
@media (max-width: 700px) {
    .widgets-container.layout-masonry { column-count: 1; }
}

.widget {
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 30px var(--card-shadow);
    position: relative;
    transition: box-shadow 0.2s, background 0.3s, color 0.3s;
}

/* ===== Dashboard Tabs ===== */
.dashboard-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 12px;
}
.dt-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.dt-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.85);
    color: #2d3436;
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    user-select: none;
}
.dt-tab:hover {
    background: #ffffff;
    transform: translateY(-1px);
}
.dt-tab.active {
    background: #ffffff;
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.dt-tab.drag-target {
    border-color: var(--accent);
    background: var(--accent-bg);
    transform: scale(1.05);
}
.dt-tab.dragging-tab {
    opacity: 0.5;
}
.dt-tab-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dt-tab-name[contenteditable="true"] {
    outline: 2px solid var(--accent);
    background: #fff;
    padding: 0 4px;
    border-radius: 4px;
    cursor: text;
}
.dt-tab-count {
    /* ซ่อนตัวเลขจำนวน widget — ผู้ใช้ขอเอาออก */
    display: none;
}
.dt-tab-actions {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}
.dt-tab:hover .dt-tab-actions,
.dt-tab.active .dt-tab-actions { display: inline-flex; }
.dt-tab-rename,
.dt-tab-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
}
.dt-tab-rename .fi,
.dt-tab-remove .fi { font-size: 0.7rem; }
.dt-tab-rename:hover,
.dt-tab-remove:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08);
}
.dt-tab-remove:hover { background: rgba(231,76,60,0.18); color: #e74c3c; }
.dt-tab[data-tab-id]:only-of-type .dt-tab-remove { display: none; }
.dt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.dt-add,
.dt-merge {
    background: rgba(255,255,255,0.18);
    border: 1.5px dashed rgba(255,255,255,0.5);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s;
    flex-shrink: 0;
}
.dt-merge {
    border-style: solid;
    background: rgba(231,76,60,0.18);
    border-color: rgba(231,76,60,0.5);
}
.dt-merge:hover {
    background: rgba(231,76,60,0.32);
    border-color: rgba(231,76,60,0.7);
}
.dt-add:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.85);
}
.dt-widget-btn {
    background: #ffffff;
    color: var(--accent);
    border: 1.5px solid rgba(255,255,255,0.5);
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dt-widget-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
body.edit-mode .dt-widget-btn {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Mobile — ซ่อน text ของปุ่ม tab actions เหลือแค่ icon */
@media (max-width: 640px) {
    .dt-actions { gap: 6px; }
    .dt-actions .dt-btn-text { display: none; }
    .dt-add, .dt-merge, .dt-widget-btn {
        padding: 8px 10px;
        min-width: 38px;
        justify-content: center;
    }
    .dt-add .fi, .dt-merge .fi, .dt-widget-btn .fi {
        font-size: 1rem;
        margin: 0;
    }
}

/* ============================================================
   Mobile / Narrow viewport — แยกแถวระหว่าง tabs กับ action buttons
   ป้องกัน tabs ถูกซ่อนเพราะ actions กินพื้นที่หมด
   ============================================================ */
@media (max-width: 700px) {
    .dashboard-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }
    /* Tabs row — scroll แนวนอนถ้าเยอะ */
    .dt-list {
        order: 1;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        margin: 0 -4px 0 -4px;
        padding-left: 4px;
        padding-right: 4px;
        scrollbar-width: thin;
    }
    .dt-list::-webkit-scrollbar { height: 4px; }
    .dt-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }
    .dt-tab {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 0.88rem;
    }
    .dt-tab-name { max-width: 110px; }
    /* แสดง close icon เสมอบน mobile (hover ใช้ไม่ได้) */
    .dt-tab.active .dt-tab-actions { display: inline-flex; }

    /* Action buttons row — แชร์พื้นที่กัน */
    .dt-actions {
        order: 2;
        width: 100%;
        gap: 6px;
    }
    .dt-add,
    .dt-merge,
    .dt-widget-btn {
        flex: 1;
        justify-content: center;
        padding: 9px 8px;
        font-size: 0.84rem;
        white-space: nowrap;
    }
    .dt-add .fi, .dt-merge .fi, .dt-widget-btn .fi { font-size: 0.85rem; }
}

/* tab-aware visibility: ซ่อน widget ที่ไม่อยู่ใน tab ปัจจุบัน */
.widget[data-tabs] { display: none; }
.widget.tab-current { display: block; }
.widget.widget-hidden { display: none !important; }

/* Edit mode: แสดงเฉพาะ widget ใน tab ปัจจุบัน (ซ่อน widget ของ tab อื่นเลย) */
body.edit-mode .widget[data-widget].tab-current { display: block !important; }
body.edit-mode .widget[data-widget]:not(.tab-current) { display: none !important; }
/* v2 widgets ที่ใช้ full-bleed gradient — ต้องคง display:flex ทั้งใน normal และ edit mode */
body.edit-mode .widget[data-widget].tab-current:has(> .aq-widget.v2),
body.edit-mode .widget[data-widget].tab-current:has(> .uv-widget.v2),
body.edit-mode .widget[data-widget].tab-current:has(> .lt-widget.v2),
body.edit-mode .widget[data-widget].tab-current:has(> .td-widget.v2),
body.edit-mode .widget[data-widget].tab-current:has(> .current-location-card.cl-v2),
body.edit-mode .widget[data-widget].tab-current:has(> .widget-clock.clock-v2),
body.edit-mode .widget[data-widget].tab-current:has(> .f7-widget.f7-v2),
body.edit-mode .widget[data-widget].tab-current:has(> .eq-widget) {
    display: flex !important;
}
/* widget-hidden ต้องชนะ tab-current — specificity ต้องเท่ากับ tab-current rule */
body.edit-mode .widget[data-widget].widget-hidden,
body.edit-mode .widget[data-widget].tab-current.widget-hidden { display: none !important; }

@media (max-width: 700px) {
    .dt-tab-name { max-width: 90px; }
    .dt-add { padding: 6px 10px; font-size: 0.8rem; }
    /* แท็บเลื่อนแนวนอนแทนการ wrap ขึ้นบรรทัดใหม่ */
    .dashboard-tabs {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .dt-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .dt-list::-webkit-scrollbar { height: 4px; }
    .dt-list::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.4);
        border-radius: 2px;
    }
    .dt-tab {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* Dark mode tab overrides */
body.theme-dark .dashboard-tabs { background: rgba(0,0,0,0.3); }
body.theme-dark .dt-tab {
    background: var(--card-bg-soft);
    color: var(--card-text);
}
body.theme-dark .dt-tab:hover { background: var(--card-bg-softer); }
body.theme-dark .dt-tab.active {
    background: var(--card-bg);
    color: var(--accent);
    border-color: var(--accent);
}
/* .dt-tab-count ถูกซ่อน — ไม่ต้อง override สีใน dark theme */

.widget-full    { grid-column: span 12; }
.widget-half    { grid-column: span 6; }
.widget-third   { grid-column: span 4; }
.widget-quarter { grid-column: span 3; }
.widget-hidden  { display: none !important; }

/* Save toast */
.save-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #2d3436;
    color: white;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.save-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.widget-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    gap: 6px;
    z-index: 10;
}

.widget-drag-handle {
    background: white;
    border: none;
    width: 32px;
    height: 28px;
    border-radius: 8px;
    cursor: grab;
    font-size: 1.1rem;
    color: #636e72;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    transition: all 0.15s;
}

.widget-drag-handle:hover {
    background: #f5f7fa;
    color: #0984e3;
    transform: scale(1.05);
}

.widget-drag-handle:active { cursor: grabbing; }

.widget-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 14px 0 16px 0;
    cursor: nwse-resize;
    background: rgba(9, 132, 227, 0.85);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    user-select: none;
    z-index: 10;
    box-shadow: -2px -2px 8px rgba(0,0,0,0.1);
    transition: background 0.15s;
}

.resize-indicator {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    background: #2d3436;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.resize-indicator.show { opacity: 1; transform: translateY(0); }

.resize-indicator::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 12px;
    border: 4px solid transparent;
    border-top-color: #2d3436;
}

.widget-resize-handle:hover {
    background: rgba(9, 132, 227, 1);
}

body.edit-mode .widget-resize-handle { display: flex; }

body.resizing-widget {
    cursor: nwse-resize !important;
    user-select: none;
}

body.resizing-widget * {
    cursor: nwse-resize !important;
    user-select: none !important;
}

.widget.resizing {
    outline: 3px solid #0984e3 !important;
    outline-offset: -3px;
}

.widget-size-group {
    display: flex;
    background: white;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    gap: 2px;
}

.widget-size-btn {
    background: transparent;
    border: none;
    color: #636e72;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 30px;
    transition: all 0.15s;
}

.widget-size-btn:hover {
    background: #f5f7fa;
    color: #2d3436;
}

.widget-size-btn.active {
    background: #0984e3;
    color: white;
    box-shadow: 0 2px 6px rgba(9,132,227,0.4);
}

.widget-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
    box-shadow: 0 3px 8px rgba(255,107,107,0.4);
    background: #ff6b6b;
    color: white;
}

.widget-remove:hover { transform: scale(1.1); }

body.edit-mode .widget {
    outline: 2px dashed #74b9ff;
    outline-offset: -4px;
}

body.edit-mode .widget-tools { display: flex; }

/* ===== Fullscreen button — แสดงตลอด (ไม่เฉพาะ edit mode) ===== */
.widget-fs-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: rgba(255,255,255,0.85);
    color: var(--card-text-muted);
    box-shadow: 0 2px 8px var(--card-shadow-soft);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    opacity: 0;
    transition: opacity 0.18s, background 0.15s, color 0.15s, transform 0.15s;
}
.widget-fs-btn .fi { font-size: 0.85rem; }
.widget:hover .widget-fs-btn { opacity: 0.85; }
.widget-fs-btn:hover {
    opacity: 1;
    background: var(--accent);
    color: #fff;
    transform: scale(1.05);
}
/* ใน edit mode ขยับมาไว้ติดกับ widget-tools (ไม่ทับกัน) */
body.edit-mode .widget-fs-btn {
    opacity: 1;
    right: 138px;
}

/* ===== Widget Fullscreen Mode (HTML5 :fullscreen) ===== */
.widget:fullscreen,
.widget:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    padding: 28px;
    border-radius: 0;
    background: var(--card-bg);
    color: var(--card-text);
    overflow: auto;
    max-width: 100vw;
    max-height: 100vh;
}
.widget:fullscreen .widget-fs-btn,
.widget:-webkit-full-screen .widget-fs-btn {
    opacity: 1;
    background: var(--accent);
    color: #fff;
}
/* ขยาย map/iframe ใน fullscreen */
.widget:fullscreen #map,
.widget:-webkit-full-screen #map { height: calc(100vh - 240px) !important; min-height: 400px; }
.widget:fullscreen #windyFrame,
.widget:-webkit-full-screen #windyFrame { height: calc(100vh - 140px) !important; }
.widget:fullscreen .tv-grid,
.widget:-webkit-full-screen .tv-grid {
    grid-auto-rows: max-content;
    align-content: start;
}
.widget:fullscreen .tv-tile,
.widget:-webkit-full-screen .tv-tile { align-self: start; }
.widget:fullscreen .news-feed,
.widget:-webkit-full-screen .news-feed { max-height: calc(100vh - 220px); overflow-y: auto; }
.widget:fullscreen .cities-mini-grid,
.widget:-webkit-full-screen .cities-mini-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.widget:fullscreen .rainfall-grid,
.widget:-webkit-full-screen .rainfall-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ===== Dark mode สำหรับ fs button ===== */
body.theme-dark .widget-fs-btn {
    background: rgba(255,255,255,0.1);
    color: var(--card-text);
}

/* ===== Widget Sidebar (ขวา) ===== */
/* ไม่ใช้ backdrop เพราะจะบล็อกการ drag/drop และคลิก widget */
.sidebar-backdrop { display: none; }

/* เมื่อเปิด sidebar ให้ container เลื่อนซ้ายเพื่อให้เห็น/กด widget ได้ */
.container {
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.edit-mode .container {
    margin-right: 460px;
}

@media (max-width: 1100px) {
    /* sidebar เริ่มกินพื้นที่เกิน 50vw แล้ว — ใช้ max-width: 90vw แทน + ไม่ shift container */
    body.edit-mode .container { margin-right: 0; }
}

.widget-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 90vw;
    background: white;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.widget-sidebar.open { transform: translateX(0); }

.ws-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #dfe6e9;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff) 0%, var(--accent, #0984e3) 100%);
    color: white;
}

.ws-header h3 { font-size: 1.1rem; margin-bottom: 4px; }
.ws-hint { font-size: 0.75rem; opacity: 0.9; line-height: 1.4; }

.ws-close {
    background: rgba(255,255,255,0.25);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.ws-close .fi { display: block; line-height: 1; }
.ws-close:hover { background: rgba(255,255,255,0.4); }

.ws-list {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

/* Filter bar in widget sidebar */
.ws-filter-bar {
    display: flex;
    gap: 6px;
    padding: 14px 4px 12px;
    border-bottom: 1px dashed var(--card-border, #e9ecef);
    margin: 6px 14px 12px;
}
.ws-filter-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--card-border, #dfe6e9);
    background: transparent;
    color: var(--card-text-muted, #95a5a6);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ws-filter-btn:hover { background: var(--card-bg-soft, #f5f7fa); color: var(--card-text); }
.ws-filter-btn.active {
    background: var(--accent, #0984e3);
    color: #fff;
    border-color: var(--accent, #0984e3);
}
.ws-filter-btn .fi { font-size: 0.78rem; }
body.theme-dark .ws-filter-btn:hover { background: var(--card-bg-soft); }

/* Mode: in-tab → ซ่อน widgets ที่ไม่ได้อยู่ในแท็บปัจจุบัน */
.ws-list[data-ws-mode="in-tab"] .ws-item:not(.in-current-tab) {
    display: none;
}

/* Category section */
.ws-cat-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--card-text, #2d3436);
    margin: 6px 4px -2px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
}
.ws-cat-title:first-child { margin-top: 0; }
.ws-cat-title .fi {
    color: var(--accent, #0984e3);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.ws-cat-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--card-text-muted, #95a5a6);
    background: var(--card-bg-soft, #f1f3f5);
    padding: 2px 9px;
    border-radius: 10px;
    line-height: 1.5;
}
body.theme-dark .ws-cat-count {
    background: rgba(255,255,255,0.08);
    color: var(--card-text-muted);
}
.ws-cat-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    grid-auto-rows: minmax(132px, auto);
}

.ws-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 28px 12px 12px;
    border: 2px solid #dfe6e9;
    border-radius: 12px;
    background: #fff;
    cursor: grab;
    transition: all 0.15s;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.ws-item:hover {
    border-color: #74b9ff;
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ws-item:active { cursor: grabbing; }

.ws-item.on {
    border-color: #0984e3;
    background: linear-gradient(135deg, rgba(116,185,255,0.15), rgba(9,132,227,0.05));
}

.ws-item.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.ws-icon { font-size: 1.8rem; line-height: 1; }
.ws-info { min-width: 0; }
.ws-title {
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ws-desc { display: none; }
.ws-add-btn {
    position: absolute;
    top: 6px; right: 6px;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #0984e3);
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(9,132,227,0.35);
    z-index: 2;
}
.ws-add-btn:active { transform: scale(0.92); }
.ws-add-btn .fi { font-size: 0.95rem; line-height: 1; }
.ws-item.on .ws-add-btn {
    background: var(--card-bg-soft, #f1f3f5);
    color: var(--accent, #0984e3);
    box-shadow: none;
}

/* Status icon — แสดง widget ใช้งานอยู่หรือไม่ */
.ws-status {
    position: absolute;
    top: 6px; left: 6px;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    color: var(--card-text-muted, #95a5a6);
    transition: all 0.15s;
    z-index: 2;
}
.ws-status .fi { font-size: 0.75rem; line-height: 1; }
.ws-item.on .ws-status {
    background: var(--accent, #0984e3);
    color: #fff;
}
.ws-item { cursor: grab; }
.ws-item:active { cursor: grabbing; }
.ws-item .ws-info { pointer-events: none; }
body.theme-dark .ws-status { background: rgba(255,255,255,0.18); }
body.theme-dark .ws-item.on .ws-status { background: var(--accent, #74b9ff); color: var(--card-bg, #1a2530); }

/* Touch / Mobile — แสดงปุ่ม + เพิ่ม widget (ลากไม่ได้บน touch device)
   เลย์เอาต์เรียบง่าย: ไม่มี preview, แค่ title + ปุ่ม +
   ใช้ทั้ง viewport เล็ก และ touch device (tablet/phone)*/
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .widget-sidebar { width: 100%; }
    .ws-list { padding: 10px; gap: 12px; }
    .ws-cat-group { grid-template-columns: 1fr; gap: 8px; grid-auto-rows: auto; }
    .ws-cat-title { font-size: 0.88rem; margin: 4px 2px 0; }
    .ws-add-btn {
        display: inline-flex; position: static; flex-shrink: 0;
        width: 38px; height: 38px;
        font-size: 1.1rem;
    }
    .ws-item {
        flex-direction: row;
        align-items: center;
        padding: 12px 14px;
        gap: 12px;
        cursor: default;       /* ลบ tap-anywhere-on-card — user กดปุ่ม + เท่านั้น */
    }
    .ws-preview { display: none; }
    .ws-status {
        position: static;
        width: 28px; height: 28px;
        flex-shrink: 0;
    }
    .ws-status .fi { font-size: 0.9rem; }
    .ws-info { flex: 1; min-width: 0; }
    .ws-title {
        font-size: 0.92rem;
        -webkit-line-clamp: 1;
        line-height: 1.3;
    }
    .ws-desc { display: block; font-size: 0.72rem; color: var(--card-text-muted, #636e72); margin-top: 2px; }
}

.ws-footer {
    padding: 14px 20px;
    border-top: 1px solid #dfe6e9;
    background: #f8f9fa;
    font-size: 0.75rem;
    color: #636e72;
    text-align: center;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
body.theme-dark .ws-footer {
    background: rgba(255,255,255,0.04);
    border-top-color: rgba(255,255,255,0.08);
    color: var(--card-text-muted);
}
.ws-clear-all {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1.5px solid rgba(231,76,60,0.30);
    color: #e74c3c;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ws-clear-all:hover {
    background: rgba(231,76,60,0.10);
    border-color: #e74c3c;
}
.ws-clear-all .fi { font-size: 0.78rem; }

/* ===== Drag-Drop Visual Feedback ===== */
.widgets-container.drag-active {
    background: rgba(116, 185, 255, 0.06);
    border-radius: 16px;
    outline: 2px dashed rgba(116, 185, 255, 0.5);
    outline-offset: 8px;
    transition: background 0.2s, outline-color 0.2s;
    min-height: 260px;
    padding: 12px;
}
body.theme-dark .widgets-container.drag-active {
    background: rgba(116, 185, 255, 0.08);
    outline-color: rgba(116, 185, 255, 0.4);
}

/* Empty-tab hint — แสดงตอนแท็บไม่มี widget visible เลย (ไม่ว่ากำลังลากอยู่หรือไม่) */
.widgets-container.is-empty-tab {
    min-height: 220px;
    border: 2px dashed var(--card-border, #dfe6e9);
    border-radius: 16px;
    padding: 24px;
    position: relative;
}
.widgets-container.is-empty-tab::before {
    content: '📦 แท็บนี้ยังไม่มีวิดเจ็ต — กดปุ่ม "Widget" ด้านขวาบน แล้วลากวิดเจ็ตที่ต้องการมาวางในพื้นที่นี้';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.95rem;
    text-align: center;
    padding: 24px;
    pointer-events: none;
    line-height: 1.6;
}
.widgets-container.is-empty-tab.drag-active::before {
    /* ตอน drag — placeholder element เป็นตัวนำ user แล้ว ซ่อนข้อความ pseudo */
    content: '';
    display: none;
}

/* widget ที่เป็น potential drop target ระหว่างลาก */
.widget.drag-target-zone {
    transition: transform 0.18s, opacity 0.18s;
    opacity: 0.65;
}

/* widget ที่กำลังลาก */
.widget.dragging {
    opacity: 0.35 !important;
    transform: scale(0.97);
    cursor: grabbing !important;
}

/* Placeholder กรอบประที่จะวาง */
.widget-placeholder {
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(116,185,255,0.18), rgba(9,132,227,0.10));
    border: 3px dashed #0984e3;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: placeholderPulse 1.2s ease-in-out infinite;
    box-shadow: 0 4px 20px rgba(9,132,227,0.15);
}

@keyframes placeholderPulse {
    0%, 100% {
        background: linear-gradient(135deg, rgba(116,185,255,0.18), rgba(9,132,227,0.10));
        border-color: #0984e3;
    }
    50% {
        background: linear-gradient(135deg, rgba(116,185,255,0.30), rgba(9,132,227,0.18));
        border-color: #74b9ff;
    }
}

.widget-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #0984e3;
    font-weight: 700;
    font-size: 1.1rem;
    pointer-events: none;
}

.widget-placeholder-inner .fi {
    font-size: 2.2rem;
    animation: placeholderBounce 1s ease-in-out infinite;
}

@keyframes placeholderBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (max-width: 600px) {
    .widget-sidebar { width: 100%; max-width: 100%; }
}

/* ===== Edit button in nav ===== */
/* ===== Unified Nav Pills ===== */
.nav-pill {
    background: rgba(255,255,255,0.18);
    color: white !important;
    border: 1px solid rgba(255,255,255,0.28);
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
}
.nav-pill > span { line-height: 1.2; }

.nav-pill:hover {
    background: rgba(255,255,255,0.30);
    border-color: rgba(255,255,255,0.45);
    transform: translateY(-1px);
}

.nav-pill .fi {
    font-size: 0.95rem;
    opacity: 0.95;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.nav-pill .fi::before { display: block; line-height: 1; }

/* Mobile: nav-pill ที่ลิงก์ไปหน้าหลัก/index — แสดง icon เท่านั้น (กะทัดรัด)
   ใช้กับ link href="index" + ลิงก์ที่ระบุ class nav-pill-icon-mobile */
@media (max-width: 600px) {
    .nav-pill[href="index"],
    .nav-pill[href="/"],
    .nav-pill-icon-mobile {
        font-size: 0 !important;       /* ซ่อน text ทั้งหมด */
        padding: 8px 10px !important;
        gap: 0 !important;
        min-width: 38px;
        justify-content: center;
    }
    .nav-pill[href="index"] .fi,
    .nav-pill[href="/"] .fi,
    .nav-pill-icon-mobile .fi {
        font-size: 1.05rem !important;
    }
    /* คง span ที่อาจมี aria text ไว้ แต่ visually hidden */
    .nav-pill[href="index"] > span,
    .nav-pill[href="/"] > span,
    .nav-pill-icon-mobile > span {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
    }
}

.nav-pill-primary {
    background: linear-gradient(135deg, rgba(0,184,148,0.9), rgba(0,206,201,0.9));
    border-color: rgba(255,255,255,0.45);
    box-shadow: 0 3px 10px rgba(0,184,148,0.3);
}

.nav-pill-primary:hover {
    background: linear-gradient(135deg, #00b894, #00cec9);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-1px);
}

.nav-pill-danger {
    background: linear-gradient(135deg, rgba(231,76,60,0.92), rgba(192,57,43,0.92));
    border-color: rgba(255,255,255,0.45);
    box-shadow: 0 3px 10px rgba(231,76,60,0.35);
}
.nav-pill-danger:hover {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-1px);
}

.nav-pill-user {
    background: rgba(255,255,255,0.12);
    cursor: default;
}

.nav-pill-user:hover { transform: none; }

.nav-pill:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* ===== Cities Mini Grid Widget ===== */
.cities-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.city-mini {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8edf3 100%);
    border-radius: 12px;
    padding: 14px;
    border-left: 4px solid #0984e3;
}

.cm-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.cm-name { font-weight: 600; font-size: 0.95rem; }
.cm-en { font-size: 0.7rem; color: #636e72; }
.cities-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.cities-head h2 { margin: 0; }
.cities-edit-btn {
    border: 1px solid var(--card-border, #dfe6e9);
    background: var(--card-bg-soft, #f5f7fa);
    color: var(--card-text, #2d3436);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.cities-edit-btn:hover {
    border-color: var(--accent, #0984e3);
    color: var(--accent, #0984e3);
    background: var(--accent-bg, rgba(9,132,227,0.08));
}
.cities-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--card-text-muted, #95a5a6);
}
.cities-empty .fi { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.5; }

/* === Cities edit modal === */
.cities-modal-card { max-width: 520px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; }
.cities-modal-card .app-modal-body { overflow-y: auto; }
.cities-section-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--card-text, #2d3436);
    margin: 14px 0 4px;
}
.cities-section-title:first-child { margin-top: 0; }
.cities-section-hint {
    font-size: 0.78rem;
    color: var(--card-text-muted, #636e72);
    margin: 0 0 10px;
}
.cities-builtin-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.cities-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 8px;
    cursor: pointer;
}
.cities-row input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.cities-row-info { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.cities-row-info strong { font-size: 0.85rem; color: var(--card-text, #2d3436); }
.cities-row-info small { font-size: 0.72rem; color: var(--card-text-muted, #636e72); }
.cities-search-row { margin-bottom: 8px; }
.cities-search-input {
    width: 100%;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-family: inherit;
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
}
.cities-search-input:focus { outline: none; border-color: var(--accent, #0984e3); }
.cities-search-results { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cities-search-hit {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--accent-bg, rgba(9,132,227,0.08));
    border: 1px solid var(--card-border, #dfe6e9);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.cities-search-hit:hover { border-color: var(--accent, #0984e3); }
.cities-search-hit .cities-row-info { flex: 1; }
.cities-search-hit .fi { color: var(--accent, #0984e3); }
.cities-custom-list { display: flex; flex-direction: column; gap: 6px; }
.cities-custom-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 8px;
}
.cities-custom-row .cities-row-info { flex: 1; min-width: 0; }
.cities-row-remove {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    cursor: pointer;
    font-size: 1.2rem; line-height: 1;
}
.cities-row-remove:hover { background: #e74c3c; color: #fff; }
.cities-empty-hint { font-size: 0.82rem; color: var(--card-text-muted, #95a5a6); padding: 8px 0; }
body.theme-dark .cities-row,
body.theme-dark .cities-custom-row { background: rgba(255,255,255,0.06); }
body.theme-dark .cities-search-hit { background: rgba(9,132,227,0.15); }
@media (max-width: 600px) {
    .cities-builtin-list { grid-template-columns: 1fr; }
}

/* Boost cm-emoji icon visibility — เพิ่ม drop-shadow ให้เด่นขึ้น
   ให้ match กับ .f7-icon-img ใน 7-day forecast */
.cm-emoji { font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.cm-emoji .meteo-icon { display: inline-flex; align-items: center; justify-content: center; }
.cm-emoji .meteo-icon,
.cm-emoji .meteo-icon > svg,
.cm-emoji .meteo-icon > img {
    width: 60px; height: 60px;
    display: block;
}
.cm-emoji .meteo-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
body.theme-dark .cm-emoji .meteo-icon {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45))
            drop-shadow(0 0 1px rgba(255,255,255,0.5));
}
.cm-temp { font-size: 1.6rem; font-weight: 700; color: #0984e3; line-height: 1; }
.temp-unit-suffix { font-size: 0.9rem; }
.cm-desc { font-size: 0.8rem; color: #636e72; margin: 6px 0; }
.cm-meta { font-size: 0.75rem; color: #2d3436; }

/* ===== Clock Widget ===== */
.widget-clock { text-align: center; padding: 8px 0; }
.clock-label {
    font-size: 0.85rem;
    color: #636e72;
    margin-bottom: 8px;
    font-weight: 600;
}
.clock-time {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent, #0984e3);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 8px;
}
.clock-date { font-size: 0.95rem; color: var(--card-text, #2d3436); }

/* ===== Rainfall & Flood Risk Widget ===== */
.rainfall-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.rainfall-head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.rainfall-sub {
    display: block;
    font-size: 0.75rem;
    color: #636e72;
    font-weight: 400;
    margin-top: 4px;
}

.rainfall-provinces {
    display: contents;
}

.rainfall-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #636e72;
}

.rainfall-legend .dot,
.risk-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.risk-dot { width: 11px; height: 11px; }

.dot-low    { background: #27ae60; }
.dot-medium { background: #f39c12; }
.dot-high   { background: #e67e22; }
.dot-severe { background: #e74c3c; }

.rainfall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* ===== Rainfall Controls (search + filter) ===== */
.rainfall-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rf-search {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    position: relative;
    background: white;
    border: 1.5px solid #dfe6e9;
    border-radius: 10px;
    padding-left: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rf-search > .fi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    color: #95a5a6;
    pointer-events: none;
    flex-shrink: 0;
    margin-right: 8px;
}
.rf-search > .fi::before {
    line-height: 1;
    display: block;
}

.rf-search input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 12px 14px 12px 0;
    line-height: 1.2;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.92rem;
    color: #2d3436;
    outline: none;
}

.rf-search:focus-within {
    border-color: #0984e3;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12);
}

.rf-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e8ecef;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
    display: none;
    padding: 4px;
}

.rf-suggest-item {
    width: 100%;
    text-align: left;
    background: white;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    color: #2d3436;
    transition: background 0.12s;
}

.rf-suggest-item:hover { background: #f5f7fa; }
.rf-suggest-item .fi { color: #0984e3; font-size: 0.9rem; }
.rf-suggest-item small { color: #95a5a6; font-weight: 400; }
.rf-suggest-empty { padding: 12px; text-align: center; color: #95a5a6; font-size: 0.9rem; }

.btn-rf-toggle {
    background: white;
    border: 1.5px solid #dfe6e9;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: #2d3436;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-rf-toggle:hover {
    border-color: #e67e22;
    color: #e67e22;
}

.btn-rf-toggle .fi { color: #e67e22; }

.btn-rf-toggle.on {
    background: linear-gradient(135deg, #ff7e5f, #e67e22);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(230,126,34,0.4);
}

.btn-rf-toggle.on .fi { color: white; }

.rf-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 20px;
    color: #636e72;
    font-size: 0.95rem;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dfe6e9;
}
.rf-loading .fi { animation: spin 1s linear infinite; margin-right: 6px; color: #0984e3; }

.rf-note {
    grid-column: 1 / -1;
    background: #fff8e1;
    border-left: 4px solid #f39c12;
    padding: 10px 14px;
    border-radius: 8px;
    color: #2d3436;
    font-size: 0.85rem;
    display: flex;
    gap: 8px;
}
.rf-note .fi { color: #f39c12; }
.rf-hint {
    display: block;
    margin-top: 4px;
    color: var(--card-text-muted);
    font-size: 0.72rem;
    padding-left: 6px;
}
.rf-hint .fi { color: var(--accent); margin-right: 3px; }

/* การ์ดที่ผู้ใช้เพิ่มเอง — มีปุ่มลบ */
.rain-card { position: relative; }

.rc-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(231,76,60,0.85);
    color: white;
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 5;
}

.rain-card:hover .rc-remove,
.rain-card-custom .rc-remove { opacity: 1; }
.rc-remove:hover { transform: scale(1.1); background: rgba(231,76,60,1); }

/* Custom (pinned) rain card */
.rain-card-custom {
    border-left-width: 5px;
    border-left-color: var(--accent) !important;
    background: linear-gradient(135deg, rgba(116,185,255,0.12) 0%, rgba(9,132,227,0.05) 100%) !important;
}
.rc-pin-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent);
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    z-index: 5;
}
.rc-pin-badge .fi { font-size: 0.7rem; }
.rain-card-custom .rc-top { padding-top: 14px; }
body.theme-dark .rain-card-custom {
    background: linear-gradient(135deg, rgba(116,185,255,0.18) 0%, rgba(9,132,227,0.08) 100%) !important;
}

.rc-just-added {
    animation: justAdded 1.5s ease;
}

@keyframes justAdded {
    0% { box-shadow: 0 0 0 0 rgba(9,132,227,0.6); transform: scale(0.97); }
    50% { box-shadow: 0 0 0 12px rgba(9,132,227,0); transform: scale(1); }
    100% { box-shadow: 0 0 0 0 rgba(9,132,227,0); }
}

.rain-card {
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e8edf3 100%);
    border-left: 5px solid #27ae60;
    transition: transform 0.15s, box-shadow 0.15s;
}

.rain-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.rain-card.risk-low    { border-left-color: #27ae60; }
.rain-card.risk-medium { border-left-color: #f39c12; background: linear-gradient(135deg, #fff8e1, #fff3cd); }
.rain-card.risk-high   { border-left-color: #e67e22; background: linear-gradient(135deg, #ffe9d6, #ffd8b8); }
.rain-card.risk-severe { border-left-color: #e74c3c; background: linear-gradient(135deg, #ffe0e0, #ffcccc); animation: pulse 2s infinite; }

.user-rain-card {
    border-left-width: 5px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left-color: #0984e3;
    position: relative;
    box-shadow: 0 6px 20px rgba(9,132,227,0.2);
}

.user-rain-card::before {
    content: '✨ ของคุณ';
    position: absolute;
    top: -8px;
    right: 14px;
    background: #0984e3;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(9,132,227,0.4);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
}

.rc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}

.rc-name { font-weight: 700; font-size: 1rem; }
.rc-en   { font-size: 0.7rem; color: #636e72; }

.rc-risk-badge {
    background: white;
    color: #2d3436;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body.theme-dark .rc-risk-badge {
    background: rgba(255,255,255,0.92);
    color: #2d3436;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.rc-now {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 10px 0 14px;
    flex-wrap: wrap;
}

.rc-now-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent, #0984e3);
    line-height: 1;
}
.rc-now-unit { font-size: 0.85rem; color: #2d3436; font-weight: 600; }
.rc-now-label {
    font-size: 0.7rem;
    color: #636e72;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.rc-stat {
    background: rgba(255,255,255,0.7);
    padding: 8px 10px;
    border-radius: 8px;
}

.rc-stat-label { font-size: 0.7rem; color: #636e72; margin-bottom: 2px; }
.rc-stat-val   { font-size: 0.95rem; font-weight: 700; color: var(--accent, #0984e3); }

.rc-soil { margin-bottom: 8px; }

.rc-soil-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #636e72;
    margin-bottom: 4px;
}

.rc-soil-bar {
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.rc-soil-fill {
    height: 100%;
    background: linear-gradient(90deg, #74b9ff 0%, #0984e3 100%);
    border-radius: 3px;
    transition: width 0.3s;
}

.rc-updated {
    text-align: right;
    font-size: 0.7rem;
    color: #b2bec3;
    margin-top: 6px;
}

.rc-error {
    text-align: center;
    color: #c0392b;
    padding: 12px;
    font-size: 0.85rem;
}

.rainfall-note {
    font-size: 0.75rem;
    color: #636e72;
    margin-top: 14px;
    text-align: center;
    background: #f5f7fa;
    padding: 10px;
    border-radius: 8px;
    line-height: 1.5;
}

/* ===== Rainfall Detail Widget ===== */
.rd-head { margin-bottom: 14px; }
.rd-head h2 { font-size: 1.05rem; }
.rd-sub { font-size: 0.75rem; color: #636e72; }

.rd-empty {
    text-align: center;
    padding: 40px 20px;
    color: #95a5a6;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dfe6e9;
}
.rd-empty .fi { font-size: 2.5rem; color: #b2bec3; display: block; margin-bottom: 12px; }

.rd-content.rd-loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}
.rd-content.rd-loading::after {
    content: "กำลังโหลด...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-weight: 600;
    color: #0984e3;
    z-index: 5;
}

.rd-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.rd-loc { font-size: 1.05rem; font-weight: 700; }
.rd-coord { font-size: 0.7rem; color: #95a5a6; margin-top: 2px; }
.rd-risk {
    background: white;
    color: #2d3436;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
body.theme-dark .rd-risk {
    background: rgba(255,255,255,0.92);
    color: #2d3436;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.rd-now-box {
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: white;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rd-now-label { font-size: 0.85rem; opacity: 0.9; }
.rd-now-val { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.rd-now-val small { font-size: 0.9rem; font-weight: 500; opacity: 0.9; margin-left: 6px; }

.rd-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.rd-stat {
    background: #f5f7fa;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.rd-stat .fi {
    font-size: 1.1rem;
    color: var(--accent, #0984e3);
    flex-shrink: 0;
}
.rd-stat-label { font-size: 0.7rem; color: #636e72; }
.rd-stat-val { font-size: 0.95rem; font-weight: 700; color: var(--accent, #0984e3); }

.rd-chart-wrap {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}
.rd-chart-title { font-size: 0.82rem; color: #2d3436; font-weight: 600; margin-bottom: 8px; }
.rd-chart {
    height: 100px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    border-bottom: 1px solid #dfe6e9;
    padding-bottom: 2px;
    position: relative;
}
.rd-bar {
    flex: 1;
    background: linear-gradient(180deg, #74b9ff, #0984e3);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    position: relative;
    transition: opacity 0.15s;
}
.rd-bar.future { background: linear-gradient(180deg, rgba(116,185,255,0.6), rgba(9,132,227,0.5)); }
.rd-bar.now-line { background: #e74c3c; min-height: 100%; flex: 0 0 2px; }
.rd-bar:hover { opacity: 0.85; }
.rd-bar[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: #2d3436;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
}

.rd-chart-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #95a5a6;
    margin-top: 4px;
}
.rd-now-marker { color: #e74c3c; font-weight: 700; }

.rd-soil-box { margin-bottom: 12px; }
.rd-soil-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #636e72;
    margin-bottom: 4px;
}

.rd-advice {
    background: #fff8e1;
    border-left: 4px solid #f39c12;
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 12px;
}
.rd-advice .fi { color: #f39c12; font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

.rd-footer { text-align: right; color: #95a5a6; }

/* ===== Weather News Widget ===== */
.news-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.news-head h2 { font-size: 1.05rem; }

.news-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #636e72;
}

.news-live-dot {
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

.news-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

.news-feed::-webkit-scrollbar { width: 6px; }
.news-feed::-webkit-scrollbar-thumb { background: #dfe6e9; border-radius: 3px; }

.news-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 4px solid #74b9ff;
    transition: transform 0.15s, box-shadow 0.15s;
    animation: newsSlideIn 0.3s ease;
}

@keyframes newsSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.news-item:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.news-item.severity-severe { border-left-color: #e74c3c; background: #ffe0e0; }
.news-item.severity-high   { border-left-color: #e67e22; background: #fff3e0; }
.news-item.severity-official { border-left-color: #9b59b6; background: #f3e5f5; }
.news-item.severity-info   { border-left-color: #0984e3; }

.news-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.news-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0984e3;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.news-item.severity-severe .news-item-icon { color: #e74c3c; }
.news-item.severity-high .news-item-icon   { color: #e67e22; }
.news-item.severity-official .news-item-icon { color: #9b59b6; }

.news-item-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #2d3436;
    line-height: 1.3;
    flex: 1;
}

.news-item-summary {
    font-size: 0.8rem;
    color: #636e72;
    line-height: 1.5;
    margin-bottom: 6px;
}

.news-item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #95a5a6;
}

.news-item-meta strong { color: #636e72; font-weight: 600; }

.news-near-badge {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(0,184,148,0.3);
    flex-shrink: 0;
    animation: nearPulse 2s ease-in-out infinite;
}

@keyframes nearPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,184,148,0.3); }
    50%      { box-shadow: 0 2px 12px rgba(0,184,148,0.6); }
}

.news-near-badge .fi { font-size: 0.7rem; }

/* news item hover */
.news-item:hover {
    cursor: pointer;
    transform: translateX(2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.news-item:focus-visible {
    outline: 2px solid #0984e3;
    outline-offset: 2px;
}

/* ===== News Detail Modal ===== */
.news-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.news-modal-overlay.show { opacity: 1; }

.news-modal-content {
    background: white;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.news-modal-overlay.show .news-modal-content {
    transform: translateY(0) scale(1);
}

/* แถบสีบนสุดตาม severity */
.news-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: #74b9ff;
    border-radius: 16px 16px 0 0;
}

.news-modal-content.severity-severe::before { background: #e74c3c; }
.news-modal-content.severity-high::before   { background: #e67e22; }
.news-modal-content.severity-official::before { background: #9b59b6; }
.news-modal-content.severity-info::before    { background: #0984e3; }

.news-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    border: none;
    color: #636e72;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}

.news-modal-close:hover {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
}

.news-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 12px;
    padding-right: 56px;
}

.news-modal-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f4fd, #d6eaff);
    color: #0984e3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.news-modal-content.severity-severe .news-modal-icon-wrap { background: linear-gradient(135deg, #ffe0e0, #ffcccc); color: #e74c3c; }
.news-modal-content.severity-high .news-modal-icon-wrap   { background: linear-gradient(135deg, #fff3e0, #ffe9d0); color: #e67e22; }
.news-modal-content.severity-official .news-modal-icon-wrap { background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #9b59b6; }

.news-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #2d3436;
    flex: 1;
}

.news-modal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 24px 12px;
}

.news-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f5f7fa;
    color: #636e72;
}

.news-modal-badge .fi { font-size: 0.7rem; }

.news-modal-badge.sev-severe   { background: #ffe0e0; color: #c0392b; }
.news-modal-badge.sev-high     { background: #fff3e0; color: #b96104; }
.news-modal-badge.sev-official { background: #f3e5f5; color: #6c3483; }
.news-modal-badge.sev-info     { background: #e8f4fd; color: #0984e3; }
.news-modal-badge.near         { background: linear-gradient(135deg, #00b894, #00cec9); color: white; }

.news-modal-body { padding: 0 24px 16px; }

.news-modal-summary {
    color: #2d3436;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
    background: #f8f9fa;
    padding: 14px;
    border-radius: 10px;
    border-left: 4px solid #dfe6e9;
}

.news-modal-content.severity-severe   .news-modal-summary { border-left-color: #e74c3c; }
.news-modal-content.severity-high     .news-modal-summary { border-left-color: #e67e22; }
.news-modal-content.severity-official .news-modal-summary { border-left-color: #9b59b6; }
.news-modal-content.severity-info     .news-modal-summary { border-left-color: #0984e3; }

.news-modal-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-modal-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: #636e72;
}

.news-modal-meta-item .fi {
    color: #95a5a6;
    margin-top: 2px;
    flex-shrink: 0;
}

.news-modal-meta-item strong { color: #2d3436; font-weight: 600; }

.news-modal-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.news-modal-link {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    color: white !important;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(9,132,227,0.3);
}

.news-modal-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(9,132,227,0.4);
}

.news-modal-btn-close {
    background: white;
    border: 1.5px solid #dfe6e9;
    color: #636e72;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.news-modal-btn-close:hover {
    background: #f5f7fa;
    border-color: #95a5a6;
    color: #2d3436;
}

@media (max-width: 600px) {
    .news-modal-content { max-height: 92vh; }
    .news-modal-head { padding: 20px 20px 10px; padding-right: 52px; }
    .news-modal-badges,
    .news-modal-body,
    .news-modal-footer { padding-left: 20px; padding-right: 20px; }
    .news-modal-title { font-size: 1rem; }
}

.news-loading {
    padding: 40px;
    text-align: center;
    color: #95a5a6;
}
.news-loading .fi { animation: spin 1s linear infinite; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.news-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #dfe6e9;
    text-align: center;
    color: #95a5a6;
    font-size: 0.7rem;
}

/* ===== Live TV Widget ===== */
.tv-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.tv-head h2 { font-size: 1.1rem; }

.tv-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #636e72;
}

.tv-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.tv-cat {
    background: white;
    border: 1.5px solid #dfe6e9;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: #636e72;
    transition: all 0.15s;
    font-family: inherit;
}

.tv-cat:hover { border-color: #0984e3; color: #0984e3; }
.tv-cat.active {
    background: #0984e3;
    color: white;
    border-color: #0984e3;
}

.tv-cat-spacer { flex: 1; background: transparent; border: none; cursor: default; }

.tv-close-all,
.tv-open-all {
    background: white;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tv-close-all {
    border: 1.5px solid #ffd5d0;
    color: #e74c3c;
}
.tv-close-all:hover {
    background: #ffe9e6;
    border-color: #e74c3c;
}

.tv-open-all {
    border: 1.5px solid #b8e0d0;
    color: #27ae60;
    margin-right: 6px;
}
.tv-open-all:hover {
    background: #e6f5ee;
    border-color: #27ae60;
}
body.theme-dark .tv-open-all {
    background: rgba(46,204,113,0.10);
    border-color: rgba(46,204,113,0.30);
    color: #6fcf97;
}
body.theme-dark .tv-open-all:hover {
    background: rgba(46,204,113,0.20);
    border-color: rgba(46,204,113,0.55);
}

.tv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.tv-chip {
    background: white;
    border: 1.5px solid #dfe6e9;
    border-radius: 24px;
    padding: 7px 14px 7px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3436;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
}

.tv-chip:hover {
    border-color: var(--ch-color, #0984e3);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.tv-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ch-color, #0984e3);
    flex-shrink: 0;
}

.tv-chip.active {
    background: var(--ch-color, #0984e3);
    color: white;
    border-color: var(--ch-color, #0984e3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tv-chip.active .tv-chip-dot {
    background: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.7);
    animation: tvLive 1.5s infinite;
}

/* LIVE badge — กระพริบสีแดง */
.tv-chip-live {
    background: #e74c3c;
    color: white;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(231,76,60,0.5);
    animation: liveBlink 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes liveBlink {
    0%, 100% { box-shadow: 0 0 8px rgba(231,76,60,0.5); opacity: 1; }
    50%      { box-shadow: 0 0 14px rgba(231,76,60,0.9); opacity: 0.85; }
}

.tv-chip.tv-chip-is-live {
    border-color: var(--ch-color, #0984e3);
    box-shadow: 0 2px 8px rgba(231,76,60,0.2);
}

/* ซ่อน chip ที่ตรวจแล้วว่าไม่ live */
.tv-chip-not-live { display: none !important; }

/* Pre-hide ขณะรอ live check (legacy — ตอนนี้ไม่ใช้แล้ว แต่เก็บไว้เผื่อ override) */
.tv-chip-pending { display: none !important; }

/* chip ที่ตรวจสถานะไม่ได้ (server blind / no API key) — แสดงไว้แต่จาง + ? indicator */
/* Upcoming / Premiere — แสดง badge สีน้ำเงิน ไม่ใช่ LIVE สีแดง */
.tv-chip-upcoming { opacity: 0.85; }
.tv-chip-upcoming-badge {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    letter-spacing: 0.3px;
}

.tv-chip-unknown { opacity: 0.75; }
.tv-chip-unknown::before {
    content: '?';
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(149,165,166,0.35);
    color: rgba(0,0,0,0.55);
    font-size: 0.65rem;
    font-weight: 800;
    text-align: center;
    line-height: 14px;
    margin-right: 4px;
}
body.theme-dark .tv-chip-unknown::before { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.18); }

/* Admin notice — แสดงเมื่อ liveOnly เปิด + ยังไม่ได้ตั้ง YouTube API key */
.tv-admin-notice {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    margin: 0 0 10px;
    background: linear-gradient(135deg, rgba(243,156,18,0.08), rgba(243,156,18,0.02));
    border: 1px solid rgba(243,156,18,0.25);
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.tv-admin-notice > .fi {
    color: #d35400;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.tv-admin-notice > div { flex: 1; min-width: 0; }
.tv-admin-notice strong { display: block; color: var(--card-text); font-weight: 700; }
.tv-admin-notice small { color: var(--card-text-muted); font-size: 0.78rem; line-height: 1.45; }
.tv-admin-notice-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(243,156,18,0.30);
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
.tv-admin-notice-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(243,156,18,0.40); }
body.theme-dark .tv-admin-notice {
    background: linear-gradient(135deg, rgba(243,156,18,0.18), rgba(243,156,18,0.05));
    border-color: rgba(243,156,18,0.35);
}
@media (max-width: 600px) {
    .tv-admin-notice { flex-direction: column; align-items: stretch; padding: 10px 12px; }
    .tv-admin-notice-btn { width: 100%; justify-content: center; }
}
.tv-chip-unknown .tv-chip-dot {
    background: #b2bec3;
    box-shadow: 0 0 0 2px rgba(178,190,195,0.3);
}

/* ข้อความระหว่างตรวจสอบ */
.tv-chips-checking-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--accent-bg, rgba(116,185,255,0.12));
    color: var(--accent, #0984e3);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}
.tv-chips-checking-msg .fi { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tv-chips-checking-msg.is-done { display: none; }

/* Server can't reach YouTube (datacenter IP โดน block) */
.tv-server-blind-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(243,156,18,0.12);
    color: #b96104;
    border: 1px solid rgba(243,156,18,0.35);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.tv-server-blind-msg .fi { flex-shrink: 0; margin-top: 2px; }
body.theme-dark .tv-server-blind-msg {
    background: rgba(243,156,18,0.16);
    color: #ffd089;
    border-color: rgba(243,156,18,0.4);
}

/* ขณะตรวจสอบ — เทาๆ */
.tv-chip-checking {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.tv-chip-checking::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s infinite;
    border-radius: 24px;
    pointer-events: none;
}

.tv-chips-empty {
    width: 100%;
    text-align: center;
    color: var(--card-text-muted, #95a5a6);
    padding: 14px;
    font-size: 0.9rem;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 10px;
    border: 1px dashed var(--card-border, #dfe6e9);
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.tv-chips-empty-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(9,132,227,0.30);
    transition: transform 0.15s, box-shadow 0.15s;
}
.tv-chips-empty-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(9,132,227,0.40); }
.tv-chips-empty-btn .fi { font-size: 0.78rem; }

@keyframes tvLive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* TV Grid: base = auto-fill 320px+ (สำหรับ 5+ ช่อง) */
.tv-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Override สำหรับจำนวนน้อย (1-4) เพื่อให้ดูสมดุล */
.tv-grid[data-count="0"],
.tv-grid[data-count="1"] { grid-template-columns: 1fr; }
.tv-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.tv-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.tv-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }

/* Tablet (≤1024px) — ลด min ของ auto-fill */
@media (max-width: 1024px) {
    .tv-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .tv-grid[data-count="3"] { grid-template-columns: 1fr 1fr; }
}

/* Mobile (≤700px) — 2 col */
@media (max-width: 700px) {
    .tv-grid,
    .tv-grid[data-count="2"],
    .tv-grid[data-count="3"],
    .tv-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
    .tv-tile-head { padding: 6px 10px; }
    .tv-tile-title { font-size: 0.78rem; }
    .tv-tile-close { width: 22px; height: 22px; font-size: 0.65rem; }
}

/* Mobile แคบ (≤480px) — 1 col */
@media (max-width: 480px) {
    .tv-grid,
    .tv-grid[data-count="2"],
    .tv-grid[data-count="3"],
    .tv-grid[data-count="4"] { grid-template-columns: 1fr; }
}

.tv-tile {
    background: black;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    animation: tvSlideIn 0.3s ease;
}

@keyframes tvSlideIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.tv-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    color: white;
    font-weight: 700;
}

.tv-tile-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-tile-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s;
}

.tv-tile-close:hover { background: rgba(255,255,255,0.35); }

.tv-tile-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
}

.tv-tile-frame iframe,
.tv-tile-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
    background: black;
    object-fit: contain;
}

/* Unmute button — เล็ก ๆ ติดข้างปุ่ม X ที่หัว tile
   แก้ปัญหา iOS Safari mute=1 reset ทุก 10s — tap to unmute via YouTube API */
.tv-tile-unmute {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    transition: background 0.15s, transform 0.15s;
    margin-right: 6px;
    position: relative;
    flex-shrink: 0;
}
/* pulse เฉพาะตอน muted (เรียก attention ให้กด) — ไม่ pulse ตอน unmuted */
.tv-tile-unmute.is-muted {
    animation: tv-unmute-pulse-soft 1.8s ease-in-out infinite;
}
.tv-tile-unmute:hover { background: rgba(255,255,255,0.4); transform: scale(1.08); }
.tv-tile-unmute .fi::before { display: block; line-height: 1; }
.tv-tile-unmute.is-active {
    background: rgba(46,204,113,0.85);
    animation: none;
}
.tv-tile-unmute.is-active:hover { background: rgba(46,204,113,1); }
@keyframes tv-unmute-pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

@media (max-width: 600px) {
    .tv-tile-unmute {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
        margin-right: 4px;
    }
}

/* Placeholder เมื่อ stream ไม่มี / ใช้ไม่ได้ */
.tv-no-stream {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a1a, #2d3436);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 20px;
    z-index: 2;
}

.tv-no-stream > .fi {
    font-size: 2.5rem;
    color: #95a5a6;
    margin-bottom: 12px;
}

.tv-no-stream-text { margin-bottom: 16px; line-height: 1.5; }
.tv-no-stream-text strong { font-size: 1rem; display: block; margin-bottom: 4px; }
.tv-no-stream-text small { color: #95a5a6; font-size: 0.78rem; }

.tv-no-stream-btn {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    color: white;
    padding: 10px 22px;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(9,132,227,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}

.tv-no-stream-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(9,132,227,0.5);
}

/* Legacy corner fallback — kept for backward compat but not used in new tiles */
.tv-tile-fallback {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    text-decoration: none;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.tv-tile-fallback:hover { opacity: 1; }

/* ----- New: loading skeleton (shown while iframe/video loads) ----- */
.tv-tile-frame.is-loading {
    background: linear-gradient(135deg, #2d3436, #1a1a1a);
}
.tv-tile-skeleton {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.85);
    z-index: 3;
    pointer-events: none;
}
.tv-tile-skeleton-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tv-tile-spin 0.9s linear infinite;
}
@keyframes tv-tile-spin { to { transform: rotate(360deg); } }
.tv-tile-skeleton-text {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

/* ----- Tip overlay (shown after 8s timeout if iframe still not loading) ----- */
.tv-tile-tip {
    position: absolute;
    left: 12px; right: 12px; top: 12px;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 10px 12px 10px 14px;
    border-radius: 10px;
    border-left: 3px solid #f39c12;
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 0.82rem;
    line-height: 1.45;
    z-index: 4;
    animation: tv-tip-in 0.25s ease-out;
}
@keyframes tv-tip-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.tv-tile-tip > .fi { color: #f39c12; flex-shrink: 0; margin-top: 2px; }
.tv-tile-tip span { flex: 1; min-width: 0; }
.tv-tile-tip a { color: #74b9ff; font-weight: 700; text-decoration: underline; }
.tv-tile-tip-close {
    background: transparent;
    border: none; color: rgba(255,255,255,0.7);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.tv-tile-tip-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ----- Footer bar — always-visible link to official site ----- */
.tv-tile-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--card-bg-soft, #f5f7fa);
    border-top: 1px solid var(--card-border, rgba(0,0,0,0.06));
    font-size: 0.8rem;
}
.tv-tile-foot-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--accent, #0984e3);
    text-decoration: none;
    font-weight: 700;
    flex-shrink: 0;
    transition: color 0.15s;
}
.tv-tile-foot-link:hover { color: #74b9ff; }
.tv-tile-foot-link .fi { font-size: 0.78rem; }
.tv-tile-foot-hint {
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.72rem;
    text-align: right;
    line-height: 1.3;
}
body.theme-dark .tv-tile-foot {
    background: rgba(255,255,255,0.04);
    border-top-color: rgba(255,255,255,0.06);
}

@media (max-width: 600px) {
    .tv-tile-foot { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 10px; }
    .tv-tile-foot-hint { text-align: left; }
}

.tv-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: var(--card-text-muted, #95a5a6);
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 12px;
    border: 2px dashed var(--card-border, #dfe6e9);
}

.tv-empty .fi {
    font-size: 3rem;
    color: var(--card-text-faint, #b2bec3);
    display: block;
    margin-bottom: 12px;
}

.tv-empty small { color: var(--card-text-faint, #b2bec3); font-size: 0.8rem; }

.tv-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #dfe6e9;
    text-align: center;
    color: #95a5a6;
    font-size: 0.72rem;
}

/* ===== Sun Info Widget v2 — animated arc with sun/moon ===== */
.widget-sun { padding: 8px 0; }
.sun-row {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    margin: 14px 0;
}
.sun-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sun-emoji { font-size: 2rem; }
.sun-label { font-size: 0.75rem; color: var(--card-text-muted, #636e72); }
.sun-time { font-size: 1.3rem; font-weight: 700; color: #e67e22; }
.sun-meta {
    text-align: center;
    font-size: 0.8rem;
    color: var(--card-text-muted, #636e72);
    background: var(--card-bg-soft, #f5f7fa);
    padding: 8px;
    border-radius: 8px;
}

/* === v2: Sun/Moon arc widget — เต็มกรอบ widget (ไม่มี card ซ้อน card) === */
/* ลบ background/padding ของ widget wrapper เมื่อเจอ .sun-v2 ข้างใน */
.widget:has(.sun-v2) {
    padding: 0;
    background: transparent;
    overflow: hidden;
}
.widget-sun.sun-v2 {
    position: relative;
    padding: 0;
    margin: 0;
    border-radius: 16px;       /* match .widget border-radius */
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    min-height: 100%;
}
/* Day phase — warm sunny sky */
.widget-sun.sun-v2[data-phase="day"] .sun-bg-sky {
    background: linear-gradient(180deg, #4fa8d8 0%, #87ceeb 35%, #fcd170 75%, #fda85b 100%);
}
/* Night phase — deep purple → indigo */
.widget-sun.sun-v2[data-phase="night"] .sun-bg-sky {
    background: linear-gradient(180deg, #0c1445 0%, #1a1b4b 40%, #2d3561 75%, #3e3a5f 100%);
}
.sun-bg-sky {
    position: absolute;
    inset: 0;
    z-index: -2;
    transition: background 1.6s ease;
}
.sun-bg-stars {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 28% 36%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 46% 22%, #fffbe0 50%, transparent 100%),
        radial-gradient(1px 1px at 68% 14%, #fff 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 82% 28%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 90% 8%, #fff 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 6% 44%, #fff 50%, transparent 100%);
    background-size: 100% 60%;
    background-repeat: no-repeat;
}
.widget-sun.sun-v2[data-phase="night"] .sun-bg-stars { opacity: 0.85; }

.sun-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 6px;
    z-index: 1;
}
.sun-head-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 0.95rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.sun-head-title .fi { font-size: 1rem; transition: opacity 0.4s ease; }
.sun-head-icon-moon { display: none; }
.widget-sun.sun-v2[data-phase="night"] .sun-head-title > .fi:not(.sun-head-icon-moon .fi) { display: none; }
.widget-sun.sun-v2[data-phase="night"] .sun-head-icon-moon { display: inline-flex; align-items: center; }
.sun-phase-label {
    font-size: 0.78rem;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    backdrop-filter: blur(8px);
    font-weight: 600;
}

/* Arc */
.sun-arc-stage {
    position: relative;
    margin: 0 16px;
    height: 110px;
}
.sun-arc-svg {
    width: 100%; height: 100%;
    color: #fff;
    overflow: visible;
}
.sun-arc-horizon {
    stroke: rgba(255,255,255,0.35);
    stroke-width: 0.8;
    stroke-dasharray: 3 3;
}
.sun-arc-path {
    stroke: rgba(255,255,255,0.35);
    stroke-width: 1.4;
    stroke-dasharray: 2 3;
}
.sun-arc-fill { opacity: 0.6; }
/* sunDisc = <g> ตอนนี้ — animate transform เพื่อเคลื่อนตามอาร์ก */
.sun-disc-group {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.6, 1);
}
.sun-disc {
    fill: #ffd166;
    transition: fill 1.4s ease, filter 1.4s ease;
    filter: drop-shadow(0 0 12px rgba(255,209,102,0.7))
            drop-shadow(0 0 4px rgba(255,166,42,0.5));
}
.widget-sun.sun-v2[data-phase="night"] .sun-disc {
    fill: #f0e7d8;
    filter: drop-shadow(0 0 14px rgba(240,231,216,0.55))
            drop-shadow(0 0 5px rgba(180,200,255,0.35));
}

/* Moon shadow — แสดงเฉพาะตอนกลางคืน + เคลื่อน cx ตาม phase */
.sun-moon-shadow {
    fill: #161a48;            /* close to night sky midtone */
    transition: cx 1.6s cubic-bezier(0.4, 0, 0.6, 1),
                opacity 0.8s ease;
    opacity: 0;               /* ซ่อนตอนกลางวัน */
    pointer-events: none;
}
.widget-sun.sun-v2[data-phase="night"] .sun-moon-shadow {
    opacity: 0.92;
}

/* Moon info chip + daylen chip — โผล่ใน head */
.sun-moon-info,
.sun-daylen-chip {
    font-size: 0.74rem;
    padding: 3px 9px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.92);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* day-length chip โผล่เฉพาะตอนกลางวัน, moon-info เฉพาะกลางคืน */
.widget-sun.sun-v2[data-phase="night"] .sun-daylen-chip { display: none; }
.widget-sun.sun-v2[data-phase="day"] .sun-moon-info { display: none; }
.sun-head { flex-wrap: wrap; gap: 6px; }

/* Sun/moon times row (override default) */
.sun-v2-row {
    margin: 4px 16px 8px;
    color: #fff;
    align-items: stretch;
}
.sun-v2-row .sun-emoji {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.sun-v2-row .sun-emoji .meteo-icon img { width: 26px; height: 26px; }
.sun-v2-row .sun-label {
    color: rgba(255,255,255,0.75);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sun-v2-row .sun-time {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Progress mid */
.sun-progress-mid {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-align: center;
}
.sun-progress-bar {
    height: 5px;
    background: rgba(0,0,0,0.25);
    border-radius: 999px;
    overflow: hidden;
}
.sun-progress-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffd166, #fda85b);
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.6, 1);
}
.widget-sun.sun-v2[data-phase="night"] .sun-progress-bar span {
    background: linear-gradient(90deg, #a8b8ff, #6a7bff);
}
.sun-progress-mid small {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Add bottom padding to last row so it doesn't touch widget edge */
.sun-v2-row { margin-bottom: 16px; }

/* Mobile: simpler row */
@media (max-width: 560px) {
    .sun-v2-row { flex-direction: column; gap: 10px; }
    .sun-progress-mid { order: 3; }
}

header { display: none; }

header h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

header p {
    opacity: 0.9;
    font-size: 0.95rem;
}

/* ===== Current Location Card (compact) ===== */
.current-location-card {
    background: var(--card-bg, #ffffff);
    color: var(--card-text, #2d3436);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 24px;
}

.cl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cl-info { min-width: 0; flex: 1; }

.cl-head h2 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.cl-sub {
    font-size: 0.78rem;
    color: var(--card-text-muted, #636e72);
}

.btn-locate {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 8px rgba(0,184,148,0.3);
    white-space: nowrap;
}

.btn-locate:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,184,148,0.4); }
.btn-locate:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.cl-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--card-border, #dfe6e9);
}

.cl-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cl-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl-icon .meteo-icon,
.cl-icon .meteo-icon > svg,
.cl-icon .meteo-icon > img {
    width: 56px;
    height: 56px;
    display: block;
}
.cl-icon .meteo-icon { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 700px) {
    .cl-icon .meteo-icon,
    .cl-icon .meteo-icon > svg,
    .cl-icon .meteo-icon > img { width: 48px; height: 48px; }
}
.cl-temp {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent, #0984e3);
    line-height: 1.1;
}
.cl-desc {
    color: var(--card-text-muted, #636e72);
    font-size: 0.8rem;
    margin-top: 2px;
}

.cl-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.cl-details > div {
    background: var(--card-bg-soft, #f5f7fa);
    padding: 5px 8px;
    border-radius: 8px;
    text-align: center;
}

.cl-details span {
    display: block;
    font-size: 0.65rem;
    color: var(--card-text-muted, #636e72);
    margin-bottom: 1px;
}

.cl-details strong { font-size: 0.82rem; color: var(--card-text, #2d3436); }

@media (max-width: 700px) {
    .cl-head { flex-direction: column; align-items: stretch; }
    .cl-main { justify-content: flex-start; }
}

/* ===== Map ===== */
.map-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 24px;
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.map-header h2 { font-size: 1.05rem; margin: 0; }

.map-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.map-controls button {
    background: #0984e3;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.map-controls button:hover { background: #0768b8; }

#frameTime {
    background: #f5f7fa;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    color: #2d3436;
    min-width: 80px;
    text-align: center;
}

#map {
    height: 520px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
    position: relative;   /* anchor สำหรับ .radar-zoom-notice */
}

/* Zoom notice — โผล่เมื่อ user ซูมเข้าเกิน radar coverage */
.radar-zoom-notice {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.18);
    transition: background 0.15s, transform 0.15s;
    animation: radar-zoom-notice-in 0.22s ease-out;
}
.radar-zoom-notice:hover { background: rgba(0,0,0,0.92); transform: translateX(-50%) translateY(-1px); }
.radar-zoom-notice .fi { font-size: 0.9rem; color: #f39c12; }
@keyframes radar-zoom-notice-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#windyFrame {
    border-radius: 12px;
    border: none;
    width: 100%;
    display: block;
    background: #f5f7fa;
}

/* Layer/color options bar */
.map-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.map-options label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: #636e72;
    font-weight: 600;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}

.map-options select,
.map-controls select {
    background: #f5f7fa;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2d3436;
    cursor: pointer;
    font-family: inherit;
}

.map-options select:focus,
.map-controls select:focus {
    outline: none;
    border-color: #0984e3;
}

.map-controls label {
    font-size: 0.8rem;
    color: #636e72;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* .sync-toggle - removed, no longer used */

/* Frame slider */
.frame-slider-wrap {
    padding: 12px 4px 4px;
}

#frameSlider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #74b9ff 0%, #0984e3 100%);
    border-radius: 3px;
    outline: none;
}

#frameSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: white;
    border: 3px solid #0984e3;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#frameSlider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: white;
    border: 3px solid #0984e3;
    border-radius: 50%;
    cursor: pointer;
}

.map-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: #636e72;
    justify-content: center;
}

.legend-bar {
    flex: 0 0 200px;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        #4b0082 0%,
        #0000ff 20%,
        #00ffff 40%,
        #00ff00 60%,
        #ffff00 80%,
        #ff0000 100%);
}

/* ===== Section Title ===== */
.section-title {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ===== City Cards Grid ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.2);
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.city-name {
    font-size: 1.25rem;
    font-weight: 600;
}

.city-name small {
    display: block;
    font-size: 0.75rem;
    color: #636e72;
    font-weight: 400;
    margin-top: 2px;
}

.icon { font-size: 3rem; line-height: 1; }

.temp {
    font-size: 3rem;
    font-weight: 700;
    color: #0984e3;
    margin: 8px 0;
}

.temp span { font-size: 1.5rem; vertical-align: top; }

.desc {
    color: #636e72;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #dfe6e9;
}

.detail-item { text-align: center; }

.detail-label {
    font-size: 0.75rem;
    color: #636e72;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2px;
}

.footer {
    text-align: center;
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    margin-top: 30px;
}

.footer a { color: white; }

.error {
    background: #fab1a0;
    color: #2d3436;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.updated {
    font-size: 0.75rem;
    color: #b2bec3;
    text-align: right;
    margin-top: 8px;
}

/* ===== Mobile ===== */
@media (max-width: 600px) {
    body { padding: 12px; padding-top: 84px; }
    .topnav { top: 8px; left: 8px; right: 8px; }
    .card, .map-section, .current-location-card { padding: 16px; }
    .temp { font-size: 2.5rem; }
    .icon { font-size: 2.5rem; }
    .cl-icon { font-size: 3rem; }
    .cl-temp { font-size: 2rem; }
    .cl-details { grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .cl-details > div { padding: 6px 4px; }
    .cl-details span { font-size: 0.62rem; }
    .cl-details strong { font-size: 0.78rem; }
    #map { height: 360px; }
    #windyFrame { height: 380px; }
    .btn-locate { width: 100%; }
    .cl-head { flex-direction: column; align-items: stretch; }
    .map-options label { min-width: 100%; }
    .grid-2 { grid-template-columns: 1fr; }
    .auth-card { padding: 24px 20px; }
    .settings-card { padding: 20px; }
    .topnav { padding: 10px 14px; }
    .widgets-container { grid-template-columns: 1fr; gap: 16px; }
    .widget[data-widget] { grid-column: 1 / -1 !important; }
    .widget { padding: 16px; }
    .clock-time { font-size: 2.2rem; }
}

/* =====================================================================
   ===== DARK MODE — comprehensive widget overrides ====================
   ===================================================================== */
body.theme-dark .widget,
body.theme-dark .widget * {
    border-color: var(--card-border);
}

body.theme-dark .widget h1,
body.theme-dark .widget h2,
body.theme-dark .widget h3,
body.theme-dark .widget h4,
body.theme-dark .widget p,
body.theme-dark .widget span,
body.theme-dark .widget div,
body.theme-dark .widget small,
body.theme-dark .widget label,
body.theme-dark .widget strong { color: inherit; }

body.theme-dark .widget h1 .fi,
body.theme-dark .widget h2 .fi,
body.theme-dark .widget h3 .fi,
body.theme-dark .widget .cl-icon .fi,
body.theme-dark .widget .rc-soil-label .fi { color: var(--accent); }

body.theme-dark .widget .cl-sub,
body.theme-dark .widget .clock-date,
body.theme-dark .widget .sun-meta,
body.theme-dark .widget .sun-label,
body.theme-dark .widget .rainfall-sub,
body.theme-dark .widget .rainfall-note,
body.theme-dark .widget .rc-stat-label,
body.theme-dark .widget .rc-stat-label .fi,
body.theme-dark .widget .rc-en,
body.theme-dark .widget .cm-en,
body.theme-dark .widget .cm-meta,
body.theme-dark .widget .news-meta,
body.theme-dark .widget .news-source,
body.theme-dark .widget .news-time,
body.theme-dark .widget .rd-sub,
body.theme-dark .widget .rd-coord,
body.theme-dark .widget .rd-stat-label,
body.theme-dark .widget .tv-footer,
body.theme-dark .widget .news-footer,
body.theme-dark .widget .map-options label { color: var(--card-text-muted); }

/* Widget tools (drag/remove/resize) */
body.theme-dark .widget-drag-handle,
body.theme-dark .widget-remove,
body.theme-dark .widget-size-btn {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .widget-drag-handle:hover,
body.theme-dark .widget-remove:hover,
body.theme-dark .widget-size-btn:hover {
    background: var(--card-bg-softer);
}
body.theme-dark .widget-size-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Cities mini grid */
body.theme-dark .city-mini {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
    color: var(--card-text);
}
body.theme-dark .cm-name { color: var(--card-text); }
body.theme-dark .cm-desc { color: var(--card-text-muted); }

/* Rainfall risk cards */
body.theme-dark .rain-card {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
    color: var(--card-text);
}
body.theme-dark .rain-card .rc-name { color: var(--card-text); }
body.theme-dark .rain-card .rc-now-num { color: var(--accent-soft, #74b9ff); }
body.theme-dark .rain-card .rc-stat-val { color: var(--accent-soft, #74b9ff); }
body.theme-dark .rain-card .rc-soil-bar {
    background: rgba(255,255,255,0.1);
}
/* Risk badge pills — ensure dark text on light pill bg in dark theme
   (override generic .widget div { color: inherit } rule by specificity) */
body.theme-dark .widget .rc-risk-badge,
body.theme-dark .widget .rd-risk {
    background: rgba(255,255,255,0.95);
    color: #1a1d1f;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
body.theme-dark .rain-card.user-rain-card {
    background: linear-gradient(135deg, rgba(116,185,255,0.15), rgba(9,132,227,0.08));
    border-color: var(--accent);
}

/* Province search */
body.theme-dark .rf-search {
    background: var(--input-bg);
    border-color: var(--input-border);
}
body.theme-dark .rf-search input,
body.theme-dark .rf-suggest {
    background: transparent;
    color: var(--input-text);
    border-color: var(--input-border);
}
body.theme-dark .rf-suggest .sg-item { color: var(--card-text); }
body.theme-dark .rf-suggest .sg-item:hover { background: var(--card-bg-softer); }
body.theme-dark .btn-rf-toggle {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .btn-rf-toggle.active,
body.theme-dark .btn-rf-toggle:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Clock & Sun */
body.theme-dark .widget-clock,
body.theme-dark .widget-sun {
    color: var(--card-text);
}
body.theme-dark .sun-time { color: var(--card-text); }
body.theme-dark .clock-label { color: var(--card-text-muted); }
body.theme-dark .sun-item { background: transparent; }

/* News feed */
body.theme-dark .news-feed { color: var(--card-text); }
body.theme-dark .news-item {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
    color: var(--card-text);
}
body.theme-dark .news-item:hover {
    background: var(--card-bg-softer);
}
body.theme-dark .news-title { color: var(--card-text); }
body.theme-dark .news-summary { color: var(--card-text-muted); }
body.theme-dark .news-loading { color: var(--card-text-muted); }

/* News modal */
body.theme-dark .news-modal-content {
    background: var(--card-bg);
    color: var(--card-text);
}
body.theme-dark .news-modal-title,
body.theme-dark .news-modal-summary { color: var(--card-text); }
body.theme-dark .news-modal-summary {
    background: var(--card-bg-soft);
    border-left-color: var(--card-border);
}
body.theme-dark .news-modal-content.severity-severe   .news-modal-summary { border-left-color: #ff6b6b; }
body.theme-dark .news-modal-content.severity-high     .news-modal-summary { border-left-color: #f0a04b; }
body.theme-dark .news-modal-content.severity-official .news-modal-summary { border-left-color: #c39bd3; }
body.theme-dark .news-modal-content.severity-info     .news-modal-summary { border-left-color: #74b9ff; }
body.theme-dark .news-modal-meta-item { color: var(--card-text-muted); }
body.theme-dark .news-modal-meta-item strong { color: var(--card-text); }
body.theme-dark .news-modal-meta-item .fi { color: var(--card-text-muted); }
/* Badges — keep colored variants readable on dark cards */
body.theme-dark .news-modal-badge {
    background: var(--card-bg-soft);
    color: var(--card-text);
}
body.theme-dark .news-modal-badge.sev-severe   { background: rgba(231,76,60,0.22);  color: #ffb3a8; }
body.theme-dark .news-modal-badge.sev-high     { background: rgba(230,126,34,0.22); color: #ffcc99; }
body.theme-dark .news-modal-badge.sev-official { background: rgba(155,89,182,0.22); color: #d6b6e5; }
body.theme-dark .news-modal-badge.sev-info     { background: rgba(9,132,227,0.22);  color: #9ec9f4; }
body.theme-dark .news-modal-close,
body.theme-dark .news-modal-btn-close {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .news-modal-footer {
    border-top-color: var(--card-border);
}

/* TV chips */
body.theme-dark .tv-chip {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .tv-chip:hover { background: var(--card-bg-softer); }
body.theme-dark .tv-cat {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .tv-cat.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
body.theme-dark .tv-close-all {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .tv-empty {
    background: var(--card-bg-soft);
    color: var(--card-text-muted);
    border-color: var(--card-border);
}
body.theme-dark .tv-card {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}
body.theme-dark .tv-card-head {
    background: var(--card-bg-softer);
    color: var(--card-text);
}

/* Rainfall detail */
body.theme-dark .rd-empty {
    background: var(--card-bg-soft);
    color: var(--card-text-muted);
    border-color: var(--card-border);
}
body.theme-dark .rd-now-box {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
    color: var(--card-text);
}
body.theme-dark .rd-stat {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
    color: var(--card-text);
}
body.theme-dark .rd-stat-val { color: var(--accent-soft, #74b9ff); }
body.theme-dark .rd-chart {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}
body.theme-dark .rd-soil-box {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}
body.theme-dark .rd-advice {
    background: var(--card-bg-soft) !important;
    border-left-color: #f39c12;
    color: var(--card-text) !important;
}

/* ===== Rainfall detail widget — dark backgrounds ===== */
body.theme-dark .rd-stat,
body.theme-dark .rc-stat {
    background: var(--card-bg-soft) !important;
}
body.theme-dark .rd-chart-wrap {
    background: var(--card-bg-soft) !important;
}
body.theme-dark .rd-chart-title { color: var(--card-text) !important; }
body.theme-dark .rd-chart { border-bottom-color: var(--card-border) !important; }
body.theme-dark .rd-footer,
body.theme-dark .rc-updated,
body.theme-dark .rd-update { color: var(--card-text-muted) !important; }

/* ===== Sun info widget ===== */
body.theme-dark .sun-meta {
    background: var(--card-bg-soft) !important;
    color: var(--card-text-muted) !important;
}
body.theme-dark .sun-item {
    background: transparent !important;
}

/* Map controls inside widget */
body.theme-dark .widget select,
body.theme-dark .widget input[type="text"],
body.theme-dark .widget input[type="number"],
body.theme-dark .widget input[type="search"] {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}
body.theme-dark .map-controls button {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}

/* Custom Select (Windy overlay) */
body.theme-dark .custom-select .cs-trigger,
body.theme-dark .custom-select .cs-menu {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}
body.theme-dark .custom-select .cs-option:hover,
body.theme-dark .custom-select .cs-option.active {
    background: var(--card-bg-softer);
}
body.theme-dark .custom-select .cs-sub { color: var(--card-text-muted); }

/* Skeletons */
body.theme-dark .skel,
body.theme-dark .skel-block,
body.theme-dark .skel-circle {
    background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-shine) 50%, var(--skel-base) 75%);
    background-size: 200% 100%;
}
body.theme-dark .skel-news-item {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}
body.theme-dark .skel-rain-card {
    background: linear-gradient(135deg, var(--card-bg-soft) 0%, var(--card-bg-softer) 100%);
    border-color: var(--card-border);
}
body.theme-dark .skel-rain-card .skel-line { background-color: rgba(255,255,255,0.08); }

/* Sidebar (widget editor) */
body.theme-dark .widget-sidebar {
    background: var(--card-bg);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .ws-header { border-bottom-color: var(--card-border); }
body.theme-dark .ws-item {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
    color: var(--card-text);
}
body.theme-dark .ws-item:hover { background: var(--card-bg-softer); }
body.theme-dark .ws-title { color: var(--card-text); }
body.theme-dark .ws-desc { color: var(--card-text-muted); }
body.theme-dark .ws-close {
    background: var(--card-bg-soft);
    color: var(--card-text);
}
body.theme-dark .ws-footer {
    color: var(--card-text-muted);
    border-top-color: var(--card-border);
}

/* Settings card / page (when in dark mode) */
body.theme-dark .settings-card,
body.theme-dark .settings-page {
    background: transparent;
    color: var(--card-text);
}
body.theme-dark .settings-card h1,
body.theme-dark .settings-card h2,
body.theme-dark .settings-card legend,
body.theme-dark .settings-card label,
body.theme-dark .settings-card span,
body.theme-dark .settings-card strong,
body.theme-dark .settings-page h1,
body.theme-dark .settings-page h2,
body.theme-dark .settings-page legend,
body.theme-dark .settings-page label,
body.theme-dark .settings-page label > span,
body.theme-dark .settings-page strong,
body.theme-dark .settings-form legend,
body.theme-dark .settings-form label,
body.theme-dark .settings-form label > span,
body.theme-dark .settings-form strong { color: var(--card-text); }
body.theme-dark .settings-sub,
body.theme-dark .settings-card small,
body.theme-dark .settings-page small,
body.theme-dark .settings-form small,
body.theme-dark .settings-form .small,
body.theme-dark .ch-edit-label { color: var(--card-text-muted) !important; }
body.theme-dark .settings-card fieldset,
body.theme-dark .settings-form fieldset,
body.theme-dark .settings-page fieldset {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}
body.theme-dark .settings-card fieldset input,
body.theme-dark .settings-card fieldset select,
body.theme-dark .settings-form input,
body.theme-dark .settings-form select,
body.theme-dark .settings-form textarea,
body.theme-dark .settings-card input[type="text"],
body.theme-dark .settings-card input[type="email"],
body.theme-dark .settings-card input[type="password"],
body.theme-dark .settings-card input[type="number"],
body.theme-dark .settings-page input,
body.theme-dark .settings-page select,
body.theme-dark .settings-page textarea {
    background: var(--input-bg, rgba(255,255,255,0.05)) !important;
    color: var(--input-text, var(--card-text)) !important;
    border-color: var(--input-border, var(--card-border)) !important;
}
body.theme-dark .settings-page select option {
    background: var(--card-bg);
    color: var(--card-text);
}
body.theme-dark .settings-tabs { border-bottom-color: var(--card-border); }
body.theme-dark .settings-tab {
    color: var(--card-text-muted);
}
body.theme-dark .settings-tab:hover {
    color: var(--accent);
    background: var(--accent-bg);
}
body.theme-dark .settings-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Tom Select inside dark theme */
body.theme-dark .ts-wrapper .ts-control {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}
body.theme-dark .ts-wrapper .ts-control > .item { color: var(--input-text) !important; }
body.theme-dark .ts-dropdown {
    background: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: var(--card-border) !important;
}
body.theme-dark .ts-dropdown .option {
    color: var(--card-text) !important;
}
body.theme-dark .ts-dropdown .option:hover,
body.theme-dark .ts-dropdown .option.active {
    background: var(--card-bg-softer) !important;
    color: var(--accent) !important;
}
body.theme-dark .ts-dropdown .option.selected {
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
}

/* TV channel picker cards in settings dark mode */
body.theme-dark .tv-channel-pick-card,
body.theme-dark .tv-channel-pick {
    background: var(--input-bg);
    color: var(--card-text);
    border-color: var(--input-border);
}
body.theme-dark .tv-pick-name { color: var(--card-text); }
body.theme-dark .tv-pick-cat {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border: 1px solid var(--card-border);
}
body.theme-dark .tv-channel-edit {
    background: transparent;
    border-color: var(--card-border);
}
body.theme-dark .ch-edit-modal-card { background: var(--card-bg); }
body.theme-dark .ch-edit-reset {
    background: rgba(255,255,255,0.06);
    color: var(--card-text-muted);
    border-color: var(--card-border);
}
body.theme-dark .ch-edit-label { color: var(--card-text-muted); }
body.theme-dark .ch-edit-url {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}
body.theme-dark .custom-channel-row input {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* Font/theme picker card backgrounds in dark mode */
body.theme-dark .font-card {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .font-card.active {
    background: var(--accent-bg);
    border-color: var(--accent);
}
body.theme-dark .font-card-name { color: var(--card-text); }
body.theme-dark .font-card-sample { color: var(--card-text-muted); }

/* Topnav for dark mode */
body.theme-dark .topnav { background: var(--topnav-bg); }
body.theme-dark .nav-pill {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
body.theme-dark .nav-pill:hover {
    background: rgba(255,255,255,0.15);
}
body.theme-dark .nav-pill-primary {
    background: var(--accent);
}

/* Alerts in dark mode */
body.theme-dark .alert-success {
    background: rgba(0,184,148,0.18);
    color: #55efc4;
    border-left-color: #00b894;
}
body.theme-dark .alert-error {
    background: rgba(231,76,60,0.18);
    color: #ff7675;
    border-left-color: #e74c3c;
}

/* Footer base — applies to all themes (override only color) */
body.theme-dark .footer { color: var(--footer-color); }
body.theme-dark .footer a { color: var(--footer-link); }

/* =====================================================================
   ===== About / Update Tab =============================================
   ===================================================================== */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.about-item {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: var(--card-bg-soft);
    border-radius: 8px;
    border: 1px solid var(--card-border);
    gap: 4px;
}
.about-label {
    font-size: 0.78rem;
    color: var(--card-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.about-item strong {
    font-size: 0.95rem;
    color: var(--card-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.badge-update  { background: #fff3cd; color: #856404; }
.badge-warn    { background: #fdebd0; color: #b9770e; }
.badge-ok      { background: #d4f5e2; color: #00684a; }
.badge-current { background: #d6eaff; color: #0984e3; }

.alert-warn {
    background: #fff3cd;
    color: #856404;
    border-left: 4px solid #f39c12;
    padding: 12px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.update-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.update-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.changelog {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Accordion (using <details>) */
.changelog-accordion .changelog-entry {
    padding: 0;
    overflow: hidden;
}
.changelog-accordion .changelog-entry > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    user-select: none;
    transition: background 0.15s;
}
.changelog-accordion .changelog-entry > summary::-webkit-details-marker { display: none; }
.changelog-accordion .changelog-entry > summary:hover {
    background: rgba(0,0,0,0.03);
}
body.theme-dark .changelog-accordion .changelog-entry > summary:hover {
    background: rgba(255,255,255,0.04);
}
.cl-caret {
    color: var(--card-text-muted);
    transition: transform 0.18s cubic-bezier(0.25, 1.1, 0.4, 1);
    flex-shrink: 0;
}
.changelog-accordion .changelog-entry[open] > summary .cl-caret {
    transform: rotate(90deg);
}
.changelog-accordion .changelog-entry .changelog-list {
    margin: 0;
    padding: 0 14px 14px 38px;
}
.changelog-accordion .changelog-entry[open] {
    background: var(--card-bg-soft);
}

.changelog-entry {
    padding: 14px;
    background: var(--card-bg-soft);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
}
.changelog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.changelog-version {
    font-weight: 700;
    color: var(--accent);
    font-size: 1rem;
}
.changelog-date {
    font-size: 0.82rem;
    color: var(--card-text-muted);
}
.changelog-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: var(--card-text);
    font-size: 0.9rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.changelog-entry.is-current {
    border-left-color: #27ae60;
    background: linear-gradient(135deg, rgba(46,204,113,0.06), transparent);
}
.changelog-summary { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.cl-count {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
}
.cl-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px;
    background: var(--card-bg, #fff);
    border-radius: 6px;
}
.cl-type {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid;
    min-width: 54px;
    text-align: center;
}
.cl-text { flex: 1; min-width: 0; }
body.theme-dark .cl-item { background: rgba(255,255,255,0.04); }

/* ===== System Health card ===== */
.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.health-card {
    padding: 14px 16px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    border-left: 4px solid #95a5a6;
}
.health-ok   { border-left-color: #27ae60; }
.health-warn { border-left-color: #f39c12; }
.health-err  { border-left-color: #e74c3c; }
.health-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--card-text-muted, #636e72);
}
.health-card-head strong { font-size: 0.9rem; color: var(--card-text, #2d3436); }
.health-card-head .fi { color: var(--accent, #0984e3); }
.health-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #95a5a6;
    margin-left: auto;
}
.health-ok   .health-dot { background: #27ae60; box-shadow: 0 0 0 3px rgba(46,204,113,0.18); }
.health-warn .health-dot { background: #f39c12; box-shadow: 0 0 0 3px rgba(243,156,18,0.18); }
.health-err  .health-dot { background: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,0.18); }
.health-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--card-text, #2d3436);
    margin-bottom: 6px;
    font-family: monospace;
}
.health-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 0.75rem;
    color: var(--card-text-muted, #636e72);
}
.health-meta span {
    padding: 2px 6px;
    background: var(--card-bg, #fff);
    border-radius: 4px;
}
.health-note { margin-top: 6px; font-size: 0.74rem; color: var(--card-text-muted, #95a5a6); font-style: italic; }
.health-bar {
    width: 100%; height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}
.health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #27ae60, #f39c12, #e74c3c);
    transition: width 0.3s;
}
body.theme-dark .health-card { background: rgba(255,255,255,0.04); }
body.theme-dark .health-meta span { background: rgba(255,255,255,0.06); }

.ext-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ext-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.74rem;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-family: monospace;
}
.ext-ok  { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.ext-err { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.ext-off { background: #eceff1; color: #607d8b; border-color: #cfd8dc; }
body.theme-dark .ext-ok  { background: rgba(46,204,113,0.18); color: #82e0aa; border-color: rgba(46,204,113,0.4); }
body.theme-dark .ext-err { background: rgba(231,76,60,0.18); color: #f1948a; border-color: rgba(231,76,60,0.4); }
body.theme-dark .ext-off { background: rgba(255,255,255,0.08); color: #bdc3c7; border-color: rgba(255,255,255,0.12); }

/* ===== Update hero + pending migrations ===== */
.update-hero {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 14px;
}
.update-hero-warn {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #e65100;
    border: 1px solid #ffb74d;
}

/* ===== Update-from-URL Modal ===== */
.upd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: upd-fade 0.18s ease-out;
}
@keyframes upd-fade { from { opacity: 0; } to { opacity: 1; } }
.upd-modal {
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: upd-slide 0.22s cubic-bezier(0.25, 1.1, 0.4, 1);
}
@keyframes upd-slide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.upd-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
    border-radius: 14px 14px 0 0;
}
.upd-modal-head h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 8px;
}
.upd-modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.upd-modal-close:hover { background: rgba(255,255,255,0.35); }
.upd-modal-body { padding: 22px; }
.upd-modal-form { display: flex; flex-direction: column; gap: 8px; }
.upd-modal-label {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex; align-items: center; gap: 6px;
    color: var(--card-text, #2d3436);
}
.upd-modal-label .fi { color: var(--accent, #0984e3); }
.upd-modal-row {
    display: flex; gap: 8px;
}
.upd-modal-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
}
.upd-modal-input:focus {
    border-color: var(--accent, #0984e3);
    outline: none;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12);
}
.upd-btn-save, .upd-btn-apply {
    flex-shrink: 0;
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
}
.upd-modal-hint {
    font-size: 0.78rem;
    color: var(--card-text-muted, #95a5a6);
    line-height: 1.5;
}
.upd-modal-sep {
    border: none;
    border-top: 1px dashed var(--card-border, rgba(0,0,0,0.12));
    margin: 18px 0;
}
.upd-modal-protected {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-left: 3px solid #27ae60;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.6;
}
.upd-modal-protected strong { display: block; margin-bottom: 4px; color: #27ae60; }

/* ===== Release Builder UI ===== */
.release-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 14px;
    background: var(--card-bg-soft);
    border-radius: 10px;
    margin: 12px 0;
}
.release-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.release-summary-stat strong {
    font-size: 1.2rem; font-weight: 700;
    color: var(--accent, #0984e3);
}
.release-summary-stat small {
    font-size: 0.72rem; color: var(--card-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.release-form { display: flex; flex-direction: column; gap: 8px; }
.release-form .btn-primary { align-self: flex-start; }

.release-history {
    margin-top: 14px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
}
.release-history > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.release-history > summary::-webkit-details-marker { display: none; }
.release-history[open] > summary { border-bottom: 1px solid var(--card-border); }
.release-history > summary .fi { color: var(--accent); margin-right: 4px; }

.release-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.release-table th, .release-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}
.release-table th {
    background: var(--card-bg-soft);
    font-weight: 600;
    color: var(--card-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.release-table tbody tr:last-child td { border-bottom: none; }
.release-table small { color: var(--card-text-muted); }
.release-zip-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(9,132,227,0.08);
    color: var(--accent, #0984e3);
    text-decoration: none;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    transition: background 0.15s;
}
.release-zip-link:hover { background: rgba(9,132,227,0.16); }
.release-delete-btn {
    background: transparent;
    border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c;
    width: 26px; height: 26px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.release-delete-btn:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }

.release-endpoints {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--card-bg-soft);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.7;
}
.release-endpoints strong { display: block; margin-bottom: 6px; }
.release-endpoints code {
    background: rgba(0,0,0,0.08);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}
body.theme-dark .release-endpoints code { background: rgba(255,255,255,0.08); }

/* Release diff display (delta builds) */
.release-diff-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
    align-items: center;
}
.release-diff-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}
.release-diff-chip-added {
    background: rgba(46,204,113,0.12);
    color: #27ae60;
    border-color: rgba(46,204,113,0.28);
}
.release-diff-chip-changed {
    background: rgba(243,156,18,0.14);
    color: #d68910;
    border-color: rgba(243,156,18,0.30);
}
.release-diff-chip-removed {
    background: rgba(231,76,60,0.12);
    color: #c0392b;
    border-color: rgba(231,76,60,0.28);
}
.release-diff-chip-unchanged {
    background: rgba(127,140,141,0.12);
    color: #7f8c8d;
    border-color: rgba(127,140,141,0.24);
}
body.theme-dark .release-diff-chip-added { color: #58d68d; background: rgba(46,204,113,0.18); }
body.theme-dark .release-diff-chip-changed { color: #f5b041; background: rgba(243,156,18,0.18); }
body.theme-dark .release-diff-chip-removed { color: #ec7063; background: rgba(231,76,60,0.18); }
body.theme-dark .release-diff-chip-unchanged { color: #bdc3c7; background: rgba(189,195,199,0.12); }

.release-mode {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.release-mode-full {
    background: rgba(9,132,227,0.14);
    color: var(--accent, #0984e3);
}
.release-mode-delta {
    background: rgba(155,89,182,0.14);
    color: #8e44ad;
}
body.theme-dark .release-mode-delta { color: #bb8fce; background: rgba(155,89,182,0.22); }

.release-first-hint {
    font-size: 0.82rem;
    color: var(--card-text-muted);
    padding: 8px 12px;
    background: rgba(9,132,227,0.06);
    border-left: 3px solid var(--accent, #0984e3);
    border-radius: 4px;
    margin: 8px 0;
}
.release-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    margin: 4px 0;
}
.release-checkbox input { margin: 0; }

/* ===== Update Now card (after check_update finds newer version) ===== */
.update-now-card {
    margin: 12px 0 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(9,132,227,0.10), rgba(155,89,182,0.08));
    border: 1px solid rgba(9,132,227,0.25);
    position: relative;
    overflow: hidden;
}
.update-now-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent, #0984e3), #8e44ad);
}
body.theme-dark .update-now-card {
    background: linear-gradient(135deg, rgba(9,132,227,0.16), rgba(155,89,182,0.14));
    border-color: rgba(9,132,227,0.40);
}
.update-now-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.update-now-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9,132,227,0.18);
    color: var(--accent, #0984e3);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.update-now-body { flex: 1; min-width: 0; }
.update-now-body strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    line-height: 1.4;
}
.update-now-ver {
    color: var(--accent, #0984e3);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
.update-now-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    color: var(--card-text-muted);
    font-size: 0.85rem;
}
.update-now-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.update-now-meta .fi {
    color: var(--accent, #0984e3);
    font-size: 0.85em;
}
.update-now-migrate {
    background: rgba(243,156,18,0.16);
    color: #b47502;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(243,156,18,0.32);
    font-weight: 600;
}
.update-now-migrate .fi { color: #b47502 !important; }
.update-now-migrate strong {
    font-variant-numeric: tabular-nums;
    color: #8a5a00;
    margin: 0 2px;
}
.update-now-migrate-tag {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(243,156,18,0.28);
    color: #8a5a00;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
body.theme-dark .update-now-migrate {
    background: rgba(243,156,18,0.20);
    color: #f5b041;
    border-color: rgba(243,156,18,0.36);
}
body.theme-dark .update-now-migrate strong { color: #ffd980; }
body.theme-dark .update-now-migrate .fi { color: #f5b041 !important; }
body.theme-dark .update-now-migrate-tag { background: rgba(243,156,18,0.36); color: #ffd980; }
.update-now-notes {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
}
body.theme-dark .update-now-notes { background: rgba(255,255,255,0.04); }
.update-now-notes > summary {
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.update-now-notes > summary::-webkit-details-marker { display: none; }
.update-now-notes > summary .fi { color: var(--accent); margin-right: 4px; }
.update-now-notes pre {
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    white-space: pre-wrap;
    line-height: 1.55;
    max-height: 240px;
    overflow-y: auto;
}
.update-now-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}
.update-now-btn {
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(9,132,227,0.28);
}
.update-now-btn:hover { box-shadow: 0 6px 20px rgba(9,132,227,0.36); }
.update-now-zip-hint {
    width: 100%;
    margin-top: 4px;
    color: var(--card-text-muted);
    font-size: 0.76rem;
    word-break: break-all;
}
.update-now-zip-hint code {
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: 4px;
}
body.theme-dark .update-now-zip-hint code { background: rgba(255,255,255,0.08); }

.upd-modal-protected code {
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin: 0 2px;
}
body.theme-dark .upd-modal-protected { background: rgba(255,255,255,0.04); }
body.theme-dark .upd-modal-protected code { background: rgba(255,255,255,0.1); }
.upd-modal-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem;
    padding: 8px 0;
    cursor: pointer;
}
.upd-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
body.theme-dark .upd-modal {
    background: #1e2731;
    color: #ecf0f1;
}
body.theme-dark .upd-modal-input {
    background: rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.15);
    color: #ecf0f1;
}
body.theme-dark .upd-modal-sep { border-top-color: rgba(255,255,255,0.12); }
.update-hero-ok {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.update-hero-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.6);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.update-hero-body strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.update-hero-meta { display: flex; gap: 6px; flex-wrap: wrap; }
body.theme-dark .update-hero-warn { background: linear-gradient(135deg, rgba(255,152,0,0.22), rgba(255,193,7,0.15)); color: #ffcc80; border-color: rgba(255,152,0,0.4); }
body.theme-dark .update-hero-ok   { background: linear-gradient(135deg, rgba(46,204,113,0.22), rgba(39,174,96,0.15)); color: #a5d6a7; border-color: rgba(46,204,113,0.4); }
body.theme-dark .update-hero-icon { background: rgba(0,0,0,0.18); }

.pending-migs {
    padding: 12px 16px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    margin-bottom: 14px;
}
.pending-migs-head { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; margin-bottom: 8px; color: var(--card-text, #2d3436); }
.pending-migs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pending-migs-list li {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 12px;
    background: var(--card-bg, #fff);
    border-radius: 6px;
    border-left: 3px solid var(--accent, #0984e3);
}
.pending-mig-ver {
    font-family: monospace;
    font-weight: 700;
    color: var(--accent, #0984e3);
    min-width: 38px;
}
.pending-mig-desc { color: var(--card-text, #2d3436); font-size: 0.88rem; }
body.theme-dark .pending-migs { background: rgba(255,255,255,0.04); }
body.theme-dark .pending-migs-list li { background: rgba(255,255,255,0.06); }

.update-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.update-log-table th,
.update-log-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--card-border);
    text-align: left;
}
.update-log-table th {
    background: var(--card-bg-soft);
    color: var(--card-text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
}
.log-action {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--accent-bg);
    color: var(--accent);
}
.log-install      { background: #d6eaff; color: #0984e3; }
.log-upgrade      { background: #fff3cd; color: #856404; }
.log-migrate      { background: #d4f5e2; color: #00684a; }
.log-clear_cache  { background: #fde2e2; color: #c0392b; }

/* dark mode overrides for about tab */
body.theme-dark .badge-update  { background: rgba(255,193,7,0.18); color: #ffc107; }
body.theme-dark .badge-warn    { background: rgba(243,156,18,0.18); color: #f39c12; }
body.theme-dark .badge-ok      { background: rgba(0,184,148,0.18); color: #55efc4; }
body.theme-dark .badge-current { background: rgba(116,185,255,0.18); color: #74b9ff; }
body.theme-dark .alert-warn    { background: rgba(243,156,18,0.18); color: #f39c12; }
body.theme-dark .update-log-table th,
body.theme-dark .update-log-table td { border-bottom-color: var(--card-border); }
body.theme-dark .changelog-entry {
    background: var(--card-bg-soft);
    color: var(--card-text);
}
body.theme-dark .changelog-list { color: var(--card-text); }

/* =====================================================================
   ===== Settings Page — Sidebar Layout =================================
   ===================================================================== */
.settings-page {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 10px 30px var(--card-shadow);
    overflow: hidden;
    color: var(--card-text);
}
.settings-header {
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--card-border);
}
.settings-header h1 {
    font-size: 1.6rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-header .settings-sub {
    color: var(--card-text-muted);
    font-size: 0.92rem;
    margin: 0;
}

.settings-page > .alert {
    margin: 14px 24px 0;
}

.settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 540px;
    gap: 0;
}

/* ----- Sidebar ----- */
.settings-sidebar {
    background: var(--card-bg-soft);
    border-right: 1px solid var(--card-border);
    padding: 18px 12px;
}
.settings-sidebar-mobile-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--card-text);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
}
.settings-nav { display: flex; flex-direction: column; gap: 18px; }
.settings-nav-group { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-label {
    font-size: 0.7rem;
    color: var(--card-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    padding: 4px 12px 6px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--card-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    font-family: inherit;
}
.settings-nav-item .fi {
    width: 20px;
    text-align: center;
    color: var(--card-text-muted);
    transition: color 0.15s;
}
.settings-nav-item:hover {
    background: var(--card-bg);
    color: var(--accent);
}
.settings-nav-item:hover .fi { color: var(--accent); }
.settings-nav-item.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(9,132,227,0.25);
}
.settings-nav-item.active .fi { color: #fff; }

/* ----- Content ----- */
.settings-content {
    padding: 24px 28px;
    overflow: auto;
}
/* ใช้ position: absolute บน legend → กัน HTML legacy native rendering บน fieldset top border
   + padding-top 84px บน fieldset → reserve space สำหรับ legend
   เนื้อหา fieldset flow ปกติด้านล่าง */
.settings-content fieldset {
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
    border-radius: 16px;
    padding: 84px 24px 22px;
    margin-bottom: 16px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
    display: block;
}
.settings-content legend {
    position: absolute;
    top: 22px;
    left: 24px;
    right: 24px;
    width: auto;
    padding: 0;
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--card-text, #2d3436);
    background: transparent;
    border: none;
    box-sizing: border-box;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
/* Subtitle ผ่าน data-sub attribute — แสดงเป็นแถวล่างของ legend (เหมือน audit-card sub) */
.settings-content legend[data-sub]::after {
    content: attr(data-sub);
    width: 100%;
    font-size: 0.82rem;
    color: var(--card-text-muted, #95a5a6);
    font-weight: 500;
    line-height: 1.4;
    padding-left: 58px;       /* align ใต้ title (44px icon + 14px gap) */
    margin-top: -2px;
}
/* fieldset ที่มี subtitle → padding-top มากขึ้นเพื่อเผื่อ space */
.settings-content fieldset:has(> legend[data-sub]) {
    padding-top: 100px;
}
.settings-content legend .fi {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(9,132,227,0.25);
}
/* spacing สำหรับ children ของ fieldset (เพราะใช้ block ไม่ใช่ flex) */
.settings-content fieldset > *:not(legend) + *:not(legend) {
    margin-top: 14px;
}
body.theme-dark .settings-content legend {
    color: #ecf0f1;
}
    background: rgba(116,185,255,0.12);
}
/* All form labels: vertical stack (label above input) */
.settings-content fieldset > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--card-text);
}
.settings-content fieldset > label > span:first-child {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--card-text-muted);
}
.settings-content fieldset > label > small {
    font-size: 0.75rem;
    color: var(--card-text-soft);
}
.settings-content fieldset input,
.settings-content fieldset select,
.settings-content fieldset textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.settings-content fieldset input:focus,
.settings-content fieldset select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.settings-content fieldset input:disabled {
    background: var(--card-bg-soft);
    color: var(--card-text-muted);
    cursor: not-allowed;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .grid-2 { grid-template-columns: 1fr; }
}
.settings-tab-content { display: none; animation: fadeIn 0.2s ease; }
.settings-tab-content.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Auto-save hint — เอาออกแล้ว (เก็บ class เผื่อยังมีอ้างอิงค้าง) ===== */
.autosave-hint { display: none !important; }

/* ===== Password strength meter ===== */
.pwd-strength {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0;
}
.pwd-strength-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--card-bg-soft, #ecf0f1);
    overflow: hidden;
}
body.theme-dark .pwd-strength-bar { background: rgba(255,255,255,0.08); }
.pwd-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.25s ease, background 0.25s ease;
}
.pwd-strength-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
    gap: 10px;
    flex-wrap: wrap;
}
.pwd-strength-label { font-weight: 700; }
.pwd-strength-tips { color: var(--card-text-muted, #95a5a6); flex: 1; text-align: right; }

/* ===== Admin badge in nav label ===== */
.admin-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(135deg,#e74c3c,#c0392b);
    border-radius: 999px;
    vertical-align: middle;
}

/* ===== User management list ===== */
/* ===== Users management toolbar ===== */
.users-fieldset { padding-top: 18px; }
.users-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.users-toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.users-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; white-space: nowrap; }
.users-stats { display: flex; gap: 8px; flex-wrap: wrap; }

/* Registration toggle bar */
.reg-toggle-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.reg-open   { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.reg-closed { background: #fff3e0; border: 1px solid #ffcc80; color: #e65100; }
.reg-toggle-info { display: flex; gap: 12px; align-items: center; }
.reg-toggle-info strong { display: block; font-size: 0.95rem; }
.reg-toggle-info small { display: block; font-size: 0.8rem; opacity: 0.85; margin-top: 2px; }
.reg-toggle-icon { font-size: 1.4rem; }
.reg-toggle-btn {
    background: rgba(255,255,255,0.65);
    border-color: currentColor;
    color: inherit;
    font-weight: 600;
}
.reg-toggle-btn:hover { background: rgba(255,255,255,0.9); }
body.theme-dark .reg-open   { background: rgba(76,175,80,0.18); color: #a5d6a7; border-color: rgba(76,175,80,0.4); }
body.theme-dark .reg-closed { background: rgba(255,152,0,0.18); color: #ffcc80; border-color: rgba(255,152,0,0.4); }
body.theme-dark .reg-toggle-btn { background: rgba(255,255,255,0.1); }
body.theme-dark .reg-toggle-btn:hover { background: rgba(255,255,255,0.18); }
.us-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
    color: var(--card-text, #2d3436);
    font-size: 0.82rem;
}
.us-pill strong { font-weight: 700; }
.us-pill .fi { font-size: 0.85rem; }
.us-pill-total  { color: #1565c0; }
.us-pill-admin  { color: #c62828; background: #ffebee; border-color: #ef9a9a; }
.us-pill-member { color: #2e7d32; background: #e8f5e9; border-color: #a5d6a7; }
.users-search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    border-radius: 10px;
    padding: 0 12px 0 38px;
    min-width: 280px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.users-search:focus-within {
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 3px rgba(9,132,227,0.15);
}
.users-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.95rem;
    pointer-events: none;
}
.users-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 10px 0;
    font-size: 0.92rem;
    color: var(--card-text, #2d3436);
    font-family: inherit;
}
.users-search-clear {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--card-text-muted, #95a5a6);
    padding: 4px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.users-search-clear:hover { background: var(--card-bg-soft, #f1f3f5); color: var(--card-text, #2d3436); }

/* ===== Filter chips ===== */
.users-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.users-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    color: var(--card-text-muted, #636e72);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.users-chip:hover { background: var(--card-bg-soft, #f5f7fa); color: var(--card-text, #2d3436); }
.users-chip.active {
    background: var(--accent, #0984e3);
    color: #fff;
    border-color: var(--accent, #0984e3);
}
.users-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
    height: 18px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    font-size: 0.72rem;
    font-weight: 700;
}
.users-chip.active .users-chip-count { background: rgba(255,255,255,0.25); }

.users-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--card-text-muted, #95a5a6);
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    margin-top: 10px;
}
.users-empty .fi { font-size: 2.2rem; display: block; margin-bottom: 10px; opacity: 0.6; }
.users-empty p { margin: 0; font-size: 0.95rem; }

.user-self-note { color: var(--card-text-muted, #95a5a6); font-size: 0.82rem; font-style: italic; }

.users-help {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--card-text-muted, #636e72);
    line-height: 1.7;
    display: flex; gap: 8px; align-items: flex-start;
}
.users-help > .fi { color: var(--accent, #0984e3); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.users-help .fi { color: var(--card-text-muted, #636e72); }
.users-help strong { color: var(--card-text, #2d3436); }

body.theme-dark .us-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #ecf0f1; }
body.theme-dark .us-pill-admin  { background: rgba(244,67,54,0.18); color: #ef9a9a; border-color: rgba(244,67,54,0.4); }
body.theme-dark .us-pill-member { background: rgba(76,175,80,0.18); color: #a5d6a7; border-color: rgba(76,175,80,0.4); }
body.theme-dark .users-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
body.theme-dark .users-search-input { color: #ecf0f1; }
body.theme-dark .users-chip { border-color: rgba(255,255,255,0.12); color: #bdc3c7; }
body.theme-dark .users-chip:hover { background: rgba(255,255,255,0.06); color: #ecf0f1; }
body.theme-dark .users-chip-count { background: rgba(255,255,255,0.12); }
body.theme-dark .users-empty { background: rgba(255,255,255,0.04); }
body.theme-dark .users-help { background: rgba(255,255,255,0.04); color: #bdc3c7; }
body.theme-dark .users-help strong { color: #ecf0f1; }

@media (max-width: 720px) {
    .users-toolbar { flex-direction: column; align-items: stretch; }
    .users-search { min-width: 0; }
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.user-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--card-bg-soft, #fafbfc);
    border: 1px solid var(--card-border, #e9ecef);
    border-radius: 10px;
    transition: background 0.15s;
}
.user-row:hover { background: var(--card-bg-hover, #f1f3f5); }
.user-row.is-me { border-left: 3px solid #0984e3; }
.user-cell-avatar {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#74b9ff,#0984e3);
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    font-size: 1rem;
}
.user-cell-info { min-width: 0; }
.user-cell-name {
    font-weight: 600;
    color: var(--text, #2d3436);
    display: flex; align-items: center; gap: 8px;
}
.user-cell-email {
    font-size: 0.82rem;
    color: #95a5a6;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-self-tag {
    display: inline-block;
    padding: 1px 7px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: #0984e3;
    border-radius: 999px;
}
.role-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-admin,
.role-super_admin {
    color: #fff;
    background: linear-gradient(135deg,#e74c3c,#c0392b);
}
.role-area_admin {
    color: #fff;
    background: linear-gradient(135deg,#f39c12,#d35400);
}
.role-member {
    color: #636e72;
    background: #e9ecef;
}
.admin-badge.admin-badge-super {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
}
.admin-badge.admin-badge-area {
    background: linear-gradient(135deg, #f39c12, #d35400);
    color: #fff;
}
.user-cell-actions {
    display: flex; gap: 8px; align-items: center;
}
/* ===== AI Chat (Ask AI) widget ===== */
.aic { display: flex; flex-direction: column; gap: 12px; min-height: 360px; }
.aic-sub { display: block; font-size: 0.75rem; color: var(--card-text-muted, #95a5a6); font-weight: 400; margin-top: 2px; }
.aic-messages {
    flex: 1;
    overflow-y: auto;
    max-height: 480px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
}
.aic-welcome {
    text-align: center;
    padding: 30px 16px;
    color: var(--card-text-muted, #95a5a6);
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.aic-welcome .fi { font-size: 1.8rem; color: var(--accent, #0984e3); }
.aic-welcome p { margin: 0; font-size: 0.88rem; line-height: 1.6; max-width: 480px; }
body.theme-dark .aic-welcome { background: rgba(255,255,255,0.04); }

.aic-bubble {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    word-break: break-word;
    align-items: flex-start;
    max-width: 85%;
}
.aic-bubble > .fi {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    margin-top: 1px;
}
.aic-bubble-body { flex: 1; min-width: 0; white-space: pre-wrap; }
/* USER → ขวา (avatar อยู่ขวา) */
.aic-bubble-user {
    background: var(--accent-bg, #e3f2fd);
    color: var(--card-text, #2d3436);
    border-right: 3px solid var(--accent, #0984e3);
    border-radius: 12px 12px 4px 12px;
    align-self: flex-end;
    flex-direction: row-reverse;
}
.aic-bubble-user > .fi {
    background: var(--accent, #0984e3);
    color: #fff;
}
.aic-bubble-user .aic-bubble-body { text-align: left; }
/* AI → ซ้าย (avatar อยู่ซ้าย) */
.aic-bubble-ai {
    background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08));
    color: var(--card-text, #2d3436);
    border-left: 3px solid #667eea;
    border-radius: 12px 12px 12px 4px;
    align-self: flex-start;
}
.aic-bubble-ai > .fi {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}
.aic-bubble-error {
    background: #ffebee;
    color: #c62828;
    border-left: 3px solid #e74c3c;
    align-self: flex-start;
    max-width: 85%;
}
.aic-bubble-error > .fi { background: #e74c3c; color: #fff; }
body.theme-dark .aic-bubble-user { background: rgba(9,132,227,0.18); color: #ecf0f1; }
body.theme-dark .aic-bubble-ai   { background: linear-gradient(135deg, rgba(102,126,234,0.18), rgba(118,75,162,0.18)); color: #ecf0f1; }
body.theme-dark .aic-bubble-error { background: rgba(244,67,54,0.18); color: #ef9a9a; }

.aic-dots {
    display: inline-block;
    color: var(--accent, #0984e3);
    font-weight: bold;
    animation: aic-pulse 1.4s ease-in-out infinite;
}
@keyframes aic-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.aic-suggestions {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.aic-sug {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--card-text, #2d3436);
    transition: all 0.15s;
}
.aic-sug:hover { background: var(--accent-bg, #e3f2fd); border-color: var(--accent, #0984e3); color: var(--accent, #0984e3); }
.aic-sug .fi { font-size: 0.75rem; color: var(--accent, #0984e3); }
body.theme-dark .aic-sug { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #ecf0f1; }

.aic-input-row {
    display: flex; gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.aic-input-row input {
    flex: 1;
    padding: 10px 14px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 999px;
    font-size: 0.92rem;
    color: var(--card-text, #2d3436);
    outline: none;
    transition: border-color 0.15s;
}
.aic-input-row input:focus { border-color: var(--accent, #0984e3); box-shadow: 0 0 0 3px rgba(9,132,227,0.15); }
.aic-input-row button { flex-shrink: 0; padding: 10px 16px; }
body.theme-dark .aic-input-row { border-top-color: rgba(255,255,255,0.08); }
body.theme-dark .aic-input-row input { background: rgba(255,255,255,0.06); color: #ecf0f1; border-color: rgba(255,255,255,0.1); }

/* ===== AI Situation Briefing widget ===== */
.aib { display: flex; flex-direction: column; gap: 14px; }
.aib-content { display: flex; flex-direction: column; gap: 12px; }
.aib-sub { display: block; font-size: 0.75rem; color: var(--card-text-muted, #95a5a6); font-weight: 400; margin-top: 2px; }
.aib-head-actions { display: flex; gap: 8px; align-items: center; }
.aib-provider-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.aib-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--card-text-muted, #95a5a6);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.aib-loading .aib-spin {
    font-size: 2rem;
    color: var(--accent, #0984e3);
    animation: aib-rotate 1s linear infinite;
}
@keyframes aib-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.aib-error {
    padding: 14px 18px;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    border-radius: 10px;
    display: flex; gap: 8px; align-items: center;
}
body.theme-dark .aib-error { background: rgba(244,67,54,0.18); color: #ef9a9a; border-color: rgba(244,67,54,0.4); }

.aib-section {
    padding: 20px 24px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
body.theme-dark .aib-section { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.aib-section h3 {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: var(--card-text, #2d3436);
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.aib-section h3 > .fi { color: var(--accent, #0984e3); font-size: 1.1rem; }
.aib-section p { margin: 0; font-size: 0.95rem; line-height: 1.75; color: var(--card-text, #2d3436); }
body.theme-dark .aib-section h3 { border-bottom-color: rgba(255,255,255,0.08); }
body.theme-dark .aib-section { background: rgba(255,255,255,0.04); }

.aib-summary { border-left: 4px solid var(--accent, #0984e3); }
.aib-outlook { border-left: 4px solid #16a085; }
.aib-risks   { border-left: 4px solid #e67e22; }
.aib-actions { border-left: 4px solid #27ae60; }

.aib-risks-list, .aib-actions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.aib-risk-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
    border-radius: 8px;
    border-left: 3px solid #95a5a6;
}
.aib-risk-high   { border-left-color: #e74c3c; }
.aib-risk-medium { border-left-color: #f39c12; }
.aib-risk-low    { border-left-color: #16a085; }
.aib-risk-level {
    flex-shrink: 0;
    font-size: 0.68rem; font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    height: fit-content;
    background: #eceff1;
    color: #607d8b;
    letter-spacing: 0.5px;
}
.aib-risk-high   .aib-risk-level { background: #ffebee; color: #c62828; }
.aib-risk-medium .aib-risk-level { background: #fff3e0; color: #e65100; }
.aib-risk-low    .aib-risk-level { background: #e8f5e9; color: #2e7d32; }
.aib-risk-body { flex: 1; min-width: 0; }
.aib-risk-body strong { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 4px; }
.aib-risk-reason { font-size: 0.85rem; color: var(--card-text-muted, #636e72); line-height: 1.6; }
body.theme-dark .aib-risk-item { background: rgba(255,255,255,0.06); }

.aib-actions-list li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px;
    background: var(--card-bg, #fff);
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.6;
}
.aib-actions-list .fi { color: #27ae60; flex-shrink: 0; margin-top: 4px; }
body.theme-dark .aib-actions-list li { background: rgba(255,255,255,0.06); }

.aib-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--card-border, rgba(0,0,0,0.08));
    font-size: 0.76rem;
    color: var(--card-text-muted, #95a5a6);
}
body.theme-dark .aib-footer { border-top-color: rgba(255,255,255,0.08); }
.aib-meta { font-family: monospace; }
.aib-disclaimer { font-style: italic; }
.aib-disclaimer .fi { color: var(--accent, #0984e3); margin-right: 3px; }

/* ===== AI Daily Briefing (.aid) ===== */
.aid { display: flex; flex-direction: column; gap: 12px; }
.aid-content { display: flex; flex-direction: column; gap: 14px; }
.aid-headline {
    margin: 4px 0 0;
    font-size: 1.12rem; font-weight: 700; line-height: 1.5;
    color: var(--card-text, #2d3436);
}
.aid-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.aid-stat {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--card-bg-soft, #f8f9fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.aid-stat strong { font-size: 1.4rem; font-weight: 700; }
.aid-stat small  { font-size: 0.72rem; color: var(--card-text-muted, #95a5a6); text-transform: uppercase; letter-spacing: 0.5px; }
.aid-stat-total   strong { color: #0984e3; }
.aid-stat-ok      strong { color: #27ae60; }
.aid-stat-pending strong { color: #e67e22; }
body.theme-dark .aid-stat { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }

.aid-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.aid-list li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 8px;
    font-size: 0.9rem; line-height: 1.55;
}
.aid-list .fi { color: #0984e3; flex-shrink: 0; margin-top: 3px; }
.aid-list-warn li { background: #fff8e1; border-left: 3px solid #f39c12; }
.aid-list-warn .fi { color: #e67e22; }
body.theme-dark .aid-list li { background: rgba(255,255,255,0.04); }
body.theme-dark .aid-list-warn li { background: rgba(243,156,18,0.12); }

.aid-tomorrow p {
    margin: 0;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(9,132,227,0.08), rgba(9,132,227,0.02));
    border-left: 3px solid #0984e3;
    border-radius: 8px;
    font-size: 0.9rem; line-height: 1.6;
}

/* ===== AI News Synthesizer (.ans) ===== */
.ans { display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
.ans-overall {
    margin: 0;
    padding: 10px 12px;
    background: var(--accent-bg, #e3f2fd);
    color: var(--accent, #0984e3);
    border-radius: 8px;
    font-size: 0.88rem; line-height: 1.55;
}
.ans-topics { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ans-topic {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-left: 4px solid #95a5a6;
}
.ans-topic.ans-urg-now  { border-left-color: #e74c3c; background: linear-gradient(135deg, rgba(231,76,60,0.06), transparent); }
.ans-topic.ans-urg-24h  { border-left-color: #f39c12; }
.ans-topic.ans-urg-info { border-left-color: #3498db; }
body.theme-dark .ans-topic { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

.ans-topic-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ans-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: 0.7rem; font-weight: 600;
    border-radius: 999px;
    background: var(--card-bg-soft, #f1f2f6);
}
.ans-pill .fi { font-size: 0.72rem; }
.ans-pill-urg.ans-urg-now  { background: #ffebee; color: #c62828; }
.ans-pill-urg.ans-urg-24h  { background: #fff3e0; color: #e65100; }
.ans-pill-urg.ans-urg-info { background: #e3f2fd; color: #1565c0; }
.ans-pill-cred.ans-cred-high   { background: #e8f5e9; color: #2e7d32; }
.ans-pill-cred.ans-cred-medium { background: #fff3e0; color: #8d6e63; }
.ans-pill-cred.ans-cred-low    { background: #fafafa; color: #757575; }
.ans-pill-cat { background: rgba(155,89,182,0.12); color: #8e44ad; }
.ans-topic-title { font-weight: 700; font-size: 0.95rem; line-height: 1.45; margin-bottom: 4px; }
.ans-topic-sum { font-size: 0.85rem; line-height: 1.55; color: var(--card-text, #2d3436); }
.ans-topic-src { font-size: 0.75rem; color: var(--card-text-muted, #95a5a6); margin-top: 6px; }
.ans-topic-src .fi { margin-right: 3px; }

/* ===== AI Drafter (.adr) ===== */
.adr { display: flex; flex-direction: column; gap: 12px; }
.adr-form { display: flex; flex-direction: column; gap: 10px; }
.adr-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.adr-label > span { font-weight: 600; color: var(--card-text, #2d3436); }
.adr-label textarea, .adr-label select {
    padding: 9px 12px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--card-bg, #fff); color: var(--card-text, #2d3436);
    font-family: inherit;
}
.adr-label textarea { resize: vertical; min-height: 70px; }
.adr-label textarea:focus, .adr-label select:focus { border-color: var(--accent, #0984e3); outline: none; }
.adr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .adr-row { grid-template-columns: 1fr; } }
.adr-label-check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; padding-top: 22px; }
.adr-label-check span { font-weight: 400; }

.adr-channels {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 8px 0;
}
.adr-channels-label { font-size: 0.83rem; font-weight: 600; margin-right: 4px; }
.adr-ch-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.adr-ch-chip:has(input:checked) { background: var(--accent, #0984e3); color: #fff; border-color: var(--accent, #0984e3); }
.adr-ch-chip input { display: none; }

.adr-generate { align-self: flex-start; }

.adr-output { display: flex; flex-direction: column; gap: 10px; }
.adr-core {
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(9,132,227,0.1), rgba(9,132,227,0.02));
    border-left: 3px solid #0984e3;
    border-radius: 8px;
    font-size: 0.88rem; line-height: 1.5;
}
.adr-drafts { display: flex; flex-direction: column; gap: 10px; }
.adr-card {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
}
.adr-card.adr-over { border-color: #e74c3c; }
body.theme-dark .adr-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.adr-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.adr-card-head strong { flex: 1; font-size: 0.95rem; }
.adr-len { font-size: 0.75rem; color: var(--card-text-muted, #95a5a6); font-family: monospace; }
.adr-over .adr-len { color: #e74c3c; font-weight: 700; }
.adr-copy-btn { padding: 4px 10px !important; font-size: 0.75rem !important; }
.adr-card-body {
    margin: 0;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}
body.theme-dark .adr-card-body { background: rgba(0,0,0,0.2); }
.adr-warn {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #e74c3c;
}
.adr-warn .fi { margin-right: 4px; }

/* ===== AI Risk Forecast (.arf) ===== */
.arf { display: flex; flex-direction: column; gap: 12px; }
.arf-content { display: flex; flex-direction: column; gap: 14px; }
.arf-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 600px) { .arf-strip { grid-template-columns: 1fr; } }
.arf-cell {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.arf-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.arf-cell.active { border-color: var(--accent, #0984e3); box-shadow: 0 0 0 3px rgba(9,132,227,0.15); }
.arf-cell-win { font-size: 0.78rem; color: var(--card-text-muted, #95a5a6); font-weight: 600; letter-spacing: 1px; }
.arf-cell-score { font-size: 2rem; font-weight: 800; line-height: 1; }
.arf-cell-subs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.arf-sub {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,0.05);
    color: var(--card-text, #2d3436);
    font-weight: 500;
}
body.theme-dark .arf-sub { background: rgba(255,255,255,0.1); color: #fff; }

.arf-shade-none     { background: #f1f8e9; }
.arf-shade-low      { background: #dcedc8; }
.arf-shade-medium   { background: #fff3e0; }
.arf-shade-high     { background: #ffccbc; }
.arf-shade-critical { background: #ffcdd2; }
.arf-shade-none     .arf-cell-score { color: #558b2f; }
.arf-shade-low      .arf-cell-score { color: #689f38; }
.arf-shade-medium   .arf-cell-score { color: #ef6c00; }
.arf-shade-high     .arf-cell-score { color: #d84315; }
.arf-shade-critical .arf-cell-score { color: #c62828; }
body.theme-dark .arf-shade-none     { background: rgba(85,139,47,0.2); }
body.theme-dark .arf-shade-low      { background: rgba(104,159,56,0.2); }
body.theme-dark .arf-shade-medium   { background: rgba(239,108,0,0.2); }
body.theme-dark .arf-shade-high     { background: rgba(216,67,21,0.25); }
body.theme-dark .arf-shade-critical { background: rgba(198,40,40,0.3); }

.arf-detail {
    padding: 10px 14px;
    background: var(--card-bg-soft, #f8f9fa);
    border-left: 3px solid var(--accent, #0984e3);
    border-radius: 8px;
}
.arf-detail strong { display: block; font-size: 0.92rem; margin-bottom: 4px; }
.arf-detail p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--card-text-muted, #636e72); }
body.theme-dark .arf-detail { background: rgba(255,255,255,0.04); }

.arf-section { display: flex; flex-direction: column; gap: 8px; }
.arf-section h3 {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.88rem; font-weight: 600;
    margin: 0;
    color: var(--card-text, #2d3436);
}
.arf-section h3 .fi { color: var(--accent, #0984e3); }
.arf-section p {
    margin: 0;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 8px;
    font-size: 0.88rem; line-height: 1.6;
}
body.theme-dark .arf-section p { background: rgba(255,255,255,0.04); }
.arf-trigger p {
    background: linear-gradient(135deg, rgba(243,156,18,0.12), rgba(243,156,18,0.02));
    border-left: 3px solid #f39c12;
}
body.theme-dark .arf-trigger p { background: rgba(243,156,18,0.15); }

/* ===== AI Action Recommender (.aar) ===== */
.aar { display: flex; flex-direction: column; gap: 12px; }
.aar-form { display: flex; flex-direction: column; gap: 8px; }
.aar-mode { display: flex; gap: 8px; flex-wrap: wrap; }
.aar-mode-opt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.aar-mode-opt:has(input:checked) { background: var(--accent-bg, #e3f2fd); border-color: var(--accent, #0984e3); color: var(--accent, #0984e3); }
.aar-mode-opt input { display: none; }
.aar-mode-opt .fi { font-size: 0.85rem; }
#aarSituation {
    padding: 9px 12px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
    background: var(--card-bg, #fff); color: var(--card-text, #2d3436);
}
.aar-go { align-self: flex-start; }

.aar-output { display: flex; flex-direction: column; gap: 14px; }
.aar-header-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aar-sev {
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}
.aar-sev-low      { background: #e8f5e9; color: #2e7d32; }
.aar-sev-medium   { background: #fff3e0; color: #ef6c00; }
.aar-sev-high     { background: #ffccbc; color: #d84315; }
.aar-sev-critical { background: #ffcdd2; color: #c62828; }
body.theme-dark .aar-sev-low      { background: rgba(46,125,50,0.25); color: #a5d6a7; }
body.theme-dark .aar-sev-medium   { background: rgba(239,108,0,0.25); color: #ffcc80; }
body.theme-dark .aar-sev-high     { background: rgba(216,67,21,0.3); color: #ffab91; }
body.theme-dark .aar-sev-critical { background: rgba(198,40,40,0.35); color: #ef9a9a; }
.aar-books { display: flex; gap: 5px; flex-wrap: wrap; }
.aar-book {
    font-family: monospace;
    font-size: 0.72rem;
    padding: 2px 8px;
    background: rgba(155,89,182,0.12);
    color: #8e44ad;
    border-radius: 4px;
    font-weight: 600;
}
body.theme-dark .aar-book { background: rgba(155,89,182,0.25); color: #c39bd3; }

.aar-section { display: flex; flex-direction: column; gap: 8px; }
.aar-section h3 {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.88rem; font-weight: 600;
    margin: 0;
}
.aar-section h3 .fi { color: var(--accent, #0984e3); }

.aar-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: aar; }
.aar-step {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 8px;
    border-left: 3px solid var(--accent, #0984e3);
    counter-increment: aar;
    position: relative;
}
.aar-step::before {
    content: counter(aar);
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: var(--accent, #0984e3);
    color: #fff;
    border-radius: 50%;
    font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.aar-step.done { opacity: 0.55; }
.aar-step.done .aar-step-act { text-decoration: line-through; }
.aar-step-cb { margin-top: 4px; flex-shrink: 0; }
.aar-step-body { flex: 1; min-width: 0; }
.aar-step-act { font-size: 0.9rem; line-height: 1.5; font-weight: 500; margin-bottom: 4px; }
.aar-step-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.75rem; color: var(--card-text-muted, #636e72); }
.aar-step-meta .fi { font-size: 0.72rem; margin-right: 2px; }
body.theme-dark .aar-step { background: rgba(255,255,255,0.04); }

.aar-stake { display: flex; gap: 6px; flex-wrap: wrap; }
.aar-stake-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: var(--accent-bg, #e3f2fd);
    color: var(--accent, #0984e3);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}
.aar-stake-chip .fi { font-size: 0.75rem; }

.aar-dont ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.aar-dont li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px;
    background: #ffebee;
    border-left: 3px solid #e74c3c;
    border-radius: 6px;
    font-size: 0.85rem; line-height: 1.5;
}
.aar-dont .fi { color: #e74c3c; flex-shrink: 0; margin-top: 3px; }
body.theme-dark .aar-dont li { background: rgba(231,76,60,0.15); }

.aar-escalate p {
    margin: 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(243,156,18,0.12), rgba(243,156,18,0.02));
    border-left: 3px solid #f39c12;
    border-radius: 8px;
    font-size: 0.88rem; line-height: 1.55;
}
body.theme-dark .aar-escalate p { background: rgba(243,156,18,0.15); }

/* ===== AI Anomaly Detector (.ano) ===== */
.ano { display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.ano-content { display: flex; flex-direction: column; gap: 12px; }
.ano-summary {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 8px;
    font-size: 0.9rem;
}
body.theme-dark .ano-summary { background: rgba(255,255,255,0.04); }
.ano-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ano-dot-off { background: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,0.2); }
.ano-dot-on  { background: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,0.2); animation: ano-pulse 1.8s ease-in-out infinite; }
@keyframes ano-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(231,76,60,0.2); }
    50%      { box-shadow: 0 0 0 8px rgba(231,76,60,0.0); }
}
.ano-summary small { color: var(--card-text-muted, #95a5a6); margin-left: auto; }

.ano-h {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.88rem; font-weight: 600; margin: 0 0 -4px;
    color: var(--card-text, #2d3436);
}
.ano-h .fi { color: var(--accent, #0984e3); }

.ano-events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ano-empty {
    padding: 20px;
    text-align: center;
    color: var(--card-text-muted, #95a5a6);
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 8px;
    font-size: 0.88rem;
}
.ano-ev {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-left: 4px solid #f39c12;
}
.ano-ev.ano-sev-critical { border-left-color: #c62828; background: linear-gradient(135deg, rgba(198,40,40,0.06), transparent); }
.ano-ev.ano-sev-high     { border-left-color: #e67e22; }
.ano-ev.ano-sev-medium   { border-left-color: #f39c12; }
.ano-ev.ack { opacity: 0.6; border-left-color: #95a5a6; background: var(--card-bg-soft, #f8f9fa); }
body.theme-dark .ano-ev { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
body.theme-dark .ano-ev.ack { background: rgba(255,255,255,0.02); }

.ano-ev-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.75rem; }
.ano-ev-sev {
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}
.ano-sev-critical .ano-ev-sev { background: #c62828; }
.ano-sev-high     .ano-ev-sev { background: #e67e22; }
.ano-sev-medium   .ano-ev-sev { background: #f39c12; }
.ack .ano-ev-sev { background: #95a5a6; }
.ano-ev-dir { color: var(--card-text-muted, #636e72); font-weight: 600; }
.ano-ev-time { margin-left: auto; color: var(--card-text-muted, #95a5a6); font-family: monospace; }
.ano-ev-label { font-weight: 600; font-size: 0.95rem; margin: 6px 0 4px; }
.ano-ev-stats {
    display: flex; gap: 10px; flex-wrap: wrap;
    font-size: 0.78rem; color: var(--card-text-muted, #636e72);
    font-family: monospace;
    margin-bottom: 6px;
}
.ano-ev-ai {
    margin-top: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(9,132,227,0.08), rgba(9,132,227,0.02));
    border-radius: 6px;
    font-size: 0.85rem; line-height: 1.55;
}
.ano-ev-ai strong { display: block; margin-bottom: 4px; color: var(--accent, #0984e3); }
.ano-ev-ai ul { margin: 4px 0; padding-left: 18px; }
.ano-ev-ai li { margin: 2px 0; }
.ano-ev-rec {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(241,196,15,0.15);
    border-radius: 5px;
    color: #b58900;
}
.ano-ev-rec .fi { color: #f39c12; margin-right: 3px; }
body.theme-dark .ano-ev-rec { background: rgba(241,196,15,0.2); color: #f7dc6f; }
.ano-ev-explain {
    margin-top: 6px;
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    background: var(--accent-bg, #e3f2fd) !important;
    color: var(--accent, #0984e3) !important;
    border: 1px solid var(--accent, #0984e3) !important;
}
.ano-ev-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.ano-ack-tag {
    font-size: 0.75rem;
    color: var(--card-text-muted, #95a5a6);
    font-style: italic;
}

.ano-snap { margin-top: 4px; }
.ano-snap summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--card-text-muted, #636e72);
    padding: 6px 0;
}
.ano-snap-tbl { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 6px; }
.ano-snap-tbl th, .ano-snap-tbl td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.ano-snap-tbl th { font-weight: 600; color: var(--card-text-muted, #636e72); font-size: 0.75rem; }
.ano-snap-tbl td { font-family: monospace; }
.ano-z-mid  { color: #e67e22; font-weight: 600; }
.ano-z-high { color: #c62828; font-weight: 700; }

/* ===== AI Voice / Translator (.avo) ===== */
.avo { display: flex; flex-direction: column; gap: 12px; }
.avo-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.1));
    padding-bottom: 0;
}
.avo-tab {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    color: var(--card-text-muted, #636e72);
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    transition: all 0.15s;
}
.avo-tab:hover { color: var(--accent, #0984e3); }
.avo-tab.active {
    color: var(--accent, #0984e3);
    border-bottom-color: var(--accent, #0984e3);
    font-weight: 600;
}
.avo-tab .fi { font-size: 0.82rem; }

.avo-panel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }

/* Mic panel */
.avo-mic-stage {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 12px;
}
body.theme-dark .avo-mic-stage { background: rgba(255,255,255,0.04); }
.avo-mic-btn {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(231,76,60,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.avo-mic-btn .fi { display: block; line-height: 1; }
.avo-mic-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(231,76,60,0.4); }
.avo-mic-btn.recording {
    animation: avo-rec-pulse 1.2s ease-in-out infinite;
    background: linear-gradient(135deg, #c62828, #8b0000);
}
@keyframes avo-rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.6); }
    50%      { box-shadow: 0 0 0 14px rgba(231,76,60,0); }
}
.avo-mic-status {
    font-size: 0.88rem;
    color: var(--card-text-muted, #636e72);
    text-align: center;
}
.avo-mic-timer {
    font-family: monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e74c3c;
}
.avo-wave {
    width: 100%; max-width: 320px;
    background: var(--card-bg, #fff);
    border-radius: 6px;
}
body.theme-dark .avo-wave { background: rgba(0,0,0,0.2); }
.avo-playback { width: 100%; }
.avo-process { align-self: center; }

/* Upload panel */
.avo-upload-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    border: 2px dashed var(--card-border, rgba(0,0,0,0.15));
    border-radius: 12px;
    cursor: pointer;
    background: var(--card-bg-soft, #f8f9fa);
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.avo-upload-drop:hover { border-color: var(--accent, #0984e3); background: var(--accent-bg, #e3f2fd); }
.avo-upload-drop .fi { font-size: 2rem; color: var(--accent, #0984e3); }
.avo-upload-drop span { font-size: 0.88rem; color: var(--card-text, #2d3436); font-weight: 500; }
.avo-upload-drop small { font-size: 0.78rem; color: var(--card-text-muted, #95a5a6); }
.avo-upload-file { color: #27ae60 !important; font-weight: 600 !important; }
body.theme-dark .avo-upload-drop { background: rgba(255,255,255,0.03); }

/* Text panel */
#avoTextInput {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    background: var(--card-bg, #fff); color: var(--card-text, #2d3436);
}
#avoTextInput:focus { border-color: var(--accent, #0984e3); outline: none; }

/* Result */
.avo-result { display: flex; flex-direction: column; gap: 12px; }
.avo-lang {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: var(--accent-bg, #e3f2fd);
    border-radius: 6px;
    font-size: 0.88rem;
}
.avo-lang-label { color: var(--card-text-muted, #636e72); }
.avo-lang strong { color: var(--accent, #0984e3); }

.avo-text-block { display: flex; flex-direction: column; gap: 4px; }
.avo-text-block h4 {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.82rem; font-weight: 600;
    margin: 0;
    color: var(--card-text-muted, #636e72);
}
.avo-text-block h4 .fi { font-size: 0.78rem; }
.avo-text-block p {
    margin: 0;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}
body.theme-dark .avo-text-block p { background: rgba(255,255,255,0.04); }
.avo-thai p {
    background: linear-gradient(135deg, rgba(9,132,227,0.08), rgba(9,132,227,0.02));
    border-left: 3px solid #0984e3;
}
body.theme-dark .avo-thai p { background: rgba(9,132,227,0.15); }

.avo-incident {
    padding: 12px 14px;
    background: rgba(155, 89, 182, 0.06);
    border: 1px solid rgba(155, 89, 182, 0.2);
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 10px;
}
.avo-incident h4 {
    display: flex; align-items: center; gap: 5px;
    margin: 0;
    font-size: 0.88rem; font-weight: 600;
    color: #8e44ad;
}
.avo-inc-fields { display: flex; flex-direction: column; gap: 6px; }
.avo-inc-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed rgba(155, 89, 182, 0.15);
}
.avo-inc-row strong {
    color: var(--card-text-muted, #636e72);
    font-weight: 500;
    font-size: 0.8rem;
}
body.theme-dark .avo-incident { background: rgba(155,89,182,0.12); border-color: rgba(155,89,182,0.3); }
.avo-create-inc { align-self: flex-start; }

/* ===== AI / LLM settings tab ===== */
.ai-fieldset { padding-top: 18px; }
.ai-intro {
    background: var(--accent-bg, #e3f2fd);
    color: var(--accent, #0984e3);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    margin: 0 0 18px;
    display: flex; gap: 10px;
    line-height: 1.55;
}
.ai-intro > .fi { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
body.theme-dark .ai-intro { background: rgba(9,132,227,0.15); color: #82b1ff; }

.ai-master-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    margin-bottom: 20px;
}
.ai-master-toggle strong { display: block; font-size: 0.95rem; }
.ai-master-toggle small { display: block; font-size: 0.78rem; color: var(--card-text-muted, #95a5a6); margin-top: 2px; }
.ai-switch { position: relative; display: inline-block; width: 50px; height: 26px; cursor: pointer; flex-shrink: 0; }
.ai-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ai-switch-slider { position: absolute; inset: 0; background: #bdc3c7; border-radius: 999px; transition: background 0.2s; }
.ai-switch-slider::before {
    content: ''; position: absolute;
    width: 20px; height: 20px;
    left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.ai-switch input:checked + .ai-switch-slider { background: var(--accent, #0984e3); }
.ai-switch input:checked + .ai-switch-slider::before { transform: translateX(24px); }

.ai-section-h {
    margin: 24px 0 10px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--card-text, #2d3436);
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.ai-section-h > .fi { color: var(--accent, #0984e3); }
body.theme-dark .ai-section-h { border-bottom-color: rgba(255,255,255,0.08); color: #ecf0f1; }

.ai-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.ai-provider-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
    border: 2px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.ai-provider-card:hover { border-color: var(--accent, #0984e3); }
.ai-provider-card.active {
    border-color: var(--accent, #0984e3);
    background: var(--accent-bg, #e3f2fd);
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12);
}
.ai-provider-card input[type="radio"] { display: none; }
.ai-prov-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.ai-prov-logo { width: 22px; height: 22px; display: block; }
.ai-section-logo { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.ai-prov-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-prov-body strong { font-size: 0.92rem; }
.ai-prov-body small { font-size: 0.74rem; color: var(--card-text-muted, #95a5a6); }
.ai-prov-free {
    margin-top: 4px;
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #d4edda;
    color: #155724;
    border-radius: 999px;
    width: fit-content;
}
.ai-provider-card.has-free { border-color: #c3e6cb; }
.ai-provider-card.has-free.active { border-color: var(--accent, #0984e3); }
body.theme-dark .ai-prov-free { background: rgba(46,204,113,0.18); color: #82e0aa; }
body.theme-dark .ai-provider-card.has-free { border-color: rgba(46,204,113,0.4); }

.ai-free-banner {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    border-radius: 10px;
    margin-bottom: 14px;
    color: #155724;
}
.ai-free-banner > .fi { font-size: 1.8rem; flex-shrink: 0; }
.ai-free-banner strong { display: block; font-size: 0.95rem; }
.ai-free-banner small { display: block; font-size: 0.82rem; margin-top: 2px; opacity: 0.9; }
body.theme-dark .ai-free-banner {
    background: linear-gradient(135deg, rgba(46,204,113,0.2), rgba(39,174,96,0.15));
    color: #82e0aa;
}
body.theme-dark .ai-provider-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.theme-dark .ai-provider-card.active { background: rgba(9,132,227,0.18); }

.ai-provider-config {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
}
body.theme-dark .ai-provider-config { background: rgba(255,255,255,0.04); }

.ai-key-row { display: flex; gap: 6px; align-items: center; }
.ai-key-input { flex: 1; font-family: monospace; }
.ai-key-toggle {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    width: 38px; height: 38px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--card-text-muted, #636e72);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ai-key-toggle:hover { color: var(--accent, #0984e3); border-color: var(--accent, #0984e3); }
.ai-key-link {
    font-size: 0.78rem;
    color: var(--accent, #0984e3);
    text-decoration: none;
}
.ai-key-link:hover { text-decoration: underline; }
.ai-key-link .fi { font-size: 0.7rem; }

.ai-test-row { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ai-test-result { font-size: 0.85rem; }
.ai-test-result.ok  { color: #2e7d32; }
.ai-test-result.err { color: #c62828; }

/* AI demo (try-now) section */
.ai-demo-section {
    margin-top: 24px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08));
    border: 1px solid rgba(102,126,234,0.25);
    border-radius: 12px;
}
.ai-demo-hint { margin: 0 0 14px; color: var(--card-text-muted, #636e72); font-size: 0.88rem; }
.ai-demo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: stretch; }
.ai-demo-actions > .btn-primary,
.ai-demo-actions > .btn-secondary {
    height: 46px;
    padding: 0 22px;
    margin: 0;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
}
.ai-demo-actions > .btn-primary { border-color: transparent; }
.ai-demo-result {
    margin-top: 14px;
    padding: 14px;
    background: var(--card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.ai-demo-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 30px 10px;
    color: var(--card-text-muted, #95a5a6);
}
.ai-demo-loading .aib-spin { font-size: 1.6rem; color: var(--accent, #0984e3); }
.ai-demo-error {
    padding: 12px 16px;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
}
body.theme-dark .ai-demo-error { background: rgba(244,67,54,0.18); color: #ef9a9a; border-color: rgba(244,67,54,0.4); }
.ai-demo-content { display: flex; flex-direction: column; gap: 10px; }
body.theme-dark .ai-demo-result { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }

.nav-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    background: #95a5a6;
}
.nav-dot-on { background: #2ecc71; box-shadow: 0 0 0 2px rgba(46,204,113,0.25); }

/* ===== About sub-tabs ===== */
.about-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 6px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 12px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.about-subtab {
    flex: 1 1 auto;
    min-width: 110px;
    background: transparent;
    border: none;
    color: var(--card-text-muted, #636e72);
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.about-subtab:hover { background: rgba(0,0,0,0.04); color: var(--card-text); }
.about-subtab.active {
    background: var(--card-bg, #fff);
    color: var(--accent, #0984e3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.about-subtab .fi { font-size: 0.85rem; }
body.theme-dark .about-subtabs { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.theme-dark .about-subtab:hover { background: rgba(255,255,255,0.06); }
body.theme-dark .about-subtab.active { background: rgba(255,255,255,0.10); }

/* Default: hide non-active sections */
[data-content="about"] fieldset[data-about-sect] { display: none; }
[data-content="about"][data-about-active="info"]      fieldset[data-about-sect="info"],
[data-content="about"][data-about-active="release"]   fieldset[data-about-sect="release"],
[data-content="about"][data-about-active="health"]    fieldset[data-about-sect="health"],
[data-content="about"][data-about-active="changelog"] fieldset[data-about-sect="changelog"] { display: block; }

@media (max-width: 600px) {
    .about-subtab { flex-basis: calc(50% - 3px); }
    .about-subtab span { font-size: 0.82rem; }
}

/* ===== Audit log — redesigned (card + cleaner toolbar) ===== */
.audit-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex; flex-direction: column;
    gap: 18px;
}
body.theme-dark .audit-card {
    background: var(--card-bg, rgba(255,255,255,0.04));
    border-color: rgba(255,255,255,0.08);
}

/* Header — icon + title + sub */
.audit-header {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 4px;
}
.audit-header-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(9,132,227,0.25);
    flex-shrink: 0;
}
.audit-header-text h2 {
    margin: 0;
    font-size: 1.15rem; font-weight: 700;
    color: var(--card-text);
    line-height: 1.2;
}
.audit-header-text small {
    display: block;
    font-size: 0.82rem;
    color: var(--card-text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

/* Toolbar — clean grid */
.audit-toolbar-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

/* Field — label wrap with icon inside */
.audit-field {
    position: relative;
    display: flex; align-items: center;
    background: var(--card-bg-soft, #f7f9fb);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    overflow: hidden;
}
.audit-field-grow { flex: 1 1 280px; min-width: 220px; }
.audit-field-sm   { flex: 0 1 180px; min-width: 140px; }
.audit-field:focus-within {
    border-color: var(--accent, #0984e3);
    background: var(--card-bg, #fff);
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12);
}
.audit-field-icon {
    padding: 0 12px;
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.95rem;
    pointer-events: none;
    flex-shrink: 0;
}
.audit-field:focus-within .audit-field-icon { color: var(--accent, #0984e3); }
.audit-field input {
    flex: 1;
    width: 100%;
    height: 42px;
    padding: 0 12px 0 0;
    background: transparent !important;
    border: none !important;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--card-text);
    outline: none !important;
    box-shadow: none !important;
    min-width: 0;
}
.audit-field input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    margin-left: 4px;
}
.audit-field input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
body.theme-dark .audit-field {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}
body.theme-dark .audit-field:focus-within {
    background: rgba(255,255,255,0.07);
}

/* Actions group */
.audit-actions {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}
.audit-btn {
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1;
    border: 1.5px solid transparent;
    font-family: inherit;
    transition: transform 0.12s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.audit-btn-primary {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(9,132,227,0.25);
}
.audit-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(9,132,227,0.35); }
.audit-btn-ghost {
    background: transparent;
    color: var(--card-text-muted);
    border-color: var(--card-border, rgba(0,0,0,0.10));
}
.audit-btn-ghost:hover {
    background: var(--card-bg-soft, #f5f7fa);
    color: var(--card-text);
}
body.theme-dark .audit-btn-ghost { border-color: rgba(255,255,255,0.15); }
body.theme-dark .audit-btn-ghost:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 760px) {
    .audit-card { padding: 18px; gap: 14px; }
    .audit-header-icon { width: 38px; height: 38px; font-size: 1rem; }
    .audit-header-text h2 { font-size: 1.05rem; }
    .audit-field-grow, .audit-field-sm { flex-basis: 100%; }
    .audit-actions { width: 100%; }
    .audit-btn { flex: 1; }
}
.audit-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.audit-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
    border-radius: 10px;
}
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.audit-table thead { background: var(--card-bg-soft, #f5f7fa); }
.audit-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--card-text-muted, #636e72);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.06));
    white-space: nowrap;
}
.audit-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.04));
    vertical-align: top;
    color: var(--card-text, #2d3436);
}
.audit-table tbody tr:hover { background: var(--card-bg-soft, #fafbfc); }
.audit-table tbody tr:last-child td { border-bottom: 0; }
.au-c-time, .au-c-ip { white-space: nowrap; font-family: monospace; font-size: 0.8rem; color: var(--card-text-muted, #636e72); }
.au-c-action { white-space: nowrap; }
.au-user-pill {
    display: inline-block;
    padding: 2px 9px;
    background: var(--accent-soft, #e3f2fd);
    color: var(--accent, #0984e3);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
}
.au-user-anon { color: var(--card-text-muted, #95a5a6); font-family: monospace; }
.au-action {
    display: inline-block;
    padding: 3px 8px;
    background: var(--card-bg-soft, #eceff1);
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--card-text, #2d3436);
}
.au-action-incident   { background: #fff3e0; color: #e65100; }
.au-action-user       { background: #e8f5e9; color: #2e7d32; }
.au-action-permission { background: #f3e5f5; color: #6a1b9a; }
.au-action-login      { background: #e3f2fd; color: #1565c0; }
.au-action-ban        { background: #ffebee; color: #c62828; }
.au-action-branding   { background: #fce4ec; color: #ad1457; }
.au-action-system     { background: #e0f7fa; color: #00695c; }
.au-action-announcement { background: #fff9c4; color: #f9a825; }
.au-diff {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.78rem;
    max-height: 260px;
    overflow: auto;
    color: var(--card-text, #2d3436);
}
.au-c-detail details > summary {
    cursor: pointer;
    color: var(--accent, #0984e3);
    font-size: 0.82rem;
    list-style: none;
}
.au-c-detail details > summary::before { content: "▸ "; transition: transform 0.15s; }
.au-c-detail details[open] > summary::before { content: "▾ "; }

body.theme-dark .audit-filter input { background: rgba(255,255,255,0.06); color: #ecf0f1; border-color: rgba(255,255,255,0.1); }
body.theme-dark .audit-table thead { background: rgba(255,255,255,0.05); }
body.theme-dark .audit-table th { color: #bdc3c7; border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .audit-table td { border-bottom-color: rgba(255,255,255,0.06); color: #ecf0f1; }
body.theme-dark .audit-table tbody tr:hover { background: rgba(255,255,255,0.04); }
body.theme-dark .audit-table-wrap { border-color: rgba(255,255,255,0.1); }
body.theme-dark .au-user-pill { background: rgba(9,132,227,0.18); color: #4ea4ff; }
body.theme-dark .au-action { background: rgba(255,255,255,0.08); color: #ecf0f1; }
body.theme-dark .au-diff { background: rgba(255,255,255,0.04); color: #ecf0f1; }

/* ===== User action buttons — grouped + color-coded ===== */
.ua-group {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 8px;
}
.ua-divider {
    width: 1px;
    height: 22px;
    background: var(--card-border, rgba(0,0,0,0.12));
}
.ua-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--card-text, #2d3436);
    background: var(--card-bg, #fff);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ua-btn .fi { font-size: 0.92rem; transition: transform 0.15s ease; }
.ua-btn .ua-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.2s ease, margin 0.2s ease;
}
.ua-btn:hover .ua-label { max-width: 60px; margin-left: 2px; }
.ua-btn:hover .fi { transform: scale(1.1); }

/* Edit — blue */
.ua-btn-edit:hover {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9;
}
body.theme-dark .ua-btn-edit:hover { background: rgba(33,150,243,0.22); color: #82b1ff; border-color: rgba(33,150,243,0.5); }
/* Role toggle — teal/indigo */
.ua-btn-role:hover {
    background: #e0f2f1;
    color: #00695c;
    border-color: #80cbc4;
}
/* Permission — purple */
.ua-btn-perm:hover {
    background: #f3e5f5;
    color: #6a1b9a;
    border-color: #ce93d8;
}
/* Ban — orange */
.ua-btn-ban {
    color: #c0392b;
}
.ua-btn-ban:hover {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffb74d;
}
/* Delete — red, stronger */
.ua-btn-del {
    color: #c0392b;
}
.ua-btn-del:hover {
    background: #ffebee;
    color: #b71c1c;
    border-color: #ef9a9a;
}

body.theme-dark .ua-group { background: rgba(255,255,255,0.05); }
body.theme-dark .ua-divider { background: rgba(255,255,255,0.12); }
body.theme-dark .ua-btn { background: rgba(255,255,255,0.06); color: #ecf0f1; }
body.theme-dark .ua-btn-role:hover { background: rgba(0,150,136,0.25); color: #80cbc4; border-color: rgba(0,150,136,0.5); }
body.theme-dark .ua-btn-perm:hover { background: rgba(156,39,176,0.25); color: #ce93d8; border-color: rgba(156,39,176,0.5); }
body.theme-dark .ua-btn-ban  { color: #ef9a9a; }
body.theme-dark .ua-btn-ban:hover  { background: rgba(255,152,0,0.22); color: #ffb74d; border-color: rgba(255,152,0,0.5); }
body.theme-dark .ua-btn-del  { color: #ef9a9a; }
body.theme-dark .ua-btn-del:hover  { background: rgba(244,67,54,0.25); color: #ef9a9a; border-color: rgba(244,67,54,0.5); }

@media (max-width: 720px) {
    .ua-btn .ua-label { max-width: 60px; margin-left: 2px; }
    .ua-divider { display: none; }
    .user-cell-actions { flex-wrap: wrap; }
}
.btn-mini {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2d3436;
    background: #fff;
    border: 1px solid #dfe6e9;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-mini:hover { background: #f1f3f5; border-color: #b2bec3; }
.btn-mini-danger { color: #c0392b; }
.btn-mini-danger:hover { background: #ffe0e0; border-color: #e74c3c; }
.btn-timer { color: #8e44ad; border-color: #d2b4de; }
.btn-timer:hover { background: #f4ecf7; border-color: #8e44ad; }
.btn-timer.is-on {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(142,68,173,0.35);
}
.btn-timer.is-on:hover { background: linear-gradient(135deg, #7d3c98, #8e44ad); border-color: transparent; }

/* === Live timer display === */
.incident-timer-row { margin: 8px 0 10px; }
.incident-timer-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(142,68,173,0.12), rgba(155,89,182,0.08));
    border: 1px dashed #8e44ad;
    border-radius: 10px;
    color: #6c3483;
    font-variant-numeric: tabular-nums;
}
.incident-timer-live strong { font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; }
.incident-timer-live small { font-size: 0.72rem; opacity: 0.8; }
.incident-timer-live .fi { font-size: 1rem; }
.incident-timer-live.frozen {
    background: linear-gradient(135deg, rgba(127,140,141,0.15), rgba(149,165,166,0.1));
    border-color: #7f8c8d;
    color: #2d3436;
}
.incident-timer-live.frozen .fi { color: #7f8c8d; }
body.theme-dark .incident-timer-live {
    background: linear-gradient(135deg, rgba(155,89,182,0.22), rgba(142,68,173,0.15));
    color: #d7bde2;
}
body.theme-dark .incident-timer-live.frozen { color: #bdc3c7; background: rgba(255,255,255,0.06); }

.inline-form { display: inline; margin: 0; }

body.theme-dark .user-row {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
body.theme-dark .user-row:hover { background: rgba(255,255,255,0.08); }
body.theme-dark .user-cell-name { color: #ecf0f1; }
body.theme-dark .btn-mini {
    background: rgba(255,255,255,0.06);
    color: #ecf0f1;
    border-color: rgba(255,255,255,0.12);
}
body.theme-dark .btn-mini:hover { background: rgba(255,255,255,0.12); }
body.theme-dark .role-member { background: rgba(255,255,255,0.08); color: #b2bec3; }

@media (max-width: 640px) {
    .user-row {
        grid-template-columns: 40px 1fr;
        gap: 10px;
    }
    .user-cell-role, .user-cell-actions {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* ===== Toggle Switch (re-usable) ===== */
.toggle-row,
.settings-form label.toggle-row,
.settings-card fieldset label.toggle-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    background: var(--card-bg-soft);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.toggle-row:hover { border-color: var(--accent); }
.public-vis-form { display: flex; flex-direction: column; gap: 10px; }
.public-vis-form .btn-primary { align-self: flex-start; margin-top: 6px; }
.toggle-row-compact {
    margin-top: 22px;
    align-self: end;
}
.toggle-row-stack {
    align-items: center;
    margin: 8px 0 14px;
}
.toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-text strong {
    color: var(--card-text);
    font-size: 0.92rem;
    font-weight: 600;
}
.toggle-text small {
    color: #636e72;
    font-size: 0.78rem;
    line-height: 1.5;
}
body.theme-dark .toggle-text small { color: #b2bec3; }
.toggle-label { color: var(--card-text); font-size: 0.92rem; font-weight: 500; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.18s;
    cursor: pointer;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px var(--accent-bg);
}
body.theme-dark .toggle-slider { background: #4a627a; }

/* ===== Language picker ===== */
.lang-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.lang-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.lang-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lang-card:hover {
    border-color: var(--accent-soft);
    transform: translateY(-1px);
}
.lang-card.active {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.lang-flag {
    display: inline-flex;
    line-height: 1;
}
.lang-flag-svg {
    width: 36px; height: 24px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    display: block;
}
.lang-name { flex: 1; font-weight: 600; color: var(--card-text); }

/* ===== Mobile responsive (sidebar collapses) ===== */
@media (max-width: 800px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--card-border);
        padding: 12px;
    }
    .settings-sidebar-mobile-toggle { display: flex; }
    .settings-nav { display: none; }
    .settings-sidebar.open .settings-nav { display: flex; margin-top: 8px; }
    .settings-content { padding: 18px; }
    .settings-header { padding: 18px 18px 12px; }
}

/* =====================================================================
   ===== User Mega Menu (dropdown จาก user pill) ========================
   ===================================================================== */
.user-menu {
    position: relative;
    z-index: 9000;
}
.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.user-menu-trigger:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.5);
}
.user-menu.open .user-menu-trigger {
    background: rgba(255,255,255,0.95);
    color: var(--card-text);
    border-color: rgba(255,255,255,0.95);
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}
.user-name { font-weight: 600; font-size: 0.88rem; }
.user-sub { font-size: 0.7rem; opacity: 0.75; }
.user-menu-arrow { font-size: 0.85rem; transition: transform 0.18s; }
.user-menu.open .user-menu-arrow { transform: rotate(180deg); }

/* ----- Mega menu dropdown ----- */
.user-mega-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.35);
    z-index: 9999;
    overflow: hidden;
    color: var(--card-text);
    animation: ummenu-pop 0.18s ease;
}
/* dashboard tabs ต่ำกว่า user menu แต่สูงกว่า leaflet */
.dashboard-tabs { position: relative; z-index: 800; }
@keyframes ummenu-pop {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ummenu-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
    color: #fff;
}
.ummenu-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,0.4);
    flex-shrink: 0;
}
.ummenu-info { min-width: 0; }
.ummenu-name {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ummenu-email {
    font-size: 0.78rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ummenu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 14px;
}
.ummenu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--card-text);
    text-align: center;
    transition: background 0.15s, transform 0.15s;
    font-size: 0.82rem;
    font-weight: 500;
}
.ummenu-item:hover {
    background: var(--card-bg-soft);
    transform: translateY(-2px);
}
.ummenu-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    transition: transform 0.15s, box-shadow 0.15s;
}
.ummenu-item:hover .ummenu-icon { transform: scale(1.08); box-shadow: 0 6px 14px rgba(0,0,0,0.22); }
.ummenu-icon-blue   { background: linear-gradient(135deg, #4facfe 0%, #0984e3 100%); }
.ummenu-icon-red    { background: linear-gradient(135deg, #ff6b6b 0%, #e74c3c 100%); }
.ummenu-icon-green  { background: linear-gradient(135deg, #26de81 0%, #00b894 100%); }
.ummenu-icon-yellow { background: linear-gradient(135deg, #ffd96b 0%, #f39c12 100%); }
.ummenu-icon-purple { background: linear-gradient(135deg, #c39bd3 0%, #8e44ad 100%); }
.ummenu-icon-teal   { background: linear-gradient(135deg, #4ecdc4 0%, #16a085 100%); }
.ummenu-label { line-height: 1.3; }

.ummenu-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 14px 14px;
    padding: 12px;
    background: rgba(231,76,60,0.1);
    color: #e74c3c;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.15s;
}
.ummenu-logout:hover { background: rgba(231,76,60,0.2); }

/* Dark mode adjustments */
body.theme-dark .user-mega-menu {
    background: var(--card-bg);
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
}
body.theme-dark .ummenu-item:hover { background: var(--card-bg-soft); }
/* dark mode keeps the same vibrant gradients — no overrides needed */

/* Mobile */
@media (max-width: 600px) {
    .user-meta { display: none; }
    .user-menu-trigger { padding: 4px 6px; }
    .user-mega-menu {
        position: fixed !important;       /* relative viewport ไม่ใช่ trigger เล็ก ๆ */
        top: 60px !important;
        right: 8px !important;
        left: auto !important;
        width: calc(100vw - 16px) !important;
        max-width: 380px !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto;
    }
    /* compact header — เล็กลง */
    .ummenu-header { padding: 12px 14px; gap: 10px; }
    .ummenu-avatar {
        width: 42px; height: 42px;
        font-size: 1.1rem;
        border-width: 1.5px;
    }
    .ummenu-name { font-size: 0.95rem; }
    .ummenu-email { font-size: 0.72rem; }
    /* compact grid — 3 columns + icon เล็กลง */
    .ummenu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        padding: 8px;
    }
    .ummenu-item {
        padding: 8px 4px;
        gap: 5px;
        font-size: 0.72rem;
    }
    .ummenu-icon {
        width: 36px; height: 36px;
        font-size: 1rem;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .ummenu-label { font-size: 0.7rem; line-height: 1.2; }
    /* logout — compact */
    .ummenu-logout {
        margin: 4px 8px 10px;
        padding: 9px;
        font-size: 0.88rem;
    }
}

/* หน้าจอเล็กมาก ๆ (≤360px) — 2 columns */
@media (max-width: 360px) {
    .ummenu-grid { grid-template-columns: repeat(2, 1fr); }
    .ummenu-item { padding: 10px 6px; }
    .ummenu-icon { width: 38px; height: 38px; }
}

/* =====================================================================
   ===== Water Map Widget ===============================================
   ===================================================================== */
.water-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.water-head h2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    font-size: 1.05rem;
}
.water-head h2 .fi { font-size: 1em; color: var(--accent, #0984e3); }
.water-sub {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: var(--card-text-muted);
    font-weight: 400;
}
.water-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.water-filter-group {
    display: inline-flex;
    background: var(--card-bg-soft);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    border: 1px solid var(--card-border);
}
.wf-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--card-text-muted);
    font-family: inherit;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wf-btn:hover { color: var(--accent); }
.wf-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.wf-refresh,
.wf-locate {
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--card-border);
    background: var(--card-bg-soft);
    color: var(--card-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    gap: 6px;
}
.wf-refresh { width: 36px; padding: 0; }
.wf-locate  { padding: 0 12px; }
.wf-refresh:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: rotate(180deg); }
.wf-locate:hover  { background: var(--accent); color: #fff; border-color: var(--accent); }

/* User pin บน water map + maps อื่นๆ ที่ใช้ shared class */
.water-user-pin-wrap,
.map-user-pin-wrap { background: transparent !important; border: none !important; }
.water-user-pin,
.map-user-pin {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe 0%, #0984e3 100%);
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(9,132,227,0.5), 0 0 0 4px rgba(9,132,227,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    animation: water-user-pulse 2s ease-in-out infinite;
}
@keyframes water-user-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(9,132,227,0.5), 0 0 0 4px rgba(9,132,227,0.2); }
    50%      { box-shadow: 0 4px 14px rgba(9,132,227,0.6), 0 0 0 12px rgba(9,132,227,0); }
}

.water-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.82rem;
    color: var(--card-text-muted);
}
.water-legend .dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.water-legend .dot-low    { background: #27ae60; }
.water-legend .dot-medium { background: #f39c12; }
.water-legend .dot-high   { background: #e67e22; }
.water-legend .dot-severe { background: #e74c3c; }
.water-status {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--card-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.water-status .fi { font-size: 0.85rem; }

.water-map {
    width: 100%;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    z-index: 1;
}

.water-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.ws-item {
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--card-border);
    background: var(--card-bg-soft);
}
.ws-label {
    font-size: 0.75rem;
    color: var(--card-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.ws-value { font-size: 1.4rem; font-weight: 700; color: var(--card-text); }
.ws-low    { border-left: 4px solid #27ae60; }
.ws-medium { border-left: 4px solid #f39c12; }
.ws-high   { border-left: 4px solid #e67e22; }
.ws-severe { border-left: 4px solid #e74c3c; }

.water-note {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--card-text-muted);
    line-height: 1.5;
}
.water-note .fi { color: #f39c12; }

/* Map pin (marker) */
.water-pin-wrap { background: transparent !important; border: none !important; }
.water-pin {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pin-color);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.15s;
}
.water-pin:hover { transform: scale(1.15); }
.water-pin-icon { line-height: 1; }
.water-pin-severe {
    animation: water-pulse 1.5s ease-in-out infinite;
}
@keyframes water-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(231,76,60,0.5), 0 0 0 0 rgba(231,76,60,0.6); }
    50%      { box-shadow: 0 2px 8px rgba(231,76,60,0.5), 0 0 0 12px rgba(231,76,60,0); }
}

/* Popup */
.water-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.water-popup-wrap .leaflet-popup-content { margin: 0; padding: 14px; min-width: 220px; }
.water-popup .wp-head { margin-bottom: 8px; }
.water-popup .wp-head strong { display: block; font-size: 1rem; color: #2d3436; }
.water-popup .wp-head small { color: #636e72; font-size: 0.78rem; }
.water-popup .wp-risk {
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}
.water-popup .wp-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
    color: #2d3436;
    border-bottom: 1px dashed #eee;
}
.water-popup .wp-row:last-child { border-bottom: none; }
.water-popup .wp-row span { color: #636e72; }

/* thaiwater.net section ใน popup */
.water-popup .wp-tw {
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(116,185,255,0.08), rgba(9,132,227,0.05));
    border-radius: 8px;
    border-left: 3px solid #0984e3;
}
.water-popup .wp-tw-head {
    font-size: 0.8rem;
    color: #0984e3;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.water-popup .wp-tw-head .fi { font-size: 0.85rem; }
.water-popup .wp-tw-bar {
    position: relative;
    height: 22px;
    background: #ecf0f1;
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 8px;
}
.water-popup .wp-tw-fill {
    height: 100%;
    border-radius: 11px;
    transition: width 0.4s;
}
.water-popup .wp-tw-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #2d3436;
    font-size: 0.78rem;
    text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

/* Dark theme — popup ใน widget โดน global `widget span/div/strong { color: inherit }`
   specificity (0,2,2) แซง rule ปกติ ต้องตอกสีให้แข็งกว่า */
body.theme-dark .widget .water-popup .wp-head strong { color: #1a1d1f; }
body.theme-dark .widget .water-popup .wp-head small  { color: #636e72; }
body.theme-dark .widget .water-popup .wp-row         { color: #2d3436; }
body.theme-dark .widget .water-popup .wp-row span    { color: #636e72; }
body.theme-dark .widget .water-popup .wp-tw-pct      { color: #1a1d1f; }

/* Mobile */
@media (max-width: 600px) {
    .water-map { height: 380px; }
    .water-summary { grid-template-columns: repeat(2, 1fr); }
    .water-controls { width: 100%; justify-content: flex-end; }
}

/* Fullscreen — ขยายแผนที่ */
.widget:fullscreen .water-map,
.widget:-webkit-full-screen .water-map { height: calc(100vh - 360px); min-height: 400px; }

/* =====================================================================
   ===== FIRMS Fire Hotspots widget =====================================
   ===================================================================== */
.fire-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fire-head h2 { font-size: 1.05rem; margin: 0; }
.fire-sub { display: block; font-size: 0.78rem; color: var(--card-text-muted); font-weight: 500; margin-top: 2px; }
.fire-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fire-sel {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}
/* ถ้า TomSelect wraps แล้ว — ซ่อนกรอบของ <select> เดิม (เหลือเฉพาะกรอบ TomSelect) */
.ts-wrapper + .fire-sel,
.ts-wrapper .fire-sel { display: none !important; }
/* TomSelect wrapper สำหรับ fire/airmap controls — ขนาดเล็กให้ตรงกับ refresh button */
.fire-controls .ts-wrapper,
.airmap-controls .ts-wrapper {
    min-width: 140px;
    font-size: 0.82rem;
}
.fire-controls .ts-wrapper .ts-control,
.airmap-controls .ts-wrapper .ts-control {
    padding: 4px 10px;
    min-height: 32px;
    border-radius: 8px;
}
.fire-legend, .airmap-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: var(--card-text-muted);
    align-items: center;
}
.fire-legend .dot, .airmap-legend .dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; margin-right: 4px; vertical-align: middle;
}
.fire-status, .airmap-status {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--card-text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}
.fire-map, .airmap {
    width: 100%; height: 500px;
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--card-border);
    z-index: 1;
}
.fire-summary, .airmap-summary {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-top: 14px;
}
.ws-info { border-left: 4px solid #0984e3; }

.fire-setup {
    margin-top: 14px;
    padding: 14px 18px;
    background: rgba(243,156,18,0.12);
    border: 1px dashed rgba(243,156,18,0.5);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--card-text);
}
.fire-setup ol { margin: 8px 0 0 18px; padding: 0; }
.fire-setup li { margin: 4px 0; }
.fire-setup code {
    padding: 1px 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.85em;
}
body.theme-dark .fire-setup code { background: rgba(255,255,255,0.1); }
.fire-setup a { color: var(--accent, #0984e3); }

.fire-note, .airmap-note {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--card-text-muted);
    line-height: 1.5;
}
.fire-note .fi, .airmap-note .fi { color: #f39c12; }

/* Fire pin */
.fire-pin-wrap { background: transparent !important; border: none !important; }
.fire-pin {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c, #e67e22);
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(231,76,60,0.5), 0 2px 6px rgba(0,0,0,0.4);
    animation: fire-pulse 2.2s ease-in-out infinite;
    display: flex; align-items: center; justify-content: center;
}
.fire-pin-dot {
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
@keyframes fire-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, #e67e22) 60%, transparent), 0 2px 6px rgba(0,0,0,0.4); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c, #e67e22) 0%, transparent), 0 2px 6px rgba(0,0,0,0.4); }
}

.leaflet-popup-content .fire-popup { min-width: 220px; }
.fire-popup strong { display: block; font-size: 0.95rem; color: #2d3436; margin-bottom: 8px; }
.fire-popup strong .fi { color: #e67e22; margin-right: 4px; }
.fire-popup-grid {
    display: grid; grid-template-columns: auto 1fr;
    gap: 4px 12px; font-size: 0.82rem;
}
.fire-popup-grid span:nth-child(odd) { color: #636e72; }
.fire-popup-grid span:nth-child(even) { color: #2d3436; font-weight: 600; }
/* Dark theme — popup อยู่ใน .widget (เพราะ Leaflet ผูกกับ map ใน widget)
   global rule body.theme-dark .widget span { color: inherit } มี specificity สูงกว่า rule ปกติ
   เลยต้องตอกสีให้สูง specificity ขึ้น */
body.theme-dark .widget .fire-popup strong { color: #1a1d1f; }
body.theme-dark .widget .fire-popup-grid span:nth-child(odd) { color: #636e72; }
body.theme-dark .widget .fire-popup-grid span:nth-child(even) { color: #1a1d1f; }

/* =====================================================================
   ===== Air4Thai stations map widget ==================================
   ===================================================================== */
.airmap-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.airmap-head h2 { font-size: 1.05rem; margin: 0; }

/* ===== Traffic Map widget ===== */
.tm-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tm-head h2 { font-size: 1.05rem; margin: 0; }
.tm-source-sel {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}
/* ซ่อน native select เมื่อ TomSelect wrap แล้ว */
.ts-wrapper .tm-source-sel,
.ts-wrapper + .tm-source-sel { display: none !important; }
.tm-sub { display: block; font-size: 0.75rem; color: var(--card-text-muted, #95a5a6); font-weight: 400; margin-top: 2px; }
.tm-legend {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    font-size: 0.8rem; color: var(--card-text-muted, #636e72);
    padding: 6px 10px; background: var(--card-bg-soft, #f5f7fa); border-radius: 8px; margin-bottom: 8px;
}
.tm-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.tm-note { font-size: 0.78rem; color: var(--card-text-muted, #636e72); margin-top: 8px; }
#trafficMapFrame { background: var(--card-bg-soft, #eef1f3); }

/* ===== Traffic Cameras widget (Windy embed + ลิงก์ CCTV) ===== */
.tc-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tc-head h2 { font-size: 1.05rem; margin: 0; }
.tc-sub { display: block; font-size: 0.75rem; color: var(--card-text-muted, #95a5a6); font-weight: 400; margin-top: 2px; }
.tc-status { font-size: 0.78rem; color: var(--card-text-muted, #95a5a6); margin-right: 6px; font-family: monospace; }
.tc-wrap { display: flex; flex-direction: column; gap: 12px; }
.tc-windy-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg-soft, #eef1f3);
}
.tc-windy-iframe { width: 100%; height: 100%; border: 0; display: block; }
.tc-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.tc-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
    border-radius: 10px;
    color: var(--card-text, #2d3436);
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.tc-link-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: var(--accent, #0984e3);
}
.tc-link-card > .fi:first-child {
    font-size: 1.4rem;
    color: var(--accent, #0984e3);
    flex-shrink: 0;
}
.tc-lc-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-lc-body strong { font-size: 0.92rem; font-weight: 600; }
.tc-lc-body small { font-size: 0.74rem; color: var(--card-text-muted, #636e72); }
.tc-lc-ext { font-size: 0.85rem; color: var(--card-text-muted, #95a5a6); flex-shrink: 0; }
.tc-note { font-size: 0.78rem; color: var(--card-text-muted, #636e72); margin-top: 10px; }
body.theme-dark .tc-link-card { background: var(--card-bg-soft); border-color: rgba(255,255,255,0.08); }
body.theme-dark .tc-link-card:hover { border-color: var(--accent, #4ea4ff); }
.airmap-sub { display: block; font-size: 0.78rem; color: var(--card-text-muted); font-weight: 500; margin-top: 2px; }
.airmap-controls { display: flex; align-items: center; gap: 6px; }

.air-pin-wrap { background: transparent !important; border: none !important; }
.air-pin {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--c, #95a5a6);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: transform 0.15s;
}
.air-pin:hover { transform: scale(1.15); z-index: 1000; }

.leaflet-popup-content .air-popup { min-width: 220px; }
.air-popup strong { display: block; font-size: 0.95rem; color: #2d3436; }
.air-popup small { display: block; color: #636e72; font-size: 0.75rem; margin: 2px 0 8px; }
/* Dark theme override (เหตุผลเดียวกับ fire-popup ด้านบน) */
body.theme-dark .widget .air-popup strong { color: #1a1d1f; }
body.theme-dark .widget .air-popup small { color: #636e72; }
body.theme-dark .widget .air-popup-grid span:nth-child(odd) { color: #636e72; }
body.theme-dark .widget .air-popup-grid span:nth-child(even) { color: #1a1d1f; }
.air-popup-aqi {
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    text-align: center;
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.air-popup-grid {
    display: grid; grid-template-columns: auto 1fr;
    gap: 4px 12px; font-size: 0.82rem;
}
.air-popup-grid span:nth-child(odd) { color: #636e72; }
.air-popup-grid span:nth-child(even) { color: #2d3436; font-weight: 600; }

@media (max-width: 600px) {
    .fire-map, .airmap { height: 380px; }
    .fire-summary, .airmap-summary { grid-template-columns: repeat(2, 1fr); }
}

.widget:fullscreen .fire-map,
.widget:fullscreen .airmap,
.widget:-webkit-full-screen .fire-map,
.widget:-webkit-full-screen .airmap { height: calc(100vh - 360px); min-height: 400px; }

/* =====================================================================
   ===== Branding section ===============================================
   ===================================================================== */
.brand-preview-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.brand-preview {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background: var(--card-bg-soft);
    border: 2px dashed var(--card-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--card-text-muted);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.brand-preview .fi { font-size: 2.4rem; color: var(--accent); }
.brand-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.brand-preview-fallback {
    font-size: 0.7rem;
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
}
.brand-preview-favicon { width: 64px; height: 64px; border-radius: 10px; }
.brand-preview-favicon .fi { font-size: 1.4rem; }

.brand-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 200px;
}
.brand-upload-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.brand-hint {
    color: var(--card-text-muted);
    font-size: 0.78rem;
    flex-basis: 100%;
}
.btn-danger {
    background: rgba(231,76,60,0.12);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,0.3);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.btn-danger:hover {
    background: #e74c3c;
    color: #fff;
}

/* Brand logo in topnav — logo-only mode (no brand text)
   logo ใหญ่กว่า topbar — ล้นออกบน-ล่างด้วย margin ลบ
   เพื่อให้ topbar ความสูงเท่าเดิม แต่ logo เด่นชัดขึ้น */
.brand-logo {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 14px;
    vertical-align: middle;
    display: block;
}
.brand-logo-only {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 0;
    /* margin ลบ บน-ล่าง เพื่อให้ logo ล้นออกจาก topbar ได้ — topbar ยังสูงเท่าเดิม */
    margin: -36px 0;
}
.brand-logo-only .fi {
    font-size: 1.8rem;
    color: #fff;
}
/* ให้ topbar ไม่ตัด logo ที่ล้นออก */
.topnav { overflow: visible; }

/* App version footer (เล็กๆ ที่ topnav หรือ footer) */
.app-version-tag {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    margin-left: 6px;
    font-weight: 400;
}
.app-version-tag:hover { color: rgba(255,255,255,0.9); }

@media (max-width: 600px) {
    .about-grid { grid-template-columns: 1fr; }
    .update-log-table { font-size: 0.75rem; }
    .update-log-table th, .update-log-table td { padding: 6px; }
}

/* =====================================================================
   ===== Incident Reporting (Phase 1) =================================
   ===================================================================== */

/* --- Report submission page --- */
.report-card { max-width: 720px; }
.report-loc-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.report-success-card {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(46,204,113,0.08), rgba(0,184,148,0.05));
    border-radius: 14px;
    border: 1px solid rgba(0,184,148,0.2);
}
.report-success-icon .fi {
    font-size: 3rem;
    color: #00b894;
}
.report-success-card h2 { margin: 10px 0 6px; }
.tracking-code-box {
    background: var(--card-bg, #fff);
    border: 1px dashed var(--accent, #0984e3);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px auto;
    max-width: 320px;
}
.tracking-code-box small { color: var(--card-text-muted, #636e72); display: block; margin-bottom: 6px; }
.tracking-code {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 8px;
    color: var(--accent, #0984e3);
    margin-bottom: 10px;
}
.btn-copy-code { padding: 6px 14px; font-size: 0.82rem; }

/* --- Track page --- */
.track-result {
    margin-top: 18px;
    background: var(--card-bg, #fff);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.track-header {
    padding: 18px 24px;
    color: #fff;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.track-code-row { display: flex; flex-direction: column; gap: 2px; }
.track-code-label { font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.8px; }
.track-code { font-family: 'Courier New', monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: 4px; }
.track-status-badge {
    background: rgba(255,255,255,0.25);
    color: #fff; padding: 6px 14px; border-radius: 20px;
    font-weight: 700; font-size: 0.85rem;
}
.track-body { padding: 20px 24px; }
.track-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.track-sev-badge {
    background: var(--sev, #3498db);
    color: #fff; padding: 4px 12px; border-radius: 14px;
    font-size: 0.78rem; font-weight: 700;
}
.track-type {
    background: var(--card-bg-soft, #f5f7fa);
    color: var(--card-text, #2d3436);
    padding: 4px 12px; border-radius: 14px;
    font-size: 0.78rem; font-weight: 600;
}
.track-title { margin: 8px 0 6px; font-size: 1.2rem; color: var(--card-text, #2d3436); }
.track-desc { color: var(--card-text-muted, #636e72); margin-bottom: 14px; line-height: 1.6; }
.track-info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; margin-bottom: 14px;
}
.track-info-item {
    background: var(--card-bg-soft, #f5f7fa);
    padding: 10px 12px; border-radius: 8px;
}
.track-info-item small { color: var(--card-text-muted, #636e72); font-size: 0.7rem; display: block; }
.track-info-item strong { display: block; color: var(--card-text, #2d3436); margin-top: 2px; }
.track-info-item code { font-size: 0.72rem; color: var(--card-text-muted, #95a5a6); }
.track-yt-link { margin-bottom: 14px; }
.track-section-h {
    margin: 18px 0 10px;
    font-size: 0.95rem;
    color: var(--card-text, #2d3436);
    border-bottom: 1px solid var(--card-border, #e9ecef);
    padding-bottom: 6px;
}
.track-timeline {
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
    padding-left: 22px;
}
.track-timeline::before {
    content: '';
    position: absolute; left: 7px; top: 8px; bottom: 8px;
    width: 2px; background: var(--card-border, #e9ecef);
}
.track-event { position: relative; }
.track-event-dot {
    position: absolute; left: -22px; top: 5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent, #0984e3);
    border: 3px solid var(--card-bg, #fff);
}
.track-event-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.track-event-head strong { color: var(--card-text, #2d3436); }
.track-event-head small { color: var(--card-text-muted, #95a5a6); font-size: 0.78rem; }
.track-event-status { font-size: 0.82rem; color: var(--card-text-muted, #636e72); margin-top: 2px; }
.track-event-note {
    background: var(--card-bg-soft, #f8f9fa);
    color: var(--card-text, #2d3436);
    padding: 6px 10px; border-radius: 6px; margin-top: 4px;
    font-size: 0.85rem;
}

body.theme-dark .track-result { background: var(--card-bg); }
body.theme-dark .track-info-item,
body.theme-dark .track-event-note,
body.theme-dark .track-type {
    background: var(--card-bg-soft);
    color: var(--card-text);
}
body.theme-dark .track-event-status { color: var(--card-text-muted); }

/* --- Admin incidents page --- */
.incidents-page { padding: 20px 0; }
.incidents-header h1 { margin-bottom: 4px; font-size: 1.25rem; }
.incidents-sub { color: var(--card-text-muted, #636e72); margin-bottom: 16px; }
.incidents-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--card-border, #e9ecef);
    padding-bottom: 8px;
}
.incidents-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--card-bg-soft, #fff);
    color: var(--card-text, #2d3436);
    text-decoration: none;
    font-size: 0.88rem; font-weight: 600;
    border: 1px solid var(--card-border, #dfe6e9);
    transition: all 0.15s;
}
.incidents-tab:hover { border-color: var(--tab-color, var(--accent, #0984e3)); }
.incidents-tab.active {
    background: var(--tab-color, var(--accent, #0984e3));
    color: #fff;
    border-color: transparent;
}
.incidents-tab-count {
    background: rgba(255,255,255,0.3);
    padding: 1px 8px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 700;
}
.incidents-tab:not(.active) .incidents-tab-count {
    background: var(--card-bg-softer, #e9ecef);
    color: var(--card-text-muted, #636e72);
}
.incidents-empty {
    text-align: center; padding: 60px 20px;
    color: var(--card-text-muted, #95a5a6);
}
.incidents-empty .fi { font-size: 3rem; display: block; margin-bottom: 10px; }
.incidents-list { display: flex; flex-direction: column; gap: 12px; }

.incident-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e9ecef);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
body.theme-dark .incident-card { background: var(--card-bg); border-color: var(--card-border); }
.incident-card-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.incident-card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.incident-code {
    font-family: 'Courier New', monospace;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent, #0984e3);
}
.incident-sev, .incident-status {
    color: #fff; font-size: 0.72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 12px;
}
.incident-type {
    background: var(--card-bg-soft, #f5f7fa);
    color: var(--card-text-muted, #636e72);
    padding: 3px 10px; border-radius: 12px;
    font-size: 0.78rem;
}
.incident-when { color: var(--card-text-muted, #95a5a6); font-size: 0.82rem; }
.incident-title { margin: 6px 0; color: var(--card-text, #2d3436); font-size: 1.05rem; }
.incident-desc { color: var(--card-text-muted, #636e72); margin-bottom: 10px; line-height: 1.55; font-size: 0.9rem; }
.incident-info-row {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.82rem; color: var(--card-text-muted, #636e72);
    margin-bottom: 10px;
}
.incident-info-row .fi { color: var(--accent, #0984e3); margin-right: 4px; }
.incident-yt { margin: 8px 0; }
.incident-yt a {
    color: #c4302b; text-decoration: none; font-size: 0.85rem;
    word-break: break-all;
}
.incident-yt a .fi { color: #c4302b; margin-right: 4px; }
.incident-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--card-border, #e9ecef);
}
.btn-approve {
    background: linear-gradient(135deg, #00b894, #00cec9) !important;
    color: #fff !important; border: none !important;
}
.btn-approve:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,184,148,0.35); }

/* --- Incident map widget --- */
.incident-widget-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.incident-widget-head h2 { font-size: 1.05rem; margin: 0; }
.incident-widget-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.incident-map-filter {
    display: flex; gap: 6px; align-items: center; margin-bottom: 10px;
    flex-wrap: wrap;
}
.if-btn {
    padding: 5px 14px; border-radius: 16px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, #dfe6e9);
    cursor: pointer;
    font-size: 0.82rem; font-weight: 600;
    color: var(--card-text, #2d3436);
    transition: all 0.15s;
}
.if-btn:hover { border-color: var(--accent, #0984e3); }
.if-btn.active { background: var(--accent, #0984e3); color: #fff; border-color: var(--accent, #0984e3); }
.if-spacer { flex: 1; }
.if-status { color: var(--card-text-muted, #95a5a6); font-size: 0.82rem; }
.incident-map {
    height: 480px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border, #e9ecef);
}
.incident-pin-wrap { background: transparent !important; border: none !important; }
.incident-pin {
    width: 34px; height: 34px;
    background: var(--pin-color, #e74c3c);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    animation: incident-pulse 2s ease-in-out infinite;
}
.incident-pin .fi { font-size: 0.9rem; }
@keyframes incident-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
}
.incident-popup { font-family: inherit; min-width: 200px; color: #2d3436; }
.incident-popup strong { display: block; font-size: 0.95rem; margin-bottom: 4px; color: #1a1d1f; }
.incident-popup-meta { color: #636e72; font-size: 0.8rem; }
.incident-popup-loc { color: #636e72; font-size: 0.78rem; margin-top: 4px; }
.incident-popup-link {
    display: inline-block; margin-top: 8px;
    color: var(--accent, #0984e3); text-decoration: none; font-weight: 600; font-size: 0.85rem;
}
/* Dark theme — popup ใน .widget โดน global rule (specificity 0,2,2) override
   ต้องตอกสีกลับให้เห็นบน popup สีขาว */
body.theme-dark .widget .incident-popup { color: #2d3436; }
body.theme-dark .widget .incident-popup strong { color: #1a1d1f; }
body.theme-dark .widget .incident-popup-meta,
body.theme-dark .widget .incident-popup-loc { color: #636e72; }
body.theme-dark .widget .incident-popup-link { color: var(--accent, #0984e3); }

/* User location popup (shared สำหรับทุก map ที่ใช้ user marker) */
.user-loc-popup { color: #2d3436; }
.user-loc-popup strong { color: #1a1d1f; font-size: 0.92rem; }
body.theme-dark .widget .user-loc-popup { color: #2d3436; }
body.theme-dark .widget .user-loc-popup strong { color: #1a1d1f; }

/* --- Incident recent widget --- */
.incident-recent-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 380px;
    overflow-y: auto;
}
.incident-recent-empty {
    text-align: center; padding: 30px; color: var(--card-text-muted, #95a5a6);
}
.incident-recent-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e9ecef);
    text-decoration: none;
    color: var(--card-text, #2d3436);
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
/* แถบสีซ้าย — severity ตาม --sev-color */
.incident-recent-item::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--sev-color, var(--accent, #0984e3));
    border-radius: 14px 0 0 14px;
}
.incident-recent-item:hover {
    border-color: var(--sev-color, var(--accent, #0984e3));
    box-shadow: 0 6px 18px rgba(0,0,0,0.06), 0 0 0 1px color-mix(in srgb, var(--sev-color, #0984e3) 18%, transparent);
    transform: translateY(-1px);
}
.incident-recent-item:hover .ir-arrow { transform: translateX(3px); color: var(--sev-color, var(--accent)); }
body.theme-dark .incident-recent-item {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}
body.theme-dark .incident-recent-item:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in srgb, var(--sev-color, #74b9ff) 25%, transparent);
}

/* Severity icon circle — แทนที่ dot เล็กเดิม */
.ir-sev-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sev-color, #0984e3) 16%, transparent);
    color: var(--sev-color, #0984e3);
    font-size: 1.05rem;
    margin-top: 2px;
}
body.theme-dark .ir-sev-icon {
    background: color-mix(in srgb, var(--sev-color, #74b9ff) 22%, transparent);
}

.ir-body { flex: 1; min-width: 0; }
.ir-top {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.ir-title {
    font-weight: 700; font-size: 0.95rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
    color: var(--card-text);
    line-height: 1.3;
}

.ir-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.78rem;
    color: var(--card-text-muted, #636e72);
}

/* Severity / Status chips — pill เล็กๆ พื้นโปร่งใสสีตาม --c */
.ir-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--c, #999) 15%, transparent);
    color: var(--c, #999);
    white-space: nowrap;
}
.ir-chip .fi { font-size: 0.7rem; }
body.theme-dark .ir-chip {
    background: color-mix(in srgb, var(--c, #999) 22%, transparent);
    color: color-mix(in srgb, var(--c, #999) 60%, #fff);
}

/* Meta items (location, time) — เบาๆ พร้อม icon */
.ir-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--card-text-muted);
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ir-meta-item .fi {
    font-size: 0.72rem;
    color: var(--card-text-muted);
    opacity: 0.7;
}
.ir-loc { max-width: 60%; }

.ir-arrow {
    color: var(--card-text-muted, #95a5a6);
    flex-shrink: 0;
    align-self: center;
    transition: transform 0.15s, color 0.15s;
}

/* ===== Live SLA clock ===== */
.ir-clock {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    /* ใช้ font ตามผู้ใช้เลือก (inherit) — เดิม monospace ดูแข็งเกิน
       ใช้ tabular-nums เพื่อให้ตัวเลขเรียงตรงไม่กระตุก */
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.05);
    color: var(--card-text-muted);
    flex-shrink: 0;
    transition: background 0.25s, color 0.25s, transform 0.15s;
}
body.theme-dark .ir-clock { background: rgba(255,255,255,0.08); }
.ir-clock .fi { font-size: 0.78rem; color: inherit; }
.ir-clock-time {
    letter-spacing: 0.5px;
    min-width: 7ch;
    text-align: right;
}

.ir-clock-done {
    background: rgba(39,174,96,0.15);
    color: #1e8449;
    padding: 4px 10px;
    border: 1px solid rgba(39,174,96,0.3);
}
.ir-clock-done .fi { font-size: 0.8rem; }
body.theme-dark .ir-clock-done {
    color: #7fd9a5;
    background: rgba(39,174,96,0.18);
    border-color: rgba(94,234,212,0.25);
}

/* SLA state — countdown colors */
.ir-clock-safe {
    background: rgba(39,174,96,0.15);
    color: #1e8449;
}
.ir-clock-half {
    background: rgba(243,156,18,0.18);
    color: #b96104;
}
.ir-clock-warn {
    background: rgba(230,126,34,0.22);
    color: #c0392b;
    animation: ir-clock-throb 1.8s ease-in-out infinite;
}
body.theme-dark .ir-clock-safe { color: #7fd9a5; }
body.theme-dark .ir-clock-half { color: #ffd380; }
body.theme-dark .ir-clock-warn { color: #ffb070; }

@keyframes ir-clock-throb {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* OVERDUE — red + strong pulse + border accent */
.ir-clock-overdue {
    background: #c0392b;
    color: #fff !important;
    box-shadow: 0 0 0 0 rgba(192,57,43,0.6);
    animation: ir-clock-overdue-pulse 1s ease-in-out infinite;
}
.ir-clock-overdue .fi { color: #fff !important; }
@keyframes ir-clock-overdue-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.55), 0 2px 6px rgba(192,57,43,0.4); transform: scale(1); }
    50%      { box-shadow: 0 0 0 8px rgba(192,57,43,0),    0 2px 6px rgba(192,57,43,0.4); transform: scale(1.05); }
}

/* Card-level state — left border + subtle bg tint */
.ir-state-safe    { border-left-color: #27ae60; }
.ir-state-half    { border-left-color: #f39c12; }
.ir-state-warn    { border-left-color: #e67e22; }
.ir-state-overdue {
    border-left-color: #c0392b;
    background: linear-gradient(90deg, rgba(192,57,43,0.12), var(--card-bg-soft, #f8f9fa) 30%);
}
body.theme-dark .ir-state-overdue {
    background: linear-gradient(90deg, rgba(192,57,43,0.22), var(--card-bg-soft) 30%);
}

/* Critical + overdue → กระพริบทั้งแถว (BLINK alert) */
.ir-state-critical-blink {
    animation: ir-row-alert 1.2s ease-in-out infinite;
}
@keyframes ir-row-alert {
    0%, 100% {
        box-shadow: inset 0 0 0 1px rgba(192,57,43,0.25), 0 0 0 0 rgba(192,57,43,0);
    }
    50% {
        box-shadow: inset 0 0 0 1px rgba(192,57,43,0.7), 0 0 24px -4px rgba(192,57,43,0.55);
    }
}
/* ⚠ ก่อนเวลา — แทนที่ไอคอนนาฬิกาเมื่อเคสวิกฤต+เกิน SLA */
.ir-state-critical-blink .ir-clock .fi-rr-clock { display: none; }
.ir-state-critical-blink .ir-clock::before {
    content: '⚠';
    font-size: 0.95em;
    line-height: 1;
    color: inherit;
    margin-right: 2px;
    animation: ir-row-warn-blink 0.7s steps(2) infinite;
}
@keyframes ir-row-warn-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
    .ir-clock-warn,
    .ir-clock-overdue,
    .ir-state-critical-blink,
    .ir-state-critical-blink::before { animation: none !important; }
}

/* ===== Notification bell ===== */
.notif-wrap { position: relative; }
.notif-bell {
    position: relative;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    color: #fff;
    width: 42px; height: 42px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    font-family: inherit;
    /* grid + place-items แม่นกว่า flex สำหรับ icon font (มี baseline offset) */
    display: grid;
    place-items: center;
    line-height: 0;
}
.notif-bell:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.notif-bell .fi {
    font-size: 1.25rem;
    line-height: 1;
    width: 1em;
    height: 1em;
    display: block;
    text-align: center;
    /* Flaticon bell glyph เยื้องซ้ายในตัว font → ดัน margin-left ให้ตรง optical center */
    margin-left: 5px;
}
.notif-bell .fi::before {
    line-height: 1em;
    vertical-align: top;
}
.notif-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: #e74c3c;
    color: #fff;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(231,76,60,0.5);
    border: 2px solid var(--card-bg, #fff);
}
.notif-badge[hidden] { display: none !important; }

.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(380px, calc(100vw - 32px));
    max-height: 480px;
    overflow: hidden;
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.25);
    z-index: 9998;
    display: flex; flex-direction: column;
    animation: notif-pop 0.18s ease;
}
.notif-panel[hidden] { display: none !important; }
@keyframes notif-pop {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-panel-head {
    padding: 14px 16px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.notif-mark-all {
    background: transparent;
    border: none;
    color: var(--accent, #0984e3);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex; gap: 4px; align-items: center;
    text-decoration: none;
}
.notif-mark-all:hover { opacity: 0.7; }
.notif-list { overflow-y: auto; flex: 1; max-height: 410px; }
.notif-empty { padding: 30px 20px; text-align: center; color: var(--card-text-muted, #95a5a6); font-size: 0.9rem; }
.notif-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border-soft, #f1f3f5);
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
}
.notif-item:hover { background: var(--card-bg-soft, #f8f9fa); }
.notif-item.unread { background: var(--accent-bg, rgba(116,185,255,0.08)); }
.notif-item.unread::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent, #0984e3);
    margin-top: 6px;
    flex-shrink: 0;
}
.notif-item:not(.unread)::before {
    content: '';
    width: 8px; flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 0.92rem; }
.notif-text { color: var(--card-text-muted, #636e72); font-size: 0.82rem; margin-top: 2px; line-height: 1.5; }
.notif-time { color: var(--card-text-faint, #b2bec3); font-size: 0.72rem; margin-top: 4px; }

body.theme-dark .notif-panel { background: var(--card-bg); }
body.theme-dark .notif-item.unread { background: rgba(116,185,255,0.06); }

/* Mobile: notif panel เป็น fixed full-width drawer ที่ติดขอบจอจริง */
@media (max-width: 600px) {
    .notif-panel {
        position: fixed !important;
        top: 60px !important;     /* ห่างจาก navbar */
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 80px) !important;
    }
}

/* ===== Permission tags + modal + bans ===== */
.user-perms-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.perm-tag {
    background: var(--accent-bg, rgba(116,185,255,0.15));
    color: var(--accent, #0984e3);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
}

.bans-list { display: flex; flex-direction: column; gap: 8px; }
.ban-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(231,76,60,0.06);
    border: 1px solid rgba(231,76,60,0.2);
    border-radius: 10px;
}
.ban-icon {
    width: 36px; height: 36px;
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ban-info { flex: 1; min-width: 0; }
.ban-info strong { display: block; font-size: 0.92rem; color: var(--card-text, #2d3436); }
.ban-info small { display: block; color: var(--card-text-muted, #636e72); font-size: 0.78rem; margin-top: 2px; }
.ban-info code {
    background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 4px;
    font-family: 'Courier New', monospace; font-size: 0.85rem;
}

body.theme-dark .ban-row {
    background: rgba(231,76,60,0.12);
    border-color: rgba(231,76,60,0.3);
}

.perm-modal {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    animation: perm-fade 0.18s ease;
}
@keyframes perm-fade { from { opacity: 0; } to { opacity: 1; } }
.perm-modal-card {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
.perm-modal-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border, #e9ecef);
    display: flex; justify-content: space-between; align-items: center;
}
.perm-modal-close {
    background: transparent; border: none;
    font-size: 1.5rem; cursor: pointer;
    color: var(--card-text-muted, #636e72);
}
.perm-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}
.perm-row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 8px;
    cursor: pointer;
}
.perm-row:hover { background: var(--card-bg-softer, #eef1f4); }
.perm-checkbox { margin-top: 3px; flex-shrink: 0; }
.perm-label { display: flex; flex-direction: column; gap: 2px; }
.perm-label strong { font-family: 'Courier New', monospace; font-size: 0.88rem; color: var(--accent, #0984e3); }
.perm-label small { color: var(--card-text-muted, #636e72); font-size: 0.82rem; }
.perm-modal-actions {
    padding-top: 12px;
    border-top: 1px solid var(--card-border, #e9ecef);
    margin-top: 4px;
    display: flex; justify-content: flex-end;
}

/* ===== Track page YouTube embed ===== */
.track-yt-embed {
    margin: 14px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    position: relative;
}
.track-yt-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}
.track-yt-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

/* =====================================================================
   ===== Report form (redesigned) =====================================
   ===================================================================== */
body.report-page { padding-top: 88px; }
.report-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 80px;
}

.report-hero {
    display: flex; gap: 16px; align-items: center;
    background: linear-gradient(135deg, rgba(231,76,60,0.06), rgba(243,156,18,0.05));
    border: 1px solid rgba(231,76,60,0.18);
    border-radius: 18px;
    padding: 18px 22px;
    margin-bottom: 20px;
    color: var(--card-text, #2d3436);
}
.report-hero-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg,#e74c3c,#c0392b);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(231,76,60,0.35);
}
.report-hero-icon .fi { font-size: 1.5rem; }
.report-hero-text h1 {
    margin: 0 0 4px;
    font-size: 1.3rem;
    color: var(--card-text, #2d3436);
}
.report-hero-text p {
    margin: 0;
    color: var(--card-text-muted, #636e72);
    font-size: 0.9rem;
}
.report-hero-text a {
    color: var(--accent, #0984e3);
    text-decoration: none;
    font-weight: 600;
}

body.theme-dark .report-hero {
    background: linear-gradient(135deg, rgba(231,76,60,0.14), rgba(243,156,18,0.08));
    border-color: rgba(231,76,60,0.3);
}

.report-alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}
.report-alert-error {
    background: #ffe0e0;
    color: #c0392b;
    border-left: 4px solid #c0392b;
}

/* ===== Step sections ===== */
.report-form { display: flex; flex-direction: column; gap: 16px; }

.rf-step {
    background: var(--card-bg, #fff);
    border-radius: 18px;
    padding: 24px;
    border: 1px solid var(--card-border, #e9ecef);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
body.theme-dark .rf-step {
    background: var(--card-bg);
    border-color: var(--card-border);
}

.rf-step-head {
    display: flex; gap: 14px; align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--card-border, #e9ecef);
}
.rf-step-num {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(9,132,227,0.3);
}
.rf-step-head h2 {
    margin: 0 0 2px;
    font-size: 1.05rem;
    color: var(--card-text, #2d3436);
}
.rf-step-head small {
    color: var(--card-text-muted, #636e72);
    font-size: 0.82rem;
}

.rf-row + .rf-row { margin-top: 14px; }
.rf-field-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--card-text, #2d3436);
    margin-bottom: 6px;
}
.req { color: #e74c3c; }
.rf-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rf-input:focus {
    outline: none;
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 4px var(--accent-bg, rgba(9,132,227,0.12));
}
textarea.rf-input { resize: vertical; min-height: 80px; }
body.theme-dark .rf-input {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.rf-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 12px;
}
.rf-grid-2 + .rf-grid-2 { margin-top: 14px; }

/* ===== Type picker cards ===== */
.type-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.type-card {
    cursor: pointer;
    position: relative;
}
.type-card input[type="radio"] {
    position: absolute; opacity: 0; inset: 0;
}
.type-card-inner {
    border: 2px solid var(--card-border, #dfe6e9);
    border-radius: 12px;
    padding: 14px;
    background: var(--card-bg-soft, #f8f9fa);
    display: flex; flex-direction: column; gap: 6px;
    transition: all 0.15s;
}
.type-card:has(input:checked) .type-card-inner {
    border-color: var(--accent, #0984e3);
    background: var(--accent-bg, rgba(9,132,227,0.08));
    box-shadow: 0 4px 14px rgba(9,132,227,0.2);
}
.type-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.type-card strong {
    color: var(--card-text, #2d3436);
    font-size: 0.95rem;
}
.type-card small {
    color: var(--card-text-muted, #636e72);
    font-size: 0.78rem;
    line-height: 1.4;
}
body.theme-dark .type-card-inner {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}

/* ===== Severity chips ===== */
.sev-picker {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.sev-chip {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 22px;
    border: 1.5px solid var(--card-border, #dfe6e9);
    background: var(--card-bg-soft, #fff);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--card-text, #2d3436);
    transition: all 0.15s;
}
.sev-chip input[type="radio"] {
    position: absolute; opacity: 0; inset: 0;
}
.sev-chip .fi { color: var(--sev-color); font-size: 1rem; }
.sev-chip:hover {
    border-color: var(--sev-color);
}
.sev-chip:has(input:checked) {
    background: var(--sev-color);
    color: #fff;
    border-color: var(--sev-color);
}
.sev-chip:has(input:checked) .fi { color: #fff; }
body.theme-dark .sev-chip {
    background: var(--card-bg-soft);
    color: var(--card-text);
}

/* ===== Location ===== */
.loc-actions {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 10px;
}
.loc-coords {
    color: var(--card-text-muted, #636e72);
    font-size: 0.82rem;
    font-family: 'Courier New', monospace;
}
.report-map {
    height: 320px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--card-border, #e9ecef);
    overflow: hidden;
}

/* ===== Pill buttons ===== */
.btn-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 22px;
    border: 1.5px solid var(--card-border, #dfe6e9);
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-pill:hover { border-color: var(--accent, #0984e3); transform: translateY(-1px); }
.btn-pill-primary {
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(9,132,227,0.3);
}
.btn-pill-primary:hover { color: #fff; }

/* ===== Media dropzone ===== */
.media-dropzone {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 28px 20px;
    border: 2px dashed var(--card-border, #dfe6e9);
    border-radius: 14px;
    background: var(--card-bg-soft, #f8f9fa);
    color: var(--card-text-muted, #636e72);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.media-dropzone:hover, .media-dropzone.is-drag {
    border-color: var(--accent, #0984e3);
    background: var(--accent-bg, rgba(9,132,227,0.06));
    color: var(--accent, #0984e3);
}
.media-dropzone .fi { font-size: 2rem; }
.media-dropzone strong { font-size: 0.95rem; color: var(--card-text, #2d3436); }
.media-dropzone small { font-size: 0.78rem; }

.media-preview {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px;
}
.media-chip {
    display: flex; gap: 8px; align-items: center;
    padding: 6px 12px 6px 6px;
    background: var(--card-bg-soft, #f1f3f5);
    border-radius: 10px;
    max-width: 220px;
}
.media-chip img {
    width: 36px; height: 36px;
    border-radius: 6px;
    object-fit: cover;
}
.media-chip .fi {
    width: 36px; height: 36px;
    background: var(--accent-bg, rgba(9,132,227,0.15));
    border-radius: 6px;
    color: var(--accent, #0984e3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.media-chip-meta {
    display: flex; flex-direction: column; min-width: 0;
}
.media-chip-name {
    font-size: 0.78rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 140px;
}
.media-chip small { font-size: 0.7rem; color: var(--card-text-muted, #95a5a6); }

/* ===== Captcha ===== */
.captcha-row {
    display: flex; gap: 12px; align-items: stretch;
    flex-wrap: wrap;
}
.captcha-q {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 10px 16px;
    background: var(--accent-bg, rgba(9,132,227,0.1));
    border-radius: 10px;
    min-width: 140px;
}
.captcha-label { font-size: 0.72rem; color: var(--card-text-muted, #636e72); }
.captcha-q strong { font-size: 1.4rem; color: var(--accent, #0984e3); font-family: 'Courier New', monospace; }
.captcha-input { flex: 1; min-width: 120px; }

/* ===== Submit bar ===== */
.rf-submit-bar {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 18px;
}
.btn-submit {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border: none;
    border-radius: 28px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(231,76,60,0.35);
    transition: all 0.15s;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(231,76,60,0.45); }
.btn-submit:disabled { opacity: 0.7; cursor: wait; transform: none; }
.btn-submit .fi { font-size: 1.1rem; }
.rf-submit-bar small { color: var(--card-text-muted, #95a5a6); font-size: 0.78rem; }

/* ===== Success card ===== */
.report-success-card {
    background: var(--card-bg, #fff);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,184,148,0.18);
    border: 1px solid rgba(0,184,148,0.2);
}
body.theme-dark .report-success-card { background: var(--card-bg); }
.success-icon {
    width: 80px; height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg,#00b894,#00cec9);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,184,148,0.4);
}
.success-icon .fi { font-size: 2.5rem; }
.report-success-card h2 { margin: 0 0 8px; color: var(--card-text, #2d3436); }
.report-success-card p { margin: 4px 0; color: var(--card-text-muted, #636e72); }
.tracking-code-box {
    margin: 22px auto;
    padding: 18px 20px;
    background: var(--card-bg-soft, #f8f9fa);
    border: 2px dashed var(--accent, #0984e3);
    border-radius: 14px;
    max-width: 380px;
}
.tracking-code-box small { display: block; margin-bottom: 8px; color: var(--card-text-muted, #636e72); }
.tracking-code-row {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    flex-wrap: wrap;
}
.tracking-code {
    font-family: 'Courier New', monospace;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 8px;
    color: var(--accent, #0984e3);
    background: var(--card-bg, #fff);
    padding: 8px 16px;
    border-radius: 10px;
}
.success-hint { font-size: 0.85rem; color: var(--card-text-muted, #95a5a6); }
.success-actions {
    display: flex; gap: 10px; justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* ===== Tracking QR code box ===== */
.tracking-qr-box {
    margin: 18px auto;
    padding: 18px 20px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 14px;
    max-width: 380px;
    text-align: center;
}
.tracking-qr-box small { display: block; margin-bottom: 10px; color: var(--card-text-muted, #636e72); }
.tracking-qr-wrap {
    display: inline-block;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.tracking-qr-wrap canvas { display: block; }
.tracking-qr-actions {
    margin-top: 12px;
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}

/* Print-only QR layout */
.qr-print-area { display: none; }
@media print {
    body.printing-qr > *:not(.qr-print-area) { display: none !important; }
    body.printing-qr .qr-print-area {
        display: block !important;
        padding: 30px 20px;
        text-align: center;
        font-family: sans-serif;
    }
    .qr-print-h { font-size: 1.4rem; margin-bottom: 12px; }
    .qr-print-code {
        font-family: 'Courier New', monospace;
        font-size: 1.5rem; font-weight: 800;
        letter-spacing: 6px;
        margin: 14px 0;
    }
    .qr-print-img { max-width: 280px; height: auto; }
    .qr-print-url { color: #444; font-size: 0.85rem; word-break: break-all; margin-top: 16px; }
}

/* ===== QR Scanner ===== */
.track-actions-row {
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin-top: 8px;
}
/* normalize ปุ่มทั้งสองให้ขนาด/padding/font เท่ากัน — override .btn-primary และ .btn-secondary
   ที่มี padding/font-size/margin ต่างกันใน base style */
.track-actions-row > .btn-primary,
.track-actions-row > .btn-secondary,
.track-actions-row > .btn-scan-qr {
    flex: 1 1 0;
    min-width: 0;
    max-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    box-sizing: border-box;
    border-radius: 10px;
    min-height: 46px;
}
.btn-scan-qr {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
}
@media (max-width: 480px) {
    .track-actions-row > .btn-primary,
    .track-actions-row > .btn-secondary,
    .track-actions-row > .btn-scan-qr { max-width: none; }
}
.qr-scan-modal {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.qr-scan-card {
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border-radius: 16px;
    width: min(420px, 100%);
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.qr-scan-head {
    padding: 14px 18px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.qr-scan-head h3 { margin: 0; font-size: 1.05rem; }
.qr-scan-close {
    border: none; background: transparent;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--card-text-muted);
    font-size: 1.4rem; line-height: 1;
}
.qr-scan-close:hover { background: var(--card-bg-soft); color: var(--card-text); }
.qr-scan-body {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    overflow: hidden;
}
.qr-scan-body video {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.qr-scan-frame {
    position: absolute;
    inset: 14%;
    border: 3px solid #0984e3;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
    pointer-events: none;
}
.qr-scan-frame::before,
.qr-scan-frame::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border: 4px solid #fff;
}
.qr-scan-frame::before {
    top: -6px; left: -6px;
    border-right: none; border-bottom: none;
    border-top-left-radius: 14px;
}
.qr-scan-frame::after {
    bottom: -6px; right: -6px;
    border-left: none; border-top: none;
    border-bottom-right-radius: 14px;
}
.qr-scan-status {
    padding: 12px 18px 4px;
    font-size: 0.9rem;
    text-align: center;
    color: var(--card-text);
}
.qr-scan-status-error { color: #e74c3c; }
.qr-scan-hint {
    padding: 0 18px 16px;
    font-size: 0.78rem;
    text-align: center;
    color: var(--card-text-muted);
}
.qr-scan-hint .fi { color: #0984e3; }

/* Divider "หรือ" + ปุ่ม upload รูป QR */
.qr-scan-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 18px 8px;
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.78rem;
}
.qr-scan-divider::before,
.qr-scan-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--card-border, #e9ecef);
}
.qr-scan-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 18px 16px;
    padding: 10px 16px;
    border: 1.5px dashed var(--accent, #0984e3);
    border-radius: 10px;
    color: var(--accent, #0984e3);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s, border-style 0.15s;
}
.qr-scan-upload-btn:hover {
    background: var(--accent-bg, rgba(9,132,227,0.08));
    border-style: solid;
}
.qr-scan-upload-btn .fi { font-size: 0.95rem; }

body.theme-dark .qr-scan-card { background: var(--card-bg); color: var(--card-text); }

/* ===== Responsive ===== */
@media (max-width: 640px) {
    body.report-page { padding-top: 84px; }
    .report-container { padding: 0 12px 60px; }
    .report-hero { padding: 14px 16px; }
    .report-hero-icon { width: 44px; height: 44px; }
    .report-hero-icon .fi { font-size: 1.2rem; }
    .report-hero-text h1 { font-size: 1.1rem; }
    .rf-step { padding: 18px 16px; border-radius: 14px; }
    .rf-step-head { margin-bottom: 14px; padding-bottom: 12px; }
    .rf-step-num { width: 30px; height: 30px; font-size: 0.85rem; }
    .rf-step-head h2 { font-size: 0.98rem; }
    .type-picker { grid-template-columns: 1fr; }
    .rf-grid-2 { grid-template-columns: 1fr; gap: 12px; }
    .sev-chip { padding: 8px 12px; font-size: 0.82rem; }
    .report-map { height: 260px; }
    .btn-submit { padding: 12px 28px; font-size: 0.95rem; width: 100%; max-width: 320px; }
    .tracking-code { font-size: 1.3rem; letter-spacing: 4px; padding: 6px 12px; }
    .success-actions .btn-pill { width: 100%; justify-content: center; }
}

/* Hide submitter info section for non-logged-in (privacy nudge) — actually keep it but hidden by user choice; for now keep visible always */

/* ===== Incident widget buttons (visible on white card bg) ===== */
.iw-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    background: var(--card-bg-soft, #f1f3f5);
    color: var(--card-text, #2d3436);
    border: 1px solid var(--card-border, #dfe6e9);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.iw-btn:hover { border-color: var(--accent, #0984e3); transform: translateY(-1px); }
.iw-btn-primary {
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(9,132,227,0.3);
}
.iw-btn-primary:hover { color: #fff; }
.iw-btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(231,76,60,0.35);
}
.iw-btn-danger:hover { color: #fff; }

/* Disabled state — เมื่อพื้นที่ไม่มี admin coverage (Phase 3) */
.iw-btn.iw-btn-disabled {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;
    color: rgba(255,255,255,0.85) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    cursor: not-allowed !important;
    opacity: 0.85;
    pointer-events: auto; /* ยังให้ hover/tooltip ทำงาน · click ถูก block ใน JS */
}
.iw-btn.iw-btn-disabled:hover {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.iw-btn.iw-btn-disabled .fi { opacity: 0.9; }

body.theme-dark .iw-btn {
    background: var(--card-bg-soft);
    color: var(--card-text);
    border-color: var(--card-border);
}
body.theme-dark .iw-btn.iw-btn-disabled {
    background: linear-gradient(135deg, #4a5568, #374151) !important;
    color: rgba(255,255,255,0.65) !important;
}

/* ===== Generic app toast (แทน window.alert ที่ขัด UX) ===== */
.app-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border-radius: 30px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.app-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.app-toast .fi { font-size: 1.1rem; }
.app-toast-success { border-left: 4px solid #00b894; }
.app-toast-success .fi { color: #00b894; }
.app-toast-error { border-left: 4px solid #e74c3c; }
.app-toast-error .fi { color: #e74c3c; }
.app-toast-info { border-left: 4px solid var(--accent, #0984e3); }
.app-toast-info .fi { color: var(--accent, #0984e3); }

body.theme-dark .app-toast { background: var(--card-bg); color: var(--card-text); }

/* ===== Reusable app modal (replaces window.prompt/confirm) ===== */
.app-modal-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: appModalFade 0.18s ease;
}
.app-modal-overlay.is-closing { animation: appModalFadeOut 0.18s ease forwards; }
@keyframes appModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes appModalFadeOut { from { opacity: 1; } to { opacity: 0; } }

.app-modal-card {
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border-radius: 16px;
    width: min(480px, 100%);
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    animation: appModalPop 0.22s ease;
}
@keyframes appModalPop {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-modal-head {
    padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.app-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--card-text, #2d3436);
}
.app-modal-close {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--card-text-muted, #636e72);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.app-modal-close:hover { background: var(--card-bg-soft, #f1f3f5); color: var(--card-text, #2d3436); }
.app-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
}
.app-modal-body p {
    margin: 0;
    color: var(--card-text-muted, #636e72);
    line-height: 1.6;
}
.app-modal-field {
    display: flex; flex-direction: column; gap: 6px;
}
.app-modal-field span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--card-text, #2d3436);
}
.app-modal-field input,
.app-modal-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    resize: vertical;
}
.app-modal-field input:focus,
.app-modal-field textarea:focus {
    outline: none;
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(9,132,227,0.12));
}
.app-modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--card-border, #e9ecef);
    display: flex; gap: 8px; justify-content: flex-end;
}
.app-modal-btn {
    padding: 9px 18px;
    border-radius: 22px;
    border: 1px solid var(--card-border, #dfe6e9);
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.15s;
}
.app-modal-btn:hover { transform: translateY(-1px); }
.app-modal-btn-cancel { background: var(--card-bg-soft, #f1f3f5); }
.app-modal-btn-ok {
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(9,132,227,0.3);
}
.app-modal-btn-ok.app-modal-btn-danger,
.app-modal-btn.app-modal-btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(231,76,60,0.35);
}
.ch-edit-modal-card .app-modal-foot {
    justify-content: space-between;
}
.app-modal-btn-ok.app-modal-btn-success {
    background: linear-gradient(135deg, #00b894, #00cec9);
    box-shadow: 0 3px 10px rgba(0,184,148,0.35);
}

/* ===== Floating chat: sound picker modal ===== */
.fchat-sound-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.fchat-sound-row .ts-wrapper,
.fchat-sound-row select { flex: 1; min-width: 0; }
.fchat-sound-play-btn {
    flex-shrink: 0;
    border: 1px solid var(--accent, #0984e3);
    background: var(--accent-bg, rgba(9,132,227,0.08));
    color: var(--accent, #0984e3);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.1s;
}
.fchat-sound-play-btn:hover { background: var(--accent, #0984e3); color: #fff; }
.fchat-sound-play-btn:active { transform: scale(0.96); }
.fchat-sound-hint {
    font-size: 0.82rem;
    color: var(--card-text-muted, #636e72);
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fchat-sound-hint .fi { color: var(--accent, #0984e3); }

body.theme-dark .app-modal-card { background: var(--card-bg); }
body.theme-dark .app-modal-field input,
body.theme-dark .app-modal-field textarea {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}
body.theme-dark .app-modal-btn-cancel { background: var(--card-bg-soft); color: var(--card-text); }

/* ===== Incident admin queue widget ===== */
.iaq-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.iaq-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 18px;
    background: var(--card-bg-soft, #f5f7fa);
    color: var(--card-text, #2d3436);
    border: 1px solid var(--card-border, #dfe6e9);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.iaq-tab:hover { border-color: var(--tab-color, var(--accent, #0984e3)); }
.iaq-tab.active {
    background: var(--tab-color, var(--accent, #0984e3));
    color: #fff;
    border-color: transparent;
}
.iaq-tab-count {
    background: rgba(255,255,255,0.3);
    padding: 1px 7px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
}
.iaq-tab:not(.active) .iaq-tab-count {
    background: var(--card-bg-softer, #e9ecef);
    color: var(--card-text-muted, #636e72);
}

.iaq-list { display: flex; flex-direction: column; gap: 10px; }
.iaq-loading, .iaq-empty {
    text-align: center;
    padding: 30px 14px;
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.9rem;
}
.iaq-empty .fi { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.iaq-empty p { margin: 0; }

.iaq-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e9ecef);
    border-radius: 14px;
    padding: 16px 18px 14px;
    position: relative;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
    overflow: hidden;
}
/* แถบแนวตั้งซ้ายของ card — สีตาม severity (set ผ่าน inline --sev-color) */
.iaq-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--sev-color, var(--card-border, #e9ecef));
    border-radius: 14px 0 0 14px;
}
.iaq-card:hover {
    border-color: var(--sev-color, var(--accent, #0984e3));
    box-shadow: 0 6px 18px rgba(0,0,0,0.06), 0 0 0 1px color-mix(in srgb, var(--sev-color, #0984e3) 20%, transparent);
    transform: translateY(-1px);
}
body.theme-dark .iaq-card {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
}
body.theme-dark .iaq-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in srgb, var(--sev-color, #74b9ff) 30%, transparent);
}

.iaq-card-head {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-bottom: 10px;
    padding-left: 4px;
}
.iaq-code {
    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    color: var(--card-text-muted, #95a5a6);
    background: var(--card-bg-soft, #f5f7fa);
    padding: 3px 8px;
    border-radius: 6px;
    margin-right: auto; /* push other badges to the right */
}
body.theme-dark .iaq-code { background: rgba(255,255,255,0.06); color: var(--card-text-muted); }
.iaq-badge {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px color-mix(in srgb, currentColor 20%, transparent);
}
.iaq-type {
    background: transparent;
    color: var(--card-text-muted, #636e72);
    font-size: 0.78rem;
    padding: 2px 0 2px 8px;
    border-left: 1px solid var(--card-border);
}
body.theme-dark .iaq-type { background: transparent; }

/* AI Auto-Triage badges */
.iaq-ai-cat,
.iaq-ai-prio,
.iaq-ai-review,
.iaq-ai-pending {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.72rem; font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.iaq-ai-cat {
    background: rgba(155, 89, 182, 0.12);
    color: #8e44ad;
    border: 1px solid rgba(155, 89, 182, 0.25);
}
body.theme-dark .iaq-ai-cat { background: rgba(155,89,182,0.2); color: #c39bd3; border-color: rgba(155,89,182,0.35); }
.iaq-ai-prio-5 { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.iaq-ai-prio-4 { background: #fff3e0; color: #ef6c00; border: 1px solid #ffcc80; }
.iaq-ai-prio-3 { background: #fffde7; color: #f9a825; border: 1px solid #fff59d; }
.iaq-ai-prio-2 { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.iaq-ai-prio-1 { background: #eceff1; color: #607d8b; border: 1px solid #b0bec5; }
body.theme-dark .iaq-ai-prio-5 { background: rgba(198,40,40,0.2); color: #ef9a9a; border-color: rgba(198,40,40,0.4); }
body.theme-dark .iaq-ai-prio-4 { background: rgba(239,108,0,0.2); color: #ffcc80; border-color: rgba(239,108,0,0.4); }
body.theme-dark .iaq-ai-prio-3 { background: rgba(249,168,37,0.2); color: #fff59d; border-color: rgba(249,168,37,0.4); }
body.theme-dark .iaq-ai-prio-2 { background: rgba(46,125,50,0.2); color: #a5d6a7; border-color: rgba(46,125,50,0.4); }
body.theme-dark .iaq-ai-prio-1 { background: rgba(96,125,139,0.2); color: #b0bec5; border-color: rgba(96,125,139,0.4); }
.iaq-ai-prio .fi { font-size: 0.72rem; }

.iaq-ai-review {
    background: #fff3e0;
    color: #e65100;
    border: 1px dashed #ff9800;
}
body.theme-dark .iaq-ai-review { background: rgba(230,81,0,0.2); color: #ffcc80; border-color: #ff9800; }

.iaq-ai-pending {
    background: var(--card-bg-soft, #f1f2f6);
    color: var(--card-text-muted, #95a5a6);
    cursor: pointer;
    font-style: italic;
    border: 1px dashed var(--card-border, rgba(0,0,0,0.15));
    transition: opacity 0.15s, background 0.15s;
}
.iaq-ai-pending:hover { background: var(--accent-bg, #e3f2fd); color: var(--accent, #0984e3); }
.iaq-ai-pending .fi {
    animation: iaq-spin 1.6s linear infinite;
}
@keyframes iaq-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.iaq-ai-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin: 4px 0 0;
}
.iaq-ai-tag {
    font-size: 0.7rem;
    color: #0984e3;
    background: rgba(9, 132, 227, 0.08);
    padding: 1px 8px;
    border-radius: 999px;
    line-height: 1.5;
}
body.theme-dark .iaq-ai-tag { background: rgba(9,132,227,0.18); color: #74b9ff; }

.iaq-title {
    margin: 4px 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--card-text, #2d3436);
    line-height: 1.35;
}
.iaq-desc {
    color: var(--card-text-muted, #636e72);
    font-size: 0.86rem;
    line-height: 1.6;
    margin: 0 0 12px;
}
.iaq-info {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--card-text-muted, #636e72);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--card-bg-soft, #f8f9fa);
    border-radius: 8px;
}
body.theme-dark .iaq-info { background: rgba(255,255,255,0.04); }
.iaq-info > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.iaq-info > span > .fi {
    font-size: 0.78rem;
    color: var(--accent, #0984e3);
    opacity: 0.8;
}
body.theme-dark .iaq-info > span > .fi { color: var(--accent-soft, #74b9ff); }

/* Waiting-time chip — แสดงว่าเคสรอนานเท่าไหร่ + เปลี่ยนสีตามความเร่งด่วน */
.iaq-age {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 10px;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.iaq-age .fi { font-size: 0.78rem; }
.iaq-age strong { font-weight: 700; }
.iaq-age-fresh {
    background: rgba(39,174,96,0.12);
    color: #1e8449;
    border-color: rgba(39,174,96,0.25);
}
.iaq-age-aging {
    background: rgba(243,156,18,0.12);
    color: #b96104;
    border-color: rgba(243,156,18,0.25);
}
.iaq-age-warning {
    background: rgba(230,126,34,0.15);
    color: #c0392b;
    border-color: rgba(230,126,34,0.3);
}
.iaq-age-overdue {
    background: rgba(192,57,43,0.15);
    color: #c0392b;
    border-color: rgba(192,57,43,0.35);
    animation: iaq-age-pulse 2s ease-in-out infinite;
}
@keyframes iaq-age-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}
body.theme-dark .iaq-age-fresh    { color: #7fd9a5; background: rgba(39,174,96,0.18); }
body.theme-dark .iaq-age-aging    { color: #ffd380; background: rgba(243,156,18,0.22); }
body.theme-dark .iaq-age-warning  { color: #ffb070; background: rgba(230,126,34,0.22); }
body.theme-dark .iaq-age-overdue  { color: #ff9b91; background: rgba(192,57,43,0.25); }

.iaq-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--card-border, #e9ecef);
    margin-top: 4px;
}
body.theme-dark .iaq-actions { border-top-color: rgba(255,255,255,0.08); }
/* ปุ่ม action ใน card — ปรับให้ดู minimal กว่าเดิม */
.iaq-actions .iw-btn {
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Bump animation — เด้งเลขเมื่อ count เปลี่ยน */
.iaq-stat-bump { animation: iaqStatBump 0.45s cubic-bezier(0.25, 0.9, 0.3, 1.3); }
@keyframes iaqStatBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.iaq-restricted {
    text-align: center;
    padding: 40px 20px;
    color: var(--card-text-muted, #95a5a6);
}
.iaq-restricted .fi { font-size: 2.5rem; display: block; margin-bottom: 10px; opacity: 0.6; }
.iaq-restricted code {
    background: var(--card-bg-soft, #f5f7fa);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.iw-btn-success {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(0,184,148,0.3);
}
.iw-btn-success:hover { color: #fff; }

/* ===== iaq-stat (new redesigned admin queue) ===== */
.iaq-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.iaq-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.iaq-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--stat-color, var(--accent));
    opacity: 0.6;
}
.iaq-stat:hover {
    transform: translateY(-2px);
    border-color: var(--stat-color, var(--accent));
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.iaq-stat.active {
    background: var(--stat-color, var(--accent));
    color: #fff;
    border-color: var(--stat-color, var(--accent));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--stat-color, #0984e3) 35%, transparent);
}
.iaq-stat.active::before { opacity: 1; background: rgba(255,255,255,0.4); }
.iaq-stat-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--stat-color, #0984e3) 15%, transparent);
    color: var(--stat-color, var(--accent));
}
.iaq-stat.active .iaq-stat-icon {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.iaq-stat-icon .fi {
    font-size: 1rem;
    /* Flaticon glyphs เยื้องซ้ายในตัว font → ดันให้ตรง optical center */
    margin-left: 3px;
    line-height: 1;
}

/* =====================================================================
   ===== Incident Alert Toast (admin only) ==============================
   ===================================================================== */
.incident-alert-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 40px);
}
.incident-alert-toast {
    pointer-events: auto;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    color: #2d3436;
    border-radius: 14px;
    border-left: 5px solid var(--alert-color, #e74c3c);
    box-shadow: 0 14px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
    animation: iat-slide-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
    position: relative;
}
.incident-alert-toast.iat-closing { animation: iat-slide-out 0.22s ease forwards; }
@keyframes iat-slide-in {
    from { transform: translateX(110%) scale(0.9); opacity: 0; }
    to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes iat-slide-out {
    to { transform: translateX(110%) scale(0.94); opacity: 0; }
}

.iat-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--alert-color, #e74c3c);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--alert-color, #e74c3c) 40%, transparent);
    animation: iat-icon-pulse 1.4s ease-in-out infinite;
}
@keyframes iat-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.iat-body { flex: 1; min-width: 0; }
.iat-head {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
    margin-bottom: 4px;
}
.iat-sev {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--alert-color, #e74c3c);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.iat-title {
    font-size: 0.95rem;
    line-height: 1.35;
    color: #2d3436;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.iat-meta {
    font-size: 0.78rem;
    color: #636e72;
    margin-bottom: 8px;
    line-height: 1.4;
}
.iat-actions { display: flex; gap: 6px; }
.iat-btn {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    background: #ecf0f1;
    color: #2d3436;
    transition: background 0.15s, transform 0.1s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px;
}
.iat-btn:hover { background: #dfe6e9; transform: translateY(-1px); }
.iat-btn-primary {
    background: var(--alert-color, #e74c3c);
    color: #fff;
}
.iat-btn-primary:hover { background: color-mix(in srgb, var(--alert-color, #e74c3c) 85%, black); }

.iat-close {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    background: transparent;
    border: none;
    color: #95a5a6;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
}
.iat-close:hover { background: rgba(0,0,0,0.06); color: #2d3436; }

/* Dark theme */
body.theme-dark .incident-alert-toast {
    background: var(--card-bg);
    color: var(--card-text);
    box-shadow: 0 16px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
body.theme-dark .iat-title { color: var(--card-text); }
body.theme-dark .iat-meta  { color: var(--card-text-muted); }
body.theme-dark .iat-btn {
    background: var(--card-bg-soft);
    color: var(--card-text);
}
body.theme-dark .iat-btn:hover { background: var(--card-bg-softer, var(--card-bg-soft)); }
body.theme-dark .iat-close { color: var(--card-text-muted); }
body.theme-dark .iat-close:hover { background: rgba(255,255,255,0.08); color: var(--card-text); }

@media (max-width: 600px) {
    .incident-alert-container { top: 70px; right: 10px; max-width: calc(100vw - 20px); }
    .incident-alert-toast { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .incident-alert-toast,
    .iat-icon { animation: none !important; }
}
.iaq-stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--card-text, #2d3436);
}
.iaq-stat.active .iaq-stat-num { color: #fff; }
.iaq-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--card-text-muted, #636e72);
    text-align: center;
}
.iaq-stat.active .iaq-stat-label { color: rgba(255,255,255,0.95); }

body.theme-dark .iaq-stat {
    background: var(--card-bg-soft);
    border-color: var(--card-border);
    color: var(--card-text);
}
body.theme-dark .iaq-stat::before { opacity: 1; height: 4px; }
body.theme-dark .iaq-stat-icon {
    background: color-mix(in srgb, var(--stat-color, #74b9ff) 28%, transparent);
}
body.theme-dark .widget .iaq-stat-num { color: var(--card-text); }
body.theme-dark .widget .iaq-stat-label { color: var(--card-text-muted); }
body.theme-dark .iaq-stat:hover {
    background: var(--card-bg-softer, var(--card-bg-soft));
    border-color: var(--stat-color, var(--accent));
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
body.theme-dark .iaq-stat.active {
    color: #fff;
}
body.theme-dark .widget .iaq-stat.active .iaq-stat-num,
body.theme-dark .widget .iaq-stat.active .iaq-stat-label { color: #fff; }

.iaq-filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--card-border, #e9ecef);
}
.iaq-active-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--card-text, #2d3436);
}
.iaq-active-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.iaq-search {
    flex: 1;
    min-width: 200px;
    padding: 8px 14px;
    border-radius: 18px;
    border: 1px solid var(--card-border, #dfe6e9);
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    font-family: inherit;
    font-size: 0.88rem;
}
.iaq-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(9,132,227,0.12));
}
@media (max-width: 600px) {
    .iaq-stats { grid-template-columns: repeat(3, 1fr); }
    .iaq-stat { padding: 10px 6px; }
    .iaq-stat-num { font-size: 1.2rem; }
    .iaq-stat-label { font-size: 0.7rem; }
}

/* ===== Track page — center layout ===== */
.track-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 60px;
}
.track-card { max-width: 100%; }

/* =====================================================================
   ===== Chat system =====================================
   ===================================================================== */
.chat-page-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto;
    height: calc(100vh - 110px);
    padding: 0 14px;
}

.chat-rooms-pane {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    border: 1px solid var(--card-border, #e9ecef);
    overflow: hidden;
    display: flex; flex-direction: column;
}
body.theme-dark .chat-rooms-pane { background: var(--card-bg); border-color: var(--card-border); }
.chat-rooms-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.chat-rooms-head h2 { margin: 0 0 4px; font-size: 1.05rem; }
.chat-rooms-head small { color: var(--card-text-muted, #95a5a6); font-size: 0.78rem; }
.chat-rooms-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-room-item {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 4px;
    color: var(--card-text, #2d3436);
    text-decoration: none;
    transition: background 0.12s;
    position: relative;
}
.chat-room-item:hover { background: var(--card-bg-soft, #f5f7fa); }
.chat-room-item.active {
    background: var(--accent-bg, rgba(9,132,227,0.12));
    color: var(--accent, #0984e3);
}
.chat-room-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.chat-room-info { flex: 1; min-width: 0; }
.chat-room-name {
    display: block; font-weight: 600; font-size: 0.92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-room-meta { color: var(--card-text-muted, #95a5a6); font-size: 0.75rem; }
.chat-room-unread {
    background: #e74c3c; color: #fff;
    font-size: 0.7rem; font-weight: 800;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
}

.chat-main-pane {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    border: 1px solid var(--card-border, #e9ecef);
    display: flex; flex-direction: column;
    overflow: hidden;
}
body.theme-dark .chat-main-pane { background: var(--card-bg); border-color: var(--card-border); }
.chat-main-head {
    padding: 14px 18px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.chat-main-title strong { display: block; font-size: 1.05rem; color: var(--card-text, #2d3436); }
.chat-main-title small { color: var(--card-text-muted, #636e72); font-size: 0.82rem; }
.chat-main-actions { display: flex; gap: 6px; }
.chat-empty-state, .chat-empty-msgs, .chat-loading {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--card-text-muted, #95a5a6);
    padding: 40px;
    text-align: center;
}
.chat-empty-state .fi { font-size: 3rem; margin-bottom: 10px; opacity: 0.5; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.chat-msg {
    display: flex; gap: 8px; align-items: flex-end;
    max-width: 75%;
}
.chat-msg-mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chat-msg-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: #fff;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.chat-msg-bubble {
    background: var(--card-bg-soft, #f1f3f5);
    color: var(--card-text, #2d3436);
    padding: 8px 12px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    max-width: 100%;
}
.chat-msg-mine .chat-msg-bubble {
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}
.chat-msg-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent, #0984e3);
    margin-bottom: 2px;
}
.chat-msg-body {
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-msg-time {
    font-size: 0.68rem;
    opacity: 0.6;
    margin-top: 3px;
    text-align: right;
}

/* ===== Chat attachments ===== */
.chat-msg-attach { margin-bottom: 4px; max-width: 260px; }
.chat-msg-attach a { display: block; }
.chat-msg-attach img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
    cursor: zoom-in;
    display: block;
    transition: opacity 0.15s;
}
.chat-msg-attach img:hover { opacity: 0.92; }

/* Lightbox สำหรับดูรูปแบบเต็มจอ */
.chat-img-lightbox {
    background: rgba(0,0,0,0.88);
    padding: 24px;
    cursor: zoom-out;
}
.chat-img-lightbox-img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    animation: appModalPop 0.22s ease;
    cursor: default;
}
.chat-img-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.chat-img-lightbox-close:hover {
    background: rgba(255,255,255,0.32);
    transform: scale(1.06);
}
.chat-msg-attach video {
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
    background: #000;
    display: block;
}
.chat-msg-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    max-width: 100%;
}
.chat-msg-mine .chat-msg-file {
    background: rgba(255,255,255,0.22);
    color: #fff;
}
.chat-msg-file .fi { font-size: 1.4rem; flex-shrink: 0; }
.chat-msg-file span { min-width: 0; overflow: hidden; }
.chat-msg-file strong {
    font-size: 0.85rem;
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.chat-msg-file small { font-size: 0.72rem; opacity: 0.75; }

/* Attach preview banner (above input) — full chat page */
.chat-attach-preview {
    padding: 10px 16px 0;
    border-top: 1px solid var(--card-border, #e9ecef);
}
.chat-attach-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--card-bg-soft, #f1f3f5);
    color: var(--card-text-muted, #636e72);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.chat-attach-btn:hover {
    background: var(--accent-bg, rgba(9,132,227,0.12));
    color: var(--accent, #0984e3);
}
.chat-attach-btn .fi { font-size: 1rem; line-height: 1; }
.chat-attach-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    background: var(--accent-bg, rgba(9,132,227,0.08));
    border: 1px dashed var(--accent, #0984e3);
    border-radius: 10px;
}
.chat-attach-card img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.chat-attach-card .fi {
    font-size: 1.8rem;
    color: var(--accent, #0984e3);
    flex-shrink: 0;
    width: 56px; text-align: center;
}
.chat-attach-info { flex: 1; min-width: 0; overflow: hidden; }
.chat-attach-info strong {
    display: block; font-size: 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--card-text, #2d3436);
}
.chat-attach-info small { font-size: 0.75rem; color: var(--card-text-muted, #636e72); }
.chat-attach-remove {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    cursor: pointer;
    font-size: 1.2rem; line-height: 1;
    flex-shrink: 0;
}
.chat-attach-remove:hover { background: #e74c3c; color: #fff; }

.chat-input-form {
    display: flex; gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--card-border, #e9ecef);
    align-items: flex-end;
}
.chat-input {
    flex: 1;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 18px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    resize: none;
    line-height: 1.4;
    max-height: 160px;
}
.chat-input:focus {
    outline: none;
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(9,132,227,0.12));
}
.chat-send-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(9,132,227,0.3);
}
.chat-send-btn:hover { transform: translateY(-1px); }
.chat-send-btn .fi { font-size: 1.1rem; }

@media (max-width: 700px) {
    .chat-page-wrap { grid-template-columns: 1fr; height: calc(100vh - 100px); }
    .chat-rooms-pane { max-height: 200px; }
}

/* ===== Chat widget (dashboard) ===== */
.chat-widget-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 360px;
    overflow-y: auto;
}
.chat-widget-empty {
    text-align: center;
    padding: 30px 14px;
    color: var(--card-text-muted, #95a5a6);
}
.chat-widget-empty .fi { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.5; }
.chat-widget-room {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--card-bg-soft, #f5f7fa);
    color: var(--card-text, #2d3436);
    text-decoration: none;
    transition: background 0.12s;
}
.chat-widget-room:hover { background: var(--card-bg-softer, #eef1f4); }
.chat-widget-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.chat-widget-info { flex: 1; min-width: 0; }
.chat-widget-info strong {
    display: block; font-size: 0.9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-widget-info small { color: var(--card-text-muted, #95a5a6); font-size: 0.75rem; }
.chat-widget-unread {
    background: #e74c3c; color: #fff;
    font-size: 0.7rem; font-weight: 800;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ===== Widget picker mini-skeleton previews ===== */
.ws-preview {
    width: 100%; height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--card-bg-soft, #eef1f4);
    border: 1px solid var(--card-border, #dfe6e9);
    padding: 6px;
    display: flex; flex-direction: column;
    gap: 4px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.ws-item.on .ws-preview {
    background: linear-gradient(135deg, var(--accent-bg, rgba(116,185,255,0.15)), var(--card-bg-soft, #eef1f4));
    border-color: var(--accent, #0984e3);
}
body.theme-dark .ws-preview { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }

/* Mobile/Touch: แสดง preview เหมือน desktop — 2 columns + card-style
   user ขอเห็น skeleton preview สวยๆ ของแต่ละ widget บนมือถือด้วย */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .ws-cat-group {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .ws-item {
        flex-direction: column !important;
        padding: 28px 10px 10px !important;
        gap: 8px !important;
    }
    .ws-preview {
        display: flex !important;   /* show preview กลับมา */
        height: 50px !important;
    }
    .ws-info { min-width: 0; text-align: center; }
    .ws-title {
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        -webkit-line-clamp: 2 !important;
    }
    .ws-desc { display: none !important; }     /* ซ่อน desc เพื่อ compact */
    .ws-status {
        position: absolute !important;
        top: 6px; left: 6px;
        width: 22px !important;
        height: 22px !important;
    }
    .ws-add-btn {
        position: absolute !important;
        top: 6px; right: 6px;
        width: 28px !important;
        height: 28px !important;
        display: inline-flex !important;
    }
}

/* หน้าจอเล็กมาก (≤360px) — 1 column เพื่อให้ card ใหญ่อ่านง่าย */
@media (max-width: 360px) {
    .ws-cat-group {
        grid-template-columns: 1fr !important;
    }
    .ws-preview { height: 60px !important; }
}

.ws-title { font-size: 0.92rem; }
.ws-title .fi { font-size: 0.9rem; color: var(--accent, #0984e3); margin-right: 4px; }

/* Skeleton base */
.sk { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sk-bar {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c4cdd5 0%, #d5dde3 50%, #c4cdd5 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.6s infinite;
}
.sk-bar-sm { height: 3px; }
.sk-bar-tiny { height: 2px; flex: 1; }
.sk-w-40 { width: 40%; }
.sk-w-60 { width: 60%; }
.sk-w-70 { width: 70%; }
.sk-w-90 { width: 90%; }
body.theme-dark .sk-bar {
    background: linear-gradient(90deg, #4a627a 0%, #5a7188 50%, #4a627a 100%);
    background-size: 200% 100%;
}
@keyframes sk-shimmer {
    0% { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}

.sk-circle {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #b2bec3;
    flex-shrink: 0;
}
.sk-circle-sm { width: 8px; height: 8px; }
body.theme-dark .sk-circle { background: #5a7188; }

.sk-row { display: flex; gap: 3px; align-items: center; }
.sk-row-inline { display: flex; gap: 5px; align-items: center; }

/* Map preview */
.sk-map {
    background: linear-gradient(135deg, #cfe5f5 0%, #b6d4eb 100%);
    border-radius: 6px;
    position: relative;
    flex: 1;
}
.sk-map-pin {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    top: 30%; left: 40%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}
.sk-map-pin-2 { top: 60%; left: 65%; background: #f39c12; }
body.theme-dark .sk-map { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); }

/* Clock */
.sk-clock { align-items: center; justify-content: center; }
.sk-time {
    width: 70%; height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent, #0984e3), var(--accent-soft, #74b9ff));
    margin-bottom: 4px;
}
.sk-date {
    width: 50%; height: 4px; border-radius: 2px;
    background: #b2bec3;
}

/* Sun */
.sk-sun { flex-direction: row; gap: 6px; align-items: center; justify-content: center; height: 100%; }
.sk-sun-col {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 1;
}
.sk-sun-col .sk-circle {
    width: 14px; height: 14px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
}
.sk-sun-col:last-child .sk-circle {
    background: linear-gradient(135deg, #e67e22, #d35400);
}

/* Number widget (big number with stats) */
.sk-num-big {
    height: 14px;
    width: 60%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent, #0984e3), var(--accent-soft, #74b9ff));
    margin: 2px 0;
}
.sk-num .sk-row { flex: 1; }

/* TV widget */
.sk-tv { gap: 3px; }
.sk-chips { display: flex; gap: 3px; }
.sk-chip {
    height: 8px;
    flex: 1;
    border-radius: 4px;
    background: linear-gradient(90deg, #c4cdd5, #d5dde3);
}
.sk-chip:first-child { background: linear-gradient(90deg, var(--accent, #0984e3), var(--accent-soft, #74b9ff)); }
.sk-video {
    flex: 1;
    background: #2d3436;
    border-radius: 4px;
}

/* Admin queue */
.sk-queue { gap: 4px; }
.sk-stats { display: flex; gap: 3px; }
.sk-stat {
    flex: 1;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, #c4cdd5, #d5dde3);
}
.sk-stat:first-child { background: linear-gradient(135deg, #95a5a6, #b2bec3); }
.sk-stat:nth-child(2) { background: linear-gradient(135deg, #74b9ff, #0984e3); }
.sk-stat:last-child { background: linear-gradient(135deg, #fab1a0, #f39c12); }

/* List preview */
.sk-list { gap: 5px; justify-content: center; }

/* ===== Realistic widget previews (v1.2.7+) ===== */

/* --- ตำแหน่งปัจจุบัน --- */
.sk-curloc { gap: 4px; justify-content: center; }
.sk-curloc-head { display: flex; justify-content: space-between; align-items: center; }
.sk-curloc-sun { font-size: 1rem; line-height: 1; }
.sk-curloc-temp {
    font-size: 1.5rem; font-weight: 700;
    color: var(--accent, #0984e3);
    line-height: 1; margin: 2px 0;
}
.sk-curloc-meta { display: flex; gap: 6px; }

/* --- พยากรณ์ 7 วัน --- */
.sk-forecast {
    flex-direction: row !important;
    gap: 3px !important;
    justify-content: space-between;
    align-items: stretch;
}
.sk-fc-day {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 2px 0;
    background: var(--card-bg-soft, rgba(255,255,255,0.5));
    border-radius: 4px;
    min-width: 0;
}
.sk-fc-dow { font-size: 0.55rem; color: var(--card-text-muted, #95a5a6); font-weight: 600; }
.sk-fc-icon { font-size: 0.85rem; line-height: 1; }
.sk-fc-temp { font-size: 0.65rem; font-weight: 700; color: var(--accent, #0984e3); }
body.theme-dark .sk-fc-day { background: rgba(255,255,255,0.08); }

/* --- เมืองในประเทศไทย --- */
.sk-cities {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
}
.sk-city {
    display: flex; align-items: center; gap: 2px;
    padding: 2px 3px;
    background: var(--card-bg-soft, rgba(255,255,255,0.5));
    border-radius: 4px;
    font-size: 0.55rem;
    min-width: 0;
}
.sk-city-icon { font-size: 0.7rem; line-height: 1; flex-shrink: 0; }
.sk-city-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--card-text, #2d3436);
}
.sk-city-temp { font-weight: 700; color: var(--accent, #0984e3); flex-shrink: 0; }
body.theme-dark .sk-city { background: rgba(255,255,255,0.08); }

/* --- น้ำฝน & ความเสี่ยง — risk gauge --- */
.sk-risk { gap: 3px; }
.sk-risk-bar {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 40%, #e67e22 70%, #e74c3c 100%);
    overflow: hidden;
}
.sk-risk-bar-fill {
    position: absolute;
    inset: 0 50% 0 0;
    background: rgba(0,0,0,0.08);
    border-right: 2px solid #fff;
}
.sk-risk-bar-label {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.55rem; font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.sk-risk-meta { display: flex; gap: 3px; }
.sk-pill {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.4;
}
.sk-pill-blue   { background: rgba(9,132,227,0.15);  color: #0984e3; }
.sk-pill-orange { background: rgba(230,126,34,0.15); color: #e67e22; }
.sk-pill-yellow { background: rgba(241,196,15,0.18); color: #b7950b; }
.sk-pill-red    { background: rgba(231,76,60,0.15);  color: #e74c3c; }

/* --- น้ำฝนละเอียด — histogram --- */
.sk-rain-detail { gap: 3px; }
.sk-rain-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
    padding: 0 1px;
}
.sk-rain-bar {
    flex: 1;
    background: linear-gradient(180deg, #74b9ff 0%, #0984e3 100%);
    border-radius: 1px 1px 0 0;
    min-width: 2px;
}

/* --- ดวงอาทิตย์ & ดวงจันทร์ — arc + orb --- */
.sk-sun2 { gap: 4px; justify-content: center; }
.sk-sun-arc {
    position: relative;
    height: 28px;
    background: linear-gradient(180deg, rgba(255,193,7,0.15) 0%, transparent 100%);
    border-radius: 28px 28px 0 0;
    overflow: hidden;
}
.sk-sun-arc::before {
    content: '';
    position: absolute;
    inset: 4px 4px auto 4px;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(243,156,18,0.5);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}
.sk-sun-orb {
    position: absolute;
    left: 50%; top: 4px;
    transform: translateX(-50%);
    font-size: 1.05rem; line-height: 1;
    z-index: 2;
}
.sk-sun-horizon {
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--card-border, #dfe6e9);
}
.sk-sun-times { display: flex; justify-content: space-between; gap: 4px; }

/* --- นาฬิกาไทย — analog face --- */
.sk-clock2 { gap: 4px; align-items: center; justify-content: center; }
.sk-clock-face {
    position: relative;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--card-bg, #fff);
    border: 2px solid var(--accent, #0984e3);
    flex-shrink: 0;
}
.sk-clock-hand {
    position: absolute;
    left: 50%; top: 50%;
    background: var(--accent, #0984e3);
    border-radius: 1px;
    transform-origin: 50% 100%;
}
.sk-clock-hand-hour {
    width: 2px; height: 9px;
    margin-left: -1px; margin-top: -9px;
    transform: rotate(40deg);
}
.sk-clock-hand-min {
    width: 1.5px; height: 12px;
    margin-left: -0.75px; margin-top: -12px;
    transform: rotate(190deg);
    background: var(--accent-soft, #74b9ff);
}
.sk-clock-center {
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    margin: -2px;
    border-radius: 50%;
    background: var(--accent, #0984e3);
}
body.theme-dark .sk-clock-face { background: rgba(255,255,255,0.08); }

/* --- Maps (v2) — gradient + grid + pins + badge --- */
.sk-map2 {
    position: relative;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
}
.sk-map-grid {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg,  rgba(255,255,255,0.08) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 12px);
}
.sk-map-pin2 {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transform: translate(-50%, -50%);
}
.sk-map-badge {
    position: absolute;
    top: 4px; right: 4px;
    font-size: 0.85rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* --- AQI gauge --- */
.sk-aqi { gap: 3px; justify-content: center; align-items: center; }
.sk-aqi-value {
    font-size: 1.4rem; font-weight: 700;
    color: #27ae60;
    line-height: 1;
}
.sk-aqi-bar {
    position: relative;
    width: 80%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 30%, #e67e22 60%, #e74c3c 80%, #8e44ad 100%);
}
.sk-aqi-marker {
    position: absolute;
    left: 30%; top: -2px;
    width: 2px; height: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.sk-aqi-label { font-size: 0.6rem; font-weight: 600; color: #27ae60; }

/* --- UV gauge — circular --- */
.sk-uv { gap: 3px; align-items: center; justify-content: center; }
.sk-uv-gauge {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: conic-gradient(#e74c3c 0% 70%, rgba(0,0,0,0.06) 70% 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.sk-uv-gauge::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--card-bg, #fff);
    border-radius: 50%;
}
.sk-uv-num {
    position: relative;
    font-size: 0.78rem; font-weight: 700;
    color: #e74c3c;
}
body.theme-dark .sk-uv-gauge::before { background: var(--card-bg, #1a2530); }

/* --- ฟ้าผ่า --- */
.sk-lightning { gap: 3px; align-items: center; justify-content: center; }
.sk-bolt { font-size: 1.4rem; color: #f1c40f; text-shadow: 0 0 8px rgba(241,196,15,0.5); }

/* --- น้ำขึ้น-ลง wave --- */
.sk-tides { padding: 0; gap: 3px; }
.sk-tides svg { width: 100%; height: 28px; display: block; }

/* --- แผ่นดินไหว list --- */
.sk-eq { gap: 5px; }
.sk-eq-row { display: flex; align-items: center; gap: 6px; }

/* --- live TV (v2) --- */
.sk-tv2 { gap: 3px; }
.sk-tv-chips { display: flex; gap: 3px; }
.sk-tv-chip {
    flex: 1;
    padding: 2px 4px;
    background: var(--card-bg-soft, rgba(0,0,0,0.05));
    border-radius: 6px;
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--card-text-muted, #636e72);
    text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 2px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sk-tv-chip-live {
    background: linear-gradient(135deg, rgba(231,76,60,0.18), rgba(231,76,60,0.08));
    color: #e74c3c;
}
.sk-tv-live-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #e74c3c;
    box-shadow: 0 0 0 0 rgba(231,76,60,0.6);
    animation: sk-tv-live-pulse 1.6s infinite;
}
@keyframes sk-tv-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.6); }
    50%      { box-shadow: 0 0 0 3px rgba(231,76,60,0); }
}
.sk-tv-video {
    position: relative;
    height: 22px;
    background: linear-gradient(135deg, #2c3e50, #1a2530);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
}
.sk-tv-play {
    color: rgba(255,255,255,0.85);
    font-size: 0.8rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
body.theme-dark .sk-tv-chip { background: rgba(255,255,255,0.06); }

/* --- chat bubbles --- */
.sk-chat { gap: 3px; padding: 2px 0; }
.sk-chat-msg {
    height: 6px;
    border-radius: 6px;
    width: 65%;
}
.sk-chat-msg-left {
    background: var(--card-bg-soft, #e0e6ea);
    align-self: flex-start;
}
.sk-chat-msg-right {
    background: linear-gradient(90deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    align-self: flex-end;
}
.sk-chat-msg-sm { width: 45%; }
body.theme-dark .sk-chat-msg-left { background: rgba(255,255,255,0.12); }

/* --- ข่าวสาร / list with icon + 2 lines --- */
.sk-news { gap: 5px; }
.sk-news-row {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 3px 0;
    border-bottom: 1px dashed var(--card-border-soft, rgba(0,0,0,0.06));
}
.sk-news-row:last-child { border-bottom: none; }
.sk-news-icon { font-size: 0.95rem; line-height: 1.2; flex-shrink: 0; }
.sk-news-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
body.theme-dark .sk-news-row { border-bottom-color: rgba(255,255,255,0.08); }

/* --- Incident queue v2 --- */
.sk-queue2 {
    display: flex !important;
    flex-direction: row !important;
    gap: 3px !important;
    height: 100%;
}
.sk-stat-tile {
    flex: 1;
    border-radius: 5px;
    padding: 3px 2px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px;
    min-width: 0;
}
.sk-stat-num { font-size: 0.9rem; font-weight: 700; color: #fff; line-height: 1; }
.sk-stat-lbl { font-size: 0.5rem; color: rgba(255,255,255,0.85); font-weight: 600; }
.sk-stat-blue   { background: linear-gradient(135deg, #74b9ff, #0984e3); }
.sk-stat-orange { background: linear-gradient(135deg, #fab1a0, #e17055); }
.sk-stat-green  { background: linear-gradient(135deg, #55efc4, #00b894); }

/* --- AI widgets — sparkle + chat bubble --- */
.sk-ai {
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center;
    padding: 6px 4px;
}
.sk-ai-spark {
    font-size: 1.3rem;
    background: linear-gradient(135deg, #c39bd3, #8e44ad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    flex-shrink: 0;
}
.sk-ai-body {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
}

/* ===== Chat widget — in-place chat view ===== */
.chat-w { display: flex; flex-direction: column; height: 100%; }
.chat-w-rooms[hidden], .chat-w-room[hidden] { display: none !important; }
.chat-w-room { display: flex; flex-direction: column; height: 380px; min-height: 0; }

.chat-w-room-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.chat-w-back, .chat-w-fullscreen {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--card-bg-soft, #f1f3f5);
    border: none;
    color: var(--card-text, #2d3436);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.12s;
}
.chat-w-back:hover, .chat-w-fullscreen:hover { background: var(--card-bg-softer, #e9ecef); }
.chat-w-back .fi, .chat-w-fullscreen .fi { font-size: 0.95rem; line-height: 1; }
.chat-w-room-name {
    flex: 1;
    color: var(--card-text, #2d3436);
    font-size: 0.98rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chat-w-messages {
    flex: 1;
    overflow-y: auto;
    padding: 6px 4px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 0;
}
.chat-w-messages .chat-msg { max-width: 88%; }
.chat-w-messages .chat-msg-bubble { padding: 6px 10px; }
.chat-w-messages .chat-msg-body { font-size: 0.85rem; }
.chat-w-messages .chat-msg-name { font-size: 0.7rem; }
.chat-w-messages .chat-msg-time { font-size: 0.65rem; }
.chat-w-messages .chat-msg-avatar { width: 26px; height: 26px; font-size: 0.75rem; }

.chat-w-input-form {
    display: flex; gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border, #e9ecef);
    align-items: flex-end;
}
.chat-w-input {
    flex: 1;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 14px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 0.88rem;
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    resize: none;
    max-height: 100px;
    line-height: 1.4;
}
.chat-w-input:focus {
    outline: none;
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(9,132,227,0.12));
}
.chat-w-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(9,132,227,0.3);
}
.chat-w-send .fi { font-size: 0.95rem; line-height: 1; }

/* room buttons (replace anchor with button styling) */
.chat-widget-room {
    background: var(--card-bg-soft, #f5f7fa);
    border: none;
    font-family: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

/* =====================================================================
   ===== Floating chat (FAB + popup) ====================================
   ===================================================================== */
.fchat {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 9990;
    font-family: inherit;
}

/* floating-left mode — ปุ่มกลมใหญ่ มุมซ้ายล่าง */
.fchat.fchat-pos-floating-left {
    bottom: 20px; right: auto;
    left: 20px;
}
.fchat.fchat-pos-floating-left .fchat-panel {
    bottom: 72px;
    right: auto;
    left: 0;
}

/* topbar mode — ปุ่มเล็กลง วางใกล้กระดิ่งด้านบนขวา (เหนือ credits FAB) */
.fchat.fchat-pos-topbar,
.fchat.fchat-pos-topbar-left {
    bottom: auto;
    top: 18px;
    z-index: 1100;
}
.fchat.fchat-pos-topbar { right: 20px; }
.fchat.fchat-pos-topbar-left { right: auto; left: 20px; }

.fchat.fchat-pos-topbar .fchat-fab,
.fchat.fchat-pos-topbar-left .fchat-fab {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    color: #fff;
}
.fchat.fchat-pos-topbar .fchat-fab:hover,
.fchat.fchat-pos-topbar-left .fchat-fab:hover {
    background: rgba(255,255,255,0.28);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.fchat.fchat-pos-topbar .fchat-fab .fi,
.fchat.fchat-pos-topbar-left .fchat-fab .fi { font-size: 1.15rem; }
.fchat.fchat-pos-topbar .fchat-badge,
.fchat.fchat-pos-topbar-left .fchat-badge {
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    font-size: 0.7rem;
}
.fchat.fchat-pos-topbar .fchat-panel {
    bottom: auto;
    top: 56px;
    right: 0;
}
.fchat.fchat-pos-topbar-left .fchat-panel {
    bottom: auto;
    top: 56px;
    right: auto;
    left: 0;
}

/* ===== Chat position picker (in settings → ทั่วไป) ===== */
.chat-pos-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.chat-pos-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    background: var(--card-bg, #fff);
}
.chat-pos-card:hover { border-color: var(--accent, #0984e3); transform: translateY(-1px); }
.chat-pos-card.active {
    border-color: var(--accent, #0984e3);
    background: var(--accent-bg, rgba(9,132,227,0.08));
}
.chat-pos-card input[type="radio"] { display: none; }
.chat-pos-icon {
    position: relative;
    width: 100%; height: 60px;
    border-radius: 8px;
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    overflow: hidden;
    flex-shrink: 0;
}
.cp-screen {
    position: absolute;
    inset: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 5px;
}
.cp-bubble {
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #00b894;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.cp-bubble-br     { bottom: 8px; right: 8px; }
.cp-bubble-bl     { bottom: 8px; left: 8px; }
.cp-bubble-tr     { top: 8px; right: 8px; width: 14px; height: 14px; }
.cp-bubble-tl     { top: 8px; left: 8px; width: 14px; height: 14px; }
.cp-x {
    position: absolute; top: 50%; left: 50%;
    width: 20px; height: 20px;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.7);
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.cp-x::before { content: '∅'; }
.chat-pos-label strong { display: block; font-size: 0.9rem; color: var(--card-text, #2d3436); }
.chat-pos-label small  { display: block; font-size: 0.78rem; color: var(--card-text-muted, #636e72); margin-top: 2px; line-height: 1.4; }
body.theme-dark .chat-pos-card { background: var(--card-bg-soft); }

/* ===== Widget Layout Picker (in settings → ทั่วไป) ===== */
.widget-layout-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.wl-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    background: var(--card-bg, #fff);
}
.wl-card:hover { border-color: var(--accent, #0984e3); transform: translateY(-1px); }
.wl-card.active {
    border-color: var(--accent, #0984e3);
    background: var(--accent-bg, rgba(9,132,227,0.08));
}
.wl-card input[type="radio"] { display: none; }
.wl-icon {
    position: relative;
    width: 100%;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    padding: 6px;
}
.wl-box {
    background: rgba(255,255,255,0.85);
    border-radius: 3px;
}
/* aligned: 4 boxes equal-height grid */
.wl-icon .wl-box-1 { grid-row: 1; grid-column: 1; }
.wl-icon .wl-box-2 { grid-row: 1; grid-column: 2; }
.wl-icon .wl-box-3 { grid-row: 2; grid-column: 1; }
.wl-icon .wl-box-4 { grid-row: 2; grid-column: 2; }
/* compact: simulate dense packing — irregular shapes */
.wl-icon-compact .wl-box-1 { grid-row: 1 / 3; }
.wl-icon-compact .wl-box-4 { grid-row: 1; grid-column: 2; }
.wl-icon-compact .wl-box-2 { grid-row: 2; grid-column: 2; }
.wl-icon-compact .wl-box-3 { display: none; }
/* masonry: tall + short staggered */
.wl-icon-masonry {
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}
.wl-icon-masonry .wl-box-1 { grid-row: 1; grid-column: 1; }
.wl-icon-masonry .wl-box-2 { grid-row: 1 / 3; grid-column: 2; }
.wl-icon-masonry .wl-box-3 { grid-row: 2 / 4; grid-column: 1; }
.wl-icon-masonry .wl-box-4 { grid-row: 3; grid-column: 2; }
.wl-label strong { display: block; font-size: 0.9rem; color: var(--card-text, #2d3436); }
.wl-label small  { display: block; font-size: 0.78rem; color: var(--card-text-muted, #636e72); margin-top: 2px; line-height: 1.4; }
body.theme-dark .wl-card { background: var(--card-bg-soft); }

/* FAB button */
.fchat-fab {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,184,148,0.4);
    display: grid;
    place-items: center;
    line-height: 0;
    transition: transform 0.18s, box-shadow 0.18s;
    position: relative;
    font-family: inherit;
}
.fchat-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,184,148,0.5); }
.fchat-fab .fi { font-size: 1.5rem; }
.fchat-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 22px; height: 22px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 11px;
    padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(231,76,60,0.5);
}

/* Popup panel */
.fchat-panel {
    position: absolute;
    bottom: 72px; right: 0;
    width: min(380px, calc(100vw - 30px));
    height: min(540px, calc(100vh - 140px));
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border-radius: 18px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: fchat-pop 0.2s ease;
}
.fchat-panel[hidden] { display: none !important; }
@keyframes fchat-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.theme-dark .fchat-panel { background: var(--card-bg); }

/* Header */
.fchat-head {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: #fff;
    padding: 14px 18px;
    display: flex; justify-content: space-between; align-items: center;
}
.fchat-head h3 {
    margin: 0;
    font-size: 1rem;
    display: flex; align-items: center; gap: 8px;
}
.fchat-head h3 .fi { font-size: 1.1rem; }
.fchat-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.fchat-close:hover { background: rgba(255,255,255,0.35); }

/* Rooms view */
.fchat-rooms {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.fchat-rooms[hidden] { display: none !important; }
.fchat-room-item {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f5f7fa);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--card-text, #2d3436);
    transition: background 0.12s;
}
.fchat-room-item:hover { background: var(--card-bg-softer, #eef1f4); }
.fchat-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fchat-room-info { flex: 1; min-width: 0; }
.fchat-room-info strong {
    display: block;
    font-size: 0.92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fchat-room-info small { color: var(--card-text-muted, #95a5a6); font-size: 0.74rem; }
.fchat-room-unread {
    background: #e74c3c; color: #fff;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.7rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.fchat-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--card-text-muted, #95a5a6);
}
.fchat-empty .fi { font-size: 2.5rem; display: block; margin-bottom: 8px; opacity: 0.5; }
.fchat-empty p { margin: 0; font-size: 0.88rem; }

/* In-room view */
.fchat-room {
    flex: 1;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.fchat-room[hidden] { display: none !important; }
.fchat-room-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.fchat-back, .fchat-link-full {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--card-bg-soft, #f1f3f5);
    border: none;
    color: var(--card-text, #2d3436);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    padding: 0;
    line-height: 1;
}
.fchat-back:hover, .fchat-link-full:hover { background: var(--card-bg-softer, #e9ecef); }
.fchat-back .fi, .fchat-link-full .fi {
    font-size: 0.95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.fchat-back .fi::before, .fchat-link-full .fi::before {
    display: block;
    line-height: 1;
}
.fchat-room-name {
    flex: 1;
    font-size: 0.92rem;
    color: var(--card-text, #2d3436);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fchat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.fchat-messages .chat-msg { max-width: 88%; }
.fchat-messages .chat-msg-bubble { padding: 6px 10px; }
.fchat-messages .chat-msg-body { font-size: 0.86rem; }
.fchat-messages .chat-msg-name { font-size: 0.7rem; }
.fchat-messages .chat-msg-time { font-size: 0.66rem; }
.fchat-messages .chat-msg-avatar { width: 26px; height: 26px; font-size: 0.75rem; }

.fchat-input-form {
    display: flex; gap: 6px; align-items: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--card-border, #e9ecef);
}
.fchat-input {
    flex: 1;
    border: 1.5px solid var(--card-border, #dfe6e9);
    border-radius: 14px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 0.88rem;
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    resize: none;
    max-height: 100px;
    line-height: 1.4;
}
.fchat-input:focus {
    outline: none;
    border-color: #00b894;
    box-shadow: 0 0 0 3px rgba(0,184,148,0.15);
}
.fchat-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,184,148,0.3);
}
.fchat-send .fi { font-size: 0.95rem; line-height: 1; }
.fchat-attach-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--card-bg-soft, #f1f3f5);
    color: var(--card-text-muted, #636e72);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.fchat-attach-btn:hover {
    background: var(--accent-bg, rgba(9,132,227,0.12));
    color: var(--accent, #0984e3);
}
.fchat-attach-btn .fi { font-size: 0.95rem; line-height: 1; }
.fchat-attach-preview {
    padding: 8px 12px 0;
    border-top: 1px solid var(--card-border, #e9ecef);
}
.fchat-attach-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    background: var(--accent-bg, rgba(9,132,227,0.08));
    border: 1px dashed var(--accent, #0984e3);
    border-radius: 10px;
    position: relative;
}
.fchat-attach-card img {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.fchat-attach-card .fi {
    font-size: 1.6rem;
    color: var(--accent, #0984e3);
    flex-shrink: 0;
    width: 48px; text-align: center;
}
.fchat-attach-info { flex: 1; min-width: 0; overflow: hidden; }
.fchat-attach-info strong {
    display: block; font-size: 0.82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--card-text, #2d3436);
}
.fchat-attach-info small { font-size: 0.72rem; color: var(--card-text-muted, #636e72); }
.fchat-attach-remove {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    cursor: pointer;
    font-size: 1.1rem; line-height: 1;
    flex-shrink: 0;
}
.fchat-attach-remove:hover { background: #e74c3c; color: #fff; }

@media (max-width: 600px) {
    .fchat { bottom: 14px; right: 14px; }
    .fchat-panel { bottom: 70px; right: -4px; width: calc(100vw - 16px); height: 70vh; }
}

/* =====================================================================
   ===== New widgets: PM2.5 / 7-day / Shelters / DDPM ==================
   ===================================================================== */

/* ===== v2: Air Quality / UV / Lightning / Tides — cohesive gradient design =====
   - layout-aligned (default) → widget stretch ตามแถว → gradient เต็ม card
   - layout-compact → widget สูงตาม content
   - section ภายในใช้ margin-top:auto เพื่อให้ stats/trend ลงล่างเมื่อ stretch
*/
.widget:has(> .aq-widget.v2),
.widget:has(> .uv-widget.v2),
.widget:has(> .lt-widget.v2),
.widget:has(> .td-widget.v2) {
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}
/* display:flex แยกออกมา + ต้อง .tab-current ก่อน — ป้องกัน :has override [data-tabs] hide rule */
.widget.tab-current:has(> .aq-widget.v2),
.widget.tab-current:has(> .uv-widget.v2),
.widget.tab-current:has(> .lt-widget.v2),
.widget.tab-current:has(> .td-widget.v2) {
    display: flex;
}
.aq-widget.v2, .uv-widget.v2, .lt-widget.v2, .td-widget.v2 {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
    padding: 22px 22px 26px;     /* breathing room ด้านล่างมากกว่าด้านบน */
    flex: 1 1 auto;              /* fill widget card; ถ้า card สูง gradient ก็เต็ม */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;                   /* gap ระหว่าง section เพิ่ม */
    color: #fff;
    /* ไม่มี min-height คงที่ — แต่ละ widget สูงตาม content จริง */
}
.aq-bg, .uv-bg, .lt-bg, .td-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: background 0.6s ease;
}

/* ----- Air Quality / PM2.5 ----- */
.aq-widget.v2[data-level="good"]            .aq-bg { background: linear-gradient(170deg, #d8f3dc 0%, #95d5b2 50%, #52b788 100%); }
.aq-widget.v2[data-level="moderate"]        .aq-bg { background: linear-gradient(170deg, #fef9c3 0%, #fde047 55%, #f59e0b 100%); }
.aq-widget.v2[data-level="usg"]             .aq-bg { background: linear-gradient(170deg, #fed7aa 0%, #fb923c 50%, #ea580c 100%); }
.aq-widget.v2[data-level="unhealthy"]       .aq-bg { background: linear-gradient(170deg, #fecaca 0%, #f87171 50%, #dc2626 100%); }
.aq-widget.v2[data-level="very_unhealthy"]  .aq-bg { background: linear-gradient(170deg, #e9d5ff 0%, #a855f7 50%, #7e22ce 100%); }
.aq-widget.v2[data-level="hazardous"]       .aq-bg { background: linear-gradient(170deg, #6b7280 0%, #4b5563 50%, #1f2937 100%); }
.aq-widget.v2[data-level="unknown"]         .aq-bg { background: linear-gradient(170deg, #cbd5e1 0%, #94a3b8 100%); }

/* darker label/text สำหรับ AQ ระดับสว่าง (good/moderate) */
.aq-widget.v2[data-level="good"],
.aq-widget.v2[data-level="moderate"] { color: #1f2937; }

.aq-head, .uv-head, .lt-head, .td-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; flex-wrap: wrap;
}
.aq-head h2, .uv-head h2, .lt-head h2, .td-head h2 {
    margin: 0; font-size: 1.05rem; font-weight: 800;
    display: flex; align-items: center; gap: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.aq-loc, .td-head small, .lt-head small {
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    padding: 3px 10px; border-radius: 12px;
    font-size: 0.74rem; font-weight: 600;
    color: inherit; opacity: 0.95;
}
.uv-safe-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    padding: 4px 12px; border-radius: 14px;
    font-size: 0.78rem; font-weight: 700;
    color: inherit;
}
.uv-safe-pill .fi { font-size: 0.85rem; }
.uv-safe-pill[hidden] { display: none; }

.aq-loading, .uv-loading, .lt-loading, .td-loading,
.f7-loading, .sh-loading, .ddpm-loading {
    text-align: center; padding: 20px;
    color: rgba(255,255,255,0.85);
}
.aq-widget.v2[data-level="good"] .aq-loading,
.aq-widget.v2[data-level="moderate"] .aq-loading { color: rgba(31,41,55,0.7); }

/* ----- AQ Hero — big PM2.5 number ----- */
.aq-hero {
    text-align: center;
    padding: 6px 0;
}
.aq-pm-num {
    font-size: 3.2rem; font-weight: 800; line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.aq-pm-unit { font-size: 0.82rem; opacity: 0.85; margin-top: 4px; }
.aq-label-pill {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 18px;
    background: rgba(255,255,255,0.30);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.aq-advice, .uv-advice, .lt-advice {
    background: rgba(255,255,255,0.30);
    backdrop-filter: blur(10px);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.5;
    display: flex; gap: 6px; align-items: flex-start;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.aq-advice .fi, .uv-advice .fi, .lt-advice .fi {
    margin-top: 3px;
    flex-shrink: 0;
    opacity: 0.85;
}

.aq-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;     /* gap ระดับ section + breathing room */
}
.aq-stat {
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
    padding: 14px 10px;  /* padding ภายในมากขึ้น — สวยกว่า */
    border-radius: 14px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.30);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.aq-stat-label { font-size: 0.72rem; opacity: 0.85; font-weight: 600; }
.aq-stat-val { font-size: 1rem; font-weight: 800; margin-top: 5px; }

/* ----- UV Index — semi-circle gauge ----- */
.uv-widget.v2[data-level="low"]       .uv-bg { background: linear-gradient(170deg, #bae6fd 0%, #38bdf8 60%, #0284c7 100%); }
.uv-widget.v2[data-level="moderate"]  .uv-bg { background: linear-gradient(170deg, #fef3c7 0%, #fbbf24 55%, #f59e0b 100%); }
.uv-widget.v2[data-level="high"]      .uv-bg { background: linear-gradient(170deg, #fed7aa 0%, #fb923c 50%, #ea580c 100%); }
.uv-widget.v2[data-level="very_high"] .uv-bg { background: linear-gradient(170deg, #fecaca 0%, #f87171 50%, #dc2626 100%); }
.uv-widget.v2[data-level="extreme"]   .uv-bg { background: linear-gradient(170deg, #e9d5ff 0%, #c084fc 45%, #7e22ce 100%); }

.uv-widget.v2[data-level="moderate"] { color: #422006; }
.uv-widget.v2[data-level="low"] { color: #0c2d48; }

.uv-stage {
    position: relative;
    padding: 8px 0 4px;
    display: flex; align-items: center; justify-content: center;
}
.uv-gauge {
    width: 280px;
    max-width: 100%;
    height: 165px;             /* สูงขึ้น เพื่อให้ number ไม่ทับ arc */
    display: block;
}
.uv-gauge-track {
    stroke: rgba(255,255,255,0.30);
    stroke-width: 14;
    stroke-linecap: round;
}
.uv-gauge-fill {
    stroke: rgba(255,255,255,0.92);
    stroke-width: 14;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
    transition: stroke-dasharray 0.6s ease;
}
.uv-center {
    position: absolute;
    /* วาง center ภายในครึ่งล่างของ gauge — ใต้ arc ลงมา */
    inset: 40% 0 0 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 2px;
    pointer-events: none;
}
.uv-num {
    font-size: 2.4rem;          /* ลดลงจาก 2.8rem ให้ฟิตในครึ่งล่าง */
    font-weight: 800; line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.uv-unit { font-size: 0.7rem; opacity: 0.85; margin-top: 2px; font-weight: 600; }
.uv-label-pill {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 14px;
    background: rgba(255,255,255,0.30);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.82rem;
}

/* ----- Lightning — storm gradient + animated bolt ----- */
.lt-widget.v2[data-level="low"]       .lt-bg { background: linear-gradient(170deg, #cbd5e1 0%, #64748b 60%, #334155 100%); }
.lt-widget.v2[data-level="moderate"]  .lt-bg { background: linear-gradient(170deg, #fde68a 0%, #fbbf24 50%, #d97706 100%); }
.lt-widget.v2[data-level="high"]      .lt-bg { background: linear-gradient(170deg, #fcd34d 0%, #f97316 50%, #c2410c 100%); }
.lt-widget.v2[data-level="extreme"]   .lt-bg { background: linear-gradient(170deg, #fda4af 0%, #e11d48 50%, #7f1d1d 100%); }

.lt-hero {
    text-align: center;
    padding: 8px 0;
}
.lt-bolt {
    display: inline-block;
    font-size: 3.4rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
    animation: lt-bolt-flash 2.4s ease-in-out infinite;
}
.lt-bolt .fi { color: #fff; }
@keyframes lt-bolt-flash {
    0%, 70%, 100% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
    72%           { opacity: 0.7; filter: drop-shadow(0 0 24px rgba(255,255,200,0.9)); }
    74%           { opacity: 1;   filter: drop-shadow(0 0 8px rgba(255,255,200,0.4)); }
    76%           { opacity: 0.85; }
}
.lt-label {
    font-size: 1.4rem; font-weight: 800;
    margin-top: 4px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
    letter-spacing: -0.3px;
}
.lt-meta {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.lt-chip {
    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(8px);
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.lt-trend {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 90px;
    margin-top: auto;
    padding: 8px;
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
    border-radius: 10px;
}
.lt-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lt-trend-bar {
    width: 70%; min-height: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.55));
    border-radius: 3px 3px 0 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.lt-trend-col small {
    color: rgba(255,255,255,0.85);
    font-size: 0.68rem;
    font-weight: 600;
}

/* ----- Tides — ocean wave ----- */
.td-widget.v2[data-level="low"]    .td-bg { background: linear-gradient(170deg, #fef3c7 0%, #fbbf24 50%, #b45309 100%); }
.td-widget.v2[data-level="normal"] .td-bg { background: linear-gradient(170deg, #bae6fd 0%, #38bdf8 50%, #0369a1 100%); }
.td-widget.v2[data-level="rising"] .td-bg { background: linear-gradient(170deg, #a7f3d0 0%, #14b8a6 50%, #0e7490 100%); }
.td-widget.v2[data-level="high"]   .td-bg { background: linear-gradient(170deg, #c7d2fe 0%, #6366f1 50%, #312e81 100%); }

.td-wave {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 45%;
    z-index: -1;
    pointer-events: none;
}
.td-wave-back {
    fill: rgba(255,255,255,0.18);
    animation: td-wave-flow 10s linear infinite alternate;
    transform-origin: center;
}
.td-wave-front {
    fill: rgba(255,255,255,0.28);
    animation: td-wave-flow 7s linear infinite alternate-reverse;
}
@keyframes td-wave-flow {
    0%   { transform: translateX(-8px); }
    100% { transform: translateX(8px); }
}

.td-hero {
    text-align: center;
    padding: 8px 0 4px;
}
.td-cur-num {
    font-size: 3.2rem; font-weight: 800; line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.td-cur-lbl { font-size: 0.82rem; opacity: 0.9; margin-top: 4px; font-weight: 600; }
.td-next {
    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(10px);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.td-list {
    display: flex; flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}
.td-row {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.20);
}
.td-row-ic {
    font-size: 1.2rem; font-weight: 800; width: 22px;
    text-align: center;
}
.td-row-ic[data-type="high"] { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,0.6); }
.td-row-ic[data-type="low"]  { color: rgba(255,255,255,0.7); }
.td-row-time { flex: 1; font-size: 0.85rem; opacity: 0.9; }
.td-row-lvl { font-weight: 700; }
.td-empty {
    text-align: center; padding: 30px;
    color: rgba(255,255,255,0.9);
}
.td-empty .fi { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.7; }

/* Dark theme — pump up gradients slightly */
body.theme-dark .aq-widget.v2 .aq-bg,
body.theme-dark .uv-widget.v2 .uv-bg,
body.theme-dark .lt-widget.v2 .lt-bg,
body.theme-dark .td-widget.v2 .td-bg {
    filter: saturate(1.15) brightness(0.92);
}

/* Mobile — slightly smaller hero */
@media (max-width: 480px) {
    .aq-widget.v2, .uv-widget.v2, .lt-widget.v2, .td-widget.v2 {
        padding: 18px 18px 22px;
        gap: 12px;
    }
    .aq-pm-num, .td-cur-num { font-size: 2.6rem; }
    .uv-num { font-size: 2.1rem; }
    .uv-gauge { height: 150px; width: 250px; }
    .lt-bolt { font-size: 2.8rem; }
    .lt-label { font-size: 1.15rem; }
}

/* ===== 7-day forecast ===== */
.f7-widget { display: flex; flex-direction: column; gap: 12px; }
.f7-head { display: flex; justify-content: space-between; align-items: center; }
.f7-head h2 { margin: 0; font-size: 1.05rem; }
.f7-loc { font-family: 'Courier New', monospace; color: var(--card-text-muted, #95a5a6); font-size: 0.78rem; }
.f7-list {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.f7-card {
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1px solid var(--card-border, #e9ecef);
}
.f7-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.f7-today {
    background: linear-gradient(135deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(9,132,227,0.3);
}
.f7-day-name { font-size: 0.82rem; font-weight: 700; color: var(--card-text, #2d3436); }
.f7-today .f7-day-name { color: #fff; }
.f7-date { font-size: 0.7rem; color: var(--card-text-muted, #95a5a6); }
.f7-today .f7-date { color: rgba(255,255,255,0.85); }
.f7-icon { margin: 6px 0 2px; display: flex; justify-content: center; align-items: center; }
.f7-icon .fi { font-size: 1.8rem; color: var(--accent, #0984e3); }
.f7-today .f7-icon .fi { color: #fff; }
.f7-icon-img,
.f7-icon-img > svg,
.f7-icon-img > img {
    width: 56px;
    height: 56px;
    display: block;
}
.f7-icon-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== Force darker stroke on inline Meteocons clouds =====
   SVG fill variant ใช้ stroke #e6effc (เกือบขาว) → invisible บนพื้นขาว
   Override เป็นน้ำเงินเข้ม เพื่อให้เห็น outline ชัดเจน */
.meteo-icon svg [stroke="#e6effc"] {
    stroke: #4a6280;
    stroke-width: 1.4;
}
body.theme-dark .meteo-icon svg [stroke="#e6effc"] {
    stroke: #c8d8ec;
    stroke-width: 1.3;
}
/* overcast.svg มีเมฆบนสีเทาเข้ม stroke #848b98 — เพิ่มความเข้มเล็กน้อย */
.meteo-icon svg [stroke="#848b98"] {
    stroke: #4a5563;
    stroke-width: 1.3;
}
body.theme-dark .meteo-icon svg [stroke="#848b98"] {
    stroke: #aab4c0;
}
/* ===== Dark theme — boost visibility of sun icons (<img> tag — filter only) =====
   sunrise/sunset/clear-day ใช้สีเหลืองอ่อน → ดูจมบน dark card
   เพิ่ม drop-shadow สีเหลือง + saturation ให้เห็นชัด */
body.theme-dark .sun-emoji .meteo-icon img,
body.theme-dark .sun-label-icon .meteo-icon img {
    filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.45))
            brightness(1.15)
            saturate(1.25);
}
/* ===== Dark theme — boost cloud body fills =====
   Meteocons fill variant ใช้สีอ่อน (#e6effc, #fbfbfb ฯลฯ) บน cloud body
   ทำให้ icons กลม-ขาวบน dark card ดูจม → เพิ่มความสว่างของ fill */
body.theme-dark .meteo-icon svg [fill="#e6effc"],
body.theme-dark .meteo-icon svg [fill="#fbfbfb"],
body.theme-dark .meteo-icon svg [fill="#c5d1de"],
body.theme-dark .meteo-icon svg [fill="#d4d7d9"] {
    fill: #e8eef7;
}
.f7-today .f7-icon-img,
.f7-today .f7-icon-img > svg,
.f7-today .f7-icon-img > img {
    width: 64px;
    height: 64px;
}
.f7-today .f7-icon-img {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25))
            drop-shadow(0 0 1px rgba(255,255,255,0.55));
}
@media (max-width: 700px) {
    .f7-icon-img, .f7-icon-img > svg, .f7-icon-img > img { width: 44px; height: 44px; }
    .f7-today .f7-icon-img, .f7-today .f7-icon-img > svg, .f7-today .f7-icon-img > img { width: 52px; height: 52px; }
}
/* meteo-icon ใน current location — stroke override จัดการ outline แล้ว */
.f7-desc { font-size: 0.7rem; color: var(--card-text-muted, #636e72); min-height: 30px; }
.f7-today .f7-desc { color: rgba(255,255,255,0.95); }
.f7-temps { font-size: 0.88rem; font-weight: 700; margin: 4px 0 2px; }
.f7-hi { color: var(--card-text, #2d3436); }
.f7-lo { color: var(--card-text-muted, #95a5a6); }
.f7-today .f7-hi, .f7-today .f7-lo { color: #fff; }
.f7-rain { font-size: 0.72rem; color: var(--accent, #0984e3); display: inline-flex; align-items: center; gap: 3px; justify-content: center; }
.f7-today .f7-rain { color: rgba(255,255,255,0.95); }
body.theme-dark .f7-card { background: var(--card-bg-soft); }
@media (max-width: 700px) {
    .f7-list { grid-template-columns: repeat(2, 1fr); }
    .f7-card { padding: 10px; }
    .f7-desc { min-height: 0; }
}

/* ===== Shelters / evacuation ===== */
.sh-widget { display: flex; flex-direction: column; gap: 12px; }
.sh-head h2 { margin: 0 0 4px; font-size: 1.05rem; }
.sh-head small { color: var(--card-text-muted, #95a5a6); font-size: 0.78rem; }
.sh-list { display: flex; flex-direction: column; gap: 8px; }
.sh-card {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 12px;
    border: 1px solid var(--card-border, #e9ecef);
}
body.theme-dark .sh-card { background: var(--card-bg-soft); border-color: var(--card-border); }
.sh-card-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: #fff;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sh-card-info { flex: 1; min-width: 0; }
.sh-card-info strong {
    display: block;
    color: var(--card-text, #2d3436);
    font-size: 0.92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-card-meta { font-size: 0.76rem; color: var(--card-text-muted, #636e72); display: flex; gap: 4px; flex-wrap: wrap; }
.sh-card-tel {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.78rem;
    color: var(--accent, #0984e3);
    text-decoration: none;
}
.sh-card-tel:hover { text-decoration: underline; }
.sh-card-dir {
    width: 36px; height: 36px;
    background: var(--accent-bg, rgba(9,132,227,0.12));
    color: var(--accent, #0984e3);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}
.sh-card-dir:hover { background: var(--accent, #0984e3); color: #fff; }
.sh-note {
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.74rem;
    line-height: 1.5;
}

/* ===== DDPM announcements ===== */
.ddpm-widget { display: flex; flex-direction: column; gap: 10px; }
.ddpm-head { display: flex; justify-content: space-between; align-items: center; }
.ddpm-head h2 { margin: 0; font-size: 1.05rem; }
.ddpm-source {
    font-size: 0.76rem;
    color: var(--accent, #0984e3);
    text-decoration: none;
    display: inline-flex; gap: 4px; align-items: center;
}
.ddpm-source:hover { text-decoration: underline; }
.ddpm-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.ddpm-empty { padding: 30px; text-align: center; color: var(--card-text-muted, #95a5a6); }
.ddpm-item {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    text-decoration: none;
    color: var(--card-text, #2d3436);
    transition: background 0.12s;
}
.ddpm-item:hover { background: var(--card-bg-softer, #eef1f4); }
body.theme-dark .ddpm-item { background: var(--card-bg-soft); }
.ddpm-item-ic {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ddpm-item-body { flex: 1; min-width: 0; }
.ddpm-item-body strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.4;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ddpm-item-body small { color: var(--card-text-muted, #95a5a6); font-size: 0.72rem; }
.ddpm-item > .fi { color: var(--card-text-muted, #95a5a6); flex-shrink: 0; }
.ddpm-hotline {
    background: linear-gradient(135deg, rgba(231,76,60,0.08), rgba(231,76,60,0.04));
    border-left: 3px solid #e74c3c;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.ddpm-hotline .fi { color: #e74c3c; }
.ddpm-hotline a { color: #c0392b; text-decoration: none; font-weight: 700; }
.ddpm-hotline a:hover { text-decoration: underline; }
.ddpm-hotline span { color: var(--card-text-muted, #636e72); font-size: 0.78rem; }

/* ===== GDACS Disaster Alerts Widget ===== */
.gdacs-widget { display: flex; flex-direction: column; gap: 10px; }
.gdacs-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.gdacs-head h2 { margin: 0; font-size: 1.05rem; }
.gdacs-sub { display: block; font-size: 0.74rem; color: var(--card-text-muted); font-weight: 500; margin-top: 2px; }
.gdacs-actions { display: flex; align-items: center; gap: 6px; }
.gdacs-status {
    font-size: 0.78rem;
    color: var(--card-text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}

.gdacs-summary {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px dashed var(--card-border, #e9ecef);
}
.gd-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--card-bg-soft);
    font-size: 0.76rem;
    color: var(--card-text);
}
.gd-chip .fi { font-size: 0.72rem; }
.gd-chip strong { font-weight: 700; }
.gd-chip-region { background: rgba(9,132,227,0.12); color: #0984e3; }
.gd-chip-red    { background: rgba(192,57,43,0.15); color: #c0392b; }
.gd-chip-orange { background: rgba(230,126,34,0.15); color: #d35400; }
.gd-chip-green  { background: rgba(39,174,96,0.15);  color: #1e8449; }
body.theme-dark .gd-chip-red    { color: #ff9b91; }
body.theme-dark .gd-chip-orange { color: #ffb070; }
body.theme-dark .gd-chip-green  { color: #7fd9a5; }
body.theme-dark .gd-chip-region { color: #74b9ff; }

.gdacs-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-fbtn {
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--card-text-muted);
    padding: 5px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    transition: all 0.12s;
}
.gd-fbtn:hover { background: var(--card-bg-soft); color: var(--card-text); }
.gd-fbtn.active {
    background: var(--accent, #0984e3);
    color: #fff;
    border-color: var(--accent, #0984e3);
}

.gdacs-list { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.gdacs-loading, .gdacs-empty { padding: 26px; text-align: center; color: var(--card-text-muted); font-size: 0.88rem; }
.gdacs-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px;
    background: var(--card-bg-soft);
    border-radius: 10px;
    border-left: 4px solid var(--c, #95a5a6);
    text-decoration: none;
    color: var(--card-text);
    transition: background 0.12s, transform 0.12s;
}
.gdacs-item:hover { background: var(--card-bg-softer, #eef1f4); transform: translateX(2px); }
.gdacs-item-ic {
    width: 32px; height: 32px;
    background: color-mix(in srgb, var(--c, #95a5a6) 20%, transparent);
    color: var(--c, #95a5a6);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gdacs-item-ic .fi { font-size: 0.95rem; }
.gdacs-item-body { flex: 1; min-width: 0; }
.gdacs-item-head {
    display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
    margin-bottom: 4px;
}
.gdacs-item-head strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--card-text);
    flex: 1;
    min-width: 0;
}
.gdacs-lvl-pill {
    font-size: 0.68rem; font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.gdacs-lvl-low    { background: rgba(39,174,96,0.18);  color: #1e8449; }
.gdacs-lvl-medium { background: rgba(230,126,34,0.18); color: #d35400; }
.gdacs-lvl-high   { background: rgba(192,57,43,0.18);  color: #c0392b; }
body.theme-dark .gdacs-lvl-low    { color: #7fd9a5; }
body.theme-dark .gdacs-lvl-medium { color: #ffb070; }
body.theme-dark .gdacs-lvl-high   { color: #ff9b91; }

.gdacs-item-meta {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    font-size: 0.72rem; color: var(--card-text-muted);
    margin-bottom: 4px;
}
.gdacs-type { font-weight: 600; color: var(--card-text); }
.gdacs-region-tag {
    display: inline-flex; align-items: center; gap: 3px;
    color: #0984e3;
    font-weight: 600;
}
body.theme-dark .gdacs-region-tag { color: #74b9ff; }
.gdacs-region-tag .fi { font-size: 0.7rem; }
.gdacs-item-desc {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--card-text-muted);
    line-height: 1.4;
}
.gdacs-item-ext { color: var(--card-text-muted); align-self: center; }

.gdacs-note {
    margin: 4px 0 0;
    font-size: 0.74rem;
    color: var(--card-text-muted);
    line-height: 1.5;
}
.gdacs-note .fi { color: #f39c12; }
.gdacs-note a { color: var(--accent, #0984e3); }

/* ===== Mobile: nav-pill icons only (ซ่อน label) ===== */
@media (max-width: 640px) {
    .nav-right .nav-pill span { display: none; }
    .nav-right .nav-pill {
        padding: 8px;
        width: 38px; height: 38px;
        border-radius: 50%;
        justify-content: center;
    }
    .nav-right .nav-pill .fi { margin: 0; font-size: 1rem; }
    /* user-menu-trigger ก็ย่อ */
    .user-menu-trigger .user-meta { display: none; }
    .user-menu-trigger { padding: 4px 6px; }
    .user-menu-arrow { display: none; }
    /* topnav padding */
    .topnav { padding: 8px 12px; }
    .topnav .brand-name { font-size: 0.95rem; }
}

/* ===== Chat add-member picker ===== */
.add-mem-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 360px;
    overflow-y: auto;
}
.add-mem-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 8px;
    cursor: pointer;
}
.add-mem-row:hover { background: var(--card-bg-softer, #eef1f4); }
.add-mem-row input { margin-top: 3px; }
.add-mem-row strong { color: var(--card-text, #2d3436); font-size: 0.92rem; }
.add-mem-row small { color: var(--card-text-muted, #95a5a6); font-size: 0.78rem; }

/* =====================================================================
   ===== 8 new widgets CSS ============================================
   ===================================================================== */

/* Common big-number box (uv, lightning) */
.uv-big, .lt-big {
    border-radius: 14px; padding: 18px 20px;
    color: #fff; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* === Earthquake === */
.eq-widget, .uv-widget, .lt-widget, .td-widget,
.cs-widget, .ou-widget, .ss-widget, .al-widget { display: flex; flex-direction: column; gap: 12px; }
.eq-head, .uv-head, .lt-head, .td-head,
.cs-head, .ou-head, .ss-head, .al-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.eq-head h2, .uv-head h2, .lt-head h2, .td-head h2,
.cs-head h2, .ou-head h2, .ss-head h2, .al-head h2 { margin: 0; font-size: 1.05rem; }
.eq-head small, .uv-head small, .lt-head small, .td-head small,
.cs-head small, .ou-head small, .ss-head small, .al-head small { color: var(--card-text-muted, #95a5a6); font-size: 0.78rem; }
.eq-loading, .uv-loading, .lt-loading, .td-loading, .cs-loading, .ss-loading, .al-loading { text-align: center; padding: 24px; color: var(--card-text-muted, #95a5a6); }

/* widget eq ขยายตามความสูงของแถว — list ภายในใช้ flex-grow + scroll เมื่อจำเป็น */
.widget:has(> .eq-widget) { flex-direction: column; }
.widget.tab-current:has(> .eq-widget) { display: flex; }
.widget:has(> .eq-widget) > .eq-widget { flex: 1 1 auto; min-height: 0; }
.eq-list {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
}
.eq-item {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    text-decoration: none;
    color: var(--card-text, #2d3436);
    transition: background 0.12s;
}
.eq-item:hover { background: var(--card-bg-softer, #eef1f4); }
body.theme-dark .eq-item { background: var(--card-bg-soft); }
.eq-mag {
    width: 44px; height: 44px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem;
    flex-shrink: 0;
}
.eq-info { flex: 1; min-width: 0; }
.eq-info strong { display: block; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-info small { color: var(--card-text-muted, #95a5a6); font-size: 0.74rem; }
.eq-tsunami { background: #e74c3c; color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; }
.eq-empty { text-align: center; padding: 30px; color: var(--card-text-muted, #95a5a6); }

/* === UV === */
.uv-num { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.uv-unit { font-size: 0.78rem; opacity: 0.9; }
.uv-label { display: inline-block; margin-top: 8px; padding: 4px 14px; background: rgba(255,255,255,0.25); border-radius: 14px; font-weight: 700; font-size: 0.88rem; }

/* === Lightning === */
.lt-big-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 6px; }
.lt-label { font-weight: 700; font-size: 0.95rem; }
.lt-meta { font-size: 0.78rem; opacity: 0.85; margin-top: 4px; }
.lt-trend { display: flex; gap: 4px; align-items: flex-end; height: 100px; margin-top: 8px; padding: 6px; background: var(--card-bg-soft, #f5f7fa); border-radius: 8px; }
.lt-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lt-trend-bar { width: 80%; min-height: 4px; background: linear-gradient(180deg, #f39c12, #e67e22); border-radius: 3px 3px 0 0; }
.lt-trend-col small { color: var(--card-text-muted, #95a5a6); font-size: 0.66rem; }

/* === Tides === */
.td-cur { text-align: center; padding: 14px; background: linear-gradient(135deg, #74b9ff, #0984e3); color: #fff; border-radius: 14px; }
.td-cur-num { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.td-cur-lbl { font-size: 0.78rem; opacity: 0.9; margin-top: 4px; }
.td-next { background: var(--card-bg-soft, #f5f7fa); padding: 10px 14px; border-radius: 8px; font-size: 0.88rem; color: var(--card-text, #2d3436); }
body.theme-dark .td-next { background: var(--card-bg-soft); }
.td-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.td-row { display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: var(--card-bg-soft, #f5f7fa); border-radius: 6px; }
body.theme-dark .td-row { background: var(--card-bg-soft); }
.td-row-ic { font-size: 1.2rem; font-weight: 800; width: 20px; }
.td-row-time { flex: 1; color: var(--card-text-muted, #636e72); font-size: 0.85rem; }
.td-row-lvl { font-weight: 700; color: var(--card-text, #2d3436); }
.td-empty { text-align: center; padding: 30px; color: var(--card-text-muted, #95a5a6); }
.td-empty .fi { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.5; }

/* === Admin: Case stats === */
.cs-totals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cs-total { padding: 10px; background: var(--card-bg-soft, #f5f7fa); border-radius: 8px; border-top: 3px solid; text-align: center; }
body.theme-dark .cs-total { background: var(--card-bg-soft); }
.cs-total-num { font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--card-text, #2d3436); }
.cs-total-lbl { font-size: 0.72rem; color: var(--card-text-muted, #636e72); margin-top: 4px; }
.cs-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 16px 10px; background: var(--card-bg-soft, #f5f7fa); border-radius: 10px; height: 200px; align-items: end; }
body.theme-dark .cs-chart { background: var(--card-bg-soft); }
.cs-col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.cs-bar { width: 70%; background: linear-gradient(180deg, var(--accent-soft, #74b9ff), var(--accent, #0984e3)); border-radius: 4px 4px 0 0; min-height: 4px; }
.cs-col-num { font-size: 0.78rem; font-weight: 700; color: var(--card-text, #2d3436); }
.cs-col small { font-size: 0.68rem; color: var(--card-text-muted, #95a5a6); }
@media (max-width: 700px) {
    .cs-totals { grid-template-columns: repeat(3, 1fr); }
    .cs-chart { height: 160px; }
}

/* === Admin: Online users === */
.ou-count { font-size: 1.6rem; font-weight: 800; color: var(--accent, #0984e3); text-align: center; }
.ou-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.ou-row { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--card-bg-soft, #f5f7fa); border-radius: 8px; }
body.theme-dark .ou-row { background: var(--card-bg-soft); }
.ou-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #00b894, #00cec9); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ou-info { flex: 1; min-width: 0; }
.ou-info strong { display: block; font-size: 0.88rem; }
.ou-info small { color: var(--card-text-muted, #95a5a6); font-size: 0.72rem; }
.ou-dot { width: 10px; height: 10px; background: #27ae60; border-radius: 50%; box-shadow: 0 0 0 3px rgba(39,174,96,0.2); }
.ou-empty { text-align: center; padding: 30px; color: var(--card-text-muted, #95a5a6); }

/* === Admin: System status === */
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ss-item { padding: 10px 12px; background: var(--card-bg-soft, #f5f7fa); border-radius: 8px; }
body.theme-dark .ss-item { background: var(--card-bg-soft); }
.ss-item small { font-size: 0.7rem; color: var(--card-text-muted, #95a5a6); }
.ss-item strong { display: block; font-size: 0.92rem; color: var(--card-text, #2d3436); margin-top: 2px; word-break: break-word; }
.ss-rows { margin-top: 6px; background: var(--card-bg-soft, #f5f7fa); border-radius: 8px; padding: 10px 14px; }
body.theme-dark .ss-rows { background: var(--card-bg-soft); }
.ss-rows-title { font-size: 0.78rem; color: var(--card-text-muted, #636e72); margin-bottom: 6px; font-weight: 600; }
.ss-rows-item { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.85rem; }
.ss-rows-item code { font-family: 'Courier New', monospace; color: var(--card-text-muted, #636e72); font-size: 0.78rem; }
.ss-rows-item strong { color: var(--card-text, #2d3436); }

/* === Admin: Audit log === */
.al-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.al-row { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--card-bg-soft, #f5f7fa); border-radius: 6px; }
body.theme-dark .al-row { background: var(--card-bg-soft); }
.al-action { font-family: 'Courier New', monospace; font-size: 0.74rem; padding: 2px 8px; background: var(--accent-bg, rgba(9,132,227,0.12)); color: var(--accent, #0984e3); border-radius: 10px; flex-shrink: 0; }
.al-info { flex: 1; min-width: 0; }
.al-info strong { display: block; font-size: 0.84rem; }
.al-info small { color: var(--card-text-muted, #95a5a6); font-size: 0.72rem; }
.al-time { color: var(--card-text-muted, #95a5a6); font-size: 0.72rem; flex-shrink: 0; }
.al-empty { text-align: center; padding: 30px; color: var(--card-text-muted, #95a5a6); }

/* Floating chat — sound button + head actions */
.fchat-head-actions { display: flex; gap: 6px; align-items: center; }
.fchat-sound {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.fchat-sound:hover { background: rgba(255,255,255,0.35); }
.fchat-sound .fi { font-size: 0.9rem; line-height: 1; }

/* =====================================================================
   ===== Admin Panel chrome ============================================
   ===================================================================== */
body.admin-panel-mode {
    background: linear-gradient(135deg, #2c0a14 0%, #4a0c2a 45%, #6b1235 100%);
    background-attachment: fixed;
}
body.admin-panel-mode .topnav { /* keep nav same */ }

.admin-page {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.admin-header {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #ec7063 100%);
    color: #fff;
    padding: 22px 28px;
    position: relative;
    overflow: hidden;
}
.admin-header::before {
    content: '';
    position: absolute;
    inset: -50% -20% auto auto;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.admin-header-inner {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px; flex-wrap: wrap;
}
.admin-header-left {
    display: flex; align-items: center; gap: 16px;
}
.admin-header-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.admin-header h1 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.admin-header p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.92;
}
.admin-header-right {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-badge-large {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 600;
}
.admin-back-link {
    color: #fff;
    text-decoration: none;
    padding: 7px 14px;
    background: rgba(255,255,255,0.15);
    border-radius: 18px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.15s;
}
.admin-back-link:hover { background: rgba(255,255,255,0.28); }

/* Sidebar nav link สำหรับลิ้งไปหน้า admin จาก settings ปกติ */
.settings-nav-item.admin-link {
    background: linear-gradient(135deg, rgba(231,76,60,0.12), rgba(192,57,43,0.08));
    color: #c0392b;
    font-weight: 600;
    border: 1px solid rgba(231,76,60,0.25);
    text-decoration: none;
}
.settings-nav-item.admin-link:hover,
.settings-nav-item.admin-link:focus,
.settings-nav-item.admin-link:active,
.settings-nav-item.admin-link:visited {
    text-decoration: none;
}
.settings-nav-item.admin-link:hover {
    background: linear-gradient(135deg, rgba(231,76,60,0.2), rgba(192,57,43,0.15));
}
body.theme-dark .settings-nav-item.admin-link { color: #ff9b91; }

/* Mega menu — admin entry highlighted */
.ummenu-item-admin {
    background: linear-gradient(135deg, rgba(231,76,60,0.1), rgba(192,57,43,0.06));
    border: 1px solid rgba(231,76,60,0.2);
}
.ummenu-item-admin:hover {
    background: linear-gradient(135deg, rgba(231,76,60,0.18), rgba(192,57,43,0.1));
}
.ummenu-icon-admin {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: #fff;
}

/* ===== API Keys & Email — redesigned card grid ===== */
.ak-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}
.ak-card {
    background: var(--card-bg-soft, #f8f9fa);
    border: 1px solid var(--card-border, #e9ecef);
    border-radius: 14px;
    padding: 18px 22px;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.ak-card:hover { border-color: var(--accent, #0984e3); }
.ak-card-wide { width: 100%; }  /* legacy class — keep for compat */
.ak-card-info { background: transparent; opacity: 0.92; }
body.theme-dark .ak-card { background: var(--card-bg-soft); }

.ak-card-head {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ak-card-info .ak-card-head { margin-bottom: 0; }

.ak-svc { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.ak-svc-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.ak-svc-icon svg { width: 22px; height: 22px; display: block; }
.ak-svc-icon-youtube { padding: 0; }
.ak-svc-text strong { display: block; font-size: 1rem; color: var(--card-text); line-height: 1.2; }
.ak-svc-text small { display: block; color: var(--card-text-muted); font-size: 0.78rem; margin-top: 3px; }

.ak-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ak-pill .fi { font-size: 0.78rem; }
.ak-pill-ok    { background: rgba(39,174,96,0.15); color: #1e8449; }
.ak-pill-warn  { background: rgba(243,156,18,0.18); color: #b96104; }
.ak-pill-env   { background: rgba(155,89,182,0.15); color: #6c3483; }
.ak-pill-off   { background: rgba(231,76,60,0.15); color: #c0392b; }
body.theme-dark .ak-pill-ok   { color: #7fd9a5; }
body.theme-dark .ak-pill-warn { color: #ffb070; }
body.theme-dark .ak-pill-env  { color: #c39bd3; }
body.theme-dark .ak-pill-off  { color: #ff9b91; }

.ak-effective {
    font-size: 0.78rem;
    color: var(--card-text-muted);
    margin-bottom: 10px;
}
.ak-effective code {
    font-family: ui-monospace, 'Courier New', monospace;
    padding: 2px 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    font-size: 0.92em;
    color: var(--card-text);
}
body.theme-dark .ak-effective code { background: rgba(255,255,255,0.08); }

.ak-form { display: flex; flex-direction: column; gap: 10px; }
.ak-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--card-text-muted); }
.ak-form label > span { font-weight: 600; color: var(--card-text); }
.ak-form input[type="text"],
.ak-form input[type="email"],
.ak-form input[type="password"],
.ak-form input[type="number"],
.ak-form select {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--card-border, #dfe6e9);
    background: var(--input-bg, #fff);
    color: var(--input-text, #2d3436);
    font-family: inherit;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
}
.ak-form input:focus,
.ak-form select:focus {
    outline: none;
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(9,132,227,0.12));
}
.ak-form input[name="firms_map_key"] {
    font-family: ui-monospace, 'Courier New', monospace;
    letter-spacing: 1px;
}

.ak-input-row {
    display: flex; gap: 8px; align-items: stretch;
}
.ak-input-row > input { flex: 1; min-width: 0; }

.ak-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;  /* labels with hint text don't break vertical alignment */
}
/* Special: SMTP host (wide) + port (narrow) */
.ak-grid-2.ak-grid-host-port {
    grid-template-columns: 3fr 1fr;
}
@media (max-width: 600px) {
    .ak-grid-2,
    .ak-grid-2.ak-grid-host-port { grid-template-columns: 1fr; }
}
/* Inputs in ak-form — uniform height + alignment */
.ak-form input[type="text"],
.ak-form input[type="email"],
.ak-form input[type="password"],
.ak-form input[type="number"],
.ak-form select {
    height: 40px;
}

.ak-toggle {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
}
.ak-toggle input { width: 16px; height: 16px; cursor: pointer; }
.ak-toggle span { font-weight: 600 !important; color: var(--card-text) !important; }

.ak-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    white-space: nowrap;
}
.ak-btn-primary {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    color: #fff;
    box-shadow: 0 4px 12px rgba(9,132,227,0.3);
}
.ak-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(9,132,227,0.4); }
.ak-btn-ghost {
    background: var(--card-bg, #fff);
    color: var(--accent, #0984e3);
    border: 1.5px solid var(--accent, #0984e3);
}
.ak-btn-ghost:hover { background: rgba(9,132,227,0.08); }

.ak-actions-row { display: flex; gap: 8px; justify-content: flex-end; }

.ak-hint {
    color: var(--card-text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}
.ak-hint a { color: var(--accent, #0984e3); }

/* ===== Role defaults (Widget เริ่มต้น) ===== */
.rd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.rd-card {
    background: var(--card-bg-soft, #f8f9fa);
    border: 1px solid var(--card-border, #e9ecef);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color 0.15s;
}
.rd-card-set { border-color: rgba(39,174,96,0.4); background: linear-gradient(135deg, rgba(46,204,113,0.04), transparent); }
body.theme-dark .rd-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
body.theme-dark .rd-card-set { border-color: rgba(46,204,113,0.45); background: linear-gradient(135deg, rgba(46,204,113,0.08), transparent); }

.rd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rd-role { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.rd-role-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}
.rd-role-icon-admin  { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.rd-role-icon-member { background: linear-gradient(135deg, #3498db, #2980b9); }
.rd-role-text strong { display: block; font-size: 0.95rem; color: var(--card-text, #2d3436); }
.rd-role-text small {
    display: block;
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.74rem;
    margin-top: 2px;
}
.rd-role-text small code { font-family: ui-monospace, monospace; font-size: 0.95em; }

.rd-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.rd-pill-on  { background: rgba(39,174,96,0.18); color: #1e8449; }
.rd-pill-off { background: rgba(149,165,166,0.18); color: #7f8c8d; }
body.theme-dark .rd-pill-on  { color: #7fd9a5; }
body.theme-dark .rd-pill-off { color: #b2bec3; }

.rd-summary {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--card-bg, #fff);
    border-radius: 8px;
    align-items: baseline;
}
body.theme-dark .rd-summary { background: rgba(0,0,0,0.18); }
.rd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-stat strong { font-size: 1.25rem; font-weight: 800; color: var(--accent, #0984e3); line-height: 1; }
.rd-stat small { font-size: 0.7rem; color: var(--card-text-muted, #95a5a6); text-transform: uppercase; letter-spacing: 0.4px; }
.rd-stat-meta { margin-left: auto; flex-direction: row; align-items: center; gap: 6px; }
.rd-stat-meta span { font-size: 0.78rem; color: var(--card-text-muted, #95a5a6); font-family: ui-monospace, monospace; }

.rd-tabs-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-tab-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: rgba(9,132,227,0.08);
    color: var(--accent, #0984e3);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
}
.rd-tab-chip small { color: var(--card-text-muted, #95a5a6); font-size: 0.9em; }
.rd-tab-chip .fi { font-size: 0.78rem; }

.rd-empty {
    margin: 0;
    padding: 12px;
    color: var(--card-text-muted, #95a5a6);
    font-size: 0.85rem;
    text-align: center;
    background: rgba(149,165,166,0.06);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.rd-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    border: 1.5px solid transparent;
    transition: all 0.12s;
}
.rd-btn-primary {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    color: #fff;
    box-shadow: 0 3px 10px rgba(9,132,227,0.3);
}
.rd-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(9,132,227,0.4); }
.rd-btn-ghost {
    background: transparent;
    color: var(--accent, #0984e3);
    border-color: var(--accent, #0984e3);
}
.rd-btn-ghost:hover { background: rgba(9,132,227,0.08); }
.rd-btn-danger {
    background: transparent;
    color: #e74c3c;
    border-color: #e74c3c;
}
.rd-btn-danger:hover { background: #e74c3c; color: #fff; }

.rd-hint {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px;
    background: rgba(9,132,227,0.06);
    border-left: 3px solid var(--accent, #0984e3);
    border-radius: 8px;
    margin-top: 14px;
    font-size: 0.86rem;
    line-height: 1.6;
}
.rd-hint .fi { color: var(--accent, #0984e3); margin-top: 3px; flex-shrink: 0; }
body.theme-dark .rd-hint { background: rgba(9,132,227,0.12); }

.ak-divider {
    text-align: center;
    margin: 6px 0;
    position: relative;
    color: var(--card-text-muted);
}
.ak-divider::before {
    content: '';
    position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: var(--card-border);
}
.ak-divider span {
    position: relative;
    background: var(--card-bg-soft);
    padding: 0 12px;
    font-size: 0.76rem;
    font-weight: 600;
}
body.theme-dark .ak-divider span { background: var(--card-bg-soft); }

.ak-test-form {
    margin-top: 8px;
    padding-top: 8px;
}

@media (max-width: 640px) {
    .admin-header { padding: 18px 20px; }
    .admin-header h1 { font-size: 1.2rem; }
    .admin-header-icon { width: 48px; height: 48px; font-size: 1.3rem; }
}

/* =====================================================================
   ===== Credits Floating Button + Modal ================================
   ===================================================================== */
.footer-minimal { margin-top: 24px; }
.footer-minimal p {
    margin: 0;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-right { display: inline-flex; align-items: center; gap: 6px; }
.footer-sep { opacity: 0.4; }
.footer-powered {
    font-size: 0.78em;
    opacity: 0.75;
}
.footer-powered a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.footer-powered a:hover { opacity: 1; }

.footer-credits-link {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.15s;
}
.footer-credits-link:hover,
.footer-credits-link:focus,
.footer-credits-link:active,
.footer-credits-link:visited { text-decoration: none; }
.footer-credits-link:hover { opacity: 1; }

.credits-modal {
    position: fixed; inset: 0; z-index: 99997;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: appModalFade 0.18s ease;
}
.credits-modal-card {
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border-radius: 16px;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    animation: appModalPop 0.22s ease;
}
.credits-modal-head {
    padding: 16px 22px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--card-border, #e9ecef);
}
.credits-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--card-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.credits-modal-head h3 .fi { color: var(--accent, #0984e3); }
.credits-modal-close {
    border: none; background: transparent;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--card-text-muted);
    font-size: 1.4rem; line-height: 1;
}
.credits-modal-close:hover { background: var(--card-bg-soft); color: var(--card-text); }

.credits-modal-body {
    padding: 16px 22px 20px;
    overflow-y: auto;
}
.credits-intro {
    margin: 0 0 14px;
    font-size: 0.86rem;
    color: var(--card-text-muted);
    line-height: 1.55;
}
.credits-group {
    margin-bottom: 14px;
}
.credits-group-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent, #0984e3);
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.credits-group-label .fi { font-size: 0.78rem; }
.credits-group ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
    border-left: 2px solid var(--card-border, #e9ecef);
}
.credits-group li {
    padding: 5px 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
.credits-group li a {
    color: var(--accent, #0984e3);
    font-weight: 600;
    text-decoration: none;
}
.credits-group li a:hover { text-decoration: underline; }
.credits-group li small {
    color: var(--card-text-muted);
    font-size: 0.78rem;
}
.credits-foot {
    margin: 8px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--card-border, #e9ecef);
    font-size: 0.78rem;
    color: var(--card-text-muted);
    line-height: 1.55;
}

body.theme-dark .credits-modal-card { background: var(--card-bg); color: var(--card-text); }
body.theme-dark .credits-group ul { border-left-color: var(--card-border); }

@media (max-width: 640px) {
    .credits-modal-head { padding: 14px 16px; }
    .credits-modal-body { padding: 14px 16px 18px; }
}

/* ====================================================================
   Announcement system (marquee / banner / alert / toast)
   ==================================================================== */

/* severity colors */
.ann-sev-info    { --ann-bg: #e8f4fd; --ann-fg: #1565c0; --ann-bd: #90caf9; --ann-icon: #1976d2; }
.ann-sev-success { --ann-bg: #e8f5e9; --ann-fg: #2e7d32; --ann-bd: #a5d6a7; --ann-icon: #2e7d32; }
.ann-sev-warning { --ann-bg: #fff8e1; --ann-fg: #ef6c00; --ann-bd: #ffcc80; --ann-icon: #ef6c00; }
.ann-sev-danger  { --ann-bg: #ffebee; --ann-fg: #c62828; --ann-bd: #ef9a9a; --ann-icon: #c62828; }
.ann-sev-urgent  { --ann-bg: #c62828; --ann-fg: #fff;    --ann-bd: #b71c1c; --ann-icon: #fff; }
body.theme-dark .ann-sev-info    { --ann-bg: rgba(33,150,243,0.18); --ann-fg: #82b1ff; --ann-bd: rgba(33,150,243,0.4); --ann-icon: #64b5f6; }
body.theme-dark .ann-sev-success { --ann-bg: rgba(76,175,80,0.18);  --ann-fg: #a5d6a7; --ann-bd: rgba(76,175,80,0.4);  --ann-icon: #81c784; }
body.theme-dark .ann-sev-warning { --ann-bg: rgba(255,152,0,0.18);  --ann-fg: #ffcc80; --ann-bd: rgba(255,152,0,0.4);  --ann-icon: #ffb74d; }
body.theme-dark .ann-sev-danger  { --ann-bg: rgba(244,67,54,0.20);  --ann-fg: #ef9a9a; --ann-bd: rgba(244,67,54,0.5);  --ann-icon: #e57373; }

/* close button (shared) */
.ann-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    color: inherit;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s, background 0.15s;
}
.ann-close:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.ann-sev-urgent .ann-close:hover,
.ann-sev-danger .ann-close:hover { background: rgba(255,255,255,0.15); }
.ann-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}
.ann-link:hover { opacity: 0.85; }

/* ===== MARQUEE ===== */
.ann-marquee-stage { position: relative; z-index: 1000; padding: 8px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.ann-marquee {
    background: var(--ann-bg);
    color: var(--ann-fg);
    border: 1px solid var(--ann-bd);
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 36px 0 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ann-marquee .ann-close {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.ann-marquee-track {
    display: inline-block;
    width: max-content;
    will-change: transform;
    transform: translateX(100vw); /* เริ่มนอกจอ — รอ JS animation ครอบ */
}
.ann-marquee-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    white-space: nowrap;
    font-size: 0.95rem;
}
.ann-marquee-icon { color: var(--ann-icon); font-size: 1.1rem; }
.ann-marquee.ann-sev-urgent { animation: ann-pulse 1.5s ease-in-out infinite; }
@keyframes ann-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244,67,54,0); }
    50%      { box-shadow: inset 0 -3px 0 0 rgba(255,255,255,0.3); }
}

/* ===== BANNER ===== */
.ann-banner-stage { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.ann-banner {
    background: var(--ann-bg);
    color: var(--ann-fg);
    border: 1px solid var(--ann-bd);
    border-left: 4px solid var(--ann-icon);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ann-banner-icon { color: var(--ann-icon); font-size: 1.3rem; flex-shrink: 0; }
.ann-banner-body { flex: 1; min-width: 0; }
.ann-banner-title { display: block; font-weight: 700; margin-bottom: 2px; }
.ann-banner-msg { font-size: 0.92rem; line-height: 1.4; }

/* ===== ALERT (modal) ===== */
.ann-alert-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 99998;
    animation: ann-fadein 0.15s ease;
}
.ann-alert-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #2d3436;
    width: min(560px, 92vw);
    max-height: 86vh;
    overflow: auto;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    z-index: 99999;
    animation: ann-pop 0.2s ease;
}
body.theme-dark .ann-alert-modal { background: var(--card-bg, #1e2530); color: var(--card-text, #ecf0f1); }
.ann-alert-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px;
    background: var(--ann-bg);
    color: var(--ann-fg);
    border-bottom: 1px solid var(--ann-bd);
}
.ann-alert-head .fi { font-size: 1.6rem; color: var(--ann-icon); }
.ann-alert-head h3 { margin: 0; font-size: 1.1rem; }
.ann-alert-body {
    padding: 20px 22px;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-line;
}
.ann-alert-actions {
    padding: 0 22px 20px;
    display: flex; justify-content: flex-end; gap: 10px;
}
@keyframes ann-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ann-pop {
    from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ===== TOAST ===== */
.ann-toast-stage {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 9000;
    max-width: 380px;
}
.ann-toast {
    background: var(--ann-bg);
    color: var(--ann-fg);
    border: 1px solid var(--ann-bd);
    border-left: 4px solid var(--ann-icon);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    animation: ann-slide-in 0.3s ease;
}
.ann-toast.fade-out { animation: ann-slide-out 0.3s ease forwards; }
.ann-toast-icon { color: var(--ann-icon); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.ann-toast-body { flex: 1; font-size: 0.9rem; line-height: 1.45; min-width: 0; }
.ann-toast-body strong { display: block; font-weight: 700; margin-bottom: 2px; }
@keyframes ann-slide-in {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes ann-slide-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

@media (max-width: 640px) {
    .ann-toast-stage { left: 12px; right: 12px; max-width: none; }
}

/* ====================================================================
   Admin: announcements.php page
   ==================================================================== */
.ann-admin-wrap { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }

/* ===== Announcement modal ===== */
.ann-modal {
    position: fixed; inset: 0;
    z-index: 9000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.ann-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 25, 50, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: ann-fadein 0.18s ease;
}
.ann-modal-card {
    position: relative;
    z-index: 1;
    width: min(820px, 100%);
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    animation: ann-pop-modal 0.22s ease;
    padding: 0;
    margin: 0 auto;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}
.ann-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.06));
    position: sticky; top: 0;
    background: var(--card-bg, #fff);
    border-radius: 16px 16px 0 0;
    z-index: 2;
}
.ann-modal-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.ann-modal-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: var(--card-text-muted, #95a5a6);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: background 0.15s, color 0.15s;
}
.ann-modal-close:hover { background: var(--card-bg-soft, #f1f3f5); color: var(--card-text, #2d3436); }
.ann-modal-card form { padding: 20px 22px; overflow-y: auto; }
.ann-modal-card .ann-form-card-h2 { display: none; }
/* override ann-form-card styling — modal version */
.ann-modal .ann-form-card {
    background: var(--card-bg, #fff);
    border: 0;
    padding: 0;
}
.ann-modal .ann-form-card > h2 { display: none; }

@keyframes ann-pop-modal {
    from { transform: translateY(-12px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===== Tom-select tweaks inside ann modal ===== */
.ann-modal .ts-wrapper {
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 8px;
}
.ann-modal .ts-wrapper.single .ts-control,
.ann-modal .ts-wrapper.multi .ts-control {
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    border-radius: 8px;
    padding: 9px 12px;
    min-height: auto;
    box-shadow: none;
}
.ann-modal .ts-wrapper.single .ts-control:focus-within {
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 3px rgba(9,132,227,0.15);
}
/* hide ts-wrapper that double-renders next to native select */
.ann-modal .ts-wrapper + select.ts-hidden-accessible { display: none !important; }

/* ===== Flatpickr theming ===== */
.flatpickr-calendar {
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
    border-radius: 10px !important;
    border: 1px solid var(--card-border, rgba(0,0,0,0.08)) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--accent, #0984e3) !important;
    border-color: var(--accent, #0984e3) !important;
}
.numInputWrapper:hover { background: var(--card-bg-soft, #f5f7fa); }
.cur-year { font-weight: 700; }
body.theme-dark .flatpickr-calendar {
    background: var(--card-bg, #1e2530) !important;
    color: var(--card-text, #ecf0f1);
    border-color: rgba(255,255,255,0.1) !important;
}
body.theme-dark .flatpickr-day { color: #ecf0f1; }
body.theme-dark .flatpickr-day.flatpickr-disabled { color: rgba(255,255,255,0.2); }
body.theme-dark .flatpickr-current-month .cur-year,
body.theme-dark .flatpickr-current-month .cur-month,
body.theme-dark .flatpickr-monthDropdown-months,
body.theme-dark .flatpickr-time input,
body.theme-dark .flatpickr-time .flatpickr-time-separator,
body.theme-dark .flatpickr-time .flatpickr-am-pm { color: #ecf0f1 !important; }
body.theme-dark .flatpickr-monthDropdown-months { background: var(--card-bg, #1e2530); }
body.theme-dark .flatpickr-weekday { color: #bdc3c7 !important; }
body.theme-dark .flatpickr-time { border-top: 1px solid rgba(255,255,255,0.1) !important; }
.ann-form-card,
.ann-list-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 14px;
    padding: 20px 22px;
}
.ann-form-card h2,
.ann-list-card h2 { margin: 0 0 16px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.ann-list-card h2 small { font-weight: 400; color: var(--card-text-muted, #95a5a6); margin-left: 4px; }
.ann-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ann-form-row label { font-size: 0.85rem; color: var(--card-text-muted, #636e72); font-weight: 600; }
.ann-form-row input[type="text"],
.ann-form-row input[type="url"],
.ann-form-row input[type="email"],
.ann-form-row input[type="password"],
.ann-form-row input[type="number"],
.ann-form-row input[type="datetime-local"],
.ann-form-row input[type="date"],
.ann-form-row select,
.ann-form-row textarea {
    background: var(--card-bg, #fff);
    color: var(--card-text, #2d3436);
    border: 1.5px solid var(--card-border, rgba(0,0,0,0.10));
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    width: 100%;
    box-sizing: border-box;
}
body.theme-dark .ann-form-row input[type="text"],
body.theme-dark .ann-form-row input[type="url"],
body.theme-dark .ann-form-row input[type="email"],
body.theme-dark .ann-form-row input[type="password"],
body.theme-dark .ann-form-row input[type="number"],
body.theme-dark .ann-form-row input[type="datetime-local"],
body.theme-dark .ann-form-row input[type="date"],
body.theme-dark .ann-form-row select,
body.theme-dark .ann-form-row textarea {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}
.ann-form-row input:focus,
.ann-form-row select:focus,
.ann-form-row textarea:focus {
    outline: none;
    border-color: var(--accent, #0984e3);
    box-shadow: 0 0 0 3px rgba(9,132,227,0.15);
    background: var(--card-bg, #fff);
}
body.theme-dark .ann-form-row input:focus,
body.theme-dark .ann-form-row select:focus,
body.theme-dark .ann-form-row textarea:focus {
    background: rgba(255,255,255,0.07);
}
.ann-form-row textarea { resize: vertical; min-height: 70px; }
.ann-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.ann-form-grid .ann-form-row { margin-bottom: 0; }
.ann-form-toggles { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 16px; }
.ann-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.92rem; }
.ann-check input { width: 18px; height: 18px; accent-color: var(--accent, #0984e3); }
.ann-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
/* ปุ่ม Cancel + Save ใน modal — ขนาดเท่ากัน (มี min-width + height + padding ตรงกัน) */
.ann-form-actions > .btn-primary,
.ann-form-actions > .btn-secondary {
    min-width: 130px;
    height: 42px;
    padding: 0 22px !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 700;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    box-sizing: border-box;
    border-width: 1.5px;
    border-style: solid;
}
.ann-form-actions > .btn-secondary {
    background: transparent;
    color: var(--card-text-muted, #636e72);
    border-color: var(--card-border, rgba(0,0,0,0.12));
}
.ann-form-actions > .btn-secondary:hover {
    background: var(--card-bg-soft, #f5f7fa);
    color: var(--card-text);
    border-color: var(--card-text-muted, #95a5a6);
}
.ann-form-actions > .btn-primary {
    border-color: transparent;
}
body.theme-dark .ann-form-actions { border-top-color: rgba(255,255,255,0.08); }
body.theme-dark .ann-form-actions > .btn-secondary { border-color: rgba(255,255,255,0.15); }
body.theme-dark .ann-form-actions > .btn-secondary:hover { background: rgba(255,255,255,0.06); }
.ann-form-msg { margin-top: 10px; font-size: 0.9rem; min-height: 1.2em; padding: 0; border-radius: 6px; transition: padding 0.15s; }
.ann-form-msg.ok  {
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    padding: 10px 14px;
}
.ann-form-msg.err {
    color: #c62828;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    padding: 10px 14px;
}

.ann-empty-sub { font-size: 0.82rem; opacity: 0.7; margin: 0 0 14px !important; }
.ann-empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; }

/* ann-list head with + button */
.ann-list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ann-list-head h2 { margin: 0; }
.ann-list-new-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; white-space: nowrap; }

/* User form sections (uf-) */
.uf-section {
    margin-bottom: 18px;
    padding: 14px 16px 4px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.04));
}
.uf-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.uf-section-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--card-text, #2d3436);
}
.uf-section-head > .fi:first-child {
    color: var(--accent, #0984e3);
    font-size: 1rem;
}
.uf-hint {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--card-text-muted, #95a5a6);
    padding: 2px 8px;
    background: rgba(0,0,0,0.04);
    border-radius: 999px;
}
.uf-section .ann-form-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.uf-section .ann-form-row label .fi {
    color: var(--accent, #0984e3);
    font-size: 0.85rem;
}
body.theme-dark .uf-section { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
body.theme-dark .uf-section-head { border-bottom-color: rgba(255,255,255,0.08); }
body.theme-dark .uf-hint { background: rgba(255,255,255,0.08); color: #bdc3c7; }

.ann-empty { text-align: center; padding: 40px 20px; color: var(--card-text-muted, #95a5a6); font-size: 0.95rem; }
.ann-empty .fi { font-size: 2rem; display: block; margin-bottom: 8px; }
.ann-list { display: flex; flex-direction: column; gap: 12px; }
.ann-row {
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
    border-left: 4px solid var(--ann-icon, #95a5a6);
    border-radius: 10px;
    padding: 14px 16px;
}
.ann-row-info    { --ann-icon: #1976d2; }
.ann-row-success { --ann-icon: #2e7d32; }
.ann-row-warning { --ann-icon: #ef6c00; }
.ann-row-danger  { --ann-icon: #c62828; }
.ann-row-urgent  { --ann-icon: #b71c1c; }
.ann-row-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ann-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; padding: 3px 8px;
    border-radius: 999px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    color: var(--card-text-muted, #636e72);
}
.ann-pill-sev-info    { background: #e8f4fd; color: #1565c0; border-color: #90caf9; }
.ann-pill-sev-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.ann-pill-sev-warning { background: #fff8e1; color: #ef6c00; border-color: #ffcc80; }
.ann-pill-sev-danger  { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.ann-pill-sev-urgent  { background: #c62828; color: #fff;    border-color: #b71c1c; }
.ann-pill-off { background: #eceff1; color: #607d8b; }
.ann-row-title { margin: 0 0 4px; font-size: 1rem; }
.ann-row-body  { margin: 0 0 8px; font-size: 0.92rem; color: var(--card-text, #2d3436); }
.ann-row-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 0.78rem; color: var(--card-text-muted, #95a5a6);
    margin-bottom: 10px;
}
.ann-row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ann-row-actions { display: flex; gap: 8px; }
.ann-btn-edit, .ann-btn-del {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    color: var(--card-text, #2d3436);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, border-color 0.15s;
}
.ann-btn-edit:hover { border-color: var(--accent, #0984e3); color: var(--accent, #0984e3); }
.ann-btn-del:hover  { background: #ffebee; border-color: #ef9a9a; color: #c62828; }

/* ===== Announcement management widget (anw) ===== */
.anw { display: flex; flex-direction: column; gap: 10px; }
/* leave room for .widget-fs-btn at top:10px,right:10px (≈ 40px) */
.anw .incident-widget-head { padding-right: 44px; }
.anw-head-actions { display: flex; gap: 6px; align-items: center; }
.anw-empty {
    text-align: center;
    padding: 30px 12px;
    color: var(--card-text-muted, #95a5a6);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.anw-empty .fi { font-size: 1.8rem; }
.anw-empty p { margin: 0; font-size: 0.92rem; }
.anw-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.anw-item {
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
    border-left: 4px solid var(--ann-icon, #95a5a6);
    border-radius: 8px;
    padding: 10px 12px;
}
.anw-sev-info    { --ann-icon: #1976d2; }
.anw-sev-success { --ann-icon: #2e7d32; }
.anw-sev-warning { --ann-icon: #ef6c00; }
.anw-sev-danger  { --ann-icon: #c62828; }
.anw-sev-urgent  { --ann-icon: #b71c1c; }
.anw-row1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.anw-row1-right { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.anw-edit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    color: var(--card-text-muted, #636e72);
    text-decoration: none;
    transition: all 0.15s;
}
.anw-edit-btn:hover {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9;
}
body.theme-dark .anw-edit-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #bdc3c7; }
body.theme-dark .anw-edit-btn:hover { background: rgba(33,150,243,0.2); color: #82b1ff; border-color: rgba(33,150,243,0.5); }
.anw-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    color: var(--card-text-muted, #636e72);
}
.anw-pill-sev-info    { background: #e8f4fd; color: #1565c0; border-color: #90caf9; }
.anw-pill-sev-success { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.anw-pill-sev-warning { background: #fff8e1; color: #ef6c00; border-color: #ffcc80; }
.anw-pill-sev-danger  { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.anw-pill-sev-urgent  { background: #c62828; color: #fff; border-color: #b71c1c; }
.anw-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; color: var(--card-text, #2d3436); }
.anw-body  { font-size: 0.82rem; color: var(--card-text-muted, #636e72); line-height: 1.4; }
/* tiny toggle switch */
.anw-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
.anw-toggle-input { opacity: 0; width: 0; height: 0; position: absolute; }
.anw-toggle-slider {
    position: absolute; inset: 0;
    background: #ccc; border-radius: 999px;
    transition: background 0.2s;
}
.anw-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.anw-toggle-input:checked + .anw-toggle-slider { background: var(--accent, #0984e3); }
.anw-toggle-input:checked + .anw-toggle-slider::before { transform: translateX(16px); }
.anw-toggle-input:disabled + .anw-toggle-slider { opacity: 0.6; cursor: wait; }

/* ======================================================================
   Update fieldset v2 — hero + version timeline + collapsible tools
   ====================================================================== */
.upd-fieldset { display: flex; flex-direction: column; gap: 16px; }

/* ----- Hero ----- */
.upd-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--card-bg-soft, #f5f7fa);
}
.upd-hero-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.upd-hero-body { flex: 1; min-width: 0; }
.upd-hero-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--card-text, #2d3436);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    line-height: 1.3;
}
.upd-hero-title strong {
    font-size: 1.15rem;
    color: var(--accent, #0984e3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
.upd-hero-sub {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--card-text-muted, #95a5a6);
    line-height: 1.45;
}
.upd-hero-actions { flex-shrink: 0; }
.upd-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px !important;
    font-size: 0.92rem !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Hero variants */
.upd-hero-ok {
    background: linear-gradient(135deg, rgba(46,204,113,0.07), rgba(46,204,113,0.02));
    border-color: rgba(46,204,113,0.25);
}
.upd-hero-ok .upd-hero-icon {
    background: rgba(46,204,113,0.18); color: #27ae60;
}
.upd-hero-newer {
    background: linear-gradient(135deg, rgba(9,132,227,0.10), rgba(155,89,182,0.06));
    border-color: rgba(9,132,227,0.30);
    position: relative; overflow: hidden;
}
.upd-hero-newer::before {
    content: ''; position: absolute; inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent, #0984e3), #8e44ad);
}
.upd-hero-newer .upd-hero-icon {
    background: rgba(9,132,227,0.18); color: var(--accent, #0984e3);
}
.upd-hero-warn {
    background: linear-gradient(135deg, rgba(243,156,18,0.10), rgba(243,156,18,0.02));
    border-color: rgba(243,156,18,0.30);
}
.upd-hero-warn .upd-hero-icon {
    background: rgba(243,156,18,0.20); color: #d35400;
}
body.theme-dark .upd-hero-ok    { background: linear-gradient(135deg, rgba(46,204,113,0.16), rgba(46,204,113,0.05)); }
body.theme-dark .upd-hero-newer { background: linear-gradient(135deg, rgba(9,132,227,0.18), rgba(155,89,182,0.10)); }
body.theme-dark .upd-hero-warn  { background: linear-gradient(135deg, rgba(243,156,18,0.18), rgba(243,156,18,0.05)); }
body.theme-dark .upd-hero-title { color: #ecf0f1; }

/* Pending migrations sub-details under hero */
.upd-migs {
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 10px;
    padding: 0;
    border: 1px dashed var(--card-border, rgba(0,0,0,0.10));
}
.upd-migs > summary {
    cursor: pointer; padding: 10px 14px;
    font-size: 0.88rem;
    display: flex; align-items: center; gap: 8px;
    list-style: none;
    color: var(--card-text-muted);
}
.upd-migs > summary::-webkit-details-marker { display: none; }
.upd-migs[open] > summary { border-bottom: 1px dashed var(--card-border, rgba(0,0,0,0.10)); }
.upd-migs-list {
    margin: 0; padding: 10px 14px 12px 36px;
    font-size: 0.86rem; line-height: 1.7;
}
.upd-mig-ver {
    display: inline-block; padding: 1px 7px;
    border-radius: 4px;
    background: rgba(9,132,227,0.12);
    color: var(--accent, #0984e3);
    font-weight: 700; font-size: 0.78rem;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
}

/* ----- Version timeline ----- */
.upd-timeline {
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg, #fff);
}
.upd-timeline-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    background: var(--card-bg-soft, #f5f7fa);
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.08));
    font-size: 0.88rem;
}
.upd-timeline-head .fi { color: var(--accent, #0984e3); margin-right: 6px; }
.upd-timeline-head small { color: var(--card-text-muted); }

.upd-versions {
    list-style: none; margin: 0; padding: 0;
    position: relative;
}
/* the vertical timeline line */
.upd-versions::before {
    content: ''; position: absolute;
    left: 32px; top: 18px; bottom: 18px;
    width: 2px;
    background: linear-gradient(180deg, rgba(9,132,227,0.30), rgba(9,132,227,0.05));
    z-index: 0;
}

.upd-ver {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.05));
}
.upd-ver:last-child { border-bottom: none; }

.upd-ver-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--card-bg, #fff);
    border: 2px solid rgba(149,165,166,0.40);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    color: var(--card-text-muted);
    flex-shrink: 0;
    position: relative; z-index: 1;
    margin-left: 0;
}
.upd-ver-newer .upd-ver-dot   { border-color: var(--accent, #0984e3); color: var(--accent, #0984e3); background: rgba(9,132,227,0.08); }
.upd-ver-current .upd-ver-dot { border-color: #27ae60; color: #27ae60; background: rgba(46,204,113,0.10); box-shadow: 0 0 0 4px rgba(46,204,113,0.12); }
.upd-ver-older .upd-ver-dot   { border-color: rgba(149,165,166,0.50); color: rgba(149,165,166,0.85); }

.upd-ver-body { min-width: 0; flex: 1; }
.upd-ver-head {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px;
    line-height: 1.4;
}
.upd-ver-num {
    font-size: 1.02rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    color: var(--card-text, #2d3436);
}
.upd-ver-newer   .upd-ver-num { color: var(--accent, #0984e3); }
.upd-ver-current .upd-ver-num { color: #27ae60; }
.upd-ver-older   .upd-ver-num { color: var(--card-text-muted); }

.upd-ver-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.upd-ver-tag-newer   { background: rgba(9,132,227,0.16);  color: var(--accent, #0984e3); }
.upd-ver-tag-current { background: rgba(46,204,113,0.18); color: #27ae60; }
.upd-ver-tag-older   { background: rgba(149,165,166,0.20);color: #7f8c8d; }

.upd-ver-mode {
    font-size: 0.7rem; padding: 2px 8px; border-radius: 4px;
    text-transform: uppercase; font-weight: 700;
    letter-spacing: 0.3px;
}
.upd-ver-mode-full  { background: rgba(46,204,113,0.18); color: #229954; }
.upd-ver-mode-delta { background: rgba(241,196,15,0.22); color: #b7950b; }

.upd-ver-date, .upd-ver-size, .upd-ver-schema {
    font-size: 0.78rem;
    color: var(--card-text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}
.upd-ver-date .fi { font-size: 0.7rem; }

.upd-ver-notes-short {
    margin-top: 6px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--card-text-muted);
}
.upd-ver-notes {
    margin-top: 6px;
}
.upd-ver-notes > summary {
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--card-text-muted);
    list-style: none;
}
.upd-ver-notes > summary::-webkit-details-marker { display: none; }
.upd-ver-notes > summary::after {
    content: ' ดูเพิ่ม';
    color: var(--accent, #0984e3);
    font-weight: 600;
    font-size: 0.78rem;
}
.upd-ver-notes[open] > summary::after { content: ' ย่อ'; }
.upd-ver-notes pre {
    margin: 6px 0 0;
    padding: 10px 12px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--card-text);
}

.upd-ver-action { flex-shrink: 0; align-self: center; }
.upd-ver-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px !important;
    font-size: 0.84rem !important;
    margin: 0 !important;
    white-space: nowrap;
}
.upd-ver-btn-down {
    background: rgba(243,156,18,0.10) !important;
    color: #b7720d !important;
    border: 1px solid rgba(243,156,18,0.35) !important;
}
.upd-ver-btn-down:hover {
    background: rgba(243,156,18,0.18) !important;
}
.upd-ver-installed-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(46,204,113,0.14);
    color: #229954;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Dim older versions a bit */
.upd-ver-older { opacity: 0.85; }
.upd-ver-older .upd-ver-head { color: var(--card-text-muted); }

/* highlight current row */
.upd-ver-current {
    background: linear-gradient(90deg, rgba(46,204,113,0.06), transparent 60%);
}
body.theme-dark .upd-ver-current {
    background: linear-gradient(90deg, rgba(46,204,113,0.10), transparent 60%);
}

/* ----- Action row — buttons to open Tools modal + Release Build modal ----- */
.upd-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.upd-action-btn {
    flex: 1 1 auto;
    min-width: 200px;
    display: inline-flex; align-items: center; justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--card-text);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.upd-action-btn:hover {
    border-color: var(--accent, #0984e3);
    background: var(--card-bg, #fff);
    transform: translateY(-1px);
}
.upd-action-btn > .fi {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.upd-action-btn > span { flex: 1; min-width: 0; text-align: left; }
body.theme-dark .upd-action-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}
body.theme-dark .upd-action-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--accent, #74b9ff);
}

/* ----- Tools modal (เปิดจากปุ่ม "ตั้งค่าและเครื่องมือ") ----- */
.upd-tools-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: rb-fade 0.18s ease-out;
}
.upd-tools-modal {
    background: var(--card-bg, #fff);
    color: var(--card-text);
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: rb-slide 0.22s cubic-bezier(0.25, 1.1, 0.4, 1);
}
.upd-tools-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px;
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: #fff;
    flex-shrink: 0;
}
.upd-tools-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    display: flex; align-items: center; gap: 8px;
}
.upd-tools-modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.upd-tools-modal-close:hover { background: rgba(255,255,255,0.35); }
.upd-tools-modal .upd-tools-body {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex; flex-direction: column;
}

/* ----- Tools (collapsible) — legacy, kept for backwards compat ----- */
.upd-tools {
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 12px;
    background: var(--card-bg, #fff);
}
.upd-tools > summary {
    cursor: pointer;
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--card-text);
    list-style: none;
    user-select: none;
}
.upd-tools > summary::-webkit-details-marker { display: none; }
.upd-tools > summary::before {
    content: '▸';
    color: var(--card-text-muted);
    margin-right: 8px;
    transition: transform 0.18s ease;
    font-size: 0.85rem;
}
.upd-tools[open] > summary::before { transform: rotate(90deg); }
.upd-tools[open] > summary {
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.08));
}
.upd-tools-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
}
.upd-tools-pill-warn {
    background: rgba(243,156,18,0.18); color: #b7720d;
    border: 1px solid rgba(243,156,18,0.35);
}
.upd-tools-body {
    padding: 16px;
    display: flex; flex-direction: column; gap: 0;
}
.upd-tool-row {
    display: flex; flex-direction: column; gap: 6px;
}
.upd-tool-label {
    font-size: 0.85rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--card-text);
}
.upd-tool-label .fi { color: var(--accent, #0984e3); }
.upd-tool-input-row {
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap;
}
.upd-tool-input {
    flex: 1; min-width: 200px;
    padding: 9px 12px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--card-bg, #fff);
    color: var(--card-text);
}
.upd-tool-input:focus {
    border-color: var(--accent, #0984e3);
    outline: none;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.12);
}
.upd-tool-btn-sm {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.upd-tool-btns {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.upd-tool-check {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.84rem;
    color: var(--card-text-muted);
    cursor: pointer;
}
.upd-tool-hint {
    font-size: 0.78rem;
    color: var(--card-text-muted);
    line-height: 1.5;
}
.upd-tool-hint code {
    padding: 1px 5px;
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
    font-size: 0.78rem;
}
body.theme-dark .upd-tool-hint code { background: rgba(255,255,255,0.08); }
.upd-tool-sep {
    border: none;
    border-top: 1px dashed var(--card-border, rgba(0,0,0,0.10));
    margin: 14px 0;
}

/* Mobile */
@media (max-width: 700px) {
    .upd-hero {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .upd-hero-actions { width: 100%; }
    .upd-hero-btn { width: 100%; justify-content: center; }
    .upd-ver {
        grid-template-columns: 36px 1fr;
        grid-template-areas: "dot body" "action action";
        gap: 10px;
    }
    .upd-ver-dot   { grid-area: dot; width: 28px; height: 28px; font-size: 0.75rem; }
    .upd-ver-body  { grid-area: body; }
    .upd-ver-action {
        grid-area: action;
        margin-top: 4px;
    }
    .upd-ver-btn, .upd-ver-installed-pill { width: 100%; justify-content: center; }
    .upd-versions::before { left: 26px; }
    .upd-tool-input-row { flex-direction: column; align-items: stretch; }
    .upd-tool-btn-sm { width: 100%; justify-content: center; }
}

/* ======================================================================
   Weather widgets v2 — current location, clock, forecast 7d
   Same design language as Sun/Moon: full-bleed gradient + frosted glass
   ====================================================================== */

/* ----- Current location v2 ----- */
.widget:has(> .current-location-card.cl-v2) {
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}
.widget.tab-current:has(> .current-location-card.cl-v2) { display: flex; }
.current-location-card.cl-v2 {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
    padding: 18px 20px 20px;
    margin: 0;
    box-shadow: none;
    color: #fff;
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cl-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: background 1.2s ease;
    background: linear-gradient(170deg, #4fa8d8 0%, #87ceeb 50%, #b5dff3 100%);
}
/* Weather phase variants */
.current-location-card.cl-v2[data-phase="sunny"]   .cl-bg { background: linear-gradient(170deg, #fcd170 0%, #fda85b 50%, #f97316 100%); }
.current-location-card.cl-v2[data-phase="cloudy"]  .cl-bg { background: linear-gradient(170deg, #94a3b8 0%, #cbd5e1 55%, #e2e8f0 100%); }
.current-location-card.cl-v2[data-phase="rain"]    .cl-bg { background: linear-gradient(170deg, #475569 0%, #64748b 50%, #94a3b8 100%); }
.current-location-card.cl-v2[data-phase="storm"]   .cl-bg { background: linear-gradient(170deg, #1e293b 0%, #334155 50%, #475569 100%); }
.current-location-card.cl-v2[data-phase="night"]   .cl-bg { background: linear-gradient(170deg, #0c1445 0%, #1a1b4b 45%, #3e3a5f 100%); }
.current-location-card.cl-v2[data-phase="snow"]    .cl-bg { background: linear-gradient(170deg, #cfe0f5 0%, #e2eaf5 50%, #f8fafc 100%); color: #1f2937; }

/* พื้นสว่าง (cloudy/snow/sunny) — ใช้ตัวอักษรเข้มเพื่อ readability */
.current-location-card.cl-v2[data-phase="snow"],
.current-location-card.cl-v2[data-phase="cloudy"],
.current-location-card.cl-v2[data-phase="sunny"] { color: #1f2937; }
.current-location-card.cl-v2[data-phase="snow"]   .cl-icon,
.current-location-card.cl-v2[data-phase="cloudy"] .cl-icon,
.current-location-card.cl-v2[data-phase="sunny"]  .cl-icon { background: rgba(0,0,0,0.10); }
.current-location-card.cl-v2[data-phase="snow"]   .cl-details > div,
.current-location-card.cl-v2[data-phase="cloudy"] .cl-details > div,
.current-location-card.cl-v2[data-phase="sunny"]  .cl-details > div { background: rgba(0,0,0,0.08); }
.current-location-card.cl-v2[data-phase="snow"]   .cl-details span,
.current-location-card.cl-v2[data-phase="cloudy"] .cl-details span,
.current-location-card.cl-v2[data-phase="sunny"]  .cl-details span { opacity: 0.72; }

.cl-v2 .cl-head {
    align-items: flex-start;
    flex-wrap: nowrap;
}
.cl-v2 .cl-info h2 {
    font-size: 1.02rem;
    font-weight: 800;
    color: inherit;
    margin: 0 0 4px;
    display: inline-flex; align-items: center; gap: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.cl-v2 .cl-info h2 .fi { color: inherit; opacity: 0.95; }
.cl-v2 .cl-sub {
    font-size: 0.82rem;
    color: inherit;
    opacity: 0.85;
    margin: 0;
}
.cl-v2 .cl-main {
    align-items: center;
    gap: 14px;
}
.cl-v2 .cl-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.cl-v2 .cl-icon .meteo-icon,
.cl-v2 .cl-icon .meteo-icon > svg,
.cl-v2 .cl-icon .meteo-icon > img {
    width: 44px; height: 44px;
}
.cl-v2 .cl-main-text { text-align: right; }
.cl-v2 .cl-temp {
    font-size: 2rem;
    font-weight: 800;
    color: inherit;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.cl-v2 .cl-desc {
    color: inherit;
    opacity: 0.9;
    font-size: 0.88rem;
    margin-top: 4px;
}
.cl-v2 .cl-body {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.cl-v2 .cl-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.cl-v2 .cl-details > div {
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    padding: 10px 12px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cl-v2 .cl-details span {
    font-size: 0.7rem;
    color: inherit;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.cl-v2 .cl-details strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .cl-v2 .cl-head { flex-direction: column; align-items: stretch; }
    .cl-v2 .cl-main { justify-content: space-between; }
    .cl-v2 .cl-main-text { text-align: left; }
    .cl-v2 .cl-details > div { padding: 8px 10px; }
}

/* ----- Clock v2 ----- */
.widget:has(> .widget-clock.clock-v2) {
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}
.widget.tab-current:has(> .widget-clock.clock-v2) { display: flex; }
.widget-clock.clock-v2 {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
    padding: 20px;
    text-align: center;
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    color: #fff;
    min-height: 180px;
}
.clock-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    transition: background 1.6s ease;
}
.clock-bg-stars {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 22%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 22% 38%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 42% 14%, #fffbe0 50%, transparent 100%),
        radial-gradient(1px 1px at 64% 26%, #fff 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80% 18%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 32%, #fff 50%, transparent 100%);
    background-size: 100% 70%;
    background-repeat: no-repeat;
}
.widget-clock.clock-v2[data-phase="morning"] .clock-bg {
    background: linear-gradient(180deg, #fab062 0%, #f8c98f 40%, #fde2c0 100%);
}
.widget-clock.clock-v2[data-phase="day"] .clock-bg {
    background: linear-gradient(180deg, #4fa8d8 0%, #87ceeb 55%, #c2e3f3 100%);
}
.widget-clock.clock-v2[data-phase="evening"] .clock-bg {
    background: linear-gradient(180deg, #d97757 0%, #f29d76 50%, #f9c896 100%);
}
.widget-clock.clock-v2[data-phase="night"] .clock-bg {
    background: linear-gradient(180deg, #0c1445 0%, #1a1b4b 50%, #2d3561 100%);
}
.widget-clock.clock-v2[data-phase="night"] .clock-bg-stars { opacity: 0.85; }

/* พื้นสว่าง (morning/evening/day) — ใช้ตัวอักษรเข้มเพื่อ readability */
.widget-clock.clock-v2[data-phase="morning"] .clock-label-pill,
.widget-clock.clock-v2[data-phase="evening"] .clock-label-pill {
    color: #4a2410;
    background: rgba(255,255,255,0.55);
    text-shadow: none;
}
.widget-clock.clock-v2[data-phase="morning"] .clock-time,
.widget-clock.clock-v2[data-phase="evening"] .clock-time {
    color: #3b1808;
    text-shadow: 0 1px 2px rgba(255,255,255,0.25);
}
.widget-clock.clock-v2[data-phase="morning"] .clock-date,
.widget-clock.clock-v2[data-phase="evening"] .clock-date {
    color: #5a2818;
    opacity: 1;
}
.widget-clock.clock-v2[data-phase="day"] .clock-label-pill {
    color: #0a3454;
    background: rgba(255,255,255,0.55);
    text-shadow: none;
}
.widget-clock.clock-v2[data-phase="day"] .clock-time {
    color: #0a3454;
    text-shadow: 0 1px 2px rgba(255,255,255,0.25);
}
.widget-clock.clock-v2[data-phase="day"] .clock-date {
    color: #103e6a;
    opacity: 1;
}

.clock-head { margin-bottom: 4px; }
.clock-label-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
    font-size: 0.84rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.widget-clock.clock-v2 .clock-time {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -1.5px;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 2px;
    text-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.widget-clock.clock-v2 .clock-date {
    font-size: 0.95rem;
    color: #fff;
    opacity: 0.92;
    font-weight: 500;
}

@media (max-width: 700px) {
    .widget-clock.clock-v2 .clock-time { font-size: 2.4rem; }
}

/* ----- Forecast 7d v2 ----- */
.widget:has(> .f7-widget.f7-v2) {
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}
.widget.tab-current:has(> .f7-widget.f7-v2) { display: flex; }
.f7-widget.f7-v2 {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
    padding: 18px 20px 20px;
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #fff;
}
.f7-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(170deg, #4fa8d8 0%, #87ceeb 50%, #c2e3f3 100%);
}
.f7-v2 .f7-head h2 {
    margin: 0; font-size: 1.05rem; font-weight: 800;
    color: #fff;
    display: inline-flex; align-items: center; gap: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.f7-v2 .f7-loc {
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    padding: 3px 10px; border-radius: 12px;
    font-size: 0.74rem; font-weight: 600;
    color: #fff;
}
.f7-v2 .f7-list {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.f7-v2 .f7-card {
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 10px 6px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.18s ease, background 0.2s ease;
}
.f7-v2 .f7-card:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.30);
}
.f7-v2 .f7-card.f7-today {
    background: linear-gradient(160deg, rgba(255,255,255,0.45), rgba(255,255,255,0.28));
    border-color: rgba(255,255,255,0.40);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.f7-v2 .f7-day-name {
    font-weight: 800;
    font-size: 0.92rem;
    color: #fff;
    line-height: 1.2;
}
.f7-v2 .f7-date {
    font-size: 0.7rem;
    color: #fff;
    opacity: 0.85;
    margin-top: -2px;
}
.f7-v2 .f7-icon { display: flex; align-items: center; justify-content: center; margin: 2px 0; }
.f7-v2 .f7-icon-img,
.f7-v2 .f7-icon-img > img,
.f7-v2 .f7-icon-img > svg { width: 44px; height: 44px; }
.f7-v2 .f7-desc {
    font-size: 0.75rem;
    color: #fff;
    opacity: 0.92;
    min-height: 1.2em;
    line-height: 1.2;
}
.f7-v2 .f7-temps {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
.f7-v2 .f7-hi { color: #fff; }
.f7-v2 .f7-lo { color: rgba(255,255,255,0.78); }
.f7-v2 .f7-rain {
    font-size: 0.75rem;
    color: #fff;
    opacity: 0.85;
    display: inline-flex; align-items: center; gap: 3px;
}
.f7-v2 .f7-rain .fi { font-size: 0.75rem; }
.f7-v2 .f7-loading {
    text-align: center; padding: 20px;
    color: rgba(255,255,255,0.85);
}

@media (max-width: 900px) {
    .f7-v2 .f7-list { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .f7-v2 .f7-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .f7-v2 .f7-icon-img,
    .f7-v2 .f7-icon-img > img,
    .f7-v2 .f7-icon-img > svg { width: 36px; height: 36px; }
}

body.theme-dark .cl-bg,
body.theme-dark .clock-bg,
body.theme-dark .f7-bg { filter: saturate(1.15) brightness(0.95); }

/* ======================================================================
   Lite mode — ลดร้อนมือถือ + ประหยัดแบต
   เปิดผ่าน user toggle ใน user menu · ใส่ class .lite-mode ที่ body
   ปิด: theme blobs · backdrop-filter · infinite animations · filter blur
   ====================================================================== */

/* 1. Theme blobs — ปิด animation + ลด opacity (อย่าซ่อนไป เพราะเป็น decoration หลักของ theme) */
body.lite-mode.theme-aurora::before,
body.lite-mode.theme-aurora::after,
body.lite-mode.theme-nebula::before,
body.lite-mode.theme-nebula::after,
body.lite-mode.theme-eclipse::before,
body.lite-mode.theme-eclipse::after {
    animation: none !important;
    filter: blur(40px) !important;       /* blur 40px แทน 90px — เร็วกว่า */
    opacity: 0.5;
}

/* 2. ปิด backdrop-filter blur ทั้งหมด — แทนด้วย solid background ที่ทึบขึ้น */
body.lite-mode *,
body.lite-mode *::before,
body.lite-mode *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 3. ปิด infinite animations (LIVE dot pulse, theme blobs, etc.)
   เก็บ animation สำคัญไว้: clock tick (ไม่ใช่ CSS), tile spinner (ใช้ตอน loading เท่านั้น) */
body.lite-mode .news-live-dot,
body.lite-mode .tv-chip-live,
body.lite-mode .tv-tile-unmute,
body.lite-mode .water-pulse,
body.lite-mode .fire-pulse,
body.lite-mode .nav-locate-icon:has(.nav-locate-dot.locating),
body.lite-mode .ano-dot-on,
body.lite-mode .ai-spark,
body.lite-mode .rain-card.risk-severe,
body.lite-mode .water-user-marker {
    animation: none !important;
}

/* 4. ลด blur ใน filter (ไม่ใช่ backdrop) — ใช้บน parallax + theme blobs */
body.lite-mode .parallax-blob1,
body.lite-mode .parallax-blob2,
body.lite-mode .auth-bg-blob3,
body.lite-mode .auth-wrap::before,
body.lite-mode .auth-wrap::after {
    filter: blur(40px) !important;
    animation: none !important;
}

/* 5. v2 widgets — แทน frosted glass effects ด้วย solid + border (ไม่ใช้ backdrop-filter)
   chips ภายใน widget ที่เคยใช้ rgba(255,255,255,0.20) + blur → solid darker bg */
body.lite-mode .cl-v2 .cl-details > div,
body.lite-mode .cl-v2 .cl-icon,
body.lite-mode .uv-widget.v2 .uv-safe-pill,
body.lite-mode .aq-loc,
body.lite-mode .td-head small,
body.lite-mode .lt-head small,
body.lite-mode .aq-label-pill,
body.lite-mode .aq-stat,
body.lite-mode .uv-num-card,
body.lite-mode .lt-stat,
body.lite-mode .lt-cape-card,
body.lite-mode .lt-trend-card,
body.lite-mode .td-current-card,
body.lite-mode .td-row,
body.lite-mode .f7-v2 .f7-card,
body.lite-mode .f7-v2 .f7-loc,
body.lite-mode .clock-label-pill,
body.lite-mode .sun-phase-label,
body.lite-mode .sun-moon-info,
body.lite-mode .sun-daylen-chip,
body.lite-mode .sun-v2-row .sun-emoji {
    background: rgba(255,255,255,0.30) !important;
    /* backdrop-filter ปิดไปแล้วใน *=== rule ด้านบน */
}

/* ======================================================================
   User menu v2 — slim avatar trigger + inline location toggle
   ====================================================================== */
.user-menu-trigger-v2 {
    padding: 4px 8px 4px 4px !important;
    gap: 4px !important;
}
.user-menu-trigger-v2 .user-avatar-lg {
    width: 38px; height: 38px;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.user-menu-trigger-v2 .user-menu-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85);
    font-size: 0.8rem;
    transition: transform 0.18s ease;
}
.user-menu.open .user-menu-trigger-v2 .user-menu-chevron { transform: rotate(180deg); color: var(--card-text); }

/* Compact icon button for nav-locate */
.nav-locate-icon {
    position: relative;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.nav-locate-icon:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.05);
}
.nav-locate-icon:disabled {
    opacity: 0.65;
    cursor: wait;
}
/* dot ถูกซ่อนแล้ว — แสดงสถานะผ่านสีของทั้งปุ่ม (ผ่าน :has()) แทน */
.nav-locate-dot { display: none; }

/* สถานะ — สีพื้นปุ่มทั้งใบ */
.nav-locate-icon:has(.nav-locate-dot.on) {
    background: #27ae60;
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(39,174,96,0.4);
}
.nav-locate-icon:has(.nav-locate-dot.on):hover {
    background: #2ecc71;
    border-color: rgba(255,255,255,0.7);
}
.nav-locate-icon:has(.nav-locate-dot.err) {
    background: #e74c3c;
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(231,76,60,0.4);
}
.nav-locate-icon:has(.nav-locate-dot.err):hover {
    background: #ff6555;
    border-color: rgba(255,255,255,0.7);
}
.nav-locate-icon:has(.nav-locate-dot.locating) {
    background: #f39c12;
    border-color: rgba(255,255,255,0.5);
    animation: nav-locate-btn-pulse 1.2s ease-in-out infinite;
}
@keyframes nav-locate-btn-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(243,156,18,0.55); }
    50%     { box-shadow: 0 0 0 6px rgba(243,156,18,0); }
}
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----- Auto-locate toggle row inside mega menu ----- */
.ummenu-loc-row.ummenu-auto-toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin: 14px 18px 6px;
    background: var(--card-bg-soft, #f5f7fa);
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ummenu-loc-row.ummenu-auto-toggle:hover { border-color: var(--accent); }
.ummenu-auto-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--card-text);
    flex: 1; min-width: 0;
}
body.theme-dark .ummenu-loc-row.ummenu-auto-toggle {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

@media (max-width: 480px) {
    .ummenu-loc-row.ummenu-auto-toggle { padding: 10px 14px; margin: 10px 12px 4px; }
}

/* ======================================================================
   Release builder — trigger card + modal
   ====================================================================== */
.rb-trigger-fieldset { padding-bottom: 12px; }
.rb-trigger-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--card-bg-soft, #f5f7fa);
    border-radius: 12px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.06));
}
.rb-trigger-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.rb-trigger-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.rb-trigger-text strong {
    display: block;
    font-size: 0.96rem; font-weight: 700;
    color: var(--card-text);
    line-height: 1.3;
}
.rb-trigger-text small {
    display: block;
    font-size: 0.8rem;
    color: var(--card-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}
.rb-open-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
}

/* Modal */
.rb-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: rb-fade 0.18s ease-out;
}
@keyframes rb-fade { from { opacity: 0; } to { opacity: 1; } }
.rb-modal {
    background: var(--card-bg, #fff);
    color: var(--card-text);
    border-radius: 14px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: rb-slide 0.22s cubic-bezier(0.25, 1.1, 0.4, 1);
}
@keyframes rb-slide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rb-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
    color: #fff;
    flex-shrink: 0;
}
.rb-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    display: flex; align-items: center; gap: 8px;
}
.rb-modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.rb-modal-close:hover { background: rgba(255,255,255,0.35); }
.rb-modal-body {
    padding: 20px 22px 22px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 16px;
}
.rb-modal-body > .release-summary { margin-top: 4px; }

@media (max-width: 700px) {
    .rb-trigger-card { flex-direction: column; align-items: stretch; }
    .rb-open-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Admin Areas (Phase 2) — settings tab UI
   ============================================================ */
.aa-stats {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 0.85rem;
}
.aa-stat {
    padding: 6px 12px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    color: #2d3436;
}
.aa-stat b { color: #0984e3; font-size: 1rem; margin-right: 4px; }
.aa-stat-muted { color: #636e72; background: rgba(0,0,0,0.03); }

.aa-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 18px;
}
.aa-empty {
    display: flex; align-items: center; gap: 14px;
    padding: 20px;
    background: rgba(0,0,0,0.03);
    border: 1.5px dashed rgba(0,0,0,0.12);
    border-radius: 12px;
    color: #636e72;
    font-size: 0.9rem;
}
.aa-empty .fi { font-size: 1.8rem; opacity: 0.5; flex-shrink: 0; }
.aa-empty small { color: #95a5a6; font-size: 0.78rem; }

.aa-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    transition: border-color 0.15s, transform 0.15s;
}
.aa-item:hover { border-color: rgba(9,132,227,0.4); }
.aa-item-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.aa-item-text { font-weight: 500; color: #2d3436; }
.aa-item-code {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: #95a5a6;
    background: rgba(0,0,0,0.04);
    padding: 2px 7px;
    border-radius: 4px;
}
.aa-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.aa-badge-tambon   { background: #00b894; }
.aa-badge-amphoe   { background: #0984e3; }
.aa-badge-province { background: #6c5ce7; }

.aa-remove-btn {
    background: rgba(231,76,60,0.1);
    border: none;
    color: #e74c3c;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.aa-remove-btn:hover { background: rgba(231,76,60,0.2); }

.aa-add-form {
    background: rgba(9,132,227,0.04);
    border: 1.5px solid rgba(9,132,227,0.15);
    border-radius: 12px;
    padding: 16px 18px;
}
.aa-add-form h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: #0984e3;
}

.aa-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.aa-row label {
    min-width: 80px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3436;
}
.aa-row select, .aa-row input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    background: #fff;
    color: #2d3436;
}
.aa-row select:focus, .aa-row input:focus {
    outline: none;
    border-color: #0984e3;
    box-shadow: 0 0 0 3px rgba(9,132,227,0.15);
}
.aa-row select:disabled {
    background: rgba(0,0,0,0.04);
    color: #95a5a6;
    cursor: not-allowed;
}
/* TomSelect ครอบ <select> → wrapper ต้อง inherit flex:1 ให้กว้างเต็มพื้นที่ */
.aa-row .ts-wrapper {
    flex: 1;
    min-width: 0;
}
.aa-row .ts-wrapper .ts-control {
    width: 100%;
    min-height: 38px !important;
}
/* dropdown panel ต้องกว้างพอแสดงชื่อจังหวัด/อำเภอ/ตำบล (ไม่ต้องผูกกับ control width) */
.aa-row .ts-dropdown {
    min-width: 260px;
    max-width: 360px;
}
.aa-row-actions {
    margin-top: 14px;
    margin-bottom: 0;
    justify-content: flex-start;
    gap: 12px;
}
.aa-feedback {
    font-size: 0.85rem;
    font-weight: 500;
}
.aa-feedback.is-ok  { color: #27ae60; }
.aa-feedback.is-err { color: #e74c3c; }

.aa-test-result {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #2d3436;
    min-height: 40px;
}
.aa-test-result.is-ok  { background: rgba(39,174,96,0.08); border-left: 3px solid #27ae60; }
.aa-test-result.is-err { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; }

/* Dark theme support */
body.theme-dark .aa-stat,
body.theme-dark .aa-empty,
body.theme-dark .aa-add-form,
body.theme-dark .aa-test-result {
    background: rgba(255,255,255,0.05);
    color: #ecf0f1;
}
body.theme-dark .aa-stat b { color: #74b9ff; }
body.theme-dark .aa-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
    color: #ecf0f1;
}
body.theme-dark .aa-item-text { color: #ecf0f1; }
body.theme-dark .aa-row label { color: #ecf0f1; }
body.theme-dark .aa-row select, body.theme-dark .aa-row input[type="text"] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    color: #ecf0f1;
}

@media (max-width: 600px) {
    .aa-row { flex-wrap: wrap; }
    .aa-row label { width: 100%; min-width: 0; }
    .aa-item-main { flex-wrap: wrap; }
    .aa-item-text { width: 100%; margin-top: 4px; }
}

/* ============================================================
   Coverage Banner (Phase 3) — แสดงสถานะ admin coverage ใน report page
   ============================================================ */
.coverage-banner {
    display: flex; align-items: flex-start; gap: 14px;
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    border-left: 4px solid #95a5a6;
    background: rgba(149,165,166,0.08);
    transition: background 0.2s, border-color 0.2s;
}
.coverage-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    display: flex; align-items: center; justify-content: center;
    color: #2d3436;
}
.coverage-icon .fi { font-size: 1.1rem; }
.coverage-body { flex: 1; min-width: 0; }
.coverage-title { font-weight: 700; font-size: 0.95rem; color: #2d3436; margin-bottom: 3px; }
.coverage-detail { font-size: 0.82rem; color: #636e72; line-height: 1.5; }

.coverage-banner.coverage-checking {
    border-left-color: #74b9ff;
    background: rgba(116,185,255,0.1);
}
.coverage-banner.coverage-checking .coverage-icon {
    background: rgba(116,185,255,0.25);
    color: #0984e3;
    animation: coverage-pulse 1.4s ease-in-out infinite;
}
@keyframes coverage-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.6; transform: scale(0.94); }
}

.coverage-banner.coverage-covered {
    border-left-color: #27ae60;
    background: rgba(39,174,96,0.08);
}
.coverage-banner.coverage-covered .coverage-icon {
    background: rgba(39,174,96,0.18);
    color: #27ae60;
}

.coverage-banner.coverage-uncovered {
    border-left-color: #e74c3c;
    background: rgba(231,76,60,0.08);
}
.coverage-banner.coverage-uncovered .coverage-icon {
    background: rgba(231,76,60,0.18);
    color: #e74c3c;
}
.coverage-banner.coverage-uncovered .coverage-title { color: #c0392b; }

.coverage-banner.coverage-limited {
    border-left-color: #e67e22;
    background: rgba(230,126,34,0.08);
}
.coverage-banner.coverage-limited .coverage-icon {
    background: rgba(230,126,34,0.2);
    color: #e67e22;
}

.coverage-banner.coverage-error {
    border-left-color: #95a5a6;
}

/* Submit button — visually disabled when coverage not OK */
.btn-submit-disabled,
.btn-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(40%);
}

/* Dark theme */
body.theme-dark .coverage-banner { background: rgba(255,255,255,0.05); }
body.theme-dark .coverage-title { color: #ecf0f1; }
body.theme-dark .coverage-detail { color: #b2bec3; }
body.theme-dark .coverage-icon { background: rgba(255,255,255,0.08); color: #ecf0f1; }

/* ============================================================
   Incident Widget — Coverage Status Pill (Phase 3)
   ============================================================ */
.iw-coverage-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    transition: all 0.2s;
}
.iw-coverage-status[data-state="checking"] {
    background: rgba(116,185,255,0.22);
    border-color: rgba(116,185,255,0.5);
    color: #dfe9ff;
}
.iw-coverage-status[data-state="checking"] .fi {
    animation: coverage-pulse 1.4s ease-in-out infinite;
}
.iw-coverage-status[data-state="covered"] {
    background: rgba(46,204,113,0.22);
    border-color: rgba(46,204,113,0.55);
    color: #c8f7d4;
}
.iw-coverage-status[data-state="uncovered"] {
    background: rgba(231,76,60,0.22);
    border-color: rgba(231,76,60,0.55);
    color: #ffd6cf;
}
.iw-coverage-status[data-state="error"] {
    background: rgba(149,165,166,0.22);
    border-color: rgba(149,165,166,0.5);
    color: #ecf0f1;
}
.iw-coverage-status .fi { font-size: 0.85rem; flex-shrink: 0; }

@media (max-width: 600px) {
    .iw-coverage-status {
        font-size: 0.72rem;
        padding: 5px 10px;
    }
}

/* ============================================================
   Phase 5 — Coverage Overview + Gap Analysis + Map
   ============================================================ */
.cov-overview-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.cov-stat-card {
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 14px 16px;
}
.cov-stat-label { font-size: 0.78rem; color: #636e72; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.cov-stat-big { font-size: 1.6rem; font-weight: 700; color: #2d3436; margin: 4px 0 8px; }
.cov-stat-sub { font-size: 0.78rem; color: #95a5a6; }
.cov-stat-bar { height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.cov-stat-bar-fill { height: 100%; background: linear-gradient(90deg, #3498db, #2980b9); transition: width 0.6s ease; }
.cov-stat-sum .cov-stat-big { color: #6c5ce7; }
.cov-loading { color: #95a5a6; padding: 14px; font-size: 0.85rem; text-align: center; }
.cov-empty   { color: #27ae60; padding: 14px; font-size: 0.85rem; text-align: center; font-weight: 600; }

.cov-map-wrap { margin-top: 12px; }
.cov-map {
    height: 420px;
    border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.08);
    overflow: hidden;
}
.cov-map-legend {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.78rem;
    color: #636e72;
}
.cov-dot {
    display: inline-block; width: 11px; height: 11px;
    border-radius: 50%; margin-right: 6px;
    vertical-align: middle;
}
.cov-dot.covered  { background: #3498db; border: 1.5px solid #2980b9; }
.cov-dot.gap      { background: #e74c3c; border: 1.5px solid #c0392b; }
.cov-dot.incident { background: rgba(149,165,166,0.3); border: 1.5px solid #95a5a6; }

.cov-gap-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 380px; overflow-y: auto;
    margin-top: 10px;
}
.cov-gap-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: 10px;
}
.cov-gap-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cov-gap-name { font-weight: 600; color: #2d3436; }
.cov-gap-code {
    font-family: ui-monospace, monospace; font-size: 0.74rem;
    color: #95a5a6; background: rgba(0,0,0,0.04);
    padding: 2px 7px; border-radius: 4px;
}
.cov-gap-badge {
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.76rem; font-weight: 600;
    flex-shrink: 0;
}
.cov-gap-badge.no-incidents  { background: rgba(149,165,166,0.15); color: #636e72; }
.cov-gap-badge.has-incidents { background: rgba(231,76,60,0.15); color: #c0392b; }

/* Dark theme */
body.theme-dark .cov-stat-card,
body.theme-dark .cov-gap-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
body.theme-dark .cov-stat-big,
body.theme-dark .cov-gap-name { color: #ecf0f1; }
body.theme-dark .cov-stat-label,
body.theme-dark .cov-stat-sub,
body.theme-dark .cov-map-legend { color: #b2bec3; }

/* My Queue widget (Phase 5) */
.mq-widget-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.mq-widget-head h2 {
    margin: 0;
    font-size: 1.05rem; font-weight: 700;
    color: #2d3436;
    display: flex; align-items: center; gap: 8px;
}
.mq-tabs {
    display: flex; gap: 6px;
    background: rgba(0,0,0,0.06); padding: 4px;
    border-radius: 10px;
}
.mq-tab {
    background: transparent; border: none;
    padding: 6px 14px; border-radius: 7px;
    cursor: pointer; font-family: inherit;
    font-size: 0.82rem; font-weight: 600;
    color: #636e72;
    transition: all 0.15s;
}
.mq-tab.active { background: #0984e3; color: #fff; }
.mq-tab:hover:not(.active) { background: rgba(0,0,0,0.04); }

.mq-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.mq-empty {
    text-align: center; padding: 30px 20px;
    color: #95a5a6; font-size: 0.88rem;
}
.mq-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    transition: border-color 0.15s, transform 0.15s;
}
.mq-item:hover { border-color: rgba(9,132,227,0.4); }
.mq-sev {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: #f1f2f6; color: #2d3436;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mq-sev.sev-critical { background: rgba(231,76,60,0.18); color: #c0392b; }
.mq-sev.sev-warning  { background: rgba(243,156,18,0.18); color: #d35400; }
.mq-sev.sev-info     { background: rgba(52,152,219,0.18); color: #2980b9; }
.mq-body { flex: 1; min-width: 0; }
.mq-title { font-weight: 600; font-size: 0.92rem; color: #2d3436; }
.mq-meta { font-size: 0.78rem; color: #95a5a6; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.mq-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mq-btn {
    background: #0984e3; color: #fff; border: none;
    padding: 6px 12px; border-radius: 7px;
    cursor: pointer; font-family: inherit;
    font-size: 0.78rem; font-weight: 600;
    transition: background 0.15s;
}
.mq-btn:hover { background: #0768b8; }
.mq-btn-claim { background: #27ae60; }
.mq-btn-claim:hover { background: #1f8849; }
.mq-btn-ghost { background: rgba(0,0,0,0.06); color: #2d3436; }
.mq-btn-ghost:hover { background: rgba(0,0,0,0.1); }

body.theme-dark .mq-widget-head h2 { color: #ecf0f1; }
body.theme-dark .mq-tabs { background: rgba(255,255,255,0.06); }
body.theme-dark .mq-tab { color: #b2bec3; }
body.theme-dark .mq-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.theme-dark .mq-title { color: #ecf0f1; }

/* ============================================================
   TV Area Channels — area_admin add channels per area
   ============================================================ */
.tac-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tac-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 10px;
}
.tac-item:hover { border-color: rgba(9,132,227,0.35); }
.tac-color-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.12);
}
.tac-item-body { flex: 1; min-width: 0; }
.tac-item-name { font-weight: 600; color: #2d3436; font-size: 0.95rem; }
.tac-item-meta {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-size: 0.78rem; color: #636e72;
    margin-top: 2px;
}
.tac-url {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    color: #95a5a6;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 360px; white-space: nowrap;
}

body.theme-dark .tac-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.theme-dark .tac-item-name { color: #ecf0f1; }
body.theme-dark .tac-item-meta { color: #b2bec3; }

/* ============================================================
   TV by Area widget (super_admin)
   ============================================================ */
.tba-groups { display: flex; flex-direction: column; gap: 14px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.tba-group {
    background: rgba(0,0,0,0.03);
    border-radius: 12px;
    padding: 12px 14px;
    border: 1.5px solid rgba(0,0,0,0.06);
}
.tba-group-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #2d3436;
}
.tba-group-head .fi { color: #6c5ce7; }
.tba-count {
    font-size: 0.74rem; color: #95a5a6;
    background: rgba(0,0,0,0.05);
    padding: 2px 8px; border-radius: 6px;
    margin-left: auto;
}
.tba-channels { display: flex; flex-direction: column; gap: 6px; }
.tba-channel {
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
}
.tba-channel-body { flex: 1; min-width: 0; }
.tba-channel-name { font-weight: 600; font-size: 0.88rem; color: #2d3436; }
.tba-channel-meta {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-size: 0.74rem; color: #636e72; margin-top: 2px;
}
.tba-url-btn {
    background: rgba(9,132,227,0.1);
    color: #0984e3;
    border: none;
    width: 32px; height: 32px;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
}
.tba-url-btn:hover { background: rgba(9,132,227,0.2); }
.tba-empty {
    text-align: center; padding: 30px 20px;
    color: #95a5a6; font-size: 0.88rem;
}
.tba-empty .fi { font-size: 1.8rem; opacity: 0.5; display: block; margin-bottom: 8px; }

body.theme-dark .tba-group { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.theme-dark .tba-group-head { color: #ecf0f1; }
body.theme-dark .tba-channel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body.theme-dark .tba-channel-name { color: #ecf0f1; }
body.theme-dark .tba-channel-meta { color: #b2bec3; }

/* ============================================================
   Agency Approval — pending highlight + approve/reject buttons
   ============================================================ */
.user-row-pending {
    background: rgba(243,156,18,0.06) !important;
    border-left: 4px solid #f39c12 !important;
}
.approval-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}
.approval-pending {
    background: rgba(243,156,18,0.18);
    color: #b9770e;
}
.approval-rejected {
    background: rgba(231,76,60,0.18);
    color: #c0392b;
}
.user-cell-agency {
    font-size: 0.82rem;
    color: #636e72;
    margin-top: 3px;
}
.user-cell-agency .fi { font-size: 0.85em; }
.agency-doc-link {
    color: #0984e3;
    text-decoration: none;
    font-weight: 600;
}
.agency-doc-link:hover { text-decoration: underline; }

.btn-approve, .btn-reject {
    border: none;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, transform 0.15s;
}
.btn-approve {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: #fff;
}
.btn-approve:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    transform: translateY(-1px);
}
.btn-reject {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
}
.btn-reject:hover {
    background: linear-gradient(135deg, #ec7063, #e74c3c);
    transform: translateY(-1px);
}

body.theme-dark .user-row-pending {
    background: rgba(243,156,18,0.1) !important;
}
body.theme-dark .user-cell-agency { color: #b2bec3; }
body.theme-dark .agency-doc-link { color: #74b9ff; }