/* =============================================================================
   components.css — 元件樣式
   01–06 來自 prototypes/tem3.html：按鈕、資訊卡片、標籤與狀態、手風琴、
   輸入欄位、分段切換按鈕。
   07–09 的結構與互動邏輯來自 prototypes/tem2.html：導覽、分頁標籤、麵包屑與
   分頁控制；視覺全部改用同一組 token。
   10 為展示頁自身的外框，不屬於可複用元件。

   所有數值取自 tokens.css，本檔不寫死任何色碼、字體或字級。
   狀態表示法：真實互動狀態用 :hover / :active / :focus-visible / :disabled；
   展示頁若要並列呈現同一狀態，另以 .is-hover / .is-active / .is-focus 類別強制套用，
   兩者共用同一組宣告。
   ============================================================================= */

/* =============================================================================
   0. 基礎 Base
   全域 reset 與元素排版已拆至 design-system/base.css（只由沒有自帶 reset 的頁面
   載入，例如 index.html）。使用 Tailwind Preflight 的頁面只載 tokens.css +
   components.css，不載 base.css。
   以下 .ds- 類別不含元素選擇器，任何頁面都可安全載入。
   ============================================================================= */

/* 視覺隱藏但保留給輔助科技 */
.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 跳到主要內容 */
.ds-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-text-primary);
  color: var(--ds-color-on-dark);
}

.ds-skip-link:focus { left: var(--ds-space-sm); top: var(--ds-space-sm); }

/* --- 標題級距：與標籤層級脫鉤，讓任何標籤都能套到正確的字級
   統一帶 Heading 色（text-primary）；深色底或其他情境的頁面可再用更高特異度
   （page class）覆寫，例如 .home-hero__title { color: var(--ds-color-on-dark) }。 --- */
.ds-title-hero {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-display-hero-size);
  line-height: var(--ds-text-display-hero-line);
  font-weight: var(--ds-text-display-hero-weight);
  letter-spacing: var(--ds-tracking-hero);
}

.ds-title-lg {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-lg-size);
  line-height: var(--ds-text-headline-lg-line);
  font-weight: var(--ds-text-headline-lg-weight);
  letter-spacing: var(--ds-tracking-headline);
}

.ds-title-md {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-md-size);
  line-height: var(--ds-text-headline-md-line);
  font-weight: var(--ds-text-headline-md-weight);
  letter-spacing: var(--ds-tracking-sub);
}

.ds-title-sm {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-text-headline-sm-weight);
  letter-spacing: normal;
}

/* 主標題（h1／h2）使用 Action Ink；h3 以下與非標題標籤維持 Heading 色（text-primary）。
   :where() 讓權重與 .ds-title-* 相同，頁面 CSS 的特殊顏色（深色區塊、漸層字等）仍可覆寫。 */
:where(h1, h2):is(.ds-title-hero, .ds-title-lg, .ds-title-md, .ds-title-sm) { color: var(--ds-color-action-ink); }

/* --- 區塊眉標與導言 --- */
.ds-eyebrow {
  color: var(--ds-color-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

/* 裝飾文字放在眉標上方留白，不參與尺寸計算，避免推動既有版面。 */
.ds-eyebrow--decorated {
  position: relative;
  block-size: var(--ds-text-label-sm-line);
}

.ds-eyebrow__divider {
  display: inline-flex;
  gap: 10px;
  height: 10px;
  margin-top: calc((var(--ds-text-label-sm-line) - 10px) / 2);
  vertical-align: top;
  pointer-events: none;
}

.ds-eyebrow__divider::before,
.ds-eyebrow__divider::after {
  content: "";
  height: 10px;
  border-radius: var(--ds-radius-full);
}

.ds-eyebrow__divider::before {
  width: 10px;
  background: var(--ds-color-secondary);
}

.ds-eyebrow__divider::after {
  width: 60px;
  background: var(--ds-color-primary);
}

.ds-eyebrow__decoration {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + var(--ds-space-xxs));
  color: var(--ds-color-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
  white-space: nowrap;
  pointer-events: none;
}

.ds-eyebrow--inline {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
}

.ds-eyebrow--inline .ds-eyebrow__decoration {
  position: static;
  flex-shrink: 0;
}

.ds-eyebrow--inline .ds-eyebrow__divider {
  flex-shrink: 0;
  margin-top: 0;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ds-eyebrow__decoration {
    background-image: linear-gradient(110deg, var(--ds-color-primary), var(--ds-color-secondary));
    background-size: 20em 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* 單行版：英文｜裝飾線｜中文同一行；inline-flex 讓置中或靠左跟隨父層 text-align */
.ds-eyebrow--split {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  white-space: nowrap;
}

.ds-eyebrow--split .ds-eyebrow__decoration { position: static; }
.ds-eyebrow--split .ds-eyebrow__divider { flex-shrink: 0; margin-top: 0; }

@media (max-width: 479px) {
  .ds-eyebrow--split { gap: var(--ds-space-xs); }
  .ds-eyebrow--split .ds-eyebrow__divider::after { width: 32px; }
}

/* 深色底：眉標、英文小標與裝飾線一律改白，品牌色在深色底上對比不足 */
.ds-eyebrow--on-dark { color: var(--ds-color-on-dark-strong); }

.ds-eyebrow--on-dark .ds-eyebrow__decoration {
  background-image: none;
  color: var(--ds-color-on-dark);
}

.ds-eyebrow--on-dark .ds-eyebrow__divider::before { background: var(--ds-color-on-dark); }
.ds-eyebrow--on-dark .ds-eyebrow__divider::after { background: var(--ds-color-on-dark-strong); }

@media (forced-colors: active) {
  .ds-eyebrow__decoration {
    background: none;
    color: CanvasText;
  }
}

.ds-lead {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
}

.ds-lead--ink { color: var(--ds-color-text-primary); }

/* =============================================================================
   1. 按鈕 Buttons
   Stitch 來源：§02 Buttons & Interactive Actions
   ============================================================================= */

.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-xs);
  height: var(--ds-control-height-md);
  padding-inline: var(--ds-space-lg);
  border: 0;
  border-radius: var(--ds-radius-full);
  font-family: inherit;
  font-size: var(--ds-text-cta-size);
  line-height: var(--ds-text-cta-line);
  font-weight: var(--ds-text-cta-weight);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease),
              box-shadow var(--ds-duration-fast) var(--ds-ease),
              transform var(--ds-duration-fast) var(--ds-ease);
}

.ds-button:active,
.ds-button.is-active { transform: scale(var(--ds-scale-active)); }

/* Stitch 未定義按鈕焦點樣式；沿用其輸入欄位的 ring-2 做法補上鍵盤焦點 */
.ds-button:focus-visible,
.ds-button.is-focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ds-color-card), var(--ds-shadow-focus);
}

/* --- 主要膠囊 CTA --- */
.ds-button--primary {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: var(--ds-shadow-sm);
}
.ds-button--primary:hover,
.ds-button--primary.is-hover { background: var(--ds-color-primary-hover); }

/* --- Secondary 膠囊 CTA --- */
.ds-button--secondary {
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-secondary);
  box-shadow: var(--ds-shadow-sm);
}
.ds-button--secondary:hover,
.ds-button--secondary.is-hover { background: var(--ds-color-secondary-hover); }

/* --- Secondary 外框膠囊 --- */
.ds-button--secondary-outline {
  background: transparent;
  border: var(--ds-border-width) solid var(--ds-color-secondary);
  color: var(--ds-color-secondary);
}
.ds-button--secondary-outline:hover,
.ds-button--secondary-outline.is-hover {
  background: var(--ds-color-secondary-wash);
  color: var(--ds-color-secondary);
}
.ds-button--secondary-outline:disabled,
.ds-button--secondary-outline.is-disabled {
  background: transparent;
  border-color: var(--ds-color-border);
  color: var(--ds-color-text-disabled);
}

/* --- Action Ink 膠囊 --- */
.ds-button--ink {
  background: var(--ds-color-text-primary);
  color: var(--ds-color-card);
  box-shadow: var(--ds-shadow-sm);
}
.ds-button--ink:hover,
.ds-button--ink.is-hover { background: var(--ds-color-action-ink); }

/* --- 外框膠囊（DESIGN.md Outline Pill：透明底 + Action Ink 文字與邊框） --- */
.ds-button--outline {
  background: transparent;
  border: var(--ds-border-width) solid var(--ds-color-action-ink);
  color: var(--ds-color-action-ink);
}

.ds-button--outline:hover,
.ds-button--outline.is-hover {
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-action-ink);
}

.ds-button--outline:disabled,
.ds-button--outline.is-disabled {
  background: transparent;
  border-color: var(--ds-color-border);
  color: var(--ds-color-text-disabled);
}

/* 深色表面上的外框膠囊（頁尾等反白區塊） */
.ds-button--outline-on-dark {
  background: transparent;
  border: var(--ds-border-width) solid var(--ds-color-on-dark);
  color: var(--ds-color-on-dark);
}

.ds-button--outline-on-dark:hover,
.ds-button--outline-on-dark.is-hover {
  background: var(--ds-color-on-dark-hairline);
  color: var(--ds-color-on-dark);
}

/* --- 白底表面膠囊（Stitch 標示為 Outline Pill，實際無邊框，靠陰影分層） --- */
.ds-button--surface {
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  box-shadow: var(--ds-shadow-sm);
}
.ds-button--surface:hover,
.ds-button--surface.is-hover { background: var(--ds-color-surface-inner); }

.ds-button--surface-quiet {
  background: var(--ds-color-card);
  color: var(--ds-color-text-secondary);
  box-shadow: var(--ds-shadow-sm);
}
.ds-button--surface-quiet:hover,
.ds-button--surface-quiet.is-hover { color: var(--ds-color-text-primary); }

