:root{
  --sidebar-bg:#2f3640;
  --sidebar-bg-2:#27303a;
  --topbar:#cc0000;
  --active:#1683ff;
  --page-bg:#eef0f3;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#dbe1e8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--page-bg);color:var(--text)}
a{text-decoration:none}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:230px;background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-2));color:#fff;flex-shrink:0;display:flex;flex-direction:column}
.sidebar-user{display:flex;align-items:center;gap:12px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.user-avatar{width:34px;height:34px;border-radius:999px;background:#cc0000;display:flex;align-items:center;justify-content:center;font-weight:700}
.user-name{font-size:14px;font-weight:700}
.user-role{font-size:12px;color:#d1d5db}
.sidebar-nav{padding:14px 0}
.nav-link{display:block;padding:14px 20px;color:#e5e7eb;font-weight:600;font-size:14px}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.active{background:var(--active);color:#fff}
.main-area{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:44px;background:var(--topbar);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.topbar-left{display:flex;align-items:center;gap:14px}
.icon-btn{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.brand-title{font-size:18px;font-weight:700}
.topbar-link{color:#fff;font-weight:600;font-size:13px}
.content-area{padding:10px 14px 24px}
.page-title-wrap{margin-bottom:12px}
.page-title{font-size:18px;font-weight:400;margin:0 0 8px}
.page-divider{height:2px;background:#65a7ff;opacity:.9}
.panel{background:var(--card);border:1px solid var(--border);border-radius:4px;min-height:720px;padding:16px}
.empty-panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.empty-state-title{font-size:22px;margin-bottom:8px}
.empty-state-text{max-width:700px;color:var(--muted);line-height:1.55}
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f3f4f6,#e5e7eb)}
.login-card{width:min(420px,92vw);background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.login-brand{font-size:28px;font-weight:800;color:#cc0000;margin-bottom:8px}
.login-title{margin:0;font-size:24px}
.login-subtitle{margin:6px 0 18px;color:var(--muted)}
.login-form{display:flex;flex-direction:column;gap:8px}
.login-form label{font-size:14px;font-weight:700}
.login-form input{height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;border:none;border-radius:10px;cursor:pointer;font-weight:700}
.btn-primary{background:#cc0000;color:#fff}
.btn-full{width:100%;margin-top:10px}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.alert-error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}
.alert-success{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}
.login-note{margin-top:14px;font-size:12px;color:var(--muted)}
.sidebar-collapsed .sidebar{width:78px}
.sidebar-collapsed .user-meta,.sidebar-collapsed .nav-link{font-size:0}
.sidebar-collapsed .nav-link::first-letter{font-size:14px}
.sidebar-collapsed .user-avatar{margin:0 auto}
.sidebar-collapsed .sidebar-user{justify-content:center}
@media (max-width: 900px){
  .sidebar{position:fixed;inset:44px auto 0 0;z-index:30;transform:translateX(0);transition:transform .2s ease;width:230px}
  .sidebar-collapsed .sidebar{transform:translateX(-100%)}
  .main-area{margin-left:0}
  .panel{min-height:calc(100vh - 110px)}
}


.nav-group{display:block}
.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:transparent;border:none;color:#e5e7eb;font-weight:600;font-size:14px;cursor:pointer;text-align:left}
.nav-group-toggle:hover{background:rgba(255,255,255,.06)}
.nav-group-toggle.active{background:rgba(255,255,255,.04);color:#fff}
.nav-caret{transition:transform .2s ease;font-size:12px}
.nav-group.open .nav-caret{transform:rotate(180deg)}
.nav-submenu{display:none;background:rgba(0,0,0,.10)}
.nav-group.open .nav-submenu{display:block}
.nav-sublink{display:block;padding:12px 20px 12px 38px;color:#d1d5db;font-weight:600;font-size:13px}
.nav-sublink:hover{background:rgba(255,255,255,.06)}
.nav-sublink.active{background:var(--active);color:#fff}
.sidebar-collapsed .nav-group-toggle{font-size:0;padding-left:20px;padding-right:20px}
.sidebar-collapsed .nav-group-toggle .nav-caret{font-size:12px}
.sidebar-collapsed .nav-group-toggle span:first-child{display:none}
.sidebar-collapsed .nav-submenu{display:none !important}