/* 元件層 · 只引用 --color-* / --fs-* / --sp-* / --r-* / --shadow-*
   ★ 本檔不得出現任何色碼字面值（鐵則二），由 tools/check.sh 驗證。 */

/* ═══ 頁首 ═══ */
.app-header{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border-subtle);
}
.app-title{ font-size:var(--fs-xl); font-weight:600; flex:1; }
.btn-back{
  width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-circle);
  color:var(--color-text); font-size:var(--fs-xl);
}
.btn-back:active{ background:var(--color-surface-sunken); }

/* ═══ 區塊標題 ═══ */
.sec-title{
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.04em;
  color:var(--color-text-muted); margin-bottom:var(--sp-2);
}

/* ═══ 按鈕 ═══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1);
  font-size:var(--fs-lg); font-weight:500; line-height:var(--lh-tight);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid transparent; border-radius:var(--r-pill);
  background:var(--color-surface-sunken); color:var(--color-text);
}
.btn-primary  { background:var(--color-primary); color:var(--color-text-on-primary); }
.btn-primary:active{ background:var(--color-primary-hover); }
.btn-secondary{ background:var(--color-surface); color:var(--color-primary);
                border-color:var(--color-primary); }
.btn-ghost    { background:none; color:var(--color-primary); }
.btn-danger   { background:var(--color-danger); color:var(--color-text-on-primary); }
.btn-full     { display:flex; width:100%; }
.btn-sm       { font-size:var(--fs-sm); padding:var(--sp-1) var(--sp-3); }
.btn-lg       { font-size:var(--fs-xl); padding:var(--sp-4) var(--sp-5); }
.btn-square   { border-radius:var(--r-md); }
.btn:disabled { opacity:.45; pointer-events:none; }
.btn-icon{
  width:36px; height:36px; padding:0; border-radius:var(--r-circle);
  background:var(--color-surface-sunken);
}

/* ═══ 表單 ═══ */
.field{ display:block; margin-bottom:var(--sp-3); }
.label{ display:block; font-size:var(--fs-sm); font-weight:500;
        color:var(--color-text-muted); margin-bottom:var(--sp-1); }
.input,.textarea,.select{
  width:100%; font-size:var(--fs-lg);
  padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--color-border);
}
.input:focus,.textarea:focus,.select:focus{
  outline:none; border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-subtle);
}
.input::placeholder{ color:var(--color-text-muted); }
.textarea{ min-height:80px; resize:vertical; }
.input-error{ border-color:var(--color-danger); }
.help{ font-size:var(--fs-xs); color:var(--color-text-muted); margin-top:var(--sp-1); }
.help-error{ color:var(--color-danger); }

.search{ position:relative; }
.search .input{ padding-left:36px; border-radius:var(--r-pill); }
.search .ti{ position:absolute; left:var(--sp-3); top:50%; transform:translateY(-50%);
             color:var(--color-text-muted); }

.check{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-lg); }
.check input{ width:18px; height:18px; accent-color:var(--color-primary); }

.switch{ position:relative; width:44px; height:26px; flex:none; }
.switch input{ opacity:0; width:100%; height:100%; margin:0; }
.switch-track{
  position:absolute; inset:0; border-radius:var(--r-pill);
  background:var(--color-border); pointer-events:none; transition:background .15s;
}
.switch-track::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:var(--r-circle); background:var(--color-surface);
  box-shadow:var(--shadow-sm); transition:transform .15s;
}
.switch input:checked + .switch-track{ background:var(--color-primary); }
.switch input:checked + .switch-track::after{ transform:translateX(18px); }

/* ═══ 卡片與列表列 ═══ */
.card{
  background:var(--color-surface); text-decoration:none; color:inherit; border-radius:var(--r-lg);
  border:1px solid var(--color-border-subtle);
  padding:var(--sp-3) var(--sp-4);
}
.card-raised{ box-shadow:var(--shadow-md); border-color:transparent; }