/* --- 淺藍次要（唯一使用 12px 圓角的按鈕） --- */
.ds-button--subtle {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
  font-weight: var(--ds-weight-semibold);
}
.ds-button--subtle:hover,
.ds-button--subtle.is-hover { background: var(--ds-color-surface-muted); }

/* --- Tertiary Cyan 強調 --- */
.ds-button--cyan {
  background: linear-gradient(to right, var(--ds-color-cyan), var(--ds-color-primary));
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-cyan);
}
.ds-button--cyan:hover,
.ds-button--cyan.is-hover { box-shadow: var(--ds-shadow-cyan-hover); }

.ds-button--cyan-soft {
  padding-inline: var(--ds-space-md);
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary-hover);
  border: var(--ds-border-width) solid var(--ds-color-primary-hover);
  font-weight: var(--ds-weight-semibold);
}
.ds-button--cyan-soft:hover,
.ds-button--cyan-soft.is-hover {
  background: var(--ds-color-primary-30);
  color: var(--ds-color-primary-dark);
}

/* --- 工具列與圖示按鈕 --- */
.ds-button--tool {
  height: var(--ds-control-height-icon);
  padding-inline: var(--ds-space-md);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  gap: var(--ds-space-xxs);
}
.ds-button--tool:hover,
.ds-button--tool.is-hover { background: var(--ds-color-surface-muted); }
.ds-button__icon--accent { color: var(--ds-color-primary); }

.ds-button--icon {
  width: var(--ds-control-height-md);
  height: var(--ds-control-height-md);
  padding: 0;
}
.ds-button--icon:active,
.ds-button--icon.is-active { transform: scale(var(--ds-scale-active-icon)); }

.ds-button--icon-quiet {
  width: var(--ds-control-height-icon);
  height: var(--ds-control-height-icon);
  padding: 0;
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-secondary);
}
.ds-button--icon-quiet:hover,
.ds-button--icon-quiet.is-hover {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}

/* --- 尺寸 --- */
.ds-button--sm {
  height: var(--ds-control-height-sm);
  padding-inline: var(--ds-space-md);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
}

/* 頁尾等密集區塊的小型膠囊（caption 字級） */
.ds-button--xs {
  height: var(--ds-control-height-sm);
  padding-inline: var(--ds-space-md);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-button--lg {
  height: var(--ds-control-height-lg);
  padding-inline: var(--ds-space-xl);
  font-size: var(--ds-text-body-lg-size);
  box-shadow: var(--ds-shadow-md);
}

/* --- 狀態：載入中與停用 --- */
.ds-button--loading {
  background: var(--ds-color-primary-80);
  color: var(--ds-color-on-primary);
  cursor: wait;
}

.ds-button:disabled,
.ds-button.is-disabled {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ds-button--loading:disabled,
.ds-button--loading.is-disabled {
  background: var(--ds-color-primary-80);
  color: var(--ds-color-on-primary);
  cursor: wait;
}

.ds-spinner {
  width: 16px;
  height: 16px;
  animation: ds-spin 1s linear infinite;
}
.ds-spinner__track { opacity: .25; }
.ds-spinner__head { opacity: .75; }

@keyframes ds-spin { to { transform: rotate(360deg); } }

/* --- 文字連結：卡片與段落內的次要動作 --- */
.ds-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  min-height: var(--ds-control-height-md);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  font-weight: var(--ds-weight-semibold);
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

/* 全站連結不使用底線；以顏色變化與箭頭往前位移提示可點擊 */
.ds-text-link:hover,
.ds-text-link.is-hover { color: var(--ds-color-secondary-hover); }

.ds-text-link .ds-icon { transition: transform var(--ds-duration-slow) var(--ds-ease); }

.ds-text-link:hover .ds-icon,
.ds-text-link:focus-visible .ds-icon,
.ds-text-link.is-hover .ds-icon { transform: translateX(4px); }

/* 返回連結：箭頭在文字前方，改為往後位移 */
.ds-text-link--back:hover .ds-icon,
.ds-text-link--back:focus-visible .ds-icon,
.ds-text-link--back.is-hover .ds-icon { transform: translateX(-4px); }

.ds-text-link:focus-visible,
.ds-text-link.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-sm);
}

.ds-text-link.is-disabled {
  color: var(--ds-color-text-disabled);
  pointer-events: none;
}

/* =============================================================================
   2. 資訊卡片 Cards
   Stitch 來源：§03 Elevated Card Architecture
   ============================================================================= */

.ds-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ds-color-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow var(--ds-duration-slow) var(--ds-ease),
              transform var(--ds-duration-slow) var(--ds-ease);
}

.ds-card:hover,
.ds-card.is-hover { box-shadow: var(--ds-shadow-md); }

.ds-card--padded { padding: var(--ds-space-lg); }

/* 被選取的方案卡：Stitch 的 ring-2（外框環，不佔版面寬度） */
.ds-card--selected {
  position: relative;
  box-shadow: var(--ds-shadow-sm), 0 0 0 2px var(--ds-color-primary);
}
.ds-card--selected:hover,
.ds-card--selected.is-hover {
  box-shadow: var(--ds-shadow-md), 0 0 0 2px var(--ds-color-primary);
}

.ds-card--media {
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-color-hairline);
  box-shadow: var(--ds-shadow-md);
}

.ds-card--disabled,
.ds-card.is-disabled {
  opacity: .6;
  box-shadow: var(--ds-shadow-sm);
  cursor: not-allowed;
}

.ds-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-sm);
  gap: var(--ds-space-xs);
}

.ds-card__eyebrow {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ds-card__title {
  margin-bottom: var(--ds-space-xxs);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-md-size);
  line-height: var(--ds-text-headline-md-line);
  font-weight: var(--ds-text-headline-md-weight);
  letter-spacing: var(--ds-tracking-sub);
}

.ds-card__title--sm {
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-text-headline-sm-weight);
  letter-spacing: -.01em;
}

.ds-card__text {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-card__text--lead {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
}

.ds-card__footer { margin-top: var(--ds-space-md); }

.ds-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-success);
  flex-shrink: 0;
}

.ds-card__ribbon {
  position: absolute;
  top: -12px;
  right: var(--ds-space-md);
  padding: 2px var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
}

.ds-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  flex-shrink: 0;
}

.ds-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-xxs);
  margin-block: var(--ds-space-md);
}

.ds-card__price-value {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-md-size);
  line-height: var(--ds-text-headline-md-line);
  font-weight: var(--ds-weight-bold);
}

.ds-card__price-unit {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
}

.ds-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
  margin: 0;
  padding: var(--ds-space-xs) 0 0;
  list-style: none;
}

.ds-feature-list__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-feature-list__icon { color: currentColor; }

/* 說明型：標題 + 敘述，供行銷版面的特點列表使用 */
.ds-feature-list--detailed {
  display: grid;
  gap: var(--ds-space-md);
  padding-top: 0;
}

.ds-feature-list--detailed .ds-feature-list__item { display: block; }

.ds-feature-list__title {
  margin-bottom: var(--ds-space-xxs);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.ds-feature-list__text {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

/* 檢核型：icon-chip 跟標題同一排水平對齊（.ds-feature-list__head），
   敘述另起一行在下方，用於左右式特點介紹的核取清單版面。
   .ds-feature-list--detailed 的 display:block 已經涵蓋 item 本身，這裡不重複設。 */
.ds-feature-list__head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
}

.ds-feature-list__head .ds-feature-list__title { margin-bottom: 0; }

/* 敘述文字左邊留白對齊上面標題（不是對齊 icon-chip）：
   32px 是 .ds-feature-list__icon-chip 的寬度，--ds-space-sm 是跟標題之間的
   gap，兩個加起來正好是標題文字左緣離容器左邊的距離 */
.ds-feature-list--checklist .ds-feature-list__text {
  margin-top: var(--ds-space-xxs);
  padding-left: calc(32px + var(--ds-space-sm));
}

.ds-feature-list__icon-chip {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-md);
}

/* 純 CSS 繪製勾號，不依賴圖示字型；顏色跟隨標題（Secondary） */
.ds-feature-list__icon-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 12px;
  height: 7px;
  margin: -4px 0 0 -6px;
  border-left: var(--ds-border-width-emphasis) solid var(--ds-color-secondary);
  border-bottom: var(--ds-border-width-emphasis) solid var(--ds-color-secondary);
  transform: rotate(-45deg);
}

/* 圓點清單：核心功能等條列 */
.ds-bullet-list {
  display: grid;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.ds-bullet-list__item {
  position: relative;
  padding-left: var(--ds-space-md);
}

.ds-bullet-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
}

/* --- 迷你長條圖（Card A） --- */
.ds-sparkline { margin-top: var(--ds-space-md); }

.ds-sparkline__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 56px;
  padding-inline: var(--ds-space-xxs);
}

.ds-sparkline__bar {
  width: 100%;
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
  background: var(--ds-color-primary-wash);
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-sparkline__bar:nth-child(1) { height: 35%; }
.ds-sparkline__bar:nth-child(2) { height: 48%; }
.ds-sparkline__bar:nth-child(3) { height: 40%; }
.ds-sparkline__bar:nth-child(4) { height: 65%; }
.ds-sparkline__bar:nth-child(5) { height: 58%; }
.ds-sparkline__bar:nth-child(6) { height: 82%; }
.ds-sparkline__bar:nth-child(7) {
  height: 100%;
  background: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-sm);
}

