/* ==========================================================
   DNG AI Insight｜AI 智慧分析系統
   視覺方向：延續服務入口首頁的 Insight 產品卡
   DNG AI 品牌 → Insight 藍色產品線（Cyan / Electric Blue）→ AI 分析終端
   紫色保留給 DNG AI Live，Insight 內頁不作為主色使用
   ========================================================== */
/* Orbitron 字型由 HTML <link> 載入（避免 @import 阻塞畫面繪製） */

:root {
  /* ---------- 品牌色：Insight（與首頁 --insight-1 / --insight-2 相同） ---------- */
  --ins-1: #35E0FF;               /* Cyan：品牌主色、關鍵數據、可互動元素 */
  --ins-2: #1B8CFF;               /* Electric Blue：漸層終點 */
  --ins-rgb: 53, 224, 255;        /* 供 rgba(var(--ins-rgb), a) 調整透明度 */
  --ins-grad: linear-gradient(90deg, var(--ins-1) 0%, var(--ins-2) 100%);
  --ins-glow: rgba(53, 224, 255, 0.45);

  /* ---------- 背景 / 卡片 ---------- */
  --bg: #040A18;
  --bg-rgb: 4, 10, 24;
  --card: rgba(8, 18, 40, 0.72);  /* 深色半透明卡片 */
  --card-solid: #0A1630;          /* 需要不透明底色時（下拉選單、圖示底） */
  --card-rgb: 10, 22, 48;
  --card-2: #0E1D3A;

  /* ---------- 線條：外框用 Cyan 細線，內部分隔用中性灰藍 ---------- */
  --line: rgba(53, 224, 255, 0.16);
  --line-strong: rgba(53, 224, 255, 0.34);
  --line-soft: rgba(146, 170, 210, 0.12);
  --line-rgb: 146, 170, 210;

  /* ---------- 文字（與首頁相同） ---------- */
  --text: #EAF2FF;                /* 主標題：白 */
  --text-2: #A9B8D6;              /* 一般說明：灰白 */
  --text-3: #6E7FA3;              /* 次要 / 註記 */

  /* ---------- 語意色 ----------
     --data / --ai 都指向 Insight Cyan：AI 內容與數據同屬 Insight 品牌色，不再使用紫色
     狀態色只用在狀態本身（空房 / 有人 / 趨勢 / 警示），控制使用量 */
  --data: var(--ins-1);
  --ai: var(--ins-1);
  --live: #3DDC97;   --live-rgb: 61, 220, 151;     /* 綠：正常 / 空房 / 即時 */
  --warn: #FFC857;   --warn-rgb: 255, 200, 87;     /* 黃：提醒 / 趨勢注意 */
  --danger: #FF6B7A; --danger-rgb: 255, 107, 122;  /* 紅：有人 / 異常 */
  --cool: #7E8CA3;   --cool-rgb: 126, 140, 163;    /* 灰：鎖定 / 冷卻 */

  /* ---------- 形狀 / 光暈 ---------- */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 12px 32px -20px rgba(0, 0, 0, 0.8);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 22px -6px var(--ins-glow);

  --font: -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --display: "Orbitron", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* 背景：深藍黑＋淡藍光影＋極淡星點（與首頁同色系，不使用紫色） */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 68% 12%, rgba(143, 200, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 84% 46%, rgba(255, 255, 255, 0.25), transparent 60%),
    radial-gradient(1px 1px at 32% 72%, rgba(143, 200, 255, 0.25), transparent 60%),
    radial-gradient(1px 1px at 52% 38%, rgba(255, 255, 255, 0.2), transparent 60%),
    radial-gradient(1000px 520px at 50% -12%, rgba(40, 110, 220, 0.20), transparent 65%),
    radial-gradient(700px 480px at 0% 40%, rgba(var(--ins-rgb), 0.06), transparent 70%),
    radial-gradient(800px 520px at 100% 70%, rgba(27, 140, 255, 0.07), transparent 70%),
    linear-gradient(180deg, #030814 0%, #07122A 55%, #030814 100%);
  background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, auto, auto, auto, auto;
}
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--data); }
.hidden { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 視圖切換 ---------- */
.view { display: none; min-height: 100vh; }
.view.active { display: block; }

/* ==========================================================
   共用元件
   ========================================================== */
/* 卡片：深色半透明＋Cyan 細框；只在 hover / 重點卡片加輕微外光 */
.card {
  background:
    linear-gradient(160deg, rgba(27, 140, 255, 0.08) 0%, transparent 45%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* 標籤：語意色一律由變數產生 */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 18px; white-space: nowrap;
  border: 1px solid transparent;
}
.tag-ai,
.tag-data   { color: var(--ins-1); background: rgba(var(--ins-rgb), .10); border-color: rgba(var(--ins-rgb), .32); }
.tag-live   { color: var(--live); background: rgba(var(--live-rgb), .10); border-color: rgba(var(--live-rgb), .30); }
.tag-warn   { color: var(--warn); background: rgba(var(--warn-rgb), .10); border-color: rgba(var(--warn-rgb), .30); }
.tag-danger { color: var(--danger); background: rgba(var(--danger-rgb), .10); border-color: rgba(var(--danger-rgb), .30); }
.tag-cool   { color: var(--cool); background: rgba(var(--cool-rgb), .14); border-color: rgba(var(--cool-rgb), .32); }
.tag-solid-ai,
.tag-solid-data { color: #031A2B; background: var(--ins-grad); }
.tag-solid-live { color: #04241A; background: var(--live); }
.tag-solid-warn { color: #2B2000; background: var(--warn); }

/* 按鈕
   .btn         次要：透明深色＋Cyan 細框
   .btn-primary 主要：首頁 Insight 同款 Cyan → Blue 漸層
   .btn-ghost   更低調：無底色、中性細框 */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(var(--bg-rgb), .45); color: var(--text);
  font-weight: 600;
  transition: border-color .2s, background .2s, box-shadow .2s, color .2s, filter .2s;
}
.btn:hover { border-color: var(--ins-1); color: #fff; background: rgba(var(--ins-rgb), .08); box-shadow: 0 0 14px -4px var(--ins-glow); }
.btn-primary {
  background: var(--ins-grad); border-color: transparent; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 20, 60, .45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 8px 22px -12px var(--ins-glow);
}
.btn-primary:hover { background: var(--ins-grad); border-color: transparent; filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 0 22px -4px var(--ins-glow); }
.btn-primary:active { filter: brightness(.96); }
.btn-ghost { background: transparent; border-color: rgba(var(--line-rgb), .22); color: var(--text-2); }
.btn-ghost:hover { background: rgba(var(--ins-rgb), .06); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--ins-1); outline-offset: 2px; }

.sim-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-3);
}
.sim-note i { color: rgba(var(--ins-rgb), .7); }

/* 區塊標題：白色標題＋左側 Cyan 細條 */
.section-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.section-title h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: .3px; color: #fff; }
.section-title h2::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--ins-grad); box-shadow: 0 0 8px var(--ins-glow); }
.section-title p  { color: var(--text-2); font-size: 12.5px; }

