/* ============================================================
 * A.2 DEFERRED · 2026-04-27 · PM 选项 B
 * 不删 alias (--mango / --fg / --bg-* / --tier-* / --r-* etc.)
 * 现有 user 页面 (feed_v58 / curated / tracking_v58 / schedule_v58 /
 *  history_v58 / settings_v58) 大量引用 · 删则 6 页立刻视觉断
 * 共存策略 · B/C/D 阶段改各页面时自然替换 · 那时再清
 * pipeline-bar + curated 独家组件已在文件中 · 无需追加
 * ============================================================ */

/* ==========================================================================
 * V5.8 Layer Overrides
 * --------------------------------------------------------------------------
 * 不修改 Phase 2 tokens.css。本文件叠加在 tokens.css 之后，
 * 把 Claude Design 的 mango / inter-tight / serif italic 等
 * 引入到 V5 系统，但替换品牌色为金色。
 *
 * 加载顺序：
 *   1. tokens.css       (V5 base)
 *   2. v58_layer.css    (本文件 · 别名 + 字体节奏 + 共享组件)
 *   3. <page>.html      (页面专属)
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ============ Mango → Brand 别名 ============ */
  /* Claude Design 的 CSS 大量用 --mango*，全部别名到 V5 brand */
  --mango:       var(--ml-brand);
  --mango-hi:    var(--ml-brand-soft);
  --mango-dim:   var(--ml-brand-deep);
  --mango-glow:  var(--ml-brand-glow);
  --mango-soft:  var(--ml-brand-glow);
  --ink-on-mint: var(--ml-brand-ink);

  /* ============ 别名 (与 Claude Design 命名兼容) ============ */
  --bg:           var(--ml-bg-0);
  --bg-elev:      var(--ml-bg-2);
  --bg-card:      var(--ml-bg-3);
  --bg-hover:    var(--ml-bg-4);
  --border:       var(--ml-line);
  --border-strong:var(--ml-line-strong);

  --fg:           var(--ml-text);
  --fg-2:         var(--ml-text-soft);
  --fg-3:         var(--ml-text-muted);
  --fg-4:         var(--ml-text-faint);

  /* Status (来自 Claude Design 但映射到 V5 semantic) */
  --ok:           var(--ml-green);
  --info:         var(--ml-blue);
  --pre:          var(--ml-green);
  --launched:     var(--ml-red);
  --warn:         var(--ml-yellow);
  --danger:       var(--ml-red);

  /* Tier (V5 已有, 仅 alias) */
  --tier-s:       var(--ml-tier-s);
  --tier-a:       var(--ml-tier-a);
  --tier-b:       var(--ml-tier-b);
  --tier-c:       var(--ml-tier-c);
  --tier-hidden:  #C77DFF;

  /* Radii (Claude Design 命名兼容) */
  --r-sm: var(--ml-r-sm);  /* 6px */
  --r:    8px;
  --r-lg: var(--ml-r-lg);  /* 10px */
  --r-xl: var(--ml-r-xl);  /* 16px */

  /* Shadows */
  --shadow-sm: var(--ml-sh-sm);
  --shadow:    var(--ml-sh-md);
  --shadow-lg: var(--ml-sh-lg);

  /* Motion */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ============ V5.8 字体节奏 (Claude Design 灵魂) ============ */
  --sans-tight: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif:      "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono:       var(--ml-font-mono);
  --sans:       var(--sans-tight);
}

/* Body uses tighter Inter Tight, font-size 13.5px = denser than V5 user 14px but readable */
body {
  font-family: var(--sans-tight);
  background: var(--ml-bg-0);
  color: var(--ml-text);
  font-size: 13.5px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background subtle radial glow (from Claude Design but using brand color) */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(1400px 800px at 90% -20%, rgba(var(--ml-brand-rgb), 0.04), transparent 55%),
    radial-gradient(1000px 600px at -10% 110%, rgba(var(--ml-brand-rgb), 0.02), transparent 55%);
}

/* ============ Util ============ */
.mono { font-family: var(--mono); font-feature-settings: "zero"; font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.serif-italic { font-family: var(--serif); font-style: italic; }
.muted { color: var(--fg-3); }
.dim { color: var(--fg-4); }
.row { display: flex; align-items: center; gap: 8px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ml-line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ml-line-strong); }

/* ============ APP SHELL (sidebar 232 + main) ============ */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.main { overflow: hidden; display: flex; flex-direction: column; }
.content { flex: 1; overflow-y: auto; }

