/* 加马影像助手官网 — 蓝色科技风，匹配品牌 logo 主色 #0C81E2 */

:root {
  --bg: #f7f9fb;
  --bg-elevated: #ffffff;
  --text: #14181c;
  --text-muted: #4f565e;
  --text-subtle: #848b93;
  --border: #e1e7ee;
  --accent: #0c81e2;
  --accent-hover: #0a66c2;
  --accent-text: #0a66c2; /* 文字链接/图标安全档：白底 5.7:1 过 AA（评审 P0-1） */
  --accent-soft: #e3f0fc;
  --safelight: #0c81e2;
  --status-soon: #084b8a;
  --status-soon-bg: #e8f2fd;
  --radius: 12px;
  /* C1 2026-09-17 新增（§4.5 收敛条款：不动上面既有 token，只增两档圆角 + 徽章三语义） */
  --radius-lg: 16px;
  --radius-sm: 10px;
  --badge-accent-bg: #e3f0fc;
  --badge-accent-fg: #0a66c2;
  --badge-neutral-bg: #f0f2f5;
  --badge-neutral-fg: #4f565e;
  --badge-success-bg: #e7f5ee;
  --badge-success-fg: #1f6b3a;
  --shadow: 0 1px 3px rgba(16, 32, 55, 0.06), 0 12px 32px rgba(16, 32, 55, 0.06);
  --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Code", "Consolas", monospace;
  --max-width: 1080px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* C2 2026-09-17（§4.5-1）：标题字重 600 全局兜底，组件不再逐处声明；
   组件级 class 规则仍可覆盖（如 .pick-title 650 不受影响）。 */
h1,
h2,
h3,
h4 {
  font-weight: 600;
}

.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

.hidden {
  display: none !important;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 249, 251, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.brand-mark {
  display: inline-flex;
  color: var(--accent-text);
}

.brand-mark img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}

.header-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}


.brand-link {
  text-decoration: none;
  color: inherit;
}

.header-nav a[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 600;
}





.page-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-family: var(--font-mono);
}

.page-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 650;
  line-height: 1.3;
}

.features-page {
  padding: 1.75rem 0 2.25rem;
  background: var(--bg);
  border-top: none;
}

.container-features {
  width: min(100% - 2rem, 1080px);
}

.features-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: end;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.features-head-text .section-lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 36em;
}

.flow-compact {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.flow-compact li {
  position: relative;
  margin: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 999px;
}

.flow-compact li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.45rem;
  color: var(--text-subtle);
  font-size: 0.7rem;
  transform: translateX(100%);
}

.feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  counter-reset: feat;
}

.feature-card {
  margin: 0;
  padding: 0.9rem 0.95rem 0.85rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  counter-increment: feat;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 100%;
}

.feature-card h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 1.3;
}

.feature-card h2::before {
  content: counter(feat, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-subtle);
  letter-spacing: 0.03em;
}

