/* ══════════════════════════════════════════════════════════════
   CHERRY SLIDES — LAYOUT LIBRARY
   ──────────────────────────────────────────────────────────────
   8 modular layouts + utilities.
   呢個 file 只負責結構，所有色 / 字 / 字級由 design-tokens.css 注入。

   Naming convention：`cs-` prefix（避免衝撞）
   Layout class：`cs-<type>-<variant>`，例：`cs-cover-1`、`cs-chapter-1`

   Usage（HTML）:
     <div class="cs-deck">
       <div class="cs-slides-viewport">
         <div class="cs-slides-track">
           <div class="cs-slide cs-cover-1"> ... </div>
           <div class="cs-slide cs-chapter-1"> ... </div>
           ...
         </div>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & root ───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  height:100%; width:100%;
  font-family: var(--cs-font-body-zh);
  background: var(--cs-color-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Deck / Viewport / Track ────────────────────────────────── */
.cs-deck { width:100vw; height:100vh; display:flex; flex-direction:column; }
.cs-slides-viewport { flex:1; overflow:hidden; position:relative; }
.cs-slides-track {
  display:flex; height:100%;
  transition: transform var(--cs-anim-duration) var(--cs-anim-easing);
  will-change: transform;
}

/* ── Base Slide ─────────────────────────────────────────────── */
.cs-slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--cs-color-bg);
  color: var(--cs-color-body);
  padding: var(--cs-pad-y) var(--cs-pad-x) calc(var(--cs-pad-y) + 20px);
  /* Em-based responsive base — em scales the entire layout */
  font-size: clamp(10px, 1.667vw, 22px);
}
.cs-slide > * { position: relative; z-index: 1; }

/* ── Background patterns（utility，疊喺 .cs-slide）─────────── */
/* 微網格底（雷蒙 signature） */
.cs-bg-grid {
  background-color: var(--cs-color-bg);
  background-image:
    linear-gradient(rgba(108,92,231,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,.04) 1px, transparent 1px);
  background-size: 0.75em 0.75em;
}
/* 圓點底（v3 風格） */
.cs-bg-dot {
  background-color: var(--cs-color-bg);
  background-image: radial-gradient(circle, var(--cs-color-brand-10) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Animation engine ───────────────────────────────────────── */
@keyframes cs-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cs-smoke-in {
  0%   { opacity: 0; filter: blur(10px); transform: translateY(8px); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
.cs-anim {
  opacity: 0;
  animation: cs-fade-in-up var(--cs-anim-duration) ease-out forwards;
  animation-delay: calc(var(--i, 0) * var(--cs-anim-stagger));
}
.cs-cover-1 .cs-anim, .cs-cover-2 .cs-anim {
  animation-name: cs-smoke-in;
  animation-duration: .85s;
  animation-delay: calc(var(--i, 0) * .22s);
}

/* ── Typography utilities ───────────────────────────────────── */
.cs-h1 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h1);
  font-weight: var(--cs-fw-heading);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--cs-color-text);
}
.cs-h2 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  line-height: 1.12;
  letter-spacing: -.6px;
  color: var(--cs-color-text);
}
.cs-h1 em, .cs-h2 em { color: var(--cs-color-brand); font-style: normal; }

.cs-body {
  font-family: var(--cs-font-body-zh);
  font-size: var(--cs-fs-body);
  font-weight: var(--cs-fw-body);
  line-height: 1.6;
  color: var(--cs-color-body);
}
.cs-sub  { font-size: var(--cs-fs-aux); color: var(--cs-color-sub); line-height: 1.6; }
.cs-meta { font-family: var(--cs-font-body-en); font-size: var(--cs-fs-meta); color: var(--cs-color-sub); font-weight: var(--cs-fw-meta); }

/* Eyebrow label（UPPERCASE micro label） */
.cs-eyebrow {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: var(--cs-fw-label);
  color: var(--cs-color-brand);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.8em;
}

/* Title rule — 紫→綠 gradient 帶出雙色 rhythm */
.cs-rule {
  width: var(--cs-rule-width);
  height: var(--cs-rule-height);
  background: linear-gradient(90deg, var(--cs-color-brand) 0%, var(--cs-color-accent) 100%);
  border-radius: 2px;
  margin: 0.5em 0 1em;
}

/* Pill */
.cs-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: var(--cs-color-brand-08);
  color: var(--cs-color-brand);
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-label);
  padding: 0.4em 1em;
  border-radius: var(--cs-radius-pill);
  border: 1.5px solid var(--cs-color-brand-18);
}
.cs-pill::before { content:''; width: 0.4em; height: 0.4em; border-radius:50%; background: var(--cs-color-brand); }

/* Watermark page number */
.cs-watermark {
  position: absolute;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-watermark);
  font-weight: 900;
  color: var(--cs-color-watermark);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0 !important;
}

/* Inline footer */
.cs-inline-footer {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  padding: 0 var(--cs-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cs-color-inline-footer);
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-meta);
  z-index: 1;
}