/* ---------- 頂部列（與首頁導覽列同款深色毛玻璃） ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px;
  background: linear-gradient(180deg, rgba(3, 8, 20, .92), rgba(3, 8, 20, .72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
/* 品牌標誌：沿用首頁 DNG AI 三角標誌外型（Insight 版只用藍色系） */
.brand-mark {
  width: 32px; height: 27px; flex: none;
  background: linear-gradient(135deg, var(--ins-1) 0%, var(--ins-2) 100%);
  clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 50%, 36% 76%, 58% 76%, 66% 100%, 0 100%);
  filter: drop-shadow(0 0 8px rgba(var(--ins-rgb), .5));
  color: transparent; font-size: 0;   /* 隱藏原本的「D」字，改以圖形呈現 */
}
.brand-name { font-family: var(--display), var(--font); font-weight: 800; font-size: 15px; letter-spacing: .5px; color: #fff; }
.brand-name span { font-family: var(--font); color: var(--text-3); font-weight: 500; font-size: 12px; margin-left: 8px; letter-spacing: 0; }
.topbar-meta { display: flex; gap: 10px; margin-left: 8px; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(var(--bg-rgb), .5);
  font-size: 12px; color: var(--text-2);
}
.meta-chip b { color: var(--text); font-weight: 600; }
.meta-chip i { color: rgba(var(--ins-rgb), .75); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(var(--live-rgb), .18); }

/* ---------- 版面 ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding: 20px 24px 40px; }
.layout.single { grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 0 auto; }
.main { min-width: 0; }
.rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 66px; align-self: start; max-height: calc(100vh - 80px); overflow: auto; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } .rail { position: static; max-height: none; } }

/* ==========================================================
   03｜登入頁
   ========================================================== */
/* 版型比例與 DNG AI Live 登入頁一致（同款不同色）：
   頂部品牌列 78px＋置中登入卡 460px；尺寸數值直接對齊 live/login 的 .lv-card */
#view-login { display: none; position: relative; overflow: hidden; }
#view-login.active { display: flex; flex-direction: column; }
/* 登入頁不顯示全站頁尾說明 */
#view-login.active ~ .footer,
#view-init.active ~ .footer { display: none; }

/* 背景裝飾：只作襯托，存在感低於卡片 */
.auth-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-bg .planet {
  /* 左下角小弧：約從左側底部 250px 高處延伸到底部 300px 寬 */
  position: absolute; left: -900px; bottom: -1000px; width: 1300px; height: 1300px;
  border-radius: 50%;
  /* 不使用大範圍模糊陰影與 opacity（大尺寸元素重繪成本高）；以細邊框作邊緣亮線、漸層作受光面 */
  border: 1px solid rgba(110, 190, 255, 0.18);
  background:
    radial-gradient(circle at 74% 20%, rgba(40, 110, 220, 0.06) 0%, transparent 30%),
    radial-gradient(circle at 72% 22%, #05112B 0%, #040D22 26%, #040A1C 50%);
}
.auth-bg .planet::before { /* 外圍細軌道線 */
  content: ""; position: absolute; inset: -4%; border-radius: 50%;
  border-top: 1px solid rgba(var(--ins-rgb), .10); border-right: 1px solid rgba(var(--ins-rgb), .04);
}

/* 頂部品牌列：與首頁／Live 相同高度、相同內距（內容寬 1440px 置中） */
.auth-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 78px; flex: none;
  padding: 0 max(clamp(16px, 4vw, 64px), calc((100% - 1440px) / 2 + 64px));
  background: linear-gradient(180deg, rgba(3, 8, 20, .92), rgba(3, 8, 20, .65));
  border-bottom: 1px solid rgba(120, 160, 255, 0.16);
}
.auth-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.auth-logo .brand-mark { width: 50px; height: 42px; filter: drop-shadow(0 0 10px rgba(53, 160, 255, .6)); }
.auth-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.auth-logo__text b { font-family: var(--display), var(--font); font-weight: 800; font-size: 28px; letter-spacing: .04em; color: #fff; }
.auth-logo__text small { margin-top: 5px; font-size: 8.5px; letter-spacing: .12em; color: var(--text-2); }
.auth-top__slogan { font-size: 11px; letter-spacing: .32em; color: var(--text-3); white-space: nowrap; }
.auth-top__slogan i { font-style: normal; margin: 0 .4em; opacity: .6; }

/* ===== DNG AI 登入模板（Insight / Live 共用同一組數值，只換產品色）=====
   卡片 408px｜內距 32 / 32 / 28｜圓角 16｜標題 28px｜欄位 46px、間距 16px｜按鈕 50px、圓角 12px
   Live 對應樣式在 css/landing.css 的 .lv-card，修改時兩邊請同步 */
.auth {
  position: relative; z-index: 1;
  width: 408px; max-width: calc(100vw - 32px);
  margin: auto; padding: 32px 32px 28px;
  border-radius: 16px;
  border: 1px solid rgba(var(--ins-rgb), .34);
  background: linear-gradient(170deg, rgba(27, 140, 255, .09) 0%, rgba(6, 12, 30, .88) 42%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .02) inset,
    0 24px 60px -30px rgba(0, 0, 0, .85),
    0 0 28px -14px rgba(var(--ins-rgb), .35);
}
.auth::before { /* 頂部細高光 */
  content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ins-rgb), .7), transparent);
}
/* 置中位置與 Live 相同：卡片上方保留 40px，底部 40px＋最多 78px 的彈性留白抵銷頂部列高度；
   螢幕高度不足時彈性留白先縮小，避免出現捲軸 */
