* {
  box-sizing: border-box;
}

:root {
  /* 2026-08-21：整站從暗色金色主題換成Artifact參考頁同一套語彙的暗色
     版本(使用者系統是深色模式，看到的是Artifact的dark mode變數，不是
     light模式那組，這裡對應的是dark mode的確切數值)。IBM Plex字體、
     低飽和藍綠=多/淺磚紅=空、暖灰中性色，深墨色底。變數名稱維持不變
     (--cyan/--blue/--yellow/--green/--pink)，理由跟08-14那次改金色
     主題一樣——全站幾十處都在用var(--cyan)等等，改名風險太高，只改
     實際顏色值。
     語意對照：--green(贏/多)->藍綠、--pink(輸/空)->淺磚紅、
     --yellow(等待/中性)->金褐、--cyan/--blue(裝飾用accent)->沿用藍綠。 */
  --bg: #16181B;
  --panel: rgba(30, 33, 36, 0.92);
  --panel2: rgba(38, 42, 46, 0.92);
  --line: rgba(236, 231, 218, 0.14);
  --text: #ECE7DA;
  --muted: #8D8776;
  --cyan: #4FAE95;
  --blue: #4FAE95;
  --text-accent: #ECE7DA;
  --yellow: #D8BD6E;
  --green: #4FAE95;
  --pink: #E08A63;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(236, 231, 218, 0.05), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", sans-serif;
}

/* 2026-08-14新增：內部工作頁面(即時掃描/歷史追蹤/歷史回測)背景加淡淡的
   裝飾場景(星空+渾天儀環)，跟登入/入口畫面同一套語彙，但透明度壓得很低
   (環只有4~7%不透明，星星最亮也才0.28)，只是氛圍質感，不會干擾看資料。
   position:fixed讓內容捲動時背景不會跟著滑走，z-index:-1墊在最底層。 */
.app-bg-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.app-bg-rings {
  fill: none;
  stroke: #ECE7DA;
  stroke-width: 0.06;
  stroke-opacity: 0.5;
  transform-origin: 50% 50%;
  animation: gate-rotate 240s linear infinite;
}

.app-bg-star {
  fill: #ECE7DA;
  animation: star-twinkle 4.5s ease-in-out infinite;
}

