.sidebar{z-index:100;color:#fff;background:#0f172a;border-right:1px solid #ffffff0d;flex-direction:column;width:255px;height:100vh;display:flex;position:fixed;top:0;left:0}.sidebar-header{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;height:76px;padding:0 22px;display:flex}.sidebar-logo{color:#fff;align-items:center;gap:11px;text-decoration:none;display:flex}.logo-mark{color:#fff;background:#4f46e5;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 6px 18px #4f46e547}.logo-text{letter-spacing:-.5px;font-size:19px;font-weight:700}.logo-text span{color:#818cf8}.sidebar-close{color:#94a3b8;cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:none}.sidebar-close:hover{color:#fff;background:#ffffff0f}.sidebar-nav{flex-direction:column;flex:1;padding:28px 14px;display:flex}.nav-section{flex-direction:column;gap:5px;display:flex}.nav-section-title{color:#64748b;letter-spacing:.12em;margin:0 10px 11px;font-size:10px;font-weight:700}.nav-item{color:#94a3b8;border-radius:9px;align-items:center;gap:12px;min-height:44px;padding:0 12px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s;display:flex}.nav-item svg{flex-shrink:0}.nav-item:hover{color:#fff;background:#ffffff0e}.nav-item-active{color:#fff;background:#4f46e5;box-shadow:0 7px 18px #4f46e533}.nav-item-active:hover{background:#4338ca}.nav-section-bottom{margin-top:32px}.sidebar-footer{border-top:1px solid #ffffff12;padding:18px}.sidebar-user{align-items:center;gap:11px;display:flex}.user-avatar{color:#c7d2fe;background:#312e81;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:14px;font-weight:700;display:flex}.user-info{flex-direction:column;min-width:0;display:flex}.user-info strong{color:#f8fafc;font-size:13px;font-weight:600}.user-info span{color:#64748b;margin-top:2px;font-size:11px}.sidebar-overlay{display:none}@media (max-width:900px){.sidebar{transition:transform .25s;transform:translate(-100%)}.sidebar-open{transform:translate(0)}.sidebar-close{display:flex}.sidebar-overlay{z-index:90;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172a73;display:block;position:fixed;inset:0}}
.topbar{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;height:76px;padding:0 30px;display:flex;position:sticky;top:0}.topbar-left,.topbar-right{align-items:center;display:flex}.topbar-search{color:#94a3b8;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;align-items:center;gap:9px;width:300px;height:40px;padding:0 12px;display:flex}.topbar-search input{color:#0f172a;background:0 0;border:0;outline:0;flex:1;min-width:0;font-family:inherit;font-size:13px}.topbar-search input::placeholder{color:#94a3b8}.search-shortcut{color:#94a3b8;background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:3px 7px;font-size:10px}.mobile-menu-button{color:#475569;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:9px;justify-content:center;align-items:center;width:40px;height:40px;margin-right:12px;display:none}.mobile-menu-button:hover{background:#f8fafc}.topbar-right{gap:16px}.notification-button{color:#64748b;cursor:pointer;background:0 0;border:0;border-radius:9px;justify-content:center;align-items:center;width:38px;height:38px;transition:background .2s;display:flex;position:relative}.notification-button:hover{color:#0f172a;background:#f1f5f9}.notification-dot{background:#4f46e5;border:2px solid #fff;border-radius:50%;width:6px;height:6px;position:absolute;top:8px;right:8px}.topbar-divider{background:#e2e8f0;width:1px;height:30px}.topbar-profile{align-items:center;gap:10px;display:flex}.topbar-avatar{color:#4338ca;background:#e0e7ff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:13px;font-weight:700;display:flex}.topbar-profile-info{flex-direction:column;display:flex}.topbar-profile-info strong{color:#0f172a;font-size:12px;font-weight:600}.topbar-profile-info span{color:#94a3b8;margin-top:1px;font-size:10px}@media (max-width:900px){.mobile-menu-button{display:flex}.topbar-search{width:240px}}@media (max-width:650px){.topbar{height:68px;padding:0 16px}.topbar-search{background:0 0;border-color:#0000;justify-content:center;width:42px;padding:0}.topbar-search input,.search-shortcut{display:none}.topbar-search svg{color:#64748b}.topbar-profile-info,.topbar-divider{display:none}.topbar-right{gap:7px}}
:root{--background:#f5f7fb;--foreground:#172033;--sidebar:#0f172a;--sidebar-hover:#1f2937;--primary:#4f46e5;--primary-light:#eef2ff;--border:#e2e8f0;--muted:#64748b;--card:#fff;--success:#16a34a;--success-bg:#ecfdf3;--warning:#d97706;--warning-bg:#fff7ed;--danger:#dc2626;--danger-bg:#fef2f2}*{box-sizing:border-box}html,body{background:var(--background);min-height:100%;color:var(--foreground);margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{flex-direction:column;min-height:100vh;margin-left:255px;display:flex}.main-content{flex:1;width:100%;padding:30px;overflow-x:hidden}@media (max-width:900px){.app-shell{margin-left:0}.main-content{padding:24px}}@media (max-width:650px){.main-content{padding:20px 16px}}