/* ============================================
   JAVIS OS - Console layer (sidebar + pages)
   Tông màu kế thừa style.css (:root). Glassmorphism + glow.
   Cockpit (.hud) giữ nguyên; layer này bọc thêm bên ngoài.
   ============================================ */
:root {
  --rail-w: 160px;
  --rail-w-collapsed: 60px;
  --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --rail-bg: rgba(14, 14, 22, 0.72);
  --glass: rgba(22, 22, 31, 0.55);
  --glass-brd: var(--hairline);
  --glow: 0 0 0 1px var(--glass-brd), var(--shadow-2);
  --rail-anim: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --topbar-h: 52px;          /* chiều cao header .hud-top - cview chừa ra để header hiện mọi trang */
}
/* Tông sáng: mặt kính đổi từ "tối mờ chồng lên nền đen" thành "trắng mờ chồng lên
   giấy ngà". Vẫn giữ backdrop-filter nên vẫn có chiều sâu, chỉ đổi chất liệu. */
:root[data-theme="light"] {
  --rail-bg: rgba(255, 255, 255, 0.82);
  --glass: rgba(255, 255, 255, 0.72);
}

/* Header (.hud-top) thành thanh top TOÀN CỤC: luôn nằm trên cùng, cview quản lý bắt đầu dưới nó.
   .hud render sẵn phía sau → header (row 52px đầu) lộ ra; z-index để chắc chắn nổi trên cview. */
.hud-top { position: relative; z-index: 45; }
/* Nút điều khiển trợ lý (cài đặt, giọng nói, làm mới) chỉ thuộc cockpit Javis → ẩn khi đang ở trang quản lý */
body.in-console .hud-actions { display: none; }

/* ===== Rail (sidebar dọc, kính mờ) ===== */
.rail {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 8px; gap: 0;
  background: var(--rail-bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-right: 1px solid var(--glass-brd);
}
.rail-top { flex: 0 0 auto; }                         /* đỉnh cố định */
.rail-nav {                                           /* giữa: cuộn dọc */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 0;
}
.rail-nav::-webkit-scrollbar { width: 0; }            /* ẩn thanh cuộn cho gọn */
.rail-nav { scrollbar-width: none; }
/* Rail 2 tầng: tầng 1 = nhãn nhóm bấm gập/mở; tầng 2 = mục con xổ ra dưới. Nhóm .foot ghim đáy. */
.rail-group { display: flex; flex-direction: column; }
.rail-group.foot { margin-top: auto; }                /* đẩy Hệ thống xuống đáy rail */
.rail-grp-lbl {                                        /* tầng 1: nút nhãn nhóm, bấm để gập/mở */
  display: flex; align-items: center; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text2); text-align: left; white-space: nowrap;
  padding: 8px 8px 8px 5px; border-radius: 9px; user-select: none;
  transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-grp-lbl::before {                                /* mũi tên ▸, xoay xuống ▾ khi mở */
  content: ""; flex: 0 0 auto; margin-right: 6px;
  width: 0; height: 0; border-left: 4px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  opacity: 0.55; transition: transform var(--rail-anim);
}
.rail-grp-ico { flex: 0 0 auto; display: flex; align-items: center; margin-right: 9px; opacity: 0.8; }
.rail-grp-ico svg { width: 17px; height: 17px; }
.rail-group.open > .rail-grp-lbl::before { transform: rotate(90deg); }
.rail-grp-lbl:hover { color: var(--text); background: var(--surface-2); }
.rail-group.has-active:not(.open) > .rail-grp-lbl { color: var(--accent); }   /* nhóm gập nhưng đang chứa trang hiện tại → hé màu cam */
.rail-group.foot .rail-grp-lbl { border-top: 1px solid var(--glass-brd); border-radius: 0; margin-top: 6px; padding-top: 12px; }
/* tầng 2: khối mục con, trượt mở/đóng bằng max-height */
.rail-grp-items {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--rail-anim), opacity var(--rail-anim);
}
.rail-group.open > .rail-grp-items { max-height: 340px; opacity: 1; padding: 2px 0 4px; }
.rail-brand {
  height: 42px; display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(255, 107, 43, 0.55));
}
.rail-item {
  position: relative; background: transparent; border: 0; cursor: pointer;
  color: var(--text3); border-radius: 9px; padding: 7px 8px 7px 16px;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-item .rail-ico { flex: 0 0 auto; line-height: 0; display: flex; align-items: center; justify-content: center; }
.rail-item .rail-ico svg { width: 19px; height: 19px; }
.rail-item .rail-lbl {
  font-family: var(--font-ui); font-size: 13.5px; letter-spacing: 0.1px; opacity: 0.95;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-item:hover { color: var(--text); background: var(--surface-2); }
.rail-item.active { color: var(--accent); background: var(--accent-wash-2); }
.rail-item.active::before {
  content: ""; position: absolute; left: -8px; top: 18%; bottom: 18%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
/* Select Brain - dời lên navbar (header trái), dùng dropdown sẵn có (.orb-graph-ctl) */
.hud-top .navbar-brain { position: static; z-index: auto; gap: 8px; }
.hud-top .navbar-brain .graph-select { max-width: 200px; }
/* Icon bộ não đứng trước dropdown chọn brain - đi theo khối .navbar-brain kể cả
   khi mobile-chat.js dời cả khối vào rail, nên không cần rule riêng cho mobile. */
.navbar-brain .brain-select-ico { color: var(--accent); font-size: 17px; }
@media (max-width: 860px) {
  .hud-top .navbar-brain .graph-stats { display: none; }   /* mobile: ẩn stats cho gọn */
}

/* Form trong card (Channels / Account / provider key) */
.js-lbl { display: block; font-size: 13px; color: var(--text2); margin: 12px 0 5px; font-family: var(--font); }
.js-lbl .dim { color: var(--green); }
.js-input {
  width: 100%; background: var(--sunken); border: 1px solid var(--glass-brd);
  color: var(--text); border-radius: 9px; padding: 9px 11px; font-size: 15px; margin-bottom: 4px;
}
.js-input:focus { outline: none; border-color: var(--accent); }
.js-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 15px; }
.js-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* Nút phụ (Ngắt / Kiểm tra lại / Qua trình duyệt...). Dùng class này thay vì gõ
   style="background:transparent" ngay trên thẻ: style inline thắng cả rule :hover,
   nên nền giữ nguyên trong suốt còn chữ đổi sang var(--on-accent) - chữ tàng hình ở
   cả tông tối lẫn tông sáng. */
.gcard-btn.ghost { background: transparent; border-color: var(--glass-brd); color: var(--text2); }
.gcard-btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--text2); }
.gcard-btn { width: auto; padding: 9px 16px; }
.gcard .gcard-btn { width: 100%; }   /* nút trong card model vẫn full-width */
.js-actions .gcard-btn { width: auto; }