.ds-card:hover .ds-sparkline__bar:nth-child(1),
.ds-card.is-hover .ds-sparkline__bar:nth-child(1) { background: var(--ds-color-primary-30); }
.ds-card:hover .ds-sparkline__bar:nth-child(2),
.ds-card:hover .ds-sparkline__bar:nth-child(3),
.ds-card.is-hover .ds-sparkline__bar:nth-child(2),
.ds-card.is-hover .ds-sparkline__bar:nth-child(3) { background: var(--ds-color-primary-40); }
.ds-card:hover .ds-sparkline__bar:nth-child(4),
.ds-card:hover .ds-sparkline__bar:nth-child(5),
.ds-card.is-hover .ds-sparkline__bar:nth-child(4),
.ds-card.is-hover .ds-sparkline__bar:nth-child(5) { background: var(--ds-color-primary-60); }
.ds-card:hover .ds-sparkline__bar:nth-child(6),
.ds-card.is-hover .ds-sparkline__bar:nth-child(6) { background: var(--ds-color-primary-80); }

.ds-sparkline__axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-space-xs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-sparkline__axis-current {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

/* --- 進度條（Card B） --- */
.ds-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
}

.ds-progress__label { color: var(--ds-color-text-secondary); }
.ds-progress__value {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-bold);
}

.ds-progress__track {
  height: 8px;
  margin-bottom: var(--ds-space-md);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  overflow: hidden;
}

.ds-progress__bar {
  height: 100%;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
}

.ds-progress__bar--74 { width: 74%; }

/* --- 卡片內的滿版按鈕 --- */
.ds-card__action {
  width: 100%;
  height: var(--ds-control-height-icon);
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-xxs);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}
.ds-card__action:hover,
.ds-card__action.is-hover {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}
.ds-card__action--primary {
  margin-top: var(--ds-space-sm);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card__action--primary:hover,
.ds-card__action--primary.is-hover {
  background: var(--ds-color-primary-hover);
  color: var(--ds-color-on-primary);
}
.ds-card__action:disabled {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

/* --- 圖像卡（Card D） --- */
.ds-card__media {
  position: relative;
  height: 128px;
  background: var(--ds-color-surface-muted);
  overflow: hidden;
}

/* Stitch 使用外部 CDN 圖片；此處以同色系漸層佔位，維持相同尺寸與比例 */
.ds-card__media-fill {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 140% at 18% 12%, var(--ds-color-accent-55) 0%, var(--ds-color-accent-0) 55%),
    radial-gradient(110% 130% at 82% 78%, var(--ds-color-primary-55) 0%, var(--ds-color-primary-0) 60%),
    linear-gradient(135deg, var(--ds-color-card) 0%, var(--ds-color-primary-wash) 55%, var(--ds-color-accent-container) 100%);
  transition: transform var(--ds-duration-media) var(--ds-ease);
}

.ds-card--media:hover,
.ds-card--media.is-hover {
  border: var(--ds-border-width-emphasis) solid var(--ds-color-primary-55);
  box-shadow: var(--ds-shadow-cyan);
}

.ds-card--media:hover .ds-card__media-fill,
.ds-card--media.is-hover .ds-card__media-fill { transform: scale(1.05); }

.ds-card__media-badge {
  position: absolute;
  top: var(--ds-space-xs);
  left: var(--ds-space-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  padding: 2px var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-dark);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-sm);
}

/* 分類輔助色：深色底統一，文字色按分類區分；用加淺版確保深色底上清楚可讀 */
.ds-card__media-badge--coral { color: var(--ds-color-coral-light); }
.ds-card__media-badge--teal { color: var(--ds-color-teal-light); }
.ds-card__media-badge--violet { color: var(--ds-color-violet-light); }

.ds-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ds-space-lg);
}

.ds-card__kicker {
  display: block;
  margin-bottom: var(--ds-space-xxs);
  color: var(--ds-color-accent-ink);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ds-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-space-md);
  padding-top: var(--ds-space-xxs);
  gap: var(--ds-space-xs);
}

.ds-card__model {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-color-accent-ink);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-semibold);
}

.ds-card__model-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-accent);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-sm);
}

.ds-card__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
}
.ds-card__link:hover,
.ds-card__link.is-hover { color: var(--ds-color-secondary-hover); }
.ds-card__link:focus-visible,
.ds-card__link.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-sm);
}

/* =============================================================================
   3. 標籤與狀態 Badges, Tags & Chips
   Stitch 來源：§05 Badges, Tags & Dynamic Chips
   ============================================================================= */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ds-space-xxs) var(--ds-space-sm);
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
}

.ds-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.ds-badge__dot--ping { animation: ds-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }

@keyframes ds-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.ds-badge--cyan {
  background: var(--ds-color-accent-container);
  border-color: var(--ds-color-accent-border);
  color: var(--ds-color-accent-ink);
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-sm);
}
.ds-badge--cyan .ds-badge__dot { background: var(--ds-color-accent); }

.ds-badge--cyan-solid {
  gap: var(--ds-space-xxs);
  padding-inline: 10px;
  background: linear-gradient(to right, var(--ds-color-accent), var(--ds-color-accent-deep));
  color: var(--ds-color-accent-container);
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-sm);
}

.ds-badge--success {
  background: var(--ds-color-success-soft);
  color: var(--ds-color-success);
}

.ds-badge--primary {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}

.ds-badge--warning {
  background: var(--ds-color-warning-soft);
  color: var(--ds-color-warning);
}

.ds-badge--neutral {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-secondary);
}
.ds-badge--neutral .ds-badge__dot { background: var(--ds-color-text-muted); }

.ds-badge--error {
  background: var(--ds-color-error-container);
  color: var(--ds-color-on-error-container);
}
.ds-badge--error .ds-badge__dot { background: var(--ds-color-error); }

.ds-badge--metric {
  gap: var(--ds-space-xxs);
  padding: 2px var(--ds-space-xs);
  background: var(--ds-color-success-soft);
  color: var(--ds-color-success);
  font-weight: var(--ds-weight-bold);
}

/* --- 分類標籤 --- */
.ds-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-xxs) var(--ds-space-md);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
}

.ds-tag--primary {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
  font-weight: var(--ds-weight-semibold);
}

.ds-tag--neutral {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-primary);
}

/* 疊在圖片或淺色區塊上的標籤：實色白底加細框，確保可讀 */
.ds-tag--overlay {
  background: var(--ds-color-card);
  border: var(--ds-border-width) solid var(--ds-color-border);
  color: var(--ds-color-text-primary);
}

.ds-tag--disabled,
.ds-tag.is-disabled {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

/* --- 可互動的篩選晶片 --- */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--ds-space-sm);
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-medium);
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}
.ds-chip:hover,
.ds-chip.is-hover { background: var(--ds-color-surface-muted); }

.ds-chip:focus-visible,
.ds-chip.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-chip--selected {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: var(--ds-shadow-sm);
}
.ds-chip--selected:hover,
.ds-chip--selected.is-hover { background: var(--ds-color-primary-hover); }

.ds-chip--add {
  background: var(--ds-color-card);
  color: var(--ds-color-primary);
  font-weight: var(--ds-weight-semibold);
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
}
.ds-chip--add:hover,
.ds-chip--add.is-hover { background: var(--ds-color-surface-inner); }

.ds-chip--disabled,
.ds-chip.is-disabled {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.ds-chip__close {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ds-chip__close:hover { opacity: .75; }
.ds-chip__close:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-full);
}
.ds-chip--default .ds-chip__close { color: var(--ds-color-text-secondary); }
.ds-chip--default .ds-chip__close:hover { color: var(--ds-color-text-primary); opacity: 1; }
.ds-chip:disabled .ds-chip__close,
.ds-chip.is-disabled .ds-chip__close { cursor: not-allowed; }

/* --- 計數與旗標 --- */
.ds-counter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ds-counter__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 2px 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-accent);
  color: var(--ds-color-on-accent);
  font-size: var(--ds-text-caption-size);
  line-height: 1;
  font-weight: var(--ds-weight-bold);
}

.ds-flag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ds-space-xs);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ds-flag--beta {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}

.ds-flag--live {
  background: var(--ds-color-accent-container);
  color: var(--ds-color-accent-ink);
}

.ds-flag--pro {
  background: var(--ds-color-text-primary);
  color: var(--ds-color-card);
}

.ds-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ds-space-xxs) var(--ds-space-sm);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
}

.ds-count-pill__value {
  padding: 1px 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-strong);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-bold);
}

/* =============================================================================
   4. 手風琴 Accordion
   Stitch 來源：§04 Collapsible Accordions
   ============================================================================= */

.ds-accordion {
  background: var(--ds-color-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}

.ds-accordion__item {
  padding: var(--ds-space-lg);
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-accordion__item + .ds-accordion__item { border-top: var(--ds-border-hairline); }

.ds-accordion__item:hover,
.ds-accordion__item.is-hover { background: var(--ds-color-surface-inner-soft); }

.ds-accordion__item--open,
.ds-accordion__item--open:hover { background: var(--ds-color-card); }

.ds-accordion__item--highlight,
.ds-accordion__item--highlight:hover {
  background: var(--ds-color-secondary-wash-30);
  border-left: var(--ds-border-width-accent) solid var(--ds-color-secondary);
  padding-left: calc(var(--ds-space-lg) - var(--ds-border-width-accent));
}

.ds-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* 正式頁面（products/*.php）用原生 <summary> 當觸發元素；這兩條只對
     <summary> 有意義，<button> 版本（展示頁）會安全忽略 */
  list-style: none;
}

.ds-accordion__trigger::-webkit-details-marker { display: none; }

.ds-accordion__trigger:focus-visible,
.ds-accordion__trigger.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-md);
}

.ds-accordion__lead {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  min-width: 0;
}

.ds-accordion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-height-icon);
  height: var(--ds-control-height-icon);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-secondary);
  flex-shrink: 0;
}

.ds-accordion__item--open .ds-accordion__icon,
/* 原生 <details open> 版本（products/*.php）：同一套展開態，鍵在 [open] 屬性 */
.ds-accordion__item[open] .ds-accordion__icon {
  background: var(--ds-color-secondary-wash);
  color: var(--ds-color-secondary);
}

