/* ZYVARENO Digital — 樣式表
 *
 * 設計方向（總指令第四節）：深色科技風 + 清晰的淺色內容區塊。
 * 重點放在可讀性與手機體驗，不是視覺特效。
 *
 * 色彩對比全部以 WCAG AA（一般文字 4.5:1）為下限檢查過，
 * 不使用「看起來還行」的淺灰字。
 */

:root {
  --bg: #0b0e13;
  --bg-2: #10141b;
  --panel: #161b24;
  --panel-2: #1c222d;
  --paper: #f7f8fa;        /* 淺色內容區塊 */
  --paper-ink: #1a1f27;
  --paper-muted: #5a6373;
  --paper-line: #e2e5ea;

  --ink: #eef1f5;
  --ink-soft: #c3cad4;
  --muted: #8b95a3;

  --line: #262d39;
  --line-soft: #1c222c;
  --line-strong: #39424f;

  /* 取自商標本身的顏色：亮青 #10e0f0 到深藍 #0070b0 的漸層。 */
  --brand: #35cfe8;
  --brand-dark: #1286c0;
  --brand-deep: #0070b0;
  --brand-glow: rgba(53, 207, 232, 0.16);
  --brand-grad: linear-gradient(135deg, #35cfe8, #0070b0);
  --accent: #f0a05a;
  --ok: #4caf7d;
  --warn: #e0b341;
  --bad: #e2645f;

  --wrap: 1140px;
  --radius: 10px;
  --radius-sm: 6px;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.75 var(--sans);
  letter-spacing: .01em;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 14px; font-weight: 700; }
h1 { font-size: 34px; letter-spacing: -.01em; }
h2 { font-size: 24px; margin-top: 36px; }
h3 { font-size: 18px; margin-top: 24px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 28px; padding-bottom: 60px; }

/* --- 導覽列 -------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 14, 19, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px; flex-wrap: wrap;
}
/* 頁首商標。用站長提供的圖，不另外用文字排一個假的。 */
.logo { display: flex; align-items: center; flex: none; }
.logo:hover { text-decoration: none; opacity: .88; }
.logo img { height: 34px; width: auto; display: block; }
@media (max-width: 480px) { .logo img { height: 28px; } }

/* 分類鈕已經靠 margin-left:auto 推到右邊，nav 跟在它後面即可。
   兩個都設 auto 的話剩餘空間會被平分，分類鈕會卡在畫面中間。 */
.nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.nav a {
  color: var(--ink-soft); font-size: 14px; padding: 8px 11px;
  border-radius: var(--radius-sm);
}
.nav a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.nav a.cta {
  background: var(--brand-grad); color: #04222f; font-weight: 700;
  padding: 8px 16px; margin-left: 6px;
}
.nav a.cta:hover { filter: brightness(1.12); text-decoration: none; }

/* 客服鈕。跟「服務項目」「選單」並排，手機上也一直看得到。
   margin-left:auto 是備援：分類鈕沒東西可列時它不會被渲染出來，
   那時候推開空白的責任就落在客服鈕身上，否則整排會黏在商標旁邊。 */
.navhelp {
  flex: none; margin-left: auto;
  color: var(--ink); font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); white-space: nowrap;
}
.navhelp:hover {
  border-color: var(--brand); color: var(--brand); text-decoration: none;
}
.drop ~ .navhelp { margin-left: 0; }

/* 手機選單：用 details 做，不需要 JavaScript。
   沒有 JS 就不會有「JS 載入失敗選單打不開」這種問題。 */
.navtoggle { display: none; flex: none; }
.navtoggle summary {
  list-style: none; cursor: pointer; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: 14px;
}
.navtoggle summary::-webkit-details-marker { display: none; }

/* --- 麵包屑 -------------------------------------------------------------- */

.crumbs {
  font-size: 13px; color: var(--muted); padding: 14px 0 0;
}
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 6px; opacity: .5; }

/* --- 區塊標頭 ------------------------------------------------------------ */

.page-head { margin: 10px 0 30px; }
.eyebrow {
  font-size: 12px; letter-spacing: .22em; color: var(--brand);
  text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}
.lede { font-size: 17px; color: var(--ink-soft); max-width: 62ch; }

/* --- 首頁英雄區 ---------------------------------------------------------- */

.hero {
  padding: 56px 0 44px;
  background:
    radial-gradient(900px 380px at 15% -10%, var(--brand-glow), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--line);
}
.hero h1 { font-size: 42px; max-width: 18ch; margin-bottom: 18px; }
.hero .lede { font-size: 18px; max-width: 54ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--brand-grad); color: #04222f; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-small { padding: 7px 14px; font-size: 13px; }
.btn-danger { background: var(--bad); color: #fff; }

.hero-stats {
  display: flex; gap: 32px; flex-wrap: wrap; margin-top: 36px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.hero-stats div b { display: block; font-size: 26px; color: var(--ink); }
.hero-stats div small { color: var(--muted); font-size: 13px; }
/* 站長 2026-10-25：電腦版首頁右半邊放兩張作品截圖疊著，文字不再孤單地靠左。手機不顯示。 */
.hero-art { display: none; }
@media (min-width: 1100px) {
  .hero .wrap {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: 56px; align-items: center;
  }
  .hero .wrap > .eyebrow, .hero .wrap > h1, .hero .wrap > .lede,
  .hero .wrap > .hero-actions, .hero .wrap > .hero-stats { grid-column: 1; }
  .hero-stats { margin-top: 30px; }
  .hero-art {
    display: block; grid-column: 2; grid-row: 1 / span 5; position: relative;
    height: 420px; align-self: center;
  }
  .hero-shot { position: absolute; display: block; width: 72%; }
  .hero-shot img {
    display: block; width: 100%; height: auto; border-radius: 14px;
    border: 1px solid var(--line-strong); background: var(--bg-2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  }
  .hero-shot:first-child { right: 0; top: 0; transform: rotate(3deg); z-index: 1; }
  .hero-shot:last-child { left: 0; bottom: 0; transform: rotate(-4deg); z-index: 2; }
  .hero-shot:hover { z-index: 3; }
}

/* --- 卡片 ---------------------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

a.card { color: inherit; display: block; transition: border-color .15s, transform .15s; }
a.card:hover {
  border-color: var(--brand); text-decoration: none; transform: translateY(-2px);
}

.card-tag {
  display: inline-block; font-size: 11px; letter-spacing: .1em;
  color: var(--brand); border: 1px solid var(--line-strong);
  padding: 2px 8px; border-radius: 99px; margin-bottom: 10px;
}
.card .price { font-size: 19px; font-weight: 700; color: var(--ink); }
.card .meta { font-size: 13px; color: var(--muted); }

/* 淺色內容區塊 */
.paper {
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--radius); padding: 26px 28px; margin: 24px 0;
}
.paper h2, .paper h3 { color: var(--paper-ink); margin-top: 0; }
.paper a { color: var(--brand-dark); }
.paper .muted, .paper small { color: var(--paper-muted); }
.paper hr { border: 0; border-top: 1px solid var(--paper-line); margin: 20px 0; }

/* --- 流程 ---------------------------------------------------------------- */

.steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; background: var(--panel);
}
.step b { display: block; font-size: 12px; color: var(--brand); letter-spacing: .14em; }
.step h3 { margin: 6px 0 8px; font-size: 16px; }
.step p { margin: 0; font-size: 14px; color: var(--ink-soft); }
/* 合作流程每一步的產出。跟說明分開一行，客人一眼看到這一步會拿到什麼。 */
.step p.step-gets { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink); }
.step-gets span { display: block; font-size: 12px; color: var(--brand); letter-spacing: .08em; margin-bottom: 2px; }
.pay-split { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.pay-split th, .pay-split td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--paper-line); }
.pay-split td:nth-child(2) { font-weight: 700; white-space: nowrap; }

/* --- 表格 ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 480px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; }
tbody tr:hover { background: var(--panel); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 徽章 ---------------------------------------------------------------- */

.badge {
  display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--line-strong); color: var(--ink-soft); white-space: nowrap;
}
.badge-ok { border-color: var(--ok); color: var(--ok); }
.badge-warn { border-color: var(--warn); color: var(--warn); }
.badge-bad { border-color: var(--bad); color: var(--bad); }
.badge-info { border-color: var(--brand); color: var(--brand); }
.badge-test { border-color: var(--accent); color: var(--accent); }

/* --- 表單 ---------------------------------------------------------------- */

form.stack { max-width: 640px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; }
.field label .req { color: var(--bad); }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* 站長 2026-10-29：包在 :where() 裡不加優先級，工具自己用 class 設的字級才會生效；
   觸控裝置至少 16px，iPhone 點輸入框才不會自動放大畫面（電腦維持 14.5px）。 */
:where(input[type=text], input[type=email], input[type=url], input[type=tel], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=time], input[type=datetime-local], input:not([type]), select, textarea) {
  width: 100%; padding: 10px 12px; font: inherit; font-size: max(16px, 1em);
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) {
  :where(input[type=text], input[type=email], input[type=url], input[type=tel], input[type=password], input[type=number],
  input[type=date], input[type=search], input[type=time], input[type=datetime-local], input:not([type]), select, textarea) { font-size: 14.5px; }
}
textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow);
}
.paper input, .paper select, .paper textarea {
  background: #fff; color: var(--paper-ink); border-color: var(--paper-line);
}
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; }
.check input { margin-top: 4px; flex: none; }

/* 蜜罐欄位。用 position 移出畫面而不是 display:none——
   有些機器人會跳過 display:none 的欄位。 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.errors {
  border: 1px solid var(--bad); border-left-width: 3px; border-radius: var(--radius-sm);
  background: rgba(226, 100, 95, .08); padding: 14px 16px; margin-bottom: 20px;
}
.errors ul { margin: 0; padding-left: 20px; }
.errors li { color: #f3a9a5; font-size: 14px; }

.notice {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--brand);
  background: var(--panel); border-radius: var(--radius-sm);
  padding: 15px 18px; margin: 20px 0; font-size: 14px; color: var(--ink-soft);
}
.notice b { color: var(--ink); }
.notice-warn { border-left-color: var(--warn); }
.notice-ok { border-left-color: var(--ok); }

/* --- 定義清單 ------------------------------------------------------------ */

.spec { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; font-size: 14.5px; margin: 0 0 20px; }
.spec dt { color: var(--muted); font-size: 13.5px; }
.spec dd { margin: 0; }

/* --- 頁尾 ---------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding: 40px 0 50px; margin-top: 50px; font-size: 14px;
}
.footer-cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer h4 { font-size: 12.5px; letter-spacing: .14em; color: var(--muted); margin-bottom: 12px; }
.footer a { display: block; color: var(--ink-soft); padding: 3px 0; }
.footer-base {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* 站長 2026-10-23：服務頁「做出來大概的樣子」左右滑動 */
.svc-gallery {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 26px 0 6px; padding-bottom: 10px;
}
.svc-gallery figure { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.svc-gallery img {
  display: block; height: 230px; width: auto; max-width: 86vw; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2);
}
.svc-gallery figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }
.svc-gallery-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.showcase-card { flex: 0 0 auto; scroll-snap-align: start; color: inherit; text-decoration: none; }
.showcase-card span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); max-width: 345px; }
.showcase-card b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.showcase-card:hover img { border-color: var(--brand, #1aa3d9); }
.home-showcase { margin-top: 14px; }
@media (min-width: 760px) { .svc-gallery img { height: 320px; } .svc-gallery-hint { display: none; } }

/* 站長 2026-10-23：頁尾聯絡資訊（後台填了才顯示） */
.footer-contact {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 26px;
  color: var(--ink-soft); font-size: 13.5px;
}
.footer-contact b { color: var(--muted); font-weight: 500; margin-right: 4px; }
.footer-contact a { display: inline; padding: 0; }

/* --- 後台 ---------------------------------------------------------------- */

/* 會員中心與客戶網站後台用的橫向選單（總後台改成左側直列，見上方）。 */
.admin-nav { display: flex; gap: 1px; flex-wrap: wrap; font-size: 13px; }
.admin-nav a { color: var(--ink-soft); padding: 6px 9px; border-radius: 4px; }
.admin-nav a:hover { background: var(--panel-2); text-decoration: none; }
.admin-nav a.on { background: var(--brand-dark); color: #fff; }

/* 後台外框：左邊直列選單、右邊內容。手機上選單收成一顆按鈕。 */
.admin-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.admin-side {
  background: #121720; border-right: 1px solid var(--line-strong);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-side-head { padding: 16px 12px 24px; }
.admin-side .logo { display: flex; align-items: center; padding: 2px 8px 14px; }
.admin-side .logo:hover { text-decoration: none; }
.admin-side .logo img { height: 24px; width: auto; }
.admin-side .logo b { font-size: 12px; color: var(--muted); font-weight: 600;
  letter-spacing: .14em; margin-left: 9px; }
.admin-side .admin-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1px; font-size: 14px; }
.admin-nav-group {
  margin: 16px 8px 5px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; color: var(--muted);
}
.admin-nav-group:first-child { margin-top: 2px; }
.admin-side .admin-nav a {
  color: var(--ink-soft); padding: 7px 10px; border-radius: 6px;
  border-left: 3px solid transparent;
}
.admin-side .admin-nav a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.admin-side .admin-nav a.on {
  background: rgba(18,134,192,.18); color: #fff;
  border-left-color: var(--brand); font-weight: 600;
}
.admin-logout { margin: 22px 4px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-logout .btn { width: 100%; }
.admin-main { padding: 26px 30px 60px; min-width: 0; }

/* 手機：選單從左側改成頂部，按「選單」才展開。 */
.admin-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.admin-nav-btn { display: none; }
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .admin-side { position: sticky; top: 0; z-index: 60; height: auto;
    border-right: 0; border-bottom: 1px solid var(--line-strong); overflow: visible; }
  .admin-side-head { display: flex; flex-wrap: wrap; align-items: center;
    padding: 10px 16px; gap: 10px; }
  .admin-side .logo { padding: 0; margin-right: auto; }
  .admin-nav-btn {
    display: inline-block; padding: 8px 14px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--line-strong); color: var(--ink); font-size: 14px;
    user-select: none;
  }
  .admin-nav-toggle:focus-visible + .admin-nav-btn { outline: 2px solid var(--brand); outline-offset: 2px; }
  .admin-nav-toggle:checked + .admin-nav-btn { border-color: var(--brand); color: var(--brand); }
  .admin-side .admin-nav { display: none; flex-basis: 100%; max-height: calc(100vh - 70px);
    overflow-y: auto; padding: 4px 0 8px; }
  .admin-nav-toggle:checked ~ .admin-nav { display: flex; }
  .admin-side .admin-nav a { padding: 11px 12px; font-size: 15px; }   /* 手指點得到 */
  .admin-main { padding: 18px 16px 48px; }
  /* 後台表格欄位多，手機上讓表格自己左右滑，不撐破整頁。 */
  .admin-main table { display: block; overflow-x: auto; max-width: 100%; }
}

.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 22px; }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat b { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.stat strong { font-size: 26px; display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }

.admin-section { margin-bottom: 34px; }
.admin-section > h2 { margin-top: 0; font-size: 19px; }

details.box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; margin-bottom: 16px; background: var(--panel);
}
details.box > summary {
  padding: 13px 18px; cursor: pointer; font-weight: 600; font-size: 14.5px;
}
details.box > div { padding: 0 18px 18px; }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; min-width: 120px; }

/* --- 小工具 -------------------------------------------------------------- */

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mb0 { margin-bottom: 0; }
.mt0 { margin-top: 0; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.count { font-size: 13px; font-weight: 400; color: var(--muted); }
.empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 28px; text-align: center; color: var(--muted);
}

/* --- 響應式 -------------------------------------------------------------- */

@media (max-width: 860px) {
  h1 { font-size: 27px; }
  .hero { padding: 36px 0 32px; }
  .hero h1 { font-size: 30px; }
  .hero .lede { font-size: 16px; }
  .spec { grid-template-columns: 1fr; gap: 2px 0; }
  .spec dt { margin-top: 10px; }
}

/* 平板也用漢堡選單。
   斷點設在 760 的時候，768 寬的平板會顯示完整選單但塞不下，
   導覽列就折成兩行、標題列變成 101 像素高。
   折兩行比收進漢堡難用，所以提早切換。 */
