/* ============================================================================
   AI 邮箱工作台 · 设计系统
   方向：浅色、纸感、克制、高信息密度。
   配色：暖米白「纸」+ 深墨棕「字」+ 单一青铜强调色（#8a6a3c）。
        底色刻意不用纯白 —— 纯白是屏幕色，刺眼且廉价；暖白像书页，久看不累。
        层级靠「纸的明度差」（--bg-inset 最深 → --bg-active 最亮），不靠阴影和渐变。
   圆角上限 6px；动效 110–180ms；全站无外部字体与图标依赖。
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* 表面：从「凹陷」到「浮起」共 7 级，明度递亮 */
  --bg:            #f4f1ea;   /* 纸 */
  --bg-panel:      #fbf9f5;   /* 面板：比纸再亮一点 */
  --bg-raised:     #fdfcf9;   /* 浮起：卡片 */
  --bg-hover:      #ebe6db;   /* 悬停：比纸略深，压下去 */
  --bg-active:     #e2dbcb;   /* 选中：最深的一档 */
  --bg-input:      #fdfcfa;
  --bg-inset:      #ece7dc;   /* 凹陷：侧栏、引用块 */

  /* 描边：墨色的低透明度，不抢戏 */
  --border:        #ded6c6;
  --border-soft:   #e9e3d6;
  --border-strong: #c9bda6;
  --border-focus:  #b8a17a;

  /* 文字：深墨棕，四级递淡 */
  --text:          #2b2724;
  --text-dim:      #5d564e;
  --text-faint:    #8a8177;
  --text-ghost:    #b0a89c;
  --text-inverse:  #fbf9f5;

  /* 强调：青铜（书卷气，比蓝更沉、比紫更稳） */
  --accent:        #8a6a3c;
  --accent-hi:     #a5824c;
  --accent-dim:    #6b5230;
  --accent-soft:   rgba(138, 106, 60, .10);
  --accent-line:   rgba(138, 106, 60, .28);

  /* 语义：与强调色拉开色相，避免「警告块里的按钮」糊在一起 */
  --danger:        #a8443b;
  --danger-soft:   rgba(168, 68, 59, .09);
  --success:       #3f7550;
  --success-soft:  rgba(63, 117, 80, .09);
  --warn:          #a9770f;   /* 比青铜更黄更亮，可区分 */
  --warn-soft:     rgba(169, 119, 15, .10);
  --info:          #3d6a8c;
  --info-soft:     rgba(61, 106, 140, .09);

  /* 优先级色条：0 无 / 1 低 / 2 中 / 3 高 / 4 紧急（色相递进，扫一眼就能分辨） */
  --p1: #b5ada0;
  --p2: #3d6a8c;
  --p3: #8a6a3c;
  --p4: #a8443b;

  /* 头像灰调（低饱和的土色系，与纸感一致） */
  --av-a: #c8bda8;
  --av-b: #c3b3b5;
  --av-c: #aebdb2;
  --av-d: #c9bda2;
  --av-e: #b6b8bf;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* 圆角（克制） */
  --r-1: 3px;
  --r-2: 4px;
  --r-3: 6px;
  --r-full: 999px;

  /* 字号 */
  --f-2xs: 10px;
  --f-xs:  11px;
  --f-sm:  12px;
  --f-md:  13px;
  --f-lg:  15px;
  --f-xl:  17px;
  --f-2xl: 21px;

  /* 布局 */
  --top-h:  46px;
  --rail-w: 246px;
  --list-w: 366px;

  /* 动效 */
  --t-fast: 110ms ease;
  --t:      160ms ease;
  --t-slow: 240ms cubic-bezier(.22, .61, .36, 1);

  /* 阴影：浅色界面靠纸的层次分层，阴影只做极轻的「纸浮起来」暗示 */
  --shadow-1: 0 1px 2px rgba(43, 39, 36, .06);
  --shadow-2: 0 8px 26px rgba(43, 39, 36, .10);

  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  /* 衬线：仅用于标题与数字，给界面一点「纸与墨」的书卷气。
     全部使用系统自带字体（Songti/SimSun 在 Windows、Songti SC 在 macOS、Noto Serif CJK 在 Linux），
     不引外部字体，保持离线可用与零外部请求。 */
  --serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: var(--f-md)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
[hidden] { display: none !important; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-line);
  border-radius: var(--r-2);
}

