/* ══════════════════════════════════════════════════════════════
   StarkLab — 全站響應式設計 (RWD)
   版本：1.0.0 ／ 2026-06-16
   作者：Frontend Developer Agent

   Breakpoints
   ├─ ≤ 1200px  平板橫向
   ├─ ≤  900px  平板直向 / 大型手機
   ├─ ≤  768px  主要手機斷點
   └─ ≤  480px  小型手機
══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   0. 全域基礎修正
───────────────────────────────────────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; min-width: 320px; }

img { max-width: 100%; height: auto; }

/* 讓 container 不截斷內容 */
.container-center-horizontal {
  overflow-x: hidden;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   1. 平板橫向 ≤ 1200px
══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {

  /* 解鎖 flex-shrink，讓 stark_lab_* screen 可以縮小 */
  .container-center-horizontal > * {
    flex-shrink: 1 !important;
    max-width: 100% !important;
  }

  /* 所有 stark_lab_* 頁面主容器 */
  [class*="stark_lab_"] {
    width: 100% !important;
    max-width: 1440px !important;
    min-width: 0 !important;
  }

  /* ── 導覽列 ── */
  .navigation-bar {
    width: 100% !important;
    padding: 0 40px !important;
  }
  .stark_lab_home .navigation-bar,
  .stark_lab_member .navigation-bar {
    width: 100% !important;
    padding: 0 40px !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  .stark_lab_home .overlap-group5,
  .stark_lab_home .landing-page {
    width: 100% !important;
    min-width: 0 !important;
  }
  .stark_lab_home .header {
    width: 100% !important;
    padding: 0 40px !important;
  }
  .stark_lab_member .overlap-group18 {
    width: 100% !important;
  }

  /* ── 首頁卡片 ── */
  .stark_lab_home .process-block {
    padding: 0 40px !important;
    width: 100% !important;
  }
  .stark_lab_home .card,
  .stark_lab_home .card-1 {
    width: 100% !important;
  }
  .stark_lab_home .content { width: 100% !important; }
  .stark_lab_home .fin-tech,
  .stark_lab_home .tech-edu,
  .stark_lab_home .med-tech,
  .stark_lab_home .intel-trans,
  .stark_lab_home .line-25 { width: 100% !important; }
  .stark_lab_home .fintech,
  .stark_lab_home .science-and-technology-education,
  .stark_lab_home .medical-science-and-technology,
  .stark_lab_home .intelligent-transformation { width: auto !important; max-width: 520px; }

  /* ── 首頁專案預覽 ── */
  .stark_lab_home .group-52 { min-width: 0 !important; width: 100% !important; }
  .stark_lab_home .overlap-group3,
  .stark_lab_home .overlap-group2 { min-width: 0 !important; }

  /* ── .page-wrapper 頁面 (project, professor) ── */
  .page-wrapper .navigation-bar { padding: 20px 40px !important; }
  .page-wrapper .page-title { margin: 40px 40px 0 !important; }
  .page-wrapper .cards-row  { margin: 28px 40px 0 !important; }
  .page-wrapper .card-full  { margin: 24px 40px 0 !important; }
  .page-wrapper .profile-section { padding: 40px 40px 24px !important; }
  .page-wrapper .divider    { margin: 0 40px !important; }
  .page-wrapper .divider-light { margin: 24px 40px 0 !important; }
  .page-wrapper .section-header { margin: 28px 40px 0 !important; }
  .page-wrapper .papers-list { margin: 12px 40px 0 !important; }
  .page-wrapper .footer     { padding: 36px 40px !important; }
  .page-wrapper .footer-logo { right: 40px !important; }

  /* ── 專案詳情頁共用 ── */
  [class*="stark_lab_project_"] .frame-27 {
    width: 100% !important;
    padding: 0 40px !important;
  }
  [class*="stark_lab_project_"] .group-15 { width: 100% !important; }
  [class*="stark_lab_project_"] .text-29  { width: 100% !important; }
  [class*="stark_lab_project_"] .line-26  { width: 100% !important; }
  [class*="stark_lab_project_"] .overlap-group5 { width: 96% !important; }
  [class*="stark_lab_project_"] .group-36 { width: 96% !important; }

  /* linebot / wra 共用類別 */
  .stark_lab_project_linebot .overlap-group5 { width: 96% !important; }
  .stark_lab_project_linebot .group-36 { width: 96% !important; }
  .stark_lab_project_linebot .frame-27 { width: 100% !important; padding: 0 40px !important; }
  .stark_lab_project_linebot .group-15 { width: 100% !important; }
  .stark_lab_project_linebot .text-29  { width: 100% !important; }
  .stark_lab_project_linebot .line-26  { width: 100% !important; }

  /* 功能列表、指標卡、KAB */
  .feature-list  { width: 100% !important; }
  .metrics-grid  { width: 100% !important; }
  .metric-list   { width: 100% !important; }
  .kab-grid      { width: 100% !important; }
  .flow-chart-wrap { width: 100% !important; }
  .arch-section  { width: 100% !important; }
  .arch-flow     { width: 100% !important; }
  .chart-grid    { width: 100% !important; }
  .chart-single  { width: 100% !important; }
  .agent-table-wrapper { width: 100% !important; }
  .download-section { width: 100% !important; }

  /* ── 專案詳情頁固定寬度容器（1200px 解鎖）── */
  .chart-container, .flow-chart, .funnel-chart,
  .arch-diagram, .arch-desc, .text-29-lead {
    width: 100% !important;
  }

  /* 成員頁面 */
  .stark_lab_member .overlap-group21 { width: 96% !important; }
  .stark_lab_member .group-container,
  .stark_lab_member .group-container-1 { max-width: 100% !important; padding: 0 20px; }
  .stark_lab_member .group-25 { max-width: 100% !important; }
  .stark_lab_member .overlap-group19 { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   2. 平板直向 / 大型手機 ≤ 900px
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* 首頁 hero 調整 */
  .stark_lab_home .header { height: auto !important; }
  .stark_lab_home .frame-13 { width: 100% !important; height: auto !important; }
  .stark_lab_home .pioneering-solutions { font-size: 36px !important; }
  .stark_lab_home .text_label { width: 100% !important; }

  /* 隱藏首頁 hero 浮動圖片（在小螢幕與文字重疊） */
  .stark_lab_home .x1-1 {
    display: none !important;
  }

  /* 首頁專案預覽：垂直堆疊 */
  .stark_lab_home .group-52 {
    flex-direction: column !important;
    min-width: 0 !important;          /* BUG FIX: 1279px 未清除導致 769–900px 橫向溢出 */
    gap: 20px !important;
    margin-top: 40px !important;
    padding: 0 20px !important;
  }
  /* 卡片整體：改為上下佈局，圖片在上文字在下
     BUG FIX: 原 1200px 規則設 flex:1 1 0（flex-basis:0），切到 column 方向後
     flex-basis 作用於高度，導致兩張卡片初始高度 0 而疊在一起。
     flex: none = flex: 0 0 auto，讓卡片回歸內容自然高度。 */
  .stark_lab_home .overlap-group3,
  .stark_lab_home .overlap-group2 {
    flex: none !important;            /* 清除 flex:1 1 0 的 flex-basis:0 */
    display: flex !important;         /* 保持 flex 佈局 */
    position: relative !important;    /* 確保在正常流 */
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 28px 24px !important;
  }
  /* 文字欄：佔滿全寬、取消 align-self flex-end */
  .stark_lab_home .flex-col,
  .stark_lab_home .flex-col-1 {
    width: 100% !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    gap: 16px !important;
  }
  /* 專案預覽圖：置中 / 等比縮放 */
  .stark_lab_home .rectangle-79,
  .stark_lab_home .x1-2 {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    align-self: center !important;
  }

  /* .page-wrapper 頁面 padding */
  .page-wrapper .navigation-bar { padding: 16px 24px !important; }
  .page-wrapper .page-title     { margin: 28px 24px 0 !important; font-size: 28px !important; }
  .page-wrapper .cards-row      { flex-direction: column !important; margin: 20px 24px 0 !important; }
  .page-wrapper .card-full      { margin: 16px 24px 0 !important; }
  .page-wrapper .profile-section { padding: 28px 24px 16px !important; gap: 20px !important; flex-wrap: wrap !important; }
  .page-wrapper .profile-orcid  { margin-left: 0 !important; margin-top: 8px !important; flex-basis: 100% !important; }
  .page-wrapper .paper-entry    { font-size: 16px !important; }
  .page-wrapper .divider        { margin: 0 24px !important; }
  .page-wrapper .divider-light  { margin: 16px 24px 0 !important; }
  .page-wrapper .section-header { margin: 20px 24px 0 !important; }
  .page-wrapper .papers-list    { margin: 8px 24px 0 !important; }
  .page-wrapper .footer         { padding: 28px 24px !important; }
  .page-wrapper .footer-logo    { position: static !important; display: block; margin-top: 20px; height: 24px; }

  /* 成員卡片：3→2 欄 */
  .stark_lab_member .group {
    flex: 0 0 calc(50% - 25px) !important;
    width: calc(50% - 25px) !important;
    height: auto !important;
    min-height: 360px !important;
  }
  .stark_lab_member .overlap-group-1 {
    height: auto !important;
    width: 100% !important;
  }

  /* 成員頁面教授 hero 區塊 */
  .stark_lab_member .group-14 {
    padding: 40px !important;
    height: auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
  }
  .stark_lab_member .text-47 { font-size: 60px !important; }
  .stark_lab_member .name-2  { width: 100% !important; height: auto !important; position: static !important; }
  .stark_lab_member .assistant-professor { position: static !important; font-size: 24px !important; }
  .stark_lab_member .picture-and-name { padding: 0 !important; flex-wrap: wrap !important; }
  .stark_lab_member .rectangle-80 {
    position: static !important;
    width: 200px !important;
    height: 200px !important;
    margin: 20px auto 0 !important;
    display: block !important;
  }
  .stark_lab_member .content-2 { flex-direction: column !important; width: 100% !important; }

  /* 五個指標卡：5→3 */
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── 專案詳情頁固定寬度容器（900px 解鎖）── */
  .chart-container, .flow-chart, .funnel-chart,
  .arch-diagram, .arch-desc, .text-29-lead {
    width: 100% !important;
  }

  /* ── 指標卡片：3→2 欄 ── */
  .metric-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   3. 主要手機斷點 ≤ 768px
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 導覽列 ── */
  .navigation-bar {
    width: 100% !important;
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  .navbar {
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
  .navbar-link-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }
  .logo-1 {
    height: 44px !important;
    width: auto !important;
  }

  /* 遮蔽裝飾線（絕對定位到螢幕外） */
  .line-30, .line-31, .line-31-1 { display: none !important; }

  /* ── 首頁 hero 區塊 ── */
  .stark_lab_home .overlap-group5 {
    height: auto !important;
    margin-top: 0 !important;
    padding-bottom: 40px;
  }
  .stark_lab_home .landing-page {
    position: static !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .stark_lab_home .navigation-bar {
    position: static !important;
    width: 100% !important;
    padding: 14px 16px !important;
  }
  .stark_lab_home .line-31-1 { display: none !important; }
  .stark_lab_home .header {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    padding: 24px 20px !important;
    display: block !important;
  }
  .stark_lab_home .frame-13 {
    width: 100% !important;
    height: auto !important;
  }
  .stark_lab_home .pioneering-solutions { font-size: 28px !important; }
  .stark_lab_home .text_label {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  .stark_lab_home .x1-1 { display: none !important; }

  /* 首頁卡片區塊 */
  .stark_lab_home .process-block {
    padding: 0 16px !important;
    margin-top: 32px !important;
  }
  .stark_lab_home .card,
  .stark_lab_home .card-1 {
    width: 100% !important;
    padding: 28px 20px !important;
    border-radius: 24px !important;
  }
  .stark_lab_home .content {
    width: 100% !important;
    margin-top: 0 !important;
    gap: 12px !important;
  }
  .stark_lab_home .label { gap: 12px !important; }
  .stark_lab_home .number-4 { font-size: 40px !important; }
  .stark_lab_home .fintech,
  .stark_lab_home .science-and-technology-education,
  .stark_lab_home .medical-science-and-technology,
  .stark_lab_home .intelligent-transformation {
    font-size: 18px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .stark_lab_home .fin-tech,
  .stark_lab_home .tech-edu,
  .stark_lab_home .med-tech,
  .stark_lab_home .intel-trans,
  .stark_lab_home .line-25 { width: 100% !important; }

  /* 首頁「專案」標題 */
  .stark_lab_home .group-1 {
    margin-left: 16px !important;
    min-width: 0 !important;
    margin-top: 48px !important;
  }
  .stark_lab_home .project { font-size: 32px !important; width: auto !important; min-height: auto !important; }

  /* 首頁專案預覽卡 */
  .stark_lab_home .group-52 {
    flex-direction: column !important;
    min-width: 0 !important;
    width: calc(100% - 32px) !important;
    margin: 24px 16px 0 !important;
    gap: 16px !important;
  }
  .stark_lab_home .overlap-group3 {
    flex: none !important;
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 24px !important;
    border-radius: 32px !important;
    gap: 20px !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
  }
  .stark_lab_home .overlap-group2 {
    flex: none !important;
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 24px !important;
    border-radius: 32px !important;
    gap: 20px !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
  }
  .stark_lab_home .flex-col,
  .stark_lab_home .flex-col-1 {
    gap: 16px !important;
    min-height: 0 !important;
    width: 100% !important;
    align-self: flex-start !important;
  }
  /* ← 已移至 .stark_lab_home .rectangle-79 / .x1-2（更具體的選擇器）：不在此覆蓋 */

  /* 首頁 footer wrapper */
  .stark_lab_home .overlap-group4 {
    height: auto !important;
    width: 100% !important;
    margin-top: 40px !important;
    position: static !important;
  }
  /* BUG FIX: footer 內部固定寬度 532px / 504px 未清除 */
  .stark_lab_home .navigation-and-contacts {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .stark_lab_home .frame-26 {
    width: 100% !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* ── 成員頁面 hero ── */
  .stark_lab_member .overlap-group18 {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 14px 16px !important;
    position: static !important;
  }
  .stark_lab_member .navigation-bar {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .stark_lab_member .overlap-group21 {
    width: calc(100% - 32px) !important;
    height: auto !important;
    margin-top: 24px !important;
    border-radius: 32px !important;
  }
  .stark_lab_member .group-14 {
    flex-direction: column !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 32px 24px !important;
    align-items: center !important;
    position: static !important;
    width: 100% !important;
  }
  .stark_lab_member .content-2 {
    flex-direction: column !important;
    width: 100% !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .stark_lab_member .person-1 { width: 100% !important; }
  .stark_lab_member .picture-and-name {
    padding: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .stark_lab_member .name-2 {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
  .stark_lab_member .text-47 {
    position: static !important;
    font-size: 48px !important;
    line-height: 1.1 !important;
  }
  .stark_lab_member .assistant-professor {
    position: static !important;
    font-size: 18px !important;
    width: auto !important;
    margin-top: 8px !important;
  }
  .stark_lab_member .rectangle-80 {
    position: static !important;
    width: 160px !important;
    height: 160px !important;
    left: auto !important;
    top: auto !important;
    border-radius: 20px !important;
    margin: 20px auto 0 !important;
  }
  .stark_lab_member .p4 { font-size: 16px !important; line-height: 1.6 !important; }

  /* 成員卡片：手機版改為 2 欄緊湊網格 */
  .stark_lab_member .group-container,
  .stark_lab_member .group-container-1 {
    flex-direction: row !important;    /* 保持橫排，讓 wrap 生效 */
    flex-wrap: wrap !important;
    padding: 0 12px !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* 成員卡片：2 欄 */
  .stark_lab_member .group {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 20px !important;
    padding: 16px 12px !important;
    box-shadow: 0 3px 0 #000 !important;
  }
  .stark_lab_member .overlap-group-1 {
    height: auto !important;
    width: 100% !important;
    position: static !important;
  }
  .stark_lab_member .content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* 頭像 + 名字：改成 column（照片在上、文字在下）便於窄欄顯示 */
  .stark_lab_member .picture-and-name {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }
  .stark_lab_member .name {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .stark_lab_member .name-1 {
    position: static !important;
    font-size: 15px !important;
    text-align: center !important;
  }
  .stark_lab_member .director-of-operations {
    position: static !important;
    font-size: 11px !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 2px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }

  /* 頭像縮小 */
  .stark_lab_member .picture {
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
  }
  .stark_lab_member .overlap-group-2 {
    width: 60px !important;
    height: 60px !important;
  }
  .stark_lab_member .mask-group {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  /* 簡介文字：縮小字型 + 最多顯示 4 行 */
  .stark_lab_member .text-1 {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 成員頁「研究生」「大學部」標題 */
  .stark_lab_member .group-25 {
    margin: 48px 16px 0 !important;
    padding: 0 !important;
  }

  /* 成員頁 footer */
  .stark_lab_member .overlap-group19 {
    height: auto !important;
    width: calc(100% - 32px) !important;
    margin: 40px 16px 0 !important;
  }

  /* 成員頁 footer 內部 */
  .stark_lab_member .navigation-and-contacts {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    gap: 16px !important;
  }
  .stark_lab_member .frame-26 {
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
  }
  .stark_lab_member .address-100 {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ── 所有 .page-wrapper 頁面 ── */
  .page-wrapper .navigation-bar {
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .page-wrapper .navbar { flex-wrap: wrap !important; gap: 10px !important; }
  .page-wrapper .page-title {
    margin: 24px 16px 0 !important;
    font-size: 26px !important;
  }
  .page-wrapper .cards-row {
    flex-direction: column !important;
    margin: 16px 16px 0 !important;
    gap: 16px !important;
  }
  .page-wrapper .card-full { margin: 16px 16px 0 !important; }
  .page-wrapper .card {
    padding: 24px 20px !important;
    min-height: 0 !important;
  }
  .page-wrapper .card-img { height: 100px !important; }
  .page-wrapper .card-title-white,
  .page-wrapper .card-title-dark { font-size: 22px !important; }

  /* professor 頁 */
  .page-wrapper .profile-section {
    padding: 24px 16px 16px !important;
    gap: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .page-wrapper .profile-name { font-size: 28px !important; }
  .page-wrapper .profile-orcid {
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .page-wrapper .section-badge { font-size: 20px !important; padding: 8px 14px !important; }
  .page-wrapper .paper-entry {
    font-size: 15px !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .page-wrapper .paper-year { text-align: left !important; padding-top: 0 !important; }
  .page-wrapper .footer { padding: 24px 16px !important; }
  .page-wrapper .footer-logo { display: none !important; }

  /* ── 專案詳情頁（Anima 樣式頁面）── */
  /* 導覽列 wrapper */
  .stark_lab_project_linebot .overlap-group3 {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 14px 16px !important;
    position: static !important;
  }
  .stark_lab_project_linebot .navigation-bar {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .stark_lab_project_linebot .line-30 { display: none !important; }

  /* 回上一頁按鈕 */
  .stark_lab_project_linebot .overlap-group4 {
    margin-left: 16px !important;
    margin-top: 16px !important;
  }

  /* Hero banner（linebot）：與 [class*="stark_lab_project_"] 通用規則一致 */
  .stark_lab_project_linebot .overlap-group5 {
    width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 20px 16px 0 !important;
    /* 藍色背景、flex column 由通用規則（下方）補上 */
  }
  /* 空白背景 div → 由通用規則隱藏 */
  /* Hero 標題 */
  .stark_lab_project_linebot .hero-title,
  .stark_lab_project_linebot .line-bot {
    position: static !important;
    font-size: 48px !important;
    line-height: 1.2 !important;
    height: auto !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    order: 1 !important;
  }
  /* 開發者標籤 */
  .stark_lab_project_linebot .developer-label,
  .stark_lab_project_linebot .xxx-xxx-xxx-xxx {
    position: static !important;
    font-size: 14px !important;
    margin-top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    white-space: normal !important;
    order: 3 !important;
  }
  /* Hero 封面圖 */
  .stark_lab_project_linebot .hero-cover,
  .stark_lab_project_linebot .x2-1 {
    position: static !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 20px auto 0 !important;
    display: block !important;
    border-radius: 16px !important;
    object-fit: cover !important;
  }

  /* 區段 */
  .stark_lab_project_linebot .frame-27 {
    width: 100% !important;
    padding: 0 16px !important;
    margin-top: 32px !important;
    gap: 16px !important;
  }
  .stark_lab_project_linebot .overlap-group-1 {
    margin-left: 0 !important;
    margin-top: 8px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    height: 52px !important;
  }
  .stark_lab_project_linebot .section-title-text {
    font-size: 24px !important;
    min-height: 0 !important;
  }
  .stark_lab_project_linebot .text { font-size: 24px !important; min-height: 0 !important; }
  .stark_lab_project_linebot .group-15 { width: 100% !important; gap: 20px !important; }
  .stark_lab_project_linebot .text-29 {
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-right: 0 !important;
  }

  /* 功能列表：2→1 欄 */
  .feature-list {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 14px !important;
  }
  .feature-item { padding: 24px 20px !important; }
  .feature-item .fi-title { font-size: 18px !important; }

  /* 指標卡：5→2 欄（.metrics-grid 是 linebot 頁用的） */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .metric-card { padding: 20px 12px !important; }
  .metric-card .mc-value { font-size: 32px !important; }

  /* 指標卡（.metric-list 是 podcast / crypto 頁用的）：4→2 欄 */
  .metric-list {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .metric-card .metric-value { font-size: 28px !important; }
  .metric-card .metric-label { font-size: 13px !important; }

  /* 圖表格：2→1 欄 */
  .chart-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }
  .chart-single {
    width: 100% !important;
  }
  .chart-card {
    padding: 20px 14px !important;
  }
  .chart-card-title { font-size: 18px !important; }
  .chart-card-sub   { font-size: 13px !important; }

  /* 技術架構圖容器 */
  .arch-flow {
    width: 100% !important;
    padding: 20px 12px !important;
    border-radius: 16px !important;
    overflow-x: auto !important;
  }
  .arch-flow-title { font-size: 16px !important; margin-bottom: 14px !important; }

  /* Agent 表格：水平可捲動 */
  .agent-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .agent-table {
    min-width: 560px !important;
    font-size: 14px !important;
  }
  .agent-table thead th { padding: 10px 12px !important; font-size: 14px !important; }
  .agent-table tbody td { padding: 10px 12px !important; font-size: 13px !important; }

  /* 流程圖：橫向→縱向 */
  .flow-steps {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .flow-step { width: 100% !important; max-width: 400px !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; }
  .flow-step:not(:last-child)::after {
    content: '↓' !important;
    position: static !important;
    display: block !important;
    font-size: 24px !important;
    text-align: center !important;
    width: 100% !important;
    margin: 4px 0 !important;
  }
  .flow-step-circle { width: 48px !important; height: 48px !important; flex-shrink: 0 !important; font-size: 22px !important; }
  .flow-step-name { text-align: left !important; font-size: 15px !important; }
  .flow-step-desc { text-align: left !important; font-size: 13px !important; }

  /* KAB 三欄：→ 1 欄 */
  .kab-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }
  .kab-card { padding: 28px 20px !important; }

  /* 架構圖 */
  .arch-section { width: 100% !important; }
  .arch-svg-wrap { padding: 20px 12px !important; border-radius: 16px !important; }

  /* 下載區塊 */
  .download-section {
    width: 100% !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 28px 20px !important;
    border-radius: 16px !important;
    align-items: flex-start !important;
  }
  .dl-btn { width: 100% !important; justify-content: center !important; }

  /* download-item（podcast / crypto 用） */
  .download-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 16px !important;
  }
  .download-item .di-action {
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  /* Chart section label */
  .chart-section-label { font-size: 18px !important; margin-bottom: 20px !important; }

  /* 成果指標卡圖表整體區塊 */
  .stark_lab_project_linebot .frame-27 [style*="width:1226px"],
  .stark_lab_project_linebot .frame-27 [style*="width: 1226px"] {
    width: 100% !important;
  }

  /* ── 固定寬度容器（chart / flow / funnel / arch）── */
  .chart-container, .flow-chart, .funnel-chart {
    width: 100% !important;
    overflow-x: auto !important;
  }
  .arch-diagram {
    width: 100% !important;
    overflow-x: auto !important;
    padding: 20px 16px !important;
  }
  .arch-desc { width: 100% !important; font-size: 15px !important; }
  .text-29-lead {
    width: 100% !important;
    font-size: 16px !important;
    padding: 16px 20px !important;
  }

  /* ── 指標卡片：3→1 欄 ── */
  .metric-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .metric-card { padding: 22px 16px !important; }
  .metric-card .mc-value { font-size: 36px !important; }

  /* ── Bar 比較圖 ── */
  .bar-compare { padding: 24px 20px !important; }
  .bar-row { flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 16px !important; }
  .bar-row-label { width: 100% !important; font-size: 14px !important; }

  /* ── 年度績效表：橫向捲動 ── */
  .yearly-table { min-width: 320px !important; font-size: 14px !important; }
  .yearly-table th, .yearly-table td { padding: 10px 12px !important; font-size: 14px !important; }

  /* ── 架構圖 arch-row：不換行，讓容器橫向捲動 ── */
  .arch-row { justify-content: flex-start !important; flex-wrap: nowrap !important; }
  .arch-node { min-width: 100px !important; font-size: 13px !important; padding: 12px 14px !important; }

  /* ── 漏斗圖：水平→垂直堆疊 ── */
  .funnel-stages { flex-direction: column !important; gap: 0 !important; }
  .funnel-divider { width: 100% !important; height: 2px !important; flex-shrink: 0 !important; }
  .funnel-stage { padding: 28px 24px !important; }
  .funnel-stage:first-child { border-radius: 20px 20px 0 0 !important; }
  .funnel-stage:last-child  { border-radius: 0 0 20px 20px !important; }
  .funnel-stage.stage-mid   { border-radius: 0 !important; }
  .funnel-arrow { display: none !important; }

  /* ── 流程圖水平箭頭隱藏（已垂直排列，不需 →）── */
  .flow-arrow { display: none !important; }

  /* ── Hero 副標題 ── */
  .hero-subtitle {
    position: static !important;
    white-space: normal !important;
    font-size: 15px !important;
    margin-top: 0 !important;
    display: block !important;
    letter-spacing: 0.04em !important;
    order: 2 !important;
  }

  /* 相關連結卡片 */
  .stark_lab_project_linebot .overlap-group2 {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  .stark_lab_project_linebot .overlap-group2 > a {
    padding: 40px 28px !important;
  }
  .stark_lab_project_linebot .overlap-group2::before { display: none !important; }

  /* 相片展示區 */
  .photo-container { width: 100% !important; gap: 20px !important; }
  .photo-section { max-width: 100% !important; }
  .photo-section .photo { height: 280px !important; }

  /* Footer */
  .stark_lab_project_linebot .group-36 {
    width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 40px 16px 0 !important;
  }
  .stark_lab_project_linebot .footer {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    border-radius: 28px 28px 0 0 !important;
    padding: 28px 24px 32px !important;
    gap: 20px !important;
  }
  .stark_lab_project_linebot .navigation-and-contacts {
    width: 100% !important;
    height: auto !important;
    gap: 16px !important;
  }
  .stark_lab_project_linebot .frame-26 {
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
  }
  .stark_lab_project_linebot .info { width: 100% !important; }
  .stark_lab_project_linebot .address-100 {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .stark_lab_project_linebot .email-d04921004ntuedutw { font-size: 15px !important; }
  .stark_lab_project_linebot .group-30 { display: none !important; }

  /* Footer component (全站 Anima pages) */
  .footer {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    border-radius: 28px 28px 0 0 !important;
    padding: 28px 20px 32px !important;
    gap: 20px !important;
  }

  /* ── AI Learning 頁面 ── */
  .stark_lab_project_ai_learning .overlap-group3 {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 14px 16px !important;
    position: static !important;
  }

  /* ── ETF Bot / Stock / Financial 頁 ── */
  /* 這些頁面使用 tokens.css + base.css，結構與 wra/linebot 類似 */
  /* 透過 [class*="stark_lab_project_"] 統一覆蓋 */
  [class*="stark_lab_project_"] .overlap-group3 {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 14px 16px !important;
    position: static !important;
  }
  [class*="stark_lab_project_"] .navigation-bar {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
  }
  [class*="stark_lab_project_"] .overlap-group4 {
    margin-left: 16px !important;
    margin-top: 16px !important;
  }
  /* BUG FIX: 原做法把空白背景 div (.overlap-group) 設為 static flex container
     但標題/副標/圖片等內容是同層兄弟，不是子元素，導致文字跑到藍底外面。
     修正：把藍色背景樣式搬到父容器 .overlap-group5，並隱藏空的 .overlap-group。 */
  [class*="stark_lab_project_"] .overlap-group5 {
    width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 20px 16px 0 !important;
    position: relative !important;
    background-color: #0f87e0 !important;
    border: 2px solid #000000 !important;
    border-radius: 28px !important;
    box-shadow: 0 5px 0 #000000 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 24px 28px !important;
    gap: 12px !important;
  }
  /* 空白背景 div：父容器已提供藍底，故隱藏 */
  [class*="stark_lab_project_"] .overlap-group {
    display: none !important;
  }
  [class*="stark_lab_project_"] .frame-27 {
    width: 100% !important;
    padding: 0 16px !important;
    margin-top: 32px !important;
  }
  [class*="stark_lab_project_"] .group-15 { width: 100% !important; }
  [class*="stark_lab_project_"] .text-29 {
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-right: 0 !important;
  }
  [class*="stark_lab_project_"] .line-26 { width: 100% !important; }
  [class*="stark_lab_project_"] .overlap-group-1 {
    margin-left: 0 !important;
    margin-top: 8px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    height: 52px !important;
  }
  [class*="stark_lab_project_"] .group-36 {
    width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 40px 16px 0 !important;
  }

  /* 所有專案頁的絕對定位 hero 元素 */
  [class*="stark_lab_project_"] .line-bot {
    position: static !important;
    font-size: 48px !important;
    line-height: 1.2 !important;
    height: auto !important;
    width: 100% !important;
    order: 1 !important;            /* 標題排第一 */
  }
  [class*="stark_lab_project_"] .xxx-xxx-xxx-xxx,
  [class*="stark_lab_project_"] .x-x-x {
    position: static !important;
    font-size: 14px !important;
    margin-top: 0 !important;       /* gap 負責間距 */
    white-space: normal !important;
    order: 3 !important;            /* 作者排第三 */
  }
  [class*="stark_lab_project_"] .x2-1,
  [class*="stark_lab_project_"] .x-1,
  [class*="stark_lab_project_"] .x-2 {
    position: static !important;
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;      /* gap 負責上方間距 */
    object-fit: cover !important;
    border-radius: 14px !important;
    order: 4 !important;            /* 圖片排最後 */
  }
  [class*="stark_lab_project_"] .feature-list { width: 100% !important; }
  [class*="stark_lab_project_"] .arch-section { width: 100% !important; }

  /* 全站 group-30 logo（footer 右下） */
  .group-30 { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   4. 小型手機 ≤ 480px
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* 導覽列：超小螢幕字型壓縮 */
  .navbar-link-text { font-size: 11px !important; }
  .logo-1 { height: 36px !important; }
  .navigation-bar { padding: 10px 12px !important; gap: 6px !important; }
  .navbar { gap: 8px !important; }

  /* Hero 標題更小 */
  .stark_lab_project_linebot .hero-title,
  .stark_lab_project_linebot .line-bot,
  [class*="stark_lab_project_"] .line-bot {
    font-size: 36px !important;
  }

  /* 首頁標題 */
  .stark_lab_home .pioneering-solutions { font-size: 22px !important; }
  .stark_lab_home .project { font-size: 26px !important; }
  .stark_lab_home .number-4 { font-size: 32px !important; }
  .stark_lab_home .fintech,
  .stark_lab_home .science-and-technology-education,
  .stark_lab_home .medical-science-and-technology,
  .stark_lab_home .intelligent-transformation { font-size: 15px !important; }

  /* 指標卡：維持 2 欄（再小再說） */
  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-list  { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-card .mc-value { font-size: 28px !important; }
  .metric-card .metric-value { font-size: 24px !important; }
  .metric-cards { grid-template-columns: 1fr !important; }

  /* 成員卡片：超小螢幕再縮緊 */
  .stark_lab_member .group-container,
  .stark_lab_member .group-container-1 {
    padding: 0 8px !important;
    gap: 8px !important;
  }
  .stark_lab_member .group {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    padding: 12px 8px !important;
  }
  .stark_lab_member .picture,
  .stark_lab_member .overlap-group-2 { width: 48px !important; height: 48px !important; }
  .stark_lab_member .mask-group { width: 48px !important; height: 48px !important; }
  .stark_lab_member .name-1 { font-size: 13px !important; }
  .stark_lab_member .director-of-operations { font-size: 10px !important; }
  .stark_lab_member .text-1 { font-size: 11px !important; -webkit-line-clamp: 3 !important; }

  /* 成員教授名字 */
  .stark_lab_member .text-47 { font-size: 40px !important; }

  /* SVG 圖表說明文字 */
  .arch-caption { font-size: 13px !important; }

  /* 下載按鈕 */
  .dl-btn { font-size: 16px !important; padding: 14px 20px !important; }

  /* 頁面 footer 字型 */
  .stark_lab_project_linebot .address-100,
  .stark_lab_project_linebot .email-d04921004ntuedutw,
  [class*="stark_lab_"] .notosanstc-normal-white-18px,
  [class*="stark_lab_"] .notosans-normal-white-18px {
    font-size: 13px !important;
  }

  /* professor/project list 頁 */
  .page-wrapper .card { flex-direction: column !important; align-items: flex-start !important; }
  .page-wrapper .card-img { width: 100% !important; height: 160px !important; object-fit: cover !important; border-radius: 8px !important; }
  .page-wrapper .profile-name { font-size: 24px !important; }
}

/* ══════════════════════════════════════════════════════════════
   5. 超小螢幕安全保護 ≤ 360px
══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .metrics-grid { grid-template-columns: 1fr !important; }
  .navbar-link-text { font-size: 10px !important; }
  .stark_lab_project_linebot .hero-title,
  [class*="stark_lab_project_"] .line-bot { font-size: 30px !important; }
}