@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap");:root{--primary:#6366f1;--primary-light:#818cf8;--primary-glow:rgba(99,102,241,.4);--accent:#a78bfa;--accent-hover:#8b5cf6;--bg-primary:#060818;--bg-secondary:rgba(10,15,40,.8);--bg-glass:rgba(13,18,45,.5);--orb-1:rgba(99,102,241,.25);--orb-2:rgba(167,139,250,.15);--orb-3:rgba(139,92,246,.2);--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--status-paid:#10b981;--status-pending:#f59e0b;--status-overdue:#ef4444;--border-color:hsla(0,0%,100%,.08);--border-hover:hsla(0,0%,100%,.18);--border-active:var(--primary);--shadow-sm:0 2px 8px rgba(0,0,0,.3);--shadow-md:0 8px 32px rgba(0,0,0,.4);--shadow-lg:0 16px 48px rgba(0,0,0,.5);--shadow-glow:0 0 24px var(--primary-glow);--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:250ms cubic-bezier(0.4,0,0.2,1);--transition-slow:400ms cubic-bezier(0.4,0,0.2,1);--sidebar-width:260px}*,:after,:before{box-sizing:border-box;padding:0;margin:0}html{scroll-behavior:smooth}body{font-family:Outfit,Noto Sans Thai,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.1);border-radius:var(--radius-full);-webkit-transition:background var(--transition-fast);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.2)}.bg-mesh{position:fixed;inset:0;z-index:-1;background-color:var(--bg-primary);overflow:hidden}.mesh-orb{position:absolute;border-radius:50%;filter:blur(90px);animation:floatOrb 25s ease-in-out infinite alternate;pointer-events:none}.mesh-orb-1{width:500px;height:500px;background:var(--orb-1);top:-150px;left:-100px;animation-delay:0s}.mesh-orb-2{width:600px;height:600px;background:var(--orb-2);bottom:-200px;right:-150px;animation-delay:-8s}.mesh-orb-3{width:350px;height:350px;background:var(--orb-3);top:45%;left:55%;animation-delay:-15s}.bg-mesh:after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--mesh-grid,hsla(0,0%,100%,.015)) 1px,transparent 1px),linear-gradient(90deg,var(--mesh-grid,hsla(0,0%,100%,.015)) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}@keyframes floatOrb{0%{transform:translate(0) scale(1)}25%{transform:translate(40px,-60px) scale(1.08)}50%{transform:translate(-30px,30px) scale(.95)}75%{transform:translate(20px,50px) scale(1.05)}to{transform:translate(0) scale(1)}}.glass,.glass-card{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.glass-card{border-radius:var(--radius-lg);padding:1.5rem;transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base)}.glass-card:hover{border-color:hsla(0,0%,100%,.14);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.glass-card-glow:hover{border-color:var(--primary);box-shadow:var(--shadow-md),var(--shadow-glow)}.glass-card-gradient{position:relative;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:1.5rem;overflow:hidden}.glass-card-gradient:before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;background:linear-gradient(135deg,var(--primary) 0,transparent 50%,var(--accent) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}.brand-font{font-family:Space Grotesk,Outfit,sans-serif}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-gradient{background:linear-gradient(135deg,var(--primary-light) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-gradient-white{background:linear-gradient(135deg,#fff,hsla(0,0%,100%,.6));-webkit-background-clip:text;background-clip:text}.logo-text,.text-gradient-white{-webkit-text-fill-color:transparent}.logo-text{font-family:Space Grotesk,sans-serif;font-weight:700;letter-spacing:-.5px;background:linear-gradient(135deg,var(--primary-light) 20%,var(--accent) 80%);-webkit-background-clip:text;background-clip:text}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:var(--radius-sm);font-weight:500;font-size:.9rem;cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;font-family:inherit;letter-spacing:.01em;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--primary) 0,var(--accent-hover) 100%);color:#fff;border-color:transparent;box-shadow:0 4px 16px var(--primary-glow)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--primary-glow);filter:brightness(1.1)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:hsla(0,0%,100%,.05);color:var(--text-primary);border-color:var(--border-color)}.btn-secondary:hover{background:hsla(0,0%,100%,.08);border-color:var(--border-hover)}.btn-ghost{background:transparent;color:var(--primary-light);border-color:transparent}.btn-ghost:hover{background:hsla(0,0%,100%,.06);color:var(--accent)}.btn-danger{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.3)}.btn-danger:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}.btn-icon{padding:.5rem;border-radius:var(--radius-sm);background:hsla(0,0%,100%,.05);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.btn-icon:hover{background:hsla(0,0%,100%,.1);color:var(--text-primary)}.badge{padding:.25rem .7rem;border-radius:var(--radius-full);font-size:.72rem;font-weight:600;letter-spacing:.03em;display:inline-flex;align-items:center;gap:.35rem;text-transform:uppercase}.badge:before{content:"";width:5px;height:5px;border-radius:50%;flex-shrink:0}.badge-paid{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.25)}.badge-paid:before{background:#10b981}.badge-pending{background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.25)}.badge-pending:before{background:#f59e0b}.badge-overdue{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.25)}.badge-overdue:before{background:#ef4444}.badge-role-admin{background:rgba(99,102,241,.15);color:#a78bfa;border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-full);letter-spacing:.03em}.badge-role-admin,.badge-role-tenant{padding:.2rem .6rem;font-size:.7rem;font-weight:600}.badge-role-tenant{background:rgba(14,165,233,.15);color:#7dd3fc;border:1px solid rgba(14,165,233,.3);border-radius:var(--radius-full)}.input-group{margin-bottom:1.25rem}.input-label{display:block;margin-bottom:.45rem;color:var(--text-secondary);font-size:.82rem;font-weight:500;letter-spacing:.02em}.input-field{width:100%;padding:.75rem 1rem;background:var(--input-bg,rgba(0,0,0,.25));border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.9rem;transition:all var(--transition-base);outline:none}.input-field::placeholder{color:var(--text-muted)}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:var(--input-bg,rgba(0,0,0,.35))}.glass-table-container{width:100%;overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--table-bg,rgba(0,0,0,.15))}.glass-table{width:100%;border-collapse:collapse;text-align:left}.glass-table th{padding:.85rem 1rem;background:color-mix(in srgb,var(--text-primary) 4%,transparent);color:var(--text-muted);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}.glass-table td,.glass-table th{border-bottom:1px solid var(--border-color)}.glass-table td{padding:.9rem 1rem;color:var(--text-primary);font-size:.88rem}.glass-table tr:last-child td{border-bottom:none}.glass-table tbody tr{transition:background var(--transition-fast)}.glass-table tbody tr:hover td{background:hsla(0,0%,100%,.025)}.sidebar-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.88rem;font-weight:500;transition:all var(--transition-base);cursor:pointer;text-decoration:none;border:1px solid transparent}.sidebar-item:hover{color:var(--text-primary);background:hsla(0,0%,100%,.05)}.sidebar-item.active{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.2);color:var(--primary-light);background:color-mix(in srgb,var(--primary) 15%,transparent);border-color:color-mix(in srgb,var(--primary) 30%,transparent)}.sidebar-icon{width:32px;height:32px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.sidebar-icon,.stat-card{transition:all var(--transition-base)}.stat-card{position:relative;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;overflow:hidden}.stat-card:hover{transform:translateY(-3px);border-color:hsla(0,0%,100%,.14);box-shadow:var(--shadow-lg)}.stat-card:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:0;transition:opacity var(--transition-base)}.stat-card:hover:after{opacity:1}.alert{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;border-radius:var(--radius-md);border:1px solid}.alert-danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:#fca5a5}.alert-warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);color:#fcd34d}.alert-info{background:color-mix(in srgb,var(--primary) 8%,transparent);border-color:color-mix(in srgb,var(--primary) 30%,transparent);color:var(--primary-light)}.avatar{border-radius:50%;background:linear-gradient(135deg,var(--primary) 0,var(--accent-hover) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;box-shadow:0 2px 8px var(--primary-glow)}.divider{height:1px;background:var(--border-color);margin:1.25rem 0}.flex-center{justify-content:center}.flex-between,.flex-center{display:flex;align-items:center}.flex-between{justify-content:space-between}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 0 0 var(--primary-glow)}50%{box-shadow:0 0 0 8px transparent}}.animate-fade-in{animation:fadeIn .4s ease forwards}.animate-slide-up{animation:slideUp .4s ease forwards}.animate-slide-left{animation:slideInLeft .4s ease forwards}.theme-dot{width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-color);transition:all var(--transition-fast);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;background:var(--bg-glass);color:var(--text-primary)}.theme-dot:hover{transform:scale(1.08);border-color:var(--primary-light)}.theme-dot.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 20%,transparent);box-shadow:0 0 12px var(--primary-glow)}.lang-toggle{display:flex;gap:2px;background:rgba(0,0,0,.2);border:1px solid var(--border-color);padding:3px}.lang-btn,.lang-toggle{border-radius:var(--radius-full)}.lang-btn{padding:.2rem .6rem;font-size:.72rem;font-weight:600;cursor:pointer;border:none;transition:all var(--transition-fast);background:transparent;color:var(--text-secondary);font-family:inherit}.lang-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}@media (max-width:768px){.glass-card{border-radius:var(--radius-md)}.glass-card,.stat-card{padding:1rem}}.min-h-screen{min-height:100vh}.flex{display:flex}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.items-center{align-items:center}.justify-center{justify-content:center}.relative{position:relative}.absolute{position:absolute}.overflow-hidden{overflow:hidden}.hidden{display:none}.w-full{width:100%}.max-w-md{max-width:28rem}.gap-3{gap:.75rem}.gap-2{gap:.5rem}.mb-2{margin-bottom:.5rem}.mb-8{margin-bottom:2rem}.p-12{padding:3rem}.p-6{padding:1.5rem}.z-10{z-index:10}.space-y-6>*+*{margin-top:1.5rem}.space-y-4>*+*{margin-top:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:w-1\/2{width:50%}.lg\:p-12{padding:3rem}.lg\:hidden{display:none}}