/* approval.uio.com.tw：沿用儀表板 style.css 的 token 與元件，這裡只放簽核站自己的部分。
   新增色只有 --info（「已回答」）；其餘都是儀表板既有的 --accent／--amber／--red／--muted。 */
:root { --info: #7cb4ff; }
.wrap { max-width: 1120px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, summary:focus-visible, label:has(input:focus-visible), textarea:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#main .note, #sheet .note { color: var(--muted); }

/* 頂部：站名＋三個頁籤（輪到你／輪到別人／結束） */
.ap-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 12px; }
.ap-top .brand h1 { font-size: 18px; }
.ap-top .brand .sub { color: var(--muted); }
.ap-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
@media (min-width: 960px) { .ap-nav { display: inline-grid; grid-template-columns: repeat(4, 120px); } }
.ap-nav a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 9px; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.ap-nav a.is-on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.nav-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--border); color: var(--text); }
.nav-n.is-you { background: var(--amber); color: #1a1405; }

/* 狀態：實心點＝輪到你；空心點＝等別人；定案用 badge */
.st { display: inline-flex; align-items: center; gap: 7px; height: 24px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.st i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.st-you { color: var(--amber); }
.st-you i { background: var(--amber); }
.st-wait { color: var(--muted); }
.st-wait i { border: 2px solid var(--muted); }
.badge.info { background: rgba(124,180,255,.14); color: var(--info); }
.badge { font-size: 12.5px; padding: 3px 9px; font-weight: 600; }
.ap-relay { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.ap-relay i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.ap-relay.is-done i { background: var(--accent); border-color: var(--accent); }
.ap-v { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); }
.ap-v.is-now { border-color: var(--accent); color: var(--accent); }

/* 標籤：急迫度、正式環境、PM 建議 */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tag-urgent { background: rgba(251,113,133,.14); color: var(--red); }
.tag-urgent b { display: inline-flex; width: 15px; height: 15px; border-radius: 50%; background: var(--red); color: #1a0509; font-size: 11px; align-items: center; justify-content: center; }
.tag-due { background: rgba(251,191,36,.12); color: var(--amber); }
.tag-note { font-weight: 400; }
.tag-env { border: 1px solid rgba(251,113,133,.5); color: var(--red); }
.tag-rec { margin-left: 8px; height: 22px; font-size: 12px; border: 1px solid var(--border); color: var(--muted); }

/* 清單 */
.ap-one { max-width: 680px; }
.ap-list { display: grid; gap: 10px; }
.ap-row { display: block; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.ap-row:hover { border-color: #2c3747; }
.ap-row.is-current { border-color: var(--accent); }
.ap-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.ap-row-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.ap-row-sum { margin: 4px 0 10px; font-size: 14px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.ap-filters { display: grid; gap: 8px; margin-bottom: 14px; }
.ap-filters > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; text-decoration: none; border: 1px solid var(--border); color: var(--muted); background: var(--panel); }
.ap-chip.is-on { border-color: var(--text); color: var(--text); font-weight: 600; }
.ap-empty { min-height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 24px 8px; }
.ap-empty svg { color: var(--accent); margin-bottom: 6px; }
.ap-empty h2 { margin: 0; font-size: 20px; }
.ap-empty p { margin: 0; color: var(--muted); font-size: 14px; max-width: 30em; }
.ap-empty .ap-empty-last { margin-top: 10px; font-size: 13px; }
.ap-ghost { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; padding: 0 18px; border-radius: 9px; border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }

/* 詳細 */
.ap-back { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 4px; color: var(--muted); font-size: 14px; text-decoration: none; }
.ap-title { font-size: 21px; line-height: 1.35; margin: 0 0 6px; }
.ap-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); }
.ap-meta .mono { font-size: 12px; }
.ap-sum { font-size: 16px; line-height: 1.6; margin: 14px 0 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.ap-more summary, .ap-tl-wrap summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: 14px; }
.ap-more summary::before, .ap-tl-wrap summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.ap-more[open] summary::before, .ap-tl-wrap[open] summary::before { transform: rotate(45deg); }
.ap-more { margin-top: 4px; }
.ap-more-body { padding: 0 2px 8px; font-size: 14px; line-height: 1.65; }
.ap-more-body p { margin: 0 0 10px; }
.ap-more-body ul { margin: 0 0 10px; padding-left: 1.2em; }
.ap-att { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.ap-att li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); overflow-wrap: anywhere; }
.ap-att svg { color: var(--muted); flex: none; }

/* 來回紀錄（時間軸） */
.ap-tl-wrap { margin-top: 10px; }
.ap-tl { list-style: none; margin: 0 0 6px; padding: 0; position: relative; }
.ap-tl > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; }
.ap-tl > li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--border); }
.ap-tl-ico { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.ap-tl > li.is-me .ap-tl-ico { color: var(--accent); border-color: var(--accent); }
.ap-tl > li.ap-tl-update .ap-tl-ico { color: var(--amber); border-color: var(--amber); }
.ap-tl-body { font-size: 14px; line-height: 1.55; padding-top: 3px; }
.ap-tl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 2px; }
.ap-tl-time { color: var(--muted); font-size: 13px; }
.ap-tl-body ul { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ap-tl-body li.is-comment { color: var(--text); font-weight: 600; }
.ap-tl-body li:not(.is-comment) { color: var(--muted); }

/* 這一版改了什麼 */
.ap-diff { margin-top: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.06); }
.ap-diff h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.ap-diff h3 .note { font-size: 13px; font-weight: 400; }
.ap-diff-item + .ap-diff-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ap-diff-because { font-size: 14px; color: var(--muted); margin-bottom: 8px; line-height: 1.55; }
.ap-diff-because b { color: var(--text); }
.ap-diff-because q { color: var(--text); quotes: "「" "」"; }
.ap-diff-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; line-height: 1.55; padding: 4px 0; }
.ap-diff-row .ap-v { justify-self: start; }
.ap-diff-row del { color: var(--muted); text-decoration-color: rgba(138,151,168,.7); }
.ap-diff-row ins { text-decoration: none; color: var(--text); font-weight: 600; }

