:root{--primary:#2563eb;--primary-hover:#1d4ed8;--primary-light:#eff6ff;--primary-rgb:37,99,235;--secondary:#475569;--bg-page:#f1f5f9;--bg-card:hsla(0,0%,100%,.7);--border-color:rgba(226,232,240,.8);--text-main:#0f172a;--text-muted:#64748b;--success:#10b981;--success-bg:#ecfdf5;--success-border:#a7f3d0;--success-text:#065f46;--danger:#ef4444;--danger-bg:#fef2f2;--danger-border:#fca5a5;--danger-text:#991b1b;--warning:#f59e0b;--warning-bg:#fffbeb;--warning-border:#fde68a;--warning-text:#92400e;--pending:#3b82f6;--pending-bg:#eff6ff;--pending-border:#bfdbfe;--pending-text:#1e40af;--glass-bg:hsla(0,0%,100%,.75);--glass-blur:16px;--glass-shadow:0 8px 32px 0 rgba(31,38,135,.08);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--font-sans:"Outfit","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--sidebar-width:260px;--bottom-bar-height:64px;--transition-smooth:all .3s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-page);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:#94a3b880}.app-container{display:flex;min-height:100vh;position:relative}.sidebar{width:var(--sidebar-width);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-right:1px solid var(--border-color);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:100;padding:24px 16px;box-shadow:var(--glass-shadow)}.logo-container{gap:12px;padding:0 12px 24px;border-bottom:1px solid var(--border-color);margin-bottom:24px}.logo-container,.logo-icon{display:flex;align-items:center}.logo-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary),#3b82f6);justify-content:center;color:#fff;font-weight:700;font-size:1.25rem;box-shadow:0 4px 12px #2563eb4d}.logo-text{font-family:Outfit,sans-serif;font-size:1.35rem;font-weight:700;color:var(--text-main);letter-spacing:-.5px}.nav-links{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1}.nav-item a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);color:var(--text-muted);text-decoration:none;font-weight:500;transition:var(--transition-smooth)}.nav-item a:hover,.nav-item.active a{color:var(--primary);background:var(--primary-light)}.nav-item.active a{font-weight:600}.user-panel{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border-color)}.user-avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid #fff;box-shadow:var(--shadow-sm)}.user-info{flex:1;min-width:0}.user-name{font-weight:600;font-size:.9rem;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.75rem;text-transform:capitalize}.logout-btn,.user-role{color:var(--text-muted)}.logout-btn{background:transparent;border:none;cursor:pointer;padding:8px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:var(--transition-smooth)}.logout-btn:hover{background:#f1f5f9;color:var(--danger)}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bottom-bar-height);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--border-color);box-shadow:0 -4px 20px #0000000a;z-index:100;padding:0 16px}.mobile-nav-links{list-style:none;display:flex;align-items:center;justify-content:space-around;height:100%}.mobile-nav-item a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-muted);text-decoration:none;font-size:.75rem;font-weight:500;transition:var(--transition-smooth);padding:6px 12px;border-radius:var(--radius-sm)}.mobile-nav-item a:hover,.mobile-nav-item.active a{color:var(--primary)}.main-content{flex:1;margin-left:var(--sidebar-width);padding:40px;min-width:0;display:flex;flex-direction:column;gap:32px}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}.card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--glass-shadow);transition:var(--transition-smooth);position:relative;overflow:hidden}.card:hover{box-shadow:0 12px 40px #1f26871f}.card-title{font-size:1.15rem;color:var(--text-main);margin-bottom:20px;display:flex;justify-content:space-between}.badge,.card-title{font-weight:600;align-items:center}.badge{display:inline-flex;padding:4px 12px;border-radius:9999px;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;border:1px solid transparent}.badge.pending{background:var(--pending-bg);border-color:var(--pending-border);color:var(--pending-text)}.badge.approved{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}.badge.rejected{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}.form-group{margin-bottom:20px}.form-label{display:block;font-size:.875rem;font-weight:600;color:var(--text-main);margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid var(--border-color);background:#ffffffe6;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.95rem;color:var(--text-main);transition:var(--transition-smooth)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #2563eb1f;background:#fff}.form-input:disabled{background:#f1f5f9;color:var(--text-muted);cursor:not-allowed}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:1px solid transparent}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);box-shadow:0 4px 12px #2563eb40}.btn-secondary{background:#fff;border-color:var(--border-color);color:var(--text-main)}.btn-secondary:hover{background:#f8fafc;border-color:#cbd5e1}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626;box-shadow:0 4px 12px #ef444440}.btn-sm{padding:8px 16px;font-size:.85rem;border-radius:var(--radius-sm)}.table-container{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-color)}.table{width:100%;border-collapse:collapse;text-align:left;background:var(--glass-bg)}.table th{background:#f1f5f980;font-size:.85rem;font-weight:600;color:var(--text-muted)}.table td,.table th{padding:16px 20px;border-bottom:1px solid var(--border-color)}.table td{font-size:.95rem}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:#f8fafc80}.alert{padding:16px;border-radius:var(--radius-md);border:1px solid;margin-bottom:20px;display:flex;align-items:center;gap:12px;font-size:.9rem}.alert-success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}.alert-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}.alert-warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#e0f2fe,#dbeafe 50%,#eff6ff);padding:24px}.login-card{max-width:420px;width:100%;padding:40px;border-radius:var(--radius-lg);background:#ffffffd9;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid hsla(0,0%,100%,.4);box-shadow:0 20px 40px #0000000f;text-align:center}.login-logo{width:56px;height:56px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary),#3b82f6);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 20px;box-shadow:0 8px 24px #2563eb40}.login-logo,.login-title{font-weight:700;font-size:1.75rem}.login-title{font-family:Outfit,sans-serif;margin-bottom:8px;color:var(--text-main)}.login-subtitle{color:var(--text-muted);font-size:.95rem;margin-bottom:32px}.google-btn-container{display:flex;justify-content:center;margin-bottom:24px}.dev-bypass-box{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color)}.dev-bypass-title{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease-out forwards}@media(max-width:1024px){.sidebar{display:none}.mobile-nav{display:block}.main-content{margin-left:0;padding:24px 16px calc(var(--bottom-bar-height) + 24px) 16px}}@media(max-width:640px){.dashboard-grid{grid-template-columns:1fr}.card{padding:20px}.table td,.table th{padding:12px 14px;font-size:.85rem}.login-card{padding:28px 20px}}select.form-input{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important}input[type=date].form-input,select.form-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px!important;padding-right:36px!important}input[type=date].form-input{position:relative;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")!important}input[type=date].form-input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}