/* 细滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

.ico { flex: none; display: block; }

/* ---------------------------------------------------------------- 骨架 */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr);
  grid-template-rows: var(--top-h) minmax(0, 1fr);
  grid-template-areas:
    "top  top  top"
    "rail list main";
  height: 100vh;
  height: 100dvh;
}
.shell.rail-closed { --rail-w: 0px; }
.shell.page-mode {
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-areas:
    "top  top"
    "rail main";
}

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) 0 var(--sp-2);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  min-width: 0;
  z-index: 30;
}

/* 由 div 改为 button（兼作「返回收件箱」入口），需清掉浏览器默认按钮样式 */
.brand {
  all: unset;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 3px var(--sp-4) 3px 3px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--t-fast);
  min-width: 0;
  flex: none;
}
.brand:hover { background: var(--bg-hover); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brand-mark {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  color: var(--accent);
  background: var(--bg-raised);
}
.brand-name {
  font-family: var(--serif);
  font-size: var(--f-lg);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  white-space: nowrap;
}
.brand-name span { color: var(--text-faint); font-weight: 400; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex: none;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn:active { background: var(--bg-active); }
.icon-btn.active { color: var(--accent); border-color: var(--border-strong); background: var(--bg-raised); }

.topbar-spacer { flex: 1 1 auto; min-width: var(--sp-3); }

/* 顶栏的「添加邮箱」入口：带文字标签，比只放一个图标好找得多 */
.topbar-add { flex: none; white-space: nowrap; }
.topbar-add .ico { flex: none; }
@media (max-width: 720px) {
  /* 窄屏空间紧张：收起文字，只保留 + 图标（title 里仍有完整说明） */
  .topbar-add span { display: none; }
  .topbar-add { padding: 0 6px; }
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 380px;
  max-width: 560px;
}
.search-box .ico {
  position: absolute;
  left: 9px;
  color: var(--text-faint);
  pointer-events: none;
}
.search-box input {
  width: 100%;
  height: 28px;
  padding: 0 56px 0 30px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--f-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-box input::placeholder { color: var(--text-ghost); }
.search-box input:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--bg-raised);
  box-shadow: none;
}
.search-box .kbd {
  position: absolute;
  right: 8px;
  pointer-events: none;
}

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-bottom-color: var(--border-strong);
  border-radius: var(--r-1);
  font-family: var(--mono);
  font-size: var(--f-2xs);
  color: var(--text-faint);
  line-height: 1;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-raised);
  font-size: var(--f-xs);
  color: var(--text-dim);
  white-space: nowrap;
}
.status-pill .led {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--text-ghost);
  flex: none;
}
.status-pill.ok .led { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.status-pill.warn .led { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); }
.status-pill.err .led { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); }
.status-pill.busy .led { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .28; }
}

/* ---------------------------------------------------------------- 侧栏 */
.rail {
  grid-area: rail;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4) 0 var(--sp-6);
  min-width: 0;
}
.shell.rail-closed .rail { display: none; }

.rail-section { padding: 0 var(--sp-3) var(--sp-5); }
.rail-section + .rail-section { border-top: 1px solid var(--border-soft); padding-top: var(--sp-4); }

.rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) var(--sp-2);
  font-size: var(--f-2xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-ghost);
}
.rail-title button {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: var(--r-1);
  color: var(--text-faint);
}
.rail-title button:hover { background: var(--bg-hover); color: var(--accent); }

/* 带文字的「+ 添加」：覆盖 .rail-title button 的固定 18x18 方形（那是给裸图标用的） */
.rail-title .rail-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: auto;
  height: 18px;
  padding: 0 5px;
  font-size: var(--f-2xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}
.rail-title .rail-add:hover { background: var(--accent-soft); color: var(--accent); }
.rail-title .rail-add .ico { flex: none; }

