/* ============================================================
   探哥策略助手 · Dark Glassmorphism 重设计
   依据 design-qa.md 设计规范：
   - 深海军蓝黑底 (#0a0e17) + 玻璃拟态（4-8% 白 + blur(20px)）
   - Tech Blue 主色，A 股语义：红=涨/卖出区，绿=跌/买入区
   - Inter 界面字 + JetBrains Mono 数据字
   - 圆角：卡片 20px / 按钮·输入 8px / 状态 pill 全圆
   ============================================================ */

:root {
  /* ---- 表面层级（Material3 深色容器系） ---- */
  --bg: #0a0e17;
  --surface: #0f131c;
  --surface-low: #181b25;
  --surface-mid: #1c1f29;
  --surface-high: #262a34;
  --surface-highest: #31353f;

  /* ---- 文字 ---- */
  --ink: #dfe2ef;
  --ink-soft: #c0c7d6;
  --muted: #8a919f;
  --faint: #6a7280;

  /* ---- 描边 ---- */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* ---- 主色（Tech Blue） ---- */
  --primary: #a5c8ff;
  --primary-strong: #2492ff;
  --primary-deep: #1890ff;
  --on-primary: #00315e;
  --primary-soft: rgba(36, 146, 255, 0.14);
  --primary-glow: rgba(24, 144, 255, 0.4);

  /* ---- A 股语义 ---- */
  --red: #ff4d4f;            /* 涨 / 卖出区 / 卖出信号 */
  --red-soft: rgba(255, 77, 79, 0.12);
  --red-line: rgba(255, 77, 79, 0.45);
  --green: #27ae60;          /* 跌 / 买入区 / 买入信号 */
  --green-bright: #61de8a;
  --green-soft: rgba(39, 174, 96, 0.14);
  --green-line: rgba(97, 222, 138, 0.45);
  --amber: #ffb454;
  --amber-soft: rgba(255, 180, 84, 0.12);
  --blue-soft: rgba(165, 200, 255, 0.14);
  --violet: #b69cff;
  --violet-soft: rgba(182, 156, 255, 0.14);

  /* ---- 玻璃 ---- */
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-2: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ---- 圆角 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- 阴影（深色下以辉光替代厚重阴影） ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45);
  --glow-primary: 0 0 15px rgba(24, 144, 255, 0.4);
  --glow-green: 0 0 14px rgba(39, 174, 96, 0.35);
  --glow-red: 0 0 14px rgba(255, 77, 79, 0.3);

  /* ---- 字体 ---- */
  --font-ui: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-data: "JetBrains Mono", "SFMono-Regular", Consolas, "PingFang SC", monospace;

  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* 背景氛围：极淡的蓝色径向辉光，避免死黑 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(36, 146, 255, 0.08), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(39, 174, 96, 0.05), transparent 55%),
    var(--bg);
  pointer-events: none;
}

::selection { background: rgba(36, 146, 255, 0.32); }

/* ============ 顶部栏 ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 78px;
  padding: 14px max(24px, calc((100vw - 1440px) / 2));
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(10, 14, 23, 0.78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; flex: 0 0 auto; margin-right: 6px; }
.brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--primary-deep), var(--primary-strong));
  color: #fff; font-size: 22px;
  box-shadow: var(--glow-primary);
}
.brand strong { display: block; font-size: 20px; line-height: 1.15; letter-spacing: -0.03em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }

.topbar-status { display: flex; align-items: center; gap: 12px; white-space: nowrap; flex: 0 0 auto; }
.refresh-interval-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.refresh-interval-wrap label { white-space: nowrap; }
.refresh-interval-select {
  min-height: 30px; height: 30px; padding: 0 26px 0 9px;
  border-radius: 8px;
  background: var(--glass-bg-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 680; font-family: var(--font-data);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238ea0b8' stroke-width='1.8'><path d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.refresh-interval-select:focus { outline: none; border-color: var(--primary-deep); box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.18); }
.refresh-countdown {
  margin-left: 5px; padding: 0 6px; min-height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: rgba(255,255,255,0.08);
  color: #e7f2ff; font-family: var(--font-data);
  font-size: 11px; font-weight: 780; letter-spacing: 0.01em;
}
.refresh-countdown.zero {
  color: #fff;
  background: linear-gradient(135deg, rgba(24,144,255,0.6), rgba(114,77,255,0.55));
  box-shadow: 0 0 12px rgba(24, 144, 255, 0.55);
}
.refresh-countdown.paused {
  color: #ffb454;
  background: rgba(255, 180, 84, 0.15);
}
.market-pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 12px;
  border: 1px solid rgba(255, 180, 84, 0.35);
  border-radius: 999px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 12px; font-weight: 700;
}
.market-pill.open { color: var(--green-bright); border-color: var(--green-line); background: var(--green-soft); }
.last-refresh { color: var(--muted); font-size: 12px; }
.last-refresh strong { color: var(--ink-soft); font-weight: 650; font-family: var(--font-data); font-size: 12px; }
.auto-refresh-status {
  min-height: 30px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(97, 222, 138, 0.25);
  border-radius: var(--radius-full);
  color: var(--green-bright); background: rgba(39, 174, 96, 0.09);
  font-size: 11px; font-weight: 700;
}
.auto-refresh-status i { font-size: 13px; }
.auto-refresh-status.syncing i { animation: auto-spin 0.9s linear infinite; }
.auto-refresh-status.paused { color: var(--amber); border-color: rgba(255, 180, 84, 0.28); background: var(--amber-soft); }
.auto-refresh-status.error { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
@keyframes auto-spin { to { transform: rotate(360deg); } }

.topbar-actions { position: relative; display: flex; align-items: center; gap: 9px; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.topbar-actions .icon-button { margin-left: auto; }
.topbar-actions .button { white-space: nowrap; }
.topbar-actions .button-secondary#runCheckButton { min-width: 112px; padding: 0 17px; }
.topbar-actions .button-secondary#runCheckButton i { flex: 0 0 auto; }

/* ---- 按钮 ---- */
.button {
  min-height: 40px; padding: 0 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: 0.6; transform: none; }
