/* ============================================================
   港策 · 设计系统
   深色金融终端风格：近黑背景 / 低饱和分隔线 / 单一绿色强调色
   ============================================================ */

:root {
  /* 背景与层级 */
  --bg: #08090a;
  --surface: #101315;
  --surface-2: #15191c;
  --surface-3: #1b2023;
  --line: #1f2427;
  --line-2: #2b3236;

  /* 文字 */
  --text: #f3f6f5;
  --text-2: #9aa4a1;
  --text-3: #6b7573;

  /* 语义色 */
  --green: #2fe08c;
  --green-2: #17b978;
  --green-soft: rgba(47, 224, 140, .12);
  --green-line: rgba(47, 224, 140, .28);
  --red: #ff5f6d;
  --red-soft: rgba(255, 95, 109, .12);
  --red-line: rgba(255, 95, 109, .3);
  --amber: #f6b757;
  --amber-soft: rgba(246, 183, 87, .13);
  --amber-line: rgba(246, 183, 87, .3);

  /* 形状 */
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 22px;
  --r-pill: 999px;

  --shadow-card: 0 20px 50px rgba(0, 0, 0, .45);
  --shadow-pop: 0 32px 80px rgba(0, 0, 0, .6);

  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "SF Pro Text", Inter, system-ui,
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -12%, #16211c 0%, rgba(11, 14, 13, 0) 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* 数字统一等宽，避免跳动 */
.num, .asset, .stat-value, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

svg { display: block; flex: 0 0 auto; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================
   通用控件
   ============================================================ */

.primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #3fe89a, #1fc584);
  color: #04120c;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: 0 8px 24px rgba(47, 224, 140, .22);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.primary-btn:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(47, 224, 140, .3); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }

.secondary-btn, .danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 550;
  transition: background .16s ease, border-color .16s ease;
}
.secondary-btn:hover { background: var(--surface-3); border-color: #39413f; }
.danger-btn { margin-right: auto; color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.danger-btn:hover { background: rgba(255, 95, 109, .18); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--text-2);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 550;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.text-btn:hover { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }

.wide { width: 100%; justify-content: center; margin-top: 18px; }

/* 状态标签 */
.signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.signal.risk { border-color: var(--red-line); background: var(--red-soft); color: var(--red); }
.signal.watch { border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber); }

.down { color: var(--red) !important; }

/* ============================================================
   骨架布局
   ============================================================ */

.app-shell { min-height: 100vh; display: flex; }

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: 76px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 0 20px;
  border-right: 1px solid var(--line);
  background: rgba(9, 11, 12, .82);
  backdrop-filter: blur(18px);
}

.brand {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(160deg, #2fe08c, #12a86c);
  color: #04120c;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.06em;
  box-shadow: 0 8px 22px rgba(47, 224, 140, .25);
}

.rail nav { margin: auto 0; display: grid; gap: 8px; }

.rail-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-3);
  transition: background .16s ease, color .16s ease;
}
.rail-btn:hover { background: var(--surface-2); color: var(--text-2); }
.rail-btn.active { background: var(--green-soft); color: var(--green); }

.rail-foot { display: grid; gap: 8px; justify-items: center; }

.workspace { width: 100%; padding-left: 76px; }

.topbar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px 40px 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 12px 0 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(47, 224, 140, .14);
}
.manual-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(246, 183, 87, .14); }

.topbar h1 {
  font-size: 30px;
  font-weight: 640;
  letter-spacing: -.035em;
}

.top-actions { display: flex; align-items: center; gap: 10px; }

.content-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 20px;
  align-items: start;
}
.main-column { min-width: 0; }
.insights { display: grid; gap: 16px; }

/* 卡片基座 */
.portfolio-card,
.section-block,
.attention-card,
.health-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: linear-gradient(168deg, rgba(24, 29, 31, .9), rgba(15, 18, 20, .92));
  box-shadow: var(--shadow-card);
}

/* ============================================================
   组合总览卡
   ============================================================ */

.portfolio-card { padding: 26px 28px 22px; }