.rail-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 6px var(--sp-2);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--f-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  min-width: 0;
}
.rail-item:hover { background: var(--bg-hover); color: var(--text); }
.rail-item.active {
  background: var(--bg-active);
  color: var(--text);
  border-color: var(--border);
}
.rail-item.active .ico { color: var(--accent); }
.rail-item .label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-item .count {
  flex: none;
  font-size: var(--f-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rail-item.unread .label { color: var(--text); font-weight: 600; }
.rail-item.unread .count { color: var(--accent); font-weight: 600; }

.rail-item.sub { padding-left: var(--sp-5); }
.rail-item .folder-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
  margin-left: 2px;
}

.rail-acct {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: background var(--t-fast);
}
.rail-acct:hover { background: var(--bg-hover); }
.rail-acct.active { background: var(--bg-active); border-color: var(--border); }
.rail-acct .meta { flex: 1 1 auto; min-width: 0; }
.rail-acct .name {
  font-size: var(--f-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-acct .addr {
  font-size: var(--f-xs);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-acct .acct-status {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  flex: none;
  background: var(--success);
}
.rail-acct .acct-status.paused { background: var(--text-ghost); }
.rail-acct .acct-status.error { background: var(--danger); }

.rail-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 5px var(--sp-2);
  border-radius: var(--r-2);
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--f-sm);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.rail-tag:hover { background: var(--bg-hover); color: var(--text); }
.rail-tag.active { background: var(--bg-active); color: var(--text); }
.rail-tag .swatch {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex: none;
  background: var(--text-ghost);
}
.rail-tag .label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-tag .count { font-size: var(--f-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

.rail-foot {
  padding: var(--sp-4) var(--sp-3) 0;
  border-top: 1px solid var(--border-soft);
  margin-top: var(--sp-3);
}
.rail-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-2);
  color: var(--text-dim);
  font-size: var(--f-sm);
  min-width: 0;
}
.rail-user .who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- 列表栏 */
.list-pane {
  grid-area: list;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--border);
  min-width: 0;
  min-height: 0;
}

.list-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-2) 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.list-title {
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.list-sub {
  font-size: var(--f-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.list-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}

.msg-row {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px var(--sp-4) 9px var(--sp-4);
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
  min-width: 0;
}
.msg-row:hover { background: var(--bg-hover); }
.msg-row.selected { background: var(--bg-active); }
.msg-row.selected::before,
.msg-row:hover::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.msg-row.selected::before { opacity: 1; }

/* 优先级色条：整行最左 3px */
.msg-row[data-p="1"]::after,
.msg-row[data-p="2"]::after,
.msg-row[data-p="3"]::after,
.msg-row[data-p="4"]::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.msg-row[data-p="1"]::after { background: var(--p1); }
.msg-row[data-p="2"]::after { background: var(--p2); }
.msg-row[data-p="3"]::after { background: var(--p3); }
.msg-row[data-p="4"]::after { background: var(--p4); }

.msg-top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}
.msg-from {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--f-sm);
  color: var(--text-dim);
}
.msg-time {
  flex: none;
  font-size: var(--f-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.msg-subject {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 2px;
  font-size: var(--f-md);
  color: var(--text-dim);
  min-width: 0;
}
.msg-subject .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.msg-snippet {
  margin-top: 2px;
  font-size: var(--f-sm);
  color: var(--text-ghost);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.45;
}
.msg-marks {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 5px;
  min-width: 0;
}
.msg-marks:empty { display: none; }

.msg-row.unread .msg-from { color: var(--text); font-weight: 600; }
.msg-row.unread .msg-subject { color: var(--text); font-weight: 600; }
.msg-row.unread .msg-time { color: var(--text-dim); }
.msg-row.unread .msg-snippet { color: var(--text-faint); }

.dot-unread {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
}
.dot-unread.placeholder { background: transparent; }

.icon-mini {
  color: var(--text-faint);
  flex: none;
}
.icon-mini.accent { color: var(--accent); }
.icon-mini.warn { color: var(--warn); }
.icon-mini.danger { color: var(--danger); }

.list-head-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---------------------------------------------------------------- 阅读栏 */
.reading-pane {
  grid-area: main;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  min-width: 0;
  min-height: 0;
  position: relative;
}

.reader-head {
  flex: none;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.reader-subject {
  font-size: var(--f-xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--text);
  word-break: break-word;
}
.reader-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  min-width: 0;
}
.reader-who { flex: 1 1 auto; min-width: 0; }
.reader-who .name { font-size: var(--f-md); color: var(--text); }
.reader-who .addr { font-size: var(--f-sm); color: var(--text-faint); }
.reader-when {
  font-size: var(--f-sm);
  color: var(--text-faint);
  white-space: nowrap;
  flex: none;
  text-align: right;
}
.reader-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

.reader-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.reader-body {
  padding: var(--sp-5) var(--sp-6) var(--sp-7);
  font-size: var(--f-md);
  line-height: 1.72;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.reader-body p { margin: 0 0 .85em; }
.reader-body pre {
  margin: 0 0 1em;
  padding: var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--f-sm);
  line-height: 1.6;
}
.reader-body blockquote {
  margin: 0 0 1em;
  padding: 2px 0 2px var(--sp-4);
  border-left: 2px solid var(--border-strong);
  color: var(--text-dim);
}
.reader-body table { border-collapse: collapse; margin: 0 0 1em; max-width: 100%; }
.reader-body th, .reader-body td { border: 1px solid var(--border); padding: 6px 10px; font-size: var(--f-sm); }
.reader-body th { background: var(--bg-raised); text-align: left; }
.reader-body hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.reader-body .mw-blocked-img {
  display: inline-block;
  max-width: 100%;
  min-height: 20px;
  background: var(--bg-raised);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-2);
}

.attach-list {
  margin: 0 var(--sp-6) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-raised);
}
.attach-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--f-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-ghost);
  font-weight: 600;
}
.attach-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}
.attach-item:last-child { border-bottom: none; }
.attach-item:hover { background: var(--bg-hover); }
.attach-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-inset);
  color: var(--text-dim);
  flex: none;
  font-size: var(--f-2xs);
  font-weight: 700;
  letter-spacing: .02em;
}
.attach-meta { flex: 1 1 auto; min-width: 0; }
.attach-name {
  font-size: var(--f-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-sub { font-size: var(--f-xs); color: var(--text-faint); }

/* ---------------------------------------------------------------- AI 面板 */
.ai-panel {
  flex: none;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
.ai-panel.collapsed .ai-body { display: none; }

.ai-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-3) 0 var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.ai-head .ai-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex: 1 1 auto;
}
.ai-head .ai-label .ico { color: var(--accent); }

.ai-tabs {
  display: flex;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto;
  flex: none;
}
.ai-tab {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--text-faint);
  font-size: var(--f-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.ai-tab:hover { background: var(--bg-hover); color: var(--text-dim); }
.ai-tab.active { background: var(--bg-active); color: var(--text); border-color: var(--border); }

.ai-body {
  max-height: 42vh;
  overflow-y: auto;
  padding: var(--sp-4);
}
.ai-block { margin-bottom: var(--sp-4); }
.ai-block:last-child { margin-bottom: 0; }
.ai-block-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--f-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-ghost);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.ai-text {
  font-size: var(--f-md);
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-text.muted { color: var(--text-faint); }
.ai-list { display: flex; flex-direction: column; gap: 4px; }
.ai-list li {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--f-sm);
  color: var(--text-dim);
  line-height: 1.6;
}
.ai-list li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  margin-top: 8px;
  border-radius: var(--r-full);
  background: var(--text-ghost);
}