.button-primary {
  background: linear-gradient(135deg, var(--primary-deep), var(--primary-strong));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(165, 200, 255, 0.25), var(--glow-primary);
}
.button-primary:hover { box-shadow: 0 0 0 1px rgba(165, 200, 255, 0.4), 0 0 22px rgba(24, 144, 255, 0.55); }
.button-secondary {
  border-color: rgba(165, 200, 255, 0.35);
  color: var(--primary);
  background: rgba(36, 146, 255, 0.08);
}
.button-secondary:hover { background: var(--primary-soft); }
.button-ghost {
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--glass-bg);
}
.button-ghost:hover { border-color: var(--line-strong); background: var(--glass-bg-2); }
.button-danger { background: var(--red); color: #fff; }
.button-block { width: 100%; }

.icon-button {
  position: relative; width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-soft); background: var(--glass-bg);
  font-size: 19px;
  transition: background 0.18s, border-color 0.18s;
}
.icon-button:hover { background: var(--glass-bg-2); border-color: var(--line-strong); }
.status-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 2px solid var(--surface); border-radius: 999px; background: var(--muted); }
.status-dot.ready { background: var(--green-bright); box-shadow: 0 0 6px var(--green-bright); }

.user-button {
  height: 44px; padding: 0 11px 0 7px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--glass-bg); color: var(--ink-soft);
  transition: background 0.18s;
}
.user-button:hover { background: var(--glass-bg-2); }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.user-phone { max-width: 112px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 650; }
.user-menu {
  position: absolute; top: 52px; right: 0; width: 170px; padding: 7px;
  border: var(--glass-border); border-radius: 13px;
  background: rgba(24, 27, 37, 0.96);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-md);
}
.user-menu button { width: 100%; min-height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 9px; color: var(--red); background: transparent; text-align: left; }
.user-menu button:hover { background: var(--red-soft); }

/* ============ 页面骨架 ============ */
.page-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 36px; }

/* ============ Hero ============ */
.monitor-hero {
  position: relative;
  min-height: 244px; padding: 32px 36px;
  display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 38px;
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(120deg, rgba(36, 146, 255, 0.14), rgba(10, 14, 23, 0.4) 55%),
    var(--surface-mid);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  overflow: hidden;
}
.monitor-hero::after {
  content: "";
  position: absolute; right: -120px; top: -160px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 146, 255, 0.16), transparent 65%);
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; max-width: 780px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 760; letter-spacing: 0.02em; }
.monitor-hero .eyebrow { color: var(--primary); }
.hero-copy h1 { max-width: 900px; margin: 13px 0 12px; font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.12; letter-spacing: -0.045em; }
.hero-copy p { max-width: 700px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.hero-actions { margin-top: 22px; display: flex; gap: 10px; }
.monitor-hero .button-ghost { border-color: rgba(255, 255, 255, 0.16); color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.monitor-hero .button-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* Hero 监控卡 + 雷达脉冲圆环（参考图同款） */
.hero-monitor-card {
  position: relative; z-index: 1;
  min-height: 132px; padding: 24px;
  display: flex; align-items: center; gap: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  box-shadow: var(--glass-highlight);
}
.monitor-visual { position: relative; width: 76px; height: 76px; flex: 0 0 76px; display: grid; place-items: center; border-radius: 50%; background: rgba(36, 146, 255, 0.1); }
.monitor-visual .pulse-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(36, 146, 255, 0.5);
  animation: pulse-ring 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.monitor-visual .pulse-ring-two { animation-delay: 1.3s; }
@keyframes pulse-ring {
  0% { transform: scale(0.82); opacity: 0.9; }
  70% { opacity: 0.25; }
  100% { transform: scale(1.85); opacity: 0; }
}
.pulse-core {
  position: relative; z-index: 1;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-deep), var(--primary-strong));
  font-size: 27px;
  box-shadow: var(--glow-primary);
}
.hero-monitor-card div:last-child { display: flex; flex-direction: column; gap: 3px; }
.monitor-label { color: var(--muted); font-size: 11px; }
.hero-monitor-card strong { font-size: 25px; }
.hero-monitor-card small { color: var(--ink-soft); }

/* ============ 指标卡 ============ */
.metric-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.metric-card {
  min-height: 126px; padding: 20px;
  display: flex; align-items: center; gap: 15px;
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.metric-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.metric-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 13px; font-size: 21px; }
.metric-icon.teal { color: var(--primary); background: var(--primary-soft); }
.metric-icon.blue { color: var(--primary); background: var(--blue-soft); }
.metric-icon.green { color: var(--green-bright); background: var(--green-soft); }
.metric-icon.amber { color: var(--amber); background: var(--amber-soft); }
.metric-icon.violet { color: var(--violet); background: var(--violet-soft); }
.metric-card small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.metric-card strong { display: block; margin-top: 6px; font-size: 27px; line-height: 1; letter-spacing: -0.035em; font-family: var(--font-data); font-weight: 500; }
.metric-card strong em { margin-left: 4px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 650; font-family: var(--font-ui); }
.metric-card .text-value { max-width: 105px; color: var(--primary); font-size: 19px; line-height: 1.2; font-family: var(--font-ui); font-weight: 700; }
.metric-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }

/* ============ 信号总览 ============ */
.signal-overview {
  margin-top: 14px; min-height: 62px; padding: 12px 17px;
  display: flex; align-items: center; gap: 10px;
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
}
.signal-heading { margin-right: 3px; display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13px; }
.signal-heading i { color: var(--primary); font-size: 18px; }
.signal-chip { min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 700; }
.signal-chip.buy { color: var(--green-bright); border-color: var(--green-line); background: var(--green-soft); }
.signal-chip.sell { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.signal-chip.hold { color: var(--muted); border-color: var(--line); background: var(--glass-bg-2); }
.signal-overview p { margin: 0 0 0 auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.legend-dot { width: 8px; height: 8px; margin-left: 7px; border-radius: 3px; }
.legend-dot.buy { background: var(--green); }
.legend-dot.sell { background: var(--red); }
.legend-line { width: 2px; height: 13px; margin-left: 7px; background: var(--ink); }

/* ============ 面板布局 ============ */
.dashboard-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.panel {
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
}
.holdings-panel, .screening-panel { padding: 24px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-heading.compact { align-items: center; }
.section-kicker { display: block; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.panel-heading h2, .compact-panel h2, .modal h2 { margin: 5px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.035em; }
.panel-heading p, .compact-panel p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ============ 表单 ============ */
.holding-form {
  margin-top: 18px; padding: 18px;
  display: grid; grid-template-columns: 4fr 4fr 4fr 4fr minmax(130px, 1fr); align-items: end; gap: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.03);
}
.field { min-width: 0; }
.field label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.field-link { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--primary); font-size: 10px; font-weight: 600; text-decoration: none; opacity: 0.85; transition: opacity 0.15s; }
.field-link:hover { opacity: 1; text-decoration: underline; }
.field-link i { font-size: 12px; }
.field input, .field select {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.2);
  transition: border 0.18s, box-shadow 0.18s;
  font-family: var(--font-data);
}
.field input:focus, .field select:focus { border-color: var(--primary-deep); box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.18), 0 0 12px rgba(24, 144, 255, 0.15); }
.field input::placeholder { color: var(--faint); }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 38px; }
.input-suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 11px; font-weight: 700; }
.form-actions { display: flex; gap: 8px; }
.form-actions .button { white-space: nowrap; }

