/* ==================== 匠心媒合 CraftMatch 設計系統與樣式表 ==================== */

/* 1. 設計變數與全域設定 */
:root {
  /* 背景與容器 */
  --bg-main: #faf7f4;           /* 北歐奶油淡棕背景 (溫和舒適) */
  --bg-card: #ffffff;           /* 純白卡片 */
  --bg-sand: #efe9e2;           /* 砂質暖褐邊框線 (Stone 200 配色) */
  --bg-input: #fdfbf9;          /* 輸入框背景 */

  /* 品牌色與重點色 (木質人文淡棕色系) */
  --color-primary: #c8b195;     /* 柔和駝砂色 (主色調，不刺眼) */
  --color-primary-light: #f7f3ee;/* 淺砂色 (Hover 底色) */
  --color-primary-dark: #8c7355;  /* 熟褐木棕 (主要 Hover) */
  --color-text: #3e3327;        /* 深咖啡黑褐 (比純黑更溫柔，閱讀極佳) */
  --color-text-secondary: #8c7b6a;/* 中褐木灰 (次要字體) */

  /* 狀態指示色 (大自然降飽和色系，絕無亮色) */
  --color-verified: #7d8c77;     /* 靜謐橄欖綠 (已驗證標章，安全沉穩) */
  --color-alert: #b45309;        /* 陶土磚橘 (警告標章，溫和警示) */
  --color-ads: #e3dcd3;          /* 廣告邊框色 (與沙灘灰相近) */

  /* 字體與版面 */
  --font-family: 'Outfit', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-lg: 12px;
  --radius-md: 6px;
  --shadow-sm: 0 2px 6px rgba(62, 51, 39, 0.02);
  --shadow-md: 0 8px 20px rgba(62, 51, 39, 0.04);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* 捲軸美化 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-md);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

/* 2. 主導覽列 */
.navbar {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--bg-sand);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  height: 60px; /* 緊湊高度 */
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

.logo i {
  color: var(--color-primary-dark);
  font-size: 26px;
}

.logo small {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 5px;
}

/* 角色切換開關 */
.role-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.role-label {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.toggle-btn-group {
  display: flex;
  background-color: var(--bg-sand);
  padding: 4px;
  border-radius: var(--radius-md);
}

.role-btn {
  border: none;
  background: none;
  padding: 8px 16px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.role-btn.active {
  background-color: var(--bg-card);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* API 設定按鈕 */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.api-settings-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all var(--transition);
}

.api-settings-btn:hover {
  background-color: var(--bg-sand);
  color: var(--color-primary-dark);
  transform: rotate(30deg);
}

/* 3. 廣告欄位佈局 */

/* Leaderboard 頂部橫幅廣告 */
.ads-container {
  max-width: 1200px;
  margin: 15px auto 0;
  padding: 0 20px;
}

.ads-leaderboard {
  background-color: #f7f1eb;
  border: 1px dashed var(--color-ads);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  overflow: hidden;
}

.ads-leaderboard:hover {
  background-color: #f0e6dc;
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.ads-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-ads);
  color: var(--color-text);
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-bottom-right-radius: 4px;
  text-transform: uppercase;
}

.ads-content {
  margin-left: 65px;
  display: flex;
  flex-direction: column;
}

.ads-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
}

.ads-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.ads-action-btn {
  background-color: var(--color-text);
  color: #ffffff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.ads-action-btn:hover {
  background-color: var(--color-primary-dark);
}

/* Skyscraper 側邊摩天大樓廣告 */
.ads-skyscraper {
  background-color: #fcf8f4;
  border: 1px dashed var(--color-ads);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 400px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.ads-skyscraper:hover {
  background-color: #f7efe6;
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ads-skyscraper .ads-tag {
  border-top-left-radius: var(--radius-lg);
}

.ads-brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-primary-dark);
  margin-top: 15px;
  text-align: center;
}

.ads-headline {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 15px 0 10px;
  text-align: center;
}

.ads-copy {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.5;
}

.ads-visual-box {
  background-color: var(--bg-sand);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  color: var(--color-text);
  font-size: 40px;
  transition: var(--transition);
}

.ads-skyscraper:hover .ads-visual-box {
  background-color: var(--color-primary-light);
  transform: rotate(15deg);
}

.ads-skyscraper-btn {
  width: 100%;
  background-color: var(--color-primary-dark);
  color: #ffffff;
  border: none;
  padding: 10px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}

.ads-skyscraper:hover .ads-skyscraper-btn {
  background-color: var(--color-text);
}

/* Native Inline Ad (資訊流原生廣告) */
.card.ads-native-slot {
  border: 1px dashed var(--color-ads);
  background-color: #faf6f1;
  min-height: 120px;
  position: relative;
  overflow: hidden;
  padding: 15px;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
}

.card.ads-native-slot:hover {
  background-color: #f5ece2;
  border-color: var(--color-primary-dark);
}

/* 4. 主要排版 (三欄式佈局) */
.main-layout {
  max-width: 1200px;
  margin: 12px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 280px 1fr 300px; /* 稍微縮窄右側欄 */
  gap: 16px; /* 緊湊間距 */
}

/* 左側篩選與廣告 */
.sidebar-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px; /* 緊湊內距 */
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bg-sand);
}

/* 中間內容流 */
.main-feed {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 縮小卡片間距 */
}

.feed-header {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bg-sand);
}

.tab-group {
  display: flex;
  width: 100%;
}

.tab-link {
  flex: 1;
  border: none;
  background: none;
  padding: 12px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}

.tab-link.active {
  background-color: var(--color-primary-light);
  color: var(--color-text);
}

/* 卡片列表 */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 5. 卡片基本樣式 */
.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px; /* 緊湊內距 */
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bg-sand);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* 案件卡片細節 */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.card-title-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title {
  font-size: 15.5px !important;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.2px;
}