.ai-draft {
  width: 100%;
  min-height: 130px;
  padding: var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--f-md);
  line-height: 1.7;
  resize: vertical;
  font-family: inherit;
}
.ai-draft:focus { outline: none; border-color: var(--border-focus); }

.ai-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.ai-controls .grow { flex: 1 1 auto; }

/* ---------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: var(--f-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex: none;
}
.btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
.btn:active { background: var(--bg-active); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--text-inverse); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: transparent; }
.btn-danger { color: var(--danger); border-color: rgba(168, 68, 59, .34); background: transparent; }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-sm { height: 24px; padding: 0 8px; font-size: var(--f-xs); }
.btn-lg { height: 34px; padding: 0 16px; font-size: var(--f-md); }
.btn.loading { color: transparent; position: relative; pointer-events: none; }
.btn.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px; height: 13px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  color: var(--text);
  animation: spin .7s linear infinite;
}
.btn-primary.loading::after { color: var(--text-inverse); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- 表单 */
.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }

.label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--f-sm);
  color: var(--text-dim);
  font-weight: 500;
}
.label .req { color: var(--danger); margin-left: 3px; }
.hint {
  margin-top: 5px;
  font-size: var(--f-xs);
  color: var(--text-faint);
  line-height: 1.55;
}
.hint.err { color: var(--danger); }
.hint.ok { color: var(--success); }

.input, .select, .textarea {
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--f-md);
  transition: border-color var(--t-fast), background var(--t-fast);
  font-family: inherit;
}
.input::placeholder, .textarea::placeholder { color: var(--text-ghost); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--bg-raised);
  box-shadow: none;
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: .5; cursor: not-allowed; }
.textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 13px) 13px, calc(100% - 9px) 13px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.mono { font-family: var(--mono); font-size: var(--f-sm); }