/* ============ 持仓卡 ============ */
.holding-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.holding-card {
  position: relative; padding: 20px;
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-2);
  backdrop-filter: blur(24px);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  overflow: hidden;
  transition: border 0.2s, box-shadow 0.2s, transform 0.2s;
}
.holding-card:hover { transform: translateY(-2px); }
.holding-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--surface-highest); }
.holding-card.signal-buy { border-color: var(--green-line); box-shadow: var(--glass-highlight), 0 0 24px rgba(39, 174, 96, 0.14); }
.holding-card.signal-buy::before { background: var(--green); box-shadow: 0 0 12px rgba(39, 174, 96, 0.6); }
.holding-card.signal-sell { border-color: var(--red-line); box-shadow: var(--glass-highlight), 0 0 24px rgba(255, 77, 79, 0.13); }
.holding-card.signal-sell::before { background: var(--red); box-shadow: 0 0 12px rgba(255, 77, 79, 0.55); }
.stock-head { display: flex; justify-content: space-between; gap: 12px; }
.stock-name strong { display: block; font-size: 18px; }
.stock-name small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; font-family: var(--font-data); }
.signal-badge { min-height: 27px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-size: 10px; font-weight: 760; }
.signal-badge.buy { color: var(--green-bright); background: var(--green-soft); }
.signal-badge.sell { color: var(--red); background: var(--red-soft); }
.signal-badge.hold { color: var(--muted); background: var(--glass-bg-2); }
.quote-row { margin-top: 20px; display: flex; align-items: baseline; gap: 9px; }
.quote-price { font-size: 34px; font-weight: 500; letter-spacing: -0.04em; font-family: var(--font-data); }
.quote-change { font-size: 12px; font-weight: 700; font-family: var(--font-data); }
.quote-change.up { color: var(--red); }
.quote-change.down { color: var(--green-bright); }
.quote-change.neutral { color: var(--muted); }
.quote-source { margin-top: 3px; color: var(--faint); font-size: 10px; font-family: var(--font-ui); }
.position-row { margin-top: 15px; padding: 11px 12px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 10px; border-radius: 11px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); }
.position-item small { display: block; color: var(--muted); font-size: 9px; }
.position-item strong { display: block; margin-top: 2px; font-size: 13px; font-family: var(--font-data); font-weight: 500; }
.profit-text { font-size: 12px; font-weight: 760; text-align: right; font-family: var(--font-data); }
.profit-text.up { color: var(--red); }
.profit-text.down { color: var(--green-bright); }

/* ---- 价格区间条（签名组件） ---- */
.range-block { margin-top: 17px; }
.range-track { position: relative; height: 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); overflow: visible; }
.range-segment { position: absolute; top: 0; height: 100%; }
.range-segment.buy { background: linear-gradient(90deg, rgba(39, 174, 96, 0.85), rgba(39, 174, 96, 0.55)); box-shadow: 0 0 10px rgba(39, 174, 96, 0.35); }
.range-segment.sell { background: linear-gradient(90deg, rgba(255, 77, 79, 0.55), rgba(255, 77, 79, 0.85)); box-shadow: 0 0 10px rgba(255, 77, 79, 0.3); }
.stop-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.9; }
.price-marker {
  position: absolute; top: -6px; width: 3px; height: 27px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 22px rgba(165, 200, 255, 0.5);
}
.range-captions { margin-top: 6px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; font-family: var(--font-data); }

