/* Vinci LnT 共用元件（設計憲法第 13 節）
 * 只可用設計變數（tokens.css），不可寫色值：npm run check:colors 會檢查本檔為零。
 * 在 app.css 之後載入；舊類別名（.btn、.card、.tag 等）在這裏按新規格定義一次。
 * 元件示範頁：/dev/components（只限老師和職員）。 */

/* ---------- 圖示（第 10 節） ---------- */
.icon { flex-shrink: 0; vertical-align: -0.2em; stroke-width: var(--icon-stroke); }
.icon-inline { width: var(--icon-size-inline); height: var(--icon-size-inline); stroke-width: var(--icon-stroke-inline); }
.icon-nav { width: var(--icon-size-nav); height: var(--icon-size-nav); stroke-width: var(--icon-stroke-nav); }
/* 選中時圖示內填淡靛藍（第 10.2 節） */
.is-selected > .icon, [aria-current="page"] > .icon { fill: var(--color-accent-tint); color: var(--color-accent-text); }

/* 圖示方塊：科目色淡底配同色線條；圓角 = 邊長 × 0.31（第 9.2 節） */
.icon-tile { width: var(--icon-tile-size); height: var(--icon-tile-size); border-radius: var(--icon-tile-radius); display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--tile-bg, var(--subject-other-bg)), var(--tile-bg2, var(--subject-other-bg2))); color: var(--tile-icon, var(--subject-other-icon)); }
.icon-tile > .icon { width: 50%; height: 50%; }
.subject-chinese   { --tile-bg: var(--subject-chinese-bg);   --tile-bg2: var(--subject-chinese-bg2);   --tile-icon: var(--subject-chinese-icon);   --subject-text: var(--subject-chinese-text);   --subject-bar: var(--subject-chinese-bar); }
.subject-english   { --tile-bg: var(--subject-english-bg);   --tile-bg2: var(--subject-english-bg2);   --tile-icon: var(--subject-english-icon);   --subject-text: var(--subject-english-text);   --subject-bar: var(--subject-english-bar); }
.subject-maths     { --tile-bg: var(--subject-maths-bg);     --tile-bg2: var(--subject-maths-bg2);     --tile-icon: var(--subject-maths-icon);     --subject-text: var(--subject-maths-text);     --subject-bar: var(--subject-maths-bar); }
.subject-science   { --tile-bg: var(--subject-science-bg);   --tile-bg2: var(--subject-science-bg2);   --tile-icon: var(--subject-science-icon);   --subject-text: var(--subject-science-text);   --subject-bar: var(--subject-science-bar); }
.subject-putonghua { --tile-bg: var(--subject-putonghua-bg); --tile-bg2: var(--subject-putonghua-bg2); --tile-icon: var(--subject-putonghua-icon); --subject-text: var(--subject-putonghua-text); --subject-bar: var(--subject-putonghua-bar); }
.subject-coding    { --tile-bg: var(--subject-coding-bg);    --tile-bg2: var(--subject-coding-bg2);    --tile-icon: var(--subject-coding-icon);    --subject-text: var(--subject-coding-text);    --subject-bar: var(--subject-coding-bar); }
.subject-name { color: var(--subject-text, var(--color-text-secondary)); font-weight: 600; }
.subject-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--tile-icon, var(--subject-other-icon)); display: inline-block; flex-shrink: 0; }

/* ---------- 字級（第 8 節） ---------- */
.t-display { font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: var(--text-display-weight); color: var(--color-text-strong); letter-spacing: -0.01em; margin: 0; }
.t-title { font-size: var(--text-title-size); line-height: var(--text-title-line); font-weight: var(--text-title-weight); color: var(--color-text-strong); margin: 0; }
.t-heading { font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: var(--text-heading-weight); color: var(--color-text-strong); margin: 0; }
.t-body { font-size: var(--text-body-size); line-height: var(--text-body-line); }
.t-small { font-size: var(--text-small-size); line-height: var(--text-small-line); font-weight: var(--text-small-weight); }
.t-caption { font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-caption-weight); }
.t-secondary { color: var(--color-text-secondary); }
.num, .t-number-xl, .t-number-l { font-feature-settings: "tnum" 1; }
.t-number-xl { font-size: var(--text-number-xl-size); line-height: var(--text-number-xl-line); font-weight: var(--text-number-xl-weight); color: var(--color-text-strong); letter-spacing: -0.02em; }
.t-number-l { font-size: var(--text-number-l-size); line-height: var(--text-number-l-line); font-weight: var(--text-number-l-weight); color: var(--color-text-strong); letter-spacing: -0.01em; }
.unit { font-size: var(--text-body-size); color: var(--color-text-secondary); font-weight: 400; margin-left: 4px; }
/* 小標題：中文、caption 600、次要色，不用全大寫（第 8.2 節） */
.eyebrow { font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 600; color: var(--color-text-secondary); text-transform: none; letter-spacing: 0; font-style: normal; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: none; }
.eyebrow.center { justify-content: center; }