/* Providers - card OAuth (đăng nhập/kết nối) */
.prov-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.prov-card {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 14px;
  padding: 14px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.18s;
}
.prov-card.main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.prov-head { display: flex; align-items: center; gap: 12px; }
.prov-shield { color: var(--text3); flex: 0 0 auto; display: flex; }
.prov-shield svg { width: 22px; height: 22px; }
.prov-shield.on { color: var(--green); filter: drop-shadow(0 0 6px rgba(34,197,94,0.45)); }
.prov-info { flex: 1; min-width: 0; }
.prov-name { font-family: var(--font); font-weight: 700; font-size: 16px; }
.prov-kind { font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--accent2-wash-2); color: var(--accent2-ink); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; vertical-align: middle; }
.prov-status { font-family: var(--font); font-size: 13px; color: var(--text3); margin-top: 3px; }
.prov-status.on { color: var(--green); }
.prov-badge { font-family: var(--font); font-size: 11px; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 6px; }
.prov-action { display: flex; gap: 8px; margin-top: 12px; }
.prov-action .js-input { margin-bottom: 0; flex: 1; }
.prov-action .gcard-btn { width: auto; flex: 0 0 auto; }
.prov-note { font-size: 13px; color: var(--text3); margin-top: 8px; opacity: 0.7; }

/* Auxiliary model chips */
.aux-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aux-chip {
  background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text2);
  border-radius: 9px; padding: 8px 14px; font-family: var(--font); font-size: 14px; cursor: pointer; transition: all 0.15s;
}
.aux-chip:hover { color: var(--text); border-color: var(--text2); }
.aux-chip.sel { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }

/* Model việc nền: chỉ hiện LỰA CHỌN HIỆN TẠI + nút mở picker. Phơi hết model thành chip thì
   tràn trang (riêng OpenRouter đã vài trăm dòng) và không có đường tìm kiếm. */
.aux-card { max-width: 660px; }
/* Card này KHÔNG nhấc lên khi rê chuột: nó là bảng cài đặt đứng yên, không phải thẻ bấm được.
   Để nguyên hiệu ứng của .gcard thì rê ngang là cả khối nhún nhảy, trông lỏng lẻo.
   Phải viết .gcard.aux-card: chỉ .aux-card:hover thì NGANG ĐIỂM với .gcard:hover, mà rule kia
   nằm sau trong file nên nó thắng - đúng lỗi đo được trong trình duyệt. */
.gcard.aux-card:hover { transform: none; border-color: var(--glass-brd); }
.aux-now {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface-1); border: 1px solid var(--glass-brd); border-radius: 10px;
}
.aux-now-txt { min-width: 0; }
.aux-now-model { font-family: var(--font); font-size: 16px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aux-now-prov { font-size: 13px; color: var(--text3); margin-top: 3px; }
.aux-now-act { display: flex; gap: 8px; flex-shrink: 0; }
.aux-card .aux-now-act .gcard-btn { width: auto; }   /* thắng luật full-width của .gcard .gcard-btn */
.aux-warn { color: var(--yellow); }
/* Ghi chú phụ: chữ nhỏ, mờ, một dòng ý - phần dài dòng đã cắt bớt ở console.js. */
.aux-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text3); }
.aux-note.warn { color: var(--yellow); }

/* Thanh phân đoạn chọn độ sâu suy nghĩ. Sáu nấc mà để rời thành chip thì hàng nút trôi lung
   tung; gộp vào một thanh liền thì nhìn ra ngay đây là MỘT thang từ nhẹ tới nặng. */
.seg { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; padding: 3px;
  background: var(--surface-1); border: 1px solid var(--glass-brd); border-radius: 12px; }
.seg-btn { flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text2); font-family: inherit; transition: all 0.15s; }
.seg-btn:hover { background: var(--surface-2); color: var(--text); }
.seg-btn.sel { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }
.seg-lb { font-size: 14px; font-weight: 600; }
.seg-d { font-size: 11px; opacity: 0.7; white-space: nowrap; }
@media (max-width: 640px) {
  .seg-btn { flex-basis: 70px; padding: 7px 6px; }
  .seg-d { display: none; }        /* màn hẹp: giữ nhãn, bỏ dòng phụ cho khỏi vỡ hàng */
}

