/* =========================================================================
   External ID Demo —— 共用樣式
   色票依據：../COLORS.md（SoftwareOne Lab 共用色票）
   規則：色塊用原色配深字；線條圖示用 icon 階；小字用 ink 階。
        只有 Periwinkle 的實心按鈕例外，用 ink #376CC3 配白字。
   ========================================================================= */

:root{
  /* ---- 中性 ---- */
  --ink:#1E2836; --ink-2:#3F4A5B; --muted:#5B6675;
  --paper:#F7F8FB; --surface:#FFFFFF; --surface-2:#F1F4FA;
  --rule:#C6CDDB; --rule-soft:#E3E7EF;
  --on-dark:#FFFFFF;

  /* ---- 六個主色（四階）---- */
  --periwinkle-soft:#EEF2F9; --periwinkle:#5281CE;
  --periwinkle-icon:#5281CE; --periwinkle-ink:#376CC3;

  --lilac-soft:#EFEDFA; --lilac:#998CEB;
  --lilac-icon:#8E7FE9; --lilac-ink:#6855E1;

  --dijon-soft:#FAF8ED; --dijon:#E9D787;
  --dijon-icon:#A58C1E; --dijon-ink:#847018;

  --raspberry-soft:#FBECED; --raspberry:#F599A0;
  --raspberry-icon:#EF5B66; --raspberry-ink:#D71524;

  --icicle-soft:#EAFBFD; --icicle:#9EF5FF;
  --icicle-icon:#009CAE; --icicle-ink:#007D8C;

  --pistachio-soft:#F1F9EE; --pistachio:#BAE8AC;
  --pistachio-icon:#47A02C; --pistachio-ink:#398023;

  /* ---- 語意別名（各頁只接這層）---- */
  --accent:var(--periwinkle-ink);   --accent-soft:var(--periwinkle-soft);
  --ok:var(--pistachio-icon);       --ok-ink:var(--pistachio-ink);     --ok-soft:var(--pistachio-soft);
  --warn:var(--dijon-icon);         --warn-ink:var(--dijon-ink);       --warn-soft:var(--dijon-soft);
  --danger:var(--raspberry-icon);   --danger-ink:var(--raspberry-ink); --danger-soft:var(--raspberry-soft);
  --info:var(--icicle-icon);        --info-ink:var(--icicle-ink);      --info-soft:var(--icicle-soft);

  /* ---- 排版 ---- */
  --font:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",
         "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ---- 間距（4/8 節奏）---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* ---- 圓角與陰影 ---- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(30,40,54,.06);
  --sh-2:0 2px 8px rgba(30,40,54,.07), 0 1px 2px rgba(30,40,54,.05);
  --sh-3:0 12px 32px rgba(30,40,54,.10), 0 2px 8px rgba(30,40,54,.06);

  /* ---- 動態 ---- */
  --t-fast:140ms; --t-base:200ms;
  --ease-out:cubic-bezier(.22,.8,.3,1);

  /* ---- 層級 ---- */
  --z-nav:40; --z-toast:100;

}

/* ========================= 基礎 ========================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; min-height:100dvh;
  display:flex; flex-direction:column;   /* 讓 main 撐滿，頁尾自然貼底 */
  background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; line-height:1.25; letter-spacing:-.01em; font-weight:600;}
