@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700&display=swap');

:root {
  /* ═══════════════════════════════════════════════════════════
   * 第 1 層：基礎色階（唯一真實來源）
   * 只有這一段可以出現實際色碼。要調色請改這裡，其餘全是別名。
   * ═══════════════════════════════════════════════════════════ */

  /* 暖中性階：瓷白 → 可可棕，全站底色與文字的主軸 */
  --warm-50:  #FFFFFF;   /* 卡片純白 */
  /* 原為 #FBF8F6，與純白卡片只差 2% 亮度，卡片邊界幾乎看不出來。
   * 壓深一階後白卡自然浮起，不必靠加重陰影（那會讓畫面變濁）。 */
  --warm-100: #F5F0EB;   /* 瓷白頁面底 */
  --warm-150: #FAF1EF;   /* 粉霧區塊底 */
  --warm-200: #EFE7E1;   /* 髮絲分隔線 */
  --warm-400: #A89C93;   /* 次要文字（暖灰） */
  --warm-900: #3A312B;   /* 主文字（可可深棕） */

  /* 冷中性階：舊版頁面沿用，色相與 warm 不同，不可互換 */
  --cool-500: #6c757d;   /* 次要文字（冷灰） */
  --cool-800: #3a3a3a;   /* 主文字（中性灰） */

  /* 四季色相：既是季型識別色，也是全站點綴色 */
  --hue-spring: #F28482; /* 珊瑚粉 */
  --hue-summer: #84A59D; /* 霧灰綠 */
  --hue-autumn: #F6BD60; /* 蜜金 */
  --hue-winter: #4A5D8A; /* 靛藍 */
  --hue-blush:  #E58E96; /* 奶油粉，主點綴 */
  --hue-cream:  #f7ede2; /* 米杏 */
  --hue-paper:  #f5f5f5; /* 淺灰 */

  /* ═══════════════════════════════════════════════════════════
   * 第 2 層：語意別名（全部指向第 1 層，不得寫死色碼）
   * 既有頁面的 var() 名稱一律保留，故畫面完全不變。
   * ═══════════════════════════════════════════════════════════ */

  /* -- 面 / 線 -- */
  --mb-bg:         var(--warm-100);
  --mb-card:       var(--warm-50);
  --mb-blush-soft: var(--warm-150);
  --mb-line:       var(--warm-200);
  --line:          var(--warm-200);   /* = --mb-line */

  /* -- 文字 -- */
  --mb-ink:        var(--warm-900);
  --ink:           var(--warm-900);   /* = --mb-ink */
  --mb-mute:       var(--warm-400);
  --muted:         var(--warm-400);   /* = --mb-mute */
  --text-dark:     var(--cool-800);   /* 註：與 --mb-ink 不同色，勿合併 */
  --text-muted:    var(--cool-500);   /* 註：與 --mb-mute 不同色，勿合併 */

  /* -- 點綴 -- */
  --mb-blush:      var(--hue-blush);
  --rose:          var(--hue-blush);  /* = --mb-blush */
  --accent-main:   var(--hue-spring); /* = --spring */
  --accent-dark:   var(--hue-summer); /* = --summer */
  --spring:        var(--hue-spring);
  --summer:        var(--hue-summer);
  --autumn:        var(--hue-autumn);
  --winter:        var(--hue-winter);
  --primary-color: var(--hue-cream);
  --accent-light:  var(--hue-paper);

  /* 提高不透明度以取代已移除的 backdrop-filter：
   * 底色接近純色時兩者視覺幾乎相同，但省下每幀的模糊取樣成本。 */
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-blur: blur(8px);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 24px rgba(0,0,0,0.03);

  /* ═══════════════════════════════════════════════════════════
   * 第 3 層：尺度（間距 / 圓角 / 陰影）
   * ═══════════════════════════════════════════════════════════ */

  /* 間距階梯：各頁 padding 寫死導致節奏對不齊，新版面請改用這組 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --space: clamp(16px, 4vw, 32px);  /* 區塊級響應式留白，既有用法保留 */

  /* 圓角階梯：md / lg 為既有值，其餘補齊 */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(90,65,50,0.07);
  --shadow-lift: 0 18px 40px rgba(90,65,50,0.13);

  /* ── 緩動曲線 ──
   * 全站原本有 20 幾處 transition 沒指定曲線，吃瀏覽器預設的 ease
   * （前段慢、後段拖），看起來會比同頁其他動效鈍。統一用這組。 */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out：起步快、尾段柔，進場／位移首選 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 帶回彈，按鈕、開關這種要「有手感」的 */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);       /* 對稱平順，顏色／透明度變化用 */

  /* ── 動畫時長 ──
   * 微互動要快（人眼在 150ms 內感覺是「即時回應」），
   * 大面積位移才需要長一點，否則會覺得頁面很慢。 */
  --dur-1: 120ms;  /* 點擊回饋、hover 變色 */
  --dur-2: 240ms;  /* 一般狀態切換 */
  --dur-3: 420ms;  /* 卡片展開、面板滑入 */
  --dur-4: 700ms;  /* 捲動進場（既有 fade-in 用值） */
}

/* ================= 基礎重置與全域排版 ================= */
* { box-sizing: border-box; margin: 0; padding: 0; letter-spacing: 0.05em; }
html { scroll-behavior: smooth; }
a { text-decoration: none; }

/* 滾動條樣式優化 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-main); }

body {
  font-family: 'Noto Serif TC', serif;
  /* 瓷白底 + 頂部極淡粉霧暈染（原本各頁自己寫，現在統一在這裡） */
  /* 不要加 background-attachment: fixed ——
   * 會讓每一幀捲動都重繪整個漸層、無法用合成層加速，是全站捲動卡頓來源；
   * 而且漸層會黏在視窗頂端而非文件頂端，與各頁原本的視覺不符。 */
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(240,205,195,0.28) 0%, transparent 62%),
    var(--mb-bg);
  color: var(--mb-ink);
  display: flex; flex-direction: column; align-items: center; min-height: 100dvh;
  overflow-x: hidden; position: relative;
}

/* body 是 align-items:center 的 flex 容器，區塊級的包裹層不會自動撐滿，
 * 會縮到內容寬度；裡面的 .main-header 用 width:100% 就只相對包裹層，
 * 桌機寬螢幕下標題列底色因此無法延伸到整個螢幕（首頁的 #main-app 即是此況）。 */
body > #main-app { width: 100%; }

/* 移除了極光與漸層，恢復乾淨背景 */

/* ================= 特殊字體設計：Cormorant 精品西式襯線體 ================= */
.en-font { font-family: 'Cormorant Garamond', serif; font-style: italic; }
.hero-title, .page-title, h1, h2, .logo { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; }

/* ================= 底部快捷導覽列（手機，仿 Threads / X）================= */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: none;                       /* 只在手機顯示，由 media query 開啟 */
  align-items: stretch;
  /* 同 .main-header：常駐的 fixed 元素不值得為幾乎看不見的模糊付出
   * 每幀重繪成本，改用更不透明的底色取代 backdrop-filter。 */
  /* 原為 rgba(...,0.96)：4% 的透明度會讓底下的內文微微透出來，
   * 常駐元件沒有理由半透明。改為不透明並跟著頁面底色走。 */
  background: var(--warm-100);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 20px rgba(90,65,50,0.06);
}
.bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px 7px;
  min-height: 56px;
  text-decoration: none; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 10.5px; letter-spacing: 0.02em;
  color: #A2968E;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s, transform .2s cubic-bezier(0.34,1.56,0.64,1);
}
.bn-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7;
               stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.bn-item:active { transform: scale(0.9); }
.bn-item.active { color: var(--rose); font-weight: 600; }
/* 目前頁面的小圓點指示 */
.bn-item.active::before {
  content: ''; position: absolute; top: 4px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--rose);
}
.bn-item { position: relative; }

