/* =========================================================
   Pikmin Collection V31 Stable Layer
   目的：本地預覽穩定、修正頂部 UI、手機版不溢出、浮動按鈕統一
   放在所有 CSS 最後載入
   ========================================================= */

:root {
  --pikmin-bg: #f6f6f2;
  --pikmin-card: #fffef8;
  --pikmin-green: #7fa35a;
  --pikmin-green-dark: #5f7f45;
  --pikmin-green-soft: #dfe6d6;
  --pikmin-text: #273020;
  --font-main: 'Quicksand', 'Taipei Sans TC', 'Noto Sans TC', sans-serif;
}

* { 
  box-sizing: border-box;
  font-family: var(--font-main) !important;
}
html, body { max-width: 100%; overflow-x: hidden; }

/* 只保留正式 Pikmin toolbar，避免舊測試 toolbar 干擾 */
.toolbar:not(.pikmin-toolbar),
.main > .control-panel,
.v28-scope > .control-panel,
.main > .top-bar,
.v28-scope > .top-bar {
  display: none !important;
}

.main.v28-scope > .toolbar.pikmin-toolbar {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--pikmin-bg) !important;
  border-radius: 24px !important;
  padding: 16px !important;
  margin: 0 0 20px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 480px) 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1000 !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-search.search-box {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 480px !important;
  position: relative !important;
  margin: 0 !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-search-input.search-input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 44px 0 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: #30362d !important;
  font-size: 15px !important;
  line-height: 44px !important;
  box-shadow: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-leaf {
  position: absolute !important;
  right: 17px !important;
  top: -10px !important;
  width: 14px !important;
  height: 20px !important;
  background: #74b657 !important;
  border-radius: 80% 20% 80% 20% !important;
  transform-origin: 50% 100% !important;
  animation: v31PikminLeafSwing 1.8s infinite ease-in-out !important;
  pointer-events: none !important;
  display: block !important;
}

@keyframes v31PikminLeafSwing {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(14deg); }
}