.badge-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: var(--bg-sand);
  color: var(--color-text-secondary);
}

.badge-tag.water-electricity { background-color: #e9eff5; color: #3b4a5a; }
.badge-tag.paint { background-color: #faf2ee; color: #704f38; }
.badge-tag.cleaning { background-color: #f2f5f1; color: #4c5746; }
.badge-tag.renovation { background-color: #faf6f0; color: #6e5c4a; }

.card-meta {
  font-size: 11.5px !important;
  color: var(--color-text-secondary);
  display: flex;
  gap: 8px !important;
  margin-top: 4px;
}

.card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--bg-main) !important;
  padding: 2.5px 8px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  font-weight: 500;
}

.card-budget {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--color-primary-dark) !important;
  background-color: var(--color-primary-light) !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid rgba(93, 64, 55, 0.08) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(62, 51, 39, 0.02);
}

.card-body {
  font-size: 13px !important;
  color: var(--color-text);
  line-height: 1.6 !important;
}

.card-images-row {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.card-img-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-sand);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-sand);
}

/* 師傅卡片細節 */
.contractor-card-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
}

.contractor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--bg-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--color-text-secondary);
  border: 2px solid var(--color-primary);
  overflow: hidden;
}

.contractor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contractor-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contractor-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.verified-badge {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--color-verified);
  padding: 2px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.warning-badge {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--color-alert);
  padding: 2px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.rating-stars {
  color: #ffb300;
}

.contractor-spec-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.spec-tag {
  background-color: var(--color-primary-light);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 6. 右側管理面版 */
.sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px; /* 緊湊內距 */
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bg-sand);
}

.section-title, .panel-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-sand);
}

.panel-title.alert-title {
  color: var(--color-text);
}

.panel-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: 15px;
}

.my-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.my-list-item {
  background-color: var(--bg-main);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-sand);
  font-size: 13px;
}

.my-list-item-title {
  font-weight: 700;
  color: var(--color-text);
}

.my-list-item-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}

/* 展開師傅感興趣清單 */
.interested-list-box {
  margin-top: 8px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-sand);
  padding: 10px;
}

.interested-contractor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-sand);
}

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

.con-mini-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.con-mini-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.con-mini-score {
  font-size: 10px;
  color: var(--color-text-secondary);
}

/* 師傅個人資料卡 */
.con-profile-card {
  background-color: var(--bg-main);
  padding: 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-sand);
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.con-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.con-score-display {
  font-size: 24px;
  font-weight: 800;
}

.con-score-display.green { color: var(--color-verified); }
.con-score-display.yellow { color: #f59e0b; }
.con-score-display.red { color: var(--color-alert); }

/* 7. 按鈕樣式 */
.action-btn-primary {
  width: 100%;
  background-color: var(--color-primary-dark);
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}

.action-btn-primary:hover {
  background-color: var(--color-text);
  transform: translateY(-1px);
}

.action-btn-primary.full-width {
  width: 100%;
}

.action-btn-primary.alert-btn {
  background-color: var(--color-alert);
}
.action-btn-primary.alert-btn:hover {
  background-color: #9a3412;
}

.action-btn-outline {
  background: none;
  border: 1.5px solid var(--color-primary);
  color: var(--color-text);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.action-btn-outline:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-dark);
}

.action-btn-outline.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
}

.action-btn-outline.alert-outline {
  border-color: var(--color-alert);
  color: var(--color-alert);
}
.action-btn-outline.alert-outline:hover {
  background-color: #faf2ee;
  border-color: var(--color-alert);
}

/* 分類篩選按鈕組 */
.category-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 稍微縮小間距，更加緊湊 */
  margin-top: 8px;
}

.cat-btn {
  text-align: left;
  border: 1px solid var(--bg-sand);
  background-color: var(--bg-input);
  padding: 10px 14px; /* 更加緊湊 */
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.cat-btn i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  transition: var(--transition);
}

.cat-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  transform: scaleY(0);
  transition: var(--transition);
}

.cat-btn:hover, .cat-btn.active {
  color: var(--color-text);
  padding-left: 18px;
}

.cat-btn:hover::before, .cat-btn.active::before {
  transform: scaleY(1);
}

.cat-btn:hover i, .cat-btn.active i {
  transform: scale(1.1);
}

/* 分類專屬色彩設計 (樸實沉穩降亮色系) */
.cat-btn[data-category="all"]::before { background-color: var(--color-primary-dark); }
.cat-btn[data-category="all"]:hover i, .cat-btn[data-category="all"].active i { color: var(--color-primary-dark); }
.cat-btn[data-category="all"]:hover, .cat-btn[data-category="all"].active { background-color: var(--color-primary-light); border-color: var(--color-primary-dark); }