.portfolio-head { display: flex; justify-content: space-between; gap: 20px; }

.label { font-size: 12.5px; color: var(--text-3); letter-spacing: .01em; }

.asset {
  margin: 10px 0 10px;
  font-size: 42px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.045em;
}
.asset .cur { font-size: 22px; font-weight: 500; color: var(--text-2); margin-right: 4px; letter-spacing: 0; }
.asset .dec { color: var(--text-2); font-weight: 500; }

.gain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}
.gain.down { background: var(--red-soft); color: var(--red); }

.market-badge { text-align: right; font-size: 12px; color: var(--amber); }
.market-badge .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--amber-line);
  border-radius: var(--r-pill);
  background: var(--amber-soft);
  font-weight: 600;
}
.market-badge small { display: block; margin-top: 9px; color: var(--text-3); font-size: 11.5px; }

.allocation { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.allocation-copy, .allocation-meta { display: flex; justify-content: space-between; align-items: baseline; }
.allocation-copy { font-size: 13px; }
.allocation-copy span { color: var(--text-2); }
.allocation-copy strong { color: var(--green); font-size: 15px; font-weight: 650; }
.allocation-meta { margin-top: 10px; font-size: 12px; color: var(--text-3); }

.bar {
  height: 8px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #17b978, #3fe89a);
  transition: width .4s cubic-bezier(.2, .7, .3, 1);
}

/* 快捷操作：圆形图标 + 标签 */
.quick-actions {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quick-actions button {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: transparent;
  transition: background .16s ease, border-color .16s ease;
}
.quick-actions button:hover { background: var(--surface-2); border-color: var(--line); }
.quick-actions i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--green);
}
.quick-actions span { display: grid; justify-items: center; gap: 3px; text-align: center; }
.quick-actions b { font-size: 13px; font-weight: 600; }
.quick-actions small { font-size: 11.5px; color: var(--text-3); }

/* ============================================================
   持仓列表
   ============================================================ */

.section-block { margin-top: 20px; overflow: hidden; }

.section-title {
  padding: 22px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section-title h2, .card-title h2 { font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.section-title p, .card-title p { margin-top: 5px; font-size: 12px; color: var(--text-3); }

/* 分段筛选器 */
.filters {
  display: flex;
  gap: 6px;
  padding: 0 24px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter-chip {
  height: 32px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.filter-chip:hover { color: var(--text); border-color: var(--line-2); }
.filter-chip.active { background: var(--text); border-color: var(--text); color: #0b0e0d; }

.positions { border-top: 1px solid var(--line); }

.position-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1.4fr) 108px 120px 116px 96px 34px;
  align-items: center;
  gap: 14px;
  padding: 15px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background .16s ease;
}
.position-row:last-child { border-bottom: 0; }
.position-row:hover { background: rgba(255, 255, 255, .028); }

.stock-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
}
.stock-mark.risk { background: var(--red-soft); color: var(--red); }
.stock-mark.watch { background: var(--amber-soft); color: var(--amber); }

.cell { display: grid; gap: 4px; min-width: 0; }
.cell b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.cell span { font-size: 11.5px; color: var(--text-3); }
.cell.right { text-align: right; }
.stock-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl b { color: var(--green); }

.row-menu {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  transition: background .16s ease, color .16s ease;
}
.row-menu:hover { background: var(--surface-3); color: var(--text); }

.list-empty { padding: 34px 24px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ============================================================
   右侧洞察区
   ============================================================ */

.attention-card, .health-card { padding: 20px 22px; }

.card-title { display: flex; align-items: center; gap: 12px; }
.pulse {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber);
}
.count {
  margin-left: auto;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--red-soft);
  color: var(--red);
  font-size: 12px;
  font-weight: 650;
}

.alert-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: opacity .16s ease;
}
.alert-item:first-of-type { margin-top: 14px; }
.alert-item:hover { opacity: .78; }
.alert-item > div { flex: 1; display: grid; grid-template-columns: 12px 1fr; gap: 0 4px; min-width: 0; }
.alert-item b { font-size: 13px; font-weight: 600; }
.alert-item small { grid-column: 2; margin-top: 5px; font-size: 11.5px; line-height: 1.55; color: var(--text-3); }
.alert-item em { color: var(--text-3); }

