/* 前台全局样式：禁止横向撑开，但不裁切 fixed 底栏 */
html, body {
  background: #070b19;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body { min-height: 100vh; min-height: 100dvh; }
#app { width: 100%; max-width: 100%; overflow: visible; }

/* iOS 安全区 */
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
.pb-nav-safe { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); }
.pb-detail-safe { padding-bottom: calc(11rem + env(safe-area-inset-bottom, 0px)); }
.page-shell-detail {
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1rem calc(11rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  box-sizing: border-box;
}
.stat-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.stat-grid-4 > div {
  padding: 0.75rem 0.5rem;
  border-radius: 0.75rem;
  background: rgba(15,23,42,.35);
  text-align: center;
  min-width: 0;
}
.stat-grid-4 .stat-val {
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  text-align: center;
}

/* 页面统一容器（对齐 hashcloudsv max-w-md 居中，无溢出） */
.page-shell {
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1rem;
  padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  min-width: 0;
  box-sizing: border-box;
}
.page-shell > *,
.page-stack > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 页面内横向滚动条（分类/排序）不撑开整页 */
.scroll-x {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }

/* 顶部品牌渐变字 */
.brand-text {
  background: linear-gradient(90deg, #22d3ee, #60a5fa, #a855f7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 主按钮渐变 */
.btn-primary {
  background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6);
  transition: filter .2s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.15); }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity: .5; filter: grayscale(.4); }

/* 卡片 */
.hc-card {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(160deg, rgba(15,23,42,.85), rgba(7,11,30,.9));
  border: 1px solid rgba(30,41,59,.7);
  border-radius: 1rem;
}

/* Hero 主卡片 */
.hero-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1rem 1.35rem;
  border-radius: 1.75rem;
  background: linear-gradient(165deg, rgba(15, 23, 42, .92), rgba(7, 11, 30, .96));
  border: 1px solid rgba(51, 65, 85, .55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

@media (min-width: 640px) {
  .hero-card { padding: 1.5rem 1.25rem 1.45rem; }
}

.hero-card-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(59, 130, 246, .12), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(168, 85, 247, .1), transparent 50%);
}

.hero-card > *:not(.hero-card-glow) { position: relative; z-index: 1; }

.hero-paid-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: .01em;
}

.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .22);
  font-size: 10px;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: hero-pulse-live 1.5s ease-in-out infinite;
}

@keyframes hero-pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.9); }
}

.hero-payout {
  margin: 10px 0 18px;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: #fff;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .hero-payout { font-size: 52px; margin-bottom: 20px; }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(30, 41, 59, .55);
  text-align: center;
}

.hero-stats-col { padding: 0 6px; min-width: 0; }

.hero-stats-col--mid {
  border-left: 1px solid rgba(30, 41, 59, .55);
  border-right: 1px solid rgba(30, 41, 59, .55);
}

.hero-stat-val {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.hero-stat-val--cyan { color: #22d3ee; }
.hero-stat-val--purple { color: #a855f7; }
.hero-stat-val--white { color: #f8fafc; }

.hero-stat-label {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  color: #64748b;
  letter-spacing: .01em;
}

@media (min-width: 640px) {
  .hero-stat-val { font-size: 18px; }
  .hero-stat-label { font-size: 10px; }
}

.hero-cta {
  font-size: 14px;
  font-weight: 700;
  padding: 14px 16px;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(59, 130, 246, .22);
}

.hero-footnote {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.65;
  color: #64748b;
  text-align: center;
  letter-spacing: .02em;
}

@media (min-width: 640px) {
  .hero-footnote { font-size: 11px; }
}

/* 实时动态横向滚动 */
.ticker-wrap { position: relative; z-index: 0; width: 100%; flex-shrink: 0; contain: layout paint; }

.ticker-bar {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(7, 11, 30, .92);
  border: 1px solid rgba(30, 41, 59, .65);
  border-radius: .75rem;
  padding: .55rem .75rem;
  overflow: hidden;
}

.ticker-label {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding-right: .75rem;
  margin-right: .75rem;
  border-right: 1px solid rgba(30, 41, 59, .8);
  flex-shrink: 0;
}

.ticker-mask {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-track-h {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tickerX 360s linear infinite;
  will-change: transform;
}

.ticker-item {
  flex-shrink: 0;
  padding: 0 1.25rem;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.ticker-item.is-buy { color: #67e8f9; }
.ticker-item.is-earn { color: #4ade80; }

.ticker-item + .ticker-item {
  border-left: 1px solid rgba(51, 65, 85, .45);
}

@keyframes tickerX {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 数字滚动字体 */
.payout-num { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

/* 收益柱状图 */
.bar-wrap { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.bar-item { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #22d3ee, #3b82f6); opacity: .85; }

/* 弹窗动画 */
.modal-enter-active, .modal-leave-active { transition: opacity .2s; }
.modal-enter-from, .modal-leave-to { opacity: 0; }
.modal-enter-active .modal-panel { transition: transform .22s ease-out; }
.modal-enter-from .modal-panel { transform: translateY(24px) scale(.98); }

/* 输入框 */
.hc-input {
  width: 100%; background: rgba(2,6,23,.8); border: 1px solid #1e293b;
  border-radius: .75rem; padding: .7rem 1rem; font-size: .875rem; color: #e2e8f0;
  outline: none; transition: border-color .2s;
}
.hc-input:focus { border-color: #0891b2; }
.hc-input::placeholder { color: #475569; }

/* 页面切换 */
.page-enter-active { transition: opacity .18s, transform .18s; }
.page-enter-from { opacity: 0; transform: translateY(8px); }

/* 表格行 */
.hc-row { border-bottom: 1px solid rgba(30,41,59,.5); }
.hc-row:last-child { border-bottom: none; }

/* icon 容器内 SVG 自适应 */
.icon-box svg,
.w-3.h-3 svg, .w-3\.5.h-3\.5 svg, .w-4.h-4 svg, .w-4\.5.h-4\.5 svg,
.w-5.h-5 svg, .w-6.h-6 svg, .w-8.h-8 svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tag-hot { background: rgba(245,158,11,.1); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.tag-new { background: rgba(34,211,238,.1); color: #22d3ee; border: 1px solid rgba(34,211,238,.3); }

/* 产品缩略图（对齐 hashcloudsv 青色光晕方图） */
.product-thumb {
  display: flex; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 0.75rem; overflow: hidden;
  background: linear-gradient(135deg, #00d4ff, #0077aa);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.35);
  position: relative;
}
.product-thumb img { display: block; }
.product-icon-box {
  display: flex; height: 2.75rem; width: 2.75rem; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 0.75rem; overflow: hidden;
  background: #020617; border: 1px solid rgba(139,92,246,.2);
  box-shadow: 0 0 12px rgba(124,58,237,.15);
  position: relative;
}

/* 产品列表卡片 */
.product-card {
  display: flex;
  gap: 0.875rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(30,41,59,.6);
  background: rgba(7,11,30,.65);
  transition: border-color .2s;
  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;
}
.product-card:hover { border-color: rgba(34,211,238,.35); }
.product-card .product-thumb { width: 4.5rem; height: 4.5rem; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; appearance: textfield; }