.random-discovery-btn {
  position: absolute !important;
  right: 50px !important; /* 在葉子旁邊 */
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 5px !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.random-discovery-btn:hover {
  transform: translateY(-50%) scale(1.3) rotate(15deg) !important;
}

.random-discovery-btn:active {
  transform: translateY(-50%) scale(0.9) !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions {
  min-width: 0 !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  overflow: visible !important; /* 確保選單不被裁切 */
}

.tag-filter-wrapper {
  overflow: visible !important;
  position: relative;
}

.main.v28-scope .pikmin-toolbar .pikmin-pill {
  height: 36px !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--pikmin-green-soft) !important;
  color: var(--pikmin-text) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* V40: 調整下拉選單箭頭位置 */
select#categoryFilter.pikmin-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important; /* 往左移動：原約 8px -> 14px */
  background-size: 11px !important;
  padding-right: 32px !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-pill.active,
.main.v28-scope .pikmin-toolbar .pikmin-pill.is-active {
  background: var(--pikmin-green) !important;
  color: #fff !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-preview-btn {
  background: var(--pikmin-green-dark) !important;
  color: #fff !important;
}

/* 桌機：只顯示回頂部，不顯示手機上傳 + */
@media (min-width: 1025px) {
  #mobileUploadFab {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #v28CreateFab,
  #scrollTopBtn,
  .v28-create-fab.scroll-top-fab {
    display: flex !important;
  }
}

/* 浮動按鈕統一 */
#mobileUploadFab,
#v28CreateFab,
#scrollTopBtn,
.v28-create-fab.scroll-top-fab {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  min-height: 35px !important;
  border: 0 !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  background: #8ccc6b !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(80, 140, 80, 0.32) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  z-index: 6000 !important;
}

#mobileUploadFab {
  position: fixed !important;
  right: 14px !important;
  bottom: 64px !important;
  font-size: 22px !important;
}

#v28CreateFab,
#scrollTopBtn,
.v28-create-fab.scroll-top-fab {
  position: fixed !important;
  right: 14px !important;
  bottom: 20px !important;
  font-size: 0 !important;
}

#v28CreateFab svg,
#scrollTopBtn svg,
.v28-create-fab.scroll-top-fab svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* 手機：頂部改為單欄，搜尋欄不跑出容器 */
@media (max-width: 1024px) {
  body { flex-direction: column !important; }
  .main { 
    width: 100% !important; 
    padding: 44px 14px 14px 14px !important; /* Top padding increased from 14 -> 44 */
  }

  .main.v28-scope > .toolbar.pikmin-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-search.search-box {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: start !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-search-input.search-input {
    height: 42px !important;
    line-height: 42px !important;
    font-size: 14px !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions {
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-pill {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -100% !important;
    width: 100% !important;
    height: 78vh !important;
    padding: 72px 12px 12px 12px !important; /* Increased again: 42 -> 72 */
    background: rgba(255, 253, 242, 0.15) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px 24px 0 0 !important;
    z-index: 5000 !important;
    overflow-y: auto !important;
    transition: bottom 0.35s ease !important;
  }

  .sidebar.open { bottom: 0 !important; }

  .upload-tabs,
  #modeFileBtn,
  #modeDragBtn,
  #modePasteBtn,
  #dragPanel,
  #pastePanel {
    display: none !important;
  }

  #filePanel,
  #selectFileBtn { display: flex !important; }

  #mobileUploadFab { display: flex !important; }
  #v28CreateFab,
  #v28CreateMenu { display: none !important; }
}

@media (max-width: 390px) {
  .main.v28-scope .pikmin-toolbar .pikmin-search.search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-pill {
    padding: 0 10px !important;
    font-size: 12.5px !important;
  }
}

/* =========================================================
   V31.1 Fix：縮小網頁時，按鈕不要掉到搜尋欄下方
   原因：舊版在小寬度把 toolbar 改成單欄 / flex-wrap
   解法：頂部永遠維持兩欄；搜尋欄縮短，按鈕列橫向滑動
   ========================================================= */
.main.v28-scope > .toolbar.pikmin-toolbar {
  display: grid !important;
  grid-template-columns: minmax(180px, 360px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-search.search-box {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions::-webkit-scrollbar {
  display: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-pill {
  flex: 0 0 auto !important;
}

@media (max-width: 1024px) {
  .main.v28-scope > .toolbar.pikmin-toolbar {
    display: grid !important;
    grid-template-columns: minmax(145px, 42vw) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 42px 12px 12px 12px !important; /* Top padding increased from 12 -> 42 */
  }

  .main.v28-scope .pikmin-toolbar .pikmin-search.search-box {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-search-input.search-input {
    height: 40px !important;
    line-height: 40px !important;
    font-size: 13px !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-pill {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 390px) {
  .main.v28-scope > .toolbar.pikmin-toolbar {
    grid-template-columns: minmax(132px, 40vw) minmax(0, 1fr) !important;
  }
}


/* ===== V31-2 強制兩排結構 ===== */
.top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.search-bar {
  flex: 1 1 100%;
  order: 1;
}

.top-actions {
  display: flex;
  gap: 8px;
  flex: 1 1 100%;
  order: 2;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .top-actions {
    justify-content: space-around;
  }
}

/* =========================================================
   V31.3 Complete Fix：真正固定兩排
   第一排：搜尋欄
   第二排：功能按鈕
   注意：這段必須放在 CSS 最後，覆蓋 V31.1 的雙欄設定。
   ========================================================= */
.main.v28-scope > .toolbar.pikmin-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  gap: 12px !important;
  overflow: visible !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-search.search-box {
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  flex: 0 0 auto !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-search-input.search-input {
  width: 100% !important;
  max-width: 100% !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions {
  order: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions::-webkit-scrollbar {
  display: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-pill {
  flex: 0 0 auto !important;
}

@media (max-width: 1024px) {
  .main.v28-scope > .toolbar.pikmin-toolbar {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
    gap: 10px !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-search.search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}

/* =========================================================
   V31.5 Button Unified Edition：全站按鈕統一成「新增明信片」綠色膠囊風格
   放在最後，覆蓋舊版 tab / pill / modal / toolbar 按鈕樣式
   ========================================================= */
:root {
  --pikmin-btn-green-1: #9bd27a;
  --pikmin-btn-green-2: #87c96c;
  --pikmin-btn-green-3: #76b85b;
  --pikmin-btn-text: #ffffff;
  --pikmin-btn-shadow: rgba(93, 150, 72, 0.18);
  --pikmin-btn-shadow-hover: rgba(93, 150, 72, 0.26);
}

/* 主要按鈕統一 */
button,
.primary-button,
.secondary-button,
.upload-box,
.tab-button,
.view-button,
.tag-filter,
.share-button,
.btn-primary,
.v28-coord-submit,
.v28-create-item,
.pikmin-pill {
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, var(--pikmin-btn-green-1), var(--pikmin-btn-green-2)) !important;
  color: var(--pikmin-btn-text) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  box-shadow: 0 8px 18px var(--pikmin-btn-shadow) !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  text-decoration: none !important;
}

button:hover,
.primary-button:hover,
.secondary-button:hover,
.upload-box:hover,
.tab-button:hover,
.view-button:hover,
.tag-filter:hover,
.share-button:hover,
.btn-primary:hover,
.v28-coord-submit:hover,
.v28-create-item:hover,
.pikmin-pill:hover {
  transform: translateY(-1px) !important;
  box-shadow: none !important; /* 扁平化：移除懸停陰影 */
  filter: brightness(1.1) !important;
}

button:active,
.primary-button:active,
.secondary-button:active,
.upload-box:active,
.tab-button:active,
.view-button:active,
.tag-filter:active,
.share-button:active,
.btn-primary:active,
.v28-coord-submit:active,
.v28-create-item:active,
.pikmin-pill:active {
  transform: scale(0.98) !important;
  box-shadow: none !important;
}

button:disabled,
button[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 左側大按鈕：維持你截圖那種整排寬度 */
#addCardBtn,
.primary-button,
#selectFileBtn.upload-box,
#clearImageBtn,
.v28-coord-submit,
.share-button,
.btn-primary {
  width: 100% !important;
  min-height: 60px !important;
  padding: 0 20px !important;
  font-size: 18px !important;
  border-radius: 16px !important;
  font-weight: 500 !important; /* 調細字體至 500 */
}

/* 上方工具列按鈕：同色系，但尺寸較小，避免擠壓 */
.main.v28-scope .pikmin-toolbar .pikmin-pill,
.main.v28-scope .pikmin-toolbar .view-button,
.main.v28-scope .pikmin-toolbar .tag-filter {
  padding: 0 16px !important;
  border-radius: 16px !important;
  background: var(--pikmin-green) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

.main.v28-scope .pikmin-toolbar .tag-filter.active,
.main.v28-scope .pikmin-toolbar .tag-filter.is-active {
  background: var(--pikmin-green-dark) !important;
}

/* active 不再變成不同風格，只稍微加深，維持統一 */
.main.v28-scope .pikmin-toolbar .pikmin-pill.active,
.main.v28-scope .pikmin-toolbar .pikmin-pill.is-active,
.tab-button.active {
  background: var(--pikmin-green-dark) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* 上傳模式 tabs：三顆也統一 */
.upload-tabs {
  gap: 8px !important;
}
.upload-tabs .tab-button {
  min-height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  border-radius: 16px !important;
  flex: 1 1 0 !important;
}

/* 浮動按鈕統一成同一套綠色 */
#mobileUploadFab,
#v28CreateFab,
#scrollTopBtn,
.v28-create-fab.scroll-top-fab {
  background: linear-gradient(180deg, var(--pikmin-btn-green-1), var(--pikmin-btn-green-2)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px var(--pikmin-btn-shadow-hover) !important;
}

/* 關閉按鈕也改為統一圓形小按鈕 */
.modal-close,
.v28-coord-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 18px !important;
}

@media (max-width: 1024px) {
  #addCardBtn,
  .primary-button,
  #selectFileBtn.upload-box,
  #clearImageBtn,
  .v28-coord-submit,
  .share-button,
  .btn-primary {
    min-height: 56px !important;
    font-size: 17px !important;
  }

  .main.v28-scope .pikmin-toolbar .pikmin-pill,
  .main.v28-scope .pikmin-toolbar .view-button,
  .main.v28-scope .pikmin-toolbar .tag-filter {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
}

.tag-filter-wrapper {
  display: block !important;
  position: relative !important;
  margin-left: auto !important;
  order: 99 !important;
  z-index: 10020 !important;
  overflow: visible !important;
}

@media (max-width: 1024px) {
  .tag-filter-wrapper {
    display: block !important;
  }
}

.mobile-filter-icon-only {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  color: var(--pikmin-green) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 0.2s ease !important;
}

.mobile-filter-icon-only:hover {
  transform: scale(1.1);
  color: var(--pikmin-green-dark) !important;
}

.mobile-filter-icon-only svg {
  width: 24px;
  height: 24px;
}

.mobile-tag-menu {
  width: 140px !important;
  z-index: 200000 !important; /* 低於 Modal 但高於 Toolbar */
  pointer-events: auto !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
  box-shadow: 0 15px 45px rgba(0,0,0,0.15) !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  z-index: 10000 !important;
  min-width: 140px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  max-height: min(62vh, 420px) !important;
  overflow-y: auto !important;
}

.mobile-tag-menu.hidden {
  display: none !important;
}

.mobile-tag-item {
  background: transparent !important;
  color: var(--pikmin-text) !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  text-align: left !important;
  width: 100% !important;
  justify-content: flex-start !important;
  box-shadow: none !important;
  border: none !important;
}

.mobile-tag-item:hover {
  background: rgba(0,0,0,0.03) !important;
}

.mobile-tag-item.active {
  background: var(--pikmin-green-soft) !important;
  color: var(--pikmin-green-dark) !important;
  font-weight: 800 !important;
}


/* =========================================================
   V31.6 UI 精修版
   1) 取消頂部容器框
   2) 取消預覽模式
   3) 手機恢復「上傳 +」與「回頂部」兩顆浮動按鈕
   ========================================================= */

/* 頂部外框取消：只保留搜尋欄與按鈕本身 */
.main.v28-scope > .toolbar.pikmin-toolbar {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 0 18px 0 !important;
}

/* 搜尋欄維持柔和白底 */
.main.v28-scope .pikmin-toolbar .pikmin-search-input.search-input {
  background: rgba(255,255,255,0.86) !important;
  box-shadow: 0 6px 18px rgba(99, 139, 78, 0.08) !important;
}

/* 瀏覽模式樣式：隱藏側邊欄，讓主內容區域變寬 */
body.is-browse-mode .sidebar {
  display: none !important;
}

/* 預覽／瀏覽模式：桌機也佔滿視窗寬度——勿 max-width 限縮、勿保留側欄 margin-left（側欄已隱藏） */
body.is-browse-mode .main-header,
body.is-browse-mode .main,
body.is-browse-mode .main-footer-guestbook {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.is-browse-mode .main {
  box-sizing: border-box !important;
}

/* 修正手機瀏覽模式雙擊問題：關閉所有懸停觸發的變換 */
body.is-browse-mode .postcard-card {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.is-browse-mode .postcard-hover-actions,
body.is-browse-mode #mobileUploadFab,
body.is-browse-mode #v28CreateFab,
body.is-browse-mode #scrollTopBtn,
body.is-browse-mode .v28-create-fab,
body.modal-open #mobileUploadFab,
body.modal-open #v28CreateFab,
body.modal-open #mobileScrollTopFab,
body.modal-open #scrollTopBtn,
body.modal-open .v28-create-fab,
body.modal-open #v37SidebarAuthRow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-browse-mode .postcard-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* 浮動按鈕：共用圓形綠色風格 */
#mobileUploadFab,
#mobileScrollTopFab,
#v28CreateFab,
#scrollTopBtn,
.v28-create-fab.scroll-top-fab {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  min-height: 35px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: linear-gradient(180deg, var(--pikmin-btn-green-1), var(--pikmin-btn-green-2)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px var(--pikmin-btn-shadow-hover) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9000 !important;
  padding: 0 !important;
}

#mobileUploadFab {
  position: fixed !important;
  right: 14px !important;
  bottom: 64px !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#mobileScrollTopFab,
#v28CreateFab,
#scrollTopBtn,
.v28-create-fab.scroll-top-fab {
  position: fixed !important;
  right: 14px !important;
  bottom: 20px !important;
  font-size: 0 !important;
}

#mobileScrollTopFab svg,
#v28CreateFab svg,
#scrollTopBtn svg,
.v28-create-fab.scroll-top-fab svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* 桌機：只留右下回頂部，不顯示手機上傳 + 與手機回頂部 */
@media (min-width: 769px) {
  #mobileUploadFab,
  #mobileScrollTopFab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #v28CreateFab,
  #scrollTopBtn,
  .v28-create-fab.scroll-top-fab {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* 手機：上面是新增 +，下面是回頂部 */
@media (max-width: 1024px) {
  .main.v28-scope > .toolbar.pikmin-toolbar {
    padding: 0 !important;
    gap: 10px !important;
  }

  #mobileUploadFab,
  #mobileScrollTopFab {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #v28CreateFab,
  #v28CreateMenu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   V31.7 Upload Experience：簡潔上傳欄 + 拖曳/連結/貼上整合
   ========================================================= */
.upload-tabs--hidden {
  display: none !important;
}

.sidebar .upload-simple {
  display: block !important;
  margin: 18px 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sidebar .upload-drop {
  width: 100% !important;
  min-height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 34px 20px !important;
  border: 1.5px dashed rgba(112, 122, 112, 0.25) !important;
  border-radius: 14px !important;
  background: rgba(245, 247, 242, 0.5) !important; /* Blends with the website background */
  color: #5f675f !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}

.sidebar .upload-drop:hover,
.sidebar .upload-drop:focus-within {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(126, 188, 93, 0.55) !important;
  transform: translateY(-1px) !important;
}

.sidebar .upload-drop.dropover {
  background: rgba(235, 247, 228, 0.95) !important;
  border-color: #8ac66b !important;
}

.upload-illustration {
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0.82 !important;
}

.upload-svg-icon {
  width: 44px;
  height: 44px;
  stroke: #777; /* Subtle grey like the reference */
  opacity: 0.6;
}

.upload-main-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  color: #5e655e !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

button.upload-text-button,
#selectFileBtn.upload-text-button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #2f7df6 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  display: inline !important;
  cursor: pointer !important;
  transform: none !important;
}

button.upload-text-button:hover,
#selectFileBtn.upload-text-button:hover {
  text-decoration: underline !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.upload-hint {
  color: rgba(95, 103, 95, 0.58) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.paste-catcher {
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.upload-divider {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 16px 0 !important;
  color: #7b817b !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.upload-divider::before,
.upload-divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(123, 129, 123, 0.14) !important;
}

.upload-url-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.upload-url-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 52px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(120, 128, 120, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #5f675f !important;
  font-size: 15px !important;
  outline: none !important;
  box-shadow: none !important;
}

.upload-url-input:focus {
  border-color: rgba(126, 188, 93, 0.58) !important;
  background: #fff !important;
}

button.upload-url-button,
#imageUrlSearchBtn.upload-url-button {
  flex: 0 0 auto !important;
  width: 96px !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.preview-box {
  margin-top: 14px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.preview-box img {
  border-radius: 16px !important;
}

@media (max-width: 1024px) {
  .sidebar .upload-drop {
    min-height: 156px !important;
    padding: 26px 16px !important;
  }

  .upload-main-text,
  button.upload-text-button,
  #selectFileBtn.upload-text-button {
    font-size: 15px !important;
  }

  .upload-url-row {
    gap: 8px !important;
  }

  button.upload-url-button,
  #imageUrlSearchBtn.upload-url-button {
    width: 78px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
  }

  .upload-url-input {
    height: 48px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   V31.8 Sidebar + Preview Fix
   1) 預覽圖片完整顯示，不再被切成一條
   2) 左側功能欄高度到底
   ========================================================= */

/* 左側功能欄：桌機版撐滿整個視窗高度 */
.sidebar {
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  padding-bottom: 24px !important;
  background: rgba(255, 253, 242, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.01) !important;
}

/* 圖片預覽區：取消裁切，讓圖片完整顯示 */
#previewBox.preview-box,
.preview-box {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 10px !important;
  margin: 12px 0 14px !important;
  overflow: visible !important;
  background: rgba(255, 254, 246, 0.92) !important;
  border-radius: 18px !important;
}

#previewImage,
.preview-box img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  max-height: 280px !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  margin: 0 0 8px !important;
  background: rgba(255,255,255,0.7) !important;
}

#clearImageBtn {
  margin-top: 8px !important;
}

/* 手機 / 窄版：功能欄打開後延伸到底，不再只停在 78vh */
@media (max-width: 1024px) {
  .sidebar {
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    min-height: calc(100dvh - 12px) !important;
    bottom: calc(-100dvh - 20px) !important;
    padding-bottom: 28px !important;
  }

  .sidebar.open {
    bottom: 0 !important;
  }

  #previewImage,
  .preview-box img {
    min-height: 110px !important;
    max-height: 220px !important;
  }
}


/* =========================================================
   V32 Upload Complete Experience
   - 取消 URL 連結搜尋
   - 修正 Ctrl+V 貼圖：整個頁面都可貼上圖片
   - 側邊功能欄桌機版延伸到網頁最底，不再只到 100vh
   ========================================================= */

/* 取消 URL 搜尋相關 UI */
.upload-divider,
.upload-url-row,
.upload-url-input,
.upload-url-button,
#imageUrlInput,
#imageUrlSearchBtn {
  display: none !important;
}

/* 上傳框維持簡潔，提供貼上提示 */
.sidebar .upload-simple {
  margin-bottom: 16px !important;
}

.sidebar .upload-drop {
  min-height: 176px !important;
}

.sidebar .upload-drop.upload-success {
  border-color: #8bcf69 !important;
  background: rgba(235, 248, 226, 0.96) !important;
  box-shadow: 0 10px 24px rgba(126, 188, 93, 0.16) !important;
}

/* 預覽卡片：完整圖片、不裁切、像產品上傳卡 */
#previewBox.preview-box,
.preview-box {
  padding: 12px !important;
  border: 1px solid rgba(126, 188, 93, 0.18) !important;
  background: rgba(255, 253, 242, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.02) !important;
  overflow: visible !important;
}

#previewImage,
.preview-box img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 320px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 14px !important;
}

/* 桌機：側邊欄延伸到整個網頁高度；不使用 100vh 內部滾動造成底部空白 */
@media (min-width: 769px) {
  html, body {
    min-height: 100% !important;
  }

  body {
    align-items: stretch !important;
  }

  .sidebar {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow-y: visible !important;
    padding-bottom: 32px !important;
  }

  .main {
    min-height: 100vh !important;
  }
}

/* 手機：仍保留抽屜式功能欄，但打開後貼到底 */
@media (max-width: 1024px) {
  .sidebar {
    height: calc(100dvh - 8px) !important;
    min-height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    bottom: calc(-100dvh - 24px) !important;
    overflow-y: auto !important;
    padding-bottom: 34px !important;
  }

  .sidebar.open {
    bottom: 0 !important;
  }

  #previewImage,
  .preview-box img {
    max-height: 260px !important;
  }
}


/* =========================================================
   V32.1 Upload Inline Preview
   - 圖片載入後直接顯示在上傳欄內
   - 不再另外產生下方預覽卡片
   - 左側功能欄延伸到頁面內容最底
   ========================================================= */
.sidebar .upload-drop.has-image {
  min-height: auto !important;
  padding: 12px !important;
  justify-content: flex-start !important;
}

.sidebar .upload-drop.has-image .upload-illustration,
.sidebar .upload-drop.has-image .upload-main-text,
.sidebar .upload-drop.has-image .upload-hint {
  display: none !important;
}

#previewBox.upload-inline-preview,
.upload-inline-preview.preview-box {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#previewBox.upload-inline-preview.hidden {
  display: none !important;
}

#previewBox.upload-inline-preview #previewImage,
.upload-inline-preview.preview-box img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 14px !important;
  margin: 0 0 12px !important;
}

#previewBox.upload-inline-preview #clearImageBtn {
  width: 100% !important;
  margin: 0 !important;
}

@media (min-width: 769px) {
  body {
    min-height: 100vh !important;
    align-items: stretch !important;
  }

  .sidebar {
    min-height: max(100vh, 100%) !important;
    height: auto !important;
    align-self: stretch !important;
  }
}

@media (max-width: 1024px) {
  .sidebar .upload-drop.has-image {
    padding: 10px !important;
  }
}

/* =========================================================
   V33 完整上傳流程：第一次拖曳穩定 + 載入狀態 + 內嵌預覽
   ========================================================= */
.sidebar .upload-drop {
  position: relative !important;
  overflow: hidden !important;
}

.sidebar .upload-drop.dropover {
  outline: 3px solid rgba(142, 199, 101, 0.22) !important;
  transform: translateY(-1px) scale(1.005) !important;
}

.sidebar .upload-drop.upload-loading::after {
  content: "圖片處理中…";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 248, 0.82);
  color: #5b7d43;
  font-weight: 800;
  letter-spacing: 0.03em;
  backdrop-filter: blur(3px);
}

.sidebar .upload-drop.upload-success {
  border-color: #8ac66b !important;
  background: rgba(237, 250, 227, 0.94) !important;
}

#previewBox.upload-inline-preview #clearImageBtn,
.upload-inline-preview.preview-box #clearImageBtn {
  min-height: 52px !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

/* 已移至檔案末端統一管理 */

.message.error {
  color: #c2410c !important;
  background: rgba(255, 247, 237, 0.85) !important;
  border: 1px solid rgba(251, 146, 60, 0.35) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}


/* =========================================================
   V34 Preview One-Click：地圖模式扁平卡片 + Filter 精修
   只影響地圖模式，不影響收藏冊卡片
   ========================================================= */
body.map-mode .main.v28-scope .pikmin-toolbar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.map-mode .main.v28-scope .pikmin-toolbar .tag-filter {
  background: #f4f6f1 !important;
  color: #52614b !important;
  border: 1px solid rgba(96, 120, 80, 0.16) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.map-mode .main.v28-scope .pikmin-toolbar .tag-filter.active,
body.map-mode .main.v28-scope .pikmin-toolbar .tag-filter.is-active {
  background: #8fc96f !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body.map-mode #mapView.map-view {
  grid-template-columns: minmax(280px, 380px) minmax(360px, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

body.map-mode #mapList.map-list {
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: auto !important;
}

body.map-mode #mapList .map-list-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 0 !important;

  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(32, 41, 28, 0.10) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  outline: none !important;

  color: #1f2a1d !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
}

body.map-mode #mapList .map-list-item:hover {
  background: #f8faf5 !important;
  border-color: rgba(143, 201, 111, 0.42) !important;
  transform: none !important;
}

body.map-mode #mapList .map-list-item.active {
  background: #f2faed !important;
  border: 1px solid rgba(126, 190, 91, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(126, 190, 91, 0.32) !important;
  outline: none !important;
}

body.map-mode #mapList .map-list-item img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

body.map-mode #mapList .map-list-item > span {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body.map-mode #mapList .map-list-item strong {
  color: #1f2a1d !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  word-break: break-all !important;
}

body.map-mode #mapList .map-list-item span {
  color: #5f6b59 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body.map-mode #mapList .map-list-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

body.map-mode #mapList .category-badge {
  max-width: none !important;
  background: #eef4e7 !important;
  color: #4d6f3a !important;
  border: 1px solid rgba(126, 190, 91, 0.18) !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.map-mode .map-frame-wrap {
  box-shadow: none !important;
  border: 1px solid rgba(32, 41, 28, 0.08) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #fff !important;
}

@media (max-width: 1024px) {
  body.map-mode #mapView.map-view {
    grid-template-columns: 1fr !important;
  }

  body.map-mode #mapList.map-list {
    max-height: 42vh !important;
  }

  /* 手機地圖模式：放大清單卡片點擊熱區，避免縮圖太小難點 */
  body.map-mode #mapList .map-list-item {
    grid-template-columns: 86px 1fr !important;
    min-height: 102px !important;
    gap: 14px !important;
    padding: 12px 14px !important;
  }

  body.map-mode #mapList .map-list-item img {
    width: 86px !important;
    height: 86px !important;
    border-radius: 14px !important;
  }

  body.map-mode #mapList .map-list-item strong {
    font-size: 16px !important;
  }

  body.map-mode #mapList .map-list-item span {
    font-size: 13.5px !important;
  }
}


/* =========================================================
   V34.1 地圖模式：滑桿自動顯示 / 自動隱藏
   說明：
   - 預設隱藏 scrollbar
   - 使用者滾動時加上 .is-scrolling，滑桿顯示
   - 停止滾動後 JS 會移除 .is-scrolling，滑桿淡出
========================================================= */

/* 請讓地圖模式左側清單成為可滾動容器 */
.map-mode .map-list,
.map-mode .map-results,
.map-mode .postcard-list,
.map-mode .card-list,
.map-mode .map-sidebar,
.map-mode .left-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* WebKit / Chrome / Edge */
.map-mode .map-list::-webkit-scrollbar,
.map-mode .map-results::-webkit-scrollbar,
.map-mode .postcard-list::-webkit-scrollbar,
.map-mode .card-list::-webkit-scrollbar,
.map-mode .map-sidebar::-webkit-scrollbar,
.map-mode .left-panel::-webkit-scrollbar {
  width: 8px;
}

/* 預設隱藏 */
.map-mode .map-list::-webkit-scrollbar-thumb,
.map-mode .map-results::-webkit-scrollbar-thumb,
.map-mode .postcard-list::-webkit-scrollbar-thumb,
.map-mode .card-list::-webkit-scrollbar-thumb,
.map-mode .map-sidebar::-webkit-scrollbar-thumb,
.map-mode .left-panel::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

/* 滾動中顯示 */
.map-mode .map-list.is-scrolling,
.map-mode .map-results.is-scrolling,
.map-mode .postcard-list.is-scrolling,
.map-mode .card-list.is-scrolling,
.map-mode .map-sidebar.is-scrolling,
.map-mode .left-panel.is-scrolling {
  scrollbar-color: rgba(90, 90, 90, 0.55) transparent;
}

.map-mode .map-list.is-scrolling::-webkit-scrollbar-thumb,
.map-mode .map-results.is-scrolling::-webkit-scrollbar-thumb,
.map-mode .postcard-list.is-scrolling::-webkit-scrollbar-thumb,
.map-mode .card-list.is-scrolling::-webkit-scrollbar-thumb,
.map-mode .map-sidebar.is-scrolling::-webkit-scrollbar-thumb,
.map-mode .left-panel.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90, 0.55);
}

/* hover 時也顯示，方便桌機操作 */
.map-mode .map-list:hover,
.map-mode .map-results:hover,
.map-mode .postcard-list:hover,
.map-mode .card-list:hover,
.map-mode .map-sidebar:hover,
.map-mode .left-panel:hover {
  scrollbar-color: rgba(90, 90, 90, 0.45) transparent;
}

.map-mode .map-list:hover::-webkit-scrollbar-thumb,
.map-mode .map-results:hover::-webkit-scrollbar-thumb,
.map-mode .postcard-list:hover::-webkit-scrollbar-thumb,
.map-mode .card-list:hover::-webkit-scrollbar-thumb,
.map-mode .map-sidebar:hover::-webkit-scrollbar-thumb,
.map-mode .left-panel:hover::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90, 0.45);
}


/* =========================================================
   V34.2 地圖模式修正：左側清單真的可滾動 + 滑桿顯示
   目的：
   1. 地圖模式左側卡片區固定高度
   2. 卡片清單在左側內部滾動
   3. 滾動時顯示滑桿，不滾動時淡出
========================================================= */

/* 地圖模式主版面：避免整個頁面一起滾 */
body.map-mode,
.map-mode {
  min-height: 100vh;
}

/* 常見地圖模式外層：讓左右兩欄高度固定 */
.map-mode .map-layout,
.map-mode .map-mode-layout,
.map-mode .map-page,
.map-mode .map-container,
.map-mode .map-shell,
.map-mode #mapMode,
.map-mode #mapView,
.map-mode .view-map {
  height: calc(100vh - 96px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* 左側卡片欄：一定要有高度，滑桿才會出現 */
.map-mode .map-list,
.map-mode .map-results,
.map-mode .map-card-list,
.map-mode .postcard-list,
.map-mode .card-list,
.map-mode .map-sidebar,
.map-mode .left-panel,
.map-mode .map-left,
.map-mode .map-list-panel,
.map-mode #mapList,
.map-mode #mapResults,
.map-mode #postcardList {
  height: 100% !important;
  max-height: calc(100vh - 120px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 10px !important;
  scrollbar-gutter: stable !important;
}

/* 預設讓滑桿很淡，但不是完全沒有 */
.map-mode .map-list,
.map-mode .map-results,
.map-mode .map-card-list,
.map-mode .postcard-list,
.map-mode .card-list,
.map-mode .map-sidebar,
.map-mode .left-panel,
.map-mode .map-left,
.map-mode .map-list-panel,
.map-mode #mapList,
.map-mode #mapResults,
.map-mode #postcardList {
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 90, 90, 0.18) transparent;
}

/* Chrome / Edge / Safari */
.map-mode .map-list::-webkit-scrollbar,
.map-mode .map-results::-webkit-scrollbar,
.map-mode .map-card-list::-webkit-scrollbar,
.map-mode .postcard-list::-webkit-scrollbar,
.map-mode .card-list::-webkit-scrollbar,
.map-mode .map-sidebar::-webkit-scrollbar,
.map-mode .left-panel::-webkit-scrollbar,
.map-mode .map-left::-webkit-scrollbar,
.map-mode .map-list-panel::-webkit-scrollbar,
.map-mode #mapList::-webkit-scrollbar,
.map-mode #mapResults::-webkit-scrollbar,
.map-mode #postcardList::-webkit-scrollbar {
  width: 8px !important;
}

.map-mode .map-list::-webkit-scrollbar-track,
.map-mode .map-results::-webkit-scrollbar-track,
.map-mode .map-card-list::-webkit-scrollbar-track,
.map-mode .postcard-list::-webkit-scrollbar-track,
.map-mode .card-list::-webkit-scrollbar-track,
.map-mode .map-sidebar::-webkit-scrollbar-track,
.map-mode .left-panel::-webkit-scrollbar-track,
.map-mode .map-left::-webkit-scrollbar-track,
.map-mode .map-list-panel::-webkit-scrollbar-track,
.map-mode #mapList::-webkit-scrollbar-track,
.map-mode #mapResults::-webkit-scrollbar-track,
.map-mode #postcardList::-webkit-scrollbar-track {
  background: transparent !important;
}

.map-mode .map-list::-webkit-scrollbar-thumb,
.map-mode .map-results::-webkit-scrollbar-thumb,
.map-mode .map-card-list::-webkit-scrollbar-thumb,
.map-mode .postcard-list::-webkit-scrollbar-thumb,
.map-mode .card-list::-webkit-scrollbar-thumb,
.map-mode .map-sidebar::-webkit-scrollbar-thumb,
.map-mode .left-panel::-webkit-scrollbar-thumb,
.map-mode .map-left::-webkit-scrollbar-thumb,
.map-mode .map-list-panel::-webkit-scrollbar-thumb,
.map-mode #mapList::-webkit-scrollbar-thumb,
.map-mode #mapResults::-webkit-scrollbar-thumb,
.map-mode #postcardList::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90, 0.18) !important;
  border-radius: 999px !important;
}

/* 滾動中 / hover 顯示更清楚 */
.map-mode .is-scrolling,
.map-mode .map-list:hover,
.map-mode .map-results:hover,
.map-mode .map-card-list:hover,
.map-mode .postcard-list:hover,
.map-mode .card-list:hover,
.map-mode .map-sidebar:hover,
.map-mode .left-panel:hover,
.map-mode .map-left:hover,
.map-mode .map-list-panel:hover,
.map-mode #mapList:hover,
.map-mode #mapResults:hover,
.map-mode #postcardList:hover {
  scrollbar-color: rgba(75, 75, 75, 0.65) transparent !important;
}

.map-mode .is-scrolling::-webkit-scrollbar-thumb,
.map-mode .map-list:hover::-webkit-scrollbar-thumb,
.map-mode .map-results:hover::-webkit-scrollbar-thumb,
.map-mode .map-card-list:hover::-webkit-scrollbar-thumb,
.map-mode .postcard-list:hover::-webkit-scrollbar-thumb,
.map-mode .card-list:hover::-webkit-scrollbar-thumb,
.map-mode .map-sidebar:hover::-webkit-scrollbar-thumb,
.map-mode .left-panel:hover::-webkit-scrollbar-thumb,
.map-mode .map-left:hover::-webkit-scrollbar-thumb,
.map-mode .map-list-panel:hover::-webkit-scrollbar-thumb,
.map-mode #mapList:hover::-webkit-scrollbar-thumb,
.map-mode #mapResults:hover::-webkit-scrollbar-thumb,
.map-mode #postcardList:hover::-webkit-scrollbar-thumb {
  background: rgba(75, 75, 75, 0.65) !important;
}

/* 手機版：左側/清單高度改成視窗可用高度 */
@media (max-width: 1024px) {
  .map-mode .map-layout,
  .map-mode .map-mode-layout,
  .map-mode .map-page,
  .map-mode .map-container,
  .map-mode .map-shell,
  .map-mode #mapMode,
  .map-mode #mapView,
  .map-mode .view-map {
    height: calc(100vh - 72px) !important;
  }

  .map-mode .map-list,
  .map-mode .map-results,
  .map-mode .map-card-list,
  .map-mode .postcard-list,
  .map-mode .card-list,
  .map-mode .map-sidebar,
  .map-mode .left-panel,
  .map-mode .map-left,
  .map-mode .map-list-panel,
  .map-mode #mapList,
  .map-mode #mapResults,
  .map-mode #postcardList {
    max-height: calc(100vh - 96px) !important;
  }
}


/* =========================================================
   V35.8 頂部工具列六顆 pill（收藏冊 / 地圖 / 國家 / 花 / 蘑菇 / 隱藏）
   1) 一併壓過 V31.5 全站 button 漸層、陰影、hover 位移（含 view-button）
   2) 選取狀態只看 .active：bindTagFilterButtons 只切換 active，不會清 is-active，
      若用 :not(.is-active) 會讓「國家」永遠套不到灰色
   - 未選：灰色扁平；已選：綠色膠囊；:hover / :active 同樣扁平、不位移
========================================================= */
.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions > button.pikmin-pill:not(.active) {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #5a6156 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions > button.pikmin-pill.active {
  background: rgba(116, 184, 90, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(116, 184, 90, 0.1) !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions > button.pikmin-pill:not(.active):hover {
  background: #d8ddd4 !important;
  background-image: none !important;
  color: #4a5246 !important;
  border-color: #c5cbc0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions > button.pikmin-pill.active:hover {
  background: #6aac52 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #6aac52 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.main.v28-scope .pikmin-toolbar .pikmin-toolbar-actions > button.pikmin-pill:active {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* =========================================================
   V35.9 手機地圖模式：清單至少顯示 3 張卡片，再用內部滾動
   - 不改結構，只覆蓋窄螢幕高度分配
========================================================= */
@media (max-width: 1024px) {
  body.map-mode #mapView.map-view {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(320px, 1fr) !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.map-mode #mapList.map-list {
    height: clamp(320px, 45vh, 420px) !important;
    min-height: 320px !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* GPU Acceleration for smoother scrolling */
.postcard-card {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  content-visibility: auto; /* Only render what's near the viewport */
  contain-intrinsic-size: 300px 400px; /* Estimated size */
}

/* Ensure smooth momentum scrolling on iOS */
#grid, .map-list, .postcard-list {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Optimize heavy shadows during scroll */
.is-scrolling .postcard-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* =========================================================
   V36 卡片座標：固定單行，長座標自動縮字
========================================================= */
.v28-scope .postcard-coords,
.postcard-coords {
  display: block !important;
  min-width: 52% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.35 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.v28-scope .postcard-coords.coords-long,
.postcard-coords.coords-long {
  font-size: 14px !important;
}

.v28-scope .postcard-coords.coords-very-long,
.postcard-coords.coords-very-long {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

.v28-scope .postcard-taxonomy,
.postcard-taxonomy {
  margin-top: 9px !important;
}

/* =========================================================
   V35.9 FINAL BUTTON OVERRIDE (Forced Priority)
   ========================================================= */
#addCardBtn.primary-button,
#clearImageBtn,
#previewBox.upload-inline-preview #clearImageBtn,
.upload-inline-preview.preview-box #clearImageBtn {
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  margin-top: 50px !important;
  font-size: 18px !important; /* 統一調回稍微明顯一點的大小 */
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s ease !important;
  width: 100% !important;
}

#addCardBtn.primary-button {
  background: #74b85a !important;
  background-image: none !important;
}

#clearImageBtn,
#previewBox.upload-inline-preview #clearImageBtn,
.upload-inline-preview.preview-box #clearImageBtn {
  background: #94a3b8 !important; 
  margin-top: 12px !important;    
}

#addCardBtn.primary-button:hover,
#clearImageBtn:hover {
  opacity: 0.85 !important;
  transform: none !important;
}

#addCardBtn:disabled,
#clearImageBtn:disabled {
  opacity: 0.62 !important;
  cursor: not-allowed !important;
}

/* 常用國家快速按鈕樣式 */
.quick-country-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: #5a6156 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: var(--font-main) !important;
}

.quick-country-btn:hover {
  background: rgba(22, 204, 145, 0.2) !important;
  border-color: rgba(22, 204, 145, 0.3) !important;
}

.quick-country-btn:active {
  transform: scale(0.95) !important;
}

/* 公告欄樣式 */
.sidebar-notice {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  margin: 10px 4px 20px 4px !important;
  box-shadow: none !important;
}

.notice-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  color: #2f7438 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.notice-content {
  font-size: 13px !important;
  color: #747965 !important;
  line-height: 1.5 !important;
}


/* 調整圖片上傳區與公告欄的距離 */
#filePanel.upload-panel {
  margin-top: 10px !important;
}
/* V38: 修正側邊欄出現時右下角出現重複 + 按鈕的問題 */
/* 在桌機模式 (>= 1024px) 且非瀏覽模式時，強制隱藏右下角的加號 */
@media (min-width: 1024px) {
  html body #mobileUploadFab,
  html body .mobile-upload-fab {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 如果進入瀏覽模式 (側邊欄會消失)，則不論螢幕寬度都要把功能鈕帶回來 (若有需要) */
/* 但目前的瀏覽模式邏輯是隱藏所有上傳功能，所以保持隱藏即可 */
body.is-browse-mode #mobileUploadFab {
  display: none !important;
}
.postcard-like-inline {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 4px 10px !important;
  margin-left: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  color: #444 !important;
}

.postcard-like-inline:hover {
  transform: translateY(-1px) scale(1.05) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

.postcard-like-inline .like-count {
  margin-left: 4px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #555 !important;
}

.postcard-like-inline.active {
  background: rgba(255, 255, 255, 0.7) !important;
}

.modal-like-count {
  margin-left: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  opacity: 0.9 !important;
}

/* --- UI 修復與優化：強制扁平化與分享鈕美化 --- */

/* 1. 強制移除所有愛心按鈕陰影 (扁平化) */
.modal-heart-btn, 
#modalLikeBtn, 
.postcard-like-inline,
.postcard-like-inline:hover,
.modal-heart-btn:hover {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. 為分享按鈕加入陰影與背景 (Pill 樣式) */
.modal-share-icon, 
#modalShareCardBtn {
  background: white !important;
  border: none !important;
  border-radius: 999px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  margin-left: -5px !important;
}

.modal-share-icon:hover {
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
}

.modal-share-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: #78c96b !important; /* 綠色圖示呼應系統色 */
}

/* 強制修正標籤位置向右移動 5px */


/* === Review System Styles === */
.review-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  color: white;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  pointer-events: none;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.review-badge--pending { background: #f59e0b; }
.review-badge--approved { background: #10b981; }
.review-badge--members { background: #8b5cf6; } /* 紫色表示會員 */
.review-badge--rejected { 
  background: #ef4444; 
  width: calc(100% - 20px); 
  text-align: center;
  font-size: 10px;
}
.review-badge--hidden { background: #6b7280; }

.review-action-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: space-around;
  padding: 8px 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 20;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.postcard-photo:hover .review-action-bar { opacity: 1; }

.review-btn {
  border: 0;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
  color: white;
}
.review-btn:hover { transform: scale(1.05); }
.review-btn:active { transform: scale(0.95); }

.review-btn--approve { background: #10b981; }
.review-btn--members { background: #8b5cf6; } /* 會員 */
.review-btn--reject { background: #f59e0b; }
.review-btn--delete { background: #ef4444; }
.review-btn--hide { background: #6b7280; }
.review-btn--approve:hover { background: #059669; }
.review-btn--reject:hover { background: #d97706; }
.review-btn--delete:hover { background: #dc2626; }
.review-btn--hide:hover { background: #4b5563; }

/* 強制修正標籤位置向右移動 5px */