/* ==========================================================
 * 文件: shared/public-ui.css
 * 版本: 0.1.0 · 更新: 2026-10-23 · 作者: Claude（为李泓锐）
 * 用途: Public 的分享弹窗 / 分享门 / 登录注册 / 会员页的版式。
 *   只排版，不加新颜色：全部用现有 token；卡片、输入框、分段按钮、表格、banner 沿用组件本身
 * ========================================================== */

/* ---------- 分享弹窗（原生 dialog，复用 .dialog 外观，只放开高度并允许滚动） ---------- */
.share-modal { max-height: min(86dvh, 760px); margin-top: 7vh; overflow: auto; }
.share-modal__body { display: grid; gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-6); }
.share-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.share-modal__title { font-size: var(--fs-lg); font-weight: 650; }
.share-modal__lead { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-secondary); }
.share-modal fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.share-modal legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.share-modal .segmented { flex-wrap: wrap; }
.share-modal__hint { font-size: var(--fs-xs); color: var(--text-secondary); }
.share-modal__pw { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.share-modal__code { font-family: var(--font-mono); font-size: var(--fs-2xl); letter-spacing: 0.3em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.share-modal__result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-sunken); }
.share-modal__url { display: block; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-text); }
.share-modal__qr { width: 132px; height: 132px; padding: 8px; border-radius: var(--radius-sm); background: #fff; }  /* 二维码必须白底黑块，才能被所有扫码器识别 */
.share-modal__qr svg { display: block; width: 100%; height: 100%; }
.share-modal__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.share-modal .table td, .share-modal .table th { white-space: nowrap; }
@media (max-width: 560px) { .share-modal__result { grid-template-columns: 1fr; } .share-modal__body { padding-inline: var(--space-4); } }

/* ---------- 分享门：星云 40% 亮度 + 玻璃卡片 ---------- */
.gate { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5) 16px; overflow: hidden; background: var(--bg-base); }
.gate__canvas, .gate__fallback { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: brightness(0.4); }
.gate__fallback { background: var(--bg-base) url("nebula-fallback.png") center / cover no-repeat; }
.gate.has-webgl .gate__fallback { display: none; }
.gate__card {
  position: relative;
  width: min(420px, 100%);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg-elevated) 62%, transparent);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-card);
}
.gate__title { font-size: var(--fs-xl); font-weight: 700; }
.gate__meta { font-size: var(--fs-sm); color: var(--text-secondary); }
.gate__code { font-family: var(--font-mono); font-size: var(--fs-xl); letter-spacing: 0.4em; text-align: center; }
.gate__error { min-height: 1.4em; font-size: var(--fs-sm); color: var(--red); }
.gate__foot { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-xs); color: var(--text-secondary); }
.gate__card.is-shake { animation: gate-shake 360ms var(--ease-out); }
@keyframes gate-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .gate__card.is-shake { animation: none; } }
.gate-view { position: relative; width: min(1100px, 100%); display: grid; gap: var(--space-5); align-self: start; padding-top: var(--space-6); }
.gate-view .banner { border-color: var(--border-strong); background: color-mix(in srgb, var(--bg-elevated) 80%, transparent); }
.gate-view .banner__icon { color: var(--accent-text); }
.gate-view__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 760px) { .gate-view__kpis { grid-template-columns: 1fr 1fr; } }