.strategy-lines { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--line); }
.strategy-lines p { margin: 5px 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.strategy-lines .buy-text { color: var(--green-bright); font-weight: 720; }
.strategy-lines .sell-text { color: var(--red); font-weight: 720; }
.strategy-lines .stop-text { color: var(--amber); font-weight: 720; }
.stock-actions { margin-top: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stock-actions button { min-height: 34px; padding: 0 11px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; transition: background 0.18s, border-color 0.18s; }
.stock-actions .strategy-type-wrap { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.stock-actions .strategy-type-label { white-space: nowrap; }
.stock-actions .strategy-type-select { min-height: 34px; padding: 0 28px 0 10px; border-radius: var(--radius-sm); background: var(--glass-bg-2); color: var(--ink); font-size: 10px; font-weight: 700; border: 1px solid var(--line-strong); }
.stock-actions .strategy-type-select:focus { outline: none; border-color: var(--primary-deep); box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.18); }
.midlong-quality { color: var(--amber); font-size: 10px; font-weight: 700; margin: 3px 0 0; }
.midlong-quality i { margin-right: 3px; }
.stock-actions .edit { border: 1px solid var(--line); color: var(--ink-soft); background: var(--glass-bg); }
.stock-actions .edit:hover { background: var(--glass-bg-2); }
.stock-actions .delete { border: 1px solid var(--red-line); color: var(--red); background: var(--red-soft); }
.stock-actions .recalculate { border: 1px solid rgba(165, 200, 255, 0.35); color: var(--primary); background: var(--primary-soft); }

/* 更丰富的持仓卡行情与资金流 */
.stock-head { align-items: flex-start; }
.sector-tag {
  margin-left: auto;
  margin-right: 10px;
  min-height: 23px; padding: 0 9px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(165, 200, 255, 0.25);
  font-size: 10px; font-weight: 700;
}
.quote-row { flex-wrap: wrap; }
.quote-price.up { color: var(--red); text-shadow: 0 0 18px rgba(255, 77, 79, 0.25); }
.quote-price.down { color: var(--green-bright); text-shadow: 0 0 18px rgba(39, 174, 96, 0.22); }
.quote-meta { margin-left: auto; color: var(--muted); font-size: 11px; font-family: var(--font-data); }
.live-quote-line { margin-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.live-quote-line > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.ohlc-row {
  margin-top: 8px; padding-bottom: 2px;
  display: flex; flex-wrap: wrap; gap: 12px;
  color: var(--muted); font-size: 11px; font-family: var(--font-data);
}
.ohlc-row span { white-space: nowrap; }
.quote-source-row { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--faint); font-size: 10px; }
.source-health { min-height: 20px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-full); font-weight: 700; }
.source-health i { font-size: 6px; }
.source-health.ok { color: var(--green-bright); background: var(--green-soft); }
.source-health.stale { color: var(--amber); background: var(--amber-soft); }
.source-health.off { color: var(--red); background: var(--red-soft); }
.fund-box {
  margin-top: 13px; padding: 11px 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.fund-box.in { background: var(--red-soft); border-color: rgba(255, 77, 79, 0.22); }
.fund-box.out { background: var(--green-soft); border-color: rgba(39, 174, 96, 0.22); }
.fund-label { color: var(--ink-soft); font-size: 11px; line-height: 1.7; font-family: var(--font-ui); }
.fund-detail { color: var(--muted); font-size: 11px; font-family: var(--font-data); }
.fund-value { font-size: 18px; font-weight: 700; font-family: var(--font-data); white-space: nowrap; }
.fund-value.up { color: var(--red); }
.fund-value.down { color: var(--green-bright); }
.fund-sub {
  margin-top: 8px;
  color: var(--muted); font-size: 10px; line-height: 1.65;
}

.strategy-basis { margin-top: 14px; padding: 13px; border: 1px solid rgba(165, 200, 255, 0.18); border-radius: 12px; background: rgba(36, 146, 255, 0.06); }
.strategy-basis-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--primary); font-size: 11px; font-weight: 760; }
.strategy-basis-head span { display: inline-flex; align-items: center; gap: 6px; }
.strategy-basis-head b { padding: 3px 7px; border-radius: 6px; color: var(--ink); background: rgba(255, 255, 255, 0.07); font-family: var(--font-data); font-size: 10px; }
.basis-values { margin-top: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.basis-values span { min-width: 0; padding-right: 8px; border-right: 1px solid var(--line); }
.basis-values span:last-child { border-right: 0; }
.basis-values small { display: block; color: var(--muted); font-size: 9px; }
.basis-values strong { display: block; margin-top: 4px; color: var(--ink); font-family: var(--font-data); font-size: 13px; font-weight: 600; }
.basis-warning { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--line); color: var(--amber); font-size: 9px; line-height: 1.55; }
.basis-warning i { margin-right: 4px; }

.strategy-zone-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zone-tile { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.14); }
.zone-tile small { display: block; color: var(--muted); font-size: 9px; }
.zone-tile strong { display: block; margin-top: 4px; color: var(--ink); font-family: var(--font-data); font-size: 13px; }
.zone-tile span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.zone-tile.buy { border-color: rgba(97, 222, 138, 0.18); background: rgba(39, 174, 96, 0.07); }
.zone-tile.buy strong { color: var(--green-bright); }
.zone-tile.buy.deep { background: rgba(39, 174, 96, 0.035); }
.zone-tile.sell { border-color: rgba(255, 77, 79, 0.2); background: rgba(255, 77, 79, 0.07); }
.zone-tile.sell strong { color: var(--red); }

.current-action { margin-top: 14px; padding: 11px 12px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0, 0, 0, 0.18); }
.current-action > span { color: var(--muted); font-size: 10px; }
.current-action > strong { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 7px; font-size: 10px; white-space: nowrap; }
.current-action > p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.current-action.action-buy > strong { color: var(--green-bright); background: var(--green-soft); }
.current-action.action-sell > strong, .current-action.action-risk > strong { color: var(--red); background: var(--red-soft); }
.current-action.action-hold > strong { color: var(--primary); background: var(--primary-soft); }
.current-action.action-unknown > strong { color: var(--amber); background: var(--amber-soft); }

.empty-state {
  margin-top: 18px; min-height: 330px; padding: 38px;
  display: grid; place-items: center; align-content: center; text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
}
.empty-state > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; color: var(--primary); background: var(--primary-soft); font-size: 26px; }
.empty-state h3 { margin: 15px 0 5px; }
.empty-state p { max-width: 360px; margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ============ 侧边栏 ============ */
.side-stack { display: grid; gap: 14px; }
.compact-panel { padding: 20px; }
.live-badge { min-height: 27px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: var(--green-bright); background: var(--green-soft); font-size: 9px; font-weight: 760; }
.live-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 6px var(--green-bright); animation: live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.automation-timeline { margin: 19px 0 16px; padding: 0; list-style: none; }
.automation-timeline li { position: relative; min-height: 58px; display: flex; gap: 12px; }
.automation-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 31px; bottom: 2px; width: 1px; background: var(--line); }
.automation-timeline li > span { position: relative; z-index: 1; width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-mid); }
.automation-timeline li.done > span { color: var(--green-bright); border-color: var(--green-line); background: var(--green-soft); }
.automation-timeline li.active > span { color: var(--primary); border-color: rgba(165, 200, 255, 0.4); background: var(--primary-soft); }
.automation-timeline strong, .automation-timeline small { display: block; }
.automation-timeline strong { color: var(--ink-soft); font-size: 12px; }
.automation-timeline small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* 微信卡（参考图同款绿色高光） */
.push-card { position: relative; overflow: hidden; }
.push-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(39, 174, 96, 0.16), transparent 55%);
  pointer-events: none;
}
.push-card-icon { position: relative; width: 44px; height: 44px; margin-bottom: 15px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #18a659, #27ae60); font-size: 24px; box-shadow: var(--glow-green); }
.push-card > div, .push-card > button { position: relative; }
.push-card-status { margin: 15px 0; padding: 11px; display: flex; justify-content: space-between; gap: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.24); border: 1px solid var(--line); }
.push-card-status span { color: var(--amber); font-size: 11px; font-weight: 760; }
.push-card-status span.ready { color: var(--green-bright); }
.push-card-status small { color: var(--muted); font-size: 9px; }