.ds-accordion__item--highlight .ds-accordion__icon {
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-secondary);
}

.ds-accordion__heading {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  flex-wrap: wrap;
}

.ds-accordion__title {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.ds-accordion__item--highlight .ds-accordion__title {
  color: var(--ds-color-secondary);
  font-weight: var(--ds-weight-bold);
}

.ds-accordion__subtitle {
  margin-top: 2px;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-accordion__item--highlight .ds-accordion__subtitle { color: var(--ds-color-secondary-80); }

.ds-accordion__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-height-icon-sm);
  height: var(--ds-control-height-icon-sm);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-secondary);
  flex-shrink: 0;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-accordion__chevron .ds-icon { transition: transform var(--ds-duration-slow) var(--ds-ease); }

.ds-accordion__trigger:hover .ds-accordion__chevron,
.ds-accordion__item.is-hover .ds-accordion__chevron,
.ds-accordion__item[open] .ds-accordion__chevron {
  background: var(--ds-color-secondary-wash);
  color: var(--ds-color-secondary);
}

.ds-accordion__item[open] .ds-accordion__chevron .ds-icon { transform: rotate(180deg); }

.ds-accordion__trigger[aria-expanded="true"] .ds-accordion__chevron { color: var(--ds-color-secondary); }
.ds-accordion__trigger[aria-expanded="true"] .ds-accordion__chevron .ds-icon { transform: rotate(-180deg); }

.ds-accordion__item--highlight .ds-accordion__chevron {
  background: var(--ds-color-secondary-wash);
  color: var(--ds-color-secondary);
}

.ds-accordion__panel {
  margin-top: var(--ds-space-md);
  padding-left: 56px;
  padding-right: var(--ds-space-md);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-md-size);
  line-height: 1.625;
}

.ds-accordion__panel[hidden] { display: none; }

.ds-accordion__panel p { margin: 0 0 var(--ds-space-sm); }

.ds-accordion__facts {
  display: grid;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-sm);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-inner);
}

.ds-accordion__fact-label {
  display: block;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ds-accordion__fact-value {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.ds-accordion__item--disabled,
.ds-accordion__item.is-disabled { background: var(--ds-color-card); }
.ds-accordion__item--disabled .ds-accordion__trigger { cursor: not-allowed; }
.ds-accordion__item--disabled .ds-accordion__lead,
.ds-accordion__item--disabled .ds-accordion__chevron { opacity: .4; }

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

/* Stitch 的 56px 內容縮排是桌機值；窄螢幕取消縮排以保留可讀行寬 */
@media (max-width: 767px) {
  .ds-accordion__panel {
    padding-left: 0;
    padding-right: 0;
  }
}

/* =============================================================================
   5. 輸入欄位 Inputs
   Stitch 來源：§06 Inputs, Controls & Segmented Tabs（左欄）
   ============================================================================= */

.ds-field { display: block; }

.ds-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-xs);
  margin-bottom: 6px;
}

.ds-field__label {
  display: block;
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.ds-field__optional {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-field__input {
  width: 100%;
  height: var(--ds-field-height);
  padding-inline: var(--ds-space-md);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
  outline: none;
  /* 拿掉瀏覽器對 type="search" 等欄位的原生外觀；不重置的話 WebKit 會在
     focus／點擊時用原生搜尋欄樣式重繪，把自訂 padding 內的 placeholder 擠不見 */
  appearance: none;
  -webkit-appearance: none;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              box-shadow var(--ds-duration-fast) var(--ds-ease);
}

/* WebKit 的搜尋欄原生裝飾（含內建放大鏡與清除鈕）一併關閉，改用元件自己的
   .ds-field__icon／清除按鈕，避免它們的保留間距跟自訂內距打架 */
.ds-field__input[type="search"]::-webkit-search-decoration,
.ds-field__input[type="search"]::-webkit-search-cancel-button,
.ds-field__input[type="search"]::-webkit-search-results-button,
.ds-field__input[type="search"]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
}

.ds-field__input::placeholder { color: var(--ds-color-text-secondary); }

.ds-field__input:focus,
.ds-field__input.is-focus {
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-focus);
}

.ds-field__input:disabled,
.ds-field__input.is-disabled {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

.ds-field__input:disabled::placeholder { color: var(--ds-color-text-disabled); }

/* 搜尋欄：左側圖示與右側快捷鍵提示 */
.ds-field__input--search { padding-left: 44px; padding-right: 56px; }

.ds-field__icon {
  position: absolute;
  left: 14px;
  color: var(--ds-color-text-secondary);
  pointer-events: none;
}

.ds-field__shortcut {
  position: absolute;
  right: var(--ds-space-sm);
  padding: 2px 6px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-card);
  color: var(--ds-color-text-muted);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  box-shadow: var(--ds-shadow-sm);
  pointer-events: none;
}

.ds-field__hint {
  display: block;
  margin-top: var(--ds-space-xxs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

/* --- 多行輸入 --- */
.ds-field__input--textarea {
  height: auto;
  min-height: 144px;
  padding-block: var(--ds-space-sm);
  resize: vertical;
}

/* --- 錯誤狀態 --- */
.ds-field__input[aria-invalid="true"],
.ds-field__input.is-invalid {
  background: var(--ds-color-card);
  box-shadow: 0 0 0 var(--ds-border-width-emphasis) var(--ds-color-error);
}

.ds-field__error {
  display: block;
  margin-top: var(--ds-space-xxs);
  color: var(--ds-color-error);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-field__error:empty { display: none; }

/* --- 核取方塊（同意條款等） --- */
.ds-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  cursor: pointer;
}

.ds-checkbox__input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--ds-color-primary);
}

.ds-checkbox__input:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-sm);
}

.ds-checkbox a { color: var(--ds-color-primary); font-weight: var(--ds-weight-semibold); }
.ds-checkbox a:hover { color: var(--ds-color-primary-hover); }

.ds-checkbox.is-disabled {
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

/* --- 欄位排列 --- */
.ds-form-row {
  display: grid;
  gap: var(--ds-space-md);
}

.ds-form-row--split { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- 表單狀態訊息 --- */
.ds-status {
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  text-align: center;
}

.ds-status--success {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}

.ds-status--error {
  background: var(--ds-color-error-container);
  color: var(--ds-color-on-error-container);
}

/* 浮動標籤 */
.ds-field--floating .ds-field__control { display: block; }

.ds-field--floating .ds-field__input {
  height: var(--ds-field-height-floating);
  padding-top: var(--ds-space-md);
}

.ds-field--floating .ds-field__input::placeholder { color: transparent; }

.ds-field__floating-label {
  position: absolute;
  left: var(--ds-space-md);
  top: 6px;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  transition: top var(--ds-duration-fast) var(--ds-ease),
              font-size var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
  pointer-events: none;
}

.ds-field__input:placeholder-shown + .ds-field__floating-label {
  top: var(--ds-space-sm);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
}

.ds-field__input:focus + .ds-field__floating-label {
  top: 6px;
  color: var(--ds-color-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

/* =============================================================================
   6. 分段切換按鈕 Segmented control
   Stitch 來源：§06（右欄）Datarize Segmented Tab Bar
   ============================================================================= */

.ds-segmented {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--ds-segmented-height);
  padding: 6px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-inner);
  box-shadow: var(--ds-shadow-inner);
  /* Stitch 未定義窄螢幕行為；標籤放不下時整列橫向捲動，不壓縮或截斷分頁 */
  overflow-x: auto;
  scrollbar-width: none;
}

.ds-segmented::-webkit-scrollbar { display: none; }

.ds-segmented__item {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ds-segmented-item-height);
  padding-inline: var(--ds-space-xs);
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-color-text-secondary);
  font-family: inherit;
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-weight-medium);
  min-width: max-content;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease),
              box-shadow var(--ds-duration-fast) var(--ds-ease);
}

.ds-segmented__item:hover,
.ds-segmented__item.is-hover { color: var(--ds-color-text-primary); }

.ds-segmented__item[aria-selected="true"],
.ds-segmented__item.is-selected {
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
  box-shadow: var(--ds-shadow-sm);
}

.ds-segmented__item:active,
.ds-segmented__item.is-active { transform: scale(var(--ds-scale-active)); }

.ds-segmented__item:focus-visible,
.ds-segmented__item.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-segmented__item:disabled,
.ds-segmented__item.is-disabled {
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* --- 共用圖示 --- */
.ds-icon {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  flex-shrink: 0;
}

.ds-icon--sm { font-size: 16px; }
.ds-icon--md { font-size: 18px; }
.ds-icon--lg { font-size: 22px; }
.ds-icon--xs { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .ds-text-link .ds-icon { transition: none; }
  .ds-badge__dot--ping,
  .ds-spinner { animation: none; }

  .ds-button,
  .ds-card,
  .ds-chip,
  .ds-segmented__item,
  .ds-field__input,
  .ds-accordion__item { transition: none; }
}

/* =============================================================================
   導覽與佈局元件（結構取自 prototypes/tem2.html 第四份文件）
   只沿用 tem2 的 HTML 結構、資訊層級、互動邏輯與元件狀態；字體、字級、色彩、
   圓角、間距、邊框與陰影全部改用上方同一組 token，與 01–06 屬同一視覺系統。
   ============================================================================= */

/* --- 主要面板：層級明確的容器（陰影來自 --ds-shadow-panel） --- */
.ds-panel {
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-panel);
}

.ds-panel--padded { padding: var(--ds-space-xl); }

.ds-nav-scope {
  color: var(--ds-color-text-primary);
}

/* =============================================================================
   7. 導覽列 Navigation bar（SPEC-NAV-01）
   ============================================================================= */

.ds-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-lg);
  height: var(--ds-navbar-height);
  padding-inline: var(--ds-space-lg);
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}

.ds-navbar__start {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xl);
  flex-shrink: 0;
  min-width: 0;
}

.ds-navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
}

.ds-navbar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-height-icon-sm);
  height: var(--ds-control-height-icon-sm);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: var(--ds-shadow-sm);
  flex-shrink: 0;
}

.ds-navbar__identity {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.ds-navbar__name {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-cta-size);
  line-height: var(--ds-text-cta-line);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-sub);
}

.ds-navbar__tagline {
  color: var(--ds-color-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

.ds-navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
}

.ds-navbar__link,
.ds-navbar__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-color-text-secondary);
  font-family: inherit;
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-text-nav-label-weight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-navbar__link:hover,
.ds-navbar__link.is-hover,
.ds-navbar__trigger:hover,
.ds-navbar__trigger.is-hover {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-primary);
}

.ds-navbar__link[aria-current="page"],
.ds-navbar__link.is-current {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
  font-weight: var(--ds-weight-semibold);
}

.ds-navbar__link:focus-visible,
.ds-navbar__trigger:focus-visible,
.ds-navbar__link.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

/* tem2 未定義導覽連結的停用樣式；此處沿用其分頁的 40% 不透明度處理 */
.ds-navbar__link.is-disabled,
.ds-navbar__trigger:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- 純文字導覽連結 variant（行銷導覽：無底、無內距、ink 文字） ---
   index.php 與 docs/plans/news.php 共用。hover → muted slate + 加粗；
   active（aria-current="page"）→ primary-80。
   原 .ds-navbar__link 的膠囊底樣式保留給其他情境使用。 */
.ds-navbar__link--plain {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-color-text-primary);
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.ds-navbar__link--plain:hover,
.ds-navbar__link--plain.is-hover {
  background: transparent;
  color: var(--ds-color-text-muted);
  font-weight: var(--ds-weight-semibold);
}

.ds-navbar__link--plain[aria-current="page"],
.ds-navbar__link--plain.is-current {
  background: transparent;
  color: var(--ds-color-primary-80);
  font-weight: var(--ds-weight-semibold);
}

/* 選單列靠右對齊（右側 cluster 內） */
.ds-navbar__menu--end { margin-left: auto; }

/* 行銷導覽的較寬項目間距（24px） */
.ds-navbar__menu--wide { gap: var(--ds-space-lg); }

/* SPEC-NAV 響應式（單一斷點 768px）：
   < 768px → 桌機選單列收合，改由頁面的漢堡選單（[data-nav-toggle]）承接
   ≥ 768px → 顯示完整桌機導覽
   漢堡按鈕的顯示/隱藏由各頁排版 CSS 負責（markup 不同）。 */
@media (max-width: 767px) {
  .ds-navbar__menu { display: none; }
}

.ds-navbar__end {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  flex-shrink: 0;
}

/* 快速搜尋 */
.ds-navbar__search {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-navbar__search-icon {
  position: absolute;
  left: var(--ds-space-sm);
  color: var(--ds-color-text-muted);
  pointer-events: none;
}

.ds-navbar__search-input {
  width: var(--ds-field-search-width);
  padding: var(--ds-space-xxs) var(--ds-space-md) var(--ds-space-xxs) 36px;
  background: var(--ds-color-surface-inner);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  outline: none;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              box-shadow var(--ds-duration-fast) var(--ds-ease);
}

.ds-navbar__search-input::placeholder { color: var(--ds-color-text-muted); }

.ds-navbar__search-input:focus,
.ds-navbar__search-input.is-focus {
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-focus);
}

.ds-navbar__shortcut {
  position: absolute;
  right: var(--ds-space-xs);
  padding: 2px 6px;
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  box-shadow: var(--ds-shadow-sm);
  pointer-events: none;
}

/* 圖示動作 */
.ds-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
}

.ds-navbar__icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-xs);
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-color-text-secondary);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-navbar__icon-button:hover,
.ds-navbar__icon-button.is-hover {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-primary);
}

.ds-navbar__icon-button:focus-visible,
.ds-navbar__icon-button.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-navbar__icon-button:disabled,
.ds-navbar__icon-button.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ds-navbar__alert-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-error);
}

.ds-navbar__locale {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  padding: var(--ds-space-xxs) var(--ds-space-xs);
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-color-text-secondary);
  font-family: inherit;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-medium);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-navbar__locale:hover,
.ds-navbar__locale.is-hover {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-primary);
}

/* 身分區 */
.ds-navbar__auth {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-xxs) var(--ds-space-xxs) var(--ds-space-xxs) var(--ds-space-sm);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface-inner);
}

.ds-navbar__admin {
  padding: var(--ds-space-xxs) var(--ds-space-sm);
  border: 0;
  background: transparent;
  color: var(--ds-color-primary);
  font-family: inherit;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
}

.ds-navbar__admin:hover,
.ds-navbar__admin.is-hover { color: var(--ds-color-secondary-hover); }

.ds-navbar__profile {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  padding: 2px;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-navbar__profile:hover,
.ds-navbar__profile.is-hover { background: var(--ds-color-surface-muted); }

.ds-navbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-avatar-size);
  height: var(--ds-avatar-size);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-bold);
  flex-shrink: 0;
}

.ds-navbar__caret {
  color: var(--ds-color-text-muted);
  transition: transform var(--ds-duration-fast) var(--ds-ease);
}

/* --- 選單面板：產品下拉與手機主選單共用 --- */
.ds-menu {
  display: flex;
  flex-direction: column;
  padding: var(--ds-space-sm);
  background: var(--ds-color-card);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-panel);
}

.ds-menu__group {
  padding: var(--ds-space-xs) var(--ds-space-sm) var(--ds-space-xxs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.ds-menu__link {
  display: block;
  padding: 10px var(--ds-space-sm);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-text-nav-label-weight);
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-menu__link:hover,
.ds-menu__link.is-hover {
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-primary);
}

.ds-menu__link[aria-current="page"],
.ds-menu__link.is-current {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
  font-weight: var(--ds-weight-semibold);
}

.ds-menu__link:focus-visible,
.ds-menu__link.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-menu__link.is-disabled {
  color: var(--ds-color-text-disabled);
  pointer-events: none;
}

/* 雙欄選單：產品下拉在桌機以兩欄排列（index.php / news.php 共用）。
   每個直欄為一個子元素（.ds-menu__group + 連結清單）。 */
.ds-menu--columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--ds-space-md);
}

/* 現況版面群組標題採較淺的 slate；元件庫最接近的 token 為 text-muted */
.ds-menu--columns .ds-menu__group { color: var(--ds-color-text-muted); }

/* --- 手機浮動底部導覽列 --- */
.ds-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
  max-width: var(--ds-bottom-nav-width);
  height: var(--ds-navbar-height);
  padding-inline: var(--ds-space-md);
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-full);
  box-shadow: var(--ds-shadow-panel);
}

.ds-bottom-nav__item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-color-text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.ds-bottom-nav__item:hover,
.ds-bottom-nav__item.is-hover { color: var(--ds-color-text-primary); }

.ds-bottom-nav__item[aria-current="page"],
.ds-bottom-nav__item.is-current { color: var(--ds-color-primary); }

.ds-bottom-nav__item[aria-current="page"] .ds-icon,
.ds-bottom-nav__item.is-current .ds-icon { font-variation-settings: "FILL" 1; }

.ds-bottom-nav__item[aria-current="page"] .ds-bottom-nav__label,
.ds-bottom-nav__item.is-current .ds-bottom-nav__label { font-weight: var(--ds-weight-semibold); }

.ds-bottom-nav__item:focus-visible,
.ds-bottom-nav__item.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-md);
}

.ds-bottom-nav__item:disabled,
.ds-bottom-nav__item.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ds-bottom-nav__label {
  font-size: var(--ds-text-caption-size);
  line-height: 1.25;
  font-weight: var(--ds-weight-medium);
}

.ds-bottom-nav__dot {
  position: absolute;
  top: 0;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
}

.ds-bottom-nav__fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-height-md);
  height: var(--ds-control-height-md);
  margin-top: -20px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: var(--ds-shadow-md);
  cursor: pointer;
  transition: transform var(--ds-duration-fast) var(--ds-ease),
              background-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-bottom-nav__fab:hover,
.ds-bottom-nav__fab.is-hover { background: var(--ds-color-primary-hover); }

.ds-bottom-nav__fab:active,
.ds-bottom-nav__fab.is-active { transform: scale(var(--ds-scale-active)); }

/* =============================================================================
   8. 分頁標籤 Tabs（Capsule／Underline，依 docs/plans/Tabs-rules.md 移除 Box Tabs）
   ============================================================================= */

/* --- A. 膠囊分頁 Capsule Tabs（tem2 .datarize-tab-group / .datarize-tab-btn） --- */
.ds-pill-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  padding: var(--ds-space-xxs);
  /* 用最深一階的內層表面色，與頁面底色（--ds-color-page）明確區隔 */
  background: var(--ds-color-surface-strong);
  border-radius: var(--ds-radius-full);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.ds-pill-tabs::-webkit-scrollbar { display: none; }

.ds-pill-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ds-segmented-item-height);
  padding-inline: var(--ds-space-md);
  border: 0;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-color-text-secondary);
  font-family: inherit;
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease),
              box-shadow var(--ds-duration-fast) var(--ds-ease),
              transform var(--ds-duration-fast) var(--ds-ease);
}

.ds-pill-tabs__tab:hover,
.ds-pill-tabs__tab.is-hover { color: var(--ds-color-text-primary); }

.ds-pill-tabs__tab[aria-selected="true"],
.ds-pill-tabs__tab.is-selected {
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-secondary);
  font-weight: var(--ds-weight-semibold);
  box-shadow: var(--ds-shadow-sm);
}

