/* 共用樣式：顏色只用 token，深色模式只換 token */
:root {
  --ac:#0F766E; --ac-hover:#115E59; --ac-soft:#E6F4F1; --on-ac:#FFFFFF;
  --ink:#18212B; --mu:#5B6573; --line:#E2E6EB; --bg:#F5F7F9; --card:#FFFFFF; --chip:#EEF1F4;
  --bad:#C9372C; --bad-soft:#FCEBEA; --ok:#1F7A3E; --ok-soft:#E7F5EC; --warn:#A15C07;
  --r:14px; --r-sm:10px; --sh:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --sh-lg:0 8px 24px rgba(16,24,40,.12);
  --focus:0 0 0 3px rgba(15,118,110,.25);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ac:#2DD4BF; --ac-hover:#5EEAD4; --ac-soft:#10302D; --on-ac:#04201D;
    --ink:#E6EAF0; --mu:#98A2B0; --line:#2A323C; --bg:#0E1318; --card:#161C23; --chip:#212933;
    --bad:#F87171; --bad-soft:#3A1A1A; --ok:#4ADE80; --ok-soft:#12301E; --warn:#FBBF24;
    --sh:0 1px 2px rgba(0,0,0,.4); --sh-lg:0 8px 24px rgba(0,0,0,.5); --focus:0 0 0 3px rgba(45,212,191,.3);
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 "Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--ac); }
h1 { margin:0 0 4px; font-size:26px; letter-spacing:.01em; }
h2 { margin:0 0 12px; font-size:18px; }
.wrap { max-width:1100px; margin:0 auto; padding:24px 20px 56px; }
.box { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:20px; margin-bottom:16px; }
.hint { color:var(--mu); font-size:14px; }
.lead { margin:0 0 20px; color:var(--mu); font-size:15px; max-width:760px; }
.err { color:var(--bad); }
.good { color:var(--ok); font-weight:700; }
[hidden] { display:none !important; }

/* 表單 */
input, select, textarea { padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); color:var(--ink); font:inherit; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ac); box-shadow:var(--focus); }
input::placeholder, textarea::placeholder { color:var(--mu); opacity:.7; }
button { border:1px solid var(--ac); border-radius:var(--r-sm); padding:9px 18px; background:var(--ac); color:var(--on-ac); font:inherit; font-weight:700; cursor:pointer; transition:background .15s, border-color .15s, transform .05s; }
button:hover:not(:disabled) { background:var(--ac-hover); border-color:var(--ac-hover); }
button:active:not(:disabled) { transform:translateY(1px); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:none; box-shadow:var(--focus); }
button.sub { background:var(--card); color:var(--ac); }
button.sub:hover:not(:disabled) { background:var(--ac-soft); color:var(--ac); }
button.ghost { background:none; border-color:transparent; color:var(--mu); font-weight:400; padding:6px 10px; }
button.ghost:hover:not(:disabled) { background:var(--chip); border-color:transparent; color:var(--ink); }
button:disabled { opacity:.45; cursor:not-allowed; }

/* 拖放區 */
.drop { display:block; border:2px dashed var(--line); border-radius:var(--r); padding:28px 16px; text-align:center; color:var(--mu); cursor:pointer; transition:border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color:var(--ac); background:var(--ac-soft); color:var(--ink); }
.drop .big { display:block; font-size:16px; color:var(--ink); font-weight:700; margin-bottom:4px; }
.drop small { display:block; margin-top:6px; }

/* 步驟標題：完成時打勾 */
.step { display:flex; align-items:center; gap:10px; }
.step .no { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--chip); color:var(--mu); font-size:14px; font-weight:700; }
.done > .step .no { background:var(--ok); color:var(--card); font-size:0; }
.done > .step .no::after { content:"✓"; font-size:15px; }

/* 標籤 */
.tag { display:inline-block; background:var(--chip); color:var(--mu); border-radius:999px; padding:1px 10px; font-size:12px; }
.tag.ac { background:var(--ac-soft); color:var(--ac); font-weight:700; }

/* 頂部列（lib/app.js 產生） */
.topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); }
.topbar .in { max-width:1100px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; gap:10px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:700; white-space:nowrap; }
.brand .logo { width:28px; height:28px; border-radius:8px; background:var(--ac); color:var(--on-ac); display:grid; place-items:center; font-size:15px; }
.crumb { color:var(--mu); font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crumb::before { content:"/"; margin-right:10px; opacity:.5; }
.menu { margin-left:auto; position:relative; }
.menu summary { list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 8px 4px 4px; border-radius:999px; color:var(--ink); font-size:14px; }
.menu summary::-webkit-details-marker { display:none; }
.menu summary:hover { background:var(--chip); }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--ac-soft); color:var(--ac); display:grid; place-items:center; font-weight:700; font-size:14px; }
.menu .pop { position:absolute; right:0; top:calc(100% + 6px); min-width:220px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-lg); padding:6px; }
.menu .who { padding:8px 10px; font-size:13px; color:var(--mu); border-bottom:1px solid var(--line); margin-bottom:4px; word-break:break-all; }
.menu .who b { display:block; color:var(--ink); font-size:14px; }
.menu .pop a, .menu .pop button { display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--ink); font:inherit; font-size:14px; font-weight:400; text-decoration:none; cursor:pointer; }
.menu .pop a:hover, .menu .pop button:hover { background:var(--chip); }

/* 確認登入前：不顯示內容，改顯示載入中 */
html.locked body { visibility:hidden; }
html.locked::after { content:"載入中…"; position:fixed; inset:0; display:grid; place-items:center; color:var(--mu); font:15px "Microsoft JhengHei",sans-serif; background:var(--bg); }

/* 擋下時的訊息頁 */
.gate { max-width:440px; margin:18vh auto 0; text-align:center; }

/* 提示泡泡 */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-size:14px; box-shadow:var(--sh-lg); transition:opacity .2s, transform .2s; pointer-events:none; z-index:50; max-width:calc(100% - 32px); }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* 手機：輸入框字級 16px（iPhone 小於 16px 點下去會自動放大畫面）、按鈕好按 */
img { max-width:100%; }
@media (max-width:640px) {
  input, select, textarea { font-size:16px !important; }
  button { min-height:44px; }
  .wrap { padding:16px 14px 40px; }
  .box { padding:16px; }
  h1 { font-size:22px; }
  .topbar .in { padding:0 14px; }
  .menu .name { display:none; }
}
@media (hover:none) {
  .drag-only { display:none; }   /* 觸控裝置沒有拖放，提示改成點選 */
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }