/* 基礎層 · reset + 級距 token。不含任何顏色定義。 */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Microsoft JhengHei',sans-serif;
  --font-mono:ui-monospace,Menlo,monospace;

  /* 字級：12 種收斂為 8 階 */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-md:13px;
  --fs-lg:14px;  --fs-xl:16px; --fs-2xl:18px; --fs-3xl:20px;

  /* 間距：4px 基準 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;

  /* 圓角 */
  --r-xs:4px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --r-pill:999px; --r-circle:50%;

  /* 展示級字級（大數字、單字大字，僅少數處使用） */
  --fs-d1:22px; --fs-d2:24px; --fs-d3:30px; --fs-d4:36px; --fs-d5:46px;

  /* 圖示尺寸 */
  --icon-sm:16px; --icon-md:22px; --icon-xl:32px;

  --lh-tight:1.25; --lh-normal:1.5; --lh-loose:1.7;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-sans); font-size:var(--fs-md);
  line-height:var(--lh-normal); color:var(--color-text);
  background:var(--color-bg); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:var(--color-primary); }

/* 頁面容器：覆蓋層的定位脈絡 */
.page{ position:relative; min-height:100vh; }

/* APP 外殼 */
.screen{ min-height:100vh; display:flex; flex-direction:column; }
.scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.body-pad{ padding:var(--sp-4); }
.stack-2>*+*{ margin-top:var(--sp-2); }
.stack-3>*+*{ margin-top:var(--sp-3); }
.stack-4>*+*{ margin-top:var(--sp-4); }

/* ── 工具類：取代原型中的內聯樣式（鐵則四）── */
.mt-1{ margin-top:var(--sp-1); }   .mt-2{ margin-top:var(--sp-2); }
.mt-3{ margin-top:var(--sp-3); }   .mt-4{ margin-top:var(--sp-4); }
.mt-5{ margin-top:var(--sp-5); }
.mb-2{ margin-bottom:var(--sp-2); } .mb-3{ margin-bottom:var(--sp-3); }
.mb-4{ margin-bottom:var(--sp-4); }
.pb-2{ padding-bottom:var(--sp-2); }
.sec-sp{ margin:0 2px var(--sp-3); }
.sec-sp-lg{ margin:var(--sp-4) 2px var(--sp-3); }
.text-sm{ font-size:var(--fs-sm); }
.ta-c{ text-align:center; }
.is-hidden{ display:none; }
.w-full{ width:100%; }
/* 進度條寬度（原型示意值） */
.w-30{ width:30%; } .w-67{ width:67%; } .w-71{ width:71%; }
/* 文字與版面工具（承接原型內聯樣式） */
.text-md{ font-size:var(--fs-md); }
.c-primary{ color:var(--color-primary); }
.c-primary-strong{ color:var(--color-primary-hover); font-weight:600; }
.c-warning{ color:var(--color-warning); }
.flex-1{ flex:1; }
.flex-1-min{ flex:1; min-width:0; }
.clickable{ cursor:pointer; }
.fw-normal-dim{ font-weight:400; opacity:.75; }
.chip-muted{ background:var(--color-surface-sunken); color:var(--color-text-muted); }
.sep-muted{ color:var(--color-text-muted); font-weight:600; margin:0 5px; }
.sub-xs{ font-weight:400; color:var(--color-text-muted); font-size:var(--fs-xs); }
.note-xs{ font-size:var(--fs-xs); color:var(--color-text-muted); margin-top:var(--sp-1); }
.note-xs-c{ font-size:var(--fs-xs); color:var(--color-text-muted);
            text-align:center; margin-top:var(--sp-2); }
.hint-primary-c{ font-size:var(--fs-2xs); color:var(--color-primary);
                 text-align:center; margin:-2px 0 var(--sp-3); }
.res-icon-lg{ width:72px; height:72px; border-radius:var(--r-xl);
              font-size:var(--fs-d3); margin:0 auto var(--sp-3); }