.risk-card { display: flex; flex-direction: column; gap: 7px; border-color: rgba(255, 180, 84, 0.3); background: var(--amber-soft); }
.risk-title { display: flex; align-items: center; gap: 7px; color: var(--amber); font-size: 12px; }
.risk-card p { margin: 0; color: rgba(255, 210, 150, 0.75); font-size: 10px; line-height: 1.6; }
.risk-banner { margin-top: 18px; padding: 14px 20px; align-items: center; text-align: center; }
.risk-banner .risk-title { justify-content: center; }
.risk-banner p { max-width: 780px; }

/* ============ 条件选股 ============ */
.screening-panel { margin-top: 18px; }
.data-date { min-height: 31px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; color: var(--muted); background: var(--glass-bg-2); border: 1px solid var(--line); font-size: 10px; font-family: var(--font-data); }
.screening-form { margin-top: 18px; padding: 14px; display: flex; align-items: flex-end; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.small-field { width: 145px; flex: 0 0 145px; }
.filter-check { position: relative; cursor: pointer; }
.filter-check input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filter-check span {
  min-height: 42px; padding: 0 12px;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.2);
  font-size: 10px; font-weight: 700;
  transition: 0.18s;
  pointer-events: none;
}
.filter-check input:checked + span { color: var(--primary); border-color: rgba(165, 200, 255, 0.5); background: var(--primary-soft); box-shadow: 0 0 10px rgba(24, 144, 255, 0.15); }
.recommendation-result-summary { margin-top: 16px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(165, 200, 255, 0.25); border-radius: 12px; color: var(--ink-soft); background: var(--primary-soft); font-size: 10px; }
.recommendation-result-summary > div { display: flex; align-items: center; gap: 7px; }
.recommendation-result-summary i, .recommendation-result-summary strong { color: var(--primary); }
.recommendation-summary-badges { flex-wrap: wrap; justify-content: flex-end; }
.recommendation-summary-badges span { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 9px; font-weight: 750; }
.recommendation-summary-badges .strict { color: var(--green-bright); background: var(--green-soft); }
.recommendation-summary-badges .near { color: var(--amber); background: var(--amber-soft); }

/* ---- 推荐卡 ---- */
.recommendation-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.recommendation-card {
  padding: 20px;
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-2);
  backdrop-filter: blur(24px);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.recommendation-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.recommendation-head { display: flex; justify-content: space-between; gap: 12px; }