.row-card{
  display:flex; align-items:center; gap:var(--sp-3);
  text-decoration:none; color:inherit;
  background:var(--color-surface); border-radius:var(--r-lg);
  border:1px solid var(--color-border-subtle);
  padding:var(--sp-3) var(--sp-4);
}
.row-ic{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-circle);
  background:var(--color-primary-subtle); color:var(--color-primary);
  font-size:var(--fs-xl);
}
.row-main{ flex:1; min-width:0; }
.row-t{ font-size:var(--fs-lg); font-weight:500; }
.row-s{ font-size:var(--fs-sm); color:var(--color-text-muted); }
.row-arrow{ color:var(--color-text-muted); font-size:var(--fs-xl); flex:none; }

.divider{ height:1px; background:var(--color-border-subtle);
          border:0; margin:var(--sp-3) 0; }

/* ═══ 徽章 ═══ */
.badge{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-2xs); font-weight:600; line-height:1;
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-pill);
  background:var(--color-surface-sunken); color:var(--color-text-muted);
}
.badge-primary{ background:var(--color-primary-subtle); color:var(--color-primary); }
.badge-success{ background:var(--color-success-subtle); color:var(--color-success); }
.badge-warning{ background:var(--color-warning-subtle); color:var(--color-warning); }
.badge-danger { background:var(--color-danger-subtle);  color:var(--color-danger); }
.badge-info   { background:var(--color-info-subtle);    color:var(--color-info); }

/* ═══ 分頁 ═══ */
.tabs{ display:flex; gap:var(--sp-1); background:var(--color-surface-sunken);
       padding:var(--sp-1); border-radius:var(--r-pill); }
.tab-btn{
  flex:1; font-size:var(--fs-sm); font-weight:500;
  padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-pill);
  background:none; color:var(--color-text-muted);
}
.tab-btn[aria-selected="true"]{
  background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-sm);
}

/* ═══ 進度與階段 ═══ */
.progress{ height:6px; border-radius:var(--r-pill);
           background:var(--color-surface-sunken); overflow:hidden; }
.progress-bar{ height:100%; background:var(--color-primary); border-radius:var(--r-pill); }

.stage{ display:flex; align-items:center; gap:var(--sp-2); }
.stage-n{
  width:24px; height:24px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-circle); font-size:var(--fs-xs); font-weight:600;
  background:var(--color-surface-sunken); color:var(--color-text-muted);
}
.stage-n[data-state="active"]{ background:var(--color-primary);
                               color:var(--color-text-on-primary); }
.stage-n[data-state="done"]  { background:var(--color-success-subtle);
                               color:var(--color-success); }

/* ═══ 測驗（語意色，不隨品牌改變）═══ */
.opt{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  font-size:var(--fs-lg); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--color-border); border-radius:var(--r-md);
  background:var(--color-surface); color:var(--color-text);
}
.opt[aria-pressed="true"]{ border-color:var(--color-primary);
                           background:var(--color-primary-subtle); }
.answer-correct{ border-color:var(--color-success);
                 background:var(--color-success-subtle); color:var(--color-success); }
.answer-wrong  { border-color:var(--color-danger);
                 background:var(--color-danger-subtle);  color:var(--color-danger); }

/* ═══ 提示框 ═══ */
.callout{
  display:flex; gap:var(--sp-2); font-size:var(--fs-sm);
  padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--color-info-subtle); color:var(--color-info);
}
.callout-warning{ background:var(--color-warning-subtle); color:var(--color-warning); }
.callout-danger { background:var(--color-danger-subtle);  color:var(--color-danger); }
.callout-success{ background:var(--color-success-subtle); color:var(--color-success); }

/* ═══ 空狀態 ═══ */
.empty{ text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--color-text-muted); }
.empty .ti{ font-size:var(--icon-xl); opacity:.5; }
.empty-title{ font-size:var(--fs-lg); font-weight:500;
              color:var(--color-text); margin-top:var(--sp-2); }
.empty-desc{ font-size:var(--fs-sm); margin-top:var(--sp-1); }