/* 頁首：日期 → display 標題 → 一行摘要；主要動作在右上（第 14.1 節） */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-32); }
.page-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-head-actions { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }

/* ---------- 按鈕（第 13.1 節） ---------- */
.btn { position: relative; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-text-strong);
  min-height: var(--btn-height); padding: 6px var(--btn-pad-x); border-radius: var(--btn-radius);
  font-size: var(--text-button-size); line-height: var(--text-button-line); font-weight: var(--text-button-weight);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.btn:hover { background: var(--color-surface-2); }
.btn:active { transform: scale(.98); }
.btn .icon { width: 1.15em; height: 1.15em; stroke-width: var(--icon-stroke-inline); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-tonal { background: var(--color-accent-tint); color: var(--color-accent-text); border-color: transparent; }
.btn-tonal:hover { background: var(--color-accent-tint); filter: brightness(.97); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-accent-text); padding-inline: 8px; }
.btn-ghost:hover { background: var(--color-surface-2); }
.btn-danger { color: var(--color-danger-text); }
.btn-ai { color: var(--color-accent-text); border: var(--ai-border-width) solid transparent;
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--color-ai-gradient) border-box; }
.btn-ai:hover { background: linear-gradient(var(--color-accent-tint), var(--color-accent-tint)) padding-box, var(--color-ai-gradient) border-box; }
.btn-sm, .btn-compact { min-height: var(--btn-height-compact); padding: 4px 12px; font-size: var(--text-small-size); }
.btn-lg { min-height: var(--btn-height-primary); }
.btn-block { width: 100%; }
/* 停用：盡量不用；用 aria-disabled 讓鍵盤仍可到達並讀出原因 */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
/* 載入中：旋轉圈放在文字旁，按鈕寬度不變 */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }

/* 圖示按鈕：只限關閉、搜尋、通知、更多、返回（第 10.3 節），要有 aria-label */
.icon-btn { position: relative; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); min-width: var(--target-min); min-height: var(--target-min);
  display: inline-grid; place-items: center; color: var(--color-text-secondary); padding: 0 6px; cursor: pointer; }
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text-strong); }
.icon-btn.bordered { border-color: var(--color-line); background: var(--color-surface); }
/* 隱形的最小點擊範圍：外觀小的元件，點擊範圍最少 24×24（觸控 44×44）（第 14.4 節） */
.hit-target { position: relative; }
.hit-target::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%); }
@media (pointer: coarse) { .hit-target::after { width: max(100%, 44px); height: max(100%, 44px); } }

.link { color: var(--color-accent-text); cursor: pointer; background: none; border: 0; padding: 0; font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ---------- 輸入框（第 13.2 節） ---------- */
.field { display: block; margin-bottom: var(--space-16); }
.field > span:not(.field-hint):not(.field-error), .label, .field-label { display: block; font-size: var(--text-small-size); line-height: var(--text-small-line); color: var(--color-text-strong); margin-bottom: 6px; font-weight: 600; }
.field .req { color: var(--color-danger-text); }
.field-hint { display: block; font-size: var(--text-caption-size); line-height: var(--text-caption-line); color: var(--color-text-secondary); margin-top: 4px; font-weight: 400; }
.field-error { display: flex; align-items: center; gap: 6px; font-size: var(--text-small-size); color: var(--color-danger-text); margin-top: 6px; }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea, select.input, textarea.input {
  width: 100%; min-height: var(--input-height); border: 1px solid var(--color-line-strong); border-radius: var(--input-radius); padding: 8px 12px;
  background: var(--color-surface); color: var(--color-text-strong); font-size: var(--text-body-size); }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--color-text-secondary); }