h1{font-size:clamp(26px,4.2vw,36px); font-weight:700;}
h2{font-size:clamp(20px,3vw,24px);}
h3{font-size:18px;}
h4{font-size:15px;}
p{margin:0;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
img,svg{max-width:100%;}
code,kbd,pre{font-family:var(--mono);}

/* 鍵盤焦點：一律看得見 */
:focus-visible{
  outline:2px solid var(--periwinkle-ink);
  outline-offset:2px; border-radius:var(--r-sm);
}
:focus:not(:focus-visible){outline:none;}

/* 跳到主要內容 */
.skip{
  position:absolute; left:var(--s4); top:-60px; z-index:calc(var(--z-nav) + 1);
  background:var(--surface); color:var(--ink); padding:var(--s2) var(--s4);
  border:1px solid var(--rule); border-radius:var(--r-md); box-shadow:var(--sh-2);
  transition:top var(--t-fast) var(--ease-out);
}
.skip:focus{top:var(--s3); text-decoration:none;}

/* ========================= 版面 ========================= */
.container{width:100%; max-width:1080px; margin-inline:auto; padding-inline:var(--s5);}
.container--wide{max-width:1240px;}
main{flex:1 0 auto; padding-block:var(--s7) var(--s8);}

/* 置中版面（登入、回饋頁）：main 自己負責垂直置中。
   不要用 calc(100dvh - 固定值) 去算 —— 那個數字很容易跟 main 的留白疊加，
   量到的結果是登入頁白白多捲 108px。 */
main.center-page{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding-block:var(--s6);
}
main.center-page>*{width:100%;}
.stack>*+*{margin-top:var(--s4);}
.stack-lg>*+*{margin-top:var(--s6);}
.row{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap;}
.row--between{justify-content:space-between;}
.grow{flex:1 1 auto; min-width:0;}

/* ========================= 導覽列 ========================= */
/* 登入前整條頂端列都不出現，登入頁就是一張純粹的卡。
   狀態由 boot.js 在首次繪製前標在 <html> 上，不會先閃一下再消失。 */
.nav{display:none;}
.signed-in .nav{
  display:block;
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(255,255,255,.88); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
/* 沒有導覽列就沒有東西可以跳過 */
.skip{display:none;}
.signed-in .skip{display:block;}
.nav__inner{
  display:flex; align-items:center; gap:var(--s4);
  min-height:60px; padding-block:var(--s2);
}
.brand{
  display:inline-flex; align-items:center; gap:var(--s3);
  min-height:44px; color:var(--ink); font-weight:650;
}
.brand:hover{text-decoration:none;}
/* 官方 wordmark，寬高寫死避免載入時版面跳動 */
.brand__logo{width:102px; height:36px; flex:none; display:block;}

.nav__end{margin-left:auto; display:flex; align-items:center; gap:var(--s3);}
/* 頂端列右側的功能入口 */
.nav__btn{min-height:38px; padding-inline:14px; font-size:14px;}
@media (max-width:560px){
  .nav__btn span:last-child{display:none;}   /* 窄螢幕只留圖示 */
  .nav__btn{padding-inline:10px;}
}


/* ========================= 卡片 ========================= */
.card{
  background:var(--surface); border:1px solid var(--rule-soft);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:var(--s5);
}
.card--flush{padding:0; overflow:hidden;}
.card--hero{padding:var(--s6); box-shadow:var(--sh-3); border-radius:var(--r-xl);}
.card__head{padding:var(--s4) var(--s5); border-bottom:1px solid var(--rule-soft); background:var(--surface);}
.card__body{padding:var(--s5);}
.card__title{font-size:16px; font-weight:650;}
.card__desc{font-size:13.5px; color:var(--muted); margin-top:var(--s1);}


/* ========================= 按鈕 ========================= */
.btn{
  --btn-bg:var(--surface); --btn-fg:var(--ink); --btn-bd:var(--rule);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:0 var(--s5);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--r-md);
  font:inherit; font-size:14.5px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out),
             box-shadow var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out);
}
.btn:hover{text-decoration:none; box-shadow:var(--sh-2);}
.btn:active{transform:translateY(1px);}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; pointer-events:none;
}
.btn--lg{min-height:52px; font-size:16px; padding-inline:var(--s6);}
.btn--block{width:100%;}