.cat-btn[data-category="water-electricity"]::before { background-color: #5a6a7c; }
.cat-btn[data-category="water-electricity"]:hover i, .cat-btn[data-category="water-electricity"].active i { color: #5a6a7c; }
.cat-btn[data-category="water-electricity"]:hover, .cat-btn[data-category="water-electricity"].active { background-color: #f0f4f7; border-color: #5a6a7c; }

.cat-btn[data-category="paint"]::before { background-color: #a37d65; }
.cat-btn[data-category="paint"]:hover i, .cat-btn[data-category="paint"].active i { color: #a37d65; }
.cat-btn[data-category="paint"]:hover, .cat-btn[data-category="paint"].active { background-color: #faf2ee; border-color: #a37d65; }

.cat-btn[data-category="cleaning"]::before { background-color: var(--color-verified); }
.cat-btn[data-category="cleaning"]:hover i, .cat-btn[data-category="cleaning"].active i { color: var(--color-verified); }
.cat-btn[data-category="cleaning"]:hover, .cat-btn[data-category="cleaning"].active { background-color: #f4f6f3; border-color: var(--color-verified); }

.cat-btn[data-category="renovation"]::before { background-color: #a69a8f; }
.cat-btn[data-category="renovation"]:hover i, .cat-btn[data-category="renovation"].active i { color: #a69a8f; }
.cat-btn[data-category="renovation"]:hover, .cat-btn[data-category="renovation"].active { background-color: #faf8f6; border-color: #a69a8f; }

.cat-btn[data-category="other"]::before { background-color: var(--color-text-secondary); }
.cat-btn[data-category="other"]:hover i, .cat-btn[data-category="other"].active i { color: var(--color-text-secondary); }
.cat-btn[data-category="other"]:hover, .cat-btn[data-category="other"].active { background-color: #faf8f6; border-color: var(--color-text-secondary); }

/* 8. 表單元素與搜尋 */
.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.required {
  color: var(--color-alert);
}

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 10px 35px 10px 14px;
  border: 1.5px solid var(--bg-sand);
  background-color: var(--bg-input);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition: var(--transition);
}

.search-box input:focus {
  border-color: var(--color-primary);
  background-color: #ffffff;
}

.search-box i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
}

select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="tel"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--bg-sand);
  background-color: var(--bg-input);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition: var(--transition);
}

select:focus, textarea:focus, input:focus {
  border-color: var(--color-primary);
  background-color: #ffffff;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.field-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: -2px;
}

/* 智慧預算建議區 */
.budget-ai-box {
  background-color: #faf6f0;
  border: 1.5px solid var(--bg-sand);
  border-radius: var(--radius-lg);
  padding: 15px;
  margin-bottom: 16px;
}

.budget-ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
}

.ai-btn {
  background-color: var(--color-text);
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}

.ai-btn:hover {
  background-color: var(--color-primary-dark);
}

.budget-cache-hint {
  margin-top: 10px;
  background-color: var(--color-primary-light);
  border-left: 4px solid var(--color-primary-dark);
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.budget-gemini-hint {
  margin-top: 10px;
  background-color: var(--color-primary-light);
  border-left: 4px solid var(--color-primary-dark);
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text);
}

.budget-gemini-title {
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.budget-gemini-footer {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  border-top: 1px dashed var(--bg-sand);
  padding-top: 4px;
}

.ai-loading {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-primary);
  border-top-color: var(--color-primary-dark);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.ai-report-container {
  margin-top: 12px;
  border-top: 1px dashed var(--color-primary);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-report-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-primary-dark);
}

.ai-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px;
}

.ai-report-item {
  background-color: var(--bg-card);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--bg-sand);
}

.ai-report-item span {
  display: block;
}

.ai-report-item span:first-child {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.ai-report-item span:last-child {
  font-weight: 700;
  font-size: 14px;
}

.ai-report-item.full-width {
  grid-column: span 2;
}

.budget-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-symbol {
  position: absolute;
  left: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.budget-input-wrapper input {
  padding-left: 55px;
}

/* 模擬檔案上傳區域 */
.file-drop-area {
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.file-drop-area:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-dark);
}

.file-drop-area i {
  font-size: 32px;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
  display: block;
}

.file-drop-area span {
  font-size: 13px;
  font-weight: 500;
}

.file-input-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.img-preview-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.img-preview-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-primary);
}

.checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background-color: var(--bg-input);
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--bg-sand);
}

.checkbox-group label {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* 9. 彈出視窗 (Modals) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(93, 64, 55, 0.4);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  box-shadow: var(--shadow-md);
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--bg-sand);
}

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

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--bg-sand);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #faf6f1;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header h2 i {
  color: var(--color-primary-dark);
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.modal-close:hover {
  color: var(--color-text);
}

.modal-body {
  padding: 20px;
}

.readonly-input {
  background-color: var(--bg-sand);
  cursor: not-allowed;
  font-weight: 600;
}