#view-login .auth-top { margin-bottom: 40px; }
#view-login { padding-bottom: 40px; }
#view-login.active::after { content: ""; flex: 1 1 0; max-height: 78px; }
.auth-head { text-align: left; margin-bottom: 0; }
.auth-head h1 { font-family: var(--display), var(--font); font-size: 28px; font-weight: 800; line-height: 1.3; color: #fff; }
.auth-head h1 em {
  font-family: var(--font); font-style: italic; font-weight: 800; margin-left: 2px;
  color: var(--ins-1); text-shadow: 0 0 10px rgba(var(--ins-rgb), .25);
}
.auth-head p  { color: var(--text-2); font-size: 14px; margin-top: 6px; letter-spacing: .12em; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.auth .field { margin: 16px 0 0; }
.auth .auth-head + .field { margin-top: 24px; }
.auth .field label { font-size: 13px; line-height: 1.5; color: var(--text-2); margin-bottom: 7px; }
.input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(var(--bg-rgb), .7); border: 1px solid rgba(var(--line-rgb), .22);
  color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:hover { border-color: var(--line-strong); }
.input:focus { border-color: var(--ins-1); box-shadow: 0 0 0 3px rgba(var(--ins-rgb), .14); }
.input.error { border-color: var(--danger); }
.auth .input { height: 46px; padding: 0 14px; font-size: 14.5px; border-radius: 10px; background-color: rgba(3, 8, 22, .72); border-color: rgba(120, 160, 255, 0.14); }
.auth .input::placeholder { color: var(--text-3); }
.auth .input:hover { border-color: rgba(120, 160, 255, 0.28); }
.auth .input:focus { border-color: rgba(var(--ins-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--ins-rgb), .14); }
.auth .input.error { border-color: var(--danger); }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2335E0FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.auth select.input { background-position: right 14px center; }
select.input option { background: var(--card-solid); color: var(--text); }
/* 主按鈕：50px、圓角 12px、藍 → Cyan 細緻漸層、低外光；hover 只加一點光感 */
.auth .btn-primary {
  width: 100%; height: 50px; justify-content: center; align-items: center; gap: 10px; margin-top: 26px; padding: 0;
  border-radius: 12px; font-size: 16px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  background: linear-gradient(90deg, #1F7CF2 0%, #27B7EE 60%, #35D2F5 100%);
  text-shadow: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 8px 20px -12px rgba(var(--ins-rgb), .6);
  transition: filter .2s, box-shadow .2s;
}
.auth .btn-primary:hover {
  background: linear-gradient(90deg, #1F7CF2 0%, #27B7EE 60%, #35D2F5 100%);
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 10px 24px -10px rgba(var(--ins-rgb), .7);
}
.auth .btn-primary i { font-size: 13px; transition: transform .25s; }
.auth .btn-primary:hover i { transform: translateX(3px); }
.auth-msg { min-height: 0; margin-top: 10px; font-size: 12.5px; text-align: center; }
.auth-msg:empty { margin-top: 0; }
.auth-msg.error { color: var(--danger); }
.auth-msg.ok { color: var(--live); }
.auth-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13.5px; color: var(--text-2); text-decoration: none; transition: color .2s; }
.auth-back i { font-size: 12px; }
.auth-back:hover { color: #fff; }

@media (max-width: 860px) {
  .auth-top { height: 64px; }
  .auth-top__slogan { display: none; }
}
@media (max-width: 640px) {
  .auth-logo__text small { display: none; }
  .auth-logo .brand-mark { width: 40px; height: 34px; }
  .auth-logo__text b { font-size: 22px; }
  #view-login .auth-top { margin-bottom: 24px; }
  #view-login { padding-bottom: 24px; }
  #view-login.active::after { max-height: 0; }
}

/* ==========================================================
   登入成功後｜AI 系統初始化（與登入頁同一套視覺）
   步驟狀態：app.js 切換 li.running / li.done；未完成 Cyan 小圓點、進行中 Cyan 光圈、完成綠色勾勾
   ========================================================== */
#view-init { display: none; position: relative; overflow: hidden; place-items: center; padding: 40px 16px; }
#view-init.active { display: grid; }

/* 背景：底部地平線光影＋很淡的軌道弧線（不使用大範圍模糊陰影與旋轉，避免重繪成本） */
.init-bg .horizon {
  position: absolute; left: 50%; top: calc(100% - 230px);
  width: 2600px; height: 2600px; margin-left: -1300px;
  border-radius: 50%;
  border-top: 1px solid rgba(110, 190, 255, .28);
  background: radial-gradient(circle at 50% 0%, rgba(40, 110, 220, .14) 0%, #040B1E 12%);
}
.init-bg::after { /* 地平線上方的淡藍光 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(30, 110, 255, .14), transparent 70%);
}
.init-bg .orbit {
  position: absolute; left: 50%; top: 56%;
  width: min(86vw, 1420px); height: min(46vh, 420px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(var(--ins-rgb), .09);
  border-bottom-color: transparent;
}

/* 初始化卡片：比原本大約 25%，樣式與登入卡一致 */
.init {
  position: relative; z-index: 1;
  width: 580px; max-width: calc(100vw - 32px);
  padding: 34px 46px 34px;
  border-radius: 18px;
  border: 1.5px solid rgba(var(--ins-rgb), .55);
  background: linear-gradient(170deg, rgba(27, 140, 255, .14) 0%, rgba(6, 14, 34, .92) 50%);
  box-shadow:
    0 0 26px -8px rgba(var(--ins-rgb), .35),
    0 0 50px -26px rgba(var(--ins-rgb), .3) inset;
}
.init::before { /* 頂部高光 */
  content: ""; position: absolute; left: 22%; right: 22%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ins-rgb), .9), transparent);
}

/* 品牌區 */
.init-brand { text-align: center; }
.init-brand .brand-mark { display: block; width: 56px; height: 47px; margin: 0 auto 12px; }
.init-brand h1 { font-family: var(--display), var(--font); font-size: 26px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.init-brand p { margin-top: 4px; font-size: 13.5px; letter-spacing: .12em; color: var(--text-2); }

/* 標題區：上方以光線分隔 */
.init-head { position: relative; margin-top: 22px; padding-top: 24px; text-align: center; }
.init-head::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ins-rgb), .5), transparent);
}
.init-head h2 { font-size: 22px; font-weight: 700; letter-spacing: .08em; color: #fff; }
.init-head p { margin-top: 6px; font-size: 13px; color: var(--text-2); letter-spacing: .04em; }

/* 步驟清單 */
.init-steps { list-style: none; display: flex; flex-direction: column; width: fit-content; min-width: 300px; margin: 24px auto 0; }
.init-steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; padding: 10px 0; }
.init-steps li:not(:last-child)::before { /* 連接線 */
  content: ""; position: absolute; left: 14.5px; top: 44px; bottom: -6px; width: 1px;
  background: rgba(var(--line-rgb), .22); transition: background .3s;
}
.init-steps li.done:not(:last-child)::before { background: rgba(var(--live-rgb), .45); }

/* 狀態圓點 */
.init-steps .dot {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(var(--line-rgb), .35);
  display: grid; place-items: center;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.init-steps .dot::after { /* 未完成：Cyan 小圓點 */
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--ins-rgb), .55);
  transition: all .3s;
}
.init-steps li.running .dot { border-color: var(--ins-1); box-shadow: 0 0 0 4px rgba(var(--ins-rgb), .12), 0 0 14px -2px var(--ins-glow); animation: init-ring 1s ease-in-out infinite; }
.init-steps li.running .dot::after { width: 12px; height: 12px; background: var(--ins-1); box-shadow: 0 0 8px var(--ins-glow); }
.init-steps li.done .dot { border-color: var(--live); background: rgba(var(--live-rgb), .12); box-shadow: 0 0 12px -4px rgba(var(--live-rgb), .6); }
.init-steps li.done .dot::after { /* 完成：綠色勾勾（CSS 繪製） */
  width: 7px; height: 13px; border-radius: 0; background: none;
  border: solid var(--live); border-width: 0 2.5px 2.5px 0;
  transform: translateY(-2px) rotate(45deg);
  animation: init-check .3s ease-out;
}
@keyframes init-ring { 50% { box-shadow: 0 0 0 7px rgba(var(--ins-rgb), .04), 0 0 18px -2px var(--ins-glow); } }
@keyframes init-check { from { opacity: 0; transform: translateY(-2px) rotate(45deg) scale(.4); } }

/* 步驟文字：狀態小字依 li 狀態切換 */
.init-steps .txt { display: flex; flex-direction: column; padding-top: 2px; }
.init-steps .txt b { font-size: 15px; font-weight: 600; color: var(--text-2); transition: color .3s; }
.init-steps .txt small { margin-top: 3px; font-size: 12px; color: var(--text-3); }
.init-steps .txt small::after { content: "等待執行..."; }
.init-steps li.final .txt small::after { content: "即將完成..."; }
.init-steps li.running .txt b { color: #fff; }
.init-steps li.running .txt small { color: var(--ins-1); }
.init-steps li.running .txt small::after { content: "處理中..."; }
.init-steps li.done .txt b { color: var(--text); }
.init-steps li.done .txt small { color: var(--live); }
.init-steps li.done .txt small::after { content: attr(data-done); }
.init-steps li.final.done .txt b { color: #fff; }

/* 進度條：藍 → Cyan 漸層＋輕微光暈＋百分比；完成時短暫發光 */
.init-progress { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.init-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(var(--line-rgb), .14); overflow: hidden; }
.init-bar > div {
  height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--ins-2) 0%, var(--ins-1) 100%);
  box-shadow: 0 0 10px rgba(var(--ins-rgb), .55);
  transition: width .45s ease;
}
.init-pct { min-width: 46px; text-align: right; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ins-1); font-variant-numeric: tabular-nums; }
.init-progress.is-complete .init-bar > div { animation: init-flash .6s ease-out; }
.init-progress.is-complete .init-pct { color: #fff; text-shadow: 0 0 10px var(--ins-glow); }
@keyframes init-flash {
  0%   { filter: brightness(1); box-shadow: 0 0 10px rgba(var(--ins-rgb), .55); }
  40%  { filter: brightness(1.5); box-shadow: 0 0 22px 2px rgba(var(--ins-rgb), .9); }
  100% { filter: brightness(1); box-shadow: 0 0 10px rgba(var(--ins-rgb), .55); }
}

@media (max-width: 640px) {
  .init { padding: 28px 22px; }
  .init-steps { min-width: 0; width: 100%; }
  .init-brand h1 { font-size: 22px; }
}

/* ==========================================================
   04｜遊戲情報中心
   ========================================================== */
/* 與登入頁同一套視覺語言：深藍黑底＋淡弧線、Cyan 細框、低光暈 */
#view-games { position: relative; overflow: hidden; }
#view-games.active ~ .footer { display: none; }   /* 此頁不顯示全站說明頁尾 */
.games-bg .arc { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--ins-rgb), .12); }
.games-bg .arc.l { left: -760px; top: -420px; width: 1000px; height: 1000px; border-left-color: transparent; border-top-color: transparent; }
.games-bg .arc.r { right: -820px; top: 360px; width: 1100px; height: 1100px; border-right-color: transparent; border-bottom-color: transparent; }
#view-games .layout { position: relative; z-index: 1; }
#view-games .layout.single { max-width: 1100px; padding-top: 44px; }