/* 回到最上面：浮在導覽列上方，捲動後才出現 */
.bn-top {
  position: fixed; right: 16px; z-index: 149;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(90,65,50,0.14);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #6B615B;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .28s, transform .28s cubic-bezier(0.34,1.56,0.64,1);
}
.bn-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bn-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1023px) {
  .bottom-nav { display: flex; }
  /* 讓頁面內容不被導覽列蓋住 */
  body.has-bottom-nav { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  /* 原本的漢堡鈕保留（可放次要功能），但底部已有主要入口 */
}
/* 片頭播放中不顯示導覽列 */
html.intro-playing .bottom-nav, html.intro-playing .bn-top { display: none; }

/* ================= 進場動畫更平滑 ================= */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(40px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.fade-in { animation: fadeUpIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }

/* ===== ① 捲動觸發進場（site-fx.js 啟用後生效）=====
 * html.js-fx 由 JS 加上：先讓 .fade-in 保持隱藏、不自動播，
 * 捲進視窗才加 .in-view 播放。沒有 JS / 不支援時自動沿用原本的載入即播。 */
html.js-fx .fade-in {
  animation: none;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  will-change: opacity, transform;
}
html.js-fx .fade-in.in-view {
  animation: fadeUpIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* 播完移除 will-change，避免長期佔用記憶體 */
html.js-fx .fade-in.fx-done { will-change: auto; }

/* 捲動進場的錯落效果：同一區塊內的子項依序登場 */
html.js-fx .fx-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
html.js-fx .fx-stagger.in-view > * { opacity: 1; transform: translateY(0); }
html.js-fx .fx-stagger.in-view > *:nth-child(1) { transition-delay: .00s; }
html.js-fx .fx-stagger.in-view > *:nth-child(2) { transition-delay: .07s; }
html.js-fx .fx-stagger.in-view > *:nth-child(3) { transition-delay: .14s; }
html.js-fx .fx-stagger.in-view > *:nth-child(4) { transition-delay: .21s; }
html.js-fx .fx-stagger.in-view > *:nth-child(5) { transition-delay: .28s; }
html.js-fx .fx-stagger.in-view > *:nth-child(6) { transition-delay: .35s; }

/* ===== ③ 微互動：點擊彈性回饋 =====
 * 只動 transform（GPU 加速、不觸發 reflow），零效能成本 */
.btn-primary, .btn-secondary, .tool-btn, .season-btn, .type-card,
.color-item, .swatch-item, .step-card, .dye-mode-btn, .occasion-btn,
.texture-btn, .compare-add, .compare-clear, .next-cta-main, .quick-tryon-btn {
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow .28s ease,
              border-color .25s ease,
              background .25s ease;
}
/* 按下去縮一下，放開回彈（spring 曲線） */
.btn-primary:active, .btn-secondary:active, .tool-btn:active, .season-btn:active,
.type-card:active, .color-item:active, .swatch-item:active, .dye-mode-btn:active,
.occasion-btn:active, .texture-btn:active, .compare-add:active, .compare-clear:active,
.next-cta-main:active, .quick-tryon-btn:active {
  transform: scale(0.955);
}
/* 選中色卡時輕微彈出，強化「選到了」的回饋 */
@keyframes fxPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.color-item.active .color-swatch,
.swatch-item.selected .swatch-circle { animation: fxPop .42s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ===== ⑤ 骨架屏微光（載入中）=====
 * 用 background-position 動畫，純 CSS 不佔 JS */
@keyframes fxShimmer {
  0%   { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(100deg,
    #EFE7E1 0%, #EFE7E1 38%,
    #FBF7F4 50%,
    #EFE7E1 62%, #EFE7E1 100%);
  background-size: 220% 100%;
  animation: fxShimmer 1.5s linear infinite;
}
.skeleton-text { height: 12px; margin: 8px 0; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-block { width: 100%; aspect-ratio: 3/4; border-radius: 18px; }
.skeleton-circle { width: 44px; height: 44px; border-radius: 50%; }

/* 載入中的文字加微光掃過，等待時感覺「正在處理」 */
.is-loading-text {
  background: linear-gradient(100deg, #A89C93 0%, #A89C93 40%, #3A312B 50%, #A89C93 60%, #A89C93 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxShimmer 1.8s linear infinite;
}

/* ===== 效能與無障礙護欄 ===== */
@media (prefers-reduced-motion: reduce) {
  html.js-fx .fade-in,
  html.js-fx .fx-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .skeleton, .is-loading-text { animation: none !important; }
}

/* ================= 手機版與導覽列 ================= */
.mobile-ui-only { display: block; }
.desktop-ui-only { display: none; }

.fixed-hamburger {
  position: fixed; top: 20px; left: 24px; width: 50px; height: 50px;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 50%; 
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  cursor: pointer; z-index: 1000; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fixed-hamburger:hover { background: rgba(255,255,255,0.6); transform: scale(1.08); }
.fixed-hamburger span { display: block; width: 22px; height: 1.5px; background-color: var(--text-dark); transition: 0.4s; }
.fixed-hamburger:hover span:nth-child(2) { background-color: var(--accent-main); width: 14px; }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: 0.6s ease; z-index: 1001; }
.sidebar-overlay.active { opacity: 1; visibility: visible; }

.sidebar { position: fixed; top: 0; left: -340px; width: 340px; height: 100vh; background: var(--primary-color); border-right: 1px solid var(--glass-border); box-shadow: 20px 0 60px rgba(0,0,0,0.08); transition: left 0.5s ease; z-index: 1002; display: flex; flex-direction: column; }
.sidebar.active { left: 0; }
.sidebar-header { padding: 40px 32px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; align-items: center; }
.sidebar-header h2 { font-size: 20px; color: var(--text-dark); font-weight: 500; }
.close-btn { background: none; border: none; font-size: 34px; color: var(--text-muted); cursor: pointer; transition: color 0.4s; }
.close-btn:hover { color: var(--accent-main); }

.sidebar-menu { list-style: none; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.sidebar-menu li a { font-size: 16px; color: var(--text-dark); display: block; padding: 18px 24px; border-radius: 16px; transition: all 0.3s ease; }
.sidebar-menu li a:hover { background: rgba(255,255,255,0.7); color: var(--accent-main); transform: translateX(8px); }

/* 電腦版 Header */
.main-header {
  width: 100%; position: sticky; top: 0; z-index: 900;
  /* 瓷白不透明（原本只有命定色／髮色頁這樣，試妝與其餘頁是玻璃半透明）
   * 這裡刻意不用 backdrop-filter：這是 sticky 滿版元素，模糊要付出
   * 「每一幀捲動都重新取樣整條背景」的代價，不值得。
   *
   * 原為 rgba(251,248,246,0.96)，有兩個問題：
   *   ① 4% 透明度足以讓底下的內文透出來，捲動時標題會跟內文糊在一起
   *   ② 251,248,246 是舊底色 #FBF8F6，底色改深後標題列會比頁面亮一階
   * 改為直接吃 token，之後底色再調也不會脫節。 */
  background: var(--warm-100);
  border-bottom: 1px solid var(--mb-line);
  box-shadow: none;
  display: flex; justify-content: center;
}
.header-container {
  width: 100%; max-width: 1200px; padding: 20px 32px;
  display: flex; justify-content: center; align-items: center;
}
.logo { font-size: 24px; color: var(--text-dark); letter-spacing: 0.2em; font-weight: 600; display: flex; align-items: center; gap: 8px; z-index: 2; text-transform: uppercase; }
.logo::after {
  content: ''; display: block; width: 15px; height: 15px; border-radius: 50%;
  background: conic-gradient(var(--spring) 0 25%, var(--autumn) 25% 50%, var(--summer) 50% 75%, var(--winter) 75% 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: translateY(1px);
}

@media (min-width: 1024px) {
  .mobile-ui-only { display: none !important; }
  .desktop-ui-only { display: flex; }
  .header-container { justify-content: space-between; padding: 24px 60px; }
  .logo { font-size: 26px; }
  .desktop-nav { display: flex; gap: 40px; align-items: center; }
  .desktop-nav a { font-size: 14px; color: var(--text-dark); font-weight: 500; letter-spacing: 0.15em; position: relative; padding: 8px 0; transition: color 0.4s ease; text-transform: uppercase; }
  .desktop-nav a:hover, .desktop-nav a.active { color: var(--accent-main); }
  .desktop-nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0%; height: 1.5px; background-color: var(--accent-main); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .desktop-nav a:hover::after, .desktop-nav a.active::after { width: 100%; }
}

/* ================= 核心佈局 (App Container) ================= */
.app-container { width: 100%; max-width: 520px; padding: 0 0 80px 0; display: flex; flex-direction: column; flex-grow: 1; z-index: 1; }

@media (min-width: 768px) {
  /* .app-container 是整個內容區的容器，也是每頁最大的元素
   * （實測試妝頁 210 萬 px²）。原本帶 backdrop-filter，等於每一幀
   * 都要對整頁內容區做背景模糊 —— 這是全站卡頓最大的單一來源。
   * 底色改為不透明取代，視覺幾乎不變。 */
  .app-container { max-width: 900px; margin-top: 6vh; margin-bottom: 6vh; border-radius: 20px; background: var(--glass-bg); box-shadow: var(--glass-shadow); border: 1px solid var(--glass-border); overflow: hidden; }
  .content-wrapper { padding: 48px; }
}

.content-wrapper { padding: 32px 24px; width: 100%; display: flex; flex-direction: column; align-items: center; }

.page-title {
  font-size: clamp(24px, 6vw, 28px); color: var(--mb-ink);
  letter-spacing: 0.06em;
  font-weight: 500; margin-bottom: 30px; text-align: center;
}

.back-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; margin-bottom: 32px; transition: all 0.3s; }
.back-btn:hover { color: var(--accent-main); transform: translateX(-4px); }
.back-btn svg { width: 18px; height: 18px; transition: transform 0.3s; }
.back-btn:hover svg { transform: translateX(-4px); }

/* ================= 原始卡片樣式 + 保留反光特效 ================= */
/* 這裡刻意不用 backdrop-filter。
 * 全站背景統一成接近純色的瓷白後，模糊一片幾乎沒有變化的底色，
 * 得到的還是同一片顏色 —— 效果看不見，成本卻很高：
 * 實測每頁有 8~12 個帶模糊的元素、總面積 0.7M~2.4M px²
 * （試妝頁的 240 萬 px² 比整個 1080p 螢幕還大），每幀都要重新取樣。
 * 改用更不透明的底色達到同樣的視覺，捲動就不再卡。 */
.glass-card, .login-card, .edit-form-card, .theory-card, .hero-card, .explore-card {
  width: 100%; background: var(--glass-bg);
  border: 1px solid var(--glass-border); border-radius: 16px; padding: 24px; 
  box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden;
  transition: all 0.3s ease;
}

/* 保留您喜歡的反光效果 (Hover reflection)
   註：hero-card / explore-card 已移出此清單 —— 首頁新版改用漸層色暈與四季色帶裝飾（見下方「2026 首頁改版」區塊），兩者的 ::before 會互相衝突 */
.glass-card::before, .login-card::before, .edit-form-card::before, .theory-card::before, .btn-submit::before, .btn-primary::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg); transition: 0s; pointer-events: none; z-index: 2;
}
.glass-card:hover::before, .login-card:hover::before, .edit-form-card:hover::before, .theory-card:hover::before, .btn-submit:hover::before, .btn-primary:hover::before {
  left: 200%; transition: 1s ease-in-out;
}

.glass-card:hover, .login-card:hover, .edit-form-card:hover, .theory-card:hover, .hero-card:hover, .explore-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

/* ================= 首頁專屬 (Index) — 2026 行動優先改版 ================= */
.main-content {
  width: 100%; max-width: 1120px;
  padding: clamp(20px, 4vw, 44px) var(--space) clamp(40px, 6vw, 72px);
  display: flex; flex-direction: column; gap: clamp(36px, 7vw, 60px);
  margin: 0 auto; flex-grow: 1; z-index: 1;
}

.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 3vw, 22px); width: 100%; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 1fr; } }

.hero-card {
  border-radius: var(--radius-lg);
  padding: clamp(26px, 5.5vw, 46px) clamp(22px, 5vw, 42px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line);
  background: rgba(255,255,255,0.85);
}
.hero-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: clamp(20px, 4vw, 30px); position: relative; z-index: 2; }
.hero-title { font-size: clamp(24px, 5.6vw, 36px); color: var(--ink); letter-spacing: 0.08em; font-weight: 500; margin-bottom: 12px; line-height: 1.35; }
.hero-subtitle { font-size: clamp(13.5px, 3.4vw, 15px); color: var(--text-muted); font-weight: 300; line-height: 2; letter-spacing: 0.08em; max-width: 46ch; }

/* Hero 裝飾：漸層色暈（取代反光特效）＋ 漂浮色球 */
.hero-main::before {
  content: ''; position: absolute; z-index: 0;
  top: -120px; right: -100px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(242,132,130,0.22) 0%,
    rgba(246,189,96,0.14) 45%,
    transparent 72%);
  pointer-events: none;
}
.hero-main::after {
  content: ''; position: absolute; z-index: 0;
  bottom: -140px; left: -110px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(132,165,157,0.18) 0%,
    rgba(74,93,138,0.10) 50%,
    transparent 75%);
  pointer-events: none;
}
.hero-orbs {
  position: absolute; z-index: 1;
  top: clamp(16px, 3vw, 30px); right: clamp(16px, 4vw, 34px);
  display: flex;
}
.hero-orbs i {
  width: clamp(26px, 6vw, 38px); height: clamp(26px, 6vw, 38px);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  margin-left: -10px;
  animation: orbFloat 5s ease-in-out infinite;
}
.hero-orbs i:nth-child(1) { background: var(--spring); margin-left: 0; animation-delay: 0s; }
.hero-orbs i:nth-child(2) { background: var(--autumn); animation-delay: .7s; }
.hero-orbs i:nth-child(3) { background: var(--summer); animation-delay: 1.4s; }
.hero-orbs i:nth-child(4) { background: var(--winter); animation-delay: 2.1s; }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* CTA 按鈕：手機直排滿版好按、寬螢幕並排 */
.action-buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: auto; }
@media (min-width: 560px) { .action-buttons { flex-direction: row; gap: 16px; } }
.btn-primary, .btn-secondary {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 26px; border-radius: 100px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.1em;
  transition: all 0.3s ease; border: none; cursor: pointer;
  position: relative; overflow: hidden; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, #F28482, #E58E96 55%, #F6BD60 130%);
  box-shadow: 0 10px 24px rgba(229,142,150,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(229,142,150,0.5); }
.btn-secondary { background: rgba(255,255,255,0.85); color: var(--ink); border: 1.5px solid #E3D6CD; }
.btn-secondary:hover { background: #fff; transform: translateY(-2px); color: var(--accent-main); }

/* 四季色磚：2×2 漸層色卡 */
.season-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: auto; }
@media (min-width: 560px) and (max-width: 899px) { .season-grid { grid-template-columns: repeat(4, 1fr); } }
.season-btn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  min-height: clamp(88px, 20vw, 116px);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  color: #fff; text-decoration: none;
  box-shadow: 0 8px 20px rgba(90,65,50,0.12);
  transition: transform 0.3s, box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.season-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-lift); }
