/* =====================================================================
   weblink-event-portal — 共用樣式（廠商端 + 後台）
   ---------------------------------------------------------------------
   設計取捨（改之前先看這段）：
   與招商站統一為深色（Mark 2026-08-07 拍板）。底色、品牌紅、字型、
   圓角語彙全部沿用 creatorlink2026-sponsor。

   ⚠️ 深色底不是「把淺色反過來」：狀態色（成功綠／警示橘／錯誤紅）
   直接沿用淺色版的深色調會在黑底上糊掉，全部換成亮一階的版本，
   底色改用低透明度的同色疊加。改色前先確認對比度仍達 WCAG AA（4.5:1）。

   📐 2026-08-08 排版系統化：原本字級有 15 種（12.3/12.5/12.8/13.5/13.8/
   14.5…）、間距落在 6~48 之間任意取值，每一處都「差一點點」，合起來就是
   沒有節奏。改成只從下面的 token 取值——**新增樣式時不得自造數值**，
   要用的階沒有就先討論該不該加一階，不要直接寫死一個新數字。
   ===================================================================== */

/* 🔴 2026-08-07：這一行不可刪。
   本專案全程用 HTML 的 hidden 屬性控制顯隱（$('modal').hidden = true）。
   hidden 的效果來自瀏覽器預設樣式 [hidden]{display:none}，但**作者樣式表
   永遠贏過瀏覽器預設樣式**——只要元素的 class 另外寫了 display（.modal 是
   display:grid、.gate 是 display:grid、.fld 是 display:flex…），hidden 就
   完全失效。
   後果：載入遮罩與送出彈窗從專案第一天起就永遠蓋在畫面上，廠商完全進不了
   表單，而 console 不會有任何錯誤（程式是對的，被覆蓋的是樣式）。
   📌 可複用判準：凡是用 hidden 屬性控制顯隱的專案，都必須有這一條兜底；
   否則「哪個元素會壞」取決於它的 class 有沒有碰巧設 display，是不可預測的。 */
[hidden]{display:none !important}

