* { box-sizing: border-box; }

    html, body {
      margin: 0; padding: 0;
      font-family: Arial, "Microsoft JhengHei", sans-serif;
      background: #f4f7fb; color: #222;
      -webkit-text-size-adjust: 100%;
      overscroll-behavior-y: auto;
    }

    body { padding-bottom: 40px; }

    .container { max-width: 1280px; margin: 0 auto; padding: 12px; }

    .title { font-size: 28px; font-weight: bold; margin-bottom: 6px; line-height: 1.25; }
    .subtitle { color: #666; margin-bottom: 16px; line-height: 1.5; font-size: 14px; }

    .card {
      background: #fff; border-radius: 16px; padding: 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 14px;
    }

    .grid { display: grid; gap: 14px; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-main { grid-template-columns: 360px 1fr; align-items: start; }

    .stat-num { font-size: 28px; font-weight: bold; color: #1f3c88; margin-top: 6px; }

    h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; }
    label { display: block; margin-bottom: 6px; font-weight: bold; font-size: 14px; }

    input, select, textarea, button {
      width: 100%; padding: 14px 14px; border-radius: 12px;
      border: 1px solid #cfcfcf; font-size: 16px; background: #fff;
    }
    input, select, textarea { appearance: none; -webkit-appearance: none; }
    textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
    button { border: none; cursor: pointer; font-weight: bold; }

    .btn { border: none; cursor: pointer; font-weight: bold; }
    .btn-primary { background:#2e7d32; color:#fff; }
    .btn-blue { background:#1565c0; color:#fff; }
    .btn-orange { background:#ef6c00; color:#fff; }
    .btn-gray { background:#607d8b; color:#fff; }
    .btn-red { background:#c62828; color:#fff; }

    .badge {
      display: inline-block; padding: 5px 10px; border-radius: 999px;
      font-size: 12px; font-weight: bold; background: #eef1f5; margin-right: 2px; margin-top: 4px;
    }

    .pill {
      display: inline-block; padding: 9px 12px; background: #e3f2fd;
      border-radius: 999px; font-size: 14px; font-weight: bold;
    }

    .availability-list { display: flex; flex-wrap: wrap; gap: 8px; }

    .toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
    .toolbar > div { min-width: 160px; flex: 1 1 180px; }

    .room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .floor-box { border: 1px solid #ddd; border-radius: 14px; padding: 12px; background: #fafafa; }
    .floor-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
    .room-item { border-radius: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; }
    .room-empty { background:#e8f4fd; border-color:#90caf9; }
    .room-booked { background:#fff8e1; border-color:#ffcc80; }
    .room-checkedin { background:#e8f5e9; border-color:#81c784; }

    .booking-item { border: 1px solid #ddd; border-radius: 14px; padding: 14px; margin-bottom: 12px; background: #fff; }
    .booking-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .booking-name { font-size: 18px; font-weight: bold; margin-bottom: 6px; line-height: 1.4; }
    .booking-meta { color: #555; margin: 4px 0; font-size: 14px; line-height: 1.5; word-break: break-word; }

    .actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 260px; align-items: flex-start; }
    .actions button { width: auto; min-width: 88px; padding: 11px 14px; }

    .guest-only, .admin-only { display: none; }

    .price-box {
      background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 14px;
      padding: 14px; margin-top: 12px; line-height: 1.7;
    }
    .price-main { font-size: 21px; font-weight: bold; color: #1565c0; }

    .mobile-stack > div { margin-bottom: 12px; }
    .section-note { font-size: 13px; color: #666; line-height: 1.5; }

    summary { list-style: none; }
    summary::-webkit-details-marker { display: none; }
    .summary-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 18px; font-weight: bold; }
    .summary-arrow { font-size: 14px; color: #666; }
    .soft-divider { height: 1px; background: #eee; margin: 14px 0; }

    /* =====================================
       新增金流選擇卡片樣式
       ===================================== */
    .gateway-selection {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 15px;
    }
    .gateway-card {
      border: 2px solid #ddd;
      border-radius: 12px;
      padding: 16px;
      background: #fff;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }
    .gateway-card:hover { border-color: #aaa; background: #fafafa; }
    .gateway-card.is-selected {
      border-color: #1f3c88;
      background-color: #eef2fb;
      box-shadow: 0 0 0 2px rgba(31, 60, 136, 0.2);
    }
    .gw-title { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 6px; }
    .gw-desc { font-size: 13px; color: #777; }

    /* 前台房型卡片 (延續原本) */
    .guest-room-selection { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 15px 0; }
    .booking-card { border: 1px solid #ddd; border-radius: 14px; padding: 16px; background: #fff; transition: all 0.25s ease; cursor: pointer; display: flex; flex-direction: column; min-height: 110px; position: relative; }
    .booking-card.is-available:hover { border-color: #2e7d32; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .booking-card.is-selected { border: 2px solid #2e7d32 !important; background-color: #e8f5e9 !important; }
    .booking-card.is-unavailable { background-color: #f5f5f5; border-color: #eee; cursor: not-allowed; filter: grayscale(1); opacity: 0.6; }
    .booking-card .card-id { font-size: 20px; font-weight: bold; color: #1f3c88; }
    .booking-card .card-type { font-size: 13px; color: #666; }
    .booking-card .card-price { font-size: 16px; font-weight: bold; color: #1565c0; margin-top: auto; }
    .unavailable-msg { font-size: 11px; color: #c62828; font-weight: bold; background: #ffebee; padding: 2px 4px; border-radius: 4px; margin-top: 5px; text-align: center; }

    .floor-container { margin-top: 20px; background: rgba(255,255,255,0.5); padding: 15px; border-radius: 16px; border: 1px solid #eee; }
    .floor-header { font-size: 18px; font-weight: bold; color: #1f3c88; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #1f3c88; display: flex; align-items: center; }
    .pkg-section { grid-template-columns: 1fr !important; margin-bottom: 10px; }

    @media (max-width: 768px) {
      html, body { font-size: 15px; }
      .container { padding: 8px; max-width: 100%; }
      .card { padding: 12px; border-radius: 12px; }
      .title { font-size: 22px; }
      .subtitle { font-size: 13px; }
      h3 { font-size: 18px; }

      .grid, .grid-3, .grid-main, .room-grid, .row-2 { display: grid !important; grid-template-columns: 1fr !important; }
      .grid-main { grid-template-columns: 1fr !important; }
      
      input, select, textarea { font-size: 16px; min-height: 48px; }
      textarea { min-height: 90px; }
      button { min-height: 50px; font-size: 16px; }

      .toolbar { display: flex; flex-direction: column; gap: 10px; }
      .toolbar > div { width: 100%; }

      .room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; }
      .room-item { transition: all 0.2s ease; border: 1px solid #ddd; position: relative; }
      .room-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
      .room-item-selected { border: 3px solid #2e7d32 !important; background-color: #f1f8e9 !important; }

      .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
      .actions button { width: 100%; }
      .price-main { font-size: 20px; }

      .gateway-selection { grid-template-columns: 1fr; }
      .guest-room-selection { grid-template-columns: 1fr 1fr !important; gap: 10px; }
      .booking-card { padding: 12px; min-height: 100px; }
      .booking-card .card-id { font-size: 17px; }
      .floor-container { padding: 10px; border-radius: 12px; }
      .floor-header { font-size: 16px; margin-bottom: 10px; }
    }

    .confirm-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; }
    .confirm-label { color: #666; width: 100px; }
    .confirm-value { color: #222; font-weight: bold; text-align: right; flex: 1; }

    /* 懸浮背景 */
    .custom-modal {
      display: none; 
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      align-items: center;
      justify-content: center;
    }

    /* 視窗本體 */
    .modal-content {
      background-color: #fff;
      padding: 24px;
      border-radius: 16px;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      position: relative;
      animation: modalFadeIn 0.3s ease;
    }

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

    .modal-header {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #1f3c88;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
      overflow-y: scroll; /* 強制啟動滾動機制 */
        -webkit-overflow-scrolling: touch; /* 讓 iOS 滑動更順暢 */
      }

      /* 定義捲軸本體 */
      .modal-body::-webkit-scrollbar {
        width: 6px; /* 捲軸寬度 */
        display: block !important; /* 強制在 Webkit 瀏覽器顯示 */
      }

      /* 定義捲軸軌道 (背景) */
      .modal-body::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05); /* 淡淡的灰色軌道，讓使用者知道滑動範圍 */
        border-radius: 10px;
      }

      /* 定義捲軸滑塊 (那一條會動的) */
      .modal-body::-webkit-scrollbar-thumb {
        background-color: rgba(31, 60, 136, 0.3); /* 使用你的主色調，並設為半透明 */
        border-radius: 10px;
        border: 1px solid transparent;
        background-clip: content-box;
      }

      /* 當內容沒有超過高度時，不要顯示捲軸軌道 */
      .modal-body:not(:has(> *:nth-child(2))) {
        /* 如果內容太少，可以透過這個選擇器微調，或是由瀏覽器自動判斷 */
      }

    .modal-body {
      font-size: 15px;
      line-height: 1.6;
      color: #444;
      margin-bottom: 20px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .modal-body p { margin-bottom: 10px; }

    /* 強制恢復 checkbox 的瀏覽器預設樣式 */
    #agreePolicy {
      /* 1. 恢復瀏覽器預設樣式 */
      -webkit-appearance: checkbox !important;
      appearance: checkbox !important;
      
      /* 2. 徹底移除全域 CSS 的干擾 */
      width: 16px !important;   /* 固定寬度，不被 width: 100% 撐開 */
      height: 16px !important;  /* 固定高度 */
      padding: 0 !important;    /* 移除全域的 14px 內距 */
      margin: 0 !important;     /* 移除外距 */
      border: 1px solid #ccc !important;
      
      /* 3. 防止在手機版被壓縮 */
      flex-shrink: 0;
    }

    /* 修正標籤內的文字對齊 */
    .policy-label {
      display: flex !important;
      align-items: center !important; /* 強制垂直置中 */
      gap: 8px;
      cursor: pointer;
    }

    /* 頁籤設計 */
    .tabs {
      display: flex;
      gap: 10px;
      margin: 15px 0;
      border-bottom: 2px solid #ddd;
      padding-bottom: 10px;
    }
    .tab-btn {
      padding: 10px 20px;
      border: none;
      background: #eee;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
      color: #555;
      transition: 0.2s;
    }
    .tab-btn.active {
      background: #1f3c88; /* 使用你的主色調 */
      color: white;
    }
    .tab-content {
      display: none; /* 預設隱藏所有內容 */
    }
    .tab-content.active {
      display: block; /* 只顯示 active 的內容 */
    }

    /* 右上角登出區塊樣式 */
    .user-header {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 14px;
      color: #666;
      display: flex;
      gap: 8px;               /* 帳號與登出按鈕間的間距 */
      align-items: center;
      z-index: 100;
      max-width: 300px;       /* 限制最大寬度防止蓋到標題，視需求調整 */
      justify-content: flex-end;
    }

    .user-account {
      /* 基礎視覺 */
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      font: inherit;
      color: #444444;
      text-decoration: none;

      /* 核心修正：防止換行與點擊 */
      white-space: nowrap;    /* 強制不換行，解決字數多會斷行的問題 */
      pointer-events: none;   /* 徹底禁止滑鼠事件（不能點擊、不觸發 hover） */
      user-select: none;      /* 防止使用者選取文字（選擇性加入） */
      
      /* 視覺優化 */
      font-family: monospace;
      display: inline-block;  /* 確保寬度計算正確 */
    }

    /* 核心：將按鈕偽裝成純文字 */
    .logout-btn-text {
      background: none;      /* 去除背景 */
      border: none;          /* 去除邊框 */
      padding: 0;            /* 去除內距 */
      margin: 0;             /* 去除外距 */
      font: inherit;         /* 繼承父元素的字體樣式 */
      color: #d93025;        /* 設定顏色 */
      cursor: pointer;       /* 滑鼠指上去顯示手型 */
      font-weight: bold;     /* 加粗 */
      text-decoration: none; /* 去除底線 */
      outline: none;         /* 去除點擊時的藍色外框 */
    }

    .logout-btn-text:hover {
      text-decoration: underline; /* 滑鼠滑入時顯示底線，讓使用者知道可以點 */
    }

    /* 針對行動裝置微調 */
    @media (max-width: 600px) {
      .user-header {
        position: relative;
        top: 0;
        right: 0;
        justify-content: flex-end;
        margin-bottom: 10px;
        padding-right: 10px;
      }
    }

    /* 旋轉動畫效果 */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* 可複用的轉圈圈類別 */
    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #1a73e8;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      display: inline-block;
      vertical-align: middle;
      margin: 0 10px 0 0;
    }

/* 定義按鈕樣式 */
  .btn-custom-query {
    display: inline-block;
    padding: 16px 40px;      /* 增加內距讓按鈕變寬變高 */
    font-size: 20px;         /* 字體加大 */
    font-weight: 600;        /* 字體加粗 */
    color: #ffffff;
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%); /* 漸層色增加質感 */
    border: none;
    border-radius: 50px;     /* 膠囊形圓角 */
    text-decoration: none;
    letter-spacing: 1px;     /* 字距微調 */
    box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3); /* 柔和的藍色陰影 */
    transition: all 0.3s ease; /* 平滑的過渡動畫 */
    cursor: pointer;
  }

  /* 滑鼠懸停效果 (Hover) */
  .btn-custom-query:hover {
    transform: translateY(-2px); /* 輕微上浮感 */
    box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4); /* 陰影加深 */
    filter: brightness(1.1);    /* 稍微變亮 */
  }

  /* 點擊效果 (Active) */
  .btn-custom-query:active {
    transform: translateY(1px);  /* 按下的回饋感 */
    box-shadow: 0 2px 10px rgba(26, 115, 232, 0.3);
  }

/* Bridge / auth / loading helpers */
.loading-spinner {
  width: 22px; height: 22px; border: 3px solid rgba(31,60,136,.15); border-top-color: #1f3c88; border-radius: 50%; animation: spin .85s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.admin-auth-gate { display:none; }