.row {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.row > * { flex: 1 1 0; min-width: 0; }
.row.tight { gap: var(--sp-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  position: relative;
  width: 30px; height: 17px;
  border-radius: var(--r-full);
  background: var(--bg-active);
  border: 1px solid var(--border-strong);
  transition: background var(--t-fast), border-color var(--t-fast);
  flex: none;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  border-radius: var(--r-full);
  background: var(--text-faint);
  transition: transform var(--t-fast), background var(--t-fast);
}
.switch input:checked + .track { background: var(--accent-soft); border-color: var(--accent-line); }
.switch input:checked + .track::after { transform: translateX(13px); background: var(--accent); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }
.switch .switch-label { font-size: var(--f-md); color: var(--text-dim); }
.switch input:checked ~ .switch-label { color: var(--text); }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--f-md);
  color: var(--text-dim);
  user-select: none;
}
.checkbox input { position: absolute; opacity: 0; }
.checkbox .box {
  width: 15px; height: 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  background: var(--bg-input);
  display: grid;
  place-items: center;
  flex: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.checkbox input:checked + .box { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked + .box::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 1.6px solid var(--text-inverse);
  border-bottom: 1.6px solid var(--text-inverse);
  transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox input:focus-visible + .box { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------------------------------------------------------------- 页面容器 */
.page-pane {
  grid-area: main;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  min-width: 0;
  min-height: 0;
  /* 页面内容宽度统一由这里控制；头部与滚动区共用，保证标题与正文左右严格对齐。
     默认 900px（阅读舒适宽度），.page-pane.wide 放宽到 1180px。 */
  --page-pad: var(--sp-6);
  --page-content: 900px;
}
.page-pane.wide { --page-content: 1180px; }
.shell:not(.page-mode) .page-pane { display: none; }
.shell.page-mode .list-pane,
.shell.page-mode .reading-pane { display: none; }

.page-head {
  flex: none;
  padding: var(--sp-6) var(--page-pad) var(--sp-4);
  border-bottom: 1px solid var(--border);
  /* width:100% 让分隔线通栏；内部内容单独限宽居中（见下） */
  width: 100%;
}
/* 头部内容与滚动区内容套同一个限宽框并居中对齐 */
.page-head > * {
  max-width: var(--page-content);
  margin-inline: auto;
}
.page-title {
  font-family: var(--serif);
  font-size: var(--f-2xl);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
}
.page-desc {
  margin-top: 5px;
  font-size: var(--f-md);
  color: var(--text-faint);
  max-width: 78ch;
  line-height: 1.6;
}
.page-actions { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); flex-wrap: wrap; }

.page-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: var(--sp-6) var(--page-pad);
  width: 100%;
}
/* 居中：此前 max-width 没有 margin-inline:auto，内容一律贴左，宽屏上右侧空一大片 */
.page-body { max-width: var(--page-content); margin-inline: auto; }
.page-body.narrow { max-width: 640px; }

.section { margin-bottom: var(--sp-7); }
.section:last-child { margin-bottom: 0; }
.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--serif);
  font-size: var(--f-lg);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
}
.section-title .sub {
  font-size: var(--f-sm);
  font-weight: 400;
  color: var(--text-faint);
  margin-left: auto;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--bg-raised);
  overflow: hidden;
}
.card + .card { margin-top: var(--sp-4); }
.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.card-head .titles { flex: 1 1 auto; min-width: 0; }
.card-title { font-family: var(--serif); font-size: var(--f-lg); font-weight: 600; letter-spacing: .02em; color: var(--text); }
.card-sub { font-size: var(--f-sm); color: var(--text-faint); margin-top: 1px; }
.card-actions { display: flex; gap: var(--sp-2); align-items: center; flex: none; }
.card-body { padding: var(--sp-5); }
.card-body + .card-body { border-top: 1px solid var(--border-soft); }
.card-foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- 表格 */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-raised);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); }
.table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-ghost);
  white-space: nowrap;
}
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--bg-hover); }
.table td.strong { color: var(--text); font-weight: 500; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions { display: flex; gap: var(--sp-1); justify-content: flex-end; }

.empty-cell {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--f-sm);
}

