/* ============================================================
   LuluPal Clarity System
   Final visual layer: quieter hierarchy, denser store browsing, clear actions.
   Content, order, routes and application behavior remain unchanged.
   ============================================================ */

:root {
  --bg: #f3f6f4;
  --bg-soft: #edf2ef;
  --surface: #ffffff;
  --surface-2: #f0f4f2;
  --surface-3: #dfe8e4;
  --text: #16383a;
  --text-soft: #4f6566;
  /* ★ 調暗 5%（#657879 → #607273），色相不變。
     原值在頁面主底色 #f3f6f4 上只有 4.27:1、在 --surface-2 上 4.19:1，
     低於 WCAG AA 內文的 4.5。這個變數是 .setting__d 用的——全站的小字說明，
     也正是使用者先前具體抱怨過的「一堆灰色的字看不清楚」。
     不改的話這一版視覺會把那個修復退回去。 */
  --text-dim: #607273;
  --accent-brand: #2b9b94;
  /* ★ 同理調暗 3%（#217f79 → #207b75）：accent 會當連結文字用，
     原值在非白底上只有 4.32:1。 */
  --accent: #207b75;
  --accent-ink: #ffffff;
  --line: #cfdad5;
  --line-soft: #e2e9e5;
  --overlay: rgba(255, 255, 255, .96);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --shadow: 0 16px 36px rgba(31, 58, 56, .12);
  --shadow-sm: 0 5px 14px rgba(31, 58, 56, .08);
  --shadow-card: 0 1px 2px rgba(31, 58, 56, .05);
  --ring-cyan: 0 0 0 3px rgba(43, 155, 148, .18);
}

* { letter-spacing: 0; }

html { scrollbar-gutter: stable; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgba(22, 56, 58, .055) 1px, transparent 1.2px),
    linear-gradient(180deg, #f8faf9 0, var(--bg) 420px);
  background-position: 0 0, 0 0;
  background-size: 24px 24px, auto;
}

body::before,
body::after {
  display: none;
}

#view {
  max-width: min(var(--maxw), calc(100vw - 32px));
  padding: 28px 16px 48px;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(43, 155, 148, .28);
  outline-offset: 2px;
}

/* ---------- Navigation ---------- */
.topbar {
  height: 60px;
  gap: 12px;
  padding: 0 max(14px, calc((100vw - 1440px) / 2));
  background: var(--overlay);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 2px 10px rgba(31, 58, 56, .06);
  backdrop-filter: blur(12px);
}

.brand-logo img {
  width: 108px !important;
  height: auto;
}

.searchbar {
  flex: 1 1 260px;
  min-width: 190px;
  max-width: 420px;
  height: 40px;
  padding: 0 12px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  box-shadow: none;
}

.searchbar:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--ring-cyan);
}

.searchbar input { font-size: 14px; }
.search-clear { border-radius: 50%; }

.topnav {
  flex: none;
  gap: 14px;
  margin-left: auto;
}

.topnav > a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.topnav > a::after {
  bottom: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 0;
}

.topnav > a:hover,
.topnav > a.active {
  color: var(--text);
  text-shadow: none;
}

.nav-avatar .glyph,
.nav-avatar img {
  width: 30px;
  height: 30px;
}

.badge-count {
  background: var(--accent-2);
  box-shadow: none;
}

.bottomnav {
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(31, 58, 56, .08);
  backdrop-filter: blur(12px);
}

.bottomnav > a {
  color: var(--text-dim);
  font-weight: 700;
}

.bottomnav > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28%;
  right: 28%;
  height: 2px;
  background: transparent;
}

.bottomnav > a.active { color: var(--accent); }
.bottomnav > a.active::before { background: var(--accent); }
.bottomnav > a.active .bn-ico { filter: none; }