/* 主要動作：Periwinkle 是色票裡唯一用 ink 當底配白字的 */
.btn--primary{--btn-bg:var(--periwinkle-ink); --btn-fg:var(--on-dark); --btn-bd:var(--periwinkle-ink);}
.btn--primary:hover{--btn-bg:#2F5FB0; --btn-bd:#2F5FB0;}

/* 次要動作：白底深字 */
.btn--ghost{--btn-bg:var(--surface); --btn-fg:var(--ink); --btn-bd:var(--rule);}
.btn--ghost:hover{--btn-bg:var(--surface-2);}

/* 其餘色一律 base 原色 + 深字 */
.btn--accent{--btn-bg:var(--icicle); --btn-fg:var(--ink); --btn-bd:var(--icicle);}
.btn--lilac{--btn-bg:var(--lilac); --btn-fg:var(--ink); --btn-bd:var(--lilac);}
.btn--danger{--btn-bg:var(--raspberry); --btn-fg:var(--ink); --btn-bd:var(--raspberry);}

.btn--quiet{
  --btn-bg:transparent; --btn-bd:transparent; --btn-fg:var(--ink-2);
  padding-inline:var(--s3); font-weight:500;   /* min-height 沿用 .btn 的 44px */
}
.btn--quiet:hover{--btn-bg:var(--surface-2); --btn-fg:var(--ink); box-shadow:none;}

.btn__icon{flex:none; width:18px; height:18px;}

/* 讀取中：換掉圖示、擋住重複送出 */
.btn.is-loading{pointer-events:none; opacity:.8;}
.btn.is-loading .btn__icon{display:none;}
.btn.is-loading::before{
  content:""; width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}


/* 說明小字 */
.hint{display:block; font-size:12.5px; color:var(--muted); margin-top:var(--s2);}

/* ========================= 標籤與狀態 ========================= */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; line-height:1.5;
  background:var(--surface-2); color:var(--ink);
}
.badge svg{width:13px; height:13px; flex:none;}
.badge--ok{background:var(--pistachio-soft); color:var(--ok-ink);}
.badge--warn{background:var(--dijon-soft); color:var(--warn-ink);}
.badge--danger{background:var(--raspberry-soft); color:var(--danger-ink);}
.badge--info{background:var(--icicle-soft); color:var(--info-ink);}
.badge--accent{background:var(--periwinkle-soft); color:var(--periwinkle-ink);}
.badge--lilac{background:var(--lilac-soft); color:var(--lilac-ink);}


