:root{--bg-main: 222 47% 6%;--bg-panel: 222 36% 10%;--bg-panel-hover: 222 35% 13%;--border-color: 223 27% 20%;--text-primary: 210 40% 98%;--text-secondary: 215 20% 65%;--text-muted: 215 15% 45%;--primary: 190 90% 50%;--primary-glow: 190 90% 50% / .15;--success: 150 80% 50%;--success-glow: 150 80% 50% / .15;--danger: 350 85% 55%;--danger-glow: 350 85% 55% / .15;--warning: 38 92% 50%;--radius-lg: 16px;--radius-md: 10px;--radius-sm: 6px;--shadow-lg: 0 10px 30px -15px rgba(0, 0, 0, .7);--shadow-glow: 0 0 20px rgba(6, 182, 212, .15);--font-title: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:hsl(var(--bg-main));color:hsl(var(--text-primary));font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;line-height:1.5}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:hsl(var(--bg-main))}::-webkit-scrollbar-thumb{background:hsl(var(--border-color));border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:hsl(var(--text-muted))}.app-container{display:flex;flex-direction:column;min-height:100vh;background-image:radial-gradient(at 0% 0%,rgba(6,182,212,.03) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(16,185,129,.02) 0px,transparent 50%)}.glass-panel{background-color:hsla(var(--bg-panel) / .8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid hsla(var(--border-color) / .7);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-lg);transition:var(--transition-normal)}.glass-panel:hover{border-color:hsla(var(--primary) / .3);box-shadow:var(--shadow-lg),0 0 30px hsla(var(--primary) / .03)}h1,h2,h3,h4{font-family:var(--font-title);font-weight:600;letter-spacing:-.02em}.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:24px}.grid-charts{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:24px}@media (max-width: 1024px){.grid-charts{grid-template-columns:1fr}}.input-field{background-color:hsl(var(--bg-main));border:1px solid hsl(var(--border-color));border-radius:var(--radius-md);color:hsl(var(--text-primary));font-family:var(--font-body);padding:12px 16px;font-size:14px;width:100%;outline:none;transition:var(--transition-fast)}.input-field:focus{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsla(var(--primary) / .15)}.btn-primary{background:linear-gradient(135deg,hsl(var(--primary)),#0ba6da);color:hsl(var(--bg-main));font-family:var(--font-title);font-weight:600;border:none;border-radius:var(--radius-md);padding:12px 24px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:var(--transition-fast);box-shadow:0 4px 14px hsla(var(--primary) / .3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px hsla(var(--primary) / .4)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:transparent;border:1px solid hsl(var(--border-color));color:hsl(var(--text-primary));font-family:var(--font-title);font-weight:500;border-radius:var(--radius-md);padding:12px 24px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:var(--transition-fast)}.btn-secondary:hover{background-color:hsla(var(--border-color) / .5);border-color:hsl(var(--text-secondary))}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}.status-badge.online{background-color:hsla(var(--success) / .1);color:hsl(var(--success));border:1px solid hsla(var(--success) / .2)}.status-badge.offline{background-color:hsla(var(--danger) / .1);color:hsl(var(--danger));border:1px solid hsla(var(--danger) / .2)}.event-login{background-color:hsla(var(--success) / .1);color:hsl(var(--success))}.event-logout{background-color:hsla(var(--primary) / .1);color:hsl(var(--primary))}.event-failed{background-color:hsla(var(--danger) / .1);color:hsl(var(--danger))}.table-container{overflow-x:auto;border-radius:var(--radius-md);border:1px solid hsl(var(--border-color))}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}.data-table th{background-color:hsla(var(--border-color) / .3);padding:14px 18px;color:hsl(var(--text-secondary));font-weight:600;border-bottom:1px solid hsl(var(--border-color))}.data-table td{padding:14px 18px;border-bottom:1px solid hsl(var(--border-color));color:hsl(var(--text-primary))}.data-table tbody tr{transition:var(--transition-fast)}.data-table tbody tr:hover{background-color:hsla(var(--bg-panel-hover) / .4)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease forwards}.spinner{width:24px;height:24px;border:3px solid hsla(var(--primary) / .2);border-top-color:hsl(var(--primary));border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:20px 16px;overflow-y:auto;z-index:100}.modal-box{width:100%;max-width:500px;position:relative;border:1px solid hsla(var(--primary) / .3);padding:24px;margin:20px auto;border-radius:var(--radius-lg);background-color:hsla(var(--bg-panel) / .95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-lg)}.result-modal-box{width:100%;max-width:600px;position:relative;border:1px solid hsla(var(--primary) / .3);padding:24px;margin:20px auto;border-radius:var(--radius-lg);background-color:hsla(var(--bg-panel) / .95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-lg)}@media (min-width: 640px){.modal-box,.result-modal-box{padding:30px;margin:auto}}.form-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}@media (max-width: 480px){.form-grid{grid-template-columns:1fr}}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}@media (max-width: 480px){.form-actions{flex-direction:column-reverse;width:100%;gap:8px}.form-actions button{width:100%;justify-content:center}}.header-container{max-width:1400px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.header-brand{display:flex;align-items:center;gap:12px}.header-nav{display:flex;gap:8px;flex-wrap:wrap}.header-profile{display:flex;align-items:center;gap:12px}@media (max-width: 990px){.header-container{flex-direction:column;align-items:stretch;padding:16px}.header-brand,.header-nav,.header-profile{justify-content:center}}@media (max-width: 520px){.header-nav{width:100%}.header-nav button{flex:1 1 calc(50% - 8px);justify-content:center;padding:8px 12px!important;font-size:12px!important}}.main-content{max-width:1400px;margin:0 auto;padding:30px 24px;width:100%;flex:1}@media (max-width: 640px){.main-content{padding:16px 12px}}@media (max-width: 990px){.main-content{padding:20px 16px}}.manager-header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}@media (max-width: 640px){.manager-header{flex-direction:column;align-items:stretch;text-align:center}.manager-header h2{justify-content:center}.manager-header button{width:100%;justify-content:center}}