/* ==========================================================================
   1. Imports & CSS Variables
   ========================================================================== */
   :root {
    /* …現有顏色… */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;

   /* Brand colors */
   --brand-blue:    #0056b3;
   --brand-green:   #28a745;
 
   /* Grayscale */
   --gray-600:      #6b7280;
   --gray-400:      #9ca3af;
   --gray-200:      #e5e7eb;
 
   /* Surface & text */
   --color-text-primary:   #333;
   --color-text-secondary: rgba(0,0,0,0.6);
   --color-bg:             #f7f9fc;
   --color-surface:        #ffffff;
   --color-border:         #ddd;
   
   /*Add color-primary variables*/
   --color-primary: #0056b3;
   --color-primary-alt: #0069d9;
   --color-secondary: #e2e8f0;
   --color-secondary-alt: #cbd5e0;
 }
 
 /* ==========================================================================
    2. Reset & Base Styles
    ========================================================================== */
 html {
   scroll-behavior: smooth;
 }
 
 body {
   margin: 0;
   padding-top: 60px; /* avoid header overlay */
   font-family: 'Noto Sans TC', 'Inter', sans-serif;
   color: var(--color-text-primary);
   background-color: var(--color-bg);
 }
 
 /* ==========================================================================
    3. Layout Containers
    ========================================================================== */
  .container {
    max-width: 960px;      /* 同一個上限，或視設計改成 1024px、800px 都可 */
    margin: 16px auto;     /* 上下間距 + 水平置中 */
    padding: 0 16px;       /* 內縮，手機會收合留白 */
  }
 
 /* ==========================================================================
    4. Header
    ========================================================================== */
 .header {
   position: fixed;
   top: 0; left: 0; right: 0;
   height: 60px;
   padding: 0 var(--spacing-lg);
   background-color: var(--color-primary);
   color: #fff;
   display: flex;
   align-items: center;
   z-index: 100;
 }

 .header__inner {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 24px;
 }

 .brand-link {
   color: var(--brand-blue, #0056b3);
   text-decoration: none;
   transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
 }

 .brand-link:hover {
   color: #0070f3;
   transform: scale(1.05);
   text-shadow: 0 0 8px rgba(0, 112, 243, 0.5);
 }
 .gala-white {
  color: white;
  font-weight: bold;
}

 .xyz-orange {
  color: #fca311; /* 或使用你原本的亮色 */
  font-weight: bold;
}

 .lang-selector {
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: 1rem;
   border: 1px solid var(--color-border);
   border-radius: 4px;
   background-color: var(--color-surface);
   color: var(--color-text-primary);
 }

 .hidden {
   display: none !important;
 }

 /* 語言切換器容器 */
.lang-switcher {
  position: relative;
  display: inline-block;
}

/* 新的語言選單樣式 */
.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  min-width: 120px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10001; /* 提高層級 */
  display: block; /* 預設顯示，用 hidden class 控制 */
}

/* 使用 hidden class 控制顯示/隱藏 */
.lang-menu.hidden {
  display: none !important;
}

/* 語言選項樣式 */
.lang-menu .lang-option {
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: white;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #333;
}

.lang-menu .lang-option:hover {
  background-color: #f0f0f0;
}

 /* ==========================================================================
    5. Buttons
    ========================================================================== */
 .btn {
   display: inline-block;
   min-width: 80px;
   padding: var(--spacing-sm) var(--spacing-md);
   font-size: 1rem;
   text-align: center;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   transition: background-color 0.2s, transform 0.15s;
   white-space: nowrap;
 }
 .btn-primary {
   background-color: var(--color-primary);
   color: #fff;
 }
 .btn-primary:hover {
   background-color: var(--color-primary-alt);
 }
 .btn-secondary {
   background-color: var(--color-secondary);
   color: var(--color-text-primary);
 }
 .btn-secondary:hover {
   background-color: var(--color-secondary-alt);
 }
 .btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* 按鈕間距 */
  margin-top: 1rem;
}
 .cta-btn {
   display: inline-block;
   margin-top: var(--spacing-lg);
   padding: 12px 24px;
   background: #ffd500;
   border: none;
   border-radius: 6px;
   font-size: 1rem;
 }
 .cta-btn:hover {
   filter: brightness(1.1);
   transform: translateY(-2px);
   box-shadow: 0 4px 10px rgba(0,0,0,0.25);
 }
 
 /* ==========================================================================
    6. Forms & Inputs
    ========================================================================== */
    /* 6-a. Base form controls */