/* ---------------------------------------------------------------- 徽标 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 7px;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: var(--f-xs);
  color: var(--text-dim);
  white-space: nowrap;
  line-height: 1;
}
.badge .led {
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: currentColor;
  flex: none;
}
.badge-ok { color: var(--success); border-color: rgba(63, 117, 80, .30); background: var(--success-soft); }
.badge-warn { color: var(--warn); border-color: rgba(169, 119, 15, .32); background: var(--warn-soft); }
.badge-err { color: var(--danger); border-color: rgba(168, 68, 59, .30); background: var(--danger-soft); }
.badge-info { color: var(--info); border-color: rgba(61, 106, 140, .30); background: var(--info-soft); }
.badge-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.badge-muted { color: var(--text-faint); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  font-size: var(--f-2xs);
  color: var(--text-dim);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: .02em;
}
.chip .swatch {
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--text-ghost);
  flex: none;
}
.chip-ai { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip-user { color: var(--text-dim); }
.chip button {
  all: unset;
  cursor: pointer;
  color: var(--text-ghost);
  display: grid;
  place-items: center;
}
.chip button:hover { color: var(--danger); }

.prio-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--f-2xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.prio-pill .bar {
  width: 3px; height: 11px;
  border-radius: 1px;
  background: var(--text-ghost);
}

/* ---------------------------------------------------------------- 提示条 */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: var(--r-2);
  background: var(--bg-raised);
  font-size: var(--f-sm);
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}
.banner:last-child { margin-bottom: 0; }
.banner .ico { margin-top: 2px; flex: none; }
.banner .body { flex: 1 1 auto; min-width: 0; }
.banner .body b { color: var(--text); font-weight: 600; }
.banner-info { border-left-color: var(--info); }
.banner-info .ico { color: var(--info); }
.banner-warn { border-left-color: var(--warn); }
.banner-warn .ico { color: var(--warn); }
.banner-err { border-left-color: var(--danger); }
.banner-err .ico { color: var(--danger); }
.banner-ok { border-left-color: var(--success); }
.banner-ok .ico { color: var(--success); }
.banner code, .banner .mono-code {
  font-family: var(--mono);
  font-size: var(--f-xs);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 1px 5px;
  color: var(--text);
}

/* ---------------------------------------------------------------- 探测轨迹 */
.probe-list {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--bg-inset);
  overflow: hidden;
}
.probe-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: var(--f-sm);
  min-width: 0;
}
.probe-row:last-child { border-bottom: none; }
.probe-method {
  flex: none;
  width: 34px;
  color: var(--text-ghost);
  font-size: var(--f-xs);
  letter-spacing: .04em;
}
.probe-url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}
.probe-status {
  flex: none;
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.probe-ms {
  flex: none;
  width: 54px;
  text-align: right;
  color: var(--text-ghost);
  font-variant-numeric: tabular-nums;
}
.probe-count {
  flex: none;
  width: 62px;
  text-align: right;
  color: var(--text-faint);
}
.probe-row.ok .probe-status { color: var(--success); }
.probe-row.fail .probe-status { color: var(--danger); }
.probe-row.fail { background: rgba(168, 68, 59, .05); }

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-2);
}
.model-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-panel);
  font-size: var(--f-sm);
  cursor: pointer;
  min-width: 0;
  text-align: left;
}
.model-item:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.model-item.active { border-color: var(--accent-line); background: var(--accent-soft); }
.model-item .name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--f-sm);
  color: var(--text);
}
.model-item .tag { font-size: var(--f-2xs); color: var(--text-ghost); flex: none; }

/* ---------------------------------------------------------------- 统计块 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}
.stat {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-raised);
}
.stat .k {
  font-size: var(--f-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-ghost);
}
.stat .v {
  margin-top: 5px;
  font-family: var(--serif);
  font-size: calc(var(--f-xl) + 3px);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.stat .s { font-size: var(--f-xs); color: var(--text-faint); margin-top: 2px; }

.kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--f-sm);
  align-items: baseline;
}
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; color: var(--text-dim); word-break: break-all; }
.kv dd.strong { color: var(--text); }

/* ---------------------------------------------------------------- 骨架屏 */
.skeleton-wrap { padding: var(--sp-4); }
.skel-row {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.skel {
  height: 8px;
  border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--bg-raised) 0%, var(--bg-hover) 50%, var(--bg-raised) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.skel-dot { width: 10px; height: 10px; border-radius: var(--r-full); flex: none; }
.skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-3); }

