/* 168Moons — editorial, simple, generous (inspired by whale.dance rhythm) */

:root {
  --indigo: #0c091c;
  --deep: #07050f;
  --ink: #16131f;
  --ink2: #5a5468;
  --ink3: #8a8496;
  --sep: #e8e2d8;
  --fill: #f3eee6;
  --paper: #fbf8f2;
  --gold: #c6a15b;
  --gold-deep: #9a7840;
  --cyan: #6db8c4;
  --cyan-deep: #3d8a96;
  --green: #3d9a6c;
  --line: rgba(22, 19, 31, 0.08);
  --line-hi: rgba(255, 255, 255, 0.14);
  --sans: "Geist", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --eo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; overflow-x: hidden; }

::selection { background: rgba(198, 161, 91, 0.28); color: #16131f; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

a { color: inherit; }

#bgCanvas,
.global-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  display: block;
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1200;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
}

.site { position: relative; z-index: 1; min-height: 100vh; }

/* Reveal */
.wl {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
}
.wd {
  display: inline-block;
  transform: translateY(108%);
  animation: rise 0.8s var(--eo) both;
  animation-delay: var(--d, 0s);
}
.rv {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeup 0.75s var(--eo) both;
  animation-delay: var(--d, 0s);
}
.sec .wd,
.finale .wd,
.sec .rv,
.finale .rv { animation-play-state: paused; }
.sec.in .wd,
.finale.in .wd,
.sec.in .rv,
.finale.in .rv {
  animation-play-state: running;
}
.sec.in .wd,
.finale.in .wd {
  transform: none;
  opacity: 1;
}
.sec.in .rv,
.finale.in .rv {
  opacity: 1;
  transform: none;
}
.sec.in .strat,
.sec.in .vol-item,
.sec.in .sec-index {
  opacity: 1;
  transform: none;
}

@keyframes rise {
  from { transform: translateY(108%); }
  to { transform: translateY(0); }
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 開場淡入。先前這三個是 gsap.from 做的——為了三個「位移＋淡入」載一個 71 KB 的
   動畫引擎，而瀏覽器本來就會做這件事，還是在合成執行緒上做。 */
.top, .hero-kicker, .hero-sub, .cta-wrap {
  /* @keyframes fadeup 只寫了 to{}，起點取自元素**當下的計算值**——所以起點必須在
     這裡給。少了 opacity: 0 與位移，這幾條就是什麼都不做的動畫。 */
  opacity: 0;
  animation: fadeup 1.15s var(--eo) both;
  animation-delay: var(--d, 0s);
}
.top { --d: 0s; transform: translateY(-16px); }
.hero-kicker { --d: 0.22s; transform: translateY(12px); }
.hero-sub { --d: 0.5s; transform: translateY(14px); }
.cta-wrap { --d: 0.66s; transform: translateY(16px); }
.hero-stats .stat {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeup 1s var(--eo) both;
}
.hero-stats .stat:nth-child(1) { animation-delay: 0.82s; }
.hero-stats .stat:nth-child(2) { animation-delay: 0.94s; }
.hero-stats .stat:nth-child(3) { animation-delay: 1.06s; }

@media (prefers-reduced-motion: reduce) {
  .wd, .rv, .top, .hero-kicker, .hero-sub, .cta-wrap, .hero-stats .stat,
  .blob, .live-dot, .hint, .hint svg, .sec .strat, .sec .vol-item, .sec-index {
    animation: none; transform: none; opacity: 1;
  }
  html { scroll-behavior: auto; }
}

/* JS 錨點動畫期間必須把瀏覽器自己的 smooth 關掉。Chromium 對
   `element.scrollTop = n` 也會套用 scroll-behavior:smooth，逐幀寫入
   會被吃成「先卡住、最後一次才滑過去」，看起來就像瞬間跳到定位。 */
html.js-anchoring,
html.js-anchoring body {
  scroll-behavior: auto !important;
}

/* Type */
h1, h2 {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.12;
}
h1 em, h2 em {
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(135deg, #ffffff 0%, #fff3d6 20%, #e8c67c 50%, #c6a15b 80%, #9a7840 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.sec.light h2 em {
  background: linear-gradient(135deg, #c49646 0%, #9a7840 50%, #735526 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.sub {
  margin: 16px auto 0;
  max-width: 34em;
  color: var(--ink2);
  font-size: 1.02rem;
  line-height: 1.8;
}
.wrap {
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100% - 44px));
  margin: 0 auto;
}
.wrap.head { text-align: center; }

/* Hero */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 22px 90px;
  background:
    radial-gradient(1200px 700px at 50% 40%, #17122e 0%, var(--indigo) 55%, var(--deep) 100%);
  color: #fff;
  overflow: hidden;
}
.vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(6, 4, 14, 0.45) 100%),
    linear-gradient(180deg, rgba(8, 6, 18, 0.2) 0%, transparent 18%, transparent 72%, #07050f 100%);
}
.grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}
.starfield-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* A8 的魔方、VTS 的波動曲面、下載星空——容器鋪滿整個 .mesh，由 Three.js 在背景繪製 */
.product-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#A8MX .product-canvas { opacity: 0.85; }
#VTS .product-canvas { opacity: 1; }
#download .product-canvas { opacity: 0.95; }
#finale .product-canvas { opacity: 1; }
.dl-canvas { display: block; width: 100%; height: 100%; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  will-change: transform;
  animation: drift 22s var(--eo) infinite alternate;
}
.b1 { width: 46vw; height: 46vw; left: -10%; top: 16%; background: rgba(198, 161, 91, 0.25); animation-duration: 26s; }
.b2 { width: 40vw; height: 40vw; right: -12%; top: 6%; background: rgba(109, 184, 196, 0.22); animation-duration: 20s; animation-delay: -6s; }
.b3 { width: 54vw; height: 54vw; left: 26%; bottom: -26%; background: rgba(70, 52, 140, 0.3); animation-duration: 28s; animation-delay: -12s; }
.mesh.soft .blob { opacity: 0.28; }
@keyframes drift {
  to { transform: translate3d(5%, 4%, 0) scale(1.06); }
}