.feature-card .feature-summary {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.feature-points {
  margin: 0.15rem 0 0;
  padding: 0 0 0 0.95rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  flex: 1;
}

.feature-points li {
  margin: 0.12rem 0;
}

.feature-out {
  margin: 0.35rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.feature-out span {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}


.features-cta {
  margin: 0.85rem 0 0;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .features-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.features-page .feature-item h2 {
  margin: 0 0 0.45rem;
  font-size: 1.12rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 650;
}

.features-page .feature-item h2::before {
  content: counter(feat, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.brand-sub {
  font-size: 0.8rem;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.header-nav {
  display: flex;
  gap: 1.6rem;
  margin-left: 0;
  justify-content: center;
}

.header-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s;
}

.header-nav a:hover {
  color: var(--accent-text);
}

/* Hero：口号位，不做功能清单 */

.hero {
  padding: 5rem 0 4rem;
  background: var(--bg);
}

.hero-landing {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 3.2rem 0 3rem;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(12, 129, 226, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 129, 226, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}

.hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.deco {
  position: absolute;
  border: 1.5px solid rgba(12, 129, 226, 0.16);
}

.deco-aperture {
  width: 88px;
  height: 88px;
  left: 8%;
  top: 18%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 18px rgba(12, 129, 226, 0.10);
}

.deco-sprocket {
  width: 18px;
  height: 120px;
  right: 10%;
  top: 22%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 10px,
      rgba(12, 129, 226, 0.14) 10px 18px
    );
  border: none;
}

.deco-frame {
  width: 140px;
  height: 96px;
  left: 12%;
  bottom: 18%;
  border-radius: 6px;
}

.btn-download {
  position: relative;
  min-width: 260px;
  justify-content: center;
  border-radius: 14px;
  box-shadow: 0 10px 0 -6px var(--safelight), 0 18px 40px rgba(12, 129, 226, 0.22);
}

.os-icon {
  flex-shrink: 0;
}

.os-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.os-card {
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.os-card:hover,
.os-card.is-active {
  color: var(--accent-text);
  border-color: var(--accent-text);
}

.os-card:focus-visible {
  outline: 2px solid var(--safelight);
  outline-offset: 2px;
}






















@media (max-width: 900px) {
  .highlights-grid {
    grid-template-columns: 1fr;
  }

  .app-preview-body {
    grid-template-columns: 1fr;
  }

  .app-preview-body aside {
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.hero-inner {
  max-width: 640px;
}

.hero-inner-center {
  margin-inline: auto;
  text-align: center;
}

.hero-tag {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-family: var(--font-mono);
}

.hero-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.hero-desc {
  margin: 0 0 2rem;
  font-size: 1.05rem;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.hero-actions-center {
  justify-content: center;
}

.hero-actions .update-message,
.hero-actions .download-hint,
.hero-actions .config-error {
  flex-basis: 100%;
}

.hero-meta {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.btn-lg {
  padding: 0.9rem 1.75rem;
  font-size: 1.05rem;
}

/* Features：主内容区，视觉与下载区明显区分 */

.features {
  padding: 3rem 0 3.5rem;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}


.section-lead {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}









@media (max-width: 720px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .header-nav {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions-center .btn {
    justify-content: center;
  }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--accent-text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--accent-soft);
}

.version-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.update-message {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-subtle);
  max-width: 28em;
}

.download-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent-text);
  max-width: 32em;
}

.btn-primary.is-downloading {
  opacity: 0.85;
  pointer-events: none;
}

/* Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(92vw, 420px);
  padding: 0.85rem 1.15rem;
  border-radius: 10px;
  background: #1c2128;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(28, 33, 40, 0.22);
  animation: toast-in 0.22s ease-out;
}


@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.config-error {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #084b8a;
  background: #e8f2fd;
  border: 1px solid #bcdcf5;
  border-radius: var(--radius);
}

/* Support */



.support-hint {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
}


.meta-row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.meta-row dt {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-subtle);
}

.meta-row dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* QR panel */


.qr-frame {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.qr-placeholder {
  margin: 0;
  padding: 1rem;
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-subtle);
  line-height: 1.5;
}

#download-version {
  font-family: var(--font-mono);
  color: var(--text);
}

/* Footer：客服收纳位，不当成第三个内容页 */

.site-footer { padding: 0; }




.footer-phone-label {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-subtle);
}

.qr-frame-sm {
  width: 140px;
  height: 140px;
}

.qr-frame-sm .qr-placeholder {
  font-size: 0.75rem;
  padding: 0.5rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.15rem 0 1.5rem;
}

.footer-brand {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.footer-icp {
  margin: 0;
  font-size: 0.8rem;
}

.footer-icp a {
  color: var(--text-subtle);
  text-decoration: none;
}

.footer-icp a:hover {
  color: var(--text-muted);
  text-decoration: underline;
}

/* Login */

.brand-link {
  text-decoration: none;
  color: inherit;
}

.login-main {
  padding: 2.5rem 0 3rem;
  min-height: 60vh;
}

.login-card {
  max-width: 460px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 2rem;
}


.login-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.login-desc {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.login-state {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.login-state[data-state="error"] {
  background: #f8e8e6;
  color: #8a2f2a;
}

.login-state[data-state="ok"] {
  background: #e7f3ea;
  color: #1f6b3a;
}

.ticket-panel {
  margin-bottom: 1.25rem;
}

.ticket-hint {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.login-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.field-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  background: #fff;
}

.sms-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.sms-row .field-input {
  flex: 1;
  min-width: 0;
}

.sms-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.login-note {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--text-subtle);
  line-height: 1.5;
}

.login-success {
  margin: 0 0 0.75rem;
  color: #1f6b3a;
}

.album-panel {
  margin: 0.25rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.album-heading {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

/* 权益两栏（M4）：云空间 / 算力点 分开展示，两种额度不同名 */
.ent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}

.ent-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.ent-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.ent-value {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.ent-note {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
}

.ent-bar {
  margin-top: 0.5rem;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.ent-bar-fill {
  height: 100%;
  background: #0c81e2;
  transition: width 0.3s ease;
}

.album-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.album-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.album-info {
  min-width: 0;
  flex: 1;
}

.album-title {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.album-url {
  display: block;
  word-break: break-all;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.album-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* —— 网页直传选片（轻量场）①：建场成功出链卡 + 场次列表增强（account 控制台）—— */
.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
}

.link-card {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.link-card-title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.link-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.link-card-label {
  flex: 0 0 auto;
  min-width: 4.5em;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.link-card-row .album-url {
  flex: 1 1 12em;
}

.pin-big {
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  font-family: var(--font-mono);
  color: var(--accent-text);
}

.row-detail {
  padding: 0.6rem 0.75rem;
  border-top: 1px dashed var(--border);
  background: var(--bg-elevated);
}

.detail-group-head {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.detail-photo-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-photo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.detail-photo-name {
  font-family: var(--font-mono);
  word-break: break-all;
}

.detail-photo-note {
  color: var(--text-muted);
}

.detail-del {
  margin-left: auto;
}

body.pick-page {
  --ink: #12110f;
  --surface: #1c1b18;
  --elev: #25231f;
  --line: #3a372f;
  --pick-text: #f3f0e8;
  --muted: #a39e93;
  --faint: #6e6a62;
  --ok: #2f8f5b;
  --fix: #c9892c;
  --warn: #c45c4a;
  --safelight-ink: #1a1408;
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%, rgba(227, 166, 74, 0.14), transparent 55%),
    var(--ink);
  color: var(--pick-text);
  min-height: 100dvh;
}

body.pick-page .config-error {
  color: #e08a7a;
  background: #3a1e1a;
  border-color: rgba(196, 92, 74, 0.45);
}

.pick-header {
  padding: 1.05rem 0 0.45rem;
}

.pick-header-inner {
  max-width: 1100px;
}

.pick-brand {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pick-title {
  margin: 0.2rem 0 0.15rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 650;
  color: var(--pick-text);
  line-height: 1.3;
}

.pick-count {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.pick-main {
  padding: 0.35rem 0 7.5rem;
}

.pick-hint {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .pick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pick-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body.pick-page.is-purpose-case {
  --ink: #12110F;
  --safelight: #E3A64A;
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%, rgba(227, 166, 74, 0.14), transparent 55%),
    #12110F;
}

body.is-purpose-case .pick-header-inner,
body.is-purpose-case .pick-main > .container {
  max-width: 720px;
}

body.is-purpose-case .pick-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 4px;
}

@media (min-width: 768px) {
  body.is-purpose-case .pick-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 4px;
  }
}

@media (min-width: 1100px) {
  body.is-purpose-case .pick-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 4px;
  }
}

body.is-purpose-case .pick-card {
  border: 0;
  border-radius: 2px;
  background: #25231F;
}

body.is-purpose-case .pick-img-wrap,
body.is-purpose-case .pick-img {
  aspect-ratio: 1;
}

body.is-purpose-case #pick-submit,
body.is-purpose-case #pick-filters,
body.is-purpose-case #pick-units,
body.is-purpose-case #pick-foot-count,
body.is-purpose-case #pick-foot,
body.is-purpose-case .pick-badge,
body.is-purpose-case .pick-meta,
body.is-purpose-case #pick-book,
body.is-purpose-case #book-panel,
body.is-purpose-case #viewer-compare,
body.is-purpose-case #viewer-pin,
body.is-purpose-case #viewer-note,
body.is-purpose-case #viewer-actions,
body.is-purpose-case #viewer-compare-strip {
  display: none !important;
}

body.pick-page.is-purpose-portfolio {
  --ink: #12110F;
  --safelight: #E3A64A;
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%, rgba(227, 166, 74, 0.14), transparent 55%),
    #12110F;
}

body.is-purpose-portfolio .pick-header-inner,
body.is-purpose-portfolio .pick-main > .container {
  max-width: 375px;
}

body.is-purpose-portfolio .pick-brand {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}

body.is-purpose-portfolio .pick-title {
  font-family: "Newsreader", "Noto Serif SC", serif;
  font-size: 28px;
  font-weight: 600;
  margin: 8px 0 4px;
}

body.is-purpose-portfolio .pick-hint {
  font-size: 14px;
  margin: 0 0 18px;
}

body.is-purpose-portfolio .pick-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  body.is-purpose-portfolio .pick-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (min-width: 1100px) {
  body.is-purpose-portfolio .pick-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

body.is-purpose-portfolio .pick-card {
  background: #1C1B18;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}

body.is-purpose-portfolio .pick-img-wrap,
body.is-purpose-portfolio .pick-img {
  aspect-ratio: 4 / 3;
}

body.is-purpose-portfolio .pick-meta {
  display: block !important;
  padding: 8px 8px 10px;
  font-size: 12px;
  color: var(--muted);
}

body.is-purpose-portfolio .pick-meta b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--pick-text, #F3F0E8);
}

body.is-purpose-portfolio #pick-submit,
body.is-purpose-portfolio #pick-filters,
body.is-purpose-portfolio #pick-units,
body.is-purpose-portfolio #pick-foot-count,
body.is-purpose-portfolio #pick-foot,
body.is-purpose-portfolio .pick-badge,
body.is-purpose-portfolio .pick-mark,
body.is-purpose-portfolio .pick-note,
body.is-purpose-portfolio #book-panel,
body.is-purpose-portfolio #viewer-compare,
body.is-purpose-portfolio #viewer-pin,
body.is-purpose-portfolio #viewer-note,
body.is-purpose-portfolio #viewer-actions,
body.is-purpose-portfolio #viewer-compare-strip {
  display: none !important;
}

body.pick-page.is-purpose-book {
  --ink: #12110F;
  --safelight: #E3A64A;
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%, rgba(227, 166, 74, 0.14), transparent 55%),
    #12110F;
}

body.is-purpose-book .pick-header-inner,
body.is-purpose-book .pick-main > .container {
  max-width: 420px;
}

body.is-purpose-book .pick-title {
  font-family: var(--font-display);
}

body.is-purpose-book #pick-submit,
body.is-purpose-book #pick-filters,
body.is-purpose-book #pick-units,
body.is-purpose-book #pick-grid,
body.is-purpose-book #pick-foot-count,
body.is-purpose-book #pick-foot,
body.is-purpose-book #pick-book,
body.is-purpose-book .pick-badge,
body.is-purpose-book #viewer-compare,
body.is-purpose-book #viewer-pin,
body.is-purpose-book #viewer-note {
  display: none !important;
}

#pick-book {
  display: none;
  margin: 12px auto 0;
  max-width: 220px;
  text-align: center;
  text-decoration: none;
  color: #1a1408;
  background: #E3A64A;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-weight: 650;
}

body.is-purpose-portfolio #pick-book.is-on {
  display: block;
}

.book-panel {
  margin-top: 8px;
}

.book-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.book-dow {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted, #a39e93);
}

.book-day {
  min-height: 40px;
  border: 1px solid #3a372f;
  background: #25231f;
  color: #6e6a62;
  border-radius: 8px;
  font-size: 0.9rem;
}

.book-day.is-other {
  opacity: 0.35;
}

.book-day.is-open {
  color: #F3F0E8;
  border-color: #E3A64A;
  cursor: pointer;
}

.book-day.is-on {
  background: #E3A64A;
  color: #1a1408;
  font-weight: 700;
}

.book-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.book-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #a39e93;
}

.book-suggest {
  color: #E3A64A;
  font-size: 0.75rem;
  margin-left: 4px;
}

.book-field input,
.book-field textarea {
  background: #1c1b18;
  border: 1px solid #3a372f;
  color: #F3F0E8;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font: inherit;
}

body.is-purpose-book #book-send.pick-submit {
  background: #E3A64A;
  color: #1a1408;
  border: 0;
  min-height: 48px;
  font-weight: 700;
}

.book-done {
  text-align: center;
  color: #F3F0E8;
  line-height: 1.7;
  padding: 1.2rem 0;
}

.book-done p {
  margin: 0.2rem 0;
}

.pick-case-meta {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}

.case-video-row {
  margin-top: 14px;
}

.case-video-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 10px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
}

.case-video-play {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #E3A64A;
  color: #1A1408;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.case-video-copy b {
  display: block;
  font-weight: 600;
}

.case-video-copy span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.pick-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.pick-card:not(.is-video) {
  cursor: pointer;
}

.pick-img-wrap {
  position: relative;
  overflow: hidden;
}

.pick-grid.is-video {
  grid-template-columns: 1fr;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.pick-card.is-video .pick-img-wrap {
  background: #000;
}

.pick-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
  vertical-align: middle;
  position: relative;
  z-index: 2;
}

.pick-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
  width: 100%;
}

.pick-duration {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  z-index: 3;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  pointer-events: none;
}

.pick-cmt {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 3;
  min-width: 1.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  background: var(--safelight);
  color: var(--safelight-ink);
  pointer-events: none;
}

.pick-tc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
  width: 100%;
}

.pick-tc {
  min-height: 32px;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--pick-text);
  cursor: pointer;
  font-family: var(--font-mono);
}

.pick-tc:active,
.pick-tc.is-on {
  border-color: var(--safelight);
  color: var(--safelight);
}

.pick-mini-btn {
  flex: 1;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: 650;
  padding: 0.35rem 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--pick-text);
  cursor: pointer;
}

.pick-mini-btn.is-on {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.pick-mini-btn.is-mark {
  border: 0;
  background: var(--safelight);
  color: var(--safelight-ink);
}

.pick-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  color: #eee;
  pointer-events: none;
}

.pick-badge.is-on {
  background: var(--ok);
  color: #fff;
}

.pick-badge.is-revise {
  background: var(--fix);
  color: #fff;
}

.pick-badge.is-unseen {
  background: #555;
  color: #fff;
}

.pick-badge.is-empty {
  display: none;
}

.pick-foot-count {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--pick-text);
}

.pick-gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(227, 166, 74, 0.22), transparent 58%),
    var(--ink);
}

.pick-gate.hidden {
  display: none;
}

.pick-gate-card {
  width: min(420px, 100%);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.5rem 0.25rem 0.2rem;
  text-align: center;
}

.pick-gate-cover {
  width: 148px;
  height: 112px;
  margin: 0 auto 0.35rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(227, 166, 74, 0.18);
  background: linear-gradient(135deg, #6a5a48 0%, #2a3238 48%, #1a2228 100%);
}

.pick-gate-cover .beam {
  position: absolute;
  left: 18%;
  top: -20%;
  width: 42%;
  height: 80%;
  background: linear-gradient(180deg, rgba(227, 166, 74, 0.35), transparent);
  transform: rotate(18deg);
}

.pick-gate-cover .win {
  position: absolute;
  right: 18%;
  top: 22%;
  width: 28%;
  height: 36%;
  background: rgba(243, 240, 232, 0.18);
  border-radius: 2px;
}

.pick-pins {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.35rem 0 0.55rem;
}

.pick-pin {
  width: 52px;
  height: 58px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--pick-text);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
  caret-color: var(--safelight);
}

.pick-pin.is-on {
  border-color: var(--safelight);
}

.pick-gate-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.pick-gate .pick-submit {
  width: 100%;
  max-width: 280px;
  min-height: 48px;
}

.pick-gate .pick-legal {
  margin-top: 1.15rem;
}

body.pick-gated .pick-header,
body.pick-gated .pick-main,
body.pick-gated .pick-footer {
  visibility: hidden;
}

.pick-card.is-on {
  border-color: var(--ok);
}

.pick-card.is-revise {
  border-color: var(--fix);
}

.pick-card.is-unseen {
  border-color: var(--line);
}

.pick-card.is-locked .pick-img {
  cursor: default;
}