.input:focus-visible, .field input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible, .field select:focus-visible, .field textarea:focus-visible, select.input:focus-visible, textarea.input:focus-visible {
  outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-accent-tint); }
.input[aria-invalid="true"], .field [aria-invalid="true"] { border-color: var(--color-danger-icon); }
textarea.input, .field textarea { min-height: 84px; resize: vertical; line-height: var(--text-body-line); }
.search-box { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text-secondary); font-size: var(--text-small-size); }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--color-text-strong); }

.chip { border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-pill); min-height: 32px; padding: 4px 12px; font-size: var(--text-small-size); font-weight: 500; cursor: pointer; }
.chip:hover { background: var(--color-surface-2); }
.chip.active, .chip[aria-pressed="true"] { background: var(--color-accent-tint); color: var(--color-accent-text); border-color: transparent; font-weight: 600; }
.switch input:checked { background: var(--color-accent); }

/* ---------- 卡片（第 13.3 節）：白底、細框、無陰影；小學無框、柔和陰影 ---------- */
.card { background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); padding: var(--card-pad); box-shadow: var(--card-shadow); position: relative; min-width: 0; }
/* 禁止左邊彩色邊框（第 13.3 節）：舊 .accent 卡片改為一般卡片 */
.card.accent { border-left: var(--card-border); }
.card.link-card, a.card { cursor: pointer; display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.card.link-card:hover, a.card:hover { border-color: var(--color-line-strong); }
.card-head { display: flex; align-items: center; gap: var(--space-12); }
.card-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0;
  background: var(--tile-bg, var(--color-surface-2)); color: var(--tile-icon, var(--color-text-secondary)); }
.card h3 { font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: var(--text-heading-weight); margin: 0; }
.card p { color: var(--color-text-secondary); margin: 8px 0 0; }
.card .open { margin-top: var(--space-12); font-size: var(--text-small-size); letter-spacing: 0; font-weight: 600; color: var(--color-accent-text); text-transform: none; }
.card-menu { position: absolute; top: 10px; right: 10px; }

/* 統計卡：圖示＋標籤 → 大數字＋單位 → 一行背景 → 文字按鈕；整張卡可按 */
.stat-card { display: flex; flex-direction: column; gap: 6px; }
.stat-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-small-size); font-weight: 600; color: var(--color-text-secondary); }
.stat-value { display: flex; align-items: baseline; gap: 6px; }
.stat-note { font-size: var(--text-small-size); line-height: 1.5; color: var(--color-text); }
.stat-action { font-size: var(--text-small-size); font-weight: 600; color: var(--color-accent-text); margin-top: 6px; }
.stat { font-size: var(--text-number-l-size); font-weight: var(--text-number-l-weight); color: var(--color-text-strong); font-feature-settings: "tnum" 1; }

/* 列表卡：行高最少 48（桌面）／56（觸控）；分隔線由文字起點開始 */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: var(--space-12); min-height: 48px; padding: 8px 0; position: relative; }
.list-row + .list-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--list-indent, 0); border-top: 1px solid var(--color-line); }
@media (pointer: coarse) { .list-row { min-height: 56px; } }

/* ---------- AI（第 11 節）：漸變只代表 AI ---------- */
.ai-card { border: var(--ai-border-width) solid transparent; border-radius: var(--card-radius); padding: var(--space-24);
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--color-ai-gradient) border-box;
  display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.ai-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-small-size); font-weight: 600; }