.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(7, 5, 15, 0.72), rgba(7, 5, 15, 0.28) 70%, transparent);
  transition: background 0.45s var(--eo), border-color 0.45s ease, backdrop-filter 0.45s ease;
}
.top.solid {
  background: rgba(12, 9, 28, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #f7f4ee;
}
.brand span {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand img { border-radius: 6px; }
.top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.top > .top-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 語系下拉選單與使用者按鈕：統一高雅無外框 ICON 設計 */
.lang-switch { position: relative; display: flex; align-items: center; }
.lang-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: rgba(255, 255, 255, 0.82);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lang-trigger.icon-only,
.account-trigger.icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-trigger.icon-only:hover,
.lang-trigger.icon-only[aria-expanded="true"],
.account-trigger.icon-only:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.account-user-icon {
  flex: none;
  width: 19px;
  height: 19px;
  opacity: 0.9;
}
/* **少了明確的寬高，SVG 沒有 viewBox 以外任何尺寸線索時預設是 300×150px**
   ——這顆地球圖示原本就是這樣被撐大的，整顆藥丸跟著變形。 */
.lang-globe { flex: none; width: 17px; height: 17px; opacity: 0.9; }
.lang-trigger-label { white-space: nowrap; }
.lang-chevron { flex: none; width: 11px; height: 11px; transition: transform 0.2s ease; }
.lang-trigger[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  list-style: none;
  padding: 6px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 20px 50px rgba(0, 0, 0, 0.35);
  z-index: 20;
}
.lang-option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 600 13.5px/1 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lang-option:hover { background: var(--fill); }
.lang-option.on { color: var(--gold-deep); background: rgba(198, 161, 91, 0.12); }
.lang-option.on::after { content: '✓'; margin-left: auto; font-size: 12px; }

/* ── 帳號徽章（頁首右上角，index.html）─────────────────────────────────────
   只是個入口：未登入連去 #download，已登入連去獨立的 /account.html。
   詳細內容（方案、登出）的樣式在下面「個人頁」那一段，兩邊共用。 */
.account-widget { display: flex; align-items: center; }
/* 未登入時就是一顆 .nav-pill——跟「下載」那顆同一套視覺語言，讀起來像
   「這也是一個可以去的地方」而不是另一種元件。 */
.account-widget .account-chip.nav-pill { white-space: nowrap; gap: 7px; }
.account-chip-icon { border-radius: 2px; flex: none; }
.account-chip.verified {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.account-chip.verified:hover {
  border-color: rgba(198, 161, 91, 0.55);
  background: rgba(198, 161, 91, 0.14);
}
.account-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1400;
  font: 700 12px/1 var(--sans);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 這顆 class 現在也可能是一張 <img>（有 Google 頭像時）——object-fit 對
     span 沒有作用（只對可替換元素生效），不需要另外拆一條規則。 */
  object-fit: cover;
}
.account-avatar.lg { width: 64px; height: 64px; font-size: 22px; margin: 0 auto 16px; }

/* ── 個人頁（獨立頁面，account.html）───────────────────────────────────────
   跟首頁共用 :root 的顏色與字型，但不在 hero 上面，所以整頁就是暗色背景，
   不需要 .top 那一套「捲動後才變實色」的處理。 */
.account-page { min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(165deg, #14102a 0%, #07050f 70%); color: #f5f1e8; }
.account-page-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px max(22px, env(safe-area-inset-right)) 16px max(22px, env(safe-area-inset-left));
  /* 跟首頁 .top.solid 同一套視覺——這裡沒有首頁那種「捲動後才變實色」的
     漸進效果：個人頁本來就短，值不回那個轉場的複雜度，固定給實色背景。 */
  background: rgba(12, 9, 28, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* 頂部留白補上固定表頭的高度（約 68px）＋原本的呼吸空間，卡片才不會一開始
   就被表頭蓋住一截。 */
.account-page-main { flex: 1; display: grid; place-items: center; padding: 100px 16px 64px; }
.account-card {
  width: min(420px, 100%);
  background: var(--paper);
  color: var(--ink);
  border-radius: 26px;
  padding: 36px 32px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 80px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.account-loading { color: var(--ink3); font-size: 13px; }
.account-guest-title { font-size: 1.3rem; font-weight: 500; margin-bottom: 8px; }
.account-email { font-size: 16px; font-weight: 700; word-break: break-all; }
.account-sub { font-size: 12.5px; color: var(--ink3); margin: 4px 0 20px; }
.account-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1400;
  font: 700 13.5px/1 var(--sans);
  text-decoration: none;
}
.account-back { display: block; margin-top: 18px; font-size: 12.5px; color: var(--ink3); text-decoration: none; }
.account-back:hover { color: var(--ink); }

/* 方案清單：頁首之前只有一份小小的下拉版本，個人頁換成完整版——每一列
   帶真正的產品 logo，而不是一顆抽象色點，讀起來更像「這是你的東西」。 */
.account-plans {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--sep);
  text-align: left;
}
.account-plan-row.full {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fill);
}
.account-plan-row.full img { border-radius: 8px; flex: none; }
.account-plan-product { font-size: 11px; letter-spacing: 0.08em; color: var(--ink3); text-transform: uppercase; }
.account-plan-name { font-size: 13.5px; font-weight: 700; margin-top: 1px; }
.account-plan-expiry { font-size: 11.5px; color: var(--ink3); margin-top: 1px; }
.account-plan-expiry.expired { color: #f87171; }
.account-plan-expiry.permanent { color: #93c5fd; }
.account-empty { font-size: 12.5px; color: var(--ink3); }
.account-note { font-size: 11.5px; color: var(--ink3); line-height: 1.5; margin-top: 14px; text-align: left; }
.account-logout {
  width: 100%;
  margin-top: 20px;
  padding: 11px 0;
  border: 1px solid var(--sep);
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink2);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
}
.account-logout:hover { background: var(--sep); color: var(--ink); }
.account-logout:disabled { opacity: 0.6; cursor: default; }

/* 專屬邀請連結分享區塊 */
.account-referral-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(198, 161, 91, 0.08);
  border: 1px solid rgba(198, 161, 91, 0.28);
  text-align: left;
}
.account-referral-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.account-referral-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-deep);
}
.account-referral-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.account-referral-code {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep);
  background: rgba(198, 161, 91, 0.18);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.account-referral-edit-btn {
  font-size: 11px;
  color: var(--gold-deep);
  background: none;
  border: 1px solid rgba(198, 161, 91, 0.4);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  transition: all 0.2s ease;
}
.account-referral-edit-btn:hover {
  background: rgba(198, 161, 91, 0.15);
  border-color: var(--gold);
}
.account-referral-locked {
  font-size: 10.5px;
  color: var(--ink3);
  background: var(--fill);
  border: 1px solid var(--sep);
  border-radius: 6px;
  padding: 2px 6px;
}
.account-referral-hint {
  font-size: 11.5px;
  color: var(--ink3);
  margin: 0 0 10px;
  line-height: 1.45;
}
.account-referral-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-referral-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--sep);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  outline: none;
}
.account-referral-input:focus {
  border-color: var(--gold);
}
.account-referral-copy {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: #1a1400;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.account-referral-copy:hover {
  filter: brightness(1.1);
}
.account-referral-copy.copied {
  background: var(--cyan);
  color: #041418;
}
.account-referral-stat {
  font-size: 11px;
  color: var(--gold-deep);
  margin-top: 8px;
  font-weight: 600;
}
.account-referral-edit-form {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-referral-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.account-referral-edit-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  outline: none;
}
.account-referral-save-btn {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: #1a1400;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.account-referral-save-btn:hover {
  filter: brightness(1.1);
}
.account-referral-save-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.account-referral-cancel-btn {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--sep);
  border-radius: 8px;
  background: var(--fill);
  color: var(--ink2);
  font-size: 12px;
  cursor: pointer;
}
.account-referral-cancel-btn:hover {
  background: var(--sep);
  color: var(--ink);
}
.account-referral-msg {
  font-size: 11.5px;
  margin-top: 4px;
  line-height: 1.4;
}
.account-referral-msg.is-error {
  color: #f87171;
  font-weight: 600;
}
.account-referral-msg.is-success {
  color: var(--green);
  font-weight: 600;
}