.pick-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: pointer;
  background: #000;
  position: relative;
  z-index: 2;
}

.pick-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem 0.45rem;
  flex-wrap: wrap;
}

.pick-name {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.pick-mark {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--faint);
}

.pick-card.is-on .pick-mark {
  color: #7dcc96;
}

.pick-card.is-revise .pick-mark {
  color: var(--fix);
}

.pick-note {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: #161412;
  color: var(--pick-text);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.5rem 0.65rem 0.65rem;
  resize: vertical;
  min-height: 2.6rem;
}

.pick-footer {
  position: sticky;
  bottom: 0;
  padding: 0.7rem 1rem 1.15rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.8rem;
  background: linear-gradient(180deg, transparent, rgba(18, 17, 15, 0.92) 18%, var(--ink));
  border-top: 1px solid var(--line);
}

.pick-legal {
  margin: 0.15rem 0 0.65rem;
  color: var(--faint);
  font-size: 0.68rem;
}

.pick-banner {
  margin: 0.35rem 0 0;
  color: #7dcc96;
  font-size: 0.85rem;
}

body.pick-page .pick-submit.btn-primary {
  background: var(--safelight);
  color: var(--safelight-ink);
  min-height: 48px;
  min-width: 11rem;
  font-weight: 700;
}

body.pick-page .pick-submit.btn-primary:hover {
  background: #d4963c;
}

.pick-page.pick-locked .pick-submit:not(.is-amend) {
  display: none;
}

body.pick-page .pick-submit.btn-primary.is-amend {
  background: transparent;
  color: var(--safelight);
  border: 1px solid var(--safelight);
}

body.pick-page .pick-submit.btn-primary.is-amend:hover {
  background: rgba(232, 176, 80, 0.16);
}

.pick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.pick-filter {
  min-height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.pick-filter.is-on {
  background: var(--pick-text);
  color: var(--ink);
  border-color: var(--pick-text);
  font-weight: 650;
}

.pick-units {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.35rem 0 0.75rem;
}

.pick-filter.pick-unit.is-on {
  background: transparent;
  color: var(--safelight);
  border-color: var(--safelight);
  font-weight: 650;
}

.pick-empty {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.pick-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--pick-text);
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0 1rem;
}

.pick-viewer.hidden {
  display: none;
}

body.pick-viewing {
  overflow: hidden;
}

.pick-viewer-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem 0.35rem 0.85rem;
}

