/* ============================================================
   theme-vibrant.css — 「Vibrant & Block-based + Glassmorphism」
   依 ui-ux-pro-max styles.csv 該風格定義轉譯成儀表板版（2026-07-05）
   亮底塊狀＋活力四色（紫/粉/綠/黃）＋玻璃頂欄
   載入順序：styles.css → ui-polish.css → layout-v2.css → 本檔（最後）
   回滾：移除本檔 <link> 即回到深色 v2.1
   ============================================================ */

/* ---------- 0. 全域 tokens 翻成亮色 ---------- */
:root {
  --bg: #ECEAF3;                /* 底再壓暗一階，白卡不刺眼 */
  --panel: #FBFAFD;             /* 卡片米白，非純白 */
  --line: #E3E0EE;
  --text: #17151F;
  --muted: #6E6A80;
  --primary: #6C4EE6;
  --gold: #6C4EE6;              /* 舊 token 名沿用，指向新主色 */
  --yellow: #F59E0B;
  --shadow: 0 8px 24px rgba(23, 21, 31, .07);
  --glass-bg: rgba(251, 250, 253, .88);
  --glass-border: #E3E0EE;
}
html, body { background: var(--bg); color: var(--text); }

/* 背景光球：低飽和活力色霧塊（原深色 orbs 轉亮） */
.bg-orbs span { opacity: .35; filter: blur(90px); }
.bg-orbs span:nth-child(1) { background: #D8CCFF; }
.bg-orbs span:nth-child(2) { background: #FFD6EC; }
.bg-orbs span:nth-child(3) { background: #FFE9B8; }

/* ---------- 1. 版面殼：亮色塊狀 ---------- */
.sidebar {
  background: #FFFFFF;
  border-right: 1px solid var(--line);
}
.sidebar .brand h1 { color: var(--text); }
.nav button { color: var(--muted); }
.nav button:hover { background: #F1EEFB; color: var(--text); }
.nav button.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(219, 39, 119, .10));
  color: #5B21B6;
}

.topbar {
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
/* 頁面大標：風格要求大字階＋漸層重點字 */
.topbar h2 {
  font-size: 24px;
  background: linear-gradient(120deg, #6C4EE6, #DB2777);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topbar .eyebrow { color: #8A85A0; }

/* ---------- 2. 卡片：米白大塊 + 柔影 ---------- */
.panel, .glass, .auth-card, .stat-card, .hero-card, .modal,
.learning-card, .intraday-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(23, 21, 31, .05);
  color: var(--text);
  backdrop-filter: none;
}
.panel:hover { border-color: #C9BDF2; }
.panel h3, .modal h3, .hero-card h3 { color: var(--text); }
.eyebrow { color: #8A85A0; }
.muted { color: var(--muted); }

/* KPI 卡：四張輪流吃四個活力色（block-based 精髓） */
.stat-card::before { height: 3px; opacity: 1; }
.stat-card:nth-child(1)::before { background: #7C3AED; }
.stat-card:nth-child(2)::before { background: #DB2777; }
.stat-card:nth-child(3)::before { background: #16A34A; }
.stat-card:nth-child(4)::before { background: #F59E0B; }
.stat-card strong { color: var(--text); }
.stat-card span, .stat-card small { color: var(--muted); }

/* ---------- 3. 表格：亮色資料密度 ---------- */
th { color: #8A85A0; }
th, td { border-bottom: 1px solid #EFEDF7; color: var(--text); }
.table-wrap { border: 1px solid var(--line); background: #fff; }
.table-wrap thead th { background: #FAF9FE; backdrop-filter: none; }
tbody tr:hover { background: #F6F3FD; }

/* ---------- 4. 按鈕：主鈕漸層膠囊（風格識別核心） ---------- */
.primary {
  background: linear-gradient(135deg, #6C4EE6, #DB2777);
  border: none;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
}
.primary:hover:not(:disabled) { background: linear-gradient(135deg, #7C5BF0, #E9408D); box-shadow: 0 8px 22px rgba(124, 58, 237, .36); }
.ghost {
  background: #fff;
  border: 1px solid #DDD8EE;
  border-radius: 999px;
  color: #4B4560;
}
.ghost:hover:not(:disabled) { border-color: #6C4EE6; color: #5B21B6; background: #F7F4FE; }
.small-btn { background: #F1EEFB; border: none; color: #5B21B6; border-radius: 999px; }
.small-btn:hover:not(:disabled) { background: #E7E0FA; }
.danger-btn { border-radius: 999px; }

/* ---------- 5. 表單（!important 保證打贏所有深色殘留） ---------- */
input, select, textarea {
  background: #FFFFFF !important;
  border: 1px solid #DDD8EE !important;
  color: var(--text) !important;
  border-radius: 12px;
}
textarea { width: 100%; min-height: 96px; box-sizing: border-box; }
input::placeholder, textarea::placeholder { color: #A9A3BD; }
input:focus, select:focus, textarea:focus {
  border-color: #6C4EE6 !important;
  box-shadow: 0 0 0 4px rgba(108, 78, 230, .14) !important;
}
select option { background: #fff; color: var(--text); }
.bot-form label { color: #6E6A80; }

/* ---------- 6. Modal / Toast ---------- */
.modal-backdrop { background: rgba(23, 21, 31, .38); }
.modal-backdrop.open { backdrop-filter: blur(8px); }
.modal h3 { border-bottom-color: var(--line); }
.modal-actions { border-top-color: var(--line); }
.toast {
  background: #FFFFFF;
  border: 1px solid #DDD8EE;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(23, 21, 31, .16);
}

/* ---------- 7. 標籤/通知/玻璃小徽章 ---------- */
.notice {
  background: #F7F4FE;
  border: 1px solid #E3DBF8;
  color: #4B4560;
}
.exchange-tags span, .badge, .chip {
  background: #F1EEFB;
  color: #5B21B6;
}

/* ---------- 8. 焦點環 / 選取 / 捲軸（亮色版） ---------- */
:focus-visible { outline-color: #6C4EE6 !important; }
::selection { background: rgba(108, 78, 230, .18); }
* { scrollbar-color: #CFC7EA transparent; }
*::-webkit-scrollbar-thumb { background: #D8D2ED; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #BFB4E4; }

/* ---------- 9. 登入畫面 ---------- */
.auth-screen { background: var(--bg); }
.auth-card { box-shadow: 0 20px 60px rgba(23, 21, 31, .10); }

/* 多空語意色微調到亮底可讀版本 */
.buy, .long, .green, .positive { color: #15803D; }
.sell, .short, .red, .negative { color: #BE123C; }

/* ---------- 10. 反制 styles.css 的 !important 深色殘留 ---------- */
/* 側欄：原 color-mix 深黑 !important，等權反制 */
.sidebar {
  background: #FFFFFF !important;
  border-right-color: var(--line) !important;
}
body { background: var(--bg) !important; }
/* 背景格線：白線在亮底看不見，換深色細線保留質感 */
body::before {
  background-image:
    linear-gradient(90deg, rgba(23, 21, 31, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23, 21, 31, .035) 1px, transparent 1px);
}
/* 品牌圖示/機器人圖示：舊金青漸層 !important → 紫粉輕漸層 */
.brand-mark, .bot-icon, .preflight-orb, .detail-card-title .icon {
  background: linear-gradient(145deg, rgba(108, 78, 230, .14), rgba(219, 39, 119, .10)) !important;
  border: 1px solid #E3DBF8 !important;
  box-shadow: none !important;
}

/* ---------- 11. 徽章/狀態 pill：深色主題螢光配色 → 亮底柔色 ---------- */
.tags span, .pill { background: #F1EFF8; color: #4B4560; }
.pill.ok      { background: #E3F6EA; color: #15803D; }
.pill.warn    { background: #FBF3DC; color: #92600A; }
.pill.fail    { background: #FCE7EB; color: #BE123C; }
.pill.info    { background: #E5EEFC; color: #1D4ED8; }
.pill.skipped { background: #EFEEF4; color: #6E6A80; }
/* 已連線呼吸點：光暈減量（亮底上原 22px 光暈過重） */
.status-dot { box-shadow: 0 0 8px rgba(22, 163, 74, .35); }

/* ---------- 12. 全域過渡：任何狀態變化都要有動畫，不突兀 ---------- */
button, a, input, select, textarea,
.panel, .stat-card, .pill, .tags span, .notice,
.nav button, tbody tr, .learning-card, .intraday-card,
.exchange-account-card, .bot-card, .side-card {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .22s ease,
    transform .18s ease,
    opacity .18s ease;
}

/* 頁面切換：淡入 + 微上浮（原本是硬切） */
.page.active { animation: pageIn .26s ease both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 卡片 hover：影子跟著呼吸（配過渡才不突兀） */
.panel:hover, .stat-card:hover {
  box-shadow: 0 10px 28px rgba(23, 21, 31, .09);
}

/* modal 進場微縮放（原 riseIn 保留，補 backdrop 淡入） */
.modal { animation: modalIn .22s ease both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 下拉選項面板亮色（原 !important 深色已在 styles.css 置換，此處保險） */
.symbol-option { background: #FBFAFD !important; color: var(--text) !important; }
.symbol-option:nth-child(even) { background: #F3F1F9 !important; }
.symbol-option:hover { background: #EDE9F8 !important; }

/* prefers-reduced-motion 使用者：ui-polish 的全域開關已涵蓋本檔所有動畫 */

/* 學習專區：龍總日內分析卡片 + 訊號測試歷史列表（2026-07-05） */
.intraday-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.intraday-live-card {
  background: #F7F5FC; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
  border-left: 3px solid #6C4EE6;
}
.intraday-live-date { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.intraday-live-body { font-size: 13px; line-height: 1.6; color: var(--text); }
.history-list { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.history-item:hover { background: #F3F0FB; }
.history-item:last-child { border-bottom: 0 !important; }

/* ── 2026-07-09 UX polish：對比 / 手機版 / 密碼欄增強 ── */
:root {
  --muted: #57536B;   /* 原 #6E6A80，拉到 WCAG AA 以上 */
  --line: #D5D1E4;    /* 輸入框邊界更清楚 */
}
input::placeholder, textarea::placeholder { color: #8A86A0; opacity: 1; }
.auth-form input { border-color: var(--line); }
.auth-form input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* 密碼顯示切換 */
.auth-form label.has-eye { position: relative; display: block; }
.auth-form label.has-eye input { padding-right: 40px; }
.pw-eye {
  position: absolute; right: 6px; bottom: 5px;
  background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 6px; opacity: .7;
}
.pw-eye:hover { opacity: 1; }

/* 密碼強度計 */
.pw-meter { margin: 6px 0 2px; }
.pw-meter i { display: block; height: 4px; width: 0; border-radius: 2px; background: #E05563; transition: width .2s ease; }
.pw-meter[data-level="2"] i { background: #E0A155; }
.pw-meter[data-level="3"] i { background: #9DBB3B; }
.pw-meter[data-level="4"] i { background: #2FA97C; }
.pw-meter span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* 手機版：16px 輸入防 iOS 縮放、44px 觸控目標 */
@media (max-width: 520px) {
  .auth-card { padding: 20px 16px; }
  .auth-form input, .auth-tabs button, .auth-form button { font-size: 16px; }
  .auth-form button.primary, .auth-tabs button { min-height: 44px; }
  .form-line { flex-wrap: wrap; gap: 8px; }
}

/* ── 2026-07-10 polish v2：測試網徽章 / 風險提示 ── */
.testnet-badge {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0;
  background: rgba(245, 158, 11, .14); color: #B45309;
  border: 1px solid rgba(245, 158, 11, .35); vertical-align: middle;
}
.auth-hint.risk { color: #B45309; }

/* ── 2026-07-10 auth 卡深底亮字修正 ──
   styles.css 用 !important 鎖死 auth 卡深色玻璃，但亮色主題的 --text/--muted 是深色，
   打在深卡上整片隱形（品牌/標題/說明全黑壓壓）。卡內一律覆寫亮字。 */
.auth-card { --text: #F2F4FF; --muted: #A8B0C6; --line: rgba(148,163,184,.22); color: #F2F4FF; }
.auth-card h1, .auth-card h2 { color: #F5F7FF; }
.auth-card .brand p, .auth-card .muted, .auth-card .auth-hint, .auth-card .auth-foot { color: #A8B0C6; }
.auth-card .auth-hint.risk { color: #FBBF24; }
.auth-card a { color: #9BB0FF; }
.auth-card .check-row { color: #A8B0C6; }
.auth-form input { color: #F2F4FF; }
.auth-form input::placeholder { color: rgba(190, 198, 214, .55); opacity: 1; }
.auth-card .eyebrow {
  color: #F7D277;
  background: rgba(247, 210, 119, .08) !important;
  border-color: rgba(247, 210, 119, .35);
}
.auth-card .pw-meter span { color: #A8B0C6; }

/* ── 2026-07-10 註冊成功覆蓋層動畫 ── */
.auth-card { position: relative; }
.reg-success {
  position: absolute; inset: 0; z-index: 999;  /* 卡內有 backdrop/inset-shadow 疊層，z 要壓過去 */
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(31, 29, 24, .97), rgba(13, 15, 14, .97));
  display: flex; align-items: center; justify-content: center;
  opacity: 1; animation: regfadein .3s ease;
}
@keyframes regfadein { from { opacity: 0; } }
.reg-success.show { opacity: 1; }
.reg-success-box { text-align: center; padding: 28px; }
.reg-check svg { width: 86px; height: 86px; }
.reg-check circle {
  fill: none; stroke: #2FA97C; stroke-width: 3;
  stroke-dasharray: 152; stroke-dashoffset: 152;
  animation: regdraw .55s ease forwards;
}
.reg-check path {
  fill: none; stroke: #2FA97C; stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: regdraw .35s ease .5s forwards;
}
@keyframes regdraw { to { stroke-dashoffset: 0; } }
.reg-success h3 { color: #F5F7FF; margin: 14px 0 6px; font-size: 22px; }
.reg-success p { color: #A8B0C6; margin: 0 0 10px; font-size: 14px; }
.reg-success ol {
  color: #C6CCDF; text-align: left; display: inline-block;
  margin: 0 0 16px; padding-left: 22px; font-size: 13px; line-height: 2;
}
.reg-success [data-reg-go-login] { display: block; margin: 4px auto 0; min-height: 42px; padding: 0 28px; border-radius: 12px; }
.reg-success .reg-auto-hint { margin-top: 10px; font-size: 12px; color: #8A91AC; }