*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base: #0c0c0f;--bg-raised: #131318;--bg-surface: #1a1a21;--bg-hover: #22222b;--bg-input: #16161d;--border: #252530;--border-hover: #35354a;--accent: #635bff;--accent-hover: #7b74ff;--accent-soft: rgba(99,91,255,.12);--green: #30d158;--green-soft: rgba(48,209,88,.12);--red: #ff453a;--red-soft: rgba(255,69,58,.1);--amber: #ffd60a;--amber-soft: rgba(255,214,10,.1);--text-primary: #f5f5f7;--text-secondary: #8e8ea0;--text-tertiary: #4e4e5c;--font: "DM Sans", -apple-system, sans-serif;--mono: "DM Mono", "SF Mono", monospace;--radius: 10px;--radius-sm: 6px;--transition: .15s ease}html,body,#root{height:100%}body{font-family:var(--font);background:var(--bg-base);color:var(--text-primary);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}.shell{display:flex;height:100vh;overflow:hidden}.sidebar{width:240px;min-width:240px;background:var(--bg-raised);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-header{padding:28px 24px 24px;border-bottom:1px solid var(--border)}.sidebar-header .logo{font-size:20px;font-weight:700;letter-spacing:-.3px}.sidebar-header .logo span{color:var(--accent)}.sidebar-header .tagline{font-size:11px;color:var(--text-tertiary);font-family:var(--mono);letter-spacing:.5px;margin-top:4px}.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}.nav-group-label{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-tertiary);padding:16px 12px 8px;font-family:var(--mono)}.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13.5px;font-weight:500;text-decoration:none;transition:all var(--transition);margin-bottom:2px}.nav-link:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-link.active{background:var(--accent-soft);color:var(--accent-hover);font-weight:600}.nav-link .nav-icon{width:18px;text-align:center;font-size:15px;opacity:.8}.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border)}.user-row{display:flex;align-items:center;gap:12px}.avatar{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);border:1px solid rgba(99,91,255,.25);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent-hover)}.user-meta .uname{font-size:13px;font-weight:600}.user-meta .urole{font-size:11px;color:var(--text-tertiary);font-family:var(--mono)}.btn-logout{margin-left:auto;background:none;border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-sm);padding:5px 8px;cursor:pointer;font-size:12px;transition:all var(--transition)}.btn-logout:hover{border-color:var(--red);color:var(--red)}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.content{flex:1;overflow-y:auto;padding:32px}.page-head{margin-bottom:28px}.page-head h1{font-size:24px;font-weight:700;letter-spacing:-.3px}.page-head p{color:var(--text-secondary);font-size:14px;margin-top:4px}.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:border-color var(--transition)}.card:hover{border-color:var(--border-hover)}.card+.card{margin-top:14px}.card-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:16px;font-family:var(--mono)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.stat-box{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;transition:border-color var(--transition)}.stat-box:hover{border-color:var(--border-hover)}.stat-box .accent-line{position:absolute;top:0;left:0;right:0;height:2px}.stat-box .sl{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--mono);margin-bottom:10px}.stat-box .sv{font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1}.stat-box .ss{font-size:12px;color:var(--text-tertiary);margin-top:6px;font-family:var(--mono)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}thead th{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text-tertiary);padding:10px 14px;text-align:left;font-family:var(--mono);border-bottom:1px solid var(--border);white-space:nowrap}tbody tr{border-bottom:1px solid rgba(37,37,48,.6);transition:background var(--transition)}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:var(--bg-hover)}tbody td{padding:12px 14px;font-size:13.5px}.pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.3px;font-family:var(--mono)}.pill-accent{background:var(--accent-soft);color:var(--accent-hover)}.pill-green{background:var(--green-soft);color:var(--green)}.pill-red{background:var(--red-soft);color:var(--red)}.pill-amber{background:var(--amber-soft);color:var(--amber)}.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all var(--transition);white-space:nowrap}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-danger{background:var(--red-soft);color:var(--red);border-color:#ff453a33}.btn-danger:hover:not(:disabled){background:var(--red);color:#fff}.btn-success{background:var(--green-soft);color:var(--green);border-color:#30d15833}.btn-success:hover:not(:disabled){background:var(--green);color:#fff}.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-hover)}.btn-sm{padding:6px 10px;font-size:12px}.btn-icon{padding:6px 8px;font-size:14px;border-color:var(--border);background:transparent;color:var(--text-secondary)}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}.form-field{margin-bottom:18px}.form-field label{display:block;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:7px}input,select,textarea{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 13px;color:var(--text-primary);font-family:var(--font);font-size:13.5px;transition:border-color var(--transition)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}input::placeholder{color:var(--text-tertiary)}select option{background:var(--bg-surface)}small{font-size:11px;color:var(--text-tertiary);display:block;margin-top:5px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.overlay{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .15s ease}.modal-box{background:var(--bg-raised);border:1px solid var(--border-hover);border-radius:14px;padding:28px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px #00000080;animation:slideUp .2s ease}.modal-box h2{font-size:18px;font-weight:700;margin-bottom:22px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.toast{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13px;font-weight:600;animation:slideUp .2s ease}.toast-ok{background:var(--green-soft);color:var(--green);border:1px solid rgba(48,209,88,.2)}.toast-err{background:var(--red-soft);color:var(--red);border:1px solid rgba(255,69,58,.2)}.mono{font-family:var(--mono)}.code-box{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-family:var(--mono);font-size:12.5px;word-break:break-all}.empty-state{text-align:center;padding:48px 20px;color:var(--text-tertiary)}.empty-state p{font-size:14px}.empty-state .sub{font-size:12px;margin-top:6px}.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dot{display:inline-block;width:8px;height:8px;border-radius:50%}.dot-on{background:var(--green);box-shadow:0 0 8px #30d15866}.dot-off{background:var(--text-tertiary)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-base)}.login-card{width:100%;max-width:380px}.login-card .brand{text-align:center;margin-bottom:36px}.login-card .brand h1{font-size:28px;font-weight:700}.login-card .brand h1 span{color:var(--accent)}.login-card .brand p{color:var(--text-tertiary);font-size:11px;margin-top:6px;font-family:var(--mono);letter-spacing:1.5px;text-transform:uppercase}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}