:root {
    --bg: #0e141b;
    --panel: #161e27;
    --panel-2: #1c2631;
    --line: #2a3644;
    --text: #e8eef4;
    --muted: #8b98a5;
    --accent: #e2b657;
    --accent-2: #3d8bfd;
    --ok: #3dbe86;
    --danger: #e35d6a;
    --sidebar: 232px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}
a { color: var(--accent-2); text-decoration: none; }
.layout { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar);
    background: #101820;
    border-right: 1px solid var(--line);
    padding: 22px 14px;
    position: fixed;
    inset: 0 auto 0 0;
}
.brand { font-weight: 700; letter-spacing: .04em; padding: 6px 10px 22px; }
.brand small { display: block; color: var(--muted); font-weight: 400; margin-top: 4px; }
.nav a {
    display: block;
    color: var(--text);
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 4px;
}
.nav a:hover, .nav a.active { background: var(--panel-2); }
.main { margin-left: var(--sidebar); flex: 1; padding: 22px 28px 48px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
h1 { font-size: 22px; margin: 0; }
.muted { color: var(--muted); font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
}
.card .n { font-size: 28px; font-weight: 700; margin-top: 8px; color: var(--accent); }
.table-wrap, .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { color: var(--muted); font-weight: 600; background: #121a22; }
tr:last-child td { border-bottom: 0; }
.btn, button, input[type=submit] {
    background: var(--accent-2);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
}
.btn.gray, .ghost { background: #2a3644; }
.btn.gold { background: #b8862a; }
.btn.danger { background: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
input, textarea, select {
    background: #0f161d;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    width: 100%;
}
textarea { min-height: 110px; font-family: ui-monospace, Consolas, monospace; }
label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flash { padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }
.flash.ok { background: #163628; color: #b6f0d0; }
.flash.err { background: #3a1c22; color: #ffc1c7; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #2a3644; }
.tag.ok { background: #1f6f4a; }
.tag.warn { background: #6b5420; }
.pager { display: flex; gap: 8px; padding: 12px 14px; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login-box { width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pub { white-space: pre-wrap; word-break: break-all; font-size: 12px; color: #c5d0da; background: #0f161d; padding: 12px; border-radius: 8px; }
@media (max-width: 980px) {
    .cards, .grid-2 { grid-template-columns: 1fr 1fr; }
    .sidebar { position: static; width: auto; }
    .main { margin-left: 0; }
    .layout { display: block; }
}