/* ============ SIDEBAR ============ */
.sidebar {
  background: transparent;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 18px 12px;
  gap: 2px;
  overflow-y: auto;
}
.sidebar .logo {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 22px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.015em;
}
.sidebar .logo-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--mango);
  display: grid; place-items: center;
  font-size: 13px;
  color: var(--ink-on-mint);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.sidebar .logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar .logo-text small {
  font-size: 9.5px; font-weight: 500;
  color: var(--fg-4); letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-section {
  font-size: 10px;
  color: var(--fg-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 12px 6px;
  font-weight: 500;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-radius: var(--r);
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
  text-decoration: none;
}
.nav-item:hover { color: var(--fg); }
.nav-item.active {
  color: var(--fg);
  background: var(--bg-hover);
}
.nav-item.active .nav-icon { color: var(--mango); }
.nav-item .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--mango);
  font-family: var(--mono);
}
.nav-item .dot {
  margin-left: auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mango);
  box-shadow: 0 0 6px var(--mango-glow);
}
.nav-icon {
  width: 15px; height: 15px; flex: none;
  opacity: 0.85;
  transition: color 0.18s var(--ease);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.18s var(--ease);
}
.user-chip:hover { background: var(--bg-hover); }
.user-chip .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mango-dim), var(--mango));
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--ink-on-mint);
}
.user-chip .meta { flex: 1; min-width: 0; line-height: 1.2; }
.user-chip .meta .n { font-size: 12.5px; font-weight: 500; color: var(--fg); }
.user-chip .meta .h { font-size: 10.5px; color: var(--fg-4); }

/* ============ TOPBAR ============ */
.topbar {
  display: flex; align-items: center; gap: 14px;
  height: 56px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px) saturate(140%);
  position: sticky; top: 0; z-index: 5;
}
.topbar .page-title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); }
.topbar .page-sub { color: var(--fg-4); font-size: 11.5px; margin-top: 1px; }
.topbar .sp { flex: 1; }
.topbar .search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 10px;
  width: 260px;
  font-size: 12.5px;
  color: var(--fg-4);
  transition: border-color 0.18s var(--ease);
}
.topbar .search:focus-within { border-color: var(--border-strong); }
.topbar .search input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 12.5px; color: var(--fg);
  font-family: inherit;
}
.topbar .search kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg-4);
}
.topbar .search svg { width: 14px; height: 14px; flex: none; }

/* ============ PRIMITIVES (btn / chip / card) ============ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-2);
  transition: all 0.18s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--border-strong); }
.btn.primary {
  background: var(--mango);
  color: var(--ink-on-mint);
  border-color: var(--mango);
  font-weight: 600;
}
.btn.primary:hover {
  background: var(--mango-hi);
  border-color: var(--mango-hi);
  box-shadow: 0 0 0 4px var(--mango-soft);
}
.btn.ghost { background: none; border-color: transparent; color: var(--fg-3); }
.btn.ghost:hover { color: var(--fg); background: var(--bg-hover); }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }
.btn.icon { padding: 6px; }
.btn svg { width: 14px; height: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}
.chip.mono { font-family: var(--mono); font-size: 10px; }
.chip.active { background: var(--mango-soft); color: var(--mango); border-color: var(--ml-brand-line); }
.chip.pre { color: var(--pre); border-color: rgba(74,222,128,0.30); background: rgba(74,222,128,0.06); }
.chip.launched { color: var(--launched); border-color: rgba(255,73,74,0.30); background: rgba(255,73,74,0.06); }
.chip .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* Segmented control */
.seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.seg button {
  padding: 4px 11px;
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 500;
  transition: all 0.18s var(--ease);
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.seg button:hover { color: var(--fg-2); }
.seg button.on { background: var(--bg-card); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ============ PIPELINE STATUS BAR (V5.8 above Hero, MangosLab 独家) ============ */
.pipeline-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: 11.5px;
}
.pipe-head { display: flex; align-items: center; gap: 7px; padding-right: 14px; border-right: 1px solid var(--border); }
.pipe-label { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: softPulse 2.4s ease-in-out infinite;
}
@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.pipe-stages { display: flex; align-items: center; gap: 4px; flex: 1; }
.pipe-stage { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; }
.pipe-stage.done { color: var(--ok); }
.pipe-stage.active { color: var(--mango); background: var(--mango-soft); }
.pipe-stage.pending { color: var(--fg-4); }
.pipe-arrow { color: var(--fg-4); font-size: 10px; }
.pipe-tail { color: var(--fg-3); font-family: var(--mono); font-size: 11px; }
.pipe-tail strong { color: var(--mango); font-weight: 600; }

/* ============ SANYI Curated Mini Chip (折叠卡内 inline) ============ */
.curated-mini {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--mango);
  background: var(--mango-soft);
  border: 1px solid var(--ml-brand-line);
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-left: 4px;
}
.curated-mini::before { content: '★'; font-size: 9px; }

