*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#0f172a;color:#e2e8f0;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100%}a{color:#6366f1;text-decoration:none}a:hover{color:#818cf8}img,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}ul,ol{list-style:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a}::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#475569}.app-layout{display:flex;height:100vh;overflow:hidden}.sidebar{width:250px;min-width:250px;background:#1e293b;border-right:1px solid #334155;display:flex;flex-direction:column;height:100vh;overflow-y:auto;transition:transform .3s ease;z-index:100}.sidebar-logo{padding:24px 20px;border-bottom:1px solid #334155}.sidebar-logo h1{font-size:20px;font-weight:700;color:#e2e8f0;letter-spacing:-.5px}.sidebar-logo h1 span{color:#6366f1}.sidebar-nav{flex:1;padding:12px 0}.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:10px 20px;color:#94a3b8;font-size:14px;font-weight:500;transition:all .15s ease;border-left:3px solid transparent}.sidebar-nav a:hover{color:#e2e8f0;background:#6366f114}.sidebar-nav a.router-link-active,.sidebar-nav a.active{color:#e2e8f0;background:#6366f11f;border-left-color:#6366f1}.sidebar-nav a .nav-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}.sidebar-footer{padding:16px 20px;border-top:1px solid #334155}.sidebar-footer .logout-btn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;background:none;border:none;color:#94a3b8;font-size:14px;font-weight:500;cursor:pointer;transition:color .15s ease}.sidebar-footer .logout-btn:hover{color:#f87171}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.header{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:#1e293b;border-bottom:1px solid #334155;min-height:64px;flex-shrink:0}.header h2{font-size:18px;font-weight:600;color:#e2e8f0}.header-right{display:flex;align-items:center;gap:16px}.header-user{font-size:14px;color:#94a3b8}.header-user strong{color:#e2e8f0}.mobile-toggle{display:none;background:none;border:none;color:#e2e8f0;font-size:24px;cursor:pointer;padding:4px}.main-content{flex:1;overflow-y:auto;padding:32px}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:99}.card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:24px}.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px}.stat-card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:24px}.stat-card .stat-label{font-size:13px;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.stat-card .stat-value{font-size:32px;font-weight:700;color:#e2e8f0;line-height:1.2}.stat-card .stat-icon{font-size:24px;margin-bottom:12px}.table-wrapper{background:#1e293b;border:1px solid #334155;border-radius:12px;overflow:hidden}.table-wrapper .table-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #334155;flex-wrap:wrap;gap:12px}.table-wrapper .table-header h3{font-size:16px;font-weight:600;color:#e2e8f0}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}thead{background:#0f172a80}thead th{padding:12px 16px;text-align:left;font-weight:600;color:#94a3b8;font-size:12px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid #334155}tbody tr{border-bottom:1px solid rgba(51,65,85,.5);transition:background .1s ease}tbody tr:hover{background:#6366f10a}tbody tr:last-child{border-bottom:none}tbody td{padding:12px 16px;color:#e2e8f0;white-space:nowrap}td .text-muted{color:#94a3b8}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#6366f1;color:#fff}.btn-primary:hover:not(:disabled){background:#4f46e5}.btn-secondary{background:#334155;color:#e2e8f0}.btn-secondary:hover:not(:disabled){background:#475569}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-warning{background:#d97706;color:#fff}.btn-warning:hover:not(:disabled){background:#b45309}.btn-success{background:#059669;color:#fff}.btn-success:hover:not(:disabled){background:#047857}.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}.btn-ghost{background:transparent;color:#94a3b8;padding:6px 10px}.btn-ghost:hover:not(:disabled){background:#6366f11a;color:#e2e8f0}.btn-group{display:flex;gap:6px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:13px;font-weight:500;color:#94a3b8;margin-bottom:6px}.form-input,input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],input[type=number],select,textarea{width:100%;padding:10px 14px;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#e2e8f0;font-size:14px;transition:border-color .15s ease;outline:none}.form-input:focus,input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=date]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:#6366f1}.form-input::placeholder,input::placeholder{color:#475569}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}select option{background:#1e293b;color:#e2e8f0}textarea{resize:vertical;min-height:80px}.checkbox-group{display:flex;align-items:center;gap:8px}.checkbox-group input[type=checkbox]{width:18px;height:18px;accent-color:#6366f1;cursor:pointer}.checkbox-group label{margin-bottom:0;cursor:pointer}.form-error{color:#f87171;font-size:13px;margin-top:4px}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}.toolbar .search-input{min-width:220px}.toolbar select{min-width:160px}.toolbar .spacer{flex:1}.badge{display:inline-flex;align-items:center;padding:3px 10px;font-size:12px;font-weight:600;border-radius:20px}.badge-active,.badge-success{background:#05966926;color:#34d399}.badge-suspended,.badge-warning{background:#d9770626;color:#fbbf24}.badge-inactive,.badge-danger{background:#dc262626;color:#f87171}.badge-info{background:#6366f126;color:#818cf8}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200;padding:24px}.modal{background:#1e293b;border:1px solid #334155;border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:32px}.modal h3{font-size:18px;font-weight:600;color:#e2e8f0;margin-bottom:24px}.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;border-top:1px solid #334155}.pagination button{padding:6px 14px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#94a3b8;font-size:13px;cursor:pointer;transition:all .15s ease}.pagination button:hover:not(:disabled){border-color:#6366f1;color:#e2e8f0}.pagination button:disabled{opacity:.4;cursor:not-allowed}.pagination button.active{background:#6366f1;border-color:#6366f1;color:#fff}.pagination-info{font-size:13px;color:#94a3b8}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0f172a;padding:24px}.login-card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:40px;width:100%;max-width:400px}.login-card h1{font-size:24px;font-weight:700;color:#e2e8f0;text-align:center;margin-bottom:8px}.login-card h1 span{color:#6366f1}.login-card .login-subtitle{font-size:14px;color:#94a3b8;text-align:center;margin-bottom:32px}.login-card .login-error{background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:8px;padding:10px 14px;color:#f87171;font-size:13px;margin-bottom:16px}.login-card .btn-primary{width:100%;padding:12px;font-size:15px;margin-top:8px}.upload-area{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:24px;margin-bottom:24px}.upload-area h3{font-size:16px;font-weight:600;margin-bottom:16px}.file-input-wrapper{position:relative}.file-input-wrapper input[type=file]{width:100%;padding:10px 14px;background:#0f172a;border:1px dashed #475569;border-radius:8px;color:#e2e8f0;cursor:pointer}.file-input-wrapper input[type=file]::file-selector-button{background:#6366f1;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;margin-right:12px}.text-muted{color:#94a3b8}.text-primary{color:#6366f1}.text-success{color:#34d399}.text-danger{color:#f87171}.text-warning{color:#fbbf24}.text-sm{font-size:13px}.text-xs{font-size:12px}.text-center{text-align:center}.text-right{text-align:right}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mr-2{margin-right:8px}.ml-auto{margin-left:auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.loading-spinner{display:flex;align-items:center;justify-content:center;padding:48px;color:#94a3b8;font-size:14px}.empty-state{text-align:center;padding:48px 24px;color:#94a3b8}.empty-state .empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}.empty-state p{font-size:14px}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}@media (max-width: 768px){.sidebar{position:fixed;left:0;top:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay.show,.mobile-toggle{display:block}.main-content{padding:20px}.header{padding:12px 20px}.stat-cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.toolbar{flex-direction:column;align-items:stretch}.toolbar .spacer{display:none}.modal{padding:24px;max-width:100%}.pagination{flex-wrap:wrap}}@media (max-width: 480px){.stat-cards{grid-template-columns:1fr}.btn-group{flex-direction:column}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .2s ease}@keyframes spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:20px;height:20px;border:2px solid #334155;border-top-color:#6366f1;border-radius:50%;animation:spin .6s linear infinite}.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:500;color:#fff;z-index:10000;box-shadow:0 4px 12px #0000004d}.toast-success{background:#059669;border:1px solid #34d399}.toast-error{background:#dc2626;border:1px solid #f87171}.toast-enter-active{animation:toastIn .3s ease}.toast-leave-active{animation:toastOut .3s ease}@keyframes toastIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(16px)}}