/* ── 方案訂購與升級（Shop & Checkout）────────────────────────── */
.account-shop-box {
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
  background: var(--fill);
  border: 1px solid var(--sep);
  text-align: left;
}
.account-shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.account-shop-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.shop-prod-tabs {
  display: flex;
  gap: 4px;
  background: var(--paper);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--sep);
}
.shop-prod-tab {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.shop-prod-tab.active[data-prod="a8mx"] {
  background: var(--gold);
  color: #1a1400;
}
.shop-prod-tab.active[data-prod="vts"] {
  background: var(--cyan);
  color: #041418;
}
.account-shop-sub {
  font-size: 11.5px;
  color: var(--ink3);
  margin-bottom: 12px;
  line-height: 1.45;
}
.shop-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.shop-plan-card {
  border: 1.5px solid var(--sep);
  border-radius: 10px;
  background: var(--paper);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s var(--eo);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.shop-plan-card:hover {
  border-color: var(--gold-deep);
  transform: translateY(-1px);
}
.shop-plan-card.selected {
  border-color: var(--gold);
  background: rgba(198, 161, 91, 0.08);
  box-shadow: 0 0 0 1px var(--gold);
}
.shop-plan-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.shop-plan-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.shop-promo-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
}
.shop-plan-duration {
  font-size: 11px;
  color: var(--ink3);
}
.shop-plan-price-wrap {
  margin-top: 4px;
}
.shop-plan-was {
  font-size: 10.5px;
  color: var(--ink3);
  text-decoration: line-through;
  margin-right: 4px;
}
.shop-plan-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-deep);
  font-family: var(--mono);
}
.shop-methods-section {
  margin-bottom: 14px;
}
.shop-section-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 6px;
}
.shop-methods-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shop-method-pill {
  font-size: 11.5px;
  font-family: var(--mono);
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--sep);
  background: var(--paper);
  color: var(--ink2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.shop-method-pill:hover {
  border-color: var(--gold-deep);
  color: var(--ink);
}
.shop-method-pill.selected {
  border-color: var(--gold);
  background: rgba(198, 161, 91, 0.15);
  color: #8a6400;
  font-weight: 700;
}
.shop-buy-btn {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1400;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--eo);
  box-shadow: 0 2px 8px rgba(198, 161, 91, 0.28);
}
.shop-buy-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.shop-buy-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.account-shop-msg {
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
  font-weight: 600;
}
.account-shop-msg.is-error {
  color: #f87171;
}
.account-shop-msg.is-success {
  color: var(--green);
}

