@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap');
        
        :root {
            /* Global Colors & Styles */
            --primary-color: #222222; /* New Modern Blue */
            --secondary-color: #00b4d8; 
            --dark-bg: #111827; 
            --dark-card: #1f2937;
            --radius-main: 18px; /* Slightly smoother radius */
            --page-width-mm: 210;
            --page-height-mm: 297;
             user-select: none;
        }
        
        body { font-family: 'Poppins', sans-serif; transition: background-color 0.3s; overflow-x: hidden;  user-select: none; }
        
        /* --- Dark Mode/UI Styles --- */
        .light body { background-color: #f3f4f6; color: #1f2937; }
        .dark body { background-color: var(--dark-bg); color: #f3f4f6; }
        .dark .card { background-color: var(--dark-card); }
        .dark input, .dark select, .dark textarea { 
            background-color: #374151; 
            border-color: #4b5563; 
            color: #f3f4f6; 
        }
        .light input, .light select, .light textarea { color: #1f2937; }
        .dark .item-input-group { background-color: #374151; border-color: #4b5563; }
        
        /* --- Buttons & Accent --- */
        .creative-btn { 
            background-color: #e34f05; 
            transition: background-color 0.2s, transform 0.1s;
        }
        .creative-btn:hover { background-color: #b03e04; transform: translateY(-1px); }
        
        .clear-btn { background-color: #dc2626; } 
        .clear-btn:hover { background-color: #b91c1c; }
        
        /* --- Theme Toggle (Modern) --- */
        #theme-toggle { 
            position: fixed; 
            bottom: 20px; 
            right: 20px; 
            z-index: 100; 
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s, color 0.3s;
        }
        .light #theme-toggle { background-color: #374151; color: white; }
        .dark #theme-toggle { background-color: #fca311; color: var(--dark-bg); }

        /* --- History Button & Sidebar --- */
        #history-toggle {
            position: fixed;
            bottom: 80px;
            right: 20px;
            z-index: 100;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #3b82f6;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: transform 0.2s;
        }
        #history-toggle:hover { transform: scale(1.1); }

        #history-sidebar {
            position: fixed;
            top: 0;
            right: -350px;
            width: 320px;
            height: 100%;
            background: white;
            box-shadow: -5px 0 15px rgba(0,0,0,0.1);
            transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
            z-index: 1000;
            overflow-y: auto;
            padding: 20px;
        }
        .dark #history-sidebar { background: var(--dark-card); color: white; }
        #history-sidebar.open { right: 0; }
        .history-item {
            padding: 12px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.2s;
        }
        .dark .history-item { border-bottom-color: #374151; }
        .history-item:hover { background: #f9f9f9; }
        .dark .history-item:hover { background: #374151; }
        
        /* --- Tab Styles (New for Combined UI) --- */
        .tab-button {
            padding: 12px 20px;
            font-weight: 600;
            border-bottom: 3px solid transparent;
            transition: all 0.2s ease-in-out;
            color: #4b5563;
        }
        .dark .tab-button {
             color: white;
        }
        .tab-button.active {
            color: #e34f05;
            border-bottom-color: #e34f05;
        }
        
        
        .tab-button {
            color: white;
            border-bottom-color: white;
        }
        .dark .tab-button.active {
             color: #e34f05; /* Lighter color for dark mode active tab */
             border-bottom-color: #e34f05;
        }

        /* --- Invoice/Quotation PDF Styles (Re-used/Modified) --- */
        #invoice-preview {
            width: 794px; 
            background-color: white;
            padding: 50px;
            position: absolute; 
            left: -9999px; 
            top: -9999px; 
            box-sizing: border-box; 
            height: auto !important; 
        }
        .invoice-header-section {
            background-color: var(--primary-color);
            color: white;
            padding: 30px;
            border-radius: var(--radius-main); 
            margin-bottom: 30px;
        }
        
        /* --- Receipt/Voucher PDF Styles (Re-used/Modified) --- */
        #receipt-preview {
            width: 794px; 
            height: 1123px; 
            background-color: white;
            padding: 50px;
            position: absolute; 
            left: -9999px; 
            top: -9999px; 
            box-sizing: border-box; 
        }
        .receipt-header-section {
            background-color: var(--primary-color);
            color: white;
            padding: 25px; 
            border-radius: 15px; 
            margin-bottom: 25px;
        }
        #pdf-receipt-a5-template {
            width: 794px; 
            height: 561px; 
            overflow: hidden; 
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .a5-content-frame {
            border: 4px solid var(--primary-color); 
            border-radius: 15px; 
            padding: 30px; 
            box-sizing: border-box;
            height: 100%;
        }
        .amount-value {
            font-size: 1.5rem; 
            font-weight: 700;
            padding: 5px 0;
            border-bottom: 2px solid var(--primary-color);
            width: 80%; 
            display: block;
        }
        .text-xxs { font-size: 0.625rem; }
        .pdf-content-line { border-bottom: none; } /* Override original styles for cleaner look */

        /* Install Button Style */
        .install-pwa-btn {
            background-color: #fca311; /* Amber/Orange */
            color: white;
            transition: background-color 0.3s;
        }
        .install-pwa-btn:hover {
             background-color: #e4910a;
        }