.form-header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border-radius:var(--radius)var(--radius)0 0;z-index:10;justify-content:space-between;align-items:center;margin:0;padding:1px 20px;display:flex;position:sticky;top:0;box-shadow:0 4px 6px -1px #0000001a}.form-header h2{letter-spacing:.5px;-webkit-text-fill-color:white;color:#fff;background:0 0;border:none;margin:0;padding:0;font-size:20px;font-weight:700;line-height:1.2}.download-btn-header{color:#fff;white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:2px solid #ffffff4d;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:42px;margin:9px 0;padding:6px 11px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;transition:all .3s;display:flex}.download-btn-header:hover{background:#ffffff40;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 6px 12px #0003}.download-btn-header:active{transform:translateY(0)}.download-btn-header svg{stroke:currentColor;flex-shrink:0;width:16px;height:16px;margin-left:-14px}.invoice-card.form-panel .invoice-btn{display:none!important}.invoice-card h3{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-text-fill-color:transparent;border-bottom:2px solid #0000;border-image:linear-gradient(90deg,var(--primary),transparent)1;-webkit-background-clip:text;background-clip:text;margin:14px -20px 8px;padding-bottom:6px;padding-left:20px;padding-right:20px;font-size:15px;font-weight:700;position:relative}.invoice-card h3:before{content:"";background:linear-gradient(90deg,var(--primary),var(--secondary));width:40px;height:2px;transition:width .3s;position:absolute;bottom:-2px;left:20px}.invoice-card h3:hover:before{width:100px}.invoice-card label{color:var(--text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:600;transition:color .2s;display:block}.file-upload-wrapper label{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}input,textarea,select{border:2px solid var(--border);background:#fff;border-radius:8px;width:100%;padding:8px 12px;font-family:inherit;font-size:13px;transition:all .3s}input::placeholder,textarea::placeholder{color:var(--muted);font-weight:400}input:focus,textarea:focus,select:focus{border-color:var(--primary);outline:none;transform:translateY(-1px);box-shadow:0 0 0 4px #6366f11a}input:hover,textarea:hover,select:hover{border-color:var(--primary)}textarea{resize:vertical;min-height:64px}.error{color:#ef4444;margin-top:3px;font-size:11px;font-weight:500;animation:.3s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.invoice-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;text-transform:uppercase;letter-spacing:1px;width:calc(100% - 40px);margin:16px 20px;padding:14px;font-size:14px;font-weight:700;position:relative;box-shadow:0 10px 20px #6366f14d}.invoice-btn:hover{background:linear-gradient(135deg,var(--primary-hover),var(--accent));transform:translateY(-2px);box-shadow:0 15px 30px #6366f166}.invoice-btn:active{transform:translateY(0)}.file-upload-wrapper{margin:6px 0;position:relative}.file-upload-box{border:2px dashed var(--border);cursor:pointer;background:linear-gradient(135deg,#fefeff,#f8fafc);border-radius:8px;flex-direction:row;justify-content:center;align-items:center;gap:10px;width:100%;height:45px;transition:all .3s;display:flex;position:relative;overflow:hidden}.file-upload-box:hover{border-color:var(--primary);background:linear-gradient(135deg,#fff,#f1f5f9);transform:translateY(-1px);box-shadow:0 4px 8px #2563eb1f}.file-upload-box svg{width:24px;height:24px;color:var(--primary);flex-shrink:0;transition:transform .3s}.file-upload-box:hover svg{transform:scale(1.05)}.file-upload-text{color:var(--primary);text-align:center;white-space:nowrap;font-size:12px;font-weight:600;line-height:1.2}.file-upload-box input[type=file]{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.file-upload-box.has-file{border-style:solid;border-color:var(--success);background-position:0;background-repeat:no-repeat;background-size:contain;justify-content:flex-start;padding-left:55px}.file-upload-box.has-file .file-upload-text{color:var(--success);background:0 0;position:static;transform:none}.file-upload-box.has-file svg{display:none}.qr-icon{width:24px!important;height:24px!important}.item-add-btn{background:linear-gradient(135deg,var(--success),#059669);color:#fff;flex:1;box-shadow:0 4px 12px #10b9814d}.item-add-btn svg{flex-shrink:0;width:18px;height:18px}.item-remove-btn{color:#dc2626;cursor:pointer;background:0 0;border:1px solid #fecaca;border-radius:8px;flex-shrink:0;padding:8px 14px;font-size:12px;font-weight:600;transition:all .3s}.item-remove-btn:hover{background:#b327a9;border-color:#dc2626;transform:translateY(-1px)}.item-add-btn{background:linear-gradient(135deg,var(--success),#059669)!important;color:#fff!important;cursor:pointer!important;opacity:1!important;visibility:visible!important;border:none!important;border-radius:8px!important;flex:1!important;justify-content:center!important;align-items:center!important;gap:8px!important;min-width:120px!important;padding:8px 14px!important;font-size:12px!important;font-weight:600!important;transition:all .3s!important;display:flex!important;box-shadow:0 4px 12px #10b9814d!important}.item-add-btn:hover{background:linear-gradient(135deg,#059669,#047857)!important;transform:translateY(-2px)!important;box-shadow:0 6px 16px #10b98166!important}.item-row{border:2px solid var(--border);background:linear-gradient(135deg,#fefeff,#f8fafc);border-radius:10px;margin-bottom:10px;padding:12px;transition:all .3s;position:relative}.item-row:before{content:"";background:linear-gradient(180deg,var(--primary),var(--secondary));opacity:0;border-radius:10px 0 0 10px;width:4px;transition:opacity .3s;position:absolute;top:0;bottom:0;left:0}.item-row:hover{border-color:var(--primary);transform:translate(4px);box-shadow:0 8px 16px #6366f126}.item-row:hover:before{opacity:1}.item-remove-btn{color:#b91c1c;background:#eff6f5;border:1px solid #fecaca}.item-remove-btn:hover{color:#fff;background:#dc2626;border-color:#b91c1c;transform:translateY(-1px)}.item-remove-btn:active{background:#b91c1c}.item-meta{color:var(--muted);font-size:11px;font-weight:500}.item-add-btn,.item-remove-btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .3s;display:flex}.item-add-btn{flex:1;box-shadow:0 4px 12px #10b9814d;background:linear-gradient(135deg,var(--success),#059669)!important;color:#fff!important}.item-add-btn:hover{box-shadow:0 6px 16px #10b98166;background:linear-gradient(135deg,#059669,#047857)!important;transform:translateY(-2px)!important}.form-header select,.invoice-card select{color:#1e293b;background:#fff}.form-header select option,.invoice-card select option{font-weight:500;color:#1e293b!important;background:#fff!important}.form-header select option:hover,.invoice-card select option:checked{color:#1e293b!important;background:#e0e7ff!important}.invoice>*{opacity:0}@keyframes typeReveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.invoice .header{animation:.6s ease-out .2s forwards typeReveal}.invoice .billing{animation:.6s ease-out .9s forwards typeReveal}.invoice .items{animation:.6s ease-out 1.6s forwards typeReveal}.invoice .lower-row{animation:.6s ease-out 2.3s forwards typeReveal}.invoice .payment{animation:.6s ease-out 3s forwards typeReveal}.invoice .terms{animation:.6s ease-out 3.7s forwards typeReveal}.invoice .footer{animation:.6s ease-out 4.4s forwards typeReveal}
:root{--bg:#f8fafc;--card:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--primary:#2563eb;--primary-hover:#1d4ed8;--secondary:#3b82f6;--accent:#60a5fa;--success:#10b981;--radius:12px;--shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--shadow-lg:0 25px 50px -12px #00000040}*{box-sizing:border-box}.invoice-page{background:linear-gradient(#f8fafc 0%,#f1f5f9 100%);min-height:100vh;padding:20px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;position:relative;overflow-x:hidden}.invoice-grid{z-index:1;grid-template-columns:minmax(0,1.5fr) minmax(550px,650px);gap:18px;max-width:none;height:calc(110vh - 40px);margin:0 auto;padding:0 20px;display:grid;position:relative}.invoice-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);flex-direction:column;height:100%;transition:box-shadow .3s;animation:.5s ease-out slideIn;display:flex;overflow:hidden}.invoice-card.invoice-preview{width:100%;max-width:800px}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.invoice-card:hover{box-shadow:0 20px 40px #0000001f}.invoice-card.form-panel{height:100%;padding-bottom:160px;overflow-y:auto}.invoice-card.form-panel::-webkit-scrollbar{width:8px}.invoice-card.form-panel::-webkit-scrollbar-track{background:#f1f5f9;border-radius:10px}.invoice-card.form-panel::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--secondary));border-radius:10px;transition:background .3s}.invoice-card.form-panel::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--primary-hover),var(--accent))}.invoice-card.form-panel>:not(.form-header){padding:0 20px}.invoice-card.form-panel>:first-child:not(.form-header){margin-top:20px}.invoice-card.invoice-preview{background:linear-gradient(135deg,#f8fafc,#e0e7ff);border-top:1px solid #e5e7eb;justify-content:center;align-items:flex-start;padding:12px;display:flex;position:relative;overflow-y:auto}.invoice-card.invoice-preview:before{content:"";pointer-events:none;background:linear-gradient(90deg,#ca72b2,#c187d3,#9333ea);width:100%;height:2px;position:absolute;top:0;left:0}.form-row{align-items:start;gap:12px;margin-bottom:10px;display:grid}.form-row.two-col{grid-template-columns:1fr 1fr}.form-row.three-col{grid-template-columns:1fr 1fr 1fr}.form-row>*{flex-direction:column;display:flex}.form-row>* label{align-items:center;height:19px;margin-bottom:4px;display:flex}.form-row>* label:empty{display:none}.form-row>* input,.form-row>* select,.form-row>* textarea{flex:1}.inline-field{flex-direction:column;gap:0;display:flex}.inline-field label{margin-bottom:4px}.inline-field input,.inline-field select,.inline-field textarea{margin:0}.dual-section{grid-template-columns:1fr 1fr;gap:12px;margin:12px 0;display:grid}.section-card{border:2px solid var(--border);background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:10px;grid-template-columns:1fr 1fr;gap:10px;padding:12px;transition:all .3s;display:grid;position:relative;overflow:hidden}.section-card:before{content:"";background:linear-gradient(90deg,var(--primary),var(--secondary));width:100%;height:3px;transition:transform .3s;position:absolute;top:0;left:0;transform:scaleX(0)}.section-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 16px #6366f126}.section-card:hover:before{transform:scaleX(1)}.section-card textarea{grid-column:1/-1}.items-container{margin-top:10px}.item-actions{border-top:1px dashed var(--border);align-items:center;gap:10px;width:100%;margin-top:12px;padding-top:8px;display:flex!important}.item-desc{grid-template-columns:3fr 1fr;gap:10px;margin-bottom:8px;display:grid}.item-desc>*{flex-direction:column;display:flex}.item-desc label:empty{display:none}.item-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.item-grid>*{flex-direction:column;display:flex}.item-grid label:empty{display:none}.item-card{border:2px solid var(--border);background:linear-gradient(135deg,#fefeff,#f8fafc);border-radius:10px;padding:12px;transition:all .3s}.item-card:hover{border-color:var(--success);box-shadow:0 8px 16px #10b98126}.item-card .form-row{grid-template-columns:1fr 1fr 1fr auto}.invoice-card.invoice-preview{align-items:flex-start!important;padding-top:0!important}.preview-scale{width:100%;max-width:800px;min-height:100%;margin:0 auto;padding-top:20px}@media (max-width:1400px){.invoice-grid{grid-template-columns:minmax(0,1fr) minmax(700px,800px);overflow:visible}}@media (max-width:1200px){.invoice-grid{grid-template-columns:1fr;height:auto}.invoice-card.invoice-preview{max-width:100%}}@media (max-width:768px){.invoice-page{padding:12px}.form-row.two-col,.form-row.three-col,.dual-section,.section-card,.item-desc,.item-grid{grid-template-columns:1fr}.invoice-btn{width:calc(100% - 32px);margin:16px}.form-header{text-align:center;flex-direction:column;gap:12px;padding:14px 16px;position:relative}.form-header h2{width:100%;font-size:18px}.download-btn-header{justify-content:center;width:100%;padding:12px}.invoice-card.form-panel>:first-child:not(.form-header){margin-top:16px}}.invoice-card.form-panel h3{margin-left:12px}.invoice-card.form-panel h3:before{left:12px}