.ai-label > .icon { color: var(--color-accent); }
.ai-label-text { background: var(--color-ai-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* AI 方塊：葉形簽名＋漸變填充＋白色星芒（第 9.3 節，只用於 AI、葉子獎勵、空狀態） */
.ai-tile { width: 40px; height: 40px; border-radius: 10% 45% 10% 45% / 10% 45% 10% 45%; background: var(--color-ai-gradient); color: var(--color-on-accent); display: grid; place-items: center; flex-shrink: 0; }
.ai-tile > .icon { width: 55%; height: 55%; }
/* 處理中：開頭 5 秒內邊框有光流動，之後靜止 */
.ai-working { background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--color-ai-gradient) border-box;
  background-size: 100% 100%, 300% 100%; animation: ai-flow 1.6s var(--ease-standard) 3; }
@keyframes ai-flow { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }
.ai-unreviewed { font-size: var(--text-caption-size); color: var(--color-text-secondary); }

/* ---------- 標籤和徽章（第 13.6 節） ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tag-height); font-size: var(--text-caption-size); line-height: 1.3; border-radius: var(--radius-xs); padding: 2px 8px;
  background: var(--color-surface-2); border: 0; color: var(--color-text-secondary); font-weight: 600; white-space: nowrap; }
.tag .icon { width: 1.1em; height: 1.1em; stroke-width: 2.4; }
.tag.ok { background: var(--color-success-tint); color: var(--color-success-text); }
.tag.warn { background: var(--color-warning-tint); color: var(--color-warning-text); }
.tag.bad { background: var(--color-danger-tint); color: var(--color-danger-text); }
.tag.info { background: var(--color-info-tint); color: var(--color-info-text); }
/* 舊的紫色標籤改為中性（第 16 節對照） */
.tag.violet { background: var(--color-surface-2); color: var(--color-text-secondary); }
.tag.subject { background: var(--tile-bg, var(--color-surface-2)); color: var(--subject-text, var(--color-text-secondary)); }
/* 計數：中性底，不用紅點製造焦慮；舊「NEW／BETA」膠囊也改為中性 */
.pill, .count { margin-left: auto; font-size: var(--text-caption-size); font-weight: 600; color: var(--color-text-secondary); background: transparent; padding: 0 4px; border-radius: var(--radius-xs); font-feature-settings: "tnum" 1; }
.unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); display: inline-block; }

/* ---------- 分段控制（第 13.5 節） ---------- */
.tabs, .segmented { display: inline-flex; background: var(--color-surface-2); border: 0; border-radius: var(--radius-pill); padding: 4px; gap: 2px; max-width: 100%; overflow-x: auto; }
.tabs { display: flex; }
.tabs button, .tabs a, .segmented button, .segmented a { flex: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: none; background: none; min-height: 32px; padding: 4px 14px; border-radius: var(--radius-pill); text-align: center; white-space: nowrap; color: var(--color-text); font-weight: 500; cursor: pointer; }
.tabs .active, .tabs [aria-selected="true"], .segmented [aria-pressed="true"], .segmented .active, .segmented [aria-current="page"] { background: var(--color-surface); box-shadow: var(--shadow-1); font-weight: 600; color: var(--color-text-strong); }
.tabs.primary .active { background: var(--color-surface); color: var(--color-text-strong); }

/* ---------- 表格（第 13.9 節） ---------- */
table.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.table td { height: 48px; }
.table th { font-size: var(--text-caption-size); color: var(--color-text-secondary); font-weight: 600; text-transform: none; letter-spacing: 0; }
.table .num, .table td.num, .table th.num { text-align: right; font-feature-settings: "tnum" 1; }
.table-wrap { overflow-x: auto; }
.table-wrap .table th:first-child, .table-wrap .table td:first-child { position: sticky; left: 0; background: var(--color-surface); }

/* ---------- 進度（第 13.10 節） ---------- */
.bar, .progress { height: var(--progress-height); background: var(--color-data-track); border: 0; border-radius: var(--radius-pill); overflow: hidden; }
.bar > div, .progress > div { height: 100%; background: var(--color-data); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-standard); }
.progress.subject { background: var(--subject-bar, var(--color-data-track)); }
.progress.subject > div { background: var(--tile-icon, var(--color-data)); }