.pick-viewer-tools {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.pick-viewer-tool {
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--elev);
  color: var(--pick-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.pick-viewer-tool.is-on {
  border-color: var(--safelight);
  color: var(--safelight);
  background: transparent;
}

.pick-viewer-zoom {
  display: flex;
  gap: 0.25rem;
}

.pick-viewer-zoom-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--elev);
  color: var(--pick-text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.pick-viewer-idx {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pick-viewer-close {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--pick-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.pick-viewer-stage {
  position: relative;
  flex: 1;
  min-height: 42vh;
  margin: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1e22;
}

.pick-viewer-stage.is-zoomed {
  cursor: grab;
}

.pick-viewer-stage.is-zoomed .pick-viewer-nav {
  opacity: 0.4;
}

.pick-viewer-frame {
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  transform-origin: center center;
}

.pick-viewer-img {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  max-height: min(68vh, 720px);
  object-fit: contain;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
}

.pick-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.pick-pin-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--safelight);
  border: 2px solid #1a1408;
  box-shadow: 0 0 0 3px rgba(227, 166, 74, 0.35);
}

.pick-viewer-stage.is-compare {
  gap: 0.35rem;
  align-items: stretch;
}

.pick-viewer-stage.is-compare .pick-viewer-frame {
  flex: 1;
  max-width: calc(50% - 0.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pick-viewer-stage.is-compare .pick-viewer-img {
  max-height: min(52vh, 560px);
}

.pick-compare-strip {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.35rem 1rem 0.1rem;
  -webkit-overflow-scrolling: touch;
}

.pick-compare-strip.hidden {
  display: none;
}

.pick-compare-thumb {
  flex: 0 0 auto;
  min-height: 36px;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

.pick-compare-thumb.is-on {
  color: var(--safelight);
  border-color: var(--safelight);
  font-weight: 650;
}

.pick-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(18, 17, 15, 0.45);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  display: grid;
  place-items: center;
}

.pick-viewer-nav.prev { left: 0.3rem; }
.pick-viewer-nav.next { right: 0.3rem; }

.pick-viewer-name {
  margin: 0.55rem 1rem 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.pick-viewer-actions {
  display: flex;
  gap: 0.45rem;
  padding: 0 1rem 0.45rem;
}

.pick-viewer-btn {
  flex: 1;
  min-height: 48px;
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--pick-text);
  border-radius: 12px;
  padding: 0.7rem 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}

.pick-viewer-btn.is-on {
  background: var(--pick-text);
  color: var(--ink);
  border-color: var(--pick-text);
}

.pick-viewer-btn.is-on.pass {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}

.pick-viewer-btn.is-on.revise {
  background: var(--fix);
  color: #fff;
  border-color: var(--fix);
}

.pick-viewer-note {
  margin: 0 1rem;
  width: calc(100% - 2rem);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--pick-text);
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}

.pick-viewer-locked {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.pick-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(8, 7, 6, 0.62);
}

.pick-sheet.hidden {
  display: none;
}

.pick-sheet-card {
  width: 100%;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 1rem 1rem 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--pick-text);
}

.pick-sheet-card h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.pick-sheet-card p {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.pick-sheet-row {
  display: flex;
  gap: 0.5rem;
}

.pick-sheet-row button {
  flex: 1;
  min-height: 48px;
  border-radius: 12px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.pick-sheet-ghost {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}

.pick-sheet-ok {
  border: 0;
  background: var(--safelight);
  color: var(--safelight-ink);
}

.wm-host {
  position: relative;
  overflow: hidden;
}

.pick-wm {
  position: absolute;
  inset: -70%;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: 1.6rem;
  row-gap: 1.35rem;
  transform: rotate(-28deg);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.38);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.38);
  user-select: none;
  white-space: nowrap;
}

.pick-viewer-stage .pick-wm {
  font-size: 0.78rem;
  column-gap: 2.8rem;
  row-gap: 2.4rem;
}

.pick-wm.is-cell {
  display: none;
}

.pick-wm-center {
  display: none;
}

.pick-viewer-stage .pick-wm-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  transform: rotate(-28deg);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(227, 166, 74, 0.78);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  user-select: none;
  text-align: center;
  padding: 0 0.8rem;
}

.pick-wm-center.is-on {
  display: grid;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  place-items: center;
  transform: rotate(-28deg);
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
  text-align: center;
  padding: 0.4rem;
}

@media (min-width: 768px) {
  .pick-sheet {
    align-items: center;
  }
  .pick-sheet-card {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 16px;
  }
  body.pick-page .pick-submit.btn-primary {
    max-width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pick-pin,
  .pick-filter,
  .pick-viewer-btn,
  .pick-mini-btn {
    transition: none;
  }
}

/* Responsive */

@media (max-width: 640px) {
  .hero {
    padding: 3rem 0 2.5rem;
  }

  .footer-support {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-nav {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .os-card,
  .toast {
    transition: none;
    animation: none;
  }
}

/* =====================================================================
 * B1 + B2: 共享 header 组件样式（由 website/header.js 渲染的 DOM）
 * 锚定：docs/design/官网设计稿-20260915.md §3.1 + 监理 §3 S1/S2/S3/S5
 * ===================================================================== */

/* —— 登录态显隐（与 prototype 同构） —— */
body.is-logged-out .requires-login { display: none !important; }
body.is-logged-in .requires-guest { display: none !important; }

/* —— AI 工作台主按钮（实心药丸） —— */
.btn-header-primary {
  display: inline-flex; align-items: center;
  padding: 0.42rem 0.95rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease;
}
.btn-header-primary:hover { background: var(--accent-hover); color: #fff; }

/* —— 登录按钮（描边药丸） —— */


/* —— 用户芯片 + 下拉菜单 —— */
.user-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.28rem 0.7rem 0.28rem 0.3rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.user-chip:hover { border-color: var(--accent-text); }
.user-chip img {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; display: block; background: #eee;
}
.user-chip .chip-caret { color: var(--text-subtle, #94a3b8); font-size: 0.7rem; }
.user-chip-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0; min-width: 200px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 0.4rem;
  display: none;
  z-index: 40;
}
.user-menu.is-open { display: block; }
.user-menu a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.88rem; font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.user-menu a:hover { background: var(--accent-soft); color: var(--accent-text); }
.user-menu a.is-danger:hover { background: #f8e8e6; color: #8a2f2a; }
.user-menu .menu-divider {
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 0.35rem 0.3rem;
}

/* —— a11y：focus-visible 焦点环（E2 拍板并进 B1） —— */
.user-chip:focus-visible,
.btn-header-primary:focus-visible,
.header-nav a:focus-visible,
.user-menu a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}




/* —— hero 价签行 + 数据安全行（B2-3 H1/H2） —— */
.hero-price {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}
.hero-meta-security {
  margin-top: 0.5rem;
  color: var(--text-subtle, #94a3b8);
}

/* —— 选片/审片披露带区（B1-2 + B2-3 H4） —— */
.pick-band {
  padding: 3rem 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border, #e2e8f0);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.pick-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
}
.pick-band-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  text-transform: uppercase;
}
.pick-band-text h2 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.pick-band-text p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted, #64748b);
}
.pick-band-cta { margin-top: 1rem; }
.pick-band-cta a {
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
}
.pick-band-cta a:hover { text-decoration: underline; }
.pick-band-mock {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pick-band-mock-card {
  width: 100%;
  max-width: 280px;
  padding: 1rem;
  background: #12110f;
  border-radius: 14px;
  color: #cbd5e1;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.pick-band-mock-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #444;
}
.pick-band-mock-card em {
  font-style: normal;
  margin-left: 0.5rem;
  color: #94a3b8;
}

/* —— 360 / 480 / 720px 响应式（B1-6 + 监理 S5） —— */
@media (max-width: 720px) {
  .header-inner { gap: 0.5rem; }
  .header-nav { flex-wrap: wrap; }
  .user-menu { right: 0; max-width: calc(100vw - 2rem); }
  .hero { min-height: auto; padding: 2.5rem 0 2rem; }
  .pick-band-inner { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 480px) {
  .brand-sub { display: none; }
  .header-nav { gap: 0.6rem; }
  .header-nav a { font-size: 0.85rem; }
  .btn-header-primary { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
  .hero-title { font-size: 1.6rem; }
}
@media (max-width: 360px) {
  /* C1: 导航五项不再截断隐藏（§4.5-5 禁止隐藏整个导航），改横滑 */
  .header-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
}

/* =====================================================================
 * B2-1: 云端 AI 带区（设计稿 §3.2 + 监理 §3 S8/S9）
 * ===================================================================== */
.cloud-band {
  padding: 3rem 0 4rem;
  background: var(--bg);
  border-top: 1px solid var(--border, #e2e8f0);
}
.cloud-band-inner { max-width: 1080px; margin: 0 auto; }
.cloud-band-header { text-align: center; margin-bottom: 2rem; }
.cloud-band-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  text-transform: uppercase;
}
.cloud-band-header h2 {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
}
.cloud-band-price {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.cloud-band-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
}

.cloud-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  min-height: 80px;
}
.cloud-band-loading,
.cloud-band-fallback {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted, #64748b);
  font-size: 0.92rem;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  border: 1px dashed var(--border, #e2e8f0);
}

.cloud-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cloud-card:hover {
  border-style: solid;
  border-color: var(--accent-text);
  transform: translateY(-1px);
}
.cloud-card-name { font-size: 0.95rem; font-weight: 600; }
.cloud-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}
.cloud-card-cost {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-text);
}

.cloud-band-cta { text-align: center; margin: 0; }
.cloud-band-cta a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
}
.cloud-band-cta a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .cloud-band { padding: 2rem 0 2.5rem; }
  .cloud-band-header h2 { font-size: 1.25rem; }
}

/* =====================================================================
 * B2-2: account 工作台入口提级 + 文字链降级（设计稿 §3.4 + 监理 §6 B2-2 + P5）
 * ===================================================================== */
.account-primary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
  background: var(--accent-soft, #e3f0fc);
  border: 1px solid var(--accent, #0f766e);
  border-radius: 14px;
}
.account-primary-action-text { flex: 1 1 240px; min-width: 200px; }
.apa-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.apa-sub {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}
.account-primary-action .btn { white-space: nowrap; flex-shrink: 0; }

.account-secondary-link {
  margin: 0.75rem 0 0;
  text-align: left;
}
.account-secondary-link a {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.account-secondary-link a:hover { color: var(--accent-text); }

@media (max-width: 720px) {
  .account-primary-action { flex-direction: column; align-items: flex-start; padding: 1rem 1.1rem; }
  .account-primary-action .btn { width: 100%; }
  .apa-title { font-size: 0.98rem; }
}

/* A1 2026-09-16: 账号页权益摘要 — Pro 会员 / 通道锁态 */
.ent-engines {
  margin: 0.25rem 0 0.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ent-engines-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.35rem 0.75rem;
}

.ent-engine-item {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.ent-engine-item.ent-engine-locked,
.ent-engine-item.ent-muted {
  color: var(--muted);
  font-weight: 400;
}

#ent-pro-card .ent-value {
  font-size: 1.15rem;
}

/* =====================================================================
 * C1 2026-09-17 T1: 产品 ▾ 导航下拉（header.js · 设计稿 §2.2 + §4.5-6 弹层纪律）
 * ===================================================================== */
.nav-products { position: relative; }

.nav-products-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav-products-btn:hover,
.nav-products-btn[aria-expanded="true"] { color: var(--accent-text); }
.nav-products-btn .chip-caret { color: var(--text-subtle); font-size: 0.7rem; }
.nav-products-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.products-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  max-width: calc(100vw - 2rem);
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  padding: 0.9rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(16, 32, 55, 0.08);
  z-index: 40;
}
.products-menu.is-open { display: grid; }

.pm-card {
  display: block;
  padding: 0.8rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pm-card:hover {
  border-color: var(--accent-text);
  background: var(--accent-soft);
  color: var(--text);
}
.pm-card b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.pm-card small {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-subtle);
}
.pm-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pm-foot {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border, #e2e8f0);
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

@media (max-width: 860px) {
  /* §4.5-5：移动端下拉改全宽抽屉 */
  .products-menu {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: auto;
    transform: none;
    width: auto;
    max-width: none;
    z-index: 70;
  }
}
@media (max-width: 480px) {
  .products-menu { grid-template-columns: 1fr; }
}

/* =====================================================================
 * C1 2026-09-17 T2/T6: 首页产品线带区 + 快速上手条 + quick chips + 客服支持条
 * （设计稿 v2 §3 ①② + §5.5 + §4.5 视觉收敛；只追加，不改既有规则）
 * ===================================================================== */

/* —— 板块通用（kicker/标题/导语） —— */
.section { padding: 4.5rem 0; }
.section-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  text-align: center;
}
.section-title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.section-lead {
  margin: 0 auto 2rem;
  max-width: 640px;
  text-align: center;
  color: var(--text-muted);
}

/* —— hero 品类枚举 + quick chips（§3 ①） —— */
.hero-desc .cats { color: var(--text); font-weight: 600; }
.quick-chips {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.83rem;
  color: var(--text-muted);
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.quick-chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
.quick-chip b { color: var(--accent-text); font-weight: 600; }

/* —— 产品线带区四卡（§3 ②） —— */
.ps-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.72rem;
  color: var(--badge-accent-fg);
  background: var(--badge-accent-bg);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}
.ps-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--accent-soft);
  border-radius: 10px;
  margin-bottom: 0.2rem;
}
.ps-card h3 { margin: 0; font-size: 1.12rem; font-weight: 600; }
.ps-card > p:not(.ps-sub) { margin: 0; font-size: 0.9rem; color: var(--text-muted); flex: 1; }
.ps-link { font-size: 0.9rem; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.ps-link:hover { text-decoration: underline; }

/* —— 快速上手条（§2.2-2，产品线带区下方常驻） —— */

/* —— 客服支持条（§5.5 弱化版 · 四页全挂 · footer 上方紧凑形态） —— */
.support-strip {
  padding: 1.6rem 0;
  background: var(--bg-elevated, #fff);
  border-top: 1px solid var(--border, #e2e8f0);
}
.support-strip-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.ss-item { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; }
.ss-text .ss-title { margin: 0 0 0.15rem; font-size: 0.92rem; font-weight: 600; }
.ss-text .support-hint { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.ss-text .meta-row { margin: 0.35rem 0 0; }
.ss-text small { display: block; font-size: 0.78rem; color: var(--text-subtle); }
.ss-link { font-weight: 600; color: var(--accent-text); text-decoration: none; }
.ss-link:hover { text-decoration: underline; }
/* 支持条内二维码收成 56px 紧凑尺寸（§10.7-2；既有 .qr-frame 规则不动，仅本条覆盖） */
.support-strip .qr-frame {
  width: 56px;
  height: 56px;
  flex: none;
  border-style: solid;
  border-radius: var(--radius-sm);
}
.support-strip .qr-placeholder { font-size: 0.6rem; padding: 0.25rem; }

@media (max-width: 860px) {
}
@media (max-width: 640px) {
  .section { padding: 3rem 0; }
  .support-strip-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* C1 T2: 定稿主标在 hero 容器内微降字号防断词（不改全局 .hero-title；打磨轮⑦尾部已抬至 64px 档） */
.hero-landing .hero-title {
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 3.4rem);
  letter-spacing: -0.02em;
}

/* =====================================================================
 * C1 2026-09-17 T3/T4: 插件生态板块 + 首页 AI 带区题材条
 * （虚线只用于未上线占位 .plugin-soon；可用内容一律实线 —— §4.5-4）
 * ===================================================================== */
.plugin-band { background: var(--bg); }
.plugin-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
}
.plugin-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg);
}
.ph-head { display: flex; align-items: center; gap: 0.8rem; }
.ph-head h3 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.ph-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--badge-success-fg);
  background: var(--badge-success-bg);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}
.ph-sub { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--text-subtle); }
.ph-points {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ph-points li {
  font-size: 0.9rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding-bottom: 0.55rem;
}
.ph-points li:last-child { border-bottom: none; padding-bottom: 0; }
.ph-points b {
  display: inline-block;
  min-width: 4.5em;
  color: var(--text);
  font-weight: 600;
}
.ph-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ph-note { margin: 0; font-size: 0.78rem; color: var(--text-subtle); }
.plugin-side { display: flex; flex-direction: column; gap: 1rem; }
.plugin-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-elevated, #fff);
  border: 1px dashed #cfd8e0;
  border-radius: var(--radius-lg);
}
.plugin-soon h4 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.plugin-soon p { margin: 0; font-size: 0.84rem; color: var(--text-muted); flex: 1; }
.soon-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  color: var(--badge-neutral-fg);
  background: var(--badge-neutral-bg);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}
/* 「更多宿主」是可用入口（提需求链 #support），实线（§4.5-4 虚线语义） */
.plugin-more {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg);
}
.plugin-more h4 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.plugin-more p { margin: 0; font-size: 0.84rem; color: var(--text-muted); flex: 1; }

/* AI 带区题材枚举条（首页变体；卡片渲染走 cloud.js 契约） */
.cats-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 1.4rem;
}
.cats-row span {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  padding: 0.22rem 0.75rem;
}
.cats-row .cats-more { border-style: dashed; color: var(--text-subtle); }

@media (max-width: 860px) {
  .plugin-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
 * C1 2026-09-17 T5: 选片落地页 selection.html 组件
 * （流程四步 / 隐私卡 / 对照表 / 只读场次列表 / FAQ / 收尾 CTA）
 * ===================================================================== */
.section-tight { padding-top: 0; }
.section-tight:first-of-type { padding-top: 1.5rem; }
.container-narrow { max-width: 760px; }

.hero-selection { padding: 4rem 0 2.5rem; }
.hero-actions-row { flex-direction: row; justify-content: center; }

.panel-note {
  margin: 0.8rem 0 0;
  font-size: 0.83rem;
  color: var(--text-subtle);
}

/* 四步流程 */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  counter-reset: step;
}
.flow-step {
  position: relative;
  padding: 1.1rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
}
.flow-step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}
.flow-step b { display: block; font-size: 0.98rem; margin-bottom: 0.25rem; }
.flow-step p { margin: 0; font-size: 0.83rem; color: var(--text-muted); }