.recommendation-name strong { display: block; font-size: 18px; }
.recommendation-name small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.score-badge { min-width: 62px; height: 47px; padding: 5px 8px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); border: 1px solid rgba(165, 200, 255, 0.3); text-align: center; }
.score-badge b { display: block; font-size: 17px; line-height: 1; font-family: var(--font-data); font-weight: 600; }
.score-badge small { display: block; margin-top: 2px; font-size: 8px; }
.score-badge.near { color: var(--amber); background: var(--amber-soft); border-color: rgba(255, 180, 84, 0.3); }
.tag-row { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { min-height: 23px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--ink-soft); background: var(--glass-bg-2); border: 1px solid var(--line); font-size: 9px; font-weight: 700; }
.recommendation-thesis { margin: 14px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.reason-list { margin: 13px 0 0; padding: 12px; border-radius: 11px; background: var(--green-soft); border: 1px solid rgba(39, 174, 96, 0.22); }
.reason-list strong { color: var(--green-bright); font-size: 10px; }
.reason-list ul { margin: 7px 0 0; padding-left: 15px; color: rgba(160, 220, 185, 0.85); font-size: 9px; line-height: 1.65; }
.missing-list { margin-top: 9px; padding: 10px 12px; border: 1px solid rgba(255, 180, 84, 0.28); border-radius: 10px; background: var(--amber-soft); }
.missing-list strong { color: var(--amber); font-size: 9px; }
.missing-list > div { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.missing-list span { min-height: 21px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--amber); background: rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 180, 84, 0.2); font-size: 8px; }
.risk-line { margin-top: 10px; display: flex; gap: 7px; color: var(--amber); font-size: 9px; line-height: 1.5; }
.risk-line i { margin-top: 1px; color: var(--amber); }
.recommendation-price-row { margin-top: 14px; padding-top: 13px; display: flex; gap: 20px; border-top: 1px dashed var(--line); }
.recommendation-price-row div { min-width: 80px; }
.recommendation-price-row small { display: block; color: var(--muted); font-size: 8px; }
.recommendation-price-row strong { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 12px; font-family: var(--font-data); font-weight: 500; }
.recommendation-actions { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ============ 条件选股推荐（多市场智能算法） ============ */
.screen-conditions { margin-top: 14px; }
.cond-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cond-label { color: var(--muted); font-size: 12px; margin-right: 2px; }
.chip {
  min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; user-select: none;
  color: var(--ink-soft); font-size: 11px; font-weight: 600;
  background: var(--glass-bg-2); border: 1px solid var(--line);
  transition: all 0.18s ease;
}
.chip:hover { border-color: var(--primary); }
.chip.on { color: #fff; background: linear-gradient(135deg, var(--primary-strong), var(--violet)); border-color: transparent; box-shadow: 0 4px 16px rgba(36, 146, 255, 0.25); }
.cond-note { margin-top: 13px; color: var(--faint); font-size: 10px; line-height: 1.7; }

.summary {
  margin-top: 16px; padding: 14px 18px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--ink-soft); font-size: 13px;
}
.summary .n { color: var(--primary); font-weight: 800; }
.tag-stat { margin-left: auto; display: flex; gap: 16px; font-size: 11px; }
.tag-stat .ok { color: var(--green-bright); }
.tag-stat .near { color: var(--amber); }

.screen-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.screen-card {
  padding: 20px; border: var(--glass-border); border-radius: var(--radius-lg);
  background: var(--glass-bg-2); backdrop-filter: blur(24px);
  box-shadow: var(--glass-highlight), var(--shadow-sm); transition: border-color 0.2s ease;
}
.screen-card:hover { border-color: var(--line-strong); }
.screen-card.full { border-color: rgba(39, 174, 96, 0.5); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stock-name { font-size: 18px; font-weight: 700; }
.stock-code { margin-top: 4px; color: var(--muted); font-size: 10px; font-family: var(--font-data); }
.stock-code .up { color: var(--red); }
.stock-code .down { color: var(--green-bright); }
.card-head .score-badge { min-width: 54px; height: 46px; padding: 5px 8px; display: grid; place-items: center; border-radius: 11px; text-align: center; }
.sc-hi { color: var(--green-bright); background: var(--green-soft); border: 1px solid rgba(39, 174, 96, 0.4); }
.sc-mid { color: var(--amber); background: var(--amber-soft); border: 1px solid rgba(255, 180, 84, 0.4); }
.sc-lo { color: var(--muted); background: var(--glass-bg-2); border: 1px solid var(--line); }
.tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags .tag { min-height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--ink-soft); background: var(--glass-bg-2); border: 1px solid var(--line); font-size: 9px; font-weight: 700; }
.desc { margin-top: 12px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.box { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 11px; line-height: 1.9; }
.box-title { margin-bottom: 5px; font-size: 10px; font-weight: 700; }
.box-met { background: var(--green-soft); border: 1px solid rgba(39, 174, 96, 0.22); }
.box-met .box-title { color: var(--green-bright); }
.box-met li { color: rgba(160, 220, 185, 0.92); list-style: none; }
.box-miss { background: var(--amber-soft); border: 1px solid rgba(255, 180, 84, 0.22); }
.box-miss .box-title { color: var(--amber); }
.box-miss li { color: rgba(255, 210, 150, 0.92); list-style: none; }
.box ul { padding-left: 0; margin: 0; }
.box li::before { content: "· "; }
.warn { margin-top: 12px; padding-left: 4px; color: var(--faint); font-size: 10px; line-height: 1.6; }
.warn::before { content: "ⓘ "; }
.metrics { margin-top: 14px; padding-top: 13px; display: flex; gap: 0; border-top: 1px solid var(--line); }
.metric { flex: 1; }
.metric .k { color: var(--muted); font-size: 9px; }
.metric .v { margin-top: 3px; color: var(--ink-soft); font-size: 12px; font-weight: 600; font-family: var(--font-data); }
.metric .v.up { color: var(--red); }
.metric .v.down { color: var(--green-bright); }
.watch-btn {
  width: 100%; margin-top: 16px; min-height: 38px; border-radius: 9px;
  color: var(--ink-soft); background: var(--glass-bg-2); border: 1px solid var(--line);
  font-size: 12px; cursor: pointer; transition: all 0.18s ease;
}
.watch-btn:hover { border-color: var(--primary); color: #fff; background: var(--primary-soft); }
.watch-btn i { margin-right: 5px; }

.lib-details { margin-top: 22px; }
.lib-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 10px 0; user-select: none; }
.lib-details summary:hover { color: var(--primary); }
.lib-block { margin-bottom: 14px; }
.lib-block h4 { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.lib-block p { color: var(--faint); font-size: 10.5px; line-height: 1.75; }
.lib-block b { color: var(--ink-soft); }

.screen-grid .empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; font-size: 13px; }
.recommendation-actions span { color: var(--muted); font-size: 9px; }
.recommendation-disclaimer { margin: 12px 0 0; color: var(--faint); font-size: 9px; text-align: right; }

/* ============ 观察池 ============ */
.watchlist-block { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.subsection-heading h3 { margin: 0; font-size: 16px; }
.subsection-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.subsection-heading > span { min-height: 27px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 700; }
.watchlist-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.watch-card {
  position: relative; padding: 20px;
  border: var(--glass-border);
  border-left: 4px solid var(--primary-deep);
  border-radius: 16px;
  background: var(--glass-bg-2);
  backdrop-filter: blur(24px);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
}
.watch-card.status-invalid { border-left-color: var(--red); }
.watch-card.status-breakout { border-left-color: var(--primary); }
.watch-card.status-buy { border-left-color: var(--green); }
.watch-head { display: flex; justify-content: space-between; gap: 12px; }
.watch-head strong { display: block; font-size: 17px; }
.watch-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-family: var(--font-data); }
.watch-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.watch-name-row strong { display: inline-flex; align-items: center; }
.watch-sector {
  min-height: 20px; padding: 0 8px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
}
.watch-status { min-height: 27px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.watch-status.buy { color: var(--green-bright); background: var(--green-soft); }
.watch-status.breakout { color: var(--primary); background: var(--blue-soft); }
.watch-status.invalid { color: var(--red); background: var(--red-soft); }
.watch-status.hold { color: var(--muted); background: var(--glass-bg-2); }
.watch-note { margin: 12px 0 0; min-height: 34px; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.watch-facts { margin-top: 14px; padding: 13px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.watch-facts small { display: block; color: var(--muted); font-size: 8px; }
.watch-facts strong { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.35; font-family: var(--font-data); font-weight: 500; }
.watch-facts em { margin-left: 3px; font-size: 8px; font-style: normal; }
.watch-facts em.up { color: var(--red); }
.watch-facts em.down { color: var(--green-bright); }
.watch-confirmations { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.watch-confirmations span { min-height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; color: var(--ink-soft); background: var(--glass-bg-2); border: 1px solid var(--line); font-size: 8px; }
.watch-confirmations i { color: var(--primary); font-size: 5px; }
.watch-strategy { margin-top: 12px; padding: 13px 14px; border-radius: 12px; background: var(--green-soft); border: 1px solid rgba(39, 174, 96, 0.22); }
.watch-strategy > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.watch-strategy > div strong { display: inline-flex; align-items: center; gap: 6px; color: var(--green-bright); font-size: 10px; }
.watch-strategy > div span { color: rgba(160, 220, 185, 0.7); font-size: 8px; }
.watch-strategy p { margin: 8px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }
.watch-strategy p b { color: var(--primary); }
.watch-strategy p em { color: var(--amber); font-style: normal; font-weight: 750; }
.watch-risk { margin-top: 10px; display: flex; align-items: flex-start; gap: 7px; color: var(--amber); font-size: 8px; line-height: 1.5; }
.watch-risk i { margin-top: 1px; color: var(--amber); }
.watch-footer { margin-top: 12px; padding-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.watch-footer > span { color: var(--muted); font-size: 8px; }
.watch-delete { padding: 0; border: 0; color: var(--red); background: transparent; font-size: 9px; }
.watch-delete:hover { text-decoration: underline; }
.mini-empty { margin-top: 13px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); background: rgba(255, 255, 255, 0.03); font-size: 10px; text-align: center; }

/* ============ 板块今日资金表现 ============ */
.sector-flow-panel { margin-top: 18px; padding: 24px; }
.sector-flow-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 12px; }
.sector-flow-table th,
.sector-flow-table td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--line); font-family: var(--font-data); }
.sector-flow-table th:first-child,
.sector-flow-table td:first-child { text-align: left; }
.sector-flow-table th { color: var(--muted); font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, 0.18); }
.sector-flow-table td { color: var(--ink-soft); }
.sector-flow-table tr.me td { background: rgba(255, 180, 84, 0.06); }
.sector-flow-table tr.me td:first-child { border-radius: 8px 0 0 8px; }
.sector-flow-table tr.me td:last-child { border-radius: 0 8px 8px 0; }
.sector-flow-table .up { color: var(--red); }
.sector-flow-table .down { color: var(--green-bright); }
.sector-flow-table .neutral { color: var(--muted); }
.sector-badge {
  display: inline-block;
  margin-left: 6px;
  min-height: 18px; padding: 1px 6px;
  border-radius: 4px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  font-size: 9px; font-weight: 700;
}
.sector-leader { display: block; color: var(--muted); font-size: 10px; }

.app-footer { padding: 23px 4px 4px; color: var(--faint); font-size: 9px; text-align: center; }
.app-footer p { margin: 0; }

/* ============ 弹窗 ============ */
.modal-backdrop, .confirm-backdrop { position: fixed; inset: 0; z-index: 100; padding: 22px; display: grid; place-items: center; background: rgba(5, 8, 14, 0.62); backdrop-filter: blur(8px); }
.modal {
  position: relative; width: min(520px, 100%); padding: 30px;
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  background: rgba(24, 27, 37, 0.92);
  backdrop-filter: blur(28px);
  box-shadow: var(--glass-highlight), var(--shadow-md);
}
.modal-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: var(--glass-bg-2); font-size: 20px; }
.modal-close:hover { background: var(--surface-highest); color: var(--ink); }
.modal-icon { width: 50px; height: 50px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #18a659, #27ae60); font-size: 27px; box-shadow: var(--glow-green); }
.modal > p { margin: 10px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.switch-row { margin-top: 16px; padding: 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.03); }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: 12px; }
.switch-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.switch-row input { position: absolute; opacity: 0; }
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 999px; background: var(--surface-highest); transition: 0.2s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: 0.2s; }
.switch-row input:checked + .switch { background: var(--primary-deep); box-shadow: 0 0 10px rgba(24, 144, 255, 0.4); }
.switch-row input:checked + .switch::after { transform: translateX(18px); }
.modal-note { margin-top: 14px; padding: 11px 12px; display: flex; align-items: center; gap: 8px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: 10px; }
.modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 9px; }
.confirm-card {
  width: min(390px, 100%); padding: 28px;
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(24, 27, 37, 0.94);
  backdrop-filter: blur(28px);
  box-shadow: var(--glass-highlight), var(--shadow-md);
  text-align: center;
}
.confirm-card > span { width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; border-radius: 15px; color: var(--red); background: var(--red-soft); font-size: 24px; }
.confirm-card h2 { margin: 14px 0 5px; font-size: 20px; }
.confirm-card p { margin: 0; color: var(--muted); font-size: 11px; }
.confirm-card > div { margin-top: 20px; display: flex; justify-content: center; gap: 9px; }

