/* ============================================================
   股票实时行情卡片 - 样式
   按截图 1:1 还原，含涨绿色 #00a651（中国市场惯例涨为红，
   此处按截图实际样式使用绿色）
   ============================================================ */

/* ------- Reset ------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------- Tokens ------- */
:root {
  --bg-page: #f0f1f5;          /* 外层页面背景 */
  --bg-chip: #f2f3f5;          /* “查看更多”胶囊背景 */
  --bg-card: #ffffff;          /* 卡片底色（按截图视觉也可透明） */

  --text-strong: #1d2129;      /* 标题与数值 */
  --text-mid: #4e5969;         /* 副标题/单位 */
  --text-mute: #86909c;        /* 标签/股票名 */
  --text-faint: #c9cdd4;       /* 更新时间 */

  --up: #00a651;               /* 涨绿（按图） */
  --down: #d92b2b;             /* 跌红（备用） */

  --radius-card: 16px;
  --radius-chip: 999px;
}

/* ------- Card ------- */
.quote-card {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 36px 40px 40px;
  /* 卡片本身无明显边框阴影，与图一致 */
}

/* ------- Header ------- */
.quote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.quote-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: 0.2px;
}

.more-btn {
  background: var(--bg-chip);
  border: none;
  border-radius: var(--radius-chip);
  padding: 7px 16px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-mid);
  cursor: pointer;
  transition: background 0.15s ease;
}
.more-btn:hover {
  background: #e8eaef;
}

/* ------- Stock Identity ------- */
.stock-identity {
  font-size: 14px;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.stock-name {
  color: var(--text-mid);
  margin-right: 6px;
}
.stock-code {
  color: var(--text-mute);
}

/* ------- Price Row ------- */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.price {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--up);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.currency {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-mute);
}
.change-badge {
  display: inline-block;
  background: var(--up);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  align-self: center;
  font-variant-numeric: tabular-nums;
}

/* ------- Update Time ------- */
.update-time {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 28px;
}

/* ------- Metrics Grid ------- */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 24px;
}
.metric-label {
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.metric-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ------- Responsive ------- */
@media (max-width: 480px) {
  .quote-card { padding: 24px 20px; }
  .price { font-size: 40px; }
  .metrics-grid { column-gap: 24px; }
  .metric-value { font-size: 18px; }
}