/* 簽核區 */
.ap-form { margin-top: 18px; display: grid; gap: 14px; }
.ap-form-h, .ap-final h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 16px; }
.ap-form-h .note, .ap-final h3 .note { font-size: 13px; font-weight: 400; }
.ap-q { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); min-width: 0; scroll-margin-top: 16px; }
.ap-q-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.ap-q-no { font-size: 13px; color: var(--muted); }
.ap-q-state { font-size: 13px; color: var(--muted); }
.ap-q-state.is-done { color: var(--accent); font-weight: 600; }
.ap-q h4 { margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
.ap-q input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.ap-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-yn-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--border); background: var(--panel-2); font-size: 17px; font-weight: 700; }
.ap-approve:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #05140e; }
.ap-reject:has(input:checked) { background: rgba(251,113,133,.16); border-color: var(--red); color: var(--red); }
.ap-opts { display: grid; gap: 8px; }
.ap-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--border); background: var(--panel-2); }
.ap-opt-key { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--muted); color: var(--muted); font-size: 13px; font-weight: 700; }
.ap-opt-text { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.ap-opt-label { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.ap-opt-note { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.ap-opt-check { margin-left: auto; align-self: center; color: var(--accent); opacity: 0; flex: none; }
.ap-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.ap-opt:has(input:checked) .ap-opt-key { background: var(--accent); border-color: var(--accent); color: #05140e; }
.ap-opt:has(input:checked) .ap-opt-check { opacity: 1; }
/* 「有意見」：和答案分開的第三條路，虛線框，選了變 amber（表示會回到 owner 手上） */
.ap-comment-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 10px; padding: 8px 14px; border-radius: 12px; cursor: pointer; border: 1.5px dashed var(--border); color: var(--text); font-size: 15.5px; font-weight: 600; }
.ap-comment-opt svg { color: var(--muted); flex: none; }
.ap-comment-opt small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.ap-comment-opt:has(input:checked) { border-style: solid; border-color: var(--amber); background: rgba(251,191,36,.08); }
.ap-comment-opt:has(input:checked) svg { color: var(--amber); }
.ap-note { margin-top: 6px; }
.ap-note summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; }
.ap-note[open] summary { display: none; }
.ap-note-field { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.ap-note-field.is-comment span { color: var(--amber); }
.ap-note-field.is-reject span { color: var(--red); }
.ap-note-field textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; resize: vertical; min-height: 48px; width: 100%; min-inline-size: 0; }
.ap-note-field.is-comment textarea { border-color: rgba(251,191,36,.6); }
.ap-note-field textarea:focus { border-color: var(--blue); outline: none; }

/* 送出列：手機固定在畫面底部（拇指範圍），寬螢幕跟在題目後面 */
.ap-submit { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(10,14,20,.95); border-top: 1px solid var(--border); }
@media (max-width: 959px) { .ap-submit { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; } .ap-detail:has(.ap-form) { padding-bottom: 84px; } }
@media (min-width: 960px) { .ap-submit { border: 1px solid var(--border); border-radius: 12px; } }
.ap-progress { flex: 1; font-size: 14px; color: var(--muted); }
.ap-progress b { color: var(--text); }
.ap-miss { display: block; color: var(--text); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ap-go { min-height: 50px; padding: 0 20px; font-size: 16px; }
button.btn.ap-go:disabled { opacity: 1; background: var(--panel-2); border-color: var(--border); color: var(--muted); }

/* 等別人／已定案 */
.ap-waiting { margin-top: 18px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.ap-waiting p { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.ap-final { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.ap-final h3 svg { color: var(--muted); align-self: center; }
.ap-final dl { margin: 10px 0 0; display: grid; gap: 4px; }
.ap-final dt { font-size: 13px; color: var(--muted); margin-top: 8px; }
.ap-final dd { margin: 0; font-size: 15px; font-weight: 600; }
.ap-final-v { margin-left: 10px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.ap-quote { font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }

/* 確認面板：手機是底部面板，寬螢幕置中 */
.ap-sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(5,8,12,.72); }
.ap-sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow-y: auto; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; }
@media (min-width: 640px) { .ap-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 480px; border: 1px solid var(--border); border-radius: 18px; padding-top: 20px; } .ap-grip { display: none; } }
.ap-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 12px; }
.ap-sheet h3 { margin: 0; font-size: 19px; }
.ap-sheet > .note { margin: 2px 0 14px; font-size: 13px; }
.ap-sheet-group { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.ap-sheet-group h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.ap-sheet-group.is-comment h4 { color: var(--amber); }
.ap-answers { margin: 0; display: grid; gap: 2px; }
.ap-answers dt { font-size: 13px; color: var(--muted); margin-top: 6px; }
.ap-answers dd { margin: 0; font-size: 16px; font-weight: 600; }
.ap-answers dd.ans-ok { color: var(--accent); }
.ap-answers dd.ans-bad { color: var(--red); }
.ap-answers dd.ans-comment { color: var(--amber); }
.ap-answers dd .ap-quote { color: var(--text); }
.ap-faceid { width: 100%; min-height: 54px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; }
.ap-back-btn { width: 100%; min-height: 50px; margin-top: 10px; font-size: 15px; }

/* 寬螢幕：左清單、右詳細 */
.ap-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; }
.ap-side { position: sticky; top: 16px; }
.ap-split .ap-detail { max-width: 700px; }
.ap-split .ap-back { display: none; }

body.sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ap-more summary::before, .ap-tl-wrap summary::before { transition: none; } }
.ap-opt:has(input:checked) .ap-opt-note, .ap-opt:has(input:checked) .tag-rec { color: #c5d0dc; } /* 選中的 accent-dim 底上，--muted 只有 3.99:1 */
.ap-waiting h3 { margin: 0; font-size: 15px; }
.ap-waiting .ap-relay { margin-top: 8px; font-size: 14px; }

.ap-q-state.is-comment { color: var(--amber); font-weight: 600; }
.ap-split-count { display: block; font-size: 13px; color: var(--muted); }
.ap-sheet .tag-env { margin-bottom: 8px; }
.ap-mine { list-style: none; margin: 10px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.ap-mine .note { display: block; font-weight: 400; font-size: 12.5px; }
.ap-relay.is-sent i { background: var(--muted); border-color: var(--muted); }
.ap-diff-row b { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ap-diff-row.is-old > span:last-child { color: #b3bfcc; }
.ap-diff-row.is-new > span:last-child { color: var(--text); font-weight: 600; }
.ap-diff-row.is-new b { color: var(--accent); }
@media (max-width: 559px) { .ap-top .brand .sub { display: none; } .ap-top { padding: 12px 0 10px; } }

/* ---- 正式版補充（設計稿以外的部分：字型、圖片附件、登入、頁尾、錯誤訊息）---- */
/* 設計稿 proto-only.css 建議：把 Noto Sans CJK TC 加進字型堆疊 */
body { font-family: -apple-system, "Noto Sans TC", "PingFang TC", "Noto Sans CJK TC", "Segoe UI", system-ui, sans-serif; }
.ap-att a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ap-att-img { display: block; width: 100%; margin-top: 6px; }
.ap-att-img img { display: block; max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid var(--border); }
.ap-err { margin-top: 10px; color: var(--red); font-size: 14px; }
.ap-err:empty { display: none; }
.ap-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 32px 0 24px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--muted); }
.ap-foot[hidden] { display: none; }
.ap-foot button { min-height: 40px; }
@media (max-width: 959px) { #main:has(.ap-form) ~ .ap-foot { margin-bottom: 96px; } }
.overlay .pair-code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 700; letter-spacing: 2px; margin: 4px 0 14px; color: var(--text); }
.overlay .pair-say { color: var(--text); font-size: 14px; }
/* 裝置頁（?p=devices）與配對頁（?p=pairing，所有服務的配對碼在這裡核准），2026-11-01 */
.ap-foot-act { display: inline-flex; gap: 8px; }
.ap-foot a.btn { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-size: 13px; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.ap-dev > .note { margin: 0 0 12px; font-size: 13px; }
.ap-dev > .note a { color: var(--accent); }
.ap-dev-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ap-dev-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.ap-dev-list .note { margin-top: 3px; font-size: 12.5px; }
.ap-dev-list .tag-rec { margin-left: 8px; }
.ap-dev button.btn.ap-del { color: var(--red); border-color: rgba(251,113,133,.45); min-height: 40px; }
.overlay .ov-alt { display: block; width: 100%; margin-top: 10px; }
.overlay .ov-alt[hidden] { display: none; }
.overlay #ov-action { width: 100%; }
.ap-nav a { font-size: 14.5px; gap: 4px; }
.ap-pair-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ap-pair-svc { margin-bottom: 18px; }
.ap-pair-svc h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16px; }
.ap-pair-svc h3 .note { font-size: 13px; font-weight: 400; color: var(--amber); }
.ap-pair-req { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); margin-bottom: 8px; }
.ap-pair-req.is-open { border-color: var(--accent); }
.ap-pair-dev { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-pair-dev b { font-size: 15px; }
.ap-pair-dev .note { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ap-pair-dev button { min-height: 40px; flex: none; }
.ap-pair-form { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.ap-pair-form label { font-size: 13px; color: var(--muted); }
.ap-pair-form input, .ap-pair-form select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 15px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); }
.ap-pair-form input:focus, .ap-pair-form select:focus { outline: none; border-color: var(--accent); }
.ap-pair-form .ap-pair-code { min-height: 52px; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 24px; letter-spacing: 3px; text-align: center; }
.ap-pair-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 6px; }
.ap-pair-row button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ap-pair-bad { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(251,113,133,.45); color: var(--red); font-size: 14px; }
.ap-pair-done { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-dim); font-size: 14px; }
.ap-pair-done b { color: var(--accent); }
.ap-pair-quiet { font-size: 13px; color: var(--muted); }
.ap-pair-upg { margin-top: 10px; font-size: 13px; }
/* 總覽：所有服務的裝置與登入紀錄（2026-11-01） */
.ap-filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.ap-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ap-filter select { min-height: 40px; padding: 6px 10px; border-radius: 9px; font: inherit; font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--border); }
.ap-dev-svc { margin-bottom: 18px; }
.ap-dev-svc h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16px; }
.ap-dev-svc h3 .note { font-size: 13px; font-weight: 400; }
.ap-dev-list .note a { color: var(--muted); }
.ap-log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-log-list li { padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); font-size: 14px; }
.ap-log-list li.is-bad { border-color: rgba(251,113,133,.45); }
.ap-log-list .note { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.ap-log-top { display: flex; justify-content: space-between; gap: 10px; }
.ap-log-res { color: var(--red); font-size: 12.5px; margin-top: 2px; }
.ap-foot-act { flex-wrap: wrap; }
.ap-dev button.btn.ap-del { white-space: nowrap; flex: none; }