/* Picker model (SET MAIN MODEL) */
.mp-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--scrim); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.mp-overlay.open { display: flex; animation: fadeIn 0.15s ease; }
.mp-box {
  width: 760px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--glass-brd); border-radius: 16px; box-shadow: var(--glow);
}
.mp-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 12px; }
.mp-title { font-family: var(--font); font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.mp-sub { font-size: 14px; color: var(--text2); margin-top: 3px; }
.mp-x { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.mp-filter { margin: 0 20px 12px; background: var(--sunken); border: 1px solid var(--glass-brd); color: var(--text); padding: 10px 12px; border-radius: 9px; font-size: 15px; }
.mp-filter:focus { outline: none; border-color: var(--accent); }
.mp-body { display: grid; grid-template-columns: 260px 1fr; gap: 0; flex: 1; overflow: hidden; border-top: 1px solid var(--glass-brd); }
.mp-provs { border-right: 1px solid var(--glass-brd); overflow-y: auto; padding: 8px; }
.mp-prov { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text2); border-radius: 10px; padding: 9px 11px; cursor: pointer; margin-bottom: 2px; }
.mp-prov:hover { background: var(--surface-2); color: var(--text); }
.mp-prov.active { background: var(--accent2-wash); border-color: var(--accent2-line); color: var(--text); }
.mp-prov-l { font-size: 15px; font-weight: 600; }
.mp-prov-c { font-family: var(--font); font-size: 12px; color: var(--text3); margin-top: 2px; }
.mp-models { overflow-y: auto; padding: 8px 12px; }
.mp-model { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: 9px; padding: 11px 12px; cursor: pointer; font-family: var(--font); font-size: 15px; }
.mp-model:hover { background: var(--surface-2); }
.mp-model.sel { background: var(--accent-wash-2); border-color: var(--accent); }
.mp-cur { float: right; font-size: 11px; color: var(--accent2); letter-spacing: 1px; }
.mp-empty { color: var(--text3); font-size: 14px; padding: 16px; }
.mp-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--glass-brd); }
.mp-foot .mp-note { max-height: 84px; overflow-y: auto; }   /* lỗi dài không làm footer phình đẩy nút ra ngoài */
.mp-note { font-size: 13px; color: var(--text3); }
.mp-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 9px 18px; border-radius: 9px; cursor: pointer; font-size: 15px; margin-left: 8px; }
.mp-btn.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); font-weight: 600; }
.mp-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 860px) {
  .mp-body { grid-template-columns: 1fr; }
  .mp-provs { border-right: 0; border-bottom: 1px solid var(--glass-brd); max-height: 140px; }
}

/* Skills chia nhóm (trang Skills) */
.sk-group { margin-bottom: 22px; }
.sk-group-head { font-family: var(--font); font-size: 15px; color: var(--accent2); margin-bottom: 10px; font-weight: 700; }
.sk-group-head .dim { color: var(--text3); font-weight: 400; margin-left: 6px; }

.rail-spacer { flex: 1; }
.rail-foot {                                           /* version/tác giả bên TRÁI, nút thu/mở bên PHẢI */
  font-family: var(--font); line-height: 1.35; padding: 8px 6px 0;
  border-top: 1px solid var(--glass-brd);
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
}
.rail-collapse-btn {                                   /* nút thu/mở sidebar, ghim bên phải; icon căn cỡ với icon nav */
  order: 2; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; padding: 0; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--glass-brd); border-radius: 8px;
  color: var(--text3); cursor: pointer;
  transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-collapse-btn:hover { color: var(--text); background: var(--surface-2); }
.rail-collapse-btn svg { width: 18px; height: 18px; }
.rail-foot .rf-meta { order: 1; text-align: left; min-width: 0; }
.rail-foot .rf-ver { font-size: 11px; color: var(--text2); }
.rail-foot .rf-author { display: block; margin-top: 2px; font-size: 8.5px; color: var(--accent); text-decoration: none; }
.rail-foot .rf-author:hover { text-decoration: underline; }

/* Tooltip nhanh cho rail thu gọn (JS đặt vị trí; body-level nên không bị overflow rail cắt) */
.rail-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--panel-solid); color: var(--text);
  border: 1px solid var(--glass-brd); border-radius: 8px;
  padding: 5px 10px; font-size: 12.5px; font-family: var(--font-ui); white-space: nowrap;
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-50%) translateX(-4px);
  transition: opacity 0.1s, transform 0.1s;
}
.rail-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ===== Chế độ THU GỌN sidebar (chỉ desktop): còn mỗi icon, tên hiện qua tooltip ===== */
@media (min-width: 861px) {
  body.rail-collapsed { --rail-w: var(--rail-w-collapsed); }
  .rail.collapsed .rail-grp-lbl { display: none; }              /* ẩn header nhóm */
  .rail.collapsed .rail-grp-items {                             /* hiện HẾT mục (bỏ accordion), icon xếp dọc */
    max-height: none; opacity: 1; overflow: visible; padding: 0;
  }
  .rail.collapsed .rail-group + .rail-group > .rail-grp-items { /* vạch ngăn mờ giữa các nhóm */
    border-top: 1px solid var(--glass-brd); margin-top: 5px; padding-top: 5px;
  }
  .rail.collapsed .rail-item { justify-content: center; padding: 9px 0; gap: 0; }
  .rail.collapsed .rail-item .rail-lbl { display: none; }       /* giấu chữ, chỉ còn icon */
  .rail.collapsed .rf-meta { display: none; }                   /* giấu version/tác giả cho vừa bề ngang hẹp, chỉ còn nút */
  .rail.collapsed .rail-foot { justify-content: center; }       /* thu: chỉ còn nút, căn giữa */
}