/* ── 專屬推薦碼記憶徽章（Referral Memory Badges）────────────────────────── */
.ref-widget { display: flex; align-items: center; }
.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(198, 161, 91, 0.14);
  border: 1px solid rgba(198, 161, 91, 0.45);
  color: var(--gold);
  border-radius: 999px;
  padding: 0 10px;
  height: 34px;
  font-size: 11.5px;
  font-family: var(--sans);
  white-space: nowrap;
}
.ref-chip-code {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(198, 161, 91, 0.28);
  padding: 2px 6px;
  border-radius: 6px;
}
.ref-chip-clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0 2px;
  font-size: 15px;
  line-height: 1;
  transition: color 0.15s ease;
}
.ref-chip-clear:hover { color: #f87171; }

.dl-ref-banner {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(198, 161, 91, 0.14);
  border: 1px solid rgba(184, 134, 11, 0.28);
  border-radius: 12px;
  padding: 10px 16px;
  color: #3d352e;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dl-ref-banner strong {
  color: #8f6006;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dl-ref-banner .ref-clear-link {
  color: #7a6e65;
  font-size: 11.5px;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: underline;
  border: none;
  background: none;
}
.dl-ref-banner .ref-clear-link:hover { color: #dc2626; }

.nav-pill {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: #0e0a1f;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background 0.3s var(--eo), border-color 0.3s var(--eo), transform 0.3s var(--eo), color 0.3s var(--eo), box-shadow 0.3s var(--eo);
}
.nav-pill:hover {
  color: #ffffff;
  background: #191336;
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.nav-pill.is-on {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  background: #191336;
}

.hero-inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fcefd2;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}
.hero h1 {
  color: #f7f4ee;
  font-size: clamp(40px, 8.5vw, 90px);
  font-weight: 400;
  max-width: 14em;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.hero-sub {
  color: rgba(247, 244, 238, 0.98);
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.025em;
  line-height: 1.6;
  max-width: 36em;
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(7, 5, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(580px, 100%);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 16px 0 14px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  margin-top: 2px;
  transition: transform 0.35s var(--eo), box-shadow 0.35s ease;
}
.hero-stats:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}
.hero-stats .stat {
  padding: 0 14px;
  text-align: center;
  transition: transform 0.3s ease;
}
.hero-stats .stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.hero-stats b {
  display: block;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.25);
}
.hero-stats span {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.6);
}

.cta-wrap {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* 首頁不再需要「選一個開始」那顆展開鈕——兩個產品的 CTA 直接顯示。 */
.cta-duo {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-btn {
  position: relative;
  overflow: hidden;
  height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 12px 32px rgba(6, 4, 18, 0.3);
  transition: transform 0.35s var(--eo), box-shadow 0.35s var(--eo), filter 0.35s ease;
}
.cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--eo);
  pointer-events: none;
}
.cta-btn:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.06); }
.cta-btn:hover::after { transform: translateX(130%); }
.cta-btn:active { transform: translateY(0) scale(0.985); }
.cta-btn.gold {
  background: linear-gradient(135deg, #fff0c7 0%, #e2be75 35%, #c6a15b 80%, #a8843c 100%);
  color: #1a1204;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cta-btn.gold:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 12px 30px rgba(0, 0, 0, 0.45);
}
.cta-btn.cyan {
  background: linear-gradient(135deg, #d2f7fc 0%, #87d9e4 35%, #4ea9b8 80%, #2f7e8c 100%);
  color: #041b1e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Astra Starfield Controls (Inspired by Astra Suite) */
.astra-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(14, 11, 28, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  margin: 0;
  animation: fadeup 1.1s var(--eo) 0.5s both;
}
.astra-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(247, 244, 238, 0.65);
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.astra-mode:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.astra-mode.active {
  color: #1a1400;
  background: linear-gradient(135deg, #f7d287 0%, #c6a15b 100%);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(198, 161, 91, 0.35);
}
.astra-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.25s ease;
}
.astra-mode.active .astra-dot {
  background: #1a1400;
}
@media (max-width: 640px) {
  .astra-bar {
    bottom: 74px;
    padding: 4px 6px;
    gap: 4px;
  }
  .astra-mode {
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
  }
}

.hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transform: translateX(-50%);
  opacity: 0;
  animation: hintin 1.2s var(--eo) 1.45s both;
}
.hint-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hint svg {
  width: 18px;
  height: 18px;
  animation: bob-y 3.2s ease-in-out 2.2s infinite;
}
@keyframes hintin {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bob-y {
  50% { transform: translateY(5px); }
}

/* Sections */
/* 上方導覽是 position:fixed，錨點捲動如果沒補這個，目的地的開頭會被蓋在
   固定導覽列底下。點擊動畫由 js/main.js 的 animateScrollTo 負責；這裡只
   是讓（沒有 JS、或從網址帶 hash 進來時）瀏覽器自己對齊的位置也不被擋住。 */
.hero, .sec, .finale { scroll-margin-top: 0; }
.hero, .sec, .finale { position: relative; z-index: 1; }
.sec {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 76px 0 60px;
  overflow: hidden;
  box-sizing: border-box;
}
.sec-index {
  position: absolute;
  top: 28px;
  right: max(22px, env(safe-area-inset-right));
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink3);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
}
.sec.in .sec-index,
.finale.in .sec-index {
  animation: fadeup 0.9s var(--eo) 0.04s both;
}
.sec.dark .sec-index,
.finale .sec-index { color: rgba(255, 255, 255, 0.32); }
.sec.light {
  background:
    linear-gradient(180deg, #ece6dc 0%, var(--fill) 12%, var(--fill) 100%);
  color: var(--ink);
}
/* 兩個淺色段落相鄰時，後面那個不要再畫一次頂端的漸層——那條深色帶會看起來像接縫。 */
.sec.light + .sec.light { background: var(--fill); }
.sec.dark {
  background: linear-gradient(165deg, #14102a 0%, #0b0818 70%);
  color: #fff;
  overflow: hidden;
}
.sec.dark .eyebrow { color: rgba(255, 255, 255, 0.5); }

/* A8MX／VTS 這兩顆眼眉字換成膠囊型 tag，跟品牌色綁在一起（金／青，跟
   modal 裡 .portal-badge、上方導覽 .nav-pill.gold/.cyan 同一套配色）——
   純文字的大寫字距已經不夠「像標籤」了，加個底色跟邊框才是使用者要的
   「漂亮的 TAG 外觀」。 */
#A8MX .eyebrow::before,
#VTS .eyebrow::before { display: none; }
#A8MX .eyebrow,
#VTS .eyebrow {
  display: inline-flex;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
}
#A8MX .eyebrow {
  background: rgba(198, 161, 91, 0.12);
  border-color: rgba(198, 161, 91, 0.4);
  color: var(--gold-deep);
}
#VTS .eyebrow {
  background: rgba(109, 184, 196, 0.16);
  border-color: rgba(109, 184, 196, 0.45);
  color: #a8e4ec;
}
.sec.dark .sub { color: rgba(255, 255, 255, 0.68); }
.sec h2 { font-size: clamp(30px, 5.2vw, 54px); margin-top: 14px; letter-spacing: -0.04em; }

/* ── 左右分欄：左邊介紹說明卡片，右邊獨立 3D 動畫 ────────────────────── */
.prod-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  width: min(1200px, calc(100% - 44px));
}
.prod-col-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.prod-col-info .sub {
  margin: 12px 0 20px;
  max-width: 32em;
  text-align: left;
}
.prod-col-visual {
  position: relative;
  width: 100%;
  height: 520px;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 28px;
}
.prod-col-visual .product-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage-row { margin-top: 40px; text-align: center; }

.stage-card,
.vol-card {
  width: 100%;
  max-width: 540px;
  margin: 0;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 24px 60px rgba(22, 19, 31, 0.08);
  transition: transform 0.4s var(--eo), box-shadow 0.4s ease, border-color 0.4s ease;
}
@media (hover: hover) {
  .stage-card:hover,
  .dl-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 32px 75px rgba(22, 19, 31, 0.12);
  }
  .vol-card:hover {
    transform: translateY(-6px);
    border-color: rgba(109, 184, 196, 0.45);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.15) inset,
      0 32px 75px rgba(0, 0, 0, 0.45),
      0 0 30px rgba(109, 184, 196, 0.12);
  }
}

.stage-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.stage-head img { border-radius: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.stage-head strong { display: block; font-size: 1.1rem; letter-spacing: -0.01em; }
.stage-head small { color: var(--ink3); font-size: 0.85rem; margin-top: 2px; display: block; }

.card-lead {
  margin: -6px 0 16px;
  color: var(--ink2);
  font-size: 0.95rem;
  line-height: 1.65;
}
.vol-card .card-lead { color: rgba(255, 255, 255, 0.72); }

.strat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sec .strat,
.sec .vol-item {
  opacity: 0;
  transform: translateY(14px);
}
.sec.in .strat,
.sec.in .vol-item { animation: fadeup 0.75s var(--eo) both; }
.sec.in .strat:nth-child(1), .sec.in .vol-item:nth-child(1) { animation-delay: 0.16s; }
.sec.in .strat:nth-child(2), .sec.in .vol-item:nth-child(2) { animation-delay: 0.24s; }
.sec.in .strat:nth-child(3), .sec.in .vol-item:nth-child(3) { animation-delay: 0.32s; }
.sec.in .strat:nth-child(4), .sec.in .vol-item:nth-child(4) { animation-delay: 0.4s; }
.sec.in .strat:nth-child(5) { animation-delay: 0.48s; }
.sec.in .strat:nth-child(6) { animation-delay: 0.56s; }
.strat {
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--sep);
  background: rgba(255, 255, 255, 0.85);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s var(--eo), background 0.3s var(--eo), color 0.3s var(--eo), box-shadow 0.3s var(--eo), transform 0.3s var(--eo);
}
.strat.on,
.strat:hover {
  border-color: rgba(198, 161, 91, 0.65);
  background: rgba(198, 161, 91, 0.16);
  color: var(--gold-deep);
  box-shadow: 0 8px 22px rgba(154, 120, 64, 0.16), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transform: translateY(-2px);
}

.stage-note {
  margin-top: 20px;
  padding: 10px 14px;
  min-height: 3.8em;
  color: var(--ink2);
  font-size: 0.93rem;
  line-height: 1.65;
  border-left: 3px solid var(--gold);
  background: rgba(198, 161, 91, 0.06);
  border-radius: 0 12px 12px 0;
  transition: opacity 0.32s var(--eo), transform 0.32s var(--eo);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--ink);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.3s var(--eo), transform 0.3s var(--eo), color 0.3s ease;
}
.text-link:hover { opacity: 1; transform: translateX(4px); color: var(--gold-deep); }
.text-link.light { color: #fff; }
.text-link.light:hover { color: var(--cyan); }

/* VTS card on dark */
.vol-card {
  background: linear-gradient(180deg, rgba(16, 12, 34, 0.88) 0%, rgba(8, 6, 20, 0.72) 100%);
  border-color: rgba(109, 184, 196, 0.22);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 28px 70px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(109, 184, 196, 0.08);
  color: #fff;
}

.vol-card .stage-head small { color: rgba(255, 255, 255, 0.65); }
.vol-card .stage-note {
  color: rgba(255, 255, 255, 0.85);
  border-left-color: var(--cyan);
  background: rgba(109, 184, 196, 0.08);
}

/* ── stage-card in dark section (VTS) ── */
.sec.dark .stage-card {
  background: linear-gradient(160deg, rgba(14, 10, 30, 0.90) 0%, rgba(6, 4, 18, 0.78) 100%);
  border-color: rgba(109, 184, 196, 0.22);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 28px 70px rgba(0, 0, 0, 0.50),
    0 0 32px rgba(109, 184, 196, 0.10);
  color: #fff;
}
@media (hover: hover) {
  .sec.dark .stage-card:hover {
    border-color: rgba(109, 184, 196, 0.40);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.14) inset,
      0 32px 80px rgba(0, 0, 0, 0.55),
      0 0 40px rgba(109, 184, 196, 0.16);
    transform: translateY(-6px);
  }
}
.sec.dark .stage-head small { color: rgba(255, 255, 255, 0.62); }
.sec.dark .stage-head strong { color: #fff; }
.sec.dark .card-lead { color: rgba(255, 255, 255, 0.72); }

/* strat buttons inside dark section */
.sec.dark .strat {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
}
.sec.dark .strat.on,
.sec.dark .strat:hover {
  border-color: rgba(109, 184, 196, 0.55);
  background: rgba(109, 184, 196, 0.14);
  color: var(--cyan);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.18), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-2px);
}

/* stage-note inside dark section */
.sec.dark .stage-note {
  color: rgba(255, 255, 255, 0.82);
  border-left-color: var(--cyan);
  background: rgba(109, 184, 196, 0.08);
}