:root{
  /* 品牌色沿用招商站 */
  --red:#fa0f00; --orange:#ff8a3d; --gold:#ffb020; --cyan:#1fd1c4;

  /* --red 當色塊與邊框用沒問題，但**當文字用**時在 --surface2 上只有
     4.43:1，差一點點就不合格。--red-tx 是同一個紅提亮到 4.53:1 的版本，
     肉眼幾乎分不出來，專供紅色文字使用。
     這是檔頭「狀態色要換成亮一階」那條原則的延伸——當初漏了品牌紅。
     ⚠️ 色塊／邊框請繼續用 --red，換過去反而會讓品牌紅出現兩種。 */
  --red-tx:#fa1e0f;

  --bg:#070707; --surface:#111110; --surface2:#161615;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);

  /* 深色底下有兩種疊層，各管各的，不要混用：
       --surface / --surface2  容器層（卡片、頁首、對話框）＝實色，會擋住底下的東西
       --fill*                 互動元件層（輸入框、按鈕、選項）＝半透明白，浮在容器上
     互動層原本散落六個透明度（.02/.04/.05/.06/.07/.1），沒有刻度可循，
     於是每次新增元件都是「看起來差不多」再挑一個數字。收成三階： */
  --fill:rgba(255,255,255,.05);        /* 靜置 */
  --fill-hover:rgba(255,255,255,.1);   /* 滑過／作用中 */
  --fill-mute:rgba(255,255,255,.02);   /* 停用、低強調 */

  /* --tx3 是全站說明文字（.hint／欄位名／頁尾）的顏色。
     原值 #7d7772 在 --surface2 上只有 4.10:1，低於 AA 的 4.5:1——
     也就是最需要看懂的說明文字，是全站最看不清楚的。提亮到 #857f7a
     後三種底色分別為 4.78／4.58／5.10，全數達標。
     ⚠️ 再往下調之前先重算對比，這個值就踩在門檻上。 */
  --tx:#f6f5f4; --tx2:#b8b2ad; --tx3:#857f7a;

  /* placeholder 專用，不能共用 --tx3。差別在它疊的底不一樣：
     .hint 疊的是容器實色（4.58~5.10 過關），placeholder 疊的是輸入框自己的
     半透明底（--fill 疊在容器上，更暗），同一個 --tx3 在那裡只有 4.27:1。
     這一階刻意只比 --tx3 亮一點點——placeholder 若比使用者真正輸入的值還醒目，
     會讓人以為欄位已經填好了。
     實測：疊在 --fill/--surface 上 5.01:1；疊在 --fill/--surface2 上（後台
     「新增廠商」那種較亮的卡片）4.75:1——兩個都過，但後者是這組裡最窄的，
     --surface2 若再調整會是它先破，改之前先重算。
     （2026-08-09 Jennie 量出 4.27 才發現這個組合從來沒被算過） */
  --tx-ph:#918b86;

  /* 深色底專用：亮一階的狀態色 + 低透明度底 */
  --ok:#3ddc9a; --warn:#ffab3d; --err:#ff6b61;
  --ok-bg:rgba(61,220,154,.12); --warn-bg:rgba(255,171,61,.13); --err-bg:rgba(255,107,97,.13);

  /* 字級：只有六階。繁中筆畫比拉丁字母密，同樣 px 更難讀，所以最小階
     取 13px 而不是設計系統慣用的 12px——12px 的繁中提示文字在深色底上
     是「看得到但讀不動」。
     --fs-lg 取 19px 而非 18px 是有原因的：無障礙標準對「大字」的對比門檻
     是 3:1（≥18.66px 粗體），一般字則要 4.5:1。主要按鈕是白字配品牌紅底、
     對比 4.09——那是品牌色不能動，所以改讓字夠大來符合大字門檻。
     ⚠️ 這一階若調回 18px，主要按鈕會立刻變成不合格，改之前先想清楚。

     📌 --fs-2xl 目前只有後台摘要的大數字在用（2026-08-09 hallmark 提出可收斂）。
     刻意保留：階梯的頂端是刻度，不是「有幾個人站在上面」的問題——把它刪掉，
     下一個要放大數字的人就會照上面禁止的方式自造一個 30px，
     那正是這套 token 當初要解決的問題。 */
  --fs-xs:13px; --fs-sm:14px; --fs-md:15px; --fs-lg:19px; --fs-xl:22px; --fs-2xl:28px;

  /* 間距：8 的倍數階梯，不取中間值。
     例外：badge／狀態膠囊／小標籤的內部微調允許 2–4px 直接寫死，不進階梯。
     階梯管的是版面節奏，而這些元件若套 8px 會在資料密集的表格裡腫成一團。
     判準：影響「區塊之間的呼吸」→ 用階梯；只影響「一顆標籤自己多高」→ 可微調。 */
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;

  --maxw:1100px; --r:12px; --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans TC',system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;
  background:var(--bg); color:var(--tx);
  /* 行高 1.7 高於一般建議的 1.5–1.6：繁中沒有詞間空白，行距不夠時
     整段會糊成一塊，這是刻意的偏離。 */
  line-height:1.7; -webkit-font-smoothing:antialiased;
  font-size:var(--fs-md);
}
/* 手機一律 16px 起跳：低於 16px 時 iOS Safari 會在聚焦輸入框時自動放大
   整個頁面，使用者填完一格就要手動縮回去。 */
@media (max-width:600px){ body{font-size:16px} }

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4)}

/* 說明性文字限制行長。繁中一個字約等於 1em，46em ≈ 46 字，
   接近中文閱讀最舒適的區間；不限制的話在寬螢幕會拉成 50 字以上，
   眼睛換行時容易掉行。 */
.lead,.hint,.pre{max-width:46em}

/* ---------- 載入 / 門檻 ---------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;padding:var(--sp-4)}
.gate-box{max-width:460px;text-align:center}
.gate-box p{color:var(--tx2)}
.spinner{width:26px;height:26px;margin:0 auto var(--sp-2);border:2.5px solid var(--line2);
  border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gate-help{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);text-align:left}
.relink{display:flex;gap:var(--sp-1);margin-top:var(--sp-2);flex-wrap:wrap}
.relink input{flex:1;min-width:200px}

/* ---------- 頁首 ---------- */
.hd{background:var(--surface);border-bottom:1px solid var(--line)}
.hd-in{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4)}
.eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--red-tx);text-transform:uppercase}
.hd h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;line-height:1.3;margin-top:2px}
.hd-meta{font-size:var(--fs-sm);color:var(--tx2);margin-top:var(--sp-1)}
.hd-right{text-align:right;flex-shrink:0}
.plan-chip{display:inline-block;padding:4px var(--sp-2);border-radius:100px;font-size:var(--fs-xs);font-weight:700;
  background:var(--fill-hover);color:var(--tx);border:1px solid var(--line2)}