/* ═══ 頁首品牌 ═══ */
.nav-brand{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xl);
  font-weight:700; color:inherit; text-decoration:none; white-space:nowrap; }
.nav-mark{ width:30px; height:30px; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--color-primary);
  color:var(--color-text-on-primary); font-size:var(--fs-lg); }

/* ═══ 頁尾連結 ═══ */
.ft-links{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; }
.ft-links a{ font-size:var(--fs-sm); color:var(--color-text-muted); text-decoration:none; }
.ft-links a:hover{ color:var(--color-primary); }
.ft-col{ flex-direction:column; gap:var(--sp-2); justify-content:flex-start; }
.ft-copy{ font-size:var(--fs-xs); color:var(--color-text-muted); }



/* ═══ 版塊骨架（跨分類共用，依 R1 置於元件層）═══
   區塊容器、區塊標題、共用的文字與統計樣式。 */
.blk{ padding:var(--sp-6) var(--sp-4); }
.blk-in{ max-width:var(--blk-max); margin:0 auto; }
.blk-head{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.blk-title{ font-size:var(--fs-2xl); font-weight:700; flex:1; }
.blk-more{ font-size:var(--fs-sm); color:var(--color-primary); text-decoration:none; white-space:nowrap; }
.blk-sub{ font-size:var(--fs-md); color:var(--color-text-muted); margin-top:calc(var(--sp-1)*-1); }
@media (min-width:768px){
   .blk{ padding:var(--sp-6) var(--sp-5); }
}
@media (min-width:1024px){
  
  .blk{ padding:56px var(--sp-6); }
  
  .blk-title{ font-size:var(--fs-d1); }
}
.hero-mark{
  width:64px; height:64px; margin:0 auto var(--sp-3); display:grid; place-items:center;
  border-radius:var(--r-lg); background:var(--color-primary);
  color:var(--color-text-on-primary); font-size:var(--fs-d1); font-weight:700;
}
.hero-actions{ display:flex; gap:var(--sp-2); justify-content:center;
  flex-wrap:wrap; margin-top:var(--sp-4); }
@media (min-width:768px){
  
  .hero-mark{ width:88px; height:88px; font-size:var(--fs-d3); border-radius:var(--r-xl); }
}
.news-excerpt{ font-size:var(--fs-sm); color:var(--color-text-muted); line-height:var(--lh-loose); }
.st-item{ text-align:center; }
.st-n{ font-size:var(--fs-d3); font-weight:700; color:var(--color-primary);
  line-height:var(--lh-tight); }
.st-l{ font-size:var(--fs-sm); color:var(--color-text-muted); margin-top:var(--sp-1); }
@media (min-width:768px){
   .st-n{ font-size:var(--fs-d4); }
}

/* ═══ 核取群組（跨分類共用）═══ */
.check-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* ═══ 狀態容器（跨分類共用）═══ */
.st-box{ max-width:520px; margin-inline:auto; }

/* ═══ 頭像 ═══ */
.avatar{ display:grid; place-items:center; flex:none; overflow:hidden;
  width:40px; height:40px; border-radius:var(--r-circle);
  background:var(--color-primary-subtle); color:var(--color-primary);
  font-size:var(--fs-lg); font-weight:700; }
.avatar-sm{ width:28px; height:28px; font-size:var(--fs-sm); }
.avatar-lg{ width:64px; height:64px; font-size:var(--fs-2xl); }
.avatar-xl{ width:88px; height:88px; font-size:var(--fs-d1); }
.avatar-sq{ border-radius:var(--r-lg); }
.avatar-group{ display:flex; }
.avatar-group .avatar{ margin-left:-10px; border:2px solid var(--color-surface); }
.avatar-group .avatar:first-child{ margin-left:0; }

/* ═══ 星等 ═══ */
.rating{ display:inline-flex; align-items:center; gap:2px; color:var(--color-warning);
  font-size:var(--fs-md); }
.rating .ti{ font-size:var(--fs-lg); }
.rating-off{ color:var(--color-border); }
.rating-n{ margin-left:var(--sp-1); font-weight:700; color:var(--color-text); }
.rating-c{ color:var(--color-text-muted); font-size:var(--fs-sm); }

/* ═══ 數量標記 ═══ */
.count-badge{ display:inline-grid; place-items:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:var(--r-pill); background:var(--color-danger);
  color:var(--color-text-on-primary); font-size:var(--fs-2xs); font-weight:700;
  line-height:1; }
.count-dot{ min-width:8px; height:8px; padding:0; }

/* ═══ 金額 ═══ */
.amount{ font-family:var(--font-mono); font-weight:700; font-size:var(--fs-xl); }
.amount-sm{ font-size:var(--fs-md); }
.amount-pos{ color:var(--color-success); }
.amount-neg{ color:var(--color-danger); }
.amount-cur{ font-size:.75em; font-weight:400; opacity:.7; margin-right:2px; }

/* ═══ 設定列（開關／導向）═══ */
.sw-row{ display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) 0; border-bottom:1px solid var(--color-border-subtle); }
.sw-row:last-child{ border-bottom:0; }
.sw-t{ flex:1; font-size:var(--fs-lg); }

/* ═══ 圖片佔位 ═══
   單色 SVG 以 CSS 遮罩呈現，顏色取自 token —— 會跟著色系與明暗改變。
   圖形由 Codex 產生：viewBox 0 0 48 48、純 fill、單引號屬性（避免破壞 url()）。 */
.ph{ position:relative; overflow:hidden; display:grid; place-items:center;
  background:var(--color-surface-sunken); color:var(--color-border); }
.ph::after{ content:''; position:absolute; inset:0;
  background:currentColor; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5 7h38v34H5Zm3 3v28h32V10Z'/%3E%3Cpath fill='%23000' d='m10 35 10-14 8 10 5-6 5 10Z'/%3E%3Ccircle fill='%23000' cx='33' cy='17' r='4'/%3E%3C/svg%3E") center / clamp(22px, 24%, 88px) no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5 7h38v34H5Zm3 3v28h32V10Z'/%3E%3Cpath fill='%23000' d='m10 35 10-14 8 10 5-6 5 10Z'/%3E%3Ccircle fill='%23000' cx='33' cy='17' r='4'/%3E%3C/svg%3E") center / clamp(22px, 24%, 88px) no-repeat; }
.ph-avatar::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle fill='%23000' cx='24' cy='16' r='8'/%3E%3Cpath fill='%23000' d='M9 40v-4c0-6 6-10 15-10s15 4 15 10v4Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle fill='%23000' cx='24' cy='16' r='8'/%3E%3Cpath fill='%23000' d='M9 40v-4c0-6 6-10 15-10s15 4 15 10v4Z'/%3E%3C/svg%3E"); }
.ph-map::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='m5 17 10-3v3l-7 2v19l8-3 15 4 9-3V17l-7 2v-3l10-3v25l-12 4-15-4-11 4Z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M24 5a9 9 0 0 1 9 9c0 6-9 15-9 15s-9-9-9-15a9 9 0 0 1 9-9Zm0 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3Cpath fill='%23000' d='m15 26 3 3v7h-3Zm14 5 3-3v12h-3Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='m5 17 10-3v3l-7 2v19l8-3 15 4 9-3V17l-7 2v-3l10-3v25l-12 4-15-4-11 4Z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M24 5a9 9 0 0 1 9 9c0 6-9 15-9 15s-9-9-9-15a9 9 0 0 1 9-9Zm0 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3Cpath fill='%23000' d='m15 26 3 3v7h-3Zm14 5 3-3v12h-3Z'/%3E%3C/svg%3E"); }

/* 原生選擇標籤：input 保留焦點與表單語意，不需腳本。 */
.choice-group{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.choice-chip{ position:relative; display:inline-flex; max-width:100%; cursor:pointer; }
.choice-chip-input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:inherit; }
.choice-chip-label{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:calc(var(--sp-1) * 11); padding:var(--sp-2) var(--sp-4); width:100%;
  border:1px solid var(--color-border); border-radius:var(--r-pill);
  background:var(--color-surface); color:var(--color-text); font-size:var(--fs-lg); overflow-wrap:anywhere; }
.choice-chip-input:checked + .choice-chip-label{ border-color:var(--color-primary); background:var(--color-primary-subtle); color:var(--color-primary); font-weight:600; }
.choice-chip-input:checked + .choice-chip-label::before{ content:'✓'; flex:none; }
.choice-chip-input:focus-visible + .choice-chip-label{ outline:2px solid var(--color-primary); outline-offset:2px; }
.choice-chip-input:disabled{ cursor:not-allowed; }
.choice-chip-input:disabled + .choice-chip-label{ background:var(--color-surface-sunken); color:var(--color-text-muted); border-style:dashed; }

/* ═══ AI 共用元件：訊息、來源、提示、附件與回應操作 ═══ */
.ai-surface{ padding:var(--sp-5); border:1px solid var(--color-border-subtle); border-radius:var(--r-xl); background:var(--color-surface); min-width:0; }
.ai-kicker{ display:inline-block; color:var(--color-primary); font-size:var(--fs-sm); font-weight:700; letter-spacing:.08em; margin-bottom:var(--sp-2); }
.ai-note{ color:var(--color-text-muted); font-size:var(--fs-sm); line-height:var(--lh-loose); margin-top:var(--sp-2); overflow-wrap:anywhere; }
.ai-message{ min-width:0; padding:var(--sp-5); border:1px solid var(--color-border-subtle); border-radius:var(--r-xl); background:var(--color-surface); overflow-wrap:anywhere; }
.ai-message-user{ background:var(--color-primary-subtle); margin-left:12%; border-color:transparent; }
.ai-speaker{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.ai-speaker .ai-note,.ai-speaker .ai-kicker{ margin:0; }
.ai-mark{ display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-md); background:var(--color-primary); color:var(--color-text-on-primary); font-weight:700; font-size:var(--fs-sm); }
.ai-prose{ font-size:var(--fs-xl); line-height:var(--lh-loose); overflow-wrap:anywhere; white-space:pre-line; }
.ai-prose ul{ padding-left:var(--sp-5); list-style:disc; margin-top:var(--sp-3); }
.ai-prose li+li{ margin-top:var(--sp-2); }
.ai-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.ai-actions form{ margin:0; }
.ai-actions .btn,.ai-actions .choice-chip-label{ min-height:44px; }
.ai-source{ margin-top:var(--sp-3); border-top:1px solid var(--color-border-subtle); padding-top:var(--sp-2); overflow-wrap:anywhere; }
.ai-source summary{ cursor:pointer; color:var(--color-primary); padding:var(--sp-2) 0; min-height:44px; }
.ai-source li{ margin-top:var(--sp-2); }
.ai-source .field{ margin-top:var(--sp-2); }
.ai-prompt{ background:var(--color-surface); border:1px solid var(--color-border-subtle); border-radius:var(--r-lg); min-width:0; overflow-wrap:anywhere; }
.ai-prompt summary{ padding:var(--sp-4); cursor:pointer; font-weight:600; min-height:44px; }
.ai-prompt summary i{ color:var(--color-primary); margin-right:var(--sp-2); }
.ai-prompt>p{ padding:0 var(--sp-4) var(--sp-4); color:var(--color-text-muted); }
.ai-prompt>.ai-message{ border:0; }
.ai-attachment{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3); border:1px dashed var(--color-border); border-radius:var(--r-md); overflow-wrap:anywhere; font-size:var(--fs-sm); }
.ai-file{ display:block; max-width:100%; width:100%; font-size:var(--fs-sm); }
.ai-input-box{ padding:var(--sp-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-xl); }
.ai-input-box textarea{ min-height:96px; font-size:var(--fs-xl); }
.ai-input-box .ai-actions{ justify-content:space-between; }
.ai-prompt summary:focus-visible,.ai-source summary:focus-visible,.ai-actions .btn:focus-visible,.ai-file:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }