﻿/* 通用基础样式 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
  background: #f5f5f7;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* 涨跌色：国内习惯 红涨绿跌 */
.is-up    { color: #e53935 !important; }
.is-down  { color: #43a047 !important; }
.is-flat  { color: #999 !important; }

.price-blink { animation: blink .25s ease-out; }
@keyframes blink {
  0%   { background: rgba(255, 215, 0, .35); }
  100% { background: transparent; }
}

.quote-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #666;
  color: #aaa;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}
.quote-status.is-open {
  color: #ff4d4f;
  border-color: rgba(255, 77, 79, .45);
  background: rgba(255, 77, 79, .08);
}
.quote-status.is-closed {
  color: #9aa4b2;
  border-color: rgba(154, 164, 178, .35);
  background: rgba(154, 164, 178, .08);
}
/* 店铺跑马灯（报价页 / 大屏） */
.shop-marquee {
  --marquee-color: #e53935;
  --marquee-duration: 20s;
  color: var(--marquee-color);
  min-width: 0;
}
.shop-marquee--quote {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
}
.shop-marquee--quote .shop-marquee__inner {
  width: 90%;
  max-width: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.shop-marquee--quote .shop-marquee__viewport {
  display: flex;
  align-items: center;
  width: 100%;
}
body.quote-app .shop-marquee--quote {
  padding: 1px 0 2px;
  background: linear-gradient(180deg, rgba(0,0,0,.14), transparent);
}
body.quote-minimal .shop-marquee--quote .shop-marquee__inner,
body:not(.quote-app) .shop-marquee--quote .shop-marquee__inner {
  background: rgba(229, 57, 53, .06);
  border-radius: 4px;
}
.sx-head .sx-brand,
.st-head .st-brand,
.sp-head .sp-brand { flex-shrink: 0; }
.shop-marquee--screen-inline {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 clamp(8px, 1.4vw, 22px);
  align-self: stretch;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.shop-marquee--screen-inline .shop-marquee__inner {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 100%;
}
.shop-marquee--screen-inline .shop-marquee__viewport {
  width: 100%;
  display: flex;
  align-items: center;
}
.shop-marquee--screen-inline .shop-marquee__text {
  font-size: clamp(20px, 2.8vw, 42px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  padding-right: clamp(64px, 7vw, 140px);
}
@media (max-width: 900px) {
  .shop-marquee--screen-inline .shop-marquee__text {
    font-size: clamp(16px, 4.2vw, 24px);
    letter-spacing: 0.04em;
    padding-right: 48px;
  }
}
.shop-marquee__inner { min-width: 0; }
.shop-marquee__viewport { overflow: hidden; width: 100%; }
.shop-marquee__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: shop-marquee-scroll var(--marquee-duration) linear infinite;
}
.shop-marquee:hover .shop-marquee__track { animation-play-state: paused; }
.shop-marquee__text {
  white-space: nowrap;
  padding-right: 48px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.shop-marquee--quote .shop-marquee__text {
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  padding-right: 44px;
}
@keyframes shop-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.screen-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.screen-fullscreen {
  border: 1px solid rgba(201, 162, 39, .45);
  background: rgba(201, 162, 39, .1);
  color: #d9b957;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}

/* 风险提示 */
.risk-text {
  padding: 16px;
  font-size: 12px;
  color: #888;
  line-height: 1.7;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.risk-text h3 { font-size: 13px; margin: 0 0 6px; color: #555; }
.risk-text p { margin: 0; }

/* ── 底部 App 导航栏 ── */
.app-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: flex;
  height: 56px;
  background: #18181b;
  border-top: 1px solid #2a2a30;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: #777;
  font-size: 10px;
  text-decoration: none;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tabbar-item.is-active { color: var(--brand, #c9a227); }
.tabbar-item:active { opacity: .7; }
.tabbar-icon { width: 22px; height: 22px; }
.tabbar-icon svg { width: 100%; height: 100%; display: block; }
.tabbar-label { font-weight: 500; letter-spacing: .3px; }

body.has-tabbar { padding-bottom: 56px; }

/* 浅色主题的底部导航栏 */
.about-page .app-tabbar,
body:not(.quote-app) .app-tabbar {
  background: #fff;
  border-top-color: #eee;
}
body:not(.quote-app) .tabbar-item { color: #aaa; }
body:not(.quote-app) .tabbar-item.is-active { color: var(--brand, #c9a227); }

/* about 页 */
.about-page { background: #fff; min-height: 100vh; }
.about-page.has-tabbar { padding-bottom: 64px; }
.about-head {
  position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #eee;
  padding: 14px 16px; display: flex; align-items: center; justify-content: center;
}
.about-head h1 { font-size: 17px; font-weight: 600; margin: 0; }
.about-body { padding: 20px 16px; line-height: 1.8; font-size: 15px; color: #333; }
.about-foot { padding: 16px; text-align: center; color: #999; font-size: 12px; border-top: 1px solid #f0f0f0; }

/* 报价页/大屏底部平台信息 */
.platform-foot-sep { margin: 0 6px; opacity: .6; }
.screen-platform-credit { color: inherit; font-size: 11px; opacity: .45; text-decoration: none; }
.screen-platform-credit:hover { opacity: .65; text-decoration: underline; }
.qa-foot a, .qc-foot a, .qg-foot a, .qt-foot a, .qm-foot a,
.sx-foot-info a, .sp-foot-info a, .st-foot-info a {
  color: inherit;
  text-decoration: none;
}
.contact-tel, .contact-map { text-decoration: underline; text-underline-offset: 2px; }
.platform-foot-link { opacity: .75; }
.platform-foot-link:hover { opacity: 1; }
.qa-foot a:hover, .qc-foot a:hover, .qg-foot a:hover, .qt-foot a:hover, .qm-foot a:hover,
.sx-foot-info a:hover, .sp-foot-info a:hover, .st-foot-info a:hover {
  text-decoration: underline;
}
