@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.topbar{position:sticky;top:0;z-index:50;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:60px}.topbar-brand{display:flex;align-items:center;gap:10px;background:none;padding:0;font-size:18px;font-weight:700;color:var(--color-text)}.topbar-brand .brand-icon{width:28px;height:28px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center}.topbar-brand .brand-icon svg{width:16px;height:16px;color:#fff}.topbar-user{display:flex;align-items:center;gap:12px}.avatar{width:32px;height:32px;border-radius:50%;background:var(--color-primary-soft);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.user-email{color:var(--color-text-muted);font-size:14px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.user-email{display:none}}.auth-container{display:flex;height:100vh;width:100vw;overflow:hidden}.auth-left{flex:0 0 60%;background:linear-gradient(135deg,#0f172a,#1e293b);position:relative;display:flex;flex-direction:column;justify-content:center;padding:4rem;color:#fff}.auth-left:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:20px 20px;opacity:.5;pointer-events:none}.auth-brand{display:flex;align-items:center;gap:12px;position:absolute;top:40px;left:40px}.brand-icon{width:32px;height:32px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center}.brand-icon svg{width:18px;height:18px;color:#fff}.auth-brand h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.5px}.auth-tagline{font-size:40px;font-weight:700;line-height:1.2;margin-top:60px;margin-bottom:40px;max-width:480px;z-index:1}.auth-benefits{display:flex;flex-direction:column;gap:16px;z-index:1}.benefit-card{display:flex;align-items:center;gap:16px;background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);padding:16px 20px;border-radius:12px;width:fit-content;min-width:300px;animation:slideUp .5s ease backwards}.benefit-card:nth-child(1){animation-delay:.1s}.benefit-card:nth-child(2){animation-delay:.2s}.benefit-card:nth-child(3){animation-delay:.3s}.benefit-card svg{width:24px;height:24px;color:#818cf8}.benefit-card span{font-weight:500;font-size:16px}.auth-right{flex:0 0 40%;background:var(--color-surface);display:flex;align-items:center;justify-content:center;padding:2rem}.auth-form-wrapper{width:100%;max-width:380px;animation:slideUp .4s ease}.mobile-header{display:none;text-align:center;margin-bottom:2rem}.mobile-header h1{margin:0 0 8px;color:var(--color-primary)}.mobile-header p{margin:0;color:var(--color-text-muted)}.tabs{display:flex;position:relative;margin-bottom:32px;border-bottom:2px solid var(--color-border)}.tab{flex:1;background:none;color:var(--color-text-muted);font-size:16px;padding:12px 0;border-radius:0}.tab.active{color:var(--color-text)}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:2px;background:var(--color-primary);transition:transform .3s ease}.tab-indicator.right{transform:translate(100%)}.auth-form{display:flex;flex-direction:column;gap:20px}.input-group{position:relative}.input-group input{padding-top:20px;padding-bottom:6px}.input-group label{position:absolute;left:14px;top:14px;color:var(--color-text-muted);transition:all .2s ease;pointer-events:none;font-size:14px}.input-group input:focus~label,.input-group input:not(:placeholder-shown)~label{top:6px;font-size:11px;color:var(--color-primary)}.full-width{width:100%;padding:12px;font-size:16px;margin-top:8px}.forgot-password{text-align:center;margin-top:8px}.forgot-password a{color:var(--color-text-muted);text-decoration:none;font-size:14px}.forgot-password a:hover{color:var(--color-text);text-decoration:underline}@media(max-width:900px){.auth-left{display:none}.auth-right{flex:1}.mobile-header{display:block}}.stat-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}.stat-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}.stat-value{font-size:26px;font-weight:700;line-height:1}.stat-label{font-size:13px;color:var(--color-text-muted)}.stat-dot{width:9px;height:9px;border-radius:50%}.stat-dot.pending{background:var(--status-pending)}.stat-dot.partially_paid{background:var(--status-partial)}.stat-dot.overdue{background:var(--status-overdue)}.stat-dot.paid{background:var(--status-paid)}@media(max-width:900px){.stat-cards{grid-template-columns:repeat(2,1fr)}}.amount-input{position:relative;display:flex;align-items:center}.amount-input .prefix{position:absolute;left:12px;color:var(--color-text-muted);font-weight:500;pointer-events:none}.amount-input input{padding-left:28px}.payment-preview{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:10px 12px;font-size:13px}.filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.chips{display:flex;gap:8px;flex-wrap:wrap}.search-input{flex:1;min-width:200px}.sort-select{width:auto;min-width:190px}.empty-state{text-align:center;padding:56px 24px;display:flex;flex-direction:column;align-items:center}.empty-state h3{font-size:18px;margin-bottom:6px}.empty-state p{margin:0 0 4px}.empty-illustration{width:64px;height:64px;border-radius:16px;background:var(--color-primary-soft);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px}.empty-illustration svg{width:32px;height:32px}.actions-cell{position:relative}.action-menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md);min-width:180px;z-index:10;padding:4px;overflow:hidden}.menu-item{display:block;width:100%;text-align:left;background:none;padding:9px 12px;border-radius:6px;font-weight:400;color:var(--color-text);justify-content:flex-start}.menu-item:hover{background:var(--color-bg)}.menu-item.danger{color:var(--color-danger)}.menu-item.danger:hover{background:var(--status-overdue-bg)}.menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5}.order-cards{display:flex;flex-direction:column;gap:12px}.order-card{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm);cursor:pointer}.order-card.overdue{border-left-color:var(--status-overdue)}.desktop-only{display:block}.mobile-only{display:none}@media(max-width:720px){.desktop-only{display:none}.mobile-only{display:flex}.filter-bar{flex-direction:column;align-items:stretch}.sort-select{width:100%}}.order-form .form-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}.order-form .form-col{display:flex;flex-direction:column;gap:20px;min-width:0}.form-grid{display:grid;grid-template-columns:1fr 200px;gap:16px}.line-items{display:flex;flex-direction:column;gap:10px}.li-header,.li-row{display:grid;grid-template-columns:1fr 80px 150px 110px 40px;gap:10px;align-items:center}.li-header{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}.li-cell.total{font-weight:600}.li-delete:hover{color:var(--color-danger)}.add-line{width:100%;margin-top:14px;padding:12px;background:none;border:2px dashed var(--color-border);border-radius:var(--radius);color:var(--color-text-muted);font-weight:500}.add-line:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-bg)}.summary-panel{position:sticky;top:84px}.summary-lines{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:6px;font-size:13px}.summary-lines li{display:flex;justify-content:space-between;color:var(--color-text)}.summary-divider{height:1px;background:var(--color-border);margin:8px 0}.summary-total{display:flex;justify-content:space-between;font-size:20px;font-weight:700;margin-bottom:12px}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}@media(max-width:900px){.order-form .form-layout{grid-template-columns:1fr}.summary-panel{position:static}}@media(max-width:640px){.form-grid{grid-template-columns:1fr}.li-header{display:none}.li-row{grid-template-columns:1fr 40px;grid-template-areas:"desc actions" "qty price" "total total";gap:8px}.li-cell.desc{grid-area:desc}.li-cell.actions{grid-area:actions}.li-cell.qty{grid-area:qty}.li-cell.price{grid-area:price}.li-cell.total{grid-area:total;text-align:right}}.detail-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}.detail-header h2{font-size:24px}.detail-layout{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start;margin-top:20px}.detail-main,.detail-side{display:flex;flex-direction:column;gap:20px;min-width:0}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.info-grid>div{display:flex;flex-direction:column;gap:4px}.line-totals{margin-top:16px;display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--color-border)}.line-totals .total-row{font-size:16px;font-weight:700}.progress-label{text-align:center;font-size:13px;color:var(--color-text-muted);margin:8px 0 16px}.summary-rows{display:flex;flex-direction:column;gap:8px;font-size:14px}.timeline{list-style:none;margin:0;padding:0}.timeline-item{position:relative;padding:0 0 20px 24px}.timeline-item:before{content:"";position:absolute;left:5px;top:14px;bottom:-6px;width:2px;background:var(--color-border)}.timeline-item:last-child:before{display:none}.timeline-dot{position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:var(--color-success);border:2px solid var(--color-surface);box-shadow:0 0 0 2px var(--color-success)}.timeline-note{font-style:italic;font-size:13px;margin:4px 0 0}@media(max-width:900px){.detail-layout{grid-template-columns:1fr}}@media(max-width:520px){.info-grid{grid-template-columns:1fr}}:root{--color-primary: #4F46E5;--color-primary-hover: #4338CA;--color-primary-soft: rgba(79, 70, 229, .1);--color-success: #059669;--color-success-hover: #047857;--color-warning: #D97706;--color-danger: #DC2626;--color-danger-hover: #B91C1C;--color-bg: #F8FAFC;--color-surface: #FFFFFF;--color-text: #0F172A;--color-text-muted: #64748B;--color-border: #E2E8F0;--color-border-strong: #CBD5E1;--status-pending: #D97706;--status-pending-bg: #FEF3C7;--status-partial: #2563EB;--status-partial-bg: #DBEAFE;--status-paid: #059669;--status-paid-bg: #D1FAE5;--status-overdue: #DC2626;--status-overdue-bg: #FEE2E2;--radius: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08);--shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);--font-family: "Inter", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{margin:0;letter-spacing:-.01em}input,button,textarea,select{font-family:inherit;font-size:14px}input:not([type=checkbox]):not([type=radio]):not([type=date]),textarea,select{border-radius:var(--radius);border:2px solid var(--color-border);padding:10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;width:100%;background:var(--color-surface);color:var(--color-text)}input:focus,textarea:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4f46e526}input.error,textarea.error,select.error{border-color:var(--color-danger)}input.error:focus,textarea.error:focus{box-shadow:0 0 0 3px #dc262626}input[type=date]{border-radius:var(--radius);border:2px solid var(--color-border);padding:9px 12px;outline:none;background:var(--color-surface);width:100%}input[type=date]:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4f46e526}.error-text{color:var(--color-danger);font-size:12px;margin-top:4px}.helper-text{color:var(--color-text-muted);font-size:12px;margin-top:4px}.field{display:flex;flex-direction:column;gap:2px}.field>label{font-size:13px;font-weight:500;color:var(--color-text)}button{cursor:pointer;border:none;border-radius:var(--radius);padding:10px 16px;font-weight:500;transition:background-color .15s ease,transform .1s ease,opacity .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}button.primary{background-color:var(--color-primary);color:#fff}button.primary:hover:not(:disabled){background-color:var(--color-primary-hover)}button.success{background-color:var(--color-success);color:#fff}button.success:hover:not(:disabled){background-color:var(--color-success-hover)}button.danger{background-color:var(--color-danger);color:#fff}button.danger:hover:not(:disabled){background-color:var(--color-danger-hover)}button.ghost{background:transparent;color:var(--color-text-muted);border:2px solid var(--color-border)}button.ghost:hover:not(:disabled){background:var(--color-bg);color:var(--color-text);border-color:var(--color-border-strong)}button.subtle{background:var(--color-primary-soft);color:var(--color-primary)}button.subtle:hover:not(:disabled){background:#4f46e52e}button.sm{padding:6px 10px;font-size:13px}button:disabled{opacity:.6;cursor:not-allowed}button.full-width{width:100%}button.icon-btn{padding:8px;background:transparent;color:var(--color-text-muted);border-radius:var(--radius)}button.icon-btn:hover:not(:disabled){background:var(--color-bg);color:var(--color-text)}.full-width{width:100%}.container{max-width:1200px;margin:0 auto;padding:0 24px}.page{padding:24px 0 64px}.breadcrumb{display:flex;align-items:center;gap:8px;color:var(--color-text-muted);font-size:14px;margin-bottom:16px}.breadcrumb a{color:var(--color-text-muted)}.section-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}.card-title{font-size:16px;font-weight:600;margin-bottom:16px}.muted{color:var(--color-text-muted)}.text-right{text-align:right}.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}.bold{font-weight:600}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}.badge.pending{color:var(--status-pending);background:var(--status-pending-bg)}.badge.partially_paid{color:var(--status-partial);background:var(--status-partial-bg)}.badge.paid{color:var(--status-paid);background:var(--status-paid-bg)}.badge.overdue{color:var(--status-overdue);background:var(--status-overdue-bg)}.badge.overdue .dot{animation:pulse 1.6s ease-in-out infinite}.chip{padding:6px 14px;border-radius:999px;border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.chip:hover{border-color:var(--color-border-strong);color:var(--color-text)}.chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.skeleton{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px}.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface)}table.data{width:100%;border-collapse:collapse;font-size:14px}table.data th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);padding:12px 16px;border-bottom:1px solid var(--color-border);background:var(--color-bg)}table.data td{padding:14px 16px;border-bottom:1px solid var(--color-border);vertical-align:middle}table.data tbody tr:last-child td{border-bottom:none}table.data tbody tr{transition:background-color .1s ease}table.data tbody tr:hover{background:#f8fafc}table.data tr.row-overdue td:first-child{box-shadow:inset 4px 0 0 var(--status-overdue)}.cell-customer{font-weight:600}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;animation:fadeIn .15s ease}.modal{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:modalIn .2s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0}.modal-header h3{font-size:18px}.modal-body{padding:20px;display:flex;flex-direction:column;gap:16px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:0 20px 20px}.context-line{color:var(--color-text-muted);font-size:13px;margin:-4px 0 4px}.banner{padding:10px 14px;border-radius:var(--radius);font-size:13px;font-weight:500}.banner.warning{background:var(--status-pending-bg);color:#92400e}.banner.error{background:var(--status-overdue-bg);color:#991b1b}.toast-container{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:200;max-width:360px}.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius);background:var(--color-surface);box-shadow:var(--shadow-md);border-left:4px solid var(--color-text-muted);animation:toastIn .2s ease;font-size:14px}.toast.success{border-left-color:var(--color-success)}.toast.error{border-left-color:var(--color-danger)}.toast.info{border-left-color:var(--color-primary)}.toast .toast-close{margin-left:auto;padding:0 4px;color:var(--color-text-muted);background:none;font-size:16px;line-height:1}.progress{height:12px;border-radius:999px;background:var(--color-border);overflow:hidden}.progress>div{height:100%;background:var(--color-success);border-radius:999px;transition:width .4s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes toastIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.shake{animation:shake .4s ease}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}.spinner.dark{border-color:#0f172a33;border-top-color:var(--color-text)}.fullscreen-loader{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg)}.fullscreen-loader .spinner{width:28px;height:28px;border-color:#4f46e533;border-top-color:var(--color-primary)}