/* ---------- Shared controls ---------- */
.btn {
  min-height: 40px;
  padding: 9px 16px;
  gap: 7px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 750;
  box-shadow: none;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

.btn--lg {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
}

.btn--primary {
  color: #fff;
  background: #217f79;
  border-color: #217f79;
  box-shadow: none;
}

.btn--primary:hover {
  background: #196f69;
  border-color: #196f69;
  filter: none;
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

.btn--ghost:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: #aebfba;
}

.btn--soft {
  color: var(--text);
  background: var(--surface-2);
  border-color: transparent;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn:disabled,
.btn.is-owned {
  color: var(--text-dim);
  background: #edf1ef;
  border-color: var(--line-soft);
  box-shadow: none;
}

.chip,
.seg,
.seg__btn,
.badge,
.mode,
.post__kind,
.cmn__status,
.tier__ribbon {
  border-radius: 6px;
}

.chip {
  padding: 7px 11px;
  color: var(--text-soft);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}

.chip:hover {
  color: var(--text);
  border-color: #aebfba;
  box-shadow: none;
}

.chip.on {
  color: #174642;
  background: #dff1ee;
  border-color: #acd8d2;
  box-shadow: none;
}

.seg {
  padding: 3px;
  background: var(--surface-2);
  border-color: var(--line);
}

.seg__btn { padding: 8px 14px; }

.seg__btn.on {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(31, 58, 56, .10);
}

.field input,
.field textarea,
.field select,
.cmn-form input,
.cmn-form textarea,
.review-form__text,
.cmt-form__in,
.inv-linkbox__in {
  color: var(--text);
  background: #fbfcfb;
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.cmn-form input:focus,
.cmn-form textarea:focus,
.review-form__text:focus,
.cmt-form__in:focus,
.inv-linkbox__in:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--ring-cyan);
}

/* ---------- Cards and panels ---------- */
.card,
.panel,
.post,
.review-summary,
.review-form,
.review-mine,
.review,
.cmn,
.inv-step,
.tier,
.cart-item,
.step,
.device,
.member-note,
.follow-chip,
.compare-wrap {
  border-color: var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.panel { padding: 20px; }

.card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.card::after { display: none; }

.card:hover {
  transform: translateY(-2px);
  border-color: #aebfba;
  box-shadow: var(--shadow-sm);
}

.card:hover .card__art { transform: none; }

.card__art {
  aspect-ratio: 1 / 1;
  background: #e9f0ed;
}

.card__body {
  gap: 5px;
  padding: 10px 11px 11px;
}

.card__badges {
  min-height: 17px;
  gap: 3px;
}

.badge {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: none;
}

.card__name {
  min-height: 38px;
  font-size: 15px;
  font-weight: 800;
}

.card__author { color: var(--text-dim); font-size: 13px; }
.card__foot { min-height: 24px; }
.price { color: var(--text); }
.price--free { color: #1b756f; }

.wish-heart {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, .66);
  box-shadow: none;
}

.wish-heart:hover { transform: none; }

.art-slot {
  color: var(--text-soft);
  background: #e5eeea;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.art-slot__emoji { filter: none; }
.art-img:not(.card__art) { border-color: var(--line-soft); }

.section-title,
.rail__head h2 {
  padding-left: 12px;
  color: var(--text);
}

.section-title::before,
.rail__head h2::before {
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
}

.page-title,
.member-head,
.lib-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-title { font-size: 26px; }
.page-lead { color: var(--text-soft); }

/* ---------- Home hierarchy ---------- */
.home-stage {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 24px;
}

.home-stage .hero {
  min-height: 420px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.home-stage .hero::after {
  /* ★ 這一條在這批美術裡被改成 display:none，於是首頁 hero 的文字
       直接壓在 lulu_home_hero_v2.png 上，對比隨圖面漂移。
       正式站實測（1280px，逐像素取樣文字行框）：
         副標  39.6% 面積低於 4.5:1，最差 1.85:1
         kicker 100% 面積不合格，最差 1.01:1（等於看不到）
       恢復襯底，但做得比舊版輕：舊版是 60% 寬的 88% 實心板，
       這裡改成往右淡出的漸層——左側夠亮讓文字達標，右側完全透出照片，
       保留這批「照片要看得見」的意圖。
     ⚠️ kicker 救不回來：--accent-2 #f27567 的相對亮度是 0.3258，
        要達 4.5:1 需要底色亮度 ≥1.641，而純白只有 1.0。
        也就是說**任何襯底都不可能讓這個顏色達標**，只能改顏色。
        已連同算好的替代色寫進 CLAUDE_對CODEX_對比度實測.md 交給 Codex。 */
  display: block;
  inset: 0 auto 0 0;
  width: 72%;
  /* ★ 淡出點必須落在文字欄之外。
       第一版把 .93 的轉折放在 58%、.45 放在 84%，但 .hero__inner 是 60% 寬，
       換算成襯底自身的比例是 0.60/0.72 ≈ 83% —— 淡出剛好壓在文字行的尾端，
       於是 kicker 仍有 8.5% 面積不合格。把高不透明區延到 84% 之後才開始收。 */
  background: linear-gradient(90deg,
    rgba(248, 250, 249, .97) 0%,
    rgba(248, 250, 249, .95) 84%,
    rgba(248, 250, 249, .40) 93%,
    rgba(248, 250, 249, 0) 100%);
}

.hero .art {
  object-position: 78% center;
  transform: translate3d(calc(var(--parallax-x) * -.08), calc(var(--parallax-y) * -.08), 0) scale(1.01);
}

.hero__inner {
  width: 60%;
  max-width: 560px;
  padding: 40px;
  transform: translate3d(calc(var(--parallax-x) * .025), calc(var(--parallax-y) * .025), 0);
}

.hero__kicker,
.member-promo__kicker,
.daily-pick__kicker,
.browse-head__eyebrow,
.cat-section__head span {
  /* ★ 從 --accent-2 換成 --accent-2-ink（同色相的深色版）。
       原色 #f27567 在這些底色上只有 2.60–2.77:1，遠低於 4.5；
       首頁 hero 那行更慘，實測 100% 面積不合格、最差 1.01:1（等於看不到）。
       這是既有問題、不是新美術層造成的，但字級調大後更顯眼，所以一併修。
       只換文字色，色塊與框線仍用原本的 --accent-2。 */
  color: var(--accent-2-ink);
  font-size: 13px;
  font-weight: 850;
  text-transform: none;
  text-shadow: none;
}

.hero__title {
  max-width: 520px;
  margin: 8px 0 10px;
  color: var(--text);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.16;
  text-shadow: none;
}

.hero__sub {
  max-width: 500px;
  margin-bottom: 18px;
  color: var(--text-soft);
  font-size: 16px;
}

.hero__cta { gap: 8px; }

.home-onboarding {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(86px, 10vh, 118px) clamp(34px, 7vw, 110px) clamp(42px, 7vh, 76px);
  background: #f3f8f6;
  color: var(--text);
}

.home-onboarding::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 22vh;
  min-height: 150px;
  border-top: 1px solid #b8d7d0;
  background: #d8ebe6;
}

.home-onboarding__brand {
  position: absolute;
  top: clamp(22px, 4vh, 40px);
  left: clamp(24px, 4vw, 64px);
  z-index: 3;
}

.home-onboarding__logo {
  width: 120px;
  height: auto;
  display: block;
}

.home-onboarding__mascot {
  position: absolute;
  right: clamp(34px, 8vw, 138px);
  bottom: clamp(42px, 5vh, 72px);
  z-index: 1;
  width: clamp(330px, 43vw, 620px);
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 22px 18px rgba(19, 66, 64, .14));
  transition: transform 260ms ease-out;
  animation: onboarding-breathe 3.8s ease-in-out infinite;
}

.home-onboarding .home-onboarding__mascot {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-onboarding[data-guide-step="2"] .home-onboarding__mascot {
  transform: translateY(-8px) rotate(1deg);
}

.home-onboarding[data-guide-step="3"] .home-onboarding__mascot {
  transform: translateX(-10px) scale(1.025);
}

.home-onboarding__content {
  position: relative;
  z-index: 2;
  width: min(52vw, 610px);
  min-height: calc(100svh - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-guide__steps {
  width: min(100%, 390px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.home-guide__step {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 7px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.home-guide__step span {
  font-size: 12px;
  font-weight: 850;
}

.home-guide__step b {
  font-size: 14px;
  letter-spacing: 0;
}

.home-guide__step:hover,
.home-guide__step:focus-visible {
  color: var(--text);
}

.home-guide__step.is-active {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.home-guide__panel {
  min-height: 286px;
  animation: home-guide-in 180ms ease-out both;
}

.home-guide__panel[hidden] {
  display: none;
}

.home-guide__panel .hero__title {
  max-width: 600px;
  margin-top: 10px;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1.12;
}

.home-guide__panel .hero__sub {
  min-height: 56px;
  max-width: 520px;
  margin: 18px 0 24px;
  font-size: 18px;
  line-height: 1.75;
}

.home-guide__direct {
  position: absolute;
  top: clamp(20px, 4vh, 38px);
  right: clamp(22px, 4vw, 62px);
  z-index: 3;
}

.home-guide__direct .btn {
  min-height: 42px;
  padding: 9px 15px;
  border-color: #b9c9c5;
  background: #fff;
  font-size: 14px;
}

@keyframes home-guide-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes onboarding-breathe {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 8px; }
}

.home-aside {
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

.home-aside .member-promo,
.daily-pick,
.store-pulse {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.home-aside .member-promo {
  min-height: 0;
  align-content: start;
  gap: 12px;
  margin: 0;
  padding: 18px;
}

.member-promo__title {
  margin: 3px 0;
  font-size: 21px;
}

.member-promo__sub { font-size: 14px; }

.home-aside .member-promo__tiers { gap: 5px; }

.member-promo__tiers span {
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--surface-2);
}

.home-aside .member-promo .btn {
  min-height: 36px;
  justify-self: start;
  padding: 7px 12px;
  font-size: 13px;
}

.daily-pick {
  min-height: 158px;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
  padding: 18px;
}

.daily-pick::before { display: none; }

.daily-pick__name {
  margin-top: 4px;
  font-size: 20px;
}

.daily-pick__meta { font-size: 14px; }

.daily-pick__art {
  width: 92px;
  height: 92px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: none;
}

.store-pulse {
  gap: 0;
  overflow: hidden;
}

.store-pulse div {
  padding: 12px 8px;
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
}

.store-pulse div:last-child { border-right: 0; }
.store-pulse strong { font-size: 22px; }
.store-pulse span { font-size: 13px; }

.cat-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 22px max(16px, calc((100vw - var(--maxw)) / 2 + 16px)) 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #eef4f1;
}

.cat-section__head {
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.cat-section__head strong {
  color: var(--text-soft);
  font-size: 14px;
}

.cat-section__head span {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.cat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 10px;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.cat-card {
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  gap: 12px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.cat-card::before { width: 3px; }

.cat-card:hover {
  border-color: #aebfba;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.cat-card__mark {
  width: 48px;
  height: 48px;
}

.cat-card__mark .art {
  width: 46px;
  height: 46px;
}

.cat-card__body { gap: 2px; }
.cat-card__name { font-size: 16px; }
.cat-card__desc { font-size: 13px; }
.cat-card__count { font-size: 13px; }
.cat-card__arrow { width: 20px; height: 24px; font-size: 22px; }

.home-rails {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.rail {
  width: 100%;
  margin: 0;
  padding: 26px max(16px, calc((100vw - var(--maxw)) / 2 + 16px)) 28px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.rail:nth-child(even) { background: #f0f4f2; }
.rail:nth-child(odd) { background: #fafbfa; }

.rail__head {
  margin-bottom: 14px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line-soft);
}

.rail__head h2 { font-size: 20px; }

.rail__more {
  color: #1e756f;
  font-size: 14px;
  font-weight: 750;
}

.rail__track {
  grid-auto-columns: 188px;
  gap: 14px;
  padding: 1px 1px 7px;
  scrollbar-width: thin;
}

.rail__track::-webkit-scrollbar { height: 5px; }
.rail__track::-webkit-scrollbar-thumb { background: #bccbc6; }

/* ---------- Browse and dense store pages ---------- */
.browse-shell {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
}

.browse-sidebar__title {
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  font-size: 17px;
}

.browse-shell .filters {
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.browse-shell .chip { width: 100%; }

.browse-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.browse-head h1 {
  font-size: 32px;
  font-weight: 900;
}

.result-count {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface);
}

.sort-select { border-radius: 6px; }

.grid {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 16px;
}

/* ---------- Detail, account, creator, membership ---------- */
.detail {
  grid-template-columns: minmax(0, .94fr) minmax(340px, .70fr);
  gap: 32px;
}

.detail__hero,
.detail__gallery .art {
  border-radius: 8px;
  box-shadow: none;
}

.detail__hero { border: 1px solid var(--line); }
.detail__gallery .art { border: 1px solid var(--line-soft); }
.detail__gallery .art:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.detail__name { font-size: 26px; }

.detail__side,
.summary,
.account > .panel,
.creator-hero + .panel {
  border-top: 1px solid var(--line-soft);
}

.cart-item { box-shadow: none; }
.summary { box-shadow: none; }

.creator-hero { gap: 28px; }
.creator-hero .art { border-radius: 8px; }
.step { padding: 14px; }

.account { grid-template-columns: 280px 1fr; }

.tier {
  padding: 20px;
  border-color: var(--line);
  background: var(--surface);
}

.tier--rec {
  border-color: var(--accent-3);
  box-shadow: inset 0 3px 0 var(--accent-3);
}

.tier--cur {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}

.tier__ribbon,
.tier__ribbon--cur {
  box-shadow: none;
}

.compare-wrap { border-color: var(--line); }
.compare thead th,
.compare tbody th { background: #f3f6f4; }
.member-note { border-left-color: var(--accent-2); }

.post-teaser { background: var(--surface-2); }
.post-teaser__art { border-radius: 8px; box-shadow: none; }
.post { padding: 18px; }
.post-like { border-radius: 6px; }
.rbar__fill,
.inv-bar span { background: var(--accent); }
.cmn { padding: 16px 18px; }
.cmn__art { border-radius: 8px; box-shadow: none; }
.inv-stat { border-radius: 8px; }

.empty {
  min-height: 280px;
  padding: 28px 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .64);
}

.sitefoot {
  gap: 18px;
  margin-top: 0;
  padding: 24px max(16px, calc((100vw - var(--maxw)) / 2 + 16px));
  background: #edf2ef;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.sitefoot__c { opacity: 1; }

.toast {
  border-radius: 8px;
  background: var(--text);
  color: #fff;
  box-shadow: var(--shadow);
}

/* ---------- Responsive density ---------- */
@media (max-width: 1180px) {
  .topbar { gap: 9px; padding-inline: 10px; }
  .searchbar { max-width: 300px; }
  .topnav { gap: 10px; }
  .topnav > a { font-size: 13px; }
}

@media (max-width: 1100px) {
  .home-stage { grid-template-columns: 1fr; }
  .home-stage .hero { min-height: 390px; }
  .home-aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .home-aside .member-promo { grid-row: auto; }
  .store-pulse { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  #view {
    max-width: 100%;
    padding: 18px 14px calc(var(--bottomnav-h) + 28px);
  }

  .topbar {
    height: 58px;
    gap: 8px;
    padding: 0 9px;
  }

  .brand-logo img { width: 88px !important; }

  .searchbar {
    min-width: 0;
    max-width: none;
    height: 38px;
    padding-inline: 10px;
  }

  .bottomnav { height: var(--bottomnav-h); }

  .home-stage { gap: 12px; margin-bottom: 18px; }

  .home-stage .hero {
    min-height: 390px;
    border-radius: 8px;
  }

  .home-stage .hero::after {
    /* ★ 手機版不要襯底，Codex 關掉它是對的。
         ≤520px 時 hero 變成上下兩段（experience.css 把 .hero__inner 給了
         自己的實心底 #f8fbfa），文字根本不在圖上——實測 kicker 4.66、
         副標 5.96、大標 12.14，全部達標。
         我一度連手機版也「一起恢復」，結果只是把插圖洗白：
         襯底蓋住 hero 上方 72%，而那一段正好整個是圖，
         貓和視窗糊到快看不見。修對比不能把美術一起修掉。 */
    display: none;
  }

  .hero .art {
    object-position: center bottom;
    transform: none;
  }

  .hero__inner {
    width: 100%;
    max-width: 100%;
    padding: 24px;
    transform: none;
  }

  .hero__title { font-size: 30px; }
  .hero__sub { font-size: 15px; }

  .home-onboarding {
    overflow-y: auto;
    padding: 82px 28px 34px;
  }

  .home-onboarding__brand {
    top: 22px;
    left: 24px;
  }

  .home-onboarding__mascot {
    right: 4vw;
    bottom: 5vh;
    width: min(46vw, 420px);
  }

  .home-onboarding__content {
    width: min(58vw, 520px);
    min-height: calc(100svh - 116px);
  }

  .home-guide__steps {
    width: 100%;
    margin-bottom: 20px;
  }

  .home-guide__panel {
    min-height: 270px;
  }

  .home-guide__panel .hero__title {
    max-width: 520px;
    font-size: 40px;
  }

  .home-aside,
  .browse-shell .filters {
    grid-template-columns: 1fr;
  }

  .store-pulse { grid-column: auto; }

  .cat-section {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .cat-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 78vw);
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .rail {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .rail__track { grid-auto-columns: 174px; }

  .browse-shell { grid-template-columns: 1fr; gap: 18px; }
  .browse-sidebar { position: static; }
  .browse-shell .chip { width: auto; }
  .browse-head h1 { font-size: 28px; }

  .detail,
  .account,
  .cart-layout,
  .creator-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .panel { padding: 16px; }
  .post { padding: 15px; }
}

@media (max-width: 520px) {
  .hero__inner { padding: 22px; }
  .hero__cta { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__cta .btn { min-width: 0; padding-inline: 10px; }

  .home-onboarding {
    display: flex;
    min-height: 100svh;
    padding: 290px 22px 28px;
    overflow-y: auto;
  }

  .home-onboarding::before {
    height: 20vh;
    min-height: 126px;
  }

  .home-onboarding__brand {
    top: 18px;
    left: 18px;
  }

  .home-onboarding__logo {
    width: 100px;
  }

  .home-onboarding__mascot {
    top: 66px;
    right: 50%;
    bottom: auto;
    width: min(52vw, 230px);
    transform: translateX(50%);
  }

  .home-onboarding[data-guide-step="2"] .home-onboarding__mascot {
    transform: translateX(50%) translateY(-5px) rotate(1deg);
  }

  .home-onboarding[data-guide-step="3"] .home-onboarding__mascot {
    transform: translateX(50%) scale(1.025);
  }

  .home-onboarding__content {
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
  }

  .home-guide__steps {
    margin-bottom: 16px;
  }

  .home-guide__step {
    min-height: 40px;
    gap: 5px;
    padding-inline: 5px;
  }

  .home-guide__step b {
    font-size: 13px;
  }

  .home-guide__panel {
    min-height: 282px;
  }

  .home-guide__panel .hero__title {
    font-size: 34px;
  }

  .home-guide__panel .hero__sub {
    min-height: 50px;
    margin: 14px 0 20px;
    font-size: 16px;
  }

  .home-guide__panel .btn {
    width: 100%;
    justify-content: center;
  }

  .home-guide__direct {
    top: 14px;
    right: 14px;
  }

  .home-guide__direct .btn {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .home-aside .member-promo,
  .daily-pick { padding: 16px; }

  .daily-pick { grid-template-columns: minmax(0, 1fr) 82px; }
  .daily-pick__art { width: 82px; height: 82px; }

  .cat-section__head {
    display: grid;
    gap: 2px;
  }

  .cat-row { grid-auto-columns: minmax(244px, 86vw); }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .grid .card__body { padding: 9px; }
  .grid .card__name { font-size: 15px; }
  .grid .stars { font-size: 12px; }

  .page-title { font-size: 23px; }
  .detail__name { font-size: 23px; }
  .sitefoot { align-items: flex-start; }
  .sitefoot__c { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .art,
  .hero__inner,
  .card,
  .cat-card,
  .btn {
    transform: none !important;
    transition: none !important;
  }

  .home-guide__panel {
    animation: none;
  }

  .home-onboarding__mascot {
    animation: none;
  }
}