input, select, textarea {
  padding: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  font-size: 1rem;             /* 16px 基准字号 */
  color: var(--color-text-primary);
  box-sizing: border-box;
  width: 100%;
}

    .form-group {
      margin-bottom: var(--spacing-xl);
    }
    .form-group label {
      display: block;
      font-weight: 500;
      margin-bottom: var(--spacing-xs);
    }
    /* 文字輸入和多行 textarea 一定要撐滿父容器 */
    .form-group input[type="text"],
    .form-group input[type="url"], /* 如果你有其他類型 */
    .form-group textarea {
      width: 100%;
    }
    /* 日期欄位整行 */
    .date-fields {
      display: flex;
      align-items: center;       /* 水平對齊、垂直置中 */
      gap: var(--spacing-sm);
    }
    .date-fields label {
      /* label 不再強制寬度 100%，可 inline */
      display: inline-block;
      margin-bottom: 0;
    }
    .date-fields select {
      width: auto;
      min-width: 4.2rem;         /* 原本的 select 寬度 */
    }
    .date-fields span {
      margin: 0 4px;
    }
    /* 隱藏「結束日期」整組時用 */
    #endDateContainer.hidden {
      display: none !important;
    }
    
    /* checkbox-group：讓勾框＋文字同行且垂直置中 */
    .checkbox-group {
      display: inline-flex;
      align-items: center;       /* 讓 input 和 span 垂直置中 */
      gap: 4px;                  /* 勾框和文字間距 */
      margin-left: var(--spacing-sm);
    }
    /* 去掉預設 margin，並微調大小 */
    .checkbox-group input[type="checkbox"] {
      margin: 0;
      vertical-align: middle;
      transform: scale(1.2);
    }

/* --- 新增：已鎖定 (Disabled) 的表單欄位樣式 (高權重版本) --- */
#expModal input:disabled,
#expModal select:disabled,
#expModal textarea:disabled {
  background-color: #f1f2f6 !important; /* 淺灰色背景 */
  color: #747d8c !important;             /* 文字顏色變淡 */
  cursor: not-allowed !important;         /* 滑鼠移上去會變成禁止符號 */
  border-color: #dfe4ea !important;       /* 邊框顏色變淡 */
}

/* --- 新增或確認：表單提示與警告樣式 (高權重版本) --- */
#expModal .form-hint.warning {
  color: #856404 !important; /* 深黃色文字 */
  background-color: #fff3cd !important; /* 淡黃色背景 */
  padding: 10px 15px !important;
  border-radius: 4px !important;
  border-left: 5px solid #ffc107 !important; /* 左側醒目邊線 */
}
 /* ==========================================================================
    7. Cards & Panels
    ========================================================================== */
 .white-card {
   background: var(--color-surface);
   border-radius: 20px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 }
 .soft-shadow {
   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 }
 .job-info {
   background: var(--color-surface);
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   padding: var(--spacing-md);
   margin-bottom: var(--spacing-xl);
 }
 
 /* ==========================================================================
    8. Profile Dashboard Extras
    ========================================================================== */
 /* Onboarding 小卡樣式 */
  .onboarding-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    background: #ffffff;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 40px auto;
    max-width: 640px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  .onboarding-card ol {
    line-height: 1.75;
    font-size: 1rem;
  }
  
  .onboarding-card h2 {
    font-size: 2rem;
    color: var(--brand-blue);
    margin-bottom: 1.5rem;
  }

  .onboarding-steps li {
    margin-bottom: 1rem;
  }

  .onboarding-action .btn {
    margin-top: 1rem;
  }
 
   .company-card {
  border-left: 6px solid var(--brand-blue); /* 保留品牌色 */
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
 .company-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}
 .role-card {
   position: relative;
   background: var(--color-surface);
   border-radius: 12px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.05);
   padding: 16px;
   margin-top: 12px;
   margin-left: 16px;
 }
 
 .role-card .del-btn:hover {
   color: #d11;
 }
 /* =====  Profile Dashboard – lock / edit  ===== */
 .locked {
  background: #f3f4f6;         /* 淺灰底提示不可編輯 */
  cursor: not-allowed;
 }

 .lock-tip {
  font-size: 0.75rem;
  color: #d11;
  margin-left: 4px;
  position: absolute;
  top: 8px;
  right: 36px;                 /* 讓 🔒 在 🗑 左邊 */
 }

 .edit-btn:hover { color: var(--brand-blue); }
 .rec-card{
  background: var(--color-surface);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: .875rem;
}
.rec-card .name{ font-weight:600; }
.rec-card .meta{ color: var(--gray-600); }

.job-info p {
  margin: 4px 0;
  font-size: 15px;
}