/* ============ Toast ============ */
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 150; display: grid; gap: 8px; }
.toast {
  width: min(360px, calc(100vw - 48px)); padding: 13px 14px;
  display: flex; align-items: flex-start; gap: 10px;
  border: var(--glass-border);
  border-radius: 13px;
  background: rgba(24, 27, 37, 0.95);
  backdrop-filter: blur(24px);
  box-shadow: var(--glass-highlight), var(--shadow-md);
  animation: toast-in 0.22s ease both;
}
.toast i { color: var(--primary); font-size: 19px; }
.toast.error i { color: var(--red); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 11px; }
.toast small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ 浮动滚动按钮 ============ */
.scroll-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: var(--glass-border); border-radius: 14px;
  background: rgba(24, 27, 37, 0.92);
  backdrop-filter: blur(20px);
  box-shadow: var(--glass-highlight), 0 4px 18px rgba(0, 0, 0, 0.4);
  color: var(--ink-soft); font-size: 22px;
  transition: transform 0.22s ease, opacity 0.22s ease, box-shadow 0.18s ease, color 0.18s ease;
  cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
}
.scroll-fab.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-fab:hover { color: var(--primary); box-shadow: var(--glass-highlight), 0 8px 28px rgba(36, 146, 255, 0.3); }
.scroll-fab:active { transform: scale(0.94); }

@media (max-width: 760px) {
  .scroll-fab { right: 16px; bottom: 18px; width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }
}