.risk-dot, .warn-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--red); }
.warn-dot { background: var(--amber); }

.view-plan {
  width: 100%;
  height: 42px;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 550;
  transition: background .16s ease;
}
.view-plan:hover { background: var(--surface-3); }
.view-plan span { color: var(--green); }

.health-head { display: flex; align-items: center; justify-content: space-between; }
.health-head p { font-size: 13px; color: var(--text-2); }
.health-head strong { font-size: 34px; font-weight: 620; letter-spacing: -.04em; }
.health-head .of { font-size: 12px; color: var(--text-3); margin-left: 4px; }

.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0%, var(--line-2) 0);
}
.ring:after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #12161a;
}
.ring b { position: relative; z-index: 1; font-size: 11.5px; font-weight: 600; color: var(--green); }

.health-list { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.health-list p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 12.5px;
}
.health-list p span { color: var(--text-2); display: inline-flex; align-items: center; gap: 9px; }
.health-list i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.health-list i.mid { background: var(--amber); }
.health-list b { font-weight: 600; }

.disclaimer { padding: 0 6px; font-size: 11.5px; line-height: 1.7; color: var(--text-3); }

/* ============================================================
   空状态
   ============================================================ */

.empty-state { max-width: 560px; margin: 12vh auto 0; padding: 40px 24px; text-align: center; }
.empty-state[hidden], #dashboard[hidden] { display: none; }
.empty-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--green-soft);
  color: var(--green);
}
.empty-state h2 { font-size: 22px; font-weight: 620; letter-spacing: -.025em; }
.empty-state p { max-width: 430px; margin: 12px auto 26px; font-size: 14px; line-height: 1.75; color: var(--text-2); }

/* ============================================================
   浮层：抽屉与表单
   ============================================================ */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: rgba(4, 6, 6, .72);
  backdrop-filter: blur(8px);
}

.detail-panel {
  width: min(620px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 26px 30px 40px;
  border-left: 1px solid var(--line-2);
  background: #0c0f11;
  box-shadow: var(--shadow-pop);
}

.detail-head { display: flex; align-items: center; gap: 14px; }
.back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--text-2);
}
.back:hover { color: var(--text); }
.detail-head h2 { font-size: 18px; font-weight: 620; letter-spacing: -.02em; }
.detail-head p { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.detail-price { margin-left: auto; text-align: right; }
.detail-price b { display: block; font-size: 24px; font-weight: 620; letter-spacing: -.03em; }
.detail-price span { font-size: 13px; font-weight: 600; color: var(--green); }

/* 计划区间条 */
.range-card {
  margin: 24px 0 4px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.range-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.range-track {
  position: relative;
  height: 8px;
  margin: 16px 0 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red) 0%, var(--amber) 46%, var(--green) 100%);
  opacity: .95;
}
.range-track i {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #0c0f11;
  transform: translateY(-50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.range-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.range-foot b { color: var(--text-2); font-weight: 600; }

/* 指标网格：两列大卡 */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.stats-grid div {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.stats-grid span { display: block; font-size: 12px; color: var(--text-3); }
.stats-grid b { display: block; margin-top: 8px; font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.stats-grid div:nth-child(-n+2) b { color: var(--green); }

.ai-plan {
  padding: 20px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-l);
  background: linear-gradient(165deg, rgba(23, 43, 34, .7), rgba(16, 19, 21, .9));
}
.ai-title { display: flex; align-items: center; gap: 12px; }
.ai-title > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
}
.ai-title h3 { font-size: 15px; font-weight: 620; }
.ai-title p { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.ai-title em { margin-left: auto; font-style: normal; }

.summary {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .035);
  font-size: 13px;
  line-height: 1.8;
  color: #c3ccc8;
}

.scenario { display: flex; gap: 12px; padding: 14px 2px; border-top: 1px solid rgba(255, 255, 255, .06); }
.scenario:first-of-type { margin-top: 6px; }
.scenario i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--amber); }
.scenario i.up { background: var(--green); }
.scenario i.down-dot { background: var(--red); }
.scenario b { font-size: 13px; font-weight: 600; }
.scenario p { margin-top: 5px; font-size: 12.5px; line-height: 1.65; color: var(--text-2); }