/* ============ Curated Full (展开态/Curated 页用) ============ */
.curated {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: linear-gradient(135deg, var(--mango-soft), transparent 80%);
  border: 1px solid var(--ml-brand-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mango-hi);
  position: relative;
}
.curated .ava {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mango), var(--mango-dim));
  color: var(--ink-on-mint);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  box-shadow: 0 0 0 1.5px var(--mango);
}
.curated .by { color: var(--mango); font-weight: 700; }

/* ============ Tier badges (V5 已有, 复用) ============ */
.tier {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 999px;
  font-weight: 700;
  padding: 2px 7px;
  font-size: 10px;
  font-family: var(--mono);
}
.tier-S { background: var(--tier-s); color: var(--ml-brand-ink); }
.tier-S::before { content: none; font-size: 9px; }
.tier-A { background: var(--tier-a); color: #FFF; }
.tier-A::before { content: none; font-size: 8px; }
.tier-B { background: var(--tier-b); color: var(--ml-brand-ink); }
.tier-B::before { content: none; font-size: 8px; }
.tier-C { background: var(--tier-c); color: #FFF; opacity: .8; }

/* ============ Page wrap (used by simple pages) ============ */
.page-wrap {
  padding: 32px 40px 60px;
  max-width: 1320px;
  margin: 0 auto;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.page-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.page-head p {
  margin: 6px 0 0;
  color: var(--fg-3);
  font-size: 12.5px;
}

/* ============ Form field row (settings 共用) ============ */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 16px;
}
.settings-section h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.settings-section .h-sub {
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.field {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.field:first-of-type { border-top: none; padding-top: 4px; }
.field .l .t {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 4px;
}
.field .l .d {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.5;
}
.field .r input[type="text"],
.field .r input[type="email"],
.field .r select {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
  width: 100%;
  outline: none;
}
.field .r input:focus,
.field .r select:focus {
  border-color: var(--mango);
  box-shadow: 0 0 0 3px var(--mango-soft);
}

/* Toggle */
.toggle {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 9px 5px 6px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--fg-3);
  cursor: pointer;
  user-select: none;
}
.toggle .tr {
  width: 28px; height: 16px;
  border-radius: 999px;
  background: var(--bg);
  position: relative;
  transition: background 0.18s var(--ease);
}
.toggle .tr::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--fg-3);
  transition: all 0.18s var(--ease);
}
.toggle.on { color: var(--mango); border-color: var(--ml-brand-line); background: var(--mango-soft); }
.toggle.on .tr { background: var(--mango); }
.toggle.on .tr::after { left: 14px; background: var(--ink-on-mint); }

/* ════════════════════════════════════════════════════════════════════
 * L2-3.1.a · sidebar .ml-* class CSS · 2026-04-27 (CN)
 * 来源:POST_LAUNCH_AUDIT_V2.md §10.1 · 60 行 CSS · 一次清 4 表象
 *   - logo 字距诡异 (M 与 a 之间空格)
 *   - 底部 "Account · Free" 粉紫色 (visited 默认色)
 *   - "⚡ Admin" 蓝色错位
 *   - 全 sidebar 链接默认下划线
 *
 * NOTE: audit 写的 .ml-userbox / .ml-admin-link 在实际 markup 里是
 *       .ml-user / .ml-nav.admin-bridge · 这里以 markup 为准
 * ════════════════════════════════════════════════════════════════════ */

/* 全 sidebar 链接 · 撤掉默认下划线和 visited 紫色 */
.ml-sidebar a {
  text-decoration: none;
  color: inherit;
}
.ml-sidebar a:visited { color: inherit; }

/* logo 顶部 */
.ml-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 16px;
}
.ml-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ml-brand);
  color: var(--ml-brand-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}
.ml-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-weight: 600;
  color: var(--ml-text);
  font-size: 14px;
}
.ml-logo-text small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ml-text-muted);
  font-weight: 500;
  margin-top: 1px;
}