.plan-chip[data-plan="PLATINUM"]{background:linear-gradient(135deg,#e8e6e3,#a8a29c);color:#0a0a0a;border-color:transparent}
.plan-chip[data-plan="GOLD"]{background:linear-gradient(135deg,var(--gold),#d98a00);color:#241800;border-color:transparent}
.plan-chip[data-plan="SILVER"]{background:linear-gradient(135deg,#c9c4be,#8b8480);color:#0a0a0a;border-color:transparent}
/* 這一格用 --fill-mute 而不是 --fill 是對比度算出來的，不是視覺偏好：
   --tx3 疊在 --fill 上只有 4.27:1（13px 非粗體，不適用大字的 3:1 門檻），
   底色再暗一階到 --fill-mute 才是 4.59:1、過 AA。
   ⚠️ 想把它調亮讓「未定」更醒目之前先重算——這一格是往暗調才合格，
      直覺方向是反的。（2026-08-09 Jennie 量出 4.27，此前的 .06 更低、只有 4.16） */
.plan-chip[data-plan="UNDECIDED"]{background:var(--fill-mute);color:var(--tx3)}

/* 客製方案：不跟三個分級搶視覺份量（那三個用金屬漸層代表級別高低），
   用中性青色點出「這是個案、不在分級表裡」。整體重量刻意低於 SILVER。
   文字 --cyan 疊在 12% 青底上是 8.08:1，很寬裕。
   ⚠️ 邊框 alpha 是 .5 不是隨手取的：這顆徽章的**底色只有 1.22:1**，
      幾乎跟周圍融成一片，所以「看不看得出這是一顆徽章」完全靠邊框撐——
      它不是裝飾，是唯一的形狀來源，要吃 WCAG 1.4.11 的 3:1 門檻。
      .35 只有 2.17:1（不合格），.5 是 3.25:1。想調淡之前先重算。
      （這條與全站 --line/--line2 系統性偏低的情況不同：那些邊框旁邊都有
       實色底自己撐得住形狀，這顆沒有。） */
.plan-chip[data-plan="CUSTOM"]{background:rgba(31,209,196,.12);color:var(--cyan);
  border-color:rgba(31,209,196,.5)}
/* 存檔狀態住在 sticky 的進度條裡（見 index.html 的說明），所以不留外距 */
.save-state{font-size:var(--fs-xs);color:var(--tx3);min-height:1.2em}
.save-state.saving{color:var(--tx2)}
.save-state.saved{color:var(--ok)}
/* 失敗時給底色而不只是變紅字：廠商正盯著自己填的欄位，
   餘光要能察覺右上角出事了，純變色太安靜。 */
.save-state.failed{color:var(--err);font-weight:700;background:var(--err-bg);
  padding:2px var(--sp-1);border-radius:6px}

/* ---------- 進度條 ---------- */
.progress-bar{background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;padding:var(--sp-2) 0}
.pg-track{height:7px;border-radius:100px;background:var(--line);overflow:hidden}
.pg-fill{height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--red),var(--orange));
  transition:width .5s var(--ease)}
.pg-fill.done{background:linear-gradient(90deg,var(--ok),#42c48c)}
.pg-legend{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-1);
  font-size:var(--fs-xs);color:var(--tx2);flex-wrap:wrap}
.pg-right{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.deadline{font-weight:600}
.deadline.near{color:var(--warn)}
.deadline.over{color:var(--err)}

/* ---------- 版面 ---------- */
.cols{display:grid;grid-template-columns:1fr 280px;gap:var(--sp-4);align-items:start;
  padding-top:var(--sp-4);padding-bottom:var(--sp-6)}
.main{order:1;min-width:0}
/* top 要大於 sticky 進度條的高度，否則側欄頂端會被它蓋住。
   留到 104px 是因為進度條的圖例列在內容較長時（例如存檔失敗訊息帶底色）
   會換一行、整條變高——固定 80px 剛好卡在「多數時候沒事、出事時才發現」，
   而出事的時機正是使用者最需要看到缺漏清單的時候。 */
.side{order:2;position:sticky;top:104px}
@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  .side{position:static;order:1}
  .main{order:2}
}

/* ---------- 卡片 ---------- */
/* 內距由外而內遞減（卡片 24 → 區塊 16 → 列 12），讓巢狀層級靠空間差
   自己說話，不必再加分隔線。 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow)}
.card.info{background:var(--surface2)}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.card h2{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em;line-height:1.4}
.lead{font-size:var(--fs-sm);color:var(--tx2);margin-bottom:var(--sp-3)}
.tag{font-size:var(--fs-xs);font-weight:700;padding:3px var(--sp-2);border-radius:100px;
  background:var(--warn-bg);color:var(--warn);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}

.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-4);box-shadow:var(--shadow)}
.side-card h2{font-size:var(--fs-md);font-weight:800;margin-bottom:var(--sp-2)}
/* 側欄的送出鈕是次要樣式（見 index.html 說明），但仍要滿寬——
   寬度是「這是本卡片的行動」的訊號，跟顏色強度是兩回事。 */
.side-card .btn{width:100%;margin-top:var(--sp-2)}

/* ---------- 欄位 ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)}
.fld{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.fld label{font-size:var(--fs-sm);font-weight:600;color:var(--tx)}
.fld label em{color:var(--red-tx);font-style:normal;margin-left:2px}
/* 輸入框內距 12/16 讓實際高度來到 45px 左右，超過觸控目標下限，
   手指按得到、也不必瞄準。 */
/* 🔴 這裡刻意用「排除法」而不是列出所有型別，別改回去。
   沒被選到的輸入框會退回瀏覽器預設的白底黑字，在深色介面上是一個刺眼的
   白方塊——而指紋檢查、對比度檢查都抓不到「樣式沒套到」，只有看畫面才會發現。

   同一個坑 2026-08-09 一天踩兩次：先是登入頁漏了 password，改成列舉並註記
   「日後新增型別記得加進來」；當天下午新增廠商區又白了三個，這次的原因是
   `<input id="nv_brand">` **根本沒寫 type**——而 [type=text] 比對的是「屬性
   存不存在」，不是「行為像不像 text」。列舉法對這種寫法無效，而且它把正確性
   押在「下一個人會記得」上，兩次都證明押不住。

   排除法反過來：預設全部套用，只排掉不該套的（勾選類、檔案、隱藏、按鈕）。
   新增任何型別、或忘了寫 type，都自動涵蓋。 */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
select,textarea{
  width:100%;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:9px;
  background:var(--fill);color:var(--tx);font-family:inherit;font-size:var(--fs-md);
  transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--tx-ph)}
/* 🔴 展開後的選項必須自己成對指定顏色（Mark 2026-09-02 實際操作時回報
   「連結種類的下拉選單白底不能白字會看不到」）。兩個原因疊在一起：
   ① option 不從 select 繼承 background，多數平台由系統畫在白底上，卻吃得到 color
      ⇒ 只設 select 的話就是「系統白底 ＋ 我們的近白字」。
   ② 上面那條 select 用的 --fill 是 rgba(255,255,255,.05)＝**半透明白**，
      就算 option 吃得到，疊在系統白底上仍然是白的。
   所以這裡用不透明的 --surface2，不用 --fill。
   🔑 判準：顏色靠繼承或半透明疊色的地方，換一個渲染環境就會失效——
      要能被看見的東西，底與字必須在同一條規則裡成對寫死。 */
select option{background-color:var(--surface2);color:var(--tx)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(250,15,0,.22)}
/* 鍵盤操作時焦點必須看得見，且不能只靠顏色——加一圈實體外框，
   高對比模式下也還在。 */
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
input:disabled{background:var(--fill-mute);color:var(--tx3);cursor:not-allowed}
/* 深色底的原生日期／數字微調鈕預設是黑的，會消失在背景裡 */
input[type=number]{color-scheme:dark;max-width:180px}
.hint{font-size:var(--fs-xs);color:var(--tx3);line-height:1.6}
.warn{font-size:var(--fs-sm);color:var(--warn);background:var(--warn-bg);
  padding:var(--sp-1) var(--sp-2);border-radius:8px;margin-top:var(--sp-1)}
.readonly-row{border-top:1px dashed var(--line);padding-top:var(--sp-2);margin-top:4px}
.readonly-val{font-size:var(--fs-xl);font-weight:800;line-height:1.3}

/* 缺漏標紅 */
.fld.missing input,.fld.missing select{border-color:var(--err);background:var(--err-bg)}
.fld.missing label{color:var(--err)}
fieldset.sub.missing{border-color:var(--err)}

fieldset.sub{border:1px solid var(--line);border-radius:10px;padding:var(--sp-3);margin:0 0 var(--sp-3)}
fieldset.sub legend{font-size:var(--fs-sm);font-weight:700;padding:0 var(--sp-1)}
fieldset.sub legend em{color:var(--red-tx);font-style:normal}

.chk{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-md);cursor:pointer;
  margin-bottom:var(--sp-2);min-height:24px}
.chk input{width:18px;height:18px;accent-color:var(--red);cursor:pointer}

/* 三態選擇 */
.seg{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.seg label{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line2);border-radius:100px;cursor:pointer;font-size:var(--fs-sm);
  transition:border-color .18s,background .18s;background:var(--fill)}
.seg label:hover{border-color:var(--tx3);background:var(--fill-hover)}
.seg input{accent-color:var(--red);cursor:pointer}
.seg label:has(input:checked){border-color:var(--red);background:rgba(250,15,0,.15);font-weight:600}
.seg label:has(input[value="tbc"]:checked){border-color:var(--warn);background:var(--warn-bg)}

/* 待確認的回覆期限。左邊那條橘線讓它視覺上從屬於上方的三態選擇，
   而不是看起來像另一個獨立問題。 */
.tbc-when{border-left:2px solid var(--warn);padding-left:var(--sp-2);
  margin-top:var(--sp-2);margin-bottom:0}
/* 深色底的原生日期選擇器圖示預設是黑的，不加這行會整個消失在背景裡 */
.tbc-when input[type=date]{max-width:200px;color-scheme:dark}

/* ---------- 素材 ---------- */
.asset{border:1px solid var(--line);border-radius:10px;padding:var(--sp-3);margin-bottom:var(--sp-2)}
.asset-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-2);flex-wrap:wrap}
.asset-hd h3{font-size:var(--fs-md);font-weight:700;line-height:1.4}
.asset .spec{font-size:var(--fs-xs);color:var(--tx2);margin-top:4px;line-height:1.6}
.asset .size-hint{display:inline-block;margin-top:var(--sp-1);padding:4px var(--sp-2);border-radius:7px;
  background:var(--surface2);border:1px solid var(--line);font-size:var(--fs-xs);font-weight:600}
.asset .size-pending{background:var(--warn-bg);border-color:rgba(255,171,61,.35);color:var(--warn)}
/* 徽章與更新時間包成一組，讓 .asset-hd 仍然只有左右兩個子元素——
   直接把時間當第三個子元素會被 space-between 推到中間去。 */
.asset-st{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.a-stamp{font-size:var(--fs-xs);color:var(--tx2);white-space:nowrap}
.state-pill{font-size:var(--fs-xs);font-weight:700;padding:3px var(--sp-2);border-radius:100px;white-space:nowrap}
.state-pill[data-s="provided"]{background:var(--ok-bg);color:var(--ok)}
.state-pill[data-s="tbc"]{background:var(--warn-bg);color:var(--warn)}
.state-pill[data-s="missing"]{background:var(--line);color:var(--tx2)}
.asset-body{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px dashed var(--line)}
.tpl-link{font-size:var(--fs-sm);font-weight:600;color:var(--red-tx);text-decoration:underline;
  text-underline-offset:3px}
.tpl-link:hover{text-decoration-thickness:2px}
.filebox{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.filename{font-size:var(--fs-sm);color:var(--tx2);word-break:break-all}
/* LOGO 縮圖用棋盤格，不用純白底。
   純白只解決一半問題：深色 LOGO 看得見，但**白色或淺色的 LOGO 會直接
   消失**，廠商會以為自己傳錯檔。棋盤格讓深色落在淺格上、淺色落在深格上，
   兩種都看得見，而且它同時傳達了「這張圖是透明背景」這個資訊
   （這是設計工具的通用慣例，設計師一眼就懂）。
   object-fit:contain 讓長寬比不被壓扁。 */
.a-thumb{width:64px;height:64px;object-fit:contain;border-radius:8px;
  /* ⚠️ 不要放 cursor:zoom-in（2026-08-09 hallmark audit 抓到）。
     那個游標承諾「點我會放大」，但這裡沒有任何點擊行為——
     暗示了卻沒做，比不暗示更糟。hover 換深底是被動回饋，不需要游標提示。 */
  border:1px solid var(--line2);padding:4px;flex:0 0 auto;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#c4c4c4 25%,transparent 25%,transparent 75%,#c4c4c4 75%),
    linear-gradient(45deg,#c4c4c4 25%,transparent 25%,transparent 75%,#c4c4c4 75%);
  background-size:12px 12px;
  background-position:0 0,6px 6px;
  transition:background-color .2s}
/* 滑過換純深底：專門用來確認白色／淺色 LOGO 是不是真的有內容。
   棋盤格已能涵蓋多數情況，這層是給「整個 LOGO 都是白的」那種案例的保險。 */
.a-thumb:hover{background-image:none;background-color:#141414}

/* ---------- 缺漏清單 ---------- */
.missing{list-style:none;font-size:var(--fs-sm)}
.missing li{padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);position:relative;color:var(--err);
  border-bottom:1px solid var(--line)}
.missing li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--err)}
.missing li:last-child{border-bottom:none}
.missing li.ok{color:var(--ok)}
.missing li.ok::before{background:var(--ok)}
.bullet{list-style:none;font-size:var(--fs-sm)}
.bullet li{padding:4px 0 4px var(--sp-3);position:relative}
.bullet li::before{content:"・";position:absolute;left:2px;color:var(--tx3)}
.pre{white-space:pre-line;font-size:var(--fs-sm);color:var(--tx2)}

/* ---------- 按鈕 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-4);border-radius:100px;border:1px solid var(--line2);
  background:var(--fill);color:var(--tx);font-family:inherit;font-weight:700;
  font-size:var(--fs-sm);cursor:pointer;min-height:44px;
  transition:transform .2s var(--ease),background .2s,border-color .2s}
.btn:hover{border-color:#fff;background:var(--fill-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* 白字配品牌紅底的對比是 4.09，未達一般字的 4.5，但達得到大字門檻的 3:1，
   所以主要按鈕一律用 --fs-lg（19px 粗體）。這不是為了鑽規則——主要行動
   按鈕本來就該比次要按鈕更醒目，兩件事在這裡剛好同一個解。 */
.btn-primary{background:var(--red);border-color:var(--red);color:#fff;width:100%;
  margin-top:var(--sp-2);font-size:var(--fs-lg);min-height:52px}
.btn-primary:hover{background:#d90d00;border-color:#d90d00}
.btn.lg{padding:var(--sp-2) var(--sp-6);font-size:var(--fs-lg);min-height:52px}
/* sm 用於次要動作（複製、匯出、新增一列）。高度 36px 低於主要按鈕，
   但仍高於觸控目標下限 24px。 */
.btn.sm{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);min-height:36px}
.foot-actions{text-align:center;padding:var(--sp-2) 0 var(--sp-5)}
.foot-actions .btn-primary{width:auto;min-width:240px}
.foot-actions .hint{margin-top:var(--sp-2);margin-left:auto;margin-right:auto}

/* ---------- 頁尾 / 對話框 ---------- */
.ft{border-top:1px solid var(--line);background:var(--surface);padding:var(--sp-4) 0;
  font-size:var(--fs-sm);color:var(--tx3)}
.ft .privacy{margin-top:var(--sp-1);font-size:var(--fs-xs);line-height:1.6}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  display:grid;place-items:center;z-index:60;padding:var(--sp-4)}
.modal-box{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);
  padding:var(--sp-4);max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-box h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--sp-2);line-height:1.4}