.season-btn .s-zh {
  font-size: clamp(22px, 5vw, 28px); font-weight: 600; letter-spacing: 0.2em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.season-btn .s-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.85;
}
/* 每季一組漸層 + 右上圓形裝飾 */
.season-btn::before {
  content: ''; position: absolute; top: -34px; right: -34px;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
}
.s-spring { background: linear-gradient(140deg, #FBB1A9, #F28482 60%, #E96D77); }
.s-summer { background: linear-gradient(140deg, #A9C6BC, #84A59D 60%, #6E938B); }
.s-autumn { background: linear-gradient(140deg, #FBD48E, #F6BD60 60%, #E8A344); }
.s-winter { background: linear-gradient(140deg, #7286AE, #4A5D8A 60%, #3C4C74); }

/* 區塊標題（共用） */
.section-block { margin: 0; width: 100%; }
.section-eyebrow {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--rose); font-weight: 600;
  margin: 0 0 8px;
}
.section-title {
  text-align: center;
  font-size: clamp(20px, 4.6vw, 27px); font-weight: 500;
  color: var(--ink); letter-spacing: 0.1em;
  margin: 0 0 6px;
}
.section-sub {
  text-align: center;
  font-size: clamp(12.5px, 3.2vw, 14px); color: var(--muted);
  margin: 0 0 clamp(22px, 4vw, 32px);
}
/* 標題下的四季色帶 — 貫穿全站的識別元素 */
.season-ribbon {
  width: 64px; height: 4px; border-radius: 4px;
  margin: 14px auto clamp(22px, 4vw, 30px);
  background: linear-gradient(90deg, var(--spring), var(--autumn), var(--summer), var(--winter));
}

/* 三步驟卡片 */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step-card {
  position: relative;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4.5vw, 30px) 22px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center;
}
.step-num {
  position: absolute; top: 16px; left: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; letter-spacing: 0.15em;
  color: #D9CCC2;
}
.step-icon {
  width: 74px; height: 74px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.step-icon svg { width: 42px; height: 42px; }
.step-icon.tint-rose  { background: linear-gradient(140deg, #FDEAE6, #FAD9D6); }
.step-icon.tint-sage  { background: linear-gradient(140deg, #E8F0ED, #D5E3DD); }
.step-icon.tint-amber { background: linear-gradient(140deg, #FCF0DC, #F8E3BE); }
.step-title { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: 0.06em; }
.step-desc  { font-size: 13px; line-height: 1.9; color: var(--muted); max-width: 30ch; }

/* 手機：三步驟改為左右滑動卡片（節省縱向空間） */
@media (max-width: 639px) {
  .steps-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 14px;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .steps-grid::-webkit-scrollbar { display: none; }
  .step-card { scroll-snap-align: center; }
}

/* 12 型色彩地圖（首頁；命名為 tmap- 避免與 details 頁的 .type-card 衝突） */
.tmap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 2.5vw, 14px); }
@media (min-width: 640px)  { .tmap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tmap-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── 手機：12 型收合，點擊按鈕才彈出底部面板（不佔主版面）── */
.tmap-toggle { display: none; }

@media (max-width: 639px) {
  /* 收合觸發鈕：平常只佔一行 */
  .tmap-toggle {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 54px; padding: 14px 20px;
    border: 1px solid var(--line); border-radius: 100px;
    background: #fff; cursor: pointer; font-family: inherit;
    font-size: 15px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink);
    box-shadow: 0 8px 22px rgba(90,65,50,0.06);
    -webkit-tap-highlight-color: transparent;
  }
  /* 按鈕上的四季小色點，暗示裡面是色彩內容 */
  .tmap-toggle .tt-dots { display: flex; }
  .tmap-toggle .tt-dots i {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.12);
  }
  .tmap-toggle .tt-dots i + i { margin-left: -7px; }
  .tmap-toggle .tt-arrow { color: var(--rose); font-family: 'Cormorant Garamond', serif; }

  /* 底部彈出面板 */
  .tmap-wrap {
    position: fixed; inset: 0; z-index: 200;
    display: none;
  }
  .tmap-wrap.open { display: block; }
  .tmap-wrap::before {           /* 背景遮罩 */
    content: '';
    position: absolute; inset: 0;
    background: rgba(40,30,25,0.42);
    backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .3s;
  }
  .tmap-wrap.open::before { opacity: 1; }

  .tmap-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 78vh;                 /* 固定高度，內容超出時面板內捲動 */
    display: flex; flex-direction: column;
    background: var(--warm-100); border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(90,65,50,0.22);
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.22,.9,.3,1);
    box-sizing: border-box;
  }
  .tmap-wrap.open .tmap-panel { transform: translateY(0); }
  .tmap-handle { width: 42px; height: 5px; border-radius: 3px; background: #E2D6CD; margin: 4px auto 12px; }
  .tmap-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-shrink: 0;
  }
  .tmap-head h3 {
    margin: 0; font-family: 'Noto Serif TC', serif;
    font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: 0.08em;
  }
  .tmap-close {
    width: 38px; height: 38px; border: none; background: #F0E7E1;
    border-radius: 12px; font-size: 22px; color: #8A7E76; cursor: pointer; line-height: 1;
  }
  /* 面板內的網格可上下捲動 */
  .tmap-wrap .tmap-grid {
    overflow-y: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
}

/* 桌機／平板：面板還原成頁面中的一般網格（不是彈出層） */
@media (min-width: 640px) {
  .tmap-wrap { display: block; position: static; }
  .tmap-wrap .tmap-panel {
    position: static; height: auto; background: none; box-shadow: none;
    padding: 0; transform: none; border-radius: 0;
    max-width: 1120px; margin: 0 auto;
    padding-left: var(--space); padding-right: var(--space);
    box-sizing: border-box;
  }
  .tmap-wrap .tmap-handle, .tmap-wrap .tmap-head { display: none; }
  .tmap-wrap::before { display: none; }
}

.tmap-card {
  text-decoration: none;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(16px, 3.5vw, 20px) 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 8px 22px rgba(90,65,50,0.05);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.tmap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: #E6D3C9;
}
.tmap-swatches { display: flex; }
.tmap-swatches i {
  width: clamp(26px, 6.5vw, 32px); height: clamp(26px, 6.5vw, 32px);
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}
.tmap-swatches i + i { margin-left: -9px; }
.tmap-zh { font-size: 14px; font-weight: 600; color: var(--ink); }
.tmap-en { font-size: 10px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; font-family: 'Cormorant Garamond', serif; }

/* 了解更多卡片 */
.explore-card {
  align-items: flex-start; text-align: left;
  padding: clamp(28px, 6vw, 44px) clamp(22px, 5vw, 42px);
  border-radius: var(--radius-lg);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.explore-card:hover { border-color: #E6D3C9; background: rgba(255,255,255,0.85); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* 頂端四季色帶 */
.explore-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--spring), var(--autumn), var(--summer), var(--winter));
}
.explore-text h2 {
  font-size: clamp(19px, 4.4vw, 25px); color: var(--ink);
  margin-bottom: 10px; font-weight: 500; letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 10px;
}
.explore-text h2::after {
  content: '→';
  font-family: 'Cormorant Garamond', serif;
  color: var(--rose);
  transition: transform 0.3s;
}
.explore-card:hover .explore-text h2::after { transform: translateX(6px); }
.explore-text p { font-size: clamp(13px, 3.3vw, 14.5px); color: var(--text-muted); font-weight: 300; line-height: 2; max-width: 58ch; margin: 0; }
/* 右側裝飾色點（寬螢幕顯示） */
.explore-deco {
  position: absolute; right: 38px; top: 50%;
  transform: translateY(-50%);
  display: none; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 760px) { .explore-deco { display: grid; } }
.explore-deco i {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.explore-deco i:nth-child(1) { background: var(--spring); }
.explore-deco i:nth-child(2) { background: var(--summer); }
.explore-deco i:nth-child(3) { background: var(--autumn); }
.explore-deco i:nth-child(4) { background: var(--winter); }

/* 尊重使用者的減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; }
}

/* ================= 理論與手風琴 (Details) ================= */
.theory-card h2 { font-size: 22px; margin-bottom: 16px; color: var(--text-dark); display: flex; align-items: center; gap: 8px; }
.theory-card > p { font-size: 15px; line-height: 1.8; color: var(--text-muted); margin-bottom: 24px; text-align: justify; }

.history-timeline { display: flex; flex-direction: column; gap: 24px; border-left: 2px solid var(--accent-main); padding-left: 24px; margin-left: 8px; }
.history-item { position: relative; transition: transform 0.3s ease; }
.history-item:hover { transform: translateX(4px); }
.history-item::before { content: ''; position: absolute; left: -31px; top: 4px; width: 12px; height: 12px; background-color: var(--accent-main); border-radius: 50%; z-index: 2; }
.history-item strong { display: block; color: var(--text-dark); font-size: 16px; margin-bottom: 6px; }
.history-item span { display: block; color: var(--text-muted); font-size: 15px; line-height: 2; font-weight: 400; }

.accordion-container { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.accordion-col { display: flex; flex-direction: column; gap: 20px; width: 100%; }

@media (min-width: 768px) {
  .accordion-container { flex-direction: row; gap: 32px; align-items: flex-start; }
  .accordion-col { flex: 1; }
}

.accordion-item { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; transition: all 0.3s; box-shadow: var(--glass-shadow); }
.accordion-header { padding: 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.season-title { display: flex; align-items: center; gap: 16px; font-size: 18px; color: var(--text-dark); }
.toggle-icon { color: var(--text-muted); transition: transform 0.3s; }
.accordion-header:hover .toggle-icon { color: var(--accent-main); }
.accordion-item.active { box-shadow: 0 12px 24px rgba(0,0,0,0.08); background: rgba(255,255,255,0.9); }
.accordion-item.active .toggle-icon { transform: rotate(180deg); color: var(--accent-main); }

.accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s; }
.accordion-inner { overflow: hidden; padding: 0 24px; opacity: 0; transition: opacity 0.3s; }
.accordion-item.active .accordion-content { grid-template-rows: 1fr; }
.accordion-item.active .accordion-inner { padding: 0 24px 24px 24px; opacity: 1; }
.type-card { background: rgba(255,255,255,0.7); border-radius: 12px; padding: 16px; margin-top: 12px; border: 1px solid rgba(0,0,0,0.05); transition: all 0.3s; }
.type-card:first-child { margin-top: 0; }
.accordion-item.active .type-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.05); }
.accordion-item.active .type-card:nth-child(1) { transition-delay: 0.1s; }
.accordion-item.active .type-card:nth-child(2) { transition-delay: 0.2s; }
.accordion-item.active .type-card:nth-child(3) { transition-delay: 0.3s; }
.type-card:first-child { margin-top: 0; }
.type-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.type-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid #fff; }
.type-card h3 { font-size: 16px; color: var(--text-dark); font-weight: 500; letter-spacing: 0.1em; }
.type-card p { font-size: 14px; line-height: 2; color: var(--text-muted); font-weight: 400; }

/* ================= 帳戶與登入註冊表單 ================= */
.profile-card { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 32px 24px; background: var(--glass-bg); border-radius: 16px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); margin-bottom: 24px; transition: 0.3s; }
.profile-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); }

.avatar-wrapper { position: relative; margin-bottom: 20px; }
.avatar { width: 90px; height: 90px; border-radius: 50%; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border: 2px solid #fff; display: flex; justify-content: center; align-items: center; font-size: 32px; color: var(--text-dark); transition: transform 0.3s; }
.profile-card:hover .avatar { transform: scale(1.05); }
.edit-avatar-btn { position: absolute; bottom: 0; right: 0; width: 32px; height: 32px; background: var(--accent-main); color: #fff; border-radius: 50%; border: 2px solid #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s; }
.edit-avatar-btn:hover { background: var(--accent-dark); transform: scale(1.1); }

.user-info { text-align: center; margin-bottom: 8px; }
.user-info h2 { font-size: 22px; color: var(--text-dark); font-weight: 500; margin-bottom: 4px; }
.user-info p { color: var(--text-muted); font-size: 14px; }

.action-list { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; z-index: 1; }
.action-item { background: var(--glass-bg); padding: 20px 24px; border-radius: 16px; border: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; text-decoration: none; transition: all 0.3s; }
.action-item:hover { transform: translateX(8px); background: rgba(255,255,255,0.9); box-shadow: 0 8px 16px rgba(0,0,0,0.05); }
.action-icon-left { display: flex; align-items: center; gap: 16px; }
.action-icon-left i { width: 36px; height: 36px; background: rgba(242,132,130,0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--accent-main); font-size: 16px; transition: all 0.3s; }
.action-item:hover .action-icon-left i { background: var(--accent-main); color: #fff; transform: scale(1.1); }
.action-icon-left span { font-size: 15px; color: var(--text-dark); }
.action-icon-right { color: var(--text-muted); font-size: 18px; transition: transform 0.3s; }
.action-item:hover .action-icon-right { transform: translateX(4px); color: var(--accent-main); }

.logout-btn { display: inline-block; width: 100%; padding: 16px; text-align: center; border: 1px solid rgba(0,0,0,0.1); color: var(--text-dark); border-radius: 16px; transition: all 0.3s; text-decoration: none; background: transparent; }
.logout-btn:hover { background: rgba(255,255,255,0.7); transform: translateY(-2px); box-shadow: var(--glass-shadow); color: var(--accent-main); }

/* ================= 震撼感表單 UI (Form UI) ================= */
.input-group, .input-row { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.input-group label, .input-row label { font-size: 14px; color: var(--text-dark); font-weight: 500; padding-left: 4px; }
input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.7); color: var(--text-dark); font-size: 15px; outline: none; transition: all 0.3s; font-family: inherit; }
input:focus { background: #fff; border-color: var(--accent-main); box-shadow: 0 4px 12px rgba(242,132,130,0.1); transform: translateY(-1px); }

.btn-submit { width: 100%; padding: 16px; border-radius: 12px; margin-top: 16px; background: var(--accent-main); color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s; border: none; font-family: inherit; position: relative; overflow: hidden; }
.btn-submit:hover { background: #E07472; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(242,132,130,0.2); }
.btn-submit:active { transform: scale(0.98); }

.btn-group { display: flex; gap: 16px; margin-top: 24px; width: 100%; }
.btn-group a, .btn-group button { flex: 1; padding: 16px; border-radius: 12px; font-size: 15px; cursor: pointer; transition: all 0.3s; border: none; font-family: inherit; text-align: center; text-decoration: none; position: relative; overflow: hidden; }
.btn-cancel { background: rgba(255,255,255,0.5); color: var(--text-dark); border: 1px solid rgba(0,0,0,0.1); }
.btn-cancel:hover { background: #fff; transform: translateY(-2px); }
.btn-save { background: var(--accent-main); color: #fff; }
.btn-save:hover { background: #E07472; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(242,132,130,0.2); }

.bottom-links { text-align: center; margin-top: 32px; font-size: 15px; color: var(--text-muted); font-weight: 300; line-height: 2; z-index: 1; }
.bottom-links a { color: var(--text-dark); font-weight: 600; border-bottom: 1px solid rgba(58, 48, 45, 0.3); padding-bottom: 4px; transition: all 0.4s ease; margin-left: 8px; }
.bottom-links a:hover { color: var(--accent-main); border-color: var(--accent-main); }

.desc { font-size: 13px; color: var(--text-muted); margin-top: 6px; padding-left: 8px; font-weight: 400; }

.avatar-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 24px; }
.avatar-preview { width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; box-shadow: 0 24px 48px rgba(199, 152, 141, 0.2); border: 4px solid #fff; font-size: 44px; color: var(--text-dark); font-weight: 300; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.avatar-upload:hover .avatar-preview { transform: scale(1.05); background: #fff; color: var(--accent-main); }

/* ================= Footer ================= */
.main-footer { width: 100%; padding: 48px 24px; text-align: center; border-top: 1px solid rgba(255,255,255,0.3); color: var(--text-muted); font-size: 13px; font-weight: 400; background: rgba(253, 251, 250, 0.1); margin-top: auto; letter-spacing: 0.15em; z-index: 1; }
/* ================= Dashboard 專屬樣式 ================= */
.dashboard-layout {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr; gap: 32px;
  padding: 40px 24px;
}
@media (max-width: 900px) {
  .dashboard-layout { grid-template-columns: 1fr; }
}

/* ===== 我的帳戶：個人檔案版型（參考社群媒體的 profile 結構）=====
 * 頭像＋名稱 → 數據列 → 命定色主視覺 → 分頁 → 內容。
 * 原本是三張並排卡片，各自標題與內容量差異大，視覺鬆散；
 * 這個結構把「我是誰」與「我累積了什麼」分層，手機上也更自然。 */
.profile-page {
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 32px 20px 96px;
}

/* ===== 命定色 Hero =====
 * 這頁的兩個主角是「測驗結果」與「珍藏色號」。原本結果被放在一張小卡、
 * 色票藏在分頁裡，整頁幾乎沒有顏色 —— 對色彩 App 來說本末倒置。
 * 背景由 updateProfileColor() 用該型的實際色票即時生成，
 * 所以「頁面的顏色」就是「使用者的顏色」。 */
.pf-hero {
  position: relative; overflow: hidden;
  border-radius: 24px; margin-bottom: 22px;
  background: var(--mb-card);
  border: 1px solid var(--mb-line);
}
.pf-hero-bg {
  position: absolute; inset: -20%;
  opacity: 0.5; filter: blur(28px);
  pointer-events: none;
}
/* 白紗：色票直接鋪滿會讓文字讀不清楚，壓一層才有「柔霧」而不是「色塊」 */
.pf-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.62), rgba(255,255,255,0.86));
}
.pf-hero-inner {
  position: relative; z-index: 1;
  padding: 30px 32px 32px;
  display: flex; flex-direction: column; gap: 24px;
}

.pf-hero-id { display: flex; align-items: center; gap: 18px; }
.pf-hero-label {
  display: block; font-size: 11px; letter-spacing: 0.22em;
  color: var(--mb-mute); text-transform: uppercase; margin-bottom: 6px;
}
.pf-hero-title {
  margin: 0 0 10px; font-size: clamp(30px, 4vw, 44px); line-height: 1.15;
  font-weight: 600; color: var(--mb-ink); letter-spacing: 0.04em;
}
.pf-hero-desc {
  margin: 0 0 18px; max-width: 52ch;
  font-size: 14px; line-height: 1.9; color: var(--text-muted);
}
/* ===== 色卡 =====
 * 原本是 5 顆純色圓點：沒有色名、沒有色碼，佔掉一整排卻沒有任何資訊量，
 * 是這頁「很空」的主因之一。改成實色方塊 + 色名 + HEX，像實體色票書。
 * 顏色的份量由色票本身承擔，不必把背景改成深色去破壞整站調性。 */
.pf-palette { display: flex; flex-direction: column; gap: 8px; }
.pf-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: 14px;
  background: rgba(255,255,255,0.72); border: 1px solid var(--mb-line);
  font-family: inherit; cursor: pointer; text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pf-chip:hover {
  transform: translateX(3px);
  border-color: var(--mb-blush);
  box-shadow: 0 6px 18px rgba(70,50,38,0.10);
}
.pf-chip-color {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 3px 8px rgba(70,50,38,0.14);
}
.pf-chip-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-chip-meta b {
  font-size: 13.5px; color: var(--mb-ink); font-weight: 600; letter-spacing: 0.04em;
}
.pf-chip-meta small {
  font-size: 10.5px; color: var(--mb-mute); letter-spacing: 0.08em;
  font-family: 'Cormorant Garamond', serif;
}

/* 右上角帳號選單 */
.pf-hero-menu { position: absolute; top: 16px; right: 18px; z-index: 3; }
.pf-menu-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--mb-line); background: rgba(255,255,255,0.8);
  color: var(--mb-ink); font-size: 17px; line-height: 1; cursor: pointer;
  transition: all .2s ease;
}
.pf-menu-btn:hover { border-color: var(--mb-blush); color: var(--mb-blush); }
.pf-menu-list {
  position: absolute; right: 0; top: 40px; min-width: 148px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--mb-line); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(70,50,38,0.14); overflow: hidden;
}
.pf-menu-list[hidden] { display: none; }
.pf-menu-list > * {
  padding: 11px 16px; font-size: 13px; font-family: inherit; text-align: left;
  background: none; border: none; color: var(--mb-ink);
  text-decoration: none; cursor: pointer; transition: background .18s ease;
}
.pf-menu-list > *:hover { background: rgba(0,0,0,0.04); }
.pf-menu-danger { color: #B0605C; }

/* 珍藏色號的空狀態：原本只有一句灰字，在桌機佔掉左半邊變成死區。
   改成直接列出命定色票，就地一鍵收藏。 */
/* 手機版色卡改兩欄：直向堆疊 5 張會讓 hero 高到 800px，佔滿整個螢幕。
   窄欄裡色名和 HEX 改成上下排列，才塞得下。 */
@media (max-width: 560px) {
  .pf-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-chip { padding: 8px; gap: 9px; }
  .pf-chip-color { width: 34px; height: 34px; border-radius: 9px; }
  .pf-chip-meta b { font-size: 12.5px; }
  .pf-chip-meta small { font-size: 9.5px; }
}

.pf-empty-text { display: block; font-size: 13.5px; color: var(--mb-mute); line-height: 1.8; margin-bottom: 14px; }
.pf-fav-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-fav-suggest .pf-chip { flex: 1 1 190px; }
/* 主要動作要有實心按鈕。原本整排都是白底細框膠囊，沒有主次之分。 */
.pf-btn-solid {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px; border-radius: 100px; border: none;
  background: var(--mb-ink); color: #fff;
  font-size: 13px; letter-spacing: 0.06em; font-family: inherit;
  text-decoration: none; cursor: pointer; transition: all .25s ease;
}
.pf-btn-solid:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(70,50,38,0.22); }

/* 珍藏色號：常駐區塊 */
.pf-sec-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
}
.pf-sec-title {
  margin: 0; font-size: 16px; font-weight: 600;
  color: var(--mb-ink); letter-spacing: 0.06em;
}
.pf-sec-count { font-size: 12px; color: var(--mb-mute); letter-spacing: 0.04em; }
.pf-fav { margin-bottom: 26px; }
.pf-fav-grid { display: flex; flex-wrap: wrap; gap: 14px; }

/* 標頭（舊結構保留，其他頁面仍在用） */
.pf-head {
  display: flex; align-items: center; gap: 22px;
  padding-bottom: 22px;
}
.pf-head { flex-wrap: wrap; }
.pf-ident { min-width: 0; flex: 1; }
/* 電腦版：跟在名稱區右側；手機版由 media query 改成整排置於下方 */
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pf-actions > * { white-space: nowrap; }
/* .btn-pink-pill 原本帶 margin-bottom:20px（給舊的直式側欄用），
   放進這排會把容器撐高、其餘按鈕被拉伸成 58px。 */
.pf-actions .btn-pink-pill { margin-bottom: 0; }
.pf-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--mb-line); background: #fff;
  color: var(--mb-ink); font-size: 13px; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; transition: all .25s ease;
}
.pf-btn-ghost:hover { border-color: var(--mb-blush); color: var(--mb-blush); transform: translateY(-1px); }
.pf-tag-type { background: var(--mb-blush); color: #fff; border-color: transparent; font-weight: 600; }

/* 數據列：對應社群的「貼文／追蹤／粉絲」，點擊可跳到對應內容。
 * 已移進 hero 底部 —— 原本獨佔一整列，三個數字被拉開幾百 px，非常空。 */
.pf-stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mb-line);
  margin: 0;
}
.pf-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 6px; background: none; border: none; cursor: pointer;
  font-family: inherit; transition: background .2s ease;
}
.pf-stat:hover { background: rgba(255,255,255,0.6); }
.pf-stat b {
  /* 不可用 Cormorant Garamond：這套字的 1 和 0 形狀接近 I 和 O，
   * 「10 / 1 / 0」會被讀成羅馬數字「IO / I / O」，完全看不出是數量。
   * 數字改用內文字體，並開啟 lining-nums 確保等高對齊。 */
  font-family: 'Noto Serif TC', serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 26px; letter-spacing: 0;
  color: var(--mb-ink); font-weight: 600; line-height: 1.1;
}
.pf-stat span { font-size: 12px; color: var(--mb-mute); letter-spacing: 0.06em; }

/* 命定色主視覺 */
.pf-season {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--mb-card); border: 1px solid var(--mb-line);
  border-radius: 18px; padding: 24px; margin-bottom: 24px;
}
.pf-season-text { flex: 1; min-width: 220px; }
.pf-season .swatches-row { margin-bottom: 0; flex-wrap: wrap; }

