:root {
  --bg: #0A0D14;
  --panel: #12161F;
  --panel2: #171C28;
  --line: rgba(255,255,255,.07);
  --line2: rgba(255,255,255,.12);
  --txt: #E8ECF2;
  --txt2: #9AA4B2;
  --txt3: #5D6675;
  --brand: #22E39A;
  --brand2: #7C6BFF;
  --danger: #FF5C5C;
  --warn: #FFB020;
  --info: #38A6FF;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--txt); font-size:14px; line-height:1.6;
}
a { color: var(--brand); text-decoration:none; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }

.layout { display:flex; height:100vh; overflow:hidden; }

/* ===== 侧边栏 ===== */
.sidebar {
  width:220px; flex:none; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; transition:margin-left .25s;
}
.sb-brand { display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid var(--line); }
.sb-logo { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand2)); display:flex; align-items:center; justify-content:center; color:#07120D; font-weight:700; font-size:16px; }
.sb-brand b { font-size:15px; letter-spacing:.3px; }
.sb-brand small { display:block; font-size:11px; color:var(--txt3); font-weight:400; }
.sb-nav { flex:1; overflow-y:auto; padding:10px 8px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--txt2); cursor:pointer; margin-bottom:2px; }
.nav-item:hover { background:rgba(255,255,255,.04); color:var(--txt); }
.nav-item.active { background:rgba(34,227,154,.12); color:var(--brand); }
.nav-item svg { width:18px; height:18px; flex:none; }
.nav-group { font-size:11px; color:var(--txt3); padding:12px 12px 6px; letter-spacing:.5px; }
.nav-sub { padding-left:22px; }
.sb-foot { padding:12px 14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.sb-avatar { width:30px; height:30px; border-radius:50%; background:var(--panel2); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--brand); }
.sb-foot .nm { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-foot .nm small { display:block; color:var(--txt3); font-size:11px; }
.logout-btn { cursor:pointer; color:var(--txt3); padding:4px; }
.logout-btn:hover { color:var(--danger); }

/* ===== 主区域 ===== */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar { height:54px; flex:none; background:rgba(10,13,20,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 20px; gap:12px; }
.topbar .pg-title { font-size:16px; font-weight:500; }
.topbar .spacer { flex:1; }
.menu-toggle { display:none; cursor:pointer; color:var(--txt2); padding:6px; }
.content { flex:1; overflow-y:auto; padding:20px; }

/* ===== 卡片 ===== */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.card-h { display:flex; align-items:center; margin-bottom:14px; gap:10px; }
.card-h h2 { font-size:15px; font-weight:500; flex:1; }
.card-h .sub { font-size:12px; color:var(--txt3); }

/* ===== 表格 ===== */
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; color:var(--txt3); font-weight:500; font-size:12px; padding:10px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
.tbl td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:hover td { background:rgba(255,255,255,.02); }
.tbl .ops { display:flex; gap:6px; justify-content:flex-end; }

/* ===== 按钮 ===== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); color:var(--txt); font-size:13px; cursor:pointer; transition:.15s; }
.btn:hover { border-color:var(--brand); color:var(--brand); }
.btn.p { background:var(--brand); border-color:var(--brand); color:#07120D; font-weight:500; }
.btn.p:hover { filter:brightness(1.1); color:#07120D; }
.btn.d { background:transparent; border-color:transparent; color:var(--danger); }
.btn.d:hover { background:rgba(255,92,92,.1); }
.btn.sm { padding:4px 10px; font-size:12px; border-radius:6px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn svg { width:15px; height:15px; }

/* ===== 表单 ===== */
.frm { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.frm .full { grid-column:1 / -1; }
.fld label { display:block; font-size:12px; color:var(--txt2); margin-bottom:6px; }
.fld label .req { color:var(--danger); margin-left:2px; }
.fld input[type=text], .fld input[type=password], .fld input[type=number], .fld select, .fld textarea {
  width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); color:var(--txt); font-size:13px; outline:none; transition:border-color .15s; font-family:inherit;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color:var(--brand); }
.fld textarea { resize:vertical; min-height:72px; }
.fld .hint { font-size:11px; color:var(--txt3); margin-top:4px; }
.fld-check { display:flex; gap:16px; flex-wrap:wrap; }
.fld-check label { display:flex; align-items:center; gap:6px; color:var(--txt); font-size:13px; cursor:pointer; margin:0; }
.switch { position:relative; width:38px; height:22px; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch .tr { position:absolute; inset:0; background:var(--panel2); border:1px solid var(--line2); border-radius:22px; transition:.2s; }
.switch .tr:before { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background:var(--txt3); transition:.2s; }
.switch input:checked + .tr { background:var(--brand); border-color:var(--brand); }
.switch input:checked + .tr:before { left:18px; background:#07120D; }

/* ===== 弹窗 ===== */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-mask.show { display:flex; }
.modal { background:var(--panel); border:1px solid var(--line2); border-radius:14px; width:100%; max-width:560px; max-height:86vh; overflow-y:auto; box-shadow:var(--shadow); }
.modal-h { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:1; }
.modal-h h3 { font-size:15px; font-weight:500; flex:1; }
.modal-x { cursor:pointer; color:var(--txt3); padding:4px; }
.modal-x:hover { color:var(--danger); }
.modal-b { padding:20px; }
.modal-f { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--line); }

/* ===== Toast ===== */
.toast-box { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { padding:10px 18px; border-radius:9px; background:var(--panel2); border:1px solid var(--line2); color:var(--txt); font-size:13px; box-shadow:var(--shadow); animation:tin .2s ease; }
.toast.ok { border-color:rgba(34,227,154,.5); }
.toast.err { border-color:rgba(255,92,92,.5); }
@keyframes tin { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* ===== 工具 ===== */
.pager { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:12px; font-size:13px; color:var(--txt2); }
.pager .btn { padding:4px 12px; }
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; }
.badge.on { background:rgba(34,227,154,.14); color:var(--brand); }
.badge.off { background:rgba(255,92,92,.12); color:var(--danger); }
.badge.sys { background:rgba(124,107,255,.14); color:var(--brand2); }
.empty { text-align:center; color:var(--txt3); padding:48px 0; }
.search-bar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.search-bar input { width:240px; }
.tree-item { padding:5px 0; }
.tree-children { padding-left:26px; border-left:1px dashed var(--line2); margin-left:10px; }

/* ===== 登录页 ===== */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:32px; box-shadow:var(--shadow); }
.login-logo { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand2)); display:flex; align-items:center; justify-content:center; color:#07120D; font-weight:700; font-size:24px; margin:0 auto 16px; }
.login-card h1 { text-align:center; font-size:18px; margin-bottom:6px; }
.login-card .sub { text-align:center; color:var(--txt3); font-size:12px; margin-bottom:24px; }
.login-card .fld { margin-bottom:16px; }

/* ===== 响应式 ===== */
@media (max-width: 860px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:50; margin-left:-220px; }
  .sidebar.open { margin-left:0; box-shadow:var(--shadow); }
  .menu-toggle { display:block; }
  .frm { grid-template-columns:1fr; }
  .search-bar input { width:100%; }
  .content { padding:14px; }
}