*{box-sizing:border-box}.wp-payslip-container{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#e2e8f0;background:#1a202c;min-height:100vh;padding:20px;margin:0;width:95%;max-width:none;margin:0 auto}:root{--bg-primary:#1a202c;--bg-secondary:#2d3748;--bg-tertiary:#4a5568;--bg-input:#2d3748;--bg-button:#4299e1;--bg-button-hover:#3182ce;--text-primary:#e2e8f0;--text-secondary:#a0aec0;--text-muted:#718096;--border-color:#4a5568;--border-input:#4a5568;--border-focus:#4299e1;--shadow:0 4px 6px -1px rgba(0, 0, 0, 0.3);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.4)}.payslip-generator-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:30px;width:100%;max-width:none;margin:0;background:var(--bg-primary);padding:30px;border-radius:12px;box-shadow:var(--shadow-lg)}.generator-left{display:flex;flex-direction:column;gap:30px}.generator-right{display:flex;flex-direction:column;gap:30px}.section{background:var(--bg-secondary);border-radius:8px;padding:20px;border:1px solid var(--border-color)}.section h3{color:var(--text-primary);font-size:1.1rem;font-weight:600;margin:0 0 15px 0;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.field-group{margin-bottom:15px}.field-group label{display:block;color:var(--text-primary);font-size:.9rem;font-weight:500;margin-bottom:5px}.field-group input,.field-group textarea,.field-group select{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-input);border-radius:6px;color:var(--text-primary);font-size:.9rem;transition:all 0.2s ease}.field-group input:focus,.field-group textarea:focus,.field-group select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px rgb(66 153 225 / .2)}.field-group input::placeholder,.field-group textarea::placeholder{color:var(--text-muted)}.checkbox-group{display:flex;align-items:center;gap:8px;margin-bottom:15px}.checkbox-group input[type="checkbox"]{width:auto;margin:0}.checkbox-group label{margin:0;font-size:.9rem;color:var(--text-primary)}.file-upload{display:flex;align-items:center;gap:10px}.file-upload input[type="file"]{display:none}.file-upload-btn{background:var(--bg-button);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background 0.2s ease}.file-upload-btn:hover{background:var(--bg-button-hover)}.file-name{color:var(--text-secondary);font-size:.8rem}.earnings-table,.deductions-table{width:100%;border-collapse:collapse;margin:15px 0}.earnings-table th,.deductions-table th{background:var(--bg-tertiary);color:var(--text-primary);padding:10px;text-align:left;font-size:.8rem;font-weight:600;border:1px solid var(--border-color)}.earnings-table td,.deductions-table td{padding:8px;border:1px solid var(--border-color);background:var(--bg-input)}.earnings-table input,.deductions-table input{background:#fff0;border:none;color:var(--text-primary);width:100%;padding:5px;font-size:.9rem}.earnings-table input:focus,.deductions-table input:focus{outline:none;background:var(--bg-tertiary)}.action-btn{background:var(--bg-button);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all 0.2s ease;display:flex;align-items:center;gap:5px}.action-btn:hover{background:var(--bg-button-hover);transform:translateY(-1px)}.remove-btn{background:#e53e3e;color:#fff;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all 0.2s ease}.remove-btn:hover{background:#c53030;transform:scale(1.1)}.drag-btn{background:var(--text-muted);color:#fff;border:none;width:24px;height:24px;border-radius:4px;cursor:grab;display:flex;align-items:center;justify-content:center;font-size:.8rem}.drag-btn:active{cursor:grabbing}.display-value{background:var(--bg-tertiary);color:var(--text-primary);padding:10px;border-radius:6px;font-weight:600;text-align:center;border:1px solid var(--border-color)}.generate-btn{background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border:none;padding:15px 30px;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:10px;margin:30px 0 0 0;width:100%;box-shadow:var(--shadow)}.generate-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.generate-btn:active{transform:translateY(0)}@media (max-width:1024px){.payslip-generator-wrapper{grid-template-columns:1fr;gap:20px;padding:20px}.generator-left,.generator-right{gap:20px}.bar-graph-container{grid-column:1}}@media (max-width:768px){.wp-payslip-container{padding:10px}.payslip-generator-wrapper{padding:15px}.section{padding:15px}.earnings-table,.deductions-table{font-size:.8rem;overflow-x:auto;display:block;white-space:nowrap}.earnings-table th,.deductions-table th,.earnings-table td,.deductions-table td{padding:6px;min-width:80px}.bar-graph{height:150px;gap:.5rem}.bar-label{font-size:.7rem}.bar-value{font-size:.8rem}.generate-btn{width:100%;margin:20px 0 0 0}}@media (max-width:480px){.wp-payslip-container{padding:5px}.payslip-generator-wrapper{padding:10px;gap:15px}.section{padding:10px;margin-bottom:15px}.field-group{margin-bottom:12px}.field-group input,.field-group textarea,.field-group select{padding:8px 10px;font-size:.85rem;width:100%;box-sizing:border-box}.earnings-table,.deductions-table{font-size:.75rem;min-width:100%}.earnings-table th,.deductions-table th,.earnings-table td,.deductions-table td{padding:4px;min-width:60px}.generate-btn{padding:12px 20px;font-size:1rem;width:100%;margin:15px 0 0 0}.bar-graph{height:120px;gap:.25rem}.bar-label{font-size:.65rem}.bar-value{font-size:.75rem}.display-value{font-size:.9rem;padding:8px}.file-upload{flex-direction:column;gap:5px}.file-upload-btn{width:100%;padding:8px}.checkbox-group{flex-direction:column;align-items:flex-start;gap:5px}}.action-buttons,#preview-payslip,#download-pdf,#email-payslip,#save-data,#load-data,#reset-form{display:none!important}.theme-toggle{display:none!important}.payslip-header{display:none!important}.bar-graph-container{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;margin:2rem 0;border:1px solid var(--border-color);grid-column:1 / -1}.bar-graph-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem 0;color:var(--text-primary);text-align:center}.bar-graph{display:flex;align-items:end;justify-content:space-between;height:200px;gap:1rem;padding:1rem 0}.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem}.bar{width:100%;border-radius:4px 4px 0 0;transition:all 0.3s ease;position:relative;min-height:20px}.bar:hover{opacity:.8;transform:scale(1.02)}.bar-gross{background:linear-gradient(135deg,#48bb78,#38a169)}.bar-deductions{background:linear-gradient(135deg,#e53e3e,#c53030)}.bar-tax{background:linear-gradient(135deg,#ed8936,#dd6b20)}.bar-net{background:linear-gradient(135deg,#667eea,#5a67d8)}.bar-label{font-size:.8rem;font-weight:500;color:var(--text-muted);text-align:center}.bar-value{font-size:.9rem;font-weight:600;color:var(--text-primary);text-align:center}.bar-tooltip{position:absolute;top:-40px;left:50%;transform:translateX(-50%);background:var(--bg-primary);color:var(--text-primary);padding:.5rem;border-radius:6px;font-size:.8rem;font-weight:500;box-shadow:var(--shadow);opacity:0;transition:opacity 0.3s ease;pointer-events:none;white-space:nowrap}.bar:hover .bar-tooltip{opacity:1}.modal{display:none!important}.loading-overlay{display:none!important}.btn:focus,.field-group input:focus,.field-group textarea:focus,.field-group select:focus{outline:2px solid var(--border-focus);outline-offset:2px}@media print{.wp-payslip-container{background:white!important;color:black!important}.payslip-generator-wrapper{grid-template-columns:1fr;gap:0;box-shadow:none}.section{box-shadow:none;border:1px solid #ccc}}