/* ========================= 提示橫幅 ========================= */
.banner{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s4); border-radius:var(--r-md);
  border:1px solid var(--rule-soft); background:var(--surface-2);
  font-size:14px; color:var(--ink-2);
}
.banner svg{flex:none; width:18px; height:18px; margin-top:1px;}
.banner strong{color:var(--ink); font-weight:650;}
.banner--warn{background:var(--dijon-soft); border-color:#EADFB4; color:var(--ink-2);}
.banner--warn svg{color:var(--dijon-icon);}
.banner--danger{background:var(--raspberry-soft); border-color:#F3CFD2;}
.banner--danger svg{color:var(--raspberry-icon);}
.banner--ok{background:var(--pistachio-soft); border-color:#D2E9C8;}
.banner--ok svg{color:var(--pistachio-icon);}
.banner--info{background:var(--icicle-soft); border-color:#C4EDF3;}
.banner--info svg{color:var(--icicle-icon);}
.banner--accent{background:var(--periwinkle-soft); border-color:#D8E2F2;}
.banner--accent svg{color:var(--periwinkle-icon);}
.banner__body{min-width:0;}
.banner__title{display:block; font-weight:650; color:var(--ink); margin-bottom:2px;}


/* ========================= 資料表 ========================= */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.data{width:100%; border-collapse:collapse; font-size:14px;}
table.data th,table.data td{
  padding:var(--s3) var(--s4); text-align:left; vertical-align:top;
  border-bottom:1px solid var(--rule-soft);
}
table.data thead th{
  position:sticky; top:0; background:var(--surface-2);
  font-size:12px; font-weight:650; color:var(--ink-2);
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
table.data tbody tr:last-child td{border-bottom:0;}
table.data tbody tr:hover{background:var(--periwinkle-soft);}
.cell-key{font-family:var(--mono); font-size:13px; color:var(--ink); white-space:nowrap;}
.cell-val{font-family:var(--mono); font-size:13px; color:var(--ink-2); word-break:break-all;}
.cell-note{color:var(--muted); font-size:13px; min-width:170px;}

/* 鍵值清單（窄版用） */
.kv{display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:var(--s2) var(--s4); font-size:14px;}
.kv dt{color:var(--muted); font-size:13px;}
.kv dd{margin:0; color:var(--ink); word-break:break-word;}

/* ========================= 程式碼／Token ========================= */
.code{
  display:block; margin:0; padding:var(--s4);
  background:var(--surface-2); border:1px solid var(--rule-soft); border-radius:var(--r-md);
  font-family:var(--mono); font-size:12.5px; line-height:1.65; color:var(--ink-2);
  overflow-x:auto; white-space:pre; tab-size:2;
}
.code--wrap{white-space:pre-wrap; word-break:break-all;}
.code b{color:var(--ink); font-weight:600;}


/* 摺疊區 */
details.fold{border:1px solid var(--rule-soft); border-radius:var(--r-md); background:var(--surface); overflow:hidden;}
details.fold+details.fold{margin-top:var(--s3);}
details.fold>summary{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s4); cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; color:var(--ink);
  min-height:44px; user-select:none;
}
details.fold>summary::-webkit-details-marker{display:none;}
details.fold>summary::before{
  content:""; width:8px; height:8px; flex:none;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); margin-right:2px;
  transition:transform var(--t-fast) var(--ease-out);
}
details.fold[open]>summary::before{transform:rotate(45deg);}
details.fold>summary:hover{background:var(--surface-2);}
.fold__body{padding:0 var(--s4) var(--s4);}

/* ========================= Toast ========================= */
.toasts{
  position:fixed; z-index:var(--z-toast);
  left:50%; transform:translateX(-50%);
  bottom:max(var(--s5), env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:var(--s2);
  width:min(420px, calc(100vw - 32px)); pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) var(--s4); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--rule);
  box-shadow:var(--sh-3); font-size:14px; color:var(--ink);
  pointer-events:auto;
  animation:toast-in 220ms var(--ease-out);
}
.toast svg{flex:none; width:18px; height:18px; margin-top:1px;}
.toast--ok{border-color:#D2E9C8; background:var(--pistachio-soft);}
.toast--ok svg{color:var(--pistachio-icon);}
.toast--danger{border-color:#F3CFD2; background:var(--raspberry-soft);}
.toast--danger svg{color:var(--raspberry-icon);}
.toast--info svg{color:var(--periwinkle-icon);}
.toast.is-out{animation:toast-out 150ms var(--ease-out) forwards;}
@keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes toast-out{to{opacity:0; transform:translateY(6px);}}


/* ========================= Pop-up（原生 dialog）=========================
   用 <dialog> 而不是自己疊 div：Esc 關閉、焦點鎖在對話框內、背景不可點，
   這些瀏覽器都做好了，自己刻很容易漏掉其中一項。 */
dialog.modal{
  width:min(820px, calc(100vw - 32px));
  max-height:min(86dvh, 920px);
  padding:0; border:0; border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-3);
}
dialog.modal--wide{width:min(960px, calc(100vw - 32px));}
/* 關閉時瀏覽器預設是 display:none，所以 flex 只能掛在 [open] 上 */
dialog.modal[open]{display:flex; flex-direction:column;}
dialog.modal::backdrop{background:rgba(30,40,54,.45);}

dialog.modal[open]{animation:modal-in 180ms var(--ease-out);}
dialog.modal[open]::backdrop{animation:backdrop-in 180ms var(--ease-out);}
@keyframes modal-in{from{opacity:0; transform:translateY(8px) scale(.985);} to{opacity:1; transform:none;}}
@keyframes backdrop-in{from{opacity:0;} to{opacity:1;}}

.modal__head{
  display:flex; align-items:center; gap:var(--s3); flex:none;
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--rule-soft);
}
.modal__title{font-size:17px; font-weight:650;}
.modal__x{
  margin-left:auto; width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-md);
  color:var(--muted); cursor:pointer;
}
.modal__x:hover{background:var(--surface-2); color:var(--ink);}
.modal__body{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:var(--s5);}
.modal__foot{
  flex:none; display:flex; gap:var(--s2); flex-wrap:wrap;
  padding:var(--s3) var(--s5); border-top:1px solid var(--rule-soft);
  background:var(--surface-2);
}

/* ========================= 頁尾 ========================= */
.foot{
  flex:none;
  border-top:1px solid var(--rule-soft); background:var(--surface);
  padding-block:var(--s5); font-size:13px; color:var(--muted);
}

/* ========================= 工具類 ========================= */
.muted{color:var(--muted);}
.small{font-size:13px;}
.tiny{font-size:12px;}
.mono{font-family:var(--mono);}
.nowrap{white-space:nowrap;}
.tnum{font-variant-numeric:tabular-nums;}
.center{text-align:center;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hidden{display:none !important;}

/* 骨架屏：等資料時保留版位，不讓版面跳動 */
.skel{
  background:linear-gradient(90deg,var(--surface-2) 25%,#E8ECF4 37%,var(--surface-2) 63%);
  background-size:400% 100%; border-radius:var(--r-sm);
  animation:skel 1.4s ease-in-out infinite;
}
@keyframes skel{from{background-position:100% 50%;} to{background-position:0 50%;}}

/* ========================= 減少動態 ========================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}