/* ═══════════════════════════════════════════════════════════════════════════
 * notify-center.css — 监控通知视图（R25 视觉语言对齐：三页新标杆）
 * 容器：.thread.view-notify-center（js/modules/notify-center.js 惰性渲染进 #thread）
 * 范式：对齐已上线行情/交易/策略三页（落地参考 market-board.css）——
 *   页面底 #f4f4f4；卡片 #ffffff 圆角 12px 无重边框（1px #e9e9e9 细描边）；
 *   主字 #212121 / 次字 #757575；数字 tabular-nums；内容区宽版 1100px（旧 860px 废除）；
 *   主题紫 var(--am-brand-600,#7c3aed)：主按钮 / 表单 focus（紫边框+焦点环）/
 *   焦点态 / 选中态，hover 用 var(--am-brand-700,#6d28d9)；
 *   涨跌色全站统一拍板：涨绿 #00834d / 跌红 #c2402f（order 成功徽标绿系取统一绿）。
 * 弃旧 view-card 范式（#f6f7f8 卡底 + 10px 圆角）：模板层已去 view-card 类，
 *   模块自持样式（market-board 模式，规避 states.css 旧范式覆盖）。
 * 惰性 DOM：初始视图不含任何 .nc-* 元素，不影响像素基线。
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --nc-bg: #f4f4f4;       /* 页面底 / 卡中卡底 / hover 底 */
  --nc-card: #ffffff;     /* 区块卡底 */
  --nc-line: #e9e9e9;     /* 分隔线 / 细描边 */
  --nc-fg: #212121;       /* 主字 */
  --nc-muted: #757575;    /* 次字 */
  --nc-radius: 12px;      /* 区块卡圆角 */
  --nc-up: #00834d;       /* 涨 / 成功绿（全站统一拍板） */
  --nc-down: #c2402f;     /* 跌 / 风险红（全站统一拍板） */
}

/* ── 视图容器：宽版内容区（覆盖 .thread 808px 流式；对齐 .view-market-board） ── */
.view-notify-center {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  font-family: var(--am-font-family);
  color: var(--nc-fg);
  font-variant-numeric: tabular-nums;
}

.nc-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 0 48px;
}

/* ═══════════ 区块卡：白底 + 12px 圆角 + 1px #e9e9e9 细描边（无旧重边框） ═══════════ */
.nc-section {
  background: var(--nc-card);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius);
  padding: 16px 18px 18px;
}

