/* =============================================================
   Pocket Coach UI 2.0 — Base + 公共组件
   ============================================================= */

/* ---------------- Reset / Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-cn);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-1);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------------- 手机容器 ---------------- */
.phone {
  position: relative;
  z-index: var(--z-view);
  width: 100%;
  max-width: var(--app-max);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

@media (min-width: 520px) {
  body { background: linear-gradient(180deg, #EFEDFA 0%, #E7E4F7 100%); }
  .aurora-bg { opacity: .9; }
  .phone {
    box-shadow: var(--sh-3);
    border-radius: var(--r-2xl);
    margin: 20px auto;
    min-height: calc(100dvh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    background: rgba(255,255,255,.30);
    backdrop-filter: blur(6px);
  }
  .app-view { overflow-y: auto; }
}

/* ---------------- 顶部栏 ---------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-appbar);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--appbar-h);
  padding: calc(var(--sp-2) + var(--safe-t)) var(--gutter) var(--sp-2);
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.42) 70%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.appbar__back {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-1);
  flex: 0 0 auto;
  transition: transform var(--t-fast) var(--ease-standard);
}
.appbar__back:active { transform: scale(.92); }
.appbar__title { font-size: var(--fs-h3); font-weight: 650; letter-spacing: var(--ls-tight); }
.appbar__sub { font-size: var(--fs-xs); color: var(--ink-3); }
.appbar__spacer { flex: 1 1 auto; }

/* ---------------- 主视图 ---------------- */
.app-view {
  flex: 1 1 auto;
  padding: 0 var(--gutter) calc(var(--navbar-h) + var(--safe-b) + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.app-view--flush { padding-left: 0; padding-right: 0; }

/* ---------------- 底部导航 ---------------- */
.navbar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-navbar);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + var(--safe-b));
  margin-top: auto;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -6px 22px rgba(60,45,120,.07);
}
.navbar__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--sp-2) 2px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  transition: color var(--t-fast) var(--ease-standard), background var(--t-fast) var(--ease-standard);
}
.navbar__item .ico { width: 22px; height: 22px; }
.navbar__item:active { transform: scale(.95); }
.navbar__item.is-active { color: var(--brand-1); font-weight: 600; }
.navbar__item.is-active .ico { filter: drop-shadow(0 3px 8px var(--brand-ring)); }

/* ---------------- 卡片 ---------------- */
.card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-1), var(--sh-inner-hi);
  padding: var(--sp-4);
}
.card--solid { background: var(--surface); }
.card--flat { box-shadow: none; background: var(--glass-bg-dim); border-color: var(--glass-stroke); }
.card--pad-lg { padding: var(--sp-5); }
.card__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.card__title { font-size: var(--fs-h3); font-weight: 650; letter-spacing: var(--ls-tight); }
.card__sub { font-size: var(--fs-sm); color: var(--ink-3); }

.sec-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2);
  letter-spacing: var(--ls-wide);
  margin-top: var(--sp-2);
}
.sec-title::before {
  content: ""; width: 4px; height: 14px; border-radius: var(--r-pill);
  background: var(--brand-grad);
}

/* ---------------- 按钮 ---------------- */
.btn {
  --btn-h: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 600;
  letter-spacing: var(--ls-tight);
  transition: transform var(--t-fast) var(--ease-standard),
              box-shadow var(--t-mid) var(--ease-standard),
              opacity var(--t-fast) var(--ease-standard);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.965); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.btn--primary {
  color: var(--ink-inv);
  background: var(--brand-grad);
  box-shadow: var(--sh-brand), var(--sh-inner-hi);
}
.btn--ghost {
  color: var(--brand-1);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--sh-1);
}
.btn--quiet {
  color: var(--ink-2);
  background: var(--ev-hold-bg);
}
.btn--block { width: 100%; }
.btn--lg { --btn-h: 56px; font-size: var(--fs-h3); }
.btn--sm { --btn-h: 38px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--icon { width: 44px; padding: 0; border-radius: var(--r-pill); }

/* 触控区保障：所有可点元素最小 44px */
.btn, .navbar__item, .chip, .tab, .list-row, .entry-card { min-height: 44px; }

/* ---------------- 标签 / 徽章 ---------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-stroke);
  color: var(--ink-2);
}
.chip.is-active {
  color: #fff;
  background: var(--brand-grad);
  border-color: transparent;
  box-shadow: var(--sh-brand);
  font-weight: 600;
}

/* 证据状态徽章 —— 全项目唯一视觉语言 */
.ev {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--sp-2) 3px 6px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  border: 1px solid transparent;
}
.ev__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ev--verified    { color: var(--ev-verified); background: var(--ev-verified-bg); border-color: var(--ev-verified-bd); }
.ev--conditional { color: var(--ev-cond);     background: var(--ev-cond-bg);     border-color: var(--ev-cond-bd); }
.ev--hold        { color: var(--ev-hold);     background: var(--ev-hold-bg);     border-color: var(--ev-hold-bd); }
.ev--blocked     { color: var(--ev-block);    background: var(--ev-block-bg);    border-color: var(--ev-block-bd); }

