/* 亲情桌面 · 运营后台 — 无构建、无外部字体；兼容 CSP style-src 'self'（本文件为唯一样式来源） */
:root {
  /* 原始色 */
  --gray-0: #ffffff;
  --gray-50: #f5f6f8;
  --gray-100: #eceef2;
  --gray-200: #dfe2e8;
  --gray-400: #9aa1ad;
  --gray-600: #5b6270;
  --gray-900: #1d2129;
  --blue-50: #eef3fd;
  --blue-500: #2b62d1;
  --blue-600: #224fae;
  --red-600: #c62f2f;
  --red-50: #fdf0f0;
  --green-600: #1f7a45;
  /* 语义 */
  --surface: var(--gray-50);
  --panel: var(--gray-0);
  --on-surface: var(--gray-900);
  --muted: var(--gray-600);
  --subtle: var(--gray-400);
  --outline: var(--gray-200);
  --row-alt: #fafbfc;
  --hover: var(--gray-100);
  --primary: var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-weak: var(--blue-50);
  --on-primary: #ffffff;
  --good: var(--green-600);
  --bad: var(--red-600);
  --error-bg: var(--red-50);
  --focus: 0 0 0 3px rgba(43, 98, 209, .35);
  /* 尺寸 */
  --fs: 14px;
  --fs-sm: 12px;
  --fs-lg: 16px;
  --fs-num: 28px;
  --r-sm: 4px;
  --r-md: 6px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --sidebar-w: 184px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font: var(--fs)/1.6 var(--font); color: var(--on-surface); background: var(--surface); }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.35; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }

/* 按钮 / 表单 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: 32px; padding: 0 var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--outline); background: var(--panel); color: var(--on-surface);
  font: inherit; cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease-out, border-color .12s ease-out;
}
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--hover); color: var(--on-surface); }
.btn-ghost.is-active { color: var(--primary); background: var(--primary-weak); }
.btn-block { width: 100%; height: 40px; }
input, select {
  height: 32px; padding: 0 var(--s2); border: 1px solid var(--outline); border-radius: var(--r-sm);
  background: var(--panel); color: var(--on-surface); font: inherit;
}
input:hover, select:hover { border-color: var(--subtle); }
input:focus-visible, select:focus-visible { border-color: var(--primary); }
input[type=file] { height: auto; padding: 4px; }
.field { display: block; margin-bottom: var(--s4); }
.field-label { display: block; margin-bottom: var(--s1); color: var(--muted); }
.field input { width: 100%; height: 40px; }
.form-error { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--error-bg); color: var(--bad); }

/* 登录 */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--s5); }
.login-box { width: 360px; max-width: 100%; padding: var(--s6); background: var(--panel); border: 1px solid var(--outline); border-radius: var(--r-md); }
.login-title { font-size: 20px; }
.login-sub { margin: var(--s2) 0 var(--s5); color: var(--muted); }

/* 框架 */
.shell { display: flex; min-height: 100%; }
.sidebar { flex: 0 0 var(--sidebar-w); background: #1f2633; color: #c9cfda; padding: var(--s4) 0; }
.brand { padding: 0 var(--s4) var(--s4); font-size: var(--fs-lg); font-weight: 600; color: #fff; }
.brand-sub { display: block; font-size: var(--fs-sm); font-weight: 400; color: #8f98a8; }
.nav { display: flex; flex-direction: column; }
.nav a { padding: var(--s2) var(--s4); color: inherit; border-left: 3px solid transparent; }
.nav a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; color: #fff; }
.nav a.is-active { background: rgba(255, 255, 255, .1); color: #fff; border-left-color: #6d9bf5; }
.nav a:focus-visible { box-shadow: inset 0 0 0 2px #6d9bf5; }
.nav-sep { margin-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, .08); }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) var(--s5); background: var(--panel); border-bottom: 1px solid var(--outline); flex-wrap: wrap;
}
.filters { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.f-item { display: inline-flex; align-items: center; gap: var(--s2); color: var(--muted); }
.f-item input, .f-item select { color: var(--on-surface); }
.f-dash { color: var(--subtle); }
.f-quick { display: inline-flex; gap: var(--s1); }
.user { display: flex; align-items: center; gap: var(--s2); color: var(--muted); }
.notice { margin: var(--s4) var(--s5) 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--error-bg); color: var(--bad); }
.content { padding: var(--s5); }

/* 页面块 */
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.page-head .hint { color: var(--muted); font-size: var(--fs-sm); }
.panel { background: var(--panel); border: 1px solid var(--outline); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.panel-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.grid-3 > .panel { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.grid-2 > .panel { margin-bottom: 0; }

/* 数字卡片 */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.card { background: var(--panel); border: 1px solid var(--outline); border-radius: var(--r-md); padding: var(--s4) var(--s5); }
.card-label { color: var(--muted); }
.card-value { margin: var(--s1) 0; font-size: var(--fs-num); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.card-sub { color: var(--muted); font-size: var(--fs-sm); }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.delta::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.delta.up::before { border-bottom: 7px solid currentColor; }
.delta.down::before { border-top: 7px solid currentColor; }
.delta.flat::before { width: 8px; height: 2px; border: 0; background: currentColor; }
.delta.none::before { display: none; }
.delta.good { color: var(--good); }
.delta.bad { color: var(--bad); }
.delta.flat, .delta.none { color: var(--muted); }

/* 图表 */
.chart { width: 100%; height: 300px; }
.chart-sm { height: 220px; }

/* 表格 */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--outline); vertical-align: top; }
th { font-weight: 600; color: var(--muted); background: var(--surface); white-space: nowrap; }
td.num, th.num { text-align: right; }
tbody tr:hover { background: var(--row-alt); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td:first-child { color: var(--primary); }
.sort-btn { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.sort-btn:hover { color: var(--on-surface); }
.sort-btn[aria-pressed=true] { color: var(--primary); }
.sort-btn[aria-pressed=true]::after { content: " ↓"; }
.raw { color: var(--subtle); font-size: var(--fs-sm); }
.tag { display: inline-block; padding: 0 6px; border-radius: var(--r-sm); background: var(--hover); color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.tag-java { background: #fdf0f0; color: #a52a2a; }
.tag-anr { background: #fff6e5; color: #8a5a00; }
.tag-native { background: #f1edfb; color: #5b3fa6; }

/* 空 / 加载 / 错误 */
.empty { padding: var(--s6) 0; text-align: center; color: var(--muted); }
.loading { padding: var(--s6) 0; text-align: center; color: var(--subtle); }
.err { padding: var(--s3); border-radius: var(--r-sm); background: var(--error-bg); color: var(--bad); }

/* 崩溃详情 / 调用栈 */
.stack {
  margin: 0; padding: var(--s3); max-height: 420px; overflow: auto; background: #f7f8fa; border: 1px solid var(--outline);
  border-radius: var(--r-sm); font: 12.5px/1.55 var(--mono); white-space: pre; color: var(--on-surface);
}
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }
.sample { border-top: 1px solid var(--outline); padding-top: var(--s3); margin-top: var(--s3); }
.sample-head { display: flex; gap: var(--s3); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s2); }
.upload { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.upload label { display: flex; flex-direction: column; gap: var(--s1); color: var(--muted); }
.upload-msg { margin: var(--s2) 0 0; }
.upload-msg.ok { color: var(--good); }
.upload-msg.fail { color: var(--bad); }
.back { margin-bottom: var(--s3); }

/* 查编号 */
.search { display: flex; gap: var(--s2); align-items: center; }
.search input { width: 200px; font-family: var(--mono); letter-spacing: 1px; }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }