*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f0f2f5;color:#1a1a2e;line-height:1.5}.app{max-width:1400px;margin:0 auto;padding:24px}header{margin-bottom:24px}header h1{font-size:1.5rem;font-weight:700;color:#1a1a2e}.layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.form-panel{display:flex;flex-direction:column;gap:16px}fieldset{border:1px solid #e0e0e0;border-radius:10px;padding:16px;background:#fff}legend{font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:#555;padding:0 6px}input,textarea{display:block;width:100%;padding:8px 12px;margin-top:8px;border:1px solid #ddd;border-radius:6px;font-size:.9rem;font-family:inherit;transition:border-color .15s}input:focus,textarea:focus{outline:none;border-color:#4f6ef7;box-shadow:0 0 0 3px #4f6ef71a}label{font-size:.8rem;font-weight:500;color:#666}.row{display:flex;gap:12px}.field{flex:1}.field input{margin-top:4px}.line-item{display:grid;grid-template-columns:1fr 80px 100px 36px;gap:8px;align-items:center}.line-item+.line-item{margin-top:8px}.remove-item{background:none;border:1px solid #e0e0e0;border-radius:6px;color:#999;font-size:1.1rem;cursor:pointer;height:38px;margin-top:8px;transition:all .15s}.remove-item:hover{background:#fee;border-color:#e55;color:#c33}.btn-secondary{margin-top:12px;padding:8px 16px;background:#f5f5f5;border:1px dashed #ccc;border-radius:6px;cursor:pointer;font-size:.85rem;color:#555;transition:all .15s}.btn-secondary:hover{background:#eef;border-color:#4f6ef7;color:#4f6ef7}.btn-primary{width:100%;padding:14px;background:#4f6ef7;color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#3b5de7}.preview-panel{position:sticky;top:24px}.preview-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#999;margin-bottom:8px;font-weight:600}.invoice{background:#fff;border-radius:10px;padding:40px;box-shadow:0 2px 12px #0000000f;font-size:.85rem}.invoice-header{display:flex;justify-content:space-between;margin-bottom:32px}.company-info h2{font-size:1.2rem;color:#1a1a2e;margin-bottom:4px}.company-info p{color:#666;font-size:.8rem}.invoice-title h1{font-size:1.8rem;color:#4f6ef7;text-align:right;margin-bottom:8px}.meta-table{margin-left:auto;border-collapse:collapse}.meta-table td{padding:2px 0;font-size:.8rem}.meta-table td:first-child{color:#999;padding-right:16px;text-align:right}.meta-table td:last-child{font-weight:500}.bill-to{margin-bottom:24px}.bill-to .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#999;margin-bottom:4px}.bill-to .client-name{font-weight:600;font-size:.95rem}.bill-to p{color:#444;font-size:.8rem}.items-table{width:100%;border-collapse:collapse;margin-bottom:24px}.items-table th{background:#f8f9fa;text-align:left;padding:10px 12px;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#666;border-bottom:2px solid #eee}.items-table th:nth-child(2),.items-table th:nth-child(3),.items-table th:nth-child(4){text-align:right}.items-table td{padding:10px 12px;border-bottom:1px solid #f0f0f0}.items-table td:nth-child(2),.items-table td:nth-child(3),.items-table td:nth-child(4){text-align:right}.empty-row{text-align:center!important;color:#ccc;padding:24px!important}.totals{display:flex;justify-content:flex-end;margin-bottom:24px}.totals table{border-collapse:collapse;min-width:200px}.totals td{padding:6px 0}.totals td:first-child{color:#666;padding-right:24px}.totals td:last-child{text-align:right;font-weight:500}.total-row td{font-size:1.1rem;font-weight:700!important;color:#1a1a2e;border-top:2px solid #1a1a2e;padding-top:10px}.invoice-notes{border-top:1px solid #f0f0f0;padding-top:16px;color:#888;font-size:.8rem;white-space:pre-wrap}.invoice-notes:empty{display:none}@media(max-width:900px){.layout{grid-template-columns:1fr}.preview-panel{position:static}}