/* TR WheelChair 管理后台样式 · v0.9
   ─ CSS 变量令牌化 · 暗色默认 + 亮色双主题 · JS 驱动 · 响应式（≥1024 / 768~1023 / <768 / <480）─ */

/* ══════════════════════════════════════════════════════════════════════
   1. 设计令牌（Design Tokens）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 字阶（§3） ── */
:root {
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   28px;

  /* ── 间距（§4） ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ── 圆角 ── */
  --radius:    8px;
  --radius-lg: 10px;
  --gap:       16px;
}

/* ── 暗色主题（§2.1 · 默认） ── */
:root,
[data-theme="dark"] {
  --bg:        #1e1e1e;
  --surface:   #252526;
  --surface-2: #2d2d30;
  --border:    #3c3c3c;
  --border-2:  #505050;
  --text:      #cccccc;
  --text-mute: #9d9d9d;
  --text-dim:  #6e6e6e;
  --text-em:   #ffffff;
  --accent:    #0078d4;
  --accent-2:  #106ebe;
  --accent-3:  #005a9e;
  --warn:      #cca700;
  --warn-text: #1a1a1a;
  --danger:    #f14c4c;
  --danger-2:  #cd3131;
  --ok:        #4ec9b0;
  --ok-2:      #3aaa95;
  --row-blacklisted: rgba(241, 76,  76,  .10);
  --row-whitelisted: rgba(78,  201, 176, .10);
  --row-frozen:      rgba(204, 167, 0,   .10);
  --row-deleted:     rgba(110, 110, 110, .10);
  --row-selected:    rgba(0,   120, 212, .14);
  --shadow-pop: 0 8px 24px rgba(0,0,0,.60);
}

/* ── 亮色主题（§2.2） ── */
[data-theme="light"] {
  --bg:        #f5f5f5;
  --surface:   #ffffff;
  --surface-2: #f0f0f0;
  --border:    #e0e0e0;
  --border-2:  #c8c8c8;
  --text:      #323130;
  --text-mute: #605e5c;
  --text-dim:  #a19f9d;
  --text-em:   #1b1b1b;
  --accent:    #0078d4;
  --accent-2:  #106ebe;
  --accent-3:  #005a9e;
  --warn:      #c27400;
  --warn-text: #ffffff;
  --danger:    #d13438;
  --danger-2:  #a4262c;
  --ok:        #107c10;
  --ok-2:      #0b6a0b;
  --row-blacklisted: rgba(209, 52,  56,  .08);
  --row-whitelisted: rgba(16,  124, 16,  .08);
  --row-frozen:      rgba(194, 116, 0,   .08);
  --row-deleted:     rgba(161, 159, 157, .10);
  --row-selected:    rgba(0,   120, 212, .10);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.14);
}