/* ===== Đẩy cockpit sang phải để chừa rail ===== */
body.has-rail .hud { margin-left: var(--rail-w); width: calc(100% - var(--rail-w)); }

/* ===== Console view (vùng trang quản lý) - bắt đầu DƯỚI header toàn cục ===== */
.cview {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: var(--rail-w); z-index: 40;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--accent2-wash), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--accent-wash), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.cview-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 26px; border-bottom: 1px solid var(--glass-brd);
}
.cview-title { font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.cview-title .ico { color: var(--accent); margin-right: 8px; }
.cview-sub { font-size: 14px; color: var(--text2); }
.cview-body { flex: 1; overflow-y: auto; padding: 24px 26px; }

/* ===== Cards chung ===== */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gcard {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 16px;
  padding: 18px; box-shadow: var(--glow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s, border-color 0.18s;
}
.gcard:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.gcard.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(255, 107, 43, 0.18); }
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gcard-name { font-family: var(--font); font-weight: 700; font-size: 16px; }
.gcard-tag {
  font-family: var(--font); font-size: 11px; padding: 3px 7px; border-radius: 6px;
  background: var(--accent2-wash-2); color: var(--accent2-ink); text-transform: uppercase; letter-spacing: 0.5px;
}
.gcard-meta { margin-top: 8px; font-size: 14px; color: var(--text2); }
.gcard-btn {
  margin-top: 14px; width: 100%; padding: 9px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text);
  font-family: var(--font); font-size: 14px; transition: all 0.18s;
}
.gcard-btn:hover { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
/* Nút đang bận/khoá: giữ nguyên bộ mặt thường, không tô cam khi rê chuột (tô cam
   xong chữ đổi sang var(--on-accent) trong khi opacity hạ xuống là đọc không ra). */
.gcard-btn:disabled { cursor: not-allowed; }
.gcard-btn:disabled:hover { background: var(--surface-2); border-color: var(--glass-brd); color: var(--text); }
.gcard-btn.ghost:disabled:hover { background: transparent; color: var(--text2); }
.gcard.current .gcard-btn { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }

.cview-section { margin-bottom: 28px; }
.cview-section h3 {
  font-family: var(--font); font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

/* Cài đặt: một cột đọc tập trung, nhóm ít dùng có thể gập lại thay vì trải kín màn hình. */
.settings-page { width: min(100%, 960px); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.settings-group {
  border: 1px solid var(--glass-brd); border-radius: 16px; overflow: hidden;
  background: var(--glass); box-shadow: var(--shadow-1);
}
.settings-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; cursor: pointer; list-style: none; user-select: none;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.settings-group > summary b { font-family: var(--font); font-size: 15px; color: var(--text); }
.settings-group > summary small { font-size: 12.5px; color: var(--text3); font-weight: 400; }
.settings-caret { color: var(--text3); font-size: 18px; transition: transform .18s ease; }
.settings-group:not([open]) .settings-caret { transform: rotate(-90deg); }
.settings-group-body { padding: 0 18px 18px; border-top: 1px solid var(--hairline); }
.settings-status-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  margin: 0 -18px 16px; background: var(--surface-2);
}
.settings-status-grid > div { min-width: 0; padding: 13px 16px; background: var(--bg2); }
.settings-status-grid span { display: block; color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.settings-status-grid b { display: block; margin-top: 5px; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-links { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.settings-links button {
  display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 7px;
  padding: 11px; text-align: left; color: var(--text); background: var(--surface-1);
  border: 1px solid var(--glass-brd); border-radius: 10px; cursor: pointer;
}
.settings-links button:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.settings-links button > span { grid-row: 1 / 3; align-self: center; color: var(--accent); }
.settings-links button b { font-size: 13px; }
.settings-links button small { color: var(--text3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 16px; }
.settings-card { min-width: 0; padding: 14px; border: 1px solid var(--glass-brd); border-radius: 12px; background: var(--surface-1); }
.settings-card.compact { max-width: 520px; margin-top: 16px; }
.settings-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-card p { margin: 8px 0 0; color: var(--text2); font-size: 13px; line-height: 1.5; }
.settings-card .gcard-btn { width: auto; }
.cview-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 10px; color: var(--text3); text-align: center;
}
.cview-placeholder .ph-ico { font-size: 44px; opacity: 0.5; }

/* ===== View transition (mượt khi đổi trang) ===== */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; }
}
.cview[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

/* Editor + run-drawer giờ top-level (không còn trong overlay Studio) → nổi trên rail/cview */
.run-drawer { z-index: 430; }

/* Dọn header cockpit: bỏ logo lặp (đã có ở rail) + nút Studio/Cài đặt (đã có ở rail).
   #settingsBtn cũ chỉ còn là fallback tương thích; mọi lối vào hiển thị dùng trang Cài đặt trên rail. */
.hud-top .brand,
.hud-top .studio-open-btn,
.hud-top #settingsBtn { display: none; }
/* Studio panels render trong cview: bỏ căn giữa cứng cho hợp khung trang */
.cview-body .stab-panel { max-width: 1100px; margin: 0; }

/* ============================================
   RESPONSIVE - điện thoại: rail → thanh đáy
   ============================================ */
/* Hai nút chỉ hiện ở mobile (desktop ẩn) */
.nav-toggle-btn, .new-chat-btn { display: none; }

@media (max-width: 860px) {
  :root {
    --rail-w: 0px;
    --topbar-h: calc(46px + env(safe-area-inset-top, 0px));
  }   /* header thấp hơn trên mobile nhưng vẫn chừa tai thỏ khi chạy full-screen */

  /* Header mobile: chỉ nút menu, chip model, nút thêm. Ẩn phần rườm rà. */
  .nav-toggle-btn, .new-chat-btn { display: inline-flex; }
  /* Header CỐ ĐỊNH trên cùng: luôn thấy nút menu, chip model, nút thêm ở mọi trang, không bị cuộn trôi mất. */
  .hud-top { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 55;
    background: var(--bg2); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px; padding: 0 8px; }
  .hud-top-left, .hud-top-right { display: none; }    /* rỗng ở mobile: nút menu, chip model, nút thêm là con trực tiếp header */
  .hud-top .brand, .hud-top .navbar-brain,
  .hud-top #themeToggle, .hud-top #studioOpenBtn,
  .hud-top #settingsBtn, .hud-top #ttsToggle, .hud-top #resetBtn { display: none; }
  .hud-center-title { display: none; }                /* mobile: ẩn tên workspace + ngày; chip model làm giữa header */
  .hud-top #mbOpen { display: inline-flex; margin-left: auto; margin-right: auto; }  /* chip model căn giữa, đẩy ＋ sang phải */
  .hud-top .notification-trigger {
    flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; padding: 0;
  }
  .hud-top .notification-trigger-label { display: none; }
  .hud-top .notification-badge {
    position: absolute; top: -4px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  }
  .notification-panel {
    top: calc(52px + env(safe-area-inset-top, 0px)); right: 8px;
    width: calc(100vw - 16px);
    max-height: min(72dvh, calc(100dvh - 76px - env(safe-area-inset-bottom, 0px)));
    border-radius: 14px;
  }
  .notification-shade { background: var(--scrim); backdrop-filter: blur(2px); }
  .noti-head { padding: 14px 13px 12px; }
  .noti-list { padding: 7px; }
  .hud-top #mbPop { position: fixed; top: calc(50px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; transform: translateX(-50%);
    width: min(340px, 92vw); z-index: 200; max-height: 70vh; }
  .model-bar { display: none; }                       /* hàng model gốc ẩn; chip + sysBar bên trong dời đi (JS) */
  #jv-sess-btn { display: none; }                     /* nút Lịch sử: ẩn ở mobile để header cockpit khỏi chồng/lệch */

  /* Rail: từ thanh đáy → ngăn kéo trượt từ trái */
  .rail {
    top: 0; left: 0; bottom: 0; right: auto; width: min(280px, 82vw); height: 100vh;
    height: 100dvh;
    flex-direction: column;
    padding: max(10px, env(safe-area-inset-top, 0px)) 8px max(10px, env(safe-area-inset-bottom, 0px));
    gap: 4px;
    border-top: 0; border-right: 1px solid var(--glass-brd);
    transform: translateX(-100%); transition: transform .22s ease; z-index: 60; overflow-y: auto;
  }
  body.nav-open .rail { transform: translateX(0); box-shadow: 8px 0 40px var(--shadow-veil); }
  .rail-top, .rail-foot { display: flex; }            /* hiện lại brand + version trong ngăn kéo */
  .rail-nav { flex-direction: column; overflow-x: hidden; overflow-y: auto; gap: 2px; padding: 0; }
  .rail-group, .rail-grp-items { display: block; }
  .rail-grp-lbl { display: flex; }
  .rail-item { flex: none; flex-direction: row; gap: 10px; padding: 9px 10px; border-radius: 9px; }
  .rail-item .rail-lbl { font-size: 13px; }
  .rail-item.active::before { left: 0; right: auto; top: 15%; bottom: 15%; width: 3px; height: auto; }

  /* Mục "Hệ thống" ở đáy ngăn kéo: chọn brain, đổi tông, loa và trạng thái; Cài đặt dùng mục rail duy nhất. */
  .rail-sys { margin-top: 8px; padding: 10px 6px 4px; border-top: 1px solid var(--glass-brd);
    display: flex; flex-direction: column; gap: 10px; }
  .rail-sys-lbl { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
  .rail-sys .navbar-brain { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .rail-sys .graph-select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .rail-sys-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .rail-sys-btns .hud-icon-btn { display: inline-flex; }
  .rail-sys .sysbar {
    display: flex; flex: none; width: 100%; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: flex-start; gap: 6px; overflow: visible;
  }
  .rail-sys .sys-status, .rail-sys .mcp-list {
    width: 100%; min-width: 0; flex-direction: column; align-items: flex-start;
    gap: 3px; overflow: hidden;
  }

  /* Nền mờ khi mở ngăn kéo */
  .nav-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 55; }
  .nav-backdrop[hidden] { display: none; }
  body.nav-open .nav-backdrop { display: block; }

  /* Không còn chừa 56px đáy cho rail; chat chiếm hết */
  body.has-rail .hud {
    margin-left: 0; width: 100%;
    height: 100vh; height: 100dvh;
  }
  .cview { left: 0; bottom: 0; }
  .cview-body { padding: 16px 14px; }
  .cgrid { grid-template-columns: 1fr; }
  .settings-page { width: 100%; gap: 10px; }
  .settings-group > summary { padding: 14px; }
  .settings-group-body { padding: 0 14px 14px; }
  .settings-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 -14px 14px; }
  .settings-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-two-col { grid-template-columns: 1fr; padding-top: 14px; }

  /* Mobile: KHÔNG cho cả trang trôi lên xuống - cả màn là 1 khung cố định; mỗi khung tự cuộn bên trong. */
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body.in-console .hud-body { visibility: hidden; }   /* trang quản lý: giấu quả cầu cockpit phía sau */
  .hud {
    height: 100vh; height: 100dvh;
    grid-template-rows: minmax(0, 1fr) auto auto;
    padding-top: calc(46px + env(safe-area-inset-top, 0px));
  }  /* header fixed; ba hàng còn lại = body + đính kèm + ô nhập */
  .hud-top {
    height: calc(46px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .hud-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }  /* cockpit: quả cầu trên, chat dưới, không trôi */
  .hud-left { display: none; }              /* số liệu KD ẩn trên mobile (xem ở Console) */
  .hud-center {
    flex: 0 0 auto;
    height: 30vh;
    height: clamp(190px, 27dvh, 260px);
    min-height: 0;
  }
  .hud-right {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--border);
  }
  .hud-right .panel-label {
    flex: 0 0 auto;
    min-height: 22px;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 1.2px;
  }
  .hud-right .transcript {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding-right: 2px;
  }

  /* Neuron chỉ là bối cảnh trên mobile: nhãn và lớp trạng thái nhỏ hơn để chat là nội dung chính. */
  .concept-label .cl-name { font-size: 10px; letter-spacing: 1.2px; }
  .concept-label .cl-meta { font-size: 8px; letter-spacing: .5px; margin-top: 0; }
  .orb-overlay { bottom: 48px; }
  .orb-state { font-size: 11px; letter-spacing: 2px; }
  .orb-interim {
    max-width: calc(100vw - 28px);
    margin-top: 3px;
    min-height: 14px;
    font-size: 13px;
  }
  .brain-overlay-toggle {
    top: 7px; right: 7px;
    width: 32px; height: 32px; padding: 7px; border-radius: 9px;
  }
  .brain-overlay-toggle svg { width: 17px; height: 17px; }

  /* Agents / Skills / Workflows thành một thanh mỏng thay vì một card lớn che neuron. */
  .brain-stats {
    bottom: 6px;
    width: min(420px, calc(100% - 20px));
    padding: 2px;
    border-radius: 10px;
  }
  .bstat { flex: 1 1 0; padding: 4px 5px; border-radius: 8px; }
  .bstat-num { font-size: 17px; }
  .bstat-lbl { margin-top: 3px; font-size: 8px; letter-spacing: 1px; }
  .bstat-sep { margin: 4px 0; }

  /* Ô nhập luôn nằm trong visual viewport của Safari/Chrome iOS và chừa safe area. */
  .hud-voice {
    min-width: 0;
    margin: 5px 8px max(7px, env(safe-area-inset-bottom, 0px));
  }
  .hud-voice .voice-input { min-width: 0; }
  .cview-head { padding: 14px 16px; }
  .cview-title { font-size: 16px; }
}

@media (max-width: 860px) and (max-height: 620px) {
  .hud-center { height: clamp(150px, 25dvh, 190px); }
  .concept-label .cl-meta { display: none; }
}

/* ==== Trang Kết nối (kho connector + đa tài khoản) ==== */
.conn-card .conn-ico { font-size: 26px; width: 40px; text-align: center; flex-shrink: 0; }
.conn-accounts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; }
.conn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface-2); color: inherit;
  font-size: 13px; cursor: pointer; }