.vol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vol-item {
  text-align: left;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.35s var(--eo), background 0.35s var(--eo), transform 0.35s var(--eo), box-shadow 0.35s var(--eo);
}
.vol-item span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.vol-item b {
  display: block;
  margin: 8px 0 4px;
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: #bbf3fa;
  text-shadow: 0 0 14px rgba(109, 184, 196, 0.4);
}
.vol-item small { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
.vol-item.on,
.vol-item:hover {
  border-color: rgba(109, 184, 196, 0.7);
  background: rgba(109, 184, 196, 0.2);
  box-shadow: 0 8px 24px rgba(109, 184, 196, 0.2), 0 0 16px rgba(109, 184, 196, 0.15);
  transform: translateY(-2px);
}


/* Finale */
.finale {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(170deg, #100c22, var(--deep) 78%);
  color: #fff;
  text-align: center;
  padding: 100px 22px 0;
  overflow: hidden;
  box-sizing: border-box;
}
.fin-inner {
  position: relative;
  z-index: 4;
  padding: 40px 0 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fin-mark {
  margin-bottom: 26px;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(198, 161, 91, 0.18);
}
.finale h2 { font-size: clamp(44px, 8vw, 88px); letter-spacing: -0.045em; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.fin-lede {
  margin: 18px auto 0;
  max-width: 28em;
  color: rgba(247, 244, 238, 0.55);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.fin-cta {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.store-cta {
  position: relative;
  overflow: hidden;
  height: 54px;
  padding: 0 30px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff0c7 0%, #e2be75 35%, #c6a15b 80%, #a8843c 100%);
  color: #1a1204;
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 36px rgba(198, 161, 91, 0.35);
  transition: transform 0.35s var(--eo), box-shadow 0.35s var(--eo), filter 0.35s ease;
}
.store-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 44px rgba(198, 161, 91, 0.5);
  filter: brightness(1.05);
}
.store-cta:active { transform: translateY(0) scale(0.985); }
.store-cta.ghost {
  background: rgba(109, 184, 196, 0.1);
  color: #bbf3fa;
  border: 1px solid rgba(109, 184, 196, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(0, 0, 0, 0.35);
}
.store-cta.ghost:hover {
  background: rgba(109, 184, 196, 0.22);
  border-color: rgba(109, 184, 196, 0.75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 18px 44px rgba(109, 184, 196, 0.35);
  color: #fff;
}

.foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 8px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: min(1100px, 100%);
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Modal */
.grand-modal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--eo), visibility 0.45s var(--eo);
}
.grand-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 20, 0.72);
  backdrop-filter: blur(12px);
}
.modal-panel {
  position: relative;
  z-index: 10;
  width: min(640px, calc(100% - 32px));
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--ink);
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 30px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(28px) scale(0.96);
  transition: transform 0.55s var(--eo);
}
.grand-modal.active .modal-panel { transform: none; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--sep);
  background: var(--fill);
  font-size: 1.25rem;
  cursor: pointer;
}
.modal-content { display: flex; flex-direction: column; gap: 16px; }
.modal-header-block { display: flex; align-items: center; gap: 16px; }
.modal-title { font-size: 1.45rem; font-weight: 500; }
.portal-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.badge-gold { background: rgba(212, 160, 23, 0.15); color: #8a6400; }
.badge-cyan { background: rgba(26, 163, 184, 0.15); color: #0b6b78; }
.modal-who {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.55;
}
.modal-desc { color: var(--ink2); line-height: 1.65; }
.modal-telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-tel-item {
  background: var(--fill);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(12px);
}
.grand-modal.active .modal-tel-item {
  animation: fadeup 0.55s var(--eo) both;
}
.grand-modal.active .modal-tel-item:nth-child(1) { animation-delay: 0.08s; }
.grand-modal.active .modal-tel-item:nth-child(2) { animation-delay: 0.16s; }
.grand-modal.active .modal-tel-item:nth-child(3) { animation-delay: 0.24s; }
.grand-modal.active .modal-tel-item:nth-child(4) { animation-delay: 0.32s; }
.modal-tel-item small { color: var(--ink3); font-size: 0.82rem; }
.modal-action-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.modal-spec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.spec-btn-gold { background: var(--gold); color: #1a1400; }
.spec-btn-cyan { background: var(--cyan); color: #041418; }
.modal-dl-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.82);
  letter-spacing: .02em;
}
.modal-dl-btn:hover { border-color: rgba(255,255,255,0.6); color: #fff; background: rgba(255,255,255,0.06); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 頁首導覽 pill 維持一致黑底白字高雅風格 */
.nav-pill.primary {
  color: #ffffff;
  background: #0e0a1f;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.nav-pill.primary:hover {
  background: #191336;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Downloads */
.dl-wrap {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
  /* stretch 而不是 start：兩個產品的平台數不同（A8MX 只有 Linux，VTS 多一個
     Windows），靠 start 會讓兩張卡一高一低。 */
  align-items: stretch;
}
.dl-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px 20px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 20px 48px rgba(22, 19, 31, 0.08);
  /* 內容是非同步填進來的：先給一個高度，版本資訊回來時版面才不會跳。 */
  min-height: 210px;
  transition: transform 0.45s var(--eo), box-shadow 0.45s ease, border-color 0.45s ease;
}
#dl-a8 {
  border-top: 2px solid rgba(198, 161, 91, 0.4);
}
#dl-a8:hover {
  border-color: rgba(198, 161, 91, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 24px 60px rgba(198, 161, 91, 0.12);
}
#dl-vts {
  border-top: 2px solid rgba(109, 184, 196, 0.45);
}
#dl-vts:hover {
  border-color: rgba(109, 184, 196, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 24px 60px rgba(109, 184, 196, 0.12);
}
.dl-head { display: flex; align-items: center; gap: 12px; }
.dl-head img { border-radius: 22px; flex: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.dl-head strong { display: block; font-size: 1.05rem; }
.dl-head small { display: block; color: var(--ink3); font-size: 12px; margin-top: 2px; }
.dl-rows { margin-top: 18px; display: grid; gap: 10px; flex: 1; align-content: start; }
.dl-row {
  /* **grid 而不是 flex-wrap**：靠 wrap 的話，平台名一長（Windows (x86-64)）按鈕就
     會被擠到第二行——同一張卡裡兩列長得不一樣。這裡永遠是「左邊資訊、右邊按鈕」。 */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--fill);
  border: 1px solid var(--sep);
  border-radius: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dl-row:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(198, 161, 91, 0.3);
}
.dl-row-main { min-width: 0; }
.dl-row-main strong { display: block; font-size: 13.5px; font-weight: 600; }
/* 雜湊是給要驗證的人看的，不是給第一次來的人看的：縮成一行灰字，按一下複製全長。 */
.dl-sum {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink3);
  border: 0;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.dl-sum:hover { color: var(--gold-deep); background: rgba(198, 161, 91, 0.12); }
.dl-get {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s var(--eo), filter 0.25s var(--eo), box-shadow 0.25s ease;
}
.dl-get:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 18px rgba(0, 0, 0, 0.22);
}
.dl-get.locked {
  background: linear-gradient(135deg, #c49646 0%, #9a7840 100%);
  color: #fff;
}
.dl-get:disabled { opacity: 0.55; cursor: progress; transform: none; }
.dl-foot {
  /* margin-top:auto 把它壓在卡片底部，兩張卡的這一行才會對齊。 */
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink3);
}
.dl-foot a { text-decoration: none; }
.dl-foot a:hover { color: var(--gold-deep); }
/* 下載區信任標籤 */
.dl-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.dl-trust-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.22);
  color: var(--ink2);
  letter-spacing: .01em;
  white-space: nowrap;
}
.dl-state.is-error { color: var(--gold-deep); font-weight: 600; white-space: pre-wrap; font-size: 12px; }
.dl-state.is-signed-in { color: var(--cyan-deep); font-weight: 600; }
.dl-state {
  width: min(1100px, calc(100% - 44px));
  margin: 18px auto 0;
  text-align: center;
  color: var(--ink2);
  font-size: 12.5px;
  line-height: 1.75;
}
/* 這一段是功能區，不是宣言：標題壓小，把空間讓給兩張卡。 */
#download h2 { font-size: clamp(26px, 4.4vw, 40px); }
#download .sub { margin-top: 16px; font-size: 0.95rem; }