/* ══════════════════════════════════════════════════════════════════════
   2. 全局
   ══════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   3. 顶栏（§5.1 · 48px）
   ══════════════════════════════════════════════════════════════════════ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 24px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  flex-wrap: wrap; gap: 8px;
}
.topbar .brand {
  font-size: var(--fs-md); font-weight: 600; color: var(--text-em);
  border-left: 3px solid var(--accent); padding-left: 10px;
}
.topbar nav { display: flex; flex-wrap: wrap; gap: 0; }
.topbar nav a {
  margin-right: 18px; color: var(--text-mute); padding: 6px 0;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-sm);
}
.topbar nav a:last-child { margin-right: 0; }
.topbar nav a:hover { color: var(--text); }
.topbar nav a.active { color: var(--text-em); border-bottom-color: var(--accent); }
.topbar nav a .nav-badge {
  display: inline-block; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 4px;
  background: var(--text-dim); color: #fff;
  font-size: var(--fs-xs); line-height: 18px; text-align: center;
  border-radius: 9px; vertical-align: 1px; font-weight: 600;
}
.topbar nav a .nav-badge-danger { background: var(--danger); }
.topbar .user { color: var(--text-mute); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.topbar .user form { display: inline; }

/* ── 主题切换按钮（§5.11） ── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; height: 28px;
}
.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-mute);
  transition: background .12s, color .12s;
}
.theme-toggle-btn:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle-btn.is-active {
  background: var(--accent); color: #ffffff;
}
.theme-toggle-btn svg { width: 16px; height: 16px; }

/* ── 语言选择器 ── */
.lang-picker {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  cursor: default; user-select: none;
  color: var(--text-mute); font-size: 13px;
  padding: 3px 7px; border-radius: 6px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.lang-picker:hover {
  border-color: var(--border);
  background: var(--surface-2);
}
.lang-picker-icon { font-size: 15px; line-height: 1; }
.lang-picker-current { font-size: 12px; color: var(--text-dim); }
.lang-picker-menu {
  visibility: hidden; opacity: 0; pointer-events: none;
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  min-width: 110px; z-index: 200; overflow: hidden;
  padding: 4px 0;
  transition: opacity 0.12s, visibility 0.12s;
}
.lang-picker.is-open .lang-picker-menu {
  visibility: visible; opacity: 1; pointer-events: auto;
}
.lang-picker-menu form { display: block; margin: 0; }
.lang-picker-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 14px; font-size: 13px;
  background: none; border: none; cursor: pointer;
  color: var(--text); white-space: nowrap;
  transition: background 0.1s;
}
.lang-picker-item:hover { background: var(--surface-2); }
.lang-picker-item.is-active {
  color: var(--accent); font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   4. 主区
   ══════════════════════════════════════════════════════════════════════ */
main { max-width: 1280px; margin: 0 auto; padding: var(--space-6); }
h1 { font-size: var(--fs-lg); margin: 0 0 var(--space-4); color: var(--text-em); font-weight: 600; }
h2 { font-size: var(--fs-md); margin: var(--space-6) 0 var(--space-3); color: var(--text-em); font-weight: 600; }

/* 卡片（§5.2） */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4);
}
.cards-grid {
  display: grid; gap: var(--gap); margin-bottom: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat .label { color: var(--text-mute); font-size: var(--fs-sm); }
.stat .value { font-size: var(--fs-xl); font-weight: 600; color: var(--text-em); margin-top: var(--space-1); }
.stat.is-clickable { cursor: pointer; transition: transform .12s, border-color .12s; }
.stat.is-clickable:hover { transform: translateY(-2px); border-color: var(--accent); }
.stat .sub { color: var(--text-dim); font-size: var(--fs-xs); margin-top: var(--space-1); }

/* ══════════════════════════════════════════════════════════════════════
   5. 表单元素（§5.4）
   ══════════════════════════════════════════════════════════════════════ */
label { display: block; color: var(--text-mute); font-size: var(--fs-sm); margin-bottom: var(--space-1); }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=search],
select, textarea {
  width: 100%; padding: 8px 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--fs-base); font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,120,212,.18);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}
.form-row { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--space-3); }

/* 按钮（§5.3） */
.btn {
  display: inline-block; padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--border);
  color: var(--text-em); cursor: pointer;
  font-size: 13px; font-family: inherit; line-height: 1.3;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--border-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.btn-danger:hover { background: var(--danger-2); border-color: var(--danger-2); }
