:root{
  --bg:#0f1115;
  --panel:#161a22;
  --panel2:#1c212c;
  --line:#262d3a;
  --text:#e6e8ee;
  --muted:#9aa4b6;
  --accent:#4c8dff;
  --danger:#ff5f6d;
  --ok:#39d98a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 20px;height:56px;
  background:rgba(22,26,34,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{font-weight:700;letter-spacing:.4px}
.brand i{color:var(--accent);font-style:normal}
.topbar nav{display:flex;gap:6px}
.topbar nav a{
  color:var(--muted);padding:6px 12px;border-radius:8px;font-size:13px;
  transition:.15s;
}
.topbar nav a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.topbar nav a.on{background:var(--panel2);color:#fff}
.topbar nav a.logout{color:#8b93a5}
.topbar nav a.logout:hover{color:#ff9aa4}

/* ---------- 主体 ---------- */
main{flex:1;max-width:1080px;width:100%;margin:0 auto;padding:24px 20px 60px}
h1{font-size:20px;margin:0 0 18px}
h2{
  font-size:13px;margin:0 0 14px;color:var(--muted);
  font-weight:600;text-transform:uppercase;letter-spacing:.8px;
}

/* ---------- 面板 ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:20px;margin-bottom:20px;
}

/* ---------- 提示 ---------- */
.alert{
  padding:10px 14px;border-radius:10px;margin-bottom:16px;
  font-size:13px;border:1px solid;
}
.alert.err{background:rgba(255,95,109,.1);border-color:rgba(255,95,109,.35);color:#ff9aa4}
.alert.ok{background:rgba(57,217,138,.1);border-color:rgba(57,217,138,.35);color:#7ee9b5}

/* ---------- 卡片 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{
  display:flex;gap:14px;align-items:center;padding:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  color:var(--text);transition:.15s;
}
.card:hover{border-color:#3d4a63;text-decoration:none;transform:translateY(-1px)}
.card-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:linear-gradient(135deg,#2a3550,#1b2130);border:1px solid #2f3b52;
}
.card-title{font-weight:600;font-size:14px;word-break:break-all}
.card-sub{font-size:12px;color:var(--muted);word-break:break-all;margin-top:2px}

/* ---------- 表格 ---------- */
table.list{
  width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
table.list th{
  text-align:left;font-size:12px;color:var(--muted);font-weight:600;
  padding:10px 14px;background:var(--panel2);border-bottom:1px solid var(--line);
}
table.list td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list tr:last-child td{border-bottom:none}
table.list tbody tr:hover td{background:rgba(255,255,255,.02)}
.fname{word-break:break-all}
.ico{margin-right:8px;opacity:.85}
.meta{color:var(--muted);font-size:12px;white-space:nowrap}
.ops{text-align:right;white-space:nowrap}
.row-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);
  color:var(--text);font-size:12px;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:.15s;line-height:1.4;
}
.btn:hover{background:#232a37;border-color:#3a4356;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#3a7bf0}
.btn.danger{color:#ff8a94;border-color:rgba(255,95,109,.35);background:transparent}
.btn.danger:hover{background:rgba(255,95,109,.12)}
.inline{display:inline;margin:0}

/* ---------- 面包屑 ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:13px;margin-bottom:16px;color:var(--muted);
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{opacity:.4}

/* ---------- 表单 ---------- */
.form-row{margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=password],input[type=url]{
  width:100%;padding:10px 12px;background:#10141b;
  border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-size:14px;font-family:inherit;outline:none;transition:.15s;
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,141,255,.13)}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
.hint{font-size:12px;color:var(--muted);margin:10px 0 0}
.hint code{
  background:#10141b;border:1px solid var(--line);border-radius:6px;
  padding:2px 6px;color:#8fb7ff;font-size:12px;
}

/* ---------- 空状态 / 登录 ---------- */
.empty{
  text-align:center;padding:50px 20px;color:var(--muted);
  background:var(--panel);border:1px dashed var(--line);border-radius:14px;
}
.login-box{
  max-width:360px;margin:60px auto;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:26px;
}
.login-box h1{font-size:17px;margin-bottom:18px}

/* ---------- 页脚 ---------- */
.foot{
  text-align:center;padding:20px;color:#6b7385;font-size:12px;
  border-top:1px solid var(--line);
}
.foot .dot{opacity:.4;margin:0 6px}