/* Progress bar + Nav bar */
.cs-progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px;
  background: var(--cs-color-brand);
  z-index: 300;
  transition: width .36s ease;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px var(--cs-color-brand-30);
}
.cs-nav-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(250,250,248,.93);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--cs-color-brand-10);
}
.cs-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--cs-color-brand-18);
  background: var(--cs-color-card);
  color: var(--cs-color-brand);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cs-nav-btn:hover  { background: var(--cs-color-brand); color: #fff; border-color: var(--cs-color-brand); }
.cs-nav-btn:active { transform: scale(.9); }
.cs-nav-btn:disabled { opacity: .25; pointer-events: none; }
.cs-nav-counter {
  font-family: var(--cs-font-body-en);
  font-size: 13px; font-weight: 600;
  color: var(--cs-color-sub);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 1: COVER-1（封面 — 左文右圖 + 頂部色條 + 標題旁直條）
   ════════════════════════════════════════════════════════════ */
.cs-cover-1 {
  padding: 0;
  justify-content: space-between;
  background: var(--cs-color-card);
}
.cs-cover-1 .cs-cover-top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--cs-color-accent);
  z-index: 2;
}
.cs-cover-1 .cs-cover-brand {
  position: absolute; top: 1.8em; left: 4em;
  color: var(--cs-color-sub);
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-meta);
  letter-spacing: .1em;
  z-index: 2;
}
.cs-cover-1 .cs-cover-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3em;
  padding: 6em 4em 4em;
}
.cs-cover-1 .cs-cover-left { flex: 1; display: flex; flex-direction: column; }
.cs-cover-1 .cs-cover-right { width: 14em; display: flex; flex-direction: column; align-items: center; gap: 1em; flex-shrink: 0; }
.cs-cover-1 .cs-cover-title-block { display: flex; align-items: stretch; gap: 1em; }
.cs-cover-1 .cs-cover-title-bar {
  width: 6px;
  background: var(--cs-color-brand);
  border-radius: 3px;
  flex-shrink: 0;
}
.cs-cover-1 .cs-cover-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-cover);
  font-weight: var(--cs-fw-heading);
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--cs-color-text);
}
.cs-cover-1 .cs-cover-title em { color: var(--cs-color-brand); font-style: normal; }
.cs-cover-1 .cs-cover-subtitle {
  margin-top: 1.2em;
  padding-left: calc(6px + 1em);
  color: var(--cs-color-sub);
  font-size: var(--cs-fs-aux);
  line-height: 1.6;
  max-width: 28em;
}
.cs-cover-1 .cs-cover-photo {
  width: 12em; height: 14em;
  border-radius: var(--cs-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(108,92,231,.12);
}
.cs-cover-1 .cs-cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-cover-1 .cs-cover-author {
  color: var(--cs-color-text);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-label);
  display: flex; align-items: center; gap: .4em;
}
.cs-cover-1 .cs-cover-author::before {
  content:''; display: inline-block;
  width: 4px; height: 1em;
  background: var(--cs-color-accent);
  border-radius: 2px;
}
.cs-cover-1 .cs-cover-url {
  position: absolute; bottom: 3em; left: 4em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-aux);
  font-weight: var(--cs-fw-label);
  color: var(--cs-color-brand);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 2: CHAPTER-1（章節分隔 — 圓 badge + 主色 H1 + 網格底）
   ════════════════════════════════════════════════════════════ */
.cs-chapter-1 {
  background-color: var(--cs-color-card);
  background-image:
    linear-gradient(rgba(108,92,231,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,.04) 1px, transparent 1px);
  background-size: 0.75em 0.75em;
  justify-content: center;
}
.cs-chapter-1 .cs-chapter-badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1em;
}
.cs-chapter-1 .cs-chapter-num {
  width: 1.75em; height: 1.75em;
  border-radius: 50%;
  background: var(--cs-color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-font-body-en);
  font-weight: 700;
  font-size: var(--cs-fs-aux);
}
.cs-chapter-1 .cs-chapter-label {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
}
.cs-chapter-1 .cs-chapter-h1 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h1);
  font-weight: var(--cs-fw-heading);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--cs-color-brand);
  max-width: 28em;
}
.cs-chapter-1 .cs-chapter-sub {
  margin-top: 1em;
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  line-height: 1.6;
  max-width: 28em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 3: CONTENT-1（一般內容 — 標題 + rule + 條列）
   ════════════════════════════════════════════════════════════ */
.cs-content-1 .cs-content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}
.cs-content-1 .cs-bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8em;
}
.cs-content-1 .cs-bullet {
  display: flex;
  align-items: flex-start;
  gap: .8em;
  font-size: var(--cs-fs-body);
  color: var(--cs-color-body);
  line-height: 1.55;
}
.cs-content-1 .cs-bullet::before {
  content: '';
  flex-shrink: 0;
  width: .35em; height: .35em;
  border-radius: 50%;
  background: var(--cs-color-brand);
  margin-top: .7em;
}
.cs-content-1 .cs-bullet strong { color: var(--cs-color-brand); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 4: QUOTE-1（引言 — 大引號 + 主色強調 + 分隔線）
   ════════════════════════════════════════════════════════════ */
.cs-quote-1 {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cs-quote-1 .cs-quote-mark {
  font-family: var(--cs-font-display);
  font-size: 7em;
  font-style: italic;
  color: var(--cs-color-brand-15);
  line-height: .8;
  margin-bottom: -.2em;
}
.cs-quote-1 .cs-quote-text {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  line-height: 1.5;
  color: var(--cs-color-text);
  max-width: 26em;
  margin-bottom: 1em;
}
.cs-quote-1 .cs-quote-text em { color: var(--cs-color-brand); font-style: normal; }
.cs-quote-1 .cs-quote-divider {
  width: 2em; height: 3px;
  background: var(--cs-color-accent);
  border-radius: 2px;
  margin: 0 auto 1em;
}
.cs-quote-1 .cs-quote-attr {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 5: IMAGE-1（左圖右文 — 主視覺 + 說明）
   ════════════════════════════════════════════════════════════ */
.cs-image-1 .cs-image-body {
  flex: 1;
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 3em;
  align-items: center;
}
.cs-image-1 .cs-image-frame {
  width: 100%;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow:
    0 0.25em 0.4em rgba(108,92,231,.06),
    0 0.6em 1.5em rgba(108,92,231,.10);
  border: 1.5px solid var(--cs-color-brand-08);
  border-top: 3px solid var(--cs-color-accent);
}
.cs-image-1 .cs-image-frame img { width: 100%; display: block; }
.cs-image-1 .cs-image-text { display: flex; flex-direction: column; gap: 1em; }
/* 變體：右圖左文 */
.cs-image-1.cs-reverse .cs-image-body { grid-template-columns: 4fr 5fr; }
.cs-image-1.cs-reverse .cs-image-frame { order: 2; }
.cs-image-1.cs-reverse .cs-image-text { order: 1; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 6: COMPARE-1（對比 — Before/After 雙欄）
   ════════════════════════════════════════════════════════════ */
.cs-compare-1 .cs-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  flex: 1;
  align-content: center;
}
.cs-compare-1 .cs-compare-card {
  border-radius: var(--cs-radius-lg);
  padding: 1.5em 1.4em;
  display: flex;
  flex-direction: column;
  gap: .8em;
}
.cs-compare-1 .cs-compare-card.cs-before {
  background: var(--cs-color-before-bg);
  border: 1.5px solid var(--cs-color-before-border);
}
.cs-compare-1 .cs-compare-card.cs-after {
  background: var(--cs-color-accent-08);
  border: 1.5px solid var(--cs-color-accent-30);
}
.cs-compare-1 .cs-compare-label {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: var(--cs-fw-label);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cs-compare-1 .cs-before .cs-compare-label { color: var(--cs-color-sub); }
.cs-compare-1 .cs-after  .cs-compare-label { color: var(--cs-color-accent-dark); }
.cs-compare-1 .cs-compare-title {
  font-size: var(--cs-fs-body);
  font-weight: 800;
  color: var(--cs-color-text);
  line-height: 1.2;
}
.cs-compare-1 .cs-after .cs-compare-title { color: var(--cs-color-accent-dark); }
.cs-compare-1 .cs-compare-items {
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.cs-compare-1 .cs-compare-item {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-body);
  line-height: 1.5;
  padding-left: 1em;
  position: relative;
}
.cs-compare-1 .cs-compare-item::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cs-compare-1 .cs-before .cs-compare-item::before { background: var(--cs-color-muted); }
.cs-compare-1 .cs-after  .cs-compare-item::before { background: var(--cs-color-accent); }

/* ════════════════════════════════════════════════════════════
   LAYOUT 7: DATA-1（數據展示 — 大數字 + label）
   ════════════════════════════════════════════════════════════ */
.cs-data-1 .cs-data-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cs-data-1 .cs-data-stats {
  display: flex;
  gap: 3em;
  margin: 1em 0;
  flex-wrap: wrap;
  justify-content: center;
}
.cs-data-1 .cs-data-stat { text-align: center; }
.cs-data-1 .cs-data-value {
  font-family: var(--cs-font-body-en);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  color: var(--cs-color-accent);
  line-height: 1;
  letter-spacing: -2px;
}
.cs-data-1 .cs-data-label {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  margin-top: .4em;
}
.cs-data-1 .cs-data-caption {
  margin-top: 1.5em;
  font-size: var(--cs-fs-body);
  font-weight: 700;
  color: var(--cs-color-brand);
  max-width: 32em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 8: CTA-1（行動呼籲 — emoji + 標題 + 卡片 + QR）
   ════════════════════════════════════════════════════════════ */
.cs-cta-1 {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cs-cta-1 .cs-cta-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.cs-cta-1 .cs-cta-emoji { font-size: clamp(44px, 5vw, 72px); }
.cs-cta-1 .cs-cta-h1 {
  font-family: var(--cs-font-heading);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -1.5px;
  color: var(--cs-color-text);
  line-height: 1.1;
}
.cs-cta-1 .cs-cta-h1 em { color: var(--cs-color-brand); font-style: normal; }
.cs-cta-1 .cs-cta-sub {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  line-height: 1.6;
  max-width: 28em;
}
.cs-cta-1 .cs-cta-cards {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1em;
}
.cs-cta-1 .cs-cta-card {
  background: var(--cs-color-card);
  border: 1.5px solid var(--cs-color-brand-18);
  border-radius: var(--cs-radius-lg);
  padding: 1.4em 1.8em;
  text-align: left;
  min-width: 12em;
  border-top: 3px solid var(--cs-color-accent);
}
.cs-cta-1 .cs-cta-card.cs-qr {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .6em;
}
.cs-cta-1 .cs-cta-card-label {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: var(--cs-fw-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cs-color-sub);
  margin-bottom: .4em;
}
.cs-cta-1 .cs-cta-card-value {
  font-size: var(--cs-fs-body);
  font-weight: 800;
  color: var(--cs-color-brand);
}

/* ════════════════════════════════════════════════════════════
   PLACEHOLDER utilities — for inspect / template-spec mode
   ──────────────────────────────────────────────────────────── */
.cs-ph-img {
  background: var(--cs-color-brand-08);
  border: 2px dashed var(--cs-color-brand-30);
  color: var(--cs-color-brand);
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  border-radius: var(--cs-radius-lg);
  padding: 1em;
}
.cs-ph-img.cs-ph-full {
  position: absolute;
  inset: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  font-size: clamp(14px, 1.4vw, 22px);
}
.cs-ph-img-darkbg {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
}
.cs-ph-text {
  color: var(--cs-color-brand);
  background: var(--cs-color-brand-08);
  border: 1.5px dashed var(--cs-color-brand-30);
  border-radius: 6px;
  padding: .15em .5em;
  font-family: var(--cs-font-body-en);
  font-weight: 600;
  letter-spacing: .05em;
  font-size: .9em;
  display: inline-block;
}

/* Spec tag — 左上角 layout class identifier */
.cs-spec-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 50;
  background: var(--cs-color-brand);
  color: #fff;
  font-family: var(--cs-font-body-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(108,92,231,.25);
  line-height: 1.2;
  pointer-events: none;
}
.cs-spec-tag small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: none;
  opacity: .85;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 9: COVER-2（封面變體 — 左文右漸層色塊）
   ════════════════════════════════════════════════════════════ */
.cs-cover-2 {
  padding: 0;
  background: var(--cs-color-text);
  color: #fff;
  flex-direction: row;
  align-items: stretch;
}
.cs-cover-2 .cs-cover-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4em 5em;
  z-index: 2;
  position: relative;
  max-width: 60%;
}
.cs-cover-2 .cs-cover-2-gradient {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(135deg, var(--cs-color-brand) 0%, #A78BFA 100%);
  opacity: .85;
  z-index: 1;
}
.cs-cover-2 .cs-cover-2-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-cover);
  font-weight: var(--cs-fw-heading);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: .8em;
}
.cs-cover-2 .cs-cover-2-title em { color: var(--cs-color-accent); font-style: normal; }
.cs-cover-2 .cs-cover-2-sub {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  max-width: 24em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 10: COVER-3（封面變體 — 全圖背景 + 暗層）
   ════════════════════════════════════════════════════════════ */
.cs-cover-3 {
  padding: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.cs-cover-3 .cs-cover-3-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-cover-3 .cs-cover-3-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,40,.55) 0%, rgba(20,18,40,.85) 100%);
  z-index: 1;
}
.cs-cover-3 .cs-cover-3-content {
  position: relative; z-index: 2;
  padding: 4em 3em;
  max-width: 36em;
}
.cs-cover-3 .cs-cover-3-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-cover);
  font-weight: var(--cs-fw-heading);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: .6em;
}
.cs-cover-3 .cs-cover-3-title em { color: var(--cs-color-accent); font-style: normal; }
.cs-cover-3 .cs-cover-3-sub {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.75);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 11: CHAPTER-2（章節變體 — 主色滿版居中）
   ════════════════════════════════════════════════════════════ */
.cs-chapter-2 {
  background: var(--cs-color-brand);
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cs-chapter-2 .cs-chapter-2-num {
  font-family: var(--cs-font-body-en);
  font-size: clamp(80px, 12vw, 200px);
  font-weight: 900;
  line-height: 1;
  color: var(--cs-color-accent);
  opacity: .55;
  margin-bottom: -.1em;
  letter-spacing: -.05em;
}
.cs-chapter-2 .cs-chapter-2-h1 {
  font-family: var(--cs-font-heading);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -2px;
  line-height: 1.1;
}
.cs-chapter-2 .cs-chapter-2-sub {
  margin-top: 1em;
  font-size: var(--cs-fs-body);
  color: rgba(255,255,255,.75);
  max-width: 32em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 12: CHAPTER-3（章節變體 — 照片遮罩背景）
   ════════════════════════════════════════════════════════════ */
.cs-chapter-3 {
  padding: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.cs-chapter-3 .cs-chapter-3-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-chapter-3 .cs-chapter-3-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1;
}
.cs-chapter-3 .cs-chapter-3-content {
  position: relative; z-index: 2;
  padding: 4em 3em;
  max-width: 36em;
}
.cs-chapter-3 .cs-chapter-3-h2 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h1);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -1.5px;
  line-height: 1.15;
}
.cs-chapter-3 .cs-chapter-3-divider {
  width: 60px; height: 3px;
  background: var(--cs-color-accent);
  margin: 1em auto;
}
.cs-chapter-3 .cs-chapter-3-p {
  font-size: var(--cs-fs-body);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}
.cs-chapter-3 .cs-chapter-3-p em { color: var(--cs-color-accent); font-style: normal; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 13: CONTENT-2（內容變體 — 2 欄文字）
   ════════════════════════════════════════════════════════════ */
.cs-content-2 .cs-content-2-cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-content: center;
}
.cs-content-2 .cs-col-h3 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h3);
  font-weight: var(--cs-fw-heading);
  color: var(--cs-color-brand);
  margin-bottom: .6em;
}
.cs-content-2 .cs-col-p {
  font-size: var(--cs-fs-body);
  color: var(--cs-color-body);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 14: CONTENT-3（內容變體 — 3 欄卡片 grid）
   ════════════════════════════════════════════════════════════ */
.cs-content-3 .cs-content-3-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
  align-content: center;
}
.cs-content-3 .cs-grid-card {
  background: var(--cs-color-card);
  border: 1.5px solid var(--cs-color-brand-10);
  border-radius: var(--cs-radius-lg);
  padding: 1.4em 1.2em;
  display: flex;
  flex-direction: column;
  gap: .5em;
  position: relative;
  overflow: hidden;
}
.cs-content-3 .cs-grid-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cs-color-accent);
}
.cs-content-3 .cs-grid-icon { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: .3em; }
.cs-content-3 .cs-grid-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-aux);
  font-weight: 800;
  color: var(--cs-color-text);
}
.cs-content-3 .cs-grid-desc {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 15: CONTENT-4（內容變體 — Step pills 編號流程）
   ════════════════════════════════════════════════════════════ */
.cs-content-4 .cs-content-4-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .8em;
  justify-content: center;
}
.cs-content-4 .cs-step-row {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  background: var(--cs-color-card);
  border: 1.5px solid var(--cs-color-sep);
  border-radius: 14px;
  padding: 1.2em 1.4em;
}
.cs-content-4 .cs-step-num {
  flex-shrink: 0;
  width: 2.4em; height: 2.4em;
  border-radius: 50%;
  background: var(--cs-color-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-font-body-en);
  font-weight: 800;
  font-size: var(--cs-fs-meta);
}
/* Alt 步驟用 emerald — 紫/綠/紫/綠⋯⋯ 雙色 rhythm */
.cs-content-4 .cs-step-row:nth-child(even) .cs-step-num {
  background: var(--cs-color-accent);
}
.cs-content-4 .cs-step-title {
  font-size: var(--cs-fs-aux);
  font-weight: 700;
  color: var(--cs-color-text);
  margin-bottom: .25em;
}
.cs-content-4 .cs-step-desc {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 16: QUOTE-2（引言變體 — 背景圖 + 深色遮罩）
   ════════════════════════════════════════════════════════════ */
.cs-quote-2 {
  padding: 0;
  position: relative;
  color: #fff;
}
.cs-quote-2 .cs-quote-2-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-quote-2 .cs-quote-2-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1;
}
.cs-quote-2 .cs-quote-2-content {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--cs-pad-y) var(--cs-pad-x);
  max-width: 38em;
}
.cs-quote-2 .cs-quote-2-text {
  font-family: var(--cs-font-heading);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: var(--cs-fw-heading);
  line-height: 1.4;
  letter-spacing: -.5px;
}
.cs-quote-2 .cs-quote-2-text em { color: var(--cs-color-accent); font-style: normal; }
.cs-quote-2 .cs-quote-2-attr {
  margin-top: 1.5em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  color: rgba(255,255,255,.55);
  letter-spacing: .1em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 17: QUOTE-3（引言變體 — 深色 + 漸層豎條 + 大引號）
   ════════════════════════════════════════════════════════════ */
.cs-quote-3 {
  background: var(--cs-color-text);
  color: #fff;
  position: relative;
  justify-content: center;
}
.cs-quote-3 .cs-q3-bar {
  position: absolute;
  left: 0; top: 20%;
  height: 60%; width: 5px;
  background: linear-gradient(180deg, var(--cs-color-brand), #A78BFA);
  border-radius: 0 3px 3px 0;
}
.cs-quote-3 .cs-q3-deco {
  position: absolute;
  top: .6em; right: .8em;
  font-family: var(--cs-font-display);
  font-size: 8em;
  color: rgba(255,255,255,.05);
  line-height: 1;
  pointer-events: none;
  font-style: italic;
}
.cs-quote-3 .cs-q3-body { padding-left: 1.5em; max-width: 36em; }
.cs-quote-3 .cs-q3-text {
  font-family: var(--cs-font-heading);
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: var(--cs-fw-heading);
  line-height: 1.4;
  letter-spacing: -.5px;
}
.cs-quote-3 .cs-q3-text em { color: var(--cs-color-accent); font-style: normal; }
.cs-quote-3 .cs-q3-author {
  margin-top: 1.5em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  color: rgba(255,255,255,.45);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 18: IMAGE-2（圖文變體 — 主色底 + 右大圖）
   ════════════════════════════════════════════════════════════ */
.cs-image-2 {
  background: var(--cs-color-brand);
  color: #fff;
  flex-direction: row;
  align-items: center;
  gap: 2em;
  padding-right: 0;
}
.cs-image-2 .cs-image-2-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.cs-image-2 .cs-image-2-h2 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -.6px;
  line-height: 1.15;
}
.cs-image-2 .cs-image-2-h2 em { color: var(--cs-color-accent); font-style: normal; }
.cs-image-2 .cs-image-2-p {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}
.cs-image-2 .cs-image-2-frame {
  width: 45%;
  align-self: stretch;
  border-radius: var(--cs-radius-lg) 0 0 var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: 0 0.6em 1.5em rgba(0,0,0,.18);
}
.cs-image-2 .cs-image-2-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 19: IMAGE-3（圖文變體 — 全圖背景 + 底部 caption 條）
   ════════════════════════════════════════════════════════════ */
.cs-image-3 {
  padding: 0;
  position: relative;
}
.cs-image-3 .cs-image-3-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-image-3 .cs-image-3-caption-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  padding: 1.4em 2.5em;
  z-index: 1;
}
.cs-image-3 .cs-image-3-caption {
  color: #fff;
  font-size: var(--cs-fs-body);
  font-weight: 600;
  line-height: 1.4;
}
.cs-image-3 .cs-image-3-caption em { color: var(--cs-color-brand); font-style: normal; }
.cs-image-3 .cs-image-3-sub {
  margin-top: .3em;
  font-size: var(--cs-fs-meta);
  color: rgba(255,255,255,.7);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 20: COMPARE-2（對比變體 — 表格式）
   ════════════════════════════════════════════════════════════ */
.cs-compare-2 .cs-compare-2-table {
  flex: 1;
  align-self: center;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--cs-fs-aux);
}
.cs-compare-2 .cs-compare-2-table thead th {
  background: var(--cs-color-brand);
  color: #fff;
  padding: .9em 1em;
  text-align: left;
  font-weight: 700;
  font-size: var(--cs-fs-meta);
  letter-spacing: .05em;
}
.cs-compare-2 .cs-compare-2-table thead th:first-child { border-radius: 8px 0 0 0; }
.cs-compare-2 .cs-compare-2-table thead th:last-child  { border-radius: 0 8px 0 0; }
.cs-compare-2 .cs-compare-2-table tbody td {
  padding: .9em 1em;
  border-bottom: 1px solid var(--cs-color-sep);
  color: var(--cs-color-body);
}
.cs-compare-2 .cs-compare-2-table tbody tr:last-child td { border-bottom: none; }
.cs-compare-2 .cs-compare-2-table tbody td:first-child {
  font-weight: 700;
  color: var(--cs-color-text);
}
.cs-compare-2 .cs-compare-2-table .cs-hl { color: var(--cs-color-accent); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 21: DATA-2（數據變體 — Bento grid）
   ════════════════════════════════════════════════════════════ */
.cs-data-2 .cs-bento-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: .8em;
  align-content: center;
  margin-top: 1em;
}
.cs-data-2 .cs-bento-card {
  background: linear-gradient(135deg, #fff 0%, #F8F7FF 100%);
  border: 1.5px solid var(--cs-color-brand-10);
  border-radius: var(--cs-radius-lg);
  padding: 1.2em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 .2em .5em rgba(108,92,231,.05);
}
.cs-data-2 .cs-bento-icon {
  font-size: clamp(20px, 1.8vw, 26px);
  opacity: .5;
}
.cs-data-2 .cs-bento-value {
  font-family: var(--cs-font-body-en);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: var(--cs-color-accent);
  line-height: 1;
}
.cs-data-2 .cs-bento-label {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  margin-top: .3em;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 22: CTA-2（CTA 變體 — 主色底 + 大 QR 右側）
   ════════════════════════════════════════════════════════════ */
.cs-cta-2 {
  background: var(--cs-color-brand);
  color: #fff;
  padding: 0;
  flex-direction: row;
}
.cs-cta-2 .cs-cta-2-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  padding: 4em 4em 4em 5em;
}
.cs-cta-2 .cs-cta-2-eyebrow {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.cs-cta-2 .cs-cta-2-h1 {
  font-family: var(--cs-font-heading);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.cs-cta-2 .cs-cta-2-h1 em { color: var(--cs-color-accent); font-style: normal; }
.cs-cta-2 .cs-cta-2-sub {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  max-width: 22em;
}
.cs-cta-2 .cs-cta-2-right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.12);
}
.cs-cta-2 .cs-cta-2-qr {
  width: 70%;
  aspect-ratio: 1;
  background: #fff;
  padding: 1em;
  border-radius: var(--cs-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-cta-2 .cs-cta-2-qr img { width: 100%; height: 100%; object-fit: contain; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 23: PROFILE-1（自介 — 左圖右 bio + stats）
   ════════════════════════════════════════════════════════════ */
.cs-profile-1 {
  padding: 0;
  flex-direction: row;
  background: var(--cs-color-card);
}
.cs-profile-1 .cs-p1-img {
  width: 55%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cs-profile-1 .cs-p1-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cs-profile-1 .cs-p1-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 0%, transparent 35%, var(--cs-color-card) 92%, var(--cs-color-card) 100%);
}
.cs-profile-1 .cs-p1-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3em 4em 3em 0;
  gap: .8em;
}
.cs-profile-1 .cs-p1-name {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  color: var(--cs-color-text);
}
.cs-profile-1 .cs-p1-role {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  margin-bottom: .5em;
}
.cs-profile-1 .cs-p1-bullets {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: .4em;
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-body);
  line-height: 1.5;
}
.cs-profile-1 .cs-p1-bullets li strong { color: var(--cs-color-brand); font-weight: 700; }
.cs-profile-1 .cs-p1-stats {
  display: flex;
  gap: .6em;
  margin-top: .8em;
}
.cs-profile-1 .cs-p1-stat {
  flex: 1;
  border-radius: 10px;
  padding: .8em 1em;
  border: 2px solid var(--cs-color-brand-20);
  background: var(--cs-color-brand-08);
  text-align: center;
}
/* Alt stat: 第二個 stat 用 emerald variant */
.cs-profile-1 .cs-p1-stat:nth-child(2) {
  border-color: var(--cs-color-accent-30);
  background: var(--cs-color-accent-08);
}
.cs-profile-1 .cs-p1-stat-val {
  font-size: var(--cs-fs-meta);
  font-weight: 800;
  color: var(--cs-color-text);
}
.cs-profile-1 .cs-p1-stat-label {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  margin-top: .2em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 24: SCREENSHOT-1（截圖 — 仿瀏覽器 chrome）
   ════════════════════════════════════════════════════════════ */
.cs-screenshot-1 .cs-ss-browser {
  width: 100%;
  margin: 1em 0;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow:
    0 0.25em 0.4em rgba(108,92,231,.06),
    0 0.6em 1.5em rgba(108,92,231,.12);
  border: 1.5px solid var(--cs-color-brand-10);
}
.cs-screenshot-1 .cs-ss-chrome {
  background: var(--cs-color-panel);
  padding: .7em 1em;
  display: flex;
  align-items: center;
  gap: .6em;
  border-bottom: 1px solid var(--cs-color-brand-10);
}
.cs-screenshot-1 .cs-ss-dots { display: flex; gap: .35em; }
.cs-screenshot-1 .cs-ss-dot { width: .75em; height: .75em; border-radius: 50%; }
.cs-screenshot-1 .cs-ss-dot.r { background: #FF5F56; }
.cs-screenshot-1 .cs-ss-dot.y { background: #FFBD2E; }
.cs-screenshot-1 .cs-ss-dot.g { background: #27C93F; }
.cs-screenshot-1 .cs-ss-url {
  flex: 1;
  background: var(--cs-color-card);
  border: 1px solid var(--cs-color-sep);
  border-radius: 6px;
  padding: .3em .8em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  text-align: center;
}
.cs-screenshot-1 .cs-ss-viewport {
  width: 100%;
  background: var(--cs-color-card);
}
.cs-screenshot-1 .cs-ss-viewport img { width: 100%; display: block; }
.cs-screenshot-1 .cs-ss-caption {
  text-align: center;
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  margin-top: .5em;
  position: relative;
  display: inline-block;
  align-self: center;
  padding: .3em 1em;
  border-radius: 100px;
  background: var(--cs-color-accent-08);
  color: var(--cs-color-accent-dark);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 25: FULLBLEED-1（全屏圖 — 無 padding）
   ════════════════════════════════════════════════════════════ */
.cs-fullbleed-1 {
  padding: 0;
}
.cs-fullbleed-1 img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.cs-fullbleed-1 .cs-fullbleed-caption {
  position: absolute;
  left: 2em; bottom: 2em;
  z-index: 2;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  padding: .8em 1.4em;
  border-radius: var(--cs-radius);
  color: #fff;
  font-size: var(--cs-fs-meta);
  font-weight: 600;
  border-left: 3px solid var(--cs-color-accent);
}

/* ════════════════════════════════════════════════════════════
   MODE TOGGLE BAR — 底部居中 · icon button（學雷蒙）
   ════════════════════════════════════════════════════════════ */
.cs-mode-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 6px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.cs-mode-btn {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.55);
  border-radius: 50%;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cs-mode-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-mode-btn:hover { color: #fff; background: rgba(255,255,255,.10); }
.cs-mode-btn.cs-active {
  background: var(--cs-color-brand);
  color: #fff;
}
.cs-mode-sep {
  width: 1px; height: 22px;
  background: rgba(255,255,255,.15);
  margin: 0 4px;
}
.cs-mode-counter {
  color: rgba(255,255,255,.88);
  font-family: var(--cs-font-body-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 0 12px 0 6px;
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}

/* Hide spec tag in slide / scroll / print mode (grid mode 已用 caption 取代) */
body.cs-mode-slide .cs-spec-tag,
body.cs-mode-scroll .cs-spec-tag {
  display: none !important;
}

/* ── 雙色語意 rule（雷蒙系統借鑒）─────────────────────────────
   <em>     = accent emerald  → 標題 / 引言 highlight，吸引注意
   <strong> = brand 紫        → 內文 semantic emphasis
   ──────────────────────────────────────────────────────────── */
.cs-slide em {
  color: var(--cs-color-accent);
  font-style: normal;
}
.cs-slide strong {
  color: var(--cs-color-brand);
  font-weight: 700;
}

/* Markup-driven accent override：強制 emerald */
.cs-em-accent {
  color: var(--cs-color-accent) !important;
  font-style: normal;
  font-weight: inherit;
}
/* Markup-driven brand override：強制紫 brand */
.cs-em-brand {
  color: var(--cs-color-brand) !important;
  font-style: normal;
  font-weight: inherit;
}

/* ════════════════════════════════════════════════════════════
   SCROLL MODE — body.cs-scroll-mode
   每張 slide 變垂直堆疊嘅卡片，16:9 比例
   ════════════════════════════════════════════════════════════ */
body.cs-scroll-mode {
  overflow: auto !important;
}
body.cs-scroll-mode html,
html:has(body.cs-scroll-mode) {
  overflow: auto !important;
}
body.cs-scroll-mode .cs-deck {
  height: auto !important;
  width: 100vw;
  padding: 40px 0 80px;
  background: #f0eeed;
}
body.cs-scroll-mode .cs-slides-viewport {
  overflow: visible !important;
  height: auto !important;
}
body.cs-scroll-mode .cs-slides-track {
  display: block !important;
  height: auto !important;
  transform: none !important;
}
body.cs-scroll-mode .cs-slide {
  flex: none !important;
  width: min(1280px, calc(100vw - 80px)) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 20px auto !important;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  font-size: clamp(8px, 1.2vw, 18px);
  scroll-margin-top: 60px;
}
body.cs-scroll-mode .cs-progress-bar,
body.cs-scroll-mode .cs-nav-bar {
  display: none !important;
}
body.cs-scroll-mode .cs-anim {
  opacity: 1 !important;
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════
   GRID MODE — html.cs-grid-mode (光桌)
   3 欄縮圖一覽，點擊跳轉返 slide mode
   ════════════════════════════════════════════════════════════ */
html.cs-grid-mode,
html.cs-grid-mode body {
  overflow: auto !important;
  height: auto !important;
  background: #1a1a1a !important;
}
html.cs-grid-mode .cs-progress-bar,
html.cs-grid-mode .cs-nav-bar { display: none !important; }
html.cs-grid-mode .cs-deck {
  height: auto !important;
  padding: 60px 40px;
}
html.cs-grid-mode .cs-slides-viewport {
  overflow: visible !important;
  height: auto !important;
}
html.cs-grid-mode .cs-slides-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  height: auto !important;
  width: 100% !important;
  transform: none !important;
}
html.cs-grid-mode .cs-slide {
  flex: none !important;
  position: relative !important;
  width: 1280px !important;
  height: 720px !important;
  aspect-ratio: auto !important;
  font-size: 16px !important;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  overflow: hidden !important;
  transition: outline .12s, transform .12s;
  outline: 2px solid transparent;
  /* zoom 值由 JS 計算 (cellWidth / 1280)，等比例縮細 — 字、padding、image 一齊縮 */
}
html.cs-grid-mode .cs-slide:hover {
  outline-color: var(--cs-color-brand);
  transform: scale(1.025);
  z-index: 1;
}
/* Grid mode 入面隱藏 slide 自己嘅 spec tag — 改由下方 caption 顯示 */
html.cs-grid-mode .cs-spec-tag { display: none !important; }

/* Grid cell — JS wrap each slide 入一個 cell，cell 包含 slide + caption */
html.cs-grid-mode .cs-grid-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
html.cs-grid-mode .cs-grid-cell .cs-slide {
  margin: 0 !important;
}
html.cs-grid-mode .cs-grid-caption {
  color: #fff;
  text-align: left;
  padding: 0 2px;
  line-height: 1.4;
}
html.cs-grid-mode .cs-grid-cap-name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--cs-color-brand);
  letter-spacing: .3px;
}
html.cs-grid-mode .cs-grid-cap-desc {
  display: block;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  margin-top: 3px;
}
html.cs-grid-mode .cs-grid-cap-num {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  letter-spacing: .5px;
  margin-right: 6px;
}
/* Group header (e.g. "COVER · 3 variants") 喺第一個 variant 之前 */
html.cs-grid-mode .cs-group-header {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.85);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 4px;
}
html.cs-grid-mode .cs-group-header:first-child { padding-top: 0; }
html.cs-grid-mode .cs-group-header small {
  font-weight: 500;
  color: rgba(255,255,255,.45);
  letter-spacing: 1px;
  margin-left: 10px;
  text-transform: none;
}
/* 隱藏每張 slide 下方嘅 number badge（原本由 ::after 處理）改由 caption num 顯示 */
html.cs-grid-mode .cs-slide::after { display: none; }
html.cs-grid-mode .cs-anim {
  opacity: 1 !important;
  animation: none !important;
}
html.cs-grid-mode .cs-slide::after {
  content: attr(data-slide-num);
  position: absolute;
  bottom: 6px; right: 8px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-family: var(--cs-font-body-en);
  font-weight: 700;
  background: rgba(0,0,0,.55);
  padding: 2px 8px;
  border-radius: 6px;
  z-index: 10;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* ════════════════════════════════════════════════════════════
   MOBILE — @media (max-width: 768px)
   多欄堆單欄、字級放大、左右改上下
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Mode bar — 縮細 */
  .cs-mode-bar {
    bottom: 12px;
    padding: 4px;
  }
  .cs-mode-btn {
    width: 32px; height: 32px;
  }
  .cs-mode-btn svg { width: 16px; height: 16px; }
  .cs-mode-counter {
    font-size: 11px;
    padding: 0 8px 0 4px;
    min-width: 48px;
  }

  /* Scroll mode：取消 16:9 比例 */
  body.cs-scroll-mode .cs-slide {
    aspect-ratio: auto !important;
    width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
    border-radius: 14px;
    font-size: 16px !important;
    padding: 28px 20px !important;
    min-height: 60vh;
  }

  /* Grid mode：2 欄 */
  html.cs-grid-mode .cs-slides-track {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 12px !important;
    padding: 0 12px;
  }

  /* Slide mode (default)：多欄堆單欄 */
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cover-1 .cs-cover-body,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-image-1 .cs-image-body,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-image-2,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-compare-1 .cs-compare-grid,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-content-2 .cs-content-2-cols,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-content-3 .cs-content-3-grid,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cta-1 .cs-cta-cards,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cta-2,
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-profile-1 {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 1em !important;
  }

  /* Bento grid 2 欄 */
  .cs-data-2 .cs-bento-grid { grid-template-columns: 1fr 1fr !important; }

  /* Cover-1 右側 photo 變橫向 */
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cover-1 .cs-cover-right {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin-top: 1em;
  }
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cover-1 .cs-cover-photo {
    width: 5em !important;
    height: 6em !important;
  }
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cover-1 .cs-cover-body {
    flex-direction: column !important;
    padding: 4em 2em 2em !important;
  }

  /* Profile-1 圖片上文字下 */
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-profile-1 .cs-p1-img {
    width: 100% !important;
    height: 35% !important;
  }
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-profile-1 .cs-p1-right {
    width: 100% !important;
    padding: 1em 1.5em !important;
  }

  /* Image-2 改上下 */
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-image-2 .cs-image-2-frame {
    width: 100% !important;
    height: 40% !important;
    border-radius: var(--cs-radius-lg) !important;
  }

  /* CTA-2 改上下 */
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cta-2 .cs-cta-2-left {
    padding: 2.5em 2em 1em !important;
  }
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cta-2 .cs-cta-2-right {
    width: 100% !important;
    padding: 1em !important;
  }
  body:not(.cs-scroll-mode):not(.cs-grid-mode) .cs-cta-2 .cs-cta-2-qr {
    width: 50%;
  }

  /* Spec tag 縮細 */
  .cs-spec-tag {
    font-size: 9px !important;
    padding: 3px 7px !important;
    top: 10px !important;
    left: 10px !important;
  }
  .cs-spec-tag small { font-size: 8px !important; }
}

/* ════════════════════════════════════════════════════════════
   PRINT support — 一張 slide 一頁 PDF
   ════════════════════════════════════════════════════════════ */
@page { margin: 0; size: landscape; }
@media print {
  html, body { height: auto; overflow: visible !important; background: #fff !important; margin: 0; padding: 0; }
  .cs-nav-bar, .cs-progress-bar { display: none !important; }
  .cs-deck { height: auto; overflow: visible !important; }
  .cs-slides-viewport, .cs-slides-track { display: block; overflow: visible !important; height: auto !important; }
  .cs-slide {
    page-break-after: always;
    break-after: page;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cs-slide:last-child { page-break-after: auto; break-after: auto; }
  .cs-anim { opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important; }
}