@media (max-width: 920px) {
  .masthead .wrap { min-height: 56px; }
  .navtoggle { display: block; }
  .nav {
    display: none; width: 100%; flex-direction: column; gap: 0;
    padding: 6px 0 12px; margin-left: 0;
  }
  .navtoggle[open] ~ .nav,
  .masthead:has(.navtoggle[open]) .nav { display: flex; }
  .nav a { padding: 11px 4px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a.cta { margin: 10px 0 0; text-align: center; border-radius: var(--radius-sm); }
  /* 標題列上要並排商標、服務項目、客服、選單四樣，留白得收窄才排得下。 */
  .masthead .wrap { gap: 10px; }
  .navhelp { padding: 8px 11px; font-size: 13.5px; }
  .footer-base { flex-direction: column; gap: 8px; }
  .paper { padding: 20px; }
}

@media (max-width: 480px) {
  body { font-size: 14.5px; }
  .wrap { padding: 0 15px; }
  h1 { font-size: 24px; }
  .hero h1 { font-size: 25px; }
  .btn { width: 100%; text-align: center; }
  .hero-actions { flex-direction: column; }
  /* 手機上三格固定並排，不要變成兩個加一個掉到下一行。 */
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hero-stats div b { font-size: 22px; }
  .hero-stats div small { font-size: 12px; line-height: 1.45; display: block; }
  /* 窄螢幕（360 以下）四個東西還是排不下，客服鈕的留白再收一次。
     收到這裡就夠了——再窄就讓它折行，折行比字擠成一團好讀。 */
  .masthead .wrap { gap: 8px; }
  .navhelp { padding: 7px 9px; }
}

/* 窄螢幕的標題列。「服務項目」收成「服務」，四個按鈕才排得下一行。
   折成兩行的話「選單」會自己掉到左下角，看起來像壞掉。 */
.only-narrow { display: none; }
/* 站長 2026-10-25：標題固定兩行（逗號前一行、「一站打造！」一行），行距放鬆，不要擠在一起。
   以前用 text-wrap: balance 會被平均切成三行。 */
.hero h1 { max-width: none; line-height: 1.3; }
.hero h1 .keep { display: block; }
/* 服務頁「不包含」縮成一行一項，不要一大段。 */
ul.compact li { margin: 2px 0; }
@media (max-width: 400px) {
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  .navtoggle summary { padding: 7px 9px; font-size: 13.5px; }
}

@media print {
  .masthead, .footer, .nav, .admin-bar, .admin-nav, .no-print, .chat-fab, .chat-panel, form, .notice { display: none !important; }
  body { background: #fff; color: #000; }
  .paper, .card, .table-wrap { border: 0; box-shadow: none; }
}

/* --- 分類標籤與區段跳轉 -------------------------------------------------- */
/*
 * 標籤是真的連結，不是靠 JavaScript 切換。每一類都有自己的網址，
 * 可以加書籤、可以分享、搜尋引擎也收得到。
 * 手機上變成可橫向滑動的一排，不會折成好幾行把半個畫面吃掉。
 */
.tabs {
  display: flex; gap: 7px; margin: 0 0 26px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabs-wrap { flex-wrap: wrap; overflow-x: visible; }
.tab {
  flex: none; white-space: nowrap;
  padding: 7px 14px; border-radius: 99px; font-size: 14px;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
  background: var(--panel); transition: border-color .15s, color .15s;
}
.tab:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.tab.on {
  background: var(--brand-grad); border-color: transparent;
  color: #04222f; font-weight: 700;
}
.tab-all { border-style: dashed; color: var(--brand); }

/* 錨點跳轉時，標題不要被固定的頁首蓋住。 */
h2[id], h3[id], div[id] { scroll-margin-top: 80px; }

/* --- 服務清單（服務總覽用）------------------------------------------------ */
/*
 * 不用表格。四欄表格在手機上會把服務名稱擠成一個字一行，還要左右捲。
 * 改成每項一列：窄螢幕上下堆疊，寬螢幕才左右分開。
 */
.svc-list {
  border-top: 1px solid var(--line); margin: 0 0 24px;
}
.svc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px 24px; padding: 15px 2px;
  border-bottom: 1px solid var(--line); color: inherit;
}
.svc-row:hover { background: var(--panel); text-decoration: none; }
.svc-main { min-width: 0; flex: 1 1 auto; }
.svc-main b {
  display: block; font-size: 16px; color: var(--brand);
  margin-bottom: 3px; line-height: 1.45;
}
.svc-row:hover .svc-main b { text-decoration: underline; }
.svc-sub {
  display: block; font-size: 13.5px; color: var(--muted);
  line-height: 1.6; max-width: 56ch;
}
.svc-meta {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 16px;
  white-space: nowrap;
}
.svc-cat { font-size: 12.5px; color: var(--muted); }
.svc-price {
  font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.svc-lead { font-size: 12.5px; color: var(--muted); }

/* --- 緊湊的流程列 -------------------------------------------------------- */
.flow {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.flow li {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 9px 14px;
}
.flow li b { color: var(--brand); font-size: 12px; letter-spacing: .1em; }
.flow li span { font-size: 14px; }

@media (max-width: 760px) {
  /* 分類標籤改成換行。只有六個，橫向捲反而會讓人以為右邊沒東西了。 */
  .tabs { flex-wrap: wrap; overflow-x: visible; }
  .tab { font-size: 13.5px; padding: 6px 12px; }

  /* 服務清單堆疊：名稱與說明在上，分類、價格、工期在下排成一行。 */
  .svc-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .svc-meta {
    flex-wrap: wrap; gap: 6px 14px; white-space: normal;
    padding-top: 2px; border-top: 1px dashed var(--line-soft);
  }
  .svc-price { font-size: 14.5px; }
}

/* --- 服務分類下拉 -------------------------------------------------------- */
/*
 * 放在 nav 外面，跟「選單」並排。分類是最常用的入口，
 * 塞進漢堡選單裡等於多逼使用者點一次。
 * 用 details/summary 做，不需要 JavaScript。
 */
.masthead .wrap { position: relative; }

.drop { flex: none; margin-left: auto; }
.drop > summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--ink); font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); white-space: nowrap;
}
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::after {
  content: '▾'; font-size: 10px; margin-left: 6px; opacity: .8;
  display: inline-block; transition: transform .15s;
}
.drop[open] > summary::after { transform: rotate(180deg); }
.drop > summary:hover { border-color: var(--brand); color: var(--brand); }
.drop[open] > summary {
  border-color: transparent; background: var(--brand-grad); color: #04222f;
}

.drop-panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 70;
  min-width: 680px; max-width: min(94vw, 980px);
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px 16px;
  /* 站長 2026-10-25：分類變多後面板比螢幕高，電腦版也要能往下捲，不然下面幾類看不到 */
  max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain;
}
.drop-grid {
  display: grid; gap: 18px 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* 服務連結。先寫這一條，分類標題再用更高的優先級蓋過去。 */
.drop-col a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  color: var(--ink-soft); font-size: 14px; padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.drop-col a:last-child { border-bottom: 0; }
.drop-col a:hover { color: var(--brand); text-decoration: none; }
.drop-col a span {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* 分類標題。本身也是連結，點了看整類。
   選擇器要寫成 .drop-col a.drop-head——只寫 .drop-head 的話優先級
   比上面的 .drop-col a 低，顏色會被蓋成跟服務名稱一樣的灰白，
   整個面板就看不出層次了。 */
.drop-col a.drop-head {
  display: block; font-size: 15px; letter-spacing: .06em;
  color: var(--brand); font-weight: 800;
  margin-bottom: 4px; padding: 0 0 8px;
  border-bottom: 2px solid var(--brand-dark);
}
.drop-col a.drop-head:hover {
  text-decoration: none; filter: brightness(1.2);
}
.drop-col a.drop-more {
  font-size: 12.5px; color: var(--muted); border-bottom: 0;
}
.drop-all {
  display: block; margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--line); font-size: 13.5px; color: var(--brand);
}

@media (max-width: 760px) {
  /* 手機：「分類」與「選單」並排在標題列上，面板往下展開蓋滿寬度。 */
  .drop { margin-left: auto; }
  /* 手機上字距縮一點、留白收窄，讓「服務項目」四個字跟商標和選單排得下。 */
  .drop > summary { padding: 8px 11px; font-size: 13.5px; letter-spacing: 0; }
  .drop-panel {
    left: 15px; right: 15px; min-width: 0; max-width: none;
    top: calc(100% + 8px);
    max-height: calc(100vh - 140px); overflow-y: auto;
  }
  .drop-grid { grid-template-columns: 1fr; gap: 16px; }
  .drop-col a { padding: 8px 0; }
}

/* --- 作品範例 ------------------------------------------------------------ */
.case-card { padding-top: 0; overflow: hidden; }
.case-card .badge:first-of-type { margin-top: 16px; }
.case-img {
  display: block; width: calc(100% + 42px); max-width: none; margin: 0 -21px 4px;   /* max-width:none：全站 img 上限 100% 會讓右邊缺一截 */
  /* 站長 2026-10-25：封面整張顯示，不裁切。老虎機封面是直的（400×600）、版型示範是橫的（800×500），
     各照自己的比例；同一列都是同一種，所以高度會對齊。 */
  height: auto; aspect-ratio: auto; object-fit: unset;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
@media (max-width: 480px) {
  .case-img { width: calc(100% + 42px); margin: 0 -21px 4px; }
}

/* --- 價格分段 ------------------------------------------------------------ */
/*
 * 服務內容不同、價格不同。三欄並列讓客戶自己比，
 * 不用來回捲動猜差在哪。窄螢幕自動堆成一欄。
 */
.tiers {
  display: grid; gap: 14px; margin: 0 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
}
.tier {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 20px 20px 18px;
}
.tier-pick {
  border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-glow);
}
.tier-flag {
  position: absolute; top: -10px; left: 20px;
  background: var(--brand-grad); color: #04222f;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 99px;
}
.tier h3 { margin: 0 0 6px; font-size: 17px; }
.tier-price {
  font-size: 26px; font-weight: 800; color: var(--ink);
  margin: 0 0 14px; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.tier-price small {
  font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 2px;
}
.tier-quote { font-size: 20px; color: var(--ink-soft); }
/* 0 元是真的免費，不是沒填價格。用品牌色跟報價制區分開。 */
.tier-free { font-size: 26px; color: var(--brand); font-weight: 700; }
.tier ul {
  margin: 0 0 14px; padding-left: 18px; font-size: 13.5px;
  color: var(--ink-soft); line-height: 1.65;
}
.tier ul li { margin-bottom: 5px; }
.tier-limit {
  font-size: 12.5px; color: var(--muted); margin: 0 0 14px;
  padding-top: 10px; border-top: 1px solid var(--line-soft); line-height: 1.6;
}
/* 站長要的「紅字」。純紅在深色底上對比不夠、看起來也像警告，
   改用偏暖的珊瑚紅：一樣跳得出來，語氣卻是「好商量」而不是「注意」。 */
.tier-note {
  font-size: 12.5px; color: #ff9b8a; margin: 0 0 14px;
  line-height: 1.6;
}
.tier-cta { margin-top: auto; text-align: center; }

@media (max-width: 480px) {
  .tier-price { font-size: 23px; }
}
/* 站長 2026-10-27：服務頁的方案卡排成一排、左右滑動（卡片多的時候不再排成好幾列）。
   上面留 12px，「我們建議這個」的標籤才不會被捲動框切掉。 */
.tiers-scroll {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 12px 2px 12px; margin-top: -12px;
}
.tiers-scroll .tier { flex: 1 0 min(280px, 82vw); scroll-snap-align: start; }   /* 卡片少、放得下時撐滿整排 */
.tiers-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
/* 左右按鈕（static/tiers.js 加上去的）：只在有滑鼠的電腦顯示，手機用手指滑 */
.tiers-wrap { position: relative; }
.tiers-arrow {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;   /* top 由 tiers.js 跟著畫面調整 */
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 26px; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.tiers-arrow:hover { border-color: var(--brand); color: var(--brand); }
.tiers-arrow-prev { left: -14px; }
.tiers-arrow-next { right: -14px; }
@media (hover: hover) and (pointer: fine) {
  .tiers-arrow { display: block; }
  .tiers-arrow[hidden] { display: none; }
}
@media (min-width: 760px) { .tiers-hint:not(.tiers-hint-wide) { display: none; } }

/* --- 服務頁最上面的三個數字 ---------------------------------------------- */
/* 固定四欄。用 auto-fit 的話寬螢幕會多出空軌道，
   四張卡被擠在左邊、右邊留一片空白。 */
.facts {
  display: grid; gap: 12px; margin: 0 0 26px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .facts { grid-template-columns: 1fr; } }
.fact {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 14px 16px;
}
.fact b {
  display: block; font-size: 12px; color: var(--muted);
  font-weight: 500; margin-bottom: 4px;
}
.fact strong {
  display: block; font-size: 19px; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.fact small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.fact-cta {
  background: var(--brand-grad); border-color: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.fact-cta strong, .fact-cta small { color: #04222f; }
.fact-cta small { opacity: .8; }
.fact-cta:hover { filter: brightness(1.1); text-decoration: none; }

/* --- 價格頁：依服務分組 -------------------------------------------------- */
.plan-block { margin: 0 0 34px; }
.plan-block > h3 {
  margin: 0 0 12px; font-size: 18px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.plan-block .tiers { margin-bottom: 0; }

/* 後台首頁的租戶數字。需要動手的項目用警示色，
   數字是 0 的不要搶眼——每天看的東西，重點必須一眼就跳出來。 */
.stat-warn strong { color: #ff9b8a; }
.stat-warn { border-color: #ff9b8a; }

/* 開站精靈的行業選擇。用大一點的點擊區域——
   這一頁多半是在手機上填的，小小的 radio 很難點。 */
.pick-group { border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin: 0 0 12px; }
.pick-group legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.pick { display: inline-block; margin: 4px 6px 4px 0; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick span { display: inline-block; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: 14px; }
.pick input:checked + span { border-color: var(--brand);
  background: var(--brand); color: #04222b; font-weight: 700; }
.pick input:focus-visible + span { outline: 2px solid var(--brand);
  outline-offset: 2px; }

/* 站長 2026-10-25：自助開站精靈 */
.wiz-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; counter-reset: wiz; flex-wrap: wrap; }
.wiz-steps li { counter-increment: wiz; font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.wiz-steps li::before { content: counter(wiz) ' '; font-weight: 700; }
.wiz-steps li.wiz-now { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.wiz-steps li.wiz-done { color: var(--ink-soft); border-color: var(--line-strong); }
.wiz-tier { cursor: pointer; }
.wiz-tier input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-tier:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-glow); }
.wiz-tier:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.wiz-pre { white-space: pre-line; }
.wiz-form .lbl { display: block; font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; }
.wiz-form .lbl input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink); }
.wiz-form .lbl input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.wiz-styles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 0 8px; }
.wiz-style { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: var(--panel); cursor: pointer; }
.wiz-style input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-style:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-glow); }
.wiz-style:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.wiz-pic img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); }
.wiz-style b { font-size: 14px; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
.wiz-style b small { font-size: 11px; color: var(--muted); font-weight: 500; }
.wiz-locked { opacity: .55; cursor: not-allowed; }
.wiz-lock { font-size: 12px; color: var(--warn, #e0a94a); }

/* 新手引導清單。做完的項目不顯示，所以這裡只會出現「還沒做的」。 */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.steps li:last-child { border-bottom: 0; }
.steps b { display: block; }
.steps span { display: block; }

/* --- 即時聊天（右下角按鈕、聊天視窗、後台對話頁） ----------------------- */
.chat-fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-grad); color: #04222f;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.chat-fab:hover { filter: brightness(1.1); text-decoration: none; }
/* 站長 2026-10-25：LINE 鈕疊在客服鈕上方，綠色、白字 */
.line-fab {
  position: fixed; right: 18px; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #06c755; color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.line-fab:hover { filter: brightness(1.08); text-decoration: none; }
.line-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.chat-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.chat-dot {
  position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bad); border: 2px solid var(--bg);
}
.chat-panel {
  position: fixed; z-index: 61; right: 18px; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  width: 370px; height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55); overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-panel.chat-inline {
  position: static; width: auto; height: 70vh; min-height: 420px; box-shadow: none;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--brand-grad); color: #04222f;
}
.chat-title { display: flex; flex-direction: column; line-height: 1.3; }
.chat-sub { font-size: 12px; opacity: .85; }
.chat-x {
  background: none; border: 0; color: #04222f; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.chat-log {
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.chat-msg {
  max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 15px; line-height: 1.55;
  background: var(--panel-2); border: 1px solid var(--line); align-self: flex-start;
}
.chat-msg[hidden] { display: none; }
.chat-body { white-space: pre-wrap; word-break: break-word; }
.chat-visitor { align-self: flex-end; background: var(--brand-deep); border-color: transparent; color: #fff; }
.chat-staff { border-color: var(--brand-dark); }
.chat-system, .chat-typing {
  align-self: center; max-width: 95%; background: none; border: 0;
  color: var(--muted); font-size: 13px; text-align: center; padding: 2px 6px;
}
.chat-who { display: block; font-size: 12px; color: var(--brand); margin-bottom: 2px; }
.chat-time { display: block; font-size: 11px; opacity: .65; margin-top: 3px; text-align: right; }
.chat-tools { display: flex; gap: 14px; padding: 6px 14px 0; }
.chat-tools[hidden] { display: none; }
.chat-link {
  background: none; border: 0; padding: 0; color: var(--brand); font-size: 13px;
  cursor: pointer; text-decoration: underline;
}
.chat-link[hidden] { display: none; }
.chat-contact { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.chat-contact[hidden] { display: none; }
.chat-contact input { flex: 1 1 120px; min-width: 0; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; }
.chat-form textarea {
  flex: 1; min-height: 42px; max-height: 120px; resize: vertical; font-size: 16px;
}
.chat-error { color: var(--bad); font-size: 13px; margin: 6px 14px 0; }
.chat-error[hidden] { display: none; }
.chat-note { font-size: 11px; color: var(--muted); margin: 0 14px 10px; }
.chat-fallback .chat-log { max-height: 60vh; border: 1px solid var(--line); border-radius: 10px; }
.chat-fallback form { margin-top: 10px; }

/* 手機：聊天視窗蓋滿整個畫面，用起來像通訊軟體 */
@media (max-width: 600px) {
  .chat-panel:not(.chat-inline) {
    right: 0; bottom: 0; left: 0; top: 0; width: auto; height: auto;
    border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.chat-open, html.chat-open body { overflow: hidden; }
  html.chat-open .chat-fab { display: none; }
}

/* 後台對話頁 */
.chat-log-admin {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2);
  min-height: 240px; overflow: visible;
}
.chat-admin-tools { margin: 0 0 14px; }
.chat-admin-tools .inline-form { flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chat-form-admin { padding: 12px 0 0; }
.nav-count {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--bad); color: #fff; font-size: 12px; text-align: center; line-height: 20px;
}
/* 後台看的是站長視角：自己（站長、自動回覆）的話靠右，訪客靠左 */
.chat-log-admin .chat-visitor { align-self: flex-start; background: var(--panel-2); border-color: var(--line); color: var(--ink); }
.chat-log-admin .chat-staff, .chat-log-admin .chat-ai { align-self: flex-end; }
.chat-log-admin .chat-staff { background: var(--brand-deep); border-color: transparent; color: #fff; }
.chat-log-admin .chat-staff .chat-who { color: #cdefff; }
/* 手機版的按鈕預設是整列寬，聊天輸入列要讓給輸入框 */
.chat-form .btn, .chat-contact .btn { width: auto; flex: 0 0 auto; }
.chat-form textarea { min-width: 0; }

/* 站長 2026-10-26：即時客服自動翻譯（後台看到的翻譯） */
.chat-tr { white-space: pre-wrap; word-break: break-word; font-size: .88em; color: #9a7a1e; margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(150,120,40,.35); }

/* 站長 2026-10-26：作品範例單獨頁面的裝置展示圖 */
.case-mock { margin: 0 0 24px; }
.case-mock img { display: block; width: 100%; height: auto; border-radius: 14px; }
.paper a.btn-primary { color: #04222f; }   /* 站長 2026-10-26：白底卡片裡的主要按鈕字不要被連結顏色蓋掉 */
.case-cta .btn { margin: 0 8px 8px 0; }

/* 站長 2026-10-26：作品範例圖片點一下放大（static/zoom.js） */
img[data-zoom] { cursor: zoom-in; }
.zoom-box {
  position: fixed; inset: 0; z-index: 1000; background: rgba(4, 10, 20, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 56px 16px 24px; cursor: zoom-out;
}
.zoom-box[hidden] { display: none; }
.zoom-box img { max-width: min(1600px, 100%); max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.zoom-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer;
}
.zoom-close:hover, .zoom-close:focus-visible { background: rgba(255,255,255,.28); }
html.zoom-open { overflow: hidden; }

/* 站長 2026-10-26：首頁輪播改用作品範例展示圖（16:10），整張顯示不裁切 */
.home-showcase img { height: auto; width: min(86vw, 420px); aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 760px) { .home-showcase img { height: auto; width: 512px; } }

/* 站長 2026-10-26：首頁優惠活動三張圖，樣子跟作品範例輪播一樣 */
.offer-slide { flex: 0 0 auto; scroll-snap-align: start; color: inherit; text-decoration: none; }
.offer-slide span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); max-width: 345px; }
.offer-slide b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.offer-slide:hover img { border-color: var(--brand, #1aa3d9); }
.offer-card .offer-short { font-size: 20px; font-weight: 800; color: var(--brand); margin: 2px 0 6px; }

/* --- 站長 2026-10-27：首頁新版面 ----------------------------------------- */
/* 主視覺：作品牆。手機放在文字上方一條，電腦放右半邊；每欄速度不同，滑過去會停 */
.hero { position: relative; overflow: hidden; }
.hero-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
.hero-price b { color: var(--brand); font-size: 17px; }
.hero-price .dot { color: var(--line-strong); }
.hero-wall {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  height: 230px; overflow: hidden; margin: -36px -15px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
}
.wall-col { overflow: hidden; }
.wall-track { display: flex; flex-direction: column; gap: 10px; animation: wall-up 46s linear infinite; }
.wall-col-2 .wall-track { animation-duration: 58s; }   /* 站長 2026-10-27：三欄統一往上，只是速度不同 */
.wall-col-3 .wall-track { animation-duration: 40s; }
/* 只有真的有滑鼠的電腦才在滑過時暫停；手機點一下會被當成「滑過」而卡住不動 */
@media (hover: hover) and (pointer: fine) { .hero-wall:hover .wall-track { animation-play-state: paused; } }
.wall-track a { display: block; }
.wall-track img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2);
}
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 5px)); } }
/* 手機設定「減少動態效果」時照樣捲，只是放慢（站長要作品牆一定要動） */
@media (prefers-reduced-motion: reduce) { .wall-track { animation-duration: 120s !important; } }
/* 手機：牆排在最上面（模板裡牆在文字後面，用 order 拉上去） */
@media (max-width: 1099px) {
  .hero .wrap { display: flex; flex-direction: column; }
  .hero-wall { order: -1; }
}
@media (min-width: 481px) and (max-width: 1099px) { .hero-wall { height: 300px; margin: -40px 0 30px; } }
@media (min-width: 1100px) {
  .hero { padding: 0; }
  .hero .wrap { min-height: 560px; }
  .hero .wrap > .eyebrow { margin-top: 64px; }
  .hero .wrap > .hero-price { grid-column: 1; margin-bottom: 64px; }
  .hero-wall {
    grid-column: 2; grid-row: 1 / span 6; align-self: stretch;
    height: auto; max-height: 640px; margin: 0;
    transform: rotate(-4deg) scale(1.12); transform-origin: center;
  }
}

/* 服務分類：格子 */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.cat-cell {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  color: var(--ink);
}
.cat-cell:hover { text-decoration: none; border-color: var(--brand); }
.cat-cell b { font-size: 16px; }
.cat-cell small { color: var(--brand); font-size: 12.5px; }
.cat-cell span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.cat-all { border-style: dashed; justify-content: center; }
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-cell { padding: 13px 14px; }
  .cat-cell b { font-size: 15px; }
}

/* 合作方式：時間軸。電腦六格一排，手機左右滑 */
.timeline {
  list-style: none; margin: 14px 0 14px; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.timeline::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 21px;
  border-top: 2px solid var(--line-strong);
}
.timeline li { position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline li b {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--brand); color: var(--brand);
  font-size: 13px; letter-spacing: .05em;
}
.timeline li span { font-size: 15px; font-weight: 600; }
@media (max-width: 760px) {
  .timeline {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0;
    padding-bottom: 8px; margin-right: -15px;
  }
  .timeline::before { display: none; }
  .timeline li { flex: 0 0 38%; scroll-snap-align: start; padding-right: 10px; }
  .timeline li::after {
    content: ""; position: absolute; left: 50px; right: 6px; top: 21px;
    border-top: 2px solid var(--line-strong);
  }
  .timeline li:last-child::after { display: none; }
}
/* 手機上價格那一行會換行，分隔點會掛在行尾；手機改成一項一行、不放點 */
@media (max-width: 480px) {
  .hero-price { flex-direction: column; gap: 4px; }
  .hero-price .dot { display: none; }
}
/* 站長 2026-10-27：主視覺只留品牌名；作品牆放大 */
.hero-brand { margin: 0 0 6px; line-height: 1.15; }
.hero-brand-en { display: block; font-size: 44px; letter-spacing: .12em; color: var(--ink); }
.hero-brand-zh { display: block; font-size: 18px; letter-spacing: .3em; color: var(--brand); font-weight: 600; margin-top: 8px; }
.hero-brand + .hero-actions { margin-top: 22px; }
@media (max-width: 1099px) { .hero-wall { height: 360px; } }
@media (min-width: 481px) and (max-width: 1099px) { .hero-wall { height: 440px; } }
@media (max-width: 480px) { .hero-brand-en { font-size: 34px; } .hero-brand-zh { font-size: 15px; } }
@media (min-width: 1100px) {
  .hero .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: 620px; }
  .hero .wrap > .hero-brand { grid-column: 1; margin-top: 80px; }
  .hero-brand-en { font-size: 60px; }
  .hero-wall { max-height: 720px; }
}
/* 電腦版：左邊品牌名、按鈕、價格上下置中；價格一項一行，不放分隔點 */
.hero-price { flex-direction: column; gap: 4px; }
.hero-price .dot { display: none; }
@media (min-width: 1100px) {
  .hero .wrap { grid-template-rows: 1fr auto auto auto 1fr; }
  .hero .wrap > .hero-brand { grid-row: 2; margin-top: 0; }
  .hero .wrap > .hero-actions { grid-row: 3; }
  .hero .wrap > .hero-price { grid-row: 4; margin-bottom: 0; }
  .hero-wall { grid-row: 1 / -1; }
}
/* 免費諮詢按鈕拿掉後，品牌名和價格之間的距離 */
.hero-brand + .hero-price { margin-top: 26px; }
@media (min-width: 1100px) { .hero .wrap { grid-template-rows: 1fr auto auto 1fr; } .hero .wrap > .hero-price { grid-row: 3; } }
/* 站長 2026-10-27：品牌理念（we believe _） */
.hero-belief { margin-top: 30px; }
.belief-tag { margin: 0 0 8px; color: var(--muted); font-size: 15px; letter-spacing: .04em; }
.belief-main { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.belief-main span { display: block; }
.belief-sub { margin: 10px 0 0; color: var(--ink-soft); font-size: 16px; }
.belief-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--ink); font-weight: 600; }
.belief-link span {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #04222f; font-size: 16px;
}
.belief-link:hover { text-decoration: none; color: var(--brand); }
.hero-brand + .hero-belief + .hero-price { margin-top: 28px; }
@media (max-width: 480px) { .belief-main { font-size: 25px; } }
@media (min-width: 1100px) {
  .hero .wrap { grid-template-rows: 1fr auto auto auto 1fr; }
  .hero .wrap > .hero-belief { grid-column: 1; grid-row: 3; }
  .hero .wrap > .hero-price { grid-row: 4; }
  .belief-main { font-size: 36px; }
}
/* 站長 2026-10-27：選單按鈕改成三條橫線；打開時變成 X */
.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;
}
.navtoggle summary { display: grid; place-items: center; width: 42px; height: 38px; padding: 0 !important; }
.burger { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.navtoggle[open] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[open] .burger i:nth-child(2) { opacity: 0; }
.navtoggle[open] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 站長 2026-10-27：方案卡項目超過 6 項時，其餘收在「展開看全部」 */
.tier-more { margin: -6px 0 14px; font-size: 13.5px; }
.tier-more summary { cursor: pointer; color: var(--brand); font-weight: 600; list-style: none; }
.tier-more summary::-webkit-details-marker { display: none; }
.tier-more summary::after { content: ' ▾'; }
.tier-more[open] summary::after { content: ' ▴'; }
.tier-more ul { margin-top: 8px; }

/* 站長 2026-10-28：理念第二行字小一點、用亮藍漸層，跟第一行的白色大字分開 */
.belief-main .belief-accent {
  margin-top: 8px; font-size: .62em; font-weight: 700; letter-spacing: .04em; line-height: 1.5;
  background: linear-gradient(90deg, #ffe39a, #ffc27a 55%, #ff9f8a);   /* 站長：不要跟上面的藍色標題同色，改暖金色 */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 480px) { .belief-main .belief-accent { font-size: .7em; } }
/* 站長 2026-10-28：「用設計說故事」也用同一組暖金色 */
.belief-main > span:first-child {
  background: linear-gradient(90deg, #ffe39a, #ffc27a 55%, #ff9f8a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 實用工具（站長 2026-10-28）---------- */
/* 頂端「工具」下拉：手機、電腦都在「服務項目」和「諮詢」中間（站長 2026-10-28） */
.drop ~ .drop { margin-left: 0; }
.drop-tools .drop-panel { min-width: 600px; }
@media (max-width: 760px) { .drop ~ .drop { margin-left: 0; } .drop-tools .drop-panel { min-width: 0; } }
@media (max-width: 400px) { .masthead .wrap { gap: 6px; } .navhelp { padding: 7px 8px; font-size: 13px; } }
.tools-head { margin: 18px 0 14px; }
.tools-head h1 { margin-bottom: 6px; }
.tools-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 24px; }
.tool-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tool-card:hover { border-color: var(--brand); text-decoration: none; }
.tool-card b { font-size: 17px; }
.tool-card span:not(.tool-ic) { color: var(--ink-soft); font-size: 14px; }
.tool-ic { font-size: 26px; line-height: 1; }
.tools-grid-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tools-grid-sm .tool-card { flex-direction: row; align-items: center; padding: 12px 14px; }
.tools-grid-sm .tool-card b { font-size: 15px; }
.tools-foot { margin-bottom: 40px; }
.tool-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 28px; }
.tool-about { margin-bottom: 26px; max-width: 820px; }
.tool-about h2 { font-size: 21px; margin-bottom: 10px; }
.tool-about p { color: var(--ink-soft); }
.faq-item { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq-item p { margin: 8px 0 0; }
.tool-svc { background: var(--panel-2); border-left: 3px solid var(--brand); padding: 14px 16px; border-radius: 6px; color: var(--ink-soft); margin-bottom: 44px; }
.tool-svc b { color: var(--ink); }
/* 工具本體共用 */
.tl-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tl-tab { font: inherit; font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.tl-tab.on { background: var(--brand); color: #04222f; border-color: var(--brand); }
.tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tl-lbl { display: block; font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; font-weight: 600; }
.tl-in { font: inherit; font-size: max(16px, 1em); width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--ink); }
.tl-in:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
textarea.tl-in { resize: vertical; line-height: 1.6; }
.tl-num { max-width: 110px; }
.tl-inline { margin-bottom: 12px; }
.tl-check { display: block; margin: 6px 0 14px; color: var(--ink-soft); font-size: 15px; cursor: pointer; }
.tl-hint { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; }
.tl-link { font: inherit; font-size: 13.5px; background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0 2px; }
.tl-go { font-size: 17px; padding: 12px 30px; background: var(--brand-grad); color: #04222f; border-color: transparent; }
.tl-result { margin-top: 18px; min-height: 10px; }
.tl-result.pop { animation: tlpop .35s ease; }
@keyframes tlpop { from { transform: scale(.96); opacity: .3; } to { transform: none; opacity: 1; } }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chip { background: var(--brand-glow); border: 1px solid var(--brand); color: var(--ink); font-weight: 800;
  font-size: 22px; padding: 8px 18px; border-radius: 12px; }
.tl-chip.big { font-size: 30px; padding: 10px 24px; }
.tl-warn { color: var(--warn); }
.tl-hist { margin: 4px 0 0 20px; color: var(--ink-soft); font-size: 14px; }
.tl-h2 { font-size: 19px; margin: 26px 0 12px; }
.wheel-wrap { position: relative; width: min(100%, 380px); margin: 0 auto 10px; }
.wheel-wrap canvas { width: 100%; height: auto; display: block; }
.wheel-pin { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0;
  border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #fff;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
/* 時差 */
.tz-now { text-align: center; margin-bottom: 14px; }
.tz-big { font-size: 34px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; margin: 0; }
.tz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.tz-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.tz-row b { font-size: 16px; } .tz-row span { display: block; font-size: 12.5px; color: var(--muted); }
.tz-t { text-align: right; } .tz-t b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tz-d { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }
.tz-d.up { color: var(--ok); } .tz-d.down { color: var(--accent); }
.tz-conv { display: flex; gap: 12px; flex-wrap: wrap; } .tz-conv .tl-inline { flex: 1 1 180px; }
/* 計時器 */
.tm-face { text-align: center; padding: 20px 10px; border-radius: 12px; background: var(--bg-2); margin-bottom: 16px; }
.tm-big { font-size: clamp(54px, 15vw, 120px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 0; }
.tm-face.done { animation: tmflash 1s steps(2) 5; } .tm-face.done .tm-big { color: var(--bad); }
@keyframes tmflash { 50% { background: rgba(226,100,95,.25); } }
.tm-face:fullscreen, .tm-face.fs { display: flex; flex-direction: column; justify-content: center; background: var(--bg); }
.tm-face:fullscreen .tm-big, .tm-face.fs .tm-big { font-size: 22vw; }
.tm-face.fs { position: fixed; inset: 0; z-index: 99; }
.tm-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tl-chip-btn { font: inherit; padding: 7px 14px; border-radius: 999px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer; }
.tl-chip-btn:hover { border-color: var(--brand); }
.tm-set { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; color: var(--ink-soft); }
.tm-set .tl-num { width: 90px; display: inline-block; }
.tm-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-laps { margin-top: 14px; font-variant-numeric: tabular-nums; }
/* 大寫數字 */
.cn-in { font-size: 22px; }
.cn-out { margin: 16px 0; }
.cn-row { display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cn-row .tl-lbl { margin: 0; } .cn-row b { font-size: 20px; overflow-wrap: anywhere; }
.cn-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cn-table th, .cn-table td { border: 1px solid var(--line); padding: 6px; text-align: center; }
.cn-table th { color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
/* 年齡 */
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.ag-grid div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.ag-grid span { display: block; font-size: 12.5px; color: var(--muted); } .ag-grid b { font-size: 18px; }
@media (max-width: 720px) {
  .tl-row { grid-template-columns: 1fr; }
  .tool-box { padding: 16px; }
  .tz-big { font-size: 28px; }
  .tz-list { grid-template-columns: 1fr; }
  .cn-row { grid-template-columns: 70px 1fr auto; } .cn-row b { font-size: 17px; }
  .cn-table { overflow-x: auto; }
}
.tool-box [hidden] { display: none !important; }
@media (max-width: 480px) { .tm-btns .btn { width: auto; flex: 1 1 40%; } .tl-go { width: 100%; } }

/* ---------- 線上抽獎（站長 2026-10-28）---------- */
.lk-stage { position: relative; overflow: hidden; border-radius: 14px; min-height: 620px; padding: 18px 16px 22px;
  background: #1a0508 url(/static/tools/lucky/bg-wide.webp) center/cover no-repeat; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; box-shadow: inset 0 0 120px rgba(0,0,0,.55); }
.lk-stage:fullscreen, .lk-stage.fs { border-radius: 0; min-height: 100vh; justify-content: center; }
.lk-stage.fs { position: fixed; inset: 0; z-index: 99; }
.lk-top { display: flex; align-items: center; gap: 12px; justify-content: center; }
.lk-logo { max-height: 54px; max-width: 160px; object-fit: contain; }
.lk-title { margin: 0; font-size: clamp(22px, 3.6vw, 38px); font-weight: 900; letter-spacing: .06em; color: #ffe39a;
  text-shadow: 0 2px 0 #7a1c0c, 0 0 18px rgba(255,190,80,.6); }
.lk-prizebar { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.lk-prizeimg { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; border: 3px solid #f3c96b; box-shadow: 0 6px 22px rgba(0,0,0,.5); margin-bottom: 6px; }
.lk-ribbon { width: min(92vw, 520px); aspect-ratio: 900 / 278; background: url(/static/tools/lucky/ribbon.webp) center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; padding: 0 18% 4%; }
.lk-ribbon span { font-size: clamp(22px, 4.2vw, 36px); font-weight: 900; color: #fff7e0; text-shadow: 0 2px 4px rgba(90,0,0,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lk-left { margin: 2px 0 0; color: #ffe8b8; font-weight: 700; text-shadow: 0 1px 3px #000; }
.lk-center { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 300px; }
.lk-machine { position: relative; width: min(46vw, 230px); }
.lk-machine > img:first-child { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.lk-machine.shake > img:first-child { animation: lkshake .18s linear infinite; }
@keyframes lkshake { 0% { transform: rotate(0); } 25% { transform: rotate(-2.5deg) translateY(-2px); } 75% { transform: rotate(2.5deg) translateY(1px); } }
.lk-cap { position: absolute; left: 50%; bottom: 7%; width: 30%; transform: translateX(-50%) scale(.6); opacity: 0; }
.lk-machine.drop .lk-cap { animation: lkcap 1.1s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes lkcap { 0% { opacity: 1; transform: translate(-50%, -30%) scale(.5); } 35% { transform: translate(-50%, 30%) scale(.7) rotate(40deg); }
  55% { transform: translate(-50%, 0) scale(.8) rotate(80deg); } 100% { opacity: 1; transform: translate(-50%, -160%) scale(2.6) rotate(360deg);
  filter: drop-shadow(0 0 30px #ffd45a); } }
.lk-roller { width: min(92%, 640px); padding: 26px 10px; border-radius: 18px; background: rgba(20,0,4,.72); border: 3px solid #e2b04f;
  box-shadow: 0 0 40px rgba(255,180,60,.35), inset 0 0 30px rgba(0,0,0,.6); }
.lk-roller span { display: block; font-size: clamp(34px, 7vw, 76px); font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-roller span.hit { color: #ffe39a; animation: tlpop .4s ease; text-shadow: 0 0 22px rgba(255,200,80,.9); }
.lk-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; position: relative; z-index: 2; }
.lk-btn { font: inherit; font-weight: 800; font-size: 17px; padding: 12px 22px; border-radius: 999px; cursor: pointer; border: 2px solid #f3c96b;
  background: rgba(40,0,6,.7); color: #ffe8b8; }
.lk-btn.main { background: linear-gradient(180deg, #ffe08a, #e2a53a); color: #5a1206; font-size: 20px; padding: 14px 34px; box-shadow: 0 6px 0 #8a4a10, 0 10px 26px rgba(0,0,0,.45); }
.lk-btn.main:active { transform: translateY(3px); box-shadow: 0 3px 0 #8a4a10; }
.lk-btn.ghost { border-color: rgba(255,255,255,.4); color: #fff; font-size: 14px; }
.lk-btn:disabled { opacity: .45; cursor: not-allowed; }
.lk-pool { margin: 10px 0 0; font-size: 14px; color: #ffe8b8; text-shadow: 0 1px 3px #000; }
.lk-recent { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.lk-recent span { background: rgba(0,0,0,.45); border: 1px solid rgba(243,201,107,.6); border-radius: 10px; padding: 4px 10px; font-size: 13px; color: #ffe8b8; }
.lk-recent b { color: #fff; margin-right: 6px; }
.lk-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(120px, 26vw, 260px);
  font-weight: 900; color: #ffe39a; text-shadow: 0 0 40px rgba(255,190,60,.9), 0 6px 0 #7a1c0c; background: rgba(10,0,2,.45); z-index: 5; }
.lk-count.go { animation: lkcd .8s ease; }
@keyframes lkcd { from { transform: scale(1.8); opacity: 0; } 40% { transform: scale(1); opacity: 1; } to { transform: scale(.9); opacity: .9; } }
.lk-reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,0,2,.6); z-index: 6; padding: 12px; }
.lk-card { width: min(88%, 380px); aspect-ratio: 700 / 1063; background: url(/static/tools/lucky/frame.webp) center/contain no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18% 16% 14%; animation: lkcard .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes lkcard { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lk-card-prize { margin: 0 0 8px; font-size: clamp(18px, 3vw, 24px); font-weight: 900; color: #ffd45a; }
.lk-card-names { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; width: 100%; }
.lk-card-names.many { max-height: 55%; overflow: auto; }
.lk-card-names b { font-size: clamp(28px, 6vw, 46px); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); overflow-wrap: anywhere; line-height: 1.2; }
.lk-card-names.many b { font-size: 20px; }
.lk-card .lk-btn { font-size: 16px; padding: 9px 26px; }
.lk-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
.lk-joinbox { position: relative; margin-top: 14px; background: #fff; color: #222; border-radius: 12px; padding: 8px; display: flex;
  align-items: center; gap: 8px; z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.lk-joinbox[hidden] { display: none; }
/* 站長 2026-10-28：手機上浮在右下角會蓋住按鈕；大螢幕（投影）才放角落，舞台底部留出位置 */
@media (min-width: 1000px) {
  .lk-joinbox { position: absolute; right: 14px; bottom: 14px; margin: 0; }
  .lk-stage:has(.lk-joinbox:not([hidden])) { padding-bottom: 130px; }
}
.lk-joinbox img { width: 92px; height: 92px; }
.lk-joinbox span { font-size: 13px; line-height: 1.4; text-align: left; } .lk-joinbox b { font-size: 20px; color: #c0262d; }
.lk-tabs { margin-top: 4px; }
.lk-panel { padding: 4px 0; }
.lk-prow { display: grid; grid-template-columns: 56px 1fr auto auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lk-pimg { position: relative; width: 56px; height: 56px; border-radius: 8px; background: var(--bg-2); border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 20px; }
.lk-pimg img { width: 100%; height: 100%; object-fit: cover; }
.lk-pimg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lk-q { white-space: nowrap; color: var(--ink-soft); } .lk-q .tl-num { width: 76px; display: inline-block; }
.lk-pw { font-size: 13px; color: var(--muted); white-space: nowrap; }
.lk-range { color: var(--ink-soft); } .lk-range .tl-num { display: inline-block; width: 100px; }
.lk-fb { margin-top: 14px; } .lk-fb summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.lk-fb .tl-in { margin: 8px 0; }
.lk-res h4 { margin: 12px 0 4px; color: var(--ink); }
.lk-res li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.lk-res li span { font-size: 12.5px; color: var(--muted); }
.lk-res li.void b { text-decoration: line-through; color: var(--muted); }
.lk-res li em { font-size: 12.5px; color: var(--warn); font-style: normal; }
.lk-res-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.lk-log { margin-top: 12px; } .lk-log summary { cursor: pointer; color: var(--ink-soft); } .lk-log ol { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0 20px; }
.lk-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lk-live-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.lk-live-box h3 { font-size: 17px; margin: 0 0 6px; }
.lk-live-box img { background: #fff; border-radius: 8px; padding: 6px; margin-top: 10px; }
/* 來賓加入、遙控器、結果公告 */
.lk-mini { max-width: 520px; margin: 24px auto 40px; text-align: center; }
.lk-mini-card, .lk-result-head { background: #1a0508 url(/static/tools/lucky/bg-tall.webp) center/cover; border-radius: 16px; padding: 22px 20px 26px; color: #fff; margin-bottom: 14px; }
.lk-mini-ribbon { width: 80%; height: auto; margin: 0 auto -6px; display: block; }
.lk-mini h1, .lk-result-head h1 { color: #ffe39a; text-shadow: 0 2px 0 #7a1c0c; font-size: 26px; }
.lk-mini-form { text-align: left; background: rgba(0,0,0,.5); padding: 14px; border-radius: 12px; margin-top: 10px; }
.lk-mini-form .tl-go { width: 100%; margin-top: 12px; }
.lk-mini-ok { font-size: 20px; font-weight: 800; color: #ffe39a; }
.lk-rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.lk-rm { font: inherit; font-weight: 800; font-size: 16px; padding: 16px 8px; border-radius: 14px; border: 2px solid #f3c96b; background: rgba(40,0,6,.75); color: #ffe8b8; cursor: pointer; }
.lk-rm.big { grid-column: 1 / -1; font-size: 26px; padding: 26px 8px; background: linear-gradient(180deg, #ffe08a, #e2a53a); color: #5a1206; }
.lk-rm:disabled { opacity: .5; }
.lk-rm-status { min-height: 1.6em; margin-top: 12px; color: #ffe8b8; font-weight: 700; }
.lk-result { max-width: 640px; margin: 24px auto 40px; }
.lk-result-head { text-align: center; }
.lk-result-prize { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.lk-result-prize h2 { font-size: 20px; color: #ffd45a; display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.lk-result-prize h2 span { font-size: 13px; color: var(--muted); }
.lk-result-prize ol { margin: 0 0 0 22px; font-size: 17px; }
/* 摸彩券列印：只印抽獎券 */
.lk-print { display: none; }
@media print {
  body.printing-tickets > *:not(main) { display: none !important; }
  body.printing-tickets main > *:not(.tool-box) { display: none !important; }
  body.printing-tickets .tool-box > *:not(.lk-print) { display: none !important; }
  body.printing-tickets .tool-box { border: 0; padding: 0; background: none; }
  body.printing-tickets { background: #fff; }
  body.printing-tickets .lk-print { display: grid; grid-template-columns: 1fr 1fr; gap: 0; color: #000; }
  .tk { display: grid; grid-template-columns: 34% 66%; height: 52mm; border: 1px dashed #888; break-inside: avoid; font-family: sans-serif; }
  .tk-stub { border-right: 2px dashed #555; padding: 4mm; display: flex; flex-direction: column; gap: 2mm; font-size: 10pt; }
  .tk-stub b { font-size: 14pt; } .tk-stub small { color: #666; }
  .tk-main { padding: 4mm; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
  .tk-main p { margin: 0; font-size: 12pt; font-weight: 700; } .tk-main b { font-size: 26pt; margin: 2mm 0; } .tk-main small { font-size: 9pt; color: #444; }
}
@media (max-width: 720px) {
  .lk-stage { min-height: 560px; padding: 14px 10px 18px; background-image: url(/static/tools/lucky/bg-tall.webp); }
  .lk-machine { width: min(52vw, 200px); }
  .lk-prow { grid-template-columns: 48px auto 1fr auto auto; row-gap: 6px; } .lk-pimg { width: 48px; height: 48px; grid-row: 1 / 3; }
  .lk-prow > input.tl-in { grid-column: 2 / 6; } .lk-prow .lk-q { grid-column: 2; } .lk-prow .lk-pw { grid-column: 3; }
  .lk-joinbox img { width: 70px; height: 70px; }
  .lk-btn.main { font-size: 18px; padding: 12px 26px; }
}

.lk-join-btn { width: 100%; margin-top: 12px; }

.tools-cat { font-size: 20px; margin: 22px 0 12px; scroll-margin-top: 80px; }
/* 工具只有繁中，外語版不顯示「工具」下拉 */
html:not([lang="zh-Hant-TW"]) .drop-tools { display: none; }

.lk-actions-2 { margin-top: 10px; }
.lk-actions-2 .lk-btn { font-size: 15px; padding: 9px 20px; }

/* 站長 2026-10-28：扭蛋機改成只有球動。機台用高度決定大小（手機上不再蓋住「還要抽幾位」和按鈕） */
.lk-center { flex: 0 0 auto; min-height: 0; margin: 10px 0 6px; }
.lk-machine { position: relative; width: auto; height: min(46vh, 420px); aspect-ratio: 700 / 1491; }
.lk-machine > img { position: relative; z-index: 1; width: 100% !important; height: 100%; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); animation: none !important; }
.lk-balls { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lk-stage > .lk-cap { position: absolute; z-index: 4; transform-origin: 50% 50%; pointer-events: none; filter: drop-shadow(0 0 24px rgba(255,212,90,.8)); }
@media (max-width: 720px) { .lk-machine { height: min(40vh, 330px); width: auto; } }

/* 站長 2026-10-28：緞帶上的獎項名稱放大 */
.lk-prizebar { width: 100%; }
.lk-ribbon { width: min(100%, 640px); padding: 0 16% 5%; }
.lk-ribbon span { font-size: clamp(30px, 7.5vw, 56px); letter-spacing: .04em; color: #fff4d6;
  text-shadow: 0 3px 0 #7a1010, 0 0 14px rgba(255,200,90,.55); }

/* 站長 2026-10-28：開關按鈕（開著時有顏色）與重設 */
.lk-live-box .btn.on { background: var(--brand); color: #04222f; border-color: var(--brand); }
.lk-end { margin-top: 14px; }
.lk-reset-box { margin-top: 18px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.btn.lk-danger { border-color: var(--bad); color: var(--bad); }

/* 站長 2026-10-28：緞帶上的字往上移到緞帶正中間 */
.lk-ribbon { padding: 0 16% 13%; }
/* 全螢幕：從上往下排、機台跟著畫面高度縮小，整個舞台放得進一個畫面；放不下時可以捲動 */
.lk-stage:fullscreen, .lk-stage.fs { justify-content: flex-start; overflow-y: auto; padding: 12px 12px 18px; }
.lk-stage:fullscreen .lk-machine, .lk-stage.fs .lk-machine { height: min(36vh, 560px); }
.lk-stage:fullscreen .lk-ribbon, .lk-stage.fs .lk-ribbon { width: min(100%, 560px); }
.lk-stage:fullscreen .lk-center, .lk-stage.fs .lk-center { margin: 4px 0; }
.lk-stage:fullscreen .lk-joinbox, .lk-stage.fs .lk-joinbox { position: absolute; right: 12px; bottom: 12px; margin: 0; }
.lk-stage:fullscreen .lk-recent, .lk-stage.fs .lk-recent { max-width: 70%; }
.lk-stage.fs { height: 100dvh; min-height: 0; }
html.lk-noscroll, html.lk-noscroll body { overflow: hidden; }

/* ---------- 第二、三批工具（站長 2026-10-28）---------- */
.ro-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ro-row b { display: block; } .ro-row span { font-size: 12.5px; color: var(--muted); }
.ro-pp { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ad-en { font-size: 19px; font-weight: 700; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-wrap: anywhere; }
.ad-lines { margin: 4px 0 10px 22px; color: var(--ink-soft); }
.pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-grid label { font-size: 13.5px; color: var(--ink-soft); }
.pg-grid .tl-in { margin-top: 4px; font-size: 18px; }
.un-row { display: flex; gap: 10px; margin-bottom: 14px; } .un-row .tl-in:first-child { flex: 1; } .un-row select { max-width: 220px; }
.un-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.un-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.un-item.me { border-color: var(--brand); }
.un-item b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .un-item span { font-size: 13px; color: var(--muted); }
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.wc-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.wc-item.main { border-color: var(--brand); } .wc-item.main b { color: var(--brand); }
.wc-item b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; } .wc-item span { font-size: 12.5px; color: var(--muted); }
.wc-lim { display: grid; grid-template-columns: 170px 1fr 110px; gap: 10px; align-items: center; font-size: 13.5px; padding: 4px 0; color: var(--ink-soft); }
.wc-bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.wc-bar i { display: block; height: 100%; background: var(--brand); } .wc-bar i.over { background: var(--bad); }
.gp-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 16px; }
.gp-out.pop { animation: tlpop .35s ease; }
.gp-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.gp-card h4 { margin: 0 0 6px; color: var(--brand); display: flex; justify-content: space-between; }
.gp-card h4 span { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.gp-card ol { margin: 0 0 0 20px; }
.qr-preview { display: flex; flex-direction: column; align-items: center; }
.qr-box { width: 280px; max-width: 100%; aspect-ratio: 1; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.qr-box img { width: 100%; height: auto; } .qr-box .tl-hint { color: #666; text-align: center; padding: 20px; }
.qr-dl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.tool-box input[type=color] { width: 60px; height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; background: none; padding: 2px; }
.en-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.tl-chip-btn.on { background: var(--brand); color: #04222f; border-color: var(--brand); }
.en-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.en-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.en-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.en-top b { font-size: 22px; } .en-top span { color: var(--ink-soft); }
.en-top em { font-style: normal; font-size: 11.5px; background: var(--brand-glow); color: var(--brand); border-radius: 99px; padding: 1px 8px; margin-left: auto; }
.en-card p { margin: 6px 0 4px; } .en-card small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 720px) {
  .ro-row { grid-template-columns: 1fr auto; } .ro-row > div:first-child { grid-column: 1 / -1; }
  .wc-lim { grid-template-columns: 1fr 90px; } .wc-lim .wc-bar { grid-column: 1 / -1; grid-row: 2; }
  .un-row { flex-direction: column; } .un-row select { max-width: none; }
}
.lk-stage:fullscreen .lk-ribbon, .lk-stage.fs .lk-ribbon { width: min(100%, 480px, 62vh); }
.lk-stage:fullscreen .lk-machine, .lk-stage.fs .lk-machine { height: min(33vh, 520px); }
.lk-stage:fullscreen .lk-title, .lk-stage.fs .lk-title { font-size: clamp(20px, 4vh, 38px); }

/* 站長 2026-10-28：獎項排序（先抽哪個） */
.lk-prow { grid-template-columns: 64px 56px 1fr auto auto; }
.lk-prow.cur { background: var(--brand-glow); border-radius: 8px; }
.lk-pord { font-size: 13px; font-weight: 800; color: var(--ink-soft); text-align: center; line-height: 1.3; }
.lk-pord em { display: block; font-style: normal; font-size: 11px; color: #04222f; background: var(--brand); border-radius: 99px; margin-top: 2px; }
.lk-pbtns { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; padding-left: 64px; }
.lk-pb { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 8px; cursor: pointer; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); }
.lk-pb:disabled { opacity: .35; cursor: default; }
.lk-pb.now { border-color: var(--brand); color: var(--brand); }
.lk-pb.del { margin-left: auto; color: var(--bad); border-color: transparent; background: none; }
.lk-pick { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #ffe8b8; font-size: 14px; text-shadow: 0 1px 3px #000; }
.lk-pick[hidden] { display: none; }
.lk-pick select { font: inherit; padding: 5px 10px; border-radius: 8px; background: rgba(30,0,4,.75); color: #fff; border: 1px solid #e2b04f; max-width: 60vw; }
@media (max-width: 720px) {
  .lk-prow { grid-template-columns: 52px 48px 1fr auto; }
  .lk-prow > input.tl-in { grid-column: 3 / 5; } .lk-prow .lk-q { grid-column: 3; } .lk-prow .lk-pw { grid-column: 4; }
  .lk-pimg { grid-row: 1 / 3; grid-column: 2; } .lk-pord { grid-row: 1 / 3; }
  .lk-pbtns { padding-left: 0; }
}
.lk-pick span { white-space: nowrap; }
.lk-pick { margin-top: 12px; position: relative; z-index: 2; }

/* 站長 2026-10-28：單位換算的單位選單加明顯箭頭 */
.un-row { align-items: flex-end; }
.un-field { flex: 1; min-width: 0; } .un-field .tl-lbl { margin-bottom: 6px; }
.un-sel { position: relative; display: block; }
.un-sel select { -webkit-appearance: none; appearance: none; width: 100%; max-width: none; padding: 12px 52px 12px 14px;
  font-size: 18px; font-weight: 700; border: 2px solid var(--brand); cursor: pointer; }
.un-sel::after { content: ''; position: absolute; right: 18px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
  border-right: 3px solid var(--brand); border-bottom: 3px solid var(--brand); transform: rotate(45deg); pointer-events: none; }
.un-row .un-field:first-child .tl-in { height: 100%; }
@media (max-width: 720px) { .un-row { align-items: stretch; } }

/* 站長 2026-10-28：所有工具的下拉選單都加明顯箭頭，讓人知道可以點開切換 */
.tool-box select.tl-in { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  border-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%2335cfe8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 10px; }
.un-sel select.tl-in { background-image: none; }
.lk-pick select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23f3c96b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 9px; }

/* 站長 2026-10-28：投資理財工具（股票手續費、定期定額、存股股利） */
.sf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sf-gap { margin-top: 16px; }
.sf-up { color: #e5484d; } .sf-down { color: #22a06b; }
.sf-inl { display: inline-block; margin: 0 0 0 12px; }
.sf-arow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.dc-chart { margin-top: 22px; }
.dc-chart svg { width: 100%; height: auto; display: block; }
.dc-grid { stroke: var(--line); stroke-width: 1; }
.dc-ax { fill: var(--muted); font-size: 12px; }
.dc-val { fill: var(--brand); fill-opacity: .35; stroke: var(--brand); stroke-width: 2; }
.dc-put { fill: var(--ink-soft); fill-opacity: .25; stroke: var(--ink-soft); stroke-width: 1.5; }
.dc-tbl-wrap { margin-top: 16px; }
.dc-tbl-wrap .cn-table td { font-variant-numeric: tabular-nums; }
.dv-goal-out .tz-big { font-size: 28px; }
@media (max-width: 480px) { .sf-inl { display: block; margin: 8px 0 0; } .tz-big { overflow-wrap: anywhere; } }

/* 站長 2026-10-28：電腦版右邊已有「需求諮詢」，頂端的「諮詢」只留給手機和平板（漢堡選單時）。 */
@media (min-width: 921px) { .navhelp { display: none; } }

/* 站長 2026-10-28：工具總覽搜尋與分類捷徑（工具變成 70 多個） */
.tools-find { margin: 0 0 18px; position: sticky; top: 64px; z-index: 5; background: var(--bg); padding: 10px 0; }
.tools-find .tl-in { font-size: 17px; }
.tools-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: thin; }
.tools-chips .tl-chip-btn { white-space: nowrap; text-decoration: none; }
.tools-chips small { color: var(--muted); margin-left: 2px; }
.tool-allink { margin-top: 12px; }
.tool-card[hidden], .tools-sec[hidden] { display: none; }
@media (max-width: 920px) { .tools-find { top: 56px; } }

/* ==== 工具樣式：gift-exchange ==== */
/* 站長 2026-10-28：交換禮物抽籤（/tools/gift-exchange）。主施工者合併進 app/static/site.css */
.gx-step { margin-top: 30px; }
.gx-step:first-of-type { margin-top: 0; }
.gx-center { text-align: center; }
.gx-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-pick .tl-chip-btn { min-height: 40px; }
.gx-pairs { list-style: none; margin: 8px 0; padding: 0; }
.gx-pairs li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; margin-bottom: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.gx-ev { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.gx-ev .tl-lbl .tl-in { margin-top: 4px; font-weight: 400; }
.gx-ev .gx-wide { grid-column: 1 / -1; }
.gx-wishbox { margin-top: 12px; }
.gx-wishbox > summary { cursor: pointer; font-weight: 700; }
.gx-wishes { display: grid; gap: 8px; margin-top: 10px; }
.gx-wish { display: grid; grid-template-columns: minmax(70px, 110px) 1fr; gap: 8px; align-items: center; }
.gx-wish span { font-weight: 700; color: var(--ink-soft); overflow-wrap: anywhere; }
.gx-out { margin-top: 6px; }
.gx-links { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.gx-links li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.gx-links li > b { font-size: 17px; overflow-wrap: anywhere; }
.gx-lbtn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gx-lbtn .tl-chip-btn { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
.gx-line { border-color: var(--ok); }
.gx-peek { width: 100%; color: var(--muted); }
.gx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.gx-tools .tl-chip-btn { min-height: 42px; }
.gx-msg { min-height: 1.4em; font-weight: 700; color: var(--ok); }
.gx-msg.pop { animation: tlpop .35s ease; }
.gx-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
.gx-name { font: inherit; font-size: 18px; font-weight: 700; min-height: 56px; padding: 8px; border-radius: 12px; cursor: pointer;
  background: var(--bg-2); color: var(--ink); border: 2px solid var(--line-strong); overflow-wrap: anywhere; }
.gx-name:hover { border-color: var(--brand); }
.gx-name.seen { opacity: .45; cursor: default; text-decoration: line-through; }
.gx-name small { display: block; font-size: 12px; font-weight: 400; text-decoration: none; color: var(--muted); }

/* 一支手機輪流看 */
.gx-phone { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; }
.gx-ph-inner { width: min(100%, 420px); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.gx-ph-q { font-size: 20px; margin: 0; }
.gx-ph-card { position: relative; min-height: 180px; border-radius: 16px; border: 2px dashed var(--line-strong); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.gx-ph-ans { display: none; flex-direction: column; gap: 6px; }
.gx-ph-ans b { font-size: 40px; color: var(--brand); overflow-wrap: anywhere; }
.gx-ph-ans span { color: var(--ink-soft); }
.gx-ph-card.show { border-style: solid; border-color: var(--brand); }
.gx-ph-card.show .gx-ph-ans { display: flex; }
.gx-ph-card.show .gx-ph-cover { display: none; }
.gx-ph-cover { color: var(--muted); margin: 0; }
.gx-ph-hold { min-height: 64px; font-size: 19px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }

/* 收到連結的人 */
.gx-rv-card { max-width: 460px; margin: 0 auto 16px; padding: 28px 20px; text-align: center; border-radius: 18px;
  background: var(--bg-2); border: 2px solid var(--brand); box-shadow: 0 0 0 6px var(--brand-glow); }
.gx-rv-title { font-weight: 800; color: var(--accent); margin: 0 0 6px; }
.gx-rv-hi { font-size: 19px; margin: 0 0 18px; }
.gx-rv-open { min-width: 220px; }
.gx-rv-res.pop { animation: tlpop .45s ease; }
.gx-rv-to { font-size: 44px; font-weight: 800; color: var(--brand); margin: 0 0 14px; overflow-wrap: anywhere; }
.gx-rv-info { margin: 0 0 14px; text-align: left; display: grid; gap: 6px; }
.gx-rv-info div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gx-rv-info dt { color: var(--muted); } .gx-rv-info dd { margin: 0; overflow-wrap: anywhere; }

.gx-extra { margin-top: 34px; padding-top: 6px; border-top: 1px solid var(--line); }
.gx-extra .faq-item > summary { cursor: pointer; font-weight: 700; }
.gx-ideas .un-item b { font-size: 17px; margin-bottom: 4px; }
.gx-ideas .un-item span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 480px) {
  .gx-links li { flex-direction: column; align-items: stretch; }
  .gx-lbtn .tl-chip-btn { flex: 1 1 40%; justify-content: center; }
  .gx-wish { grid-template-columns: 1fr; gap: 2px; }
  .gx-rv-to { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .gx-rv-res.pop, .gx-msg.pop { animation: none; } }

/* 列印對折小卡：一張 A4 印 8 張。每張三格：名字／結果／往上折蓋住結果的封口 */
.gx-printbox { display: none; }
@media print {
  body.gx-printing > *:not(main) { display: none !important; }
  body.gx-printing main > *:not(.tool-box) { display: none !important; }
  body.gx-printing .tool-box > *:not(.gx) { display: none !important; }
  body.gx-printing .gx > *:not(.gx-printbox) { display: none !important; }
  body.gx-printing .tool-box { border: 0; padding: 0; background: none; margin: 0; }
  body.gx-printing { background: #fff; }
  body.gx-printing .gx-printbox { display: grid; grid-template-columns: 1fr 1fr; gap: 0; color: #000; }
  .gx-card { height: 66mm; display: grid; grid-template-rows: 1fr 1fr 1fr; border: 1px dashed #999; break-inside: avoid; font-family: sans-serif; }
  .gx-card > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1mm 3mm; }
  .gx-c-out, .gx-c-in { border-bottom: 1px dashed #666; }
  .gx-c-out b { font-size: 18pt; } .gx-c-out small, .gx-c-in small { font-size: 8pt; color: #555; }
  .gx-c-in b { font-size: 16pt; } .gx-c-in span { font-size: 8.5pt; }
  .gx-c-flap { font-size: 8pt; color: #888; }
}

/* ==== 工具樣式：food ==== */
/* 站長 2026-10-28：午餐／晚餐吃什麼（/tools/lunch、/tools/dinner）。主施工者合併進 app/static/site.css */
.fd-show { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 170px;
  margin: 0 auto 14px; max-width: 460px; padding: 18px; border-radius: 16px; text-align: center;
  background: var(--bg-2); border: 2px solid var(--line-strong); }
.fd-show .fd-ic { font-size: 46px; line-height: 1; }
.fd-show .fd-name { font-size: 34px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.fd-show .fd-tags { font-size: 14px; color: var(--muted); }
.fd-show.spin .fd-name { color: var(--ink-soft); }
.fd-show.pop { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); animation: tlpop .35s ease; }
.fd-go { display: block; margin: 0 auto; min-width: 220px; }
.fd-center { text-align: center; }
.fd-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.fd-acts .tl-chip-btn { min-height: 42px; display: inline-flex; align-items: center; text-decoration: none; }
.fd-acts .tl-chip-btn:disabled { opacity: .7; cursor: default; }
#fd-msg { text-align: center; min-height: 1.4em; }
.fd-panel { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.fd-sub { font-size: 13.5px; color: var(--muted); margin: 12px 0 6px; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-chips .tl-chip-btn { min-height: 40px; }
.fd-checks { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 10px; }
.fd-checks .tl-check { margin: 4px 0; }
.fd-sel { max-width: 220px; margin-bottom: 4px; }
.fd-more { margin-top: 10px; }
.fd-more > summary { cursor: pointer; font-weight: 700; }
.fd-more textarea, .fd-more .fd-chips { margin-top: 10px; }
.fd-all .tl-chip-btn { min-height: 36px; padding: 5px 12px; font-size: 14px; }
.fd-off { text-decoration: line-through; opacity: .55; }
.fd-x { border-color: var(--warn); }
.fd-hist { list-style: none; margin: 10px 0 0; padding: 0; }
.fd-hist li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fd-gset { display: flex; gap: 16px; flex-wrap: wrap; }
.fd-gset .tl-num { display: block; margin-top: 4px; }
.fd-gbox { margin-top: 16px; }
.fd-cover { text-align: center; padding: 26px 12px; border: 2px dashed var(--line-strong); border-radius: 14px; }
.fd-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.fd-cand { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; min-height: 88px;
  border-radius: 12px; background: var(--bg-2); color: var(--ink); border: 2px solid var(--line-strong); cursor: pointer; }
.fd-cand b { font-size: 17px; overflow-wrap: anywhere; } .fd-cand small { color: var(--muted); }
.fd-cand.yes { border-color: var(--ok); } .fd-cand.yes small { color: var(--ok); font-weight: 700; }
.fd-cand.no { border-color: var(--warn); opacity: .6; } .fd-cand.no b { text-decoration: line-through; } .fd-cand.no small { color: var(--warn); font-weight: 700; }
.fd-gt { margin: 8px 0 14px; }
.fd-gt .fd-keep td { font-weight: 800; color: var(--brand); }
@media (max-width: 480px) {
  .fd-show .fd-name { font-size: 28px; }
  .fd-go { width: 100%; min-width: 0; }
  .fd-cands { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fd-show.pop { animation: none; } }

/* ==== 工具樣式：sudoku ==== */
/* ---------- 數獨（站長 2026-10-28）---------- */
.sd .tl-chip-btn { min-height: 40px; }
.sd-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -4px 0 16px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-daily { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.sd-game { display: grid; grid-template-columns: minmax(0, 540px) minmax(250px, 1fr); gap: 26px; align-items: start; }
.sd-bigm .sd-game { grid-template-columns: minmax(0, 660px) minmax(250px, 1fr); }
.sd-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; min-height: 40px; }
.sd-lbl { font-weight: 700; }
.sd-mist { color: var(--bad, #e2645f); font-size: 14px; }
.sd-clock { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 18px; font-variant-numeric: tabular-nums; }
.sd-ic { font: inherit; font-size: 14px; min-width: 40px; min-height: 40px; border-radius: 8px; cursor: pointer;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); }
.sd-wrap { position: relative; }

/* 盤面 */
.sd-board { --n: 9; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  aspect-ratio: 1 / 1; width: 100%; border: 2px solid var(--ink-soft); border-radius: 6px; overflow: hidden;
  background: var(--bg-2); user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none; }
.sd-board:focus-visible { box-shadow: 0 0 0 3px var(--brand-glow); }
.sd-board.n6 { --n: 6; } .sd-board.n4 { --n: 4; }
.sd-c { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; min-width: 0;
  border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  font-size: 22px; font-size: calc(100cqw / var(--n) * .56); line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.sd-c.br { border-right: 2px solid var(--ink-soft); }
.sd-c.bb { border-bottom: 2px solid var(--ink-soft); }
.sd-board.n9 > .sd-c:nth-child(9n),
.sd-board.n6 > .sd-c:nth-child(6n), .sd-board.n4 > .sd-c:nth-child(4n) { border-right: 0; }
.sd-board.n9 > .sd-c:nth-child(n+73), .sd-board.n6 > .sd-c:nth-child(n+31), .sd-board.n4 > .sd-c:nth-child(n+13) { border-bottom: 0; }
.sd-c.g { color: var(--ink); font-weight: 700; }
.sd-c.hl { background: var(--brand-glow); background: color-mix(in srgb, var(--brand) 9%, var(--bg-2)); }
.sd-c.same { background: color-mix(in srgb, var(--brand) 24%, var(--bg-2)); }
.sd-c.sel { background: var(--brand-glow); background: color-mix(in srgb, var(--brand) 34%, var(--bg-2)); }
.sd-c.hint { background: color-mix(in srgb, var(--warn) 28%, var(--bg-2)); }
.sd-c.bad { color: var(--bad, #e2645f); }
.sd-c.bad.sel, .sd-c.bad.same { background: color-mix(in srgb, var(--bad, #e2645f) 26%, var(--bg-2)); }
.sd-c.fl { animation: sdfl .7s ease; }
@keyframes sdfl { 40% { background: color-mix(in srgb, var(--ok) 45%, var(--bg-2)); } }
.sd-nt { position: absolute; inset: 1px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.n4 .sd-nt { grid-template-columns: repeat(2, 1fr); }
.sd-nt i { font-style: normal; display: flex; align-items: center; justify-content: center; color: var(--muted);
  font-size: 10px; font-size: calc(100cqw / var(--n) * .23); font-weight: 600; }
.n6 .sd-nt i, .n4 .sd-nt i { font-size: calc(100cqw / var(--n) * .2); }
.sd-nt i.on { color: var(--brand); font-weight: 800; }
.sd-board.blur .sd-c { color: transparent; } .sd-board.blur .sd-nt { visibility: hidden; }
.sd-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center; border-radius: 6px; background: var(--panel);
  background: color-mix(in srgb, var(--panel) 90%, transparent); }
.sd-cover-t { font-size: 26px; font-weight: 800; margin: 0; }
.sd-cover-s { color: var(--ink-soft); margin: 0; max-width: 360px; line-height: 1.6; }
.sd-end-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.sd-msg { min-height: 1.6em; margin: 10px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

/* 右邊：工具列、數字鍵 */
.sd-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.sd-tool { font: inherit; font-size: 13px; min-height: 54px; padding: 4px 2px; border-radius: 10px; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); }
.sd-tool span { font-size: 19px; line-height: 1; }
.sd-tool i { font-style: normal; font-size: 11px; color: var(--muted); }
.sd-tool.on { border-color: var(--brand); background: var(--brand-glow); }
.sd-tool.on i { color: var(--brand); font-weight: 700; }
.sd-tool:disabled { opacity: .4; cursor: default; }
.sd-tool:hover:not(:disabled), .sd-k:hover { border-color: var(--brand); }
.sd-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sd-pad.n4 { grid-template-columns: repeat(2, 1fr); }
.sd-k { font: inherit; min-height: 62px; border-radius: 10px; cursor: pointer; touch-action: manipulation; padding: 2px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); }
.sd-k b { font-size: 26px; line-height: 1.1; color: var(--brand); }
.sd-k small { font-size: 11px; color: var(--muted); }
.sd-k.nt b { color: var(--accent); font-size: 20px; }
.sd-k.done { opacity: .35; }
.sd-more { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sd-set .tl-in { margin-bottom: 10px; }
.sd-set .tl-check { margin: 4px 0 8px; }
.sd-file { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.sd-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sd-file:focus-within { outline: 2px solid var(--brand); }
.sd-streak { margin-bottom: 14px; }
.sd-panel table { min-width: 0; }
.sd-gap { margin-top: 14px; }
.sd-print { display: none; }

/* 大字模式 */
.sd-bigm .sd-c { font-size: calc(100cqw / var(--n) * .64); }
.sd-bigm .sd-c.u { font-weight: 700; }
.sd-bigm .sd-nt i { font-size: calc(100cqw / var(--n) * .26); }
.sd-bigm .sd-k { min-height: 72px; } .sd-bigm .sd-k b { font-size: 32px; } .sd-bigm .sd-k small { font-size: 13px; }
.sd-bigm .sd-tool { font-size: 15px; min-height: 62px; } .sd-bigm .sd-tool span { font-size: 23px; }
.sd-bigm .sd-msg { font-size: 17px; } .sd-bigm .sd-clock { font-size: 21px; }

@media (max-width: 859px) {
  .sd-game, .sd-bigm .sd-game { grid-template-columns: 1fr; gap: 12px; }
  .sd-main, .sd-side { width: 100%; max-width: 560px; margin: 0 auto; }
  .sd-bigm .sd-main, .sd-bigm .sd-side { max-width: 660px; }
  .sd-pad.n9 { grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .sd-pad.n6 { grid-template-columns: repeat(6, 1fr); }
  .sd-pad.n4 { grid-template-columns: repeat(4, 1fr); }
  .sd-k { min-height: 56px; } .sd-k b { font-size: 23px; } .sd-k small { font-size: 10px; }
  .sd-bigm .sd-k { min-height: 66px; } .sd-bigm .sd-k b { font-size: 28px; }
  .sd-tools { gap: 4px; }
}
@media (max-width: 400px) { .sd-tool { font-size: 12px; } .sd-k small { font-size: 9px; } }
@media (pointer: coarse) { .sd-keys { display: none; } }

/* 列印：只印題目（A4） */
@media print {
  body.sd-printing > *:not(main) { display: none !important; }
  body.sd-printing main > *:not(.tool-box) { display: none !important; }
  body.sd-printing .tool-box > *:not(.sd) { display: none !important; }
  body.sd-printing .sd > *:not(.sd-print) { display: none !important; }
  body.sd-printing .tool-box { border: 0; padding: 0; margin: 0; background: none; }
  body.sd-printing, body.sd-printing main { background: #fff; padding: 0; margin: 0; }
  body.sd-printing .sd-print { display: block; color: #000; font-family: sans-serif; }
  .sd-pg { break-after: page; page-break-after: always; }
  .sd-pg:last-child { break-after: auto; page-break-after: auto; }
  .sd-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; border-bottom: 1px solid #000;
    padding-bottom: 2mm; margin-bottom: 4mm; font-size: 13pt; }
  .sd-ph span { font-size: 10pt; }
  .sd-pgrid { display: grid; gap: 5mm 8mm; justify-content: center; }
  .per-1 .sd-pgrid { grid-template-columns: 170mm; }
  .per-2 .sd-pgrid { grid-template-columns: 108mm; }
  .per-4 .sd-pgrid { grid-template-columns: repeat(2, 86mm); }
  .per-6 .sd-pgrid { grid-template-columns: repeat(2, 70mm); }
  .sd-pz { break-inside: avoid; }
  .sd-pz p { margin: 0 0 1.5mm; font-size: 10pt; }
  .sd-pt { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; border: 2px solid #000; }
  .sd-pt td { line-height: 1; border: .6px solid #888; padding: 0; text-align: center; vertical-align: middle; color: #000; font-weight: 600; }
  .sd-pt td.br { border-right: 2px solid #000; } .sd-pt td.bb { border-bottom: 2px solid #000; }
  .sd-pt td.a { font-weight: 400; color: #666; }
  .per-1 .n9 td { height: 18.8mm; font-size: 26pt; } .per-1 .n6 td { height: 28.3mm; font-size: 36pt; } .per-1 .n4 td { height: 42.5mm; font-size: 48pt; }
  .per-2 .n9 td { height: 12mm; font-size: 18pt; } .per-2 .n6 td { height: 18mm; font-size: 26pt; } .per-2 .n4 td { height: 27mm; font-size: 36pt; }
  .per-4 .n9 td { height: 9.5mm; font-size: 14pt; } .per-4 .n6 td { height: 14.3mm; font-size: 20pt; } .per-4 .n4 td { height: 21.5mm; font-size: 28pt; }
  .per-6 .n9 td { height: 7.5mm; font-size: 12pt; } .per-6 .n6 td { height: 11.3mm; font-size: 17pt; } .per-6 .n4 td { height: 17mm; font-size: 24pt; }
  .sd-pg.big .sd-pt { border-width: 3px; }
  .sd-pg.big .sd-pt td { border-color: #333; font-weight: 800; }
  .sd-pg.big .sd-pt td.br { border-right-width: 3px; } .sd-pg.big .sd-pt td.bb { border-bottom-width: 3px; }
  .per-1.big .n9 td { font-size: 32pt; } .per-2.big .n9 td { font-size: 23pt; }
  .sd-pf { margin-top: 4mm; font-size: 8pt; color: #555; text-align: center; }
}
@media (max-width: 600px) {
  .sd .tl-tabs { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
  .sd .tl-tab { flex: none; min-height: 40px; padding: 6px 8px; font-size: 14px; }
  .sd-chips { gap: 6px; } .sd-chips .tl-chip-btn { padding: 6px 12px; }
  .sd-pick { margin: 0 0 12px; gap: 8px 12px; }
}

/* ==== 工具樣式：health ==== */
/* 站長 2026-10-28：健康計算（bmi、ideal-weight、bmr、tdee、protein、water、sleep、body-fat、waist-hip）共用樣式，前綴 hp- */

/* 我的資料 */
.hp-prof { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.hp-prof-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hp-prof-head b { font-size: 16px; }
.hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.hp-f { margin-bottom: 10px; min-width: 0; }
.hp-f .tl-hint { margin-top: 4px; font-size: 12.5px; }
.hp-wide { grid-column: 1 / -1; }
.hp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-seg .tl-chip-btn, .hp-actions .tl-chip-btn, .hp-lbtns .tl-chip-btn, .hp-wbtns .tl-chip-btn { min-height: 40px; }
.hp-u { display: flex; align-items: center; gap: 6px; }
.hp-u .tl-in { min-width: 0; }
.hp-u span { color: var(--ink-soft); font-size: 14px; white-space: nowrap; }
.hp-ftin .tl-in { flex: 1 1 0; }
.hp-prof .tl-in { min-height: 42px; }
.hp-prof-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 0; flex-wrap: wrap; }
.hp-prof-foot .tl-hint { margin: 0; flex: 1 1 200px; }
.hp-prof-foot .tl-link { min-height: 40px; }
.tl-in.hp-bad { border-color: var(--warn); outline: 1px solid var(--warn); }
.hp-opts { margin-top: 14px; }

/* 結果 */
.hp-tag { display: inline-block; vertical-align: middle; font-size: 17px; font-weight: 800; padding: 3px 12px; border-radius: 999px; border: 2px solid currentColor; letter-spacing: 0; }
.hp-tag.hp-under { color: var(--brand); }
.hp-tag.hp-normal { color: var(--ok); }
.hp-tag.hp-over { color: var(--warn); }
.hp-tag.hp-obese { color: var(--bad, var(--accent)); }
.hp-warn, .un-item b .hp-warn { color: var(--warn); font-size: inherit; }
.hp-say { margin: 14px 0 0; font-weight: 600; }
.hp-next { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 2; }
.hp-src { font-size: 13px; color: var(--muted); margin: 22px 0 6px; }
.hp-disc { font-size: 14px; color: var(--ink-soft); margin: 0; padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--bg-2); border-radius: var(--radius-sm); }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.hp-copy { margin-top: 8px; font-size: 14px; }

/* 量表：四段色條＋指針 */
.hp-gauge { position: relative; margin: 34px 0 6px; padding-bottom: 20px; }
.hp-bar { display: flex; height: 26px; border-radius: 999px; overflow: hidden; }
.hp-s { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; color: #04222f; }
.hp-s.hp-under { background: var(--brand); }
.hp-s.hp-normal { background: var(--ok); }
.hp-s.hp-over { background: var(--warn); }
.hp-s.hp-obese { background: var(--bad, var(--accent)); }
.hp-s + .hp-s { border-left: 1px solid var(--bg); }
.hp-pin { position: absolute; top: -30px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.hp-pin b { display: block; font-size: 13px; background: var(--ink); color: var(--bg); padding: 1px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.hp-pin::after { content: ""; display: block; width: 0; height: 0; margin: 0 auto; border: 6px solid transparent; border-top-color: var(--ink); }
.hp-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; }
.hp-ticks span { position: absolute; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* TDEE 三張卡 */
.hp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.hp-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.hp-card span { display: block; color: var(--ink-soft); font-weight: 700; }
.hp-card b { font-size: 28px; font-variant-numeric: tabular-nums; }
.hp-card small { color: var(--muted); margin-left: 4px; }
.hp-card p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.cn-table tr.hp-on td { background: var(--brand-glow); font-weight: 700; }
.hp-ctable { overflow-x: auto; }
.hp-ctable table { font-size: 14px; }
.hp-ctable td, .hp-ctable th { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 體重紀錄 */
.hp-log-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.hp-log-add .tl-in { min-height: 44px; }
.hp-log-add .tl-go { min-height: 44px; }
.hp-lsum { margin-top: 10px; }
.hp-chart { margin-top: 14px; }
.hp-chart svg { width: 100%; height: auto; display: block; }
.hp-band { fill: var(--ok); fill-opacity: .14; }
.hp-band-t { fill: var(--ok); }
.hp-gl { stroke: var(--line); stroke-width: 1; }
.hp-ax { fill: var(--muted); font-size: 12px; }
.hp-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hp-dot { fill: var(--bg); stroke: var(--brand); stroke-width: 2; }
.hp-ldet { margin-top: 12px; }
.hp-ldet summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.hp-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.hp-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hp-list li .tl-link { min-height: 36px; }
.hp-lbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.hp-file { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.hp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }

/* 喝水打卡 */
.hp-cups { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-cup { width: 30px; height: 40px; border: 2px solid var(--brand); border-top-width: 1px; border-radius: 3px 3px 9px 9px; position: relative; overflow: hidden; }
.hp-cup.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: var(--brand); opacity: .75; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-wbtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }

/* 睡眠 */
.hp-time { font-size: 22px; max-width: 220px; min-height: 48px; }
.hp-slist { display: grid; gap: 8px; }
.hp-sitem { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.hp-sitem b { font-size: 30px; font-variant-numeric: tabular-nums; }
.hp-sitem span { color: var(--ink-soft); font-size: 14px; }
.hp-sitem.on { border-color: var(--brand); }
.hp-sitem em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 0 8px; margin-left: 8px; }

@media (max-width: 760px) {
  .hp-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hp-grid { grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .hp-log-add { grid-template-columns: 1fr 1fr; }
  .hp-log-add .tl-go { grid-column: 1 / -1; }
  .hp-s { font-size: 11px; }
  .hp-sitem b { font-size: 26px; }
}
@media print {
  .hp-prof-foot, .hp-actions, .hp-log-add, .hp-lbtns, .hp-wbtns, .hp-copy, .hp-next { display: none !important; }
}

/* ==== 工具樣式：bingo ==== */
/* ---------- 賓果卡・叫號（站長 2026-10-28）：tools/_bingo.html、bingo_play.html ---------- */
.bg-note { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-soft); font-size: 14.5px; }
.bg-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.bg-fs:disabled { opacity: .6; }
.bg-range .tl-num { width: 96px; display: inline-block; }
.bg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bg-chips .tl-chip-btn, .bg-words .tl-chip-btn { min-height: 40px; }
.bg-panel .tl-chip-btn:disabled { opacity: .4; cursor: not-allowed; }
.bg-code { max-width: 180px; display: inline-block; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.bg-printset { margin-top: 6px; align-items: end; }
.bg-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.bg-btns .btn, .bg-actions .btn { min-height: 44px; }
.bg-danger { color: var(--bad); }

/* 卡片（預覽、驗卡、手機卡共用） */
.bg-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.bg-card { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px; color: var(--ink); }
.bg-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bg-card-top b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-card-top span { font-family: var(--mono); font-weight: 700; color: var(--brand); }
.bg-card-foot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 6px; }
.bg-grid { display: grid; gap: 3px; }
.bg-g3 { grid-template-columns: repeat(3, 1fr); }
.bg-g4 { grid-template-columns: repeat(4, 1fr); }
.bg-g5 { grid-template-columns: repeat(5, 1fr); }
.bg-hd { text-align: center; font-weight: 900; font-size: 18px; color: var(--brand); padding: 2px 0; }
.bg-cell { font: inherit; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-2); color: var(--ink); font-weight: 800; font-size: 18px;
  line-height: 1.1; overflow-wrap: anywhere; word-break: break-word; font-variant-numeric: tabular-nums; }
.bg-cell.long { font-size: 13px; }
.bg-cell.xlong { font-size: 11px; font-weight: 700; }
.bg-cell.free { color: var(--accent); font-size: 22px; }
.bg-cell.on { background: var(--brand-glow); border-color: var(--brand); }
.bg-cell.mine { background: var(--bg-2); border-style: dashed; box-shadow: inset 0 0 0 3px var(--brand-glow); }
.bg-cell.hit { background: var(--brand); color: #04222f; border-color: var(--brand); }
.bg-cell.free.on { color: var(--accent); }
button.bg-cell { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ② 叫號舞台 */
.bg-stage { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.bg-stitle { margin: 0 0 10px; text-align: center; font-size: clamp(20px, 3.4vw, 34px); font-weight: 900; letter-spacing: .06em; }
.bg-show { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 18px; align-items: center; }
.bg-ballbox { text-align: center; }
.bg-ball { width: min(240px, 60vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: var(--brand-grad); color: #04222f;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 30px var(--brand-glow), inset 0 -10px 24px rgba(0,0,0,.18); }
.bg-ball small { font-size: clamp(22px, 4vw, 40px); font-weight: 900; line-height: 1; }
.bg-ball b { font-size: clamp(56px, 10vw, 110px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.bg-ball.word b { font-size: clamp(30px, 5.5vw, 60px); padding: 0 12px; overflow-wrap: anywhere; }
.bg-ball.word.long b { font-size: clamp(20px, 3.6vw, 38px); }
.bg-ball.pop { animation: bgpop .45s ease; }
@keyframes bgpop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.bg-progress { margin: 10px 0 6px; color: var(--ink-soft); font-weight: 700; }
.bg-recent { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 30px; }
.bg-recent span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); font-weight: 700; font-size: 14px; }
.bg-board { display: grid; gap: 3px; }
.bg-board.classic { grid-template-columns: 1fr; gap: 4px; }
.bg-board.range { grid-template-columns: repeat(10, 1fr); }
.bg-board.words { display: flex; flex-wrap: wrap; gap: 5px; }
.bg-brow { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.bg-bl { display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--brand); font-size: 18px; }
.bg-bn { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--line);
  color: var(--muted); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bg-board.words .bg-bn { padding: 4px 10px; }
.bg-bn.on { background: var(--brand-glow); color: var(--ink); border-color: var(--brand); }
.bg-bn.last { background: var(--brand); color: #04222f; }
.bg-patline { text-align: center; margin: 12px 0 8px; color: var(--ink-soft); font-weight: 700; }
.bg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bg-next { font-size: 20px; padding: 12px 36px; }
#bg-auto.on { border-color: var(--brand); color: var(--brand); }
.bg-joinbox { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; background: #fff; color: #111; padding: 6px 10px 6px 6px; border-radius: 10px; font-size: 13px; text-align: center; }
.bg-joinbox img { width: 84px; height: 84px; }
.bg-callset { margin-top: 4px; }
.bg-stage:fullscreen, .bg-stage.fs { border-radius: 0; border: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 3vh 3vw; background: var(--bg); overflow-y: auto; }
/* 置中但內容太高時不切掉上面：用上下 auto 邊距，不用 justify-content: center */
.bg-stage:fullscreen .bg-stitle, .bg-stage.fs .bg-stitle { margin-top: auto; }
.bg-stage:fullscreen .bg-actions, .bg-stage.fs .bg-actions { margin-bottom: auto; }
.bg-stage.fs { position: fixed; inset: 0; z-index: 99; height: 100dvh; min-height: 0; }
.bg-stage:fullscreen .bg-show, .bg-stage.fs .bg-show { grid-template-columns: minmax(240px, 34vw) 1fr; }
.bg-stage:fullscreen .bg-ball, .bg-stage.fs .bg-ball { width: min(30vw, 52vh); }
.bg-stage:fullscreen .bg-ball b, .bg-stage.fs .bg-ball b { font-size: min(13vw, 22vh); }
.bg-stage:fullscreen .bg-ball.word b, .bg-stage.fs .bg-ball.word b { font-size: min(6vw, 11vh); }
.bg-stage:fullscreen .bg-bn, .bg-stage.fs .bg-bn { min-height: min(6vh, 4vw); font-size: min(2.6vh, 1.8vw); }
.bg-stage:fullscreen .bg-bl, .bg-stage.fs .bg-bl { font-size: min(4vh, 2.6vw); }
.bg-stage:fullscreen .bg-joinbox img, .bg-stage.fs .bg-joinbox img { width: 130px; height: 130px; }
.bg-stage:fullscreen .bg-joinbox, .bg-stage.fs .bg-joinbox { top: auto; bottom: 14px; }
html.bg-noscroll, html.bg-noscroll body { overflow: hidden; }

/* ③ 驗卡 */
.bg-checkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bg-checkrow .tl-lbl { margin: 0; }
.bg-checkrow .tl-num { width: 120px; }
.bg-verdict { font-size: 20px; font-weight: 800; margin: 0 0 10px; }
.bg-verdict.ok { color: var(--ok); }
.bg-check-card { max-width: 380px; }

/* ④ 掃碼領卡 */
.bg-room-qr { display: block; width: 200px; height: 200px; margin: 12px 0; background: #fff; border-radius: 8px; padding: 6px; }

/* ⑤ 1～25 連線賓果 */
.bg25 { position: relative; margin-top: 16px; }
.bg25-msg { font-size: 17px; font-weight: 700; min-height: 1.6em; }
.bg25-score { color: var(--ink-soft); margin-bottom: 8px; }
.bg25-whose { margin: 0 0 6px; font-weight: 800; color: var(--ink-soft); }
.bg25-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 380px; }
.bg25-cell { font: inherit; aspect-ratio: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
button.bg25-cell { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bg25-cell.empty { border-style: dashed; }
.bg25-cell.on { background: var(--brand-glow); border-color: var(--brand); text-decoration: line-through; text-decoration-thickness: 2px; }
.bg25-cell.line { background: var(--brand); color: #04222f; text-decoration: none; }
.bg25-both { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bg25-both .bg25-cell { font-size: 15px; min-height: 0; }
.bg25-cover { padding: 30px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-strong); text-align: center; margin: 10px 0; }
.bg25-cover p { font-size: 18px; font-weight: 700; }
.bg25-log { margin-top: 10px; color: var(--ink-soft); }

/* 手機領卡頁（bingo_play.html） */
.bgp [hidden] { display: none !important; }
.bgp { max-width: 520px; margin: 16px auto 40px; padding: 0 4px; text-align: center; }
.bgp-head h1 { font-size: 24px; margin: 0 0 4px; }
.bgp-no { margin: 0 0 10px; font-family: var(--mono); font-size: 20px; font-weight: 800; color: var(--brand); }
.bgp-last { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 18px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-strong); margin-bottom: 10px; }
.bgp-last small { color: var(--muted); }
.bgp-last b { font-size: 26px; }
.bgp-win { margin: 0 0 10px; padding: 12px; border-radius: 12px; background: var(--brand-grad); color: #04222f; display: flex; flex-direction: column; gap: 2px; animation: bgpop .45s ease; }
.bgp-win > b { font-size: 34px; letter-spacing: .1em; }
.bgp-card { text-align: left; }
.bgp-card .bg-cell { font-size: clamp(18px, 6vw, 26px); }
.bgp-card .bg-cell.long { font-size: clamp(12px, 3.6vw, 17px); }
.bgp-card .bg-cell.xlong { font-size: clamp(10px, 3vw, 14px); }
.bgp-need { min-height: 1.4em; font-weight: 800; color: var(--accent); margin: 8px 0 0; }
.bgp-opts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 6px 0; }
.bgp-hist { text-align: left; margin: 10px 0; }

@media (max-width: 760px) {
  .bg-show { grid-template-columns: 1fr; }
  .bg-ball { width: min(180px, 48vw); }
  .bg-ball b { font-size: 64px; }
  .bg-board.range { grid-template-columns: repeat(8, 1fr); }
  .bg-brow { gap: 2px; }
  .bg-bn { min-height: 22px; font-size: 10.5px; padding: 1px; border-radius: 4px; }
  .bg-bl { font-size: 13px; }
  .bg-board.words .bg-bn { font-size: 13px; }
  .bg-joinbox { position: static; margin: 12px auto 0; width: max-content; }
  .bg-stage:fullscreen .bg-show, .bg-stage.fs .bg-show { grid-template-columns: 1fr; }
  .bg-stage:fullscreen .bg-ball, .bg-stage.fs .bg-ball { width: min(56vw, 30vh); }
  .bg-stage:fullscreen .bg-ball b, .bg-stage.fs .bg-ball b { font-size: min(22vw, 12vh); }
  .bg-stage:fullscreen .bg-bn, .bg-stage.fs .bg-bn { min-height: 22px; font-size: 10.5px; }
  .bg-stage:fullscreen .bg-bl, .bg-stage.fs .bg-bl { font-size: 13px; }
  .bg-cell { font-size: 15px; }
  .bg25-both { grid-template-columns: 1fr; }
}

/* 列印：只印賓果卡或叫號籤 */
.bg-print { display: none; }
@media print {
  body.printing-bingo > *:not(main) { display: none !important; }
  body.printing-bingo main > *:not(.tool-box) { display: none !important; }
  body.printing-bingo .tool-box > *:not(.bg-print) { display: none !important; }
  body.printing-bingo .tool-box { border: 0; padding: 0; margin: 0; background: none; }
  body.printing-bingo { background: #fff; }
  body.printing-bingo .bg-print { display: block; color: #000; font-family: sans-serif; }
  .bgpr-page { display: grid; height: 250mm; break-after: page; page-break-after: always; gap: 0; }
  .bgpr-page:last-child { break-after: auto; page-break-after: auto; }
  .bgpr-n1 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .bgpr-n2 { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .bgpr-n4 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .bgpr-n6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .bg-print .bg-card { background: #fff; color: #000; border: 1px dashed #888; border-radius: 0; padding: 5mm; display: flex; flex-direction: column; break-inside: avoid; overflow: hidden; min-height: 0; }
  .bgpr-n1 .bg-card, .bgpr-n2 .bg-card { padding: 8mm 14mm; }
  .bg-print .bg-card-top { margin-bottom: 2mm; }
  .bg-print .bg-card-top b { font-size: 13pt; color: #000; }
  .bg-print .bg-card-top span { color: #0070b0; font-size: 12pt; }
  .bg-print .bg-grid { flex: 1; min-height: 0; gap: 0; border: 2px solid #000; grid-auto-rows: minmax(0, 1fr); }
  .bg-print .bg-grid.bg-has-hd { grid-template-rows: auto; }
  .bg-print .bg-grid .bg-hd { color: #fff; background: #0070b0; font-size: 16pt; border: 1px solid #000; display: flex; align-items: center; justify-content: center; }
  .bg-print .bg-cell { aspect-ratio: auto; min-height: 0; border: 1px solid #000; border-radius: 0; background: #fff; color: #000; font-size: 18pt; }
  .bgpr-n1 .bg-cell { font-size: 34pt; } .bgpr-n1 .bg-hd { font-size: 26pt; padding: 2mm 0; }
  .bgpr-n2 .bg-cell { font-size: 22pt; }
  .bgpr-n6 .bg-cell { font-size: 14pt; } .bgpr-n6 .bg-hd { font-size: 12pt; }
  .bgpr-n6 .bg-cell.long { font-size: 9pt; } .bgpr-n6 .bg-cell.xlong { font-size: 7.5pt; }
  .bg-print .bg-cell.long { font-size: 11pt; } .bgpr-n1 .bg-cell.long { font-size: 20pt; }
  .bg-print .bg-cell.xlong { font-size: 9pt; } .bgpr-n1 .bg-cell.xlong { font-size: 15pt; }
  .bg-print .bg-cell.free { color: #c46a00; }
  .bg-print .bg-card-foot { color: #444; font-size: 9pt; }
  .bg-print .bw .bg-card-top span { color: #000; }
  .bg-print .bw .bg-hd { background: #fff; color: #000; }
  .bg-print .bw .bg-cell.free { color: #000; }
  .bgpr-slips { display: grid; grid-template-columns: repeat(6, 1fr); }
  .bgpr-head { grid-column: 1 / -1; margin: 0 0 3mm; font-size: 11pt; }
  .bgpr-slip { border: 1px dashed #888; height: 18mm; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15pt; font-weight: 800; break-inside: avoid; padding: 1mm; overflow-wrap: anywhere; }
}
/* 站長 2026-10-28：選項文字太長時，圓點和文字保持同一行開頭（賓果等工具） */
.tl-check:has(> input[type="radio"]), .tl-check:has(> input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 8px; }
.tl-check > input[type="radio"], .tl-check > input[type="checkbox"] { flex: none; margin-top: .3em; }

/* ==== 工具樣式：image ==== */
/* 站長 2026-10-28：圖片工具（HEIC 轉 JPG、轉檔、壓縮、轉 PDF、證件照、浮水印）。合併進 app/static/site.css */
.im-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 150px; padding: 22px 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius-sm, 10px);
  background: var(--bg-2); cursor: pointer; transition: border-color .15s, background .15s; }
.im-drop:hover, .im-drop:focus-visible, .im-drop.on { border-color: var(--brand); background: var(--brand-glow); outline: none; }
.im-drop b { font-size: 17px; color: var(--ink); }
.im-drop-ic { font-size: 34px; line-height: 1; }
.im-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.im-privacy { margin: 10px 0 16px; font-size: 14px; color: var(--ok); }
.im-opts { margin: 8px 0 6px; }
.im-tabs { margin-bottom: 4px; }
.im-range { width: 100%; height: 40px; accent-color: var(--brand); }
.im-kb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.im-kb .tl-num { width: 110px; }
.im-chips { margin: 6px 0; }
.im-chips .tl-chip-btn, .ip-btns .tl-chip-btn, .im-dl .tl-chip-btn { min-height: 40px; }
.tl-chip-btn:disabled { opacity: .45; cursor: not-allowed; }
.im-results { margin-top: 18px; }
.im-status { min-height: 1.4em; font-size: 14px; color: var(--ink-soft); margin: 6px 0; }
.im-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 10px; }
.im-actions .btn { min-height: 44px; }
.im-sum { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.7; }
.im-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.im-tbl th, .im-tbl td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: middle; }
.im-tbl td.im-in, .im-tbl td.im-out { white-space: nowrap; font-variant-numeric: tabular-nums; }
.im-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.im-name > span:last-child { min-width: 0; }
.im-name b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.im-name small { display: block; color: var(--muted); font-size: 12.5px; }
.im-tw { flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 6px; overflow: hidden; }
.im-thumb { max-width: 56px; max-height: 56px; display: block; }
.im-down { display: inline-block; margin-left: 6px; color: var(--ok); font-weight: 700; }
.im-up { display: inline-block; margin-left: 6px; color: var(--warn); font-weight: 700; }
.im-next { margin: 18px 0 6px; font-size: 14.5px; color: var(--ink-soft); }
.im-lic { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.7; }
.im-next a, .im-lic a { color: var(--brand); }

/* 圖片轉 PDF */
.pd-idnote { background: var(--brand-glow); border-radius: 8px; padding: 10px 12px; color: var(--ink); }
.pd-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.pd-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; cursor: grab; }
.pd-tw { flex: 0 0 72px; height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-tw canvas { max-width: 72px; max-height: 72px; transition: transform .2s; }
.pd-nm { flex: 1; min-width: 0; }
.pd-nm b { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.pd-nm small { color: var(--muted); font-size: 12.5px; }
.pd-bt { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pd-bt .tl-chip-btn { min-width: 40px; min-height: 40px; padding: 6px 10px; }
.pd-out .im-kb .tl-in { flex: 1; min-width: 0; }

/* 證件照 */
.ip-lead { background: var(--brand-glow); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.ip-custom .tl-num { width: 84px; }
.ip-edit { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 22px; margin: 18px 0; align-items: start; }
.ip-stagew { min-width: 0; }
.ip-stage { display: block; max-width: 100%; touch-action: none; cursor: grab; border: 1px solid var(--line-strong); background: #fff; }
.ip-stage:active { cursor: grabbing; }
.ip-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ip-key { display: inline-block; width: 18px; height: 4px; margin-right: 4px; vertical-align: middle; border-radius: 2px; }
.ip-k1 { background: #e11d48; } .ip-k2 { background: #16a34a; }
.ip-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ip-bg { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.ip-bg.ok { color: var(--ok); background: var(--bg-2); }
.ip-bg.bad { color: var(--warn); background: var(--bg-2); border: 1px solid var(--warn); }
.ip-sheet { display: block; max-width: 100%; margin: 10px 0; border: 1px solid var(--line-strong); background: #fff; }
.ip-tips { margin: 8px 0 0 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.ip-shoot { margin-top: 18px; }
.ip-shoot ul { margin: 6px 0 4px 20px; line-height: 1.8; }

/* 浮水印 */
.wm-prevw { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.wm-prev { display: block; max-width: 100%; height: auto; }
.wm-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

@media (max-width: 760px) {
  .ip-edit { grid-template-columns: 1fr; }
  .ip-stage { margin: 0 auto; }
  /* 手機：表格改成一張一張的卡片，下載鈕不會被擠到右邊看不到 */
  .im-tbl { overflow: visible; }
  .im-tbl table, .im-tbl tbody { display: block; }
  .im-tbl thead { display: none; }
  .im-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
    border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
  .im-tbl td { border: 0; padding: 0; font-size: 13.5px; }
  .im-tbl td.im-name { grid-column: 1 / -1; }
  .im-tbl td.im-in::before { content: '原本 '; color: var(--muted); }
  .im-tbl td.im-out::before { content: '處理後 '; color: var(--muted); }
  .im-tbl td.im-in, .im-tbl td.im-out { white-space: normal; }
  .im-tbl table { width: 100%; min-width: 0; }
  .im-tw { flex-basis: 44px; width: 44px; height: 44px; }
  .im-thumb { max-width: 44px; max-height: 44px; }
  .pd-item { flex-wrap: wrap; }
  .pd-bt { width: 100%; justify-content: flex-start; }
}
@media print {
  .im-drop, .im-privacy, .im-opts, .im-actions, .im-next, .im-lic { display: none !important; }
}

/* ==== 工具樣式：finance ==== */
/* 站長 2026-10-28：理財試算（loan／personal-loan／car-loan／mortgage／margin／pe／deposit／us-stock-fee）
   合併進 app/static/site.css 時放在 .dc-* 那段後面；沿用 sf-2、sf-gap、sf-up/down、dc-chart/dc-grid/dc-ax/dc-val。 */
/* 結果欄裡有表格時，不讓格線欄被撐寬（手機不能左右捲） */
:is(#ln-root, #mg-root, #pe-root, #dp-root, #us-root, #cz-root) .tl-col { min-width: 0; }
.fin-unit { display: grid; grid-template-columns: 1fr 92px; gap: 8px; }
.fin-mini { margin-top: 8px; gap: 6px; }
.fin-mini .tl-chip-btn { padding: 6px 12px; font-size: 14px; min-height: 36px; }
.fin-more { margin: 4px 0 12px; }
.fin-more > summary { font-weight: 600; }
.fin-more[open] { padding-bottom: 6px; }
.fin-chart { margin-top: 18px; }
.fin-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fin-table td { font-variant-numeric: tabular-nums; }
#ln-cmp table { font-size: 14px; } #ln-cmp td, #ln-cmp th { white-space: nowrap; }
#ln-tbl { max-height: 460px; overflow: auto; }
#ln-tbl thead th { position: sticky; top: 0; background: var(--bg-2); }
.fin-table th[scope], .fin-table tbody th { text-align: left; }
.fin-save-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.fin-save-row .tl-in { flex: 1 1 200px; }
.fin-save-btn { font-size: 15px; padding: 10px 18px; min-height: 42px; }
.fin-note { margin-top: 18px; padding: 10px 12px; border-left: 3px solid var(--brand); background: var(--bg-2); border-radius: var(--radius-sm); color: var(--ink-soft); }
.fin-links a { color: var(--brand); }
.fin-first { margin-top: 0; }
.fin-phases { list-style: none; margin: 0; padding: 0; }
.fin-phases li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 4px 0; color: var(--ink-soft); }
.fin-phases li b { font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin-box { margin-top: 16px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.fin-box .un-list { margin-top: 0; }
/* 圖：累積利息線、提前還款後的剩餘本金線 */
.fin-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.fin-line2 { fill: none; stroke: var(--warn); stroke-width: 2.5; stroke-dasharray: 6 4; }
.fin-line-k { fill: var(--accent); }
.fin-line2-k { fill: var(--warn); }
/* 分享列與我的試算 */
.fin-bar { margin-top: 24px; }
.fin-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fin-acts .tl-chip-btn { min-height: 40px; }
.fin-list { list-style: none; margin: 6px 0; padding: 0; }
.fin-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fin-list li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fin-list .tl-link { min-height: 40px; }
/* 維持率標籤 */
.fin-tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; }
.fin-tag-w { color: var(--warn); }
.fin-tag-ok { color: var(--ok); }
.fin-steps { margin: 0 0 12px 20px; padding: 0; color: var(--ink-soft); line-height: 1.75; }
.fin-steps b { color: var(--ink); }
/* 融資融券 */
.mg-arow { display: grid; grid-template-columns: 48px 1.2fr 1fr 1fr .8fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.mg-arow .tl-in { padding: 9px 8px; }
.mg-type { font-weight: 700; font-size: 14px; }
.mg-ahead { margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.mg-ahint { display: none; }
.mg-axis { stroke: var(--line-strong); stroke-width: 2; }
.mg-bad { fill: var(--warn); fill-opacity: .22; }
.mg-pt { stroke: var(--bg); stroke-width: 2; fill: var(--ink-soft); }
.mg-bad.mg-pt, .mg-pt.mg-bad { fill: var(--warn); fill-opacity: 1; }
.mg-ok { fill: var(--ok); }
.mg-now { fill: var(--brand); }
.mg-x { fill: var(--accent); }
.mg-lab { font-weight: 700; fill: var(--ink-soft); }
/* 本益比 */
.pe-q4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.pe-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
.pe-hist { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 8px; align-items: center; margin-bottom: 8px; }
.pe-hist .tl-lbl { margin: 0; }
.pe-band { fill: var(--brand); fill-opacity: .22; }
.pe-tick { stroke: var(--ink-soft); stroke-width: 2; }
/* 美股 */
.us-bk { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 4; }

@media (max-width: 640px) {
  .mg-arow { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .mg-arow .tl-in:nth-of-type(1) { grid-column: 2 / 5; }
  .mg-arow .tl-link { grid-column: 1 / 5; justify-self: end; }
  .mg-ahead { display: none; }
  .mg-ahint { display: block; }
  .pe-3 { grid-template-columns: 1fr 1fr 1fr; }
  .fin-phases li b { font-size: 22px; }
}
@media (max-width: 400px) {
  .pe-q4 { grid-template-columns: 1fr 1fr; }
  .fin-unit { grid-template-columns: 1fr 80px; }
}
@media print {
  :is(#ln-root, #mg-root, #pe-root, #dp-root, #us-root) :is(.fin-bar, .fin-save-row, .tl-chips, .tl-tabs, #ln-csv) { display: none !important; }
  #ln-tbl { max-height: none; overflow: visible; }
  .fin-chart svg { max-height: 220px; }
}

/* ==== 工具樣式：calendar ==== */
/* ---- 2027 行事曆（站長 2026-10-28）：/tools/calendar-2027，class 都用 cal- 開頭 ---- */
.cal-top { display: flex; gap: 14px 20px; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin-bottom: 14px; }
.cal-yr b { display: block; font-size: 28px; line-height: 1.2; }
.cal-yr span { font-size: 14px; color: var(--ink-soft); }
.cal-cd { flex: 0 1 420px; min-width: 260px; background: var(--brand-glow); border: 1px solid var(--brand); border-radius: 12px; padding: 10px 16px; }
.cal-cd > span { display: block; font-size: 13.5px; color: var(--ink-soft); }
.cal-cd > b { display: block; font-size: 21px; line-height: 1.3; }
.cal-cd .cal-cdn { font-size: 28px; font-variant-numeric: tabular-nums; color: var(--brand); }
.cal-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--ok); border-radius: 10px; margin-bottom: 14px; }
.cal-share p { margin: 0; flex: 1 1 100%; font-size: 14.5px; }
.cal-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.cal-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--ink); }
.cal-jump a:hover { border-color: var(--brand); text-decoration: none; }
.cal-sec { scroll-margin-top: 80px; margin-bottom: 30px; }
.cal-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.cal-tabs { margin-bottom: 0; }
.cal-lunar-sw { margin: 0; }

/* 單月 */
.cal-mnav { scroll-margin-top: 76px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
.cal-arw { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; font: inherit; font-size: 28px; line-height: 1; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer; }
.cal-arw:hover:not(:disabled) { border-color: var(--brand); }
.cal-arw:disabled { opacity: .3; cursor: default; }
.cal-mtt { text-align: center; }
.cal-mtt h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.cal-mtt span { font-size: 13px; color: var(--muted); }
.cal-mchips { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-bottom: 12px; }
.cal-mc { font: inherit; font-size: 14px; min-height: 40px; padding: 4px 0; border-radius: 8px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); cursor: pointer; }
.cal-mc:hover { border-color: var(--brand); }
.cal-mc.on { background: var(--brand); color: #04222f; border-color: var(--brand); font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; touch-action: pan-y; }
.cal-grid > p { grid-column: 1 / -1; }
.cal-wh { text-align: center; font-size: 13px; color: var(--muted); padding: 2px 0; }
.cal-wh.we { color: var(--bad); }
.cal-grid .cal-d { position: relative; min-width: 0; min-height: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 7px 9px; font: inherit; text-align: left; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.cal-grid .cal-d:hover { border-color: var(--brand); }
.cal-grid .cal-d:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cal-grid .cal-d.out { background: none; border-color: transparent; cursor: default; }
.cal-grid .cal-d.spc::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bad); opacity: .16; pointer-events: none; }
.cal-grid .cal-d.bu::before { background: var(--accent); opacity: .18; }
.cal-grid .cal-d.work { border-color: var(--warn); }
.cal-grid .cal-d.lw::after { content: ''; position: absolute; left: -3px; right: -3px; bottom: -1px; height: 4px; background: var(--brand); pointer-events: none; }
.cal-grid .cal-d.lw-s::after { left: 6px; border-radius: 4px 0 0 4px; }
.cal-grid .cal-d.lw-e::after { right: 6px; border-radius: 0 4px 4px 0; }
.cal-grid .cal-d.lw-se::after { left: 6px; right: 6px; border-radius: 4px; }
.cal-grid .cal-d.today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cal-grid .cal-d.today .cal-n { background: var(--brand); color: #04222f; border-radius: 6px; padding: 0 5px; margin-left: -5px; }
.cal-grid .cal-d.lv { box-shadow: inset 0 0 0 2px var(--ok); }
.cal-n { font-size: 20px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cal-grid .cal-d.off .cal-n { color: var(--bad); }
.cal-grid .cal-d.bu .cal-n { color: var(--accent); }
.cal-ln { font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.cal-ln.m1 { color: var(--brand); font-weight: 700; }
.cal-ev { max-width: 100%; font-size: 12px; line-height: 1.3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.k-holiday, .cal-ev.k-off { color: var(--bad); }
.cal-ev.k-bu { color: var(--accent); }
.cal-ev.k-work { color: var(--warn); }
.cal-ev.k-fest { color: var(--brand); }
.cal-ev.k-term { color: var(--ok); }
.cal-ev.k-obs { color: var(--ink-soft); font-weight: 400; }
.cal-nt { max-width: 100%; margin-top: 2px; font-size: 11.5px; line-height: 1.35; padding: 0 4px; border-radius: 4px; background: var(--line-strong); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-lvt { position: absolute; top: 5px; right: 5px; font-size: 11px; line-height: 1.4; padding: 0 4px; border-radius: 4px; background: var(--ok); color: #04220f; font-weight: 700; }
.cal-tip { margin: 10px 0 0; }
.cal-mlist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.cal-mlist li { display: flex; gap: 10px; padding: 8px 12px; font-size: 14.5px; color: var(--ink); background: var(--bg-2); border-radius: 8px; border-left: 3px solid var(--line-strong); }
.cal-mlist li b { flex: 0 0 auto; min-width: 82px; font-variant-numeric: tabular-nums; }
.cal-mlist .k-holiday, .cal-mlist .k-off { border-left-color: var(--bad); }
.cal-mlist .k-bu { border-left-color: var(--accent); }
.cal-mlist .k-work { border-left-color: var(--warn); }
.cal-mlist .k-fest, .cal-mlist .k-lw { border-left-color: var(--brand); }
.cal-mlist .k-term, .cal-mlist .k-leave { border-left-color: var(--ok); }
.cal-mlist .k-none { color: var(--muted); }

/* 全年 */
.cal-ygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.cal-ygrid .cal-mini { font: inherit; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 10px; cursor: pointer; text-align: center; min-width: 0; }
.cal-ygrid .cal-mini:hover, .cal-ygrid .cal-mini:focus-visible { border-color: var(--brand); outline: none; }
.cal-ygrid h3 { margin: 0 0 4px; font-size: 16px; }
.cal-ygrid .cal-mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }
.cal-ygrid .cal-wh { font-size: 11px; padding: 0; }
.cal-ygrid .cal-d { position: relative; display: block; font-size: 12.5px; line-height: 1.9; border-radius: 4px; font-variant-numeric: tabular-nums; }
.cal-ygrid .cal-d i { font-style: normal; position: relative; }
.cal-ygrid .cal-d.off { color: var(--bad); font-weight: 700; }
.cal-ygrid .cal-d.bu { color: var(--accent); }
.cal-ygrid .cal-d.spc { box-shadow: inset 0 -2px 0 var(--bad); }
.cal-ygrid .cal-d.bu.spc { box-shadow: inset 0 -2px 0 var(--accent); }
.cal-ygrid .cal-d.work { box-shadow: inset 0 0 0 1px var(--warn); }
.cal-ygrid .cal-d.lw::before { content: ''; position: absolute; inset: 0; background: var(--brand); opacity: .2; }
.cal-ygrid .cal-d.lw-s::before { border-radius: 4px 0 0 4px; left: 0; }
.cal-ygrid .cal-d.lw-e::before { border-radius: 0 4px 4px 0; right: 0; }
.cal-ygrid .cal-d.today { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-ygrid .cal-d.lv { box-shadow: inset 0 0 0 2px var(--ok); }
.cal-ygrid .cal-d.nt i { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-soft); margin: 14px 0 0; }
.lg::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg.off::before { background: var(--bad); opacity: .5; }
.lg.bu::before { background: var(--accent); }
.lg.work::before { box-shadow: inset 0 0 0 2px var(--warn); }
.lg.lw::before { background: var(--brand); height: 4px; vertical-align: 3px; }
.lg.today::before { box-shadow: inset 0 0 0 2px var(--brand); }
.lg.nt::before { background: var(--line-strong); }
.lg.lv::before { box-shadow: inset 0 0 0 2px var(--ok); }

/* 連假 */
.cal-lws { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.cal-lwc { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.cal-lwc:hover { border-color: var(--brand); }
.cal-lwc.past { opacity: .55; }
.cal-lwc.now { border-color: var(--brand); background: var(--brand-glow); }
.cal-lwn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: var(--brand-glow); color: var(--brand); }
.cal-lwc > div:not(.cal-lwd) > b { display: block; font-size: 16px; line-height: 1.35; }
.cal-lwc > div:not(.cal-lwd) > span { font-size: 13.5px; color: var(--ink-soft); }
.cal-lwd { text-align: right; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.cal-lwd b { font-size: 26px; color: var(--ink); margin-right: 2px; font-variant-numeric: tabular-nums; }
.cal-lwd small { display: block; font-size: 12px; color: var(--brand); }
.cal-lwc.past .cal-lwd small { color: var(--muted); }

/* 請假攻略 */
.cal-pin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.cal-pin .tl-lbl { margin: 0; font-size: 16px; color: var(--ink); }
.cal-step { display: flex; align-items: center; gap: 6px; }
.cal-sb { width: 44px; height: 44px; font: inherit; font-size: 22px; line-height: 1; border-radius: 10px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer; }
.cal-sb:hover { border-color: var(--brand); }
.cal-step .tl-num { width: 76px; text-align: center; font-size: 20px; font-weight: 800; }
.cal-pu { font-size: 16px; font-weight: 600; }
.cal-h3 { font-size: 17px; margin: 20px 0 10px; }
.cal-pls { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.cal-pl { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.cal-pl.on { border-color: var(--ok); }
.cal-plh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-plh b { font-size: 16px; margin-right: auto; }
.cal-tag { font-size: 12px; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.cal-tag.t-long { background: var(--brand); color: #04222f; }
.cal-tag.t-eff { background: var(--ok); color: #04220f; }
.cal-pl p { margin: 4px 0; font-size: 14px; color: var(--ink-soft); }
.cal-pl p.cal-plbig { font-size: 16px; color: var(--ink); }
.cal-plbig b { font-size: 22px; color: var(--brand); font-variant-numeric: tabular-nums; }
.cal-pl .tl-chip-btn { margin-top: 8px; min-height: 40px; }
.cal-plsum { font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cal-plsum b { font-size: 20px; color: var(--brand); }
.cal-plsum .tl-chip-btn { min-height: 40px; }
.cal-plfoot { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.cal-plfoot .tl-link { font-size: 14px; min-height: 40px; }

/* 列印、匯出 */
.cal-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 8px; }
.cal-opt { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-2); cursor: pointer; }
.cal-opt input { grid-row: span 2; width: 20px; height: 20px; accent-color: var(--brand); }
.cal-opt span { font-size: 13px; color: var(--muted); }
.cal-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-glow); }
.cal-icso { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 16px; }
.cal-icso .tl-check { margin: 4px 0; }
.cal-src { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.cal-src p { margin: 4px 0; }

/* 備註視窗 */
.cal-dlg { width: min(420px, calc(100vw - 24px)); padding: 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); color: var(--ink); }
.cal-dlg::backdrop { background: rgba(0, 0, 0, .55); }
.cal-dlg h3 { margin: 0 0 6px; font-size: 19px; }
.cal-dinfo { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cal-dinfo span { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-soft); }
.cal-dinfo .is-off { color: var(--bad); border-color: var(--bad); }
.cal-qns { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.cal-qns .tl-chip-btn { min-height: 40px; }
.cal-dlg .tl-check { margin: 6px 0; }
.cal-dbtn { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cal-dbtn .tl-go { width: auto; flex: 1 1 auto; }
.cal-dbtn .tl-chip-btn { min-height: 44px; padding: 7px 18px; }
.cal-ndel { margin-left: auto; color: var(--bad); min-height: 40px; }

@media (min-width: 901px) { .cal-grid .cal-d { min-height: 98px; } .cal-ln, .cal-ev { font-size: 13px; } .cal-nt { font-size: 12.5px; } }
@media (max-width: 900px) { .cal-ygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cal-cd { flex: 1 1 100%; min-width: 0; max-width: none; }
  .cal-mchips { grid-template-columns: repeat(6, 1fr); }
  .cal-grid { gap: 2px; }
  .cal-grid .cal-d { min-height: 66px; padding: 3px 3px 7px; border-radius: 6px; }
  .cal-n { font-size: 16px; }
  .cal-ln, .cal-ev { font-size: 10.5px; }
  .cal-grid .cal-ev ~ .cal-ev { display: none; }
  .cal-nt { font-size: 10px; padding: 0 2px; }
  .cal-lvt { top: 2px; right: 2px; font-size: 10px; padding: 0 2px; }
  .cal-grid .cal-d.lw::after { left: -2px; right: -2px; height: 3px; }
  .cal-grid .cal-d.lw-s::after { left: 4px; } .cal-grid .cal-d.lw-e::after { right: 4px; } .cal-grid .cal-d.lw-se::after { left: 4px; right: 4px; }
  .cal-grid .cal-d.today .cal-n { padding: 0 3px; margin-left: -3px; }
  .cal-ygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cal-ygrid .cal-mini { padding: 6px 4px 8px; }
  .cal-ygrid .cal-d { font-size: 11.5px; line-height: 1.75; }
  .cal-mtt h2 { font-size: 21px; }
  .cal-mlist { grid-template-columns: 1fr; }
}
@media (max-width: 360px) { .cal-ln { font-size: 9.5px; letter-spacing: -.03em; } .cal-ev { font-size: 9.5px; } }

/* 列印：只印產生出來的 .cal-print；版面由 JS 依選項放 @page 大小 */
.cal-print { display: none; }
@media print {
  body.cal-printing > *:not(main) { display: none !important; }
  body.cal-printing main > *:not(.tool-box) { display: none !important; }
  body.cal-printing .tool-box > *:not(.cal) { display: none !important; }
  body.cal-printing .cal > *:not(.cal-print) { display: none !important; }
  body.cal-printing, body.cal-printing main.wrap { background: #fff; padding: 0; margin: 0; max-width: none; }
  body.cal-printing .tool-box { border: 0; padding: 0; margin: 0; background: none; }
  body.cal-printing .cal-print { display: block; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cp-page { break-after: page; page-break-after: always; }
  .cp-page:last-child { break-after: auto; page-break-after: auto; }
  .cp-page header { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; border-bottom: .6mm solid #000; padding-bottom: 1mm; margin-bottom: 2.5mm; }
  .cp-page header h2 { margin: 0; font-size: 20pt; line-height: 1.2; color: #000; }
  .cp-page header span { font-size: 10pt; color: #333; }
  .cal-print .cal-wh { color: #333; font-size: 8pt; line-height: 1.4; text-align: center; padding: 0; }
  .cal-print .cal-wh.we { color: #c00; }
  /* 全年 */
  .cp-yg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 4mm; }
  .cp-year.land .cp-yg { grid-template-columns: repeat(4, 1fr); gap: 2mm 4mm; }
  .cp-yg .cal-mini { border: .3mm solid #999; border-radius: 2mm; padding: 1mm 1.5mm 1.2mm; break-inside: avoid; }
  .cp-yg h3 { margin: 0; font-size: 11pt; line-height: 1.3; text-align: center; color: #000; }
  .cp-yg .cal-mg { display: grid; grid-template-columns: repeat(7, 1fr); }
  .cp-yg .cal-d { font-size: 9pt; text-align: center; line-height: 1.15; padding: .25mm 0; color: #000; overflow: hidden; }
  .cp-year.port:not(.lunar) .cp-yg .cal-d { padding: 1.1mm 0; font-size: 10pt; }
  .cp-year.land.lunar .cp-yg .cal-d { font-size: 8.5pt; line-height: 1.1; }
  .cp-year.land.lunar .cp-yg .cal-d small { font-size: 4.8pt; }
  .cp-year.land:not(.lunar) .cp-yg .cal-d { padding: .7mm 0; font-size: 10pt; }
  .cp-yg .cal-d i { font-style: normal; display: block; }
  .cp-yg .cal-d small { display: block; font-size: 5pt; line-height: 1.2; color: #555; white-space: nowrap; font-weight: 400; }
  .cp-yg .cal-d.off { color: #c00; font-weight: 700; }
  .cp-yg .cal-d.spc { background: #fde8e8; }
  .cp-yg .cal-d.bu { color: #b45309; background: #fdebd3; }
  .cp-yg .cal-d.work { background: #fff3c4; }
  .cp-yg .cal-d.lw { box-shadow: inset 0 -.7mm 0 #1286c0; }
  .cp-yg .cal-d.lv { outline: .4mm solid #1a7f37; outline-offset: -.4mm; }
  .cp-yg .cal-d.nt i { text-decoration: underline; }
  .cp-lw { display: flex; flex-wrap: wrap; gap: 0 4mm; font-size: 8.5pt; line-height: 1.5; margin-top: 2mm; color: #000; }
  .cp-lw b { margin-right: 1mm; }
  .cp-legend { display: flex; gap: 4mm; font-size: 8pt; line-height: 1.4; margin: 1.5mm 0 0; color: #000; }
  .cp-legend .lg::before { width: 3mm; height: 3mm; }
  .cp-legend .lg.off::before { background: #fde8e8; box-shadow: inset 0 0 0 .3mm #c00; }
  .cp-legend .lg.we::before { display: none; }
  .cp-legend .lg.we { color: #c00; font-weight: 700; }
  .cp-legend .lg.bu::before { background: #fdebd3; box-shadow: inset 0 0 0 .3mm #b45309; }
  .cp-legend .lg.lw::before { background: #1286c0; height: .8mm; }
  .cp-legend .lg.lv::before { box-shadow: inset 0 0 0 .4mm #1a7f37; }
  .cp-foot { font-size: 7.5pt; line-height: 1.4; color: #555; margin: 1mm 0 0; }
  /* 每月一頁 */
  .cp-mg { display: grid; grid-template-columns: repeat(7, 1fr); border-top: .3mm solid #999; border-left: .3mm solid #999; }
  .cp-mg .cal-wh { border-right: .3mm solid #999; border-bottom: .3mm solid #999; padding: 1mm 0; font-size: 10pt; font-weight: 700; }
  .cp-mg .cal-d { position: relative; display: flex; flex-direction: column; gap: .4mm; padding: 1.2mm 2mm; overflow: hidden; color: #000;
    border-right: .3mm solid #999; border-bottom: .3mm solid #999; }
  .cp-mg.rows4 .cal-d { height: 39mm; } .cp-mg.rows5 .cal-d { height: 31mm; } .cp-mg.rows6 .cal-d { height: 26mm; }
  .cp-mg .cal-d.out { background: #f5f5f5; }
  .cp-mg .cal-d.spc { background: #fde8e8; }
  .cp-mg .cal-d.bu { background: #fdebd3; }
  .cp-mg .cal-d.work { background: #fff3c4; }
  .cp-mg .cal-d.lw { box-shadow: inset 0 -1.2mm 0 #1286c0; }
  .cp-mg .cal-d.lv { outline: .5mm solid #1a7f37; outline-offset: -.5mm; }
  .cp-mg .cal-n { font-size: 16pt; line-height: 1.1; }
  .cp-mg .cal-d.off .cal-n { color: #c00; }
  .cp-mg .cal-d.bu .cal-n { color: #b45309; }
  .cp-mg .cal-ln { font-size: 8pt; color: #555; }
  .cp-mg .cal-ev { font-size: 9pt; white-space: normal; line-height: 1.25; }
  .cal-print .cal-ev.k-holiday, .cal-print .cal-ev.k-off { color: #c00; }
  .cal-print .cal-ev.k-bu { color: #b45309; }
  .cal-print .cal-ev.k-work { color: #8a6d00; }
  .cal-print .cal-ev.k-fest { color: #0369a1; }
  .cal-print .cal-ev.k-term { color: #15803d; }
  .cal-print .cal-ev.k-obs { color: #444; }
  .cal-print .cal-nt { font-size: 9pt; background: none; color: #000; border: .3mm solid #666; border-radius: 1mm; padding: 0 1mm; }
  .cal-print .cal-lvt { top: 1.2mm; right: 2mm; font-size: 8pt; background: none; color: #1a7f37; border: .3mm solid #1a7f37; }
  .cal-print .today { box-shadow: none; outline: none; }
}

/* ==== 工具樣式：small-a ==== */
/* ===== 小工具第五批 A：條碼產生器、手機條碼、隨機數字、骰子、節拍器（站長 2026-10-28）===== */
/* 前綴：bc- 條碼、mb- 手機條碼、rn- 隨機數字、dz- 骰子、mt- 節拍器 */

/* ---------- 條碼產生器 ---------- */
.bc-fmt-note { margin: -8px 0 6px; color: var(--ink-soft); }
.bc-modes { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.bc-modes .tl-chip-btn, .bc-chips .tl-chip-btn { min-height: 40px; }
.bc-val { font-size: 20px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-chips small { color: var(--muted); font-size: 11.5px; }
.bc-recent { margin-top: 12px; }
.bc-2 { display: grid; grid-template-columns: 1fr 110px; gap: 0 12px; }
.bc-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.bc-3 .tl-num { max-width: none; }
.bc-gap { margin-top: 14px; }
.bc-src .tl-check { margin: 4px 0 8px; }
.bc-opts { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (min-width: 721px) { .bc-opts .bc-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.bc-opts summary { cursor: pointer; font-weight: 700; color: var(--ink); margin-bottom: 10px; min-height: 32px; }
.bc-box { background: #fff; border-radius: 12px; min-height: 160px; display: flex; align-items: center; justify-content: center; padding: 14px; overflow-x: auto; }
.bc-box svg { max-width: 100%; height: auto; }
.bc-box .tl-hint { color: #666; text-align: center; }
.bc-dl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.bc-sheet-wrap { background: var(--bg-2); border-radius: 10px; padding: 10px; }
.bc-sheet { background: #fff; width: 100%; aspect-ratio: 210 / 297; display: grid; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.bc-sheet-wrap .bc-sheet { padding: 3% !important; }
.bc-cell { display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; min-height: 0; }
.bc-cell svg { max-width: 92%; max-height: 88%; width: auto; height: auto; }
.bc-sheet.cut .bc-cell { outline: 1px dashed #bbb; outline-offset: -0.5px; }
.bc-print { display: none; }
@media (max-width: 480px) { .bc-3 { grid-template-columns: 1fr 1fr; } .bc-dl .btn { flex: 1 1 100%; } }

/* 列印（條碼、手機條碼共用）：只印 .bc-print 裡的頁面，一頁一張 A4 */
@media print {
  body.printing-barcodes > *:not(main) { display: none !important; }
  body.printing-barcodes main > *:not(.tool-box) { display: none !important; }
  body.printing-barcodes .tool-box > *:not(.bc-print) { display: none !important; }
  body.printing-barcodes .tool-box { border: 0; padding: 0; margin: 0; background: none; }
  body.printing-barcodes, body.printing-barcodes main { background: #fff; margin: 0; padding: 0; }
  body.printing-barcodes .bc-print { display: block; }
  .bc-page { width: 210mm; height: 297mm; box-sizing: border-box; break-after: page; page-break-after: always; overflow: hidden; box-shadow: none; aspect-ratio: auto; }
  .bc-page:last-child { break-after: auto; page-break-after: auto; }
  .bc-page.bc-sheet { display: grid; }
  .bc-page-one { display: flex; align-items: flex-start; justify-content: center; padding-top: 20mm; }
  .bc-page-one svg { max-width: 170mm; height: auto; }
  .mb-page { display: grid; grid-template-columns: repeat(2, 85.6mm); grid-auto-rows: 54mm; justify-content: center; align-content: center; gap: 0; }
  .mb-page .mb-pcard { border: 1px dashed #999; border-radius: 0; box-shadow: none; width: 85.6mm; height: 54mm; }
}

/* ---------- 手機條碼 ---------- */
.mb-code { font-size: 28px; font-weight: 800; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-align: center; }
.mb-ok { color: var(--ok); }
.mb-gap { margin-top: 14px; }
.mb-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mb-btns .btn { min-height: 44px; }
.mb-btns .btn:disabled { opacity: .45; cursor: default; }
.mb-saved { margin-top: 16px; }
.mb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mb-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mb-list .tl-chip-btn { min-height: 40px; }
.mb-pick b { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.mb-card { width: 85.6mm; max-width: 100%; aspect-ratio: 85.6 / 54; background: #fff; color: #000; border-radius: 3.2mm; box-shadow: 0 2px 12px rgba(0,0,0,.3);
  margin: 0 auto; padding: 4mm 5mm; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; font-family: sans-serif; }
.mb-card-t { margin: 0 0 2mm; font-size: 11px; color: #333; }
.mb-card-bc { height: 22mm; display: flex; align-items: center; justify-content: center; }
.mb-card-bc svg { width: 100%; height: 100%; display: block; }
.mb-empty { color: #888; font-size: 13px; }
.mb-card-n { margin: 2mm 0 0; text-align: center; font: 700 16px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .18em; min-height: 1.2em; }
.mb-full { position: fixed; inset: 0; z-index: 130; background: #fff; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.mb-full-tip { font-size: 16px; margin: 0 0 18px; background: #fff3c4; color: #5a4300; padding: 8px 14px; border-radius: 8px; }
.mb-full-bc { width: min(86vw, 900px); height: min(30vh, 34vw, 260px); }
.mb-full-bc svg { width: 100%; height: 100%; display: block; }
.mb-full-code { font: 800 clamp(28px, 8vw, 60px) ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; margin: 14px 0 22px; }
.mb-full-close { min-width: 160px; }
.mb-full-hint { color: #555; font-size: 13px; margin-top: 10px; }
html.mb-noscroll, html.mb-noscroll body { overflow: hidden; }
@media (orientation: landscape) and (max-height: 500px) { .mb-full-bc { height: 42vh; } .mb-full-tip { margin-bottom: 8px; } .mb-full-code { margin: 6px 0 10px; } }

/* ---------- 隨機數字 ---------- */
.rn-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rn-presets .tl-chip-btn, .rn-tools .tl-chip-btn { min-height: 40px; }
.rn-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rn-stage { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 14px; text-align: center; }
.rn-cap { margin: 0; color: var(--muted); font-size: 14px; min-height: 1.4em; }
.rn-big { font-size: clamp(64px, 18vw, 120px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); margin: 6px 0; overflow-wrap: anywhere; }
.rn-big.long { font-size: clamp(40px, 10vw, 72px); }
.rn-big.many { font-size: clamp(28px, 7vw, 48px); word-spacing: .2em; }
.rn-big.pop { animation: rnPop .35s ease; }
@keyframes rnPop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.06); color: var(--brand); } 100% { transform: none; opacity: 1; } }
.rn-sub { margin: 0 0 10px; color: var(--ink-soft); min-height: 1.4em; }
.rn-stage-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rn-stage:fullscreen, .rn-stage.rn-fs { display: flex; flex-direction: column; justify-content: center; border-radius: 0; background: var(--bg); }
.rn-stage.rn-fs { position: fixed; inset: 0; z-index: 99; }
.rn-stage:fullscreen .rn-big, .rn-stage.rn-fs .rn-big { font-size: min(30vw, 40vh); }
.rn-stage:fullscreen .rn-big.many, .rn-stage.rn-fs .rn-big.many { font-size: min(9vw, 14vh); }
.rn-stage:fullscreen .rn-cap, .rn-stage.rn-fs .rn-cap, .rn-stage:fullscreen .rn-sub, .rn-stage.rn-fs .rn-sub { font-size: 22px; }
.rn-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.rn-sep { width: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.rn-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 320px; overflow: auto; }
.rn-list span { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-variant-numeric: tabular-nums; font-weight: 700; }
.rn-gap { margin-top: 14px; }
.rn-drawn { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: rn; }
.rn-drawn li { background: var(--brand-glow); border: 1px solid var(--brand); border-radius: 8px; padding: 3px 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rn-hist li { margin-bottom: 2px; overflow-wrap: anywhere; }
.rn-share { margin-top: 12px; }

/* ---------- 骰子 ---------- */
.dz-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dz-presets .tl-chip-btn, .dz-add .tl-chip-btn { min-height: 40px; }
.dz-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.dz-add .tl-lbl { margin: 0 4px 0 0; }
.dz-not { margin-bottom: 14px; }
.dz-not-row { display: flex; gap: 8px; } .dz-not-row .tl-in { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.dz-stage { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 12px; text-align: center; }
.dz-tray { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; min-height: 120px; padding: 6px; perspective: 600px; cursor: pointer; }
.dz-die { font: inherit; position: relative; width: 78px; height: 78px; border: 0; padding: 0; cursor: pointer; background: none; color: #1b1f27; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dz-face { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #ffffff, #dfe5ee); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.35); border-radius: 14px; }
.dz-die small { position: absolute; bottom: -18px; font-size: 11px; color: var(--muted); }
.dz-num { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dz-d4 .dz-face { clip-path: polygon(50% 4%, 97% 92%, 3% 92%); border-radius: 0; align-items: flex-end; padding-bottom: 14px; box-sizing: border-box; background: linear-gradient(160deg, #ffe1a8, #f0a05a); }
.dz-d8 .dz-face { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; background: linear-gradient(160deg, #c9f1d8, #4caf7d); }
.dz-d10 .dz-face { clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); border-radius: 0; background: linear-gradient(160deg, #d6d8ff, #7c83f2); }
.dz-d12 .dz-face { clip-path: polygon(50% 0, 98% 36%, 80% 96%, 20% 96%, 2% 36%); border-radius: 0; background: linear-gradient(160deg, #ffd3d1, #e2645f); }
.dz-d20 .dz-face { clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); border-radius: 0; background: linear-gradient(160deg, #c8f3fb, #35cfe8); }
.dz-d100 .dz-face, .dz-dx .dz-face { border-radius: 50%; background: linear-gradient(160deg, #f4e1ff, #c76ce0); }
.dz-d100 .dz-num { font-size: 24px; }
.dz-pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 70%; height: 70%; }
.dz-pips i { display: block; width: 13px; height: 13px; margin: auto; border-radius: 50%; }
.dz-pips i.on { background: #1b1f27; box-shadow: inset 0 2px 2px rgba(255,255,255,.25); }
.dz-die.locked .dz-face { outline: 3px solid var(--brand); outline-offset: 3px; }
.dz-d4.locked, .dz-d8.locked, .dz-d10.locked, .dz-d12.locked, .dz-d20.locked { filter: drop-shadow(0 0 4px var(--brand)) drop-shadow(0 0 2px var(--brand)); }
.dz-die.locked::after { content: '🔒'; position: absolute; top: -10px; right: -8px; font-size: 16px; }
.dz-die.dropped { opacity: .35; }
.dz-die.rolling .dz-face { animation: dzTumble .65s cubic-bezier(.3,.7,.4,1); }
.dz-die.rolling:nth-child(2n) .dz-face { animation-duration: .6s; animation-direction: reverse; }
@keyframes dzTumble {
  0% { transform: translateY(-30px) rotateX(0) rotateY(0) rotateZ(0); }
  50% { transform: translateY(6px) rotateX(400deg) rotateY(200deg) rotateZ(90deg); }
  80% { transform: translateY(-4px) rotateX(680deg) rotateY(340deg) rotateZ(160deg); }
  100% { transform: none; }
}
.dz-sum { margin-top: 22px; }
.dz-total { font-size: clamp(54px, 14vw, 96px); font-weight: 800; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.dz-total.pop { animation: rnPop .35s ease; }
.dz-detail { color: var(--ink-soft); margin: 8px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.dz-detail s { color: var(--muted); }
.dz-yz { color: var(--brand); font-weight: 700; margin: 6px 0 0; }
.dz-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.dz-btns .btn.on { border-color: var(--brand); color: var(--brand); }
.dz-tip { margin-top: 10px; }
.dz-stage:fullscreen, .dz-stage.dz-fs { display: flex; flex-direction: column; justify-content: center; border-radius: 0; background: var(--bg); overflow: auto; }
.dz-stage.dz-fs { position: fixed; inset: 0; z-index: 99; }
.dz-stage:fullscreen .dz-die, .dz-stage.dz-fs .dz-die { width: 120px; height: 120px; }
.dz-stage:fullscreen .dz-num, .dz-stage.dz-fs .dz-num { font-size: 44px; }
.dz-stage:fullscreen .dz-pips i, .dz-stage.dz-fs .dz-pips i { width: 20px; height: 20px; }
.dz-stage:fullscreen .dz-total, .dz-stage.dz-fs .dz-total { font-size: min(22vw, 26vh); }
.dz-chart svg { width: 100%; height: auto; display: block; }
.dz-bar { fill: var(--brand); fill-opacity: .75; }
.dz-ax { fill: var(--muted); font-size: 12px; }
.dz-cnt { fill: var(--ink-soft); font-size: 11px; }
.dz-hist { margin: 0 0 0 22px; padding: 0; max-height: 300px; overflow: auto; font-variant-numeric: tabular-nums; }
.dz-hist li { margin-bottom: 3px; overflow-wrap: anywhere; }
.dz-mine { margin-top: 6px; }
.dz-mine .dz-presets { margin-top: 10px; }
.dz-mine-item { display: inline-flex; align-items: center; gap: 2px; }
.dz-mine-item small { color: var(--muted); }
@media (max-width: 480px) { .dz-die { width: 62px; height: 62px; } .dz-num { font-size: 22px; } .dz-pips i { width: 10px; height: 10px; } .dz-tray { gap: 12px 10px; } .dz-not-row { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .dz-die.rolling .dz-face, .rn-big.pop, .dz-total.pop { animation: none; } }

/* ---------- 節拍器 ---------- */
.mt-stage { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 14px; text-align: center; margin-bottom: 20px; }
.mt-stage.flash { animation: mtFlash .18s ease-out; }
@keyframes mtFlash { from { box-shadow: inset 0 0 0 999px var(--brand-glow); } to { box-shadow: none; } }
.mt-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.mt-dot { font: inherit; font-weight: 800; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 2px solid var(--line-strong); background: var(--bg); color: var(--ink-soft); transition: transform .06s; }
.mt-dots.many .mt-dot { width: 40px; height: 40px; font-size: 13px; }
.mt-dot.lv2 { border-color: var(--accent); color: var(--accent); }
.mt-dot.lv0 { opacity: .35; border-style: dashed; }
.mt-dot.now { background: var(--brand); color: #04222f; border-color: var(--brand); transform: scale(1.18); }
.mt-dot.lv2.now { background: var(--accent); border-color: var(--accent); color: #fff; }
.mt-bpm-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mt-step { font: inherit; font-weight: 700; min-width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); cursor: pointer; }
.mt-step:hover { border-color: var(--brand); }
.mt-bpm-box { display: flex; flex-direction: column; align-items: center; }
.mt-stage .mt-bpm { font-family: inherit; font-weight: 800; font-size: clamp(56px, 14vw, 96px); line-height: 1; width: 3.4ch; height: auto; min-height: 0; text-align: center; background: transparent; border: 0; box-shadow: none; color: var(--ink); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.mt-bpm::-webkit-outer-spin-button, .mt-bpm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mt-bpm:focus { outline: 2px solid var(--brand); border-radius: 8px; }
.mt-unit { font-size: 13px; color: var(--muted); letter-spacing: .1em; }
.mt-name { margin: 6px 0 8px; color: var(--ink-soft); }
.mt-slider, .mt-vol { width: 100%; max-width: 520px; accent-color: var(--brand); height: 32px; }
.mt-main-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.mt-play { min-width: 150px; }
.mt-play.on { background: var(--accent); color: #fff; }
.mt-status { margin: 12px 0 0; color: var(--ink-soft); font-size: 14.5px; min-height: 1.5em; font-variant-numeric: tabular-nums; }
.mt-stage:fullscreen, .mt-stage.mt-fs { display: flex; flex-direction: column; justify-content: center; border-radius: 0; background: var(--bg); margin: 0; }
.mt-stage.mt-fs { position: fixed; inset: 0; z-index: 99; }
.mt-stage:fullscreen .mt-dot, .mt-stage.mt-fs .mt-dot { width: min(14vw, 110px); height: min(14vw, 110px); font-size: 24px; }
.mt-stage:fullscreen .mt-bpm, .mt-stage.mt-fs .mt-bpm, .mt-stage.mt-fs input.mt-bpm { font-size: min(22vw, 22vh); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-chips .tl-chip-btn { min-height: 40px; min-width: 52px; }
.mt-custom { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; }
.mt-custom .tl-num { width: 76px; }
.mt-unit-sel { width: auto; min-width: 84px; }
.mt-gap { margin-top: 16px; }
.mt-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: end; }
.mt-trainer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-soft); margin: 0 0 12px; }
.mt-trainer .tl-num { width: 74px; display: inline-block; }
.mt-save-row { display: flex; gap: 8px; } .mt-save-row .tl-in { flex: 1; min-width: 0; }
.mt-songs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mt-songs li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-song { min-height: 40px; text-align: left; }
.mt-ios { margin-top: 14px; }
@media (max-width: 480px) {
  .mt-step { min-width: 42px; height: 44px; padding: 0 4px; }
  .mt-bpm-row { gap: 4px; }
  .mt-dot { width: 42px; height: 42px; }
  .mt-2 { grid-template-columns: 1fr; }
  .mt-save-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .mt-stage.flash { animation: none; } .mt-dot { transition: none; } }

/* ==== 工具樣式：small-b ==== */
/* 站長 2026-10-28 第五批：我的IP、IP查詢、鞋子尺寸對照、顏文字、IG字體。主施工者合併進 app/static/site.css */

/* 共用：複製提示 */
.sb-toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .2s, transform .2s; overflow-wrap: anywhere; }
.sb-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 我的IP／IP查詢 */
.ip-hero { text-align: center; padding: 18px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 16px; }
.ip-big { font-size: clamp(30px, 8vw, 48px); font-weight: 800; margin: 4px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink); }
.ip-big.v6 { font-size: clamp(19px, 5vw, 32px); }
.ip-type { color: var(--ink-soft); margin: 0 0 12px; font-size: 14.5px; }
.ip-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ip-acts .tl-chip-btn { min-height: 42px; display: inline-flex; align-items: center; text-decoration: none; }
.ip-grid .un-item b { font-size: 17px; }
.ip-grid .un-item small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ip-grid .ip-wide { grid-column: 1 / -1; }
.ip-flag { font-style: normal; }
.ip-host, .ip-ua { font-size: 14px; font-weight: 500; word-break: break-all; }
.ip-note { padding: 12px 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--ink-soft); }
.ip-vpn { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--warn); background: var(--bg-2); color: var(--ink); font-size: 14.5px; }
.ip-explain .faq-item { margin-bottom: 6px; }
.ip-attr { margin-top: 22px; font-size: 13px; color: var(--muted); }
.ip-attr a { color: var(--brand); }
.ipq-row { display: flex; gap: 8px; }
.ipq-row .tl-in { flex: 1 1 auto; min-width: 0; font-size: 17px; }
.ipq-row .tl-go { flex: 0 0 auto; padding: 10px 22px; }
.ipq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ipq-chips .tl-chip-btn { min-height: 40px; }
.ipq-card { margin-bottom: 14px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.ipq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ipq-ip { font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ipq-kind { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.ipq-copy { margin-left: auto; min-height: 40px; }
.ipq-sum { margin: 0 0 10px; }

/* 鞋子尺寸對照 */
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ss-chips .tl-chip-btn { min-height: 40px; }
.ss-sel { max-width: 200px; font-size: 18px; min-height: 44px; }
.ss-big { text-align: center; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 2px solid var(--brand); margin-bottom: 12px; }
.ss-big span { display: block; font-size: 13.5px; color: var(--muted); }
.ss-big b { font-size: 44px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss-big small { margin-left: 4px; color: var(--ink-soft); }
.ss-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ss-sub { margin-top: 16px; }
#ss-app table { min-width: 0; }            /* 全站 table 預設 min-width 480px，手機上會左右滑 */
#ss-app .cn-table th, #ss-app .cn-table td { padding: 6px 4px; }
.ss-tbl th { text-align: left; white-space: normal; }
.ss-save-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ss-save-row .tl-in { flex: 1 1 auto; min-width: 0; }
.ss-save-row .tl-go { flex: 0 0 auto; width: auto; padding: 10px 20px; }
.ss-mine-box { margin-bottom: 8px; }
.ss-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ss-me { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding-right: 6px; }
.ss-me-go { flex: 1; text-align: left; font: inherit; background: none; border: 0; color: var(--ink); padding: 10px 12px; cursor: pointer; min-height: 44px; }
.ss-me-go b { display: block; font-size: 16px; } .ss-me-go span, .ss-me-go small { display: block; font-size: 13px; color: var(--muted); }
.ss-how ol { margin: 8px 0 0 20px; padding: 0; } .ss-how li { margin-bottom: 4px; }
.ss-tr { cursor: pointer; } .ss-tr:hover td { background: var(--bg-2); }
.ss-tr.on td { background: var(--brand-glow); font-weight: 700; }

/* 顏文字 */
.km-hot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.km-hot .tl-chip-btn { min-height: 40px; }
.km-cats { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 12px 0 4px;
  background: var(--bg); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.km-cats .tl-chip-btn { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.km-sec { scroll-margin-top: 70px; }
.km-sec .tl-h2 small { font-size: 13px; font-weight: 400; color: var(--muted); }
.km-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.km-tile { position: relative; }
.km-k { width: 100%; min-height: 52px; padding: 8px 26px 8px 8px; font: inherit; font-size: 16px; line-height: 1.3; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; overflow-wrap: anywhere; }
.km-k:hover, .km-k:focus-visible { border-color: var(--brand); }
.km-k:active { transform: scale(.97); }
.km-star, .km-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1;
  background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 6px; }
.km-star.on { color: var(--accent); }
.km-x { color: var(--warn); }
.km-maker { margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--line); }
.km-made { text-align: center; font-size: clamp(26px, 8vw, 40px); padding: 16px 8px; border-radius: 14px; background: var(--bg-2);
  border: 2px solid var(--line-strong); margin-bottom: 10px; overflow-wrap: anywhere; }
.km-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.km-acts .tl-chip-btn { min-height: 42px; }
.km-part { display: flex; flex-wrap: wrap; gap: 6px; }
.km-part .tl-chip-btn { min-height: 40px; min-width: 44px; }

/* IG字體 */
.ig-in { font-size: 18px; }
.ig-han { color: var(--ink-soft); }
.ig-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ig-row { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.ig-row-top { display: flex; align-items: center; justify-content: space-between; }
.ig-name { font-size: 13px; color: var(--muted); }
.ig-star { width: 36px; height: 36px; font-size: 18px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.ig-star.on { color: var(--accent); }
.ig-out { font-size: 20px; line-height: 1.45; padding: 4px 0 8px; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; cursor: pointer; }
.ig-acts { display: flex; gap: 8px; align-items: center; }
.ig-acts .ig-copy { padding: 8px 22px; font-size: 16px; min-height: 42px; }
.ig-acts .tl-chip-btn { min-height: 42px; }
.ig-decos { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-deco { font: inherit; font-size: 16px; padding: 8px 12px; min-height: 42px; max-width: 100%; border-radius: 10px; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--ink); cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.ig-deco:hover, .ig-sym:hover { border-color: var(--brand); }
.ig-syms { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.ig-sym { font: inherit; font-size: 20px; min-height: 44px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.ig-recent { margin-top: 12px; }
.ig-chips { display: flex; gap: 6px; margin-bottom: 10px; }
.ig-chips .tl-chip-btn { min-height: 40px; }
.ig-mock { max-width: 420px; margin: 0 auto 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--bg-2); }
.ig-m-top { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.ig-m-avatar { flex: 0 0 72px; height: 72px; border-radius: 50%; background: var(--brand-grad); box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5px var(--brand); }
.ig-m-stats { flex: 1; display: flex; justify-content: space-around; text-align: center; font-size: 13px; color: var(--ink-soft); }
.ig-m-stats b { display: block; font-size: 17px; color: var(--ink); }
.ig-m-name { font-weight: 700; margin: 0 0 2px; overflow-wrap: anywhere; color: var(--ink); }
.ig-m-bio { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; color: var(--ink); }
.ig-count { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.ig-count.tl-warn { color: var(--warn); font-weight: 700; }

@media (max-width: 480px) {
  .km-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-list { grid-template-columns: 1fr; }
  .ss-big b { font-size: 38px; }
  .ipq-row { flex-direction: column; }
}
@media print {
  .sb-toast, .km-cats, .km-maker, .ig-mock-wrap, .ss-save-row, .ss-mine-box { display: none !important; }
}

/* ==== 工具樣式：games-text ==== */
/* 站長 2026-10-28：打字練習、腦筋急轉彎、16 型人格測驗、心理測驗。主施工者合併進 app/static/site.css */

/* --- 共用：分享圖卡預覽、tl-chips 內的小按鈕 --- */
.g3-card-box { margin: 14px 0 8px; }
.g3-card-img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.tl-chips .tl-chip-btn { min-height: 40px; }
.tl-chip small { font-weight: 600; color: var(--muted); margin-left: 4px; }

/* --- 打字練習 --- */
.ty-opts { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 14px; }
.ty-opt { min-width: 0; }
.ty-opt select.tl-in { max-width: 320px; }
.ty-live { display: flex; gap: 10px; margin: 6px 0 12px; }
.ty-live span { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; }
.ty-live b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.ty-live small { color: var(--muted); font-size: 13px; }
.ty-target { font-size: 22px; line-height: 1.9; letter-spacing: .04em; padding: 14px 16px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line); max-height: 220px; overflow-y: auto; margin-bottom: 12px;
  overflow-wrap: anywhere; color: var(--muted); position: relative; }
.ty-target .ok { color: var(--ink); }
.ty-target .bad { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); border-radius: 3px; text-decoration: underline; }
.ty-target .cur { color: var(--ink); border-bottom: 3px solid var(--brand); }
.ty-input { font-size: 20px; }
.ty-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ty-mobile-note { background: var(--brand-glow); border: 1px solid var(--brand); border-radius: 10px; padding: 10px 14px; }
.ty-key-card { margin: 12px auto; max-width: 340px; text-align: center; padding: 18px; border-radius: 16px;
  border: 2px solid var(--line-strong); background: var(--bg-2); outline: none; }
.ty-key-card:focus { border-color: var(--brand); }
.ty-key-sym { font-size: 72px; font-weight: 800; line-height: 1.15; }
.ty-key-sub { color: var(--muted); min-height: 1.5em; }
.ty-key-card.good { animation: tygood .25s ease; }
.ty-key-card.shake { animation: tyshake .3s ease; border-color: var(--warn); }
@keyframes tygood { 50% { transform: scale(1.05); border-color: var(--ok); } }
@keyframes tyshake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ty-kb { margin: 12px 0; user-select: none; }
.ty-kb-row { display: flex; gap: 5px; margin-bottom: 5px; justify-content: center; }
.ty-kb-row.r1 { padding-left: 2%; } .ty-kb-row.r2 { padding-left: 4%; } .ty-kb-row.r3 { padding-left: 7%; }
.ty-k { flex: 0 1 52px; min-width: 0; height: 52px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: background .12s; }
.ty-k i { font-style: normal; font-size: 11px; color: var(--muted); position: absolute; top: 3px; left: 6px; }
.ty-k b { font-size: 19px; }
.ty-k.ty-space { flex-basis: 320px; }
.ty-k.ty-space i { position: static; }
.ty-k.want { background: var(--brand); color: #04222f; border-color: var(--brand); }
.ty-k.want i { color: #04222f; }
.ty-k.bad { background: var(--warn); color: #fff; }
.ty-chart svg { width: 100%; height: auto; display: block; }
.ty-grid { stroke: var(--line); stroke-width: 1; }
.ty-ax { fill: var(--muted); font-size: 12px; }
.ty-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; }
.ty-dot { fill: var(--bg); stroke: var(--brand); stroke-width: 2; }

/* --- 腦筋急轉彎 --- */
.rd-chips { margin-bottom: 10px; }
.rd-daily-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--ink-soft); font-weight: 600; margin-bottom: 12px; }
.rd-dots { display: inline-flex; gap: 6px; }
.rd-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); }
.rd-dots i.cur { border-color: var(--brand); }
.rd-dots i.ok { background: var(--ok); border-color: var(--ok); }
.rd-dots i.no { background: var(--muted); border-color: var(--muted); }
.rd-stage { perspective: 1200px; margin-bottom: 14px; }
.rd-card { display: grid; width: 100%; min-height: 240px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--ink); transform-style: preserve-3d; transition: transform .5s ease; text-align: center; }
.rd-card.flip { transform: rotateY(180deg); }
.rd-face { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  padding: 26px 20px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--bg-2);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rd-back { transform: rotateY(180deg); background: var(--brand-glow); border-color: var(--brand); }
.rd-meta { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .05em; }
.rd-q { font-size: 24px; font-weight: 800; line-height: 1.5; }
.rd-a { font-size: 30px; font-weight: 900; color: var(--ink); }
.rd-x { color: var(--ink-soft); font-size: 16px; }
.rd-tap { font-size: 13px; color: var(--muted); }
.rd-bigmode .rd-card { min-height: 60vh; }
.rd-bigmode .rd-q { font-size: clamp(28px, 6vw, 56px); }
.rd-bigmode .rd-a { font-size: clamp(34px, 7vw, 64px); }
.rd-bigmode .rd-x { font-size: clamp(18px, 3vw, 26px); }
.rd-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.rd-actions .btn { min-height: 44px; min-width: 140px; }
.rd-miss-btn, .rd-next { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); }
.rd-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rd-card.pop .rd-front { animation: tlpop .35s ease; }

/* --- 16 型人格測驗、心理測驗 --- */
.pt-note { font-size: 14px; color: var(--muted); border-left: 3px solid var(--brand); padding-left: 10px; margin: 0 0 16px; }
.pt-lead { font-size: 17px; }
.pt-dims { margin: 8px 0 18px 20px; color: var(--ink-soft); }
.pt-progress { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.pt-progress span { display: block; height: 100%; width: 0; background: var(--brand-grad); transition: width .25s ease; }
.pt-q { font-size: 22px; font-weight: 800; line-height: 1.55; min-height: 3.2em; margin: 18px 0; }
.pt-q.pop { animation: tlpop .3s ease; }
.pt-scale { display: flex; justify-content: space-between; align-items: center; gap: 6px; max-width: 520px; margin: 0 auto; }
.pt-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--muted); padding: 6px 0; min-height: 44px; }
.pt-opt span { display: block; border-radius: 50%; border: 3px solid var(--line-strong); transition: background .15s, transform .15s; }
.pt-opt.s1 span, .pt-opt.s5 span { width: 50px; height: 50px; }
.pt-opt.s2 span, .pt-opt.s4 span { width: 40px; height: 40px; }
.pt-opt.s3 span { width: 32px; height: 32px; }
.pt-opt.s1 span, .pt-opt.s2 span { border-color: var(--accent); }
.pt-opt.s4 span, .pt-opt.s5 span { border-color: var(--brand); }
.pt-opt:hover span { transform: scale(1.08); }
.pt-opt.on span { background: var(--brand); }
.pt-opt small { font-size: 12px; line-height: 1.3; text-align: center; }
.pt-scale-lbl { display: none; }
.pt-hero { display: flex; align-items: center; gap: 18px; margin: 6px 0 14px; }
.pt-emoji { font-size: 76px; line-height: 1; }
.pt-code { margin: 0; font-weight: 800; letter-spacing: .12em; color: var(--brand); }
.pt-tag { margin: 4px 0 0; color: var(--ink-soft); font-weight: 600; }
.pt-h3 { font-size: 16px; margin: 14px 0 6px; }
.pt-bars { display: grid; gap: 12px; margin: 10px 0 16px; }
.pt-barhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.pt-barhead span.on { color: var(--ink); font-weight: 800; }
.pt-barhead small { font-size: 12px; text-align: center; }
.pt-track { height: 12px; border-radius: 999px; background: var(--accent); opacity: .9; overflow: hidden; }
.pt-track i { display: block; height: 100%; background: var(--brand); }
.pt-pair { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pt-cell { font: inherit; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; }
.pt-cell span { font-size: 30px; }
.pt-cell small { color: var(--muted); letter-spacing: .08em; }
.pt-cell.on, .pt-cell:hover { border-color: var(--brand); }
.pt-peek { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.fq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.fq-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.fq-card:hover { border-color: var(--brand); }
.fq-ic { font-size: 40px; }
.fq-card small { color: var(--muted); }
.fq-opts { display: grid; gap: 10px; max-width: 560px; }
.fq-opt { font: inherit; text-align: left; display: flex; gap: 12px; align-items: center; padding: 12px 16px; min-height: 48px;
  border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink); cursor: pointer; }
.fq-opt b { color: var(--brand); }
.fq-opt:hover, .fq-opt.on { border-color: var(--brand); background: var(--brand-glow); }

@media (max-width: 640px) {
  .ty-target { font-size: 19px; }
  .ty-live b { font-size: 20px; }
  .ty-k { height: 40px; } .ty-k b { font-size: 15px; } .ty-k i { font-size: 9px; left: 3px; }
  .ty-kb-row { gap: 3px; }
  .rd-q { font-size: 21px; }
  .pt-q { font-size: 19px; }
  .pt-opt small { display: none; }
  .pt-scale-lbl { display: flex; justify-content: space-between; max-width: 520px; margin: 4px auto 0; font-size: 13px; color: var(--muted); }
  .pt-emoji { font-size: 58px; }
}
@media print {
  .ty-kb, .rd-tools, .rd-actions, .g3-card-box, .tl-tabs { display: none !important; }
}

/* ==== 工具樣式：games-arcade ==== */
/* ===== 小遊戲第二批（2048、五子棋、恐龍遊戲、反應速度測試）站長 2026-10-28 ===== */
/* 共用：game-common2.js 用到的 class，前綴 gc2- / ga- */
.ga-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ga-bar .ga-sp { flex: 1 1 auto; }
.ga-bar .tl-chip-btn, .ga-btn { min-height: 40px; }
.ga-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.ga-stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; min-width: 76px; text-align: center; }
.ga-stat small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.ga-stat b { font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.ga-stat.pop b { animation: gaPop .35s ease; }
@keyframes gaPop { 40% { transform: scale(1.25); color: var(--brand); } }
.ga-set { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; color: var(--ink-soft); font-size: 14.5px; margin: 6px 0 12px; }
.ga-set label { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 36px; }
.ga-set select.tl-in { width: auto; padding: 6px 38px 6px 10px; }
.ga-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.ga-seg button { font: inherit; background: transparent; color: var(--ink-soft); border: 0; padding: 7px 14px; min-height: 38px; cursor: pointer; }
.ga-seg button.on { background: var(--brand); color: #04222f; font-weight: 700; }
.ga-msg { min-height: 24px; color: var(--ink-soft); font-size: 14.5px; margin: 8px 0 0; }
.ga-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* 全螢幕：支援的瀏覽器用 :fullscreen；iPhone 用 .gc2-fs 鋪滿畫面 */
.gc2-fs { position: fixed !important; inset: 0; z-index: 99; margin: 0 !important; border-radius: 0 !important;
  background: var(--bg); overflow: auto; padding: 12px; height: 100dvh; }
html.gc2-noscroll, html.gc2-noscroll body { overflow: hidden; }
.gc2-modal { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; animation: gaFade .2s ease; }
.gc2-modal-in { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px; max-width: 460px; width: 100%; }
.gc2-modal-in img { display: block; width: 100%; height: auto; border-radius: 10px; }
.gc2-modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
@keyframes gaFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ga-stat.pop b, .gc2-modal { animation: none; } }

/* ---------- 2048（g2-） ---------- */
.g2-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.g2-acts { display: flex; gap: 8px; }
.g2-acts button:disabled { opacity: .45; cursor: default; }
#g2-score-box { position: relative; }
.g2-plus { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-weight: 800; color: var(--brand); pointer-events: none; animation: g2Plus .7s ease-out forwards; }
@keyframes g2Plus { to { transform: translate(-50%, -34px); opacity: 0; } }
.g2-stage { display: flex; flex-direction: column; align-items: center; }
.g2-board { --gap: 10px; --cell: 100px; position: relative; width: min(100%, 500px); aspect-ratio: 1; border-radius: 14px;
  background: #3a3229; padding: 0; touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05); }
.g2-board:focus-visible { box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1px var(--brand); }
.g2-grid { position: absolute; inset: 0; padding: var(--gap); display: grid; gap: var(--gap);
  grid-template-columns: repeat(var(--n, 4), 1fr); grid-template-rows: repeat(var(--n, 4), 1fr); }
.g2-grid span { border-radius: 8px; background: rgba(238,228,218,.16); }
.g2-tiles { position: absolute; inset: 0; }
.g2-t { position: absolute; left: var(--gap); top: var(--gap); width: var(--cell); height: var(--cell); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap))));
  background: #eee4da; color: #5b5045; font-weight: 800; font-variant-numeric: tabular-nums; will-change: transform; }
.g2-t b { font-size: calc(var(--cell) * .44); font-weight: 800; }
.g2-t[data-d="3"] b { font-size: calc(var(--cell) * .36); }
.g2-t[data-d="4"] b { font-size: calc(var(--cell) * .28); }
.g2-t[data-d="5"] b { font-size: calc(var(--cell) * .23); }
.g2-t.mv { transition: transform .105s ease-in-out; }
.g2-t.new { animation: g2New .18s ease-out .06s backwards; }
.g2-t.pop { animation: g2Pop .2s ease-out; z-index: 2; }
@keyframes g2New { from { opacity: 0; scale: .2; } }
@keyframes g2Pop { 0% { scale: 1; } 45% { scale: 1.18; } 100% { scale: 1; } }
.g2-board.nudge-left { animation: g2NL .18s; } .g2-board.nudge-right { animation: g2NR .18s; }
.g2-board.nudge-up { animation: g2NU .18s; } .g2-board.nudge-down { animation: g2ND .18s; }
@keyframes g2NL { 40% { translate: -5px 0; } } @keyframes g2NR { 40% { translate: 5px 0; } }
@keyframes g2NU { 40% { translate: 0 -5px; } } @keyframes g2ND { 40% { translate: 0 5px; } }
/* 經典配色 */
.g2-t[data-v="4"] { background: #ede0c8; }
.g2-t[data-v="8"] { background: #f2b179; color: #fff; }
.g2-t[data-v="16"] { background: #f59563; color: #fff; }
.g2-t[data-v="32"] { background: #f67c5f; color: #fff; }
.g2-t[data-v="64"] { background: #f65e3b; color: #fff; }
.g2-t[data-v="128"] { background: #edcf72; color: #fff; box-shadow: 0 0 18px rgba(243,215,116,.35); }
.g2-t[data-v="256"] { background: #edcc61; color: #fff; box-shadow: 0 0 22px rgba(243,215,116,.45); }
.g2-t[data-v="512"] { background: #edc850; color: #fff; box-shadow: 0 0 26px rgba(243,215,116,.55); }
.g2-t[data-v="1024"] { background: #edc53f; color: #fff; box-shadow: 0 0 30px rgba(243,215,116,.65); }
.g2-t[data-v="2048"] { background: #edc22e; color: #fff; box-shadow: 0 0 36px rgba(243,215,116,.8); }
.g2-t[data-v="4096"], .g2-t[data-v="8192"], .g2-t[data-v="big"] { background: #3c3a32; color: #fff; }
/* 台灣小吃：上面是小吃名、下面小字是數字 */
.g2-board[data-theme="food"] { background: #4a2a1c; }
.g2-board[data-theme="food"] .g2-t b { font-size: calc(var(--cell) * .25); letter-spacing: .02em; }
.g2-board[data-theme="food"] .g2-t small { font-size: calc(var(--cell) * .16); font-weight: 700; opacity: .8; margin-top: 3px; }
.g2-board[data-theme="food"] .g2-t { background: #f3e6cf; color: #4a2a1c; border-bottom: 3px solid rgba(0,0,0,.15); }
.g2-board[data-theme="food"] .g2-t[data-v="4"] { background: #e8c9a0; }
.g2-board[data-theme="food"] .g2-t[data-v="8"] { background: #f4c45a; }
.g2-board[data-theme="food"] .g2-t[data-v="16"] { background: #e9a23b; color: #fff; }
.g2-board[data-theme="food"] .g2-t[data-v="32"] { background: #d97a2b; color: #fff; }
.g2-board[data-theme="food"] .g2-t[data-v="64"] { background: #8d6e4a; color: #fff; }
.g2-board[data-theme="food"] .g2-t[data-v="128"] { background: #c8553d; color: #fff; }
.g2-board[data-theme="food"] .g2-t[data-v="256"] { background: #9c4a1a; color: #fff; }
.g2-board[data-theme="food"] .g2-t[data-v="512"] { background: #b8322a; color: #fff; }
.g2-board[data-theme="food"] .g2-t[data-v="1024"] { background: #f0ede4; color: #8a5a2b; box-shadow: 0 0 24px rgba(255,240,200,.5); }
.g2-board[data-theme="food"] .g2-t[data-v="2048"] { background: radial-gradient(circle at 50% 40%, #ff5a4a, #b3121a); color: #ffe7a0; box-shadow: 0 0 34px rgba(255,90,74,.7); }
.g2-board[data-theme="food"] .g2-t[data-v="4096"], .g2-board[data-theme="food"] .g2-t[data-v="8192"], .g2-board[data-theme="food"] .g2-t[data-v="big"] { background: linear-gradient(135deg, #3a1d6e, #d6336c); color: #ffe7a0; }
/* 霓虹夜光 */
.g2-board[data-theme="neon"] { background: #0a0d18; box-shadow: 0 0 0 1px #20264a, 0 10px 30px rgba(0,0,0,.5); }
.g2-board[data-theme="neon"] .g2-grid span { background: rgba(120,140,255,.07); border: 1px solid rgba(120,140,255,.12); }
.g2-board[data-theme="neon"] .g2-t { --c: #5ce1e6; background: rgba(10,13,24,.92); color: var(--c); border: 2px solid var(--c);
  box-shadow: 0 0 10px var(--c), inset 0 0 10px rgba(255,255,255,.04); text-shadow: 0 0 8px var(--c); }
.g2-board[data-theme="neon"] .g2-t[data-v="4"] { --c: #7cf29a; }
.g2-board[data-theme="neon"] .g2-t[data-v="8"] { --c: #ffe066; }
.g2-board[data-theme="neon"] .g2-t[data-v="16"] { --c: #ffa94d; }
.g2-board[data-theme="neon"] .g2-t[data-v="32"] { --c: #ff6b6b; }
.g2-board[data-theme="neon"] .g2-t[data-v="64"] { --c: #f06595; }
.g2-board[data-theme="neon"] .g2-t[data-v="128"] { --c: #cc5de8; }
.g2-board[data-theme="neon"] .g2-t[data-v="256"] { --c: #845ef7; }
.g2-board[data-theme="neon"] .g2-t[data-v="512"] { --c: #5c7cfa; }
.g2-board[data-theme="neon"] .g2-t[data-v="1024"] { --c: #22b8cf; }
.g2-board[data-theme="neon"] .g2-t[data-v="2048"] { --c: #fff; background: #1b2140; }
/* 結束畫面 */
.g2-over { position: absolute; inset: 0; z-index: 5; border-radius: 14px; background: rgba(11,14,19,.78); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; animation: gaFade .35s ease; }
.g2-over[hidden] { display: none; }
.g2-over.win { background: rgba(120,90,10,.72); }
.g2-over-t { font-size: clamp(24px, 7vw, 38px); font-weight: 900; margin: 0 0 4px; color: #fff; }
.g2-over-s { color: #fff; opacity: .9; margin: 0 0 14px; }
.g2-over-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.g2-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.g2-food-key { margin: 6px 0 10px; }
.g2-food-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.g2-food-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.g2-mini { display: inline-flex; min-width: 42px; height: 26px; padding: 0 6px; border-radius: 6px; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--ink); }
.g2-statbox { margin-top: 10px; }
.g2-statbox summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.g2-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.g2-stat-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--ink-soft); }
.g2-stat-card b { display: block; color: var(--ink); margin-bottom: 2px; }
.g2-stat-card span { display: block; }
.g2-wrap.gc2-fs .g2-board, .g2-wrap:fullscreen .g2-board { width: min(100%, calc(100dvh - 250px), 640px); }
.g2-wrap:fullscreen { background: var(--bg); padding: 16px; overflow: auto; }
.g2-wrap.gc2-fs .g2-statbox, .g2-wrap:fullscreen .g2-statbox, .g2-wrap.gc2-fs .g2-food-key, .g2-wrap:fullscreen .g2-food-key { display: none; }
@media (max-width: 480px) { .g2-board { --gap: 7px; } .g2-top { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .g2-t.mv { transition: none; } .g2-t.new, .g2-t.pop, .g2-board[class*="nudge"] { animation: none; } }

/* ---------- 五子棋（gm-） ---------- */
/* 五子棋（gomoku）站長 2026-10-28 */
.gm-wrap { max-width: 640px; margin: 0 auto; }
.gm-wrap.gc2-fs, .gm-wrap:fullscreen { max-width: none; display: flex; flex-direction: column; align-items: center; background: var(--bg); padding: 12px; overflow-y: auto; }
.gm-wrap.gc2-fs > *, .gm-wrap:fullscreen > * { width: 100%; max-width: 760px; }
.gm-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: 15.5px; }
.gm-turn { display: inline-flex; align-items: center; gap: 8px; }
.gm-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.gm-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 1px solid var(--line-strong); background: var(--bg-2); }
.gm-dot.b { background: radial-gradient(circle at 35% 30%, #777, #111 60%, #000); border-color: #000; }
.gm-dot.w { background: radial-gradient(circle at 35% 30%, #fff, #eee 55%, #bbb); border-color: #999; }
.gm-board { position: relative; display: flex; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.gm-board canvas { display: block; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.4); cursor: pointer; touch-action: none; }
.gm-board canvas:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gm-board.busy canvas { cursor: progress; }
.gm-think { position: absolute; top: 10px; right: 12px; display: flex; gap: 5px; padding: 8px 10px; border-radius: 999px; background: rgba(11,14,19,.72); }
.gm-think span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: gmBounce 1s infinite ease-in-out; }
.gm-think span:nth-child(2) { animation-delay: .15s; } .gm-think span:nth-child(3) { animation-delay: .3s; }
@keyframes gmBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-6px); opacity: 1; } }
.gm-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; animation: gaFade .3s ease; }
.gm-over-in { background: rgba(14,18,26,.92); border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px 20px; text-align: center; max-width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: gmRise .35s cubic-bezier(.2,.9,.3,1.2); }
.gm-over-in b { display: block; font-size: 28px; color: var(--ink); letter-spacing: .04em; }
.gm-over-in small { display: block; color: var(--ink-soft); font-size: 14px; margin: 6px 0 14px; line-height: 1.6; }
.gm-over-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@keyframes gmRise { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.gm-ctrl, .gm-rp { justify-content: center; margin: 14px 0 0; }
.gm-ctrl .tl-go { padding: 10px 22px; font-size: 16px; }
.gm-ctrl .tl-chip-btn:disabled, .gm-rp .tl-chip-btn:disabled { opacity: .45; cursor: default; }
.gm-rp-step { min-width: 64px; text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm-st { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; }
.gm-st.on { border-color: var(--brand); }
.gm-st small { display: block; color: var(--muted); font-size: 12.5px; }
.gm-st b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.gm-st b i { font-style: normal; font-size: 12px; color: var(--ink-soft); margin-left: 1px; }
.gm-st span { display: block; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 480px) {
  .gm-ctrl .tl-chip-btn { padding: 7px 11px; }
  .gm-ctrl .tl-go { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .gm-think span, .gm-over, .gm-over-in { animation: none; } }
.gm-wrap .ga-set select.tl-in { padding-right: 38px; }  /* 共用 .ga-set 的 padding 蓋掉了下拉箭頭的空間 */

/* ---------- 恐龍遊戲（rn-） ---------- */
/* ----- 恐龍遊戲（runner）----- */
.rn-wrap { position: relative; }
.rn-wrap.gc2-fs, .rn-wrap:fullscreen { display: flex; flex-direction: column; background: var(--bg); padding: 10px; }
.rn-wrap.gc2-fs .ga-note, .rn-wrap.gc2-fs .tl-h2, .rn-wrap.gc2-fs .tl-hint, .rn-wrap.gc2-fs .rn-skins,
.rn-wrap:fullscreen .ga-note, .rn-wrap:fullscreen .tl-h2, .rn-wrap:fullscreen .tl-hint, .rn-wrap:fullscreen .rn-skins { display: none; }
.rn-stage { position: relative; border-radius: 12px; overflow: hidden; background: #130b2c; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  outline: none; border: 1px solid var(--line); cursor: pointer; }
.rn-stage:focus-visible { box-shadow: 0 0 0 2px var(--brand); }
.rn-stage canvas { display: block; width: 100%; }
.rn-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px;
  background: rgba(6, 8, 16, .45); }
.rn-over[hidden] { display: none; }
.rn-card { background: rgba(14, 18, 28, .88); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 14px 18px;
  text-align: center; max-width: 420px; color: #eef1f5; animation: rnIn .3s ease; }
.rn-card p { margin: 6px 0; font-size: 14px; color: #c3cad4; line-height: 1.6; }
.rn-card .tl-go { margin: 6px 0 2px; min-height: 44px; }
.rn-title { display: block; font-size: 21px; letter-spacing: .04em; color: #9cf0a8; }
.rn-keys { font-size: 12.5px !important; color: #8b95a3 !important; }
.rn-score { display: block; font-size: 44px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rn-rec { display: inline-block; background: var(--accent); color: #2a1300; font-weight: 800; border-radius: 999px; padding: 2px 12px; font-size: 13px; animation: rnPulse 1s ease infinite; }
.rn-rec[hidden], .rn-unlock[hidden] { display: none; }
.rn-unlock { color: #ffe08a !important; font-weight: 700; }
.rn-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.rn-btns .tl-chip-btn { min-height: 44px; }
@keyframes rnIn { from { transform: translateY(8px) scale(.97); opacity: 0; } }
@keyframes rnPulse { 50% { transform: scale(1.08); } }
.rn-pad { display: none; gap: 10px; margin-top: 10px; }
.rn-padbtn { flex: 1; font: inherit; font-size: 18px; font-weight: 800; min-height: 58px; border-radius: 14px; cursor: pointer;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rn-padjump { flex: 1.6; background: var(--brand-glow); border-color: var(--brand); }
.rn-padbtn.on { transform: scale(.97); border-color: var(--brand); background: var(--brand); color: #04222f; }
@media (pointer: coarse) { .rn-pad { display: flex; } }
.rn-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rn-skin { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 44px;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.rn-skin canvas { width: 72px; height: 60px; }
.rn-skin span { font-size: 13px; }
.rn-skin.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-glow); background: var(--brand-glow); }
.rn-skin.locked { cursor: not-allowed; color: var(--muted); }
.rn-skin:not(.locked):hover { border-color: var(--brand); }
@media (max-width: 520px) {
  .rn-card { padding: 10px 12px; }
  .rn-card p { font-size: 13px; }
  .rn-title { font-size: 18px; }
  .rn-score { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .rn-card, .rn-rec { animation: none; } }

/* ---------- 反應速度測試（rt-） ---------- */
/* ----- 反應速度測試＋CPS（reaction-test.js） ----- */
.rt-root.gc2-fs .rt-stage, .rt-root:fullscreen .rt-stage { min-height: 58vh; }
.rt-root:fullscreen { background: var(--bg); padding: 12px; overflow: auto; }
.rt-stage, .rt-pad { position: relative; overflow: hidden; border-radius: 16px; min-height: 300px; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  background: var(--brand-grad); color: #04222f; border: 1px solid var(--line); outline: none;
  transition: background-color .12s linear, box-shadow .2s ease; margin-bottom: 14px; }
.rt-stage:focus-visible, .rt-pad:focus-visible { box-shadow: 0 0 0 3px var(--brand-glow), inset 0 0 0 2px var(--ink); }
.rt-stage[data-state="wait"] { background: var(--bad); color: var(--ink); }
.rt-stage[data-state="go"] { background: var(--ok); color: #04170c; transition: none; }
.rt-stage[data-state="early"] { background: var(--warn); color: #2a1f00; animation: rtShake .35s ease; }
.rt-stage[data-state="shown"], .rt-stage[data-state="done"] { background: var(--panel-2); color: var(--ink); }
.rt-ic { font-size: 44px; line-height: 1; min-height: 44px; margin-bottom: 6px; }
.rt-stage[data-state="go"] .rt-ic { animation: rtZap .25s ease; }
.rt-big { font-size: clamp(36px, 10vw, 64px); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; position: relative; }
.rt-small { font-size: 15.5px; font-weight: 600; margin-top: 8px; opacity: .9; max-width: 34ch; position: relative; }
.rt-dots { list-style: none; display: flex; gap: 8px; margin: 18px 0 0; padding: 0; position: relative; }
.rt-dots li { width: 52px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.18); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; transition: background .2s ease; }
.rt-dots li.done { background: rgba(255,255,255,.22); }
.rt-stage[data-state="shown"] .rt-dots li.done, .rt-stage[data-state="done"] .rt-dots li.done { background: var(--brand-glow); color: var(--brand); }
.rt-dots li.cur { box-shadow: inset 0 0 0 2px currentColor; }
.rt-ripples { position: absolute; inset: 0; pointer-events: none; }
.rt-ripples span { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85); opacity: 0; }
.rt-ripples span.go { animation: rtRip .55s ease-out; }
@keyframes rtRip { from { transform: scale(.4); opacity: .9; } to { transform: scale(9); opacity: 0; } }
@keyframes rtShake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes rtZap { from { transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.3); } }
.rt-stats { margin-bottom: 14px; }
.rt-stats .ga-stat { flex: 1 1 70px; }
.rt-result { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 10px; animation: gaFade .3s ease; }
.rt-res-head { margin: 0; font-size: 17px; color: var(--ink-soft); }
.rt-res-head b { font-size: 40px; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0 4px; }
.rt-res-pct { margin: 2px 0 10px; color: var(--ink-soft); }
.rt-res-pct b { color: var(--ok); font-size: 20px; }
.rt-meter { position: relative; display: flex; justify-content: space-between; height: 34px; padding-top: 16px; margin: 6px 4px 12px;
  background: linear-gradient(90deg, var(--ok), var(--warn) 55%, var(--bad)) top / 100% 10px no-repeat; border-radius: 5px; }
.rt-meter i { font-style: normal; font-size: 11.5px; color: var(--muted); width: 0; display: flex; justify-content: center; }
.rt-meter-mark { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--ink);
  box-shadow: 0 0 0 2px var(--bg-2); transition: left .6s cubic-bezier(.2,.8,.2,1); left: 0; }
.rt-tries { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.rt-tries li { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; line-height: 1.35; }
.rt-tries li b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-tries li b small { font-size: 12px; color: var(--muted); font-weight: 400; }
.rt-tries li.best { border-color: var(--ok); }
.rt-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rt-actions .tl-chip-btn { min-height: 44px; }
.rt-chart-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.rt-chart { display: block; width: 100%; height: 170px; overflow: visible; }
.rt-chart .g { stroke: var(--line); stroke-width: 1; }
.rt-chart text { fill: var(--muted); font-size: 12px; }
.rt-chart .a { fill: var(--brand-glow); }
.rt-chart .l { fill: none; stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rt-chart .p { fill: var(--bg-2); stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rt-chart .p.b { fill: var(--ok); stroke: var(--ok); }
/* CPS */
.rt-pad { min-height: 260px; background: radial-gradient(circle at 50% 40%, var(--panel-2), var(--bg-2)); color: var(--ink); border-color: var(--line-strong); }
.rt-pad[data-state="run"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.rt-pad[data-state="done"] { border-color: var(--ok); }
.rt-pad .rt-ripples span { border-color: var(--brand); }
.rt-pad[data-state="run"] .rt-big { color: var(--brand); }
.rt-pad-ring { --p: 0; position: absolute; left: 0; top: 0; height: 5px; width: calc(var(--p) * 100%); background: var(--brand-grad); }
.rt-graph { display: block; width: 100%; height: 96px; margin-bottom: 12px; --rt-grid: rgba(255,255,255,.08); }
.rt-hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rt-hist li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--ink-soft); font-size: 14px; }
.rt-hist li span { flex: 1 1 auto; color: var(--muted); }
.rt-hist li b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rt-hist li.rt-none { color: var(--muted); }
.rt-hist small { color: var(--muted); }
@media (max-width: 600px) {
  .rt-stage { min-height: 340px; }
  .rt-dots li { width: 44px; }
  .rt-dots { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-stage, .rt-stage[data-state="early"], .rt-stage[data-state="go"] .rt-ic, .rt-result, .rt-meter-mark { animation: none; transition: none; }
}

/* ==== 工具樣式：games-cards ==== */
/* 站長 2026-10-28：小遊戲（接龍 solitaire、新接龍 freecell、踩地雷 minesweeper）。合併進 site.css。
   牌面固定是白底（實體撲克牌的顏色），其他地方都用網站的 CSS 變數。 */

/* ---------- 共用外框 ---------- */
.gm { position: relative; }
.gm:fullscreen, .gm.gc-fs { background: var(--bg); overflow: auto; padding: 10px max(10px, env(safe-area-inset-right)) 14px max(10px, env(safe-area-inset-left)); }
.gm.gc-fs { position: fixed; inset: 0; z-index: 99; }
.gm:fullscreen .gm-foot, .gm.gc-fs .gm-foot { display: none; }
html.gc-noscroll, html.gc-noscroll body { overflow: hidden; }
.gm-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.gm-tabs { margin-bottom: 0; }
.gm-info { display: flex; gap: 14px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gm-info b { color: var(--ink); font-size: 17px; margin-left: 2px; }
.gm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.gm-btn { font: inherit; font-size: 14px; min-height: 40px; padding: 6px 12px; border-radius: 10px; background: var(--bg-2);
  color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer; transition: border-color .15s, transform .1s, background .15s; white-space: nowrap; }
.gm-btn:hover { border-color: var(--brand); }
.gm-btn:active { transform: scale(.96); }
.gm-btn:disabled { opacity: .4; cursor: default; transform: none; border-color: var(--line-strong); }
.gm-btn.on { background: var(--brand); color: #04222f; border-color: var(--brand); font-weight: 700; }
.gm-hot { background: var(--brand-grad); color: #04222f; border-color: transparent; font-weight: 700; animation: gmpulse 1.4s ease-in-out infinite; }
@keyframes gmpulse { 50% { box-shadow: 0 0 0 5px var(--brand-glow); } }
.gm-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; min-height: 1.4em; }
.gm-foot { margin-top: 10px; }
.gm-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gm-chips { margin-bottom: 12px; }
@media (max-width: 600px) {
  .gm-tools { gap: 5px; }
  .gm-btn { flex: 1 1 auto; padding: 6px 8px; font-size: 13.5px; }
  .gm-info { gap: 10px; }
}

/* ---------- 對話框、提示訊息、特效 ---------- */
.gc-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(4, 7, 11, .62); display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 12px 20px; opacity: 0; transition: opacity .2s; overflow-y: auto; }
.gc-modal.on { opacity: 1; }
.gc-dlg { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px; padding: 22px 20px 18px; width: min(480px, 100%);
  position: relative; transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow); }
.gc-modal.on .gc-dlg { transform: none; }
.gc-dlg-t { font-size: 20px; margin: 0 40px 12px 0; }
.gc-dlg-b p { color: var(--ink-soft); }
.gc-x { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.gc-x:hover { color: var(--ink); background: var(--bg-2); }
.gc-dlg-f { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.gc-dlg-f .tl-go { padding: 10px 22px; font-size: 16px; }
.gc-dlg-f .tl-chip-btn { min-height: 42px; }
.gc-toast { position: fixed; left: 50%; top: 16px; transform: translate(-50%, -16px); opacity: 0; z-index: 1200; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--brand); color: var(--ink); padding: 10px 16px; border-radius: 12px;
  max-width: calc(100% - 32px); font-size: 14.5px; box-shadow: var(--shadow); transition: opacity .25s, transform .25s; }
.gc-toast.on { opacity: 1; transform: translate(-50%, 0); }
.gc-fx { position: absolute; left: 0; top: 0; z-index: 1000; }
.gc-share-img { display: block; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line); }
.gc-stats { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
.gc-stats th, .gc-stats td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.gc-stats thead th { color: var(--ink); font-size: 13px; }
.gc-stats tbody th { text-align: left; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.gc-stats td { font-variant-numeric: tabular-nums; color: var(--ink); }
.gm-win { text-align: center; }
.gm-win-big { font-size: 48px; font-weight: 800; color: var(--brand); line-height: 1.1; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.gm-badge { display: inline-block; background: var(--accent); color: #2a1600; border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 700; }

/* ---------- 牌桌 ---------- */
.gc-table { position: relative; min-height: 320px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--brand-glow), transparent 70%), var(--bg-2);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
@media (max-width: 600px) { .gm-cards .gc-table { margin: 0 -10px; border-radius: 10px; } }
.gc-slot { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .08);
  border: 2px dashed var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--muted);
  font-size: calc(var(--cw) * .34); font-weight: 700; }
.gc-slot span { opacity: .3; }
.gc-slot .gc-sv { width: 44%; height: 44%; fill: var(--ink-soft); opacity: .3; }
.gc-waste { border-color: transparent; }
.gc-stock { cursor: pointer; }
.gc-stock span { opacity: 0; font-size: calc(var(--cw) * .5); transition: opacity .2s; }
.gc-stock.empty span { opacity: .75; color: var(--brand); }
.gc-stock.done span { opacity: .2; color: var(--muted); }
.gc-cell { border-style: solid; border-color: var(--line); background: rgba(0,0,0,.14); }

/* 一張牌：外層負責位置（transform），內層負責翻面 */
.gc-card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); perspective: 700px; touch-action: none; cursor: pointer;
  transition: transform .26s cubic-bezier(.2,.75,.25,1); transition-delay: var(--dl, 0ms); will-change: transform; }
.gc-card.noanim, .gc-card.noanim .gc-in { transition: none !important; }
.gc-card.drag { transition: none; cursor: grabbing; }
.gc-card.drag .gc-face { box-shadow: 0 12px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.14); }
.gc-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .32s ease; transition-delay: var(--dl, 0ms); }
.gc-card.up .gc-in { transform: none; }
.gc-face, .gc-back { position: absolute; inset: 0; border-radius: calc(var(--cw) * .08); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.gc-face { background: #fbfbf8; color: #161a22; box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.14); }
.gc-card.red .gc-face { color: #c8202f; }
.gc-four .gc-card.s3 .gc-face { color: #1d5fc4; }
.gc-four .gc-card.s2 .gc-face { color: #12804a; }
.gc-back { transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 2px, transparent 2px 7px),
              repeating-linear-gradient(-45deg, rgba(255,255,255,.1) 0 2px, transparent 2px 7px), var(--brand-grad);
  box-shadow: inset 0 0 0 calc(var(--cw) * .05) #fbfbf8, inset 0 0 0 calc(var(--cw) * .065) rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.4); }
.gc-back::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.6);
  border-radius: 3px; transform: translate(-50%, -50%) rotate(45deg); }
.gc-sv { display: block; width: 100%; height: 100%; fill: currentColor; }
.gc-r { position: absolute; left: 6%; top: 3%; font: 700 calc(var(--cw) * .34)/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.06em; }
.gc-r2 { display: none; left: auto; top: auto; right: 6%; bottom: 3%; transform: rotate(180deg); }
.gc-cs { position: absolute; right: 6%; top: 5%; width: calc(var(--cw) * .25); height: calc(var(--cw) * .25); }
.gc-big { position: absolute; left: 20%; right: 20%; top: 40%; bottom: 8%; display: flex; align-items: center; justify-content: center; }
.gc-ace { top: 36%; left: 16%; right: 16%; }
.gc-pips { display: none; position: absolute; left: 27%; right: 27%; top: 25%; bottom: 11%; }
.gc-pips i { position: absolute; width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); transform: translate(-50%, -50%); }
.gc-pips i.dn { transform: translate(-50%, -50%) rotate(180deg); }
.gc-court { position: absolute; left: 15%; right: 15%; top: 30%; bottom: 7%; border: 1.5px solid currentColor; border-radius: calc(var(--cw) * .05);
  background: linear-gradient(165deg, #fff9ea, #f0e1bb); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1%; }
.gc-court svg:first-child { width: 62%; height: auto; flex: none; }
.gc-crown { fill: currentColor; fill-opacity: .16; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.gc-court b { font: 700 calc(var(--cw) * .3)/1 Georgia, "Times New Roman", serif; }
.gc-court .gc-sv { width: calc(var(--cw) * .14); height: calc(var(--cw) * .14); flex: none; }
.gc-bigtype .gc-r { font-size: calc(var(--cw) * .44); letter-spacing: -.08em; }
.gc-bigtype .gc-cs { width: calc(var(--cw) * .3); height: calc(var(--cw) * .3); }
.gc-bigtype .gc-court { top: 38%; }
.gc-bigtype .gc-big { top: 46%; }
/* 牌夠大（電腦）就畫傳統的點數排列 */
.gc-pipmode .gc-big:not(.gc-ace) { display: none; }
.gc-pipmode .gc-pips { display: block; }
.gc-pipmode .gc-r { font-size: calc(var(--cw) * .24); }
.gc-pipmode .gc-cs { width: calc(var(--cw) * .18); height: calc(var(--cw) * .18); left: 7.5%; right: auto; top: 22%; }
.gc-pipmode .gc-r2 { display: block; }
.gc-pipmode .gc-court { top: 12%; bottom: 12%; left: 20%; right: 20%; }
.gc-pipmode.gc-bigtype .gc-r { font-size: calc(var(--cw) * .32); }
.gc-pipmode.gc-bigtype .gc-cs { top: 29%; }
.gc-pipmode.gc-bigtype .gc-pips, .gc-pipmode.gc-bigtype .gc-court { left: 30%; right: 22%; }

/* 提示、搖頭、選取 */
.gc-card.gc-hint .gc-face, .gc-card.gc-hint .gc-back, .gc-slot.gc-hint { animation: gchint 1.4s ease; }
@keyframes gchint { 25%, 75% { box-shadow: 0 0 0 3px var(--brand), 0 0 22px var(--brand); } }
.gc-card.gc-shake.up .gc-in { animation: gcshake .36s ease; }
@keyframes gcshake { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.gc-card.sel .gc-face { box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) {
  .gc-card, .gc-in { transition-duration: .01s !important; }
  .gm-hot { animation: none; }
}
@media print { .gm { display: none; } }

/* ---------- 踩地雷 ---------- */
.ms-sprite { position: absolute; }
.ms-info { align-items: center; }
.ms-face { font-size: 24px; width: 46px; height: 44px; line-height: 1; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-strong); cursor: pointer; }
.ms-face:active { transform: scale(.94); }
.ms-flagbtn.on { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 700; }
.ms-wrap { overflow: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; padding: 2px 0 6px; overscroll-behavior: contain; }
.ms-wrap.zoomed { justify-content: flex-start; }
.ms-board { --gp: 2px; display: grid; gap: var(--gp); padding: 8px; width: max-content; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: box-shadow .4s; }
.mc { width: var(--cs); height: var(--cs); border-radius: max(3px, calc(var(--cs) * .16)); display: flex; align-items: center; justify-content: center; position: relative;
  font: 800 calc(var(--cs) * .62)/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03)), linear-gradient(var(--brand-glow), var(--brand-glow)), var(--panel-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.4); transition: transform .08s, background-color .15s; }
.mc:not(.o):hover { box-shadow: inset 0 0 0 1px var(--brand), inset 0 -2px 0 rgba(0,0,0,.35); }
.mc.pr { transform: scale(.9); background: var(--bg); box-shadow: none; }
.mc.o { background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line-soft); cursor: default; }
.mc.o[class*=" n"] { cursor: pointer; }
.mc.n1 { color: #4aa3ff; } .mc.n2 { color: var(--ok); } .mc.n3 { color: var(--bad); } .mc.n4 { color: #b18cff; }
.mc.n5 { color: var(--accent); } .mc.n6 { color: var(--brand); } .mc.n7 { color: var(--ink); } .mc.n8 { color: var(--muted); }
.mc svg { width: 74%; height: 74%; display: block; }
.mc .cloth { fill: var(--bad); } .mc .pole { fill: var(--ink-soft); }
.mc .spk, .mc .body { fill: var(--ink); } .mc .shine { fill: var(--bg); opacity: .5; }
.mc.mine { background: rgba(226,100,95,.14); }
.mc.boom { background: var(--bad); box-shadow: 0 0 18px var(--bad); }
.mc.boom .spk, .mc.boom .body { fill: #1b0b0b; }
.mc.wf .x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--warn); font-size: calc(var(--cs) * .8); }
.mc.wf svg { opacity: .45; }
.mc.pop { animation: mspop .3s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes mspop { from { transform: scale(.55); opacity: .15; } to { transform: none; opacity: 1; } }
.mc.hint { animation: mshint 1.8s ease; }
@keyframes mshint { 15%, 85% { box-shadow: 0 0 0 3px var(--ok), 0 0 18px var(--ok); } }
.mc.why { outline: 2px dashed var(--warn); outline-offset: -2px; }
.ms-board.shake { animation: msshake .45s ease; }
@keyframes msshake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
.ms-board.won { box-shadow: 0 0 0 2px var(--ok), 0 0 30px rgba(76,175,125,.35); }
.ms-cust { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ms-cust label { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.ms-cust .tl-num { width: 84px; }
@media (prefers-reduced-motion: reduce) { .mc.pop, .ms-board.shake { animation: none; } }

/* ==== 工具樣式：zipcode ==== */
/* 站長 2026-10-28：郵遞區號查詢（tools/_zipcode.html、zipcode_area.html、static/tools/zipcode.js） */
.zc-qrow { display: flex; gap: 8px; align-items: stretch; }
.zc-qrow .tl-in { flex: 1; min-width: 0; font-size: 18px; padding: 12px 14px; }
.zc-qrow .tl-go { flex: 0 0 auto; min-height: 48px; padding: 10px 22px; }
.zc-sug { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 8px);
  background: var(--bg-2); max-height: 320px; overflow-y: auto; }
.zc-sug button { font: inherit; display: block; width: 100%; text-align: left; padding: 10px 12px; min-height: 42px; border: 0;
  border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.zc-sug button:hover, .zc-sug button:focus { background: var(--brand-glow); outline: none; }
.zc-sug small { color: var(--muted); margin-left: 6px; }
.zc-recent { margin-top: 14px; }
.zc-recent .tl-chip-btn { min-height: 40px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.zc-recent .tl-link { margin-top: 6px; }

.zc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.zc-grid .zc-wide { grid-column: 1 / -1; }
.zc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px; }
.tool-box .zc-pane select.tl-in, .zc-pane .tl-in { min-height: 44px; }

.zc-card { border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px 18px 14px; background: var(--bg-2); }
.zc-card.zc-ok { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.zc-status { margin: 0 0 4px; font-weight: 700; color: var(--ink-soft); font-size: 15px; }
.zc-ok .zc-status { color: var(--ok); }
.zc-warn .zc-status { color: var(--warn); }
.zc-code { margin: 2px 0 4px; font-size: 52px; line-height: 1.1; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.zc-z3 { color: var(--ink); }
.zc-z6 { color: var(--brand); margin-left: .12em; }
.zc-addr { margin: 0 0 12px; font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.zc-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.zc-btns .tl-go { padding: 10px 24px; min-height: 44px; }
.zc-btns .tl-chip-btn { min-height: 44px; }
.zc-msg { margin: 8px 0 0; }
.zc-note { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.zc-mt { margin-top: 18px; }

.zc-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.zc-part { display: inline-flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-weight: 700; }
.zc-part small { font-weight: 400; font-size: 11.5px; color: var(--muted); }

.zc-alts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.zc-alt { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.zc-alt-code { font: inherit; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand);
  background: none; border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; min-height: 40px; cursor: pointer;
  text-decoration: none; flex: 0 0 auto; }
.zc-alt-code:hover { border-color: var(--brand); }
.zc-rng { color: var(--ink-soft); }
.zc-bld { color: var(--muted); }

.zc-en { margin-top: 16px; }
.zc-en-line { font-size: 16px; margin: 0 0 8px; overflow-wrap: anywhere; }
.zc-z3box > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }

.zc-ranges { margin-top: 18px; }
.zc-ranges > summary { cursor: pointer; font-weight: 700; padding: 8px 0; min-height: 40px; }
.zc-tbl { margin-top: 6px; }
.zc-tbl td.zc-l, .zca-dists td.zc-l { text-align: left; }
.zc-cell-code { font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; background: none; border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink); padding: 4px 8px; min-height: 34px; cursor: pointer; }
.zc-cell-code:hover, .zc-cell-code.on { border-color: var(--brand); color: var(--brand); }
.zc-src { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); }
.zc-cities .tl-chip-btn { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }

/* 依地區瀏覽頁 */
.zca-z3 { color: var(--brand); }
.zca-lead { color: var(--ink-soft); }
.zca-search, .zca-filter { margin: 16px 0; }
.zca-roads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.zca-road, .zca-one { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; min-width: 0; }
.zca-one { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; }
.zca-road > summary { cursor: pointer; padding: 10px 0; min-height: 42px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.zca-road[open] > summary { border-bottom: 1px solid var(--line); }
.zca-road .zc-tbl { margin: 8px 0 12px; }
.zca-secs, .zca-all { color: var(--muted); font-size: 14px; }
.zca-codes { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 14px; }
.zca-dists td a { font-weight: 700; }

@media (max-width: 640px) {
  .zc-code { font-size: 44px; }
  .zc-nums { grid-template-columns: 1fr 1fr; }
  .zc-grid { grid-template-columns: 1fr; }
  .zc-qrow { flex-wrap: wrap; }
  .zc-qrow .tl-go { width: 100%; }
  .zc-btns .tl-go, .zc-btns .tl-chip-btn { flex: 1 1 100%; }
  .zca-codes { margin-left: 0; }
}
@media print {
  .zc-qrow, .tl-tabs, .zc-recent, .zc-sug, .zc-btns, .zc-cities, .zca-search, .zca-filter { display: none !important; }
  .zca-road { break-inside: avoid; }
  .zca-road > .cn-table { display: block; }
}
.zc-tbl table, .zca-dists table { min-width: 0; table-layout: auto; }
.zc-tbl td, .zc-tbl th { padding: 6px 4px; }

/* ==== 工具樣式：tax-labor ==== */
/* 站長 2026-10-28：稅務勞工工具（/tools/vehicle-tax、annual-leave、overtime、severance、labor-insurance、minimum-wage）。主施工者合併進 app/static/site.css */
/* 我的資料（勞工頁共用） */
.lb-me { margin-bottom: 16px; }
.lb-me-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.lb-me-box > summary { cursor: pointer; font-size: 14.5px; color: var(--ink-soft); min-height: 28px; list-style: none; }
.lb-me-box > summary::-webkit-details-marker { display: none; }
.lb-me-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.lb-me-acts { margin: 12px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lb-me-acts .tl-chip-btn { min-height: 40px; }

.lb-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.lb-gap { margin-top: 16px; }
.lb-mid { font-size: 24px; }
.lb-quick, .vt-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.lb-quick .tl-chip-btn, .vt-quick .tl-chip-btn { min-height: 40px; }
.tool-box .tl-chip-btn[data-print], #al-ics, #vt-ics, #vt-add, #ot-add { min-height: 42px; }

/* 怎麼算出來的 */
.lb-how { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--brand); background: var(--bg-2); border-radius: var(--radius-sm); }
.lb-how-t { font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.lb-how ol { margin: 0 0 8px 20px; padding: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }
.lb-how li { margin-bottom: 4px; overflow-wrap: anywhere; }
.lb-src a { overflow-wrap: anywhere; }

/* 表格 */
.lb-table { overflow-x: auto; margin-top: 8px; }
.lb-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lb-table th, .lb-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.lb-table caption { text-align: left; font-weight: 700; padding: 0 0 6px; color: var(--ink); }
.lb-table tfoot th { color: var(--ink); }
.lb-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.lb-levels { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.lb-levels span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); }
.lb-levels span.on { border-color: var(--brand); background: var(--brand-glow); color: var(--ink); font-weight: 700; }

/* 加班費：一個月多筆 */
.lb-entry { display: grid; grid-template-columns: 150px 1fr 80px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.lb-entry .tl-link { min-height: 40px; }

/* 最低工資卡片 */
.lb-mw { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lb-mw-card { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 16px; }
.lb-mw-card.pend { border-style: dashed; }
.lb-mw-card .tz-big { font-size: 30px; }
.lb-mw-card .tz-big.lb-mid { font-size: 22px; }

/* 牌照稅：繳費月份、我的車 */
.vt-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.vt-mon { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 6px; min-height: 64px; font-size: 13px; color: var(--muted); }
.vt-mon b { display: block; font-size: 14px; color: var(--ink-soft); }
.vt-mon.on { border-color: var(--brand); background: var(--brand-glow); color: var(--ink); }
.vt-mon span { display: block; margin-top: 4px; line-height: 1.35; }
.vt-save { display: flex; gap: 8px; margin-bottom: 10px; }
.vt-save .tl-in { flex: 1; min-width: 0; }
.vt-save .tl-chip-btn { white-space: nowrap; min-height: 42px; }
.vt-car p { margin: 6px 0 0; }
.vt-car .tl-link { min-height: 36px; }

@media (max-width: 760px) {
  .lb-cols, .lb-mw { grid-template-columns: 1fr; }
  .vt-cal { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .lb-2 { grid-template-columns: 1fr; }
  .lb-entry { grid-template-columns: 1fr 90px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .lb-entry select { grid-column: 1; grid-row: 2; }
  .lb-entry .tl-link { grid-column: 2; grid-row: 2; }
  .vt-cal { grid-template-columns: repeat(3, 1fr); }
  .vt-save { flex-wrap: wrap; } .vt-save .tl-chip-btn { width: 100%; }
  .lb-table table { font-size: 13px; } .lb-table th, .lb-table td { padding: 5px 4px; }
}

/* 列印：只印輸入結果、算式、出處 */
@media print {
  body.lb-page .lb-noprint, body.vt-page .vt-noprint,
  body.lb-page .tool-about, body.vt-page .tool-about, body.lb-page .tool-svc, body.vt-page .tool-svc { display: none !important; }
  body.lb-page .tool-box, body.vt-page .tool-box { border: 0; padding: 0; background: none; }
  body.lb-page .tl-row, body.vt-page .tl-row { display: block; }
  .lb-how, .lb-mw-card, .vt-mon.on, .un-item { background: none !important; color: #000 !important; }
  .lb-how a::after { content: " (" attr(href) ")"; font-size: 11px; }
  .lb-table, .lb-how { break-inside: avoid; }
}
/* 站長 2026-10-28：工具有 13 類，電腦版下拉改寬、四欄，置中在「工具」按鈕下方 */
@media (min-width: 1100px) {
  .drop-tools .drop-panel { min-width: 920px; right: auto; left: 50%; transform: translateX(-50%); }
  .drop-tools .drop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 站長 2026-10-29：觸控裝置輸入框至少 16px，iPhone 點下去才不會放大畫面 */
@media (hover: none), (pointer: coarse) {
  .hp-copy, .lk-pick select { font-size: 16px; }
}

/* 站長 2026-10-29：外語版「為什麼找我們」（app/why_us.py） */
.why-us { margin: 18px 0 26px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--bg-2)); }
.why-us h2 { margin: 0 0 8px; font-size: 21px; }
.why-us .why-chat { margin: 0 0 14px; font-weight: 600; }
.why-us ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.why-us li b { display: block; margin-bottom: 3px; }
.why-us li span { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.why-us .why-cases { margin: 14px 0 0; }
/* 站長 2026-10-29：外語客戶做當地語言不收費；標籤只在外語版顯示 */
.svc-lang { display: none; }
html:not([lang="zh-Hant-TW"]) .svc-lang { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--ok);
  border: 1px solid var(--ok); border-radius: 999px; padding: 2px 9px; margin-left: 6px; white-space: nowrap; }
html:not([lang="zh-Hant-TW"]) .svc-lang-note { display: block; white-space: normal; border-radius: var(--radius-sm); padding: 8px 12px; margin: 6px 0 12px; font-size: 14px; }
/* 站長 2026-10-29：文章的小小標題（### ）、長網址在手機上斷行 */
.paper h3 { font-size: 17px; margin: 18px 0 6px; }
.paper p, .paper li { overflow-wrap: anywhere; }

/* ==== 工具樣式：pdf ==== */
/* 站長 2026-10-31：PDF 合併／拆分（pdf-merge）。合併進 app/static/site.css。
   拖放框、隱私提示、狀態列、檔名列沿用圖片工具的 .im-*（docs/tools/specs/image.css，已在 site.css）。 */
.pm-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.pm-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; cursor: grab; }
.pm-item.pm-bad { border-color: var(--warn); cursor: default; }
.pm-item.pm-drag { opacity: .5; }
.pm-tw { flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 30px; line-height: 1; background: var(--bg); border-radius: 6px; transition: transform .2s; }
.pm-tw canvas { max-width: 56px; max-height: 56px; transition: transform .2s; }
.pm-nm { flex: 1; min-width: 0; }
.pm-nm b { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.pm-nm small { color: var(--muted); font-size: 12.5px; }
.pm-bad .pm-nm small { color: var(--warn); }
.pm-rg { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 13.5px; }
.pm-rg label { color: var(--ink-soft); }
.pm-rin { flex: 1 1 140px; min-width: 0; max-width: 260px; min-height: 40px; padding: 6px 10px; }
.pm-rn { color: var(--ok); font-size: 12.5px; }
.pm-rn.pm-rerr { color: var(--warn); }
.pm-bt { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pm-bt .tl-chip-btn { min-width: 40px; min-height: 40px; padding: 6px 10px; }
.pm-sum { min-height: 1.4em; margin: 4px 0 10px; font-size: 14.5px; color: var(--ink); font-weight: 600; }
.pm-split { margin: 6px 0 10px; }
.pm-split .tl-num { width: 90px; }
.pm-name .tl-in { flex: 1; min-width: 0; }
.pm-out .tl-go { min-height: 44px; }

@media (max-width: 760px) {
  .pm-item { flex-wrap: wrap; }
  .pm-nm { flex-basis: calc(100% - 70px); }
  .pm-bt { width: 100%; justify-content: flex-start; }
  .pm-rin { max-width: none; }
}
@media print {
  .pm-list, .pm-split, .pm-name, #pm-mode { display: none !important; }
}

/* ==== 工具樣式：festival ==== */
/* ---- 農民曆與節日倒數（站長 2026-10-31）：/tools/lunar-calendar 用 lc-、五個節日倒數用 fc- ---- */

/* 農民曆：上方日期卡 */
.lc-today { background: var(--brand-glow); border: 1px solid var(--brand); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.lc-tag { display: inline-block; font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--brand); color: #04222f; font-weight: 700; }
.lc-solar { margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); }
.lc-big { margin: 2px 0 0; font-size: 40px; font-weight: 800; line-height: 1.25; letter-spacing: .02em; }
.lc-year { margin: 0 0 10px; font-size: 17px; color: var(--ink-soft); }
.lc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; margin: 0 0 12px; }
.lc-facts > div { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.lc-facts dt { flex: 0 0 auto; min-width: 4.5em; color: var(--muted); font-size: 14px; }
.lc-facts dd { margin: 0; font-size: 15px; }
.lc-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.lc-pick-in { flex: 1 1 180px; }
.lc-pick-in .tl-in { width: 100%; }
.lc-step { min-height: 44px; }
.lc-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.lc-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--ink); }
.lc-jump a:hover { border-color: var(--brand); text-decoration: none; }
.lc-sec { scroll-margin-top: 80px; margin-bottom: 30px; }
.lc-l3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.lc-l3 .tl-in { width: 100%; }

/* 農民曆：月曆 */
.lc-mnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.lc-arw { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; font: inherit; font-size: 28px; line-height: 1; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer; }
.lc-arw:hover:not(:disabled) { border-color: var(--brand); }
.lc-arw:disabled { opacity: .3; cursor: default; }
.lc-arw-s { width: 40px; height: 40px; font-size: 22px; }
.lc-mtt { text-align: center; }
.lc-mtt h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.lc-mtt span { font-size: 13px; color: var(--muted); }
.lc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; touch-action: pan-y; }
.lc-grid > p { grid-column: 1 / -1; }
.lc-wh { text-align: center; font-size: 13px; color: var(--muted); padding: 2px 0; }
.lc-wh.we { color: var(--bad); }
.lc-d { position: relative; min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px;
  font: inherit; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.lc-d.out { background: none; border-color: transparent; cursor: default; }
.lc-d:hover:not(.out) { border-color: var(--brand); }
.lc-d:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.lc-d b { font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lc-d span { font-size: 12px; line-height: 1.25; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-d i { font-style: normal; font-size: 11px; color: var(--warn); }
.lc-d.ev span { color: var(--accent); font-weight: 700; }
.lc-d.off::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bad); opacity: .14; pointer-events: none; }
.lc-d.off b { color: var(--bad); }
.lc-d.now { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.lc-d.sel { background: var(--brand-glow); border-color: var(--brand); }
.lc-mlist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.lc-mlist li { font-size: 15px; }
.lc-mlist span { margin-left: 8px; font-size: 13px; color: var(--muted); }

/* 農民曆：節氣表 */
.lc-tbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.lc-tbar .tl-h2 { margin: 0; }
.lc-ty { display: flex; align-items: center; gap: 10px; }
.lc-ty b { font-size: 20px; font-variant-numeric: tabular-nums; min-width: 3em; text-align: center; }
#lc-terms .cn-table { margin-top: 10px; }
#lc-terms td { font-variant-numeric: tabular-nums; }
.lc-tnext td { background: var(--brand-glow); font-weight: 700; }
.lc-src { margin-top: 10px; }

/* 節日倒數 */
.fc-hero { text-align: center; background: var(--brand-glow); border: 1px solid var(--brand); border-radius: 16px; padding: 18px 14px 16px; margin-bottom: 14px; }
.fc-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; }
.fc-clock { display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.fc-unit { flex: 0 1 92px; min-width: 0; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; padding: 8px 4px 6px; }
.fc-unit-d { flex-basis: 120px; }
.fc-unit b { display: block; font-size: 44px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand); }
.fc-unit span { font-size: 14px; color: var(--ink-soft); }
.fc-date { margin: 12px 0 2px; font-size: 18px; font-weight: 700; }
.fc-hol { margin: 0; font-size: 15px; color: var(--ink-soft); }
.fc-sub { list-style: none; padding: 0; margin: 10px 0 0; font-size: 15px; display: grid; gap: 4px; }
.fc-static { font-size: 15px; color: var(--ink-soft); }
.fc-table td { font-variant-numeric: tabular-nums; }
.fc-table .fc-ht { text-align: left; font-size: 14px; }
.fc-l { display: block; font-size: 12.5px; color: var(--muted); }
.fc-past td { opacity: .55; }

@media (max-width: 560px) {
  .lc-big { font-size: 32px; }
  .lc-today { padding: 14px 12px; }
  .lc-d { min-height: 56px; padding: 5px 1px; }
  .lc-d b { font-size: 16px; }
  .lc-d span { font-size: 11px; }
  .lc-l3 { grid-template-columns: 1fr 1fr; }
  .lc-l3 > :first-child { grid-column: 1 / -1; }
  .fc-clock { gap: 5px; }
  .fc-unit b { font-size: 30px; }
  .fc-unit-d b { font-size: 34px; }
  .fc-title { font-size: 17px; }
}

@media print {
  .lc-pick, .lc-jump, .lc-arw, #lc-conv { display: none !important; }
  .lc-today, .fc-hero { border-color: #999; background: none; }
}

/* ==== 工具樣式：air ==== */
/* 站長 2026-10-31：空氣品質查詢 AQI（tools/_air-quality.html、static/tools/air-quality.js）
   AQI 六級用環境部公告的顏色；色塊上的字依底色選深或淺，深淺色主題都看得清楚。 */
.tool-box[data-tool="air-quality"] {
  --aq-1: #00e400; --aq-1-ink: #0b2a0b;
  --aq-2: #ffff00; --aq-2-ink: #2b2b00;
  --aq-3: #ff7e00; --aq-3-ink: #2e1600;
  --aq-4: #ff0000; --aq-4-ink: #ffffff;
  --aq-5: #8f3f97; --aq-5-ink: #ffffff;
  --aq-6: #7e0023; --aq-6-ink: #ffffff;
}

.aq-pick { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.aq-sel { min-width: 0; }
.aq-sel .tl-in { width: 100%; min-height: 46px; }
.aq-geo { min-height: 46px; padding: 10px 18px; white-space: nowrap; }
.aq-geo:disabled { opacity: .55; cursor: not-allowed; }
.aq-msg { margin: 10px 0 14px; }

.aq-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 3px 8px; border-radius: 999px;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; line-height: 1.3;
  background: var(--bg-2); color: var(--muted); border: 1px solid var(--line-strong); }
.aq-l1 { background: var(--aq-1); color: var(--aq-1-ink); border-color: transparent; }
.aq-l2 { background: var(--aq-2); color: var(--aq-2-ink); border-color: transparent; }
.aq-l3 { background: var(--aq-3); color: var(--aq-3-ink); border-color: transparent; }
.aq-l4 { background: var(--aq-4); color: var(--aq-4-ink); border-color: transparent; }
.aq-l5 { background: var(--aq-5); color: var(--aq-5-ink); border-color: transparent; }
.aq-l6 { background: var(--aq-6); color: var(--aq-6-ink); border-color: transparent; }

/* 詳細卡片 */
.aq-card { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg-2); padding: 0 0 12px; overflow: hidden; margin-bottom: 8px; }
.aq-top { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.aq-t1 { background: var(--aq-1); color: var(--aq-1-ink); } .aq-t2 { background: var(--aq-2); color: var(--aq-2-ink); }
.aq-t3 { background: var(--aq-3); color: var(--aq-3-ink); } .aq-t4 { background: var(--aq-4); color: var(--aq-4-ink); }
.aq-t5 { background: var(--aq-5); color: var(--aq-5-ink); } .aq-t6 { background: var(--aq-6); color: var(--aq-6-ink); }
.aq-num { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
.aq-num small { font-size: 13px; font-weight: 700; opacity: .85; letter-spacing: .08em; }
.aq-num b { font-size: 52px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.aq-who { min-width: 0; }
.aq-place { margin: 0; font-size: 15px; font-weight: 600; opacity: .9; overflow-wrap: anywhere; }
.aq-status { margin: 2px 0 0; font-size: 22px; font-weight: 800; line-height: 1.3; }
.aq-vals { padding: 14px 18px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aq-adv { margin: 12px 18px 0; padding: 10px 12px; border-left: 3px solid var(--brand); background: var(--brand-glow); border-radius: 6px;
  color: var(--ink); line-height: 1.7; }
.aq-adv b { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 2px; }
.aq-time { margin: 10px 18px 0; }

/* 縣市測站清單 */
.aq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.aq-item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.aq-item .aq-badge { grid-row: 1 / 3; }
.aq-item .aq-iname { font-weight: 700; overflow-wrap: anywhere; }
.aq-item small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.aq-item:hover, .aq-item:focus-visible { border-color: var(--line-strong); outline: none; }
.aq-item.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }

/* 等級說明 */
.aq-levels { display: grid; gap: 8px; }
.aq-lv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.aq-lv .aq-badge { width: 100%; font-size: 13.5px; }
.aq-lv b { color: var(--ink); }
.aq-lv p { margin: 2px 0 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }

/* 全台表格 */
.aq-tablewrap { max-width: 100%; overflow-x: auto; }
.aq-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.aq-table td { font-variant-numeric: tabular-nums; vertical-align: middle; }
.aq-table td:first-child { text-align: left; }
.aq-sort { font: inherit; font-weight: 600; color: var(--ink-soft); background: none; border: 0; padding: 6px 2px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.aq-sort::after { content: attr(data-arrow); margin-left: 3px; font-size: 11px; color: var(--brand); }
.aq-sort.on { color: var(--ink); }
.aq-go { font-weight: 700; padding: 4px 0; min-height: 36px; text-align: left; }
.aq-cty { display: block; color: var(--muted); font-size: 12px; }
.aq-src a { color: var(--brand); }

@media (max-width: 640px) {
  .aq-pick { grid-template-columns: 1fr 1fr; }
  .aq-geo { grid-column: 1 / -1; width: 100%; }
  .aq-num b { font-size: 44px; }
  .aq-status { font-size: 19px; }
  .aq-lv { grid-template-columns: 1fr; gap: 6px; }
  .aq-lv .aq-badge { width: auto; justify-self: start; }
  .aq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .aq-hide-sm { display: none; }
  .aq-vals { padding: 12px 12px 0; }
  .aq-top { padding: 14px 12px; gap: 12px; }
  .aq-adv, .aq-time { margin-left: 12px; margin-right: 12px; }
}
@media print {
  .aq-pick, .aq-geo, .aq-msg, .aq-list, #aq-county-h { display: none; }
  .aq-badge, .aq-top { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==== 工具樣式：fx ==== */
/* 站長 2026-10-31：匯率工具（jpy-rate，之後的 exchange-rate 共用 .fx-*）
   合併進 app/static/site.css 時放在 .dc-* 那段後面；走勢圖沿用 dc-chart、dc-grid、dc-ax。 */
#jr-root { min-width: 0; }
.fx-status { margin: 0 0 12px; }
.fx-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.fx-card.fx-main { border-color: var(--brand); }
.fx-k { display: block; font-weight: 700; color: var(--ink); }
.fx-k small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.fx-v { display: block; font-size: 36px; font-weight: 800; line-height: 1.2; margin: 4px 0 2px; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.fx-v-sm { font-size: 24px; }
.fx-sub { display: block; font-size: 14px; color: var(--ink-soft); }
.fx-explain { margin: 14px 0 6px; padding: 10px 14px; background: var(--bg-2); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.fx-explain > summary { font-weight: 700; cursor: pointer; min-height: 28px; }
.fx-explain ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-soft); line-height: 1.75; }
.fx-explain b { color: var(--ink); }
.fx-kind { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.fx-kind .tl-chip-btn, .fx-quick .tl-chip-btn { min-height: 40px; }
.fx-conv { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 10px; align-items: end; }
.fx-conv .tl-inline { min-width: 0; }
.fx-amt { font-size: 22px; font-variant-numeric: tabular-nums; width: 100%; box-sizing: border-box; }
.fx-eq { font-size: 22px; color: var(--muted); padding-bottom: 22px; }
.fx-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.fx-stats { margin-top: 4px; }
.fx-pct { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.fx-chart { margin-top: 14px; touch-action: pan-y; }
.fx-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.fx-area { fill: var(--brand); fill-opacity: .12; stroke: none; }
.fx-avg { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fx-cross { stroke: var(--line-strong); stroke-width: 1; }
.fx-dot { fill: var(--brand); stroke: var(--bg); stroke-width: 2; }
.fx-note { margin-top: 18px; padding: 10px 12px; border-left: 3px solid var(--brand); background: var(--bg-2); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }
.fx-note a { color: var(--brand); }
@media (max-width: 480px) {
  .fx-v { font-size: 30px; }
  .fx-v-sm { font-size: 21px; }
  .fx-card { padding: 10px 12px; }
  .fx-conv { grid-template-columns: 1fr; }
  .fx-eq { display: none; }
}
@media print {
  .fx-kind, .fx-quick, #jr-mode, #jr-refresh { display: none; }
}

/* ==== 工具樣式：invoice ==== */
/* 站長 2026-10-31：統一發票對獎（tools/_invoice.html、static/tools/invoice.js） */
.iv-periods { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 8px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.iv-pchip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 12px; min-height: 48px; padding: 6px 14px; text-align: left; }
.iv-pchip b { font-size: 15.5px; }
.iv-pchip small { font-size: 12px; color: var(--muted); }
.iv-pchip.iv-open small { color: var(--ok); }
.iv-pchip.iv-over { opacity: .72; }
.iv-pchip.on small { color: inherit; opacity: .85; }

.iv-card { border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px 6px; background: var(--bg-2); }
.iv-card:empty { display: none; }
.iv-ptitle { margin: 0 0 8px; font-weight: 700; color: var(--ink-soft); }
.iv-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0 0 6px; align-items: baseline; }
.iv-dl dt { font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.iv-dl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.iv-n { font-size: 24px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink); }
.iv-n3 { color: var(--brand); font-weight: 800; }
.iv-amt { color: var(--muted); font-size: 13px; }
.iv-claim { margin: 8px 0 14px; font-size: 14.5px; color: var(--ink-soft); }
.iv-claim.iv-open { color: var(--ink); }
.iv-claim.iv-over { color: var(--warn); }

.iv-pane { margin-top: 12px; }
.tool-box .iv-big { font-size: 34px; font-weight: 800; letter-spacing: .25em; text-align: center; padding: 10px 12px; min-height: 64px;
  font-variant-numeric: tabular-nums; width: 100%; box-sizing: border-box; }
.iv-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; max-width: 420px; }
.iv-pad button { font: inherit; font-size: 26px; font-weight: 700; min-height: 58px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.iv-pad button:active { background: var(--brand-glow); border-color: var(--brand); }
.iv-pad .iv-pad-fn { font-size: 17px; color: var(--ink-soft); }

.iv-res { margin-top: 12px; }
.iv-res:empty { display: none; }
.iv-res.iv-win, .iv-res.iv-maybe, .iv-res.iv-miss { border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px; background: var(--bg-2); }
.iv-res.iv-win { border-color: var(--ok); box-shadow: 0 0 0 3px var(--brand-glow); }
.iv-res.iv-maybe { border-color: var(--warn); }
.iv-rt { margin: 0 0 4px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.iv-win .iv-rt { color: var(--ok); }
.iv-maybe .iv-rt { color: var(--warn); }
.iv-miss .iv-rt { color: var(--muted); }
.iv-rl { margin: 4px 0 0; color: var(--ink); }
.iv-more { margin-top: 12px; }
.iv-front { display: flex; align-items: center; gap: 6px; }
.iv-front .iv-big { flex: 1; min-width: 0; }
.iv-tail { font-size: 34px; font-weight: 800; letter-spacing: .2em; color: var(--brand); font-variant-numeric: tabular-nums; }

.tool-box .iv-area { width: 100%; box-sizing: border-box; font-size: 17px; font-variant-numeric: tabular-nums; min-height: 160px; }
.iv-bsum { font-weight: 700; margin: 0 0 8px; }
.iv-bsum-win { color: var(--ok); }
.iv-blist, .iv-hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.iv-bi, .iv-hi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.iv-bnum, .iv-hn { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .04em; overflow-wrap: anywhere; }
.iv-bi-win, .iv-hi-win { border-color: var(--ok); }
.iv-bi-maybe { border-color: var(--warn); }
.iv-bwin, .iv-hi-win .iv-hr { color: var(--ok); }
.iv-bmaybe { color: var(--warn); }
.iv-bmiss, .iv-hr { color: var(--muted); }
.iv-hp { color: var(--muted); font-size: 13.5px; flex-basis: 100%; }
.iv-hist { margin-top: 18px; }
.iv-hist .tl-link { margin-top: 8px; }

.iv-table { overflow-x: auto; }
.iv-table td:nth-child(2) { text-align: left; }
.iv-ul { padding-left: 1.2em; margin: 6px 0 10px; }
.iv-ul li { margin: 4px 0; }
.iv-err { color: var(--warn); }

@media (max-width: 420px) {
  .iv-n { font-size: 21px; }
  .tool-box .iv-big { font-size: 30px; letter-spacing: .18em; }
  .iv-tail { font-size: 28px; }
  .iv-table th:nth-child(4), .iv-table td:nth-child(4) { white-space: nowrap; }
}
@media print {
  .iv-pad, #iv-mode, .iv-pane, .iv-hist, .iv-periods { display: none !important; }
}

/* ==== 工具樣式：fx2 ==== */
/* 站長 2026-10-31：匯率換算（exchange-rate）。共用 fx.css 的 .fx-*（牌價卡、換算框、走勢圖），這裡只放多幣別要的。
   合併進 app/static/site.css 時放在 fx.css 那段後面。 */
#er-root { min-width: 0; }
.er-pick { margin: 0 0 6px; }
.er-select { font-size: 18px; min-height: 44px; max-width: 360px; }
.er-pop { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.er-pop .tl-chip-btn { min-height: 40px; }
.er-pop .tl-chip-btn.on { border-color: var(--brand); background: var(--brand-glow); font-weight: 700; }
.er-jpy a { color: var(--brand); }
#er-kind .tl-chip-btn:disabled, #er-chart-kind .tl-chip-btn:disabled { opacity: .45; cursor: not-allowed; }
.er-table { overflow-x: auto; }
.er-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.er-cell-cur { text-align: left !important; }
.er-cell-cur .tl-link { font-size: 15px; font-weight: 700; text-align: left; min-height: 36px; color: var(--ink); }
.er-cell-cur small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
@media (max-width: 480px) {
  .er-select { max-width: none; }
  .er-table table { font-size: 13.5px; }
  .er-table th, .er-table td { padding: 5px 3px; }
}
@media print {
  .er-pop, #er-kind, #er-mode, #er-quick, #er-chart-kind, #er-refresh { display: none; }
}

/* ==== 工具樣式：oil ==== */
/* 站長 2026-10-31：油價查詢（oil-price）。沿用 fx.css 的 .fx-card、.fx-v、.fx-kind、.fx-conv、.fx-quick、.fx-note、.fx-cross、.fx-explain，
   以及 dc-chart、dc-grid、dc-ax。合併進 app/static/site.css 時放在 fx.css 那段後面。 */
#op-root { min-width: 0; }
.op-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.op-card { border-top-width: 4px; }
.op-card.op-k92 { border-top-color: var(--brand); }
.op-card.op-k95 { border-top-color: var(--accent); }
.op-card.op-k98 { border-top-color: var(--warn); }
.op-card.op-kdiesel { border-top-color: var(--ok); }
.op-card .fx-sub + .fx-sub { margin-top: 4px; }
.op-chg { font-weight: 700; white-space: nowrap; }
.op-up { color: var(--warn); }
.op-down { color: var(--ok); }
.op-flat { color: var(--muted); }
.op-next { margin: 12px 0 4px; padding: 10px 14px; border: 1px solid var(--brand); background: var(--brand-glow); border-radius: var(--radius-sm); }
.op-next ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.75; }
.op-month .tl-row { margin-top: 10px; gap: 12px; }
.op-month .un-list { margin-top: 4px; }
.op-series .tl-chip-btn { border-left-width: 6px; opacity: .55; }
.op-series .tl-chip-btn.on { opacity: 1; }
.op-series .op-k92 { border-left-color: var(--brand); }
.op-series .op-k95 { border-left-color: var(--accent); }
.op-series .op-k98 { border-left-color: var(--warn); }
.op-series .op-kdiesel { border-left-color: var(--ok); }
.op-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.op-line.op-k92 { stroke: var(--brand); }
.op-line.op-k95 { stroke: var(--accent); }
.op-line.op-k98 { stroke: var(--warn); }
.op-line.op-kdiesel { stroke: var(--ok); }
.op-table { overflow-x: auto; }
.op-table td { font-variant-numeric: tabular-nums; }
.op-table td small { display: block; font-size: 12px; }
@media (max-width: 720px) {
  .op-board { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .op-month .tl-row { grid-template-columns: 1fr; }
  .op-table table { font-size: 14px; }
  .op-table th, .op-table td { padding: 5px 3px; }
}
@media print {
  #op-fuel, #op-quick, #op-range, #op-series, #op-refresh { display: none; }
}

/* ==== 工具樣式：taxid ==== */
/* 站長 2026-10-31：統編查詢（tools/_tax-id.html、static/tools/tax-id.js） */
.tx-qrow { display: flex; gap: 10px; align-items: stretch; }
.tx-q { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 18px; }
.tx-qrow .tl-go { min-height: 48px; white-space: nowrap; }
.tx-hint { min-height: 1.5em; }
.tx-hint.tx-bad { color: var(--warn); font-weight: 700; }
.tx-hint.tx-ok { color: var(--ok); }

.tx-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; }
.tx-recent .tl-chips { flex: 1 1 100%; }
.tx-dim { color: var(--muted); font-size: 13px; }

.tx-out:empty { display: none; }
.tx-wait { color: var(--muted); margin: 14px 0; }
.tx-err { color: var(--warn); font-weight: 700; margin: 14px 0; }

.tx-card { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg-2); padding: 16px; margin: 12px 0; }
.tx-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tx-kind, .tx-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.6;
  border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--bg); }
.tx-st-ok { color: var(--ok); border-color: var(--ok); }
.tx-st-warn { color: var(--warn); border-color: var(--warn); }
.tx-name { font-size: 22px; line-height: 1.4; margin: 10px 0 8px; color: var(--ink); word-break: break-all; }
.tx-empty { font-size: 17px; margin: 4px 0 8px; color: var(--ink); }

.tx-dl { margin: 0; }
.tx-row { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.tx-row dt { color: var(--muted); font-size: 14px; padding-top: 2px; }
.tx-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink); }
.tx-val { flex: 1 1 auto; min-width: 0; word-break: break-all; font-variant-numeric: tabular-nums; }
.tx-copy.tl-chip-btn { min-height: 40px; padding: 6px 14px; }
.tx-copy.on { color: var(--ok); border-color: var(--ok); }
.tx-acts { margin: 14px 0 4px; }
.tx-acts .tl-go { width: 100%; min-height: 46px; }
.tx-note { margin: 10px 0; }
.tx-warn { color: var(--warn); }

.tx-more { margin-top: 12px; }
.tx-items, .tx-branches { margin: 8px 0 0; padding-left: 0; list-style: none; }
.tx-items li { padding: 5px 0; border-top: 1px solid var(--line); line-height: 1.6; }
.tx-branches li { padding: 8px 0; border-top: 1px solid var(--line); }
.tx-code { display: inline-block; min-width: 5.2em; margin-right: 8px; color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

.tx-count { margin: 12px 0 8px; color: var(--ink-soft); }
.tx-list { display: grid; gap: 8px; }
.tx-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; width: 100%; min-height: 48px;
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-2); color: var(--ink); cursor: pointer; font: inherit; }
.tx-pick:hover, .tx-pick:focus-visible { border-color: var(--brand); }
.tx-pname { font-weight: 700; font-size: 16px; word-break: break-all; }
.tx-pager { display: flex; gap: 10px; margin: 12px 0; }
.tx-src { font-size: 13px; color: var(--muted); margin-top: 14px; }

@media (max-width: 520px) {
  .tx-row { grid-template-columns: 1fr; gap: 2px; }
  .tx-name { font-size: 20px; }
}

@media print {
  .tx-qrow, .tx-hint, .tx-recent, .tx-copy, .tx-acts, .tx-pager, label[for="tx-q"] { display: none !important; }
  .tx-card { border: 0; background: none; padding: 0; }
  .tx-more { display: block; }
}

/* ==== 工具樣式：ocr ==== */
/* 站長 2026-10-31：圖片轉文字（OCR）。合併進 app/static/site.css。拖放框沿用圖片工具的 .im-drop／.im-file／.im-privacy／.im-status／.im-actions／.im-lic */
.oc-pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.oc-pick .btn { min-height: 44px; }
.oc-opts { margin: 4px 0 8px; }
.oc-langs { flex-wrap: wrap; margin: 4px 0 6px; }
.oc-langs .tl-tab { min-height: 40px; }
.oc-opts .tl-check { margin: 6px 0; }
.oc-opts .tl-check input, .oc-join input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; accent-color: var(--brand); }

.oc-prog { margin: 14px 0 6px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); }
.oc-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.oc-bar span { display: block; height: 100%; width: 0; background: var(--brand-grad, var(--brand)); border-radius: 99px; transition: width .25s ease; }
.oc-prog .im-status { margin: 8px 0 2px; }
.oc-prog .tl-link { min-height: 40px; }

.oc-all { margin-top: 14px; }
.oc-join { display: inline-block; margin: 0; font-size: 14.5px; }
.oc-list { display: grid; gap: 14px; margin: 10px 0 18px; }
.oc-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 10px; min-width: 0; }
.oc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.oc-tw { flex: 0 0 64px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.oc-tw canvas { max-width: 64px; max-height: 64px; display: block; }
.oc-nm { flex: 1; min-width: 0; }
.oc-nm b { display: block; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.oc-nm small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.oc-nm small.tl-warn { color: var(--warn); }
.oc-bt { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.oc-bt .tl-chip-btn { min-width: 40px; min-height: 40px; padding: 6px 10px; font-size: 16px; }
.oc-text { display: block; width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical; font-size: 16px; line-height: 1.7; white-space: pre-wrap; }
.oc-text[readonly] { color: var(--ink-soft); }
.oc-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.oc-acts .tl-chip-btn { min-height: 40px; }
.oc-conf { font-size: 13.5px; color: var(--ink-soft); }
.oc-conf.oc-ok { color: var(--ok); }
.oc-conf.oc-low { color: var(--warn); }

.oc-tips { margin-top: 18px; }
.oc-tips ul { margin: 6px 0 4px 20px; line-height: 1.8; color: var(--ink-soft); }

@media (max-width: 520px) {
  .oc-head { flex-wrap: wrap; }
  .oc-bt { width: 100%; justify-content: flex-start; }
  .oc-all .im-actions .btn { flex: 1 1 140px; }
}
@media print {
  .im-drop, .oc-pick, .im-privacy, .oc-opts, .oc-prog, .oc-all, .oc-bt, .oc-acts, .oc-tips, .im-lic { display: none !important; }
  .oc-item { border: 0; padding: 0; background: none; }
  .oc-text { border: 0; min-height: 0; color: #000; }
}

/* ==== 工具樣式：small-c ==== */
/* 站長 2026-10-31 第六批 small-c：鍵盤測試、摩斯密碼翻譯、線上調音器。主施工者合併進 app/static/site.css */

/* ---------- 鍵盤測試 ---------- */
.kb-app:fullscreen { background: var(--bg); padding: 24px; overflow: auto; }
.kb-mobile { display: none; }
@media (pointer: coarse) { .kb-mobile { display: block; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 10px; color: var(--ink-soft); margin: 0 0 12px; } }
.kb-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.kb-top-row .tl-tabs { margin-bottom: 8px; }
.kb-layouts .tl-tab { min-height: 42px; }
.kb-opts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kb-opts .tl-check { margin: 4px 0; }
.kb-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 4px; font-size: 16px; }
.kb-progress b { font-variant-numeric: tabular-nums; }
.kb-progress .tl-chip-btn { min-height: 40px; }
.kb-bar { flex: 1 1 140px; height: 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.kb-bar span { display: block; height: 100%; width: 0; background: var(--brand-grad); transition: width .2s; }
.kb-fs-msg:empty { display: none; }
.kb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 6px; padding-bottom: 4px; }
.kb-board { position: relative; width: 100%; min-width: 720px; aspect-ratio: 22.5 / 6.5; user-select: none; -webkit-user-select: none; }
.kb-key { position: absolute; padding: 2px; }
.kb-cap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line-strong); border-bottom-width: 3px;
  color: var(--ink); font-size: clamp(11px, 1.15vw, 15px); line-height: 1.1; transition: background .08s, transform .08s; }
.kb-cap b { font-weight: 600; }
.kb-key.wide .kb-cap { font-size: clamp(9.5px, .95vw, 13px); }
.kb-top { position: absolute; left: 5px; top: 2px; font-style: normal; font-size: .8em; color: var(--muted); }
.kb-zy { position: absolute; right: 5px; bottom: 2px; font-style: normal; font-size: .85em; color: var(--accent); }
.kb-key.done .kb-cap { background: var(--brand-glow); border-color: var(--brand); }
.kb-key.down .kb-cap { background: var(--brand); color: #04222f; border-color: var(--brand); transform: translateY(2px); border-bottom-width: 1px; }
.kb-key.down .kb-top, .kb-key.down .kb-zy { color: #04222f; }
.kb-key.bad .kb-cap { border-color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); }
.kb-key.na .kb-cap { opacity: .45; border-style: dashed; }
.kb-app.all-done .kb-bar span { background: var(--ok); }
.kb-left { min-height: 1.2em; }
.kb-warn { margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--warn); background: var(--bg-2); color: var(--ink); font-size: 14.5px; }
#kb-chatter { border-color: var(--bad); }
.kb-other { margin: 8px 0; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.kb-stats { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.kb-stats .un-item b { font-family: var(--mono); font-size: 18px; min-height: 1.5em; }
.kb-stats .un-item b span { font-size: inherit; color: inherit; }
.kb-stats .un-item small { display: block; font-size: 12.5px; color: var(--muted); }
.kb-held-list { min-height: 1.4em; }
.kb-type { font-size: 17px; }
.kb-log-wrap table { min-width: 0; font-family: var(--mono); font-size: 13.5px; }
.kb-log-wrap td { overflow-wrap: anywhere; }
.kb-cant { margin-top: 18px; }
.kb-cant ul { margin: 8px 0 0 18px; padding: 0; } .kb-cant li { margin-bottom: 6px; }

/* ---------- 摩斯密碼翻譯 ---------- */
.mc-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.mc-box-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mc-box-head .tl-lbl { margin: 0; }
.mc-box-head .tl-link { min-height: 36px; }
.mc-ta { resize: vertical; min-height: 110px; font-size: 18px; line-height: 1.5; }
.mc-code { font-family: var(--mono); letter-spacing: .08em; }
.mc-mid { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mc-mid .tl-chip-btn { min-height: 40px; white-space: nowrap; }
.mc-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--warn); background: var(--bg-2); font-size: 14.5px; color: var(--ink); }
.mc-exs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.mc-exs .tl-chip-btn { min-height: 40px; }
.mc-player { display: flex; align-items: center; gap: 16px; margin: 18px 0 6px; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.mc-lamp { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); transition: background .03s, box-shadow .03s; }
.mc-lamp.on { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 22px var(--brand); }
.mc-player-main { flex: 1 1 auto; min-width: 0; }
.mc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-btns .btn { min-height: 44px; }
.mc-now { margin: 8px 0 0; min-height: 1.6em; font-family: var(--mono); font-size: 20px; letter-spacing: .1em; color: var(--ink); }
.mc-set { margin-top: 10px; }
.mc-range { width: 100%; min-height: 32px; accent-color: var(--brand); }
.mc-set .tl-check { margin: 6px 0; }
.mc-dim { opacity: .5; }
.mc-tap { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 16px; align-items: start; }
.mc-key { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--brand); background: var(--bg-2); color: var(--ink);
  font: inherit; font-size: 28px; font-weight: 700; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; box-shadow: 0 6px 0 var(--line-strong); transition: transform .05s, box-shadow .05s, background .05s; }
.mc-key.down { background: var(--brand); color: #04222f; transform: translateY(4px); box-shadow: 0 2px 0 var(--line-strong); }
.mc-key:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.mc-tap-code { min-height: 1.6em; font-size: 26px; color: var(--brand); }
.mc-tap-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.mc-tap-acts .tl-chip-btn { min-height: 40px; }
.mc-practice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-pr-set { width: auto; min-height: 44px; }
.mc-practice .btn { min-height: 44px; }
.mc-pr-row { display: flex; gap: 8px; flex: 1 1 100%; }
.mc-pr-in { max-width: 120px; font-size: 22px; text-align: center; text-transform: uppercase; }
.mc-pr-res { flex: 1 1 100%; margin: 4px 0 0; min-height: 1.5em; font-size: 16px; color: var(--ink); }
.mc-practice .tl-hint { flex: 1 1 100%; }
.mc-chart-h { font-size: 16px; margin: 14px 0 8px; color: var(--ink-soft); }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.mc-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; padding: 6px 4px; font: inherit;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; }
.mc-cell:hover { border-color: var(--brand); }
.mc-cell b { font-size: 19px; }
.mc-cell .mc-code { font-size: 15px; color: var(--brand); }
.mc-flash { position: fixed; inset: 0; z-index: 300; background: #fff; opacity: 0; pointer-events: none; }
.mc-flash.on { opacity: 1; pointer-events: auto; }
.mc-toast { position: fixed; left: 50%; bottom: 24px; z-index: 310; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 600; transition: opacity .2s, transform .2s; }
.mc-toast.on { opacity: 1; transform: translate(-50%, 0); }
.mc-hidden-ta { position: fixed; left: -9999px; top: 0; opacity: 0; }
@media (max-width: 720px) {
  .mc-io { grid-template-columns: 1fr; }
  .mc-mid { flex-direction: row; justify-content: center; }
  .mc-tap { grid-template-columns: 1fr; }
  .mc-key { width: min(220px, 70vw); margin: 0 auto; display: block; }
}
@media print {
  .mc-io, .mc-mid, .mc-exs, .mc-player, .mc-set, .mc-tap, .mc-practice, .mc-app > .tl-h2, .mc-app > .tl-hint, .mc-note { display: none !important; }
  .mc-app > .tl-h2:last-of-type { display: block !important; }
  .mc-cell { border-color: #999; background: #fff; color: #000; min-height: 0; }
  .mc-cell .mc-code { color: #000; }
}

/* ---------- 線上調音器 ---------- */
.tu-modes .tl-tab { min-height: 42px; }
.tu-stage { text-align: center; padding: 16px 12px 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.tu-gauge { position: relative; width: min(100%, 380px); aspect-ratio: 200 / 110; margin: 0 auto; }
.tu-scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tu-arc { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.tu-arc-ok { fill: none; stroke: var(--ok); stroke-width: 7; stroke-linecap: round; }
.tu-ticks line { stroke: var(--muted); stroke-width: 2; }
.tu-scale text { fill: var(--muted); font-size: 9px; }
.tu-needle { position: absolute; left: calc(50% - 2px); bottom: 9.09%; width: 4px; height: 72%; border-radius: 4px;
  background: var(--muted); transform-origin: 50% 100%; transition: transform .12s ease-out, background .2s; opacity: .5; }
.tu-needle.on { opacity: 1; background: var(--accent); }
.tu-app.ok .tu-needle.on { background: var(--ok); }
.tu-pivot { position: absolute; left: calc(50% - 9px); bottom: calc(9.09% - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--ink-soft); }
.tu-read { margin-top: 6px; }
.tu-note { font-size: clamp(56px, 16vw, 84px); font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tu-sol { min-height: 1.4em; font-size: 17px; color: var(--muted); }
.tu-cents { min-height: 1.4em; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tu-app.ok .tu-cents, .tu-app.ok .tu-note { color: var(--ok); }
.tu-app.flat .tu-cents, .tu-app.sharp .tu-cents { color: var(--accent); }
.tu-hint { font-size: 18px; font-weight: 600; color: var(--ink); min-height: 1.5em; }
.tu-hz { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tu-level-bar { width: min(100%, 260px); height: 6px; margin: 10px auto 0; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.tu-level-bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .08s; }
.tu-start { margin-top: 14px; min-width: 180px; min-height: 48px; }
.tu-app.live .tu-start { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.tu-msg { margin: 10px auto 0; max-width: 520px; font-size: 14px; color: var(--ink-soft); }
.tu-msg.err { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bad); background: var(--bg); color: var(--ink); text-align: left; }
.tu-strings { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 14px; }
.tu-str { display: flex; flex-direction: column; align-items: center; min-height: 76px; padding: 6px 4px; font: inherit; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink); line-height: 1.25; }
.tu-str b { font-size: 26px; } .tu-str sub { font-size: 13px; font-weight: 500; }
.tu-str small { font-size: 12px; color: var(--muted); }
.tu-str:hover { border-color: var(--brand); }
.tu-str.hit { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.tu-str.lock { background: var(--brand-glow); border-color: var(--brand); }
.tu-app.ok .tu-str.hit { border-color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); }
.tu-lockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; }
.tu-lockrow .tl-chip-btn { min-height: 40px; }
.tu-lockrow .tl-check { margin: 4px 0; }
.tu-chroma { margin-top: 14px; }
.tu-chroma-row { display: flex; gap: 8px; }
.tu-chroma-row .tl-in { max-width: 220px; }
.tu-chroma-row .btn { min-height: 44px; }
.tu-refinfo { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; color: var(--brand); }
.tu-a4box { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.tu-a4row { display: flex; align-items: center; gap: 8px; }
.tu-a4row .tl-chip-btn { min-height: 40px; min-width: 48px; }
.tu-a4 { flex: 1 1 auto; min-width: 0; accent-color: var(--brand); min-height: 32px; }
.tu-note-foot { margin-top: 12px; }
.tu-strings[hidden], .tu-lockrow[hidden], .tu-chroma[hidden] { display: none; }

/* ==== 工具樣式：tax-labor2 ==== */
/* 站長 2026-10-31：勞退試算、綜合所得稅試算、育嬰津貼試算（/tools/labor-pension、income-tax、parental-leave）。
   版面大多沿用 tax-labor.css 的 lb-*（已在 site.css）；這裡只放新增的。主施工者合併進 app/static/site.css */
.t2-note { margin-top: 14px; font-weight: 600; color: var(--ink-soft); }
.t2-rules { margin: 0 0 8px 20px; padding: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.t2-rules li { margin-bottom: 6px; }
.lb-table tr.t2-best td { background: var(--brand-glow); color: var(--ink); font-weight: 700; }
.lp-years { margin-top: 12px; }
.lp-years .lb-table { max-height: 420px; overflow: auto; }
.it-sp[hidden], #pl-both-box[hidden], #pl-sal-box[hidden], #pl-avg-box[hidden], #pl-dates-box[hidden], #pl-days-box[hidden] { display: none !important; }
#lp-save, #pl-save { min-height: 40px; }
@media print {
  .lp-years { display: block; }
  .lp-years .lb-table { max-height: none; overflow: visible; }
  .lb-table tr.t2-best td { background: none !important; color: #000 !important; }
}

/* ==== 工具樣式：xiangqi ==== */
/* ===== 象棋（xq-）站長 2026-10-31 ===== */
/* 共用的 ga-bar／ga-seg／ga-set／ga-msg／ga-note 在 games-arcade.css（已併入 site.css）。 */
/* 棋盤和棋子是木頭、象牙的實物顏色，深淺色主題都一樣；其他介面用網站的 CSS 變數。 */
.xq-wrap { --xq-wood-1: #ecc888; --xq-wood-2: #d6a865; --xq-ink: #4a2c10; --xq-face: #f7e9cc; --xq-face-2: #e9d3a6;
  --xq-red: #b3261e; --xq-black: #1e1e1e; max-width: 980px; margin: 0 auto; }
.xq-pgoal { color: var(--muted); font-size: 13.5px; }
.xq-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 860px) { .xq-main { grid-template-columns: minmax(0, 560px) minmax(220px, 1fr); align-items: start; } }
.xq-left { min-width: 0; }
.xq-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: 15.5px; }
.xq-turn { display: inline-flex; align-items: center; gap: 8px; }
.xq-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.xq-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 2px solid var(--line-strong); background: var(--bg-2); }
.xq-dot.r { background: var(--xq-red); border-color: var(--xq-face); }
.xq-dot.k { background: var(--xq-black); border-color: var(--xq-face); }

.xq-board { position: relative; max-width: 560px; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.xq-board svg { display: block; width: 100%; height: auto; cursor: pointer; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.xq-board.busy svg { cursor: progress; }
.xq-bg { fill: var(--xq-wood-1); stroke: rgba(0,0,0,.35); stroke-width: 2; }
.xq-line { fill: none; stroke: var(--xq-ink); stroke-width: 1.6; stroke-linecap: square; }
.xq-frame { fill: none; stroke: var(--xq-ink); stroke-width: 3.5; }
.xq-river { fill: var(--xq-ink); opacity: .78; font-size: 30px; text-anchor: middle; dominant-baseline: central; letter-spacing: 4px;
  font-family: "BiauKai", "DFKai-SB", "標楷體", "Kaiti TC", "Noto Serif TC", serif; }
.xq-coord { fill: var(--xq-ink); opacity: .7; font-size: 15px; text-anchor: middle; dominant-baseline: central; font-family: system-ui, sans-serif; }

.xq-pc { transition: transform .22s ease; pointer-events: none; }
.xq-pc-o { fill: var(--xq-face); stroke: rgba(60,35,10,.55); stroke-width: 1.5; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.xq-pc-i { fill: none; stroke-width: 1.6; }
.xq-pc-t { font-size: 31px; font-weight: 700; text-anchor: middle; dominant-baseline: central;
  font-family: "BiauKai", "DFKai-SB", "標楷體", "Kaiti TC", "Noto Serif TC", "PMingLiU", serif; }
.xq-pc.r .xq-pc-i { stroke: var(--xq-red); }
.xq-pc.r .xq-pc-t { fill: var(--xq-red); }
.xq-pc.k .xq-pc-i { stroke: var(--xq-black); }
.xq-pc.k .xq-pc-t { fill: var(--xq-black); }
.xq-pc.sel .xq-pc-o { fill: #fff6dc; stroke: var(--brand); stroke-width: 4; }
.xq-dot-t { fill: rgba(30,140,90,.85); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.xq-cap-ring { fill: none; stroke: rgba(200,40,30,.9); stroke-width: 4; stroke-dasharray: 8 5; pointer-events: none; }
.xq-last-from { fill: rgba(30,110,200,.35); stroke: rgba(30,110,200,.8); stroke-width: 1.5; }
.xq-last-to { fill: none; stroke: rgba(30,110,200,.95); stroke-width: 3.5; }
.xq-hint-c { fill: none; stroke: #0a9a5c; stroke-width: 4; animation: xqBlink 1s ease-in-out infinite; }
.xq-hint-l { stroke: #0a9a5c; stroke-width: 4; stroke-dasharray: 6 6; opacity: .75; }
.xq-check { fill: none; stroke: #e0261a; stroke-width: 5; animation: xqBlink .8s ease-in-out infinite; }
@keyframes xqBlink { 50% { opacity: .25; } }

.xq-think { position: absolute; top: 10px; right: 12px; display: flex; gap: 5px; padding: 8px 10px; border-radius: 999px; background: rgba(11,14,19,.72); }
.xq-think span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: xqBounce 1s infinite ease-in-out; }
.xq-think span:nth-child(2) { animation-delay: .15s; } .xq-think span:nth-child(3) { animation-delay: .3s; }
@keyframes xqBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-6px); opacity: 1; } }
.xq-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.xq-over-in { background: rgba(14,18,26,.93); border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px 20px; text-align: center; max-width: 330px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.xq-over-in b { display: block; font-size: 28px; color: var(--ink); letter-spacing: .04em; }
.xq-over-in small { display: block; color: var(--ink-soft); font-size: 14px; margin: 6px 0 14px; line-height: 1.6; }
.xq-over-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.xq-caps { display: flex; flex-direction: column; gap: 4px; min-height: 8px; margin: 8px auto 0; max-width: 560px; }
.xq-caprow { display: flex; flex-wrap: wrap; gap: 3px; }
.xq-caprow i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--xq-face); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1.5px currentColor; font-family: "BiauKai", "DFKai-SB", "標楷體", "Noto Serif TC", serif; }
.xq-caprow i.r { color: var(--xq-red); }
.xq-caprow i.k { color: var(--xq-black); }

.xq-ctrl { justify-content: center; margin: 12px 0 0; }
.xq-ctrl .tl-go { padding: 10px 20px; font-size: 16px; }
.xq-ctrl .tl-chip-btn:disabled { opacity: .45; cursor: default; }

.xq-right .tl-h2 { margin-top: 0; }
.xq-moves { list-style: none; counter-reset: xqm; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); font-size: 15px; }
@media (min-width: 860px) { .xq-moves { max-height: 520px; } }
.xq-moves li { counter-increment: xqm; display: grid; grid-template-columns: 2.4em 1fr 1fr; gap: 6px; padding: 4px 6px; border-radius: 6px; }
.xq-moves li::before { content: counter(xqm) "."; color: var(--muted); font-variant-numeric: tabular-nums; }
.xq-moves li span:first-child { color: #ff8a80; }
.xq-moves li span:nth-child(2) { color: var(--ink); }
.xq-moves li.cur { background: var(--brand-glow); }
.xq-empty { color: var(--muted); font-size: 14px; margin: 6px 0 0; }

.xq-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.xq-st { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; }
.xq-st.on { border-color: var(--brand); }
.xq-st small { display: block; color: var(--muted); font-size: 12.5px; }
.xq-st b { display: block; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.xq-st span { display: block; font-size: 12px; color: var(--muted); min-height: 1em; }
@media (max-width: 420px) { .xq-stats { grid-template-columns: repeat(2, 1fr); } .xq-ctrl .tl-go { padding: 10px 14px; } }

@media (prefers-reduced-motion: reduce) { .xq-pc { transition: none; } .xq-hint-c, .xq-check, .xq-think span { animation: none; } }
@media print { .xq-wrap .ga-bar, .xq-wrap .ga-set, .xq-think, .xq-over, .xq-stats, .xq-wrap .ga-note { display: none !important; } .xq-moves { max-height: none; } }

/* ==== 工具樣式：chess ==== */
/* ---------- 西洋棋（ch-） 站長 2026-10-31 ---------- */
/* 共用的 .ga-bar／.ga-set／.ga-seg／.ga-msg／.ga-note 在 games-arcade.css */
.ch-wrap { max-width: 600px; margin: 0 auto;
  --ch-light: #efdcb8; --ch-dark: #b3875f; --ch-lm: rgba(240, 200, 40, .45); --ch-sel: rgba(60, 170, 255, .45);
  --ch-hint: rgba(60, 200, 120, .55); --ch-dot: rgba(20, 30, 40, .32); }
.ch-wrap.gc2-fs, .ch-wrap:fullscreen { max-width: none; display: flex; flex-direction: column; align-items: center; background: var(--bg); padding: 12px; overflow-y: auto; }
.ch-wrap.gc2-fs > *, .ch-wrap:fullscreen > * { width: 100%; max-width: min(720px, calc(100vh - 230px)); }
.ch-wrap.gc2-fs .tl-h2, .ch-wrap.gc2-fs .ch-moves, .ch-wrap.gc2-fs .ch-copy, .ch-wrap.gc2-fs .ch-stats, .ch-wrap.gc2-fs .ga-note,
.ch-wrap:fullscreen .tl-h2, .ch-wrap:fullscreen .ch-moves, .ch-wrap:fullscreen .ch-copy, .ch-wrap:fullscreen .ch-stats, .ch-wrap:fullscreen .ga-note { display: none; }
.ch-wrap .ga-set select.tl-in { padding-right: 38px; }
.ch-wrap .ga-set[hidden], .ch-setnote[hidden] { display: none; }
.ch-setnote { font-size: 13.5px; color: var(--warn); margin: -6px 0 10px; }

.ch-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 8px; font-size: 15.5px; }
.ch-turn { display: inline-flex; align-items: center; gap: 8px; }
.ch-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.ch-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 1px solid var(--line-strong); flex: none; }
.ch-dot.w { background: #fbfaf4; border-color: #888; }
.ch-dot.b { background: #262626; border-color: #000; }

/* 吃掉的棋子 */
.ch-cap { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 13.5px; color: var(--ink-soft); }
.ch-who { flex: none; font-weight: 600; }
.ch-taken { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.ch-taken .ch-pc { width: 20px; height: 20px; margin-right: -5px; }
.ch-adv { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* 棋盤 */
.ch-board-wrap { position: relative; margin: 4px 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ch-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1 / 1; width: 100%;
  border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .35); touch-action: none; cursor: pointer; }
.ch-board.busy { cursor: progress; }
.ch-sq { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.ch-sq.l { background: var(--ch-light); }
.ch-sq.d { background: var(--ch-dark); }
.ch-sq.lm::before, .ch-sq.sel::before, .ch-sq.hn::before { content: ''; position: absolute; inset: 0; }
.ch-sq.lm::before { background: var(--ch-lm); }
.ch-sq.sel::before { background: var(--ch-sel); }
.ch-sq.hn::before { background: var(--ch-hint); animation: chPulse 1s ease-in-out infinite alternate; }
.ch-sq.chk { background: radial-gradient(circle, rgba(255, 30, 30, .95) 0%, rgba(230, 30, 30, .6) 40%, rgba(200, 0, 0, 0) 75%), var(--ch-dark); }
.ch-sq.chk.l { background: radial-gradient(circle, rgba(255, 30, 30, .95) 0%, rgba(230, 30, 30, .6) 40%, rgba(200, 0, 0, 0) 75%), var(--ch-light); }
.ch-sq.tg::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: var(--ch-dot); pointer-events: none; }
.ch-sq.tc::after { width: 92%; height: 92%; background: transparent; border: 4px solid var(--ch-dot); box-sizing: border-box; }
.ch-sq .ch-pc { position: relative; width: 92%; height: 92%; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.ch-sq.lift .ch-pc { opacity: .3; }
.ch-rk, .ch-fl { position: absolute; font-size: 10.5px; font-weight: 700; line-height: 1; pointer-events: none; }
.ch-rk { top: 3px; left: 3px; }
.ch-fl { bottom: 3px; right: 4px; }
.ch-sq.l .ch-rk, .ch-sq.l .ch-fl { color: var(--ch-dark); }
.ch-sq.d .ch-rk, .ch-sq.d .ch-fl { color: var(--ch-light); }
.ch-ghost { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; }
.ch-ghost .ch-pc { width: 100%; height: 100%; transform: scale(1.18); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }

.ch-think { position: absolute; top: 10px; right: 12px; display: flex; gap: 5px; padding: 8px 10px; border-radius: 999px; background: rgba(11, 14, 19, .72); z-index: 3; }
.ch-think span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: chBounce 1s infinite ease-in-out; }
.ch-think span:nth-child(2) { animation-delay: .15s; }
.ch-think span:nth-child(3) { animation-delay: .3s; }
@keyframes chBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes chPulse { from { opacity: .55; } to { opacity: 1; } }

.ch-promo, .ch-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .35); z-index: 6; }
.ch-promo[hidden], .ch-over[hidden], .ch-think[hidden] { display: none; }
.ch-promo-in, .ch-over-in { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px 18px; text-align: center; max-width: 340px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.ch-promo-in b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 10px; }
.ch-promo-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.ch-pp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 64px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ch-pp:hover, .ch-pp:focus-visible { border-color: var(--brand); }
.ch-pp .ch-pc { width: 44px; height: 44px; }
.ch-over-in b { display: block; font-size: 26px; color: var(--ink); letter-spacing: .04em; }
.ch-over-in small { display: block; color: var(--ink-soft); font-size: 14px; margin: 6px 0 14px; line-height: 1.6; }
.ch-over-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.ch-ctrl, .ch-copy { justify-content: center; margin: 12px 0 0; }
.ch-ctrl .tl-go { padding: 10px 22px; font-size: 16px; }
.ch-ctrl .tl-chip-btn:disabled { opacity: .45; cursor: default; }

/* 棋譜 */
.ch-moves { list-style: none; counter-reset: chm; margin: 0; padding: 6px; max-height: 190px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.ch-moves li { counter-increment: chm; display: grid; grid-template-columns: 2.4em 1fr 1fr; align-items: center; min-width: 0; }
.ch-moves li::before { content: counter(chm) '.'; color: var(--muted); font-size: 13px; }
.ch-moves li span { padding: 2px 4px; border-radius: 5px; color: var(--ink); white-space: nowrap; }
.ch-moves li span.on { background: var(--brand); color: #04222f; font-weight: 700; }
.ch-moves li.ch-empty { grid-column: 1 / -1; display: block; color: var(--muted); padding: 4px; }
.ch-moves li.ch-empty::before { content: none; }

.ch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ch-st { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; }
.ch-st.on { border-color: var(--brand); }
.ch-st small { display: block; color: var(--muted); font-size: 12.5px; }
.ch-st b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-st b i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); margin-left: 1px; }

@media (max-width: 520px) {
  .ch-ctrl .tl-go { flex: 1 1 100%; }
  .ch-ctrl .tl-chip-btn { padding: 7px 11px; }
  .ch-stats { grid-template-columns: repeat(2, 1fr); }
  .ch-moves { grid-template-columns: 1fr; }
  .ch-rk, .ch-fl { font-size: 9px; }
  .ch-sq.tc::after { border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) { .ch-think span, .ch-sq.hn::before { animation: none; } }
@media print {
  .ch-wrap .ga-bar, .ch-wrap .ga-set, .ch-wrap .ga-note, .ch-wrap .ga-msg, .ch-stats, .ch-think, .ch-over, .ch-promo { display: none !important; }
  .ch-board { box-shadow: none; border: 1px solid #000; }
  .ch-moves { max-height: none; overflow: visible; }
}

/* ==== 工具樣式：mahjong ==== */
/* 站長 2026-10-31：台灣 16 張麻將（mahjong）。合併進 site.css。共用的 .gm、.gm-btn、.gc-modal 已經在小遊戲那段（games-cards.css）。
   牌面固定象牙白（實體麻將的顏色），其他地方都用網站的 CSS 變數。 */
.mj { --mj-dur: 360ms; }
.mj-info { flex-wrap: wrap; }
.mj-table { position: relative; display: grid; gap: 8px; grid-template-columns: 1fr 1fr;
  grid-template-areas: "top top" "left right" "center center" "me me";
  padding: 8px; border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(ellipse 90% 60% at 50% 40%, var(--brand-glow), transparent 70%), var(--bg-2);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.mj-top { grid-area: top; } .mj-left { grid-area: left; } .mj-right { grid-area: right; }
.mj-center { grid-area: center; } .mj-me { grid-area: me; }
@media (min-width: 760px) {
  .mj-table { grid-template-columns: 1fr 1.25fr 1fr; grid-template-areas: "left top right" "left center right" "me me me"; gap: 10px; padding: 12px; }
}
@media (max-width: 600px) { .mj-table { margin: 0 -10px; padding: 6px; gap: 6px; border-radius: 10px; } }

/* 每一家的區塊 */
.mj-op, .mj-me { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 6px 7px 7px; min-width: 0;
  transition: border-color .2s, box-shadow .2s; }
.mj-op.on, .mj-me.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.mj-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.mj-ph b { color: var(--ink); font-size: 14.5px; }
.mj-w { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 700; font-size: 13px; }
.mj-zh { background: var(--accent); color: #2a1600; border-radius: 999px; padding: 0 8px; font-weight: 700; font-size: 12px; }
.mj-lv { font-size: 12px; }
.mj-sc { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.mj-open { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 6px; min-height: 22px; margin-bottom: 4px; }
.mj-backs { display: inline-flex; flex-wrap: nowrap; }
.mj-backs .mj-t { width: 11px; border-radius: 3px; }
.mj-backs .mj-t + .mj-t { margin-left: -3px; }
.mj-backs.mj-shown { flex-wrap: wrap; }
.mj-backs.mj-shown .mj-t { width: 17px; }
.mj-backs.mj-shown .mj-t + .mj-t { margin-left: 0; }
@media (min-width: 760px) { .mj-backs .mj-t { width: 13px; } .mj-backs.mj-shown .mj-t { width: 20px; } }
.mj-op .mj-meld .mj-t, .mj-op .mj-fl .mj-t { width: min(20px, 7.2vw); }
.mj-meld { display: inline-flex; gap: 0; padding: 1px; border-radius: 5px; background: rgba(0, 0, 0, .12); }
.mj-fl { display: inline-flex; gap: 1px; }
.mj-disc { display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; min-height: 30px; }
.mj-disc .mj-t { width: min(25px, calc(10% - 2px)); }
.mj-me .mj-disc .mj-t { width: min(25px, calc(8.33% - 2px)); }
.mj-empty { font-size: 12px; color: var(--muted); opacity: .7; align-self: center; }

/* 一張牌 */
.mj-t { position: relative; display: inline-block; flex: none; width: 30px; aspect-ratio: 3 / 4; border-radius: 12% / 9%;
  background: linear-gradient(180deg, #fffdf6 0%, #f3ecd9 100%); border: 1px solid #b9ae92;
  box-shadow: 0 2px 0 #8d8064, 0 3px 4px rgba(0, 0, 0, .25); vertical-align: bottom; overflow: hidden; }
.mj-t svg { position: absolute; inset: 7% 8%; width: 84%; height: 86%; }
.mj-b { background: linear-gradient(160deg, #1e8a6b, #0f5b45); border-color: #0b4a37; box-shadow: 0 2px 0 #08382a, 0 3px 4px rgba(0, 0, 0, .25); }
.mj-taken { opacity: .32; }
.mj-last { outline: 2px solid var(--brand); outline-offset: 1px; }
.mj-called { filter: brightness(.88); }
.mj-dead { opacity: .4; }
.mj-new { animation: mjpop var(--mj-dur) cubic-bezier(.2, .9, .3, 1.3); }
@keyframes mjpop { from { transform: translateY(-14px) scale(1.35); opacity: .2; } to { transform: none; opacity: 1; } }

/* 中間：風位與最後打出的牌 */
.mj-center { display: flex; justify-content: center; align-items: center; min-height: 112px; }
.mj-cmp { position: relative; width: 168px; height: 112px; border-radius: 14px; border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, .08); }
.mj-cw { position: absolute; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); transition: background .2s, color .2s; }
.mj-cw.zh { border-color: var(--accent); }
.mj-cw.on { background: var(--brand); color: #04222f; border-color: var(--brand); }
.mj-cw-n { top: 4px; left: calc(50% - 13px); } .mj-cw-s { bottom: 4px; left: calc(50% - 13px); }
.mj-cw-w { left: 4px; top: calc(50% - 13px); } .mj-cw-e { right: 4px; top: calc(50% - 13px); }
.mj-cmid { position: absolute; inset: 30px 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mj-big { width: 34px; }
.mj-dim { opacity: .75; }
.mj-cl { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* 自己的手牌 */
.mj-hand { --hw: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; row-gap: 8px; padding: 14px 0 4px; min-height: 64px; }
.mj-hand .mj-t { width: var(--hw); cursor: pointer; transition: transform .12s, box-shadow .12s; touch-action: manipulation; }
.mj-hand .mj-t.mj-idle { cursor: default; }
.mj-hand .mj-t.sel { transform: translateY(-12px); box-shadow: 0 2px 0 #8d8064, 0 0 0 3px var(--brand), 0 8px 14px rgba(0, 0, 0, .3); }
.mj-hand .mj-t:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.mj-hand .mj-drawn { margin-left: calc(var(--hw) * .35); animation: mjin var(--mj-dur) ease-out; }
@keyframes mjin { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
.mj-ting::after { content: '聽'; position: absolute; right: 0; top: 0; background: var(--brand); color: #04222f; font-size: 10px; font-weight: 800;
  line-height: 1; padding: 2px 3px; border-radius: 0 0 0 5px; }
.mj-me .mj-open .mj-t { width: min(28px, 7.6vw); }
.mj-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; justify-content: center; min-height: 1.4em; margin: 4px 0; font-size: 13px; color: var(--ink-soft); }
.mj-wl { color: var(--muted); }
.mj-wt { display: inline-flex; align-items: flex-end; gap: 1px; }
.mj-wt .mj-t { width: 22px; }
.mj-wt i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); }

/* 動作按鈕 */
.mj-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; min-height: 46px; }
.mj-ab { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; padding: 6px 14px; }
.mj-ab .mj-mini { width: 20px; }
.mj-call-b { border-color: var(--brand); }
.mj-win { font-size: 18px; padding: 6px 20px; }
.mj-go { background: var(--brand); color: #04222f; border-color: var(--brand); }
.mj-pass { min-width: 72px; justify-content: center; }
.mj-tip { font-size: 13.5px; color: var(--muted); }
.mj-timer { flex-basis: 100%; height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.mj-timer i { display: block; height: 100%; width: 100%; background: var(--brand); transition-property: width; transition-timing-function: linear; }

/* 喊牌特效（吃、碰、槓、胡、補花） */
.mj-callfx { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); font-size: 30px; font-weight: 900; color: #fff;
  background: var(--brand-grad); padding: 4px 16px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: mjcall 1.1s ease-out forwards; }
.mj-callfx.fl { font-size: 16px; padding: 3px 10px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-strong); }
.mj-callfx.win { font-size: 40px; background: var(--accent); color: #2a1600; }
.mj-fx0 { left: 50%; bottom: 18%; top: auto; transform: translate(-50%, 0); }
.mj-fx1 { right: 4%; left: auto; top: 30%; transform: none; }
.mj-fx2 { left: 50%; top: 8%; }
.mj-fx3 { left: 4%; top: 30%; transform: none; }
@keyframes mjcall { 0% { opacity: 0; scale: .5; } 15% { opacity: 1; scale: 1.15; } 30% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 結果與台數表 */
.mj-res-how { font-size: 15px; }
.mj-res-hand { display: flex; flex-wrap: wrap; gap: 2px 5px; align-items: flex-end; margin: 6px 0; }
.mj-res-hand .mj-t { width: min(26px, 5.4vw); }
.mj-res-hand .mj-meld .mj-t, .mj-res-hand .mj-fl .mj-t { width: min(22px, 5vw); }
.mj-gap { width: 8px; }
.mj-wintile { box-shadow: 0 2px 0 #8d8064, 0 0 0 2px var(--accent); }
.mj-tt { width: 100%; font-size: 14px; margin: 8px 0; }
.mj-tt th { text-align: left; font-weight: 600; }
.mj-tt td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mj-tt small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.mj-tt .mj-sum th, .mj-tt .mj-sum td { font-weight: 800; color: var(--brand); border-top: 2px solid var(--line-strong); }
.mj-taitb td { text-align: left; white-space: normal; }
.mj-taitb td:nth-child(2) { white-space: nowrap; text-align: center; }
.mj-pay { width: 100%; font-size: 14px; }
.mj-pay td { text-align: center; font-variant-numeric: tabular-nums; }
.mj-me-row th, .mj-me-row td { color: var(--brand); font-weight: 700; }
.mj-plus { color: var(--ok); font-weight: 700; }
.mj-minus { color: var(--warn); font-weight: 700; }
.mj-h4 { margin: 14px 0 6px; font-size: 15px; }
.mj-rules { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); }
.mj-rules li { margin: 3px 0; }

/* 全螢幕：牌桌佔滿 */
.mj:fullscreen .mj-table, .mj.gc-fs .mj-table { min-height: calc(100vh - 150px); }

/* 橫拿手機：高度不夠，縮小對手區、中間 */
@media (orientation: landscape) and (max-height: 500px) {
  .mj-table { grid-template-columns: 1fr 1.1fr 1fr; grid-template-areas: "left top right" "left center right" "me me me"; margin: 0; }
  .mj-center { min-height: 0; }
  .mj-cmp { width: 140px; height: 86px; }
  .mj-cmid { inset: 26px 30px; }
  .mj-disc .mj-t { width: min(20px, calc(10% - 2px)); }
  .mj-hand { padding-top: 12px; }
}
@media print { .mj { display: none; } }

/* ==== 工具樣式：go-game ==== */
/* ===== 圍棋（站長 2026-10-31，前綴 wq-）=====
   共用的 ga-bar／ga-set／ga-seg／ga-msg／ga-note／gc2-fs 已經在 site.css（小遊戲第二批合併過），這裡只放圍棋自己的。 */
.wq-wrap { max-width: 660px; margin: 0 auto; }
.wq-wrap.gc2-fs, .wq-wrap:fullscreen { max-width: none; display: flex; flex-direction: column; align-items: center; background: var(--bg); padding: 12px; overflow-y: auto; }
.wq-wrap.gc2-fs > *, .wq-wrap:fullscreen > * { width: 100%; max-width: 780px; }
.wq-wrap.gc2-fs .wq-rules, .wq-wrap:fullscreen .wq-rules,
.wq-wrap.gc2-fs .wq-stats, .wq-wrap:fullscreen .wq-stats { display: none; }
.wq-wrap .ga-set select.tl-in { padding-right: 38px; }
.wq-wrap .ga-set select.tl-in:disabled { opacity: .55; }

.wq-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 15.5px; }
.wq-turn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wq-info { display: inline-flex; gap: 12px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.wq-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex: 0 0 auto; border: 1px solid var(--line-strong); background: var(--bg-2); }
.wq-dot.b { background: radial-gradient(circle at 35% 30%, #777, #111 60%, #000); border-color: #000; }
.wq-dot.w { background: radial-gradient(circle at 35% 30%, #fff, #eee 55%, #bbb); border-color: #999; }

.wq-board { position: relative; display: flex; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.wq-board canvas#wq-cv { display: block; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.4); cursor: pointer; touch-action: none; }
.wq-board canvas#wq-cv:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.wq-board.busy canvas#wq-cv { cursor: progress; }
/* 放大鏡：手指按著棋盤時浮在手指上方 */
.wq-loupe { position: absolute; width: 128px; height: 128px; border-radius: 50%; pointer-events: none; z-index: 3;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.wq-loupe[hidden] { display: none; }
.wq-think { position: absolute; top: 10px; right: 12px; display: flex; gap: 5px; padding: 8px 10px; border-radius: 999px; background: rgba(11,14,19,.72); }
.wq-think span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: wqBounce 1s infinite ease-in-out; }
.wq-think span:nth-child(2) { animation-delay: .15s; } .wq-think span:nth-child(3) { animation-delay: .3s; }
@keyframes wqBounce { 0%, 80%, 100% { transform: scale(.5); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.wq-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wq-over[hidden] { display: none; }
.wq-over-in { background: rgba(14,18,26,.93); border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px 20px; text-align: center; max-width: 330px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.wq-over-in b { display: block; font-size: 28px; color: #fff; letter-spacing: .04em; }
.wq-over-in small { display: block; color: rgba(255,255,255,.8); font-size: 14px; margin: 6px 0 14px; line-height: 1.6; }
.wq-over-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.wq-placebar { justify-content: center; margin: 12px 0 0; }
.wq-placebar .tl-go { padding: 10px 22px; font-size: 16px; min-height: 44px; }
.wq-score { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--brand); border-radius: var(--radius-sm, 10px); background: var(--bg-2); }
.wq-score[hidden] { display: none; }
.wq-score-h { margin: 0 0 6px; color: var(--ink-soft); font-size: 14.5px; }
.wq-score-r p { margin: 4px 0; }
.wq-score-r b { color: var(--ink); }
.wq-score .ga-bar { margin: 10px 0 0; }

.wq-ctrl { justify-content: center; margin: 14px 0 0; }
.wq-ctrl .tl-go { padding: 10px 22px; font-size: 16px; }
.wq-ctrl .tl-chip-btn:disabled, .wq-placebar .tl-chip-btn:disabled { opacity: .45; cursor: default; }
.wq-ctrl .tl-chip-btn.on { border-color: var(--brand); color: var(--brand); }
.wq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wq-st { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; }
.wq-st.on { border-color: var(--brand); }
.wq-st small { display: block; color: var(--muted); font-size: 12.5px; }
.wq-st b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.wq-st b i { font-style: normal; font-size: 12px; color: var(--ink-soft); margin-left: 1px; }
.wq-st span { display: block; font-size: 12.5px; color: var(--ink-soft); }

.wq-rules { margin-top: 22px; }
.wq-rules h4 { margin: 16px 0 4px; font-size: 16px; color: var(--ink); scroll-margin-top: 80px; }
.wq-rules p { margin: 0 0 6px; color: var(--ink-soft); line-height: 1.75; }
.wq-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.wq-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); text-decoration: none; }
.wq-toc a:hover { border-color: var(--brand); color: var(--brand); }
#wq-wrap { scroll-margin-top: 70px; }

@media (max-width: 520px) {
  .wq-ctrl .tl-chip-btn { padding: 7px 10px; }
  .wq-ctrl .tl-go { flex: 1 1 100%; }
  .wq-status { font-size: 15px; }
  .wq-stats { gap: 6px; }
  .wq-st { padding: 7px 4px; }
}
@media (prefers-reduced-motion: reduce) { .wq-think span { animation: none; } }
@media print {
  .wq-wrap .ga-bar, .wq-wrap .ga-set, .wq-wrap .ga-msg, .wq-wrap .ga-note, .wq-stats, .wq-score .ga-bar, .wq-placebar { display: none !important; }
  .wq-board canvas#wq-cv { box-shadow: none; }
}

/* --- AI 工具（站長 2026-11-06）------------------------------------------- */
.drop-col.drop-ai { background: rgba(53, 207, 232, .06); border: 1px solid rgba(53, 207, 232, .25); border-radius: 8px; padding: 10px 12px 4px; }
.drop-col a.drop-head .drop-new { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #04222f; background: var(--brand); vertical-align: 2px; }
.ai-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 18px; margin: 0 0 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ai-bar p { margin: 0; }
.ai-bal { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 14px; }
.ai-bal strong { font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ai-bar-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-steps { list-style: none; counter-reset: ai; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ai-steps li { counter-increment: ai; position: relative; padding: 14px 16px 14px 54px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); font-size: 14px; }
.ai-steps li::before { content: counter(ai); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #04222f; font-weight: 800; text-align: center; line-height: 26px; }
.ai-steps b { display: block; color: var(--ink); margin-bottom: 2px; }
.ai-cat { margin: 30px 0 14px; }
a.ai-tool { color: inherit; display: flex; flex-direction: column; transition: border-color .15s; }
a.ai-tool:hover { text-decoration: none; border-color: var(--brand); }
.ai-tool h3 { margin-bottom: 6px; }
.ai-tool p { color: var(--ink-soft); font-size: 14px; }
.ai-tool .ai-tool-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ai-pts { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ai-go { color: var(--brand); font-size: 14px; font-weight: 700; }
.ai-tool-off { opacity: .6; }
.ai-thumbs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-bottom: 10px; }
.ai-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-thumb-st { font-size: 13px; color: var(--muted); padding: 8px; text-align: center; }
.ai-form textarea { width: 100%; font-size: 16px; }
.ai-opt { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.ai-opt legend { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px; padding: 0; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chips label { cursor: pointer; }
.ai-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ai-chips span { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--ink-soft); }
.ai-chips span small { color: var(--muted); font-size: 12px; }
.ai-chips input:checked + span { border-color: var(--brand); background: rgba(53, 207, 232, .12); color: var(--ink); font-weight: 700; }
.ai-chips input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ai-ratio { display: inline-block; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; }
.ai-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 6px; border-top: 1px solid var(--line); }
.ai-submit .hint { margin: 0; flex: 1 1 240px; }
.ai-wait { display: flex; align-items: center; gap: 18px; }
.ai-wait p { margin: 0 0 4px; }
.ai-spin { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--brand); animation: ai-spin 1s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-spin { animation-duration: 3s; } }
.ai-results { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 20px; }
.ai-results.ai-one { grid-template-columns: minmax(0, 560px); }
.ai-result { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ai-result img { display: block; width: 100%; height: auto; }
.ai-result figcaption { padding: 10px 12px; display: flex; justify-content: flex-end; }
.ai-params p { margin: 0 0 6px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ai-works { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
a.ai-work { padding: 0; overflow: hidden; color: inherit; display: flex; flex-direction: column; }
a.ai-work:hover { text-decoration: none; border-color: var(--brand); }
.ai-work-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--bg, #0b0e13); }
.ai-work-img img { width: 100%; height: 100%; object-fit: cover; }
.ai-work-img em { position: absolute; right: 6px; bottom: 6px; font-style: normal; font-size: 12px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff; }
.ai-work-meta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.ai-plan { text-align: center; }
.ai-plan-pts { margin: 4px 0; color: var(--muted); }
.ai-plan-pts strong { font-size: 30px; color: var(--ink); }
.ai-plus { color: var(--ok); }
.ai-minus { color: var(--ink-soft); }
.ai-bank { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 10px; }
.ai-bank dt { color: var(--muted); font-size: 13.5px; }
.ai-bank dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .drop-col.drop-ai { padding: 10px 12px 2px; }
  .ai-bar { padding: 12px 14px; }
  .ai-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ai-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-submit .btn { width: 100%; }
}
.ai-work-prompt { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-work-meta b { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ai-plan .price small { font-size: 13px; font-weight: 500; color: var(--muted); }


/* 手機版後台（2026-11-09）：選單改成三欄按鈕、上方顯示目前頁面、表格改成卡片 */
.admin-cur { display: none; }
@media (max-width: 860px) {
  .admin-cur { display: block; flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-side .logo { margin-right: 0; }
  .admin-nav-toggle:checked ~ .admin-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .admin-side .admin-nav .admin-nav-group { grid-column: 1 / -1; margin: 10px 0 2px; }
  .admin-side .admin-nav a { text-align: center; padding: 11px 4px; font-size: 14px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--panel); }
  .admin-side .admin-logout { grid-column: 1 / -1; }
  .admin-main input, .admin-main select, .admin-main textarea { font-size: 16px; }   /* iPhone 輸入時不會自動放大 */
}
@media (max-width: 700px) {
  .admin-main table.m-cards, .admin-main table.m-cards tbody, .admin-main table.m-cards tr,
  .admin-main table.m-cards td { display: block; width: 100%; overflow: visible; }
  .admin-main table.m-cards { min-width: 0 !important; max-width: 100%; }
  .admin-main .table-wrap:has(> table.m-cards) { overflow: visible; }
  .admin-main table.m-cards thead { display: none; }
  .admin-main table.m-cards tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
    background: var(--panel); }
  .admin-main table.m-cards td { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px;
    border: 0; padding: 6px 0; text-align: right; overflow-wrap: anywhere; }
  .admin-main table.m-cards td::before { content: attr(data-label); margin-right: auto; flex: none; max-width: 45%;
    color: var(--muted); font-size: 12.5px; text-align: left; }
  .admin-main table.m-cards td:first-child { display: block; text-align: left; font-size: 15px; font-weight: 600; padding-top: 4px; }
  .admin-main table.m-cards td:first-child::before { content: none; }
  .admin-main table.m-cards td:empty { display: none; }
  .admin-main table.m-cards td:not(:first-child):has(form, button, .btn) { justify-content: flex-start; }
}