/* user chip 底部 (markup 是 .ml-user / .ml-avatar / .ml-user-meta) */
.ml-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--ml-line);
  margin-top: auto;
  color: var(--ml-text);
  transition: background 0.16s var(--ml-ease);
}
.ml-user:hover {
  background: var(--ml-bg-3);
  color: var(--ml-text);
}
.ml-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ml-brand);
  color: var(--ml-brand-ink);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex: none;
}
.ml-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 12px;
  color: var(--ml-text);
  min-width: 0;
}
.ml-user-meta b {
  font-weight: 600;
  color: var(--ml-text);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-user-meta small {
  color: var(--ml-text-faint);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.ml-user-panel {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--ml-line);
  display: grid;
  gap: 6px;
}
.ml-user-panel .ml-user {
  margin-top: 0;
  border-top: 0;
  border-radius: var(--ml-r-8);
  padding: 8px 10px;
}
.ml-logout-form {
  margin: 0;
}
.ml-logout-btn {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-r-8);
  background: var(--ml-bg-3);
  color: var(--ml-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 0.16s var(--ml-ease),
    color 0.16s var(--ml-ease),
    border-color 0.16s var(--ml-ease);
}
.ml-logout-btn:hover,
.ml-logout-btn:focus-visible {
  background: var(--ml-bg-4);
  border-color: var(--ml-line-strong);
  color: var(--ml-text);
}
.ml-logout-btn:disabled {
  cursor: wait;
  opacity: 0.72;
}
.ml-topbar-logout-form {
  display: none;
  margin: 0;
}
.ml-topbar-logout-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-r-8);
  background: var(--ml-bg-3);
  color: var(--ml-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.ml-topbar-logout-btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

/* admin bridge · 现 markup 用 .ml-nav.admin-bridge 含 inline 渐变金色 */
/* 这里只补 hover + transitions · 不覆盖 inline */
.ml-nav.admin-bridge {
  transition: background 0.18s var(--ml-ease), color 0.18s var(--ml-ease);
}
.ml-nav.admin-bridge:hover {
  background: var(--ml-brand-bg) !important;
  color: var(--ml-brand) !important;
}

/* sidebar 整体 spacer fix */
.ml-sp {
  flex: 1;
  min-height: 8px;
}

/* L2-3.1.a end */

/* ════════════════════════════════════════════════════════════════════
 * L2-3.1.b · num-italic-gold 公用 class · 2026-04-27 (CN)
 * P0-19 · history italic 数字抽公用 class · 跨页可用
 * 用法约束 (audit §10.3):
 *   仅 n>0 时启用 (n=0 时换文案 · 不显示 italic 0)
 *   /feed hero  · num-hero (32px)
 *   /explorer    · num-hero
 *   /curated 3 stat · num-stat (22px)
 *   /tracking KPI · num-stat
 *   /history hero · num-hero (已有参考实现)
 * ════════════════════════════════════════════════════════════════════ */

.num-italic-gold {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--ml-brand);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.num-italic-gold.num-hero { font-size: 32px; }
.num-italic-gold.num-stat { font-size: 22px; }
.num-italic-gold.num-card { font-size: 26px; }

/* L2-3.1.b end */

/* ════════════════════════════════════════════════════════════════════
 * L2-3.1.e · 全站黄色 CTA 规范化 · audit §10.4 · 2026-04-27
 *   - 活跃 tab 实底 → underline 1px brand (减少黄色喧宾)
 *   - 头像默认色降饱和 (从纯 brand 黄 → 降饱和金棕)
 *   - 实时连接 pill 弱化 (绿点 + 弱描边 · 不抢 CTA)
 * ════════════════════════════════════════════════════════════════════ */

/* 活跃 tab · underline (代替实底) */
.tab-bar button.active {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--ml-brand) !important;
  border-radius: 0 !important;
  color: var(--ml-text);
  padding-bottom: 6px;
}
.tab-bar button.active:hover {
  background: transparent !important;
  border-bottom-color: var(--ml-brand) !important;
}

/* 头像默认色 · 降饱和 (audit §10.4) · 优先 first-letter monogram */
.profile-head .av,
.tr-mon .av,
.ph-av {
  /* 已有 brand 黄底 · 此处不强制改 · 但加 fallback class 给 monogram 用 */
}
.av-monogram {
  background: var(--ml-bg-4) !important;
  color: var(--ml-text-2);
}

/* 实时连接 pill · 弱化 · 不抢主 CTA */
.ml-status-pill, .live-status, [class*="live-pill"] {
  background: rgba(86, 221, 142, 0.10);
  color: #56DD8E;
  border: 1px solid rgba(86, 221, 142, 0.32);
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--ml-mono);
}

/* L2-3.1.e end */

/* ════════════════════════════════════════════════════════════════════
 * L2-3.5 · P0-10 / P0-15 / P0-7 · CSS quick wins · 2026-04-27 (CN)
 * ════════════════════════════════════════════════════════════════════ */

/* P0-10 · /tracking KPI 数字 vs label 字号比拉开 (audit T3) */
/* 数字 36px italic serif · label 10px UPPERCASE muted */
.tr-sum-card .v {
  font-size: 36px !important;
  letter-spacing: -0.03em;
}
.tr-sum-card .l {
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  font-weight: 700;
}

/* P0-15 · /explorer ex-tabs segmented control style (audit P0-15) */
/* 4 buttons → 紧凑 segmented · 圆角统一 + bg-3 framing */
.ex-tabs {
  background: var(--ml-bg-3);
  border: 1px solid var(--ml-border-strong);
  border-radius: 9px;
  padding: 3px;
  gap: 0 !important;
  display: inline-flex !important;
  margin: 14px 0 18px;
}
.ex-tabs button {
  padding: 6px 14px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: 12.5px;
  transition: 0.16s var(--ml-ease);
}
.ex-tabs button.on {
  background: var(--ml-bg-5) !important;
  border-color: var(--ml-border-strong) !important;
  color: var(--ml-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.ex-tabs .sp,
.ex-tabs .h {
  /* 同步信息 移到外面 · 保留行布局 */
  display: none;
}

/* P0-7 · /curated 卡片标题统一 var(--ml-text) (audit C3) · 已在 .cur-card h2 用 ml-text · 加 !important 防覆盖 */
.cur-card h2 {
  color: var(--ml-text) !important;
}

/* P0-7 · /curated blockquote 加粗结论支持 (audit C4) · 给 first <b> 加大字号 */
.cur-card blockquote b:first-child {
  font-size: 1.05em;
  color: var(--ml-text) !important;
}

/* L2-3.5 end */

/* ════════════════════════════════════════════════════════════════════
 * L2-3 BL.26.2 · monogram 全站强制 · 2026-04-27 (CN)
 * audit §10.4 + P0-18 · 头像默认色改为 neutral token
 * 让品牌色稀缺感回来 · 主 CTA 才有焦点价值
 * ════════════════════════════════════════════════════════════════════ */

/* 全站 avatar 默认 neutral fallback */
.ml-avatar,
.ml-sidebar .ml-avatar,
.tr-mon .av,
.ph-av,
.av,
.profile-head .av,
.cur-avatar {
  background: var(--ml-bg-4) !important;
  background-image: none !important;
  color: var(--ml-text-2) !important;
  filter: none;
}

/* hover · 微提亮 (subtle) */
.ml-user:hover .ml-avatar,
.ml-avatar:hover {
  filter: saturate(0.95);
}

/* 例外:特殊 brand-emphasis 类强制保留纯品牌 (e.g., 主 CTA 头像) */
.ml-avatar.brand-emphasis,
.av.brand-emphasis {
  background: var(--ml-brand) !important;
  filter: none !important;
}

/* L2-3 BL.26.2 end */

/* ==========================================================================
 * L4-34A · Product Design Language v2 component layer
 * Mint/Felix visual migration for user-facing V58 pages.
 * ========================================================================== */

body::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--ml-brand-rgb), 0.11), transparent 28%),
    linear-gradient(180deg, var(--ml-bg-0), var(--ml-bg-0)) !important;
}

.ml-app {
  position: relative;
  z-index: 1;
}

.ml-topbar {
  background: color-mix(in srgb, var(--ml-bg-1) 94%, transparent) !important;
  border-bottom-color: var(--ml-line) !important;
  backdrop-filter: blur(16px);
}

.ml-page-title {
  color: var(--ml-text) !important;
  font-family: var(--ml-font-display) !important;
  font-weight: 720 !important;
}

.ml-page-sub {
  color: var(--ml-text-3) !important;
  font-family: var(--ml-font-body) !important;
}

