/* ============================================================================
 * AnyOne · 管理面板样式
 * 与前台同一套设计语言，但用红/琥珀强调"这是运维界面"。
 * ==========================================================================*/
:root {
  --bg: #0a0e1a;
  --card: #141b2e;
  --card2: #1b2438;
  --line: #2a3550;
  --text: #e9edf9;
  --dim: #98a4c4;
  --accent: #f87171;
  --accent2: #fbbf24;
  --ok: #34d399;
  --info: #60a5fa;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: radial-gradient(1000px 500px at 10% -10%, #241a2a 0%, transparent 55%), var(--bg);
  color: var(--text);
  font: 14px/1.6 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.25rem; margin: 0 0 .5rem; }
h3 { font-size: .98rem; margin: 0 0 .6rem; }
h4 { font-size: .9rem; margin: .8rem 0 .3rem; color: var(--dim); }
p { margin: .4rem 0; }
a { color: var(--info); }
code, .code { font-family: ui-monospace, Consolas, monospace; font-size: .82em; }
code { background: rgba(255,255,255,.08); padding: .1em .35em; border-radius: 5px; }
pre.code { background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 9px; padding: .6rem; overflow: auto; font-size: .76rem; white-space: pre-wrap; }
.hint { color: var(--dim); font-size: .84rem; }
.hidden { display: none !important; }
.spacer { flex: 1; }

/* ─────────── 顶栏 / 标签 ─────────── */
.topbar {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem;
  border-bottom: 1px solid var(--line); background: rgba(12,16,28,.8); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.brand { font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.brand .logo { color: var(--accent); }
.badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.badge { font-size: .74rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); color: var(--dim); white-space: nowrap; }
.badge.ok { background: var(--ok); color: #06281c; border-color: transparent; }
.badge.warn { background: var(--accent2); color: #2b1f04; border-color: transparent; }
.badge.danger { background: var(--accent); color: #2c0606; border-color: transparent; }
.badge.ghost { background: transparent; }
.tabs { display: flex; gap: .3rem; padding: .5rem .9rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: rgba(12,16,28,.5); position: sticky; top: 52px; z-index: 15; }
.tabs button { padding: .3rem .7rem; font-size: .84rem; border-radius: 8px; background: transparent; }
.tabs button.active { background: var(--accent); color: #2c0606; border-color: transparent; font-weight: 600; }

/* ─────────── 布局 ─────────── */
.wrap { padding: .9rem; max-width: 1400px; margin: 0 auto; display: grid; gap: .8rem; }
.panel { display: none; gap: .8rem; }
.panel.active { display: grid; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.card { background: linear-gradient(180deg, rgba(27,36,56,.95), rgba(20,27,46,.95)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem .9rem; }
.card.danger-card { border-color: rgba(248,113,113,.45); }

/* ─────────── 卡片指标 ─────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.metric { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; }
.metric .k { color: var(--dim); font-size: .78rem; }
.metric .v { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.metric .s { color: var(--dim); font-size: .74rem; }
.metric.warn .v { color: var(--accent2); }
.metric.danger .v { color: var(--accent); }
.metric.ok .v { color: var(--ok); }

/* ─────────── 列表 / 表单 ─────────── */
.kv { display: grid; gap: .2rem; font-size: .85rem; }
.kvrow { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px dashed rgba(255,255,255,.07); padding: .18rem 0; }
.kvrow span { color: var(--dim); }
.kvrow b { text-align: right; word-break: break-all; }
.feed { display: grid; gap: .3rem; font-size: .84rem; max-height: 340px; overflow: auto; }
.feedrow { display: flex; gap: .5rem; align-items: center; border-bottom: 1px dashed rgba(255,255,255,.07); padding: .25rem 0; }
.feedrow .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.field { display: block; margin: .3rem 0; min-width: 150px; }
.field > span { display: block; font-size: .8rem; color: var(--dim); margin-bottom: .15rem; }
input, textarea, select {
  width: 100%; background: #0d1526; color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: .4rem .5rem; font: inherit; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; }
.check { display: flex; gap: .4rem; align-items: center; font-size: .85rem; }
.check input { width: auto; }
.row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.row.end { justify-content: flex-end; }
button, .btn {
  font: inherit; border-radius: 9px; padding: .38rem .75rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--card2); color: var(--text); transition: .15s; text-decoration: none; display: inline-block;
}
button:hover:not(:disabled), .btn:hover { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(180deg, #fca5a5, var(--accent)); color: #2c0606; border: none; font-weight: 600; }
button.danger { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; border: none; font-weight: 600; }
button.ghost { background: transparent; }
button.small { padding: .18rem .5rem; font-size: .78rem; }

/* ─────────── 表格 ─────────── */
.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: .82rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
th { color: var(--dim); font-weight: 600; background: rgba(0,0,0,.25); position: sticky; top: 0; }
tr.dismissed { opacity: .5; }
td .sev { display: inline-block; min-width: 2.2rem; text-align: center; border-radius: 6px; padding: 0 .3rem; font-weight: 600; }
.sev.low { background: rgba(52,211,153,.18); color: var(--ok); }
.sev.mid { background: rgba(251,191,36,.18); color: var(--accent2); }
.sev.high { background: rgba(248,113,113,.2); color: var(--accent); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }

/* ─────────── 浮层 / 提示 ─────────── */
.overlay { position: fixed; inset: 0; background: rgba(4,7,16,.8); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.sheet { background: linear-gradient(180deg, #1c2438, #131a2b); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 1.1rem 1.2rem; max-width: 560px; width: 100%; }
.sheet.narrow { max-width: 460px; }
.toasts { position: fixed; right: 14px; bottom: 14px; display: grid; gap: .4rem; z-index: 90; max-width: min(400px, 92vw); }
.toast { background: #1d2740; border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: 10px; padding: .5rem .7rem; font-size: .85rem; box-shadow: var(--shadow); }
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--accent2); }
.toast.danger { border-left-color: var(--accent); }

@media (max-width: 980px) {
  .grid2 { grid-template-columns: 1fr; }
  .tabs { position: static; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }