:root{
  --bg:#f4f6f8; --sidebar:#121418; --accent:#1e88e5; --card:#fff;
  --text:#222; --muted:#666;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:Inter,Segoe UI,Roboto,Arial;}
body{background:var(--bg); color:var(--text);}
.app{display:flex; height:100vh;}
.sidebar{width:220px; background:#447574; color:#fff; padding:18px;}
.logo{font-weight:600; margin-bottom:12px; text-align:center;}
.sidebar nav{display:flex; flex-direction:column; gap:4px;}
.nav-item{color:#cfd8dc; text-decoration:none; padding:10px 12px; border-radius:6px;}
.nav-item:hover{background:#1f8ea6; color:#fff;}
.nav-item.active{background:#3582c6; color:#fff; box-shadow:0 2px 8px #0006;}
.main{flex:1; display:flex; flex-direction:column;}
.header{padding:16px 20px; background:var(--card); border-bottom:1px solid #eee;}
.content{padding:20px; overflow:auto;}
.card{background:var(--card); border-radius:8px; padding:16px; box-shadow:0 2px 6px #0001;}
.input-row{display:flex; gap:8px; align-items:center;}
.input-row .form-control{flex:1; padding:8px 10px; border:1px solid #ddd; border-radius:6px;}
.btn{padding:8px 12px; border-radius:6px; background:var(--accent); color:#fff; border:none; cursor:pointer;}
small.muted{color:var(--muted);}





.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 50px;
  background-color: #123232; /* 深色背景 */
  color: white;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-search {
  padding: 4px 8px;
  border-radius: 4px;
}

.topbar-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 4px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}