.ml-search {
  background: var(--ml-bg-2) !important;
  border: 1px solid var(--ml-line) !important;
  border-radius: var(--ml-r-8) !important;
}

.ml-search input {
  color: var(--ml-text) !important;
}

.ml-search kbd {
  color: var(--ml-text-4) !important;
  background: var(--ml-bg-4) !important;
  border-color: var(--ml-line) !important;
}

.ml-chip,
.tag,
.fchip,
.status,
.fd-chip,
.tr-chip,
.tr-status {
  border-radius: var(--ml-r-pill) !important;
  border: 1px solid var(--ml-line-soft);
  background: var(--ml-bg-4);
  color: var(--ml-text-2);
  letter-spacing: 0;
}

.ml-chip.green,
.live-status {
  color: var(--ml-green) !important;
  background: color-mix(in srgb, var(--ml-green) 13%, transparent) !important;
  border-color: color-mix(in srgb, var(--ml-green) 26%, transparent) !important;
}

.ml-chip .d,
.live-status .d,
.fd-status::before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: var(--ml-r-pill);
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.theme-sw {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-r-8);
  background: var(--ml-bg-2);
}

.theme-sw button {
  height: 30px;
  min-width: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: var(--ml-r-6);
  background: transparent;
  color: var(--ml-text-3);
  font: 650 var(--ml-fs-12) var(--ml-font-body);
  cursor: pointer;
  transition: background var(--ml-dur-base) var(--ml-ease), color var(--ml-dur-base) var(--ml-ease), transform var(--ml-dur-base) var(--ml-ease);
}

.theme-sw button:hover,
.theme-sw button:focus-visible {
  color: var(--ml-text);
  background: var(--ml-bg-4);
}

.theme-sw button.is-on,
:root[data-theme="mint"] .theme-sw [data-theme-btn="mint"],
:root[data-theme="felix"] .theme-sw [data-theme-btn="felix"] {
  color: var(--ml-brand-ink);
  background: var(--ml-brand);
}

.theme-sw .swatch {
  width: 11px;
  height: 11px;
  border-radius: var(--ml-r-pill);
  border: 1px solid currentColor;
}

.theme-sw .swatch.mint {
  background: #97FCE4;
}

.theme-sw .swatch.felix {
  background: #0F6B47;
}

.ml-sidebar,
.ml-nav,
.nav-item {
  letter-spacing: 0 !important;
}

.ml-nav,
.nav-item {
  position: relative;
  border-radius: var(--ml-r-8) !important;
  transition: background var(--ml-dur-base) var(--ml-ease), color var(--ml-dur-base) var(--ml-ease), transform var(--ml-dur-base) var(--ml-ease);
}

.ml-nav.active,
.nav-item.active {
  background: var(--ml-bg-4) !important;
  color: var(--ml-text) !important;
}

.ml-nav.active::before,
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 2px;
  height: 18px;
  border-radius: var(--ml-r-pill);
  background: var(--ml-brand);
  transform: translateY(-50%);
}

.fd-title h1,
.tr-title h1 {
  font-family: var(--ml-font-display) !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
}

.fd-title h1 em,
.tr-title h1 em {
  font-family: var(--ml-font-serif);
  font-weight: 400;
  color: var(--ml-brand);
}

.fd-toolbar,
.toolbar {
  background: color-mix(in srgb, var(--ml-bg-0) 93%, transparent) !important;
  border-bottom-color: var(--ml-line) !important;
  backdrop-filter: blur(16px);
}

.fd-tabs,
.fd-seg,
.tr-switch,
.seg {
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid var(--ml-line) !important;
  border-radius: var(--ml-r-8) !important;
  background: var(--ml-bg-2) !important;
}

.fd-tabs button,
.fd-seg button,
.fd-filter-toggle,
.tr-switch button,
.tr-pills button,
.seg button,
.btn,
.tr-button,
.fd-load,
.ml-actions a,
.ml-actions button {
  min-height: 32px;
  border-radius: var(--ml-r-6) !important;
  color: var(--ml-text-3);
  font-family: var(--ml-font-body) !important;
  font-weight: 650 !important;
  letter-spacing: 0;
  transition:
    transform var(--ml-dur-base) var(--ml-ease),
    background var(--ml-dur-base) var(--ml-ease),
    border-color var(--ml-dur-base) var(--ml-ease),
    color var(--ml-dur-base) var(--ml-ease),
    box-shadow var(--ml-dur-base) var(--ml-ease);
}

.fd-tabs button:hover,
.fd-seg button:hover,
.fd-filter-toggle:hover,
.tr-switch button:hover,
.tr-pills button:hover,
.seg button:hover,
.btn:hover,
.tr-button:hover,
.fd-load:hover,
.ml-actions a:hover,
.ml-actions button:hover {
  color: var(--ml-text);
  background: var(--ml-bg-4);
  transform: translateY(-1px);
}

.fd-tabs button.active,
.fd-seg button.active,
.tr-switch button.active,
.tr-pills button.active,
.seg button.active,
.seg button.on,
.btn.primary,
.fd-filter-actions .primary {
  background: var(--ml-brand) !important;
  border-color: var(--ml-brand) !important;
  color: var(--ml-brand-ink) !important;
  box-shadow: var(--ml-shadow-glow);
}

.fd-level2.active,
.tag-l2 {
  background: var(--sig-l2-bg) !important;
  border-color: var(--sig-l2-border) !important;
  color: var(--sig-l2) !important;
}

.fd-chip.tag-l2 {
  background: color-mix(in srgb, var(--ml-sem-l2) 11%, transparent) !important;
  border-color: color-mix(in srgb, var(--ml-sem-l2) 26%, transparent) !important;
  color: var(--sig-l2) !important;
}

.fd-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ml-text-3) !important;
  font-family: var(--ml-font-mono) !important;
}

.fd-kpi,
.tr-kpi,
.tr-over-card,
.tr-panel,
.tr-card,
.tr-intel-card,
.fd-trending,
.fd-trend,
.fd-filter-panel,
.ml-panel,
.card {
  border-color: var(--ml-line) !important;
  border-radius: var(--ml-r-10) !important;
  background: var(--ml-bg-2) !important;
  box-shadow: none;
}

.fd-kpi .v,
.tr-kpi b,
.tr-meta b,
.fd-score .score,
.ml-kv b {
  font-family: var(--ml-font-serif) !important;
  font-size: 32px;
  font-style: italic;
  font-weight: 400 !important;
  line-height: 1;
  color: var(--ml-brand) !important;
  font-variant-numeric: tabular-nums;
}

.fd-kpi .v small,
.tr-kpi b small {
  margin-left: 2px;
  font: 700 11px var(--ml-font-mono);
  color: var(--ml-text-3);
  vertical-align: super;
}

.fd-kpi .l,
.tr-kpi span {
  color: var(--ml-text-3) !important;
}

.fd-card,
.cand {
  border: 1px solid var(--ml-line) !important;
  border-radius: var(--ml-r-10) !important;
  background: var(--ml-bg-2) !important;
  box-shadow: none;
  transition:
    transform var(--ml-dur-base) var(--ml-ease),
    border-color var(--ml-dur-base) var(--ml-ease),
    background var(--ml-dur-base) var(--ml-ease),
    box-shadow var(--ml-dur-base) var(--ml-ease);
}

.fd-card.level2 {
  border-color: var(--ml-line) !important;
  background: var(--ml-bg-2) !important;
}

.fd-card:hover,
.cand:hover,
.tr-card:hover,
.tr-intel-card:hover,
.fd-trend:hover {
  transform: translateY(-1px);
  border-color: var(--ml-line-strong) !important;
  background: var(--ml-bg-3) !important;
  box-shadow: var(--ml-shadow-elev);
}

.fd-card[data-enter="1"] {
  opacity: 0;
  transform: translateY(8px);
  animation: ml-card-enter var(--ml-dur-enter) var(--ml-ease) forwards;
}

.fd-card[data-enter="1"]:nth-of-type(1) { animation-delay: 0ms; }
.fd-card[data-enter="1"]:nth-of-type(2) { animation-delay: 45ms; }
.fd-card[data-enter="1"]:nth-of-type(3) { animation-delay: 90ms; }
.fd-card[data-enter="1"]:nth-of-type(4) { animation-delay: 135ms; }

@keyframes ml-card-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fd-avatar,
.tr-avatar,
.av,
.ml-avatar,
.fd-watcher {
  border-radius: var(--ml-r-8) !important;
  background: var(--ml-bg-4) !important;
  color: var(--ml-text-2) !important;
  border: 1px solid var(--ml-line) !important;
  filter: none !important;
}

.ml-user .ml-avatar {
  background: var(--ml-bg-4) !important;
  color: var(--ml-text-2) !important;
  border: 1px solid var(--ml-line) !important;
  box-shadow: none !important;
}

