/* ========== V4 墨黑金設計 - 基礎重置 ========== */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    input::-ms-reveal,
    input::-ms-clear { display: none !important; }
    input[type=password]::-webkit-textfield-decoration-container {
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* v5.5.17: 隱藏 Safari 自動填入按鈕 */
    input::-webkit-contacts-auto-fill-button,
    input::-webkit-credentials-auto-fill-button {
      visibility: hidden !important;
      display: none !important;
      pointer-events: none !important;
      height: 0 !important;
      width: 0 !important;
      margin: 0 !important;
    }

    /* ========== iOS Safe Area 完整支援（GPT 建議） ========== */
    :root, html, body {
      padding-top: calc(4px + env(safe-area-inset-top));
    }
    /* iOS 11.0-11.2 fallback */
    @supports (padding-top: constant(safe-area-inset-top)) {
      :root, html, body {
        padding-top: calc(4px + constant(safe-area-inset-top));
      }
    }

    /* iOS Safari 白色間隙修復：html 背景設成黑色 */
    /* v2.5.1: scrollbar-gutter 防止關閉 Modal 時頁面抽動 */
    /* v6.4.9: touch-action 禁止網頁版雙指縮放（viewport meta 被現代瀏覽器忽略） */
    /* v7.5.4: overflow:hidden 禁止 PWA 首頁滾動（橡皮筋效果） */
    html {
      background: #0C0A09;
      scrollbar-gutter: stable;
      touch-action: pan-x pan-y;
      overflow: hidden;
      overscroll-behavior: none;
    }

    /* v7.5.4: overflow:hidden 禁止 PWA 首頁滾動（橡皮筋效果） */
    /* v7.9.3: 主畫面垂直置中 - 適應不同螢幕尺寸 */
    body {
      font-family: 'Inter', sans-serif;
      min-height: 100vh;
      min-height: -webkit-fill-available;
      background: linear-gradient(145deg, #0C0A09 0%, #1C1917 50%, #292524 100%);
      padding-left: 16px;
      padding-right: 16px;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      overflow: hidden;
      overscroll-behavior: none;
      /* v7.9.3: flexbox 垂直置中 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    @supports (padding-bottom: constant(safe-area-inset-bottom)) {
      body {
        padding-bottom: max(16px, constant(safe-area-inset-bottom));
      }
    }

    /* Modal 開啟時阻止背景滾動（v2.5.2: 移除 padding/margin 重置以防止抽動） */
    body.modal-open {
      overflow: hidden !important;
      /* 保留原本的 padding-left: 16px 和 padding-right: 16px */
      /* 注意：不能加 position:fixed，會破壞子元素的 fixed 定位機制 */
    }

    /* Modal 開啟時，背景元素不可點擊（防止點擊導致背景滾動） */
    /* v2.5.8: 排除 jQuery UI 的日期/時間選擇器，它們被插入到 body 末端 */
    /* v2.8.1: 新增 #queryTypeModal 例外 */
    /* v5.1.9: 新增註冊 Modal 例外（#qrModalOverlay, #registerStep2Modal, #registerStep3Modal） */
    /* v5.2.0: 新增版本更新提示例外（#sw-update-banner）+ 底部選擇器（#bottomSheetOverlay） */
    /* v7.2.5 Fix: 加入 step3 Toast 和對話框的例外 */
    /* v7.7.0 Fix: 加入 pendingBindingDialog 例外（修復按鈕無法點擊） */
    /* v8.2.9 Fix: 加入審核/查詢 Modal 例外（修復觸碰穿透問題） */
    body.modal-open > *:not(#dynamicFormModal):not(#ui-datepicker-div):not(.ui-timepicker-div):not(#queryTypeModal):not(.receipt-overlay):not(#qrModalOverlay):not(#registerStep2Modal):not(#registerStep3Modal):not(#sw-update-banner):not(#bottomSheetOverlay):not(#step3CopyToast):not(#step3ConfirmDialog):not(#step3ResetDialog):not(#pendingBindingDialog):not(#approvalModal):not(#formQueryModal):not(#attendanceQueryModal) {
      pointer-events: none !important;
    }

    /* iOS Safari Modal 高度修復：使用 100dvh */
    #dynamicFormModal {
      height: 100dvh;
    }

    /* ========== 主容器 ========== */
    .container {
      background: linear-gradient(180deg, rgba(28, 25, 23, 0.95) 0%, rgba(12, 10, 9, 0.98) 100%);
      border: 1px solid rgba(68, 64, 60, 0.4);
      border-radius: 24px;
      padding: 10px 22px;
      width: 100%;
      max-width: 380px;
      margin: 0 auto;  /* 只做水平置中，不做垂直置中 */
      box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.05),
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(212, 175, 55, 0.03);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    /* ========== 頂部 Header ========== */
    .header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(68, 64, 60, 0.3);
      position: relative;  /* v5.4.7: 版本號定位用 */
    }

    /* v5.4.7: 右上角版本號 - 內凹刻字風格 */
    /* v5.5.3: 加入點擊檢查更新功能 */
    .version-badge {
      position: absolute;
      top: -8px;
      right: 0;
      font-size: 9px;
      font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
      letter-spacing: 0.5px;
      color: rgba(255, 255, 255, 0.45);
      padding: 5px 10px;
      background: linear-gradient(180deg, #0a0a0a 0%, #151515 100%);
      border-radius: 6px;
      /* 內凹刻字效果 */
      box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.05);
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.04);
      /* v5.5.3: 點擊效果 */
      cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .version-badge:hover {
      opacity: 0.8;
    }
    .version-badge:active {
      transform: scale(0.95);
    }

    .header-text {
      flex: 1;
    }

    .logo {
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, #D4AF37 0%, #CA8A04 100%);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25);
    }

    .logo .material-icons-outlined {
      font-size: 28px;
      color: #1C1917;
    }

    .header-text h1 {
      font-size: 19px;
      font-weight: 700;
      color: #FAFAF9;
      margin-bottom: 6px;
      letter-spacing: -0.3px;
    }

    .header-text p {
      font-size: 12px;
      color: #A8A29E;
      letter-spacing: 0.3px;
    }

    /* 右上角 QR Code + 註冊 */
    .header-qrcode-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: auto;
      gap: 6px;
    }
    .header-qrcode {
      filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    }
    .qr-register-btn {
      color: #E8B4B8;
      background: rgba(139, 69, 79, 0.25);
      border: 1px solid rgba(139, 69, 79, 0.5);
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .qr-register-btn:hover {
      background: rgba(139, 69, 79, 0.4);
    }
    
    /* 狀態列 - v5.0.7 RWD 響應式 */
    /* v7.1.7: 加入 z-index 確保按鈕在版本號之上可點擊 */
    .status-bar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 2px;
      position: relative;
      z-index: 10;
    }

    .status-link {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #A8A29E;
      text-decoration: none;
      font-size: 11px;
      transition: color 0.2s ease;
    }

    .status-link:hover {
      color: #D4AF37;
    }

    .status-link .material-icons-outlined {
      font-size: 14px;
    }

    /* 狀態列徽章樣式 - v5.0.8 恢復原尺寸 */
    .status-badge {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 500;
      padding: 4px 10px;
      border-radius: 12px;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .status-badge .material-icons-outlined {
      font-size: 14px;
    }

    .badge-aibot {
      color: #5BC0DE;
      background: rgba(91, 192, 222, 0.15);
      border: 1px solid rgba(91, 192, 222, 0.4);
    }

    .badge-aibot:hover {
      background: rgba(91, 192, 222, 0.25);
    }

    .badge-qrcode {
      color: #a8a29e;
      background: rgba(168, 162, 158, 0.15);
      border: 1px solid rgba(168, 162, 158, 0.3);
    }
    .badge-qrcode:hover {
      background: rgba(168, 162, 158, 0.25);
    }

    .badge-register {
      color: #E8B4B8;
      background: rgba(139, 69, 79, 0.25);
      border: 1px solid rgba(139, 69, 79, 0.5);
    }
    .badge-register:hover {
      background: rgba(139, 69, 79, 0.4);
    }

    /* v5.5.16: 登入中禁用頂部按鈕 */
    .status-badge.disabled,
    .version-badge.disabled {
      opacity: 0.4;
      pointer-events: none;
      cursor: not-allowed;
    }

    /* v7.1.0: 確保頂部導航按鈕永遠可點擊（除非有 disabled class） */
    .status-bar .status-badge:not(.disabled) {
      pointer-events: auto !important;
    }

    /* ========== 融合彈窗 v5.0：琥珀金 + 撕紙 QR ========== */
    .qr-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      padding: 16px;
    }
    .qr-modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* 融合彈窗容器 */
    .fusion-modal {
      background: linear-gradient(180deg, #131210 0%, #090807 100%);
      border: 1px solid #282420;
      border-radius: 24px;
      overflow: hidden;
      width: 100%;
      max-width: 380px;
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }
    .qr-modal-overlay.active .fusion-modal {
      transform: scale(1);
    }

    /* 融合彈窗標題 */
    .fusion-header {
      background: linear-gradient(135deg, #1c1a16 0%, #131210 100%);
      border-bottom: 1px solid #282420;
      padding: 18px 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .fusion-title {
      font-size: 17px;
      font-weight: 600;
      color: #f5c563;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .fusion-title .material-icons {
      font-size: 20px;
    }
    .fusion-close {
      position: absolute;
      right: 18px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(245, 197, 99, 0.08);
      border: none;
      color: #887a60;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .fusion-close:hover {
      background: #a07830;
      color: #fff;
    }
    .fusion-close .material-icons {
      font-size: 18px;
    }

    /* QR 區域（v4.9.0: 縮小 padding 讓視窗更緊湊） */
    .fusion-qr-area {
      padding: 14px 20px;
      background: rgba(28, 26, 22, 0.6);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    /* 撕紙效果容器（v4.9.0: 縮小 padding） */
    .torn-paper {
      position: relative;
      background: #fff;
      padding: 10px;
      flex-shrink: 0;
      clip-path: polygon(
        0% 4%, 5% 0%, 10% 4%, 15% 0%, 20% 4%, 25% 0%, 30% 4%, 35% 0%,
        40% 4%, 45% 0%, 50% 4%, 55% 0%, 60% 4%, 65% 0%, 70% 4%, 75% 0%,
        80% 4%, 85% 0%, 90% 4%, 95% 0%, 100% 4%,
        100% 96%, 95% 100%, 90% 96%, 85% 100%, 80% 96%, 75% 100%, 70% 96%, 65% 100%,
        60% 96%, 55% 100%, 50% 96%, 45% 100%, 40% 96%, 35% 100%, 30% 96%, 25% 100%,
        20% 96%, 15% 100%, 10% 96%, 5% 100%, 0% 96%
      );
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    }
    .torn-paper-inner {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fusion-qr-info {
      text-align: left;
    }
    .fusion-qr-label {
      font-size: 14px;
      font-weight: 600;
      color: #f5c563;
      margin-bottom: 8px;
    }
    .fusion-qr-hint {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.8;
      color: #f5c563;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .hint-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      background: rgba(139, 69, 79, 0.35);
      border: 1px solid rgba(139, 69, 79, 0.6);
      border-radius: 20px;
      color: #E8B4B8;
      font-size: 13px;
      font-weight: 600;
    }
    .hint-badge .material-icons {
      font-size: 15px;
    }

    /* 分隔線 */
    .fusion-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 24px;
      font-size: 13px;
      font-weight: 600;
      color: #a8a29e;
    }
    .fusion-divider::before,
    .fusion-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, #383228, transparent);
    }

    /* 融合表單區域 */
    .fusion-form-area {
      padding: 16px 24px 24px;
    }
    .fusion-form-field {
      margin-bottom: 14px;
    }
    .fusion-form-field label {
      display: block;
      font-size: 12px;
      margin-bottom: 5px;
      color: #887a60;
      text-align: center;
    }
    .fusion-form-field input,
    .fusion-form-field select {
      width: 100%;
      padding: 11px 14px;
      background: #090807;
      border: 1px solid #282420;
      border-radius: 10px;
      color: #e7e5e4;
      font-size: 14px;
      font-family: inherit;
      transition: all 0.2s;
      text-align: center;
    }
    /* 自訂下拉選單 */
    .fusion-select-wrapper {
      position: relative;
    }
    .fusion-select {
      width: 100%;
      padding: 11px 30px 11px 14px;
      background: #090807;
      border: 1px solid #282420;
      border-radius: 10px;
      color: #e7e5e4;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }
    .fusion-select::after {
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #887a60;
      transition: transform 0.2s;
    }
    .fusion-select-wrapper.open .fusion-select::after {
      transform: translateY(-50%) rotate(180deg);
    }
    .fusion-select.placeholder {
      color: #555;
    }
    .fusion-select:active,
    .fusion-select-wrapper.open .fusion-select {
      border-color: #d4a840;
      box-shadow: 0 0 0 3px rgba(212, 168, 64, 0.12);
    }
    .fusion-select.error {
      border-color: #ef4444;
    }
    .fusion-select-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #1c1917;
      border: 1px solid #3a3633;
      border-radius: 10px;
      overflow: hidden;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      /* v6.8.3: 下拉選單滑動優化 */
      touch-action: pan-y;
      overscroll-behavior: contain;
    }
    .fusion-select-wrapper.open .fusion-select-dropdown {
      display: block;
      animation: fusionDropdownFade 0.2s ease;
    }
    @keyframes fusionDropdownFade {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fusion-select-option {
      padding: 12px 14px;
      text-align: center;
      font-size: 14px;
      color: #d6d3d1;
      cursor: pointer;
      transition: background 0.15s;
      border-bottom: 1px solid #292524;
    }
    .fusion-select-option:last-child {
      border-bottom: none;
    }
    .fusion-select-option:active {
      background: #292524;
    }
    .fusion-select-option.selected {
      color: #f5c563;
      background: rgba(245, 197, 99, 0.1);
    }

    /* 錯誤訊息文字 */
    .fusion-field-error {
      font-size: 11px;
      color: #ef4444;
      margin-top: 6px;
      text-align: center;
      animation: errorFadeIn 0.3s ease;
    }
    @keyframes errorFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* v6.8.8: 本名即時驗證提示（版本A）- 置中顯示 */
    .fusion-field-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 8px;
      font-size: 12px;
      color: #888;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: all 0.25s ease;
    }
    .fusion-field-hint.show {
      opacity: 1;
      max-height: 30px;
    }
    .fusion-field-hint.error {
      color: #ef4444;
    }
    .fusion-field-hint .material-icons {
      font-size: 16px;
    }

    /* 欄位抖動效果 */
    .shake {
      animation: shakeAnim 0.5s ease;
    }
    @keyframes shakeAnim {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }

    /* ========== 底部滑出式選單（方案 A） ========== */
    /* v6.5.11: 加入 touch-action 防止縮放 */
    .bottom-sheet-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      touch-action: none;  /* 禁止所有觸控手勢（縮放、移動） */
    }
    .bottom-sheet-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .bottom-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      max-height: 50vh;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
      z-index: 10001;
      overflow: hidden;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      touch-action: pan-y;  /* v6.5.11: 只允許垂直滑動 */
      overscroll-behavior: contain;  /* v6.7.0: 防止滾動穿透 */
      will-change: transform;  /* v7.6.1: GPU 加速，修復 Android 動畫問題 */
    }
    .bottom-sheet-overlay.active .bottom-sheet {
      transform: translateY(0);
    }
    .bottom-sheet-handle {
      width: 36px;
      height: 4px;
      background: #444;
      border-radius: 2px;
      margin: 12px auto;
    }
    .bottom-sheet-title {
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      color: #f5c563;
      padding: 8px 20px 16px;
      border-bottom: 1px solid #282420;
    }
    .bottom-sheet-options {
      overflow-y: auto;
      max-height: calc(50vh - 80px);
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;  /* v6.5.11: 只允許垂直滾動 */
      overscroll-behavior: contain;  /* v6.7.0: 防止滾動穿透 */
    }
    .bottom-sheet-option {
      padding: 16px 24px;
      font-size: 15px;
      color: #d6d3d1;
      text-align: center;
      border-bottom: 1px solid #282420;
      cursor: pointer;
      transition: background 0.15s;
    }
    .bottom-sheet-option:last-child {
      border-bottom: none;
    }
    .bottom-sheet-option:active {
      background: #292524;
    }
    .bottom-sheet-option.selected {
      color: #f5c563;
      background: rgba(245, 197, 99, 0.1);
    }
    .bottom-sheet-option {
      display: flex;
      align-items: center;
      justify-content: center;  /* 整體置中 */
    }
    .bottom-sheet-option .check-icon {
      width: 24px;
      font-size: 18px;
      text-align: right;  /* v7.6.2: 勾勾靠右對齊到牆壁 */
      flex-shrink: 0;
      margin-right: 8px;
    }
    /* v5.2.3: 選項文字等寬對齊 */
    /* v7.5.3: 改為置中對齊 */
    /* v7.6.2: 隱形牆壁對齊 - 文字左對齊靠牆，選不同選項不會跑位 */
    .bottom-sheet-option .option-label {
      width: 6em;  /* 固定寬度當作「牆壁」 */
      text-align: left;  /* 文字靠左對齊到牆壁 */
      letter-spacing: 0.5px;
    }

    /* ========== 註冊 Bottom Sheet v5.1.0 ========== */
    .register-sheet-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      /* v5.1.9: 移除 touch-action:none（會阻止所有子元素觸控） */
      overflow: hidden;
      pointer-events: none; /* v5.5.28: 背景不可點擊 */
      /* v6.5.18 Fix: CSS 安全網 - 即使 JS 移動 DOM 失敗，這些樣式也能降低 Bug 發生機率 */
      /* 強制最高層級，避免被 container 內的 backdrop-filter 影響 */
      z-index: 10000 !important;
      /* v7.3.0: 移除 contain 避免堆疊上下文隔離，導致 Toast/Dialog 無法顯示 */
      /* contain: layout style paint; */
    }

    /* v6.5.18 Fix: 針對 Step2 Modal 的特別加固 */
    #registerStep2Modal {
      /* 確保在所有 Modal 之上 */
      z-index: 10001 !important;
    }
    /* v7.2.5 Fix: Step 3 必須在 Step 2 之上 */
    #registerStep3Modal {
      z-index: 10002 !important;
    }
    /* v7.6.0 Fix: 待綁定對話框必須在 Step1 之上（修復取消按鈕無法點擊問題） */
    #pendingBindingDialog {
      z-index: 10003 !important;
    }
    .register-sheet-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto; /* v5.5.28: 啟動時恢復 */
    }
    /* v7.2.5 Fix: 非 active 的 Modal 內容區不接收事件（防止隱形玻璃阻擋） */
    .register-sheet-overlay:not(.active) .register-sheet {
      pointer-events: none !important;
    }
    /* 鎖定背景滾動 */
    body.modal-open {
      overflow: hidden;
      /* v7.3.0: 移除 position:fixed 避免破壞 fixed 定位上下文 */
      /* position: fixed; */
      /* width: 100%; */
      /* height: 100%; */
    }

    /* v5.5.28: 確保內容區可點擊，背景不干擾捲軸 */
    .register-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      pointer-events: auto;
      right: 0;
      background: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);
      border-radius: 24px 24px 0 0;
      border-top: 1px solid #282420;
      max-height: 95vh;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
      overflow: hidden;
      padding-bottom: max(20px, env(safe-area-inset-bottom));
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
    }
    .register-sheet-overlay.active .register-sheet {
      transform: translateY(0);
    }

    .register-sheet-handle {
      width: 36px;
      height: 4px;
      background: #444;
      border-radius: 2px;
      margin: 12px auto 8px;
    }

    .register-sheet-header {
      position: relative;
      padding: 0 20px 16px;
      border-bottom: 1px solid #282420;
      text-align: center;
    }

    .register-sheet-title {
      font-size: 17px;
      font-weight: 600;
      color: #f5c563;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .register-sheet-title .material-icons {
      font-size: 20px;
    }

    /* Step 2 警告標題 */
    .register-sheet-header.warning {
      background: linear-gradient(135deg, #4a1c1c 0%, #2d1212 100%);
      padding-top: 16px;
      margin-top: -8px;
      border-radius: 24px 24px 0 0;
    }
    .register-sheet-header.warning .register-sheet-title {
      color: #fca5a5;
    }

    /* ===== Step 1 全屏註冊頁（v5.1.5 App 風格） ===== */
    /* 回滾提示：若要恢復抽屜式，刪除此區塊 */

    #qrModalOverlay {
      background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    }

    #qrModalOverlay .register-sheet {
      height: 100%;
      max-height: 100vh;
      border-radius: 0;
      background: transparent;
      display: flex;
      flex-direction: column;
      padding-bottom: 0;
    }

    /* v5.3.4: 全屏頂部圖示區（上方留白） */
    /* v7.8.9: 加入 safe-area-inset-top 避開 iPhone 瀏海 */
    .step1-fullscreen-header {
      padding: 24px 20px 8px;
      padding-top: calc(24px + env(safe-area-inset-top));
      text-align: center;
      flex-shrink: 0;
    }
    /* 頂部金色圓形 icon */
    .step1-fullscreen-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #f5c563 0%, #d4a84b 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
      box-shadow: 0 6px 24px rgba(245, 197, 99, 0.3);
    }
    .step1-fullscreen-icon .material-icons {
      font-size: 28px;
      color: #1a1a1a;
    }
    .step1-fullscreen-title {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }
    /* v5.2.0: 「註冊使用」下方分隔線 */
    .step1-title-divider {
      width: 40px;
      height: 3px;
      background: linear-gradient(90deg, #f5c563 0%, #d4a84b 100%);
      border-radius: 2px;
      margin: 10px auto 0;
    }

    /* v5.5.26: 內容區（允許捲動，適應小螢幕） */
    /* v6.8.2: iOS Safari 滑動優化 */
    #qrModalOverlay .register-sheet-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 16px 12px;
      max-height: none;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }
    /* v6.8.2: iOS Safari 滑動優化 - Gemini 1px Hack */
    /* 強制內容區高度 > 容器高度，欺騙瀏覽器認為可滾動 */
    #qrModalOverlay .register-sheet-body > .step1-form-card {
      min-height: calc(100% + 1px);
    }

    /* v5.2.6: QR Code 卡片（黃金比例分割：1x空白｜QR｜2x空白｜文字｜1x空白） */
    .step1-qr-card {
      background: #1c1c1e;
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      height: 108px;
    }
    .step1-qr-spacer-left { flex: 1; }
    .step1-qr-spacer-mid { flex: 2; }
    .step1-qr-spacer-right { flex: 1; }
    .step1-qr-code {
      width: 80px;
      height: 80px;
      flex-shrink: 0;
      background: white;
      border-radius: 8px;
      overflow: hidden;
    }
    .step1-qr-code img,
    .step1-qr-code canvas {
      width: 100% !important;
      height: 100% !important;
    }
    /* v5.2.9: QR 右側文字（與圖片一致） */
    .step1-qr-info {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
    }
    /* v5.3.2: 縮小字體、減少行距 */
    .step1-qr-line1 {
      font-size: 14px;
      color: #f5c563;
      font-weight: 600;
    }
    .step1-qr-line2 {
      font-size: 14px;
      color: #f5c563;
      font-weight: 600;
    }
    .step1-qr-line3 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 2px;
    }
    .step1-qr-line3 .hint-text-yellow {
      font-size: 14px;
      color: #f5c563;
      font-weight: 600;
    }
    /* v5.2.6: 酒紅色膠囊「註冊」badge（與主畫面一致） */
    .step1-qr-info .hint-badge,
    .hint-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(139, 69, 79, 0.25);
      color: #E8B4B8;
      border: 1px solid rgba(139, 69, 79, 0.5);
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 600;
    }
    .hint-badge .material-icons {
      font-size: 15px;
    }
    /* v5.2.6: 「再點擊」黃色粗體 */
    .hint-text-yellow {
      color: #f5c563;
      font-weight: 600;
      font-size: 12px;
    }

    /* v5.2.0: QR 區域置中排版（已棄用，改回左右排版） */
    .step1-qr-card.step1-qr-centered {
      flex-direction: column;
      text-align: center;
      padding: 16px;
    }
    .step1-qr-info-centered {
      text-align: center;
    }
    .step1-qr-info-centered .step1-qr-label {
      font-size: 15px;
      color: #f5c563;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .step1-qr-hint-centered {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
    }
    .step1-qr-hint-centered .hint-text-yellow {
      color: #f5c563;
      font-weight: 600;
      font-size: 14px;
    }
    .step1-qr-hint-centered .hint-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(245, 197, 99, 0.15);
      color: #f5c563;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
    }
    .step1-qr-hint-centered .hint-badge .material-icons {
      font-size: 16px;
    }

    /* v5.1.7: 表單區卡片化（壓縮間距） */
    .step1-form-card {
      background: #1c1c1e;
      border-radius: 14px;
      padding: 14px 16px;
    }
    /* v5.3.6: 資料填寫區標題（字距粗體、加大） */
    .step1-form-title {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      text-align: center;
      letter-spacing: 6px;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid #2c2c2e;
    }

    /* v6.8.0: 按鈕融入卡片內部（C版設計） */
    .step1-footer-inside {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #2a2a2c;
      position: relative;
    }
    /* v5.3.2: 按鈕行（取消左、提交右、等寬） */
    .step1-btn-row {
      display: flex;
      gap: 12px;
    }
    /* 取消按鈕（深灰底）v7.7.0: 加入 flex 支援 icon */
    .step1-btn-cancel {
      flex: 1;
      padding: 14px;
      background: #252527;
      border: 1px solid #3c3c3e;
      border-radius: 12px;
      color: #888;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .step1-btn-cancel .material-icons {
      font-size: 18px;
    }
    .step1-btn-cancel:active {
      background: #1c1c1e;
      transform: scale(0.98);
    }
    /* v5.5.29: 取消按鈕禁用狀態 */
    .step1-btn-cancel.disabled,
    .step1-btn-cancel:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }
    /* 提交按鈕（酒紅漸層） */
    .step1-btn-submit {
      flex: 1;
      padding: 14px;
      background: linear-gradient(135deg, #8B454F 0%, #6B3540 100%);
      border: none;
      border-radius: 12px;
      color: #E8B4B8;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(139, 69, 79, 0.3);
      transition: all 0.2s ease;
    }
    .step1-btn-submit:active {
      transform: scale(0.98);
      box-shadow: 0 1px 4px rgba(139, 69, 79, 0.2);
    }
    .step1-btn-submit .material-icons {
      font-size: 18px;
    }
    .step1-btn-submit .btn-spinner {
      display: none;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    /* v5.5.28: loading 文字預設隱藏 */
    .step1-btn-submit .btn-loading-text {
      display: none;
    }
    /* v5.5.28: loading 狀態 - 灰色背景 + 顯示驗證中文字 */
    .step1-btn-submit.loading {
      background: linear-gradient(135deg, #555 0%, #444 100%);
      cursor: not-allowed;
      opacity: 0.8;
      box-shadow: none;
    }
    .step1-btn-submit.loading .btn-spinner {
      display: inline-block;
    }
    .step1-btn-submit.loading .material-icons,
    .step1-btn-submit.loading .btn-text {
      display: none;
    }
    .step1-btn-submit.loading .btn-loading-text {
      display: inline;
      color: #ccc;
    }
    /* v5.5.0: 避免通用 .loading 的 ::before 重複顯示 spinner */
    .step1-btn-submit.loading::before {
      display: none;
    }

    /* v5.3.7: 桌面版水平垂直置中 */
    /* v6.5.16: 修復 Step2 height: auto 覆蓋問題 - Step2 維持全屏 */
    @media (min-width: 768px) {
      #qrModalOverlay,
      #registerStep2Modal,
      #registerStep3Modal {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      /* Step1 和 Step3 使用卡片式樣式 */
      #qrModalOverlay .register-sheet,
      #registerStep3Modal .register-sheet {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        max-width: 390px;
        width: 100%;
        border-radius: 20px;
        height: auto;
        max-height: 85vh;
        transform: none;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
      }
      /* v6.5.16: Step2 維持全屏（覆蓋掉舊的 height: auto）*/
      #registerStep2Modal .register-sheet {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        height: 100%;
        max-height: 100vh;
        transform: none;
        box-shadow: none;
      }
      #qrModalOverlay.active .register-sheet,
      #registerStep3Modal.active .register-sheet {
        transform: none;
      }
      /* v6.5.16: Step2 的 active 狀態也不需要 transform */
      #registerStep2Modal.active .register-sheet {
        transform: none;
      }
      #qrModalOverlay .register-sheet-body,
      #registerStep3Modal .register-sheet-body {
        padding: 0 20px 16px;
      }
      /* v6.5.16: Step2 使用全屏 padding */
      #registerStep2Modal .register-sheet-body {
        padding: 0 20px 16px;
      }
    }

    /* ===== Step 2 全屏審查頁 v5.5.30 ===== */
    #registerStep2Modal {
      background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    }

    #registerStep2Modal .register-sheet {
      height: 100%;
      max-height: 100vh;
      border-radius: 0;
      background: transparent;
      display: flex;
      flex-direction: column;
    }

    /* v6.8.10: 全屏頂部圖示區（正常大小 + 可滾動） */
    /* v7.8.9: 加入 safe-area-inset-top 避開 iPhone 瀏海 */
    .step2-fullscreen-header {
      padding: 20px 20px 8px;
      padding-top: calc(20px + env(safe-area-inset-top));
      text-align: center;
      flex-shrink: 0;
    }
    .step2-fullscreen-icon {
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
      box-shadow: 0 6px 24px rgba(220, 38, 38, 0.3);
    }
    .step2-fullscreen-icon .material-icons {
      font-size: 26px;
      color: white;
    }
    .step2-fullscreen-title {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }
    /* 標題下方分隔線 */
    .step2-title-divider {
      width: 40px;
      height: 3px;
      background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
      border-radius: 2px;
      margin: 8px auto 0;
    }
    .step2-fullscreen-subtitle {
      font-size: 13px;
      color: #888;
      margin-top: 8px;
    }

    /* v6.8.10: 全屏卡片區（正常 padding + 可滾動 + 滾動提示） */
    #registerStep2Modal .register-sheet-body {
      flex: 1;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overscroll-behavior: contain;
      position: relative;
    }
    /* v6.8.9: 滾動提示箭頭 */
    .step2-scroll-hint {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .step2-scroll-hint.show {
      opacity: 1;
    }
    .step2-scroll-hint.top {
      top: 4px;
    }
    .step2-scroll-hint.bottom {
      bottom: 4px;
    }
    .step2-scroll-hint .material-icons {
      font-size: 18px;
      color: rgba(255,255,255,0.6);
    }

    .step2-card {
      background: #1c1c1e;
      border-radius: 16px;
      overflow: hidden;
    }
    /* v6.8.10: 正常 padding（靠滾動解決空間問題） */
    .step2-card-item {
      display: flex;
      align-items: center;
      padding: 14px 18px;
      border-bottom: 1px solid #2c2c2e;
    }
    .step2-card-item:last-of-type {
      border-bottom: none;
    }
    /* v6.8.10: 按鈕融合在卡片內（正常大小） */
    .step2-card-buttons {
      display: flex;
      gap: 12px;
      padding: 16px 18px;
      border-top: 1px solid #2c2c2e;
    }
    .step2-card-buttons .confirm-btn {
      flex: 1;
      padding: 14px 16px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }
    .step2-card-buttons .confirm-btn-back {
      background: #2c2c2e;
      color: #fff;
    }
    .step2-card-buttons .confirm-btn-back:hover {
      background: #3c3c3e;
    }
    .step2-card-buttons .confirm-btn-submit {
      background: #dc2626;
      color: #fff;
    }
    .step2-card-buttons .confirm-btn-submit:hover {
      background: #b91c1c;
    }
    .step2-card-buttons .confirm-btn .material-icons {
      font-size: 18px;
    }
    /* 送出中狀態 */
    .step2-card-buttons .confirm-btn-submit.loading .btn-icon,
    .step2-card-buttons .confirm-btn-submit.loading .btn-text {
      display: none;
    }
    .step2-card-buttons .confirm-btn-submit .btn-loading-text,
    .step2-card-buttons .confirm-btn-submit .btn-spinner {
      display: none;
    }
    .step2-card-buttons .confirm-btn-submit.loading .btn-loading-text {
      display: inline;
    }
    .step2-card-buttons .confirm-btn-submit.loading .btn-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .step2-card-icon {
      width: 36px;
      height: 36px;
      background: #2c2c2e;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 14px;
      flex-shrink: 0;
    }
    .step2-card-icon .material-icons {
      font-size: 18px;
      color: #888;
    }
    .step2-card-content {
      flex: 1;
      min-width: 0;  /* v6.2.0: 允許 flexbox 子元素正確收縮 */
    }
    .step2-card-label {
      font-size: 12px;
      color: #888;
      margin-bottom: 2px;
    }
    .step2-card-value {
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      word-break: break-word;  /* v6.2.0: 長名字自動換行 */
    }
    /* v6.8.6: 眼睛切換按鈕 */
    .step2-eye-toggle {
      width: 36px;
      height: 36px;
      background: transparent;
      border: none;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      margin-left: 8px;
      transition: background 0.2s;
    }
    .step2-eye-toggle:hover {
      background: #3a3a3a;
    }
    .step2-eye-toggle:active {
      background: #4a4a4a;
    }
    .step2-eye-toggle .material-icons {
      font-size: 20px;
      color: #888;
    }

    /* 全屏底部按鈕 */
    #registerStep2Modal .register-sheet-footer {
      padding: 20px 24px;
      padding-bottom: max(24px, env(safe-area-inset-bottom));
      border-top: none;
    }
    /* v5.5.30: 左右並排按鈕 */
    .step2-btn-row {
      display: flex;
      flex-direction: row;
      gap: 12px;
    }
    .step2-btn-row .confirm-btn {
      flex: 1;
      padding: 16px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    /* 返回按鈕（左側、灰色） */
    .step2-btn-row .confirm-btn-back {
      background: #2c2c2e;
      border: none;
      color: #aaa;
    }
    .step2-btn-row .confirm-btn-back .material-icons {
      font-size: 18px;
    }
    .step2-btn-row .confirm-btn-back:active {
      background: #3c3c3e;
      transform: scale(0.98);
    }
    /* v5.5.30: 返回按鈕禁用狀態 */
    .step2-btn-row .confirm-btn-back.disabled,
    .step2-btn-row .confirm-btn-back:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }
    /* 確認按鈕（右側、紅色） */
    .step2-btn-row .confirm-btn-submit {
      background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
      border: none;
      color: #fff;
      box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
    }
    .step2-btn-row .confirm-btn-submit:active {
      transform: scale(0.98);
      box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
    }
    /* v5.5.30: Spinner 預設隱藏 */
    .step2-btn-row .confirm-btn-submit .btn-spinner {
      display: none;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .step2-btn-row .confirm-btn-submit .btn-loading-text {
      display: none;
    }
    /* v5.5.30: Loading 狀態 */
    .step2-btn-row .confirm-btn-submit.loading {
      background: linear-gradient(135deg, #555 0%, #444 100%);
      cursor: not-allowed;
      opacity: 0.8;
      box-shadow: none;
    }
    .step2-btn-row .confirm-btn-submit.loading .btn-spinner {
      display: inline-block;
    }
    .step2-btn-row .confirm-btn-submit.loading .btn-icon,
    .step2-btn-row .confirm-btn-submit.loading .btn-text {
      display: none;
    }
    .step2-btn-row .confirm-btn-submit.loading .btn-loading-text {
      display: inline;
      color: #ccc;
    }

    /* ===== Step 3 全屏 Token 頁 v5.5.33 ===== */
    #registerStep3Modal {
      background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    }
    #registerStep3Modal .register-sheet {
      height: 100%;
      max-height: 100vh;
      border-radius: 0;
      background: transparent;
      display: flex;
      flex-direction: column;
      justify-content: center;  /* v7.6.2: 整體垂直置中 */
    }
    /* 全屏頂部圖示區（與 Step 1/2 一致） */
    /* v7.8.9: 加入 safe-area-inset-top 避開 iPhone 瀏海 */
    .step3-fullscreen-header {
      padding: 24px 20px 8px;
      padding-top: calc(24px + env(safe-area-inset-top));
      text-align: center;
      flex-shrink: 0;
    }
    .step3-fullscreen-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
      box-shadow: 0 6px 24px rgba(34, 197, 94, 0.3);
    }
    .step3-fullscreen-icon .material-icons {
      font-size: 28px;
      color: white;
    }
    .step3-fullscreen-title {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }
    .step3-title-divider {
      width: 40px;
      height: 3px;
      background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
      border-radius: 2px;
      margin: 10px auto 0;
    }
    .step3-fullscreen-subtitle {
      font-size: 13px;
      color: #888;
      margin-top: 12px;
    }
    /* 全屏內容區 */
    /* v7.6.2: 移除 flex:1，讓整個內容區塊（header+body）一起垂直置中 */
    #registerStep3Modal .register-sheet-body {
      flex: 0 0 auto;  /* 不拉伸，依內容高度 */
      padding: 20px 24px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }
    /* 隱藏舊的抽屜元素 */
    #registerStep3Modal .register-sheet-handle,
    #registerStep3Modal .register-sheet-header {
      display: none;
    }

    .register-sheet-body {
      overflow-y: auto;
      max-height: calc(95vh - 120px);
      -webkit-overflow-scrolling: touch;
      padding: 20px 24px;
    }

    .register-sheet-footer {
      display: flex;
      gap: 12px;
      padding: 16px 24px;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      border-top: 1px solid #282420;
    }
    .register-sheet-footer .confirm-btn {
      flex: 1;
    }

    .register-sheet-close {
      position: absolute;
      right: 16px;
      top: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: none;
      color: #888;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .register-sheet-close:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #aaa;
    }
    .register-sheet-close .material-icons {
      font-size: 18px;
    }

    /* Loading spinner 動畫 */
    .fusion-submit-btn .btn-spinner {
      display: none;
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .fusion-submit-btn.loading .btn-spinner {
      display: block;
    }
    .fusion-submit-btn.loading .material-icons {
      display: none;
    }
    /* loading 時保留文字（會顯示「驗證中...」） */
    .fusion-submit-btn.loading,
    .fusion-submit-btn:disabled {
      cursor: not-allowed !important;
      opacity: 0.6;
      background: linear-gradient(135deg, #a8a8a8, #888888) !important;
      color: #555 !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .fusion-submit-btn.loading:hover,
    .fusion-submit-btn:disabled:hover {
      transform: none !important;
      box-shadow: none !important;
    }
    .fusion-submit-btn.loading .btn-text {
      color: #fff !important;
      font-weight: 600;
    }
    /* 避免通用 .loading 的 ::before 重複顯示 spinner */
    .fusion-submit-btn.loading::before {
      display: none !important;
    }
    /* 錯誤狀態（已註冊時的倒數樣式） */
    .fusion-submit-btn.error-state {
      background: linear-gradient(135deg, #E8B4B8, #d4a0a4) !important;
      pointer-events: none;
    }
    .fusion-submit-btn.error-state .btn-text {
      color: #7f1d1d;
      font-weight: 600;
    }
    .fusion-submit-btn.error-state .material-icons {
      display: none;
    }
    .fusion-submit-btn.error-state .btn-spinner {
      display: none;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ========== Step2：確認彈窗（紅色警告風格） ========== */
    .confirm-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 16px;
    }
    .confirm-overlay.show {
      display: flex;
    }
    .confirm-modal {
      background: linear-gradient(180deg, #131210 0%, #090807 100%);
      border: 1px solid #282420;
      border-radius: 20px;
      overflow: hidden;
      width: 100%;
      max-width: 380px;
      min-height: 60vh;
      display: flex;
      flex-direction: column;
      animation: modalSlideIn 0.3s ease;
    }
    .warning-header {
      background: linear-gradient(135deg, #4a1c1c 0%, #2d1212 100%);
      border-bottom: 1px solid #5c2020;
      padding: 16px 20px;
      text-align: center;
    }
    .warning-title {
      font-size: 16px;
      font-weight: 600;
      color: #fca5a5;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .warning-subtitle {
      font-size: 12px;
      color: #f87171;
      margin-top: 6px;
    }
    .confirm-body {
      padding: 20px 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .confirm-item-v2 {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #282420;
      font-size: 15px;
    }
    .confirm-item-v2:last-child { border-bottom: none; }
    .confirm-label-v2 {
      width: 60px;
      text-align: right;
      color: #78716c;
      flex-shrink: 0;
    }
    .confirm-divider-v2 {
      color: #44403c;
      margin: 0 16px;
      flex-shrink: 0;
    }
    .confirm-value-v2 {
      color: #e7e5e4;
      font-weight: 600;
      flex: 1;
      text-align: left;
    }
    .confirm-footer {
      padding: 0 20px 20px;
      display: flex;
      gap: 10px;
    }
    .confirm-btn {
      flex: 1;
      padding: 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s;
    }
    .confirm-btn-back {
      background: #292524;
      border: 1px solid #44403c;
      color: #a8a29e;
    }
    /* v4.9.1: 返回按鈕禁用樣式 */
    .confirm-btn-back:disabled {
      cursor: not-allowed !important;
      opacity: 0.4;
      pointer-events: none;
    }
    .confirm-btn-submit {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      border: none;
      color: #fff;
    }
    .confirm-btn-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    }
    .confirm-btn-submit.loading,
    .confirm-btn-submit:disabled {
      cursor: not-allowed !important;
      opacity: 0.6;
      background: linear-gradient(135deg, #666 0%, #888 100%) !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .confirm-btn-submit.loading:hover,
    .confirm-btn-submit:disabled:hover {
      transform: none !important;
      box-shadow: none !important;
    }
    .confirm-btn-submit.loading .btn-icon {
      display: none;
    }
    .confirm-btn-submit .btn-spinner {
      display: none;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .confirm-btn-submit.loading .btn-spinner {
      display: inline-block;
    }
    /* 避免通用 .loading 的 ::before 重複顯示 spinner */
    .confirm-btn-submit.loading::before {
      display: none !important;
    }

    /* ========== Step3：Token 頁面（森林綠風格） ========== */
    .token-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 16px;
    }
    .token-overlay.show {
      display: flex;
    }
    .token-modal {
      background: linear-gradient(180deg, rgba(28, 25, 23, 0.95) 0%, rgba(12, 10, 9, 0.98) 100%);
      border: 1px solid rgba(68, 64, 60, 0.4);
      border-radius: 20px;
      overflow: hidden;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      animation: modalSlideIn 0.3s ease;
    }
    .step3-check {
      width: 64px;
      height: 64px;
      background: rgba(85, 130, 100, 0.15);
      border: 2px solid #558264;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }
    .step3-check .material-icons {
      font-size: 32px;
      color: #558264;
    }
    .step3-title {
      font-size: 20px;
      font-weight: 700;
      color: #558264;
      margin-bottom: 6px;
    }
    .step3-subtitle {
      font-size: 13px;
      color: #78716c;
      margin-bottom: 20px;
    }
    .step3-token-display {
      background: #1c1917;
      border: 1px solid #292524;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }
    .step3-token-label {
      font-size: 11px;
      color: #78716c;
      margin-bottom: 8px;
    }
    .step3-token-value {
      font-size: 28px;
      font-weight: 700;
      font-family: 'SF Mono', 'Monaco', monospace;
      color: #f5c563;
      letter-spacing: 4px;
    }
    .step3-btn-row {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
    }
    .step3-btn-copy,
    .step3-btn-line {
      flex: 1;
      padding: 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s;
    }
    .step3-btn-copy {
      background: #292524;
      border: 1px solid #44403c;
      color: #a8a29e;
    }
    .step3-btn-line {
      background: #06c755;
      border: none;
      color: #fff;
    }
    .step3-btn-complete {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #558264, #3d6b4a);
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 16px;
      transition: all 0.2s;
    }
    .step3-btn-complete:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(85, 130, 100, 0.4);
    }
    .step3-btn-complete:disabled {
      cursor: not-allowed;
      transform: none;
    }
    .step3-btn-complete.success-state {
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }
    .step3-btn-complete.success-state:hover {
      transform: none;
    }
    .step3-restart-link {
      font-size: 13px;
      color: #78716c;
    }
    .step3-restart-link a {
      color: #E8B4B8;
      text-decoration: none;
    }
    @keyframes modalSlideIn {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    /* ========== V4 墨黑金風格 - 步驟3 新版樣式 ========== */

    /* 標題下方分隔線 */
    /* v7.6.2: 修復 CSS 衝突導致分隔線靠左的問題 */
    .step3-title-divider {
      width: 100%;  /* 覆蓋掉上面的 40px */
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, #44403c 50%, transparent 100%);
      margin: 0 0 20px;
      border-radius: 0;  /* 覆蓋掉上面的 2px */
    }

    /* Token 卡片容器 */
    .step3-token-card {
      background: #1c1917;
      border: 1px solid #44403c;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    /* 酒紅浮雕頂條（點擊複製區域）- V2 浮雕立體 */
    .step3-token-header {
      background: linear-gradient(180deg,
        #5C2030 0%,
        #4A1828 40%,
        #3A1220 100%
      );
      box-shadow:
        inset 0 1px 0 rgba(255,200,200,0.15),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 4px 12px rgba(58,18,32,0.5);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .step3-token-header:active {
      transform: scale(0.98);
      opacity: 0.95;
    }
    .step3-token-header .material-icons-outlined {
      font-size: 18px;
      color: #E8C4A0;
    }
    .step3-token-header span {
      font-size: 13px;
      font-weight: 600;
      color: #F5E6D3;
      letter-spacing: 0.3px;
    }

    /* Token 顯示區 v7.7.0: 點擊顯示防護 */
    /* v7.8.6: 禁止長按/雙擊/選取複製（iOS + Android） */
    .step3-token-body {
      padding: 24px 16px;
      text-align: center;
      position: relative;
      cursor: pointer;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      user-select: none;
    }
    .step3-token-value-new {
      font-size: 32px;
      font-weight: 700;
      color: #D4AF37;
      letter-spacing: 5px;
      font-family: 'SF Mono', 'Monaco', monospace;
      filter: blur(8px);
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      user-select: none;
      transition: filter 0.3s ease;
    }
    .step3-token-value-new.revealed {
      filter: blur(0);
    }

    /* Token 遮罩層 v7.7.0 */
    .step3-token-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(28, 25, 23, 0.7);
      transition: opacity 0.25s ease;
    }
    .step3-token-mask.hidden {
      opacity: 0;
      pointer-events: none;
    }
    .step3-token-mask-box {
      border: 1px dashed #57534e;
      border-radius: 8px;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .step3-token-mask-box .material-icons {
      font-size: 16px;
      color: #78716c;
    }
    .step3-token-mask-box span {
      color: #78716c;
      font-size: 12px;
      font-weight: 500;
    }

    /* Token 下方分隔線 */
    .step3-divider {
      height: 1px;
      background: #44403c;
      margin: 0 0 16px;
    }

    /* 底部雙卡片容器 */
    .step3-dual-card-footer {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    /* 金色描邊按鈕（前往綁定） */
    .step3-action-card {
      flex: 1;
      padding: 16px 12px;
      background: rgba(212, 175, 55, 0.08);
      border: 1.5px solid #D4AF37;
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .step3-action-card:active {
      background: rgba(212, 175, 55, 0.15);
      transform: scale(0.98);
    }
    .step3-action-card .material-icons-outlined {
      font-size: 24px;
      color: #D4AF37;
      margin-bottom: 8px;
    }
    .step3-action-card span {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #D4AF37;
    }

    /* 灰色重新註冊卡片 */
    .step3-reset-card {
      flex: 1;
      padding: 16px 12px;
      background: rgba(41, 37, 36, 0.4);
      border: 1px solid #44403c;
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .step3-reset-card:active {
      background: rgba(41, 37, 36, 0.6);
    }
    .step3-reset-card .material-icons-outlined {
      font-size: 24px;
      color: #78716c;
      margin-bottom: 8px;
    }
    .step3-reset-card span {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #a8a29e;
    }

    /* 複製成功提示（Toast） */
    /* v7.2.9: 移除 display:none，改用 visibility+pointer-events 避免渲染時機問題 */
    .step3-toast {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      background: rgba(85, 130, 100, 0.95);
      color: white;
      padding: 14px 28px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      display: flex;              /* v7.2.9: 始終 flex，不用 none */
      align-items: center;
      gap: 10px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;       /* v7.2.9: 隱藏時不可點擊 */
      z-index: 100001;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }
    /* v7.4.0: 強制 !important 確保優先級 */
    .step3-toast.show {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: translate(-50%, -50%) scale(1) !important;
    }
    .step3-toast .material-icons {
      font-size: 20px;
    }
    /* v7.2.7: 動畫只處理 transform，不再處理 opacity */
    @keyframes step3ToastPop {
      from { transform: translate(-50%, -50%) scale(0.8); }
      to { transform: translate(-50%, -50%) scale(1); }
    }

    /* 確認對話框遮罩 */
    /* v7.2.9: 移除 display:none，改用 visibility+pointer-events 避免渲染時機問題 */
    .step3-dialog-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      display: flex;              /* v7.2.9: 始終 flex，不用 none */
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;       /* v7.2.9: 隱藏時不可點擊 */
      z-index: 100002;
      padding: 16px;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    /* v7.4.0: 強制 !important 確保優先級 */
    .step3-dialog-overlay.show {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    /* 確認對話框 Modal */
    .step3-dialog-modal {
      background: linear-gradient(180deg, rgba(28, 25, 23, 0.98) 0%, rgba(12, 10, 9, 0.98) 100%);
      border: 1px solid #44403c;
      border-radius: 20px;
      padding: 28px 24px;
      max-width: 320px;
      width: 100%;
      text-align: center;
      animation: step3ModalPop 0.25s ease;
    }
    @keyframes step3ModalPop {
      from { transform: scale(0.95); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    /* 對話框圖標 */
    .step3-dialog-icon {
      width: 52px;
      height: 52px;
      background: rgba(212, 175, 55, 0.1);
      border: 1.5px solid rgba(212, 175, 55, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }
    .step3-dialog-icon .material-icons {
      font-size: 26px;
      color: #D4AF37;
    }

    /* 對話框標題 */
    .step3-dialog-title {
      font-size: 17px;
      font-weight: 700;
      color: #FAFAF9;
      margin-bottom: 16px;
    }

    /* v5.5.36: 對話框訊息區（中性色調） */
    .step3-dialog-message {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 22px;
    }
    /* v5.5.40: 統一文字樣式 + 酒紅色提醒 */
    .step3-dialog-message p {
      font-size: 13px;
      font-weight: 500;
      color: #c0392b;
      line-height: 1.7;
      margin: 0;
    }
    .step3-dialog-message p.hint {
      font-size: 13px;
      font-weight: 500;
      color: #c0392b;
      margin-top: 6px;
    }

    /* 對話框按鈕容器 */
    .step3-dialog-buttons {
      display: flex;
      gap: 10px;
    }

    /* 對話框按鈕基礎樣式 */
    .step3-dialog-btn {
      flex: 1;
      padding: 14px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s;
    }
    .step3-dialog-btn:active {
      transform: scale(0.98);
    }

    /* 取消按鈕 */
    .step3-dialog-btn.cancel {
      background: #292524;
      border: 1px solid #44403c;
      color: #a8a29e;
    }

    /* v5.5.36: 確認按鈕（綠色） */
    .step3-dialog-btn.confirm {
      background: rgba(34, 197, 94, 0.15);
      border: 1.5px solid #22c55e;
      color: #22c55e;
    }

    /* ========== 步驟3 新版樣式結束 ========== */

    /* ========== 方案 E：按鈕上方浮出提示 ========== */
    /* v5.5.2: 改為絕對定位，避免影響 footer 高度導致按鈕往上跳 */
    .float-tip-error {
      background: linear-gradient(135deg, #7f1d1d, #991b1b);
      border-radius: 10px;
      padding: 12px 16px;
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 8px);
      animation: tipFloat 0.3s ease;
      z-index: 10;
    }
    .float-tip-error.show { display: block; }
    @keyframes tipFloat {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .float-tip-error::before {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #991b1b;
    }
    .float-tip-error-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #fff;
      font-size: 13px;
    }
    .float-tip-error-content .material-icons {
      font-size: 18px;
    }

    .fusion-form-field input::placeholder {
      color: #555;
      text-align: center;
    }
    .fusion-form-field input:focus {
      outline: none;
      border-color: #d4a840;
      box-shadow: 0 0 0 3px rgba(212, 168, 64, 0.12);
    }
    .fusion-form-field input.error {
      border-color: #ef4444;
    }
    /* v6.3.0: Gmail 欄位樣式（Google OAuth） */
    .gmail-field-wrapper {
      position: relative;
    }
    /* v6.4.4: Google 登入按鈕 - 科技深邃風（版本 F） */
    .google-signin-wrapper {
      width: 100%;
    }
    .google-signin-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 15px 20px;
      background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%);
      border: 1px solid #333;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: #e0e0e0;
      transition: all 0.25s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }
    .google-signin-btn:hover {
      background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%);
      border-color: #4285F4;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(66, 133, 244, 0.3);
    }
    .google-signin-btn:active {
      transform: scale(0.99);
    }
    .google-signin-btn .g-logo {
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(135deg, #4285F4 25%, #34A853 50%, #FBBC05 75%, #EA4335 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .google-signin-btn .divider {
      width: 1px;
      height: 20px;
      background: #444;
    }
    .google-icon {
      display: none; /* 隱藏舊的 SVG icon */
    }
    /* v6.5.4: 標題行 - 標題置中 + 切換按鈕右側 */
    .gmail-label-row {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .gmail-label-row label {
      margin-bottom: 0;  /* 覆蓋原有 margin */
    }
    .google-switch-btn {
      position: absolute;
      right: 0;
      font-size: 12px;
      color: #9ca3af;
      background: transparent;
      border: 1px solid #3a3a3a;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .google-switch-btn:hover {
      border-color: #666;
      color: #fff;
    }
    .google-switch-btn:active {
      transform: scale(0.97);
    }
    /* v6.5.4: 已登入狀態卡片 */
    .google-loggedin-wrapper {
      padding: 14px 16px;
      background: linear-gradient(180deg, #1e1e1e 0%, #161616 100%);
      border-radius: 12px;
      border: 1px solid #2a2a2a;
    }
    /* v6.5.8: 簡單方案 - G + 帳號正常排列，不強求置中 */
    .google-email-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .google-icon-circle {
      width: 32px;
      height: 32px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .google-icon-circle svg {
      width: 18px;
      height: 18px;
    }
    .google-email {
      font-size: 14px;
      color: #e0e0e0;
      word-break: break-all;
      line-height: 1.4;
    }
    /* 隱藏舊元素 */
    .google-avatar-btn,
    .google-loggedin-info,
    .google-loggedin-label,
    .google-change-btn {
      display: none;
    }
    .gmail-field-wrapper.error .google-signin-btn {
      border: 2px solid #ef4444;
    }
    /* Google 登入按鈕 Loading 狀態 */
    .google-signin-btn .btn-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #444;
      border-top-color: #4285F4;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .google-signin-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    .gmail-hint {
      font-size: 11px;
      color: #666;
      text-align: center;
      margin-top: 6px;
    }
    .gmail-optional {
      color: #666;
      font-size: 10px;
      margin-left: 4px;
    }
    /* v6.8.7: Gmail 移除黃色突顯，與其他欄位一致 */
    .fusion-form-row {
      display: flex;
      gap: 10px;
    }
    .fusion-form-row .fusion-form-field {
      flex: 1;
    }
    /* v5.5.22: 模糊遮蔽（失焦模糊、聚焦清晰，避免 iOS 誤判為密碼欄位）*/
    .fusion-blur-input {
      text-align: center;
      letter-spacing: 10px;
      font-size: 18px;
      font-weight: 600;
      filter: blur(5px);
      transition: filter 0.2s ease;
    }
    .fusion-blur-input:focus {
      filter: none;
    }
    .fusion-blur-input::placeholder {
      filter: none;
      letter-spacing: 0;
      font-size: 13px;
      font-weight: 400;
    }

    /* 眼睛按鈕樣式 */
    .fusion-input-with-toggle {
      position: relative;
      display: flex;
      align-items: center;
    }
    .fusion-input-with-toggle input {
      flex: 1;
      padding-right: 45px;
      -webkit-text-security: disc; /* 讓 tel 類型也顯示成圓點 */
    }
    .fusion-toggle-btn {
      position: absolute;
      right: 8px;
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s;
    }
    .fusion-toggle-btn:hover {
      color: #f5c563;
    }
    .fusion-toggle-btn .material-icons-outlined {
      font-size: 22px;
    }
    .fusion-submit-btn {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, #f5c563, #d4a840);
      color: #1a1610;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 6px;
    }
    .fusion-submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(245, 197, 99, 0.4);
    }
    .fusion-submit-btn .material-icons {
      font-size: 18px;
    }

    /* 舊版 QR Modal 樣式（保留相容性） */
    .qr-modal {
      background: #1c1917;
      border: 1px solid #292524;
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      max-width: 280px;
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }
    .qr-modal-overlay.active .qr-modal {
      transform: scale(1);
    }
    .qr-modal-title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .qr-modal-qrcode {
      background: #1C1917;
      border-radius: 20px;
      padding: 10px 8px 14px;
      display: inline-block;
      margin-bottom: 16px;
      position: relative;
      box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    }
    .qr-modal-qrcode::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 4px;
      background: #333;
      border-radius: 2px;
    }
    .qr-modal-qrcode-inner {
      background: #fff;
      border-radius: 8px;
      padding: 8px;
      margin-top: 6px;
    }
    .qr-modal-hint {
      color: #a8a29e;
      font-size: 12px;
      margin-bottom: 16px;
    }
    .qr-modal-btn {
      background: linear-gradient(135deg, #8B454F 0%, #6B353F 100%);
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      margin-bottom: 8px;
    }
    .qr-modal-btn:hover {
      background: linear-gradient(135deg, #9B555F 0%, #7B454F 100%);
    }
    .qr-modal-close {
      color: #78716c;
      font-size: 12px;
      cursor: pointer;
      text-decoration: underline;
    }
    .qr-modal-close:hover {
      color: #a8a29e;
    }

    /* ========== 區塊標籤設計 ========== */
    .section-label {
      font-size: 10px;
      font-weight: 700;
      color: #A8A29E;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .section-label .material-icons-outlined {
      font-size: 16px;
      color: #D4AF37;
    }

    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(212, 175, 55, 0.3), rgba(68, 64, 60, 0.2), transparent);
    }

    /* ========== 輸入區塊 ========== */
    .input-section {
      margin-bottom: 26px;
    }

    /* 驗證行容器 - 輸入框 + 登入按鈕 */
    .auth-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .auth-row form {
      flex: 1;
    }

    /* 登入/登出按鈕 */
    .auth-btn {
      width: 56px;
      height: 56px;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .auth-btn.login-mode {
      background: linear-gradient(135deg, #14532D 0%, #166534 100%);
      border: 1.5px solid rgba(74, 222, 128, 0.4);
      color: #86EFAC;
    }

    .auth-btn.login-mode:hover {
      box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
    }

    .auth-btn.login-mode:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
    }

    .auth-btn.logout-mode {
      background: rgba(248, 113, 113, 0.15);
      border: 1.5px solid rgba(248, 113, 113, 0.3);
      color: #F87171;
    }

    .auth-btn.logout-mode:hover {
      background: rgba(248, 113, 113, 0.25);
    }

    .auth-btn .material-icons-outlined {
      font-size: 22px;
    }

    .auth-btn-text {
      font-size: 10px;
      font-weight: 600;
    }

    .input-group {
      position: relative;
    }

    .input-field {
      width: 100%;
      background: rgba(28, 25, 23, 0.8);
      border: 1px solid rgba(68, 64, 60, 0.5);
      border-radius: 14px;
      padding: 18px 50px 18px 20px;
      font-size: 26px;
      color: #FAFAF9;
      text-align: center;
      letter-spacing: 14px;
      outline: none;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .input-field:focus {
      border-color: #D4AF37;
      background: rgba(41, 37, 36, 0.6);
      box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
    }

    .input-field::placeholder {
      color: #57534E;
      letter-spacing: 1px;
      font-size: 13px;
    }

    .toggle-btn {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: #A8A29E;
      font-size: 22px;
      cursor: pointer;
      transition: color 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .toggle-btn:hover { color: #D4AF37; }

    /* 登出按鈕樣式 */
    .toggle-btn.logout-mode {
      background: rgba(248, 113, 113, 0.15);
      color: #F87171;
      border: 1px solid rgba(248, 113, 113, 0.3);
      border-radius: 10px;
      width: 44px;
      height: 44px;
    }

    .toggle-btn.logout-mode:hover {
      background: rgba(248, 113, 113, 0.25);
      color: #FCA5A5;
    }

    /* 已登入時的輸入框樣式 */
    .input-field.logged-in {
      background: rgba(68, 64, 60, 0.3);
      border-color: rgba(74, 222, 128, 0.4);
      color: #4ADE80;
      cursor: not-allowed;
    }

    .error-message {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      color: #EF4444;
      font-size: 12px;
      display: none;
      margin-top: 8px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .error-message.show { display: block; opacity: 1; }

    /* ========== 打卡區塊 ========== */
    .punch-section {
      margin-bottom: 24px;
    }

    .btn-row {
      display: flex;
      gap: 12px;
    }

    /* 上班按鈕 - C1 深墨綠 */
    .btn-clock-in,
    .btn-on {
      flex: 1;
      background: linear-gradient(135deg, #14532D 0%, #166534 100%);
      border: 1.5px solid rgba(74, 222, 128, 0.3);
      border-radius: 14px;
      padding: 20px;
      color: #86EFAC;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 20px rgba(22, 101, 52, 0.25);
    }

    .btn-clock-in:hover,
    .btn-on:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(22, 101, 52, 0.4);
      border-color: rgba(74, 222, 128, 0.5);
    }

    .btn-clock-in:disabled,
    .btn-on:disabled {
      background: linear-gradient(135deg, #44403C 0%, #292524 100%);
      border-color: #57534E;
      color: #78716C;
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* 下班按鈕 - C1 深酒紅 */
    .btn-clock-out,
    .btn-off {
      flex: 1;
      background: linear-gradient(135deg, #7F1D1D 0%, #991B1B 100%);
      border: 1.5px solid rgba(248, 113, 113, 0.3);
      border-radius: 14px;
      padding: 20px;
      color: #FCA5A5;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 20px rgba(127, 29, 29, 0.25);
    }

    .btn-clock-out:hover,
    .btn-off:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(127, 29, 29, 0.4);
      border-color: rgba(248, 113, 113, 0.5);
    }

    .btn-clock-out:disabled,
    .btn-off:disabled {
      background: linear-gradient(135deg, #44403C 0%, #292524 100%);
      border-color: #57534E;
      color: #78716C;
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-clock-in .material-icons-outlined,
    .btn-clock-out .material-icons-outlined,
    .btn-on .material-icons-outlined,
    .btn-off .material-icons-outlined {
      font-size: 20px;
    }

    /* 打卡按鈕大圖標 */
    .punch-icon-large {
      font-size: 28px !important;
    }

    /* ========== 功能區塊 ========== */
    .function-section {
      margin-bottom: 24px;
    }

    /* ========== 系統狀態區塊 ========== */
    .response-section {
      margin-bottom: 0;
    }

    .btn-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    /* 方案 A: 確保所有按鈕（包括日誌）等寬等高 */
    .btn-grid > * {
      width: 100%;
      min-width: 0;
    }

    .btn-grid .disabled-btn-wrapper {
      /* 移除 display: contents，因為它會導致 hover 失效 */
      display: flex;
      position: relative;
    }

    .btn-grid .disabled-btn-wrapper .btn {
      width: 100%;
      flex: 1;
    }

    /* 功能按鈕基礎 */
    .btn {
      border: none;
      border-radius: 14px;
      padding: 10px 8px;
      color: #E7E5E4;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      letter-spacing: 0.3px;
    }

    .btn .material-icons-outlined {
      font-size: 22px;
      transition: all 0.25s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:disabled {
      background: linear-gradient(135deg, #44403C 0%, #292524 100%) !important;
      color: #78716C !important;
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none !important;
    }

    /* 表單 - 深青色 */
    .btn-form:not(:disabled) {
      background: linear-gradient(135deg, #115E59 0%, #0F766E 100%);
      box-shadow: 0 4px 15px rgba(15, 118, 110, 0.2);
    }
    .btn-form:hover:not(:disabled) {
      box-shadow: 0 6px 25px rgba(15, 118, 110, 0.3);
    }

    /* 紀錄 - 深藍灰 */
    .btn-query:not(:disabled),
    .btn-record:not(:disabled) {
      background: linear-gradient(135deg, #1E3A5F 0%, #1E40AF 100%);
      box-shadow: 0 4px 15px rgba(30, 64, 175, 0.2);
    }
    .btn-query:hover:not(:disabled),
    .btn-record:hover:not(:disabled) {
      box-shadow: 0 6px 25px rgba(30, 64, 175, 0.3);
    }

    /* 班表 - 深玫瑰 */
    .btn-schedule:not(:disabled) {
      background: linear-gradient(135deg, #9F1239 0%, #BE123C 100%);
      box-shadow: 0 4px 15px rgba(159, 18, 57, 0.2);
    }
    .btn-schedule:hover:not(:disabled) {
      box-shadow: 0 6px 25px rgba(159, 18, 57, 0.3);
    }

    /* 公告 - 琥珀深色 */
    .btn-notice:not(:disabled) {
      background: linear-gradient(135deg, #92400E 0%, #B45309 100%);
      box-shadow: 0 4px 15px rgba(146, 64, 14, 0.2);
    }
    .btn-notice:hover:not(:disabled) {
      box-shadow: 0 6px 25px rgba(146, 64, 14, 0.3);
    }

    /* 審核 - 深灰綠 */
    .btn-manager:not(:disabled),
    .btn-approve:not(:disabled) {
      background: linear-gradient(135deg, #14532D 0%, #166534 100%);
      box-shadow: 0 4px 15px rgba(22, 101, 52, 0.2);
    }
    .btn-manager:hover:not(:disabled),
    .btn-approve:hover:not(:disabled) {
      box-shadow: 0 6px 25px rgba(22, 101, 52, 0.3);
    }

    /* 日誌 - 深鋼藍 */
    .btn-personal:not(:disabled),
    .btn-log:not(:disabled) {
      background: linear-gradient(135deg, #0C4A6E 0%, #075985 100%);
      box-shadow: 0 4px 15px rgba(12, 74, 110, 0.2);
    }
    .btn-personal:hover:not(:disabled),
    .btn-log:hover:not(:disabled) {
      box-shadow: 0 6px 25px rgba(12, 74, 110, 0.3);
    }

    /* 禁用按鈕樣式 */
    .btn.disabled-button {
      opacity: 0.4;
      cursor: not-allowed;
      background: linear-gradient(135deg, #44403C 0%, #292524 100%) !important;
      pointer-events: auto;
      position: relative;
      filter: grayscale(100%); /* 完全黑白 */
    }

    /* 日誌按鈕禁用提示 - 完全阻止點擊 */
    .btn.disabled-button {
      pointer-events: none !important;
    }

    /* 日誌按鈕外層包裝 - 用於顯示提示 */
    .disabled-btn-wrapper {
      position: relative;
      display: inline-flex;
      pointer-events: auto;
      cursor: not-allowed; /* 禁止游標要設在 wrapper 上，因為按鈕是 pointer-events: none */
    }

    .disabled-btn-wrapper .btn.disabled-button {
      pointer-events: none !important;
    }

    /* 提示氣泡 - 版本 A 樣式 */
    .disabled-tooltip {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) scale(0.9);
      background: rgba(0, 0, 0, 0.9);
      color: #fff;
      font-size: 12px;
      padding: 8px 12px;
      border-radius: 6px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .disabled-tooltip::after {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-bottom-color: rgba(0, 0, 0, 0.9);
    }

    .disabled-tooltip .material-icons {
      font-size: 14px;
      color: #f39c12;
    }

    .disabled-tooltip.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) scale(1);
    }

    /* 禁用按鈕樣式 */
    .btn.disabled-button {
      cursor: not-allowed;
    }

    .btn.disabled-button:hover {
      transform: none !important;
      box-shadow: none !important;
    }

    /* hover 規則已移除，由 JavaScript 控制顯示/隱藏 */

    /* ========== Footer ========== */
    /* 冷卻動畫 - 電池充電效果（從左往右充電）*/
    /* 使用高優先級選擇器覆蓋 :disabled 樣式 */
    .btn-cooldown,
    .btn-cooldown:disabled,
    button.btn-cooldown,
    button.btn-cooldown:disabled {
      --progress: 0%;
      --color-from: #D4AF37;
      --color-to: #CA8A04;
      background: linear-gradient(
        to right,
        var(--color-from) 0%,
        var(--color-to) var(--progress),
        #44403C var(--progress),
        #292524 100%
      ) !important;
      transition: none !important;
      opacity: 1 !important;
    }

    .network-status {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 500;
      padding: 4px 8px;
      border-radius: 12px;
      transition: all 0.3s ease;
    }

    .network-status .material-icons-outlined,
    .network-status .material-icons {
      font-size: 14px;
    }

    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.9); }
    }

    /* 網路狀態顏色 */
    .network-good {
      color: #4ADE80;
      background: rgba(74, 222, 128, 0.1);
      border: 1px solid rgba(74, 222, 128, 0.2);
    }
    .network-good .status-dot {
      background: #4ADE80;
      box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
    }

    .network-medium {
      color: #FBBF24;
      background: rgba(251, 191, 36, 0.1);
      border: 1px solid rgba(251, 191, 36, 0.2);
    }
    .network-medium .status-dot {
      background: #FBBF24;
      box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
    }

    .network-poor {
      color: #FB923C;
      background: rgba(251, 146, 60, 0.1);
      border: 1px solid rgba(251, 146, 60, 0.2);
    }
    .network-poor .status-dot {
      background: #FB923C;
      box-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
    }

    .network-offline {
      color: #F87171;
      background: rgba(248, 113, 113, 0.1);
      border: 1px solid rgba(248, 113, 113, 0.2);
    }
    .network-offline .status-dot {
      background: #F87171;
      box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
    }

    /* ========== 底部分隔線 ========== */
    .footer-separator {
      border-top: 1px solid rgba(68, 64, 60, 0.3);
      margin-top: 12px;
      padding-top: 0;
    }

    /* ========== 回應區域 ========== */
    #response {
      margin-top: 12px;
      font-size: 14px;
      background: rgba(28, 25, 23, 0.6);
      border: 1px solid rgba(68, 64, 60, 0.3);
      border-radius: 12px;
      padding: 12px;
      min-height: 40px;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      text-align: center;
      color: #4ADE80;
      overflow-x: auto;
    }

    #response.show {
      opacity: 1;
      transform: translateY(0);
    }

    #response table {
      width: 100%;
      min-width: 400px;
      border-collapse: collapse;
      text-align: center;
      border: 1px solid rgba(68, 64, 60, 0.5);
      font-size: 12px;
    }

    #response th, #response td {
      padding: 8px;
      border: 1px solid rgba(68, 64, 60, 0.5);
      white-space: nowrap;
    }

    .loading {
      font-size: 14px;
      color: #D4AF37;
      animation: blink 1s infinite;
    }

    .loading::before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #44403C;
      border-radius: 50%;
      border-top-color: #D4AF37;
      animation: spin 0.8s infinite linear;
      vertical-align: middle;
      margin-right: 8px;
    }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

    /* 審核按鈕動畫 */
    @keyframes approvalSpinner {
      to { transform: rotate(360deg); }
    }
    @keyframes checkBounce {
      0% { transform: scale(0); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    /* 排隊中進度滑動動畫 */
    @keyframes progressSlide {
      0% { left: -50%; }
      100% { left: 100%; }
    }

    /* ========== Overlay & Modal ========== */
    .overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.75);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .overlay.show { display: flex; }

    .modal {
      background: linear-gradient(180deg, rgba(28, 25, 23, 0.98) 0%, rgba(12, 10, 9, 0.99) 100%);
      border: 1px solid rgba(68, 64, 60, 0.4);
      padding: 24px;
      border-radius: 20px;
      width: 90%;
      max-width: 400px;
      color: #FAFAF9;
      text-align: center;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    }

    .modal h3 {
      font-size: 20px;
      margin-bottom: 12px;
      letter-spacing: 0.5px;
      color: #D4AF37;
    }

    .modal p {
      font-size: 16px;
      margin-bottom: 20px;
      color: #A8A29E;
    }

    .modal-buttons {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    .modal .btn-confirm,
    .modal .btn-cancel {
      flex: 1;
      padding: 14px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: none;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-confirm {
      background: linear-gradient(135deg, #D4AF37 0%, #CA8A04 100%);
      color: #1C1917;
    }

    .btn-confirm:hover {
      box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
    }

    .btn-cancel {
      background: rgba(68, 64, 60, 0.5);
      color: #E7E5E4;
      border: 1px solid rgba(68, 64, 60, 0.5);
    }

    .btn-cancel:hover {
      background: rgba(68, 64, 60, 0.8);
    }


    /* v6.0: 已移除影片教學 Modal CSS */

    /* ========== 表單選擇 Modal（全螢幕覆蓋） ========== */
    .form-modal {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      width: 100% !important;
      max-width: none !important;
      color: #FAFAF9;
      text-align: left;
      overflow: hidden;
      box-shadow: none;
      animation: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    @keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

    .form-modal-header {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(68, 64, 60, 0.3);
    }

    .form-modal-header h3 {
      font-size: 18px;
      margin: 0;
      letter-spacing: 0.5px;
      font-weight: 600;
      text-align: center;
      width: 100%;
      color: #D4AF37;
    }

    .form-modal-content {
      padding: 8px 0;
    }

    .form-item-container {
      display: flex;
      flex-direction: column;
    }

    .form-item {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      cursor: pointer;
      transition: background-color 0.2s;
      position: relative;
    }

    .form-item:after {
      content: '';
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 0;
      height: 1px;
      background: rgba(68, 64, 60, 0.3);
    }

    .form-item:last-child:after {
      display: none;
    }

    .form-item:hover {
      background-color: rgba(212, 175, 55, 0.05);
    }

    .form-item:active {
      background-color: rgba(212, 175, 55, 0.1);
    }

    .form-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      background: linear-gradient(135deg, rgba(68, 64, 60, 0.3), rgba(68, 64, 60, 0.1));
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      flex-shrink: 0;
    }

    .form-icon .material-icons {
      font-size: 24px;
    }

    #overtimeForm .form-icon { color: #FBBF24; }
    #cardCorrectionForm .form-icon { color: #60A5FA; }
    #leaveRequestForm .form-icon { color: #4ADE80; }
    #shiftChangeForm .form-icon { color: #C084FC; }

    /* 查詢介面的圖示顏色 */
    #cardCorrectionFormQuery .form-icon { color: #60A5FA; }
    #overtimeFormQuery .form-icon { color: #FBBF24; }
    #leaveRequestFormQuery .form-icon { color: #4ADE80; }
    #shiftChangeFormQuery .form-icon { color: #C084FC; }
    #btnAttendanceQuery .form-icon { color: #4ADE80; }
    #btnFormQuery .form-icon { color: #60A5FA; }

    .form-info {
      flex: 1;
    }

    .form-info h4 {
      font-size: 16px;
      margin: 0 0 4px 0;
      font-weight: 600;
      color: #FAFAF9;
    }

    .form-info p {
      font-size: 13px;
      margin: 0;
      color: #78716C;
    }

    .form-arrow {
      color: #78716C;
    }

    /* 維修中狀態樣式 */
    .form-item.maintenance {
      background-color: rgba(68, 64, 60, 0.2);
      cursor: not-allowed;
      opacity: 0.5;
      position: relative;
    }

    .form-item.maintenance .form-icon {
      color: #78716C !important;
      background: linear-gradient(135deg, rgba(68, 64, 60, 0.2), rgba(68, 64, 60, 0.1));
    }

    .form-item.maintenance .form-info h4 { color: #78716C; }
    .form-item.maintenance .form-info p { color: #57534E; }
    .form-item.maintenance .form-arrow { color: #57534E; }

    .form-item.maintenance:hover {
      background-color: rgba(68, 64, 60, 0.2);
    }

    .form-item.maintenance:after {
      display: none !important;
    }

    .form-item.maintenance::before {
      content: '維修中';
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      background: rgba(68, 64, 60, 0.8);
      color: #A8A29E;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      z-index: 10;
    }

    /* ========== 表單內容區域 ========== */
    .form-content {
      padding: 20px;
      /* 移除 max-height 和 overflow-y - 由 contentWrapper 統一控制滾動 */
      overflow-x: hidden !important;
      max-width: 100% !important;
    }

    .form-buttons-container {
      display: flex;
      padding: 12px 16px;
      gap: 8px;
      width: 100%;
      box-sizing: border-box;
      justify-content: space-between;
      background-color: transparent;
      border-radius: 8px;
      margin-top: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      align-items: center;
      min-height: 44px;
    }

    .form-buttons-container .btn {
      flex: 1;
      padding: 8px 8px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 32px;
    }

    .form-buttons-container .btn-confirm {
      background: linear-gradient(135deg, #D4AF37 0%, #CA8A04 100%);
      color: #1C1917;
    }

    .form-buttons-container .btn-cancel {
      background: rgba(68, 64, 60, 0.5);
      color: #E7E5E4;
    }

    .btn-confirm:disabled {
      opacity: 0.6;
      background: rgba(68, 64, 60, 0.5);
      color: #A8A29E;
    }

    .btn-upload {
      background-color: transparent !important;
      color: #D4AF37 !important;
      border: 1.5px solid #D4AF37 !important;
    }

    .btn-upload:hover {
      background-color: rgba(212, 175, 55, 0.1) !important;
      transform: translateY(-1px);
    }

    /* ========== 日期時間選擇器樣式 ========== */
    .ui-datepicker {
      background: #1C1917 !important;
      color: #FAFAF9 !important;
      border: 1px solid rgba(68, 64, 60, 0.5) !important;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
      padding: 10px !important;
      border-radius: 12px !important;
    }

    .ui-datepicker .ui-datepicker-header {
      background: rgba(68, 64, 60, 0.3) !important;
      color: #FAFAF9 !important;
      border: none !important;
      border-radius: 8px !important;
    }

    .ui-datepicker .ui-datepicker-title { color: #D4AF37 !important; }

    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
      background: transparent !important;
      border: none !important;
      color: #D4AF37 !important;
    }

    .ui-datepicker th { color: #A8A29E !important; }

    .ui-datepicker td a {
      background: rgba(68, 64, 60, 0.3) !important;
      color: #FAFAF9 !important;
      border: none !important;
      text-align: center !important;
      border-radius: 6px !important;
    }

    .ui-datepicker td a.ui-state-active {
      background: linear-gradient(135deg, #D4AF37 0%, #CA8A04 100%) !important;
      color: #1C1917 !important;
    }

    .ui-datepicker td a.ui-state-highlight {
      background: rgba(212, 175, 55, 0.2) !important;
      color: #D4AF37 !important;
    }

    .ui-timepicker-div {
      background: #1C1917 !important;
      color: #FAFAF9 !important;
      padding: 15px !important;
      border: none !important;
      border-top: 1px solid rgba(68, 64, 60, 0.3) !important;
    }

    .ui-timepicker-div dl {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      margin: 0;
      padding: 0;
    }

    .ui-slider { display: none; }

    .ui-timepicker-div dd {
      margin: 0;
      padding: 0;
      width: 48%;
      text-align: center;
    }

    .ui-timepicker-div dd.ui_tpicker_hour:before {
      content: '小時';
      display: block;
      margin-bottom: 5px;
      color: #A8A29E;
      font-size: 14px;
      text-align: center;
    }

    .ui-timepicker-div dd.ui_tpicker_minute:before {
      content: '分鐘';
      display: block;
      margin-bottom: 5px;
      color: #A8A29E;
      font-size: 14px;
      text-align: center;
    }

    .ui-timepicker-div select {
      width: 95%;
      margin: 0 auto;
      text-align: center;
      text-align-last: center;
      background: rgba(68, 64, 60, 0.3);
      color: #FAFAF9;
      border: 1px solid rgba(68, 64, 60, 0.5);
      border-radius: 6px;
      padding: 8px;
    }

    #ui-datepicker-div {
      z-index: 10000 !important;
      width: 320px !important;
      min-width: 280px !important;
      max-width: 360px !important;
    }

    /* ========== 表單輸入元素 ========== */
    .form-input,
    input.datepicker,
    input.timepicker,
    input[type="date"],
    input[type="time"],
    select,
    textarea {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      font-size: 16px;
      padding: 12px;
      background-color: rgba(68, 64, 60, 0.3);
      color: #FAFAF9;
      border: 1px solid rgba(68, 64, 60, 0.5);
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
    }

    .form-input:focus,
    input.datepicker:focus,
    input.timepicker:focus,
    select:focus,
    textarea:focus {
      border-color: #D4AF37;
      outline: none;
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    .date-input-container,
    .time-input-container {
      display: flex;
      align-items: center;
      width: 100%;
      position: relative;
    }

    .weekday-display {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 60px;
      height: 42px;
      background-color: rgba(68, 64, 60, 0.3);
      color: #D4AF37;
      border-radius: 8px;
      margin-left: 10px;
      font-weight: 600;
      font-size: 14px;
    }

    .radio-option {
      transition: background-color 0.2s, transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 42px;
      box-sizing: border-box;
      background: rgba(68, 64, 60, 0.3);
      border: 1px solid rgba(68, 64, 60, 0.5);
      border-radius: 8px;
      color: #FAFAF9;
      cursor: pointer;
    }

    .radio-option:hover {
      background: rgba(212, 175, 55, 0.1);
      border-color: rgba(212, 175, 55, 0.3);
    }

    .radio-option.selected {
      background: rgba(212, 175, 55, 0.2);
      border-color: #D4AF37;
    }

    /* ========== 錯誤訊息 ========== */
    .form-error-container {
      color: #F87171;
      font-size: 14px;
      margin-top: 15px;
      padding: 10px;
      border-radius: 8px;
      background-color: rgba(248, 113, 113, 0.1);
      border: 1px solid rgba(248, 113, 113, 0.2);
      display: none;
      text-align: center !important;
    }

    .input-error, .textarea-error {
      color: #F87171;
      font-size: 12px;
      margin-top: 5px;
      display: none;
    }

    .form-group .error-inline {
      display: none;
      color: #F87171;
      font-size: 12px;
      margin-top: 5px;
      align-items: center;
      gap: 5px;
    }

    .form-group.has-error .error-inline {
      display: flex;
      animation: slideDown 0.3s ease-out;
    }

    .form-group.has-error input,
    .form-group.has-error select,
    .form-group.has-error textarea {
      border-color: #F87171 !important;
      background-color: rgba(248, 113, 113, 0.05);
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ========== 必填標記 ========== */
    .required-mark {
      color: #F87171;
      font-size: 14px;
      margin-left: 4px;
    }

    /* ========== 檔案上傳提示 ========== */
    .file-upload-note {
      margin-top: 15px;
      padding: 10px;
      background-color: rgba(212, 175, 55, 0.1);
      border-radius: 8px;
      border-left: 3px solid #D4AF37;
      color: #D4AF37;
      font-size: 12px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .file-upload-note .material-icons {
      margin-right: 8px;
      font-size: 18px;
    }

    .file-requirement-hint {
      background: rgba(251, 191, 36, 0.1) !important;
      border: 1px solid #FBBF24 !important;
      border-radius: 8px !important;
      padding: 12px 16px !important;
      margin-bottom: 15px !important;
      text-align: center !important;
      color: #FBBF24 !important;
      font-weight: 500 !important;
      font-size: 14px !important;
    }

    /* ========== 返回按鈕 ========== */
    .back-button-shadow {
      position: absolute;
      left: 15px;
      background-color: rgba(68, 64, 60, 0.5);
      border: none;
      color: #E7E5E4;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      transition: all 0.2s;
    }

    .back-button-shadow .material-icons {
      font-size: 18px;
      margin-right: 4px;
    }

    .back-button-shadow .back-text {
      font-size: 13px;
      font-weight: 500;
    }

    .back-button-shadow:hover {
      background-color: rgba(68, 64, 60, 0.8);
      transform: translateY(-1px);
    }

    /* ========== 查詢記錄表格 ========== */
    .record-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      font-size: 14px;
      color: #FAFAF9;
    }

    .record-table th, .record-table td {
      border: 1px solid rgba(68, 64, 60, 0.5);
      padding: 10px 8px;
      text-align: center;
      word-wrap: break-word;
    }

    .record-table th {
      background-color: rgba(68, 64, 60, 0.3);
      font-weight: 600;
      color: #D4AF37;
    }

    .record-table tbody tr:nth-child(odd) {
      background-color: rgba(28, 25, 23, 0.5);
    }

    .record-table .time-in {
      color: #4ADE80;
      font-weight: 600;
    }

    .record-table .time-out {
      color: #F87171;
      font-weight: 600;
    }

    .info-message {
      text-align: center;
      color: #78716C;
      margin-top: 20px;
      font-size: 14px;
    }

    /* ========== 響應式設計 ========== */
    @media (max-width: 480px) {
      body {
        padding: 12px;
      }

      .container {
        padding: 24px 18px;
      }

      .header {
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 18px;
      }

      .logo {
        width: 48px;
        height: 48px;
      }

      .logo .material-icons-outlined {
        font-size: 24px;
      }

      .header-text h1 {
        font-size: 17px;
      }

      .input-field {
        font-size: 22px;
        padding: 16px 45px 16px 16px;
        letter-spacing: 12px;
      }

      .btn-row {
        gap: 10px;
      }

      .btn-clock-in,
      .btn-clock-out,
      .btn-on,
      .btn-off {
        padding: 16px;
        font-size: 13px;
      }

      .btn-grid {
        gap: 8px;
      }

      .btn {
        padding: 8px 6px;
        font-size: 13px;
      }

      .btn .material-icons-outlined {
        font-size: 20px;
      }

      .form-modal {
        width: 100%;
        border-radius: 0;
      }

      .form-content {
        padding: 15px;
      }

    }

    @media (max-width: 375px) {
      .container {
        padding: 20px 16px;
      }

      .input-field {
        font-size: 20px;
        letter-spacing: 10px;
      }

      .btn {
        padding: 7px 4px;
        font-size: 11px;
      }

      .status-link,
      .network-status {
        font-size: 10px;
      }
    }

    /* ========== 員工自助註冊 v4.0 樣式 ========== */

    /* 首次使用連結 */
    .register-link-row {
      text-align: center;
      margin-top: 12px;
    }
    .register-link {
      color: #d4af37;
      font-size: 13px;
      text-decoration: none;
      transition: color 0.2s;
    }
    .register-link:hover {
      color: #f0c850;
      text-decoration: underline;
    }

    /* Toast */
    .register-toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #292524;
      color: #fff;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 10000;
      opacity: 0;
      transition: all 0.3s ease;
    }
    .register-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    .register-toast--error {
      background: #7f1d1d;
      border: 1px solid #ef4444;
    }
    .register-toast--success {
      background: #14532d;
      border: 1px solid #22c55e;
    }

    /* v5.5.8: 版本檢查 - 全螢幕提示（方案 A 極簡線條）*/
    /* v7.5.12: z-index 提高到 1000001，確保在 pwa-gate (100000) 之上 */
    .version-overlay {
      position: fixed;
      inset: 0;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000001;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    .version-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }
    .version-card {
      text-align: center;
      padding: 40px 30px;
      width: 100%;
      max-width: 340px;
    }
    .version-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 32px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid;
    }
    .version-icon.checking { border-color: #4a4a3a; background: rgba(212, 175, 55, 0.05); }
    .version-icon.latest { border-color: #2a4a2a; background: rgba(34, 197, 94, 0.05); }
    .version-icon.update { border-color: #2a3a5a; background: rgba(59, 130, 246, 0.05); }
    .version-icon.error { border-color: #4a2a2a; background: rgba(239, 68, 68, 0.05); }
    .version-icon.offline { border-color: #3a3a3a; background: rgba(100, 100, 100, 0.05); }
    .version-icon .material-icons-outlined { font-size: 32px; }
    .version-icon.checking .material-icons-outlined { color: #D4AF37; animation: version-spin 1.5s linear infinite; }
    .version-icon.latest .material-icons-outlined { color: #22c55e; }
    .version-icon.update .material-icons-outlined { color: #3b82f6; }
    .version-icon.error .material-icons-outlined { color: #ef4444; }
    .version-icon.offline .material-icons-outlined { color: #666; }
    @keyframes version-spin { to { transform: rotate(360deg); } }
    .version-title {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 28px;
      color: #e0e0e0;
    }
    .version-title .loading-dots::after {
      content: '';
      animation: version-dots 1.5s infinite;
    }
    @keyframes version-dots {
      0%, 20% { content: ''; }
      40% { content: '.'; }
      60% { content: '..'; }
      80%, 100% { content: '...'; }
    }
    .version-btn-group {
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    .version-btn {
      padding: 14px 32px;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 120px;
    }
    .version-btn:active { transform: scale(0.97); }
    .version-btn.primary { color: #000; }
    .version-btn.primary.gold { background: linear-gradient(135deg, #D4AF37, #C9A227); }
    .version-btn.primary.green { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
    .version-btn.primary.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
    .version-btn.primary.gray { background: #333; color: #999; }
    .version-btn.secondary {
      background: transparent;
      border: 1px solid #333;
      color: #888;
    }