@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap";:root{--brand-blue:#2e5a97;--brand-blue-dark:#0a325d;--brand-blue-light:#a6c8f7;--brand-blue-surface:#f3f7fc;--brand-green:#76c521;--brand-green-dark:#5d8c20;--brand-green-light:#bae196;--bg-dark:#f5f8fc;--bg-card:#fff;--bg-sidebar:#0a325d;--bg-header:#fff;--bg-input:#fff;--bg-hover:#f1f5f9;--bg-surface-alt:#eef3f8;--text-main:#111827;--text-muted:#526071;--text-light:#fff;--border-light:#e2e8f0;--border-strong:#b8c5d6;--divider:#d6dee8;--accent-blue:#1877f2;--accent-purple:#4f46e5;--accent-green:#76c521;--accent-red:#c23a3a;--accent-orange:#b86a1d;--glass-border:1px solid #e2e8f0;--glass-shadow:0 4px 20px #0a325d0f, 0 1px 3px #0000000a;--glass-blur:none}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Roboto,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea,select{background:var(--bg-input);color:var(--text-main);border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:10px 14px;font-family:inherit;font-size:14px;transition:all .2s}input:focus,textarea:focus,select:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px #2e5a9726}.glass-panel{background:var(--bg-card);box-shadow:var(--glass-shadow);border:1px solid #e2e8f0;border-radius:12px}.btn-primary{background:var(--brand-blue);color:#fff;border-radius:8px;justify-content:center;align-items:center;padding:10px 20px;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 2px 6px #0a325d33}.btn-primary:hover{background:var(--brand-blue-dark);box-shadow:0 4px 12px #0a325d4d}.btn-secondary{color:var(--brand-blue);background:#fff;border:1px solid #cbd5e1;border-radius:8px;justify-content:center;align-items:center;padding:9px 18px;font-weight:600;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--brand-blue)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.app-layout{background-color:var(--bg-dark);height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--bg-sidebar);color:#fff;z-index:20;border:none;border-radius:0;flex-direction:column;flex-shrink:0;width:270px;padding:16px;display:flex;box-shadow:2px 0 10px #0a325d26}.sidebar-brand{background-color:#fff;border-radius:10px;align-items:center;gap:12px;margin-bottom:24px;padding:12px 14px;display:flex;box-shadow:0 2px 8px #00000014}.brand-logo{background:var(--brand-blue-surface);border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.sidebar-brand h2{color:var(--brand-blue-dark);font-size:15px;font-weight:800;line-height:1.2}.sidebar-brand span{color:var(--brand-blue);letter-spacing:.5px;text-transform:uppercase;font-size:11px;font-weight:600}.sidebar-nav{flex-direction:column;gap:4px;display:flex}.nav-link{color:#ffffffd9;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13.5px;font-weight:500;transition:all .15s;display:flex}.nav-link:hover{color:#fff;background:#ffffff1a}.nav-link.active{color:#fff;background:#1877f2;font-weight:700;box-shadow:0 2px 6px #1877f259}.main-wrapper{background-color:var(--bg-dark);flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--border-light);z-index:10;background-color:#fff;justify-content:space-between;align-items:center;height:72px;padding:0 32px;display:flex;box-shadow:0 1px 3px #00000008}.page-title{color:var(--brand-blue-dark);font-size:20px;font-weight:800}.topbar-actions{align-items:center;gap:16px;display:flex}.search-bar{background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;align-items:center;width:260px;height:40px;padding:0 14px;transition:all .2s;display:flex}.search-bar:focus-within{border-color:var(--brand-blue);background:#fff;box-shadow:0 0 0 3px #2e5a971f}.search-bar input{width:100%;color:var(--text-main);background:0 0;border:none;outline:none;padding:0 0 0 8px;font-size:13.5px}.search-bar input:focus{box-shadow:none}.icon-btn{color:#475569;border:1px solid var(--border-light);background:#fff;border-radius:8px;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.icon-btn:hover{background:var(--bg-hover);color:var(--brand-blue-dark);border-color:#cbd5e1}.user-profile{cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:4px 8px;transition:background-color .15s;display:flex}.user-profile:hover{background-color:#f1f5f9}.avatar{background:var(--brand-blue-dark);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:13px;font-weight:700;display:flex}.user-info{flex-direction:column;display:flex}.user-info .name{color:var(--text-main);font-size:13.5px;font-weight:700}.user-info .role{color:var(--text-muted);font-size:11px;font-weight:500}.main-content{background-color:var(--bg-dark);flex:1;padding:24px 32px 32px;overflow-y:auto}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toastIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.demo-banner{color:#573e00;background:#fff3cd;border-bottom:1px solid #e0c875;padding:12px 24px;font-size:13px;font-weight:600}