/* 標題區 */
.games-title { margin-bottom: 22px; padding-left: 4px; }
.games-title h2 { font-size: 30px; font-weight: 800; letter-spacing: .04em; gap: 14px; }
.games-title h2::before { width: 4px; height: 28px; }
.games-title p { margin-top: 6px; padding-left: 18px; font-size: 14.5px; }

/* 遊戲清單外框 */
.game-list {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: 18px;
  border: 1px solid rgba(var(--ins-rgb), .26);
  background: linear-gradient(170deg, rgba(27, 140, 255, .06) 0%, rgba(6, 12, 30, .55) 40%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 24px 60px -34px rgba(0, 0, 0, .85), 0 0 28px -16px rgba(var(--ins-rgb), .3);
}

/* 遊戲卡：圖片｜資訊｜標籤｜進入提示（進入提示以 ::after 繪製，不改動 app.js 產生的 HTML） */
.game-card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 36px; gap: 22px; align-items: center;
  padding: 12px 20px 12px 14px; text-align: left; width: 100%;
  border-radius: 14px; border-color: rgba(var(--ins-rgb), .2);
  background: linear-gradient(170deg, rgba(27, 140, 255, .07) 0%, rgba(6, 12, 30, .72) 45%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .015) inset;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
}
.game-card::after {
  content: ""; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(var(--ins-rgb), .4);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2335E0FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center / 16px no-repeat;
  transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
}
.game-card:hover {
  border-color: rgba(var(--ins-rgb), .55);
  background: linear-gradient(170deg, rgba(27, 140, 255, .12) 0%, rgba(8, 16, 38, .8) 50%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 20px -8px rgba(var(--ins-rgb), .45);
  transform: translateY(-2px);
}
.game-card:hover::after { border-color: var(--ins-1); background-color: rgba(var(--ins-rgb), .1); box-shadow: 0 0 12px -4px var(--ins-glow); transform: translateX(2px); }
.game-card:focus-visible { outline: 2px solid var(--ins-1); outline-offset: 2px; }
.game-card > div:not(.game-tags):not(.game-icon) { min-width: 0; }
.game-icon { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: var(--card-2); border: 1px solid rgba(var(--ins-rgb), .28); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .8); }
.game-icon.placeholder { display: grid; place-items: center; color: var(--text-3); font-size: 26px; }
.game-name { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-desc { color: var(--text-2); font-size: 14px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-rooms { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.game-rooms b { color: var(--data); font-size: 18px; font-weight: 700; margin-left: 6px; }
.game-rooms .no-data { color: var(--text-3); }
.game-tags { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.game-tags .tag { height: 32px; padding: 0 16px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }

/* 手機版：圖片｜名稱＋房間數＋標籤（第二列）｜進入提示；名稱維持單行 */
@media (max-width: 640px) {
  #view-games .topbar { gap: 8px 10px; }
  #view-games .brand-name span { display: none; }
  #view-games .meta-chip { padding: 3px 9px; font-size: 11.5px; }
  #view-games .layout.single { padding: 20px 12px 28px; }
  .games-title { margin-bottom: 14px; }
  .games-title h2 { font-size: 22px; gap: 10px; }
  .games-title h2::before { height: 20px; }
  .games-title p { padding-left: 13px; font-size: 13px; }
  .game-list { padding: 10px; gap: 10px; border-radius: 14px; }
  .game-card {
    grid-template-columns: 64px minmax(0, 1fr) 28px;
    grid-template-areas: "icon info chev" "icon tags chev";
    gap: 8px 12px; padding: 10px 12px 10px 10px; border-radius: 12px;
  }
  .game-card .game-icon { grid-area: icon; width: 64px; height: 64px; border-radius: 10px; align-self: center; }
  .game-card > div:not(.game-tags):not(.game-icon) { grid-area: info; }
  .game-card .game-tags { grid-area: tags; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
  .game-card::after { grid-area: chev; width: 28px; height: 28px; background-size: 13px; }
  .game-name { font-size: 15px; }
  .game-desc { font-size: 12px; margin-top: 2px; }
  .game-rooms { margin-top: 3px; font-size: 12px; }
  .game-rooms b { font-size: 14px; margin-left: 4px; }
  .game-tags .tag { height: 22px; padding: 0 9px; font-size: 11px; font-weight: 600; letter-spacing: 0; }
}

/* ==========================================================
   05｜AI 房間雷達
   ========================================================== */
/* 全站手機規則（Header 換行、版面內距、作戰室） */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .topbar-meta { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .meta-chip { white-space: nowrap; }
  .layout { padding: 16px 16px 32px; }
  .war-head { flex-wrap: wrap; }
  .pattern-stats { grid-template-columns: repeat(2, 1fr); }
}

/* 此頁不顯示全站說明頁尾 */
#view-radar.active ~ .footer { display: none; }

/* Header：Logo｜遊戲名稱｜帳號｜切換遊戲・登出 */
.radar-top { gap: 14px; }
.radar-game {
  min-width: 0; padding-left: 14px; border-left: 1px solid var(--line);
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.radar-account { margin-left: auto; }
#view-radar .topbar-actions { margin-left: 0; }
.menu-btn { display: none; }

/* 單一 Toolbar：篩選｜搜尋｜排序 */
.radar-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--bg-rgb), .5); }
.seg button { padding: 7px 14px; border-radius: 9px; color: var(--text-2); font-weight: 600; font-size: 13px; transition: color .2s, background .2s; }
.seg button:hover { color: var(--text); background: rgba(var(--ins-rgb), .05); }
.seg button.on { background: rgba(var(--ins-rgb), .14); color: var(--ins-1); }
.seg button .cnt { margin-left: 6px; color: var(--text-3); font-weight: 500; font-size: 11.5px; }
.seg button.on .cnt { color: rgba(var(--ins-rgb), .7); }
.radar-search { position: relative; margin-left: auto; }
.radar-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-3); pointer-events: none; }
.radar-toolbar .input { height: 38px; padding: 0 12px; font-size: 13px; }
.radar-search .input { width: 200px; padding-left: 32px; }
.radar-toolbar .radar-sort { width: 140px; }

/* 頁面標題 */
.radar-title { margin-bottom: 14px; }
.radar-title h2 { font-size: 20px; font-weight: 800; letter-spacing: .06em; }

/* 房間區：前五名排名列＋一般房間網格 */
.room-grid { display: flex; flex-direction: column; gap: 42px; }
.room-top { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 14px; }
.room-rest { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 16px; }

/* 一般房間：扁平化，只留淡底色與底部分隔線；hover 才出現完整邊框 */
/* 一般房間：弱卡片（與 Top 5 同一套語言的低強度版本）
   底色只比頁面稍亮、極淡四邊＋略明顯的底線、小圓角；靠間距區隔，不用 Glow */
.room-card {
  padding: 17px 16px 16px; text-align: left; width: 100%; position: relative;
  border: 1px solid rgba(var(--line-rgb), .06); border-bottom-color: rgba(var(--line-rgb), .13);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 30, 60, .50), rgba(12, 24, 50, .38));
  box-shadow: none;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.room-card:hover { border-color: rgba(var(--ins-rgb), .2); background: linear-gradient(180deg, rgba(22, 42, 80, .58), rgba(16, 32, 64, .46)); }