/* ---------- 頭像（第 13.11 節） ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent-tint); color: var(--color-accent-text); display: grid; place-items: center; font-size: var(--text-small-size); font-weight: 600; flex-shrink: 0; }
:root[data-audience^="primary"] .avatar { border-radius: 22px; }

/* ---------- 選單（第 13.12 節） ---------- */
.menu { position: absolute; background: var(--color-surface-elevated); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 6px; min-width: 200px; z-index: 100; }
.menu button, .menu a { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 36px; background: none; border: 0; text-align: left; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--color-text); font-weight: 500; cursor: pointer; text-decoration: none; }
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: var(--color-surface-2); }
.menu button:disabled, .menu button[aria-disabled="true"] { opacity: .45; cursor: default; background: none; }
.menu .desc { font-size: var(--text-caption-size); color: var(--color-text-secondary); font-weight: 400; }
.menu hr { border: 0; border-top: 1px solid var(--color-line); margin: 4px 8px; }
.menu .menu-label { font-size: var(--text-caption-size); color: var(--color-text-secondary); padding: 8px 10px 4px; letter-spacing: 0; font-weight: 600; }
.menu .icon { color: var(--color-text-secondary); }

/* ---------- 對話框、底部面板（第 13.7 節） ---------- */
.modal-bg { position: fixed; inset: 0; background: var(--color-scrim); display: grid; place-items: center; z-index: 80; padding: var(--space-16); }
.modal { background: var(--color-surface-elevated); border-radius: var(--radius-xl); padding: var(--space-24); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-3); }
.modal.wide { max-width: 760px; } .modal.xwide { max-width: 1000px; }
.modal h3 { margin: 0 0 12px; font-size: var(--text-title-size); line-height: var(--text-title-line); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.modal-head h3 { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-24); }
@media (max-width: 639px) {
  .modal-bg { align-items: end; padding: 0; }
  .modal, .modal.wide, .modal.xwide { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; padding-bottom: max(var(--space-24), env(safe-area-inset-bottom)); }
  .modal::before { content: ""; display: block; width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--color-line); margin: -12px auto 12px; }
  .modal-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ---------- 提示（toast） ---------- */
.toast { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(120px); background: var(--color-toast); color: var(--color-on-toast);
  padding: 10px 16px; border-radius: var(--radius-md); transition: transform var(--dur-base) var(--ease-out); z-index: 120; width: max-content; max-width: min(560px, calc(100vw - 32px));
  display: flex; align-items: center; gap: var(--space-12); font-weight: 500; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast .toast-action { background: none; border: 0; color: var(--color-on-toast); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 0; min-height: 32px; }
.toast .toast-close { background: none; border: 0; color: var(--color-on-toast); cursor: pointer; display: grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: var(--radius-sm); }

/* ---------- 空狀態、載入、錯誤（第 13.8 節） ---------- */
.empty { background: transparent; border: 0; border-radius: var(--card-radius); padding: var(--space-48) var(--space-24); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.empty h3 { font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: var(--text-heading-weight); margin: var(--space-8) 0 0; color: var(--color-text-strong); }
.empty p { color: var(--color-text-secondary); max-width: 420px; margin: 0 auto var(--space-8); }
.empty-leaf { width: 56px; height: 56px; border-radius: 10% 45% 10% 45% / 10% 45% 10% 45%; background: linear-gradient(135deg, var(--color-accent-tint), var(--color-surface-2)); color: var(--color-accent-text); display: grid; place-items: center; }
.empty-leaf > .icon { width: 50%; height: 50%; }
.skeleton { background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-surface) 50%, var(--color-surface-2) 100%); background-size: 200% 100%; border-radius: var(--radius-sm); min-height: 14px;
  animation: ui-shimmer 1.6s linear 3; }   /* 3 次約 5 秒後靜止（WCAG 2.2.2） */
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.inline-error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-danger-tint); color: var(--color-danger-text); font-size: var(--text-small-size); }
.inline-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-info-tint); color: var(--color-info-text); font-size: var(--text-small-size); }
.inline-error > .icon, .inline-note > .icon { margin-top: 2px; }

/* ---------- 減少動態（第 12.2 節）：系統設定或無障礙面板 ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .skeleton, .ai-working, .btn[aria-busy="true"]::before { animation: none; }
  .toast { transition: opacity var(--dur-base) linear; }
}

/* 內容插圖（public/js/pictures.js）：取代 emoji 字元，大小跟隨字級，與文字同一基線 */
img.pic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.22em; margin: 0 0.04em; object-fit: contain; user-select: none; }