@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+Thai:wght@100..900&display=swap');
        
        html { scroll-behavior: smooth; }
        
        body {
            font-family: 'Noto Sans Thai', 'Inter', sans-serif;
            background-color: #0d111c; /* สีพื้นหลังหลัก */
            color: #e5e7eb; /* สีตัวอักษรหลัก */
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .text-accent { color: #00e0a5; }
        .bg-accent { background-color: #00e0a5; }
        .border-accent { border-color: #00e0a5; }

        /* การปรับแต่ง Input field สำหรับธีมมืด */
        .form-input, .form-select {
            background-color: #1f2937; /* สีพื้นหลัง input */
            color: #e5e7eb; /* สีตัวอักษร input */
            border: 1px solid #374151; /* สีขอบ input */
            border-radius: 0.5rem; /* 8px */
            transition: border-color 0.3s, box-shadow 0.3s;
            width: 100%;
            padding: 0.75rem 1rem; /* 12px 16px */
        }
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #00e0a5; /* สีขอบ (accent) เมื่อ focus */
            box-shadow: 0 0 0 3px rgba(0, 224, 165, 0.3); /* Glow effect */
        }
        .form-input::placeholder {
            color: #6b7280; /* สี placeholder */
        }
        
        /* ปุ่มหลัก (Primary Button) */
        .btn-primary {
            background-color: #00e0a5;
            color: #0d111c; /* สีตัวอักษรบนปุ่ม (สีเข้ม) */
            font-weight: 700;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 224, 165, 0.2);
            border: 2px solid #00e0a5;
        }
        .btn-primary:hover {
            background-color: #00c792;
            box-shadow: 0 6px 20px rgba(0, 224, 165, 0.3);
            transform: translateY(-2px);
        }
        .btn-primary:disabled {
            background-color: #374151;
            color: #9ca3af;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
            border-color: #374151;
        }
        
        /* ปุ่มรอง (Secondary Button) */
        .btn-secondary {
            background-color: #374151;
            color: #e5e7eb;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            border: 2px solid #374151;
        }
        .btn-secondary:hover {
            background-color: #4b5563;
            border-color: #6b7280;
        }
        
        /* ปุ่มลบ (Danger Button) */
        .btn-danger {
            background-color: transparent;
            color: #f87171;
            padding: 0.5rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
        }
        .btn-danger:hover {
            background-color: rgba(248, 113, 113, 0.1);
            color: #ef4444;
        }

        /* Card (กรอบเนื้อหา) */
        .card {
            background-color: #182033; /* สีพื้นหลัง Card */
            border: 1px solid #374151; /* สีขอบ Card */
            border-radius: 0.75rem; /* 12px */
            padding: 1.5rem; /* 24px */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        /* Tabs (ปุ่มเลือก Manual/CSV) */
        .tab-btn {
            padding: 0.75rem 1rem;
            font-weight: 600;
            color: #9ca3af;
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
        }
        .tab-btn.active {
            color: #00e0a5;
            border-bottom-color: #00e0a5;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }

        /* Animation */
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Modal (สำหรับ AI Prompt) */
        .modal {
            display: none; /* ซ่อนไว้ก่อน */
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
        }
        .modal-content {
            position: relative;
            margin: 5% auto;
            padding: 2rem;
            width: 90%;
            max-width: 600px;
        }

        /* [NEW] Mobile Menu Style */
        #mobile-menu {
            transition: max-height 0.3s ease-in-out;
            max-height: 0;
            overflow: hidden;
        }
        
        /* สไตล์สำหรับพิมพ์ */
        @media print {
            body {
                background-color: #ffffff !important;
                color: #000000 !important;
                font-family: 'Noto Sans Thai', sans-serif !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            
            /* 1. ซ่อนทุกอย่างยกเว้น main */
            body > * {
                display: none !important;
            }
            body > main {
                display: block !important;
            }

            /* 2. ใน main ซ่อนทุกอย่างยกเว้น #app-container */
            main > * {
                display: none !important;
            }
            main > #app-container {
                display: block !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            /* 3. ใน #app-container ซ่อนทุกอย่างยกเว้น #report-section */
            #app-container > * {
                display: none !important;
            }
            #app-container > #report-section {
                display: block !important;
                padding: 0 !important;
                margin: 0 !important;
                box-shadow: none !important;
                border: none !important;
            }
            
            /* 4. ใน #report-section ซ่อนทุกอย่างยกเว้น #report-output */
            #report-section > * {
                display: none !important;
            }
            #report-section > #report-output {
                display: block !important;
            }
            
            /* 5. ตั้งค่า #report-output สำหรับพิมพ์ */
            #report-output {
                background-color: #ffffff !important;
                color: #000000 !important;
                box-shadow: none !important;
                border: none !important;
                padding: 1cm !important; /* ตั้งค่าขอบกระดาษ A4 */
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 0 !important;
            }

            /* 6. กู้คืนสไตล์ที่จำเป็นภายใน #report-output */
            h1, h2, h3 {
                color: #000000 !important;
            }
            
            .kpi-box {
                background-color: #f3f4f6 !important;
                border: 1px solid #d1d5db !important;
            }
            .kpi-box p {
                color: #000000 !important;
            }
            
            table, th, td {
                border-color: #d1d5db !important;
                color: #000000 !important;
            }
            th {
                background-color: #e5e7eb !important;
            }
            
            /* ตรวจสอบว่าสีข้อความในตารางไม่ถูกบังคับ */
            #report-table-body td {
                color: #000000 !important;
            }
            /* กู้คืนสีสำหรับตัวเลข */
            #report-table-body .text-blue-600 { color: #2563eb !important; }
            #report-table-body .text-green-700 { color: #047857 !important; }
            #report-table-body .text-green-600 { color: #16a34a !important; }
            #report-table-body .text-red-600 { color: #dc2626 !important; }
            #report-table-body .text-gray-400 { color: #9ca3af !important; }
            
            /* จัดการกราฟ */
            #forecast-chart {
                max-width: 100% !important;
                height: auto !important;
                display: block !important;
            }
        }