.plan-list { display: grid; gap: 10px; margin-top: 24px; }
.plan-item {
  width: 100%;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  text-align: left;
  transition: border-color .16s ease, background .16s ease;
}
.plan-item:hover { border-color: var(--line-2); background: var(--surface-2); }
.plan-item b { font-size: 14px; font-weight: 600; }
.plan-item p { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.plan-item em { font-style: normal; color: var(--text-3); }

/* 表单弹窗 */
.add-modal {
  width: min(500px, calc(100% - 28px));
  max-height: 92vh;
  overflow-y: auto;
  margin: auto;
  padding: 26px 28px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: #0f1315;
  box-shadow: var(--shadow-pop);
}
.modal-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.modal-title .eyebrow { margin-bottom: 10px; }
.modal-title h2 { font-size: 21px; font-weight: 620; letter-spacing: -.025em; }
.modal-title button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-3);
}
.modal-title button:hover { color: var(--text); background: var(--surface-3); }

.add-modal label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-2);
}
.add-modal label small { color: var(--text-3); font-weight: 400; }
.add-modal input,
.add-modal textarea,
.add-modal select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: #0a0d0e;
  color: var(--text);
  font-size: 14.5px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.add-modal textarea { height: auto; min-height: 86px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.add-modal input:focus,
.add-modal textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.add-modal input::placeholder, .add-modal textarea::placeholder { color: #4d5654; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 12px; color: var(--text-3); }
.form-section {
  margin: 24px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
}
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; }

/* AI 推荐 */
.ai-recommend-btn {
  width: 100%;
  height: 46px;
  margin: 2px 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-s);
  background: var(--green-soft);
  color: var(--green);
  font-size: 13.5px;
  font-weight: 620;
  transition: background .16s ease;
}
.ai-recommend-btn:hover { background: rgba(47, 224, 140, .18); }
.ai-recommend-btn:disabled { opacity: .55; cursor: wait; }

.api-result {
  margin: -6px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-s);
  background: rgba(23, 43, 34, .5);
  font-size: 12.5px;
  line-height: 1.7;
  color: #b0bcb6;
}
.api-result b { color: var(--green); font-size: 13px; }
.api-result p { margin: 6px 0; }
.api-result small { color: var(--text-3); }
.api-result.error { border-color: var(--red-line); background: var(--red-soft); color: #ff96a0; }
.api-result.running { border-color: var(--line-2); background: var(--surface); color: var(--text-2); }
.api-result .thin-data {
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid var(--amber-line);
  border-radius: 10px;
  background: var(--amber-soft);
  color: #e5b76a;
  line-height: 1.7;
}

/* AI 按钮的进行中状态 */
.ai-recommend-btn small {
  margin-left: 8px;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-3);
}
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(47, 224, 140, .28);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.log-link {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 执行日志面板 */
.log-layer { z-index: 70; }
.log-layer .detail-head .text-btn { margin-left: auto; }

.log-list {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: #080b0c;
  padding: 6px 0;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
}
.log-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 16px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.log-row:last-child { border-bottom: 0; }
.log-row time { color: var(--text-3); }
.log-row span { color: var(--text-2); word-break: break-word; }
.log-row.ok span { color: var(--green); }
.log-row.warn span { color: var(--amber); }
.log-row.error span { color: var(--red); }

/* 配置状态 */
.config-status { display: grid; gap: 10px; margin-bottom: 8px; }
.config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  font-size: 13px;
}
.config-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.config-row.off .dot { background: var(--text-3); }
.config-row b { font-weight: 600; }
.config-row span { margin-left: auto; font-size: 12px; color: var(--green); font-weight: 600; }
.config-row.off span { color: var(--text-3); }

