@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  color-scheme: dark;
  --bg: #050914;
  --bg-soft: rgba(8, 15, 30, 0.72);
  --panel: rgba(12, 18, 36, 0.68);
  --panel-border: rgba(152, 180, 255, 0.16);
  --text: #eff4ff;
  --muted: rgba(239, 244, 255, 0.72);
  --accent: #7db2ff;
  --accent-strong: #f2d66b;
  --up: #ff4d5f;
  --down: #3ef28f;
  --flat: #ffffff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.258);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 15% 20%, rgba(71, 102, 255, 0.18), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(58, 242, 143, 0.12), transparent 22%),
    radial-gradient(circle at 50% 90%, rgba(255, 209, 102, 0.1), transparent 26%),
    var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
}

body {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

/* 🎄 stoXmas 專屬聖誕主題彈窗 */
.swal2-popup {
  /* 採用深冬夜空色（或深松針綠），讓雪人與燈泡更顯眼 */
  background: #111a24 !important; 
  border: 2px solid #2c3e50;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  font-family: system-ui, -apple-system, sans-serif;
}

/* 標題：純淨雪地白 */
.swal2-title {
  color: #f8f9fa !important;
  font-weight: 700 !important;
}

/* 內文與說明：暖調白 */
.swal2-html-container {
  color: #e2e8f0 !important;
  line-height: 1.6;
}

/* 內嵌的分享網址區塊（程式碼區塊） */
.swal2-html-container code {
  background: #1a2635 !important;
  color: #19b9b9 !important;
  border: 1px solid #34495e !important;
  border-radius: 6px;
  display: block;
  padding: 10px !important;
  font-family: monospace;
}

/* 🟢 確認按鈕：經典聖誕紅 */
.swal2-confirm {
  background-color: #b69d3a !important; /* 聖誕燈泡暖黃 */
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: bold !important;
  transition: all 0.2s ease;
}
.swal2-confirm:hover {
  background-color: #d2bf70 !important; /* 懸浮時變亮黃 */
  box-shadow: 0 0 10px rgba(242, 215, 107, 0.749) !important; /* 增加發光效果 */
}

/* 🔴 取消按鈕：冷冬灰藍 */
.swal2-cancel {
  background-color: #475569 !important;
  color: #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease;
}
.swal2-cancel:hover {
  background-color: #64748b !important;
  color: #fff !important;
}

/* 自訂圖示的邊框調整 */
.swal2-icon.swal2-success {
  border-color: #2ecc71 !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(46, 204, 113, 0.3) !important;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
}

#scene {
  width: 100%;
  height: 100%;
  display: block;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.overlay--hidden {
  display: none !important;
}

/* 浮動按鈕 RWD 流動優化 */
.floating-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.8rem 1rem;
  background: rgba(10, 14, 28, 0.8);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  cursor: pointer;
  pointer-events: auto;
}

.floating-toggle:hover {
  transform: translateY(-1px);
}

.floating-toggle--secondary {
  top: 4.7rem;
}

.floating-toggle--tertiary {
  top: 8.4rem;
}

.floating-toggle--quaternary {
  top: 12.1rem;
}

.floating-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.glass {
  background: linear-gradient(180deg, rgba(17, 24, 41, 0.74), rgba(10, 14, 28, 0.58));
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 1.35rem;
  pointer-events: auto;
  overflow: auto;
}

.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  white-space: nowrap;
}

.logo-title-container {
  display: flex;
  align-items: center; /* 關鍵：確保大 Logo 與文字垂直居中 */
  gap: 0.6em;
  text-shadow: 0 0 30px rgb(113, 18, 13);
}

.logo {
  height: 5em; /* 放大到字體的 5 倍 */
  width: auto;
}