/* 隐私与安全卡 */
.privacy-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem 1.4rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-left: 4px solid var(--badge-success-fg);
  border-radius: var(--radius);
}
.privacy-card .ico { font-size: 1.4rem; }
.privacy-card ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* 免费版与 Pro 对照表（额度一律不写死） */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.compare-table th,
.compare-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.compare-table th { background: var(--accent-soft); font-size: 0.85rem; }
.compare-table td:first-child { color: var(--text-muted); width: 34%; }
.compare-table .yes { color: var(--badge-success-fg); font-weight: 700; }
.compare-table .no { color: var(--text-subtle); }

/* 我的场次：未登录引导卡 + 只读列表 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.88rem;
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: var(--radius);
}
.empty-state p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.empty-state-ico { font-size: 1.6rem; }

.sessions-list { display: flex; flex-direction: column; gap: 0.6rem; }
.session-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.1rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius);
}
.session-item .thumb {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--accent-soft);
  border-radius: 10px;
}
.session-item-text { min-width: 0; }
.session-item-text b { font-size: 0.92rem; }
.session-item-text small { display: block; color: var(--text-subtle); font-size: 0.78rem; }

.session-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: none;
}
.session-item .status {
  margin-left: auto;
  flex: none;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  white-space: nowrap;
}
.status-live { color: var(--badge-success-fg); background: var(--badge-success-bg); }
.status-exp { color: var(--badge-neutral-fg); background: var(--badge-neutral-bg); }

/* FAQ */
.faq-list { margin-top: 1.4rem; }
.faq {
  margin-bottom: 0.7rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-subtle); font-size: 1.2rem; }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 0; padding: 0 1.2rem 1rem; color: var(--text-muted); font-size: 0.9rem; }

/* 收尾 CTA 带区 */
.cta-band {
  margin-top: 1.6rem;
  padding: 1.6rem;
  text-align: center;
  background: var(--accent-soft);
  border: 1px solid #b9d4ee;
  border-radius: var(--radius-lg);
}
.cta-band h2 { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 600; }
.cta-band p { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.92rem; }
.cta-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .flow-steps { grid-template-columns: 1fr; }
  .compare-table { display: block; overflow-x: auto; white-space: nowrap; }
  .hero-actions-row { flex-direction: column; }
}

/* =====================================================================
 * C3 2026-09-17: 账号控制台（设计稿 v2 §6 · 左侧导航 + 分区；只追加）
 * ===================================================================== */
.account-main { padding: 2rem 0 3rem; }
.account-main .page-title { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 600; }

.console {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 1.4rem;
  align-items: start;
  margin-top: 1rem;
}
.console-nav {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
}
.console-nav button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
.console-nav button:hover { background: var(--accent-soft); color: var(--accent-text); }
.console-nav button.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.console-nav .cn-icon { width: 20px; text-align: center; }
.console-nav .cn-logout {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border, #e2e8f0);
  border-radius: 0 0 9px 9px;
  color: #c45c4a;
}
.console-nav .cn-logout:hover { background: #f8e8e6; color: #8a2f2a; }

.console-panels { display: block; min-width: 0; }
.console-panels > div { display: flex; flex-direction: column; gap: 1rem; }
.panel {
  padding: 1.4rem 1.6rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg);
}
.panel h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 600; }
.panel .album-heading { margin-top: 0; }

