@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700;800&display=swap";:root{--bg-dark:#f8fafc;--bg-main:#f8fafc;--bg-canvas:#f1f5f9;--bg-card:#fff;--bg-surface:#fff;--border-color:#e2e8f0;--border-subtle:#cbd5e1;--shadow-sm:0 1px 3px #0f172a0d;--shadow-panel:0 4px 20px -2px #0f172a0f, 0 2px 6px -1px #0f172a0a;--shadow-dropdown:0 10px 30px -4px #0f172a1f;--text-main:#0f172a;--text-heading:#0f172a;--text-muted:#475569;--text-subtle:#64748b;--primary:#4f46e5;--primary-hover:#4338ca;--primary-glow:#4f46e533;--accent-cyan:#0284c7;--accent-pink:#e11d48;--bronze-grad:linear-gradient(135deg, #4d2310 0%, #a05a35 50%, #4d2310 100%);--bronze-border:#a05a3566;--silver-grad:linear-gradient(135deg, #2d3436 0%, #dfe6e9 50%, #2d3436 100%);--silver-border:#dfe6e966;--gold-grad:linear-gradient(135deg, #785a00 0%, #ffeaa7 50%, #d4af37 70%, #785a00 100%);--gold-border:#feca5766;--platinum-grad:linear-gradient(135deg, #1e1330 0%, #a29bfe 50%, #e0d4f7 80%, #1e1330 100%);--platinum-border:#a29bfe66;--diamond-grad:linear-gradient(135deg, #0f171e 0%, #00ecff 40%, #fff 60%, #0a3d62 80%, #0f171e 100%);--diamond-border:#00ecff80;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Outfit,Sarabun,Inter,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);background-image:radial-gradient(circle at 10% 10%,#4f46e508 0%,#0000 40%),radial-gradient(circle at 90% 90%,#0284c708 0%,#0000 40%);background-attachment:fixed;min-height:100vh;font-size:15px;line-height:1.5;overflow-x:hidden}h1,h2,h4,h5,h6{color:var(--text-heading)}h3{color:#0f172a!important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.app-container{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);background-color:#fff;max-width:480px;min-height:100vh;margin:0 auto;padding-bottom:80px;position:relative;box-shadow:0 0 40px #0f172a0f}.glass-panel{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-panel);color:#0f172a;border-radius:20px;margin-bottom:16px;padding:20px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),border-color .3s,box-shadow .3s}.glass-panel:hover{border-color:#cbd5e1;box-shadow:0 8px 30px #0f172a14}.glass-panel:active{transform:scale(.99)}.glass-panel h1,.glass-panel h2,.glass-panel h3,.glass-panel h4,.glass-panel h5,.glass-panel h6{color:#0f172a}.glass-panel p{color:#475569}.rank-card{color:#fff;border:1.5px solid #fff3;border-radius:24px;flex-direction:column;justify-content:space-between;height:200px;padding:24px;transition:all .5s cubic-bezier(.15,.83,.66,1);display:flex;position:relative;overflow:hidden;box-shadow:0 15px 35px #0f172a40}.rank-card h1,.rank-card h2,.rank-card h3,.rank-card h4,.rank-card h5,.rank-card h6,.rank-card p,.rank-card span,.rank-card div{color:#fff!important}.rank-card:before{content:"";opacity:.04;z-index:1;background-image:linear-gradient(45deg,#ffffff26 25%,#0000 25% 50%,#ffffff26 50% 75%,#0000 75%,#0000);background-size:100px 100px;position:absolute;inset:0}.rank-card:after{content:"";pointer-events:none;z-index:2;opacity:.8;background:linear-gradient(#fff0 0%,#ffffff14 30%,#ffffff40 50%,#ffffff14 70%,#fff0 100%);width:200%;height:200%;transition:all .8s;position:absolute;top:-50%;left:-50%;transform:rotate(30deg)}.rank-card:hover:after{transform:translate(30%,30%)rotate(30deg)}.rank-bronze{background:var(--bronze-grad);border-color:var(--bronze-border)}.rank-silver{background:var(--silver-grad);border-color:var(--silver-border);color:#2d3436}.rank-silver h1,.rank-silver h2,.rank-silver h3,.rank-silver h4,.rank-silver h5,.rank-silver h6,.rank-silver p,.rank-silver span,.rank-silver div,.rank-silver .card-title,.rank-silver .card-label,.rank-silver .card-value{color:#0f141d!important;text-shadow:none!important}.rank-gold{background:var(--gold-grad);border-color:var(--gold-border);color:#2c1a04}.rank-gold h1,.rank-gold h2,.rank-gold h3,.rank-gold h4,.rank-gold h5,.rank-gold h6,.rank-gold p,.rank-gold span,.rank-gold div,.rank-gold .card-title,.rank-gold .card-label,.rank-gold .card-value{color:#3b2203!important;text-shadow:none!important}.rank-platinum{background:var(--platinum-grad);border-color:var(--platinum-border)}.rank-diamond{background:var(--diamond-grad);border-color:var(--diamond-border)}.card-shine{text-shadow:0 2px 4px #0006}.bottom-nav{z-index:1000;justify-content:space-around;align-items:center;height:64px;padding:0 10px;display:flex;position:fixed;left:50%;transform:translate(-50%);-webkit-backdrop-filter:blur(28px)saturate(200%)!important;background:#ffffffc2!important;border:1.5px solid #fffffff2!important;border-bottom:none!important;border-radius:28px 28px 0 0!important;width:100%!important;max-width:480px!important;bottom:0!important;overflow:visible!important;box-shadow:0 -10px 35px #1f26871a,inset 0 1.5px 2px #fffffff2!important}.bottom-nav.has-admin{max-width:480px!important;padding:0 6px!important}.bottom-nav:before{content:"";pointer-events:none;z-index:10;background:linear-gradient(90deg,#0000,#fffffff2,#0000);height:1.5px;position:absolute;top:0;left:20px;right:20px}.nav-item{color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:28px;flex-direction:row;flex-shrink:0;justify-content:center;align-items:center;gap:5px;padding:8px 10px;font-size:11.5px;font-weight:700;text-decoration:none;display:flex;position:relative;transition:all .38s cubic-bezier(.34,1.56,.64,1)!important}.bottom-nav.has-admin .nav-item{gap:4px;padding:7px 8px;font-size:11px}.nav-item:hover{color:#0f172a;background:#ffffff73}.nav-item.active{z-index:5;color:#fff!important;background:linear-gradient(135deg,#4f46e5eb 0%,#0284c7eb 100%)!important;border:1px solid #fff9!important;padding:8px 14px!important;transform:translateY(-2px)scale(1.03)!important;box-shadow:0 8px 22px #4f46e561,inset 0 1px 1.5px #ffffffbf!important}.bottom-nav.has-admin .nav-item.active{padding:7px 11px!important}.nav-item-icon{flex-shrink:0;width:19px;height:19px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.nav-item.active .nav-item-icon{filter:drop-shadow(0 2px 5px #00000040)!important;color:#fff!important;transform:scale(1.12)rotate(-3deg)!important}.nav-item span{letter-spacing:-.2px;white-space:nowrap;font-weight:800}.progress-ring-circle{transform-origin:50%;transition:stroke-dashoffset .35s;transform:rotate(-90deg)}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%);border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;width:100%;padding:14px 20px;font-size:15px;font-weight:700;transition:all .3s;display:flex;box-shadow:0 4px 14px #4f46e54d}.btn-primary:hover{background:linear-gradient(135deg,#4338ca 0%,#3730a3 100%);box-shadow:0 6px 20px #4f46e566}.btn-primary:active{transform:scale(.97)}.btn-accent{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%);border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;width:100%;padding:14px 20px;font-size:15px;font-weight:700;transition:all .3s;display:flex;box-shadow:0 4px 14px #0284c74d}.btn-accent:active{transform:scale(.97)}.btn-disabled{color:#94a3b8;cursor:not-allowed;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:14px;justify-content:center;align-items:center;width:100%;padding:14px 20px;font-size:15px;font-weight:600;display:flex}.form-input{color:#0f172a;background:#fff;border:1.5px solid #cbd5e1;border-radius:14px;outline:none;width:100%;padding:14px;font-size:15px;transition:all .3s}.form-input::placeholder{color:#94a3b8}.form-input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #4f46e526}.admin-layout{background-color:var(--bg-main);min-height:100vh;color:var(--text-main);padding:24px 24px 140px}@media (width>=768px){.admin-layout{max-width:1240px;margin:0 auto}}.table-container{border:1px solid var(--border-color);box-shadow:var(--shadow-panel);background-color:#fff;border-radius:16px;overflow-x:auto}.admin-table{border-collapse:collapse;text-align:left;background-color:#fff;width:100%;font-size:14px}.admin-table th{color:#4f46e5;background-color:#f8fafc;border-bottom:1.5px solid #e2e8f0;padding:16px;font-weight:700}.admin-table td{color:#0f172a;border-bottom:1px solid #e2e8f0;padding:16px}.admin-table tr:hover{background-color:#f8fafc}.badge{text-transform:uppercase;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700}.badge-pending{color:#d97706;background-color:#fef3c7}.badge-paid{color:#059669;background-color:#d1fae5}.badge-overdue{color:#dc2626;background-color:#fee2e2}.badge-approved{color:#059669;background-color:#d1fae5}.badge-rejected{color:#dc2626;background-color:#fee2e2}.badge-waived{color:#0d9488;background-color:#ccfbf1}.glass-modal-overlay{-webkit-backdrop-filter:blur(16px)!important;z-index:999999!important;box-sizing:border-box!important;background-color:#0f172ac7!important;justify-content:center!important;align-items:center!important;width:100vw!important;height:100vh!important;padding:16px!important;display:flex!important;position:fixed!important;inset:0!important}.glass-modal-card{color:#0f172a!important;-webkit-overflow-scrolling:touch!important;z-index:100000!important;background:#fff!important;border:1.5px solid #cbd5e1!important;border-radius:24px!important;width:100%!important;max-height:88vh!important;margin:auto!important;position:relative!important;overflow-y:auto!important;box-shadow:0 25px 60px -12px #0f172a66!important}@keyframes fadeInModal{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.admin-layout h1,.admin-layout h2,.admin-layout h3,.admin-layout h4,.admin-layout h5,.admin-layout h6{color:#0f172a!important}.admin-layout p,.admin-layout span,.admin-layout div,.admin-layout td,.admin-layout th,.admin-layout li,.admin-layout label,.admin-layout strong,.admin-layout b{color:inherit}.admin-layout [style*="color: '#fff'"],.admin-layout [style*="color: #fff"],.admin-layout [style*="color: \"#fff\""],.admin-layout [style*="color: '#ffffff'"],.admin-layout [style*="color: #ffffff"],.admin-layout [style*="color: '#a4b0be'"],.admin-layout [style*="color: #a4b0be"],.admin-layout [style*="color: '#747d8c'"],.admin-layout [style*="color: #747d8c"],.admin-layout [style*="color: '#ffeaa7'"],.admin-layout [style*="color: #ffeaa7"]{color:inherit!important}.glass-modal-card p,.glass-modal-card span,.glass-modal-card div,.glass-modal-card td,.glass-modal-card th,.glass-modal-card li,.glass-modal-card label,.glass-modal-card h1,.glass-modal-card h2,.glass-modal-card h3,.glass-modal-card h4,.glass-modal-card h5,.glass-modal-card h6{color:#0f172a!important}.glass-modal-card [style*="color: '#0284c7'"],.glass-modal-card [style*="color: #0284c7"],.glass-modal-card [style*="color: '#059669'"],.glass-modal-card [style*="color: #059669"],.glass-modal-card [style*="color: '#d97706'"],.glass-modal-card [style*="color: #d97706"],.glass-modal-card [style*="color: '#dc2626'"],.glass-modal-card [style*="color: #dc2626"],.glass-modal-card [style*="color: '#2ed573'"],.glass-modal-card [style*="color: #2ed573"]{color:inherit!important}.admin-layout input,.admin-layout select,.admin-layout textarea,.glass-modal-card input,.glass-modal-card select,.glass-modal-card textarea{border-radius:12px;color:#0f172a!important;background:#fff!important;border:1.5px solid #cbd5e1!important}.admin-layout input:focus,.admin-layout select:focus,.admin-layout textarea:focus,.glass-modal-card input:focus,.glass-modal-card select:focus,.glass-modal-card textarea:focus{outline:none;border-color:#4f46e5!important;box-shadow:0 0 0 3px #4f46e51f!important}.admin-layout input::placeholder,.admin-layout textarea::placeholder,.glass-modal-card input::placeholder,.glass-modal-card textarea::placeholder{color:#94a3b8!important}.admin-layout select option,.glass-modal-card select option{color:#0f172a;background:#fff}.admin-layout [style*="background: 'rgba(0,0,0"],.admin-layout [style*="background: rgba(0,0,0"]{background:#0f172a08!important}.admin-layout [style*=\#ffeaa7]{color:#b45309!important}.admin-layout table thead tr{background:#f8fafc!important}.admin-layout table thead th{color:#4f46e5!important;background:#f8fafc!important;border-bottom:1.5px solid #e2e8f0!important}.admin-layout table tbody tr{background:#fff!important;border-bottom:1px solid #f1f5f9!important}.admin-layout table tbody tr:hover{background:#f8fafc!important}.admin-layout table tbody td{color:#0f172a!important;border-bottom:1px solid #f1f5f9!important}.admin-layout [style*="background: '#1e1e24'"],.admin-layout [style*="background: '#13131a'"],.admin-layout [style*="background: '#111116'"]{background:#fff!important;border-color:#cbd5e1!important}@keyframes modalOverlayFadeIn{0%{opacity:0;-webkit-backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(14px)}}@keyframes modalPopInSpring{0%{opacity:0;transform:scale(.94)translateY(14px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes pageTabSlideUp{0%{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:none}}div[style*="position: fixed"],div[style*="position: 'fixed'"],.modal-overlay{animation:.35s cubic-bezier(.22,1,.36,1) forwards modalOverlayFadeIn}div[style*="position: fixed"]>div,div[style*="position: 'fixed'"]>div,.glass-modal-card{animation:.42s cubic-bezier(.22,1,.36,1) forwards modalPopInSpring}.app-container>div,.admin-layout,.tab-content,.page-container{animation:.45s cubic-bezier(.22,1,.36,1) forwards pageTabSlideUp}html{scroll-behavior:smooth}button,.btn-primary,.btn-secondary,.btn-accent,[role=button]{cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1)!important}button:hover,.btn-primary:hover,.btn-accent:hover{transform:translateY(-1.5px)}button:active,.btn-primary:active,.btn-accent:active{transition-duration:.1s!important;transform:scale(.97)!important}.hover-glow{transition:all .35s cubic-bezier(.22,1,.36,1)!important}.hover-glow:hover{border-color:#4f46e559!important;transform:translateY(-3px)scale(1.01)!important;box-shadow:0 12px 30px #4f46e51f!important}.hover-glow:active{transform:scale(.98)!important}.admin-nav-item,.admin-layout button{transition:all .3s cubic-bezier(.22,1,.36,1)!important}