@media (max-width: 720px) {
  .top {
    justify-content: space-between;
    gap: 8px;
  }
  .top > .top-nav {
    position: static;
    transform: none;
    order: 2;
    gap: 6px;
  }
  .brand { order: 1; flex-shrink: 0; }
  .top-right { order: 3; flex-shrink: 0; }
  /* 窄螢幕藏掉「自動執行」那一條（它只是頁內錨點）。**指名而不是 :last-child**：
     下載那一條後來加在最後面，而它是整頁最重要的一顆按鈕。 */
  .top-nav .nav-pill[href="#A8MX"] { display: none; }
  .nav-pill { height: 32px; padding: 0 10px; font-size: 11px; }
  /* 這裡原本是舊版三顆按鈕（EN／简／繁）留下的 `.lang-switch button`——那條
     用「class + 元素」選到的規則，特殊度比 `.lang-trigger`／`.lang-option`
     自己那條（單一 class）都高，結果現在的下拉選單觸發鈕跟選單裡每一個
     選項全部被壓成 28px 高、10px 字，不管視窗多寬都套用，這正是「語系顯示
     怪怪的」的真正原因。改成只縮小觸發鈕本身（跟旁邊的 .nav-pill 同一個
     手機尺寸），選單裡的選項維持原尺寸——那是彈出的清單，不受頂列寬度擠。 */
  .lang-switch { height: 34px; }
  .lang-trigger { height: 34px; padding: 0 11px; font-size: 12px; }
  /* 帳號徽章是這一排最後加進來的一個，寬度算不準每一支手機。與其賭它永遠
     擠得下，讓這一排在真的擠不下時自己換行、靠右對齊——好過裁切或溢出。 */
  .top-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .account-chip.verified { width: 32px; height: 32px; }
  .account-avatar { width: 24px; height: 24px; font-size: 11px; }
  .ref-chip { height: 32px; font-size: 11px; padding: 0 8px; }
  .dl-ref-banner { font-size: 12px; padding: 8px 12px; }
  .brand span { display: none; }
  .prod-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .prod-col-visual {
    height: 320px;
    min-height: 280px;
  }
  .stage-card, .vol-card {
    max-width: 100%;
  }
  .sec {
    min-height: auto;
    padding: 80px 0 60px;
  }
  .strat-grid { grid-template-columns: 1fr 1fr; }
  .modal-telemetry-grid { grid-template-columns: 1fr; }
  .foot { flex-direction: column; text-align: center; }
  .hero { padding: 88px 18px 72px; }
  .hero-inner { gap: 20px; }
  .hero h1 { font-size: clamp(36px, 11vw, 56px); }
  .hero-stats { width: 100%; }
  .hero-stats .stat { padding-top: 16px; }
  .hero-stats b { font-size: 26px; }
  .sec-index { top: 18px; font-size: 10px; }
  .hint-label { display: none; }
}

/* ── 24H 客服助理 (Support Assistant) 樣式 ────────────────────────────── */

.support-page {
  background: #0d091e;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: 'Geist', 'Noto Sans TC', sans-serif;
}

.support-page-main {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 84px 16px 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.support-container {
  flex: 1;
  min-height: 540px;
  max-height: calc(100vh - 116px);
  display: flex;
  flex-direction: column;
  background: rgba(18, 14, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.support-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.support-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(198, 161, 91, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 未登入守門卡片 */
.support-gate-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

.support-bot-avatar {
  width: 68px;
  height: 68px;
  font-size: 34px;
  border-radius: 50%;
  background: rgba(198, 161, 91, 0.12);
  border: 1px solid rgba(198, 161, 91, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(198, 161, 91, 0.15);
}

.support-gate-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.support-gate-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 420px;
  margin: 0 0 28px;
  line-height: 1.6;
}

.support-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: #111;
  border: none;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s var(--eo), box-shadow 0.2s var(--eo);
}
.support-login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.support-gate-preview {
  margin-top: 40px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  max-width: 440px;
}

.support-gate-preview-title {
  width: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 4px;
  font-weight: 500;
}

.support-gate-sample-chip {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
}

/* 對話視窗主結構 */
.support-chat-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.support-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.support-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.support-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.support-header-user {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 8px;
  font-family: var(--mono);
}

.support-reset-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s;
}
.support-reset-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* 訊息區域 */
.support-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.support-msg-row {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.support-msg-row.user {
  align-self: flex-end;
  align-items: flex-end;
}

.support-msg-row.bot {
  align-self: flex-start;
  align-items: flex-start;
}

.support-msg-bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.support-msg-row.user .support-msg-bubble {
  background: linear-gradient(135deg, #c6a15b, #e5c378);
  color: #120c2e;
  border-bottom-right-radius: 4px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(198, 161, 91, 0.25);
}

.support-msg-row.bot .support-msg-bubble {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
}

.support-msg-bubble pre {
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  overflow-x: auto;
}

.support-msg-bubble code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #e5c378;
}

.support-msg-bubble .chat-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.support-msg-bubble .chat-link:hover {
  color: #fff;
}

/* 附帶按鈕卡片 */
.support-bubble-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(198, 161, 91, 0.15);
  border: 1px solid rgba(198, 161, 91, 0.35);
  color: #e5c378;
  font-size: 12.5px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--eo);
}
.support-action-btn:hover {
  background: rgba(198, 161, 91, 0.3);
  border-color: rgba(198, 161, 91, 0.6);
  transform: translateY(-1px);
}

.support-msg-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 4px;
}