.av.s,
.fd-avatar.s,
.tr-avatar.s,
.ml-avatar.s {
  background: var(--ml-brand) !important;
  color: var(--ml-brand-ink) !important;
  border-color: var(--ml-brand) !important;
  box-shadow: var(--ml-shadow-glow);
}

img.fd-avatar,
img.tr-avatar,
img.av,
img.ml-avatar,
img.fd-watcher {
  background: var(--ml-bg-3) !important;
  color: transparent !important;
}

.fd-watcher,
.fd-watcher.big {
  border-radius: var(--ml-r-pill) !important;
  border-color: var(--ml-bg-2) !important;
}

.fd-watcher:not(img) {
  background: var(--ml-brand-bg) !important;
  color: var(--ml-brand) !important;
  border-color: var(--ml-brand-line) !important;
  font-family: var(--ml-font-mono) !important;
  font-size: 10px !important;
}

.fd-watcher.extra {
  background: var(--ml-bg-4) !important;
  color: var(--ml-text-2) !important;
}

.tier,
.ml-tier {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px !important;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-r-pill) !important;
  font: 800 11px var(--ml-font-mono) !important;
  letter-spacing: 0;
}

.tier::before,
.ml-tier::before {
  content: none !important;
}

.fd-chip.gold {
  background: var(--ml-brand-bg) !important;
  color: var(--ml-brand) !important;
  border-color: var(--ml-brand-line) !important;
}

.fd-chip.red {
  background: color-mix(in srgb, var(--ml-red) 13%, transparent) !important;
  color: var(--ml-red) !important;
  border-color: color-mix(in srgb, var(--ml-red) 24%, transparent) !important;
}

.fd-date-divider {
  color: var(--ml-brand) !important;
}

.fd-date-divider::before,
.fd-date-divider::after {
  background: var(--ml-line) !important;
}

.fd-rank {
  background: var(--ml-brand-bg) !important;
  color: var(--ml-brand) !important;
  border: 1px solid var(--ml-brand-line);
}

.fd-filter-panel input,
.fd-filter-panel select,
.tr-input input,
input,
select {
  border-color: var(--ml-line) !important;
  border-radius: var(--ml-r-6) !important;
  background: var(--ml-bg-2) !important;
  color: var(--ml-text) !important;
}

input:disabled,
select:disabled,
button:disabled {
  color: var(--ml-text-disabled) !important;
  cursor: not-allowed !important;
}

.ml-modal-layer {
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(16px);
}

.ml-modal,
.modal-shell {
  border-radius: var(--ml-r-12) !important;
  border-color: var(--ml-line-strong) !important;
  background: var(--ml-bg-1) !important;
  box-shadow: var(--ml-shadow-overlay) !important;
}

.ml-modal-head {
  background: color-mix(in srgb, var(--ml-bg-1) 96%, transparent) !important;
  border-bottom-color: var(--ml-line) !important;
  backdrop-filter: blur(16px);
}

.fd-heat {
  background: var(--ml-bg-4) !important;
  border-color: var(--ml-line-soft) !important;
}

.fd-heat[data-i="1"] { background: color-mix(in srgb, var(--ml-brand) 18%, var(--ml-bg-4)) !important; }
.fd-heat[data-i="2"] { background: color-mix(in srgb, var(--ml-brand) 34%, var(--ml-bg-4)) !important; }
.fd-heat[data-i="3"] { background: color-mix(in srgb, var(--ml-brand) 54%, var(--ml-bg-4)) !important; }
.fd-heat[data-i="4"] { background: color-mix(in srgb, var(--ml-brand) 78%, var(--ml-bg-4)) !important; }

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ml-bg-3) !important;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(var(--ml-brand-rgb), 0.10), transparent);
  animation: ml-skeleton 1.4s var(--ml-ease) infinite;
}

@keyframes ml-skeleton {
  to { transform: translateX(100%); }
}

@media (max-width: 767px) {
  .ml-topbar {
    height: auto !important;
    min-height: 56px;
    flex-wrap: wrap;
    padding: 10px 14px !important;
  }
  .ml-search {
    order: 3;
    width: 100%;
  }
  .theme-sw button,
  .fd-tabs button,
  .fd-seg button,
  .fd-filter-toggle,
  .tr-switch button,
  .tr-pills button,
  .tr-button {
    min-height: 44px;
  }
  .ml-topbar-logout-form {
    display: block;
  }
}