.room-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.room-no { font-size: 15px; font-weight: 700; color: var(--text); }
.room-head .room-sig { color: var(--warn); font-size: 11px; }
.room-head .room-watch { color: var(--ins-1); font-size: 10px; }
/* 勝率：卡片主資訊（右上） */
.room-rate { margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px; line-height: 1; white-space: nowrap; }
.room-rate small { font-size: 12px; font-weight: 600; color: var(--text-2); }
.room-rate b { font-size: 18px; font-weight: 800; color: #fff; }
/* AI 評分：次資訊（下層） */
.room-metrics { display: flex; align-items: center; gap: 12px; margin-top: 9px; font-size: 12.5px; }
.room-score { display: inline-flex; align-items: baseline; gap: 4px; line-height: 1; }
.room-score small { font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: .04em; }
.room-score b { font-size: 13px; font-weight: 600; color: var(--text-2); }
.room-score.hi b { color: rgba(var(--ins-rgb), .85); }
.room-metrics .occ { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.trend { font-weight: 800; letter-spacing: -1px; font-size: 1.1em; }
.trend.up { color: var(--live); } .trend.down { color: var(--danger); } .trend.flat { color: var(--text-2); }

/* 前五名：扁平卡＋局部光效（AI 標記點亮）
   結構：排名 badge → 房號 → 訊號 icon（同一行，不換行）→「勝率」＋大字數值 → AI 評分／趨勢／狀態
   層級：NO1 金（最亮）＞ NO2 銀藍・NO3 銅（低強度）＞ NO4・NO5 主色藍（最低調）
   光效只集中在 badge、卡片局部邊緣（左上）與勝率數值；卡片中央維持深藍黑 */
.room-card.top {
  --rk: 111, 155, 216;                        /* 排名色：NO4・NO5 低調藍 */
  --edge: .24;                                /* 邊框強度 */
  /* 內發光（Inner Glow）：只用 inset 陰影，光從邊框內側往中央淡出，卡片外不產生光圈 */
  --halo: inset 0 0 16px -6px rgba(var(--ins-rgb), .16);
  --wash: rgba(var(--ins-rgb), .03);          /* 左上角局部暈光（卡片內） */
  --rate-glow: 0 0 5px rgba(var(--ins-rgb), .14);
  padding: 16px 18px 14px; border-radius: 14px;
  border: 1px solid rgba(var(--rk), var(--edge));
  background:
    radial-gradient(360px 150px at 0% 0%, var(--wash), transparent 70%),
    linear-gradient(165deg, rgba(27, 140, 255, .07), rgba(8, 16, 36, .84) 55%);
  box-shadow: var(--halo);
}
/* NO1：金色，左上／上緣柔和外光＋淡暖色暈光 */
.room-card.top-1 {
  --rk: 255, 200, 87; --edge: .88;
  --halo: inset 0 0 0 1px rgba(255, 200, 87, .12), inset 0 0 22px -4px rgba(255, 200, 87, .5), inset 0 0 64px -18px rgba(255, 200, 87, .3);
  --wash: rgba(255, 200, 87, .1);
  --rate-glow: 0 0 10px rgba(var(--ins-rgb), .35);
  padding: 18px 20px 16px;
}
/* NO2：冷白／銀藍，低強度 */
.room-card.top-2 {
  --rk: 190, 212, 240; --edge: .62;
  --halo: inset 0 0 18px -4px rgba(190, 212, 240, .34), inset 0 0 52px -20px rgba(190, 212, 240, .2);
  --wash: rgba(190, 212, 240, .06);
  --rate-glow: 0 0 8px rgba(var(--ins-rgb), .26);
}
/* NO3：暖金／銅，低強度（不做大片橘色背景） */
.room-card.top-3 {
  --rk: 224, 163, 107; --edge: .64;
  --halo: inset 0 0 18px -4px rgba(224, 163, 107, .34), inset 0 0 52px -20px rgba(224, 163, 107, .2);
  --wash: rgba(224, 163, 107, .06);
  --rate-glow: 0 0 8px rgba(var(--ins-rgb), .24);
}
.room-card.top:hover { border-color: rgba(var(--rk), calc(var(--edge) + .2)); box-shadow: var(--halo); transform: translateY(-2px); }

/* 排名 badge：實心＋上緣 highlight＋輕微內外光，依排名遞減 */
.rank-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 6px; flex: none;
  font-family: var(--mono); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
  color: #0A1428; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), rgb(var(--rk, var(--ins-rgb)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.rank-badge i { font-size: 10px; }
.room-card.top-1 .rank-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 6px rgba(255, 255, 255, .3), 0 0 16px -1px rgba(255, 200, 87, .85); }
.room-card.top-1 .rank-badge i { color: #6B4500; }
.room-card.top-2 .rank-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 13px -2px rgba(190, 212, 240, .72); }
.room-card.top-2 .rank-badge i { color: #3F5577; }
.room-card.top-3 .rank-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 13px -2px rgba(224, 163, 107, .72); }
.room-card.top-3 .rank-badge i { color: #6A3A12; }
.room-card.top-4 .rank-badge, .room-card.top-5 .rank-badge {
  color: #CFE0FF; background: rgba(var(--rk), .2); border: 1px solid rgba(var(--rk), .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* 首行：排名 badge → 房號 → 訊號 icon，永遠同一行（勝率另起一行） */
.room-card.top .room-head { flex-wrap: wrap; column-gap: 7px; row-gap: 0; }
.room-card.top .room-head > :not(.room-rate) { flex: none; white-space: nowrap; }
.room-card.top .room-no { font-size: 17px; }
.room-card.top-1 .room-no { font-size: 19px; }
/* 勝率：「勝率」字樣在上、數值大字；Cyan 數值加輕微 glow，依排名遞減 */
.room-card.top .room-rate { order: 5; width: 100%; margin: 12px 0 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.room-card.top .room-rate small { font-size: 14px; font-weight: 600; color: #C3D1EA; }
.room-card.top .room-rate b { font-size: 30px; color: var(--ins-1); text-shadow: var(--rate-glow); }
.room-card.top-1 .room-rate b {
  font-size: 42px; text-shadow: none;
  background: linear-gradient(90deg, #FFFFFF, var(--ins-1) 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(var(--rate-glow));
}
.room-card.top .room-metrics { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(var(--line-rgb), .12); }

/* 熱門房間 TOP 5：區塊標題＋與一般房間之間的細分隔線（位於兩區間距正中央，不額外增加高度） */
.room-top-sec { position: relative; }
.room-top-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; color: #fff; }
.room-top-title i { font-size: 13px; color: var(--warn); }
.room-top-sec::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 1px;
  background: linear-gradient(90deg, rgba(var(--line-rgb), .18), rgba(var(--line-rgb), .1) 60%, transparent);
}
@media (min-width: 721px) { .room-top-sec::after { bottom: -35px; } }   /* 桌機兩區間距 70px 的中央 */

/* 一般房間：放大卡片與留白（桌機／平板），維持弱卡片樣式與 5 欄 */
@media (min-width: 721px) {
  .room-grid { gap: 70px; }                                  /* Top 5 與一般房間：原 42px＋28px */
  .room-rest { gap: 18px 20px; }                             /* 列距 18px／欄距 20px */
  .room-rest .room-card { padding: 20px 20px 20px; }
  .room-rest .room-card .room-metrics { margin-top: 13px; }
}

/* 欄數：寬螢幕 5 欄；卡片太窄時遞減，NO1 改為獨占一列 */
@media (max-width: 1519px) {
  .room-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room-top .top-1 { grid-column: 1 / -1; }
  /* NO1 獨占一列時：勝率放到第一行右側，避免右半部空白 */
  .room-top .top-1 .room-head { flex-wrap: nowrap; }
  .room-top .top-1 .room-rate { order: 0; width: auto; margin: 0 0 0 auto; align-items: flex-end; }
  .room-rest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1250px) and (min-width: 1101px) {
  .room-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .room-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 06｜房間狀態顯示：空房 / 有人 / 鎖定（預留） */
.occ { display: inline-flex; align-items: center; gap: 6px; }
.occ i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.occ-empty i { background: var(--live); box-shadow: 0 0 0 3px rgba(var(--live-rgb), .15); } .occ-empty { color: var(--live); }
.occ-busy i  { background: var(--danger); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .15); } .occ-busy { color: var(--danger); }
.occ-lock i  { background: var(--cool); } .occ-lock { color: var(--cool); }
.grid-more { display: flex; justify-content: center; margin-top: 18px; }
.empty { padding: 30px; text-align: center; color: var(--text-3); }

/* 共用右側欄（房間雷達／AI 作戰室）：桌機寬度 300px */
.rail-view .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.radar-tabbar { display: none; }

/* 平板／手機：右側欄改為底部固定導覽切換（房間 / 事件 / 監控 / AI 助手）；房間雷達與 AI 作戰室共用 */
@media (max-width: 1100px) {
  .rail-view .layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }
  #view-war.active ~ .footer { padding-bottom: 84px; }   /* 作戰室保留頁尾，避免被底部導覽遮住 */
  .rail-view[data-tab="rooms"] .rail { display: none; }
  .rail-view:not([data-tab="rooms"]) .main { display: none; }
  .rail-view .rail-card { display: none; }
  .rail-view[data-tab="events"] .rail-events,
  .rail-view[data-tab="watch"] .rail-watch,
  .rail-view[data-tab="assist"] .rail-assist { display: block; }
  .radar-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(3, 8, 20, .97); border-top: 1px solid var(--line);
  }
  .radar-tabbar button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 60px; color: var(--text-3); font-size: 11.5px; font-weight: 600; transition: color .2s;
  }
  .radar-tabbar button i { font-size: 17px; }
  .radar-tabbar button.on { color: var(--ins-1); }
  .radar-tabbar button.on::before { content: ""; position: absolute; top: -1px; width: 26px; height: 2px; border-radius: 2px; background: var(--ins-1); box-shadow: 0 0 8px var(--ins-glow); }
}

/* 手機：Header 只留 Logo／帳號／Menu，遊戲名稱移到第二列 */
@media (max-width: 720px) {
  .radar-top { gap: 8px 10px; }
  .radar-top .brand-name { white-space: nowrap; }
  .radar-game { order: 5; width: 100%; padding: 2px 0 0; border-left: 0; font-size: 14px; }
  .menu-btn {
    display: grid; place-items: center; width: 36px; height: 36px; flex: none;
    border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: rgba(var(--bg-rgb), .5);
  }
  #view-radar .topbar-actions {
    display: none; position: absolute; right: 16px; top: 54px; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 6px; min-width: 160px; padding: 8px;
    background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  }
  #view-radar .topbar.menu-open .topbar-actions { display: flex; }
  #view-radar .topbar-actions .btn { justify-content: flex-start; }
  .radar-toolbar { gap: 8px; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 7px 4px; font-size: 12.5px; }
  .seg button .cnt { display: block; margin: 1px 0 0; font-size: 10.5px; }
  .radar-search { flex: 1; margin-left: 0; }
  .radar-search .input { width: 100%; }
  .radar-toolbar .radar-sort { width: 118px; }
  .radar-title { margin-bottom: 10px; }
  .radar-title h2 { font-size: 18px; }
  .room-grid { gap: 34px; }
  .room-top { grid-template-columns: 1fr; gap: 10px; }
  .room-rest { grid-template-columns: 1fr; gap: 10px; }
  /* 手機前五名維持兩層：勝率回到右上，NO1 仍放大 */
  .room-card.top .room-head { flex-wrap: nowrap; }
  .room-card.top .room-rate { order: 0; width: auto; margin: 0 0 0 auto; flex-direction: row; align-items: baseline; gap: 5px; }
  .room-card.top .room-rate b { font-size: 20px; }
  .room-card.top-1 .room-rate b { font-size: 30px; }
  .room-card.top .room-metrics { margin-top: 8px; padding-top: 8px; }
}

/* ==========================================================
   07｜AI 作戰室
   ========================================================== */
.war-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.war-head h2 { font-size: 22px; font-weight: 800; color: #fff; }
.war-head .right { margin-left: auto; display: flex; gap: 8px; }
/* 摘要區：拿掉外層大框，只保留四張資訊卡（外層僅作排版與掃描動畫容器） */
.war-first { padding: 0; margin-bottom: 14px; position: relative; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; }   /* 圓角與內部卡片一致，避免 overflow 裁到左右兩端卡片的邊角 */
.war-first.scanning::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--ins-rgb), .14) 50%, transparent 70%);
  animation: scan .8s ease-out 1;
}
@keyframes scan { from { transform: translateX(-100%);} to { transform: translateX(100%);} }
.stat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.war-first .stat-cards { margin-top: 0; }   /* 資訊列移除後，卡片區直接貼齊上方內距 */
@media (min-width: 900px) { .stat-cards { grid-template-columns: repeat(4, 1fr); } }
.stat-card { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(var(--bg-rgb), .5); }
.stat-card .k { font-size: 12px; color: var(--text-2); }
.stat-card .v { font-size: 24px; font-weight: 800; margin-top: 2px; color: #fff; }
.war-first .stat-card { padding: 14px 16px; background: linear-gradient(160deg, rgba(27, 140, 255, .08) 0%, transparent 45%), var(--card); }
.war-first .stat-card .v { font-size: 30px; }
.stat-card .s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.stat-card.c-data,
.stat-card.c-ai   { border-color: rgba(var(--ins-rgb), .32); } .stat-card.c-data .v, .stat-card.c-ai .v { color: var(--ins-1); }
.stat-card.c-live { border-color: rgba(var(--live-rgb), .32); } .stat-card.c-live .v { color: var(--live); }
.stat-card.c-warn { border-color: rgba(var(--warn-rgb), .32); } .stat-card.c-warn .v { color: var(--warn); }

/* 可收合區塊 */
.acc { margin-bottom: 12px; overflow: hidden; }
.acc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 18px; text-align: left; transition: background .2s; }
.acc-head:hover { background: rgba(var(--ins-rgb), .05); }
.acc-head .ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; }
.acc-head .ico.data,
.acc-head .ico.ai   { background: rgba(var(--ins-rgb), .12); color: var(--ins-1); border: 1px solid rgba(var(--ins-rgb), .25); }
.acc-head .ico.live { background: rgba(var(--live-rgb), .12); color: var(--live); border: 1px solid rgba(var(--live-rgb), .25); }
.acc-head .ico.warn { background: rgba(var(--warn-rgb), .12); color: var(--warn); border: 1px solid rgba(var(--warn-rgb), .25); }
.acc-head h3 { font-size: 14.5px; font-weight: 700; color: #fff; }
.acc-head .sub { color: var(--text-3); font-size: 12px; margin-left: 4px; }
.acc-head .chev { margin-left: auto; color: var(--text-3); transition: transform .2s, color .2s; }
.acc-head:hover .chev { color: var(--ins-1); }
.acc.open .acc-head .chev { transform: rotate(180deg); }
.acc-body { display: none; padding: 4px 18px 18px; border-top: 1px solid var(--line-soft); }
.acc.open .acc-body { display: block; }

/* 真實數據表 */
.data-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.data-table th, .data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.data-table th { color: var(--text-2); font-weight: 600; font-size: 12px; }
.data-table th:first-child, .data-table td:first-child { text-align: left; color: var(--text-2); }
.data-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(var(--ins-rgb), .04); }
.rtp-hi { color: var(--live); } .rtp-lo { color: var(--danger); }