.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.avatar-lg {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.profile-head-text b { display: block; font-size: 1.15rem; }
.profile-head-text small { display: block; color: var(--text-subtle); }

.ov-quick { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.ov-quick a { font-size: 0.9rem; font-weight: 500; color: var(--accent-text); text-decoration: none; }
.ov-quick a:hover { text-decoration: underline; }

.security-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.security-row:last-child { border-bottom: none; }
.security-row b { font-size: 0.93rem; font-weight: 600; }
.security-row small { display: block; color: var(--text-subtle); font-size: 0.8rem; }
.security-row > div { min-width: 0; }
.security-row .sec-badge,
.security-row .btn { margin-left: auto; flex: none; }
.sec-badge {
  font-size: 0.78rem;
  color: var(--badge-neutral-fg);
  background: var(--badge-neutral-bg);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}
.sec-badge.is-on { color: var(--badge-success-fg); background: var(--badge-success-bg); }

.danger-zone { border-color: #eec9c2; background: #fdf6f5; }
.danger-zone h2 { color: #c45c4a; }
.btn-danger-outline { color: #c45c4a; border-color: #eec9c2; }
.btn-danger-outline:hover { border-color: #c45c4a; color: #8a2f2a; }

@media (max-width: 860px) {
  .console { grid-template-columns: 1fr; }
  .console-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .console-nav button { width: auto; }
  .console-nav .cn-logout { margin-top: 0; padding-top: 0.55rem; border-top: none; }
}

/* =====================================================================
 * C4 2026-09-17（v2.1 视觉升级 · 对标智谱/MiniMax）：真实截图橱窗 + 价格带区 + 控制台直达
 * ===================================================================== */



/* —— PS 伴侣大卡：面板真图（右缘竖条） —— */
.ph-shot {
  margin-left: auto;
  width: 120px;
  height: 96px;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border, #e2e8f0);
  flex: none;
}

/* —— 价格带区（三栏；额度一律不写死） —— */
.pricing-band { background: var(--bg-elevated, #fff); border-block: 1px solid var(--border, #e2e8f0); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg);
}
.price-card-hl { border-color: var(--accent-text); background: var(--bg-elevated, #fff); }
.price-card h3 { margin: 0; font-size: 1.05rem; }
.price-num { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--text); }
.price-num small { font-size: 0.85rem; font-weight: 400; color: var(--text-subtle); }
.price-card ul {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
  flex: 1;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.price-card ul li { margin-bottom: 0.35rem; }
.price-card .btn { align-self: flex-start; }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .ph-shot { display: none; }
}

/* =====================================================================
 * C4 features 页评审改版（2026-09-17 · 双路智能体评审落地）
 * ===================================================================== */
.feature-group-label {
  margin: 2.2rem 0 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.feature-group-label span {
  margin-left: 0.5rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-subtle);
}
.features-head-cta { margin: 0.9rem 0 0; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.feature-link { margin: 0.5rem 0 0; font-size: 0.85rem; }
.feature-strip {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.2rem 1.4rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg);
}
.feature-strip h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.feature-strip p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

/* C4 2026-09-17 打磨轮 ②：hero 框内排版收紧 + 带区间距收敛 + 安装说明块 */
.hero-landing .hero-title { line-height: 1.15; margin-bottom: 0.55rem; }
.hero-landing .hero-desc { margin-bottom: 1.1rem; }
.product-strip { padding-bottom: 1.6rem; }
.plugin-band { padding-top: 1.6rem; }

/* 安装说明块（#plugins 带区内） */

/* C4 打磨轮 ③：hero 极简（MotiClaw 参考），橱窗带区已退役 */
.hero-landing { padding: 4.5rem 0 4rem; }

/* C4 打磨轮 ④：首屏 = slogan + 下载（首屏大图于 1dcc8b5 退役，.hero-figure 死规则已清） */
.hero-landing { padding: 3.5rem 0 0; flex-direction: column; }

/* =====================================================================
 * C4 打磨轮 ⑤（2026-09-17 · 三路智能体评审合并落地）
 * ===================================================================== */

/* — 节奏统一：带区间距 4rem（客服条保持紧凑） — */
.cloud-band { padding: 4rem 0; }
.pick-band { padding: 4rem 0; }
.plugin-band { padding-top: 4.5rem; } /* 回正打磨轮②的 1.6rem 覆盖 */

/* — hero 底部留白恢复（阴影不再被裁） — */
.hero-landing { padding-bottom: 4rem; }

/* — 同级板块标题同尺（AI/选片带的 h2 对齐 .section-title） — */
.cloud-band-header h2,
.pick-band-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* — 相邻双边框修复：带区只留上边框，客服条去上边框 — */
.pick-band, .pricing-band { border-block: none; border-top: 1px solid var(--border, #e2e8f0); }
.support-strip { border-top: none; }

/* — 首屏：OS 卡降权 + chips 降权 + 工作台 CTA 实心 — */
.os-card { width: 64px; height: 64px; gap: 0.25rem; font-size: 0.78rem; border-radius: 12px; }
.os-card svg { width: 18px; height: 18px; }
.os-row { margin-top: 1rem; gap: 0.5rem; }
.quick-chip { font-size: 0.8rem; padding: 0.3rem 0.8rem; }
.quick-chip b { color: var(--text); font-weight: 600; }
.quick-chip:hover b { color: var(--accent-text); }
.cloud-band-cta a {
  display: inline-flex; align-items: center;
  padding: 0.62rem 1.35rem;
  background: var(--accent); color: #fff;
  border-radius: var(--radius);
  font-weight: 500;
}
.cloud-band-cta a:hover { background: var(--accent-hover); text-decoration: none; }

/* — header 主按钮降权：下载是首屏唯一实心主按钮 — */
.btn-header-primary { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.btn-header-primary:hover { background: var(--accent-soft); }

/* — kicker 三规格统一 — */
.cloud-band-kicker, .pick-band-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; }

/* — 按钮圆角统一 12px（999 只留 chips/徽章/芯片） — */
.btn-download { border-radius: var(--radius); }

/* — Pro 价格卡抬升 — */
.price-card-hl { box-shadow: 0 10px 30px rgba(12, 129, 226, 0.12); }

/* — 内容栏宽对齐 — */
.pricing-grid { max-width: 1080px; }

/* — 锚点避开 sticky header — */
section[id], footer[id] { scroll-margin-top: 76px; }

/* — 登录态 FOUC：探测完成前默认隐藏登录态元素 — */
body:not(.is-logged-in) .requires-login { display: none !important; }

/* =====================================================================
 * C4 打磨轮 ⑤（2026-09-18 业主拍板）：一屏一个板块
 * 首页四个板块各占一屏、内容垂直居中；价格带区于打磨轮⑪并入收尾屏（.snap-tail）
 * ===================================================================== */
body.page-download .hero-landing,
body.page-download .cloud-band,
body.page-download .plugin-band,
body.page-download .pick-band {
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* hero 内容少，垂直居中（MotiClaw 式）；橱窗/其它带内容多，保持居中即可 */

/* =====================================================================
 * C4 打磨轮 ⑥（2026-09-18 业主感官反馈）：整体字号抬一档
 * 基准 16→17px 全站 rem 联动；小字下限抬升（徽章/tags/kicker 不再低于 0.78rem）
 * ===================================================================== */
body { font-size: 17px; }
.ps-badge, .soon-tag, .ph-badge { font-size: 0.78rem; }
.ps-tags span, .cats-row span { font-size: 0.85rem; }
.section-kicker, .cloud-band-kicker, .pick-band-kicker { font-size: 0.88rem; }
.hero-meta, .os-note { font-size: 0.92rem; }
.feature-points, .feature-summary { font-size: 0.95rem; }
.pm-card small { font-size: 0.85rem; }

/* =====================================================================
 * C4 打磨轮 ⑥（2026-09-18 业主拍板）：布局参照 bigmodel.cn/glm-coding
 * hero 大字更大；价格卡 = 档名 + 定位句 + 大价格 + 全宽实心按钮 + ✓ 清单
 * ===================================================================== */
.hero-landing .hero-title { font-size: clamp(2.4rem, 6vw, 3.8rem); }

.price-card h3 { font-size: 1.35rem; }
.price-sub { margin: -0.2rem 0 0.2rem; font-size: 0.85rem; color: var(--text-subtle); }
.price-num { font-size: 2.1rem; }
.price-card .btn { align-self: stretch; justify-content: center; }
.price-card ul { list-style: none; padding-left: 0; }
.price-card ul li::before { content: "✓ "; color: var(--badge-success-fg); font-weight: 600; }

/* =====================================================================
 * C4 打磨轮 ⑦（2026-09-18 业主拍板）：字号标尺全面对齐 bigmodel.cn
 * 实测其 glm-coding 页：产品名≈64px / 副标≈40px / 卡档名≈30px / 价格≈40px
 * ===================================================================== */
/* 板块大标题 → 40px 档（对齐其副标/区块标题尺度） */
.section-title,
.cloud-band-header h2,
.pick-band-text h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.25;
}
/* 板块导语 18px */
.section-lead, .cloud-band-meta { font-size: 1.06rem; }
/* 价格卡：档名 30px 档、价格 40px 档 */
.price-card h3 { font-size: 1.75rem; }
.price-num { font-size: 2.4rem; }
/* hero slogan 维持 64px 档（上轮已对齐其产品名尺度），描述 18px */

/* =====================================================================
 * C4 打磨轮 ⑧（2026-09-18 业主拍板）：一屏一屏切（scroll-snap 翻页）
 * 仅首页（html.snap-scroll）+ 桌面尺寸启用；矮窗/窄窗回退自由滚动。
 * mandatory + 超大板块规范兜底：板块高于视口时板块内部仍可自由滚动，
 * 到边界才吸附，不会锁死内容。
 * ===================================================================== */
@media (min-width: 900px) and (min-height: 700px) {
  html.snap-scroll { scroll-snap-type: y mandatory; }
  body.page-download main > section,
  body.page-download .snap-tail {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* 吸附对齐 = 紧贴 sticky header（60px），不让下一屏露头衔接 */
    scroll-margin-top: 60px;
  }
  /* 收尾屏（打磨轮⑪）：价格 + 客服条 + 页脚合占一屏、整体垂直居中，不拆两屏 */
  body.page-download .snap-tail {
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.page-download .snap-tail .support-strip { width: 100%; }
}

/* =====================================================================
 * C4 打磨轮 ⑨（2026-09-18 · 三路智能体评审合并落地：摄影师/设计总监/增长）
 * 首屏：列宽余量 + 光学重心 + 下载簇分组 + chips 降权 + 登录条降权 + 滚动提示
 * ===================================================================== */

/* — 列宽 640→680：64px 主标稳定单行；折行保护从逗号处对称折 — */
.hero-landing .hero-inner { max-width: 680px; }
.hero-landing .hero-title { text-wrap: balance; }

/* — 光学重心上移（底部留白加大，内容抬至 ~45% 视高），网格光心随之下移 — */
body.page-download .hero-landing { padding: 2.5rem 0 6.5rem; }
.hero-landing .hero-grid {
  mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 75%);
}

/* — 装饰做实并对齐内容重心（光圈/齿孔从上三分之一移到内容列两侧） — */
.hero-landing .deco-aperture {
  width: 120px; height: 120px; left: 7%; top: 50%;
  box-shadow: inset 0 0 0 22px rgba(12, 129, 226, 0.10);
}
.hero-landing .deco-sprocket { top: 54%; }

/* — 下载簇分组：价格行贴主按钮并抬层级（「免费」是第一戒心点），OS 卡紧随其后 — */
.hero-landing .hero-price {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
}
.hero-landing .hero-price b { font-weight: 700; }
.hero-landing .os-row { margin-top: 0.75rem; }
.hero-landing .os-card.is-active { background: var(--accent-soft); } /* 选中=填充，与 hover 区分 */
.hero-landing #os-note { margin-top: 0.9rem; }

/* — chips 降权为文本链接（默认无框，hover 才浮出 pill），与主按钮拉开层级 — */
.hero-landing .quick-chips { margin-top: 1.5rem; }
.hero-landing .quick-chip { background: none; border-color: transparent; padding: 0.25rem 0.45rem; }
.hero-landing .quick-chip:hover { border-color: var(--border); background: var(--bg-elevated); }


/* — 版本徽章注入防按钮宽度跳动（CLS） — */
.btn-download .version-badge { min-width: 5ch; }

/* — scroll-snap 首屏滚动提示（CSS 绘制 chevron，不依赖字体） — */
body.page-download .hero-landing::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: translateX(-50%) rotate(45deg);
  animation: hero-cue 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-cue {
  0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: 0.45; }
  50% { transform: translate(-50%, 6px) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-download .hero-landing::after { animation: none; }
}

/* — 夺回被覆盖层吞掉的移动端规则：手机/矮窗 hero 不锁满屏 — */
@media (max-width: 720px) {
  body.page-download .hero-landing { min-height: auto; padding: 3rem 0; }
  body.page-download .hero-landing::after { display: none; }
}
@media (max-width: 480px) {
  body.page-download .hero-landing .hero-title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
}



/* — 矮窗（720p 档）收腹：保住一屏完整、chevron 不被挤出 — */
@media (min-width: 900px) and (max-height: 800px) {
  body.page-download .hero-landing { padding: 1.6rem 0 3.5rem; }
}

/* =====================================================================
 * C4 打磨轮 ⑪（2026-09-18 业主图示反馈）：
 * ① 价格 + 客服条 + 页脚合并为收尾一屏（HTML 已把 pricing 移入 .snap-tail）
 * ② 首屏产品小图删除（业主拍板，hero-figure 规则一并清除）
 * ③ chips 加下划线，明确是可点链接
 * ④ AI 屏 / 选片屏内容上移（底部留白加大，光学重心抬升）
 * ===================================================================== */
.hero-landing .quick-chip { text-decoration: underline; text-underline-offset: 3px; }
.hero-landing .quick-chip:hover { text-decoration: none; }

/* — AI / 选片屏：内容从几何中心上移（光学重心 ~42% 视高） — */
body.page-download .cloud-band { padding: 3rem 0 9rem; }
body.page-download .pick-band { padding: 3rem 0 9rem; }

/* — 收尾屏内部节奏：价格紧凑、与客服条留一道空气缝、页脚贴底 — */
body.page-download .snap-tail { padding-top: 2rem; }
body.page-download .snap-tail .pricing-band { padding: 2.5rem 0 0; }
body.page-download .snap-tail .support-strip { margin-top: 2.5rem; }
body.page-download .snap-tail .site-footer { margin-top: auto; }
@media (max-width: 720px) {
  body.page-download .cloud-band,
  body.page-download .pick-band { min-height: auto; padding: 3rem 0; }
}

/* =====================================================================
 * C4 打磨轮 ⑫（2026-09-18 业主拍板）：
 * ① 各屏内容整体上移（居中布局导致上半屏留白过多 → 顶部对齐 + 统一顶距）
 * ② 首屏 slogan 动态化：尾句轮播（首帧与末帧均为定稿「剩下的它来」，无缝循环）
 * ===================================================================== */
@media (min-width: 900px) and (min-height: 700px) {
  body.page-download .hero-landing,
  body.page-download .cloud-band,
  body.page-download .plugin-band,
  body.page-download .pick-band {
    justify-content: flex-start;
    padding-top: clamp(3rem, 12vh, 8rem);
    padding-bottom: 3rem;
  }
}

.hero-title .swap {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  min-width: 5em;
  vertical-align: bottom;
  text-align: left;
}
.hero-title .swap-track {
  display: flex;
  flex-direction: column;
  animation: hero-swap 15s ease-in-out infinite;
}
.hero-title .swap-track span {
  display: block;
  height: 1.15em;
  line-height: 1.15;
  white-space: nowrap;
}
@keyframes hero-swap {
  0%, 14.6% { transform: translateY(0); }
  16.6%, 31.3% { transform: translateY(-16.666%); }
  33.3%, 48% { transform: translateY(-33.333%); }
  50%, 64.6% { transform: translateY(-50%); }
  66.6%, 81.3% { transform: translateY(-66.666%); }
  83.3%, 100% { transform: translateY(-83.333%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .swap-track { animation: none; }
}

/* =====================================================================
 * C4 打磨轮 ⑬（2026-09-18 业主拍板路线 A + 三路评审方案）：
 * ① AI 屏挂回真实货架（cloud.js 零改动复用）+ 价格锚点行
 * ② 稀疏屏纹理化：AI/选片屏复用 hero 网格底纹，虚空变设计
 * ③ AI 屏 CTA 锚底（Apple 式收边，空白变「通道」）
 * ④ 选片屏 mock 升级纯 CSS 手机画幅（替换黑点条）
 * ===================================================================== */

/* — ② 纹理层：两屏允许绝对定位装饰，内容层压上；AI 屏光心移到中部（盖住货架与锚底 CTA 之间的通道区） — */
.cloud-band, .pick-band { position: relative; overflow: hidden; }
.cloud-band .hero-grid, .pick-band .hero-grid { opacity: 0.9; }
.cloud-band .hero-grid {
  mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, #000 20%, transparent 78%);
}
.cloud-band .cloud-band-inner,
.pick-band .pick-band-inner { position: relative; z-index: 1; }

/* — ③ AI 屏：内层撑满 flex 列，CTA 锚底 — */
@media (min-width: 900px) and (min-height: 700px) {
  body.page-download .cloud-band-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  body.page-download .cloud-band .cloud-band-grid { margin: 2.2rem 0 1.5rem; }
  body.page-download .cloud-band .cloud-band-cta { margin-top: auto; padding-bottom: 1.5rem; }
}

/* — ④ 选片屏 CSS 手机画幅 — */
.mock-phone {
  width: 240px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 28px;
  padding: 0.6rem 0.7rem 0.9rem;
  box-shadow: 0 18px 50px rgba(16, 32, 55, 0.14);
}
.mock-phone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.2rem 0.55rem;
}
.mock-phone-title { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.mock-capsule {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  padding: 3px 7px;
}
.mock-capsule i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-subtle); }
.mock-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mock-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: linear-gradient(135deg, #dfe7ef, #eef2f7);
}
.mock-thumb.is-picked { outline: 2px solid var(--accent); outline-offset: -2px; }
.mock-thumb.is-picked::after {
  content: "✓";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}
.mock-phone-foot {
  margin-top: 0.6rem;
  padding: 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 8px;
}

/* =====================================================================
 * C4 打磨轮 ⑭（2026-09-18 业主反馈：AI/选片屏下半留白仍多）：
 * 内容补厚后（货架/手机画幅），两屏从「顶部对齐」改回「内容组光学居中 + 底锚收边」，
 * 卡片与手机画幅同步放大一档，压缩上下余白。
 * ===================================================================== */
@media (min-width: 900px) and (min-height: 700px) {
  /* AI 屏：标题+货架装进 stage 组，组在「顶距 ↔ 锚底 CTA」之间居中 */
  body.page-download .cloud-band { padding-top: 3rem; }
  body.page-download .cloud-band-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.page-download .cloud-band .cloud-band-grid { margin: 2.5rem 0 0; }

  /* 选片屏：整组光学居中 */
  body.page-download .pick-band { justify-content: center; padding-top: 3rem; }
}

/* — 稀疏屏放大一档（sparse ≠ small） — */
.cloud-card { padding: 1.1rem 1.2rem; gap: 0.5rem; }
.cloud-card-name { font-size: 1.02rem; }
.cloud-card-desc { font-size: 0.85rem; line-height: 1.5; }
.mock-phone { width: 280px; }
.mock-phone-title { font-size: 0.78rem; }
.mock-phone-foot { font-size: 0.78rem; }

/* =====================================================================
 * C4 打磨轮 ⑮（2026-09-18 业主图示反馈）：
 * ① 货架卡片水平居中（auto-fill 偏左 → 定宽列 + justify-content center）
 * ② CTA 上移（不贴底）+ 放大一档
 * ③ 卡片文案通用化（ai-apps.json 本地快照；线上源 = AI 站运营后台）
 * ===================================================================== */
.cloud-band-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
  justify-content: center;
}
.cloud-band-cta a { font-size: 1.06rem; padding: 0.8rem 1.9rem; }
@media (min-width: 900px) and (min-height: 700px) {
  body.page-download .cloud-band .cloud-band-cta { padding-bottom: 7vh; }
}

/* =====================================================================
 * 打磨轮 ⑰（2026-09-18 业主拍板）：登录页内嵌微信扫码二维码
 * ===================================================================== */
.wx-qr-frame {
  width: 300px;
  height: 400px;
  margin: 0.4rem auto 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.wx-qr-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =====================================================================
 * 打磨轮 ⑱（2026-09-18 业主拍板）：
 * ① features 页底部重复「免费下载」CTA 撤掉（HTML 侧删除，只留 app.js 隐藏桩）
 * ② 登录页双栏（参考智谱登录卡）：左手机号验证码 / 右微信扫码，中缝分隔
 * ===================================================================== */
.login-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 0.6rem;
}
.login-grid .login-col + .login-col {
  border-left: 1px solid var(--border, #e2e8f0);
  padding-left: 2rem;
}
/* 只有一个登录方式可用时退化为单栏 */
.login-grid:has(.login-col.hidden) { grid-template-columns: 1fr; }
.login-grid:has(.login-col.hidden) .login-col + .login-col { border-left: none; padding-left: 0; }
.login-col-title {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.login-grid .wx-qr-frame { margin: 0 auto; }
@media (max-width: 720px) {
  .login-grid { grid-template-columns: 1fr; }
  .login-grid .login-col + .login-col {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 1.4rem;
  }
}


/* =====================================================================
 * C4 对照优化（2026-09-19 · 对照 bigmodel.cn）：智谱式深色收尾
 * 页脚改深色多栏（品牌列 + 产品/支持/联系），首页客服条并入页脚；
 * 其余四页页脚同步变深色窄条。#support 锚点与客服 id 契约不变。
 * ===================================================================== */
.site-footer {
  border-top: 0;
  background: #121417;
  color: #c9d1d9;
}

.site-footer a:hover { color: #ffffff; }



.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0 1.2rem;
}

.footer-logo { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.05rem; color: #ffffff; }
.footer-logo span { margin-left: 0.45em; font-weight: 500; font-size: 0.85rem; color: #9aa3ad; }

.footer-slogan { margin: 0 0 0.3rem; font-size: 1.12rem; font-weight: 600; color: #ffffff; letter-spacing: 0.01em; }

.footer-platforms { margin: 0; font-size: 0.82rem; color: #8b949e; }

.footer-col h4 { margin: 0 0 0.55rem; font-size: 0.82rem; font-weight: 600; color: #9aa3ad; }

.footer-col a {
  display: block;
  padding: 0.18rem 0;
  font-size: 0.9rem;
  color: #c9d1d9;
}

.footer-line { margin: 0; padding: 0.18rem 0; font-size: 0.9rem; }

.footer-contact { display: flex; gap: 0.9rem; align-items: flex-start; }

.footer-qr {
  width: 92px;
  height: 92px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
}

.footer-qr .qr-image { width: 100%; height: 100%; object-fit: contain; }

.footer-qr .qr-placeholder { padding: 0.45rem; font-size: 0.68rem; color: var(--text-subtle); text-align: center; }

.footer-contact-text { min-width: 0; }

.footer-contact-text .support-hint { margin: 0 0 0.3rem; font-size: 0.8rem; color: #9aa3ad; }

.footer-contact-text .meta-row { font-size: 0.8rem; color: #c9d1d9; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.85rem 0 1rem;
  font-size: 0.78rem;
  color: #8b949e;
}

.footer-legal p { margin: 0; }

.footer-legal a { color: #8b949e; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 899px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* — 收尾屏高度预算（footer 变深色多栏后回压间距；字号标尺不动，仅压留白） — */
body.page-download .snap-tail { padding-top: 0.6rem; }
body.page-download .snap-tail .pricing-band { padding: 1.1rem 0 0; }
body.page-download .snap-tail .section-kicker { margin-bottom: 0.3rem; }
body.page-download .snap-tail .section-title { margin: 0 0 0.35rem; }
body.page-download .snap-tail .section-lead { margin: 0 0 1.1rem; }
body.page-download .snap-tail .price-card { padding: 1.05rem 1.25rem 1.15rem; }
body.page-download .snap-tail .price-card h3 { margin: 0 0 0.15rem; }
body.page-download .snap-tail .price-num { margin: 0.35rem 0 0.55rem; }
body.page-download .snap-tail .price-card ul { margin: 0 0 0.85rem; }
body.page-download .snap-tail .price-card ul li { font-size: 0.9rem; margin: 0 0 0.22rem; line-height: 1.42; }
body.page-download .snap-tail .footer-grid { padding: 1.15rem 0 0.7rem; gap: 1.2rem; }
body.page-download .snap-tail .footer-qr { width: 80px; height: 80px; }
body.page-download .snap-tail .footer-legal { padding: 0.6rem 0 0.7rem; margin-top: 0.7rem; }
body.page-download .snap-tail .price-card .btn { padding-top: 0.42rem; padding-bottom: 0.42rem; }
body.page-download .snap-tail .footer-col h4 { margin-bottom: 0.35rem; }
body.page-download .snap-tail .footer-col a { padding: 0.1rem 0; }
body.page-download .snap-tail .footer-slogan { margin-bottom: 0.15rem; }
/* 矮视口（<780px 高）再收一档：标准屏保持 40px 标题/40px 价格的智谱字号标尺 */
@media (min-width: 900px) and (max-height: 780px) {
  body.page-download .snap-tail .section-title { font-size: 1.7rem; }
  body.page-download .snap-tail .section-lead { font-size: 0.95rem; }
  body.page-download .snap-tail .price-num { font-size: 2rem; }
}
.site-footer .footer-brand,
.site-footer .footer-icp,
.site-footer .footer-icp a,
.site-footer .footer-legal a { color: #a8b1ba; }


/* =====================================================================
 * C4 评审收口（2026-09-19 · 四路智能体评审落地）
 * ① 矮窗收腹重申：打磨轮⑨规则曾被⑫同特异性后置声明覆盖（评审 P0-2），文件尾重申生效
 * ② 深色页脚 560px 单栏降档（评审 P1-3）；二维码占位文字对比度（P2）
 * ③ 登录页价格横幅（增长评审 P1-4：登录墙带价格上下文）
 * ④ 内容区焦点环补齐（评审 P2-9，与 header 焦点环同款）
 * ===================================================================== */
@media (min-width: 900px) and (max-height: 800px) {
  body.page-download .hero-landing { padding-top: 1.6rem; padding-bottom: 3.5rem; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer-contact { align-items: flex-start; }
}

.footer-qr .qr-placeholder { color: var(--text-muted); }

.login-price-strip {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.8rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.btn:focus-visible,
.quick-chip:focus-visible,
.faq summary:focus-visible,
.console-nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =====================================================================
 * 加马AI 登录页优化补丁  login-patch.css  v2026-09-19
 * 用法：整段追加到 website/styles.css 文件末尾即可生效（不改动既有规则，
 *       靠层叠覆盖；上线时把 ?v= 版本号同步升级）。
 * 依据：2026-09-19 六路评审（视觉系统 / 交互链路 / 移动&a11y / 性能 / 文案转化 / 安全）
 * 原则：只补 token 与新增类，不动原选择器内部；所有改动可整段删除回滚。
 * ===================================================================== */

/* ---------- 0. Token 修正（AA 对比度 + 8pt 网格 + 触控基线） ---------- */
:root {
  /* 原 #848b93 在白底仅 3.45:1，不过 AA；新版 5.9:1 */
  --text-subtle: #5b6571;
  /* 触控/点击区基线 */
  --tap-min: 44px;
  /* 8pt 网格（原 0.65rem/0.6rem 非网格点） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  /* 输入态描边：原 #e1e7ee 在白底 1.2:1，几乎看不见 */
  --border-strong: #cdd5de;
}

/* ---------- 1. 主按钮对比度：白字 on #0c81e2 ≈ 4.0:1 → #0a66c2 ≈ 5.7:1 ---------- */
.btn-primary,
.btn-primary:visited {
  background: var(--accent-text);
}
.btn-primary:hover {
  background: #08529c;
}

/* ---------- 2. 触控目标 ≥ 44px ---------- */
.btn {
  min-height: var(--tap-min);
  padding: 0.7rem 1.25rem;
}
.field-input {
  min-height: var(--tap-min);
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-sm);
  border-color: var(--border-strong);
}

/* ---------- 3. 焦点可见（iOS/部分内核 UA 默认 outline 偏弱） ---------- */
.field-input:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.field-input:focus-visible {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.12);
}

/* ---------- 4. 登录区 8pt 间距网格 ---------- */
.login-actions {
  gap: var(--space-3);
}

/* ---------- 5. 微信二维码溢出修复（原 width:300px 在窄列溢出） ---------- */
.wx-qr-frame {
  width: 100%;
  max-width: 280px;
  height: 340px;
}

/* ---------- 6. 旧 WebView 兜底（微信 XWeb / 老 Android） ---------- */
.site-header {
  -webkit-backdrop-filter: blur(14px);
}
.login-grid.is-single {
  grid-template-columns: 1fr;
}
.login-grid.is-single .login-col + .login-col {
  border-left: none;
  padding-left: 0;
}

/* ---------- 7. 价格条：从虚线弱提示升级为转化锚点 ---------- */
.login-price-strip {
  border: 1px solid var(--badge-accent-bg);
  background: #f5f9fe;
  color: var(--badge-accent-fg);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-weight: 600;
}

/* =====================================================================
 * 8. 改版稿新增类（仅 login-v2 使用；正式替换 login.html 时一并带上）
 * ===================================================================== */
.v2-wrap {
  padding: var(--space-8) 0 var(--space-8);
}
.v2-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6) var(--space-6) var(--space-6);
}
.v2-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.v2-brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: block;
}
.v2-brand-name {
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.v2-brand-name em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-subtle);
}
.v2-title {
  margin: 0 0 var(--space-1);
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 700;
}
.v2-sub {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.v2-guest {
  background: #f5f7fa;
  border: 1px solid #e5eaf0;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-6);
}
.v2-guest b {
  color: var(--text);
}
.v2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.v2-col + .v2-col {
  border-left: 1px solid var(--border);
  padding-left: var(--space-6);
}
.v2-col-title {
  margin: 0 0 var(--space-3);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.v2-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.v2-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.v2-label:first-child {
  margin-top: 0;
}
.v2-input {
  width: 100%;
  min-height: var(--tap-min);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.75rem;
  font: inherit;
  background: #fff;
}
.v2-input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.12);
}
.v2-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.v2-row .v2-input {
  flex: 1;
  min-width: 0;
}
.v2-btn {
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0 1rem;
  white-space: nowrap;
}
.v2-btn-primary {
  background: var(--accent-text);
  color: #fff;
  width: 100%;
  margin-top: var(--space-2);
}
.v2-btn-ghost {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text);
}
.v2-btn-ghost[disabled] {
  color: var(--text-subtle);
  background: #f2f4f7;
  cursor: not-allowed;
}
.v2-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-subtle);
  text-align: center;
}
.v2-or {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-subtle);
  font-size: 0.8rem;
  margin: var(--space-6) 0;
}
.v2-or::before,
.v2-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.v2-qr {
  width: 100%;
  max-width: 280px;
  height: 340px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 0.85rem;
}
.v2-wx-tip {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}
.v2-note {
  margin: var(--space-2) 0 0;
  font-size: 0.8rem;
  text-align: center;
}
.v2-note a {
  color: var(--accent-text);
}
.v2-price {
  margin: var(--space-6) 0 var(--space-3);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--badge-accent-bg);
  background: #f5f9fe;
  border-radius: var(--radius-sm);
  color: var(--badge-accent-fg);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.v2-legal {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-subtle);
  text-align: center;
}
.v2-legal a {
  color: var(--accent-text);
}
.v2-trust {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-subtle);
  text-align: center;
}

@media (max-width: 720px) {
  .v2-card {
    padding: var(--space-4);
    max-width: 480px;
  }
  .v2-split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .v2-col + .v2-col {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-6);
  }
  .v2-wrap {
    padding: var(--space-4) 0 var(--space-8);
  }
}

/* =====================================================================
 * 9. CLS 修复（评审 P0-4 短方案）：header.js 注入前预留 header 占位高度，
 *    避免共享 header 异步注入导致页面跳动。
 *    计算：.header-inner padding-block 0.85rem×2=27.2px + 最高子项
 *    .btn-header-primary(≈37px) + .site-header border-bottom 1px ≈ 65px，
 *    向上取整预留 66px；480px 断点按钮 padding 缩小→≈63px，预留 64px。
 * ===================================================================== */
#site-header-mount { min-height: 66px; }
@media (max-width: 480px) {
  #site-header-mount { min-height: 64px; }
}

/* =====================================================================
 * 打磨轮⑳（2026-09-19）：账号中心选片结果增强
 * 缩略图 / 属主大图查看器 / 单张与打包下载（只追加，不改既有规则）
 * 复用既有 .pick-viewer 系列与 .detail-photo-* 系列类名。
 * ===================================================================== */

/* 结果行缩略图：48px 圆角封面，object-fit:cover，点击打开大图 */
.detail-photo-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg-elevated, #f2f4f7);
}

/* 结果行：缩略图 + 文件名 + 备注 + 下载 + 删图 垂直居中 */
.detail-photo-row {
  align-items: center;
}

/* 单张下载链接：跟随删图节奏，用正常链接色（非按钮态，不抢主操作） */
.detail-download {
  font-size: 0.8rem;
  color: var(--accent-text, #0f766e);
  text-decoration: none;
  cursor: pointer;
}
.detail-download:hover { text-decoration: underline; }

/* 属主大图查看器：关闭按钮固定右上角；文件名条居中（其余复用 .pick-viewer） */
#owner-viewer-close {
  position: fixed;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 51;
}
#owner-viewer-name {
  margin: 0.55rem 1rem 0;
  text-align: center;
}

/* =====================================================================
 * C5 打磨轮 ㉑（2026-09-19 业主图示反馈）：
 * ① 登录页 footer 钉底：内容不足一屏时不再露出 footer 下大片底色，
 *    余白收进卡片上下（光学居中），卡片高于视口时自动退回顶对齐不裁切
 * ② 首页 AI 屏 CTA 从带区锚底上移到文案正下方（header 与能力卡之间）
 * ===================================================================== */

/* — ① 登录页钉底 footer — */
.page-login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-login .login-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.page-login .login-card {
  margin-block: auto; /* 有空间则垂直居中，空间不足则顶对齐，两端都不裁 */
}

/* — ② 首页 CTA 上移：撤销锚底（margin-top:auto）与网格上方的 2.5rem 大间距 — */
body.page-download .cloud-band .cloud-band-cta {
  margin: 0 0 1.25rem;
  padding-bottom: 0;
}
body.page-download .cloud-band .cloud-band-grid {
  margin: 0 0 1.5rem;
}
body.page-download .cloud-band-header {
  margin-bottom: 1.25rem;
}

/* =====================================================================
 * C5 打磨轮 ㉒（2026-09-19 业主拍板：首页撤「一屏一切」改连续滚动）
 * ① html 去 .snap-scroll（吸附总开关；回滚 = 加回类名即可）
 * ② 内容板块（AI/插件/选片/收尾屏）放开「强制一屏高 + 垂直居中」，高度随内容走；
 *    带区节奏靠各自 padding 与上边框保持。hero 首屏保留整屏海报感（⑤对 hero 不覆盖）。
 * ⑧⑬⑭的 snap 屏补丁（纹理/光学居中）保留：内容高度模式下 flex:1 / margin-top:auto 自然失效。
 * ===================================================================== */
body.page-download .cloud-band,
body.page-download .plugin-band,
body.page-download .pick-band {
  min-height: 0;
}
body.page-download .snap-tail {
  min-height: 0;
  display: block;
  padding-top: 2rem;
}
body.page-download .snap-tail .site-footer {
  margin-top: 0;
}

/* =====================================================================
 * C5 打磨轮 ㉓（2026-09-19 业主反馈：样张(白)→价格(白)衔接发跳）
 * 价格带改浅蓝灰底（与云 AI/插件带同色）：
 * 页面节奏成 「…插件(浅灰)→样张(白)→价格(浅灰)→页脚(深)」交替过渡；
 * 原先两白之间裸露的 2rem 灰缝融进价格带底色，衔接变顺。
 * ===================================================================== */
body.page-download .pricing-band {
  background: var(--bg);
}

/* =====================================================================
 * C5 打磨轮 ㉔（2026-09-19 业主图示反馈）：
 * ① hero 撤「强制整屏」：高度随内容（min-height:0 + 底 padding 收敛到 4rem），
 *    首屏与云 AI 屏衔接，消除下载簇下方大片空白（图示1）
 * ② 样张带区白底改浅蓝灰，与全页统一、消除白色块（图示2）
 * ③ 删除样张/价格带区上边框分割线：浅灰连片后不再需要线（图示2）
 * ===================================================================== */
body.page-download .hero-landing {
  min-height: 0;
  padding: 2.5rem 0 4rem;
}
body.page-download .pick-band {
  background: var(--bg);
}
body.page-download .pick-band,
body.page-download .pricing-band {
  border-top: none;
}