#inviteContent {
  margin-bottom: 12px;
  font-style: italic;
  line-height: 1.6;
}

 /* ----- date select 寬度 ----- */
  .date-fields select{ width:auto; min-width:4.2rem; }
  .date-fields span { margin:0 4px; }
 /* ===== toast ===== */

  .toast {
  position: fixed;               /* 固定在视窗上 */
  bottom: 1rem;                  /* 距离底部 16px */
  left: 50%;                     /* 水平居中 */
  transform: translateX(-50%);   /* 真正水平居中 */
  background: rgba(0, 0, 0, 0.8);/* 半透明黑底 */
  color: #fff;                   /* 白字 */
  padding: 0.5rem 1rem;          /* 内边距 */
  border-radius: 0.375rem;       /* 圆角 */
  font-size: 0.875rem;           /* 字体稍微小一点 */
  z-index: 10000;                /* 确保盖在最上面 */
  animation: toast-fade 3s ease forwards; 
  }

 /* 动画：前 10% 逐渐出现，保持到 80%，最后 20% 逐渐消失 */
  @keyframes toast-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
  }

  @keyframes fadeInOut{
    0%   {opacity:0; transform:translate(-50%,20px);}
    10%  {opacity:1; transform:translate(-50%,0);}
    90%  {opacity:1;}
    100% {opacity:0; transform:translate(-50%,-10px);}
  }

 /* role-card icon hit-area (更好點擊) */
  .role-card button{
    padding:4px; border-radius:4px;
  }
  .role-card button:hover{
    background:rgba(0,0,0,.05);
  }
  
  textarea::placeholder {
  color: #999;
  font-style: italic;
  }

 /* ==========================================================================
    9. Recommend Summary Styles
    ========================================================================== */
 .company-section {
   margin-bottom: 48px;
 }
 .company-name {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--brand-blue);
   margin-bottom: 12px;
 }
 .job-card {
   /* Note: profile-dashboard .job-card is overridden by .role-card in dashboard view */
   background: var(--color-surface);
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
   border-left: 6px solid var(--brand-blue);
   padding: 20px;
   margin-bottom: 20px;
   position: relative
 }
 .job-title {
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 4px;
 }
 .job-date {
   font-size: 0.875rem;
   color: var(--gray-600);
   margin-bottom: 12px;
 }
 .recommendation {
  background: var(--color-surface);
  border-left: none;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.recommendation .recommender {
  font-weight: 600;
  color: var(--brand-blue);
  margin-right: 6px;
}

.recommendation .badge-container {
  margin: 4px 0 8px;
}

 .no-recommendation {
  font-size: 0.875rem;
  color: var(--gray-400);
  margin-top: 8px;
}
.recommend-content {
  margin-top: 10px;
  padding-left: 0.5rem;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  line-height: 1.75;
  white-space: pre-wrap;
}
.no-recommend-hint {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 6px;
  text-align: right;
  line-height: 1.5;
}
.no-recommend-text {
  font-size: 0.875rem;
  color: var(--gray-400);
  font-style: italic;
  margin-top: 6px;
}

.recommender-line {
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.recommender-name {
  font-weight: 600;
  margin-right: 4px;
  color: var(--brand-blue);
}

.recommender-relation {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.badge-container {
  margin-bottom: 4px;
}

.filters-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 1rem;
}
.link {
  color: var(--brand-blue);
  text-decoration: underline;
  cursor: pointer;
}


 /* ==========================================================================
    10. Thank-You Page (Stars & Animations)
    ========================================================================== */
 .star-bg {
   background: url("/img/star-bg.png") center top / cover no-repeat fixed;
   color: #fff;
   min-height: 100vh;
 }
 .fade-in {
   animation: fadePageIn 0.8s ease-out both;
 }
 @keyframes fadePageIn {
   from { opacity: 0; }
   to   { opacity: 1; }
 }
 .thanks-title {
   font-size: 2rem;
   margin-bottom: var(--spacing-md);
   color: var(--color-primary);
   text-align: center;
 }
 .thanks-message {
   color: rgba(255,255,255,0.85);
   text-shadow: 0 0 2px #000;
   text-align: center;
 }
 .summary-link {
   text-align: center;
   margin-bottom: var(--spacing-xl);
 }
 .summary-link a {
   font-size: 1rem;
   text-decoration: none;
   color: var(--color-primary);
   border-bottom: 1px dashed var(--color-primary);
 }
 .summary-link a:hover {
   border-bottom: 1px solid var(--color-primary);
 }
 .next-action-card {
   background: var(--color-surface);
   padding: var(--spacing-lg);
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   text-align: center;
   animation: fadeUp 0.8s ease-out 0.3s both;
 }
 @keyframes fadeUp {
   from { opacity: 0; transform: translateY(10px); }
   to   { opacity: 1; transform: translateY(0); }
 }
 .cta-btn, .next-action-card a, .next-action-card p {
   color: var(--color-text-primary);
 }
 .network {
  max-width: 100%;
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto 24px;
}  
 @media (max-width: 480px) {
 .network {
  max-width: 240px;
 }
}
 
 /* ==========================================================================
    11. Responsive Adjustments
    ========================================================================== */


 @media (max-width: 768px) {
   .summary-container {
     background: var(--color-surface);
     padding: var(--spacing-lg);
     border-radius: 20px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.06);
   }
   .company-name {
     font-size: 1.125rem;
   }
   .job-card {
     position: relative;
     padding: 16px;
   }

 }
 @media (max-width: 400px) {
   .container {
     padding-left: var(--spacing-sm);
     padding-right: var(--spacing-sm);
   }
 }
 

/* 姓名與徽章的容器 */
.profile-summary-header .name-line {
    display: flex;
    align-items: center; /* 讓姓名和徽章垂直置中對齊 */
    gap: 0.75rem;      /* 姓名和徽章之間的間距 */
    flex-wrap: wrap;     /* 當空間不足時允許換行 */
}

/* 姓名本身的樣式 */
.profile-summary-header #userName {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    line-height: 1.2;
}