/* 09｜模式分析 */
.pattern-head { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.pattern-head h4 { font-size: 15px; font-weight: 700; letter-spacing: .5px; color: #fff; }
.pattern-head h4 b { color: var(--data); }
.pattern-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.pattern-stats .stat-card .v { font-size: 20px; }
.ai-observe { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ai-observe .tag { flex: none; }
.ai-observe p { font-size: 13.5px; font-weight: 600; }

/* 模式分析：未開次數記錄（歷史明細）｜未開間隔（趨勢圖＋統計摘要＋AI 觀察） */
.iv-layout { display: grid; grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.iv-panel { padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(var(--line-rgb), .12); background: rgba(6, 12, 30, .35); }
.iv-panel h5 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: #fff; }
.iv-panel h5 i { font-size: 13px; color: var(--ins-1); }
.iv-records { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.iv-records li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; border-radius: 8px; font-size: 13px; color: var(--text-2);
  background: rgba(var(--line-rgb), .04); border: 1px solid rgba(var(--line-rgb), .08);
}
.iv-records li b { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.iv-records li.cur { border-color: rgba(var(--ins-rgb), .35); background: rgba(var(--ins-rgb), .07); color: var(--text); }
.iv-records li.cur b { color: var(--warn); font-size: 15px; }
/* 折線圖 */
.iv-chart { position: relative; padding: 36px 8px 0 34px; }   /* 上方留白加大，讓「轉數」與最上方刻度分開 */
.iv-yname { position: absolute; left: 0; top: 0; font-size: 11px; color: var(--text-3); }
.iv-plot { position: relative; height: 200px; }
.iv-grid-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(var(--line-rgb), .12); }
.iv-grid-line span { position: absolute; right: 100%; margin-right: 8px; transform: translateY(-50%); font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.iv-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.iv-line { fill: none; stroke: var(--ins-1); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(var(--ins-rgb), .5)); }
.iv-pt { position: absolute; transform: translate(-50%, -50%); }
.iv-pt i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ins-1); border: 2px solid var(--bg); }
.iv-pt em { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }
.iv-pt.cur i { width: 13px; height: 13px; background: var(--warn); box-shadow: 0 0 0 4px rgba(var(--warn-rgb), .2); }
.iv-pt.cur em { font-size: 14px; color: var(--warn); bottom: 14px; }
.iv-xaxis { position: relative; height: 26px; margin-top: 6px; }
.iv-xaxis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.iv-xaxis span.cur { color: var(--warn); font-weight: 700; }
/* 統計摘要（縮小） */
.iv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.iv-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(var(--line-rgb), .12); background: rgba(var(--bg-rgb), .4); }
.iv-stats .k { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.iv-stats b { font-size: 18px; font-weight: 700; color: #fff; }
.iv-stats .cur { border-color: rgba(var(--warn-rgb), .5); }
.iv-stats .cur b { color: var(--warn); }
.iv-panel .ai-observe { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(var(--ins-rgb), .05); }
/* 左右並排時的比例：左側列表緊湊、右側「未開間隔」撐滿整塊高度（圖表吃掉剩餘空間，統計與 AI 觀察往下排） */
@media (min-width: 901px) {
  .iv-records { gap: 5px; }
  .iv-records li { padding: 5px 12px; }
  .iv-panel:last-child { display: flex; flex-direction: column; }
  .iv-panel:last-child .iv-chart { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .iv-panel:last-child .iv-plot { flex: 1 1 auto; height: auto; min-height: 220px; }
  .iv-panel:last-child .iv-stats { margin-top: 20px; }
  .iv-panel:last-child .ai-observe { margin-top: 14px; }
}
@media (max-width: 900px) {
  .iv-layout { grid-template-columns: 1fr; }
  .iv-records { display: grid; grid-template-columns: 1fr 1fr; }
  .iv-records li.cur { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .iv-panel { padding: 14px; }
  .iv-chart { padding-left: 28px; padding-right: 4px; }
  .iv-plot { height: 170px; }
  .iv-pt em { font-size: 10px; }
  .iv-pt.cur em { font-size: 12px; }
  .iv-xaxis span { font-size: 10px; }
  .iv-xaxis span small { display: none; }   /* 手機只顯示「前10、前9…目前」 */
  .iv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .iv-records li { padding: 6px 10px; font-size: 12.5px; }
}

/* 08｜策略模式 */
.strategy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
@media (max-width: 800px) { .strategy { grid-template-columns: 1fr; } }
/* AI 策略分析面板：AI 自動判斷策略並直接給出推薦下注（閱讀為主，非設定介面） */
.ai-strat {
  --sc: var(--ins-1); --sc-rgb: var(--ins-rgb);
  position: relative; padding: 16px 18px; border-radius: 14px;
  border: 1px solid rgba(var(--sc-rgb), .28);
  background: linear-gradient(160deg, rgba(var(--sc-rgb), .09), rgba(8, 16, 36, .6) 60%);
}
.ai-strat.strat-balanced   { --sc: var(--live); --sc-rgb: var(--live-rgb); }
.ai-strat.strat-aggressive { --sc: var(--warn); --sc-rgb: var(--warn-rgb); }
.ai-strat-top { display: flex; align-items: center; gap: 10px; }
.ai-strat-k { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .04em; }
.ai-strat-k i { color: var(--ins-1); margin-right: 4px; }
.ai-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.ai-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(var(--live-rgb), .15); animation: ai-blink 1.6s ease-in-out infinite; }
@keyframes ai-blink { 50% { opacity: .35; } }
.ai-strat-main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ai-strat-main .lbl { font-size: 12px; color: var(--text-2); }
.ai-strat-main .val { margin-top: 4px; font-size: 26px; font-weight: 800; line-height: 1.1; color: #fff; }
.ai-strat-main .val small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-2); }
.ai-strat-main .strat-name { color: var(--sc); }
/* 策略位階（唯讀顯示，非按鈕） */
.strat-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 14px; }
.strat-meter span {
  padding-top: 7px; border-top: 3px solid rgba(var(--line-rgb), .16);
  font-size: 11px; color: var(--text-3); text-align: center;
}
.strat-meter span.on { border-top-color: var(--sc); color: var(--sc); font-weight: 700; }
.ai-strat-why { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--text); }
/* 分析依據：輕量內文列（RTP｜購買訊號｜波動），正向綠、負向紅、中性灰 */
.ai-factors { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.ai-factors span + span::before { content: "｜"; margin: 0 6px; color: rgba(var(--line-rgb), .35); }
.ai-factors b { font-weight: 600; color: var(--text-2); }
.ai-factors .pos b { color: var(--live); }
.ai-factors .neg b { color: var(--danger); }
/* AI 策略更新：輕量提示，數秒後自動淡出 */
.strat-update {
  display: flex; gap: 10px; align-items: flex-start; overflow: hidden;
  margin-bottom: 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(var(--ins-rgb), .08); border: 1px solid rgba(var(--ins-rgb), .3);
  animation: strat-in .35s ease-out, strat-out .5s ease-in 8s forwards;
}
.strat-update > i { margin-top: 2px; color: var(--ins-1); }
.strat-update b { font-size: 13px; color: #fff; }
.strat-update p { margin-top: 2px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
@keyframes strat-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes strat-out { to { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } }
.buy-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.buy-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(var(--ins-rgb), .04); }
.buy-ico { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line-soft); display: grid; place-items: center; }
.buy-ico img { width: 100%; height: 100%; object-fit: cover; }
.buy-name { font-size: 14px; font-weight: 700; color: #fff; }
.buy-x { padding: 4px 14px; border-radius: 999px; background: var(--ins-grad); color: #031A2B; font-weight: 800; font-size: 15px; }

/* ==========================================================
   10｜事件紀錄 / 監控清單 / AI 助手（右側欄）
   ========================================================== */
.rail-card { padding: 14px 16px; border-color: var(--line-soft); background: rgba(6, 12, 30, .42); box-shadow: none; }
.rail-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rail-title h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff; }
.rail-title h3 i { font-size: 12px; color: rgba(var(--ins-rgb), .8); }
.rail-title .tag { font-size: 11px; }
.rail-title .more { margin-left: auto; color: var(--text-3); font-size: 11.5px; }
.event-list, .watch-list, .assist-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
/* AI 事件紀錄：簡潔時間軸（不再每筆加框） */
.event-list { gap: 0; }
.event-list li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; font-size: 12.5px; line-height: 1.5; }
.event-list li time { padding-top: 6px; font-family: var(--mono); color: var(--text-3); font-size: 11px; }
.event-list li span { position: relative; padding: 5px 0 5px 14px; border-left: 1px solid rgba(var(--line-rgb), .18); color: var(--text-2); }
.event-list li span::before { content: ""; position: absolute; left: -3px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--ins-rgb), .6); }
.event-list li b { color: var(--data); font-weight: 600; cursor: pointer; }
.event-list li b:hover { text-decoration: underline; }
.event-list li.new { animation: fadein .4s ease; }
.event-list li.new span::before { background: var(--ins-1); box-shadow: 0 0 6px var(--ins-glow); }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: none;} }
.watch-list { gap: 0; }
.watch-list li { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.watch-list li:last-child { border-bottom: 0; }
.watch-list li b { cursor: pointer; color: var(--text); }
.watch-list li b:hover { color: var(--data); }
.watch-list li .tags { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.watch-list li .rm { color: var(--text-3); padding: 2px 4px; }
.watch-list li .rm:hover { color: var(--danger); }
.watch-add { display: flex; gap: 6px; margin-top: 10px; }
.watch-add .input { flex: 1; height: 34px; padding: 0 10px; font-size: 12.5px; }
.assist-list li { padding: 9px 12px; border-radius: 10px; background: rgba(var(--ins-rgb), .045); font-size: 12.5px; line-height: 1.6; color: var(--text); }
.assist-list li.q { background: transparent; padding-left: 2px; color: var(--text-2); }
.assist-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rail-empty { color: var(--text-3); font-size: 12px; padding: 8px 2px; }

/* 事件列新增的標記（<small>房間</small>、<em>事件文字</em>）在其他情境維持原本外觀 */
.event-list li small { font-size: inherit; color: inherit; }
.event-list li em { font-style: normal; }
/* 事件列表：桌機為 Live Feed（全部事件＋區塊內捲動），手機分頁只顯示最新 8 筆 */
@media (max-width: 1100px) { .rail-view .event-list li:nth-child(n+9) { display: none; } }

/* ==========================================================
   桌機右側欄（房間雷達／AI 作戰室共用）：整合成單一 AI 操作側欄
   事件紀錄（主）→ 監控清單（次）→ AI 助手（精簡）；內部以留白與極淡分隔線區分
   ========================================================== */
@media (min-width: 1101px) {
  /* 三個獨立 Card 模組：各自有圓角、淡邊框與容器，彼此以 14px 間距分開；高度依內容縮合 */
  .rail-view .rail { gap: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .rail-view .rail-card {
    padding: 16px 18px; border-radius: 16px;
    border: 1px solid rgba(var(--line-rgb), .10);
    background: rgba(6, 12, 30, .45); box-shadow: none;
  }
  .rail-view .rail-title { margin-bottom: 12px; }

  /* AI 事件紀錄：Live Feed，固定高度、區塊內捲動 */
  .rail-view .rail-events .event-list {
    max-height: 320px; overflow-y: auto; padding-right: 6px; margin-right: -6px;   /* 事件少時依內容縮合，多時才區塊內捲動 */
    scrollbar-width: thin; scrollbar-color: rgba(var(--line-rgb), .25) transparent;
  }
  .rail-view .rail-events .event-list::-webkit-scrollbar { width: 4px; }
  .rail-view .rail-events .event-list::-webkit-scrollbar-thumb { background: rgba(var(--line-rgb), .25); border-radius: 4px; }
  .rail-view .event-list li { grid-template-columns: 34px 1fr; gap: 10px; }
  .rail-view .event-list li time { padding-top: 9px; font-size: 10.5px; color: var(--text-3); opacity: .75; }
  .rail-view .event-list li span { padding: 7px 0 8px 14px; font-size: 13px; line-height: 1.5; }
  .rail-view .event-list li span::before { top: 15px; }
  .rail-view .event-list li small { font-size: 11px; color: var(--text-3); }
  .rail-view .event-list li b { font-size: 13.5px; font-weight: 700; }
  .rail-view .event-list li em { color: var(--text); font-weight: 500; }
  /* 事件類型：只用時間軸圓點顏色區分 */
  .rail-view .event-list li.ev-signal span::before { background: var(--warn); }
  .rail-view .event-list li.ev-warn span::before,
  .rail-view .event-list li.ev-live span::before { background: var(--live); }

  /* 監控清單：簡潔橫向列，刪除鈕 hover 才明顯 */
  .rail-view .watch-list li { padding: 7px 2px; }
  .rail-view .watch-list li .rm { opacity: .15; transition: opacity .2s, color .2s; }
  .rail-view .watch-list li:hover .rm, .rail-view .watch-list li .rm:focus-visible { opacity: 1; }
  .rail-view .watch-add { gap: 6px; margin-top: 8px; }
  .rail-view .watch-add .input { height: 30px; font-size: 12px; }
  .rail-view .watch-add .btn { height: 30px; padding: 0 10px; font-size: 12px; }

  /* AI 助手：Compact，只有標題＋提示內容＋快捷操作 */
  .rail-view .rail-assist .rail-title { margin-bottom: 10px; }
  .rail-view .assist-list li { padding: 8px 10px; font-size: 12.5px; line-height: 1.55; }
  .rail-view .assist-actions { margin-top: 8px; }
  .rail-view .assist-actions .btn { padding: 4px 10px; font-size: 12px; }
}

/* 頁尾 */
.footer { padding: 12px 24px 28px; color: var(--text-3); font-size: 11.5px; display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); }

/* 提示訊息 */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); opacity: 0; padding: 9px 14px; border-radius: 999px; background: rgba(var(--card-rgb), .95); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 12.5px; pointer-events: none; transition: .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ==========================================================
   AI 作戰室｜手機版細節：摘要卡緊湊化、重點數值不斷行、表格可橫向捲動
   ========================================================== */
.ai-strat-main .val { white-space: nowrap; }
@media (max-width: 720px) {
  .war-first { padding: 0; }
  .war-first .stat-cards { gap: 8px; margin-top: 0; }
  .war-first .stat-card { padding: 10px 12px; }
  .war-first .stat-card .k { font-size: 11.5px; }
  .war-first .stat-card .v { margin-top: 2px; font-size: 20px; line-height: 1.25; }
  .war-first .stat-card .s { margin-top: 1px; font-size: 10.5px; white-space: nowrap; }
  .ai-strat-main { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .ai-strat-main .val { font-size: 21px; }
  .ai-strat-main .val small { font-size: 12px; }
}

/* ==========================================================
   AI 作戰室｜真實數據（投注／贏分／勝率）：桌機表格、手機卡片
   ========================================================== */
[data-acc="real"] .real-table { font-size: 14px; }
[data-acc="real"] .real-table th { font-size: 13px; }
[data-acc="real"] .real-table th, [data-acc="real"] .real-table td { padding: 12px 14px; }
[data-acc="real"] .real-table th:not(:first-child), [data-acc="real"] .real-table td:not(:first-child) { text-align: center; }
[data-acc="real"] .real-table td:first-child { font-family: var(--font); font-size: 14px; }
[data-acc="real"] .real-table td { color: var(--text); }
.rt-pill {
  display: inline-block; min-width: 108px; padding: 6px 12px; border-radius: 8px; text-align: center;
  font-family: var(--mono); font-weight: 700; color: var(--text);
  background: rgba(var(--bg-rgb), .55); border: 1px solid rgba(var(--line-rgb), .16);
}
.rt-pill.rtp-hi { color: var(--live); background: rgba(var(--live-rgb), .1); border-color: rgba(var(--live-rgb), .3); }
.rt-pill.rtp-lo { color: var(--danger); background: rgba(var(--danger-rgb), .08); border-color: rgba(var(--danger-rgb), .28); }
.real-cards { display: none; }
@media (max-width: 720px) {
  [data-acc="real"] .real-table { display: none; }
  .real-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  .real-card {
    overflow: hidden; border-radius: 12px;
    border: 1px solid rgba(var(--ins-rgb), .2); border-left: 3px solid var(--ins-1);
    background: rgba(8, 16, 36, .6);
  }
  .real-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(var(--line-rgb), .1); }
  .real-card__head i { font-size: 14px; color: var(--ins-1); }
  .real-card__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); padding: 10px 0 12px; }
  .real-card__body > div { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; min-width: 0; }
  .real-card__body > div:first-child { padding-left: 14px; }
  .real-card__body > div + div { border-left: 1px solid rgba(var(--line-rgb), .12); }
  .real-card__body span { font-size: 11.5px; color: var(--text-3); }
  .real-card__body b { font-size: clamp(9.5px, 3vw, 14px); font-weight: 700; color: var(--text); white-space: nowrap; }   /* 依螢幕寬度縮放，長數字不溢出 */
  .real-card .rt-pill { min-width: 0; padding: 4px 5px; font-size: clamp(9.5px, 3vw, 13px); white-space: nowrap; }
}