/* ==================== 10. 響應式排版 (Responsive Breakpoints) ==================== */
@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 240px 1fr;
  }
  .sidebar-right {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }
  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* 隱藏手機頂部冗餘的登入按鈕與切換大廳文字，改由底部導覽列承載 */
  .auth-status-container {
    display: none !important;
  }
  .role-label {
    display: none !important;
  }

  .navbar-container {
    flex-direction: row !important;
    justify-content: space-between !important;
    height: 60px !important;
    padding: 0 12px !important;
    gap: 0 !important;
  }
  
  .navbar {
    height: 60px !important;
  }

  .navbar-right {
    flex-direction: row !important;
    width: auto !important;
    gap: 5px !important;
  }

  .role-selector {
    gap: 0 !important;
  }

  .role-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }

  .main-layout {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .sidebar-left, .sidebar-right {
    grid-column: span 1;
  }

  /* 營運指標卡片改為橫向三欄，省下垂直高度，版面更精緻 */
  .portal-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .portal-stats-grid .stat-num {
    font-size: 14px !important;
  }
  .portal-stats-grid .stat-label {
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  .ads-container {
    padding: 0 10px;
  }

  .ads-leaderboard {
    padding: 10px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* 強制動態廣告內部元素垂直排列防溢出 */
  .ads-leaderboard-slot > div {
    flex-direction: column !important;
    height: auto !important;
    padding: 10px !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .ads-leaderboard-slot img {
    max-width: 100% !important;
    height: auto !important;
  }

  .ads-content {
    margin-left: 0;
  }

  .ads-action-btn {
    width: 100%;
  }

  .ads-skyscraper {
    min-height: auto;
    padding: 15px;
  }

  .form-row-2, .form-row-3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* 頁尾改為單欄排列 */
  .footer-container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 20px !important;
  }
}

/* 13. 頁尾免責與廣告合作樣式 */
.site-footer {
  background-color: var(--bg-main); /* 使用主頁背景色，不要額外突兀色 */
  border-top: 1px solid var(--bg-sand); /* 使用冷灰邊框線 */
  padding: 24px 20px; /* 緊湊內距 */
  margin-top: 24px;  /* 緊湊外距 */
  font-family: var(--font-family);
  color: var(--color-text);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr;
  gap: 24px; /* 緊湊間距 */
}

.footer-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-section p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
  font-size: 12.5px;
}

.footer-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.footer-links a:hover {
  color: var(--color-primary-dark);
}

.footer-contact {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.footer-contact a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(93, 64, 55, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.info-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.info-btn:hover {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
}

/* 合作說明彈窗內的頁籤導覽 */
.coop-tabs {
  display: flex;
  border-bottom: 1px solid var(--bg-sand);
  margin-bottom: 15px;
  gap: 10px;
}

.coop-tab-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}

.coop-tab-btn.active {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
}

.coop-content-pane {
  display: none;
  line-height: 1.6;
  font-size: 13px;
  color: var(--color-text);
}

.coop-content-pane.active {
  display: block;
}

.ad-negotiate-card {
  background-color: #faf6f1;
  border-left: 4px solid var(--color-primary);
  padding: 12px;
  margin-top: 15px;
  border-radius: 6px;
}

.ad-negotiate-card h4 {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}

.ad-negotiate-card ul {
  padding-left: 18px;
  margin: 0;
}

.ad-negotiate-card li {
  margin-bottom: 5px;
  color: var(--color-text-secondary);
}

/* ==================== 8. 雙大廳分離與互動式工具廣告樣式 ==================== */

/* 雙大廳主題變更 (師傅大廳切換為專業高信賴石木灰褐色調) */
body.portal-contractor {
  --color-primary: #9c8e7e;       /* 灰木褐/暖灰褐色 (主色調) */
  --color-primary-light: #f5f3f0; /* 淺木灰 (Hover 底色) */
  --color-primary-dark: #6e6052;  /* 深褐木色 (主要 Hover) */
  --color-text: #3e3327;          /* 保持一致 */
  --color-text-secondary: #8c7b6a;/* 保持一致 */
  --bg-sand: #efe9e2;
}

/* 大廳 Banner 橫幅 */
.portal-header-banner {
  background: linear-gradient(135deg, var(--bg-sand) 0%, var(--bg-card) 100%);
  padding: 16px 20px; /* 緊湊內距 */
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.08); /* 使用冷灰邊框 */
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

body.portal-contractor .portal-header-banner {
  border-color: rgba(69, 90, 100, 0.12);
}

.portal-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

.portal-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--color-primary-dark);
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.portal-title-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  border: none !important;
  padding: 0 !important;
}

.portal-desc-text {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* 平台營運指標數據小卡樣式 */
.portal-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 緊湊間距 */
  margin-top: 12px;
  width: 100%;
}

.stat-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 8px 4px; /* 緊湊內距 */
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.01);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: 16px; /* 稍微縮小字級 */
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

.stat-label {
  font-size: 10.5px; /* 稍微縮小字級 */
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-top: 2px;
}

/* 互動式工具廣告卡片容器 (側邊欄廣告專用) */
.ad-widget-container {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-main) 100%);
  padding: 25px 20px;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  position: relative;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--color-primary);
  text-align: left;
  transition: var(--transition);
}

.ad-widget-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ad-widget-sponsor-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-primary-dark);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-bottom-right-radius: 8px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.ad-widget-header {
  margin-top: 10px;
  border-bottom: 1px dashed var(--color-primary);
  padding-bottom: 12px;
}

.ad-widget-logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ad-widget-logo-icon {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.ad-widget-sponsor-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
}

.ad-widget-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

/* 互動工具主體 */
.ad-widget-body {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.ad-widget-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ad-widget-label span.value-badge {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.ad-widget-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ad-widget-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 13.5px;
  color: var(--color-text);
  background-color: #ffffff;
  outline: none;
  transition: var(--transition);
}

.ad-widget-input:focus {
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* 範圍滑桿美化 */
.ad-widget-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-primary-light);
  outline: none;
  margin: 8px 0;
}

.ad-widget-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  cursor: pointer;
  transition: var(--transition);
}

.ad-widget-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* 計算結果面板 */
.ad-widget-result-box {
  background-color: var(--color-primary-light);
  border: 1px solid rgba(93, 64, 55, 0.08);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  margin-top: 5px;
}

.ad-widget-result-title {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: 2px;
}

.ad-widget-result-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
}

.ad-widget-result-desc {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* 行動按鈕 */
.ad-widget-btn {
  width: 100%;
  background-color: var(--color-primary-dark);
  color: #ffffff;
  border: none;
  padding: 10px 15px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: var(--transition);
}

.ad-widget-btn:hover {
  background-color: var(--color-text);
  transform: translateY(-1px);
}

/* 互動工具微動畫與精緻化 */
.ad-widget-btn i {
  transition: transform 0.2s ease;
}

.ad-widget-btn:hover i {
  transform: scale(1.15) rotate(-5deg);
}

.palong-coupon-highlight {
  color: var(--color-text-secondary);
  background-color: var(--color-primary-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 700;
  border: 1px dashed var(--bg-sand);
  font-size: 13px;
  display: inline-block;
  margin: 0 2px;
}

/* 沛榮水電特約品牌廣告卡片樣式 */
.palong-ad-brand-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--bg-main) 100%);
  border: 1.5px solid var(--bg-sand);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  position: relative;
  box-shadow: 0 4px 15px rgba(62, 51, 39, 0.02);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  transition: var(--transition);
}