/* 证据状态条（用于数据行左侧） */
.ev-bar { width: 3px; border-radius: var(--r-pill); align-self: stretch; min-height: 30px; }
.ev-bar--verified { background: var(--ev-verified); }
.ev-bar--conditional { background: var(--ev-cond); }
.ev-bar--hold { background: var(--ev-hold); }
.ev-bar--blocked { background: var(--ev-block); }

/* ---------------- 列表行 ---------------- */
.list { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--glass-stroke);
}
.list-row:last-child { border-bottom: none; }
.list-row__main { flex: 1 1 auto; min-width: 0; }
.list-row__t { font-size: var(--fs-body); font-weight: 600; }
.list-row__d { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.list-row__val { font-family: var(--font-num); font-weight: 650; font-size: var(--fs-h3); }
.list-row__chev { color: var(--ink-4); flex: 0 0 auto; }

/* ---------------- 数值 ---------------- */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.num--up { color: var(--pnl-up); }
.num--down { color: var(--pnl-down); }
.num--flat { color: var(--pnl-flat); }

/* ---------------- 数据表（基金净值） ---------------- */
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dtable th {
  text-align: left; font-weight: 600; color: var(--ink-3);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
}
.dtable td {
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0;
  border-top: 1px solid var(--glass-stroke);
  vertical-align: middle;
}
.dtable td:last-child, .dtable th:last-child { padding-right: 0; text-align: right; }

/* ---------------- 分段控件 ---------------- */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--ev-hold-bg);
  border-radius: var(--r-pill);
}
.seg__item {
  flex: 1 1 0; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  transition: all var(--t-fast) var(--ease-standard);
}
.seg__item.is-active {
  color: #fff; background: var(--brand-grad); box-shadow: var(--sh-brand);
}

/* ---------------- 进度 / 条形 ---------------- */
.bar { height: 8px; border-radius: var(--r-pill); background: var(--ev-hold-bg); overflow: hidden; }
.bar__fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--brand-grad);
  transform-origin: left center;
  animation: bar-grow var(--t-slow) var(--ease-out) both;
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 环形评分 */
.ring { position: relative; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--ev-hold-bg); }
.ring__val { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset var(--t-slow) var(--ease-out); }
.ring__label {
  position: absolute; text-align: center;
}
.ring__score { font-family: var(--font-num); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ring__unit { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }

/* ---------------- 状态：加载 / 空 / 错误 ---------------- */
.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-4);
  text-align: center;
  color: var(--ink-3);
}
.state__title { font-size: var(--fs-h3); font-weight: 650; color: var(--ink-1); }
.state__desc { font-size: var(--fs-sm); max-width: 30ch; line-height: var(--lh-body); }
.state__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.state__art { width: 96px; height: 96px; }

/* 加载：三球脉冲 */
.spinner { display: flex; gap: 8px; }
.spinner i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-grad);
  animation: spin-bounce 1.2s var(--ease-standard) infinite;
}
.spinner i:nth-child(2) { animation-delay: .16s; }
.spinner i:nth-child(3) { animation-delay: .32s; }
@keyframes spin-bounce {
  0%, 80%, 100% { transform: scale(.55); opacity: .45; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* 骨架屏 */
.sk { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--ev-hold-bg) 25%, rgba(255,255,255,.6) 37%, var(--ev-hold-bg) 63%); background-size: 400% 100%; animation: sk-shim 1.4s ease-in-out infinite; }
.sk--line { height: 14px; margin: 8px 0; }
.sk--w60 { width: 60%; } .sk--w40 { width: 40%; } .sk--w80 { width: 80%; }
.sk--block { height: 84px; }
@keyframes sk-shim { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---------------- Toast ---------------- */
.toast-host {
  position: fixed; left: 0; right: 0; bottom: calc(84px + var(--safe-b));
  z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  max-width: min(340px, calc(100vw - 48px));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(23,19,49,.90);
  color: #fff;
  font-size: var(--fs-sm); line-height: var(--lh-body);
  box-shadow: var(--sh-3);
  backdrop-filter: blur(10px);
  animation: toast-in var(--t-mid) var(--ease-spring) both;
}
.toast--warn { background: rgba(160,95,0,.94); }
.toast--err { background: rgba(190,40,46,.94); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------------- 通用工具 ---------------- */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.divider { height: 1px; background: var(--glass-stroke); margin: var(--sp-2) 0; }