/* ============ 登录页 ============ */
.auth-page { min-height: 100vh; background: var(--bg); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.08fr) minmax(450px, 0.92fr); }
.auth-story {
  position: relative; padding: 42px clamp(42px, 6vw, 92px);
  display: flex; flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(800px 480px at 20% -10%, rgba(36, 146, 255, 0.14), transparent 60%),
    radial-gradient(600px 400px at 90% 110%, rgba(39, 174, 96, 0.08), transparent 55%),
    var(--surface);
  overflow: hidden;
}
.auth-story::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(600px 500px at 40% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.auth-brand { position: relative; z-index: 1; color: var(--ink); }
.auth-brand .brand-mark { color: #fff; background: linear-gradient(135deg, var(--primary-deep), var(--primary-strong)); box-shadow: var(--glow-primary); }
.auth-brand small { color: var(--muted); }
.story-copy { position: relative; z-index: 1; max-width: 650px; margin: clamp(80px, 20vh, 230px) 0 0; }
.story-copy .eyebrow { color: var(--primary); }
.story-copy h1 { margin: 17px 0 16px; font-size: clamp(39px, 4.4vw, 67px); font-weight: 700; line-height: 1.08; letter-spacing: -0.055em; }
.story-copy > p { max-width: 610px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.story-features { margin: 27px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; list-style: none; }
.story-features li { padding: 14px; display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-bg); backdrop-filter: blur(12px); }
.story-features li > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.story-features strong, .story-features small { display: block; }
.story-features strong { font-size: 11px; }
.story-features small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.story-note { position: relative; z-index: 1; margin: 24px 0 0; color: var(--faint); font-size: 9px; }
.auth-panel { position: relative; padding: 36px; display: grid; place-items: center; background: var(--bg); }
.auth-card {
  width: min(460px, 100%); padding: 37px;
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  box-shadow: var(--glass-highlight), 0 24px 70px rgba(0, 0, 0, 0.5);
}
.auth-heading > span { color: var(--primary); font-size: 11px; font-weight: 800; }
.auth-heading h2 { margin: 7px 0 7px; font-size: 28px; letter-spacing: -0.04em; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.auth-tabs { margin: 25px 0 20px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 11px; background: rgba(0, 0, 0, 0.26); border: 1px solid var(--line); }
.auth-tabs button { min-height: 37px; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: 11px; font-weight: 720; }
.auth-tabs button.active { color: #fff; background: linear-gradient(135deg, var(--primary-deep), var(--primary-strong)); box-shadow: 0 0 12px rgba(24, 144, 255, 0.3); }
.auth-form { display: grid; gap: 15px; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; }
.input-icon input { padding-left: 39px; padding-right: 42px; font-family: var(--font-ui); }
.password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; color: var(--muted); background: transparent; font-size: 17px; }
.password-toggle:hover { color: var(--ink); }
.auth-submit { width: 100%; min-height: 47px; margin-top: 3px; }
.agreement { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.agreement input { margin: 2px 0 0; accent-color: var(--primary-deep); }
.form-message { min-height: 18px; margin-top: 10px; color: var(--red); font-size: 10px; text-align: center; }
.form-message.success { color: var(--green-bright); }
.auth-security { margin-top: 14px; padding-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid var(--line); color: var(--faint); font-size: 8px; }
.auth-security i { color: var(--primary); font-size: 14px; }

/* ============ 响应式 ============ */
@media (max-width: 1260px) {
  .topbar-status { display: none; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card:nth-child(4), .metric-card:nth-child(5) { min-height: 105px; }
  .holding-form { grid-template-columns: repeat(2, 1fr); }
  .form-actions { grid-column: 1 / -1; }
  .screening-form { flex-wrap: wrap; }
  .auth-shell { grid-template-columns: minmax(480px, 1fr) minmax(420px, 0.8fr); }
  .story-features { grid-template-columns: 1fr; max-width: 440px; }
}

@media (max-width: 1020px) {
  .topbar { padding-inline: 20px; }
  .topbar-actions .button-secondary { display: none; }
  .page-shell { width: min(100% - 32px, 960px); }
  .monitor-hero { grid-template-columns: 1fr; }
  .hero-monitor-card { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .risk-card { grid-column: 1 / -1; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-story { min-height: 420px; }
  .story-copy { margin: 70px 0 20px; }
  .story-features { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .story-note { margin-top: auto; }
}

@media (max-width: 760px) {
  .topbar { min-height: 68px; padding: 10px 14px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .brand strong { font-size: 16px; }
  .brand small { display: none; }
  .topbar-actions .button,
  .topbar-actions .button-secondary#runCheckButton,
  .topbar-actions .button span, .user-phone, .user-button > i { display: none; }
  .user-button { width: 42px; padding: 0; justify-content: center; }
  .page-shell { width: calc(100% - 22px); padding-top: 12px; }
  .monitor-hero { min-height: auto; padding: 25px 21px; border-radius: 18px; }
  .hero-copy h1 { font-size: 30px; }
  .hero-copy p { font-size: 12px; }
  .hero-actions { flex-wrap: wrap; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metric-card { min-height: 102px; padding: 15px; gap: 10px; }
  .metric-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 18px; }
  .metric-card strong { font-size: 22px; }
  .metric-card:nth-child(5) { grid-column: 1 / -1; }
  .signal-overview { align-items: flex-start; flex-wrap: wrap; }
  .signal-overview p { width: 100%; margin: 4px 0 0; flex-wrap: wrap; }
  .holdings-panel, .screening-panel { padding: 17px; border-radius: 17px; }
  .panel-heading { align-items: center; }
  .panel-heading h2, .compact-panel h2 { font-size: 19px; }
  .panel-heading p { display: none; }
  .holding-form { grid-template-columns: 1fr; }
  .form-actions { grid-column: auto; }
  .holding-grid, .recommendation-grid, .screen-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: 1fr; }
  .risk-card { grid-column: auto; }
  .screening-form { align-items: stretch; }
  .small-field { width: 100%; flex-basis: 100%; }
  .filter-check { flex: 1 1 calc(50% - 5px); }
  .filter-check span { justify-content: center; }
  .screening-form .button { flex: 1 1 100%; }
  .recommendation-result-summary { align-items: flex-start; flex-direction: column; }
  .recommendation-summary-badges { justify-content: flex-start; }
  .watchlist-grid { grid-template-columns: 1fr; }
  .watch-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-tag { display: none; }
  .quote-meta { width: 100%; margin-left: 0; margin-top: 4px; }
  .live-quote-line { align-items: flex-start; flex-direction: column; gap: 6px; }
  .live-quote-line .quote-meta { width: auto; }
  .quote-source-row { align-items: flex-start; flex-direction: column; }
  .fund-box { flex-direction: column; align-items: flex-start; gap: 6px; }
  .basis-values { grid-template-columns: 1fr; }
  .basis-values span { padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .basis-values span:last-child { padding-bottom: 0; border-bottom: 0; }
  .strategy-zone-grid { grid-template-columns: 1fr; }
  .current-action { grid-template-columns: auto 1fr; }
  .current-action > p { grid-column: 1 / -1; }
  .stock-actions { flex-wrap: wrap; row-gap: 6px; }
  .stock-actions .strategy-type-wrap { width: 100%; margin-right: 0; }
  .stock-actions button { flex: 1 1 0; min-width: 0; justify-content: center; }
  .sector-flow-panel { padding: 17px; }
  .sector-flow-table th, .sector-flow-table td { padding: 9px 8px; font-size: 11px; }
  .sector-flow-table th:nth-child(2), .sector-flow-table td:nth-child(2) { display: none; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .button { width: 100%; }
  .auth-story { min-height: 360px; padding: 28px 24px; }
  .story-copy { margin: 54px 0 20px; }
  .story-copy h1 { font-size: 38px; }
  .story-copy > p { font-size: 12px; }
  .story-features { display: none; }
  .auth-panel { padding: 18px 12px 30px; }
  .auth-card { padding: 25px 21px; border-radius: 19px; }
  .auth-heading h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}