.ds-pill-tabs__tab:focus-visible,
.ds-pill-tabs__tab.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-pill-tabs__tab:active,
.ds-pill-tabs__tab.is-active { transform: scale(var(--ds-scale-active)); }

.ds-pill-tabs__tab:disabled,
.ds-pill-tabs__tab.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ds-pill-tabs__badge {
  padding: 1px 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-semibold);
}

.ds-pill-tabs__badge--neutral {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-secondary);
  font-weight: var(--ds-weight-medium);
}

.ds-pill-tabs__badge--success {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-success);
  font-weight: var(--ds-weight-medium);
}

.ds-pill-tabs__badge--live {
  padding: 2px var(--ds-space-xs);
  background: var(--ds-color-accent);
  color: var(--ds-color-accent-ink);
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-cyan);
}

/* --- B. 底線分頁 Underline Tabs --- */
.ds-line-tabs {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ds-color-surface-muted);
  /* tem2 未定義窄螢幕行為；標籤放不下時整列橫向捲動，不壓縮文字 */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.ds-line-tabs::-webkit-scrollbar { display: none; }

.ds-line-tabs__tab {
  padding: 0 0 var(--ds-space-xs);
  border: 0;
  background: transparent;
  color: var(--ds-color-text-secondary);
  font-family: inherit;
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-text-nav-label-weight);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ds-duration-fast) var(--ds-ease),
              transform var(--ds-duration-fast) var(--ds-ease);
}

.ds-line-tabs__tab:hover,
.ds-line-tabs__tab.is-hover { color: var(--ds-color-text-primary); }

.ds-line-tabs__tab[aria-selected="true"],
.ds-line-tabs__tab.is-selected {
  color: var(--ds-color-secondary);
  font-weight: var(--ds-weight-semibold);
  box-shadow: var(--ds-shadow-underline);
}

.ds-line-tabs__tab:focus-visible,
.ds-line-tabs__tab.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-sm);
}

.ds-line-tabs__tab:active,
.ds-line-tabs__tab.is-active { transform: scale(var(--ds-scale-active)); }

.ds-line-tabs__tab:disabled,
.ds-line-tabs__tab.is-disabled {
  color: var(--ds-color-text-muted);
  opacity: .4;
  cursor: not-allowed;
}

/* 直向排列：每一項自成一列，選取項以左側 2px Secondary 線標示 */
.ds-line-tabs--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 0;
  border-bottom: 0;
  overflow-x: visible;
}

.ds-line-tabs--stacked .ds-line-tabs__tab {
  padding: var(--ds-space-md) 0;
  border-bottom: var(--ds-border-width) solid var(--ds-color-hairline);
  text-align: left;
  white-space: normal;
}

.ds-line-tabs--stacked .ds-line-tabs__tab[aria-selected="true"],
.ds-line-tabs--stacked .ds-line-tabs__tab.is-selected {
  border-bottom-color: var(--ds-color-secondary);
  border-bottom-width: var(--ds-border-width-emphasis);
  box-shadow: none;
}

/* 滿版分格 Tabs：產品內頁「四大功能／系統優勢」這類左文右圖功能展示專用，
   非 DESIGN.md 既有的 Capsule／Underline 兩款（那兩款是一般內容切換用），
   選取中的分頁整格填滿 Secondary、底部加對話泡泡尖角指向下方展開的面板。
   欄數用 --ds-feature-tabs-count 控制（預設 4）；互動邏輯沿用
   js/product-detail.js 的 data-feature-tab／aria-selected，這裡只是視覺。
   原本在 aais-home.css／aais-home-line.css／aais-crm.css 各自重複一份，
   抽成這裡共用，之後要用同樣樣式的產品頁分頁，直接套用這組 class 即可。 */
.ds-feature-tabs {
  display: grid;
  grid-template-columns: repeat(var(--ds-feature-tabs-count, 4), minmax(0, 1fr));
  background: var(--ds-color-surface-muted);
}

.ds-feature-tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--ds-space-lg) var(--ds-space-md);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-weight-medium);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-feature-tabs__tab:hover,
.ds-feature-tabs__tab.is-hover {
  background: color-mix(in srgb, var(--ds-color-secondary) 12%, transparent);
}

.ds-feature-tabs__tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ds-color-secondary);
}

.ds-feature-tabs__tab:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
.ds-feature-tabs__tab:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }

.ds-feature-tabs__tab[aria-selected="true"] {
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-secondary);
  font-weight: var(--ds-weight-semibold);
}

.ds-feature-tabs__tab[aria-selected="true"]:hover { background: var(--ds-color-secondary); }

/* 選取中分頁下緣的對話泡泡尖角，指向下方展開的面板內容 */
.ds-feature-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--ds-color-secondary);
}

/* 平板以下改為單列橫向捲動：每格依文字寬度排開、不換行也不縮字，
   捲動容器會裁掉下緣尖角，改以選取格的填色標示 */
@media (max-width: 1023px) {
  .ds-feature-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-radius: var(--ds-radius-lg);
  }

  .ds-feature-tabs::-webkit-scrollbar { display: none; }

  .ds-feature-tabs__tab {
    flex: 1 0 auto;
    padding: var(--ds-space-md) var(--ds-space-lg);
    scroll-snap-align: start;
  }

  .ds-feature-tabs__tab[aria-selected="true"]::after { display: none; }
}

/* =============================================================================
   9. 麵包屑與分頁控制 Breadcrumbs & Pagination
   ============================================================================= */

.ds-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  flex-wrap: wrap;
}

.ds-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  color: var(--ds-color-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
}

.ds-breadcrumb__link:hover,
.ds-breadcrumb__link.is-hover { color: var(--ds-color-text-primary); }

.ds-breadcrumb__link:focus-visible,
.ds-breadcrumb__link.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-sm);
}

.ds-breadcrumb__separator {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
}

.ds-breadcrumb__current {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-bold);
}

/* 晶片式麵包屑 */
.ds-breadcrumb__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  padding: var(--ds-space-xxs) var(--ds-space-sm);
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-full);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
  box-shadow: var(--ds-shadow-sm);
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.ds-breadcrumb__chip:hover,
.ds-breadcrumb__chip.is-hover { color: var(--ds-color-primary); }

.ds-breadcrumb__chip-icon { color: var(--ds-color-primary); }

.ds-breadcrumb__chip--current {
  gap: 6px;
  background: var(--ds-color-primary);
  border-color: transparent;
  color: var(--ds-color-on-primary);
  box-shadow: 0 0 0 2px var(--ds-color-accent-50), var(--ds-shadow-cyan);
}

.ds-breadcrumb__telemetry {
  padding: 1px var(--ds-space-xxs);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-accent);
  color: var(--ds-color-accent-ink);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
}

.ds-breadcrumb__path {
  color: var(--ds-color-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
}

/* --- 分頁控制 --- */
.ds-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-lg);
}

.ds-pagination__info {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-pagination__count {
  color: var(--ds-color-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--ds-weight-semibold);
}

.ds-pagination__per-page {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
}

.ds-pagination__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ds-pagination__select {
  appearance: none;
  padding: var(--ds-space-xxs) 28px var(--ds-space-xxs) var(--ds-space-sm);
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  box-shadow: var(--ds-shadow-sm);
  outline: none;
  cursor: pointer;
}

.ds-pagination__select:focus,
.ds-pagination__select.is-focus { box-shadow: var(--ds-shadow-focus); }

.ds-pagination__select-caret {
  position: absolute;
  right: 6px;
  color: var(--ds-color-text-muted);
  pointer-events: none;
}

.ds-pagination__stepper {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  flex-wrap: wrap;
  justify-content: center;
}

.ds-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-height-sm);
  height: var(--ds-control-height-sm);
  padding: 0;
  background: var(--ds-color-surface-strong);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-pagination__page:hover,
.ds-pagination__page.is-hover { background: var(--ds-color-surface-muted); }

.ds-pagination__page--step { color: var(--ds-color-text-secondary); }

.ds-pagination__page--step:hover,
.ds-pagination__page--step.is-hover {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-primary);
}

.ds-pagination__page[aria-current="page"],
.ds-pagination__page.is-current {
  background: var(--ds-color-card);
  border: 1.5px solid var(--ds-color-secondary);
  color: var(--ds-color-secondary);
  font-weight: var(--ds-weight-semibold);
  box-shadow: none;
}

