/* ==========================================================================
   components.css — 按钮 / 标签 / 卡片 / 图标块 / 问答 / 筛选片 / 图位
   ========================================================================== */

/* ---- 按钮 ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 18px 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fz-sub);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}

.btn--primary {
  background: var(--brand);
  color: var(--text-invert);
  box-shadow: 0 0 36px var(--brand-glow);
}

.btn--primary:hover {
  background: var(--brand-hover);
  color: var(--text-invert);
}

.btn--ghost {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.btn--pink {
  background: var(--pink);
  color: var(--bg);
}

.btn--pink:hover {
  background: #ff8dbe;
  color: var(--bg);
}

.btn--sm {
  padding: 9px 24px;
  font-size: var(--fz-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  box-shadow: none;
}

.btn--md {
  padding: 16px 36px;
  font-size: 17px;
  border-radius: var(--r-md);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* 双行按钮：主标题 + 说明（下载区用） */
.btn--stack {
  flex-direction: column;
  gap: 6px;
  padding: 20px 48px;
  border-radius: var(--r-lg);
}

.btn__sub {
  font-size: var(--fz-2xs);
  font-weight: 400;
  line-height: 1.4;
}

.btn--primary .btn__sub {
  color: var(--text-invert);
}

.btn--ghost .btn__sub {
  color: var(--text-muted);
}

/* ---- 标签 / 胶囊 ----------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  color: var(--text-muted);
  font-size: var(--fz-2xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.tag--blue {
  background: var(--brand-surface);
  color: var(--brand-ink);
}

.tag--pink {
  background: var(--pink-surface);
  color: var(--pink);
}

.tag--gold {
  background: var(--gold-surface);
  color: var(--gold);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font-size: var(--fz-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.pill--pink {
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px rgba(74, 134, 232, 0.5);
  color: var(--pink);
}

/* ---- 卡片 ------------------------------------------------------------------ */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-7);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.card--solid {
  background: var(--surface);
}

.card--frame {
  background: var(--frame);
}

.card--flat {
  background: transparent;
}

.card--brand {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(74, 134, 232, 0.45), 0 0 60px rgba(74, 134, 232, 0.18);
}

.card--warn {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

.card--wide {
  padding: var(--sp-8);
  border-radius: var(--r-xl);
}

.card__title {
  color: var(--text);
  font-size: var(--fz-card);
  font-weight: 700;
}

.card__title--lg {
  font-size: 23px;
}

.card__text {
  font-size: var(--fz-sm);
  line-height: var(--lh-body);
}

.card__text--sm {
  font-size: var(--fz-xs);
}

.card__meta {
  font-size: var(--fz-2xs);
  font-weight: 600;
  color: var(--brand-ink);
}

.card__meta--gold {
  color: var(--gold);
}

.card__title--xl {
  font-size: var(--fz-h4);
}

.card__title--2xl {
  font-size: 30px;
}

.meta-line {
  font-size: var(--fz-xs);
  color: var(--text-dim);
}

.card__num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-bright);
}

.card__num--pink {
  color: var(--pink);
}

.card__num--gold {
  color: var(--gold);
}

/* ---- 图标块 ---------------------------------------------------------------- */
.icon-tile {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: var(--brand-bright);
}

.icon-tile--pink {
  color: var(--pink);
}

.icon-tile--gold {
  color: var(--gold);
}

/* ---- 图位 ------------------------------------------------------------------ */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot--4x3 {
  flex: 0 0 480px;
  width: 480px;
  aspect-ratio: 4 / 3;
}

/* 设计稿里这些图位是 480x360 的 FILL 裁切，但素材是 1080x2412 的竖屏截图：
   居中裁切只会露出屏幕中段一行海报，把这一节真正要讲的界面（标题栏、换源标签、
   搜索框）整个裁掉。锚点改到顶部，让每张图都能被认出是哪个界面。
   横屏素材（播放器 1080x484）纵向不会被裁，锚点对它无影响。 */
