/* ============================================================
   投资日记 v2：买入抽屉 / 社交广场 / 荣耀墙 / 战绩卡片
   ============================================================ */

/* ── 买入抽屉（保留）── */
.diary-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.diary-overlay.active { opacity: 1; visibility: visible; }

.diary-drawer {
  width: 100%; max-width: 520px; max-height: 90vh;
  background: var(--bg-card, #1a1a2e); border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,.4);
}

.diary-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.06));
}
.diary-drawer-title { font-size: 17px; font-weight: 700; color: var(--ink-1, #E8E6E3); display: flex; align-items: center; gap: 8px; }
.diary-drawer-close { background: none; border: none; color: var(--ink-3, #888); font-size: 18px; cursor: pointer; padding: 4px 8px; }

.diary-drawer-body { padding: 20px; overflow-y: auto; }

/* ── 表单 ── */
.diary-form { display: flex; flex-direction: column; gap: 16px; }

.diary-field { display: flex; flex-direction: column; gap: 6px; }
.diary-field label { font-size: 13px; font-weight: 600; color: var(--ink-3, #888); }
.diary-field-readonly { font-size: 15px; color: var(--ink-1, #E8E6E3); padding: 10px 14px; background: var(--bg-input, rgba(255,255,255,.04)); border-radius: 10px; }
.diary-field-code { color: var(--ink-4, #666); font-size: 13px; margin-left: 8px; }

.diary-input, .diary-textarea {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-strong, rgba(27,35,64,.14));
  background: var(--bg-soft, #EEF0F8); color: var(--ink-1, #1B2340);
  font-size: 15px; font-family: inherit; outline: none; transition: border-color .2s;
}
.diary-input:focus, .diary-textarea:focus { border-color: var(--c-gold, #F7A925); }
.diary-textarea { resize: vertical; min-height: 60px; }

.diary-field-row { display: flex; gap: 12px; }
.diary-field-half { flex: 1; }

.diary-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

.diary-btn {
  padding: 10px 20px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: opacity .2s; font-family: inherit;
}
.diary-btn:disabled { opacity: .5; cursor: not-allowed; }
.diary-btn-primary { background: var(--c-gold, #F7A925); color: #0F1014; }
.diary-btn-secondary { background: var(--bg-soft, #EEF0F8); color: var(--ink-2, #59617F); }
.diary-btn-danger { background: #EF4444; color: #fff; }

/* ══════════════════════════════════════════════
   三步记录流（v3）：① 选股票 ② 日期价格 ③ 关联策略
   tokens 双主题：--line-* / --ink-* / --bg-* 在 tokens.css 亮暗均有定义
   ══════════════════════════════════════════════ */

/* ── ① 股票搜索 ── */
.inv-stock-search-wrap { position: relative; }

.inv-stock-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line-strong, rgba(27,35,64,.14));
  border-radius: var(--r-md, 14px); overflow: hidden;
  box-shadow: var(--shadow-pop, 0 12px 32px rgba(27,35,64,.16));
  max-height: 264px; overflow-y: auto;
}
.inv-sr-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft, rgba(27,35,64,.08));
  transition: background .15s;
}
.inv-sr-item:last-child { border-bottom: none; }
.inv-sr-item:hover, .inv-sr-item:active { background: var(--fam-balanced-soft, rgba(247,169,37,.1)); }
.inv-sr-item b { font-size: 14px; font-weight: 700; color: var(--ink-1, #1B2340); }
.inv-sr-code { font-size: 12px; color: var(--ink-3, #9AA1BC); font-variant-numeric: tabular-nums; }
.inv-sr-ind {
  font-size: 11px; color: var(--ink-3, #9AA1BC);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.inv-sr-price { font-size: 13px; font-weight: 700; color: var(--c-gold, #F7A925); font-variant-numeric: tabular-nums; }
.inv-sr-loading { padding: 16px 14px; font-size: 13px; color: var(--ink-3, #9AA1BC); text-align: center; }

/* 已选股票卡 */
.inv-stock-picked {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md, 14px);
  background: var(--fam-balanced-soft, rgba(247,169,37,.1));
  border: 1px solid rgba(247,169,37,.35);
}
.inv-picked-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.inv-picked-main b { font-size: 15px; font-weight: 700; color: var(--ink-1, #1B2340); }
.inv-picked-change {
  background: none; border: 1px solid var(--line-strong, rgba(27,35,64,.14));
  color: var(--ink-2, #59617F); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 8px; cursor: pointer; font-family: inherit;
  flex-shrink: 0; transition: all .2s;
}
.inv-picked-change:hover { color: var(--c-gold, #F7A925); border-color: var(--c-gold, #F7A925); }

/* ── ② 价格提示与偏离 ── */
.diary-price-hint { font-size: 12px; color: var(--ink-3, #9AA1BC); margin-top: 6px; min-height: 0; }
.diary-price-hint.ok { color: var(--ink-2, #59617F); }
.diary-price-hint.ok::before { content: '✓ '; color: var(--down, #18B890); font-weight: 700; }
.diary-price-hint.warn { color: #E8940A; }

.diary-deviation {
  display: none; font-size: 12px; color: #B45309; margin-top: 6px;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.28);
}
.diary-deviation.show { display: block; }
[data-theme="dark"] .diary-deviation { color: #FBBF24; }
[data-theme="dark"] .diary-price-hint.warn { color: #FBBF24; }

/* ── 股数 chips + 成本预览 ── */
.inv-shares-row { display: flex; gap: 10px; align-items: center; }
.inv-share-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-share-chip {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong, rgba(27,35,64,.14));
  background: var(--bg-soft, #EEF0F8); color: var(--ink-2, #59617F);
  cursor: pointer; font-family: inherit; transition: all .15s;
  font-variant-numeric: tabular-nums;
}
.inv-share-chip:hover { border-color: var(--c-gold, #F7A925); color: var(--c-gold, #F7A925); }
.inv-share-chip.active {
  background: var(--fam-balanced-soft, rgba(247,169,37,.12)); border-color: var(--c-gold, #F7A925);
  color: var(--c-gold, #F7A925);
}
.inv-shares-input { width: 110px; flex-shrink: 0; text-align: right; }
.inv-cost-preview {
  font-size: 12px; color: var(--ink-3, #9AA1BC); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.inv-cost-preview b { color: var(--ink-1, #1B2340); font-weight: 700; }

/* ── ③ 标签副标 ── */
.diary-label-sub { font-size: 11px; font-weight: 400; color: var(--ink-3, #9AA1BC); margin-left: 6px; }

/* ── 表单错误（后端拒绝内联展示）── */
.diary-form-error {
  display: none; font-size: 13px; color: #E11D48; line-height: 1.5;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(225,29,72,.06); border: 1px solid rgba(225,29,72,.22);
}
.diary-form-error.show { display: block; }
[data-theme="dark"] .diary-form-error { color: #FB7185; }

/* ══════════════════════════════════════════════
   日记页面主体
   ══════════════════════════════════════════════ */

.diary-page {
  max-width: 720px; margin: 0 auto; padding: 0 16px 80px;
}

/* ── 页面标题 ── */
.diary-page-hero {
  text-align: center; padding: 32px 0 24px;
}
.diary-page-title {
  font-size: 28px; font-weight: 900; color: var(--ink-1, #E8E6E3);
  margin: 0 0 8px; letter-spacing: -.5px;
}
.diary-page-sub {
  font-size: 14px; color: var(--ink-3, #888); margin: 0;
}

/* ══════════════════════════════════════════════
   Section 共享组件
   ══════════════════════════════════════════════ */

.diary-section {
  margin-bottom: 32px;
}

.diary-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.diary-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800; color: var(--ink-1, #E8E6E3);
}
.diary-section-icon { font-size: 20px; }
.diary-section-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: rgba(247,169,37,.12); color: var(--c-gold, #F7A925);
}
.diary-section-sub { font-size: 13px; color: var(--ink-4, #666); }

/* ══════════════════════════════════════════════
   Section 0: 战绩海报墙（示例复盘 · 传播引擎）
   ══════════════════════════════════════════════ */

.diary-poster-skeleton {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.diary-poster-skeleton i {
  aspect-ratio: 3/4; border-radius: 14px;
  background: linear-gradient(100deg, var(--bg-soft, #EEF0F8) 40%, rgba(255,255,255,.6) 50%, var(--bg-soft, #EEF0F8) 60%);
  background-size: 200% 100%; animation: dhc-shimmer 1.4s infinite;
}

.poster-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}

.poster-card {
  border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-soft, rgba(27,35,64,.08));
  background: var(--bg-card, #fff);
  transition: transform .25s, box-shadow .25s;
}
.poster-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop, 0 12px 32px rgba(27,35,64,.16));
}
.poster-img-wrap { aspect-ratio: 3/4; background: #F5F1E8; line-height: 0; }
.poster-thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.poster-thumb.ready { opacity: 1; }

.poster-cta {
  border-radius: 14px; cursor: pointer;
  border: 2px dashed var(--line-strong, rgba(27,35,64,.14));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 20px 12px;
  color: var(--ink-3, #9AA1BC);
  transition: all .25s; aspect-ratio: 3/4;
}
.poster-cta:hover {
  border-color: var(--c-gold, #F7A925); color: var(--c-gold, #F7A925);
  background: var(--fam-balanced-soft, rgba(247,169,37,.06));
}
.poster-cta-plus { font-size: 34px; font-weight: 300; line-height: 1; }
.poster-cta-text { font-size: 15px; font-weight: 800; color: var(--ink-1, #1B2340); line-height: 1.4; }
.poster-cta:hover .poster-cta-text { color: var(--c-gold, #F7A925); }
.poster-cta-sub { font-size: 11px; }

/* ── 我的战报（平仓记录联动缩略图）── */
.my-poster-card { display: flex; flex-direction: column; }
.my-poster-card .poster-img-wrap { aspect-ratio: 3/4; }
.mp-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; font-size: 12.5px;
}
.mp-caption b { color: var(--ink-1, #1B2340); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-caption span { font-weight: 800; flex-shrink: 0; }

/* ── 战报选择层（平仓记录 → 一键生成）── */
.pc-card { width: 420px; max-width: calc(100vw - 32px); }
.pc-sub {
  font-size: 12.5px; color: var(--ink-3, #9AA1BC); padding: 2px 0 12px;
  border-bottom: 1px solid var(--line-soft, rgba(27,35,64,.08)); margin-bottom: 6px;
}
.pc-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; }
.pc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 10px; margin: 4px 0; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: all .2s;
}
.pc-row:hover { background: var(--bg-soft, #EEF0F8); border-color: var(--line-strong, rgba(27,35,64,.14)); }
.pc-main { min-width: 0; }
.pc-stock { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.pc-stock b { color: var(--ink-1, #1B2340); }
.pc-meta { font-size: 11.5px; color: var(--ink-3, #9AA1BC); margin-top: 3px; }
.pc-pnl { font-size: 15px; font-weight: 800; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   Section 1: 大师策略 Hero 轮播（真实回测展示位）
   ══════════════════════════════════════════════ */

.diary-hero-skeleton {
  height: 218px; border-radius: 16px;
  background: linear-gradient(100deg, var(--bg-soft, #EEF0F8) 40%, rgba(255,255,255,.6) 50%, var(--bg-soft, #EEF0F8) 60%);
  background-size: 200% 100%; animation: dhc-shimmer 1.4s infinite;
}
@keyframes dhc-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; } }

.diary-hero-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.diary-hero-scroll::-webkit-scrollbar { display: none; }

.diary-hero-card {
  flex: 0 0 292px; scroll-snap-align: start;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line-soft, rgba(27,35,64,.08));
  border-radius: 16px; padding: 16px 18px 14px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.diary-hero-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-gold, #F7A925), rgba(247,169,37,.25));
}

.dhc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dhc-rank {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: var(--c-gold, #F7A925);
  background: var(--fam-balanced-soft, rgba(247,169,37,.12));
  padding: 2px 8px; border-radius: 6px;
}
.dhc-method { font-size: 10px; color: var(--ink-3, #9AA1BC); }

.dhc-name {
  font-size: 16px; font-weight: 800; color: var(--ink-1, #1B2340);
  line-height: 1.35; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 43px;
}

.dhc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.dhc-tag {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  color: var(--ink-2, #59617F); background: var(--bg-soft, #EEF0F8);
}
.dhc-tag-risk { color: var(--c-gold, #F7A925); background: var(--fam-balanced-soft, rgba(247,169,37,.12)); }

.dhc-metrics { display: flex; gap: 20px; margin-bottom: 8px; }
.dhc-m { display: flex; flex-direction: column; gap: 2px; }
.dhc-m b {
  font-size: 24px; font-weight: 900; letter-spacing: -.5px;
  color: var(--ink-1, #1B2340); font-variant-numeric: tabular-nums;
}
.dhc-m b.up { color: #E63946; }
.dhc-m b.down { color: #18B890; }
.dhc-m span { font-size: 11px; color: var(--ink-3, #9AA1BC); }

.dhc-bench { font-size: 12px; font-weight: 600; color: var(--ink-2, #59617F); margin-bottom: 2px; }
.dhc-window { font-size: 11px; color: var(--ink-3, #9AA1BC); margin-bottom: 12px; }

.dhc-cta {
  margin-top: auto; align-self: flex-start;
  padding: 7px 18px; border-radius: 999px; border: 1px solid var(--c-gold, #F7A925);
  background: none; color: var(--c-gold, #F7A925);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all .2s;
}
.dhc-cta:hover { background: var(--c-gold, #F7A925); color: #fff; }

.diary-hero-dots { display: flex; gap: 6px; justify-content: center; padding-top: 2px; }
.diary-hero-dot {
  width: 6px; height: 6px; border-radius: 50%; cursor: pointer;
  background: var(--line-strong, rgba(27,35,64,.14)); transition: all .2s;
}
.diary-hero-dot.active { background: var(--c-gold, #F7A925); width: 16px; border-radius: 3px; }

/* ══════════════════════════════════════════════
   平仓成功弹窗
   ══════════════════════════════════════════════ */

.diary-success-card {
  background: var(--bg-card, #fff); border-radius: 20px; padding: 32px 24px 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; overflow: hidden;
}
.ds-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,169,37,.18), transparent 70%);
  pointer-events: none;
}
.ds-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--c-gold, #F7A925); margin-bottom: 10px;
}
.ds-pnl {
  font-size: 52px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ds-pnl.up { color: #E63946; }
.ds-pnl.down { color: #18B890; }
.ds-sub { font-size: 14px; color: var(--ink-3, #9AA1BC); margin-top: 8px; }
.ds-sub b { color: var(--ink-1, #1B2340); }
.ds-line {
  font-size: 13px; color: var(--ink-2, #59617F); font-style: italic;
  margin-top: 10px;
}
.ds-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ══════════════════════════════════════════════
   里程碑解锁横幅
   ══════════════════════════════════════════════ */

.diary-milestone {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px; border-radius: 14px;
  background: linear-gradient(120deg, var(--fam-balanced-soft, rgba(247,169,37,.12)), rgba(247,169,37,.04));
  border: 1px solid rgba(247,169,37,.35);
}
.dm-icon { font-size: 26px; flex-shrink: 0; }
.dm-body { flex: 1; min-width: 0; }
.dm-title { font-size: 14px; color: var(--ink-1, #1B2340); }
.dm-title b { font-weight: 800; }
.dm-sub { font-size: 12px; color: var(--ink-3, #9AA1BC); margin-top: 2px; }
.dm-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dm-go { padding: 8px 16px; font-size: 13px; }
.dm-skip {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-size: 12px; color: var(--ink-3, #9AA1BC); font-family: inherit;
}
.dm-skip:hover { color: var(--ink-1, #1B2340); }

/* ══════════════════════════════════════════════
   Section 2: 荣耀勋章墙
   ══════════════════════════════════════════════ */

.honor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.honor-badge {
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,.06));
  border-radius: 14px; padding: 20px 12px 16px;
  text-align: center; transition: all .3s;
  position: relative;
}
.honor-badge.unlocked {
  border-color: rgba(247,169,37,.25);
  background: linear-gradient(135deg, rgba(247,169,37,.06), rgba(247,169,37,.01));
}
.honor-badge.unlocked:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(247,169,37,.08); }
.honor-badge.locked { opacity: .45; filter: grayscale(.6); }

.honor-badge-icon {
  width: 52px; height: 52px; border-radius: 50%;
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  color: var(--c-gold, #F7A925); position: relative;
}
.honor-badge.unlocked .honor-badge-icon {
  background: rgba(247,169,37,.12);
  box-shadow: 0 0 20px rgba(247,169,37,.15);
}
.honor-badge.locked .honor-badge-icon {
  background: rgba(255,255,255,.04); color: var(--ink-4, #666);
}

.honor-lock { position: absolute; bottom: -2px; right: -2px; font-size: 14px; }
.honor-badge-name { font-size: 13px; font-weight: 700; color: var(--ink-1, #E8E6E3); margin-bottom: 4px; }
.honor-badge-desc { font-size: 11px; color: var(--ink-4, #666); line-height: 1.4; }

/* ══════════════════════════════════════════════
   Section 3: 战绩总览
   ══════════════════════════════════════════════ */

.stats-overview {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 12px;
}
.so-item {
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,.06));
  border-radius: 14px; padding: 18px 12px; text-align: center;
}
.so-num { font-size: 24px; font-weight: 900; color: var(--c-gold, #F7A925); }
.so-num.up { color: #EF4444; }
.so-num.down { color: #22C55E; }
.so-label { font-size: 12px; color: var(--ink-4, #666); margin-top: 4px; }

.so-extras {
  display: flex; gap: 12px;
}
.so-extra {
  flex: 1; padding: 12px 16px; border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,.03));
  font-size: 14px; font-weight: 600;
}
.so-extra.up { color: #EF4444; }
.so-extra.down { color: #22C55E; }

/* 段位徽章行（并入战绩总览） */
.so-rank {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,.06));
  border-left: 3px solid var(--rank-c, #F7A925);
}
.so-rank-ring {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900; color: #fff;
  background: var(--rank-c, #F7A925);
  border: 2px solid rgba(255,255,255,.3);
  box-shadow: 0 3px 10px rgba(0,0,0,.2), inset 0 2px 3px rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}
.so-rank-info { min-width: 0; }
.so-rank-name { font-size: 15px; font-weight: 800; color: var(--ink-1, #E8E6E3); }
.so-rank-gap { font-size: 12px; color: var(--ink-3, #888); margin-top: 2px; line-height: 1.5; }

/* ══════════════════════════════════════════════
   Section 4: 交易记录卡片
   ══════════════════════════════════════════════ */

/* ── 标签栏 ── */
.diary-tabs { display: flex; gap: 4px; background: var(--bg-input, rgba(255,255,255,.04)); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.diary-tab {
  flex: 1; padding: 10px 0; border: none; background: none; color: var(--ink-3, #888);
  font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 10px; transition: all .2s;
  font-family: inherit;
}
.diary-tab.active { background: var(--bg-card, #1a1a2e); color: var(--ink-1, #E8E6E3); box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* ── 记录列表 ── */
.record-list { display: flex; flex-direction: column; gap: 10px; }

.record-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-radius: 14px;
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,.06));
  transition: border-color .2s, transform .2s;
  position: relative; overflow: hidden;
}
.record-card:hover { border-color: rgba(247,169,37,.15); }
.rc-open { border-left: 3px solid var(--c-gold, #F7A925); }
.rc-closed { border-left: 3px solid rgba(255,255,255,.06); }
.rc-open::after {
  content: '● 持仓中'; position: absolute; top: 12px; right: 16px;
  font-size: 10px; font-weight: 700; color: var(--c-gold, #F7A925);
  letter-spacing: .5px; text-transform: uppercase;
}

.rc-body { flex: 1; min-width: 0; }
.rc-stock { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.rc-stock b { font-size: 16px; font-weight: 700; color: var(--ink-1, #E8E6E3); }
.rc-code { font-size: 12px; color: var(--ink-4, #666); }
.rc-verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  color: var(--c-gold-deep, #C77E0E);
  background: var(--fam-balanced-soft, rgba(247,169,37,.10));
  border: 1px solid rgba(247,169,37,.45);
  white-space: nowrap;
}
.rc-meta { font-size: 13px; color: var(--ink-4, #666); display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.rc-cost { font-size: 12px; color: var(--ink-4, #666); }
.rc-strategy { font-size: 11px; color: var(--c-gold, #F7A925); background: rgba(247,169,37,.08); display: inline-block; padding: 2px 8px; border-radius: 6px; margin-bottom: 4px; }
.rc-notes { font-size: 13px; color: var(--ink-3, #888); font-style: italic; margin-top: 4px; }

.rc-side { text-align: right; flex-shrink: 0; margin-left: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rc-pnl { font-size: 22px; font-weight: 900; letter-spacing: -.5px; }
.rc-pnl.up { color: #EF4444; }
.rc-pnl.down { color: #22C55E; }
.rc-price { font-size: 13px; color: var(--ink-4, #666); }

.rc-btn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid var(--c-gold, #F7A925);
  background: none; color: var(--c-gold, #F7A925); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s; font-family: inherit; margin-top: 4px;
}
.rc-btn:hover { background: var(--c-gold, #F7A925); color: #0F1014; }
.rc-btn-share {
  border-color: var(--ink-3, #888); color: var(--ink-3, #888); padding: 6px 12px;
}
.rc-btn-share:hover { background: var(--ink-3, #888); color: #0F1014; }

/* PnL 颜色（旧类名保留兼容） */
.dp-pnl-up { color: #EF4444; }
.dp-pnl-down { color: #22C55E; }
.dp-pnl-na { color: var(--ink-4, #666); }

/* ── 空状态 ── */
.diary-empty { text-align: center; padding: 60px 20px; }
.diary-empty-icon { font-size: 48px; margin-bottom: 16px; }
.diary-empty-text { font-size: 17px; color: var(--ink-2, #CCC); margin-bottom: 8px; font-weight: 600; }
.diary-empty-sub { font-size: 14px; color: var(--ink-4, #666); }
.diary-loading { text-align: center; padding: 40px; color: var(--ink-4, #666); font-size: 14px; }
.diary-error { text-align: center; padding: 40px; color: #EF4444; font-size: 14px; }

/* ── 平仓弹窗 ── */
.diary-modal-overlay {
  position: fixed; inset: 0; z-index: 8500;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
}
.diary-close-modal { width: 90%; max-width: 420px; }
.diary-close-card {
  background: var(--bg-card, #1a1a2e); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.diary-close-head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 700; color: var(--ink-1, #E8E6E3); }
.diary-close-x { background: none; border: none; color: var(--ink-3, #888); font-size: 18px; cursor: pointer; }
.diary-close-info { font-size: 14px; color: var(--ink-3, #888); line-height: 1.6; }
.diary-close-info b { color: var(--ink-1, #E8E6E3); }

/* ══════════════════════════════════════════════
   分享预览覆盖
   ══════════════════════════════════════════════ */

.diary-share-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center;
}
.diary-share-modal {
  width: 90%; max-width: 420px; max-height: 90vh;
  background: var(--bg-card, #1a1a2e); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.diary-share-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.06));
  font-size: 16px; font-weight: 700; color: var(--ink-1, #E8E6E3);
}
.diary-share-close { background: none; border: none; color: var(--ink-3, #888); font-size: 18px; cursor: pointer; }
.diary-share-img-wrap { padding: 16px; text-align: center; overflow-y: auto; }
.diary-share-img { width: 100%; border-radius: 8px; }
.diary-share-actions { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.06)); justify-content: flex-end; }

/* 分享卡模板选择 */
.diary-share-tpls {
  display: flex; gap: 8px; padding: 12px 20px 0;
}
.diary-share-tpl {
  padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong, rgba(27,35,64,.14));
  background: var(--bg-soft, #EEF0F8); color: var(--ink-2, #59617F);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.diary-share-tpl.active {
  background: var(--fam-balanced-soft, rgba(247,169,37,.12));
  border-color: var(--c-gold, #F7A925); color: var(--c-gold, #F7A925);
}
.diary-share-loading {
  padding: 60px 0; text-align: center; font-size: 13px; color: var(--ink-3, #9AA1BC);
}

/* 分享卡翻面（正面战绩卡 ⇄ 背面策略档案） */
.diary-share-flip { perspective: 1200px; }
.diary-share-flip-inner {
  position: relative; width: 100%;
  transition: transform .6s cubic-bezier(.4,.1,.2,1);
  transform-style: preserve-3d;
}
.diary-share-flip-inner.flipped { transform: rotateY(180deg); }
.diary-share-face {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.diary-share-face img { display: block; width: 100%; border-radius: 8px; }
.diary-share-face-back {
  position: absolute; top: 0; left: 0; width: 100%;
  transform: rotateY(180deg);
}

/* ── 响应式 ── */
@media (max-width: 640px) {
  .diary-page-hero { padding: 20px 0 16px; }
  .diary-page-title { font-size: 22px; }

  /* 海报墙移动端：横向滑动 */
  .diary-poster-skeleton { display: flex; gap: 12px; overflow: hidden; }
  .diary-poster-skeleton i { flex: 0 0 62%; }
  .poster-wall {
    display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .poster-wall::-webkit-scrollbar { display: none; }
  .poster-card { flex: 0 0 62%; scroll-snap-align: start; }
  .poster-cta { flex: 0 0 45%; aspect-ratio: auto; }

  .diary-hero-card { flex-basis: 262px; }
  .dhc-m b { font-size: 21px; }

  .honor-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .honor-badge { padding: 14px 6px 12px; }
  .honor-badge-icon { width: 40px; height: 40px; }
  .honor-badge-name { font-size: 11px; }

  .stats-overview { grid-template-columns: repeat(2, 1fr); }
  .so-extras { flex-direction: column; }

  .record-card { flex-direction: column; align-items: stretch; }
  .rc-side { flex-direction: row; align-items: center; justify-content: space-between; margin-left: 0; margin-top: 12px; }
  .rc-open::after { position: static; margin-bottom: 8px; display: block; text-align: left; }

  .diary-drawer { max-width: 100%; border-radius: 16px 16px 0 0; }

  .diary-milestone { flex-wrap: wrap; }
  .dm-actions { width: 100%; justify-content: flex-end; }

  .ds-pnl { font-size: 44px; }
  .ds-actions { flex-direction: column; width: 100%; }
  .ds-actions .diary-btn { width: 100%; }

  .inv-shares-row { flex-wrap: wrap; }
  .inv-share-chips { flex: 1 1 100%; }
  .inv-share-chip { flex: 1; padding: 8px 0; }
  .inv-shares-input { width: 100%; text-align: left; }
  .inv-stock-results { max-height: 220px; }
}

@media (max-width: 400px) {
  .honor-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 免费额度提示（记录表单顶部） */
.diary-quota-hint {
  font-size: 12px; color: var(--ink-3);
  background: var(--bg-soft); border: 1px dashed var(--line-strong);
  border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 12px;
}
.diary-quota-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 12px; font-weight: 800; color: var(--c-gold);
}
.diary-quota-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════
   v4：页面 Tab（发现 | 我的）
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   v4：悬浮记一笔 FAB
   ══════════════════════════════════════════════ */

.diary-fab {
  position: fixed; right: 20px; bottom: 28px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--c-gold, #F7A925); color: #0F1014;
  font-size: 30px; font-weight: 300; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(247,169,37,.35);
  transition: transform .2s, box-shadow .2s;
  font-family: inherit;
}
.diary-fab:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(247,169,37,.45); }
.diary-fab:active { transform: scale(.95); }

/* ══════════════════════════════════════════════
   v4：广场动态（公开战绩）
   ══════════════════════════════════════════════ */

.sq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sq-item {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line-soft, rgba(27,35,64,.08));
  border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 2px 10px rgba(20,26,58,.05);
  transition: transform .18s, box-shadow .18s;
}
.sq-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,26,58,.1); }
.sq-head { display: flex; align-items: center; gap: 8px; }
.sq-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft, #EEF0F8);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; overflow: hidden;
}
.sq-author { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sq-author b {
  font-size: 12.5px; font-weight: 700; color: var(--ink-1, #1B2340);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sq-rank { font-size: 10.5px; font-weight: 700; }
.sq-pnl { font-size: 14px; font-weight: 900; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sq-pnl.up { color: #E63946; }
.sq-pnl.down { color: #18B890; }

/* 海报位：3:4 画布占位 + 懒绘制骨架 shimmer */
.sq-wrap {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px;
  background: linear-gradient(100deg, var(--bg-soft, #EEF0F8) 40%, var(--line-strong, rgba(27,35,64,.14)) 50%, var(--bg-soft, #EEF0F8) 60%);
  background-size: 200% 100%; animation: sq-shimmer 1.6s infinite; cursor: pointer;
}
@keyframes sq-shimmer { to { background-position: -200% 0; } }
.sq-wrap.ready { background: none; animation: none; }
.sq-thumb { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.sq-thumb.ready { opacity: 1; }
.sq-hint {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(13,18,36,.72); color: #F5F1E6;
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  pointer-events: none; letter-spacing: .3px;
}
.sq-foot { display: flex; align-items: center; gap: 6px; }
.sq-like {
  border: 1px solid var(--line-strong, rgba(27,35,64,.14)); background: none;
  color: var(--ink-3, #9AA1BC); padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .2s;
}
.sq-like:hover { border-color: #E63946; color: #E63946; }
.sq-like.on { border-color: #E63946; color: #E63946; background: rgba(230,57,70,.07); }
.sq-follow {
  border: 1px solid var(--c-gold, #F7A925); background: none;
  color: var(--c-gold, #F7A925); padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all .2s;
}
.sq-follow:hover { background: rgba(247,169,37,.12); }
.sq-report {
  margin-left: auto; border: none; background: none; color: var(--ink-4, #666);
  font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 8px;
  font-family: inherit; opacity: .55; transition: all .2s;
}
.sq-report:hover { opacity: 1; color: var(--ink-2, #59617F); background: var(--bg-soft, #EEF0F8); }

/* 广场精选/最新双流 */
.sq-feed-tabs { display: flex; gap: 4px; }
.sq-feed-tab {
  border: none; background: none; color: var(--ink-3, #888);
  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 5px 12px;
  border-radius: 999px; font-family: inherit; transition: all .2s;
}
.sq-feed-tab.active { background: var(--c-gold, #F7A925); color: #0F1014; }

/* ══════════════════════════════════════════════
   v4：示例海报一键复刻 / 发布按钮 / 晋升卡 / 分享提示
   ══════════════════════════════════════════════ */

.diary-new-btn { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }

.rc-btn-pub { border-color: var(--line-strong, rgba(27,35,64,.14)); color: var(--ink-3, #888); }
.rc-btn-pub:hover { background: var(--bg-soft, #EEF0F8); color: var(--ink-1, #E8E6E3); }
.rc-btn-pub.on {
  border-color: var(--c-gold, #F7A925); color: var(--c-gold, #F7A925);
  background: var(--fam-balanced-soft, rgba(247,169,37,.1));
}

.promo-rank { font-size: 34px; font-weight: 900; letter-spacing: 1px; margin-top: 2px; }

.diary-share-tips {
  font-size: 12px; color: var(--ink-3, #888); line-height: 1.5;
  padding: 8px 12px; margin: 0 20px 12px; border-radius: 10px;
  background: var(--bg-soft, #EEF0F8); text-align: center;
}

/* ── v4 响应式 ── */
@media (max-width: 640px) {
  .diary-fab { right: 16px; bottom: 16px; }
}