/*
 * 票券版：淡橘底 + 米白票券卡。活動感靠造型（撕票口、獎牌、票數長條）而不是靠彩度，
 * 因此在戶外強光下仍讀得到——使用者含外務司機。
 * 撕票口用頁面底色圓點在米白票券上挖出缺口。
 * 所有字級走 calc(N * var(--liff-scale, 1))，才吃得到全站字級調整鈕。
 */
.vote-shell[data-v-a23710d8] {
  --vt-bg: #FFF6ED;        /* 頁面底：淡橘（對齊活動視覺稿，比 Template #FBE2CC 更淺以免搶卡片） */
  --vt-card: #F7F4EC;      /* 票券底（米白，和白頁面有一階層次） */
  --vt-card-on: #FFE9CF;   /* 已選票券底 */
  --vt-ink: #14201F;       /* 票券內主要文字 */
  --vt-muted: #5B6A67;     /* 票券內次要文字 */
  --vt-accent: #E8742A;    /* 強調色（勾選框、長條）；改用專案品牌橘 */
  --vt-accent-deep: #8F3A0C;/* 品牌橘深階，白字放在強調色上時用（對比 7.6:1） */
  --vt-accent-ink: #2B1405; /* 放在淺強調色上的字 */
  --vt-track: #E2DCCE;     /* 長條底槽 */
  --vt-line: #DED7C6;      /* 票券邊線 */
  --vt-box: #B3AA97;       /* 未勾選的框線 */
  --vt-page-ink: #1a1a1a;  /* 頁面（白底）主要文字 */
  --vt-page-dim: #6E6A63;  /* 頁面（白底）次要文字，對比 5.7:1，司機戶外仍讀得到 */
  --vt-hair: #E8E6E1;      /* 頁面淺灰分隔線 */
  --vt-ok: #2E7D4F;
  --vt-lift: 0 2px 8px rgba(120, 70, 30, .12), 0 1px 2px rgba(120, 70, 30, .06); /* 淡橘底上讓白卡浮起來（與介紹頁卡片同層次）*/
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* LiffPage 的根元素會同時帶到本元件的 scope，所以這裡改得到它的底色與內距 */
.vote-shell.liff-page[data-v-a23710d8] {
  background: var(--vt-bg);
  padding: 0 0 12px;
  color: var(--vt-page-ink);
}
.vote-shell[data-v-a23710d8] .liff-title { color: var(--vt-page-ink); padding: 18px 16px 0;
}

/* ── 頁首（深色卡片：活動名稱 / 說明 / 倒數 同一塊，內容置中，如截圖）── */
.vt-hero[data-v-a23710d8] {
  margin: 12px 16px 14px; padding: 18px 18px 20px;
  background: #26333F; border-radius: 16px; text-align: center;
}

/* ── 分頁切換（投票 / 提名）── */
/* 分頁列：圓角膠囊按鈕；選中橘底白字；往下捲動時 sticky 置頂（不被捲走）*/
.vt-tabs[data-v-a23710d8] {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 8px; margin: 0 0 12px; padding: 10px 16px;
  background: var(--vt-bg); border-bottom: 1px solid var(--vt-hair);
}
.vt-tab[data-v-a23710d8] {
  flex: 1; min-height: 42px; border: 1.5px solid #E2B48A; border-radius: 999px;
  background: #fff; color: var(--vt-page-dim); font-family: inherit;
  font-size: calc(14.5px * var(--liff-scale, 1)); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.vt-tab.is-active[data-v-a23710d8] {
  background: var(--vt-accent); color: #fff; border-color: var(--vt-accent);
  box-shadow: 0 2px 8px rgba(232,116,42,.3);
}

/* ── 介紹頁 ── */
/* 內容為後台富文字（v-html），需自帶溢位處理：圖片限寬、長字換行、寬表可橫向捲動 */
.vt-intro[data-v-a23710d8] { padding: 0 16px 4px;
}
.vt-intro-body[data-v-a23710d8] {
  font-size: calc(14px * var(--liff-scale, 1)); line-height: 1.75;
  color: var(--vt-page-ink); word-wrap: break-word; overflow-wrap: anywhere;
}
.vt-intro-body[data-v-a23710d8] img { max-width: 100%; height: auto; border-radius: 10px;
}
.vt-intro-body[data-v-a23710d8] p { margin: 0 0 10px;
}
.vt-intro-body[data-v-a23710d8] a { color: var(--vt-accent-deep); word-break: break-all;
}
.vt-intro-body[data-v-a23710d8] table { max-width: 100%; display: block; overflow-x: auto;
}
.vt-intro-body[data-v-a23710d8] * { max-width: 100%;
}
/* 有被退回的提名 → 標籤上一個紅點提醒 */
.vt-tab-dot[data-v-a23710d8] { width: 7px; height: 7px; border-radius: 50%; background: #DD4B39; flex-shrink: 0;
}
.vt-chip[data-v-a23710d8] {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 5px 12px; font-size: calc(12.5px * var(--liff-scale, 1)); font-weight: 700;
  background: var(--vt-accent); color: #fff;
  font-variant-numeric: tabular-nums;
}
.vt-h1[data-v-a23710d8] {
  font-size: calc(23px * var(--liff-scale, 1)); font-weight: 800; line-height: 1.3;
  margin: 12px 0 7px; letter-spacing: -.015em; color: #fff; text-wrap: balance;
}
.vt-hero-desc[data-v-a23710d8] {
  font-size: calc(13px * var(--liff-scale, 1)); line-height: 1.6;
  color: #B7C0CA; margin: 0; white-space: pre-wrap;
}

/* ── 倒數大方塊（天/時/分）── 在深色頁首卡片內；方塊改淺灰底 + 深色數字（如截圖）*/
.vt-countdown[data-v-a23710d8] { margin: 16px 0 0;
}
.vt-countdown-label[data-v-a23710d8] {
  display: block; font-size: calc(12.5px * var(--liff-scale, 1)); font-weight: 700;
  color: #9AA6B2; margin-bottom: 8px;
}
.vt-cd-boxes[data-v-a23710d8] { display: flex; gap: 10px;
}
.vt-cd-cell[data-v-a23710d8] {
  flex: 1; min-width: 0; background: #EDEFF2; border-radius: 12px;
  padding: 12px 6px 9px; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
}
.vt-cd-cell b[data-v-a23710d8] {
  font-size: calc(30px * var(--liff-scale, 1)); font-weight: 800; line-height: 1;
  color: #1F2A33; font-variant-numeric: tabular-nums;
}
.vt-cd-cell span[data-v-a23710d8] { font-size: calc(11.5px * var(--liff-scale, 1)); font-weight: 600; color: #6B7580;
}
.vt-sect[data-v-a23710d8] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 18px; margin-bottom: 10px;
}
.vt-sect h2[data-v-a23710d8] { font-size: calc(14.5px * var(--liff-scale, 1)); font-weight: 800; margin: 0; color: var(--vt-page-ink);
}
.vt-sect span[data-v-a23710d8] { font-size: calc(12px * var(--liff-scale, 1)); color: var(--vt-page-dim);
}
.vt-empty[data-v-a23710d8] { font-size: calc(14px * var(--liff-scale, 1)); color: var(--vt-page-dim); padding: 0 18px; margin: 0 0 12px;
}

/* ── 頒獎台（排行榜前五名，純 CSS，無 Chart.js）── */
.vt-podium[data-v-a23710d8] { margin: 0 16px 14px; padding: 14px 12px 10px; background: #26333F; border-radius: 16px; box-shadow: var(--vt-lift);
}
.vt-podium-title[data-v-a23710d8] {
  text-align: center; margin: 0 0 10px;
  font-size: calc(14px * var(--liff-scale, 1)); font-weight: 800; color: #F1D98C;
}
.vt-stage[data-v-a23710d8] { display: flex; align-items: flex-end; justify-content: center; gap: 6px;
}
.vt-col[data-v-a23710d8] { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.vt-ava[data-v-a23710d8] {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.vt-pname[data-v-a23710d8] {
  width: 100%; margin-top: 5px; text-align: center; line-height: 1.2;
  font-size: calc(10.5px * var(--liff-scale, 1)); font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-base[data-v-a23710d8] {
  width: 100%; margin-top: 8px; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(15px * var(--liff-scale, 1)); font-weight: 800; color: #20140A;
}
.vt-pmedal[data-v-a23710d8] { font-size: calc(17px * var(--liff-scale, 1));
}
/* 各名次：頭像大小 + 台階高低/顏色 */
.vt-col.r1 .vt-ava[data-v-a23710d8] { width: 58px; height: 58px; font-size: calc(22px * var(--liff-scale, 1)); background: var(--vt-accent);
}
.vt-col.r2 .vt-ava[data-v-a23710d8], .vt-col.r3 .vt-ava[data-v-a23710d8] { width: 48px; height: 48px; font-size: calc(18px * var(--liff-scale, 1)); background: #5B6774;
}
.vt-col.r4 .vt-ava[data-v-a23710d8], .vt-col.r5 .vt-ava[data-v-a23710d8] { width: 40px; height: 40px; font-size: calc(15px * var(--liff-scale, 1)); background: #4A5561;
}
.vt-col.r1 .vt-base[data-v-a23710d8] { height: 64px; background: linear-gradient(#E6C34D, #C9A227);
}
.vt-col.r2 .vt-base[data-v-a23710d8] { height: 48px; background: linear-gradient(#AEB4BC, #8E949C);
}
.vt-col.r3 .vt-base[data-v-a23710d8] { height: 38px; background: linear-gradient(#A9724A, #8A5730); color: #fff;
}
.vt-col.r4 .vt-base[data-v-a23710d8], .vt-col.r5 .vt-base[data-v-a23710d8] { height: 22px; background: #33414E; color: #C9C6BE; font-size: calc(13px * var(--liff-scale, 1)); border-radius: 8px;
}

/* ── 候選票券（勾選式，垂直排版：名稱+標籤/名次 → 提名人 → 理由 → 長條 → 投票鈕+票數）── */
.vt-ticket[data-v-a23710d8] {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  width: calc(100% - 32px); margin: 0 16px 10px;
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--vt-card); color: var(--vt-ink);
  border: none; border-radius: 14px; padding: 13px 16px;
  box-shadow: var(--vt-lift);
  transition: background .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.vt-ticket[data-v-a23710d8]:active { transform: scale(.99);
}
.vt-ticket.is-on[data-v-a23710d8] { background: var(--vt-card-on); box-shadow: var(--vt-lift), inset 0 0 0 2px var(--vt-accent);
}
.vt-ticket.is-dim[data-v-a23710d8] { opacity: .62;
}
/* 非投票期：候選卡停用（不可點），但維持全彩以純看排行榜 —— 隱藏 checkbox（見 template v-if）*/
.vt-ticket[data-v-a23710d8]:disabled { cursor: default; opacity: 1;
}
.vt-ticket[data-v-a23710d8]:disabled:active { transform: none;
}
/* 審核中（我的待審提名）：看得到但不能投 —— 不給點擊手勢、稍微降彩 */
.vt-ticket.is-pending[data-v-a23710d8] { cursor: default; background: #FBF9F4; box-shadow: var(--vt-lift), inset 0 0 0 1px var(--vt-line);
}
.vt-ticket.is-pending[data-v-a23710d8]:active { transform: none;
}
/* 兩側撕票口：用與頁面同色的圓形挖出缺口（對齊第一列） */
.vt-ticket[data-v-a23710d8]::before,
.vt-ticket[data-v-a23710d8]::after {
  content: ''; position: absolute; top: 27px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--vt-bg); transform: translateY(-50%);
}
.vt-ticket[data-v-a23710d8]::before { left: -6px;
}
.vt-ticket[data-v-a23710d8]::after { right: -6px;
}

/* 第 1 列：名稱 + 標籤 ／ 右上角名次 */
.vt-row1[data-v-a23710d8] { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.vt-name[data-v-a23710d8] { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.vt-name b[data-v-a23710d8] { font-size: calc(16px * var(--liff-scale, 1)); font-weight: 800; line-height: 1.3;
}
.vt-tag[data-v-a23710d8] {
  display: inline-block; font-style: normal; color: #fff; white-space: nowrap;
  font-size: calc(10.5px * var(--liff-scale, 1)); font-weight: 800;
  border-radius: 8px; padding: 2px 7px; background: var(--vt-accent-deep);
}
.vt-tag.is-mine[data-v-a23710d8] { background: var(--vt-accent-deep);
}
.vt-tag.is-seed[data-v-a23710d8] { background: #B06A16;
}
.vt-tag.is-emp[data-v-a23710d8]  { background: #5B6A67;
}
.vt-rank[data-v-a23710d8] {
  flex-shrink: 0; font-size: calc(12.5px * var(--liff-scale, 1)); font-weight: 800;
  color: var(--vt-muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vt-rank.is-top[data-v-a23710d8] { color: var(--vt-accent-deep);
}
.vt-rank.is-top[data-v-a23710d8]::before { content: '🏆 ';
}

/* 提名人 ／ 命名理由 */
.vt-meta[data-v-a23710d8] {
  font-size: calc(12px * var(--liff-scale, 1)); color: var(--vt-muted);
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-why[data-v-a23710d8] {
  font-size: calc(11.5px * var(--liff-scale, 1)); font-style: normal; color: var(--vt-muted);
  display: flex; align-items: flex-start; gap: 4px; line-height: 1.5;
}
.vt-ic[data-v-a23710d8] { font-style: normal; flex-shrink: 0;
}

/* 第 3 列：投票勾選鈕 + 票數 */
.vt-row3[data-v-a23710d8] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px;
}
/* 投票勾選：checkbox 方框 + 文字（點整張卡切換勾選；勾選＝橘底打勾）*/
.vt-check[data-v-a23710d8] {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: calc(13px * var(--liff-scale, 1)); font-weight: 800; color: var(--vt-page-dim);
}
.vt-check-box[data-v-a23710d8] {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--vt-box); background: #fff;
  color: transparent; font-size: calc(14px * var(--liff-scale, 1)); font-weight: 800; line-height: 1;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.vt-check.is-on[data-v-a23710d8] { color: var(--vt-accent-deep);
}
.vt-check.is-on .vt-check-box[data-v-a23710d8] { background: var(--vt-accent); border-color: var(--vt-accent); color: #fff;
}

/* ── 面板（提名、未綁定、錯誤共用）── */
.vt-panel[data-v-a23710d8] {
  background: var(--vt-card); color: var(--vt-ink);
  border-radius: 14px; padding: 15px; margin: 12px 16px 0;
  box-shadow: var(--vt-lift);
}
.vt-panel-title[data-v-a23710d8] { font-size: calc(15px * var(--liff-scale, 1)); font-weight: 800; margin: 0 0 9px;
}
.vt-panel-desc[data-v-a23710d8] { font-size: calc(13.5px * var(--liff-scale, 1)); line-height: 1.65; color: var(--vt-muted); margin: 0;
}
.vt-sub[data-v-a23710d8] { padding: 10px 0; border-bottom: 1px solid var(--vt-line);
}
.vt-sub[data-v-a23710d8]:last-child { border-bottom: none; padding-bottom: 0;
}
.vt-sub-row[data-v-a23710d8] { display: flex; align-items: center; justify-content: space-between; gap: 9px;
}
.vt-sub-name[data-v-a23710d8] { font-size: calc(14.5px * var(--liff-scale, 1)); font-weight: 700; word-break: break-all;
}
.vt-state[data-v-a23710d8] { font-size: calc(10.5px * var(--liff-scale, 1)); font-weight: 800; border-radius: 8px; padding: 3px 8px; white-space: nowrap;
}
.vt-state.is-wait[data-v-a23710d8] { background: #E7E2D6; color: #4C463A;
}
.vt-state.is-ok[data-v-a23710d8] { background: var(--vt-accent-deep); color: #fff;
}
.vt-state.is-no[data-v-a23710d8] { background: #FBE3E0; color: #8E2015;
}
.vt-reject[data-v-a23710d8] { font-size: calc(12px * var(--liff-scale, 1)); color: #8E2015; font-weight: 700; line-height: 1.55; margin: 7px 0 0;
}
.vt-field-group[data-v-a23710d8] { margin-top: 12px;
}
.vt-label[data-v-a23710d8] { display: block; font-size: calc(13.5px * var(--liff-scale, 1)); font-weight: 700; color: #3E4A48; margin-bottom: 6px;
}
.vt-req[data-v-a23710d8] { color: #A8420A;
}
.vt-label-sub[data-v-a23710d8] { font-weight: 500; color: var(--vt-muted); font-size: calc(11.5px * var(--liff-scale, 1));
}
/* 提名名稱可用/禁用規則 */
.vt-rules[data-v-a23710d8] { margin-top: 8px; display: flex; flex-direction: column; gap: 3px;
}
.vt-rule[data-v-a23710d8] { margin: 0; font-size: calc(12px * var(--liff-scale, 1)); line-height: 1.5;
}
.vt-rule.ok[data-v-a23710d8] { color: #2E7D4F;
}
.vt-rule.no[data-v-a23710d8] { color: #8E2015;
}
.vt-field[data-v-a23710d8] {
  width: 100%; border: 1.5px solid var(--vt-line); border-radius: 10px; padding: 12px 14px;
  font-size: calc(15px * var(--liff-scale, 1)); color: var(--vt-ink); background: #fff;
  font-family: inherit; outline: none;
}
.vt-field[data-v-a23710d8]:focus { border-color: var(--vt-accent);
}
.vt-textarea[data-v-a23710d8] { resize: vertical; line-height: 1.6;
}
.vt-hint[data-v-a23710d8] { display: block; font-size: calc(12px * var(--liff-scale, 1)); color: var(--vt-muted); margin-top: 6px;
}
.vt-hint.is-over[data-v-a23710d8] { color: #8E2015; font-weight: 700;
}
.vt-warn[data-v-a23710d8] { display: block; font-size: calc(12.5px * var(--liff-scale, 1)); color: #8E2015; font-weight: 700; margin-top: 8px;
}

/* ── 底部送出列：固定於畫面底部的 footer（投票期才出現）── */
.vt-dock[data-v-a23710d8] {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--vt-hair);
  padding: 11px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -3px 14px rgba(0, 0, 0, .07);
}
/* 內容底部墊高，避免最後一張候選卡被固定 footer 蓋住 */
.vt-dock-spacer[data-v-a23710d8] { height: 116px;
}
.vt-dock-row[data-v-a23710d8] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px;
}
.vt-dock-left[data-v-a23710d8] { font-size: calc(13.5px * var(--liff-scale, 1)); font-weight: 700; color: var(--vt-page-dim);
}
.vt-dock-left b[data-v-a23710d8] {
  color: var(--vt-page-ink); font-size: calc(17px * var(--liff-scale, 1)); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.vt-pips[data-v-a23710d8] { display: flex; gap: 5px;
}
.vt-pip[data-v-a23710d8] { width: 20px; height: 7px; border-radius: 4px; background: var(--vt-track); transition: background .25s var(--ease);
}
.vt-pip.is-on[data-v-a23710d8] { background: var(--vt-accent);
}

/* 主 CTA 用品牌深橘（--vt-accent-deep），對比 7.6:1，比一般品牌橘（4.5:1 邊緣）給司機戶外用更穩 */
.vt-cta[data-v-a23710d8] {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; border: none; border-radius: 13px;
  background: var(--vt-accent-deep); color: #fff; font-family: inherit;
  font-size: calc(16.5px * var(--liff-scale, 1)); font-weight: 800; cursor: pointer;
  transition: filter .18s var(--ease), transform .12s var(--ease);
}
.vt-cta[data-v-a23710d8]:active { transform: scale(.99);
}
/* 停用時：#F0EFEC 底 + #6E6A63 字 = 5.5:1，仍讀得到「請先選擇名字」這行下一步指示 */
.vt-cta[data-v-a23710d8]:disabled { background: #F0EFEC; color: var(--vt-page-dim); cursor: default;
}
.vt-cta.is-sent[data-v-a23710d8] { background: var(--vt-ok);
}
.vt-cta-inline[data-v-a23710d8] { margin-top: 12px; min-height: 46px; font-size: calc(15px * var(--liff-scale, 1));
}
.vt-note[data-v-a23710d8] {
  font-size: calc(12px * var(--liff-scale, 1)); color: var(--vt-page-dim);
  text-align: center; margin: 8px 0 0; min-height: 1em;
}
@media (prefers-reduced-motion: reduce) {
.vt-ticket[data-v-a23710d8], .vt-check-box[data-v-a23710d8], .vt-pip[data-v-a23710d8], .vt-cta[data-v-a23710d8] { transition-duration: .01ms;
}
}