.support-msg-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--mono);
}

.support-copy-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.2s;
}
.support-copy-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* 快捷問題列 */
.support-quick-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-width: none;
}
.support-quick-bar::-webkit-scrollbar {
  display: none;
}

.support-chip-btn {
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.2s var(--eo);
}
.support-chip-btn:hover {
  background: rgba(198, 161, 91, 0.2);
  border-color: rgba(198, 161, 91, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

/* 輸入區域 */
.support-input-area {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 10, 30, 0.95);
}

.support-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 11px 16px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.support-input:focus {
  border-color: var(--gold);
}

.support-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c6a15b, #e5c378);
  border: none;
  color: #120c2e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.support-send-btn:hover {
  transform: scale(1.05);
}
.support-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 打字中指示器 */
.support-typing-indicator {
  display: flex;
  gap: 5px;
  padding: 4px 6px;
}

.support-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.support-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.support-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* 會員中心客服卡片 */
.account-support-box {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(198, 161, 91, 0.08), rgba(109, 184, 196, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.account-support-icon {
  font-size: 26px;
  line-height: 1;
}

.account-support-body {
  flex: 1;
}

.account-support-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.account-support-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin: 3px 0 0;
  line-height: 1.4;
}

.account-support-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.account-support-btn:hover {
  background: rgba(198, 161, 91, 0.25);
  border-color: rgba(198, 161, 91, 0.5);
  color: #e5c378;
}

.foot-link {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 12px;
}
.foot-link:hover {
  color: var(--gold);
}

/* ── 懸浮 24H 客服啟動鈕 (Floating 24H Support Launcher) ────────── */
.floating-support-launcher {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: rgba(18, 14, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f7f4ee;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--eo), box-shadow 0.25s var(--eo), border-color 0.25s ease, background 0.25s ease;
}

.floating-support-launcher:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(26, 20, 52, 0.96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  color: #fff;
}

.floating-support-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}

.floating-support-icon {
  font-size: 16px;
  line-height: 1;
}

.floating-support-text {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .floating-support-launcher {
    bottom: 18px;
    right: 16px;
    height: 40px;
    padding: 0 14px 0 12px;
    font-size: 12px;
  }
}

/* Auth Modal (CoinKarma inspired) */
.auth-modal-panel {
  width: min(450px, calc(100% - 32px));
  padding: 36px 30px 28px;
  background: linear-gradient(180deg, #1c182d 0%, #131022 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 32px 80px rgba(0, 0, 0, 0.65);
  color: #f7f5fb;
  text-align: center;
}

.auth-modal-header {
  margin-bottom: 16px;
}

.auth-modal-logo {
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 4px 12px rgba(212, 160, 23, 0.25));
}

.auth-modal-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
}

.auth-modal-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-modal-tab.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.auth-modal-tab:hover:not(.active) {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}

.auth-modal-title {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: #ffffff;
}

.auth-modal-sub {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0 auto;
}

.auth-modal-benefits {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

.auth-benefit-item svg {
  flex-shrink: 0;
  color: #d4a017;
}

.auth-google-btn {
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  color: #1f1f1f;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-google-btn:hover {
  background: #f5f6f8;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.auth-google-btn:active {
  transform: translateY(0);
}

.auth-google-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.auth-ref-section {
  margin-top: 18px;
  text-align: left;
}

.auth-ref-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.auth-ref-toggle:hover {
  color: rgba(255, 255, 255, 0.85);
}

.auth-ref-toggle-icon {
  font-size: 10px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.auth-ref-toggle.expanded .auth-ref-toggle-icon {
  transform: rotate(90deg);
}

.auth-ref-field {
  margin-top: 10px;
  position: relative;
}

.auth-ref-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  font-family: var(--mono);
  font-size: 0.85rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.auth-ref-input:focus {
  outline: none;
  border-color: #d4a017;
  background: rgba(255, 255, 255, 0.08);
}

.auth-modal-terms {
  margin-top: 18px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.5;
}

.auth-modal-switch-text {
  margin-top: 14px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.auth-modal-switch-btn {
  background: none;
  border: none;
  padding: 0;
  color: #38ef7d;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
  font-size: inherit;
}
.auth-modal-switch-btn:hover {
  color: #5aff9b;
}

/* ── 軟體使用條款 (terms.html) ─────────────────────────────────── */
.terms-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #14102a 0%, #07050f 70%);
  color: #f5f1e8;
}

.terms-page-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 100px 20px 80px;
}

.terms-container {
  width: min(840px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.terms-header {
  text-align: center;
  margin-bottom: 8px;
}

.terms-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #d4a017;
  background: rgba(212, 160, 23, 0.12);
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.terms-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.terms-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.68);
  max-width: 620px;
  margin: 0 auto 10px;
  line-height: 1.6;
}

.terms-effective {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.terms-clauses-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.terms-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px 24px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.terms-card:hover {
  border-color: rgba(212, 160, 23, 0.3);
  background: rgba(255, 255, 255, 0.045);
}

.terms-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f7f5fb;
  margin-bottom: 8px;
}

.terms-card-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0;
}

.terms-disclaimer-box {
  background: rgba(212, 160, 23, 0.06);
  border: 1px solid rgba(212, 160, 23, 0.2);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.terms-disclaimer-badge {
  background: #d4a017;
  color: #16131f;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

.terms-disclaimer-text {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin: 0;
}

.terms-link {
  color: #d4a017;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.terms-link:hover {
  color: #f7ce68;
}

.terms-footer {
  text-align: center;
  padding: 24px 16px 40px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}