:root{--colorPrimary: #5b73ff;--colorPrimaryHover: #4861f5;--colorSecondary: #28c7ed;--colorSecondaryHover: #17b6e0;--colorSuccess: #00d8a2;--colorDanger: #ff5f7b;--colorWarning: #f8b34c;--colorBg: #020712;--colorAccent: #0f172a;--colorSurface: rgba(15, 23, 42);--colorSurfaceLight: rgba(30, 41, 59, .75);--colorBorder: rgba(148, 163, 184, .24);--colorText: #e4eaf6;--colorTextMuted: #9ca6bb;--gradientBackground: radial-gradient(circle at 20% 20%, rgba(91, 115, 255, .25) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(40, 199, 237, .18) 0%, transparent 50%);--gradientPrimary: linear-gradient(130deg, #5b73ff 0%, #2c53ff 100%);--gradientSecondary: linear-gradient(130deg, #28c7ed 0%, #17b6e0 100%);--spacingXs: 6px;--spacingSm: 10px;--spacingMd: 18px;--spacingLg: 26px;--spacingXl: 34px;--spacingXxl: 48px;--radiusSm: 10px;--radiusMd: 16px;--radiusLg: 24px;--shadowSm: 0 6px 14px rgba(0, 0, 0, .18);--shadowMd: 0 12px 32px rgba(0, 0, 0, .25);--shadowLg: 0 22px 60px rgba(0, 0, 0, .35)}html{height:100%}body{font-family:Inter,Roboto,Segoe UI,system-ui,-apple-system,sans-serif;background-color:var(--colorBg);background-image:var(--gradientBackground);background-attachment:fixed;color:var(--colorText);line-height:1.45;-webkit-font-smoothing:antialiased;min-width:320px;min-height:100vh}::selection{background:#5b73ff59;color:#fff}h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:.02em}h1{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:var(--spacingMd)}h2{font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:var(--spacingMd)}h3{font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:var(--spacingSm)}.container{max-width:1320px;margin:0 auto;padding:var(--spacingLg);min-height:100vh}.appLayout{display:flex;min-height:100vh;background:transparent;overflow:hidden}.content{flex:1;padding:var(--spacingLg);margin-left:240px;overflow-y:auto;height:100vh}.card{background:linear-gradient(135deg,#121a2fd6,#0f172aeb);border:1px solid var(--colorBorder);border-radius:var(--radiusMd);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacingLg);box-shadow:var(--shadowMd);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.card:hover{border-color:#5b73ff99;box-shadow:var(--shadowLg)}.card.cardNoHover:hover{border-color:var(--colorBorder)!important;box-shadow:var(--shadowMd)!important;transform:none!important}.card h3{color:var(--colorText);margin:0 0 .6rem}.dashboardHeader{display:flex;justify-content:space-between;align-items:center;gap:var(--spacingSm);margin-bottom:var(--spacingMd)}.dashboardHeader h1{margin:0;font-size:1.5rem;white-space:nowrap;flex-shrink:1}.statCard{padding:var(--spacingMd);border-radius:var(--radiusMd);background:#0f172ab3;border:1px solid rgba(148,163,184,.18)}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.badge--success{background:#00d8a233;color:var(--colorSuccess)}.badge--danger{background:#ff5f7b33;color:var(--colorDanger)}.badge--warning{background:#f8b34c33;color:var(--colorWarning)}.progressTrack{height:12px;width:100%;background:#94a3b833;border-radius:999px;overflow:hidden}.progressFill{height:100%;background-image:linear-gradient(90deg,var(--colorPrimary),var(--colorSecondary));border-radius:999px;transition:width .5s ease}.tableWrapper{overflow-x:auto;background:#0f172aa6;border:1px solid rgba(148,163,184,.2);border-radius:var(--radiusMd);box-shadow:var(--shadowSm)}.table{width:100%;border-collapse:collapse;min-width:780px}.table th,.table td{text-align:left;padding:14px 16px;border-bottom:1px solid rgba(148,163,184,.15)}.table th{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--colorTextMuted)}.table tbody tr:hover{background:#5b73ff14}.table tbody tr:last-child td{border-bottom:none}.status{padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.statusApproved{background:#00d8a22e;color:#00d8a2}.statusPending{background:#f8b34c2e;color:#f8b34c}.statusRejected{background:#ff5f7b2e;color:#ff5f7b}.tableActions{display:flex;align-items:center;gap:8px}.btnApprove,.btnReject,.btnView,.btnSync{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:var(--radiusSm);padding:7px 10px;font-size:.78rem;font-weight:700;background:#ffffff0d;color:var(--colorText);cursor:pointer;transition:background .25s ease,border-color .25s ease}.btnApprove:hover{background:#00d8a22e;border-color:#00d8a266}.btnReject:hover{background:#ff5f7b2e;border-color:#ff5f7b66}.btnView:hover{background:#5b73ff2e;border-color:#5b73ff66}.btnApprove:disabled,.btnReject:disabled,.btnView:disabled{opacity:.55;cursor:not-allowed}.button{padding:10px 18px;border-radius:var(--radiusSm);border:none;cursor:pointer;font-weight:700;font-size:.9rem;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;outline:none}.button:active{transform:translateY(1px)}.buttonPrimary{background-image:var(--gradientPrimary);color:#fff;box-shadow:0 10px 20px #5b73ff66}.buttonPrimary:hover{filter:brightness(1.06)}.buttonSecondary{background:#ffffff14;color:var(--colorText);border:1px solid rgba(148,163,184,.35)}.buttonSecondary:hover{background:#ffffff24}button:disabled{opacity:.6;cursor:not-allowed}.flexCenter{display:flex;align-items:center;justify-content:center}@media(max-width:960px){.card,.container{padding:var(--spacingMd)}.table{min-width:100%}}@media(max-width:640px){:root{--gradientPrimary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);--gradientSecondary: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);--spacingXs: 4px;--spacingSm: 8px;--spacingMd: 16px;--spacingLg: 24px;--spacingXl: 32px;--radiusSm: 8px;--radiusMd: 12px;--radiusLg: 16px;--shadowSm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--shadowMd: 0 3px 6px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .12);--shadowLg: 0 10px 25px rgba(0, 0, 0, .15), 0 6px 12px rgba(0, 0, 0, .1);--shadowXl: 0 20px 40px rgba(0, 0, 0, .2)}.container{padding:var(--spacingSm)}h1{font-size:clamp(1.5rem,8vw,2rem)}.statWrap{grid-template-columns:1fr}.table th,.table td{padding:10px 12px}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--colorBg);background-image:radial-gradient(circle at 20% 50%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.1) 0%,transparent 50%);color:var(--colorText);line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{font-weight:600}h1{font-size:32px;font-weight:700;line-height:1.2;margin-bottom:var(--spacingMd);letter-spacing:-.5px}h2{font-size:28px;font-weight:700;margin-bottom:var(--spacingMd);letter-spacing:-.3px}h3{font-size:24px;font-weight:600;margin-bottom:var(--spacingSm)}p{color:var(--colorTextMuted)}.container{max-width:1200px;margin:0 auto;padding:var(--spacingLg)}.appLayout{display:flex;min-height:100vh}.content{flex:1;padding:var(--spacingLg)}.card{background-color:var(--colorSurface);border:1px solid var(--colorBorder);border-radius:var(--radiusMd);padding:var(--spacingLg);box-shadow:var(--shadowMd);transition:all .3s ease}.card:hover{border-color:var(--colorPrimary);box-shadow:0 10px 30px #6366f11a}.dashboardHeader h1{font-size:34px;margin:0}.dashboardHeader .buttonSecondary{padding:10px 16px}.statBadge{font-size:.8rem;padding:2px 8px;border-radius:999px;font-weight:700;text-transform:uppercase}.statBadge--success{background-color:#10b98126;color:var(--colorSuccess)}.statBadge--danger{background-color:#f43f5e26;color:var(--colorDanger)}.statWrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacingMd)}.tableWrapper{overflow-x:auto;border:1px solid var(--colorBorder);border-radius:var(--radiusMd);background-color:var(--colorSurface);box-shadow:var(--shadowSm)}.table{width:100%;border-collapse:collapse;min-width:700px}.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--colorBorder)}.table tbody tr:hover{background-color:#6366f114}.tableActions{display:flex;gap:8px}.btnApprove,.btnReject,.btnView,.btnSync{border:1px solid transparent;background:transparent;color:var(--colorText);padding:6px 10px;border-radius:var(--radiusSm);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}.btnApprove:hover{background:#10b98124;border-color:#10b9814d}.btnReject:hover{background:#f43f5e24;border-color:#f43f5e4d}.btnView:hover{background:#6366f124;border-color:#6366f14d}.btnApprove:disabled,.btnReject:disabled,.btnView:disabled{opacity:.6;cursor:not-allowed}.label{display:block;margin-bottom:var(--spacingXs);font-size:14px;color:var(--colorTextMuted)}.input{width:100%;padding:var(--spacingSm) var(--spacingMd);border-radius:var(--radiusSm);border:1px solid var(--colorBorder);background-color:transparent;color:var(--colorText);outline:none;transition:border .2s,box-shadow .2s}.input::placeholder{color:#9ca6bb66}.input:focus{border-color:var(--colorPrimary);box-shadow:0 0 0 3px #6366f11a;background-color:#6366f10d}.inputGroup{display:flex;flex-direction:column;gap:6px}.inputError{border-color:var(--colorDanger);box-shadow:0 0 0 3px #ef444426;background-color:#ef44440d}.button{padding:10px 20px;border-radius:var(--radiusSm);border:none;cursor:pointer;font-weight:600;font-size:14px;position:relative;overflow:hidden;transition:background .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1),border .2s ease}.button:active{filter:brightness(.92)}.buttonPrimary{background:var(--gradientPrimary);color:#fff;box-shadow:var(--shadowSm);border:1px solid transparent}.buttonPrimary:hover{background:linear-gradient(130deg,#6f85ff,#1e40ff);box-shadow:0 6px 24px #5b73ff59;border:1px solid rgba(255,255,255,.12);filter:brightness(1.08)}.buttonPrimary:active{background:linear-gradient(130deg,#3f57f0,#1a3be0);box-shadow:var(--shadowSm)}.buttonPrimary:focus-visible{outline:none;border:1px solid var(--colorSecondary);box-shadow:0 0 0 2px #28c7ed40}.buttonSecondary{background-color:transparent;color:var(--colorText);border:1px solid var(--colorBorder)}.buttonSecondary:hover{border-color:var(--colorPrimary);background-color:#5b73ff1f;color:#fff;box-shadow:var(--shadowSm)}.buttonSecondary:active{background-color:#5b73ff2e;filter:brightness(.95)}.buttonSecondary:focus-visible{outline:none;border-color:var(--colorSecondary);box-shadow:0 0 0 2px #28c7ed40}.buttonFull{width:100%}.flex{display:flex}.flexColumn{display:flex;flex-direction:column}.flexCenter{display:flex;justify-content:center;align-items:center}.flexBetween{display:flex;justify-content:space-between;align-items:center}.gapSm{gap:var(--spacingSm)}.gapMd{gap:var(--spacingMd)}.gapLg{gap:var(--spacingLg)}.textCenter{text-align:center}.textMuted{color:var(--colorTextMuted)}.fullHeight{min-height:100vh}a{color:var(--colorPrimary);text-decoration:none;transition:all .2s ease}a:hover{color:var(--colorPrimaryHover);text-decoration:underline}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--colorBg)}::-webkit-scrollbar-thumb{background:var(--colorBorder);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--colorPrimary)}.authContainer{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#030712,#111827,#1f2937);position:relative;overflow:hidden}.authContainer:before{content:"";position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.15) 0%,transparent 70%);border-radius:50%}.authContainer:after{content:"";position:absolute;bottom:-20%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 70%);border-radius:50%}.authCard{width:380px;padding:32px;border-radius:var(--radiusLg);background-color:#111827cc;border:1px solid rgba(99,102,241,.2);box-shadow:var(--shadowLg),0 0 60px #6366f11a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;z-index:1}.authTitle{font-size:22px;font-weight:600;margin-bottom:8px}.authSubtitle{font-size:14px;color:var(--colorTextMuted);margin-bottom:24px}.authFooter{margin-top:20px;text-align:center;font-size:14px;color:var(--colorTextMuted)}.authLink{color:var(--colorPrimary);cursor:pointer;font-weight:500}.authLink:hover{text-decoration:underline}.sidebar{position:fixed;left:0;top:0;height:100vh;width:240px;background-color:var(--colorSurface);border-right:1px solid rgba(99,102,241,.1);padding:var(--spacingLg);display:flex;flex-direction:column;box-shadow:4px 0 15px #0000004d;overflow-y:auto;z-index:100}.sidebarTitle{font-size:24px;font-weight:700;margin-bottom:var(--spacingLg);background:var(--gradientPrimary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}.sidebarSection{margin-top:var(--spacingLg)}.sidebarSectionTitle{font-size:12px;text-transform:uppercase;color:var(--colorTextMuted);margin-bottom:var(--spacingSm);padding-left:var(--spacingSm)}.sidebarMenu{display:flex;flex-direction:column;gap:var(--spacingSm)}.sidebarItem{display:flex;align-items:center;gap:12px;padding:var(--spacingSm) var(--spacingMd);border-radius:var(--radiusSm);cursor:pointer;transition:.2s;white-space:nowrap}.sidebarItem:hover{background-color:#6366f11a;color:var(--colorPrimary)}.sidebarItem span{white-space:nowrap}.sidebarItem svg{flex-shrink:0}.sidebarItemActive{background:var(--gradientPrimary);color:#fff;box-shadow:0 4px 15px #6366f14d}.sidebarItemActive:hover{color:#fff;box-shadow:0 6px 20px #6366f166}.sidebarFooter{position:sticky;bottom:0;margin-top:auto;padding-top:var(--spacingLg);padding-bottom:var(--spacingSm);border-top:1px solid rgba(99,102,241,.1);background-color:var(--colorSurface)}.sidebarLogout{color:var(--colorDanger)}.sidebarLogout:hover{background-color:#6c0c0c1a;color:var(--colorDanger)}.sidebarUser{display:flex;flex-direction:column;gap:4px;padding:.75rem 1rem;border-radius:10px;background:#ffffff08;transition:background .2s ease}.sidebarUser:hover{background:#ffffff0d}.tableWrapper{margin-top:20px;background-color:var(--colorSurface);border:1px solid var(--colorBorder);border-radius:var(--radiusMd);overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table{width:100%;border-collapse:collapse}.table th{text-align:left;padding:12px;font-size:14px;font-weight:600;color:var(--colorTextMuted);border-bottom:1px solid var(--colorBorder);background-color:#6366f10d}.table td{padding:14px 12px;border-bottom:1px solid var(--colorBorder);vertical-align:middle}.table tbody tr:hover{background-color:#6366f10d;transition:background-color .2s ease}.status{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;text-align:center}.statusApproved{background-color:#10b98126;color:#10b981}.statusRejected{background-color:#f43f5e26;color:#f43f5e}.statusPending{background-color:#f59e0b26;color:#f59e0b}.tableActions{display:flex;gap:8px;align-items:center;justify-content:flex-start}.tableActions button{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border:none;border-radius:var(--radiusSm);cursor:pointer;transition:all .2s ease;font-size:12px}.btnApprove{background-color:#10b98133;color:#10b981}.btnApprove:hover{background-color:#10b9814d;transform:translateY(-1px)}.btnSync{background-color:#5b73ff33;color:var(--colorPrimary)}.btnSync:hover{background-color:#5b73ff4d}.btnReject{background-color:#f43f5e33;color:#f43f5e}.btnReject:hover{background-color:#f43f5e4d;transform:translateY(-1px)}.btnView{background-color:#6366f133;color:var(--colorPrimary)}.btnView:hover{background-color:#6366f14d;transform:translateY(-1px)}.btnApprove:disabled,.btnReject:disabled,.btnView:disabled{opacity:.4;cursor:not-allowed;background-color:#9ca3af33;color:var(--colorTextMuted)}.btnApprove:disabled:hover,.btnReject:disabled:hover,.btnView:disabled:hover{background-color:#9ca3af33;transform:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.topbar{display:none}@media(max-width:768px){.appLayout{flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacingMd);border-bottom:1px solid var(--colorBorder);background-color:var(--colorSurface);position:sticky;top:0;z-index:500}.sidebar{position:fixed;top:0;left:-240px;height:100%;width:240px;z-index:1000;transition:left .25s ease;border-right:1px solid rgba(99,102,241,.1);border-bottom:none;margin-left:0!important}.sidebarOpen{left:0}.overlay{position:fixed;inset:0;background:#0006;z-index:999;display:block}.overlay.active{display:block}.content{padding:var(--spacingMd);margin-left:0!important;height:auto;overflow-y:visible}.card{width:100%}.container{padding:var(--spacingMd)}.authCard{width:90%;max-width:380px;padding:24px}.tableWrapper{margin-top:16px;border-radius:var(--radiusSm);overflow-x:auto;-webkit-overflow-scrolling:touch}.table{font-size:13px;min-width:600px}.table th{padding:10px;font-size:12px}.table td{padding:10px;font-size:13px}.tableActions{gap:6px;flex-wrap:wrap}.tableActions button{padding:6px 8px;font-size:11px;white-space:nowrap}.btnText{display:none}.btnApprove.iconOnly,.btnReject.iconOnly,.btnSync.iconOnly,.btnView.iconOnly{padding:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center}h1{font-size:24px}h2{font-size:20px}h3{font-size:18px}}@media(min-width:769px)and (max-width:1024px){.sidebar{position:fixed;left:0;top:0;height:100vh;width:200px}.content{margin-left:200px;height:100vh;overflow-y:auto}.container{max-width:100%}.table{font-size:13px}.table th,.table td{padding:10px}}@media(min-width:1025px){.sidebar{position:fixed;left:0;top:0;height:100vh}.content{margin-left:240px;height:100vh;overflow-y:auto}.table{font-size:14px}.tableActions button{padding:6px 12px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.phoneWrapper{position:relative;display:flex;align-items:center;width:100%}.phoneInput{width:100%;padding-left:2.5rem;box-sizing:border-box}.phonePrefix{position:absolute;left:.5rem;top:50%;font-weight:600;transform:translateY(-50%);font-size:.85rem;color:var(--colorTextMuted);pointer-events:none}.notFoundWrapper{min-height:100vh;padding:var(--spacingLg);display:flex;align-items:center;justify-content:center;position:relative}.notFoundWrapper:before{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(91,115,255,.18) 0%,transparent 70%);top:10%;left:20%;filter:blur(40px);z-index:0}.notFoundCard{max-width:480px;width:100%;padding:var(--spacingXl);position:relative;z-index:1}.notFoundCode{font-size:90px;font-weight:800;background:var(--gradientPrimary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:var(--spacingMd);letter-spacing:-2px}.notFoundCard p{font-size:.95rem;max-width:320px;margin:0 auto}.notFoundCard{animation:fadeIn .5s ease}