/* 個人標題 (Headline) 的樣式 */
.profile-summary-header #profile-headline {
    font-size: 1.125rem; /* 18px */
    color: var(--gray-600, #6b7280);
    margin-top: 0.5rem; /* 8px，與上方姓名的間距 */
}
  /* ✅ 自適應的 Summary Header（使用者名稱 + 星星） */
  .summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
  }

  @media (max-width: 600px) {
    .summary-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }


/* 小尺寸的「返回按鈕」 */
#backBtn {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1;
/* 你也可以改成 .btn-secondary override：
   background: var(--color-secondary);
   color: var(--color-text-primary);
*/
}
/* Badge 樣式 */
.badge {
display: inline-block;
background-color: var(--gray-200);
color: var(--color-text-primary);
border-radius: 999px;
padding: 2px 8px;
font-size: 0.75rem;
margin-right: 6px;
margin-bottom: 4px;
}

/* 1. 讓整列顯示 4 個格子 */
.checkbox-group {
  display: inline-flex;     /* inline-flex 讓它跟周圍元素同排 */
  align-items: center;      /* 垂直置中 */
  gap: 4px;                 /* 勾框與文字之間留點空隙 */
  margin-left: 8px;         /* 可以稍微推一下位置，看起來不要太靠左 */
}

/* 2. 每格佔 25% 減掉間距，最小寬度 100px，最大寬度 140px */
.checkbox-group label {
flex: 0 1 45%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 1 120px;       /* 固定成 120px 寬，可擴可縮 */
min-width: 100px;      /* 縮到最小 100px */
max-width: 140px;      /* 放大到最大 140px */
height: 60px;           /* 高度可再微調 */
padding: 0 8px;
border: 1px solid var(--color-border);
border-radius: 6px;     /* 圓角不要太大 */
background: var(--color-surface);
color: var(--color-text-primary);
font-size: 0.9rem;      /* 字體小一點 */
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
margin-block: 12px; /* 上下各 12px */
}

.checkbox-group label:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 3. 隱藏原生 checkbox，整格都可點 */
.checkbox-group label input[type="checkbox"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}

/* 4. 選中後整格變主色、文字變白 */
.checkbox-group label:has(input[type="checkbox"]:checked) {
background-color: var(--brand-blue);
color: #fff;
border-color: var(--brand-blue);
}

/* Print styles */
@media print {
/* 隱藏篩選區與匯出按鈕 */
#filters,
#export-pdf {
  display: none !important;
}

/* 取消對公司區塊的 avoid 規則 */
.company-section {
  page-break-inside: auto;
  break-inside: auto;
}
}
/* ==========================================================================
 Home Page 微調
 ========================================================================== */

/* Hero 區主標題 */
.hero-title {
font-size: 2.25rem;
color: var(--brand-blue);
font-weight: 700;
margin-bottom: 16px;
line-height: 1.2;
text-align: center;
}

/* Hero 區副標題 */
.hero-subtitle {
font-size: 1.125rem;
color: var(--color-text-secondary);
margin-bottom: 32px;
text-align: center;
line-height: 1.6;
}

/* Hero CTA 按鈕 */
.hero-cta {
display: inline-block;
background: var(--brand-blue);
color: #fff;
padding: 12px 24px;
font-size: 1.125rem;
border-radius: 8px;
text-decoration: none;
transition: background-color 0.2s;
}
.hero-cta:hover {
background: var(--color-primary-alt);
}

/* Features 區塊卡片 */
.feature-card {
background: var(--color-surface);
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
padding: 24px;
text-align: center;
}

/* Features 卡片標題 */
.feature-card h3 {
font-size: 1.25rem;
margin-bottom: 12px;
color: var(--color-text-primary);
}

/* Features 卡片說明文字 */
.feature-card p {
font-size: 1rem;
color: var(--color-text-secondary);
line-height: 1.5;
}

/* Section 間距統一 */
section {
margin-top: 64px;
}

/* 行動呼籲區 (底部 CTA) */
.final-cta {
text-align: center;
margin: 64px 0;
}

/* ==========================================================================
 Home Page 響應式 (手機版調整)
 ========================================================================== */
@media (max-width: 600px) {
.hero-title {
  font-size: 1.75rem;
}
.hero-subtitle {
  font-size: 1rem;
}
.hero-cta {
  font-size: 1rem;
  padding: 10px 20px;
}
section {
  margin-top: 48px;
}
}
/* Onboarding 卡片淡入 + hover 動畫 */
.onboarding-card.show {
opacity: 1;
transform: translateY(0);
}
.onboarding-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
transition: all 0.3s ease;
}
#loadingMessage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;            /* 整个视窗宽度 */
  height: 100vh;           /* 整个视窗高度 */
  background: rgba(255,255,255,0.9);
  display: flex;           /* 开启 flex 居中 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  z-index: 9999;           /* 保证盖过页面其它元素 */
}
.loading-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255,255,255,0.8);
z-index: 9999;
}