.conn-chip:hover { background: var(--surface-3); }
.conn-chip.off { opacity: .45; }
.conn-chip.add { border-style: dashed; opacity: .75; }
.conn-chip .cdot { color: var(--text3); font-size: 10px; }
.conn-chip .cdot.on { color: var(--green); }
/* Sức khoẻ kết nối (vòng check nền): sống / lỗi / chưa rõ - đè lên màu on/off cơ bản */
.conn-chip .cdot.hok { color: var(--green); }
.conn-chip .cdot.herr { color: var(--red); }
.conn-chip .cdot.hunk { color: var(--warn-ink); }
.conn-chip.conn-fix { border-color: var(--danger-line); color: var(--red); background: var(--danger-wash); }
.conn-chip.conn-fix:hover { background: var(--danger-wash); }
.conn-chip .cstar { color: var(--warn-ink); }
/* Khối B: nhóm Google một cửa + wizard từng bước + kéo thả JSON + dùng lại key */
.gico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: #fff; color: #4285f4; font-weight: 800; font-size: 21px;
  font-family: Arial, sans-serif; }
.conn-steps { margin: 4px 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px;
  font-size: 13.5px; line-height: 1.5; }
.conn-steps li::marker { color: var(--accent); font-weight: 700; }
.conn-steps .step-link { margin-left: 6px; padding: 2px 9px; font-size: 12px; vertical-align: 1px; }
.conn-steps .wiz-copy { margin-top: 6px; }
.gp-row { display: flex; align-items: center; gap: 10px; text-align: left; }
.gp-ico { flex: 0 0 auto; width: 30px; display: inline-flex; justify-content: center; font-size: 20px; }
.gp-ico .ico-img { width: 24px; height: 24px; object-fit: contain; }
.gp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gp-name { font-weight: 600; }
.json-drop { border: 1.5px dashed var(--border); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; opacity: .85; cursor: pointer; margin: 2px 0 6px; transition: border-color .15s, background .15s; }
.json-drop:hover, .json-drop.over { border-color: var(--accent); background: var(--info-wash); opacity: 1; }
.json-drop.ok { border-color: var(--green); color: var(--green); opacity: 1; }
.json-drop.bad { border-color: var(--red); color: var(--red); opacity: 1; }
.reuse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px;
  padding: 9px 12px; border: 1px solid var(--ok-line); border-radius: 10px; background: var(--ok-wash); }
