:root {
      --c-primary: #007AFF;
      --c-primary-dark: #0051D5;
      --c-primary-darker: #003DB5;
      --c-success: #34C759;
      --c-success-dark: #2DA84A;
      --c-danger: #FF3B30;
      --c-danger-dark: #D32F2F;
      --c-warning: #FF9500;
      --c-warning-dark: #E07A00;
      --c-text: #1d1d1f;
      --c-text-secondary: #86868b;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --transition: var(--transition);
      --gradient-primary: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
      --gradient-primary-hover: linear-gradient(180deg, var(--c-primary-dark) 0%, var(--c-primary-darker) 100%);
      --gradient-success: linear-gradient(180deg, var(--c-success) 0%, var(--c-success-dark) 100%);
      --gradient-success-hover: linear-gradient(180deg, var(--c-success-dark) 0%, #248A3D 100%);
      --shadow-primary: 0 4px 16px rgba(0, 122, 255, 0.3);
      --shadow-primary-hover: 0 6px 24px rgba(0, 122, 255, 0.4);
      --shadow-success: 0 4px 16px rgba(52, 199, 89, 0.3);
      --shadow-success-hover: 0 6px 24px rgba(52, 199, 89, 0.4);
    }

    /* 保持原有樣式 */
    * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      min-height: 100vh;
      padding-bottom: 40px
    }

    .container {
      max-width: 900px;
      margin-top: 20px
    }

    .card {
      border: none;
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.3s ease;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .card:hover {
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px)
    }

    .card-body {
      padding: 24px
    }

    .card-title {
      font-size: 22px;
      font-weight: 600;
      color: var(--c-text);
      margin-bottom: 20px;
      letter-spacing: -0.3px
    }

    .btn {
      border-radius: var(--radius-md);
      font-weight: 500;
      padding: 10px 20px;
      border: none;
      transition: var(--transition);
      font-size: 15px
    }

    .btn-primary {
      background: var(--gradient-primary);
      box-shadow: var(--shadow-primary)
    }

    .btn-primary:hover {
      background: var(--gradient-primary-hover);
      box-shadow: var(--shadow-primary-hover);
      transform: translateY(-1px)
    }

    .btn-success {
      background: var(--gradient-success);
      box-shadow: var(--shadow-success)
    }

    .btn-success:hover {
      background: var(--gradient-success-hover);
      box-shadow: var(--shadow-success-hover);
      transform: translateY(-1px)
    }

    .btn-warning {
      background: linear-gradient(180deg, var(--c-warning) 0%, var(--c-warning-dark) 100%);
      box-shadow: 0 4px 16px rgba(255, 149, 0, 0.3);
      color: white
    }

    .btn-warning:hover {
      background: linear-gradient(180deg, #E07A00 0%, #C76800 100%);
      box-shadow: 0 6px 24px rgba(255, 149, 0, 0.4);
      transform: translateY(-1px)
    }

    .btn-danger {
      background: linear-gradient(180deg, var(--c-danger) 0%, var(--c-danger-dark) 100%);
      box-shadow: 0 4px 16px rgba(255, 59, 48, 0.3)
    }

    .btn-danger:hover {
      background: linear-gradient(180deg, #D32F2F 0%, #B71C1C 100%);
      box-shadow: 0 6px 24px rgba(255, 59, 48, 0.4);
      transform: translateY(-1px)
    }

    .btn-sm {
      padding: 6px 14px;
      font-size: 14px;
      border-radius: 10px
    }

    .btn-lg {
      padding: 14px 32px;
      font-size: 17px;
      border-radius: 14px;
      font-weight: 600
    }

    .form-control,
    select.form-control {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-md);
      padding: 8px 12px;
      font-size: 14px;
      background: rgba(255, 255, 255, 0.9);
      transition: var(--transition);
      color: var(--c-text);
      line-height: 1.5;
      height: auto;
      min-height: 42px
    }

    select.form-control {
      font-size: 14px;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 14px;
      padding-right: 36px;
      display: block;
      width: 100%
    }

    .form-control:focus,
    select.form-control:focus {
      border-color: var(--c-primary);
      box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
      background: white;
      outline: none
    }

    textarea.form-control {
      resize: vertical;
      min-height: 80px
    }

    label {
      font-size: 14px;
      font-weight: 500;
      color: var(--c-text);
      margin-bottom: 8px
    }

    .table {
      border-radius: var(--radius-md);
      overflow: hidden;
      font-size: 14px
    }

    .table thead th {
      background: #F5F5F7;
      color: var(--c-text);
      font-weight: 600;
      border: none;
      padding: 14px 12px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .table tbody td {
      padding: 14px 12px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      vertical-align: middle
    }

    .table-hover tbody tr:hover {
      background-color: rgba(0, 122, 255, 0.04)
    }

    .help-link:hover {
      background: var(--c-primary);
      color: white !important;
      border-color: var(--c-primary);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3)
    }

    .help-link:hover svg {
      stroke: white
    }

    .discount-section {
      background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
      padding: 20px;
      border-radius: var(--radius-lg);
      border: none;
      margin-bottom: 20px;
      box-shadow: 0 4px 16px rgba(255, 149, 0, 0.15)
    }

    .product-item {
      border: none;
      border-radius: var(--radius-lg);
      padding: 20px;
      margin-bottom: 12px;
      background: white;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      transition: var(--transition)
    }

    .product-item:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px)
    }

    .product-code {
      font-weight: 600;
      color: var(--c-primary);
      font-size: 1.1em;
      letter-spacing: -0.2px
    }

    .product-name {
      color: var(--c-text);
      margin: 6px 0;
      font-weight: 500
    }

    .product-meta {
      color: var(--c-text-secondary);
      font-size: 0.9em;
      line-height: 1.5
    }

    .badge {
      border-radius: var(--radius-sm);
      padding: 6px 12px;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.3px
    }

    .badge-primary {
      background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3)
    }

    .added-badge {
      background: linear-gradient(135deg, var(--c-success) 0%, var(--c-success-dark) 100%);
      color: white;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3)
    }

    /* 按鈕載入中狀態 - 防止重複送出 */
    .btn-loading {
      position: relative;
      pointer-events: none;
      opacity: 0.7;
      cursor: not-allowed !important;
    }

    .btn-loading::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: btn-spinner 0.8s linear infinite;
      margin-left: 8px;
    }

    @keyframes btn-spinner {
      to {
        transform: rotate(360deg);
      }
    }

    .btn-loading span {
      opacity: 0.8;
    }

    /* ==================== 手機版響應式樣式 v49.2.1 ==================== */

    /* 通用表格容器：超出時可橫向滾動 */
    .table-responsive-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 -10px;
      padding: 0 10px;
    }

    /* 表格基礎樣式 */
    .table-responsive-wrapper table {
      min-width: 600px;
    }

    /* 手機版媒體查詢 */
    @media (max-width: 768px) {

      /* 頁首響應式調整 */
      .d-flex.align-items-center.mb-4 {
        flex-wrap: wrap;
        padding: 12px 15px !important;
      }

      .d-flex.align-items-center.mb-4 h2 {
        font-size: 18px !important;
        flex: 1;
        min-width: 120px;
      }

      .d-flex.align-items-center.mb-4 img {
        height: 30px !important;
        margin-right: 8px !important;
      }

      /* Google 快捷連結響應式 */
      .google-quick-links {
        gap: 8px !important;
        margin-left: 10px !important;
        flex-wrap: wrap;
      }

      .google-quick-links a {
        width: 36px !important;
        height: 36px !important;
      }

      .google-quick-links svg {
        width: 26px !important;
        height: 26px !important;
      }

      /* 容器寬度 */
      .container {
        max-width: 100%;
        padding: 0 10px;
        margin-top: 10px;
      }

      /* 拜訪模組寬度響應式 */
      .visit-filters,
      .visit-list-wrapper,
      .followup-reminder {
        max-width: 100%;
      }

      /* 卡片響應式 */
      .card-body {
        padding: 15px;
      }

      /* 表格容器響應式 */
      .table-container,
      .history-table-wrapper,
      .promotion-table-wrapper,
      #promotionTableBody,
      .order-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
      }

      /* 確保表格可以滾動 */
      table.table {
        min-width: 500px;
      }

      /* 按鈕響應式 */
      .btn {
        font-size: 13px;
        padding: 8px 14px;
      }

      /* 主頁籤按鈕響應式 */
      .main-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
      }

      .main-tab-btn {
        flex-shrink: 0;
        font-size: 12px;
        padding: 8px 12px;
      }

      /* 篩選區響應式 */
      .visit-filters .form-row {
        flex-wrap: wrap;
      }

      .visit-filters .form-group {
        margin-bottom: 10px !important;
      }

      /* 輸入欄響應式 */
      .form-control {
        font-size: 14px !important;
      }

      /* 拜訪卡片響應式 */
      .visit-card-header {
        flex-direction: column;
        align-items: flex-start !important;
      }

      .visit-card-title {
        font-size: 14px !important;
      }

      /* 歷史紀錄表格響應式 */
      #historyRecordsContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* 分頁按鈕響應式 */
      #visitPagination,
      .history-pagination {
        flex-wrap: wrap;
        gap: 8px;
      }

      /* 防止內容超出螢幕 */
      .tab-content {
        max-width: 100%;
        overflow-x: hidden;
      }

      /* 管理員選單隱藏文字 */
      .admin-menu-btn span {
        display: none;
      }

      /* ★ v49.3.42 推廣品項區塊手機版樣式（強制覆蓋 Bootstrap） ★ */
      #promotionSection .form-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
      }

      #promotionSection .form-row>.col-12,
      #promotionSection .form-row>.col-4,
      #promotionSection .form-row>.col-md-2,
      #promotionSection .form-row>.col-md-4,
      #promotionSection .form-row>[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      #promotionSection .form-row>[class*="col-"]:last-child {
        margin-bottom: 0 !important;
      }

      #promotionSection .btn {
        padding: 12px !important;
        font-size: 15px !important;
        width: 100% !important;
      }

      /* 推廣品項表格手機版 */
      #promotionSection .promotion-table {
        font-size: 12px;
      }

      #promotionSection .promotion-table th,
      #promotionSection .promotion-table td {
        padding: 6px 4px;
      }
    }

    /* 更小螢幕 (手機直向) */
    @media (max-width: 480px) {
      .d-flex.align-items-center.mb-4 h2 {
        font-size: 15px !important;
      }

      .google-quick-links a {
        width: 32px !important;
        height: 32px !important;
      }

      .google-quick-links svg {
        width: 22px !important;
        height: 22px !important;
      }

      .main-tab-btn svg {
        width: 14px !important;
        height: 14px !important;
      }

      .main-tab-btn {
        font-size: 11px !important;
      }
    }

    #customerSearchResults {
      position: absolute;
      width: calc(100% - 30px);
      z-index: 1000;
      max-height: 250px;
      overflow-y: auto;
      border: none;
      background: white;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      margin-top: -12px;
      padding-top: 12px
    }

    #customerSearchResults .list-group-item {
      cursor: pointer;
      padding: 12px 16px;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      transition: var(--transition)
    }

    #customerSearchResults .list-group-item:hover {
      background-color: rgba(0, 122, 255, 0.06)
    }

    /* ★ v49.3.41 推廣品項搜尋結果樣式 ★ */
    #promotionProductResults {
      position: absolute;
      width: 100%;
      z-index: 1050;
      max-height: 200px;
      overflow-y: auto;
      background: white;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      margin-top: 2px;
    }

    #promotionProductResults .list-group-item {
      cursor: pointer;
      padding: 10px 12px;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      font-size: 13px;
      transition: background-color 0.2s ease;
    }

    #promotionProductResults .list-group-item:hover {
      background-color: rgba(0, 122, 255, 0.08);
    }

    /* 拜訪客戶搜尋結果樣式 */
    #visitCustomerResults {
      position: absolute;
      width: 100%;
      z-index: 1050;
      max-height: 200px;
      overflow-y: auto;
      background: white;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      margin-top: 2px;
    }

    #visitCustomerResults .list-group-item {
      cursor: pointer;
      padding: 10px 12px;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      font-size: 13px;
      transition: background-color 0.2s ease;
    }

    #visitCustomerResults .list-group-item:hover {
      background-color: rgba(0, 122, 255, 0.08);
    }

    .price-code-badge {
      display: inline-block;
      padding: 5px 10px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.3px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)
    }

    .price-code-88000 {
      background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
      color: white
    }

    .price-code-88020 {
      background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
      color: #333
    }

    .price-code-88025 {
      background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%);
      color: white
    }

    .price-code-88050 {
      background: linear-gradient(135deg, #8E8E93 0%, #636366 100%);
      color: white
    }

    .price-code-88100 {
      background: linear-gradient(135deg, var(--c-success) 0%, var(--c-success-dark) 100%);
      color: white
    }

    .price-code-不能出 {
      background: linear-gradient(135deg, var(--c-danger) 0%, var(--c-danger-dark) 100%);
      color: white
    }

    .bg-light {
      background: rgba(242, 242, 247, 0.8) !important;
      border-radius: 14px;
      border: 1px solid rgba(0, 0, 0, 0.04)
    }

    .form-check-label {
      font-size: 15px;
      color: var(--c-text);
      padding-left: 8px
    }

    .form-check-input:checked {
      background-color: var(--c-primary);
      border-color: var(--c-primary)
    }

    .alert {
      border-radius: 14px;
      border: none;
      padding: 16px 20px;
      font-size: 15px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08)
    }

    .alert-success {
      background: linear-gradient(135deg, rgba(52, 199, 89, 0.1) 0%, rgba(45, 168, 74, 0.1) 100%);
      color: #248A3D;
      border-left: 4px solid var(--c-success)
    }

    .alert-danger {
      background: linear-gradient(135deg, rgba(255, 59, 48, 0.1) 0%, rgba(211, 47, 47, 0.1) 100%);
      color: var(--c-danger-dark);
      border-left: 4px solid var(--c-danger)
    }

    .alert-info {
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 81, 213, 0.1) 100%);
      color: var(--c-primary-dark);
      border-left: 4px solid var(--c-primary)
    }

    .loader {
      border: 3px solid rgba(0, 122, 255, 0.2);
      border-radius: 50%;
      border-top: 3px solid var(--c-primary);
      width: 18px;
      height: 18px;
      animation: spin 1s linear infinite;
      display: none
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    .discounted-price-preview {
      color: var(--c-success);
      font-weight: 600;
      font-size: 0.9em;
      margin-top: 4px
    }

    .price-code-preview {
      color: var(--c-text-secondary);
      font-size: 0.75em;
      margin-top: 2px;
      font-weight: 500
    }

    .input-group-append .btn {
      border-radius: 0 12px 12px 0
    }

    small.form-text {
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.4
    }

    ::-webkit-scrollbar {
      width: 8px;
      height: 8px
    }

    ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      transition: var(--transition)
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.3)
    }

    .table-responsive {
      border-radius: var(--radius-md);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04)
    }

    .gift-row {
      background-color: #fff3e0 !important;
      border-left: 3px solid #ff9800
    }

    .gift-row td {
      color: #666
    }

    .gift-label {
      color: #ff9800;
      font-weight: bold
    }

    /* ===== 拜訪紀錄篩選區按鈕樣式 v49.2.0 ===== */

    /* 篩選區標籤 */
    .filter-label {
      font-size: 12px;
      color: #666;
      margin-bottom: 4px;
    }

    /* 按鈕容器 - 併排 */
    .visit-filter-btns {
      display: flex;
      gap: 8px;
    }

    /* 篩選區按鈕統一樣式 */
    .visit-filter-btn {
      flex: 1;
      height: 31px;
      font-size: 13px;
      padding: 0 12px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 手機版調整 - 保持方便操作 */
    @media (max-width: 767px) {
      .visit-filters {
        padding: 12px;
      }

      .visit-filter-btns {
        margin-top: 4px;
      }

      /* 手機版按鈕稍大方便點擊 */
      .visit-filter-btn {
        height: 36px;
        font-size: 14px;
      }

      .visit-filters .form-control-sm {
        height: 36px;
        font-size: 14px;
      }

      .filter-label {
        font-size: 11px;
      }
    }

    /* 平板調整 */
    @media (min-width: 768px) and (max-width: 991px) {
      .visit-filter-btn {
        font-size: 12px;
        padding: 0 8px;
      }
    }


    /* 頁首資訊 & 回到頂部按鈕樣式 */
    #header-info {
      margin-left: auto;
      text-align: right;
      font-size: 12px;
      color: #555;
      line-height: 1.5;
      white-space: nowrap;
    }

    #header-info span {
      display: block;
    }

    #header-info span b {
      color: var(--c-text);
      font-weight: 500;
      margin-right: 4px;
    }

    /* 浮動導航按鈕群組 */
    #scrollTopBtn,
    #scrollBottomBtn,
    #scrollToCartBtn {
      display: none;
      position: fixed;
      right: 30px;
      z-index: 99;
      border: none;
      outline: none;
      background: var(--gradient-primary);
      color: white;
      cursor: pointer;
      padding: 0;
      border-radius: 50%;
      width: 48px;
      height: 48px;
      box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4);
      transition: var(--transition);
      align-items: center;
      justify-content: center;
    }

    #scrollTopBtn {
      bottom: 150px;
    }

    #scrollToCartBtn {
      bottom: 90px;
      background: var(--gradient-success);
      box-shadow: 0 4px 16px rgba(52, 199, 89, 0.4);
    }

    #scrollBottomBtn {
      bottom: 30px;
    }

    #scrollTopBtn:hover,
    #scrollBottomBtn:hover {
      background: var(--gradient-primary-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0, 122, 255, 0.5);
    }

    #scrollToCartBtn:hover {
      background: var(--gradient-success-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(52, 199, 89, 0.5);
    }

    /* 拜訪紀錄頁籤專用上下按鈕 */
    .visit-scroll-btn {
      display: none;
      position: fixed;
      right: 20px;
      z-index: 999;
      border: none;
      outline: none;
      background: linear-gradient(180deg, #007AFF 0%, #0056D6 100%);
      color: white;
      cursor: pointer;
      padding: 0;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      box-shadow: 0 4px 14px rgba(0, 122, 255, 0.45);
      transition: var(--transition);
      align-items: center;
      justify-content: center;
    }

    .visit-scroll-btn:hover {
      background: linear-gradient(180deg, #0056D6 0%, #0040B0 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 122, 255, 0.55);
    }

    .visit-scroll-btn svg {
      stroke-width: 3.5;
    }

    #visitScrollTopBtn {
      bottom: 80px;
    }

    #visitScrollBottomBtn {
      bottom: 25px;
    }

    /* 新增: 管理員選單樣式 */
    .admin-menu-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      border: 1.5px solid #6c757d;
      color: #6c757d;
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      transition: var(--transition);
      cursor: pointer;
      background: white;
      margin-left: 8px;
    }

    .admin-menu-btn:hover {
      background: #6c757d;
      color: white !important;
      border-color: #6c757d;
    }

    .dropdown-menu {
      border-radius: var(--radius-md);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      border: none;
      padding: 8px;
    }

    .dropdown-item {
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      font-size: 14px;
      transition: var(--transition);
    }

    .dropdown-item:hover {
      background: rgba(0, 122, 255, 0.1);
      color: var(--c-primary);
    }

    /* 新增: 歷史購買記錄樣式 */
    .history-card {
      border: none;
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
      margin-bottom: 20px;
    }

    .history-product-group {
      background: white;
      border-radius: var(--radius-md);
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }

    .history-product-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      background: #f8f9fa;
      border-bottom: 1px solid #e0e0e0;
      transition: background-color 0.2s ease;
    }

    .history-product-header:hover {
      background: #e9ecef;
    }

    .history-collapsible {
      cursor: pointer;
      user-select: none;
    }

    .history-toggle-icon {
      font-size: 10px;
      color: #666;
      margin-right: 4px;
      transition: transform 0.2s ease;
    }

    .history-product-code {
      font-weight: 600;
      color: var(--c-primary);
      font-size: 1em;
    }

    .history-product-name {
      color: var(--c-text);
      font-size: 0.95em;
      margin-left: 10px;
    }

    .price-changed-badge {
      background: linear-gradient(135deg, var(--c-warning) 0%, var(--c-warning-dark) 100%);
      color: white;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
    }

    .history-product-detail {
      padding: 12px 16px;
    }

    /* 表格樣式 */
    .history-detail-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .history-detail-table th {
      font-weight: 600;
      color: #666;
      background: #fafafa;
      padding: 10px 12px;
      border-bottom: 1px solid #e0e0e0;
    }

    .history-detail-table td {
      padding: 10px 12px;
      border-bottom: 1px dashed #f0f0f0;
      vertical-align: middle;
    }

    .history-detail-table tr:last-child td {
      border-bottom: none;
    }

    .history-add-btn {
      padding: 4px 12px;
      font-size: 12px;
      border-radius: 6px;
    }

    .history-loading {
      text-align: center;
      padding: 30px;
      color: var(--c-text-secondary);
    }

    .history-empty {
      text-align: center;
      padding: 30px;
      color: var(--c-text-secondary);
    }

    /* 新增: 進度條彈窗樣式 */
    .modal-backdrop.show {
      opacity: 0.5;
    }

    .progress-modal .modal-content {
      border-radius: var(--radius-xl);
      border: none;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    }

    .progress-modal .modal-header {
      border-bottom: none;
      padding: 24px 24px 0;
    }

    .progress-modal .modal-body {
      padding: 24px;
    }

    .progress-modal .progress {
      height: 12px;
      border-radius: 6px;
      background: #f0f0f0;
      overflow: hidden;
    }

    .progress-modal .progress-bar {
      background: linear-gradient(90deg, #007AFF 0%, #5AC8FA 100%);
      border-radius: 6px;
      transition: width 0.3s ease;
    }

    .progress-step {
      display: flex;
      align-items: center;
      padding: 8px 0;
      font-size: 14px;
    }

    .progress-step-icon {
      width: 24px;
      height: 24px;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .progress-step-done {
      color: var(--c-success);
    }

    .progress-step-running {
      color: var(--c-primary);
    }

    .progress-step-pending {
      color: #c0c0c0;
    }

    /* ===== 購物車表格樣式 ===== */
    #cartTable {
      font-size: 13px;
    }

    #cartTable th,
    #cartTable td {
      vertical-align: middle;
      padding: 8px 6px;
    }

    /* 移除 number input 的上下調整按鈕 */
    input[type="number"].cart-input-qty,
    input[type="number"].cart-input-gift {
      -moz-appearance: textfield;
    }

    input[type="number"].cart-input-qty::-webkit-outer-spin-button,
    input[type="number"].cart-input-qty::-webkit-inner-spin-button,
    input[type="number"].cart-input-gift::-webkit-outer-spin-button,
    input[type="number"].cart-input-gift::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .cart-input-qty {
      width: 65px;
      text-align: center;
      padding: 4px 6px !important;
    }

    .cart-input-gift {
      width: 55px;
      text-align: center;
      border-color: #ff9800 !important;
      padding: 4px 6px !important;
    }

    .cart-input-price {
      width: 70px;
      text-align: center;
    }

    .cart-input-remark {
      width: 80px;
    }

    .cart-action-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      padding: 6px 4px !important;
    }

    .btn-xs {
      padding: 3px 8px;
      font-size: 11px;
      border-radius: 6px;
    }

    .cart-btn {
      width: 100%;
      min-width: 40px;
    }

    /* ===== 手機版優化 ===== */
    @media (max-width: 768px) {
      .container {
        padding: 10px 8px;
      }

      /* 頁首 */
      .d-flex.align-items-center.mb-4 {
        flex-wrap: wrap;
        padding: 15px !important;
        gap: 10px;
      }

      .d-flex.align-items-center.mb-4 img {
        height: 32px !important;
        margin-right: 10px !important;
      }

      .d-flex.align-items-center.mb-4 h2 {
        font-size: 20px !important;
        flex: 1;
      }

      #header-info {
        width: 100%;
        text-align: left !important;
        margin-top: 5px;
        font-size: 11px !important;
      }

      #header-info span {
        display: inline !important;
        margin-right: 15px;
      }

      /* 卡片 */
      .card {
        border-radius: var(--radius-md);
        margin-bottom: 15px !important;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }

      .card-body {
        padding: 15px !important;
      }

      .card-title {
        font-size: 16px !important;
      }

      /* 表單 */
      .form-control {
        font-size: 16px !important;
        padding: 10px 12px;
      }

      select.form-control {
        font-size: 15px !important;
      }

      label {
        font-size: 13px !important;
      }

      /* 按鈕 */
      .btn {
        padding: 10px 16px;
        font-size: 15px !important;
      }

      .btn-sm {
        padding: 8px 12px;
        font-size: 14px !important;
      }

      /* 購物車表格 - 手機版 */
      #cartTable {
        font-size: 11px;
        min-width: 700px;
      }

      #cartTable th,
      #cartTable td {
        padding: 6px 4px;
      }

      .cart-input-qty {
        width: 60px;
        font-size: 14px !important;
      }

      .cart-input-gift {
        width: 50px;
        font-size: 14px !important;
      }

      .cart-input-price {
        width: 60px;
        font-size: 14px !important;
      }

      .cart-input-remark {
        width: 65px;
        font-size: 14px !important;
      }

      .btn-xs {
        padding: 4px 6px;
        font-size: 10px;
      }

      /* 折扣區塊 */
      .discount-section {
        padding: 15px !important;
      }

      .discount-section label {
        font-size: 12px !important;
        display: block;
        margin-bottom: 5px;
      }

      .discount-section input {
        width: 80px !important;
        margin-left: 0 !important;
      }

      .discount-section .col-md-5 {
        margin-bottom: 10px;
      }

      /* 出貨方式 */
      .form-check-label {
        font-size: 14px !important;
      }

      /* 歷史購買紀錄 - 手機版橫向滾動 */
      .history-card .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .history-scroll-container {
        min-width: 650px;
      }

      .history-product-header {
        padding: 10px 12px !important;
        font-size: 12px !important;
      }

      .history-product-detail {
        padding: 8px 10px !important;
      }

      .history-detail-table {
        font-size: 11px !important;
      }

      .history-detail-table th,
      .history-detail-table td {
        white-space: nowrap;
        padding: 6px 8px !important;
      }

      /* 搜尋結果 */
      .product-item {
        padding: 12px !important;
      }

      .product-code {
        font-size: 14px !important;
      }

      .product-name {
        font-size: 13px !important;
      }

      .product-meta {
        font-size: 11px !important;
      }

      /* 浮動按鈕 */
      #scrollTopBtn,
      #scrollBottomBtn,
      #scrollToCartBtn {
        width: 40px !important;
        height: 40px !important;
        right: 15px !important;
      }

      #scrollTopBtn {
        bottom: 185px !important;
      }

      #scrollToCartBtn {
        bottom: 135px !important;
      }

      #scrollBottomBtn {
        bottom: 85px !important;
      }

      /* 拜訪紀錄專用滾動按鈕 - 手機版 */
      .visit-scroll-btn {
        width: 40px !important;
        height: 40px !important;
        right: 15px !important;
      }

      #visitScrollTopBtn {
        bottom: 135px !important;
      }

      #visitScrollBottomBtn {
        bottom: 85px !important;
      }

      /* 送出訂單按鈕 */
      #submitBtn {
        width: 100%;
        padding: 14px !important;
        font-size: 17px !important;
      }

      /* 訂單預覽表格 - 手機版加寬 */
      #cartTable {
        min-width: 850px;
      }

      #cartTable th:nth-child(2),
      #cartTable td:nth-child(2) {
        min-width: 150px;
      }

      #cartTable th:nth-child(3),
      #cartTable td:nth-child(3) {
        min-width: 80px;
      }
    }

    /* 超小螢幕（小於 576px） */
    @media (max-width: 576px) {
      .d-flex.align-items-center.mb-4 h2 {
        font-size: 18px !important;
      }

      .form-row .col-12 {
        margin-bottom: 12px;
      }

      /* 搜尋產品區塊 */
      .product-item .row {
        flex-direction: column;
      }

      .product-item .col-md-4,
      .product-item .col-md-6,
      .product-item .col-md-2 {
        width: 100%;
        margin-bottom: 10px;
      }

      .product-item .col-md-2 {
        text-align: left !important;
      }
    }

    /* 可點擊的貨品編號 */
    .clickable-code {
      color: var(--c-primary);
      cursor: pointer;
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
    }

    .clickable-code:hover {
      color: var(--c-primary-dark);
      text-decoration-style: solid;
    }

    /* 價格參考展開區塊 */
    .price-reference-row {
      display: none;
    }

    .price-reference-row.show {
      display: table-row;
    }

    .price-reference-cell {
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      padding: 12px 15px !important;
      border-left: 4px solid #1976D2;
    }

    .price-reference-content {
      font-size: 13px;
      color: #333;
    }

    .price-reference-title {
      font-weight: bold;
      color: #1976D2;
      margin-bottom: 8px;
    }

    .price-reference-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .price-reference-item {
      background: white;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
    }

    .price-reference-item .label {
      color: #666;
      margin-right: 5px;
    }

    .price-reference-item .value {
      font-weight: bold;
      color: #1976D2;
    }

    .price-reference-loading {
      color: #666;
      font-style: italic;
    }

    /* 草稿功能樣式 */
    .draft-section {
      background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
      border-radius: var(--radius-md);
      border: 1px solid #bdbdbd;
      overflow: hidden;
    }

    .draft-header {
      padding: 15px 20px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(158, 158, 158, 0.1);
    }

    .draft-header:hover {
      background: rgba(158, 158, 158, 0.2);
    }

    .draft-content {
      padding: 20px;
      padding-top: 10px;
    }

    /* v48.18.8: 草稿列表改用表格，可左右滾動 */
    .draft-list {
      max-height: 300px;
      overflow: auto;
      border: 1px solid #e0e0e0;
      border-radius: var(--radius-sm);
      background: white;
      -webkit-overflow-scrolling: touch;
    }

    .draft-table {
      width: 100%;
      min-width: 500px;
      border-collapse: collapse;
      font-size: 13px;
    }

    .draft-table th {
      background: #f5f5f5;
      padding: 10px 8px;
      text-align: left;
      font-weight: 600;
      color: #555;
      border-bottom: 2px solid #e0e0e0;
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .draft-table td {
      padding: 10px 8px;
      border-bottom: 1px solid #f0f0f0;
      vertical-align: middle;
    }

    .draft-table tr:hover {
      background: rgba(0, 122, 255, 0.05);
    }

    .draft-table .draft-name-cell {
      font-weight: 600;
      color: #333;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .draft-table .draft-customer-cell {
      color: #666;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .draft-table .draft-meta-cell {
      color: #888;
      font-size: 12px;
      white-space: nowrap;
    }

    .draft-table .draft-action-cell {
      white-space: nowrap;
    }

    .draft-table .draft-action-cell button {
      padding: 4px 8px;
      font-size: 11px;
      margin-right: 4px;
    }

    .draft-table .draft-action-cell button:last-child {
      margin-right: 0;
    }

    .draft-item {
      padding: 12px 15px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background 0.2s;
      display: flex;
      align-items: flex-start;
    }

    .draft-item:last-child {
      border-bottom: none;
    }

    .draft-item:hover {
      background: rgba(0, 122, 255, 0.05);
    }

    .draft-item.selected {
      background: rgba(0, 122, 255, 0.1);
      border-left: 3px solid var(--c-primary);
    }

    .draft-item-radio {
      margin-right: 10px;
      margin-top: 3px;
    }

    .draft-item-info {
      flex: 1;
    }

    .draft-item-name {
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }

    .draft-item-meta {
      font-size: 12px;
      color: #888;
    }

    .draft-item-status {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 8px;
    }

    .draft-status-active {
      background: #e8f5e9;
      color: #2e7d32;
    }

    .draft-status-converted {
      background: #f5f5f5;
      color: #757575;
    }

    .draft-empty {
      padding: 30px;
      text-align: center;
      color: #888;
    }

    .draft-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 15px;
    }

    .draft-actions .btn {
      flex: 1;
      min-width: 100px;
    }

    @media (max-width: 576px) {
      .draft-actions {
        flex-direction: column;
      }

      .draft-actions .btn {
        width: 100%;
      }

      .draft-table {
        font-size: 12px;
      }

      .draft-table th,
      .draft-table td {
        padding: 8px 6px;
      }
    }

    /* v48.18.8: 按鈕區域樣式 - 四個按鈕 */
    .action-buttons-row {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 15px;
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 18px;
      font-size: 15px;
      font-weight: 600;
      border-radius: var(--radius-md);
      border: none;
      min-width: 120px;
      transition: var(--transition);
    }

    .action-btn-draft {
      background: linear-gradient(180deg, #757575 0%, #616161 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(97, 97, 97, 0.3);
    }

    .action-btn-draft:hover {
      background: linear-gradient(180deg, #616161 0%, #424242 100%);
      box-shadow: 0 6px 16px rgba(97, 97, 97, 0.4);
      transform: translateY(-1px);
    }

    .action-btn-reload {
      background: linear-gradient(180deg, #78909C 0%, #546E7A 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(84, 110, 122, 0.3);
    }

    .action-btn-reload:hover {
      background: linear-gradient(180deg, #546E7A 0%, #455A64 100%);
      box-shadow: 0 6px 16px rgba(84, 110, 122, 0.4);
      transform: translateY(-1px);
    }

    .action-btn-quotation {
      background: var(--gradient-primary);
      color: white;
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    }

    .action-btn-quotation:hover {
      background: var(--gradient-primary-hover);
      box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4);
      transform: translateY(-1px);
    }

    .action-btn-order {
      background: var(--gradient-success);
      color: white;
      box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
    }

    .action-btn-order:hover {
      background: var(--gradient-success-hover);
      box-shadow: 0 6px 16px rgba(52, 199, 89, 0.4);
      transform: translateY(-1px);
    }

    @media (max-width: 600px) {
      .action-buttons-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .action-btn {
        min-width: auto;
        padding: 10px 12px;
        font-size: 13px;
      }
    }

    /* v48.18.8: 草稿提示對話框樣式 */
    .draft-alert-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
      padding: 20px;
    }

    .draft-alert-box {
      background: white;
      border-radius: var(--radius-xl);
      padding: 24px;
      max-width: 450px;
      width: 100%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: alertSlideIn 0.3s ease;
    }

    @keyframes alertSlideIn {
      from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .draft-alert-icon {
      text-align: center;
      font-size: 48px;
      margin-bottom: 16px;
    }

    .draft-alert-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--c-text);
      text-align: center;
      margin-bottom: 12px;
    }

    .draft-alert-message {
      font-size: 14px;
      color: #666;
      text-align: center;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .draft-alert-info {
      background: #fff3e0;
      border-radius: var(--radius-md);
      padding: 12px 16px;
      margin-bottom: 20px;
      font-size: 13px;
      color: #e65100;
    }

    .draft-alert-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .draft-alert-btn {
      padding: 12px 20px;
      border-radius: var(--radius-md);
      font-size: 15px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      text-align: center;
    }

    .draft-alert-btn-primary {
      background: var(--gradient-primary);
      color: white;
    }

    .draft-alert-btn-primary:hover {
      background: var(--gradient-primary-hover);
    }

    .draft-alert-btn-warning {
      background: linear-gradient(180deg, var(--c-warning) 0%, var(--c-warning-dark) 100%);
      color: white;
    }

    .draft-alert-btn-warning:hover {
      background: linear-gradient(180deg, #E07A00 0%, #C76800 100%);
    }

    .draft-alert-btn-secondary {
      background: #f5f5f5;
      color: #666;
    }

    .draft-alert-btn-secondary:hover {
      background: #e0e0e0;
    }

    /* v48.18.8: 登入草稿提示樣式 */
    .draft-login-toast {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
      border: 2px solid #ffc107;
      border-radius: var(--radius-lg);
      padding: 16px 24px;
      box-shadow: 0 8px 32px rgba(255, 193, 7, 0.3);
      z-index: 9999;
      max-width: 90%;
      animation: toastSlideDown 0.4s ease;
    }

    @keyframes toastSlideDown {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
      }

      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }

    .draft-login-toast-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .draft-login-toast-icon {
      font-size: 28px;
    }

    .draft-login-toast-text {
      font-size: 14px;
      color: #5d4037;
      font-weight: 500;
    }

    .draft-login-toast-buttons {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .draft-login-toast-btn {
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      border: none;
      cursor: pointer;
    }

    .draft-login-toast-btn-view {
      background: #ff9800;
      color: white;
    }

    .draft-login-toast-btn-later {
      background: white;
      color: #666;
      border: 1px solid #ddd;
    }

    /* ==================== 頁籤切換樣式 ==================== */
    .main-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      background: white;
      padding: 8px;
      border-radius: 14px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    /* PC 版顯示，手機版隱藏 */
    @media (max-width: 767.98px) {
      .main-tabs {
        display: none !important;
      }
    }

    .main-tab-btn {
      flex: 1;
      padding: 12px 20px;
      border: none;
      background: transparent;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .main-tab-btn:hover {
      background: rgba(0, 122, 255, 0.08);
      color: var(--c-primary);
    }

    .main-tab-btn.active {
      background: var(--gradient-primary);
      color: white;
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    }

    /* 主頁籤未讀徽章 */
    .main-tab-btn {
      position: relative;
    }
    .main-tab-badge {
      display: none;
      position: absolute;
      top: 4px;
      right: 8px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: var(--c-danger);
      color: white;
      font-size: 11px;
      font-weight: 600;
      line-height: 18px;
      text-align: center;
    }
    .main-tab-badge.show {
      display: inline-block;
    }
    .main-tab-btn.active .main-tab-badge {
      background: rgba(255,255,255,0.9);
      color: var(--c-danger);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    /* ==================== 手機底部導航列 ==================== */
    .bottom-nav {
      display: none;
      /* PC 預設隱藏 */
    }

    @media (max-width: 767.98px) {
      .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.96);
        /* 微透明背景 */
        backdrop-filter: blur(10px);
        /* 毛玻璃特效 */
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
        /* 適配 iPhone X+ 底部 */
        padding-top: 6px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        justify-content: space-around;
      }

      /* 為了不被底部導航擋住內容，body 需要 padding-bottom */
      body {
        padding-bottom: 80px;
      }

      .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px 0 6px 0;
        color: #999;
        text-decoration: none;
        border: none;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        position: relative;
      }

      .bottom-nav-badge {
        display: none;
        position: absolute;
        top: 0;
        right: 50%;
        margin-right: -20px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: var(--radius-sm);
        background: var(--c-danger);
        color: white;
        font-size: 10px;
        font-weight: 600;
        line-height: 16px;
        text-align: center;
      }
      .bottom-nav-badge.show {
        display: inline-block;
      }

      .bottom-nav-item svg {
        width: 22px;
        height: 22px;
        margin-bottom: 2px;
        stroke-width: 2px;
        transition: var(--transition);
      }

      .bottom-nav-item span {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.3px;
      }

      .bottom-nav-item.active {
        color: var(--c-primary);
      }

      .bottom-nav-item.active svg {
        stroke: var(--c-primary);
        transform: translateY(-1px);
      }
    }

    /* ==================== 拜訪模組樣式 ==================== */
    .visit-filters {
      background: white;
      padding: 20px;
      border-radius: var(--radius-lg);
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .visit-list-wrapper {
      max-width: 900px;
      margin: 0 auto;
    }

    .followup-reminder {
      background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
      padding: 16px 20px;
      border-radius: 14px;
      margin-bottom: 20px;
      border-left: 4px solid #ff9800;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .followup-reminder h6 {
      margin: 0 0 10px 0;
      color: #e65100;
      font-weight: 600;
    }

    .followup-stats {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .followup-stat {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
    }

    .followup-stat.overdue {
      color: #d32f2f;
      font-weight: 600;
    }

    .followup-stat.today {
      color: #f57c00;
    }

    .followup-stat.week {
      color: #1976d2;
    }

    .visit-card {
      background: white;
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: var(--transition);
    }

    .visit-card:hover {
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-1px);
    }

    .visit-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0;
      cursor: pointer;
    }

    .visit-card-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--c-text);
      margin: 0;
    }

    .visit-card-meta {
      font-size: 12px;
      color: var(--c-text-secondary);
      margin-top: 2px;
    }

    .visit-card-badges {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .visit-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
    }

    .visit-badge-type {
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      color: #1565c0;
    }

    .visit-badge-method {
      background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
      color: #7b1fa2;
    }

    /* ★ v50.0.4 追蹤狀態徽章樣式 (顏色編碼) */
    .followup-badge-overdue {
      background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
      color: #c62828;
      animation: pulse-overdue 2s infinite;
    }
    @keyframes pulse-overdue {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .followup-badge-today {
      background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
      color: #e65100;
    }
    .followup-badge-week {
      background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
      color: #2e7d32;
    }
    .followup-badge-future {
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      color: #1565c0;
    }
    .followup-badge-completed {
      background: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%);
      color: #1b5e20;
    }
    .followup-badge-cancelled {
      background: linear-gradient(135deg, #fafafa 0%, #e0e0e0 100%);
      color: #757575;
    }

    .visit-card-toggle {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--c-text-secondary);
      transition: transform 0.2s ease;
    }

    .visit-card.collapsed .visit-card-toggle {
      transform: rotate(-90deg);
    }

    .visit-card-detail {
      border-top: 1px solid #f0f0f0;
      padding-top: 10px;
      margin-top: 10px;
    }

    .visit-card.collapsed .visit-card-detail {
      display: none;
    }

    .visit-card-summary {
      font-size: 13px;
      color: #333;
      line-height: 1.5;
      margin-bottom: 8px;
    }

    .visit-card-followup {
      background: #fff8e1;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 12px;
      margin-bottom: 8px;
    }

    /* v49.2.1 追蹤狀態樣式 */
    .visit-card-followup.follow-complete {
      background: #e8f5e9;
      color: #2e7d32;
    }

    .visit-card-followup.follow-cancel {
      background: #f5f5f5;
      color: #9e9e9e;
      text-decoration: line-through;
    }

    .follow-status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      margin-left: 8px;
    }

    .visit-card-followup:not(.follow-complete):not(.follow-cancel) .follow-status-badge {
      background: #ff9800;
      color: white;
    }

    .follow-complete .follow-status-badge {
      background: #4caf50;
      color: white;
    }

    .follow-cancel .follow-status-badge {
      background: #9e9e9e;
      color: white;
    }

    .follow-actions .btn {
      font-size: 12px;
      padding: 4px 10px;
    }

    .visit-card-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }

    /* 拜訪表單 Modal */
    .visit-form-section {
      background: #f9f9fb;
      padding: 16px;
      border-radius: var(--radius-md);
      margin-bottom: 16px;
      width: 100% !important;
      max-width: none !important;
    }

    .visit-form-section h6 {
      margin: 0 0 12px 0;
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }

    .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
      font-size: 14px;
    }

    .checkbox-item:hover {
      border-color: var(--c-primary);
      background: rgba(0, 122, 255, 0.05);
    }

    .checkbox-item.checked {
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      border-color: #1976d2;
      color: #1565c0;
    }

    .checkbox-item.locked {
      background: #e8e8e8;
      border-color: #bdbdbd;
      cursor: not-allowed;
      opacity: 0.8;
    }

    .checkbox-item input[type="checkbox"] {
      display: none;
    }

    /* 推廣品項表格 */
    .promotion-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      margin-top: 12px;
    }

    .promotion-table th {
      background: #f5f5f5;
      padding: 10px 8px;
      text-align: left;
      font-weight: 600;
      font-size: 12px;
      color: #666;
    }

    .promotion-table td {
      padding: 8px;
      border-bottom: 1px solid #f0f0f0;
      vertical-align: middle;
    }

    .promotion-table input {
      width: 100%;
      padding: 6px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 13px;
    }

    .promotion-table input:focus {
      border-color: var(--c-primary);
      outline: none;
    }

    .promotion-table textarea {
      width: 100%;
      padding: 4px 8px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 12px;
      resize: vertical;
      min-height: 32px;
    }

    /* 價格參考區塊 */
    .promotion-price-ref {
      background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
      border: 1px solid #81c784;
      border-radius: 10px;
      padding: 12px 16px;
      margin: 10px 0;
    }

    .price-ref-title {
      font-weight: 600;
      color: #2e7d32;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .price-ref-content {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .price-ref-item {
      background: white;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .price-ref-item .label {
      color: #666;
      margin-right: 4px;
    }

    .price-ref-item .value {
      font-weight: bold;
      color: #1976d2;
    }

    /* 客戶搜尋結果（拜訪用） */
    #visitCustomerResults {
      position: absolute;
      width: 100%;
      z-index: 1050;
      max-height: 200px;
      overflow-y: auto;
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      margin-top: -1px;
    }

    #visitCustomerResults .list-group-item {
      padding: 12px 16px;
      border: none;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    #visitCustomerResults .list-group-item:hover {
      background: rgba(0, 122, 255, 0.06);
    }

    /* 推廣品項搜尋結果 */
    #promotionProductResults {
      position: absolute;
      width: 100%;
      z-index: 1050;
      max-height: 200px;
      overflow-y: auto;
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    #promotionProductResults .list-group-item {
      padding: 10px 14px;
      border: none;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      font-size: 13px;
    }

    #promotionProductResults .list-group-item:hover {
      background: rgba(0, 122, 255, 0.06);
    }

    /* 子選項區塊 */
    .sub-options-group {
      margin-top: 10px;
      padding: 12px;
      background: white;
      border-radius: var(--radius-sm);
      border: 1px solid #e0e0e0;
    }

    .sub-options-group label {
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
      display: block;
    }

    .sub-options-group select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: var(--radius-sm);
      font-size: 14px;
    }

    /* 空狀態 */
    .visit-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--c-text-secondary);
    }

    .visit-empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .visit-empty-text {
      font-size: 16px;
    }

    /* ============================================
   v49.2.0 新增樣式
   請貼在 
  </style> 標籤前面
  ============================================ */

  /* 篩選區標籤 */
  .filter-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  }

  /* 按鈕容器 - 併排 */
  .visit-filter-btns {
  display: flex;
  gap: 8px;
  }

  /* 篩選區按鈕統一樣式 */
  .visit-filter-btn {
  flex: 1;
  height: 31px;
  font-size: 13px;
  padding: 0 12px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  /* 推廣狀態標籤樣式 */
  .promotion-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  }
  .promotion-status-new {
  background: #E3F2FD;
  color: #1565C0;
  }
  .promotion-status-tracking {
  background: #FFF8E1;
  color: #F57F17;
  }
  .promotion-status-quoted {
  background: #FFF3E0;
  color: #E65100;
  }
  .promotion-status-closed {
  background: #E8F5E9;
  color: #2E7D32;
  }
  .promotion-status-lost {
  background: #F5F5F5;
  color: #757575;
  }

  /* 手機版篩選區調整 */
  @media (max-width: 767px) {
  .visit-filter-btns {
  margin-top: 4px;
  }
  .visit-filter-btn {
  height: 36px;
  font-size: 14px;
  }
  .visit-filters .form-control-sm {
  height: 36px;
  font-size: 14px;
  }
  .filter-label {
  font-size: 11px;
  }
  }

  /* 平板調整 */
  @media (min-width: 768px) and (max-width: 991px) {
  .visit-filter-btn {
  font-size: 12px;
  padding: 0 8px;
  }
  }

  /* ============================================
  v49.3.31 新增拜訪視窗寬度擴展
  修復 Modal 視窗在手機和 PC 上都變窄的問題
  ============================================ */

  /* PC 版 - 擴大 Modal 寬度 (1.5 倍) 並置中 */
  #visitModal .modal-dialog {
  min-width: 900px !important;
  width: 90% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  }

  /* v49.3.36: 最強力寬度強制 - 針對 Bootstrap XL 屬性 */
  @media (min-width: 1200px) {
  #visitModal .modal-xl {
  min-width: 1200px !important;
  max-width: 95vw !important;
  }
  }

  /* 手機版 - 恢復彈性寬度避免位移 (v49.3.39 修復) */
  @media (max-width: 767px) {
  #visitModal .modal-dialog {
  max-width: 95vw !important;
  width: 95vw !important;
  min-width: 0 !important;
  margin: 10px auto !important;
  }

  #visitModal .modal-content {
  border-radius: var(--radius-lg);
  width: 100% !important;
  }
  }

  /* 平板版 - 中等寬度 */
  @media (min-width: 768px) and (max-width: 991px) {
  #visitModal .modal-dialog {
  max-width: 95%;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  }
  }