.spinner {
border: 4px solid #ddd;
border-top: 4px solid #007bff;
border-radius: 50%;
width: 32px;
height: 32px;
margin-right: 12px;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}
/* Bio 編輯彈窗：寬度響應式 */
#bioModal {
/* 最小 300px、最大 600px，中間視窗的一半 */
width: clamp(300px, 50vw, 600px);
/* 讓 dialog 本身置中 */
margin: auto;
}
/* 如果你希望更平滑的圓角和陰影，也可以加上： */
#bioModal {
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
padding: 1rem;
}
/* 預覽連結樣式 */
.preview-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 500;
cursor: pointer;
color: var(--brand-blue);
}
.preview-link:hover {
text-decoration: underline;
}
/* 隱藏整組結束日期 */
#endDateContainer.hidden {
  display: none;
  /* 或者只打灰、不能互動：
     opacity: 0.4;
     pointer-events: none;
  */
}
/* ✅ 優化推薦篩選器區塊排版
   =============================== */
#filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}

#filters label {
  font-weight: 500;
  font-size: 0.95rem;
  margin-right: 4px;
}

#filters select {
  min-width: 180px;
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

@media (max-width: 600px) {
  #filters {
    flex-direction: column;
    align-items: flex-start;
  }

  #filters label, #filters select {
    width: 100%;
  }
}

/* 在 main.css 加入 */
.star-icon {
  width: 24px;
  height: 24px;
  background-color: white;
  mask-image: url('/img/star-icon.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: url('/img/star-icon.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}
.inline-icon {
  width: 24px;
  height: 24px;
  color: white; /* 控制星星顏色 */
  display: inline-block;
  margin-bottom: 12px;
}
.gala-blue {
  color: #0056b3;
  font-weight: bold;
}

.xyz-orange {
  color: #fca311;
  font-weight: bold;
}
.header__inner .btn-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
/* 外層 label：一個按鈕容器 */
.option-label {
  display: inline-block;
  vertical-align: middle;
  min-width: 140px;      /* ✅ 最小寬度 */
  width: auto;           /* ✅ 自動依文字撐寬 */
  height: 60px;           /* ✅ 固定高度 */
  margin: 6px;
  padding: 0;
  cursor: pointer;
}

#highlightsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}


/* 隱藏原生 radio */
.option-label input[type="radio"] {
  display: none;
}

/* 內部 span：實際的按鈕外觀 */
.option-label .option-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: white;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}


/* 被選中時的樣式 */
.option-label input[type="radio"]:checked + .option-text {
  background-color: #2f52eb;
  color: white;
  border-color: #2f52eb;
}
/* ===== 公開推薦總表的星星樣式 ===== */
.summary-badge-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 4px 0 8px 0;
}


