/* --- 1. GLOBAL RESET --- */
        :root { --primary: #007bff; --success: #28a745; --danger: #dc3545; --dark: #343a40; --light: #f8f9fa; }
        body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #eef2f5; padding: 30px; margin: 0; color: #333; }
        
        .main-container { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; max-width: 1300px; margin: 0 auto; }
        
        /* --- 2. LEFT PANEL (CONTROLS) --- */
        .panel { background: white; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); padding: 30px; }
        .form-panel { width: 100%; max-width: 420px; height: fit-content; }
        
        h2 { margin-top: 0; font-size: 1.5rem; color: var(--dark); border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
        h4 { margin: 18px 0 8px; font-size: 0.85rem; text-transform: uppercase; color: #888; letter-spacing: 0.5px; font-weight: 700; }
        
        label { display: block; font-size: 0.8rem; font-weight: 600; color: #555; margin-bottom: 5px; margin-top: 10px; }
        input, select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; box-sizing: border-box; transition: 0.2s; }
        input:focus, select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); }
        
        .row { display: flex; gap: 10px; }
        .col { flex: 1; }

        /* Mode Selector */
        .mode-selector { background: var(--light); padding: 12px; border-radius: 8px; display: flex; gap: 20px; border: 1px solid #eee; margin-bottom: 10px; }
        .mode-selector label { margin: 0; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--dark); }
        .mode-selector input { width: auto; margin: 0; }

        /* GST Toggle Section */
        .gst-wrapper { background: #f1f8ff; border: 1px solid #cfe2ff; border-radius: 8px; padding: 15px; margin: 15px 0; }
        .switch-row { display: flex; justify-content: space-between; align-items: center; }
        .switch { position: relative; display: inline-block; width: 46px; height: 24px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: var(--primary); }
        input:checked + .slider:before { transform: translateX(22px); }

        #gstDetails { display: none; margin-top: 12px; border-top: 1px solid #bad6fc; padding-top: 12px; }
        .error-msg { color: var(--danger); font-size: 0.75rem; display: none; margin-top: 4px; font-weight: bold; }

        /* Buttons */
        .btn-download { width: 100%; background: var(--success); color: white; border: none; padding: 16px; font-size: 1.1rem; font-weight: bold; border-radius: 8px; cursor: pointer; margin-top: 20px; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2); }
        .btn-download:hover { background: #218838; transform: translateY(-2px); }
        .btn-refresh { background: #6c757d; color: white; border: none; padding: 5px 10px; font-size: 0.75rem; border-radius: 4px; cursor: pointer; margin-left: auto; }

        /* --- 3. PREVIEW CONTAINER --- */
        .preview-wrapper { width: 100%; max-width: 750px; background: #555; padding: 20px; border-radius: 12px; display: flex; justify-content: center; overflow: hidden; }
        #invoice-preview { width: 100%; min-height: 850px; background: white; position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.3); transition: 0.3s ease; }

        /* Common Elements */
        .inv-header { display: flex; justify-content: space-between; margin-bottom: 40px; }
        .inv-body { padding: 0 40px; }
        .inv-table { width: 100%; border-collapse: collapse; margin: 30px 0; }
        .inv-table th, .inv-table td { padding: 12px 15px; text-align: left; }
        .inv-totals { display: flex; flex-direction: column; align-items: flex-end; padding-top: 20px; }
        .total-row { display: flex; justify-content: space-between; width: 280px; margin-bottom: 8px; font-size: 0.95rem; }
        .grand-total { font-size: 1.4rem; font-weight: bold; margin-top: 10px; border-top: 2px solid #333; padding-top: 10px; width: 280px; display: flex; justify-content: space-between; }

        /* --- 4. TEMPLATE STYLES --- */
        
        /* T1: Classic */
        .theme-classic { padding: 50px; color: #333; }
        .theme-classic .inv-header { border-bottom: 2px solid #eee; padding-bottom: 20px; }
        .theme-classic h1 { margin: 0; color: #444; }
        .theme-classic .inv-table th { background: #f8f9fa; border-bottom: 2px solid #ddd; }
        .theme-classic .inv-table td { border-bottom: 1px solid #eee; }

        /* T2: Modern Blue */
        .theme-modern { padding: 0; color: #444; }
        .theme-modern .inv-header { background: #1a2a6c; color: white; padding: 50px; align-items: center; }
        .theme-modern h1 { margin: 0; letter-spacing: 2px; font-size: 2.5rem; }
        .theme-modern .header-left h2 { color: white !important; } 
        .theme-modern .header-left div { color: #b2c2df !important; }
        .theme-modern .inv-table th { background: #1a2a6c; color: white; }
        .theme-modern .inv-table td { border-bottom: 1px solid #f0f0f0; }
        .theme-modern .grand-total { border-top: none; color: #1a2a6c; font-size: 1.6rem; }

        /* T3: Bold Red */
        .theme-bold { padding: 40px; border: 12px solid #222; background: #fffbfb; }
        .theme-bold .inv-header { border-bottom: 6px solid #c0392b; padding-bottom: 20px; }
        .theme-bold h1 { color: #c0392b; text-transform: uppercase; font-size: 3.5rem; margin: 0; line-height: 1; }
        .theme-bold .inv-table th { background: #222; color: white; text-transform: uppercase; letter-spacing: 1px; }
        .theme-bold .inv-table td { border: 2px solid #eee; font-weight: 600; }
        .theme-bold .grand-total { background: #c0392b; color: white; padding: 15px; border: none; }

        /* T4: Elegant Serif (NEW) */
        .theme-elegant { padding: 60px; font-family: 'Georgia', serif; color: #222; border: 6px double #bbb; }
        .theme-elegant .inv-header { flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid #ccc; padding-bottom: 30px; }
        .theme-elegant .header-right { text-align: center; margin-top: 20px; }
        .theme-elegant h1 { font-size: 2rem; color: #333; letter-spacing: 3px; margin-bottom: 10px; font-style: italic; }
        .theme-elegant .inv-table th { border-top: 1px solid #333; border-bottom: 1px solid #333; background: white; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; padding: 15px; }
        .theme-elegant .inv-table td { padding: 15px; }
        .theme-elegant .grand-total { border-top: 4px double #333; font-family: 'Georgia', serif; }

        /* T5: Creative Teal (NEW) */
        .theme-creative { padding: 0; font-family: 'Trebuchet MS', sans-serif; color: #444; }
        .theme-creative .inv-header { padding: 50px; border-bottom: 5px solid #009688; }
        .theme-creative h1 { color: #009688; font-size: 3rem; margin: 0; text-transform: lowercase; }
        .theme-creative .inv-table { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .theme-creative .inv-table th { background: #009688; color: white; }
        .theme-creative .inv-table tr:nth-child(even) { background: #f2f9f8; }
        .theme-creative .grand-total { color: #009688; border-top: 2px dashed #009688; }

        /* T6: Tech Grid (NEW) */
        .theme-tech { padding: 40px; font-family: 'Courier New', Courier, monospace; background: #fff; color: #000; }
        .theme-tech .inv-header { border-bottom: 1px dashed #000; padding-bottom: 20px; }
        .theme-tech h1 { font-size: 2rem; text-transform: uppercase; }
        .theme-tech .inv-table { border: 1px solid #000; margin: 20px 0; }
        .theme-tech .inv-table th { border: 1px solid #000; background: #eee; text-transform: uppercase; }
        .theme-tech .inv-table td { border: 1px solid #000; }
        .theme-tech .grand-total { border: 2px solid #000; padding: 5px 10px; background: #eee; }

        /* --- 5. HISTORY --- */
        .history-container { width: 100%; max-width: 1200px; background: white; padding: 30px; margin: 40px auto; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        .history-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .history-table th { background: #343a40; color: white; padding: 12px; text-align: left; }
        .history-table td { padding: 12px; border-bottom: 1px solid #eee; }
        .badge { background: #d4edda; color: #155724; padding: 4px 10px; border-radius: 50px; font-size: 0.8rem; font-weight: bold; }

        /* --- 4. INFO SECTION (NEW) --- */
        .info-container { width: 100%; max-width: 1200px; margin: 50px auto 30px; text-align: center; }
        .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 25px; }
        .feature-card { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: left; border-left: 5px solid var(--primary); transition: 0.3s; }
        .feature-card:hover { transform: translateY(-5px); }
        .feature-card h3 { margin: 0 0 10px; color: var(--dark); font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
        .feature-card p { margin: 0; font-size: 0.9rem; color: #666; line-height: 1.6; }