.ds-pagination__page:focus-visible,
.ds-pagination__page.is-focus {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-pagination__page:disabled,
.ds-pagination__page.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ds-pagination__ellipsis {
  padding-inline: var(--ds-space-xxs);
  color: var(--ds-color-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
}

.ds-pagination__jump {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.ds-pagination__jump-input {
  width: var(--ds-control-height-md);
  height: var(--ds-control-height-sm);
  padding: 0;
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  text-align: center;
  box-shadow: var(--ds-shadow-sm);
  outline: none;
}

.ds-pagination__jump-input:focus,
.ds-pagination__jump-input.is-focus { box-shadow: var(--ds-shadow-focus); }

.ds-pagination__jump-button {
  height: var(--ds-control-height-sm);
  padding-inline: var(--ds-space-sm);
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-primary);
  font-family: inherit;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-medium);
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-pagination__jump-button:hover,
.ds-pagination__jump-button.is-hover {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-primary);
}

@media (min-width: 1024px) {
  .ds-pagination { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-navbar__link,
  .ds-navbar__icon-button,
  .ds-pill-tabs__tab,
  .ds-line-tabs__tab,
  .ds-pagination__page,
  .ds-bottom-nav__item,
  .ds-bottom-nav__fab { transition: none; }
}

/* =============================================================================
   10. 流程 Process Steps
   水平步驟流程：連接線 + 節點，只適用於內容本身就是真實步驟／流程的情境
   （不是硬加編號裝飾）。連接線的填色進度由 --ds-process-progress（0–1）
   自訂屬性控制，交給頁面 JS 在捲動時更新；此屬性未設定時預設視為 1（完整
   已完成狀態），確保沒有 JavaScript／GSAP 或使用者選擇減少動態時，流程依然
   完整可讀，不會卡在「半完成」的灰階畫面。
   ============================================================================= */

.ds-process {
  --ds-process-count: 4;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ds-process-count), minmax(0, 1fr));
  align-items: start;
  /* 放在別的 grid 容器裡當 item 時，grid item 預設 min-width:auto 不會縮，
     內容較長時會撐爆外層版面（造成整頁橫向捲動）；歸零讓它能正常縮放 */
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 軌道寬度＝容器寬度扣掉左右各半欄（欄寬 = 100% / count），左右兩端精準對齊
   第一顆與最後一顆節點的圓心。::after 不能同時設 left + right + width——
   絕對定位元素三者並存時 width 會贏、right 失效，此時 width:100% 是量整個
   容器寬，會讓填色線超出最後一個節點；改成 left + width（不設 right）両個
   偽元素都用同一顆「軌道寬度」計算，填色只是再乘上 progress，就不會超界。 */
.ds-process::before,
.ds-process::after {
  content: "";
  position: absolute;
  /* 22px＝節點（--ds-control-height-md，44px）垂直中心，讓橫線精準穿過圓心 */
  top: 22px;
  left: calc(50% / var(--ds-process-count));
  height: 2px;
}

.ds-process::before {
  width: calc(100% - (100% / var(--ds-process-count)));
  background: var(--ds-color-border);
}

/* 填色進度線：捲動時疊加青色光暈，讀起來像一道正在延伸的光 */
.ds-process::after {
  width: calc((100% - (100% / var(--ds-process-count))) * var(--ds-process-progress, 1));
  background: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-cyan);
  transform-origin: left center;
}

.ds-process__item {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--ds-space-sm);
  text-align: center;
}

.ds-process__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-height-md);
  height: var(--ds-control-height-md);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--ds-duration-slow) var(--ds-ease),
              color var(--ds-duration-slow) var(--ds-ease);
}

.ds-process__label {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  transition: color var(--ds-duration-slow) var(--ds-ease);
}

/* 「已點亮」狀態：JS 在捲動填線經過該節點時加上 .is-lit；
   沒有 JS 時所有節點都不會有這個 class，改由下面的 fallback 規則統一顯示完成態 */
.ds-process__item.is-lit .ds-process__node {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: var(--ds-shadow-cyan);
}

.ds-process__item.is-lit .ds-process__label { color: var(--ds-color-text-primary); }

/* Fallback：沒有 JS 幫節點逐一加上 .is-lit 時，全部節點直接顯示完成態，
   跟 --ds-process-progress 預設 1（連接線滿版）維持同一套「預設已完成」邏輯 */
.ds-process:not(:has(.is-lit)) .ds-process__node {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: var(--ds-shadow-cyan);
}

.ds-process:not(:has(.is-lit)) .ds-process__label { color: var(--ds-color-text-primary); }

@media (prefers-reduced-motion: reduce) {
  .ds-process__node,
  .ds-process__label { transition: none; }
}

/* =============================================================================
   11. 影片燈箱 Video Lightbox
   點擊帶 [data-video-trigger] 的卡片／連結，在置中燈箱播放完整比例影片
   （js/video-reel.js 掛鉤 [data-video-lightbox] 與 [data-video-trigger]）。
   橫式、直式影片共用同一套樣式：面板不預設固定比例，開啟時由 JS 依該支影片的
   實際寬高算出像素尺寸（寬高比不同時都能在可視範圍內完整顯示，不裁切、不
   變形），比 CSS aspect-ratio 搭配雙重 auto 尺寸更可預期，詳見 video-reel.js
   的 sizePanel()。沒有 JavaScript 時，帶 [data-video-trigger] 的連結直接開啟
   影片檔本身，燈箱整組不會出現，不需要額外的無 JS 版型。
   ============================================================================= */
.video-reel__play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-full);
  background: color-mix(in srgb, var(--ds-color-on-dark) 92%, transparent);
  color: var(--ds-color-text-primary);
  font-size: 22px;
  transition: transform var(--ds-duration-fast) var(--ds-ease);
}

body.video-lightbox-open { overflow: hidden; }

.video-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--ds-space-lg); }
.video-lightbox[hidden] { display: none; }

.video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, .82);
}

/* 寬高由 JS 在開啟與視窗縮放時寫入 inline style（見 video-reel.js 的
   sizePanel）；這裡只負責外觀，不預設尺寸，避免跟 JS 算出的像素值打架 */
.video-lightbox__panel {
  position: relative;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--ds-shadow-panel);
}

.video-lightbox__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-lightbox__close {
  position: absolute;
  top: var(--ds-space-sm);
  right: var(--ds-space-sm);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: color-mix(in srgb, #000 55%, transparent);
  color: var(--ds-color-on-dark);
  font-size: 22px;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.video-lightbox__close:hover { background: color-mix(in srgb, #000 75%, transparent); }

.video-lightbox__close:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

/* =============================================================================
   12. 展示頁外框 Showcase chrome
   本節只負責展示頁自身的骨架、標本框與說明文字，不屬於可複用元件；
   正式頁面只需要上方 01–11 的 .ds-* 與影片燈箱元件。
   ============================================================================= */

.showcase-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 10px var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-text-primary);
  color: var(--ds-color-card);
  text-decoration: none;
}
.showcase-skip:focus { left: var(--ds-space-sm); top: var(--ds-space-sm); }

.showcase-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--ds-container-padding-mobile);
}

/* ---------- 頁首 ---------- */
.showcase-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ds-color-card);
  backdrop-filter: blur(12px);
  box-shadow: var(--ds-shadow-ambient);
}

.showcase-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  min-height: 64px;
  padding-block: var(--ds-space-sm);
  flex-wrap: wrap;
}

.showcase-header__brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  min-width: 0;
}

.showcase-header__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  flex-shrink: 0;
}

.showcase-header__name {
  display: block;
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-sm-size);
  line-height: 1.1;
  font-weight: var(--ds-text-headline-sm-weight);
  letter-spacing: -.01em;
}

.showcase-header__sub {
  display: block;
  margin-top: 2px;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.showcase-header__meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-secondary);
}

/* ---------- 頁面主體 ---------- */
.showcase-main { padding-block: var(--ds-space-xl) var(--ds-space-3xl); }

.showcase-intro {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--ds-space-2xl);
  padding: var(--ds-space-xl);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-sm);
}

.showcase-intro__glow {
  position: absolute;
  top: -96px;
  right: -96px;
  width: 384px;
  height: 384px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-wash);
  filter: blur(64px);
  pointer-events: none;
}

.showcase-intro__content { position: relative; z-index: 1; max-width: 760px; }

.showcase-intro__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-bottom: var(--ds-space-md);
  padding: var(--ds-space-xxs) var(--ds-space-sm);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.showcase-intro__title {
  margin-bottom: var(--ds-space-sm);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-lg-size);
  line-height: var(--ds-text-headline-lg-line);
  font-weight: var(--ds-text-headline-lg-weight);
  letter-spacing: var(--ds-tracking-headline);
}

.showcase-intro__text {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
}

.showcase-intro__nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-xl);
}

.showcase-intro__nav-label {
  margin-right: var(--ds-space-xxs);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.showcase-intro__link {
  padding: var(--ds-space-xxs) var(--ds-space-md);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  text-decoration: none;
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}
.showcase-intro__link:hover { background: var(--ds-color-surface-muted); }

/* ---------- 區塊 ---------- */
.showcase-section { margin-bottom: var(--ds-space-2xl); }

.showcase-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-md);
  margin-bottom: var(--ds-space-md);
  flex-wrap: wrap;
}

.showcase-section__heading {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
}

.showcase-section__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  flex-shrink: 0;
}

.showcase-section__dot--cyan { background: var(--ds-color-accent); }

.showcase-section__title {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-md-size);
  line-height: var(--ds-text-headline-md-line);
  font-weight: var(--ds-text-headline-md-weight);
  letter-spacing: var(--ds-tracking-sub);
}

.showcase-section__note {
  margin-top: var(--ds-space-xxs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.showcase-section__source {
  padding: var(--ds-space-xxs) var(--ds-space-xs);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface-strong);
  color: var(--ds-color-text-secondary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  /* 標籤過長時換行，避免窄螢幕或放大檢視被撐開 */
  overflow-wrap: anywhere;
}

.showcase-subsection {
  margin-top: var(--ds-space-lg);
  margin-bottom: var(--ds-space-xs);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-bold);
}

/* ---------- 標本 ---------- */
.specimen-grid {
  display: grid;
  gap: var(--ds-space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.specimen-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.specimen-grid--single { grid-template-columns: minmax(0, 1fr); }

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

.specimen {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-sm);
}

/* 卡片標本本身已是白底，改用頁面底色避免白底疊白底 */
.specimen--plain {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.specimen__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-xs);
  flex-wrap: wrap;
}

.specimen__name {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-bold);
}

.specimen__state {
  padding: 1px var(--ds-space-xs);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-secondary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.specimen__state--forced {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}

.specimen__note {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.specimen__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-page);
}

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

.specimen__stage--tight { padding: var(--ds-space-sm); }

/* ---------- 差異表 ---------- */
.showcase-table-wrap {
  overflow-x: auto;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-sm);
}

.showcase-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
}

.showcase-table th,
.showcase-table td {
  padding: var(--ds-space-sm) var(--ds-space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--ds-border-hairline);
}

.showcase-table th {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.showcase-table td:first-child {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

.showcase-table tr:last-child td { border-bottom: 0; }

.showcase-main code,
.showcase-footer code,
.showcase-intro code {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
}

.showcase-table__adopted { color: var(--ds-color-primary); font-weight: var(--ds-weight-semibold); }

.showcase-note-list {
  display: grid;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-md);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-label-sm-size);
  line-height: 1.6;
}

