:root{--color-primary:#4a7fd4;--color-primary-dark:#2a5ba8;--color-primary-light:#7aaee8;--color-primary-xlight:#b8d4f5;--color-bg:#2c2c2c;--color-bg-soft:#363636;--color-bg-mute:#404040;--color-bg-light:#f4f7fc;--color-text-primary:#fff;--color-text-secondary:#b0bec5;--color-text-dark:#1a1a1a;--color-text-muted:#78909c;--color-border:#1a1a1a;--color-border-light:#4a7fd433;--color-border-hover:#4a7fd480;--color-success:#4caf50;--color-warning:#ff9800;--color-danger:#f44336;--color-info:#4a7fd4;--color-status-present:#4caf50;--color-status-late:#ff9800;--color-status-absent:#f44336;--color-status-exit:#9c27b0;--sidebar-bg:#2c2c2c;--sidebar-border:#1a1a1a;--sidebar-item-hover:#4a7fd426;--sidebar-item-active:#4a7fd440;--sidebar-text:#b0bec5;--sidebar-text-active:#7aaee8;--sidebar-width:260px;--topbar-bg:#363636;--topbar-border:#1a1a1a;--topbar-height:64px;--btn-primary-bg:#4a7fd4;--btn-primary-hover:#2a5ba8;--btn-primary-text:#fff;--btn-secondary-bg:transparent;--btn-secondary-border:#4a7fd4;--btn-secondary-text:#4a7fd4;--btn-danger-bg:#f44336;--btn-danger-hover:#d32f2f;--card-bg:#363636;--card-border:#4a7fd426;--card-shadow:0 2px 12px #0006;--card-radius:12px;--input-bg:#404040;--input-border:#4a7fd44d;--input-border-focus:#4a7fd4;--input-text:#fff;--input-placeholder:#78909c;--input-radius:8px;--badge-active-bg:#4a7fd433;--badge-active-text:#7aaee8;--badge-revoked-bg:#f4433633;--badge-revoked-text:#ef9a9a;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs:11px;--font-size-sm:13px;--font-size-base:15px;--font-size-md:17px;--font-size-lg:20px;--font-size-xl:24px;--font-size-2xl:32px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0;font-weight:400}body{min-height:100vh;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);background-color:var(--color-bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}a{color:var(--color-primary-light);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-bg-soft)}::-webkit-scrollbar-thumb{background:var(--color-primary-dark);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}::selection{color:var(--color-text-primary);background:#4a7fd44d}#app{flex-direction:column;min-height:100vh;display:flex}.app-layout{min-height:100vh;display:flex}.app-content{margin-left:var(--sidebar-width);padding-top:var(--topbar-height);background-color:var(--color-bg-light);color:var(--color-text-dark);flex:1;min-height:100vh}.page{padding:var(--spacing-xl)}.page-header{margin-bottom:var(--spacing-xl);justify-content:space-between;align-items:center;display:flex}.page-title{font-size:var(--font-size-xl);color:var(--color-bg);font-weight:700}.card{background:var(--color-bg-soft);border:1px solid var(--color-border-light);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--spacing-lg);color:var(--color-text-primary)}.card-light{border-radius:var(--card-radius);padding:var(--spacing-lg);color:var(--color-text-dark);background:#fff;border:1px solid #e0e8f5;box-shadow:0 2px 8px #2a5ba814}.btn{align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);cursor:pointer;transition:background var(--transition-fast), opacity var(--transition-fast);border:none;border-radius:8px;padding:8px 18px;font-weight:600;display:inline-flex}.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn-primary:hover{background:var(--btn-primary-hover)}.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:1.5px solid var(--btn-secondary-border)}.btn-secondary:hover{background:#4a7fd41a}.btn-danger{background:var(--btn-danger-bg);color:#fff}.btn-danger:hover{background:var(--btn-danger-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.status-badge{font-size:var(--font-size-xs);border-radius:20px;align-items:center;padding:3px 10px;font-weight:600;display:inline-flex}.status-present{color:#4caf50;background:#4caf5026}.status-late{color:#ff9800;background:#ff980026}.status-absent{color:#f44336;background:#f4433626}.status-exit{color:#9c27b0;background:#9c27b026}.status-active{color:#7aaee8;background:#4a7fd426}.status-revoked{color:#ef9a9a;background:#f4433626}.input{background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--input-radius);width:100%;color:var(--input-text);font-size:var(--font-size-base);transition:border-color var(--transition-fast);outline:none;padding:10px 14px}.input::placeholder{color:var(--input-placeholder)}.input:focus{border-color:var(--input-border-focus);box-shadow:0 0 0 3px #4a7fd426}.table{border-collapse:collapse;width:100%;font-size:var(--font-size-sm)}.table th{background:var(--color-bg-soft);color:var(--color-text-secondary);text-transform:uppercase;font-weight:600;font-size:var(--font-size-xs);letter-spacing:.5px;text-align:left;border-bottom:1px solid var(--color-border-light);padding:12px 16px}.table td{border-bottom:1px solid var(--color-border-light);color:var(--color-text-primary);padding:12px 16px}.table tr:hover td{background:#4a7fd40d}.divider{background:var(--color-border-light);height:1px;margin:var(--spacing-lg) 0}