.palong-ad-brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(62, 51, 39, 0.04);
  border-color: var(--color-primary);
}

.palong-ad-brand-card .ticket-divider {
  height: 0;
  border-top: 1.5px dashed var(--bg-sand);
  margin: 4px -16px;
  position: relative;
}

/* 票券左右半圓缺角 */
.palong-ad-brand-card .ticket-divider::before,
.palong-ad-brand-card .ticket-divider::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: var(--bg-main);
  border: 1.5px solid var(--bg-sand);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition);
  z-index: 2;
}

.palong-ad-brand-card .ticket-divider::before {
  left: -8px;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}

.palong-ad-brand-card .ticket-divider::after {
  right: -8px;
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

.palong-ad-brand-card:hover .ticket-divider::before,
.palong-ad-brand-card:hover .ticket-divider::after {
  border-color: var(--color-primary);
}

.palong-ad-brand-card:hover .ticket-divider {
  border-top-color: var(--color-primary);
}

/* 官方特約徽章與 logo */
.ad-brand-sponsor-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-text-secondary) 100%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  border-bottom-right-radius: 8px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(62, 51, 39, 0.05);
}

.ad-brand-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.ad-brand-logo-icon {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(62, 51, 39, 0.1);
}

.ad-brand-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.ad-brand-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 2px 0;
}

/* 互動式票券優惠區 */
.palong-ticket-coupon-container {
  display: flex;
  background: linear-gradient(135deg, var(--bg-main) 0%, var(--color-primary-light) 100%);
  border: 1px dashed var(--bg-sand);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 6px rgba(62, 51, 39, 0.02);
}

.palong-ticket-coupon-container:hover {
  transform: scale(1.02);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(62, 51, 39, 0.04);
}

.palong-ticket-percent {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-secondary) 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-weight: 900;
  min-width: 60px;
  text-align: center;
}

.palong-ticket-percent .percent-num {
  font-size: 20px;
  line-height: 1;
}

.palong-ticket-percent .percent-symbol {
  font-size: 11px;
  margin-top: 2px;
}

.palong-ticket-info {
  flex-grow: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: left;
}