.showcase-note-list li { padding-left: var(--ds-space-md); position: relative; }

.showcase-note-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
}

/* ---------- 頁尾 ---------- */
.showcase-footer {
  padding-block: var(--ds-space-lg);
  border-top: var(--ds-border-hairline);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

@media (min-width: 768px) {
  .showcase-container { padding-inline: var(--ds-container-padding-desktop); }
  .showcase-main { padding-block: var(--ds-space-2xl) var(--ds-space-3xl); }
  .showcase-intro { padding: var(--ds-space-2xl); }
}

/* ---------- 單一狀態標本 ---------- */
.state-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.state-item--stretch { align-self: stretch; width: 100%; }

.state-item__label {
  color: var(--ds-color-text-secondary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.state-item__label--forced { color: var(--ds-color-primary); }

/* ---------- 導覽元件的展示容器 ---------- */
/* 導覽標本以卡片內層底色呈現，與分段切換群組同一階 */
.specimen__stage--pale { background: var(--ds-color-surface-inner); }

.specimen__stage--scroll {
  display: block;
  overflow-x: auto;
}

.specimen__stage--scroll > * { min-width: max-content; }

.specimen__stage--dark {
  background: var(--ds-color-surface-inner);
  border: 1px solid var(--ds-color-hairline);
}

.specimen__media-frame { width: 200px; flex-shrink: 0; }

/* ---------- Design Token 視覺化 ---------- */
.token-swatch-grid {
  display: grid;
  gap: var(--ds-space-sm);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.token-swatch {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  min-width: 0;
}

.token-swatch__chip {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-md);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--ds-color-hairline);
}

.token-swatch__meta { display: flex; flex-direction: column; min-width: 0; }

.token-swatch__name {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  overflow-wrap: anywhere;
}

.token-swatch__value {
  color: var(--ds-color-text-secondary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.token-swatch__chip--primary { background: var(--ds-color-primary); }
.token-swatch__chip--primary-hover { background: var(--ds-color-primary-hover); }
.token-swatch__chip--primary-wash { background: var(--ds-color-primary-wash); }
.token-swatch__chip--secondary { background: var(--ds-color-secondary); }
.token-swatch__chip--secondary-hover { background: var(--ds-color-secondary-hover); }
.token-swatch__chip--secondary-wash { background: var(--ds-color-secondary-wash); }
.token-swatch__chip--cyan { background: var(--ds-color-accent); }
.token-swatch__chip--cyan-deep { background: var(--ds-color-accent-deep); }
.token-swatch__chip--cyan-container { background: var(--ds-color-accent-container); }
.token-swatch__chip--cyan-border { background: var(--ds-color-accent-border); }
.token-swatch__chip--cyan-ink { background: var(--ds-color-accent-ink); }
.token-swatch__chip--page { background: var(--ds-color-page); }
.token-swatch__chip--card { background: var(--ds-color-card); }
.token-swatch__chip--surface-inner { background: var(--ds-color-surface-inner); }
.token-swatch__chip--surface-muted { background: var(--ds-color-surface-muted); }
.token-swatch__chip--surface-strong { background: var(--ds-color-surface-strong); }
.token-swatch__chip--text-primary { background: var(--ds-color-text-primary); }
.token-swatch__chip--action-ink { background: var(--ds-color-action-ink); }
.token-swatch__chip--text-secondary { background: var(--ds-color-text-secondary); }
.token-swatch__chip--text-muted { background: var(--ds-color-text-muted); }
.token-swatch__chip--text-disabled { background: var(--ds-color-text-disabled); }
.token-swatch__chip--hairline { background: var(--ds-color-hairline); }
.token-swatch__chip--border { background: var(--ds-color-border); }
.token-swatch__chip--surface-dark { background: var(--ds-color-surface-dark); }
.token-swatch__chip--on-dark { background: var(--ds-color-on-dark); }
.token-swatch__chip--success { background: var(--ds-color-success); }
.token-swatch__chip--warning { background: var(--ds-color-warning); }
.token-swatch__chip--error { background: var(--ds-color-error); }

/* 分類輔助色只作深底文字色，色票以深底＋文字示意，不直接填色 */
.token-swatch__chip--ink-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-surface-dark);
  font-size: var(--ds-text-label-sm-size);
  font-weight: var(--ds-weight-bold);
}

.token-swatch__chip--ink-demo.token-swatch__chip--coral { color: var(--ds-color-coral-light); }
.token-swatch__chip--ink-demo.token-swatch__chip--teal { color: var(--ds-color-teal-light); }
.token-swatch__chip--ink-demo.token-swatch__chip--violet { color: var(--ds-color-violet-light); }

.token-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-md);
  padding-block: var(--ds-space-sm);
  border-bottom: var(--ds-border-hairline);
}

.token-type-row:last-child { border-bottom: 0; }

.token-type-row__meta {
  display: flex;
  flex-direction: column;
  width: 132px;
  flex-shrink: 0;
}

.token-type-row__name {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-bold);
}

.token-type-row__spec {
  color: var(--ds-color-text-secondary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.token-type-row__sample {
  margin: 0;
  min-width: 0;
  color: var(--ds-color-text-primary);
  overflow-wrap: anywhere;
}

.token-type-row__sample--hero { font-size: var(--ds-text-display-hero-size); line-height: var(--ds-text-display-hero-line); font-weight: var(--ds-text-display-hero-weight); letter-spacing: var(--ds-tracking-hero); }
.token-type-row__sample--headline-lg { font-size: var(--ds-text-headline-lg-size); line-height: var(--ds-text-headline-lg-line); font-weight: var(--ds-text-headline-lg-weight); letter-spacing: var(--ds-tracking-headline); }
.token-type-row__sample--headline-md { font-size: var(--ds-text-headline-md-size); line-height: var(--ds-text-headline-md-line); font-weight: var(--ds-text-headline-md-weight); letter-spacing: var(--ds-tracking-sub); }
.token-type-row__sample--headline-sm { font-size: var(--ds-text-headline-sm-size); line-height: var(--ds-text-headline-sm-line); font-weight: var(--ds-text-headline-sm-weight); }
.token-type-row__sample--body-lg { font-size: var(--ds-text-body-lg-size); line-height: var(--ds-text-body-lg-line); font-weight: var(--ds-text-body-lg-weight); }
.token-type-row__sample--body-md { font-size: var(--ds-text-body-md-size); line-height: var(--ds-text-body-md-line); font-weight: var(--ds-text-body-md-weight); }
.token-type-row__sample--body-sm { font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-line); font-weight: var(--ds-text-body-sm-weight); }
.token-type-row__sample--nav { font-size: var(--ds-text-nav-label-size); line-height: var(--ds-text-nav-label-line); font-weight: var(--ds-text-nav-label-weight); }
.token-type-row__sample--cta { font-size: var(--ds-text-cta-size); line-height: var(--ds-text-cta-line); font-weight: var(--ds-text-cta-weight); }
.token-type-row__sample--label-sm { font-size: var(--ds-text-label-sm-size); line-height: var(--ds-text-label-sm-line); font-weight: var(--ds-text-label-sm-weight); }
.token-type-row__sample--caption { font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-line); font-weight: var(--ds-text-caption-weight); }

.token-scale-row { display: flex; align-items: center; gap: var(--ds-space-md); }

.token-scale-row__meta {
  display: flex;
  gap: var(--ds-space-xs);
  width: 112px;
  flex-shrink: 0;
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
}

.token-scale-row__meta span:last-child { color: var(--ds-color-text-secondary); }

.token-scale-row__bar { height: 12px; border-radius: var(--ds-radius-sm); background: var(--ds-color-primary); }

.token-scale-row__bar--xxs { width: var(--ds-space-xxs); }
.token-scale-row__bar--xs { width: var(--ds-space-xs); }
.token-scale-row__bar--sm { width: var(--ds-space-sm); }
.token-scale-row__bar--md { width: var(--ds-space-md); }
.token-scale-row__bar--lg { width: var(--ds-space-lg); }
.token-scale-row__bar--xl { width: var(--ds-space-xl); }
.token-scale-row__bar--2xl { width: var(--ds-space-2xl); }
.token-scale-row__bar--3xl { width: var(--ds-space-3xl); }
.token-scale-row__bar--4xl { width: var(--ds-space-4xl); }
.token-scale-row__bar--5xl { width: var(--ds-space-5xl); }

.token-radius-row { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-xs); }

.token-radius-box {
  width: 64px;
  height: 64px;
  background: var(--ds-color-primary-wash);
  box-shadow: inset 0 0 0 1px var(--ds-color-primary-30);
}

.token-radius-box--sm { border-radius: var(--ds-radius-sm); }
.token-radius-box--md { border-radius: var(--ds-radius-md); }
.token-radius-box--lg { border-radius: var(--ds-radius-lg); }
.token-radius-box--full { border-radius: var(--ds-radius-full); }

.token-shadow-row { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-xs); }

.token-shadow-box { width: 72px; height: 72px; border-radius: var(--ds-radius-md); background: var(--ds-color-card); }

.token-shadow-box--sm { box-shadow: var(--ds-shadow-sm); }
.token-shadow-box--md { box-shadow: var(--ds-shadow-md); }
.token-shadow-box--inner { box-shadow: var(--ds-shadow-inner); }
.token-shadow-box--panel { box-shadow: var(--ds-shadow-panel); }
.token-shadow-box--focus { box-shadow: var(--ds-shadow-focus); }
.token-shadow-box--underline { box-shadow: var(--ds-shadow-underline); }
.token-shadow-box--cyan { box-shadow: var(--ds-shadow-cyan); }

.token-radius-row__name,
.token-shadow-row__name {
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}