.auth-userbar {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.auth-userbox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-userbox b {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.auth-userbox span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.auth-userbox button {
  border: 1px solid rgba(236, 231, 218, 0.62);
  background: rgba(38, 42, 46, 0.7);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.auth-warning,
.viewer-banner {
  border: 1px solid rgba(216, 189, 110, 0.34);
  background: rgba(216, 189, 110, 0.08);
  color: #ffe58f;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 12px;
}

.viewer-inline-hint {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
}

.viewer-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 24px;
  padding: 28px;
}

/* 2026-08-21：主站(:root)換成米白紙感主題後，這裡明確覆寫回原本的
   暗色系，讓splash-gate/login-page維持它本來就刻意設計成獨立於站內
   主題之外的「入場儀式」感(見上面splash-gate區塊08-14的說明)，不被
   全域換色波及。只在.login-page範圍內生效，不影響/app內部頁面。 */
.login-page .login-card {
  background: rgba(24, 18, 10, 0.92);
  border-color: rgba(160, 130, 80, 0.4);
  color: #eaf7ff;
}

.login-page .login-brand p,
.login-page .login-form label > span,
.login-page .viewer-inline-hint {
  color: #8fa8be;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.login-brand h1 {
  margin: 0;
}

.login-brand p {
  margin: 6px 0 0;
  color: var(--muted);
}

.login-form {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.login-form label > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.login-error {
  /* .login-page維持暗色背景(見上面.login-page .login-card的說明)，
     這裡要用亮色文字，不能跟主站其他.message.error等等一起被換成暗色。 */
  color: #ffd7e8;
  font-size: 13px;
}

.login-error.hidden {
  display: none;
}

.topbar {
  height: 78px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(79, 174, 149, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(38, 42, 46, 0.96);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 2026-08-14：logo從文字方塊(css畫的「玄」字)換成實際圖標圖片(跟手機
   主畫面同一張渾天儀圖標)，.logo/.brand-icon現在都是<img>，只需要控制
   尺寸/圓角/發光，不用再處理文字置中。 */
.logo,
.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 0 24px rgba(216, 189, 110, 0.4);
  flex-shrink: 0;
}

/* 2026-08-14新增：登入頁前置畫面(splash gate)。渾天儀/星軌+山巒的場景，
   使用者點擊「點我進入」才轉場到登入表單，不是自動倒數消失。配色刻意
   用金色系(跟站內其他地方的青色主題不同)，讓這個「入口」時刻感覺獨立
   而隆重，進站之後才切回青色主題。 */
.splash-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #05060a;
  opacity: 1;
  transition: opacity 0.9s ease;
  overflow: hidden;
}

.splash-gate.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* 2026-08-14改版：場景改滿版鋪滿整個畫面(用preserveAspectRatio="slice"
   裁切填滿)，不再限制在一個2:3小方框裡置中、兩側留白。構圖統一以垂直
   正中央(y=300)為準心，這樣不管螢幕比例怎麼裁切，核心構圖都留在畫面
   裡，不會被裁掉。 */
.splash-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-beam {
  opacity: 0;
  animation: gate-fade-in 1.4s ease 0.2s forwards;
}

.scene-core,
.scene-star {
  opacity: 0;
  animation: gate-fade-in 1.6s ease 0.1s forwards, gate-core-pulse 3.4s ease-in-out 1.6s infinite;
}

.scene-rings {
  opacity: 0;
  transform-origin: 200px 300px;
  animation: gate-fade-in 1.8s ease 0.4s forwards, gate-rotate 90s linear infinite;
}

.ring {
  fill: none;
  stroke: #c9a45c;
  stroke-width: 0.8;
}

.ring-1 { stroke-opacity: 0.55; }
.ring-2 { stroke-opacity: 0.4; }
.ring-3 { stroke-opacity: 0.3; }
.ring-4 { stroke-opacity: 0.22; }
.ring-outer { stroke-opacity: 0.14; }

.orbit-dot {
  fill: #f2d69a;
  opacity: 0.7;
}

.scene-rays {
  stroke: #c9a45c;
  stroke-width: 0.5;
  stroke-opacity: 0.16;
  opacity: 0;
  animation: gate-fade-in 2s ease 0.6s forwards;
}

.mountain {
  fill: none;
  stroke-width: 1;
  opacity: 0;
  animation: gate-fade-in 1.6s ease forwards;
}

.mountain-far {
  stroke: #8a6f3c;
  stroke-opacity: 0.3;
  animation-delay: 0.5s;
}

.mountain-mid {
  stroke: #a5814a;
  stroke-opacity: 0.42;
  animation-delay: 0.6s;
}

.mountain-near {
  stroke: #c9a45c;
  stroke-opacity: 0.6;
  animation-delay: 0.7s;
}

@keyframes gate-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gate-core-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes gate-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.splash-copy {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 14%;
  text-align: center;
  opacity: 0;
  animation: gate-fade-in 1.2s ease 0.9s forwards;
}

.splash-title {
  margin: 0;
  font-size: 30px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: #e9cf9c;
  text-shadow: 0 0 24px rgba(38, 42, 46, 0.5);
}

.splash-sub {
  margin: 10px 0 34px;
  color: #8a7a58;
  font-size: 12px;
  letter-spacing: 0.15em;
}

.splash-enter {
  background: none;
  border: 1px solid rgba(216, 189, 110, 0.5);
  color: #f2d69a;
  font-size: 14px;
  letter-spacing: 0.2em;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  animation: gate-btn-pulse 2.4s ease-in-out infinite;
}

.splash-enter:hover {
  background: rgba(216, 189, 110, 0.12);
}

@keyframes gate-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(38, 42, 46, 0); }
  50% { box-shadow: 0 0 18px rgba(38, 42, 46, 0.35); }
}

.login-page {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease 0.15s;
}

.login-page.revealed {
  opacity: 1;
  pointer-events: auto;
}

/* 2026-08-14新增：登入頁改金色主題，跟前面的splash gate一致，不用站內
   其他頁面的青色(--cyan)。全部用 .login-page 開頭限定範圍，只影響登入
   頁，不會動到主畫面(index.html等)的青色配色。

   2026-08-14再改版：不做「盒子卡片」了，改成場景背景直接鋪滿整頁(跟
   gate同一套渾天儀+山巒語彙，但更淡、當背景不搶戲)，帳號密碼欄位直接
   浮在畫面上，輸入框改極簡底線風格，不再用一個矩形框把畫面切開。 */
.login-page {
  position: relative;
  overflow: hidden;
  background: #05060a;
}

.login-bg-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.login-bg-rings {
  fill: none;
  stroke: #c9a45c;
  stroke-width: 0.6;
  stroke-opacity: 0.32;
  transform-origin: 200px 300px;
  animation: gate-rotate 140s linear infinite;
}

.login-bg-rings .ring-outer {
  stroke-opacity: 0.16;
}

.login-bg-rings .bg-orbit-dot {
  fill: #f2d69a;
  stroke: none;
  opacity: 0.55;
}

.login-bg-rays {
  stroke: #c9a45c;
  stroke-width: 0.5;
  stroke-opacity: 0.14;
}

.bg-star {
  fill: #f2d69a;
  animation: star-twinkle 3.6s ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: var(--base-op, 0.3); }
  50% { opacity: 0.9; }
}

