:root{--bg-0: #0a0a0f;--bg-1: #111118;--bg-2: #1a1a24;--bg-3: #222230;--bg-4: #2a2a3a;--accent: #6366f1;--accent-hover: #818cf8;--accent-muted: rgba(99, 102, 241, .15);--text-1: #f0f0f5;--text-2: #a0a0b5;--text-3: #606078;--border: #2a2a3a;--border-hover: #3a3a4a;--green: #00c896;--red: #ff4757;--yellow: #ffc107;--blue: #4a90d9;--font-sans: "Plus Jakarta Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow: 0 2px 8px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--bg-0);color:var(--text-1);line-height:1.6;-webkit-font-smoothing:antialiased}.app-layout{display:flex;min-height:100vh}.sidebar{width:260px;background:var(--bg-1);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:10}.sidebar-header{padding:24px 20px 16px;border-bottom:1px solid var(--border)}.sidebar-header h1{font-size:18px;font-weight:700;letter-spacing:-.02em}.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;transition:all .15s ease}.sidebar-nav a:hover{background:var(--bg-2);color:var(--text-1)}.sidebar-nav a.active{background:var(--accent-muted);color:var(--accent-hover)}.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border)}.main-content{flex:1;margin-left:260px;min-height:100vh}.topbar{height:60px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;padding:0 24px;background:var(--bg-1);position:sticky;top:0;z-index:5}.topbar-user{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-2)}.page-content{padding:32px}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-header h2{font-size:24px;font-weight:700;letter-spacing:-.02em}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;font-family:var(--font-sans);cursor:pointer;border:none;transition:all .15s ease;text-decoration:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.btn-secondary{background:var(--bg-3);color:var(--text-1);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-4);border-color:var(--border-hover)}.btn-danger{background:#ff475726;color:var(--red)}.btn-danger:hover{background:#ff475740}.btn-ghost{background:transparent;color:var(--text-2);padding:8px 12px}.btn-ghost:hover{background:var(--bg-2);color:var(--text-1)}.btn-sm{padding:6px 12px;font-size:13px}.btn-icon{padding:8px;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}.btn-icon:hover{background:var(--bg-3);color:var(--text-1)}.card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;transition:border-color .15s ease}.card:hover{border-color:var(--border-hover)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.stat-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}.stat-card .stat-value{font-size:32px;font-weight:700;letter-spacing:-.03em;margin-top:8px}.stat-card .stat-label{font-size:13px;color:var(--text-2);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.stat-card .stat-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;padding:12px 16px;font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:var(--bg-1)}.data-table td{padding:14px 16px;font-size:14px;border-bottom:1px solid var(--border);color:var(--text-2)}.data-table tr:hover td{background:var(--bg-1);color:var(--text-1)}.data-table .actions{display:flex;gap:4px;justify-content:flex-end}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}.form-group label .required{color:var(--red);margin-left:2px}.form-input{width:100%;padding:10px 14px;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-1);font-size:14px;font-family:var(--font-sans);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.form-input::placeholder{color:var(--text-3)}textarea.form-input{min-height:100px;resize:vertical}select.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606078' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.form-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer}.form-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.form-error{color:var(--red);font-size:13px;margin-top:4px}.search-input{position:relative}.search-input svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}.search-input input{padding-left:38px}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.02em}.badge-green{background:#00c89626;color:var(--green)}.badge-red{background:#ff475726;color:var(--red)}.badge-yellow{background:#ffc10726;color:var(--yellow)}.badge-blue{background:#4a90d926;color:var(--blue)}.badge-gray{background:var(--bg-3);color:var(--text-2)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease}.modal-content{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;min-width:480px;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .2s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.modal-header h3{font-size:18px;font-weight:700}.empty-state{text-align:center;padding:60px 20px;color:var(--text-3)}.empty-state svg{margin-bottom:16px;opacity:.5}.empty-state p{font-size:15px;margin-bottom:20px}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--text-3);font-size:15px}.loading-spinner{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-3)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}