.reuse-row select { max-width: 200px; }
/* Đèn báo não: bộ não mất đăng nhập - dải đỏ mỏng giữa thanh trạng thái */
/* Ngắn gọn và BẤM ĐƯỢC. Trước đây chuỗi dài hơn cả thanh trạng thái nên bị cắt cụt giữa
   chừng, và phần bị cắt lại đúng là phần nói phải làm gì. Nay chữ đủ ngắn để không cần cắt;
   max-width chỉ còn là lưới an toàn cho màn hẹp. */
.engine-banner { display: inline-flex; align-items: center; gap: 5px; max-width: 46vw;
  padding: 3px 12px; cursor: pointer;
  border: 1px solid var(--danger-line); border-radius: 14px; background: var(--danger-wash);
  color: var(--red); font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: background 0.15s, border-color 0.15s; }
.engine-banner:hover { background: var(--danger-wash); border-color: var(--red); }
/* display của class đè mất [hidden] mặc định của trình duyệt → phải tự ẩn lại, không thì
   đèn lộ vỏ rỗng thường trực trên thanh trạng thái (bug 0.9.195). */
.engine-banner[hidden] { display: none; }
@media (max-width: 700px) { .engine-banner { max-width: 70vw; font-size: 11.5px; } }
/* Khối D: khu "kết nối sẵn của CLI" gập mặc định + mobile 1 cột */
.amb-details summary { cursor: pointer; list-style: none; }
.amb-details summary::-webkit-details-marker { display: none; }
.amb-details summary h3::before { content: "▸ "; opacity: .6; }
.amb-details[open] summary h3::before { content: "▾ "; }
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr; }
  .conn-accounts { flex-wrap: wrap; }
  .conn-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reuse-row select { max-width: 100%; }
}
.perm-chip { font-size: 11px; border: 1px solid; border-radius: 10px; padding: 1px 7px; opacity: .9; }
.cat-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 4px; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { border: 1px solid var(--border); background: transparent; color: inherit;
  border-radius: 14px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; opacity: .8; }
