* {
      box-sizing: border-box;
      font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  }

  body {
      margin: 0;
      background: #f5f6f8;
  }

  /* ===== Sticky Header ===== */
  .header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: #ffffff;
      padding: 16px 24px;
      border-bottom: 1px solid #e0e0e0;
  }

  .header-title {
      font-size: 20px;
      font-weight: 700;
      margin-top: -5px;
      margin-bottom: 10px;
  }

.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto; 
    white-space: nowrap;
    width: 100%;
    /* 讓滾動更平滑（手機滑動時體驗更好） */
    -webkit-overflow-scrolling: touch; 
    /* 選擇性：美化或隱藏滾動條（看你個人喜好） */
    padding-bottom: 5px;
}

.header-controls .filter-help,
.header-controls select {
    flex-shrink: 0;
}

  select {
      font-size: 12px;
      padding: 2px 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      background: #fff;
      cursor: pointer;
      width: 100px;
      height: 30px;
  }

  .filter-help {
      font-size: 14px;
      color: #888;
      /* font-style: italic; */
      vertical-align: middle;
      line-height: 1.4;
      display: inline-block;
      padding-left: 10px;
  }

  /* ===== Content ===== */
  .content {
      padding: 16px 24px;
  }

  .table-wrapper {
      height: 73vh;
      background: #fff;
      border-radius: 10px;
      overflow-x: auto;
      overflow-y: auto;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }

  .table-wrapper.panel-collapsed {
      height: 97vh;
  }

  #stock-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
  }

  #stock-table thead tr th:first-child {
    position: sticky;
    left: 0;
    z-index: 999;
    background-color: #f8f9fa;
  }

  #stock-table tbody tr td.stock {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #ffffff;
  }
  
.help-icon {
  display: inline-flex;       /* 讓裡面的問號能完美置中 */
  align-items: center;        /* 垂直置中 */
  justify-content: center;    /* 水平置中 */
  
  width: 12px;                /* 框框的寬度 */
  height: 12px;               /* 框框的高度 */
  line-height: 1;             /* 校正文字行高 */
  
  border: 1px solid #999;     /* 灰色邊框：1像素、實線 */
  border-radius: 50%;         /* 關鍵：讓外框變成完美圓形 */
  
  font-size: 9px;            /* 問號字體大小 */
  color: #666;                /* 問號顏色 */
  cursor: pointer;            /* 滑鼠移上去變成手指形狀 */
  margin-left: 4px;           /* 跟前方文字保持一點距離 */
}

/* 可選：滑鼠移上去時，框框和顏色一起變深 */
.help-icon:hover {
  color: #007bff;
  border-color: #007bff;
}

  /* 1. 確保提示圖示本身是定位基準，並手動加上問號的樣式（如果原本沒有的話） */
.help-icon {
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin-left: 4px;
  color: #007bff; /* 可以依據你的網頁主題換顏色 */
}
.help-area {
  position: relative; /* 🌟 關鍵：讓提示框以這個標籤為對齊基準 */
  cursor: pointer;    /* 順便加個手指游標，提示使用者可以懸停 */
  display: inline-block; /* 確保寬高計算正常 */
}
/* 2. 隱藏預設的提示框，並設定樣式與內容（讀取 data-tooltip） */
.help-area::after {
  content: attr(data-tooltip); /* 自動抓取 HTML 裡的 data-tooltip 文字 */
  position: absolute;
  /* bottom: -30%; 顯示在圖示正上方 */
  /* left: -780%; */
  transform: translate(-20%, -20%); /* 讓提示框水平居中 */
  
  /* 提示框外觀樣式 */
  background-color: #969696c0;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap; /* 防止文字折行 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  
  /* 預設隱藏與漸變動畫 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
  z-index: 999;
}

/* 3. 當滑鼠懸停 (Hover) 時，顯示提示框 */
.help-area:hover::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.3s;
}

  table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
  }

  thead {
      background: #fafafa;
  }

  /* 懸浮標題關鍵 */
  thead th {
      position: sticky;
      top: 0;
      background-color: #f8f9fa;
      z-index: 10;
      cursor: pointer;
      /* 讓使用者知道可以點擊 */
      user-select: none;
      /* 防止快速點擊時選取文字 */
      padding: 10px;
      border-bottom: 2px solid #dee2e6;
  }

  /* 排序箭頭樣式 */
  th.sort-asc::after {
      content: " ▲";
      color: #007bff;
  }

  th.sort-desc::after {
      content: " ▼";
      color: #007bff;
  }

  /* 為了美觀，滑過標題時變色 */
  thead th:hover {
      background-color: #e9ecef;
  }

  th, td {
      padding: 12px 10px;
      border-bottom: 1px solid #eee;
      text-align: center;
      white-space: nowrap;
  }

  th {
      font-weight: 600;
      color: #555;
  }
  

  tbody tr:hover {
      background: #f7f9fc;
  }

  .stock {
      text-align: left;
      color: #1a73e8;
      font-weight: 500;
  }

  .up {
      color: #d93025;
  }

  .down {
      color: #188038;
  }

  .limit-up {
      background: #d93025;
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
  }

  .limit-down {
      background: #188038;
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
  }

  .market-time {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 0px;
      padding: 4px 10px;
      font-size: 13px;
      color: #555;
      background: #f1f3f4;
      border-radius: 999px;
  }

  .market-time::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1a73e8;
  }

  /* ===== 統計按鈕樣式 ===== */
  .stats-control {
      position: relative;
  }

  .stats-button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 25px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 100px;
      justify-content: center;
  }

  .stats-button:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  }

  .stats-button:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .stats-button:disabled:hover {
      transform: none;
  }

  .spinner {
      animation: spin 1s linear infinite;
  }

  /* 小角角按鈕 */
.collapse-toggle {
  position: sticky;
  top: 0;
  z-index: 1001;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  background: rgba(255,255,255,0.9);
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

/* 上半部 wrapper：預設展開 */
#top-wrapper {
  overflow: hidden;
  max-height: 500px;              /* 要 > 實際高度，依實際調整 */
  transition: max-height 0.35s ease, 
              transform 0.35s ease,
              opacity 0.35s ease;
}

/* 收合上半部時 */
#top-wrapper.collapsed {
  max-height: 0;
  transform: translateY(-10px);
  opacity: 0;
}

/* 小角角在收合狀態的樣式 */
.collapse-toggle.collapsed {
  background: rgba(255,255,255,0.95);
}