.config-hint {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-2);
}
.config-hint code {
  padding: 2px 7px;
  border-radius: 6px;
  background: #0a0d0e;
  border: 1px solid var(--line-2);
  color: var(--green);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}

.security-note {
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--amber-line);
  border-radius: var(--r-s);
  background: var(--amber-soft);
  color: #e5b76a;
  font-size: 12.5px;
  line-height: 1.7;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: #eafff6;
  color: #064a33;
  font-size: 13.5px;
  font-weight: 620;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

/* 移动端底栏 */
.mobile-nav { display: none; }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1180px) {
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .insights { grid-template-columns: 1fr 1fr; align-items: start; }
  .disclaimer { grid-column: 1 / -1; }
  .position-row { grid-template-columns: 44px minmax(0, 1.4fr) 108px 116px 96px 34px; }
  .position-row .value-cell { display: none; }
}

@media (max-width: 860px) {
  .insights { grid-template-columns: 1fr; }
  .topbar { padding: 26px 24px 18px; }
  .content-grid { padding: 0 24px 48px; }
  .position-row { grid-template-columns: 44px minmax(0, 1.4fr) 116px 96px 34px; }
  .position-row .price-cell { display: none; }
}

@media (max-width: 700px) {
  body { font-size: 14px; }
  .rail { display: none; }
  .workspace { padding: 0 0 84px; }
  .topbar { padding: 20px 16px 14px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .topbar h1 { font-size: 24px; }
  .top-actions { width: 100%; }
  .top-actions .primary-btn { flex: 1; justify-content: center; }
  .content-grid { padding: 0 14px 32px; gap: 14px; }
  .portfolio-card { padding: 20px 18px 18px; border-radius: 20px; }
  .asset { font-size: 34px; }
  .asset .cur { font-size: 18px; }
  .portfolio-head { flex-direction: column; gap: 14px; }
  .market-badge { text-align: left; }
  .market-badge small { margin-top: 6px; }
  .quick-actions { gap: 4px; }
  .quick-actions small { display: none; }
  .section-block { margin-top: 14px; }
  .section-title { padding: 18px 16px 14px; }
  .filters { padding: 0 16px 14px; }
  .position-row { grid-template-columns: 40px minmax(0, 1fr) auto 32px; gap: 12px; padding: 14px 16px; }
  .position-row .price-cell, .position-row .value-cell, .position-row .signal { display: none; }
  .detail-panel { padding: 20px 16px 34px; }
  .detail-head .stock-mark { display: none; }
  .stats-grid { gap: 8px; }
  .ai-title em { display: none; }
  .plan-item { grid-template-columns: 96px minmax(0, 1fr) 14px; padding: 14px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .modal-actions { position: sticky; bottom: -24px; padding: 12px 0; background: #0f1315; }
  .toast { bottom: 96px; }
  .empty-state { margin-top: 8vh; }

  .mobile-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 40;
    height: 64px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid var(--line-2);
    border-radius: 20px;
    background: rgba(18, 22, 24, .92);
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
  }
  .mobile-nav button {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: var(--text-3);
  }
  .mobile-nav span { font-size: 10.5px; font-weight: 550; }
  .mobile-nav .active { color: var(--green); }
}

@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: pulse 2.4s infinite; }
  .modal-layer { animation: fade .18s ease; }
  .detail-panel { animation: slide .26s cubic-bezier(.2, .7, .3, 1); }
  .add-modal { animation: pop .22s cubic-bezier(.2, .7, .3, 1); }
  .toast { animation: pop .22s cubic-bezier(.2, .7, .3, 1); }
  @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(47, 224, 140, 0); } }
  @keyframes fade { from { opacity: 0 } }
  @keyframes slide { from { transform: translateX(28px); opacity: 0 } }
  @keyframes pop { from { transform: translate(-50%, 8px) scale(.98); opacity: 0 } }
  .add-modal { animation-name: popCenter; }
  @keyframes popCenter { from { transform: translateY(10px) scale(.985); opacity: 0 } }
}