.ticket-cond {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ticket-code-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.ticket-code {
  font-family: 'Outfit', monospace;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.ticket-copy-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background-color: rgba(140, 123, 106, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

.palong-ticket-coupon-container:hover .ticket-copy-btn {
  background-color: var(--color-primary-dark);
  color: #ffffff;
}

/* 複製成功的狀態樣式 */
.palong-ticket-coupon-container.copied {
  background: linear-gradient(135deg, #f4f6f3 0%, #e8ebe6 100%);
  border-color: var(--color-verified);
  box-shadow: 0 4px 12px rgba(125, 140, 119, 0.1);
}

.palong-ticket-coupon-container.copied .palong-ticket-percent {
  background: linear-gradient(135deg, #8c9b87 0%, var(--color-verified) 100%);
}

.palong-ticket-coupon-container.copied .ticket-cond {
  color: var(--color-verified);
}

.palong-ticket-coupon-container.copied .ticket-code {
  color: #3e473b;
}

.palong-ticket-coupon-container.copied .ticket-copy-btn {
  background-color: var(--color-verified);
  color: #ffffff;
}

/* 前往商城按鈕 */
.ad-brand-btn {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-secondary) 100%);
  color: #ffffff;
  border: none;
  padding: 10px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(140, 123, 106, 0.15);
  transition: var(--transition);
}

.ad-brand-btn:hover {
  background: linear-gradient(135deg, var(--color-text-secondary) 0%, var(--color-text) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(140, 123, 106, 0.25);
}

.ad-brand-btn i {
  transition: transform 0.2s ease;
}

.ad-brand-btn:hover i {
  transform: translate(2px, -2px);
}

/* --- 安心保障流程與問答區樣式 (Release-Ready Polish) --- */
.trust-steps-section {
  margin-top: 16px; /* 緊縮間距 */
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px; /* 緊縮內距 */
  border: 1px solid var(--bg-sand);
  box-shadow: var(--shadow-sm);
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* 連接虛線 */
.step-item:not(:last-child)::after {
  content: "➔";
  position: absolute;
  right: -12px;
  top: 10px;
  font-size: 16px;
  color: var(--color-primary);
}

.step-badge {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: 'Outfit', sans-serif;
  font-size: 14px; /* 縮小字級 */
  font-weight: 800;
  width: 32px; /* 縮小圓圈 */
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.step-item h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.step-item p {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  padding: 0 4px;
}

/* 折疊式常見問答 FAQ */
.faq-accordion-section {
  margin-top: 16px; /* 緊縮間距 */
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px; /* 緊縮內距 */
  border: 1px solid var(--bg-sand);
  box-shadow: var(--shadow-sm);
}

.faq-item {
  border-bottom: 1px solid var(--bg-sand);
  padding: 12px 0; /* 緊縮內距 */
  cursor: pointer;
  transition: var(--transition);
}

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

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 13.5px; /* 稍微縮小字級 */
  color: var(--color-text);
  gap: 15px;
}

.faq-question span {
  transition: var(--transition);
}

.faq-item:hover .faq-question span {
  color: var(--color-primary-dark);
}

.faq-arrow {
  color: var(--color-text-secondary);
  font-size: 11px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-answer p {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding-top: 8px;
}

/* 當展開時的狀態類別 */
.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: var(--color-primary-dark);
}

.faq-item.active .faq-answer {
  max-height: 200px;
  opacity: 1;
}

/* 師傅大廳主題下的安心保障樣式變更 */
body.portal-contractor .step-badge {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

body.portal-contractor .faq-item:hover .faq-question span,
body.portal-contractor .faq-item.active .faq-arrow {
  color: var(--color-primary-dark);
}

/* 響應式微調 */
@media (max-width: 768px) {
  .steps-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
  }
  .step-item {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .step-item:not(:last-child)::after {
    content: "▼" !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -24px !important;
    top: auto !important;
    right: auto !important;
  }
}

/* 全新動畫效果：卡片進入效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* ==================== 11. 手機版底部導覽列與排版優化 ==================== */

/* 預設隱藏手機底部導覽列 */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto; /* 改為自適應高度，容納安全區域 */
  min-height: 68px;
  padding-top: 8px;
  padding-bottom: calc(env(safe-area-inset-bottom, 12px) + 8px); /* 為行動裝置底部操作條留出完美餘裕 */
  background-color: var(--bg-card);
  border-top: 1px solid var(--bg-sand);
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 -6px 22px rgba(62, 51, 39, 0.08); /* 強化立體懸浮陰影 */
}

.mobile-bottom-nav .nav-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 11px; /* 稍微放大字型 */
  font-weight: 700;
  cursor: pointer;
  width: 25%;
  height: 100%;
  transition: var(--transition);
}

.mobile-bottom-nav .nav-btn i {
  font-size: 20px; /* 稍微放大圖標 */
  transition: var(--transition);
}

.mobile-bottom-nav .nav-btn:hover,
.mobile-bottom-nav .nav-btn.active {
  color: var(--color-primary-dark);
}

.mobile-bottom-nav .nav-btn.active i {
  transform: translateY(-2px);
  font-size: 22px; /* 作用中圖標稍微擴大以茲識別 */
}

/* 我要發案 - 懸浮高亮按鈕 */
.mobile-bottom-nav .nav-btn.highlight-btn {
  color: var(--color-primary-dark);
}
.mobile-bottom-nav .nav-btn.highlight-btn i {
  font-size: 26px; /* 更大更醒目 */
  color: var(--color-primary-dark);
}
.mobile-bottom-nav .nav-btn.highlight-btn:hover i {
  transform: scale(1.1);
}

/* 手機版排版覆寫與優化 */
@media (max-width: 768px) {
  /* 顯示底部導覽列 */
  .mobile-bottom-nav {
    display: flex;
  }

  /* 留出足夠的手機版底部導覽列高度，防內容被遮住 */
  body {
    padding-bottom: 115px !important;
  }

  /* 防止廣告容器在手機版設定固定高度與剪裁，導致內容被截斷 */
  .ads-skyscraper-slot, .ads-leaderboard-slot {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
  }

  .ad-widget-container {
    height: auto !important;
    min-height: auto !important;
    padding: 20px 16px !important;
  }

  .palong-ad-brand-card {
    height: auto !important;
  }

  /* 分類篩選改為橫向滾動 */
  .category-buttons {
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 6px 2px 12px 2px !important;
    gap: 8px !important;
    width: 100% !important;
    scrollbar-width: none !important; /* Firefox */
  }

  .category-buttons::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari */
  }

  .cat-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .cat-btn::before {
    left: 0;
    top: auto;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform: scaleY(1) scaleX(0) !important;
    transform-origin: center !important;
  }

  .cat-btn:hover::before, .cat-btn.active::before {
    transform: scaleY(1) scaleX(1) !important;
  }

  .cat-btn:hover, .cat-btn.active {
    padding-left: 14px !important; /* 避免橫向排版時 Padding 縮排造成跳動 */
  }

  /* 搜尋關鍵字與地區選擇並排，省下直向空間 */
  .filter-card .form-group:nth-child(2),
  .filter-card .form-group:nth-child(3) {
    display: inline-block;
    width: calc(50% - 6px);
    vertical-align: top;
    margin-bottom: 12px;
  }

  .filter-card .form-group:nth-child(2) {
    margin-right: 12px;
  }
}

/* ==================== 12. 廣告容器 placeholder 動態解鎖與防裁切 ==================== */
.ads-skyscraper-slot:not(:empty),
.ads-leaderboard-slot:not(:empty) {
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ==================== 13. 行動版/直式平板 (<=768px) 額外防裁剪優化 ==================== */
@media (max-width: 768px) {
  /* 頂部 Leaderboard 內部 Flex 容器優化，防止文字擠壓 */
  .ads-leaderboard-slot > div {
    padding: 24px 12px 12px 12px !important; /* 為絕對定位的 tags 預留高度 */
  }

  .ads-leaderboard-slot div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .ads-leaderboard-slot div[style*="text-align: left"] {
    text-align: center !important;
  }

  /* 按鈕在手機版改為 100% 寬度，更容易點選且不溢出 */
  .ads-leaderboard-slot a {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 5px !important;
    box-sizing: border-box !important;
  }

  /* 師傅卡片評分行與信譽度，避免在窄寬度下單行溢出 */
  .rating-row {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }

  /* 彈出視窗（Modal）防遮擋與自適應滾動優化 */
  .modal-content {
    max-width: calc(100% - 24px) !important;
    margin: 12px !important;
    max-height: 85vh !important;
  }
  
  .modal-header, .modal-body {
    padding: 15px !important;
  }

  /* ==================== 手機/平板直式卡片重構 ==================== */
  /* 師傅卡片維持正方形置中排版 */
  .contractor-card {
    width: 100% !important;
    max-width: 325px !important; /* 限制最大寬度以在手機上置中 */
    height: 325px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important; /* 水平居中 */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(62, 51, 39, 0.04) !important;
  }

  /* 案件卡片改為 Dcard 風格彈性高度與寬度對齊（100%） */
  .project-card {
    width: 100% !important;
    max-width: 100% !important; /* 寬度對齊 banner 與 stories，不再限於 325px */
    height: auto !important; /* 彈性高度 */
    aspect-ratio: auto !important; /* 移除正方形限制 */
    margin: 0 auto 16px auto !important; /* 水平置中，底部留白 */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 18px !important;
    overflow: visible !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(62, 51, 39, 0.04) !important;
    background-color: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--bg-sand) !important;
  }

  /* Dcard 風格案件卡片內部樣式細調 */
  .project-card .card-header {
    display: flex !important;
    flex-direction: row !important; /* 上排標題與預算並排 */
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .project-card .card-title-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-grow: 1 !important;
  }

  .project-card .card-title-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .project-card .card-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-text) !important;
    line-height: 1.4 !important;
    white-space: normal !important; /* 允許折行 */
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  .project-card .card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: var(--color-text-secondary) !important;
    margin-top: 4px !important;
  }

  .project-card .card-meta span {
    background-color: var(--bg-main) !important;
    padding: 2px 6px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .project-card .card-budget {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--color-primary-dark) !important;
    background-color: var(--color-primary-light) !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-sm) !important;
    text-align: right !important;
    white-space: nowrap !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  .project-card .card-budget small {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
  }

  /* 中間部分：文章描述與照片 (視長短與照片而變化) */
  .project-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 8px 0 !important;
    width: 100% !important;
    flex-grow: unset !important; /* 解除彈性拉伸 */
  }

  .project-card .card-body p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--color-text-secondary) !important;
    display: block !important;
    -webkit-line-clamp: unset !important; /* 解除行數限制，長短自適應 */
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 !important;
  }

  .project-card .project-card-image-box {
    display: block !important; /* 手機上顯示照片 */
    width: 100% !important;
    max-height: 220px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 6px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  .project-card .project-card-image-box img {
    width: 100% !important;
    height: 100% !important;
    max-height: 220px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* 下排部分：瀏覽數發布時間、按鈕 */
  .project-card .card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid var(--bg-sand) !important;
    padding-top: 10px !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  .project-card .card-footer .card-footer-left {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: var(--color-text-secondary) !important;
  }

  .project-card .card-footer .card-footer-left span {
    display: inline !important; /* 恢復顯示瀏覽數與發布時間 */
  }

  .project-card .card-footer button {
    width: auto !important; /* 不強制滿寬，改為精緻的右側按鈕 */
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }

  /* 師傅卡片內部緊湊化 */
  .contractor-card .contractor-card-grid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .contractor-card .contractor-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex-grow: 1 !important;
    justify-content: center !important;
  }

  /* 頭像與姓名那一排優化 */
  .contractor-card .contractor-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    border-width: 1.5px !important;
    margin-bottom: 2px !important;
  }

  .contractor-card .contractor-name-row {
    align-items: center !important;
    gap: 6px !important;
  }

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

  /* 評分與信譽 */
  .contractor-card .rating-row {
    font-size: 11px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  /* 隱藏次要的證照細節資訊，大廳更為乾淨 */
  .contractor-card div:has(> .fa-graduation-cap) {
    display: none !important;
  }

  /* 報價與地區 */
  .contractor-card div[style*="font-size: 13px"] {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
  }

  /* 專長標籤限制為單行不換行 */
  .contractor-card .contractor-spec-list {
    max-height: 22px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-top: 2px !important;
  }

  .contractor-card .spec-tag {
    padding: 1px 6px !important;
    font-size: 10px !important;
  }

  /* 投訴按鈕轉化為右上角極簡紅色驚嘆號 */
  .contractor-card .btn-complaint {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: auto !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--color-alert) !important;
    background-color: rgba(211, 47, 47, 0.04) !important;
    color: var(--color-alert) !important;
    box-shadow: none !important;
    z-index: 10 !important;
  }

  .contractor-card .btn-complaint span {
    display: none !important; /* 隱藏文字 */
  }

  .contractor-card .btn-complaint i {
    margin: 0 !important;
    font-size: 13px !important;
  }

  /* 聯絡按鈕拉寬 100% */
  .contractor-card .contractor-card-actions {
    margin-top: auto !important;
    width: 100% !important;
  }

  .contractor-card .btn-contact {
    width: 100% !important;
    padding: 8px !important;
    font-size: 12.5px !important;
    justify-content: center !important;
    display: flex !important;
  }
}