@keyframes shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* ---------------------------------------------------------------- 空状态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  min-height: 260px;
  height: 100%;
}
.empty-art { color: var(--border-strong); }
.empty-title { font-family: var(--serif); font-size: var(--f-xl); color: var(--text-dim); font-weight: 600; letter-spacing: .02em; }
.empty-hint { font-size: var(--f-md); color: var(--text-faint); max-width: 46ch; line-height: 1.65; }
.empty .btn { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------- Toast */
.toast-host {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-end;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-left-width: 2px;
  border-radius: var(--r-2);
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
  font-size: var(--f-sm);
  color: var(--text-dim);
  cursor: pointer;
  max-width: 100%;
  animation: toast-in 180ms cubic-bezier(.22, .61, .36, 1);
}
.toast.leaving { animation: toast-out 170ms ease forwards; }
.toast-msg { flex: 1 1 auto; min-width: 0; word-break: break-word; line-height: 1.5; }
.toast-action {
  all: unset;
  cursor: pointer;
  color: var(--accent);
  font-size: var(--f-sm);
  font-weight: 600;
  flex: none;
}
.toast-success { border-left-color: var(--success); }
.toast-success .ico { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error .ico { color: var(--danger); }
.toast-warn { border-left-color: var(--warn); }
.toast-warn .ico { color: var(--warn); }
.toast-info { border-left-color: var(--info); }
.toast-info .ico { color: var(--info); }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- 浮层 */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(43, 39, 36, .28);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  animation: fade-in 120ms ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  width: min(440px, 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  background: var(--bg-panel);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.dialog-title {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--f-md);
  font-weight: 600;
  color: var(--text);
}
.dialog-body { padding: var(--sp-5); font-size: var(--f-md); color: var(--text-dim); line-height: 1.65; }
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}

.modal {
  width: min(680px, 100%);
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  background: var(--bg-panel);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.modal-head .titles { flex: 1 1 auto; min-width: 0; }
.modal-title { font-size: var(--f-lg); font-weight: 600; }
.modal-sub { font-size: var(--f-sm); color: var(--text-faint); margin-top: 1px; }
.modal-body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  flex: none;
}

/* ---------------------------------------------------------------- 登录页 */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: var(--bg);
}
.auth-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-7) 48px;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
}
/* 极细网格纹理，替代渐变装饰 */
.auth-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 90% 70% at 22% 18%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 22% 18%, #000 0%, transparent 72%);
  pointer-events: none;
}
.auth-left > * { position: relative; }
.auth-brand { display: flex; align-items: center; gap: var(--sp-4); }
.auth-brand .brand-mark { width: 30px; height: 30px; }
.auth-headline {
  font-size: 30px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  max-width: 17ch;
}
.auth-headline em { font-style: normal; color: var(--accent); }
.auth-points { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); max-width: 42ch; }
.auth-point {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--f-md);
  color: var(--text-dim);
  line-height: 1.6;
}
.auth-point .ico { color: var(--accent); margin-top: 2px; flex: none; }
.auth-point b { color: var(--text); font-weight: 600; }
.auth-meta {
  display: flex;
  gap: var(--sp-5);
  font-size: var(--f-xs);
  color: var(--text-ghost);
  flex-wrap: wrap;
}
.auth-right {
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.auth-box { width: 100%; max-width: 348px; }
.auth-title { font-size: var(--f-2xl); font-weight: 600; letter-spacing: -.01em; }
.auth-desc { margin-top: 5px; font-size: var(--f-md); color: var(--text-faint); line-height: 1.6; }
.auth-form { margin-top: var(--sp-6); }
.auth-form .btn { width: 100%; height: 34px; }
.auth-foot { margin-top: var(--sp-5); font-size: var(--f-xs); color: var(--text-ghost); line-height: 1.7; }

/* ---------------------------------------------------------------- 问答页 */
.ask-thread {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
}
.ask-turn { display: flex; flex-direction: column; gap: var(--sp-3); }
.ask-q {
  align-self: flex-end;
  max-width: 76%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  background: var(--bg-raised);
  font-size: var(--f-md);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.ask-a {
  max-width: 100%;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-line);
}
.ask-a .ai-text { font-size: var(--f-md); }
.ask-cites { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-raised);
  font-size: var(--f-xs);
  color: var(--text-dim);
  cursor: pointer;
  max-width: 320px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.cite:hover { border-color: var(--accent-line); color: var(--text); }
.cite .idx {
  font-family: var(--mono);
  color: var(--accent);
  flex: none;
}
.cite .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ask-compose {
  flex: none;
  border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-panel);
}
.ask-compose .inner { display: flex; gap: var(--sp-3); align-items: flex-end; max-width: 900px; }
.ask-compose textarea {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: 160px;
  resize: none;
  padding: 9px var(--sp-4);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  color: var(--text);
  font-size: var(--f-md);
  line-height: 1.6;
  font-family: inherit;
}
.ask-compose textarea:focus { outline: none; border-color: var(--border-focus); }

