/* ==============================================================================
   SA Green School — ธีมสีสัน + โหมดมืด
   - ส่วน A: ส่วนประกอบสีสัน (ใช้ทั้งสองโหมด): การ์ดตัวเลข, หัวหน้าเพจ + วงแหวนความคืบหน้า, กราฟแท่ง, โพเดียม
   - ส่วน B: โหมดมืด html[data-theme="dark"] (ค่าเริ่มต้น) — ปรับสีพื้น/ตัวอักษร/ขอบของส่วนประกอบเดิม
   ============================================================================== */

:root {
    --c-blue: #3b82f6;   --c-blue-2: #06b6d4;
    --c-green: #22c55e;  --c-green-2: #10b981;
    --c-orange: #f59e0b; --c-orange-2: #f97316;
    --c-purple: #a855f7; --c-purple-2: #ec4899;
    --c-red: #ef4444;
    --c-cyan: #06b6d4;
    --surface-2: #f8fafc;
    --chart-grid: #e5e7eb;
    --chart-text: #6b7280;
}

/* ── ปุ่มสลับธีม ── */
.theme-toggle .theme-icon-sun { display: none; color: #f59e0b; }
.theme-toggle .theme-icon-moon { display: inline-flex; color: #6366f1; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

/* ═════════════════════════════ A. ส่วนประกอบสีสัน ═════════════════════════════ */

/* หัวหน้าเพจ (hero) */
.page-hero {
    position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    padding: 1.5rem 1.75rem; border-radius: 1.25rem; border: 1px solid var(--border-strong);
    background: radial-gradient(120% 140% at 0% 0%, rgba(34, 197, 94, 0.14) 0%, transparent 55%),
                radial-gradient(90% 120% at 100% 100%, rgba(59, 130, 246, 0.12) 0%, transparent 60%), var(--surface);
    box-shadow: var(--shadow-sm);
}
.page-hero.hero-blue { background: radial-gradient(120% 140% at 0% 0%, rgba(6, 182, 212, 0.16) 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(59, 130, 246, 0.14) 0%, transparent 60%), var(--surface); }
.page-hero.hero-purple { background: radial-gradient(120% 140% at 0% 0%, rgba(168, 85, 247, 0.16) 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(236, 72, 153, 0.12) 0%, transparent 60%), var(--surface); }
.page-hero.hero-gold { background: radial-gradient(120% 140% at 0% 0%, rgba(245, 158, 11, 0.18) 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(249, 115, 22, 0.12) 0%, transparent 60%), var(--surface); }
.page-hero-main { display: flex; gap: 1rem; align-items: center; min-width: 0; }
.page-hero-icon { width: 3.25rem; height: 3.25rem; flex: none; display: grid; place-items: center; border-radius: 1rem; color: #fff; background: linear-gradient(135deg, var(--c-green), var(--c-green-2)); box-shadow: 0 10px 24px -10px rgba(34, 197, 94, 0.7); }
.hero-blue .page-hero-icon { background: linear-gradient(135deg, var(--c-blue-2), var(--c-blue)); box-shadow: 0 10px 24px -10px rgba(6, 182, 212, 0.7); }
.hero-purple .page-hero-icon { background: linear-gradient(135deg, var(--c-purple), var(--c-purple-2)); box-shadow: 0 10px 24px -10px rgba(168, 85, 247, 0.7); }
.hero-gold .page-hero-icon { background: linear-gradient(135deg, var(--c-orange), var(--c-orange-2)); box-shadow: 0 10px 24px -10px rgba(245, 158, 11, 0.7); }
.page-hero-title { font-size: 1.6rem; line-height: 2rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.01em; }
.page-hero-sub { margin-top: 0.25rem; font-size: 0.9rem; color: var(--text-muted); }
.page-hero-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

/* วงแหวนความคืบหน้า (conic-gradient) */
.ring-box { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--surface-2); border: 1px solid var(--border-strong); }
.ring-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ring-value { font-size: 1.9rem; line-height: 1.1; font-weight: 800; color: var(--ring-color, var(--c-green)); }
.ring-value small { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-left: 0.25rem; }
.ring { --p: 0; width: 4.25rem; height: 4.25rem; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--ring-color, var(--c-green)) calc(var(--p) * 1%), var(--ring-track, rgba(148, 163, 184, 0.22)) 0); }
.ring::before { content: ''; width: 76%; height: 76%; border-radius: 50%; background: var(--surface-2); }