/* ==================== 14. 超窄直式手機 (<=480px) 極致人因優化 ==================== */
@media (max-width: 480px) {
  /* 快速篩選：關鍵字搜尋與地區選擇恢復垂直單欄排版，防止 placeholders 擠扁 */
  .filter-card .form-group:nth-child(2),
  .filter-card .form-group:nth-child(3) {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Navbar 緊緻化：Logo 與切換按鈕防重疊換行 */
  .logo {
    font-size: 19px !important;
    gap: 6px !important;
  }
  .logo i {
    font-size: 20px !important;
  }
  .logo small {
    display: none !important; /* 隱藏英文 CraftMatch 標籤，節省空間 */
  }

  .role-btn {
    padding: 6px 8px !important;
    font-size: 11.5px !important;
    gap: 3px !important;
  }

  /* 案件與師傅卡片已在 768px 內重構為完美置中正方形，此處無需額外覆寫 */

  /* 沛榮廣告票券：折價券在極窄螢幕下垂直排列，防複製按鈕與代碼被裁切 */
  .ticket-code-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .ticket-copy-btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ==================== 15. 職人社群限時動態 Stories 視覺樣式 ==================== */
.stories-wrapper {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bg-sand);
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.stories-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stories-container {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none; /* Firefox */
}

.stories-container::-webkit-scrollbar {
  display: none; /* Safari / Chrome */
}

.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  width: 66px;
}

.story-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  padding: 2.5px;
  box-sizing: border-box;
  position: relative;
  transition: transform 0.2s ease;
}

