/* ============================================ THAI BIOMASS - Global Stylesheet Supports: Dark mode (default) & Light mode Toggle via [data-theme="light"] on ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ============ DARK THEME (default) ============ */ :root { --primary: #2EE8A5; --primary-dark: #00C48C; --primary-glow: rgba(46, 232, 165, 0.18); --primary-glow-strong: rgba(46, 232, 165, 0.28); --secondary: #38BDF8; --bg-page: #0A0F1E; --bg-dark: #0A0F1E; /* alias kept for backward compat with inline styles */ --bg-card: #111827; --bg-card-2: #0D1526; --bg-card-hover: #152035; --border: #1E2A3A; --border-light: #243044; --text: #E2E8F0; --text-muted: #64748B; --text-light: #94A3B8; --gradient-primary: linear-gradient(135deg, #2EE8A5 0%, #38BDF8 100%); --gradient-hero: linear-gradient(135deg, #0A0F1E 0%, #0D1E35 50%, #0A1A0F 100%); --gradient-section: linear-gradient(180deg, #0A0F1E 0%, #0D1526 100%); --shadow-glow: 0 0 40px rgba(46, 232, 165, 0.12); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-nav: 0 4px 32px rgba(0,0,0,0.5); --nav-bg: rgba(10, 15, 30, 0.85); --nav-bg-scrolled: rgba(10, 15, 30, 0.98); --radius: 12px; --radius-lg: 20px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Spec table */ --spec-row-hover: rgba(46, 232, 165, 0.05); --input-bg: #0A0F1E; --select-arrow-color: %2364748B; } /* ============ LIGHT THEME ============ */ [data-theme="light"] { --primary: #00A870; --primary-dark: #007F55; --primary-glow: rgba(0, 168, 112, 0.12); --primary-glow-strong: rgba(0, 168, 112, 0.22); --secondary: #0284C7; --bg-page: #F5F5F0; --bg-dark: #F5F5F0; /* alias kept for backward compat with inline styles */ --bg-card: #FFFFFF; --bg-card-2: #ECEEE9; --bg-card-hover: #F0FAF5; --border: #D8DDD6; --border-light: #C5CCBF; --text: #1A2314; --text-muted: #6B7A62; --text-light: #4A5C42; --gradient-primary: linear-gradient(135deg, #00A870 0%, #0284C7 100%); --gradient-hero: linear-gradient(135deg, #E8F5EE 0%, #EDF4FF 50%, #E8F5EE 100%); --gradient-section: linear-gradient(180deg, #F5F5F0 0%, #ECEEE9 100%); --shadow-glow: 0 0 40px rgba(0, 168, 112, 0.1); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08); --shadow-nav: 0 2px 20px rgba(0,0,0,0.1); --nav-bg: rgba(255, 255, 255, 0.88); --nav-bg-scrolled: rgba(255, 255, 255, 0.98); --spec-row-hover: rgba(0, 168, 112, 0.05); --input-bg: #F5F5F0; --select-arrow-color: %236B7A62; } /* ============ RESET ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-page); color: var(--text); line-height: 1.6; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; height: auto; } ul { list-style: none; } /* ============ SCROLLBAR ============ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-page); } ::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 3px; } /* ============ THEME TOGGLE ============ */ /* Wrapper: flanking "Light" and "Dark" labels around the pill */ .theme-toggle-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; user-select: none; } /* Labels hidden — toggle pill only */ .theme-toggle-wrap .tl-label { display: none; } /* The