.logo-title {
  font-size: 3.5rem;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.logo-title:hover {
  color: var(--accent-strong);
  text-shadow: 0 0 40px rgb(255, 77, 95);
}

h1, h2, h3, p {
  margin: 0;
}

h1 {
  font-size: 4.25rem;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

h2 {
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.lede {
  max-width: 58ch;
  margin-top: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
}

.text-red {
  color: #ff3b30;
  font-weight: 600;
  text-shadow: 0 0 30px rgb(113, 18, 13);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
  gap: 0.75rem;
  align-content: end;
}

.stat {
  min-width: 8rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.stat strong {
  font-family: 'JetBrains Mono', 'Segoe UI Mono', monospace !important;
  font-size: 1.8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================
   🚀 淨資產專屬進階樣式 (Premium Dark Gold)
========================================== */
.asset-value {
  /* 1. 換上更深邃沉穩的黑金漸層底色 */
  background: linear-gradient(120deg, #000000 0%, #191f29 100%) !important;
  
  /* 2. 核心修正：拔掉實體線條 border，改用黃金內陰影模擬邊框，形狀大小與隔壁完全一致 */
  border: none !important;
  box-shadow: 
    inset 0 0 0 1px rgba(170, 141, 45, 0.456), 
    0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

/* 淨資產專屬：金色標題 */
.asset-value span {
  color: #c8a635 !important; /* 尊榮感金 */
  font-weight: 600;
}

/* 淨資產專屬：巨額數字白金漸層 */
.asset-value strong {
  font-size: 1.8rem; /* 數字稍微放大，凸顯核心資產地位 */
  background: linear-gradient(120deg, #ffeaa7 35%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat--danger {
  border-color: rgba(255, 77, 95, 0.28);
  color: #ff4d5f;
}

.stat--caution {
  border-color: rgba(255, 209, 102, 0.28);
  color: #ffdd57;
}

.stat--safe {
  border-color: rgba(62, 242, 143, 0.28);
  color: #3ef28f;
}

/* 核心雙欄版面（加入大平板防爆邊界） */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.6fr);
  gap: 1.25rem;
  min-height: 0;
  flex: 1;
}

.panel {
  border-radius: 1.35rem;
  padding: 1.25rem;
  pointer-events: auto;
  min-height: 0;
}

.panel--table {
  overflow: auto;
  display: block;
  flex-direction: column;
  gap: 1rem;
}

.panel--quotes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.glass-soft {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
}

.benchmark-config {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.95rem;
  transition: all 0.2s ease-in-out;
}

.benchmark-config__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.benchmark-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.benchmark-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.benchmark-grid input,
.benchmark-grid select {
  width: 100%;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);

  min-width: 5.5rem;               /* 畫下底線，寬度絕對不能縮小於這個數值 */
  white-space: nowrap;             /* 強制文字乖乖待在同一行，不准自動換行 */
  text-overflow: ellipsis;         /* 如果字真的太多（未來擴充），用 ... 結尾 */
  padding-right: 1.8rem !important; /* 強制留出右側空間，不讓下拉小箭頭吃掉「上市/上櫃」的字 */
}
.benchmark-grid select option {
  /* 強制指定彈出選單的背景色為深色，文字為白色 */
  background-color: #121824 !important; /* 採用與你 --panel 接近的深藍色底 */
  color: #eff4ff !important;            /* 採用你的 --text 白色 */
}

.benchmark-grid input::placeholder {
  color: rgba(239, 244, 255, 0.46);
}

.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: end;
}

.button,
.button--ghost,
.icon-button {
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button,
.button--ghost {
  border-radius: 0.8rem;
  padding: 0.72rem 1rem;
  color: var(--text);
}

.button {
  background: linear-gradient(135deg, #8bb7ff, #5a7dff);
  box-shadow: 0 12px 28px rgba(90, 125, 255, 0.28);
}

.button--ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.button:hover,
.button--ghost:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

/* 數據表格與自適應 Card 視圖結構 */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.holdings-table {
  width: 100%;
  border-collapse: collapse;
}

.holdings-table thead th {
  position: sticky;
  top: 0;
  background: rgba(8, 13, 26, 0.95);
  text-align: left;
  padding: 0.85rem 0.9rem;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  z-index: 1;
}

.holdings-table tbody td {
  padding: 0.7rem 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pledge-danger {
  border-left: 5px solid #ff4d5f;
}

.pledge-caution {
  border-left: 5px solid #ffc107;
}

.holdings-table input,
.holdings-table select {
  width: 100%;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);

  min-width: 5.5rem;               /* 畫下底線，寬度絕對不能縮小於這個數值 */
  white-space: nowrap;             /* 強制文字乖乖待在同一行，不准自動換行 */
  text-overflow: ellipsis;         /* 如果字真的太多（未來擴充），用 ... 結尾 */
}
.holdings-table select option {
  /* 強制指定彈出選單的背景色為深色，文字為白色 */
  background-color: #121824 !important; /* 採用與你 --panel 接近的深藍色底 */
  color: #eff4ff !important;            /* 採用你的 --text 白色 */
}

.holdings-table input::placeholder {
  color: rgba(239, 244, 255, 0.46);
}

.icon-button {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.import-export {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.file-label input {
  display: none;
}

.hint {
  color: var(--muted);
  font-size: 0.92rem;
}

.pill,
.tag {
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}

.pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--muted);
}

.pill[data-mode='loading'] {
  color: var(--flat);
  border-color: rgba(255, 209, 102, 0.3);
}

.pill[data-mode='success'] {
  color: var(--down);
  border-color: rgba(62, 242, 143, 0.28);
}

.pill[data-mode='error'] {
  color: var(--up);
  border-color: rgba(255, 77, 95, 0.28);
}

.quotes-list {
  display: grid;
  gap: 0.75rem;
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.2rem;
}

.quote-card {
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: clip; /* 確保內容不會溢出圓角邊界 */
}

.quote-card--empty {
  color: var(--muted);
  line-height: 1.5;
}

.quote-card__top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: start;
}

.quote-card__top h3 {
  font-size: 1.05rem;
}

.quote-card__top p,
.quote-card__metrics span {
  color: var(--muted);
  font-size: 0.84rem;
}

.quote-card__metrics {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.75rem;
}

.quote-card__metrics strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

/* ==========================================
   台股神山 2330 彩蛋：擬真晶圓晶粒質感 + 正方形死區缺陷 + 同心圓放射彩虹光
========================================= */
.quote-card--tsmc {
  position: relative;
  background: transparent !important; /* 把原本的背景變透明，交給下面的層次處理 */
  border: none !important;
  box-shadow: inset 0 0 0 5px rgba(100, 100, 100, 0.5), 0 4px 20px rgba(100, 100, 100, 0.15) !important;
  border-radius: 12px; /* 確保圓角平滑 */
}

/* -----------------------------------------
   第二層 (中層)：擬真矽晶圓 (Wafer) + 晶粒方格 + 正方形黑屏缺陷 + 圓心放射彩虹光
   ----------------------------------------- */
.quote-card--tsmc::after {
  content: '';
  position: absolute;
  inset: 1.5px; 
  border-radius: 11px; 
  z-index: 1;
  
  /* 🚀 多層次背景配置 */
  background-image: 
    /* 【缺陷：IC 晶粒壞軌盲區 (Dead Die)】
       用純色漸層做出一個不透明方塊，專門用來把該區域的網格與彩虹完全抹平 */
    linear-gradient(#141923, #141923),
    linear-gradient(#141923, #141923),
    linear-gradient(#141923, #141923),
    
    /* 【網格線】 */
    linear-gradient(rgba(241, 196, 15, 0.08) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(241, 196, 15, 0.08) 1px, transparent 1px), 
    
    /* 
      🌈【新修改：同心圓放射彩虹光】
      改用 radial-gradient 並將圓心定在中間偏左 (35% 50%)，
      寬度維持你喜歡的 0.2 顯眼高飽和度，光芒會像波紋一樣從中心一圈圈四散
    */
    radial-gradient(circle at 40% 50%, 
      rgba(255, 0, 128, 0.2) 0%,    /* 中心粉 */
      rgba(153, 102, 255, 0.2) 35%, /* 擴散紫 */
      rgba(54, 162, 235, 0.18) 50%, /* 晶圓藍 */
      rgba(75, 192, 192, 0.18) 75%, /* 鍍膜綠 */
      rgba(255, 206, 86, 0.12) 100% /* 邊緣金 */
    ),
    
    /* 【原本的晶圓拋光基礎反光】 */
    radial-gradient(circle at 20% 25%, #3a4756 0%, #161c2400 70%, #0d111700 100%);

  /* 
    🚀 魔鬼細節一：精準控制每層的大小
    第 1 層的 28px * 28px 剛好是網格 (14px) 的 2 倍大！看起來就像剛好死掉 4 顆相鄰的晶粒
  */
  background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 100% 100%, 100% 100%; 

  /* 
    🚀 魔鬼細節二：精準定位
    指定第 1 層正方形缺陷出現在卡片右上方 (75% 30%) 的位置，其餘滿版
  */
  background-position: 75% 30%, 65% 65%, 50% 50%, 0 0, 0 0, 0 0, 0 0;

  /* 
    🚀 魔鬼細節三：重複規則
    強迫第 1 層的方塊「不要重複鋪滿」（no-repeat），它就會乖乖待在右上角當個孤立的缺陷！
  */
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  
  /* 讓晶圓表面有一點點微弱的金屬光澤感 */
  box-shadow: inset 0 0 15px rgba(241, 196, 15, 0.05);
}

/* -----------------------------------------
   第三層 (頂層)：強迫文字內容置頂，不被晶圓背景遮擋
   ----------------------------------------- */
.quote-card--tsmc > * {
  position: relative;
  z-index: 2; /* 站得比 ::after 的 1 還高，確保文字清晰 */
  pointer-events: none; /* 防止干擾點擊事件 */
}

/* ==========================================
   AI 霸主 NVDA 彩蛋：科技感螢光綠全背景
========================================== */
.quote-card--nvda {
  box-shadow: inset 0 0 0 2px rgba(118, 185, 0, 0.6), 0 4px 20px rgba(118, 185, 0, 0.15) !important;
  background: linear-gradient(135deg, rgba(118, 185, 0, 0.3) 0%, rgba(18, 24, 18, 0.95) 100%) !important;
  
  position: relative;
}

.quote-card--nvda::before {
  content: '';
  position: absolute;
  /* 往四周外擴一點，讓光暈範圍更大 */
  inset: -10px; 
  border-radius: 1.5rem;
/* 使用跟本體完全同步的七彩旋轉漸層 */
  background: conic-gradient(from var(--hbd-rainbow-angle), #ff6b81, #f01df4, #00f0ff, #00ff66, #ffea00, #ff6b81);
  
  /* 💡 讓背後的七彩直接高斯模糊化，炸成巨型環境流光 */
  filter: blur(35px); 
  opacity: 0.5; /* 控制光暈亮度，0.8 既夢幻又不會刺眼 */
  
  /* 動畫必須跟本體完全同步 */
  animation: hbdRainbowSpin 6s linear infinite;

  pointer-events: none;
  z-index: -1; /* 絕對壓在字卡和文字最底層 */
}

/* ==========================================
   Google 搜尋字卡樣式 (Material 3 風格)
========================================== */
.quote-card--google {
  /* 1. 採用 Google 搜尋暗色模式的經典卡片底色與邊框 */
  background-color: #303134 !important;
  border: 1px solid #3c4043 !important;
  
  /* 2. 放大圓角到 16px (Material 3 標準卡片圓角) */
  border-radius: 16px !important;
  position: relative;
  
  /* 3. 套用 Google 的乾淨扁平化陰影 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.2s, box-shadow 0.2s;
}

/* 滑過字卡時，模擬 Google 搜尋結果的提亮互動感 */
.quote-card--google:hover {
  background-color: #3c4043 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* 4. 頂部黃金比例的 Google 招牌四色極細飾條（一秒辨識出 Google 靈魂） */
.quote-card--google::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px; /* 8像素精緻粗細 */
  background: linear-gradient(90deg, 
    #4285f4 0%, #4285f4 25%,   /* Google 藍 */
    #ea4335 25%, #ea4335 50%,  /* Google 紅 */
    #fbbc05 50%, #fbbc05 75%,  /* Google 黃 */
    #34a853 75%, #34a853 100%  /* Google 綠 */
  );
  z-index: 1;
}
/* 1. 預設隱藏時：邊距全部歸零，不影響上下元素的間距 */
.quote-card__search-wrapper {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px); /* 墜落感微調小一點 */
  transition: 
    max-height 0.35s ease-in-out, 
    opacity 0.25s ease-out, 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin 0.3s ease; /* 讓 margin 變化也有動畫 */
  
  margin: 0; /* 👈 確保收合時是 0 */
  pointer-events: none;
}

/* 2. 💡 觸發彩蛋展開時：上下都撐開 1rem 的呼吸空間 */
.quote-card--google.is-easter-egg .quote-card__search-wrapper {
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
  margin: 1rem 0; /* 👈 上下都推開 1rem，左右留 0，這樣中間夾擊的視覺感最舒服 */
  pointer-events: auto;
}

/* 3. Material 3 經典暗色膠囊搜尋框 */
.quote-card__search-bar {
  display: flex;
  align-items: center;
  background-color: #202124 !important; /* Google 經典極深灰輸入框底色 */
  border: 1px solid #5f6368;
  border-radius: 24px;                  /* 標準膠囊圓角 */
  padding: 0 16px;
  height: 44px;
  gap: 12px;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* 點擊搜尋框內部的聚焦高亮（一秒還原 Google 搜尋體驗） */
.quote-card__search-bar:focus-within {
  background-color: #303134 !important; /* 聚焦時稍微提亮 */
  border-color: transparent;
  box-shadow: 0 1px 6px rgba(32,33,36,0.28), 0 1px 1px rgba(0,0,0,0.24);
}

/* 4. 輸入框本體原生樣式重設 */
.quote-card__search-bar input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #e8eaed !important;
  font-size: 0.95rem;
  padding: 0;
}

.quote-card__search-bar input::placeholder {
  color: #9aa0a6; /* 對齊 Google 佔位符的灰色 */
}

/* 圖標微調，確保點擊時有小手流暢感 */
.g-icon-search, .g-icon-mic {
  flex-shrink: 0;
  cursor: pointer;
}

/* 5. 調整內部文字與顏色，對齊 Google 的色彩規範 */
.quote-card--google h3 {
  font-family: 'Google Sans', 'Product Sans', system-ui, sans-serif !important;
  color: #e8eaed !important; /* Google 主要文字純淨白 */
  font-weight: 500;
}

.quote-card--google p {
  color: #9aa0a6 !important; /* Google 次要說明文字灰 */
  font-size: 0.85rem;
}

.quote-card--google__metrics strong {
  font-family: 'Google Sans', system-ui, sans-serif !important;
  color: #ffffff !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake-error {
  animation: shake 0.2s ease-in-out 0s 3; /* 快速左右震動 3 次 */
}

/* ==========================================
   生日快樂彩蛋字卡：魔幻慶典紙屑與霓虹流光
========================================== */
.quote-card--hbd {
  /* 1. 神秘奢華的深夜星空紫漸層底色 */
  background: linear-gradient(135deg, #1a1525 0%, #0d1118 100%) !important;
  
  position: relative;
  border: 2px solid transparent !important;
  border-radius: 1rem !important;
  
  background-image: 
  linear-gradient(135deg, #1a1525 0%, #0d1118 100%), 
  conic-gradient(from var(--hbd-rainbow-angle), #ff6b81, #f01df4, #00f0ff, #00ff66, #ffea00, #ff6b81) !important;
  
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  
  /* 綁定流光旋轉動畫（4秒轉一圈，你可以自己調快或調慢） */
  animation: hbdRainbowSpin 4s linear infinite;

  /* 🚀 核心修改：把本體的 box-shadow 拔掉（或設為 none），改由下方的偽元素全權負責 */
  box-shadow: none !important; 
}

/* -----------------------------------------
   第一層 (中層)：純 CSS 隨機撒落的繽紛慶典紙屑 (Confetti)
   ----------------------------------------- */
.quote-card--hbd::before {
  content: '';
  position: absolute;
  inset: 0;

  /* 往四周外擴一點，讓光暈範圍更大 */
  inset: -10px; 
  border-radius: 1.5rem;
  
  /* 利用多重圓形漸層，在不同 X, Y 座標點塞入不同顏色的 2px~4px 小紙屑 */
  background-image:
    radial-gradient(circle at 50% 25%, #ff6b81 0%, #ff6b81 3px, transparent 4px),  /* 珊瑚紅 */
    radial-gradient(circle at 78% 20%, #feca57 0%, #feca57 2px, transparent 3px),  /* 慶典黃 */
    radial-gradient(circle at 35% 80%, #1dd1a1 0%, #1dd1a1 3px, transparent 4px),  /* 薄荷綠 */
    radial-gradient(circle at 78% 75%, #48dbfb 0%, #48dbfb 4px, transparent 5px),  /* 派對藍 */
    radial-gradient(circle at 55% 15%, #ff9ff3 0%, #ff9ff3 2px, transparent 3px),  /* 夢幻粉 */
    radial-gradient(circle at 70% 65%, #feca57 0%, #feca57 3px, transparent 4px),  /* 慶典黃 */
    radial-gradient(circle at 62% 70%, #ff6b81 0%, #ff6b81 2px, transparent 3px);  /* 珊瑚紅 */
    
  background-size: 100% 100%;
  opacity: 0.65; /* 讓紙屑隱隱約約，不干擾文字閱讀 */
  z-index: 1;
  pointer-events: none;
  
  /* 綁定霓虹燈呼吸動畫 */
  animation: hbdPartyGlow 2s infinite alternate ease-in-out;
}

/* -----------------------------------------
   第二層 (底層)：角落的魔幻霓虹環境光暈
   ----------------------------------------- */
.quote-card--hbd::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(72, 219, 251, 0.25) 0%, transparent 70%); /* 右下角藍光 */
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* -----------------------------------------
   第三層 (頂層)：文字置頂，並讓標題帶有繽紛馬卡龍漸層色
   ----------------------------------------- */
.quote-card--hbd > * {
  position: relative;
  z-index: 2;
}

/* 讓生日卡片的股票名字自帶極光漸層 */
.quote-card--hbd h3 {
  background: linear-gradient(90deg, #ff9ff3, #48dbfb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* -----------------------------------------
   動畫：慶典霓虹呼吸燈
   ----------------------------------------- */
@property --hbd-rainbow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* 🚀 2. 定義七彩環繞旋轉動畫 */
@keyframes hbdRainbowSpin {
  0% {
    --hbd-rainbow-angle: 0deg;
  }
  100% {
    --hbd-rainbow-angle: 360deg;
  }
}

.tag--up {
  color: var(--up);
  background: rgba(255, 77, 95, 0.12);
}

.tag--down {
  color: var(--down);
  background: rgba(62, 242, 143, 0.12);
}

.tag--flat {
  color: var(--flat);
  background: rgba(255, 209, 102, 0.12);
}

.tag--idle {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   RWD 行動裝置與直向平板斷點 (1200px 以下)
   ========================================================================== */
@media (max-width: 1200px) {
  body {
    overflow: auto; /* 允許整頁滾動 */
  }

  #app {
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  /* 核心：鎖定手機版背景 3D 的操作防禦，防止滑動頁面時誤觸轉動樹木 */
  #scene {
    position: fixed;
    inset: 0;
    z-index: 0;
  }

  .overlay {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    height: auto;
    padding: 1rem;
    pointer-events: none;
    /* 漸層背景：確保網頁往下滑動時，下方的文字報表面板後面是深色的，不會被 3D 畫面干擾閱讀 */
    background: linear-gradient(to bottom, transparent, rgba(5, 9, 20, 0.88) 25vh, var(--bg) 60vh);
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .hero-stats {
    grid-template-columns: 1fr; /* 手機版頂部數據看板改為垂直排列 */
    gap: 0.6rem;
  }

  .layout {
    grid-template-columns: 1fr; /* 切換為單欄，依序往下排列 */
    gap: 1.5rem;
  }
  .panel--quotes {
    order: 1; /* 數字越小越優先！讓即時報價卡片排在最上面 */
  }

  .panel--table {
    order: 2; /* 讓資產庫存/質押表格排在報價的下方 */
  }

  .floating-toggle {
    position: fixed; /* 行動裝置上讓切換按鈕固定在視窗頂部 */
  }
}

/* ==========================================================================
   RWD 中大型手機 / 小平板斷點 (840px 以下，表格變身卡片)
   ========================================================================== */
@media (max-width: 840px) {
  /* 拔除原有的表格溢出滾動 */
  .table-wrap {
    overflow: visible;
    border: none;
  }

  /* 隱藏原生表頭 */
  .holdings-table thead {
    display: none;
  }

  /* 關鍵！讓每一橫列 (tr) 獨立縮成一張卡片 */
  .holdings-table tbody tr {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.15rem 1rem;
    margin-bottom: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
  }

  .holdings-table tbody tr.pledge-danger {
    border-top: 5px solid #ff4d5f;
  }

  .holdings-table tbody tr.pledge-caution {
    border-top: 5px solid #f59e0b;
  }

  /* 讓每個單元格 (td) 分居左右兩側 */
  .holdings-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 !important;
    border: none !important;
    width: 100%;
  }

  /* 💡 自動為手機版補上欄位標籤 */
  /* 提示：需要在 HTML 的 td 標籤手動加上 data-label 屬性 */
  .holdings-table tbody td::before {
    content: attr(data-label);
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 500;
  }

  /* 手機版限制表單元件寬度，避免與標籤互撞 */
  .holdings-table tbody td input,
  .holdings-table tbody td select {
    width: 55%;
    max-width: 14rem;
    /* min-width: 6.5rem; */
  }

  /* 如果該欄位是刪除按鈕等 icon，置右排列即可 */
  .holdings-table tbody td:last-child {
    justify-content: flex-end;
  }
  .holdings-table tbody td:last-child::before {
    display: none; /* 刪除按鈕前不加文字提示 */
  }
}

/* ==========================================================================
   RWD 窄螢幕手機斷點 (720px 以下)
   ========================================================================== */
@media (max-width: 720px) {
  h1 {
    font-size: 4rem; /* 防止長文字超出小手機螢幕 */
  }

  .panel__head,
  .quote-card__top,
  .quote-card__metrics,
  .panel__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .panel__actions {
    text-align: center;
  }

  /* 自訂對照標的 (Benchmark) 輸入區塊改為兩欄 */
  .benchmark-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}