/* 分頁 */
.pf-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--mb-line);
  margin-bottom: 20px; overflow-x: auto; scrollbar-width: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab {
  flex: 1 0 auto; padding: 12px 18px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: inherit; font-size: 14px; color: var(--mb-mute);
  letter-spacing: 0.06em; cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.pf-tab:hover { color: var(--mb-ink); }
.pf-tab.active { color: var(--mb-ink); border-bottom-color: var(--mb-blush); font-weight: 600; }

/* 分頁內容：預設全部顯示，有 JS 才切換 —— JS 失效時不會整頁空白 */
.pf-panel { display: none; }
.pf-panel.active { display: block; }
html:not(.js-tabs) .pf-panel { display: block; margin-bottom: 24px; }

.pf-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }

/* ===== 桌機版：雙欄 =====
 * 原本不分螢幕寬度都是單欄 720px。在 1440 的螢幕上，左右各空 360px
 * （整整一半是空的），而頭像、數據、命定色、分頁、內容全部直向堆疊成
 * 一條長帶，捲一次才看得完，桌機的橫向空間完全沒被利用。
 *
 * 改成社群網站 profile 的標準結構：左欄放「我是誰」（頭像／數據／命定色）
 * 並固定在畫面上，右欄放「我累積了什麼」（分頁與內容）。
 * 左欄 sticky 之後，切換分頁時個人資訊一直在視線內。 */