.star-badge {
  position: relative;
  font-size: 4rem; /* 控制整體大小 */
  color: #1D4ED8;    /* 品牌藍色 */
  width: 3em;
  height: 3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.star-badge .count {
  position: absolute;
  color: #FFB347; /* 亮橙色 */
  font-size: 0.6em;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  line-height: 1;
  pointer-events: none;
  width: 1.5em;          /* ✅ 加入寬度讓字體置中穩定 */
  text-align: center;    /* ✅ 置中數字 */
}

.label {
  color: #333;
}

#description {
  margin-top: 2rem;
  line-height: 1.8;
  font-size: 1.125rem; /* 原本是 1rem，這是加大一級 */
}
/* ===== 創辦人手記區塊樣式 ===== */
.founder-note {
  border-left: 4px solid var(--brand-blue);
  background-color: #f8f9fc;
  padding: 20px 24px;
  margin-top: 32px;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.founder-note p {
  margin: 0;
}
.founder-note .note-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
  color: var(--gray-600);
}
/* ==========================================================================
   手機版專屬調整（Profile-dashboard 相關卡片與按鈕）
   ========================================================================== */
   @media (max-width: 768px) {
    body {
      font-size: 16px;
      line-height: 1.6;
    }
  
    h1 {
      font-size: 1.25rem;
    }
  
    h2, h3 {
      font-size: 1.125rem;
    }
  
    .btn {
      font-size: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
    }
  
    .btn-group {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  
    .btn-group .btn {
      width: 100%;
      max-width: 320px;
      text-align: center;
    }
    }
    .rec-card,
    .role-card {
      font-size: 0.95rem;
      padding: 0.75rem;
    }
  
    .company-title {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }

.job-card .toggle-job-btn {
  /* position: absolute; */
  /* top: 12px; */
  /* right: 12px; */
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
/* 1) 按钮和下面灰色框当作一个整体，用白字、小号字体 */
.company-section .job-card .toggle-job-btn {
  position: static;                  /* 取消 absolute */
  display: inline-block;
  background: #f3f4f6;               /* 浅灰底 */
  color: #fff;                       /* 白字 */
  font-size: 0.875rem;               /* 小一号 */
  padding: 0.4em 0.8em;              /* 微调上下左右内边距 */
  border: 1px solid #e5e7eb;         /* 和下面框统一边框 */
  border-bottom: none;               /* 底边消失，和下面框连成一片 */
  border-radius: 8px 8px 0 0;        /* 上方圆角，底部方角 */
  margin: 0 0 -1px 0;                /* 把按钮底边恰好和内容框顶边贴在一起 */
  cursor: pointer;
}

/* 2) 推荐卡的灰底框，顶边去掉，与按钮拼接 */
.company-section .job-card .recommendation {
  background: #f3f4f6;               /* 同浅灰底 */
  border: 1px solid #e5e7eb;         /* 同边框颜色 */
  border-top: none;                  /* 顶边消失，和按钮连在一起 */
  border-radius: 0 0 8px 8px;        /* 底部圆角 */
  margin-top: 0;                     /* 去掉默认外边距 */
  padding: 1em;                      /* 根据设计需求微调 */
}

.rec-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.role-card .rec-toggle-btn {
  margin: 0;  /* 按钮和下面的 .rec-container 就能无缝贴合了 */
}
/* 1) 按鈕跟 rec-container 同底同邊框，頂部圓角、拿掉底線 */
.rec-toggle-btn {
  display: inline-block;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 0.5em 1em;
  margin: 0;
  color: var(--brand-blue);
  font-size: 0.875rem;
  cursor: pointer;
  position: relative;
  z-index: 101;
}

/* 2) rec-container 跟按鈕無縫接合 */
.rec-container {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.5em;
  margin-top: -1px;
}

.rec-card-wrapper {
  position: relative;
  z-index: 1;
}

/* ========== Individual Recommendation Card ========== */
/* 白底、內邊距，讓每則推薦更突出 */
.rec-container .rec-card {
  background: var(--color-surface);  /* 白底 */
  border-radius: 8px;                /* 小圓角 */
  padding: 1em;                      /* 白色區域內邊距 */
  margin-bottom: 1em;                /* 各卡片間距 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 3) 選做：滑鼠互動效果 */
.rec-toggle-btn:hover { background: #e5e7eb; }
.rec-toggle-btn:active { background: #d6d8db; }

.public-icon {
  margin-right: 4px;
  color: var(--color-primary);
  font-size: 1rem;
  vertical-align: middle;
}

/* Profile-dashboard：職稱過長截斷，並留出右側按鈕空間 */
.role-card > p:first-of-type {
  white-space: nowrap;         /* 不換行 */
  overflow: hidden;            /* 超出隱藏 */
  text-overflow: ellipsis;     /* 顯示「…」 */
  padding-right: 3.5rem;       /* 留出圖示按鈕（🔗✏️🗑️）寬度，可微調 */
  margin: 0;                   /* 如果預設有 margin，按需調整 */
}
.rec-card .name,
.rec-card strong {
  font-weight: 600;
}
.empty-rec-hint {
  background: #fff8e1;
  color: #5a4c00;
  font-size: 0.85rem;
  padding: 8px 12px;
  border-left: 3px solid #f5b041;
  margin-top: 8px;
  border-radius: 8px;
  max-width: 360px;
  line-height: 1.4;
}
.empty-rec-hint .emoji {
  font-weight: bold;
  margin-right: 4px;
}
.rec-card { position: relative; }

.share-rec-btn {
  all: unset;
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.875rem;
}
.share-rec-btn .icon-share {
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  stroke: currentColor;
}
.share-rec-btn:hover { opacity: 0.8; }
.rec-card.highlight {
  box-shadow: 0 0 0 2px #f90;
  background: #fffbe6;
}
/* 新增：讓 .loading-overlay 只要加 .hidden 就一定隱藏 */
.loading-overlay.hidden {
  display: none !important;
}
/* ==========================================================================
   Profile Dashboard - Role Card Actions (Updated Layout)
   ========================================================================== */

.role-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.role-info strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.work-period {
  color: #666;
  font-size: 14px;
}

.manage-actions {
  display: flex;
  gap: 4px;
}

.work-description {
  margin-bottom: 12px;
  color: #555;
  line-height: 1.4;
}

.rec-summary-block {
  margin-top: 12px;
}

.summary-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.summary-text {
  flex: 1;
}

.summary-text p {
  margin: 4px 0;
  font-size: 14px;
  color: #555;
}

.recommendation-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  min-width: 120px;
}

.action-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative; /* 覆蓋舊的 absolute 定位 */
  top: auto;          /* 覆蓋舊的 top 定位 */
  right: auto;        /* 覆蓋舊的 right 定位 */
}

.action-btn.primary {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.action-btn.secondary {
  background: #6c757d;
  color: white;
  border-color: #6c757d;
}

.action-btn:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.lock-tip {
  margin-left: 8px;
  font-size: 12px;
  color: #ffa500;
}

/* 手機版優化 */
@media (max-width: 768px) {
  .summary-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .recommendation-actions {
    flex-direction: row;
    justify-content: center;
    min-width: auto;
  }
  
  .action-btn {
    flex: 1;
    min-width: 100px;
  }
}
/* 管理按鈕樣式（編輯、刪除） */
.manage-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.manage-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.2s ease;
  position: relative; /* 確保不被舊樣式影響 */
  top: auto;
  right: auto;
}

.manage-btn:hover {
  background: #f5f5f5;
  color: #333;
  border-color: #999;
}

.manage-btn.edit-btn:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.manage-btn.del-btn:hover {
  color: #dc3545;
  border-color: #dc3545;
}
.reply-list {
  max-height: 400px;
  overflow-y: auto;
}

.reply-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fafafa;
}

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

.recommender-name {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 4px;
}
/* 🎨 回覆選項 Modal 樣式 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
}

.close-btn:hover {
  color: #374151;
}

.reply-options-grid {
  display: grid;
  gap: 16px;
}

.reply-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.reply-option:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.reply-option.coming-soon {
  opacity: 0.7;
  background: #f9fafb;
}

.option-icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 50%;
}

.option-content {
  flex: 1;
}

.option-title {
  margin: 0 0 4px 0;
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-description {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.coming-soon-badge {
  background: #fbbf24;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.option-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-btn.primary {
  background: #3b82f6;
  color: white;
}

.option-btn.primary:hover {
  background: #2563eb;
}

.option-btn.secondary {
  background: #f3f4f6;
  color: #374151;
}

.option-btn.secondary:hover {
  background: #e5e7eb;
}

/* 🗂️ 回覆列表樣式 */
.reply-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.reply-item:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.reply-item-info {
  margin-bottom: 12px;
}

.recommender-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #374151;
}

.recommender-details {
  margin-bottom: 8px;
}

.relation-tag, .company-tag {
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  margin-right: 8px;
  color: #6b7280;
}

.recommendation-preview {
  color: #6b7280;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.4;
}

.reply-item-actions {
  display: flex;
  justify-content: flex-end;
}

/* 📱 響應式設計 */
@media (max-width: 768px) {
  .reply-option {
    flex-direction: column;
    text-align: center;
  }
  
  .option-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .reply-item {
    padding: 12px;
  }
}
/* === 簡化後的徽章樣式 === */
.verified-badge {
  background: #10b981;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* === 註冊狀態徽章（保留） === */
.registered-badge {
  background: #3b82f6;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  margin-left: 8px;
}

.unregistered-badge {
  background: #6b7280;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  margin-left: 8px;
}

/* === 已驗證推薦的說明文字 === */
.status-verified {
  color: #059669;
  font-size: 13px;
  font-style: italic;
}

.status-explanation {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #ecfdf5;
  border-left: 3px solid #10b981;
}
/* ================================================================== */
/* 訪客預覽模式 (Teaser View) V2 - 修正版
/* ================================================================== */

/*
 * 新的外層容器，只負責定位，本身不模糊
*/
.rec-teaser-wrapper {
  position: relative; 
}

/*
 * 只負責模糊內容的 class
*/
.blurred-content {
  filter: blur(4px);
  opacity: 0.7;
  user-select: none;
  pointer-events: none;
}

/*
 * CTA 按鈕樣式保持不變，但現在它不會被父層的 blur 影響了
*/
.teaser-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #0d6efd;
  color: white;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.teaser-cta:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.teaser-cta span {
  margin-right: 8px;
  font-size: 1.2em;
  line-height: 1;
}

.exp-badge {
  display: inline-block;
  background-color: #e7f3ff; /* 淡藍色背景 */
  color: #0d6efd; /* 主色調藍色 */
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

.exp-badge {
  display: inline-block;
  background-color: #e7f3ff;
  color: #0d6efd;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

/* === Header Search Styles === */

/* 調整 header__inner 以容納搜尋框 */
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

/* 搜尋框的容器，用來做相對定位 */
.header-search-container {
  position: relative;
  flex-grow: 1; /* 讓它佔據中間的主要空間 */
  max-width: 400px; /* 給一個最大寬度 */
}

/* 搜尋輸入框本身 */
.header-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #4a5568; /* 深色模式下的邊框 */
  background-color: #2d3748; /* 深色背景 */
  color: white;
  border-radius: 8px;
  font-size: 0.9rem;
}
.header-search-input::placeholder {
  color: #a0aec0;
}

/* Header 搜尋結果下拉選單的樣式 */
.header-search-results {
  position: absolute;
  top: 100%; /* 緊貼著 Header 下方 */
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-top: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

/* 單個結果的樣式 */
.header-search-result-item {
  display: block;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.header-search-result-item:last-child {
  border-bottom: none;
}

.header-search-result-item:hover {
  background-color: #f5f5f5;
}

/* ======================================================= */
/* 儀表板頂部卡片區塊 - 最終解決方案 (改用 CSS Grid)     */
/* ======================================================= */

.profile-top-row {
  display: grid; /* ✅ 使用 Grid 佈局 */

  /* ✅ 建立兩個等寬的欄位 (1fr 代表佔用一份可用空間) */
  grid-template-columns: 1fr 1fr; 

  /* ✅ 設定欄位之間的間距 */
  gap: 1rem; 

  margin-bottom: 1.5rem;
}

/* 在 Grid 佈局中，子項目預設就會等高 (align-items: stretch)，
  且寬度由 grid-template-columns 控制，
  所以我們不再需要對子項目 section 做任何額外的 flex 或 min-width 設定。
  可以將 .profile-top-row > section 的樣式清空或刪除。
*/


/* --- 窄螢幕響應式設定 (同步更新為 Grid 版本) --- */
@media (max-width: 900px) {
  .profile-top-row {
    /* ✅ 在窄螢幕時，改為只有一個欄位，卡片就會自動垂直堆疊 */
    grid-template-columns: 1fr; 
  }
}

/* 卡片標題，例如「關於我」 */
.bio-card .card-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: #111827;
}

/* ==========================================================================
   公開推薦頁面 CSS - 簡化版（重用私人頁面樣式）
   ✅ 大幅減少 CSS 代碼，直接重用現有樣式
   ========================================================================== */

/* ✅ 只針對公開頁面的基本佈局調整 */
.public-profile-page .summary-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* ✅ 個人檔案標題區塊（這個是公開頁面特有的） */
.public-profile-page .profile-summary-header {
  margin-bottom: 24px;
}

.public-profile-page .profile-summary-header .name-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.public-profile-page .profile-summary-header #userName {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.public-profile-page .profile-summary-header #profile-headline {
  font-size: 1.125rem;
  color: var(--gray-600, #6b7280);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* ✅ 等級徽章（重用現有等級顏色，但需要 public-level-badge 類別） */
.public-profile-page .public-level-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}

.public-profile-page .public-level-badge.level-gray { background-color: #6b7280; }
.public-profile-page .public-level-badge.level-briefcase { background-color: #8b5cf6; }
.public-profile-page .public-level-badge.level-handshake { background-color: #10b981; }
.public-profile-page .public-level-badge.level-rocket { background-color: #f59e0b; }
.public-profile-page .public-level-badge.level-gold { background-color: #eab308; }
.public-profile-page .public-level-badge.level-sun { background-color: #f97316; }
.public-profile-page .public-level-badge.level-globe { background-color: #3b82f6; }
.public-profile-page .public-level-badge.level-trophy { background-color: #8b5cf6; }
.public-profile-page .public-level-badge.level-diamond { background-color: #06b6d4; }
.public-profile-page .public-level-badge.level-legendary { background-color: #ec4899; }

/* ✅ 確保分享功能的亮點顯示正常工作 */
.public-profile-page .rec-card.highlight {
  box-shadow: 0 0 0 2px #f90;
  background: #fffbe6;
  scroll-margin-top: 100px; /* 確保滾動時不被 header 遮住 */
}

/* ✅ 確保滾動定位功能正常 */
.public-profile-page .rec-card {
  scroll-margin-top: 100px;
}

/* ✅ 錯誤和空狀態（保留公開頁面特有的） */
.public-profile-page .no-content {
  text-align: center;
  color: var(--gray-600, #6b7280);
  padding: 40px 20px;
}

/* ✅ 響應式設計 */
@media (max-width: 768px) {
  .public-profile-page .summary-container {
    padding: 16px;
  }
  
  .public-profile-page .profile-summary-header .name-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .public-profile-page .profile-summary-header #userName {
    font-size: 1.5rem;
  }
  
  .public-profile-page .profile-summary-header #profile-headline {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .public-profile-page .public-level-badge {
    font-size: 0.8rem;
    padding: 3px 10px;
  }
}

/* ========================================
   Footer Styles
   ======================================== */
.site-footer {
  text-align: center; /* 讓內部所有文字內容置中 */
  padding: 2rem 1rem;
  margin-top: 2rem;
  color: #888;
  font-size: 0.8rem;
  border-top: 1px solid #e5e7eb; /* 加上一條頂部分隔線 */
}

.footer-links {
  margin-bottom: 1rem; /* 與下方的版權文字間隔 */
  display: flex;
  justify-content: center; /* 水平置中連結 */
  gap: 1.5rem; /* 連結之間的間距 */
  flex-wrap: wrap; /* 在小螢幕上自動換行 */
}

.footer-links a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
  color: #0056b3; /* 滑鼠懸停時的顏色 */
  text-decoration: underline;
}