.login-bg-mountain {
  fill: none;
  stroke: #8a6f3c;
  stroke-width: 1;
}

.mtn-1 { stroke-opacity: 0.18; }
.mtn-2 { stroke-opacity: 0.26; }
.mtn-3 { stroke: #c9a45c; stroke-opacity: 0.4; }

.login-page .login-card {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}

.login-page .logo {
  box-shadow: 0 0 30px rgba(216, 189, 110, 0.5);
}

.login-page .login-brand h1 {
  color: #e9cf9c;
  letter-spacing: 0.16em;
}

.login-page .login-form {
  margin-top: 34px;
}

/* 輸入框改極簡底線風格：無框、無底色，只有一條底線，focus時底線變金色
   並往上微微發光，跟整個開放式場景比較搭，不會有一塊突兀的深色矩形。 */
.login-page .login-form input {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(216, 189, 110, 0.35);
  border-radius: 0;
  padding: 8px 2px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.login-page .login-form input:focus {
  border-bottom-color: #f2d69a;
  box-shadow: 0 1px 0 0 #f2d69a;
}

.login-page .login-remember input[type="checkbox"] {
  accent-color: #c9a45c;
}

/* 瀏覽器/密碼管理器自動填入帳密時，Chrome會強制蓋一塊白色(或淡黃)底色，
   一般background設定蓋不掉，只有這個box-shadow inset的技巧有效——用一個
   跟輸入框大小一樣大的內陰影，顏色設成我們要的深色，蓋住瀏覽器那塊白。
   text-fill-color同樣道理，蓋掉autofill強制的文字顏色。 */
.login-page .login-form input:-webkit-autofill,
.login-page .login-form input:-webkit-autofill:hover,
.login-page .login-form input:-webkit-autofill:focus,
.login-page .login-form input:-webkit-autofill:active {
  -webkit-text-fill-color: #eaf7ff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 14, 10, 0.92) inset !important;
  box-shadow: 0 0 0 1000px rgba(10, 14, 10, 0.92) inset !important;
  caret-color: #eaf7ff !important;
  font-size: 15px !important;
  transition: background-color 9999s ease-in-out 0s, -webkit-text-fill-color 9999s ease-in-out 0s !important;
}

/* 登入按鈕：金色漸層底 + hover時一道光斜掃過去(shine sweep)，
   加上輕微上浮，互動感比純變色明顯。 */
.login-page button.primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f2d69a, #c9a45c);
  border-color: #c9a45c;
  color: #2a1c05;
  letter-spacing: 0.08em;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.login-page button.primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}

.login-page button.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(216, 189, 110, 0.35);
}

.login-page button.primary:hover::before {
  left: 130%;
}

.login-page button.primary:active {
  transform: translateY(0);
}

h1 {
  margin: 0;
  font-size: 26px;
}

.brand p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.nav {
  display: flex;
  gap: 10px;
}

.nav-btn {
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  background: var(--panel2);
}

.nav-btn.active {
  /* 2026-08-21：var(--cyan)本身是偏亮的藍綠，不管站內整體是深色還是
     淺色主題，疊在這種亮度的accent色塊上都要用深色文字才夠對比。 */
  color: #16181B;
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 900;
}

.page {
  padding: 22px;
}

.control-panel,
.status-grid,
.performance-strip,
.watch-section,
.opportunity-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
}

.control-panel {
  padding: 16px;
  display: flex;
  align-items: end;
  gap: 15px;
  flex-wrap: wrap;
}

.control-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 190px;
}

.control-block.small {
  min-width: 115px;
}

.control-block label {
  color: var(--muted);
  font-size: 12px;
}

.checks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(38, 42, 46, 0.62);
}

.checks label,
.auto {
  color: var(--text);
  font-size: 13px;
}

input {
  background: rgba(38, 42, 46, 0.92);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
}

select {
  background: rgba(38, 42, 46, 0.92);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
}