@media (min-width: 1024px) {
  .profile-page {
    max-width: 1160px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 40px;
    align-items: start;
  }

  /* Hero 橫跨整頁 —— 結果是這頁的主角，不該被塞進單欄裡（數據列已在 hero 內） */
  .profile-page > .pf-hero  { grid-column: 1 / -1; grid-row: 1; }
  /* 珍藏色號給較寬的左欄：它是使用者回來這頁的另一個目的 */
  .profile-page > .pf-fav   { grid-column: 1; grid-row: 2 / -1; }
  /* 紀錄類放右欄 */
  .profile-page > .pf-tabs  { grid-column: 2; grid-row: 2; }
  .profile-page > .pf-panel { grid-column: 2; grid-row: 3 / -1; }
  .profile-page > .pf-foot  { grid-column: 1 / -1; }

  /* 桌機的 hero：兩欄（身分 ｜ 結果）＋ 底部滿版色帶。
   *
   * 原本是三欄 236px / 1fr / 244px、align-items: center：
   *   ① 三欄各自置中，彼此沒有共同基準線，看起來像三個不相干的元件
   *   ② 色卡欄較高，把卡片撐開後左欄下方空出一百多 px
   *   ③ 五張色卡各有邊框陰影、右側留白，佔掉整個右半邊卻只傳達五個顏色
   * 改成兩欄頂端對齊，色票移到底部拉成一條橫向色譜，
   * 左下的空白被色帶吃掉，色票的視覺份量也回到正確比例。 */
  .pf-hero-inner {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-areas:
      "id result"
      "palette palette";
    gap: 34px 48px;
    align-items: start;          /* 頂端對齊，建立共同基準線 */
    padding: 38px 42px 32px;
  }
  .pf-hero-id     { grid-area: id; }
  .pf-hero-result { grid-area: result; }
  .pf-palette     { grid-area: palette; }

  .pf-hero-id { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* 色票從直向卡片列改成橫向色譜：五色等寬撐滿，相鄰不留縫。
   * 去掉各自的邊框與圓角，整條才讀得出是「一組色」而不是「五張卡」。 */
  .pf-palette {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-radius: var(--radius-sm, 10px);
    overflow: hidden;
    border: 1px solid var(--mb-line);
  }
  .pf-palette .pf-chip {
    flex-direction: column; align-items: flex-start; justify-content: flex-end;
    gap: 10px;
    padding: 14px;
    border: none; border-radius: 0;
    background: rgba(255,255,255,0.55);
    /* 色塊之間用一道細線分隔，比留空隙更緊實 */
    box-shadow: inset -1px 0 0 var(--mb-line);
  }
  .pf-palette .pf-chip:last-child { box-shadow: none; }
  .pf-palette .pf-chip:hover {
    transform: none;
    background: rgba(255,255,255,0.85);
  }
  /* 色塊拉寬成橫幅，面積大才看得出顏色 */
  .pf-palette .pf-chip-color {
    width: 100%; height: 46px; border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  }

  /* 白紗改單向漸層：文字側維持高遮蔽保證可讀，
   * 色帶那側降到 45% 讓使用者的季型色真的透出來 ——
   * 一個色彩 App 的個人頁不該是無彩色的。 */
  .pf-hero::after {
    background: linear-gradient(168deg,
      rgba(255,255,255,0.88) 0%,
      rgba(255,255,255,0.82) 45%,
      rgba(255,255,255,0.45) 100%);
  }

  /* 分頁在寬欄裡不必平均撐開，靠左比較好掃 */
  .profile-page .pf-tab { flex: 0 0 auto; }
}

/* 手機版微調。
 * 選擇器要帶 .profile-page／.pf-head：.avatar-large 與 .profile-name
 * 定義在本檔更後面的 Dashboard 區塊，同層級時後者會蓋過這裡。 */
@media (max-width: 560px) {
  .profile-page { padding: 22px 14px 96px; }
  /* 手機上按鈕不跟頭像擠同一排（會被壓成三行），
     改成整排放到下方 —— 社群 App 在手機上的標準做法。 */
  .profile-page .pf-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "avatar ident" "actions actions";
    column-gap: 14px; row-gap: 14px;
    padding-bottom: 18px;
  }
  .pf-head .avatar-large { grid-area: avatar; align-self: start; }
  .profile-page .pf-ident { grid-area: ident; }
  .profile-page .pf-actions { grid-area: actions; margin-top: 0; gap: 8px; }
  .profile-page .pf-actions > * { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }
  .profile-page .btn-pink-pill { margin-bottom: 0; }
  .pf-head .avatar-large { width: 84px; height: 84px; margin-bottom: 0; }
  .pf-head .avatar-large span { font-size: 34px; }
  .profile-page .profile-name { font-size: 22px; }
  .profile-page .pf-season { padding: 18px; gap: 16px; }
  .profile-page .pf-stat b { font-size: 21px; }
  .profile-page .pf-tab { padding: 11px 12px; font-size: 13.5px; }
}