/* ---------- 登录 / 注册 ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.auth__card { display: grid; gap: var(--space-4); }
.auth__form { display: grid; gap: var(--space-3); }
.auth__rule { font-size: var(--fs-xs); color: var(--text-secondary); }
.auth__error { min-height: 1.4em; font-size: var(--fs-sm); color: var(--red); }
.auth__side { display: grid; gap: var(--space-4); padding-top: var(--space-2); }
.auth__side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.auth__side li::before { content: '· '; color: var(--accent-text); }
.auth__show { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } }

/* ---------- 会员页 ---------- */
.mp-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mp-panel { display: grid; gap: var(--space-5); }
.mp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.mp-paper { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.mp-paper form { display: grid; gap: var(--space-3); }
.mp-you td { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
@media (max-width: 860px) { .mp-kpis { grid-template-columns: 1fr 1fr; } .mp-paper { grid-template-columns: 1fr; } }

/* ==========================================================
 * 追加（T2 · 2026-10-24）：Public 内容页通用版式。只排版，不加新颜色。
 * ========================================================== */
/* 页头：标题 + 日期行（badge）+ 说明 */
.pub-head { display: grid; gap: var(--space-3); }
.pub-head__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-secondary); }
.pub-head p { margin-top: 0; }
/* 骨架屏四格 */
.pub-skel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
/* KPI 行（复用 .metric），4 或 5 列 */
.pub-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.pub-kpis .metric { background: var(--bg-surface); border-radius: var(--radius-md); }
/* 区块：标题行 + 右侧工具 */
.pub-section { display: grid; gap: var(--space-4); }
.pub-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pub-section__head .section-title { margin: 0; }
.pub-section__hint { font-size: var(--fs-sm); color: var(--text-secondary); max-width: 70ch; }
.pub-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pub-tools .field { min-width: 180px; }
.pub-tools select.field__input { padding-block: 8px; }
/* 两栏（左宽右窄） */
.pub-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pub-cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 行业热力图：自适应瓦片，颜色沿用 .heatmap__cell 的涨跌 color-mix */
.pub-sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-2); }
.pub-sectors .heatmap__cell { display: grid; grid-template-rows: auto auto auto; place-items: start; gap: 2px; min-height: 76px; padding: var(--space-3); border-radius: var(--radius-sm); text-align: left; }
.pub-sectors .heatmap__cell:hover { transform: none; }
.pub-sectors__name { font-size: var(--fs-sm); color: var(--text-primary); }
.pub-sectors__chg { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 650; }
.pub-sectors__n { font-size: var(--fs-xs); color: var(--text-secondary); }
/* 领涨领跌小列表 */
.pub-movers { display: grid; gap: var(--space-2); }
.pub-movers li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }
.pub-movers .mono { font-variant-numeric: tabular-nums; }
/* 表格行展开（信号 / 回放 / 验证） */
.pub-row-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); }
.pub-row-toggle .btn__icon { transition: transform var(--motion-fast); }
.pub-row-toggle[aria-expanded="true"] .btn__icon { transform: rotate(90deg); }
.pub-detail td { background: var(--bg-sunken); white-space: normal; }
.pub-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); padding: var(--space-2) 0; }
.pub-detail__k { font-size: var(--fs-xs); color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.pub-detail__v { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-primary); }
.pub-yearly { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pub-yearly span { font-family: var(--font-mono); font-size: var(--fs-sm); }
/* 行内锁定（按钮级别的 Pro 功能）：禁用按钮 + 一行小字 */
.pub-inline-lock { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--accent-text); }
/* 策略百科卡片 */
.pub-wiki { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.pub-wiki .card { gap: var(--space-2); }
.pub-wiki__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pub-wiki__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
.pub-wiki__rule { font-size: var(--fs-sm); color: var(--text-secondary); flex: 1; }
.pub-wiki__params { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pub-wiki__params .kbd { font-size: var(--fs-xs); }
.pub-wiki__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-secondary); }
/* AI 翻译器 */
.pub-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pub-tr textarea.field__input { min-height: 132px; resize: vertical; padding-top: 20px; }
.pub-tr__examples { display: grid; gap: var(--space-2); }
.pub-tr__examples .btn { justify-content: flex-start; text-align: left; white-space: normal; height: auto; padding-block: 8px; }
.pub-tr__out { display: grid; gap: var(--space-3); }
.pub-tr__out dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.pub-tr__out dt { color: var(--text-secondary); }
.pub-tr__out dd code, .pub-tr__code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-text); overflow-wrap: anywhere; }
/* 方法论：目录 + 走步示意 */
.pub-toc { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pub-prose { max-width: 72ch; display: grid; gap: var(--space-3); font-size: var(--fs-md); line-height: 1.7; color: var(--text-secondary); }
.pub-prose strong { color: var(--text-primary); }
.pub-wf { display: grid; gap: var(--space-2); }
.pub-wf__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 112px; align-items: center; gap: var(--space-3); font-size: var(--fs-xs); color: var(--text-secondary); }
.pub-wf__track { position: relative; height: 14px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; }
.pub-wf__seg { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.pub-wf__seg--train { background: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.pub-wf__seg--test { background: var(--accent-primary); }
.pub-wf__legend { display: flex; gap: var(--space-4); font-size: var(--fs-xs); color: var(--text-secondary); }
.pub-wf__legend i { display: inline-block; width: 14px; height: 8px; border-radius: 4px; margin-right: 6px; vertical-align: middle; }
.pub-wf__nums { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.pub-method-section { display: grid; gap: var(--space-5); scroll-margin-top: 80px; }
@media (max-width: 900px) {
  .pub-skel { grid-template-columns: 1fr 1fr; }
  .pub-cols, .pub-cols--even, .pub-tr { grid-template-columns: 1fr; }
  .pub-wf__row { grid-template-columns: 56px minmax(0, 1fr) 96px; }
}
/* 三态：.pub-main .card 的 display:flex 会盖过 components-data.css 的隐藏规则，这里按 data-state 重新收口 */
.pub-main .when-error, .pub-main .when-empty { display: none; }
.pub-main[data-state="error"] .when-error, .pub-main[data-state="empty"] .when-empty { display: flex; }
/* 渲染器挂载点里的区块间距，对齐 .pub-main > * + * */
.pub-main [data-body] { display: grid; gap: var(--space-7); }
.pub-main [data-body] > .pub-cols { gap: var(--space-5); }
.pub-movers { list-style: none; padding: 0; margin: 0; }
/* 方法论图例的小色块（复用 .pub-wf__seg 的颜色类，覆盖它的绝对定位） */
.pub-wf__legend i.pub-wf__seg--train, .pub-wf__legend i.pub-wf__seg--test { position: static; }