input:focus {
  border-color: var(--cyan);
}

select:focus {
  border-color: var(--cyan);
}

.control-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(30, 33, 36, 0.92);
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 900;
  cursor: pointer;
}

button.primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #16181B;
}

button.danger-soft {
  border-color: rgba(216, 189, 110, 0.7);
  color: #D8BD6E;
}

button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.status-grid {
  margin-top: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.stat {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(38, 42, 46, 0.7);
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.stat b {
  color: var(--text-accent);
  font-size: 18px;
}

/* 2026-08-14改版：使用者要求標題(op-left)放在卡片(op-main)「上面」，
   不要side-by-side；同時整體再壓小一點(padding/gap縮小、拿掉寫死的
   min-height，讓它跟著內容高度走，不要留多餘空白)。 */
.opportunity-panel {
  margin-top: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opportunity-panel.ready {
  border-color: rgba(79, 174, 149, 0.8);
  box-shadow: 0 0 28px rgba(79, 174, 149, 0.12);
}

.opportunity-panel.near {
  border-color: rgba(216, 189, 110, 0.8);
  box-shadow: 0 0 28px rgba(216, 189, 110, 0.10);
}

.opportunity-panel.high {
  border-color: rgba(79, 174, 149, 0.72);
  box-shadow: 0 0 28px rgba(79, 174, 149, 0.10);
}

.opportunity-panel.idle {
  border-color: var(--line);
}

.op-badge {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: var(--text-accent);
  font-weight: 900;
  margin-bottom: 8px;
  font-size: 13px;
}

/* 2026-08-14：標題疊在卡片上面之後不用再那麼大，34px在整頁裡太搶戲，
   縮小一點跟其他區塊標題比較協調。 */
.op-left h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

.op-left p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.op-main.empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(141, 135, 118, 0.36);
  border-radius: 18px;
}

.main-card {
  border: 1px solid rgba(79, 174, 149, 0.35);
  background:
    radial-gradient(circle at top left, rgba(79, 174, 149, 0.08), transparent 42%),
    rgba(38, 42, 46, 0.78);
  border-radius: 20px;
  padding: 18px;
}

.main-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.main-top h3 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 1px;
}

.main-top p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.main-score {
  text-align: right;
}

.main-score span {
  color: var(--muted);
  font-size: 12px;
}

.main-score b {
  display: block;
  color: var(--text-accent);
  font-size: 28px;
}

.main-tags {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.main-tags span {
  border: 1px solid rgba(79, 174, 149, 0.35);
  color: #8FD3BE;
  background: rgba(79, 174, 149, 0.06);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.tracking-row {
  margin-top: 12px;
  border: 1px solid rgba(141, 135, 118, 0.28);
  background: rgba(141, 135, 118, 0.06);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.tracking-row b {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.tracking-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.tracking-row em {
  border: 1px solid rgba(79, 174, 149, 0.3);
  border-radius: 999px;
  color: var(--text-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 8px;
  white-space: nowrap;
}

.tracking-copy {
  min-width: 0;
}

.tracking-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.tracking-side strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.tracking-meta {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tracking-meta div {
  border: 1px solid rgba(236, 231, 218, 0.62);
  background: rgba(38, 42, 46, 0.7);
  border-radius: 12px;
  padding: 10px;
}

.tracking-meta span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
}

.tracking-meta b {
  color: var(--text);
  font-size: 13px;
}

.tracking-row.position {
  border-color: rgba(216, 189, 110, 0.5);
  background: rgba(216, 189, 110, 0.08);
}

.tracking-row.position b {
  color: var(--yellow);
}

.tracking-row.win {
  border-color: rgba(79, 174, 149, 0.48);
  background: rgba(79, 174, 149, 0.08);
}

.tracking-row.win b {
  color: var(--green);
}

.tracking-row.loss {
  border-color: rgba(224, 138, 99, 0.5);
  background: rgba(224, 138, 99, 0.08);
}

.tracking-row.loss b {
  color: var(--pink);
}

.tracking-row.waiting b {
  color: var(--text-accent);
}

.tracking-row.idle b,
.tracking-row.expired b {
  color: var(--muted);
}

.dir.long,
.long {
  color: var(--green) !important;
}

.dir.short,
.short {
  color: var(--pink) !important;
}

.main-action {
  margin-top: 16px;
  border: 1px solid rgba(216, 189, 110, 0.34);
  background: rgba(216, 189, 110, 0.05);
  border-radius: 16px;
  padding: 14px;
}

.main-action b {
  color: var(--yellow);
  font-size: 16px;
}

.main-action p {
  margin: 8px 0 0;
  color: var(--text);
  line-height: 1.55;
  font-size: 13px;
}

.strategy-badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.strategy-badges span {
  border: 1px solid rgba(79, 174, 149, 0.3);
  background: rgba(79, 174, 149, 0.08);
  color: var(--text-accent);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
}

.plan-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.plan-row div {
  border: 1px solid rgba(79, 174, 149, 0.3);
  background: rgba(79, 174, 149, 0.045);
  border-radius: 12px;
  padding: 10px;
}

.plan-row span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
}

.plan-row b {
  color: var(--text-accent);
  font-size: 14px;
}

.plan-row b.entry {
  color: var(--yellow);
}

.plan-row b.sl {
  color: var(--pink);
}

.plan-empty {
  margin-top: 14px;
  border: 1px dashed rgba(141, 135, 118, 0.36);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
}

.entry-confirm-box {
  margin-top: 14px;
  border: 1px solid rgba(79, 174, 149, 0.22);
  background: rgba(79, 174, 149, 0.05);
  border-radius: 14px;
  padding: 12px;
}

.entry-confirm-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.entry-confirm-head span {
  color: var(--muted);
  font-size: 12px;
}

.entry-confirm-head b {
  color: var(--text-accent);
  font-size: 14px;
}

.entry-confirm-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.entry-confirm-grid div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(38, 42, 46, 0.45);
}

.entry-confirm-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}

.entry-confirm-grid b {
  color: var(--text);
  font-size: 12px;
}

.entry-confirm-note {
  margin-top: 10px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.main-reasons {
  margin-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  padding-top: 12px;
}

.reason {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 3px 0;
}

.reason.muted {
  opacity: 0.8;
}

.main-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.performance-strip {
  margin-top: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.performance-strip div {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(38, 42, 46, 0.7);
}

.performance-strip span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.performance-strip b {
  color: var(--text-accent);
  font-size: 18px;
}

.strategy-strip b {
  font-size: 16px;
  line-height: 1.4;
}

.runtime-strip b {
  font-size: 15px;
}

.runtime-alert {
  color: var(--pink) !important;
}

.message {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 15px;
}

.message.hidden {
  display: none;
}

.message.error {
  border-color: var(--pink);
  color: #F0AF8D;
}

.message.success {
  border-color: var(--green);
  color: #8FD3BE;
}

/* 2026-08-14：再次嘗試讓推薦訊號(opportunity panel，現在放左邊)+自動
   交易(現在放右邊)並排。第一次試過因為兩邊高度差太多而拿掉，但現在
   opportunity-panel標題已經改成疊在上面(比較矮)、live-trading-panel
   預設收合(也比較矮)，兩邊高度應該接近很多。寬螢幕左右對半、窄螢幕
   自動退回上下疊。 */
.two-col-row {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.two-col-row > .opportunity-panel,
.two-col-row > .live-trading-panel {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .two-col-row {
    grid-template-columns: 1fr;
  }
}

.live-trading-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(224, 138, 99, 0.45);
  border-radius: 22px;
  background: var(--panel);
}

/* 2026-08-14新增：可收合區塊(目前只有自動交易的詳細設定用)。收起來時
   完全不佔版面(display:none)，展開時正常顯示，JS只切換collapsed
   這個class，不用另外管理inline style。 */
.collapse-toggle {
  /* 2026-08-21：底色改用teal accent淡色調(不是灰階)，不管外層卡片背景
     是什麼深淺(main-card/live-trading-panel底色其實很接近，灰階版本
     在main-card上幾乎融進背景看不出是按鈕)，都能保持清楚的可點擊感。 */
  border: 1px solid rgba(79, 174, 149, 0.5);
  background: rgba(79, 174, 149, 0.14);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.collapse-toggle:hover {
  border-color: var(--cyan);
  background: rgba(79, 174, 149, 0.22);
}

.collapsible-body {
  margin-top: 12px;
}

.collapsible-body.collapsed {
  display: none;
}

/* 2026-08-21新增：推薦訊號卡片(main-card)的展開/收合按鈕列，跟
   liveTradingPanel共用同一套.collapse-toggle/.collapsible-body機制。 */
.main-details-head {
  margin-top: 14px;
}

.live-trading-banner {
  margin: 10px 0 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(224, 138, 99, 0.18);
  border: 1px solid var(--pink);
  color: #F0AF8D;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.02em;
}

.live-trading-banner.hidden {
  display: none;
}

/* 模擬倉用綠色，跟真實帳戶的紅色明確區分。刻意不共用同一種警示色，
   否則天天看到紅色會麻痺，真的開真倉時反而不會警覺。 */
.live-trading-banner.demo {
  background: rgba(79, 174, 149, 0.1);
  border-color: rgba(79, 174, 149, 0.6);
  color: #8FD3BE;
}

.live-trading-status-grid {
  margin-top: 16px;
  grid-template-columns: repeat(3, 1fr);
}

#liveStartBtn {
  border-color: var(--pink);
  color: #F0AF8D;
}

.watch-section {
  margin-top: 16px;
  padding: 18px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.section-head h3 {
  margin: 0;
  font-size: 22px;
}

.section-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.watch-count {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  color: var(--text-accent);
  font-weight: 900;
}

.watch-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px;
}

.watch-card {
  border: 1px solid var(--line);
  background: rgba(38, 42, 46, 0.72);
  border-radius: 16px;
  padding: 14px;
}

.watch-card.grade-s {
  border-color: rgba(79, 174, 149, 0.45);
}

.watch-card.grade-a {
  border-color: rgba(79, 174, 149, 0.42);
}

.watch-card.grade-b {
  border-color: rgba(216, 189, 110, 0.35);
}

.watch-card.grade-c {
  border-color: rgba(141, 135, 118, 0.35);
}

.watch-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.watch-top h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.8px;
}

.watch-top p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.watch-score {
  color: var(--text-accent);
  font-weight: 900;
  font-size: 18px;
}

.watch-line {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.watch-line span {
  color: var(--yellow);
  font-weight: 900;
}

.watch-line b {
  color: var(--text-accent);
  font-weight: 900;
}

.watch-reason {
  margin-top: 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.watch-plan {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.watch-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.empty-watch {
  grid-column: 1 / -1;
  border: 1px dashed rgba(141, 135, 118, 0.36);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
}

.research-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(38, 42, 46, 0.74);
  overflow: hidden;
}

.research-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.research-panel summary::-webkit-details-marker {
  display: none;
}

.research-panel summary b {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.research-panel summary span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.research-panel summary::after {
  content: "展開";
  color: var(--text-accent);
  font-size: 12px;
  font-weight: 900;
}

.research-panel[open] summary::after {
  content: "收起";
}

.research-panel-body {
  padding: 0 18px 18px;
}

.research-panel-body > section:first-child {
  margin-top: 0;
}

.strategy-summary-card {
  margin-top: 14px;
  border: 1px solid rgba(79, 174, 149, 0.3);
  border-radius: 16px;
  background: rgba(79, 174, 149, 0.05);
  padding: 14px;
}

.strategy-summary-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.strategy-summary-top span {
  color: var(--muted);
  font-size: 12px;
}

.strategy-summary-top b {
  color: var(--text-accent);
  font-size: 22px;
}

.strategy-summary-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.strategy-summary-grid div {
  border: 1px solid rgba(236, 231, 218, 0.62);
  border-radius: 12px;
  background: rgba(38, 42, 46, 0.68);
  padding: 10px;
}

.strategy-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
}

.strategy-summary-grid b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.strategy-summary-card p,
.main-empty-copy,
.strategy-summary-empty {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .opportunity-panel {
    grid-template-columns: 1fr;
  }

  .status-grid,
  .performance-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .tracking-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strategy-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entry-confirm-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .topbar {
    height: auto;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .page {
    padding: 14px;
  }

  .status-grid,
  .performance-strip {
    grid-template-columns: 1fr;
  }

  .plan-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .tracking-row {
    flex-direction: column;
  }

  .tracking-side {
    width: 100%;
    align-items: flex-start;
  }

  .tracking-meta {
    grid-template-columns: 1fr;
  }

  .strategy-summary-grid {
    grid-template-columns: 1fr;
  }

  .entry-confirm-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.score-bucket-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.score-bucket-card {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(38, 42, 46, 0.72);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.score-bucket-card span {
  color: var(--muted);
  font-size: 12px;
}

.score-bucket-card b {
  color: var(--accent);
  font-size: 17px;
}

.score-bucket-body {
  display: grid;
  gap: 4px;
}

.score-bucket-card small {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.score-bucket-card.strong {
  border-color: rgba(79, 174, 149, 0.58);
  background: rgba(79, 174, 149, 0.07);
}

@media (max-width: 760px) {
  .score-bucket-strip {
    grid-template-columns: 1fr;
  }
}