/* การ์ดตัวเลข */
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.kpi-tile { position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.875rem; padding: 1.1rem 1.25rem; border-radius: 1.1rem; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); transition: transform 200ms ease, box-shadow 200ms ease; }
.kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-tile::after { content: ''; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--tile-glow, rgba(34, 197, 94, 0.12)); }
.kpi-tile-icon { width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border-radius: 0.9rem; color: #fff; background: var(--tile-grad, linear-gradient(135deg, var(--c-green), var(--c-green-2))); box-shadow: 0 8px 18px -8px var(--tile-shadow, rgba(34, 197, 94, 0.8)); }
.kpi-tile-value { font-size: 1.6rem; line-height: 1.15; font-weight: 800; color: var(--text-main); }
.kpi-tile-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.kpi-tile-note { font-size: 0.72rem; color: var(--text-sub); }
.kpi-tile.t-blue { --tile-grad: linear-gradient(135deg, #06b6d4, #3b82f6); --tile-glow: rgba(59, 130, 246, 0.13); --tile-shadow: rgba(59, 130, 246, 0.8); }
.kpi-tile.t-orange { --tile-grad: linear-gradient(135deg, #fbbf24, #f97316); --tile-glow: rgba(249, 115, 22, 0.13); --tile-shadow: rgba(249, 115, 22, 0.8); }
.kpi-tile.t-purple { --tile-grad: linear-gradient(135deg, #a855f7, #ec4899); --tile-glow: rgba(168, 85, 247, 0.13); --tile-shadow: rgba(168, 85, 247, 0.8); }
.kpi-tile.t-cyan { --tile-grad: linear-gradient(135deg, #22d3ee, #0ea5e9); --tile-glow: rgba(14, 165, 233, 0.13); --tile-shadow: rgba(14, 165, 233, 0.8); }
.kpi-tile.t-red { --tile-grad: linear-gradient(135deg, #fb7185, #ef4444); --tile-glow: rgba(239, 68, 68, 0.12); --tile-shadow: rgba(239, 68, 68, 0.8); }

/* กราฟแท่ง (SVG ที่สร้างฝั่งเซิร์ฟเวอร์) */
.chart-card { padding: 1.25rem 1.25rem 1rem; border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.chart-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 800; color: var(--text-main); }
.chart-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.chart-scroll { overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; min-width: 34rem; }
.chart-svg .grid { stroke: var(--chart-grid); stroke-dasharray: 3 4; }
.chart-svg .axis { fill: var(--chart-text); font-size: 11px; font-family: inherit; }
.chart-svg .bar { transition: opacity 150ms ease; }
.chart-svg .bar:hover { opacity: 0.8; }
.chart-svg .val { fill: var(--text-muted); font-size: 10px; font-weight: 700; font-family: inherit; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem; margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart-legend i { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; display: inline-block; }
.chart-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.seg { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 0.75rem; background: var(--surface-2); border: 1px solid var(--border-strong); }
.seg a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border-radius: 0.55rem; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.seg a.on { background: linear-gradient(135deg, var(--c-green), var(--c-green-2)); color: #fff; box-shadow: 0 6px 14px -8px rgba(34, 197, 94, 0.9); }
.seg a:not(.on):hover { color: var(--text-main); }
.chart-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pct-hi { color: #16a34a; font-weight: 700; } .pct-mid { color: #f59e0b; font-weight: 700; } .pct-lo { color: #ef4444; font-weight: 700; }
.pct-avg { color: #3b82f6; font-weight: 800; }

/* โพเดียมอันดับ 1–3 */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 11rem)); justify-content: center; align-items: end; gap: 1rem; padding: 1.5rem 0 0.5rem; }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.podium-avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; background: var(--surface-2); border: 3px solid var(--pod-c, #94a3b8); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pod-c, #94a3b8) 18%, transparent); }
.podium-badge { margin-top: -1.2rem; padding: 0.1rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 800; color: #fff; background: var(--pod-c, #94a3b8); }
.podium-block { width: 100%; border-radius: 1rem 1rem 0.4rem 0.4rem; padding: 1rem 0.5rem; text-align: center; color: #fff; background: linear-gradient(180deg, var(--pod-c, #94a3b8), color-mix(in srgb, var(--pod-c, #94a3b8) 70%, #000)); box-shadow: 0 16px 30px -18px var(--pod-c, #94a3b8); }
.podium-block strong { display: block; font-size: 1.05rem; }
.podium-block span { display: block; font-size: 1.5rem; font-weight: 800; }
.podium-col.p1 { --pod-c: #f59e0b; } .podium-col.p1 .podium-block { min-height: 10rem; } .podium-col.p1 .podium-avatar { width: 5.25rem; height: 5.25rem; font-size: 2.5rem; }
.podium-col.p2 { --pod-c: #94a3b8; } .podium-col.p2 .podium-block { min-height: 7.5rem; }
.podium-col.p3 { --pod-c: #f97316; } .podium-col.p3 .podium-block { min-height: 6rem; }
.podium-col.p1 { order: 2; } .podium-col.p2 { order: 1; } .podium-col.p3 { order: 3; }
@media (max-width: 480px) { .podium { gap: 0.5rem; } .podium-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; } .podium-block span { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .kpi-tile, .kpi-tile:hover { transition: none; transform: none; } }

/* ═════════════════════════════ B. โหมดมืด ═════════════════════════════ */
html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #22c55e; --primary-hover: #16a34a; --primary-light: rgba(34, 197, 94, 0.12);
    --bg-main: #070d1a;
    --surface: #0f1a2e;
    --surface-2: #142039;
    --surface-glass: rgba(15, 26, 46, 0.75);
    --border: rgba(148, 163, 184, 0.10);
    --border-strong: rgba(148, 163, 184, 0.18);
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --text-sub: #64748b;
    --chart-grid: rgba(148, 163, 184, 0.16);
    --chart-text: #94a3b8;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 10px 24px -12px rgb(0 0 0 / 0.7);
    --ivory: #0f1a2e; --ivory-200: #1b2a47; --ivory-300: rgba(148, 163, 184, 0.16);
    --emerald-50: rgba(16, 185, 129, 0.12); --emerald-100: rgba(16, 185, 129, 0.25);
    --gold-100: rgba(245, 158, 11, 0.14);
}
html[data-theme="dark"] body {
    background: radial-gradient(60rem 40rem at 85% -10%, rgba(34, 197, 94, 0.09), transparent 60%),
                radial-gradient(50rem 40rem at -10% 110%, rgba(59, 130, 246, 0.08), transparent 60%), #070d1a;
    color: var(--text-main);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1e2b45; }

/* โครงหลัก */
html[data-theme="dark"] .sidebar, html[data-theme="dark"] .top-navbar { background: #0a1426; border-color: var(--border); }
html[data-theme="dark"] .sidebar-brand-title, html[data-theme="dark"] .sidebar-user-name { color: #f1f5f9; }
html[data-theme="dark"] .sidebar-brand-sub { color: #4ade80; }
html[data-theme="dark"] .nav-link { color: #cbd5e1; }
html[data-theme="dark"] .nav-link:hover { background: rgba(148, 163, 184, 0.08); color: #fff; }
html[data-theme="dark"] .nav-link.active { background: linear-gradient(90deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.06)); color: #4ade80; box-shadow: inset 3px 0 0 #22c55e; }
html[data-theme="dark"] .nav-link.active .nav-icon { color: #4ade80; }
html[data-theme="dark"] .nav-tag { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
html[data-theme="dark"] .sidebar-user { border-color: var(--border); }
html[data-theme="dark"] .logout-btn:hover { background: rgba(239, 68, 68, 0.15); }
html[data-theme="dark"] .header-icon-btn:hover { background: rgba(148, 163, 184, 0.1); color: #fff; }
html[data-theme="dark"] .header-search-btn, html[data-theme="dark"] .header-search-input { background: #111c31; border-color: var(--border-strong); color: var(--text-muted); }
html[data-theme="dark"] .header-search-btn kbd { background: #1b2a47; color: var(--text-muted); }

/* การ์ด ฟอร์ม ปุ่ม ตาราง */
html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .quest-card,
html[data-theme="dark"] .md-form, html[data-theme="dark"] .md-room, html[data-theme="dark"] .ce-item, html[data-theme="dark"] .as-item,
html[data-theme="dark"] .as-row, html[data-theme="dark"] .nf-item > a, html[data-theme="dark"] .nf-item > div, html[data-theme="dark"] .wa-stat,
html[data-theme="dark"] .hof-item, html[data-theme="dark"] .gd-steps li, html[data-theme="dark"] .gd-task {
    background: var(--surface); border-color: var(--border-strong); color: var(--text-main);
}
html[data-theme="dark"] .wa-stat { border-left-color: #22c55e; }
html[data-theme="dark"] .glass-card { background: var(--surface-glass); border-color: var(--border-strong); }
html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .md-btn-off, html[data-theme="dark"] .as-tab, html[data-theme="dark"] .wb-chip {
    background: #142039; border-color: var(--border-strong); color: #cbd5e1;
}
html[data-theme="dark"] .btn-secondary:hover { background: #1b2a47; color: #fff; }
html[data-theme="dark"] .md-btn-off { color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }
html[data-theme="dark"] .md-btn-on { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); color: #4ade80; }
html[data-theme="dark"] .as-tab.active { background: linear-gradient(135deg, #16a34a, #059669); color: #fff; border-color: transparent; }
html[data-theme="dark"] .as-item.active { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.5); }
html[data-theme="dark"] .form-input, html[data-theme="dark"] .select-sm, html[data-theme="dark"] .select-plain, html[data-theme="dark"] .ce-score span {
    background: #0b1528; border-color: var(--border-strong); color: var(--text-main);
}
html[data-theme="dark"] .form-input::placeholder { color: #64748b; }
html[data-theme="dark"] .form-label { color: #cbd5e1; }
html[data-theme="dark"] .ce-score input:checked + span { background: linear-gradient(135deg, #22c55e, #059669); color: #fff; border-color: transparent; }
html[data-theme="dark"] .data-table th, html[data-theme="dark"] .quest-table thead, html[data-theme="dark"] .wa-table tfoot td { background: #111c31; color: #94a3b8; }
html[data-theme="dark"] .data-table td, html[data-theme="dark"] table td { color: var(--text-main); border-color: var(--border); }
html[data-theme="dark"] table th { color: #94a3b8; border-color: var(--border); }
html[data-theme="dark"] .wa-table thead th, html[data-theme="dark"] .gd-quest thead th { background: #111c31; }
html[data-theme="dark"] .data-table tbody tr:hover td, html[data-theme="dark"] .quest-table tbody tr:hover, html[data-theme="dark"] .wb-table tbody tr:hover, html[data-theme="dark"] .wa-table tbody tr:hover td { background: rgba(148, 163, 184, 0.06); }
html[data-theme="dark"] .wa-row-empty td { background: transparent; }
html[data-theme="dark"] .rp-group { background: rgba(34, 197, 94, 0.12); color: #4ade80; }

/* ข้อความ */
html[data-theme="dark"] .dash-title, html[data-theme="dark"] .section-title-lg, html[data-theme="dark"] .section-title, html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .wa-stat strong, html[data-theme="dark"] .wa-dl dd, html[data-theme="dark"] .wa-module-card h3, html[data-theme="dark"] .quest-class,
html[data-theme="dark"] .hof-class, html[data-theme="dark"] .hof-score, html[data-theme="dark"] .gd-task-title, html[data-theme="dark"] .gd-quest-class,
html[data-theme="dark"] .as-item-name, html[data-theme="dark"] .as-subtitle, html[data-theme="dark"] .as-row-range, html[data-theme="dark"] .wa-formula, html[data-theme="dark"] .rk-steps { color: #f1f5f9; }
html[data-theme="dark"] .wa-room-link { color: #4ade80; }
html[data-theme="dark"] .gd-tree-rate, html[data-theme="dark"] .sem-banner .sem-range { color: #94a3b8; }

/* ป้าย / แจ้งเตือน (สีโปร่งบนพื้นมืด) */
html[data-theme="dark"] .alert-success, html[data-theme="dark"] .sem-banner { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
html[data-theme="dark"] .alert-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }
html[data-theme="dark"] .wa-notice, html[data-theme="dark"] .mock-tag, html[data-theme="dark"] .sem-banner.sem-past, html[data-theme="dark"] .gd-mock-note { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; }
html[data-theme="dark"] .sem-banner.sem-upcoming { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.35); color: #93c5fd; }
html[data-theme="dark"] .sem-banner.sem-static { background: rgba(148, 163, 184, 0.08); color: #cbd5e1; }
html[data-theme="dark"] .wa-badge.ok, html[data-theme="dark"] .gd-pill.ok, html[data-theme="dark"] .as-has { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
html[data-theme="dark"] .gd-pill.ok2 { background: rgba(20, 184, 166, 0.15); color: #5eead4; }
html[data-theme="dark"] .gd-pill.gold, html[data-theme="dark"] .wa-badge.warn, html[data-theme="dark"] .gd-pill.warn, html[data-theme="dark"] .as-none { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
html[data-theme="dark"] .wa-badge.bad, html[data-theme="dark"] .gd-pill.bad { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
html[data-theme="dark"] .wa-badge.info { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
html[data-theme="dark"] .wa-badge.muted, html[data-theme="dark"] .gd-pill.muted, html[data-theme="dark"] .md-badge-off, html[data-theme="dark"] .hof-rank, html[data-theme="dark"] .hof-grade { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
html[data-theme="dark"] .gd-pill.none { background: transparent; border-color: var(--border-strong); color: #94a3b8; }
html[data-theme="dark"] .wa-formula code { background: #1b2a47; color: #e2e8f0; }
html[data-theme="dark"] .wb-rate { background: rgba(34, 197, 94, 0.12); color: #4ade80; }

/* แดชบอร์ดเดิม (gd-*) */
html[data-theme="dark"] .gd-hero { box-shadow: 0 20px 40px -24px rgba(16, 185, 129, 0.6); }
html[data-theme="dark"] .gd-card { background: var(--surface); border-color: var(--border-strong); }
html[data-theme="dark"] .gd-card-title, html[data-theme="dark"] .gd-tree-name, html[data-theme="dark"] .gd-prog-title { color: #f1f5f9; }
html[data-theme="dark"] .gd-card-title svg, html[data-theme="dark"] .gd-tree-icon, html[data-theme="dark"] .gd-tree-rate strong { color: #4ade80; }
html[data-theme="dark"] .gd-steps li.on { color: #4ade80; }
html[data-theme="dark"] .gd-count { color: #4ade80; }
html[data-theme="dark"] .gd-tree-ring { background: radial-gradient(circle at 50% 35%, #1b2a47 0%, #0f1a2e 70%); }
html[data-theme="dark"] .gd-chip-mock { color: #fcd34d; }

/* หน้าตั้งค่า (สไตล์ในหน้า) */
html[data-theme="dark"] .settings-tab-btn { color: #cbd5e1; }
html[data-theme="dark"] .settings-tab-btn:hover { background: rgba(148, 163, 184, 0.08) !important; color: #fff; }
html[data-theme="dark"] .settings-tab-btn.active { background: rgba(34, 197, 94, 0.14) !important; color: #4ade80 !important; }
html[data-theme="dark"] [style*="background:#f8fafc"], html[data-theme="dark"] [style*="background:#f1f5f9"], html[data-theme="dark"] [style*="background:#ffffff"] { background: #111c31 !important; }
html[data-theme="dark"] [style*="background:#fef3c7"], html[data-theme="dark"] [style*="background:#fef2f2"] { background: rgba(245, 158, 11, 0.14) !important; }
html[data-theme="dark"] [style*="background:#e0e7ff"], html[data-theme="dark"] [style*="background:#eff6ff"], html[data-theme="dark"] [style*="background:#e0f2fe"], html[data-theme="dark"] [style*="background:#dbeafe"] { background: rgba(99, 102, 241, 0.16) !important; }
html[data-theme="dark"] [style*="background:#ecfdf5"], html[data-theme="dark"] [style*="background:#f0fdf4"] { background: rgba(34, 197, 94, 0.14) !important; }
html[data-theme="dark"] [style*="background:#e2e8f0"], html[data-theme="dark"] [style*="background:#e5e7eb"] { background: rgba(148, 163, 184, 0.16) !important; }
html[data-theme="dark"] [style*="color:#334155"], html[data-theme="dark"] [style*="color:#475569"], html[data-theme="dark"] [style*="color:#0f172a"] { color: #e2e8f0 !important; }
html[data-theme="dark"] [style*="color:#047857"], html[data-theme="dark"] [style*="color:#059669"] { color: #4ade80 !important; }
html[data-theme="dark"] [style*="color:#b45309"], html[data-theme="dark"] [style*="color:#92400e"], html[data-theme="dark"] [style*="color:#c2410c"], html[data-theme="dark"] [style*="color:#d97706"] { color: #fcd34d !important; }
html[data-theme="dark"] [style*="color:#4338ca"], html[data-theme="dark"] [style*="color:#2563eb"], html[data-theme="dark"] [style*="color:#1e40af"], html[data-theme="dark"] [style*="color:#1e3a8a"], html[data-theme="dark"] [style*="color:#0369a1"] { color: #93c5fd !important; }
html[data-theme="dark"] [style*="color:#991b1b"], html[data-theme="dark"] [style*="color:#7f1d1d"], html[data-theme="dark"] [style*="color:#b91c1c"] { color: #fca5a5 !important; }

/* สีตัวเลขร้อยละบนพื้นมืด */
html[data-theme="dark"] .pct-hi { color: #4ade80; } html[data-theme="dark"] .pct-mid { color: #fbbf24; } html[data-theme="dark"] .pct-lo { color: #f87171; } html[data-theme="dark"] .pct-avg { color: #60a5fa; }
.page-hero-icon svg { width: 1.6rem; height: 1.6rem; }
html[data-theme="dark"] .gd-hero { color: #fffdf5; }
html[data-theme="dark"] .gd-hero .gd-chip { color: #fffdf5; }
html[data-theme="dark"] .gd-tree-icon .icon-tree, html[data-theme="dark"] .lv3 .icon-tree, html[data-theme="dark"] .lv4 .icon-tree { color: #4ade80; }
.page-hero-main { flex: 1 1 26rem; }
.page-hero .ring-box { margin-left: auto; }
html[data-theme="dark"] .gd-prog-value { color: #4ade80; }
html[data-theme="dark"] .wa-notice strong, html[data-theme="dark"] .wa-notice p { color: #fde68a; }
html[data-theme="dark"] .gd-prog-sub, html[data-theme="dark"] .gd-prog-period, html[data-theme="dark"] .gd-footnote, html[data-theme="dark"] .gd-card-sub { color: #94a3b8; }

/* หัวหน้าอาคาร/ระดับ */
.sv-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }
.sv-form .form-input { flex: 1 1 14rem; min-width: 0; font-size: 0.85rem; padding: 0.4rem 0.6rem; }
.sv-x { margin-left: 0.25rem; border: 0; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
.as-row-main .md-inline { display: inline-flex; }

/* รูปหลักฐานการประเมิน */
.ev-photos { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ev-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.ev-set { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem; }
.ev-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ev-thumbs img { width: 7.5rem; height: 5.5rem; object-fit: cover; border-radius: 0.5rem; border: 1px solid var(--border-strong); display: block; }
.ev-thumbs.sm img { width: 4.25rem; height: 3.25rem; }

/* รอบประกาศผล (หน้าการจัดอันดับ / เกียรติบัตร) */
.rk-rounds { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0; }
.rk-rounds-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); margin-right: 0.25rem; }
.rk-rounds .wa-flag { margin-top: 0; font-size: 0.8rem; }
.rk-round { display: inline-flex; flex-direction: column; padding: 0.4rem 0.85rem; border-radius: 0.75rem; border: 1px solid var(--border-strong, #d1d5db); background: #ffffff; font-size: 0.85rem; font-weight: 700; color: #374151; line-height: 1.25; text-decoration: none; }
.rk-round small { font-size: 0.7rem; font-weight: 500; opacity: 0.8; }
.rk-round:hover { border-color: #10b981; }
.rk-round.active { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: transparent; color: #ffffff; }
.rk-add-title { font-size: 0.95rem; font-weight: 700; margin: 1rem 0 0.25rem; color: var(--text-main); }
html[data-theme="dark"] .rk-round { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.25); color: #e2e8f0; }
html[data-theme="dark"] .rk-round.active { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1f1300; border-color: transparent; }