/* ── 区块标题：中字重标题 + 灰色副标题小字 + 紫图标（对齐 mb-sec-head 范式） ── */
.nc-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.nc-sec-title-group { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nc-sec-icon {
  width: 16px; height: 16px; flex: none;
  color: var(--am-brand-600, #7c3aed);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.nc-sec-title { margin: 0; font-size: var(--type-section-size); font-weight: 600; color: var(--nc-fg);  line-height: var(--type-section-line); }
.nc-sec-sub {
  font-size: var(--type-caption-size); font-weight: 400; color: var(--nc-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 line-height: var(--type-caption-line); }

/* ═══════════ ① 创建提醒表单 ═══════════ */
.nc-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.nc-field { display: flex; flex-direction: column; gap: 4px; }
.nc-label { font-size: var(--type-caption-size); color: var(--nc-muted);  line-height: var(--type-caption-line); }

/* 表单控件：白底 + #e9e9e9 细描边 + 8px 圆角（32px 紧凑高度） */
.nc-select,
.nc-input {
  height: 32px;
  min-width: 130px;
  padding: 0 10px;
  font-family: var(--am-font-family);
  font-size: var(--type-body-size);
  color: var(--nc-fg);
  background: var(--nc-card);
  border: 1px solid var(--nc-line);
  border-radius: 8px;
  box-sizing: border-box;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
 line-height: var(--type-body-line); }
.nc-input { font-family: var(--am-font-family-code); }
/* 主题紫 focus：紫边框 + 焦点环（选中态同紫） */
.nc-select:focus,
.nc-input:focus {
  border-color: var(--am-brand-600, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.nc-input::placeholder { color: #9e9e9e; }

/* 「保存提醒」主按钮：主题紫（hover/按下 --am-brand-700；禁用灰） */
.nc-save {
  height: 32px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  font-family: var(--am-font-family);
  font-size: var(--type-body-size);
  font-weight: var(--am-font-weight-medium, 500);
  color: #ffffff;
  background: var(--am-brand-600, #7c3aed);
  cursor: pointer;
  transition: background .15s ease;
 line-height: var(--type-body-line); }
.nc-save:hover:not(:disabled),
.nc-save:active:not(:disabled) { background: var(--am-brand-700, #6d28d9); }
.nc-save:focus-visible { outline: 2px solid var(--am-brand-600, #7c3aed); outline-offset: 2px; }
.nc-save:disabled { background: var(--nc-line); color: #9e9e9e; cursor: not-allowed; }

/* ═══════════ ② 通知列表 ═══════════ */
.nc-head-actions { display: flex; gap: 4px; flex: none; }

/* 头部动作按钮：白底细描边次级（hover 浅灰底） */
.nc-btn {
  height: 26px;
  padding: 0 12px;
  font-family: var(--am-font-family);
  font-size: var(--type-caption-size);
  color: var(--nc-muted);
  background: var(--nc-card);
  border: 1px solid var(--nc-line);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
 line-height: var(--type-caption-line); }
.nc-btn:hover:not(:disabled) { background: var(--nc-bg); color: var(--nc-fg); border-color: #d9d9d9; }
.nc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 列表行：36px 系紧凑密度 + #e9e9e9 细分隔（行式，替代旧灰底圆角项） */
.nc-list { display: flex; flex-direction: column; }
.nc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 7px 6px 7px 10px;
  border-left: 2px solid transparent;   /* 占位防抖：未读时切信息蓝条 */
  border-bottom: 1px solid var(--nc-line);
  cursor: pointer;
  transition: background .15s ease;
}
.nc-item:last-child { border-bottom: none; }
.nc-item:hover { background: var(--nc-bg); }
.nc-item:focus-visible { outline: 2px solid var(--am-brand-600, #7c3aed); outline-offset: -2px; }

/* 未读项：左侧 2px 信息蓝条（契约核心标记，语义色不动） + 标题加粗 */
.nc-item.nc-unread { border-left-color: var(--am-info); }
.nc-item.nc-unread .nc-item-title { font-weight: 600; }

/* 类型图标 chip：4 类语义保留（蓝/橙/绿/灰），底色调浅适配白卡 */
.nc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
}
.nc-ico svg { width: 13px; height: 13px; }

.nc-ico-price  { background: rgba(0, 104, 232, .10);   color: #0068e8; }       /* 价格提醒：信息蓝 */
.nc-ico-signal { background: rgba(180, 83, 9, .10);    color: #b45309; }       /* 信号触发：警示橙 */
.nc-ico-order  { background: rgba(0, 131, 77, .10);    color: var(--nc-up); }  /* 订单成交：成功绿（全站统一涨绿） */
.nc-ico-system { background: rgba(117, 117, 117, .12); color: var(--nc-muted); } /* 系统：中性灰 */

/* 主区：标题 + 类型徽标 + 正文（12-13px 紧凑字号） */
.nc-item-main { flex: 1; min-width: 0; }

.nc-item-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--type-body-size);
  font-weight: 400;
  color: var(--nc-fg);
  
 line-height: var(--type-body-line); }

/* 类型徽标：与图标 chip 同族语义色（同浅底适配白卡） */
.nc-type {
  font-size: var(--type-caption-size);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
 line-height: var(--type-caption-line); }
.nc-type-price  { color: #0068e8;      background: rgba(0, 104, 232, .10); }
.nc-type-signal { color: #b45309;      background: rgba(180, 83, 9, .10); }
.nc-type-order  { color: var(--nc-up); background: rgba(0, 131, 77, .10); }
.nc-type-system { color: var(--nc-muted); background: rgba(117, 117, 117, .12); }

.nc-item-body {
  margin-top: 2px;
  font-size: var(--type-caption-size);
  color: var(--nc-muted);
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 line-height: var(--type-caption-line); }

/* 侧区：未读蓝点 + 相对时间 */
.nc-item-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* 未读蓝点（契约核心标记；已读项不渲染该元素）；光环调浅适配白卡 */
.nc-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--am-info);
  box-shadow: 0 0 0 3px rgba(0, 104, 232, .15);
}

.nc-time {
  font-size: var(--type-caption-size);
  color: var(--nc-muted);
  white-space: nowrap;
 line-height: var(--type-caption-line); }

/* 空态 */
.nc-empty {
  padding: 32px 14px;
  text-align: center;
  font-size: var(--type-body-size);
  color: var(--nc-muted);
 line-height: var(--type-body-line); }