.btn-warn { background: var(--warn); border-color: var(--warn); color: var(--warn-text); }
.btn-warn:hover { filter: brightness(0.9); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* 工具条 */
.toolbar { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; margin-bottom: var(--space-4); }
.toolbar > * { flex: 1 1 160px; min-width: 120px; }
.toolbar .toolbar-actions { flex: 0 0 auto; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.toolbar > div:has(> select[name="size"]) { flex: 0 0 110px; min-width: 0; }
.toolbar select[name="size"] { width: 100%; }

/* 批量动作工具条（§5.9 · sticky top 48px） */
.batch-toolbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: var(--space-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .12s, background .12s;
  position: sticky; top: 48px; z-index: 20;
}
.batch-toolbar.has-selection {
  border-color: var(--accent);
  background: rgba(0,120,212,.10);
}
[data-theme="light"] .batch-toolbar.has-selection {
  background: rgba(0,120,212,.07);
}
.batch-toolbar .counter { color: var(--text-em); font-weight: 600; }
.batch-toolbar .counter::before { content: "已选 "; color: var(--text-mute); font-weight: 400; }
.batch-toolbar .counter::after  { content: " 项"; color: var(--text-mute); font-weight: 400; }
.batch-toolbar .spacer { flex: 1; min-width: 0; }

/* 下拉菜单 */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 200px; padding: var(--space-1); z-index: 50;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 6px; box-shadow: var(--shadow-pop);
}
.dropdown-menu.is-open { display: block; }
.dropdown-menu .menu-item {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3); border: none; background: transparent;
  color: var(--text); font-size: 13px; cursor: pointer;
  border-radius: 4px;
}
.dropdown-menu .menu-item:hover { background: var(--surface-2); }
.dropdown-menu .menu-item:disabled { color: var(--text-dim); cursor: not-allowed; }
.dropdown-menu .menu-item:disabled:hover { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════
   6. 表格（§5.5）
   ══════════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px var(--space-3); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th {
  color: var(--text-mute); font-weight: 500; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
td { font-size: var(--fs-base); }
tbody tr:hover { background: var(--surface-2); }
tr.row-blacklisted { background: var(--row-blacklisted); }
tr.row-blacklisted:hover { background: rgba(241, 76, 76, .20); }
tr.row-whitelisted { background: var(--row-whitelisted); }
tr.row-whitelisted:hover { background: rgba(78, 201, 176, .20); }
tr.row-frozen { background: var(--row-frozen); }
tr.row-frozen:hover { background: rgba(204, 167, 0, .18); }
tr.row-deleted { background: var(--row-deleted); color: var(--text-mute); }
tr.row-deleted:hover { background: rgba(110, 110, 110, .18); }
tr.is-selected { background: var(--row-selected) !important; }
tr.is-selected:hover { background: rgba(0,120,212,.22) !important; }
tr.is-flagged-multi { box-shadow: inset 3px 0 0 var(--warn); }
tr.is-flagged-cross-geo { box-shadow: inset 3px 0 0 var(--accent); }
tr.is-flagged-multi.is-flagged-cross-geo {
  box-shadow: inset 3px 0 0 var(--warn), inset 6px 0 0 var(--accent);
}

th.col-check, td.col-check { width: 36px; padding-left: var(--space-3); padding-right: 0; }
input[type=checkbox] { width: auto; cursor: pointer; }

/* 三态排序表头 */
th.sortable, th[data-sort] { cursor: pointer; user-select: none; position: relative; }
th[data-sort]::after {
  content: ""; display: inline-block; width: 0; height: 0;
  margin-left: 6px; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  opacity: .35;
}
th[data-sort-state=asc]::after  { border-bottom-color: var(--accent); opacity: 1; }
th[data-sort-state=desc]::after { border-top-color: var(--accent); opacity: 1; }
th[data-sort]:hover { color: var(--text-em); }

/* ══════════════════════════════════════════════════════════════════════
   7. 状态徽章（§5.6 · 暗/亮双色表）
   ══════════════════════════════════════════════════════════════════════ */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; }

/* 暗色徽章 */
.badge-pending,
.badge-new        { background: #3c3c3c; color: #9d9d9d; }
.badge-authorized,
.badge-normal     { background: #004578; color: #a9d3ff; }
.badge-active,
.badge-whitelisted { background: #1b4f1b; color: #a7d9a7; }
.badge-blacklisted,
.badge-locked     { background: #4e1c1c; color: #fca5a5; }
.badge-frozen     { background: #4a3200; color: #fcd34d; }
.badge-revoked    { background: #3c3c3c; color: #9d9d9d; }
.badge-deleted    { background: #3c3c3c; color: #6e6e6e; }
.badge-mfa        { background: #3b1d6e; color: #d8b4fe; }
.badge-trusted    { background: #0a3d5c; color: #67e8f9; }
.badge-online     { background: #1b4f1b; color: #a7d9a7; }
.badge-offline    { background: #3c3c3c; color: #9d9d9d; }
.badge-warning    { background: #4a3200; color: #fcd34d; }
.badge-info       { background: #003966; color: #90c8f0; }
.badge-dismissed  { background: #3c3c3c; color: #6e6e6e; }
.badge-flag-multi { background: var(--warn); color: var(--warn-text); }
.badge-flag-cross-geo { background: var(--accent); color: #ffffff; }
.badge-sev-success { background: var(--ok-2); color: #a7d9a7; }
.badge-sev-info    { background: var(--accent-2); color: #a9d3ff; }
.badge-sev-warn    { background: var(--warn); color: var(--warn-text); }
.badge-sev-danger  { background: var(--danger-2); color: #fca5a5; }

/* 亮色徽章覆盖 */
[data-theme="light"] .badge-pending,
[data-theme="light"] .badge-new        { background: #e8e8e8; color: #605e5c; }
[data-theme="light"] .badge-authorized,
[data-theme="light"] .badge-normal     { background: #deecf9; color: #004578; }
[data-theme="light"] .badge-active,
[data-theme="light"] .badge-whitelisted { background: #dff6dd; color: #0b6a0b; }
[data-theme="light"] .badge-blacklisted,
[data-theme="light"] .badge-locked     { background: #fde7e9; color: #a4262c; }
[data-theme="light"] .badge-frozen     { background: #fff4ce; color: #835b00; }
[data-theme="light"] .badge-revoked    { background: #e8e8e8; color: #605e5c; }
[data-theme="light"] .badge-deleted    { background: #e8e8e8; color: #a19f9d; }
[data-theme="light"] .badge-mfa        { background: #ede9fe; color: #5b21b6; }
[data-theme="light"] .badge-trusted    { background: #e0f7fa; color: #0e7490; }
[data-theme="light"] .badge-online     { background: #dff6dd; color: #0b6a0b; }
[data-theme="light"] .badge-offline    { background: #e8e8e8; color: #605e5c; }
[data-theme="light"] .badge-warning    { background: #fff4ce; color: #835b00; }
[data-theme="light"] .badge-info       { background: #deecf9; color: #0078d4; }
[data-theme="light"] .badge-dismissed  { background: #e8e8e8; color: #a19f9d; }
[data-theme="light"] .badge-flag-multi { background: var(--warn); color: var(--warn-text); }
[data-theme="light"] .badge-flag-cross-geo { background: var(--accent); color: #ffffff; }
[data-theme="light"] .badge-sev-success { background: var(--ok-2); color: #ffffff; }
[data-theme="light"] .badge-sev-info    { background: var(--accent-2); color: #ffffff; }
[data-theme="light"] .badge-sev-warn    { background: var(--warn); color: var(--warn-text); }
[data-theme="light"] .badge-sev-danger  { background: var(--danger-2); color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════
   8. 模态（§5.7）
   ══════════════════════════════════════════════════════════════════════ */
.modal-root {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.modal-root.is-open { display: flex; }
body.modal-open { overflow: hidden; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  cursor: pointer;
}
[data-theme="light"] .modal-backdrop { background: rgba(0,0,0,.35); }
.modal-card {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%; max-width: 720px;
  max-height: 90vh; overflow: auto; padding: var(--space-5);
  box-shadow: var(--shadow-pop);
}
.modal-close {
  position: absolute; top: var(--space-2); right: 10px; z-index: 4;
  width: 32px; height: 32px; padding: 0; line-height: 1;
  font-size: 22px; background: transparent; border: none;
  color: var(--text-mute); cursor: pointer; border-radius: 4px;
}
.modal-close:hover { background: var(--surface-2); color: var(--text-em); }
.modal-body { /* 容器 */ }

.modal-card .modal { background: transparent; border: none; padding: 0;
                     max-width: none; max-height: none; overflow: visible;
                     box-shadow: none; border-radius: 0; }

.modal-head { display: flex; justify-content: space-between; align-items: center;
              position: sticky; top: -20px; background: var(--surface); z-index: 3;
              padding: var(--space-4) var(--space-5) var(--space-2); margin: -20px -20px var(--space-3);
              border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-2) var(--space-4); font-size: 13px; }
.kv dt { color: var(--text-mute); }
.kv dd { margin: 0; color: var(--text); word-break: break-word; }

.modal-card h3 { font-size: var(--fs-base); margin: 18px 0 var(--space-2); color: var(--text-em);
                 padding-bottom: var(--space-1); border-bottom: 1px solid var(--border); }
.modal-card .subtable { font-size: var(--fs-sm); }
.modal-card .subtable th, .modal-card .subtable td { padding: 6px var(--space-2); }
.modal-card .subtable .btn { padding: 4px 14px; font-size: var(--fs-sm); line-height: 1.4;
                             min-width: 64px; white-space: nowrap; }
.modal-card .inline-form { display: flex; gap: var(--space-2); align-items: end; flex-wrap: wrap;
                           padding: 10px; background: var(--bg);
                           border: 1px solid var(--border); border-radius: 6px; margin-top: var(--space-2); }
.modal-card .inline-form > * { flex: 1 1 120px; min-width: 100px; }
.modal-card .inline-form .toolbar-actions { flex: 0 0 auto; }
.modal-card .inline-form label { margin-bottom: 2px; }
.modal-card .danger-zone { margin-top: 18px; padding: var(--space-3);
                           background: rgba(209, 52, 56, .08);
                           border: 1px solid rgba(209, 52, 56, .35); border-radius: 6px; }
.modal-card .danger-zone h3 { color: var(--danger); border-bottom-color: rgba(209, 52, 56, .35); margin-top: 0; }

/* 折叠面板 */
.modal details { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); background: var(--bg);
                 border: 1px solid var(--border); border-radius: 6px; }
.modal details[open] { padding-bottom: var(--space-3); }
.modal details > summary {
  cursor: pointer; user-select: none; padding: var(--space-1) 0;
  color: var(--text-em); font-size: 13px; font-weight: 500;
  list-style: none; outline: none;
}
.modal details > summary::-webkit-details-marker { display: none; }
.modal details > summary::before {
  content: "▸"; color: var(--text-mute); margin-right: 6px;
  display: inline-block; transition: transform .15s;
}
.modal details[open] > summary::before { transform: rotate(90deg); }
.modal details > summary:hover { color: var(--text-em); }
.modal details > .subtable { margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════
   9. 用户事件时间线
   ══════════════════════════════════════════════════════════════════════ */
.modal-card .user-events { margin: var(--space-1) 0 0; }
.modal-card .event-timeline { list-style: none; margin: var(--space-2) 0 0; padding: 0;
                              max-height: 480px; overflow-y: auto;
                              border: 1px solid var(--border); border-radius: 6px;
                              background: var(--bg); }
.modal-card .event-item { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border-2);
                          border-bottom: 1px solid var(--border); }
.modal-card .event-item:last-child { border-bottom: none; }
.modal-card .event-sev-success { border-left-color: var(--ok); }
.modal-card .event-sev-info    { border-left-color: var(--accent); }
.modal-card .event-sev-warn    { border-left-color: var(--warn); }
.modal-card .event-sev-danger  { border-left-color: var(--danger); background: rgba(220,38,38,.05); }
.modal-card .event-head { display: flex; gap: var(--space-2); align-items: center;
                          flex-wrap: wrap; font-size: var(--fs-sm); }
.modal-card .event-time { color: var(--text-mute); font-family: Consolas, Menlo, monospace; }
.modal-card .event-meta { margin-top: 3px; }
.modal-card .event-payload { margin-top: var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.modal-card .event-payload .kv-tag {
  display: inline-block; padding: 1px 6px; font-size: var(--fs-xs); line-height: 1.4;
  background: var(--surface-2); color: var(--text); border-radius: 4px;
  font-family: Consolas, Menlo, monospace; max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-card .event-load-more { text-align: center; }

/* ══════════════════════════════════════════════════════════════════════
   10. 字体辅助
   ══════════════════════════════════════════════════════════════════════ */
.fp-mono { font-family: Consolas, Menlo, monospace; color: var(--text); }
.muted { color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════════════
   11. Flash 提示（§5.8）
   ══════════════════════════════════════════════════════════════════════ */
#flash-host {
  position: fixed; top: var(--space-5); right: var(--space-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px;
}
.flash {
  padding: 10px 14px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-base); white-space: pre-wrap;
  animation: flash-in .2s ease-out;
}
.flash-leaving { animation: flash-out .3s ease-in forwards; }
@keyframes flash-in  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes flash-out { to { opacity: 0; transform: translateX(20px); } }
.flash-error { background: rgba(241,76,76,.12); color: #fca5a5; border-color: rgba(241,76,76,.35); }
.flash-ok    { background: rgba(78,201,176,.12); color: #a7d9a7; border-color: rgba(78,201,176,.30); }
.flash-warn  { background: rgba(204,167,0,.12); color: #fcd34d; border-color: rgba(204,167,0,.30); }
[data-theme="light"] .flash-error { color: #a4262c; }
[data-theme="light"] .flash-ok    { color: #107c10; }
[data-theme="light"] .flash-warn  { color: #835b00; }

main > .flash { margin-bottom: var(--space-4); }

/* ══════════════════════════════════════════════════════════════════════
   12. 分页（§5.10）
   ══════════════════════════════════════════════════════════════════════ */
.pager { display: flex; gap: var(--space-2); justify-content: center; align-items: center; padding: var(--space-4) 0; flex-wrap: wrap; }
.pager .pager-info { color: var(--text-mute); font-size: var(--fs-sm); }
.pager .btn-ghost.active { background: var(--accent); color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════
   13. 登录 / Bootstrap
   ══════════════════════════════════════════════════════════════════════ */
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.login-card h1 { text-align: center; margin-bottom: var(--space-5); }
.login-card .form-row { grid-template-columns: 1fr; }

.login-stack { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.login-logo-card {
  width: 96px; height: 96px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  box-sizing: border-box;
}
.login-logo-img { display: block; max-width: 100%; max-height: 100%; }
.login-title { margin: 0; font-size: 24px; text-align: center; color: var(--text-em); }
.login-subtitle { margin: 6px 0 var(--space-5); font-size: 13px; text-align: center; }
.login-stack .login-card { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   14. 操作按钮组
   ══════════════════════════════════════════════════════════════════════ */
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.actions .btn { padding: 4px 10px; font-size: var(--fs-sm); }

.is-loading { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* ══════════════════════════════════════════════════════════════════════
   15. 协议管理
   ══════════════════════════════════════════════════════════════════════ */
.agreement-warning {
  background: rgba(241, 76, 76, .10);
  border: 1px solid rgba(241, 76, 76, .45);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: var(--space-4);
}
.agreement-warning-title {
  color: var(--danger); font-weight: 600; font-size: var(--fs-base);
  margin-bottom: var(--space-2); letter-spacing: .02em;
}
.agreement-warning-list {
  margin: 0; padding-left: 22px; color: var(--warn);
  font-size: 13px; line-height: 1.7;
}
.agreement-warning-list li { margin: 2px 0; }
.agreement-warning-list strong { color: var(--text-em); }

.agreement-editor-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}
.agreement-editor-pane { padding: var(--space-3); display: flex; flex-direction: column; min-width: 0; }
.agreement-pane-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-2); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-em); font-weight: 500;
}
.agreement-pane-meta { font-size: var(--fs-xs); }
.agreement-editor-pane textarea {
  width: 100%; min-height: 360px; resize: vertical;
  font-family: Consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
  font-size: 13px; line-height: 1.6;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px var(--space-3);
}
.agreement-editor-pane textarea:focus { outline: none; border-color: var(--accent); }

.agreement-preview {
  margin-top: 10px; padding: var(--space-1);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  min-height: 80px; max-height: 320px; overflow-y: auto;
}
.agreement-preview .agreement-rendered { padding: var(--space-2) var(--space-3); }

.agreement-detail-tabs { margin-top: 6px; }
.agreement-detail-tab-buttons {
  display: flex; gap: 6px; margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); flex-wrap: wrap;
}
.agreement-tab-btn { padding: 5px var(--space-3); font-size: var(--fs-sm); }
.agreement-tab-btn.is-active {
  background: var(--accent-2); border-color: var(--accent-2); color: #fff;
}
.agreement-tab-pane { display: none; }
.agreement-tab-pane.is-active { display: block; }

/* 安全渲染输出（与 markdown.py 输出对齐） */
.agreement-rendered {
  font-size: 13px; line-height: 1.75; color: var(--text); word-wrap: break-word;
}
.agreement-rendered h1, .agreement-rendered h2, .agreement-rendered h3,
.agreement-rendered h4, .agreement-rendered h5, .agreement-rendered h6 {
  color: var(--text-em); margin: var(--space-4) 0 var(--space-2); line-height: 1.3;
}
.agreement-rendered h1 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: var(--space-1); }
.agreement-rendered h2 { font-size: var(--fs-md); }
.agreement-rendered h3 { font-size: var(--fs-base); }
.agreement-rendered p { margin: var(--space-2) 0; }
.agreement-rendered ul, .agreement-rendered ol { padding-left: 22px; margin: var(--space-2) 0; }
.agreement-rendered li { margin: var(--space-1) 0; }
.agreement-rendered a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
  word-break: break-all;
}
.agreement-rendered a[data-blocked="1"] {
  color: var(--text-dim); text-decoration: line-through; cursor: not-allowed;
}
.agreement-rendered code {
  background: var(--surface-2); padding: 1px 6px; border-radius: 3px;
  font-family: Consolas, Menlo, monospace; font-size: var(--fs-sm);
}
.agreement-rendered pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 10px var(--space-3); overflow-x: auto; font-size: var(--fs-sm); line-height: 1.55;
}
.agreement-rendered pre code { background: transparent; padding: 0; }
.agreement-rendered blockquote {
  margin: 10px 0; padding: var(--space-1) 14px;
  border-left: 3px solid var(--border-2); color: var(--text-mute);
}
.agreement-rendered hr {
  border: none; border-top: 1px solid var(--border); margin: 14px 0;
}
.agreement-rendered .agreement-fallback {
  color: var(--danger);
  background: rgba(241, 76, 76, .08);
  border-color: rgba(241, 76, 76, .35);
}

.agreement-raw {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 10px var(--space-3); max-height: 280px; overflow: auto;
  font-family: Consolas, Menlo, monospace; font-size: var(--fs-sm); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}

/* <1024 双栏降级 */
@media (max-width: 1023px) {
  .agreement-editor-grid { grid-template-columns: 1fr; }
  .agreement-editor-pane textarea { min-height: 240px; }
}

/* ══════════════════════════════════════════════════════════════════════
   16. 仪表盘 · 关注事件列表
   ══════════════════════════════════════════════════════════════════════ */
.focus-events { display: flex; flex-direction: column; gap: var(--space-2); }
.focus-event {
  display: grid; gap: 6px var(--space-3); padding: 10px var(--space-3);
  grid-template-columns: 140px 1fr auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  align-items: center;
}
.focus-event .when { color: var(--text-mute); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.focus-event .what { color: var(--text); font-size: 13px; }
.focus-event .where { color: var(--text-dim); font-size: var(--fs-xs); grid-column: 2; }
.focus-event .ops { display: flex; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════════
   17. 响应式
   ══════════════════════════════════════════════════════════════════════ */

/* 768~1023 */
@media (max-width: 1023px) {
  main { padding: var(--space-4); }
  .toolbar > * { flex: 1 1 200px; }
}

/* <768 */
@media (max-width: 767px) {
  main { padding: var(--space-3); }
  h1 { font-size: 18px; margin-bottom: var(--space-3); }
  .topbar { height: auto; min-height: 48px; padding: 10px var(--space-3); }
  .topbar .brand { font-size: var(--fs-base); }
  .topbar .brand img { width: 20px; height: 20px; }
  .topbar nav a { margin-right: var(--space-3); font-size: 13px; }

  .cards-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .stat .value { font-size: 22px; }

  .table-wrap { overflow-x: visible; }
  .table-wrap table { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tbody { display: block; }
  .table-wrap tr {
    display: grid; gap: var(--space-1) 10px;
    grid-template-columns: 96px 1fr;
    margin-bottom: 10px; padding: var(--space-3);
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .table-wrap tr.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
  .table-wrap td {
    display: block; border: none; padding: 2px 0;
  }
  .table-wrap td:not(.col-check)::before {
    content: attr(data-label) ":"; color: var(--text-mute);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
    display: block; margin-bottom: 2px;
  }
  .table-wrap td.col-check {
    grid-column: 1 / -1; padding: 0 0 6px;
    border-bottom: 1px dashed var(--border); margin-bottom: 6px;
  }
  .table-wrap td.col-check::before { content: "选择 ›"; color: var(--text-mute); font-size: var(--fs-xs); margin-right: var(--space-2); }
  .table-wrap td.col-actions { grid-column: 1 / -1; }
  .table-wrap td.col-actions::before { display: none; }
  .actions { gap: var(--space-1); }
  .actions .btn { flex: 1 1 auto; padding: 6px var(--space-2); font-size: var(--fs-sm); min-width: 0; }

  .modal-root { padding: 0; align-items: stretch; }
  .modal-card { max-width: none; max-height: 100vh; border-radius: 0; }
  .modal-close { top: var(--space-1); right: 6px; }
  .kv { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .kv dt { color: var(--text-mute); font-size: var(--fs-xs); margin-top: 6px; }

  .toolbar { gap: var(--space-2); }
  .toolbar > * { flex: 1 1 100%; min-width: 0; }
  .toolbar .toolbar-actions { flex: 1 1 100%; justify-content: flex-end; }
  .batch-toolbar { padding: var(--space-2) 10px; }

  #flash-host { top: 0; right: 0; left: 0; padding: var(--space-2); max-width: none; }

  .focus-event { grid-template-columns: 1fr; }
  .focus-event .where { grid-column: 1; }
  .focus-event .ops { justify-content: flex-end; }
}

/* <480 */
@media (max-width: 479px) {
  .topbar { gap: 6px; }
  .topbar nav { width: 100%; order: 3; padding-top: var(--space-1); border-top: 1px solid var(--border); }
  .topbar nav a { margin-right: 14px; }
  .toolbar .toolbar-actions { flex-direction: column; align-items: stretch; }
  .toolbar .toolbar-actions .btn { width: 100%; }
  .batch-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-2);
                    position: static; top: auto; }
  .batch-toolbar .spacer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   18. 邀请码
   ══════════════════════════════════════════════════════════════════════ */
.invite-code-cell {
  font-family: ui-monospace, Menlo, "SF Mono", Consolas, monospace;
  font-size: 15px; font-weight: 600;
  color: var(--text-em); letter-spacing: 0.5px;
  background: var(--surface-2); padding: 2px var(--space-2);
  border-radius: 4px; border: 1px solid var(--border);
}
.invite-code-strong {
  font-family: ui-monospace, Menlo, "SF Mono", Consolas, monospace;
  font-size: 18px; font-weight: 700;
  color: var(--text-em); letter-spacing: 1px;
  background: rgba(78, 201, 176, .18); padding: 3px var(--space-3);
  border-radius: 6px; margin: 0 6px;
}
.hidden { display: none !important; }