.shot--4x3 img {
  object-position: top center;
}

.shot--wide {
  aspect-ratio: 16 / 9;
}

/* 带内衬的图位（亮点网格里的实机截图） */
.shot--inset {
  padding: 10px;
  background: var(--frame);
}

.shot--inset img {
  border-radius: var(--r-md);
}

@media (max-width: 1024px) {
  .shot--4x3 {
    flex: 0 0 380px;
    width: 380px;
  }
}

@media (max-width: 860px) {
  .shot--4x3 {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* 手机外壳：8px 内衬 + 深底，内屏再套一层圆角 */
.phone {
  --w: 250px;
  width: var(--w);
  max-width: 100%;
  flex: 0 0 auto;
  padding: 8px;
  border-radius: var(--r-phone);
  background: var(--frame);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 24px 60px rgba(74, 134, 232, 0.22);
}

.phone--lg {
  --w: 300px;
  border-radius: var(--r-phone-lg);
  box-shadow: inset 0 0 0 1px var(--line-solid), 0 28px 72px rgba(255, 0, 110, 0.2);
}

.phone img {
  width: 100%;
  aspect-ratio: 284 / 632;
  object-fit: cover;
  border-radius: 30px;
}

/* 横屏展示框 */
.screen {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
  border-radius: var(--r-xl);
  background: var(--frame);
  box-shadow: inset 0 0 0 1px var(--line-strong),
    0 24px 64px rgba(255, 215, 0, 0.14);
}

.screen img {
  width: 100%;
  aspect-ratio: 544 / 320;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* ---- 问答条目 -------------------------------------------------------------- */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 首页那组问答在设计稿里行距更松 */
.qa-list--airy {
  gap: var(--sp-8);
}

.qa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 26px 36px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.qa__q {
  color: var(--text);
  font-size: var(--fz-sub);
  font-weight: 600;
  line-height: 1.5;
}

.qa__a {
  font-size: var(--fz-sm);
  line-height: var(--lh-body);
}

/* ---- 筛选片 ---------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.filter {
  padding: 9px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fz-xs);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}

.filter:hover {
  color: var(--text);
}

.filter[aria-pressed="true"] {
  background: var(--brand);
  box-shadow: none;
  color: var(--text-invert);
  font-weight: 600;
}

/* ---- 数据格 ---------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.stat__label {
  font-size: var(--fz-2xs);
  color: var(--text-dim);
}

.stat__value {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---- 提示条 ---------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.notice__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--brand-ink);
}

.notice__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.notice__title {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.notice__text {
  font-size: var(--fz-xs);
  line-height: var(--lh-body);
}

/* ---- CTA 条 ---------------------------------------------------------------- */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: 44px 48px;
  border-radius: var(--r-2xl);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(74, 134, 232, 0.35);
}

.cta-band--pink {
  box-shadow: inset 0 0 0 1px var(--pink-line);
}

.cta-band__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cta-band__title {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
}

.cta-band__text {
  font-size: var(--fz-sm);
}

/* ---- 长文阅读位（全站唯一阅读宽度档） -------------------------------------- */
.prose {
  max-width: var(--w-prose);
  margin-inline: auto;
  font-size: var(--fz-sub);
  line-height: var(--lh-loose);
}

.prose--start {
  margin-inline: 0;
}

@media (max-width: 760px) {
  .card {
    padding: var(--sp-6);
  }

  .card--wide {
    padding: var(--sp-7);
  }

  .qa {
    padding: var(--sp-6) var(--sp-5);
  }

  .notice {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-6);
  }

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
    padding: var(--sp-7);
  }

  .btn {
    padding: 15px 30px;
    font-size: var(--fz-body);
  }

  .btn--stack {
    padding: 18px 30px;
  }

  .btn--md {
    padding: 14px 28px;
  }
}