.story-avatar:hover {
  transform: scale(1.05);
}

/* 師傅 Stories 漸層邊框 (社群軟體風) */
.story-avatar.story-contractor {
  background: linear-gradient(135deg, #f06292 0%, #ff9800 100%);
}

/* 案件 Stories 漸層邊框 (金色風) */
.story-avatar.story-job {
  background: linear-gradient(135deg, #ffd54f 0%, #ff8f00 100%);
}

.story-inner-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
  border: 2px solid var(--bg-card);
  box-sizing: border-box;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}

.story-avatar.story-job .story-inner-circle {
  color: var(--color-primary-dark);
  font-size: 15px;
}

.story-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 在線狀態小圓點 */
.story-status-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}

/* 亮綠色閃爍點 (師傅在線) */
.pulse-green {
  background-color: var(--color-verified);
  box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
  animation: pulseGreenAnim 1.6s infinite;
}

@keyframes pulseGreenAnim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* 亮琥珀色閃爍點 (案件熱度) */
.pulse-amber {
  background-color: #ff9100;
  box-shadow: 0 0 0 0 rgba(255, 145, 0, 0.4);
  animation: pulseAmberAnim 1.6s infinite;
}

@keyframes pulseAmberAnim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 145, 0, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 145, 0, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 145, 0, 0); }
}

/* 點擊 Stories 時的卡片高亮閃爍動畫 */
.social-highlight {
  animation: socialHighlightAnim 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes socialHighlightAnim {
  0% { border-color: var(--color-primary-dark) !important; box-shadow: 0 0 18px rgba(93, 64, 55, 0.4) !important; transform: scale(1.03) translateY(-3px) !important; }
  60% { border-color: var(--color-primary-dark) !important; box-shadow: 0 0 18px rgba(93, 64, 55, 0.4) !important; transform: scale(1.03) translateY(-3px) !important; }
  100% { border-color: var(--bg-sand) !important; box-shadow: var(--shadow-sm) !important; transform: scale(1) translateY(0) !important; }
}

/* ==================== 16. 電腦端與手機端平衡佈局 (Facebook 哲學) ==================== */

/* 1. 電腦端樣式固定：寬螢幕卡片為橫向扁矩形看板 */
@media (min-width: 769px) {
  .project-card, .contractor-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .project-card .card-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .project-card .card-body p {
    -webkit-line-clamp: unset !important; /* 解除手機版行數限制 */
  }

  .project-card .publish-date-text {
    display: inline !important; /* 桌面端顯示完整發布日期 */
  }

  .project-card .project-card-image-box {
    display: block !important; /* 桌面端顯示現場圖片 */
  }

  .contractor-card .contractor-card-grid {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 20px !important;
  }

  .contractor-card .contractor-avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 32px !important;
  }

  .contractor-card div:has(> .fa-graduation-cap) {
    display: block !important; /* 桌面端顯示證照細節 */
  }

  .contractor-card .contractor-spec-list {
    max-height: unset !important;
    flex-wrap: wrap !important;
  }

  .contractor-card .spec-tag {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }

  /* 投訴按鈕恢復正常桌面版 */
  .contractor-card .btn-complaint {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 12px !important;
    border-radius: var(--radius-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--color-alert) !important;
    background-color: transparent !important;
    color: var(--color-alert) !important;
  }

  .contractor-card .btn-complaint span {
    display: inline !important;
  }
}

/* 2. 手機端樣式重整：隱藏側邊欄，改為彈窗/Stories 觸發 */
@media (max-width: 768px) {
  /* 徹底隱藏左側篩選與右側主控台，防止頁面上下無效堆疊 */
  .sidebar-left, .sidebar-right {
    display: none !important;
  }

  /* 調整佈局結構寬度與外距 */
  .main-layout {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
    margin: 8px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Stories 標題列上的篩選觸發按鈕在手機上開啟 */
  .mobile-filter-trigger-btn {
    display: flex !important;
  }

  /* 資訊流原生廣告卡片在手機上自適應對齊寬度 */
  .card.ads-native-slot {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto 16px auto !important;
  }

  /* 在尋找案件大廳中，對齊 100% 案件卡片寬度 */
  body.portal-contractor .card.ads-native-slot {
    max-width: 100% !important;
  }

  /* 在尋找師傅大廳中，對齊 325px 師傅卡片寬度 */
  body.portal-owner .card.ads-native-slot {
    max-width: 325px !important;
  }
}

/* ==================== 16. 手機版大廳切換器 & AI 智慧描述引導提示 ==================== */

/* 手機版大廳切換器 (預設隱藏，僅手機顯示) */
.mobile-role-tab-container {
  display: none;
}

@media (max-width: 768px) {
  .mobile-role-tab-container {
    display: flex;
    background-color: var(--bg-sand);
    padding: 4px;
    border-radius: var(--radius-md);
    margin: 0px 0px 15px 0px;
    border: 1.5px solid var(--bg-sand);
  }
  
  .mobile-role-tab {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition);
  }
  
  .mobile-role-tab.active {
    background-color: var(--bg-card);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
  }
}

/* AI 智慧描述引導提示樣式 */
.desc-hint-box {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-text);
  background-color: #faf6f0;
  border-left: 4px solid var(--color-primary-dark);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

.desc-hint-tag {
  background-color: var(--color-primary-dark);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-right: 6px;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
}

.desc-hint-content {
  line-height: 1.4;
}

.desc-hint-suggestions-title {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-top: 4px;
}

.desc-hint-suggest-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.desc-hint-suggest-item {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid rgba(93, 64, 55, 0.15);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: all 0.2s ease;
}

.desc-hint-suggest-item:hover {
  background-color: var(--color-primary-dark);
  color: white;
  transform: translateY(-1px);
}