*{margin:0;padding:0;box-sizing:border-box}@media screen and (max-width:768px){input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],select,textarea{font-size:16px!important}}:root{--primary-color:#3498db;--primary-hover:#2980b9;--secondary-color:#95a5a6;--secondary-hover:#7f8c8d;--success-color:#27ae60;--success-hover:#229954;--danger-color:#e74c3c;--danger-hover:#c0392b;--text-color:#333;--text-light:#7f8c8d;--bg-color:#f5f5f5;--card-bg:white;--border-radius:10px;--shadow:0 2px 10px rgba(0,0,0,0.1);--transition:all 0.3s ease;--spacing-xs:5px;--spacing-sm:10px;--spacing-md:15px;--spacing-lg:20px;--spacing-xl:30px}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--bg-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.header{background:white;padding:30px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.1)}.header h1{color:#2c3e50;font-size:2.5rem}.header p{color:#7f8c8d;font-size:1.1rem}.main-content{display:flex;flex-direction:column;gap:30px}.input-section,.preview-section{background:white;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.1)}.input-section h2,.preview-section h2{color:#2c3e50;margin-bottom:20px;font-size:1.5rem}.form-group{margin-bottom:20px}.input-row{display:flex;gap:15px;align-items:end;flex-wrap:wrap}.input-field{flex:1;min-width:150px}.input-field label{display:block;margin-bottom:5px;font-weight:600;color:#34495e}.input-field input{width:100%;padding:12px;border:2px solid #ddd;border-radius:6px;font-size:16px;transition:border-color .3s ease}.input-field input:focus{outline:none;border-color:#3498db}.button-field{flex-shrink:0}.btn{padding:12px 24px;border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-primary{background-color:#3498db;color:white}.btn-primary:hover{background-color:#2980b9;transform:translateY(-2px)}.btn-secondary{background-color:#95a5a6;color:white}.btn-secondary:hover{background-color:#7f8c8d}.btn-success{background-color:#27ae60;color:white}.btn-success:hover{background-color:#229954;transform:translateY(-2px)}.btn-danger{background-color:#e74c3c;color:white}.btn-danger:hover{background-color:#c0392b}.btn-small{padding:6px 12px;font-size:14px}.action-buttons,.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);flex-wrap:wrap;gap:var(--spacing-md);border-bottom:1px solid #eee;padding-bottom:var(--spacing-md)}.empty-state{text-align:center;padding:var(--spacing-xl) var(--spacing-lg);color:var(--text-light);background-color:rgba(0,0,0,.02);border-radius:var(--border-radius);border:1px dashed #ddd}.empty-state p{font-size:1.1rem}.empty-state p,.preview-table{margin-bottom:var(--spacing-lg)}.preview-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--border-radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}.preview-table td,.preview-table th{padding:var(--spacing-md) var(--spacing-lg);text-align:left;border-bottom:1px solid #eee}.preview-table th{background-color:#f9f9f9;font-weight:600;color:#2c3e50;position:sticky;top:0;z-index:10}.preview-table tr:last-child td{border-bottom:none}.preview-table tr:hover{background-color:rgba(52,152,219,.05)}.payment-section{background:white;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.1);border-left:4px solid #27ae60}.payment-section h2{color:#2c3e50;margin-bottom:20px;font-size:1.5rem}.payment-row{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap}.payment-field{flex:1;min-width:250px}.payment-field label{display:block;margin-bottom:8px;font-weight:600;color:#34495e;font-size:16px}.payment-field input{width:100%;padding:15px;border:2px solid #ddd;border-radius:8px;font-size:18px;transition:border-color .3s ease}.payment-field input:focus{outline:none;border-color:#27ae60}.payment-summary{flex:1;min-width:250px;background:#f8f9fa;padding:20px;border-radius:8px;border:1px solid #e9ecef}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #dee2e6;font-size:16px}.summary-item:last-child{border-bottom:none}.total-remaining{background:#e8f5e8;margin:10px -20px -20px;padding:15px 20px;border-radius:0 0 8px 8px;font-weight:700;font-size:18px;color:#27ae60}.settings-section{background:white;padding:25px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.1);border-left:4px solid #3498db;margin-bottom:var(--spacing-xl)}.settings-section h2{color:#2c3e50;margin-bottom:20px;font-size:1.5rem}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.setting-field{display:flex;flex-direction:column;margin-bottom:var(--spacing-md)}.setting-field label{margin-bottom:var(--spacing-xs);font-weight:500;color:#2c3e50;font-size:.95rem}.setting-field input,.setting-field textarea{width:100%;padding:var(--spacing-md);border:1px solid #ddd;border-radius:var(--border-radius);transition:var(--transition);font-family:inherit;font-size:1rem}.setting-field input:focus,.setting-field textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(52,152,219,.2)}.setting-field textarea{resize:vertical;min-height:80px}table{width:100%;border-collapse:collapse;margin-top:10px}td,th{padding:12px;text-align:left;border-bottom:1px solid #ddd}th{font-weight:600;color:#2c3e50}tbody tr:hover,th{background-color:#f8f9fa}tfoot td{font-weight:600;background-color:#ecf0f1;border-top:2px solid #bdc3c7}.invoice-print{background:white;padding:40px;max-width:800px;margin:0 auto;font-family:Courier New,monospace;color:#000}.invoice-header{text-align:center;margin-bottom:30px}.invoice-header h1{font-size:28px;margin-bottom:15px;font-weight:700;letter-spacing:2px}.invoice-info{margin-bottom:15px}.invoice-info p{margin:5px 0;font-size:14px}.customer-info{margin-bottom:15px;text-align:left;border:1px solid #333;padding:10px;background-color:#f9f9f9}.customer-info p{margin:3px 0;font-size:12px}.customer-info p:first-child{font-weight:700;margin-bottom:8px}.invoice-divider{border-bottom:2px dashed #333;margin:25px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table td,.invoice-table th{padding:10px 8px;text-align:left;border-bottom:1px solid #333;font-size:14px}.invoice-table th{font-weight:700;background-color:transparent;border-bottom:2px solid #333}.invoice-total{text-align:right;margin:30px 0;padding:15px;border:2px solid #333}.invoice-total h2{font-size:20px;font-weight:700;letter-spacing:1px}.invoice-summary{margin:30px 0;padding:20px;border:2px solid #333}.summary-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:16px}.total-line{border-top:2px solid #333;margin-top:10px;padding-top:15px;font-weight:700;font-size:18px}.invoice-footer{text-align:center;margin-top:40px;font-size:12px;border-top:1px solid #333;padding-top:20px}.invoice-footer p{margin:5px 0}@media print{body{background:white!important;color:black!important}.invoice-print{padding:20px;font-size:12px}.invoice-header h1{font-size:24px}.invoice-info p{font-size:12px}.invoice-table td,.invoice-table th{font-size:12px;padding:8px 4px}.invoice-total h2{font-size:16px}.invoice-footer{font-size:10px}}@media (max-width:768px){.container{padding:10px;width:100%}.header{padding:12px;margin-bottom:15px}.header h1{font-size:1.5rem}.header p{font-size:.9rem}.input-row{flex-direction:column;gap:10px}.input-field{min-width:100%}.button-field{width:100%;margin-top:5px}.button-field .btn{width:100%;padding:10px 16px;justify-content:center}.form-group{margin-bottom:15px}.section-header{flex-direction:column;align-items:stretch;gap:10px}.action-buttons{justify-content:space-between;width:100%}.settings-grid{grid-template-columns:1fr;gap:15px}.payment-row{flex-direction:column;gap:15px}.payment-field,.payment-summary{min-width:100%}.preview-table{overflow-x:auto;-webkit-overflow-scrolling:touch}table{min-width:500px}.input-section,.payment-section,.preview-section,.settings-section{margin-bottom:15px;padding:15px}}@media (max-width:480px){.header h1{font-size:1.5rem}.header p{font-size:.9rem}.input-section h2,.payment-section h2,.preview-section h2,.settings-section h2{font-size:1.2rem;margin-bottom:15px}.input-field label,.payment-field label,.setting-field label{font-size:.9rem}.input-field input,.payment-field input,.setting-field input,.setting-field textarea{padding:10px;font-size:14px}.btn{padding:8px 12px}.btn,.summary-item{font-size:14px}.total-remaining{font-size:16px}}@media print{@page{margin:.5cm}.invoice-print{padding:10px;max-width:100%}}@media (max-width:480px){.header{padding:20px}.input-section,.preview-section{padding:15px}.btn{padding:10px 16px;font-size:14px}table{font-size:12px}td,th{padding:6px 2px}}@media (max-width:768px){.payment-fields,.settings-grid{grid-template-columns:1fr}.header h1{font-size:2rem}.section{padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.form-control{padding:var(--spacing-sm)}.btn{padding:var(--spacing-sm) var(--spacing-md)}.preview-table{font-size:.85rem;overflow-x:auto;display:block;width:100%}.preview-table table{width:100%;min-width:400px}.preview-table td,.preview-table th{padding:8px 6px}.section-header{padding-bottom:var(--spacing-sm);margin-bottom:var(--spacing-md)}.section-header h2{font-size:1.3rem}.form-group label{font-size:.9rem}.setting-field{margin-bottom:12px}.setting-field label{margin-bottom:4px;font-size:.9rem}.setting-field input,.setting-field textarea{padding:10px}}.mobile-nav{display:none;position:fixed;bottom:0;left:0;width:100%;background:white;box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:1000;padding:var(--spacing-xs) 0;border-top:1px solid #eee}.nav-buttons{display:flex;justify-content:space-around}.nav-btn{flex:1;padding:var(--spacing-md) var(--spacing-xs);text-align:center;border:none;background:none;font-size:.85rem;color:var(--text-light);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);transition:var(--transition)}.nav-btn svg{width:20px;height:20px;margin-bottom:4px}.nav-btn.active{color:var(--primary-color);font-weight:500}.nav-btn.active:after{content:"";display:block;width:5px;height:5px;background-color:var(--primary-color);border-radius:50%;margin:var(--spacing-xs) auto 0}.desktop-sections{display:block}.mobile-sections{display:none}.quick-preview{background-color:var(--card-bg);border-radius:var(--border-radius);padding:var(--spacing-md);margin:var(--spacing-md) 0;box-shadow:var(--shadow);border-left:3px solid var(--primary-color)}.quick-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.quick-preview-items{margin-top:var(--spacing-sm)}.quick-preview-item{padding:var(--spacing-xs) 0;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:2px}.quick-preview-name{font-weight:500;color:var(--text-color)}.quick-preview-details{font-size:.85rem;color:var(--text-light)}.quick-preview-more{text-align:center;padding:var(--spacing-xs) 0;font-size:.85rem;color:var(--primary-color);font-weight:500}.quick-preview-content{font-size:.9rem;color:var(--text-light)}.quick-preview-actions{display:flex;justify-content:flex-end;margin-top:var(--spacing-sm);gap:var(--spacing-sm)}@media (max-width:768px){.mobile-nav{display:block}.desktop-sections{display:none}.mobile-sections{display:block}.container{padding-bottom:90px}.header,.section{padding:var(--spacing-lg)}.header h1{font-size:2rem}}.payment-options{width:100%;margin-bottom:20px}.payment-options h3{margin-bottom:10px;font-size:16px;font-weight:600;color:#2c3e50}.radio-group{display:flex;gap:20px;flex-wrap:wrap}.radio-option{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 15px;border:2px solid #ddd;border-radius:8px;transition:all .3s ease;background:white}.radio-option:hover{border-color:#3498db;background:#f8f9fa}.radio-option input[type=radio]{margin:0;cursor:pointer}.radio-option input[type=radio]:checked+span{font-weight:600;color:#2c3e50}.radio-option:has(input[type=radio]:checked){border-color:#27ae60;background:#e8f5e8}.lunas-badge{background:#27ae60;color:white;padding:4px 12px;border-radius:20px;font-weight:700;font-size:14px}.total-paid{background:#e8f5e8;margin:10px -20px -20px;padding:15px 20px;border-radius:0 0 8px 8px;font-weight:700;font-size:18px;color:#27ae60}@media (max-width:768px){.radio-group{flex-direction:column;gap:10px}.radio-option{width:100%;justify-content:flex-start}}.desktop-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;width:100%}.desktop-column{display:flex;flex-direction:column;gap:30px}.input-section,.payment-section,.preview-section,.settings-section{height:100%;transition:transform .2s,box-shadow .2s;border-radius:12px}.input-section:hover,.payment-section:hover,.preview-section:hover,.settings-section:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.15)}.input-section{border-left:4px solid #3498db}.preview-section{border-left:4px solid #f39c12}.header{background:linear-gradient(135deg,#3498db,#2980b9);color:white;padding:40px;border-radius:12px;margin-bottom:30px;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.1)}.header h1{color:white;font-size:2.8rem;margin-bottom:10px;text-shadow:1px 1px 3px rgba(0,0,0,.2)}.header p{color:rgba(255,255,255,.9);font-size:1.2rem}