@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--color-surface);color:var(--color-text-primary);min-height:100vh;font-family:Poppins,sans-serif;line-height:1.5;overflow-x:hidden}#root{background-color:var(--color-surface);min-height:100vh}img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul,ol{list-style:none}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit}input,textarea,select{border:none;outline:none;font-family:inherit}:root{--color-primary:#4a90d9;--color-primary-light:#ebf4ff;--color-primary-dark:#3572b0;--color-bg:#fff;--color-surface:#f5f9ff;--color-text-primary:#1a1a2e;--color-text-secondary:#6b7280;--color-border:#d1e3f8;--color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-success:#22c55e;--color-success-bg:#f0fdf4;--color-success-text:#15803d;--color-warning:#f59e0b;--color-warning-bg:#fffbeb;--color-warning-text:#b45309;--color-danger:#ef4444;--color-danger-bg:#fef2f2;--gradient-header:linear-gradient(135deg, #4a90d9 0%, #2563eb 100%);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:40px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--shadow-xs:0 1px 2px #0000000a;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001f;--shadow-card:0 2px 8px #4a90d914;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease}.app-container{background-color:var(--color-surface);width:100%;min-height:100vh;position:relative;overflow-x:hidden}h1{font-size:24px;font-weight:700;line-height:1.3}h2{font-size:20px;font-weight:700;line-height:1.3}h3{font-size:16px;font-weight:600;line-height:1.4}h4{font-size:14px;font-weight:600;line-height:1.4}p{font-size:14px;line-height:1.5}small{font-size:12px}.card{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--spacing-md)}.input-group{margin-bottom:var(--spacing-md)}.input-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm);font-size:11px;font-weight:600;display:block}.input-field{width:100%;color:var(--color-text-primary);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:14px 16px;font-size:14px}.input-field:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #2563eb1a}.input-field::placeholder{color:#9ca3af}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-full);transition:all var(--transition-fast);cursor:pointer;white-space:nowrap;padding:14px 24px;font-size:14px;font-weight:600;display:inline-flex}.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 4px 14px #2563eb4d}.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px #2563eb66}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--color-bg);color:var(--color-accent);border:1.5px solid var(--color-border)}.btn-secondary:hover{background:var(--color-primary-light);border-color:var(--color-accent)}.btn-danger{background:var(--color-danger-bg);color:var(--color-danger)}.btn-danger:hover{background:#fecaca}.btn-success{background:var(--color-success-bg);color:var(--color-success-text)}.btn-success:hover{background:#dcfce7}.btn-warning{background:var(--color-warning-bg);color:var(--color-warning-text)}.btn-warning:hover{background:#fef3c7}.btn-block{width:100%}.btn-sm{padding:8px 16px;font-size:12px}.btn-icon{border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:inline-flex}.badge{border-radius:var(--radius-full);letter-spacing:.3px;align-items:center;padding:4px 12px;font-size:11px;font-weight:600;display:inline-flex}.badge-lunas{background:var(--color-success-bg);color:var(--color-success-text)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning-text)}.fab{background:var(--color-accent);color:#fff;z-index:100;width:56px;height:56px;transition:all var(--transition-fast);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;bottom:88px;right:24px;box-shadow:0 6px 20px #2563eb66}.fab:hover{transform:scale(1.08);box-shadow:0 8px 28px #2563eb80}.fab:active{transform:scale(.95)}.header-gradient{background:var(--gradient-header);padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);color:#fff;border-radius:0 0 var(--radius-xl) var(--radius-xl)}.page-content{padding:var(--spacing-md) var(--spacing-md);padding-bottom:100px}.page-header{align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-md);background:var(--color-bg);z-index:50;display:flex;position:sticky;top:0}.page-header h2{font-size:18px;font-weight:700}.back-btn{width:36px;height:36px;color:var(--color-accent);cursor:pointer;transition:background var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.back-btn:hover{background:var(--color-primary-light)}::-webkit-scrollbar{width:0;height:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.animate-fade-in-up{animation:.4s forwards fadeInUp}.animate-fade-in{animation:.3s forwards fadeIn}.animate-slide-up{animation:.5s forwards slideUp}.animate-scale-in{animation:.3s forwards scaleIn}.page-transition{animation:.3s forwards pageFadeIn}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.login-page{width:100vw;min-height:100vh;padding:var(--spacing-lg);z-index:999;background:linear-gradient(160deg,#4a90d9 0%,#2563eb 50%,#1e40af 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0;overflow:hidden}.login-circle{background:#ffffff0f;border-radius:50%;position:absolute}.login-circle-1{width:300px;height:300px;top:-80px;right:-80px}.login-circle-2{background:#ffffff0a;width:200px;height:200px;bottom:-40px;left:-60px}.login-circle-3{background:#ffffff08;width:150px;height:150px;top:40%;left:-30px}.login-logo{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1;background:#ffffff26;border-radius:20px;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 20px;display:flex;position:relative}.login-title{color:#fff;z-index:1;margin-bottom:8px;font-size:26px;font-weight:800;position:relative}.login-subtitle{color:#fffc;z-index:1;margin-bottom:32px;font-size:14px;line-height:1.6;position:relative}.login-form{z-index:1;width:100%;max-width:340px;position:relative}.login-divider{align-items:center;gap:12px;margin-bottom:20px;display:flex}.login-divider span{color:#ffffff80;white-space:nowrap;font-size:12px}.login-divider:before,.login-divider:after{content:"";background:#fff3;flex:1;height:1px}.login-error{color:#fecaca;border-radius:var(--radius-md);text-align:center;background:#ef444426;border:1px solid #ef44444d;margin-bottom:16px;padding:10px 14px;font-size:13px}.login-input-group{margin-bottom:12px;position:relative}.login-input-icon{color:#fff6;pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.login-input-group input{border-radius:var(--radius-lg);color:#fff;width:100%;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff1f;border:1.5px solid #ffffff26;padding:16px 16px 16px 48px;font-size:14px}.login-input-group input::placeholder{color:#ffffff73}.login-input-group input:focus{background:#ffffff2e;border-color:#fff6;box-shadow:0 0 0 3px #ffffff14}.login-btn{border-radius:var(--radius-lg);width:100%;color:var(--color-accent);transition:all var(--transition-fast);cursor:pointer;background:#fff;border:none;justify-content:center;align-items:center;gap:10px;margin-top:8px;padding:16px 24px;font-size:15px;font-weight:600;display:flex;box-shadow:0 4px 20px #00000026}.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #0003}.login-btn:active{transform:translateY(0)}.login-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.login-spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-footer{color:#ffffff80;z-index:1;margin-top:40px;font-size:12px;position:relative}.login-btn-google{border-radius:var(--radius-lg);color:#333;width:100%;transition:all var(--transition-fast);cursor:pointer;background:#fff;border:none;justify-content:center;align-items:center;gap:12px;margin-bottom:4px;padding:14px 24px;font-size:14px;font-weight:600;display:flex;box-shadow:0 2px 12px #0000001a}.login-btn-google:hover{transform:translateY(-1px);box-shadow:0 4px 20px #00000026}.login-btn-google:active{transform:translateY(0)}.login-btn-google:disabled{opacity:.7;cursor:not-allowed;transform:none}.google-icon{flex-shrink:0}.invoice-card{align-items:center;gap:var(--spacing-md);background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);cursor:pointer;transition:all var(--transition-fast);margin-bottom:12px;padding:16px;display:flex}.invoice-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.invoice-card:active{transform:translateY(0)}.invoice-card-icon{background:var(--color-primary-light);border-radius:var(--radius-md);width:42px;min-width:42px;height:42px;color:var(--color-primary);justify-content:center;align-items:center;display:flex}.invoice-card-info{flex:1;min-width:0}.invoice-card-name{color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:14px;font-weight:600;overflow:hidden}.invoice-card-meta{color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.invoice-card-right{text-align:right;flex-shrink:0}.invoice-card-amount{color:var(--color-text-primary);white-space:nowrap;margin-bottom:4px;font-size:14px;font-weight:700}.bottom-nav{background:var(--color-bg);border-top:1px solid var(--color-border);z-index:200;justify-content:space-around;align-items:center;width:100%;padding:8px 0 12px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #0000000a}.bottom-nav-item{color:var(--color-text-secondary);transition:color var(--transition-fast);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;padding:4px 16px;font-size:11px;font-weight:500;display:flex}.bottom-nav-item.active{color:var(--color-accent)}.bottom-nav-item svg{width:22px;height:22px}.dashboard-header{background:var(--gradient-header);padding:28px var(--spacing-lg) 48px;color:#fff;border-radius:0 0 24px 24px;position:relative}.dashboard-header-top{justify-content:space-between;align-items:flex-start;margin-bottom:4px;display:flex}.dashboard-greeting-sub{opacity:.85;margin-bottom:2px;font-size:13px;font-weight:400}.dashboard-greeting{font-size:22px;font-weight:700}.dashboard-notif-btn{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;width:40px;height:40px;transition:background var(--transition-fast);background:#ffffff26;border-radius:50%;justify-content:center;align-items:center;display:flex}.dashboard-notif-btn:hover{background:#ffffff40}.summary-cards{padding:0 var(--spacing-md);z-index:10;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:-32px;display:grid;position:relative}.summary-card{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:left;padding:16px 14px}.summary-card-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:10px;display:flex}.summary-card-icon.total{background:var(--color-primary-light);color:var(--color-primary)}.summary-card-icon.lunas{background:var(--color-success-bg);color:var(--color-success)}.summary-card-icon.pending{background:var(--color-warning-bg);color:var(--color-warning)}.summary-card-number{color:var(--color-text-primary);margin-bottom:4px;font-size:26px;font-weight:700;line-height:1.1}.summary-card-label{color:var(--color-text-secondary);font-size:11px;font-weight:500}.recent-section{padding:var(--spacing-lg) var(--spacing-md);padding-bottom:100px}.recent-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.recent-header h3{font-size:16px;font-weight:700}.recent-header a{color:var(--color-accent);font-size:13px;font-weight:600}.recent-header a:hover{text-decoration:underline}.dashboard-notif-btn{position:relative}.notif-badge-dot{color:#fff;border:2px solid var(--color-accent);background:#ef4444;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;position:absolute;top:4px;right:4px}.notif-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;background:#0006;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.notif-panel{background:var(--color-bg);border-radius:24px 24px 0 0;width:100%;max-height:80vh;padding:0 0 32px;animation:.3s slideUp;overflow-y:auto}.notif-panel-handle{background:var(--color-border);border-radius:99px;width:40px;height:4px;margin:12px auto 0}.notif-panel-header{border-bottom:1px solid var(--color-border);background:var(--color-bg);z-index:1;justify-content:space-between;align-items:center;padding:16px 20px 12px;display:flex;position:sticky;top:0}.notif-panel-header h3{font-size:17px;font-weight:700}.notif-panel-actions{align-items:center;gap:12px;display:flex}.notif-mark-read{color:var(--color-accent);cursor:pointer;background:0 0;border:none;font-size:12px;font-weight:600}.notif-mark-read:hover{text-decoration:underline}.notif-close{width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:background var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.notif-close:hover{background:var(--color-surface)}.notif-list{padding:8px 0}.notif-item{transition:background var(--transition-fast);cursor:pointer;opacity:0;align-items:flex-start;gap:12px;padding:14px 20px;animation:.3s forwards fadeInUp;display:flex;position:relative}.notif-item:hover{background:var(--color-surface)}.notif-item.unread{background:var(--color-primary-light)}.notif-item.unread:hover{background:#dbeafe}.notif-item-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:36px;min-width:36px;height:36px;display:flex}.notif-item-content{flex:1;min-width:0}.notif-item-title{color:var(--color-text-primary);margin-bottom:2px;font-size:13px;font-weight:600}.notif-item-message{color:var(--color-text-secondary);margin-bottom:4px;font-size:12px;line-height:1.4}.notif-item-time{color:#9ca3af;font-size:11px}.notif-unread-dot{background:var(--color-accent);border-radius:50%;width:8px;min-width:8px;height:8px;margin-top:6px}.invoice-list-header{background:var(--gradient-header);padding:28px var(--spacing-lg) 28px;color:#fff;border-radius:0 0 24px 24px}.invoice-list-header h1{margin-bottom:4px;font-size:22px;font-weight:700}.invoice-list-header p{opacity:.85;font-size:13px}.invoice-search-wrapper{padding:0 var(--spacing-md);z-index:10;margin-top:-20px;position:relative}.invoice-search{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);align-items:center;gap:10px;padding:0 16px;display:flex}.invoice-search svg{color:var(--color-text-secondary);min-width:18px}.invoice-search input{width:100%;color:var(--color-text-primary);background:0 0;padding:14px 0;font-size:13px}.invoice-search input::placeholder{color:#9ca3af}.invoice-filters{padding:var(--spacing-md) var(--spacing-md) 8px;gap:8px;display:flex;overflow-x:auto}.filter-pill{border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text-secondary);border:1.5px solid var(--color-border);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);padding:8px 18px;font-size:13px;font-weight:500}.filter-pill:hover{border-color:var(--color-accent);color:var(--color-accent)}.filter-pill.active{background:var(--color-text-primary);color:#fff;border-color:var(--color-text-primary)}.invoice-list-content{padding:8px var(--spacing-md) 100px}.empty-state{text-align:center;color:var(--color-text-secondary);padding:48px 24px}.empty-state svg{opacity:.3;margin-bottom:12px}.empty-state p{font-size:14px}.create-invoice-page{background:var(--color-surface)}.create-invoice-form{padding:var(--spacing-md);padding-bottom:120px}.form-section{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-bottom:16px;padding:20px 16px;overflow:hidden}.form-section-title{color:var(--color-text-primary);align-items:center;gap:8px;margin-bottom:16px;font-size:15px;font-weight:700;display:flex}.form-section-title svg{color:var(--color-accent)}.invoice-no-display{color:var(--color-text-secondary);background:var(--color-primary-light);border-radius:var(--radius-md);border:1.5px dashed var(--color-border);padding:14px 16px;font-size:14px;font-weight:500}.date-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.date-row .input-group{min-width:0}.date-row .input-field{width:100%;min-width:0;padding:12px 10px;font-size:13px}.line-item{background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);margin-bottom:12px;padding:14px;position:relative}.line-item-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.line-item-number{color:var(--color-accent);background:var(--color-primary-light);border-radius:var(--radius-full);padding:2px 10px;font-size:12px;font-weight:600}.line-item-remove{background:var(--color-danger-bg);width:28px;height:28px;color:var(--color-danger);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.line-item-remove:hover{background:#fecaca}.line-item-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.line-item .input-group{margin-bottom:10px}.line-item .input-label{margin-bottom:4px;font-size:10px}.line-item .input-field{padding:10px 12px;font-size:13px}.add-item-btn{width:100%;color:var(--color-accent);background:var(--color-primary-light);border:1.5px dashed var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:8px;padding:12px;font-size:13px;font-weight:600;display:flex}.add-item-btn:hover{border-color:var(--color-accent);background:#dbeafe}.subtotal-row{background:var(--color-primary-light);border-radius:var(--radius-md);justify-content:space-between;align-items:center;margin-top:4px;padding:16px;display:flex}.subtotal-label{color:var(--color-text-secondary);font-size:14px;font-weight:600}.subtotal-value{color:var(--color-accent);font-size:18px;font-weight:700}.status-toggle-wrapper{justify-content:space-between;align-items:center;padding:4px 0;display:flex}.status-toggle-label{color:var(--color-text-primary);font-size:14px;font-weight:600}.status-toggle{background:var(--color-surface);border-radius:var(--radius-full);border:1.5px solid var(--color-border);padding:3px;display:flex}.status-toggle-option{border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-secondary);background:0 0;padding:8px 18px;font-size:12px;font-weight:600}.status-toggle-option.active-lunas{background:var(--color-success);color:#fff;box-shadow:0 2px 8px #22c55e4d}.status-toggle-option.active-pending{background:var(--color-warning);color:#fff;box-shadow:0 2px 8px #f59e0b4d}.save-preview-btn{z-index:100;width:auto;padding:16px;position:fixed;bottom:24px;left:16px;right:16px}.preview-page{background:var(--color-surface)}.preview-scroll{padding:16px 16px 24px;overflow-y:auto}.invoice-paper{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:#333;background:#fff;padding:32px 24px;font-size:11px;line-height:1.5;position:relative;overflow:hidden}.invoice-status-stamp{text-align:center;letter-spacing:10px;padding:20px 0;font-size:56px;font-weight:900}.invoice-status-stamp.lunas{color:#22c55e40}.invoice-status-stamp.pending{color:#f59e0b40}.invoice-paper-header{justify-content:space-between;align-items:flex-start;margin-bottom:8px;display:flex}.invoice-company-block{flex:1}.invoice-logo{object-fit:contain;border-radius:8px;width:60px;height:60px;margin-bottom:8px}.invoice-company-name{color:#1a1a2e;letter-spacing:.5px;margin-bottom:4px;font-size:16px;font-weight:800}.invoice-company-info{color:#555;margin-bottom:1px;font-size:10px;line-height:1.6}.invoice-title-badge{color:var(--color-accent);letter-spacing:2px;padding-top:8px;font-size:24px;font-weight:800}.invoice-divider{background:#ddd;height:1px;margin:12px 0}.invoice-billed-to{margin-bottom:12px}.invoice-info-label{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-size:10px;font-weight:600}.invoice-billed-name{color:#1a1a2e;font-size:13px;font-weight:700}.invoice-billed-address{color:#555;font-size:10px}.invoice-info-table{border-collapse:collapse;width:100%;margin-bottom:12px;font-size:10px}.invoice-info-table th{color:#555;text-align:left;text-transform:uppercase;background:#f0f0f0;border:1px solid #ddd;padding:6px 8px;font-size:9px;font-weight:600}.invoice-info-table td{color:#333;border:1px solid #ddd;padding:6px 8px;font-weight:500}.invoice-table{border-collapse:collapse;width:100%;margin-bottom:16px;font-size:10px}.invoice-table thead th{color:#333;text-align:left;background:#f0f0f0;border:1px solid #ddd;padding:6px;font-size:9px;font-weight:700}.invoice-table tbody td{vertical-align:top;border:1px solid #ddd;padding:6px}.invoice-table .col-no{text-align:center;width:28px}.invoice-table .col-qty{text-align:center;width:50px}.invoice-table .col-price,.invoice-table .col-amount{text-align:right;white-space:nowrap}.invoice-table .col-price{width:85px}.invoice-table .col-amount{width:95px}.invoice-table tfoot td{border:1px solid #ddd;padding:8px 6px;font-weight:700}.subtotal-label{text-align:right;color:#555;font-size:10px}.subtotal-value{text-align:right;color:#1a1a2e;white-space:nowrap;font-size:11px}.invoice-payment-section{color:#333;margin-top:16px;font-size:10px;line-height:1.8}.invoice-payment-title{color:#1a1a2e;margin-bottom:2px;font-size:11px;font-weight:700}.invoice-payment-section strong{font-weight:700}.invoice-footer-msg{text-align:center;color:#888;border-top:1px solid #eee;margin-top:20px;padding-top:12px;font-size:10px;font-style:italic}.preview-actions{gap:10px;padding:0 16px 32px;display:flex}.settings-page{background:var(--color-surface)}.settings-content{padding:var(--spacing-md);padding-bottom:40px}.upload-logo-section{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);text-align:center;margin-bottom:16px;padding:24px 16px}.upload-logo-box{border:2px dashed var(--color-border);border-radius:var(--radius-lg);cursor:pointer;width:120px;height:120px;transition:all var(--transition-fast);color:var(--color-primary);background:var(--color-primary-light);flex-direction:column;justify-content:center;align-items:center;gap:8px;margin:0 auto 12px;display:flex;position:relative;overflow:hidden}.upload-logo-box:hover{border-color:var(--color-accent);background:#dbeafe}.upload-logo-box input{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-logo-text{color:var(--color-primary);font-size:12px;font-weight:500}.upload-logo-hint{color:var(--color-text-secondary);font-size:12px}.upload-logo-preview{border-radius:var(--radius-lg);object-fit:cover;border:2px solid var(--color-border);width:120px;height:120px;margin:0 auto 12px}.settings-form-section{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-bottom:16px;padding:20px 16px}.settings-form-title{color:var(--color-text-primary);margin-bottom:16px;font-size:15px;font-weight:700}.phone-list-item{align-items:center;gap:8px;margin-bottom:10px;display:flex}.phone-list-item .input-field{flex:1}.phone-remove-btn{background:var(--color-danger-bg);width:36px;min-width:36px;height:36px;color:var(--color-danger);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.phone-remove-btn:hover{background:#fecaca}.add-phone-btn{color:var(--color-accent);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:8px 0;font-size:13px;font-weight:600;display:flex}.add-phone-btn:hover{text-decoration:underline}.settings-actions{padding:0 var(--spacing-md) 100px}.logout-btn{width:100%;color:var(--color-danger);background:var(--color-danger-bg);border-radius:var(--radius-full);text-align:center;cursor:pointer;transition:all var(--transition-fast);border:none;margin-top:12px;padding:14px;font-size:14px;font-weight:600}.logout-btn:hover{background:#fecaca}.save-success{text-align:center;color:var(--color-success);margin-top:12px;font-size:13px;font-weight:500;animation:.3s fadeIn}.user-profile-avatar{background:var(--gradient-header);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;min-width:56px;height:56px;font-size:20px;font-weight:700;display:flex}.user-info-row{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.user-info-row:last-child{border-bottom:none}.user-info-label{color:var(--color-text-secondary);font-size:13px}.user-info-value{color:var(--color-text-primary);font-size:14px;font-weight:500}.users-header{background:var(--gradient-header);padding:28px var(--spacing-lg) 28px;color:#fff;border-radius:0 0 24px 24px}.users-header h1{margin-bottom:4px;font-size:22px;font-weight:700}.users-header p{opacity:.85;font-size:13px}.users-search-wrapper{padding:0 var(--spacing-md);z-index:10;margin-top:-20px;position:relative}.users-search{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);align-items:center;gap:10px;padding:0 16px;display:flex}.users-search svg{color:var(--color-text-secondary);min-width:18px}.users-search input{width:100%;color:var(--color-text-primary);background:0 0;padding:14px 0;font-size:13px}.users-search input::placeholder{color:#9ca3af}.users-list{padding:var(--spacing-md);padding-bottom:100px}.user-card{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);cursor:pointer;transition:all var(--transition-fast);align-items:center;gap:14px;margin-bottom:12px;padding:16px;display:flex}.user-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.user-card:active{transform:translateY(0)}.user-avatar{background:var(--gradient-header);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:46px;min-width:46px;height:46px;font-size:18px;font-weight:700;display:flex}.user-card-info{flex:1;min-width:0}.user-card-name{color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:14px;font-weight:600;overflow:hidden}.user-card-meta{color:var(--color-text-secondary);align-items:center;gap:4px;font-size:12px;display:flex}.user-card-right{text-align:right;flex-shrink:0}.user-card-orders{color:var(--color-accent);margin-bottom:2px;font-size:13px;font-weight:700}.user-card-orders-label{color:var(--color-text-secondary);font-size:10px}.user-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;background:#0006;justify-content:center;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.user-modal{background:var(--color-bg);border-radius:24px 24px 0 0;width:100%;max-height:85vh;padding:24px 20px 40px;animation:.3s slideUp;overflow-y:auto}.user-modal-handle{background:var(--color-border);border-radius:99px;width:40px;height:4px;margin:0 auto 20px}.user-modal-header{align-items:center;gap:14px;margin-bottom:20px;display:flex}.user-modal-avatar{background:var(--gradient-header);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;min-width:56px;height:56px;font-size:22px;font-weight:700;display:flex}.user-modal-name{color:var(--color-text-primary);margin-bottom:2px;font-size:18px;font-weight:700}.user-modal-joined{color:var(--color-text-secondary);font-size:12px}.user-detail-section{background:var(--color-surface);border-radius:var(--radius-md);margin-bottom:12px;padding:16px}.user-detail-row{border-bottom:1px solid var(--color-border);align-items:flex-start;gap:12px;padding:10px 0;display:flex}.user-detail-row:last-child{border-bottom:none}.user-detail-icon{background:var(--color-primary-light);border-radius:var(--radius-sm);width:32px;min-width:32px;height:32px;color:var(--color-primary);justify-content:center;align-items:center;display:flex}.user-detail-content{flex:1}.user-detail-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-size:10px;font-weight:600}.user-detail-value{color:var(--color-text-primary);font-size:13px;font-weight:500}.user-stats-row{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.user-stat-card{background:var(--color-surface);border-radius:var(--radius-md);text-align:center;padding:16px}.user-stat-value{color:var(--color-accent);margin-bottom:2px;font-size:24px;font-weight:700}.user-stat-label{color:var(--color-text-secondary);font-size:11px;font-weight:500}.user-modal-actions{gap:10px;margin-top:8px;display:flex}.user-modal-actions .btn{flex:1}.users-empty{text-align:center;color:var(--color-text-secondary);padding:48px 24px}.users-empty svg{opacity:.3;margin-bottom:12px}