.cat-chip.on { border-color: var(--accent); color: var(--accent); opacity: 1; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin-top: 12px; max-width: 980px; }
.cat-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.cat-card.soon { opacity: .55; }
.cat-ico { font-size: 30px; height: 34px; display: flex; align-items: center; }
.ico-img { width: 32px; height: 32px; object-fit: contain; border-radius: 7px; vertical-align: middle; }
.conn-card .conn-ico .ico-img { display: block; margin: 0 auto; }
.cat-name { font-weight: 600; font-size: 14.5px; }
.cat-desc { font-size: 12.5px; opacity: .7; flex: 1; line-height: 1.45; }
.cat-doc { font-size: 12px; opacity: .7; }
.conn-form { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.conn-form::-webkit-scrollbar { width: 10px; }
.conn-form::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.conn-form::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }
.conn-form .mcp-lb { display: flex; flex-direction: column; gap: 4px; font-size: 14px; opacity: .85; }
/* white-space: pre-line -> xuống dòng viết trong mcp-catalog.json hiện ĐÚNG thành xuống dòng
   (guide là chuỗi thuần đi qua esc(), không phải HTML). overflow-wrap: anywhere -> chuỗi dài
   không khoảng trắng (lệnh shell, URL callback) bẻ dòng thay vì đẩy tràn ngang cả modal. */
.conn-guide { font-size: 13px; opacity: .8; background: var(--info-wash);
  border: 1px solid var(--info-line); border-radius: 8px; padding: 9px 12px; line-height: 1.6;
  white-space: pre-line; overflow-wrap: anywhere; }
.conn-risk { font-size: 13px; background: var(--warn-wash); border: 1px solid var(--warn-line);
  border-radius: 8px; padding: 10px 12px; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere; }