/* ===== 我的帳戶（Dashboard）=====
 * 這一區原本自成一套視覺：天藍色頭像、#333/#777/#999 的中性灰、
 * 32px 圓角與 40px 內距，跟全站的瓷白＋玫瑰暖調完全不搭。
 * 全部改用設計變數（--mb-*），圓角與內距也對齊其他頁面的卡片。 */
.dash-card {
  background: var(--mb-card);
  border: 1px solid var(--mb-line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(90,65,50,0.05);
}

/* Sidebar Profile */
.profile-sidebar {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.avatar-large {
  width: 120px; height: 120px; border-radius: 50%;
  /* 原本是天藍漸層（#e0f2fe→#bae6fd），與全站暖調衝突 */
  background: linear-gradient(135deg, var(--mb-blush-soft), #F0D8D4);
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 18px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(160,110,105,0.16);
}
.avatar-large span { font-size: 48px; font-family: 'Cormorant Garamond', serif; color: var(--mb-blush); }
.btn-pink-pill {
  background: var(--mb-blush); color: #fff; border: none; padding: 9px 22px;
  border-radius: 100px; font-size: 13.5px; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.3s; margin-bottom: 20px;
}
.btn-pink-pill:hover { background: #D97C86; transform: translateY(-2px); }
.profile-name { font-family: 'Cormorant Garamond', serif; font-size: 27px; color: var(--mb-ink); margin-bottom: 6px; }
.profile-email { font-size: 13px; color: var(--mb-mute); letter-spacing: 0.05em; word-break: break-all; }

/* 個人資訊標籤：統一成同一組暖調膠囊，取代原本的藍／桃紅雙色 */
.profile-tags { display: flex; gap: 8px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.profile-tag {
  background: var(--mb-blush-soft); color: #9A7256;
  border: 1px solid var(--mb-line);
  padding: 4px 12px; border-radius: 100px; font-size: 12px;
}

/* Main Area */
.dash-header { margin-bottom: 24px; }
.dash-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; color: var(--mb-ink); margin-bottom: 6px; letter-spacing: 0.04em; }
.dash-subtitle { font-size: 13px; color: var(--mb-mute); letter-spacing: 0.06em; }

/* Result Card */
.result-display-card { margin-bottom: 20px; }
.result-label { font-size: 12px; color: var(--mb-mute); letter-spacing: 0.16em; margin-bottom: 12px; display: block; }
.result-season-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; color: var(--mb-ink); margin-bottom: 14px; font-weight: 500; }
.result-desc-text { font-size: 14px; color: var(--text-muted); line-height: 1.85; margin-bottom: 24px; }
.swatches-row { display: flex; gap: 16px; margin-bottom: 32px; }
.swatch-circle { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.swatch-1 { background: #ECA4A6; }
.swatch-2 { background: #F0C4A3; }
.swatch-3 { background: #EBD17D; }
.swatch-4 { background: #8EAE9D; }

/* Bottom Grid */
.dash-bottom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1100px) {
  .dash-bottom-grid { grid-template-columns: 1fr; }
}

.bottom-card { padding: 32px; }
.bottom-card-title { font-family: 'Cormorant Garamond', serif; font-size: 19px; color: var(--mb-ink); margin-bottom: 18px; font-weight: 600; }

/* 開發模擬控制項：收合成低調的小抽屜，不再佔用正式版面。
   命定色頁的 .dev-controls 已是這個做法，這裡比照辦理。 */
.dash-mock {
  margin-top: 8px; font-size: 12px; color: var(--mb-mute);
  background: rgba(255,255,255,0.55); border: 1px dashed var(--mb-line);
  border-radius: 12px; padding: 8px 14px;
}
.dash-mock summary { cursor: pointer; letter-spacing: 0.06em; }
.dash-mock select {
  margin-top: 8px; width: 100%; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--mb-line); border-radius: 8px; background: #fff; outline: none;
}

.outfit-upload-box {
  border: 1px dashed #d1d1d1; border-radius: 16px; padding: 32px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-bottom: 16px; background: rgba(250,250,250,0.5);
}
.outfit-input {
  width: 100%; background: transparent; border: none;
  font-size: 13px; color: #666; resize: none; outline: none;
}
.history-list { list-style: none; padding: 0; }
.history-item-row {
  padding: 16px 0; border-bottom: 1px solid #eee;
  font-size: 14px; color: #555; display: flex; justify-content: space-between;
}
.history-item-row:last-child { border-bottom: none; }
.empty-state {
  text-align: center; color: #aaa; font-size: 14px; margin-top: 40px;
}

/* ═══════════════════════════════════════════════════════════════
 * 動效增強（2026 新增）
 * 全部是漸進增強：不支援的瀏覽器直接沿用原本行為，不會壞。
 * ═══════════════════════════════════════════════════════════════ */

/* ── ① 跨頁轉場 View Transitions ──
 * 本站是多頁式（首頁／命定色／穿搭／試妝／髮色各自獨立 HTML），
 * 底部導覽每點一次就整頁重載，中間會閃一下白 —— 這是目前
 * 最傷「順眼」的地方，而它只需要下面兩行。
 *
 * Chrome / Edge 支援，Safari / Firefox 會自動忽略（維持現狀）。 */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vtFadeOut var(--dur-2) var(--ease-soft) both;
}
::view-transition-new(root) {
  animation: vtFadeIn var(--dur-3) var(--ease-out) both;
}
@keyframes vtFadeOut { to   { opacity: 0; } }
@keyframes vtFadeIn  { from { opacity: 0; transform: translateY(8px); } }

/* 底部導覽列在轉場中保持不動：給它獨立的 transition name，
 * 它就不會跟著整頁淡出淡入，視覺上像是「頁面在導覽列底下換掉」，
 * 這是 App 感的來源。 */
.bottom-nav { view-transition-name: bottom-nav; }

/* 光是給名字還不夠：瀏覽器仍會對這個群組套用預設的 fade-out / fade-in，
 * 導覽列在轉場中還是會微微閃一下。把三個偽元素的動畫全部關掉，
 * 它才會真正定住不動 —— 這正是「頁面在導覽列底下換掉」的關鍵。 */
::view-transition-group(bottom-nav) { animation: none; }
::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) {
  animation: none;
  opacity: 1;
  /* 預設的 plus-lighter 混合是為了兩層交叉淡入而設；
   * 這裡兩層完全不透明地疊著，不關掉會讓導覽列在轉場瞬間變亮。 */
  mix-blend-mode: normal;
}

/* ── ② 補上缺少曲線的 transition ──
 * 這些選擇器原本寫 `transition: ... 0.3s`（無曲線）或 `0.3s ease`，
 * 這裡只覆寫曲線與時長，不動任何會影響版面的屬性。 */
.btn-primary, .btn-secondary, .tool-btn, .season-btn,
.type-card, .bn-item, .history-item-row {
  transition-timing-function: var(--ease-out);
  transition-duration: var(--dur-2);
}
/* 點擊回饋要更快、帶回彈才有手感 */
.btn-primary:active, .btn-secondary:active, .tool-btn:active,
.season-btn:active, .type-card:active, .bn-item:active {
  transition-timing-function: var(--ease-spring);
  transition-duration: var(--dur-1);
}

/* ── ③ 手機觸控手感 ──
 * touch-action: manipulation 移除行動瀏覽器點擊後的 300ms 等待
 * （瀏覽器本來要等一下確認你是不是要雙擊縮放）。
 * 這一行讓所有按鈕的反應「立刻」變快，是感受最直接的優化。 */
button, a, .btn-primary, .btn-secondary, .tool-btn,
.season-btn, .type-card, .bn-item {
  touch-action: manipulation;
}

/* 捲到底／頂時不要把整個頁面往下拉（避免誤觸「下拉重整」把分析結果弄丟） */
html, body { overscroll-behavior-y: contain; }

/* 錨點捲動平順化（回到頂部、頁內跳段） */
html { scroll-behavior: smooth; }

/* iOS 橫置時不要自動放大字體，避免版面在轉向後跑掉 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── ④ 尊重使用者的減少動態設定 ──
 * 上面新增的效果一律關閉，跟既有的 reduced-motion 區塊保持一致。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}