:root{--brand-green:#1f8e4f;--brand-green-600:#177542;--brand-blue:#0e7490;--bg:#f7fafc;--text:#1f2937;--card:#ffffff;--border:#e5e7eb;--payslip-accent:#1f8e4f;--payslip-accent-light:#ecfdf5;--payslip-section-bg:#f9fafb;--payslip-total-bg:#f0f4f8;--payslip-final-bg:#e2e8f0;--payslip-final-border:#cbd5e0}[data-theme=classic]{--payslip-accent:#1f8e4f;--payslip-accent-light:#ecfdf5;--payslip-section-bg:#f9fafb;--payslip-total-bg:#f0f4f8;--payslip-final-bg:#dcfce7;--payslip-final-border:#86efac}[data-theme=corporate]{--payslip-accent:#1e40af;--payslip-accent-light:#dbeafe;--payslip-section-bg:#f8fafc;--payslip-total-bg:#e0e7ff;--payslip-final-bg:#c7d2fe;--payslip-final-border:#6366f1}[data-theme=minimal]{--payslip-accent:#374151;--payslip-accent-light:#f3f4f6;--payslip-section-bg:#f9fafb;--payslip-total-bg:#e5e7eb;--payslip-final-bg:#d1d5db;--payslip-final-border:#6b7280}[data-theme=modern]{--payslip-accent:#0d9488;--payslip-accent-light:#ccfbf1;--payslip-section-bg:#f0fdfa;--payslip-total-bg:#99f6e4;--payslip-final-bg:#5eead4;--payslip-final-border:#14b8a6}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}.container{max-width:1100px;margin:0 auto;padding:24px}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 4px 20px #0000000a}h1{color:var(--brand-green);margin:0 0 8px;font-size:28px}.subtitle{color:#4b5563;margin-bottom:24px}.grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}@media (max-width: 900px){.grid{grid-template-columns:1fr}}label{font-weight:600;font-size:14px;display:block;margin-bottom:6px}input,select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:#fff}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.btn{background:var(--brand-green);color:#fff;border:none;padding:12px 16px;border-radius:10px;font-weight:600;cursor:pointer}.btn:hover{background:var(--brand-green-600)}.toolbar{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}.payslip{max-width:800px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px}.titlebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:12px}.muted{color:#6b7280;font-size:12px}.table{width:100%;border-collapse:collapse;margin-top:8px}.table th,.table td{border:1px solid var(--border);padding:8px;text-align:left;font-size:14px}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#ecfdf5;color:var(--brand-green);font-weight:700;font-size:12px}.headerbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.link{color:var(--brand-blue);text-decoration:none;font-weight:600}.footer{margin-top:10px;font-size:12px;color:#6b7280}.collapsible.active{border-color:#07c;box-shadow:0 0 5px #0077cc4d}.grid{display:flex;gap:1rem;flex-wrap:wrap}.grid.maximized .collapsible{flex:1 1 100%}.collapsible{flex:1 1 48%;border:1px solid #ccc;padding:1rem;border-radius:6px;transition:all .3s ease}.collapsible.expanded{flex:1 1 100%;box-shadow:0 0 8px #0077cc4d;border-color:#07c}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.toggle-button,.maximize-button{background-color:#07c;color:#fff;border:none;padding:.4rem .8rem;cursor:pointer;border-radius:4px;font-size:.9rem;transition:background-color .3s ease}.toggle-button:hover,.maximize-button:hover{background-color:#005fa3}.floating-toggle{position:fixed;bottom:20px;right:20px;background-color:#07c;color:#fff;border:none;padding:.6rem 1rem;border-radius:6px;font-size:1rem;cursor:pointer;box-shadow:0 2px 6px #0003;z-index:1000;transition:background-color .3s ease}.floating-toggle:hover{background-color:#005fa3}.custom-item-form{display:flex;gap:.5rem;margin-bottom:1rem}.custom-item-list{list-style:none;padding:0}.custom-item-list li{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.custom-item-list input{padding:.3rem;font-size:.9rem;width:120px}.type-tag{font-size:.8rem;padding:.2rem .5rem;background-color:#eee;border-radius:4px;text-transform:capitalize}.custom-item-list button{background:none;border:none;cursor:pointer;font-size:1rem}.feedback-form{background-color:#fff;padding:2rem 1rem;border-top:1px solid #ddd;margin-top:2rem}.feedback-form h3{text-align:center;margin-bottom:1rem;color:#333}.feedback-form form{display:flex;flex-direction:column;max-width:500px;margin:0 auto;gap:1rem}.feedback-form input,.feedback-form textarea{padding:.75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem}.feedback-form button{padding:.75rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.feedback-form button:hover{background-color:#0056b3}.feedback-form .status{text-align:center;margin-top:1rem;color:green;font-weight:700}.theme-selector{display:flex;align-items:center;gap:8px;margin-bottom:12px}.theme-selector label{font-weight:600;font-size:14px;margin-bottom:0}.theme-selector select{width:auto;padding:6px 12px;font-size:14px}.btn-secondary{background:#6b7280;color:#fff;border:none;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;font-size:14px}.btn-secondary:hover{background:#4b5563}.btn-print{background:#07c;color:#fff;border:none;padding:12px 16px;border-radius:10px;font-weight:600;cursor:pointer}.btn-print:hover{background:#005fa3}@media print{body *{visibility:hidden}#payslip-capture,#payslip-capture *{visibility:visible}#payslip-capture{position:absolute;left:0;top:0;width:100%;max-width:none;padding:20px;margin:0;border:none;box-shadow:none}.payslip{max-width:none;border:none;box-shadow:none}.toolbar,.section-header,.toggle-button,.maximize-button,.floating-toggle,.headerbar,.feedback-form,.theme-selector,nav{display:none!important}}.export-dropdown{position:relative;display:inline-block}.export-btn{display:flex;align-items:center;gap:6px}.dropdown-arrow{font-size:10px}.export-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:160px;z-index:1000;margin-top:4px}.export-menu-item{position:relative}.export-menu-btn{width:100%;padding:10px 14px;text-align:left;background:none;border:none;cursor:pointer;font-size:14px;display:flex;justify-content:space-between;align-items:center;color:var(--text)}.export-menu-btn:hover{background:#f3f4f6}.export-menu-item:first-child .export-menu-btn{border-radius:8px 8px 0 0}.export-menu-item:last-child .export-menu-btn{border-radius:0 0 8px 8px}.submenu-arrow{font-size:10px;color:#9ca3af}.export-submenu{position:absolute;left:100%;top:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:150px;margin-left:4px}.export-submenu-btn{width:100%;padding:10px 14px;text-align:left;background:none;border:none;cursor:pointer;font-size:14px;color:var(--text)}.export-submenu-btn:hover{background:#f3f4f6}.export-submenu-btn:first-child{border-radius:8px 8px 0 0}.export-submenu-btn:last-child{border-radius:0 0 8px 8px}.appearance-selectors{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}.selector-group{display:flex;align-items:center;gap:8px}.selector-group label{font-weight:600;font-size:14px;margin-bottom:0}.selector-group select{width:auto;padding:6px 12px;font-size:14px}.modern-template{font-family:Inter,system-ui,sans-serif}.modern-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--payslip-accent-light)}.modern-company{display:flex;align-items:center;gap:12px}.modern-logo{height:50px;object-fit:contain}.modern-logo-placeholder{width:50px;height:50px;background:var(--payslip-accent-light);color:var(--payslip-accent);display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700;font-size:11px}.modern-company-name{font-size:18px;font-weight:700;color:var(--payslip-accent)}.modern-company-address{font-size:12px;color:#6b7280}.modern-badge{background:var(--payslip-accent);color:#fff;padding:8px 16px;border-radius:20px;font-weight:700;font-size:12px;letter-spacing:1px}.modern-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.modern-info-card{background:var(--payslip-accent-light);padding:16px;border-radius:12px}.modern-info-label{font-size:11px;text-transform:uppercase;color:#6b7280;letter-spacing:.5px;margin-bottom:4px}.modern-info-value{font-size:16px;font-weight:600;color:var(--text)}.modern-info-sub{font-size:12px;color:#6b7280;margin-top:2px}.modern-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.modern-column{border:1px solid var(--border);border-radius:12px;overflow:hidden}.modern-column-header{background:var(--payslip-section-bg);padding:12px 16px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--payslip-accent)}.modern-column-content{padding:12px 16px}.modern-line-item{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border-bottom:1px solid #f3f4f6}.modern-line-item:last-of-type{border-bottom:none}.modern-line-total{display:flex;justify-content:space-between;padding:12px 0 4px;font-weight:700;font-size:14px;border-top:2px solid var(--payslip-accent-light);margin-top:8px}.modern-net-pay{display:flex;justify-content:space-between;align-items:center;background:var(--payslip-final-bg);border:2px solid var(--payslip-final-border);border-radius:12px;padding:20px 24px;font-size:20px;font-weight:700;color:var(--payslip-accent)}.modern-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.modern-disclaimer{font-size:11px;color:#9ca3af}.modern-qr{opacity:.8}.retail-template{font-family:Courier New,Courier,monospace;max-width:380px;margin:0 auto;font-size:13px}.retail-header{text-align:center;margin-bottom:12px}.retail-logo{height:40px;margin-bottom:8px}.retail-company-name{font-size:16px;font-weight:700;text-transform:uppercase;color:var(--payslip-accent)}.retail-address{font-size:11px;color:#6b7280}.retail-divider{border-top:1px dashed var(--border);margin:12px 0}.retail-divider-double{border-top:3px double var(--payslip-accent);margin:12px 0}.retail-info-row{display:flex;justify-content:space-between;padding:2px 0;font-size:12px}.retail-section-title{font-weight:700;font-size:12px;margin:8px 0 4px;color:var(--payslip-accent)}.retail-line-item{display:flex;align-items:baseline;padding:3px 0}.retail-line-item span:first-child{white-space:nowrap}.retail-line-item span:last-child{white-space:nowrap;font-weight:600}.retail-dots{flex:1;border-bottom:1px dotted #9ca3af;margin:0 4px 4px}.retail-subtotal{display:flex;justify-content:space-between;font-weight:700;border-top:1px solid var(--border);margin-top:4px;background:var(--payslip-total-bg);padding:6px 4px}.retail-net-pay{display:flex;justify-content:space-between;font-size:16px;font-weight:700;padding:8px 4px;background:var(--payslip-final-bg);color:var(--payslip-accent)}.retail-footer{text-align:center;margin-top:12px}.retail-qr{margin-bottom:8px}.retail-disclaimer{font-size:10px;color:#9ca3af}.gov-template{font-family:Times New Roman,Times,serif;font-size:13px}.gov-header{text-align:center;margin-bottom:16px;padding-bottom:12px;border-bottom:3px double var(--payslip-accent)}.gov-title{font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--payslip-accent);margin-bottom:8px}.gov-logo{height:50px;margin-bottom:8px}.gov-seal{display:inline-block;width:60px;height:60px;border:2px solid var(--payslip-accent);border-radius:50%;line-height:56px;text-align:center;font-size:10px;font-weight:700;color:var(--payslip-accent)}.gov-section{margin-bottom:16px}.gov-section-header{background:var(--payslip-section-bg);border:1px solid var(--border);border-bottom:none;padding:8px 12px;font-weight:700;font-size:12px;letter-spacing:1px}.gov-section-content{border:1px solid var(--border);padding:12px}.gov-field-row{display:flex;gap:16px;margin-bottom:8px}.gov-field-row:last-child{margin-bottom:0}.gov-field{flex:1}.gov-field-label{font-weight:600;margin-right:8px}.gov-field-value{color:var(--text)}.gov-table{width:100%;border-collapse:collapse}.gov-table th,.gov-table td{border:1px solid var(--border);padding:8px;text-align:left;font-size:12px}.gov-table th{background:var(--payslip-section-bg);font-weight:700}.gov-code-col{width:60px}.gov-taxable-col,.gov-category-col{width:80px}.gov-amount-col{width:100px;text-align:right}.gov-code{font-family:Courier New,monospace;font-size:11px}.gov-center{text-align:center}.gov-right{text-align:right}.gov-total-row{background:var(--payslip-total-bg);font-weight:700}.gov-summary{border:1px solid var(--border);padding:12px}.gov-summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}.gov-summary-net{display:flex;justify-content:space-between;padding:12px 0 6px;font-size:16px;font-weight:700;border-top:2px solid var(--payslip-final-border);margin-top:8px;color:var(--payslip-accent)}.gov-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.gov-footer-left{font-size:11px;color:#6b7280}.gov-ref{font-family:Courier New,monospace;margin-bottom:2px}.gov-generated{margin-bottom:4px}.gov-disclaimer{font-style:italic}.gov-qr{opacity:.8}@media print{.appearance-selectors{display:none!important}.retail-template{max-width:100%}}.premium-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.5px}.credits-badge{display:inline-block;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.5px;cursor:default}.nav-link{color:#1f8e4f;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;transition:background .2s}.nav-link:hover{background:#f0fdf4}.upgrade-link{display:inline-block;background:linear-gradient(135deg,#1f8e4f,#166534);color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s}.upgrade-link:hover{transform:translateY(-1px);box-shadow:0 4px 12px #1f8e4f4d}.premium-toolbar{display:flex;gap:12px;margin-top:16px;padding:16px;background:#f0fdf4;border-radius:10px;border:1px solid #bbf7d0}.premium-btn{padding:10px 18px;background:#1f8e4f;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}.premium-btn:hover{background:#166534}.upgrade-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:16px 20px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:10px;border:1px solid #bae6fd;flex-wrap:wrap}.upgrade-banner span{color:#0369a1;font-size:14px}.upgrade-btn{display:inline-block;padding:10px 20px;background:linear-gradient(135deg,#1f8e4f,#166534);color:#fff;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s;white-space:nowrap}.upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #1f8e4f4d}@media (max-width: 600px){.upgrade-banner{flex-direction:column;text-align:center}.upgrade-btn{width:100%;text-align:center}.premium-toolbar{flex-direction:column}.premium-btn{width:100%}}@media print{.premium-toolbar,.upgrade-banner,.premium-badge,.upgrade-link,.site-footer{display:none!important}}.site-footer{text-align:center;padding:24px 16px;margin-top:32px;border-top:1px solid var(--border);color:#6b7280;font-size:14px}.site-footer a{color:var(--brand-green);text-decoration:none;font-weight:600}.site-footer a:hover{text-decoration:underline}.form-section{background:#f9fafb;border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:16px}.form-section-title{margin:0 0 16px;font-size:15px;font-weight:700;color:var(--brand-green);padding-bottom:8px;border-bottom:2px solid var(--brand-green)}.custom-item-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.custom-item-add input[type=text],.custom-item-add input[type=number]{flex:1;min-width:100px}.custom-item-add select{width:auto;min-width:100px}.taxable-checkbox{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;white-space:nowrap}.taxable-checkbox input[type=checkbox]{width:auto}.btn-add{background:var(--brand-green);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:600;cursor:pointer;white-space:nowrap}.btn-add:hover{background:var(--brand-green-600)}.btn-delete{background:#ef4444;color:#fff;border:none;padding:8px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}.btn-delete:hover{background:#dc2626}.custom-items-list{list-style:none;padding:0;margin:16px 0 0}.custom-items-list li{display:flex;gap:8px;align-items:center;padding:12px;background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;flex-wrap:wrap}.custom-items-list li:last-child{margin-bottom:0}.custom-items-list input[type=text],.custom-items-list input[type=number]{flex:1;min-width:80px}.custom-items-list select{width:auto;min-width:100px}@media (max-width: 600px){.custom-item-add,.custom-items-list li{flex-direction:column;align-items:stretch}.custom-item-add input,.custom-item-add select,.custom-items-list input,.custom-items-list select,.btn-add,.btn-delete{width:100%}}