.caret::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------------------------------------------------------------- 简报页 */
.brief-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4); }
.brief-section {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--bg-raised);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.brief-section-head {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.brief-items { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.brief-item {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--f-md);
  color: var(--text-dim);
  line-height: 1.65;
}
.brief-item::before {
  content: "";
  flex: none;
  width: 3px; height: 3px;
  margin-top: 9px;
  border-radius: var(--r-full);
  background: var(--accent-dim);
}

/* ---------------------------------------------------------------- 组合/写信 */
.compose-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.compose-body .to-row { display: flex; align-items: center; gap: var(--sp-3); }
.compose-body .to-row .label { margin: 0; flex: none; width: 46px; }
.compose-text {
  min-height: 220px;
  padding: var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--f-md);
  line-height: 1.72;
  resize: vertical;
  font-family: inherit;
}
.compose-text:focus { outline: none; border-color: var(--border-focus); }

/* ---------------------------------------------------------------- 抽屉 */
.drawer {
  position: fixed;
  top: var(--top-h);
  bottom: 0;
  left: 0;
  width: 262px;
  z-index: 60;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--t-slow);
}
.shell.rail-open .drawer { transform: none; }
.drawer-scrim {
  position: fixed;
  inset: var(--top-h) 0 0 0;
  z-index: 55;
  background: rgba(43, 39, 36, .24);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.shell.rail-open .drawer-scrim { opacity: 1; pointer-events: auto; }

.shell .drawer, .shell .drawer-scrim { display: none; }

/* ---------------------------------------------------------------- 窄屏 */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "main";
  }
  .rail { display: none; }
  .shell .drawer, .shell .drawer-scrim { display: block; }

  .list-pane, .reading-pane, .page-pane {
    grid-area: main;
    border-right: none;
  }
  .shell[data-mobile-pane="list"] .reading-pane,
  .shell[data-mobile-pane="list"] .page-pane { display: none; }
  .shell[data-mobile-pane="read"] .list-pane { display: none; }

  .shell.page-mode[data-mobile-pane="list"] .page-pane { display: flex; }

  .reader-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .reader-body { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .attach-list { margin: 0 var(--sp-4) var(--sp-4); }
  .page-head { padding: var(--sp-5) var(--sp-4) var(--sp-3); }
  .page-scroll { padding: var(--sp-4); }
  .page-title { font-size: var(--f-xl); }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .row { flex-direction: column; gap: var(--sp-3); }
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-left { display: none; }
  .ai-body { max-height: 46vh; }
  .modal { max-height: 92vh; }
  .toast-host { right: var(--sp-4); left: var(--sp-4); bottom: var(--sp-4); align-items: stretch; }
}

@media (max-width: 560px) {
  .brand-name { display: none; }
  .search-box { flex: 1 1 auto; }
  .reader-subject { font-size: var(--f-lg); }
}

/* ---------------------------------------------------------------- 启动态 */
.boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
}
.boot-mark {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  background: var(--bg-raised);
  color: var(--accent);
}
.boot-title {
  font-family: var(--serif);
  font-size: var(--f-xl);
  font-weight: 600;
  color: var(--text);
  letter-spacing: .04em;
}
.boot-bar {
  width: 180px;
  height: 2px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
}
.boot-bar span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-full);
  animation: boot-slide 1.15s ease-in-out infinite;
}
@keyframes boot-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.boot-hint {
  font-size: var(--f-sm);
  color: var(--text-faint);
  max-width: 46ch;
  line-height: 1.7;
}
.boot-hint.err { color: var(--danger); }
.boot-actions { margin-top: var(--sp-3); display: flex; gap: var(--sp-3); }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}