.conn-wizard { display: flex; flex-direction: column; gap: 10px; }
.wiz-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-links .wiz-open { margin-left: 0; font-size: 13px; padding: 7px 12px; }
.wiz-copy { display: flex; gap: 8px; align-items: stretch; }
.wiz-copy input { flex: 1 1 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.wiz-copy .wiz-copy-btn { margin-left: 0; white-space: nowrap; }
.conn-ok { font-size: 14.5px; padding: 8px 2px; color: var(--green); }
.conn-hint { margin-top: 8px; font-size: 13px; color: var(--warn-ink); }
.qr-img { width: 240px; height: 240px; border-radius: 10px; background: #fff; padding: 8px;
  display: block; margin: 10px auto 4px; }
.conn-menu { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.conn-menu-btn { text-align: left; border: 1px solid var(--border); background: var(--surface-1);
  color: inherit; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; cursor: pointer;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn-menu-btn:hover:not(:disabled) { background: var(--surface-3); }
.conn-menu-btn:disabled { opacity: .4; cursor: default; }
.conn-menu-btn.danger { color: var(--red); }
.conn-audit { max-height: 380px; overflow-y: auto; padding: 10px 16px; font-size: 13px; }
.aud-row { padding: 6px 0; border-bottom: 1px solid var(--surface-2); }
.aud-row.bad { color: var(--red); }
.aud-ts { opacity: .55; font-size: 12px; margin-right: 6px; }
.aud-err { font-size: 12px; opacity: .8; margin-top: 2px; }

/* ===== Chẩn đoán adaptive runtime (spec mục 27) ===== */
.rt-wrap { display: flex; flex-direction: column; gap: 18px; }
.rt-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line); }
.rt-banner.rt-off { background: color-mix(in srgb, var(--ok, #3fb950) 8%, transparent); }
.rt-banner.rt-on  { background: color-mix(in srgb, var(--warn, #d29922) 12%, transparent); }
.rt-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.rt-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.rt-k { font-size: 12px; opacity: .7; margin-bottom: 6px; }
.rt-v { font-size: 24px; font-weight: 600; line-height: 1.1; }
.rt-note { font-size: 11px; opacity: .6; margin-top: 4px; }
.rt-sec h3 { font-size: 14px; margin: 0 0 10px; font-weight: 600; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap; }
.rt-tbl { width: 100%; border-collapse: collapse; font-size: 13px; display: block;
  overflow-x: auto; white-space: nowrap; }
.rt-tbl th, .rt-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rt-tbl th { font-weight: 600; opacity: .75; font-size: 12px; }
.rt-right { text-align: right !important; }
.rt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.rt-path { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.rt-path-legacy, .rt-path-unassigned { opacity: .6; }
.rt-foot { font-size: 12px; padding-top: 4px; }
.rt-set { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.rt-bps { width: 78px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg); color: inherit; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rt-apply { font-size: 12px; padding: 4px 10px; }
.rt-note { font-size: 12px; padding-top: 8px; line-height: 1.5; }
.wf-wait-act { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.wf-approve { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--warn, #d29922) 16%, transparent); cursor: pointer;
  font-size: 13px; font-weight: 600; }
.wf-approve:disabled { opacity: .5; cursor: default; }
.rt-quota { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-top: 10px; font-size: 12px; }
.rt-quota select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg); color: inherit; font-size: 12px; }
.rt-help { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  font-size: 13px; line-height: 1.6; background: var(--surface-2); }
.rt-help b { display: block; margin-bottom: 6px; font-size: 13.5px; }
.rt-help p { margin: 8px 0 0; color: var(--text2); }
/* Bộ não đang dùng: câu hỏi đầu tiên khi mở trang là "cái này có áp cho gói của tôi không". */
.rt-engine { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rt-engine b { font-size: 15px; }
.rt-eng-model { font-size: 12.5px; color: var(--text2); font-family: var(--mono, monospace); }
/* Ba nút chọn mức tiết kiệm - thay cho bảng 10 dòng canary mà người dùng không hiểu. */
.rt-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin-bottom: 10px; }
.rt-preset { position: relative; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface-2); color: inherit;
  transition: border-color 0.15s, background 0.15s; }
.rt-preset:hover:not(:disabled) { border-color: var(--accent); }
.rt-preset:disabled { opacity: .55; cursor: default; }
.rt-preset b { display: block; font-size: 14px; }
/* Phần trăm tiết kiệm nằm NGAY cạnh tên mức: đó là thứ quyết định người dùng bấm cái nào,
   để nó lẫn trong đoạn mô tả là coi như không có. */
.rt-preset-top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.rt-pct { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.rt-pertok { display: block; font-size: 11.5px; color: var(--text3); margin: 2px 0 5px;
  font-variant-numeric: tabular-nums; }
.rt-first { margin-top: 0; }
.rt-first-note { margin: 0 0 14px; }
/* Bảng đo THẬT: tách hẳn khỏi phần ước lượng để không ai nhầm hai loại số với nhau. */
.rt-doduoc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; }
.rt-doduoc-row .rt-v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-doduoc-row .rt-k { font-size: 12px; color: var(--text2); }
.rt-doduoc-pct .rt-v { color: var(--accent); }
.rt-preset small { display: block; font-size: 12px; line-height: 1.5; color: var(--text2); }
.rt-preset.on { border-color: var(--accent); background: var(--accent-wash-2); }
.rt-preset-now { display: inline-block; margin-top: 8px; font-size: 11px;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 1px 8px; }
/* Mức mà bộ não đang chạy không ăn được. Cùng hình dạng viên thuốc với "đang dùng" để mắt
   đọc cùng một chỗ, nhưng màu cảnh báo - đây là lời đính chính cho con số ngay phía trên. */
.rt-preset-na { display: inline-block; margin-top: 8px; margin-right: 6px; font-size: 11px;
  color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: 999px;
  padding: 1px 8px; }
.rt-visao-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
/* "Mức này chỉ là mặc định, anh chưa chọn." Đậm hơn rt-note thường vì nó nói một điều người
   dùng không đoán được: cái đang hiện có thể tự đổi sau bản cập nhật. */
.rt-chuachon { opacity: .85; border-left: 2px solid var(--line); padding-left: 10px; }
.rt-adv { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.rt-adv summary { cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.rt-adv summary::-webkit-details-marker { display: none; }
.rt-adv summary::before { content: "▸ "; opacity: .6; }
.rt-adv[open] summary::before { content: "▾ "; }
.rt-toast { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 10px;
  transition: opacity 0.4s; border: 1px solid; }
.rt-toast.ok { border-color: var(--accent); background: var(--accent-wash-2); }
.rt-toast.err { border-color: var(--danger-line); background: var(--danger-wash); color: var(--red); }

/* Lý do một lượt không đi đường tắt, nằm ngay dưới tên đường trong bảng lượt gần nhất.
   Nhỏ và mờ vì nó là chú thích, nhưng phải có: thiếu nó thì bấm mức Siêu tiết kiệm rồi
   thấy vẫn "Tối ưu" là chịu, không ai nói được vì sao. */
.rt-lydo { margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--text3); }