@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{margin:0;padding:0;font-family:Inter,sans-serif}.app-layout{min-height:100vh;display:flex}.main-content{background:#f8fafc;flex:1;margin-left:280px;padding:2rem 3rem;transition:margin-left .4s}.sidebar.collapsed+.main-content{margin-left:78px}@media (width<=992px){.main-content{margin-left:78px}}.sidebar{color:#e2e8f0;z-index:1000;background:#0f172a;flex-direction:column;width:280px;height:100vh;transition:width .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;box-shadow:4px 0 20px #00000026}.sidebar.collapsed{width:78px}.sidebar-header{border-bottom:1px solid #334155;justify-content:space-between;align-items:center;height:78px;padding:1.25rem;display:flex}.logo{align-items:center;gap:12px;display:flex}.logo-icon{font-size:1.9rem}.logo-text{letter-spacing:-.04em;color:#fff;font-size:1.55rem;font-weight:700}.toggle-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px;transition:all .3s}.toggle-btn:hover{color:#fff;background:#1e2937}.sidebar-nav{flex-direction:column;flex:1;gap:6px;padding:1.5rem .8rem;display:flex;overflow-y:auto}.nav-item{color:#cbd5e1;border-radius:12px;align-items:center;gap:16px;padding:14px 16px;font-weight:500;text-decoration:none;transition:all .3s;display:flex}.nav-item:hover{color:#fff;background:#1e2937;transform:translate(6px)}.nav-item.active{color:#fff;background:linear-gradient(135deg,#1e40af,#3b82f6);font-weight:600;box-shadow:0 4px 12px #3b82f64d}.icon{justify-content:center;align-items:center;width:28px;display:flex}.sidebar-footer{border-top:1px solid #334155;padding:1.25rem}.user-info{align-items:center;gap:12px;display:flex}.avatar{color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.1rem;font-weight:700;display:flex}.user-name{margin:0;font-size:.98rem;font-weight:600}.user-role{color:#94a3b8;margin:0;font-size:.82rem}.sidebar.collapsed .logo-text,.sidebar.collapsed .label,.sidebar.collapsed .user-details{display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:14px}.sidebar.collapsed .sidebar-header{justify-content:center}.dashboard-container{background:#f8fafc;min-height:100vh;padding:24px}.dashboard-header h1{color:#0f172a;font-size:28px;font-weight:700}.dashboard-header p{color:#64748b;margin-top:6px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:24px;display:grid}.section{background:#fff;border-radius:16px;margin-top:40px;padding:20px;box-shadow:0 4px 20px #0000000d}.section-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-header h2{font-size:18px;font-weight:600}.view-all{color:#3b82f6;font-size:14px;text-decoration:none}.status{border-radius:8px;padding:4px 10px;font-size:12px}.status.active{color:#16a34a;background:#dcfce7}.status.pending{color:#ca8a04;background:#fef9c3}.status.inactive{color:#dc2626;background:#fee2e2}.dashboard-card{cursor:pointer;background:#fff;border-radius:16px;padding:20px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000000d}.dashboard-card:hover{transform:translateY(-5px)}.card-accent{background:linear-gradient(to right, var(--card-color), #6366f1);width:100%;height:4px;position:absolute;top:0;left:0}.card-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.card-title{color:#64748b;font-size:14px}.card-value{color:#0f172a;margin-top:10px;font-size:26px;font-weight:700}.card-icon{background:color-mix(in srgb, var(--card-color) 20%, transparent);color:var(--card-color);border-radius:12px;padding:10px;font-size:20px}.card-trend{font-size:14px;font-weight:500}.card-trend.positive{color:#22c55e}.card-trend.negative{color:#ef4444}.card-subtitle{color:#94a3b8;margin-top:6px;font-size:12px}.glt-wrapper{border-radius:16px;width:100%;overflow-x:auto}.glt-table{border-collapse:collapse;background:#fff;border-radius:16px;width:100%;font-family:Inter,system-ui,sans-serif;font-size:14px;overflow:hidden;box-shadow:0 4px 20px #0000000f}.glt-table thead{z-index:10;background:#f8fafc;position:sticky;top:0}.glt-th{color:#0f172a;text-transform:uppercase;letter-spacing:.5px;text-align:left;border-bottom:2px solid #e2e8f0;padding:16px 20px;font-size:13px;font-weight:600}.glt-td{color:#1e2937;border-bottom:1px solid #f1f5f9;padding:14px 20px}.glt-row{transition:all .2s}.glt-hover .glt-row:hover{background:#f8fafc}.glt-striped .glt-row:nth-child(2n){background:#fafcff}.glt-clickable{cursor:pointer}.glt-positive{color:#16a34a;font-weight:600}.glt-negative{color:#ef4444;font-weight:600}.glt-money{color:#0f172a;font-weight:600}.glt-loading,.glt-empty{color:#64748b;background:#f8fafc;border-radius:16px;justify-content:center;align-items:center;padding:60px 20px;display:flex}@media (width>=769px){.glt-td{padding:17px 20px}}@media (width<=768px){.glt-table thead{display:none}.glt-table,.glt-table tbody,.glt-table tr,.glt-table td{width:100%;display:block}.glt-row{background:#fff;border:1px solid #f1f5f9;border-radius:16px;margin-bottom:18px;padding:16px 20px;box-shadow:0 4px 15px #00000012}.glt-td{text-align:left;border-bottom:1px solid #f1f5f9;padding:10px 0;position:relative}.glt-td:last-child{border-bottom:none}.glt-td:before{content:attr(data-label);color:#64748b;text-transform:capitalize;margin-bottom:4px;font-size:12.5px;font-weight:500;display:block}.glt-td{font-size:15px;font-weight:500}}@media (width<=480px){.glt-row{margin-bottom:14px;padding:14px 16px}}.clean-input-wrapper{flex-direction:column;gap:6px;width:100%;display:flex}.clean-input-label{color:#1f2937;font-size:13px;font-weight:600}.clean-input-container{background:#ffffffd9;border:1px solid #d1d5db99;border-radius:10px;align-items:center;transition:all .25s;display:flex;position:relative}.clean-input-container.focused{border-color:#3b82f6;box-shadow:0 0 4px #3b82f640}.clean-input-container input{background:0 0;border:none;outline:none;flex:1;min-height:40px;padding:10px 44px 10px 14px;font-size:14px}.clean-input-leading-icon{color:#6b7280;position:absolute;left:12px}.clean-input-container.has-leading-icon input{padding-left:40px!important}.clean-input-eye,.clean-input-clear{cursor:pointer;background:#9ca3af26;border:none;border-radius:50%;width:28px;height:28px;font-size:13px;position:absolute;right:10px}.clean-input-container:has(.clean-input-clear) .clean-input-eye{right:40px}.clean-input-container.readonly{cursor:not-allowed;background:#f3f4f6b3}.clean-dropdown-container{cursor:pointer;background:#ffffffd9;border:1px solid #d1d5db99;border-radius:10px;justify-content:space-between;align-items:center;min-height:40px;padding:10px 14px;transition:all .25s;display:flex;position:relative}.clean-dropdown-container.focused{border-color:#3b82f6;box-shadow:0 0 4px #3b82f640}.clean-dropdown-container.disabled{cursor:not-allowed;color:#9ca3af;background:#f1f5f9}.clean-dropdown-value{color:#111827;font-size:14px}.clean-dropdown-value.placeholder{color:#9ca3af}.clean-dropdown-arrow{color:#6b7280;font-size:12px;transition:transform .2s}.clean-dropdown-arrow.open{transform:rotate(180deg)}.clean-dropdown-list{z-index:50;background:#fff;border:1px solid #e5e7eb;border-radius:10px;width:100%;max-height:220px;position:absolute;top:110%;left:0;overflow-y:auto;box-shadow:0 10px 25px #00000014}.clean-dropdown-item{cursor:pointer;padding:10px 14px;font-size:14px;transition:background .2s}.clean-dropdown-item:hover{background:#f3f4f6}.clean-dropdown-item.selected{color:#0284c7;background:#e0f2fe;font-weight:500}.clean-dropdown-divider{background:#e5e7eb;height:1px;margin:6px 0}.clean-dropdown-item.add-new{color:#3b82f6;font-weight:500}.create-container{max-width:900px;margin:auto;padding:24px}.form-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px;display:grid}@media (width<=768px){.form-grid{grid-template-columns:1fr}}.clean-btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;font-weight:500;transition:all .25s;display:inline-flex}.clean-btn-sm{padding:6px 12px;font-size:13px}.clean-btn-md{padding:10px 16px;font-size:14px}.clean-btn-lg{padding:12px 20px;font-size:15px}.clean-btn.full{width:100%}.clean-btn-primary{color:#fff;background:#3b82f6}.clean-btn-primary:hover{background:#2563eb}.clean-btn-secondary{color:#111827;background:#e5e7eb}.clean-btn-secondary:hover{background:#d1d5db}.clean-btn-danger{color:#fff;background:#ef4444}.clean-btn-danger:hover{background:#dc2626}.clean-btn-outline{color:#111827;background:0 0;border:1px solid #e5e7eb}.clean-btn-outline:hover{background:#f3f4f6}.clean-btn:disabled{opacity:.6;cursor:not-allowed}.clean-btn-icon{align-items:center;display:flex}.clean-btn-loader{border:2px solid #fff;border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast-alert{z-index:214748364;-webkit-backdrop-filter:blur(12px);color:#000;background:0 0;border-radius:12px;align-items:center;gap:12px;min-width:320px;max-width:420px;padding:14px 18px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:24px;right:24px;transform:translateY(0);box-shadow:0 8px 25px #00000026}.alert-success{background:#22c55e33;border:1px solid #22c55e66}.alert-error{background:#ef444433;border:1px solid #ef444466}.alert-warning{background:#f59e0b33;border:1px solid #f59e0b66}.alert-updating{background:#3b82f633;border:1px solid #3b82f666}.toast-icon .alert-icon{flex-shrink:0;font-size:24px}.spinning{animation:2s linear infinite spin}.toast-content{flex:1}.toast-title{margin-bottom:4px;font-size:15px;font-weight:600}.toast-message{opacity:.95;line-height:1.4}.toast-close-btn{cursor:pointer;color:#fff;opacity:.7;background:0 0;border:none;border-radius:8px;padding:6px;font-size:20px;transition:opacity .2s}.toast-close-btn:hover{opacity:1;background:#ffffff1a}.toast-alert.closing{opacity:0;transform:translateY(20px)}.user-page{padding:24px}.user-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.user-header h1{font-size:22px;font-weight:600}.user-filters{grid-template-columns:2fr 1fr;gap:16px;margin-bottom:20px;display:grid}.user-table{background:#fff;border-radius:12px;padding:16px}.badge{text-transform:capitalize;letter-spacing:.3px;border:1px solid #0000;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.badge.status.active{color:#10b981;background-color:#ecfdf5;border-color:#a7f3d0}.badge.status.pending{color:#ca8a04;background-color:#fef9c3;border-color:#fde68a}.badge.status.inactive{color:#dc2626;background-color:#fee2e2;border-color:#fecaca}.badge.verify.yes{color:#10b981;background-color:#ecfdf5;border-color:#a7f3d0}.badge.verify.no{color:#dc2626;background-color:#fee2e2;border-color:#fecaca}.badge.payment.paid{color:#10b981;background-color:#ecfdf5;border-color:#a7f3d0}.badge.payment.unpaid{color:#f97316;background-color:#fff7ed;border-color:#fed7aa}.action-btns{gap:8px;display:flex}.badge.action{cursor:pointer;border:1px solid #0000;transition:all .2s}.badge.action.edit{color:#0284c7;background-color:#e0f2fe;border-color:#bae6fd}.badge.action.delete{color:#dc2626;background-color:#fee2e2;border-color:#fecaca}.badge.action:hover{opacity:.9;transform:scale(1.05)}.DynamicOverlay{-webkit-backdrop-filter:blur(12px)saturate(1.35);opacity:0;z-index:1001;background:linear-gradient(135deg,#dce6ff2e 0%,#b4f5eb38 50%,#c8dcff2e 100%);justify-content:center;align-items:center;animation:.35s cubic-bezier(.23,1,.32,1) forwards overlayReveal;display:flex;position:fixed;inset:0}.DynamicOverlay-content{background:#fff;border-radius:16px;width:90%;max-width:600px;max-height:85vh;padding:2rem;position:relative;overflow-y:auto;box-shadow:0 8px 24px #0003}.DynamicOverlay-close{color:#475569;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff47;border:1px solid #ffffff6b;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:22px;transition:all .22s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:16px;right:16px}.DynamicOverlay-close:hover,.DynamicOverlay-close:focus-visible{color:#fff;background:#ef4444eb;border-color:#0000;transform:scale(1.14)rotate(90deg);box-shadow:0 0 0 6px #ef444433}.contain-form-customer{flex-direction:column;align-items:center;gap:1.4rem;width:100%;margin-top:1.3rem;display:flex}.upload-img{cursor:pointer;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:2.5px dashed #c7d2fe;border-radius:26px;justify-content:center;align-items:center;width:240px;height:240px;transition:all .28s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden;box-shadow:0 12px 32px #0000001a,inset 0 2px #fffc}.upload-img:hover{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-color:#6366f1;transform:scale(1.03)translateY(-5px);box-shadow:0 22px 44px #6366f142,inset 0 2px #ffffffe0}.upload-img input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-img label{pointer-events:none;color:#475569;flex-direction:column;align-items:center;gap:10px;font-size:15.5px;font-weight:600;transition:transform .28s;display:flex}.upload-img:hover label{transform:scale(1.05)}.upload-img label:before{content:"↑";color:#6366f1;opacity:.92;font-size:54px}.preview-img{object-fit:cover;border-radius:26px;width:100%;height:100%}.remove-btn{color:#fff;cursor:pointer;background:#ef4444f0;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:19px;font-weight:700;transition:all .22s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:10px;right:10px;box-shadow:0 8px 20px #ef444461}.remove-btn:hover{background:#dc2626;transform:scale(1.16);box-shadow:0 12px 28px #dc26267a}@keyframes overlayReveal{0%{opacity:0;-webkit-backdrop-filter:blur(4px)saturate(1.1);backdrop-filter:blur(4px)saturate(1.1)}to{opacity:1;-webkit-backdrop-filter:blur(12px)saturate(1.35);backdrop-filter:blur(12px)saturate(1.35)}}@keyframes modalAppear{0%{opacity:0;transform:scale(.9)translateY(32px)}55%{transform:scale(1.02)translateY(-8px)}to{opacity:1;transform:scale(1)translateY(0)}}.setting-page{padding:24px}.setting-page h1{margin-bottom:20px;font-size:22px}.setting-card{background:#fff;border-radius:14px;margin-bottom:20px;padding:20px;box-shadow:0 4px 20px #0000000d}.setting-card h2{color:#111827;margin-bottom:16px;font-size:16px}.setting-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.setting-actions{justify-content:flex-end;gap:10px;margin-top:10px;display:flex}@media (width<=768px){.setting-grid{grid-template-columns:1fr}}.login-container{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);justify-content:center;align-items:center;height:100vh;display:flex}.login-card{background:#fff;border-radius:16px;width:100%;max-width:380px;padding:32px;box-shadow:0 10px 30px #00000014}.login-title{text-align:center;color:#111827;font-size:24px;font-weight:700}.login-subtitle{text-align:center;color:#6b7280;margin-bottom:20px}.login-form{flex-direction:column;gap:16px;display:flex}.login-extra{color:#6b7280;justify-content:space-between;font-size:13px;display:flex}.login-extra input{margin-right:6px}.forgot{cursor:pointer;color:#3b82f6}.forgot:hover{text-decoration:underline}.nf-container{background:linear-gradient(135deg,#f8fafc,#e2e8f0);justify-content:center;align-items:center;height:100vh;display:flex}.nf-card{text-align:center;background:#fff;border-radius:16px;width:100%;max-width:400px;padding:40px 30px;box-shadow:0 10px 30px #00000014}.nf-code{color:#3b82f6;margin-bottom:10px;font-size:80px;font-weight:800}.nf-title{color:#111827;font-size:22px;font-weight:600}.nf-description{color:#6b7280;margin:10px 0 20px;font-size:14px}.ip-page{padding:20px}.ip-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.ip-table{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #0000000d}.ip-form{grid-template-columns:1fr 1fr;gap:20px;margin-top:25px;margin-bottom:25px;display:grid}.ip-form .full-width{grid-column:span 2}.ip-form-button{justify-content:end;gap:10px;margin-bottom:25px;display:flex}@media (width<=768px){.ip-form{grid-template-columns:1fr}.ip-form .full-width{grid-column:span 1}}