.modal-box .btn{margin-top:var(--sp-3);width:100%}

/* 送出後的「把連結留下來」區塊。
   ⚠️ 上一行把彈窗裡的按鈕設成滿版（那是給「我知道了」用的），
   這裡兩顆小按鈕必須覆寫回 auto，否則會各自佔掉一整行。 */
.keep-link{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.keep-link .linkrow{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
  margin-top:var(--sp-2)}
.keep-link .linkrow input{flex:1 1 220px;min-width:0;font-size:var(--fs-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.keep-link .btn{width:auto;margin-top:0;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 可增減清單（工作證名單／問卷選項／抽獎獎項共用） ---------- */
/* 一列一項、可追加可刪除。三處共用同一組樣式，讓廠商只需學一次互動。 */
.rep-row{display:flex;gap:var(--sp-1);align-items:center;margin:0 0 var(--sp-1)}
.rep-row .rep-no{flex:0 0 auto;min-width:20px;font-size:var(--fs-xs);color:var(--tx3);
  font-variant-numeric:tabular-nums;text-align:right}
.rep-row input[type=text]{flex:1 1 auto;min-width:0}
.rep-del{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--tx3);cursor:pointer;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-xs);
  line-height:1;min-height:36px;min-width:36px}
.rep-del:hover{border-color:var(--err);color:var(--err)}
.rep-add{margin-top:2px}

/* 獎項：一項是一個區塊而非一列，欄位較多 */
.prize-row{border:1px solid var(--line);border-radius:10px;padding:var(--sp-3);margin:0 0 var(--sp-2);
  background:var(--fill-mute)}
.prize-row .prize-hd{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--sp-2);font-size:var(--fs-sm);font-weight:700;color:var(--tx2)}
.prize-row input[type=number]{max-width:none}
.prize-file{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.prize-file input[type=file]{font-size:var(--fs-xs);color:var(--tx2)}

/* ---------- 上傳槽的三態（2026-09-02）----------
   尚未上傳／已上傳／剛上傳完。原本三者在畫面上幾乎一樣（只差一行灰字），
   一排素材掃過去時看不出誰交了。佔位框把「還沒交」變成看得見的空缺。
   ⚠️ 固定尺寸與縮圖相同：沒有佔位框的話，上傳成功那一刻整列會跳動。 */
.a-slot{width:64px;height:64px;flex:0 0 auto;border-radius:8px;
  border:1px dashed var(--line2);display:flex;align-items:center;justify-content:center;
  color:var(--tx3);font-size:22px;line-height:1;background:var(--fill-mute)}
.filebox[data-has="1"] .a-slot{border-style:solid;border-color:var(--ok);color:var(--ok)}
/* 已上傳換成勾：把原本的「＋」字級歸零再用 ::before 換內容，
   不能只加 ::before——那會變成「✓＋」兩個符號並排。 */
.filebox[data-has="1"] .a-ph{font-size:0}
.filebox[data-has="1"] .a-ph::before{content:"✓";font-size:20px}
/* 真的縮圖出現時就不需要佔位框了 */
.filebox:has(.a-thumb:not([hidden])) .a-slot{display:none}
/* 拖放中的視覺回饋。只有 dragover 那一刻加，離開就拿掉 */
.filebox.drop-on{outline:2px dashed var(--ok);outline-offset:3px;background:var(--ok-bg)}
/* 上傳進度：一條細線，不佔版面高度 */
.a-prog{flex:1 1 100%;height:4px;border-radius:100px;background:var(--line);overflow:hidden;margin-top:6px}
.a-prog > i{display:block;height:100%;width:0;background:var(--ok);transition:width .15s linear}

/* 反灰的動作。用 <span> 而不是 disabled 的 <button>：
   這裡從來就沒有可以按的東西，做成按鈕再停用等於先給了期待再收回。
   ⚠️ 不加 cursor:not-allowed——那個游標暗示「你想按但不准」，
   而這裡的意思是「還沒有東西可拿」，兩者不同。 */
.btn.is-off{opacity:.45;pointer-events:none;user-select:none}