/* ===== Fonts ===== */
@font-face { font-family: 'Instrument'; src: url('/fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url('/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'GeistMono'; src: url('/fonts/GeistMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GeistMono'; src: url('/fonts/GeistMono-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #f5f5fb;
  --panel: #ffffff;
  --panel-hi: #f2effc;
  --ink: #1e1b2e;
  --muted: #6b7280;
  --faint: #9ca3af;
  --rule: #ececf5;
  --rule-hi: #ded9f5;
  --accent: #6c5ce7;
  --accent2: #8b7cf6;
  --good: #16a34a;
  --bad: #dc2626;
  --warn: #f97316;
  --font: 'Instrument', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'GeistMono', ui-monospace, Consolas, monospace;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 14px 34px rgba(108,92,231,.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font); color: var(--ink); line-height: 1.6; letter-spacing: -.005em;
  background:
    radial-gradient(1000px 520px at 14% -10%, rgba(108,92,231,.07), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(139,124,246,.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(108,92,231,.18); }

/* ===== Layout ===== */
.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
aside {
  border-right: 1px solid var(--rule);
  padding: 1.5rem 1rem 1rem;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 111, 43, .28) transparent;
}
aside .logo { font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em; padding: 0 .4rem; display:flex; align-items:center; gap:.55rem; color: var(--ink); }
aside .logo .mark {
  width: 32px; height: 32px; border-radius: 10px; flex:none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:.95rem;
  box-shadow: 0 8px 18px rgba(108,92,231,.35);
}
aside .logo small { display: block; font-weight: 500; color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .12rem; }
aside .logo .brand-credit {
  display: grid;
  gap: .04rem;
  margin-top: .14rem;
  font-size: inherit;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
aside .logo .brand-credit span {
  color: #8f7b70;
  font-size: .57rem;
  font-weight: 500;
  letter-spacing: .04em;
}
aside .logo .brand-credit b {
  color: #ff8950;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .035em;
}
aside .logo { position: relative; }
.side-toggle {
  margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer;
  color: var(--muted); width: 28px; height: 28px; flex: none; font-size: .9rem; line-height: 1;
}
.side-toggle:hover { background: var(--panel-hi); color: var(--ink); }

nav.tabs { margin-top: 1.8rem; display: grid; gap: .5rem; }
nav.tabs button {
  text-align: left; background: none; border: 0; color: var(--muted); font: inherit; font-size: .95rem;
  padding: .68rem .8rem; border-radius: 12px; cursor: pointer; display: flex; gap: .7rem; align-items: center;
  transition: background .15s, color .15s; width: 100%;
}
nav.tabs button:hover { background: var(--panel-hi); color: var(--ink); }
nav.tabs button.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 700; box-shadow: 0 8px 20px rgba(108,92,231,.3); }
nav.tabs .ico { width: 1.25rem; text-align: center; font-size: 1rem; }

/* Gom nhóm menu: tiêu đề nhóm bấm để thu/mở, chevron xoay theo trạng thái. */
.nav-group-h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: .4rem .8rem; }
.nav-group-h .chev { margin-left: auto; transition: transform .15s; font-size: .75rem; }
.nav-group.collapsed .nav-group-h .chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-group-items { display: grid; gap: .15rem; }

/* Thu gọn cả sidebar về dạng chỉ-icon. */
.app.sidebar-collapsed { grid-template-columns: 64px 1fr; }
.app.sidebar-collapsed aside { padding: 1.5rem .5rem 1rem; overflow: hidden; }
.app.sidebar-collapsed .logo > div { display: none; }
/* Nút ☰ PHẢI luôn hiện — ẩn nó đi thì thu gọn xong không còn cách nào mở lại. */
.app.sidebar-collapsed .logo { flex-direction: column; gap: .5rem; }
.app.sidebar-collapsed .side-toggle { margin-left: 0; }
.app.sidebar-collapsed nav.tabs .lbl, .app.sidebar-collapsed nav.tabs .chev { display: none; }
.app.sidebar-collapsed .nav-group-h { display: none; } /* icon-only: bỏ tiêu đề nhóm, luôn hiện phẳng */
.app.sidebar-collapsed .nav-group.collapsed .nav-group-items { display: grid; } /* icon-only bỏ qua trạng thái thu gọn riêng từng nhóm */
.app.sidebar-collapsed nav.tabs button { justify-content: center; padding: .68rem .4rem; gap: 0; }
.app.sidebar-collapsed .sidebar-foot { display: none; }

.sidebar-foot { margin-top: auto; padding: .9rem .5rem .2rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--rule); }
.sidebar-foot .streak { color: var(--warn); font-weight: 700; }
.sidebar-foot .vault { margin-top: .45rem; color: var(--faint); font-size: .72rem; word-break: break-all; font-family: var(--mono); }
.streak-chip {
  width: fit-content;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .34rem .62rem;
  border: 1px solid rgba(255, 120, 55, .3);
  border-radius: 999px;
  color: #c9b5aa;
  background: linear-gradient(135deg, rgba(255, 103, 37, .14), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(255, 77, 12, .08);
  font: 700 .63rem/1 var(--mono);
  letter-spacing: .025em;
  white-space: nowrap;
}
.streak-chip i { font-style: normal; filter: drop-shadow(0 0 7px rgba(255, 92, 22, .55)); }
.sidebar-foot .streak-chip .streak { color: #ff8b4d; font-size: .9rem; font-weight: 900; }
.streak-chip small { color: #806e65; font: inherit; }

main { padding: 2.4rem 3rem 4rem; max-width: 1080px; }
.view { display: none; }
.view.active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 940px) {
  .app, .app.sidebar-collapsed { grid-template-columns: 1fr; }
  aside, .app.sidebar-collapsed aside { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1rem 1.2rem; overflow: visible; }
  /* Màn hẹp: menu là thanh ngang → bỏ gom nhóm, trải phẳng mọi mục cho khỏi vỡ hàng. */
  nav.tabs { margin-top: 0; display: flex; flex-wrap: wrap; gap: .1rem; }
  nav.tabs button { width: auto; } /* width:100% của sidebar dọc sẽ đẩy mỗi nút xuống 1 hàng riêng */
  .nav-group { display: contents; }
  /* Phải là "nav.tabs .nav-group-h" — selector ".nav-group-h" trần thua độ ưu tiên
     của "nav.tabs button { display: flex }" ở trên, nên tiêu đề nhóm không chịu ẩn. */
  nav.tabs .nav-group-h { display: none; }
  .nav-group-items, .nav-group.collapsed .nav-group-items { display: contents; }
  .side-toggle { display: none; } /* thanh ngang không cần thu gọn */
  .app.sidebar-collapsed .logo > div, .app.sidebar-collapsed nav.tabs .lbl { display: revert; }
  .app.sidebar-collapsed .logo { flex-direction: row; }
  .app.sidebar-collapsed .sidebar-foot { display: revert; }
  .sidebar-foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  main { padding: 1.6rem 1.2rem 3rem; }
  .grid2 { grid-template-columns: 1fr !important; }
}

/* Điện thoại: 10 nút wrap thành 4 hàng chiếm 1/3 màn hình → đổi thành một hàng
   cuộn ngang như thanh tab quen thuộc trên mobile. */
@media (max-width: 560px) {
  aside { padding: .8rem .9rem; }
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: 0 0 auto; padding: .5rem .7rem; font-size: .88rem; }
  aside .logo { width: 100%; }
  .sidebar-foot { width: 100%; margin: .2rem 0 0; display: flex; gap: .8rem; font-size: .78rem; }
  main { padding: 1.2rem .9rem 2.5rem; }
  h1.page-title { font-size: 1.45rem; }
  .m-thread { max-height: 60vh; }
  .m-bubble { max-width: 92%; }
  .mentor-bar { gap: .6rem; }
  .mentor-actions { width: 100%; flex-wrap: wrap; }
}

/* ===== Page header (plain, no card) ===== */
.hero { padding: 0 0 1.5rem; }
h1.page-title { font-size: 1.85rem; line-height: 1.12; letter-spacing: -.03em; font-weight: 800; color: var(--ink); }
.page-sub { color: var(--muted); margin-top: .5rem; max-width: 72ch; font-size: .98rem; }

/* ===== Cards ===== */
.card {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel);
  padding: 1.25rem 1.4rem; margin-bottom: 1.1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: var(--rule-hi); box-shadow: 0 10px 24px rgba(108,92,231,.08); }
.card h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.card .hint { color: var(--muted); font-size: .88rem; margin: .35rem 0 .9rem; line-height: 1.55; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ===== Forms ===== */
label { display: block; font-size: .8rem; color: var(--muted); margin: .85rem 0 .3rem; font-weight: 600; }
input[type=text], input[type=number], textarea, select {
  width: 100%; background: #fbfbfe; border: 1px solid var(--rule); color: var(--ink);
  border-radius: var(--radius-sm); padding: .6rem .7rem; font: inherit; font-size: .94rem; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,92,231,.15); background: #fff; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%231e1b2e' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; padding-right: 1.8rem; }

/* custom checkbox */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 19px; height: 19px; flex: none;
  border: 1.6px solid var(--rule-hi); border-radius: 6px; background: #fff;
  cursor: pointer; position: relative; transition: all .15s; vertical-align: middle;
}
input[type=checkbox]:hover { border-color: var(--accent); }
input[type=checkbox]:checked { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; }
input[type=checkbox]:checked::after { content: ''; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
input[type=checkbox]:disabled { cursor: default; opacity: 1; }
#mentorSettings input[type=checkbox] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  flex: 0 0 20px;
}
#mentorSettings .settings-check-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .7rem;
  color: #c9b8ae;
  cursor: pointer;
}
#mentorSettings .settings-check-row span { line-height: 1.35; }

/* ===== Buttons ===== */
.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: .62rem 1.1rem; font: inherit; font-weight: 700; font-size: .94rem; cursor: pointer;
  transition: transform .1s, box-shadow .15s; box-shadow: 0 8px 20px rgba(108,92,231,.28);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(108,92,231,.36); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-hi); box-shadow: none; }
.btn.ghost:hover { background: var(--panel-hi); }
.btn.sm { padding: .4rem .75rem; font-size: .85rem; }
.row-actions { display: flex; gap: .6rem; margin-top: 1.1rem; align-items: center; flex-wrap: wrap; }
.saved { color: var(--good); font-size: .85rem; font-weight: 600; opacity: 0; transform: translateX(-6px); transition: all .2s; }
.saved.show { opacity: 1; transform: none; }

/* Thanh báo LƯU HỎNG. Khác `.saved` ở chỗ nó Ở LẠI cho tới lần lưu thành công
   kế tiếp — lưu hỏng nghĩa là chữ vừa gõ chỉ còn trong RAM trình duyệt, nhấp
   nháy 1,4 giây rồi biến mất thì chẳng khác gì im lặng. */
.save-err {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%) translateY(120%);
  z-index: 9999; max-width: min(46rem, calc(100vw - 2rem));
  padding: .7rem 1.1rem; border-radius: .7rem;
  background: var(--bad); color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.45;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.save-err.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Table ===== */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: .7rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule); font-size: .9rem; vertical-align: top; }
th { color: var(--faint); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
tr:last-child td { border-bottom: 0; }
td input, td textarea, td select { padding: .4rem .45rem; font-size: .88rem; }
td textarea { min-height: 42px; }

/* ===== Bits ===== */
.pill { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rule-hi); border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; color: var(--muted); background: #fff; }
.pill.tag-good { color: var(--good); border-color: rgba(22,163,74,.3); background: rgba(22,163,74,.08); }
.kbd { font-family: var(--mono); background: var(--panel-hi); border: 1px solid var(--rule); border-radius: 6px; padding: .08rem .4rem; font-size: .82rem; color: var(--ink); }
.muted { color: var(--muted); }
.callout { border: 1px solid rgba(108,92,231,.22); border-left: 3px solid var(--accent2); padding: .7rem .9rem; background: rgba(108,92,231,.05); border-radius: var(--radius-sm); margin: .8rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink); }
.del { color: var(--bad); cursor: pointer; background: none; border: 0; font: inherit; font-size: 1rem; opacity: .7; }
.del:hover { opacity: 1; }
.linkrow { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.note-link { font-family: var(--mono); font-size: .78rem; }

/* ===== Stat tiles (dashboard) ===== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.1rem; }
@media (max-width: 940px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.stat-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; margin-bottom: .65rem; }
.stat-ico-a { background: #eeebfc; }
.stat-ico-b { background: #fff1e6; }
.stat-ico-c { background: #e9fbf0; }
.stat-ico-d { background: #eaf2ff; }
.stat-num { font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.stat-lab { font-size: .78rem; color: var(--muted); margin-top: .15rem; }

/* ===== Progress ring card ===== */
.ring-row { display: flex; align-items: center; gap: 1.4rem; margin-top: .6rem; flex-wrap: wrap; }
.ring { width: 118px; height: 118px; border-radius: 50%; position: relative; flex: none; display: grid; place-items: center; }
.ring::before { content: ''; position: absolute; inset: 14px; background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); }
.ring-center { position: relative; z-index: 1; text-align: center; }
.ring-center b { display: block; font-size: 1.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.ring-center span { font-size: .68rem; color: var(--muted); }
.ring-legend { display: grid; gap: .55rem; flex: 1; min-width: 140px; }
.legend-row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--muted); }
.legend-row b { color: var(--ink); margin-left: auto; font-weight: 700; }
.dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dot-accent { background: var(--accent); }
.dot-rule { background: var(--rule-hi); }

/* ==========================================================================
   Học viện v3 — hai loại điểm, dạng bài mới, cổng chặn
   ========================================================================== */

/* Điểm Triển khai cố tình to hơn XP: tài sản thật > công sức học. */
.ac-score-pair {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: .7rem;
  margin: .9rem 0;
}
.ac-score {
  border-radius: 14px;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-direction: column; gap: .12rem;
}
.ac-score-lab { font-size: .78rem; letter-spacing: .04em; opacity: .85; }
.ac-score b { font-size: 2.1rem; font-weight: 800; line-height: 1.05; }
.ac-score small { font-size: .76rem; opacity: .7; }
.ac-score.tk {
  background: linear-gradient(135deg, rgba(255, 102, 36, .18), rgba(255, 78, 14, .07));
  border-color: rgba(255, 122, 46, .34);
}
.ac-score.tk b { color: #ff8b4d; }
.ac-score.xp b { font-size: 1.55rem; opacity: .88; }

/* Trạng thái từng khái niệm */
.ac-concepts { margin: .3rem 0 1rem; }
.ac-concepts summary { cursor: pointer; font-size: .86rem; opacity: .8; padding: .3rem 0; }
.ac-concept-grid {
  display: grid; gap: .55rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.ac-concept {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px; padding: .6rem .7rem;
}
.ac-concept b { font-size: .87rem; display: block; margin-bottom: .35rem; }
.ac-concept small { font-size: .74rem; opacity: .68; }
.ac-concept-bar {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .08); margin-bottom: .3rem;
}
.ac-concept-bar i { display: block; height: 100%; border-radius: 3px; background: currentColor; }
.ac-concept.ok { color: #48d597; border-color: rgba(72, 213, 151, .3); }
.ac-concept.mid { color: #ffb454; }
.ac-concept.weak { color: #8b7b73; }

/* Cổng chặn T4 — không cho điền hồ sơ thật khi chưa qua đủ câu phán đoán */
.ac-gate {
  text-align: center; padding: 1.4rem 1rem;
  border: 1px dashed rgba(255, 180, 84, .38);
  border-radius: 14px; background: rgba(255, 180, 84, .06);
}
.ac-gate-ico { font-size: 2rem; margin-bottom: .3rem; }
.ac-gate b { display: block; margin-bottom: .4rem; }
.ac-gate p { font-size: .87rem; margin: .25rem 0; }
.ac-node-gate {
  display: block; font-size: .68rem; opacity: .75; margin-top: .15rem;
}

/* Mẫu vật cho dạng spot / rewrite */
.ac-sample {
  border-left: 3px solid rgba(255, 122, 46, .5);
  background: rgba(255, 255, 255, .04);
  border-radius: 0 10px 10px 0;
  padding: .7rem .85rem; margin-bottom: .8rem;
}
.ac-sample.bad { border-left-color: rgba(255, 90, 90, .55); }
.ac-sample-tag {
  display: block; font-size: .66rem; letter-spacing: .09em;
  opacity: .6; margin-bottom: .3rem;
}
.ac-sample p { margin: 0; font-style: italic; line-height: 1.55; }

/* Dạng calc — số liệu cho sẵn + ô nhập */
.ac-given {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem;
}
.ac-given span {
  font-size: .78rem; padding: .28rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}
.ac-given b { opacity: .65; font-weight: 500; margin-right: .3rem; }
.ac-calc-row { display: flex; align-items: center; gap: .55rem; }
.ac-calc-row input { flex: 1; font-size: 1.15rem; }
.ac-calc-unit { opacity: .7; font-size: .9rem; }

/* Dạng rewrite */
.ac-template {
  font-family: ui-monospace, monospace; font-size: .87rem;
  padding: .6rem .8rem; border-radius: 10px;
  background: rgba(255, 255, 255, .05); margin-bottom: .6rem;
}
.ac-rubric { margin: 0 0 .7rem; padding-left: 1.1rem; }
.ac-rubric li { font-size: .82rem; opacity: .78; margin: .18rem 0; }

/* Tiêu chí chấm của bài áp dụng — hiện TRƯỚC khi viết, không phải sau khi bị chê. */
.ac-apply-need {
  margin-bottom: .7rem;
  padding: .6rem .75rem .1rem;
  border-radius: 10px;
  border: 1px dashed rgba(255, 111, 44, .32);
  background: rgba(255, 111, 44, .06);
}
.ac-apply-need > span {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: #ff9360;
  margin-bottom: .4rem;
}
.ac-apply-need .ac-rubric { margin-bottom: .5rem; }
.ac-apply-need .ac-rubric li { opacity: .9; }
.ac-exemplar {
  margin-top: .7rem; padding: .65rem .8rem; border-radius: 10px;
  background: rgba(72, 213, 151, .08); border: 1px solid rgba(72, 213, 151, .22);
}
.ac-exemplar b { font-size: .8rem; }
.ac-exemplar p { margin: .3rem 0 0; font-size: .88rem; }

/* recall-own — hiện lại chính câu người học đã viết */
.ac-own {
  padding: .65rem .8rem; border-radius: 10px; margin-bottom: .7rem;
  background: rgba(255, 255, 255, .04); font-size: .85rem;
}
.ac-own-row { display: grid; grid-template-columns: 40% 1fr; gap: .5rem; margin-top: .35rem; }
.ac-own-row i { opacity: .6; font-style: normal; }

/* Ví dụ mẫu trước node DỰNG */
.ac-example {
  border-radius: 12px; padding: .8rem .9rem; margin-bottom: .8rem;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.ac-example > b { font-size: .85rem; display: block; margin-bottom: .5rem; }
.ac-example table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ac-example th {
  text-align: left; font-weight: 500; opacity: .62;
  padding: .3rem .5rem .3rem 0; width: 38%; vertical-align: top;
}
.ac-example td { padding: .3rem 0; vertical-align: top; }

.ac-intro-hint { font-size: .87rem; opacity: .75; margin: .2rem 0 .9rem; line-height: 1.6; }
.ac-anti { font-size: .84rem; margin: .45rem 0 0; color: #ffb454; opacity: .9; }
.ac-requeue { font-size: .82rem; opacity: .8; margin: .4rem 0 0; }
.ac-tk { font-size: 2rem; font-weight: 800; color: #ff8b4d; }
.ac-tk-note { font-size: .84rem; opacity: .8; margin: .1rem 0 .5rem; }
.ac-balance {
  margin-top: .9rem; padding: .7rem .85rem; border-radius: 11px; font-size: .86rem;
  background: rgba(255, 180, 84, .08); border: 1px solid rgba(255, 180, 84, .26);
}

@media (max-width: 720px) {
  .ac-score-pair { grid-template-columns: 1fr; }
  .ac-own-row { grid-template-columns: 1fr; gap: .1rem; }
  .ac-example th { width: auto; display: block; padding-bottom: 0; }
  .ac-example td { display: block; padding-top: .1rem; }
}

/* ===== Streak card ===== */
.streak-card {
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border: 0;
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 14px 30px rgba(108,92,231,.32);
}
.streak-flame { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 1.35rem; margin-bottom: .6rem; }
.streak-card .streak-num { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.streak-card .streak-label { font-size: .85rem; opacity: .88; margin-top: .1rem; }
.streak-card .streak-msg { font-size: .82rem; opacity: .92; margin-top: .7rem; max-width: 24ch; }

/* ===== Roadmap ===== */
.progress { height: 12px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: .5rem 0 .2rem; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 12px rgba(108,92,231,.4); transition: width .5s ease; }
.progress-meta { display:flex; justify-content:space-between; align-items:baseline; }
.progress-meta b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.progress-meta .lab { color: var(--muted); font-size: .85rem; }

.next-action {
  border: 1px solid rgba(108,92,231,.3); border-radius: var(--radius);
  background: radial-gradient(600px 200px at 0% 0%, rgba(108,92,231,.10), transparent 70%), #f8f7fe;
  padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; box-shadow: var(--shadow);
}
.next-action .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 700; }
.next-action .t { font-size: 1.25rem; font-weight: 700; margin-top: .35rem; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }

.phase { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.15rem 1.4rem; margin-bottom: .9rem; background: #fff; }
.phase.complete { border-color: rgba(22,163,74,.3); }
.phase h3 { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; letter-spacing: -.01em; color: var(--ink); }
.phase h3 .num { width: 26px; height: 26px; border-radius: 8px; background: var(--panel-hi); border: 1px solid var(--rule-hi); display: grid; place-items: center; font-size: .82rem; font-weight: 700; color: var(--accent); flex: none; }
.phase.complete h3 .num { background: linear-gradient(135deg, var(--good), #22c55e); color: #fff; border-color: transparent; }
.phase .goal { color: var(--muted); font-size: .88rem; margin: .35rem 0 .7rem 2.1rem; }
.steps { display: grid; gap: .1rem; }
.step { display: flex; gap: .65rem; align-items: flex-start; padding: .4rem .5rem; border-radius: 9px; }
.step:hover { background: var(--panel-hi); }
.step input { margin-top: .08rem; }
.step span { font-size: .95rem; }
.step.done span { color: var(--faint); text-decoration: line-through; }

/* ===== Value Equation ===== */
.ve-row { display: grid; grid-template-columns: 1fr 96px; gap: 1rem; align-items: start; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.ve-row:last-child { border-bottom: 0; }
.ve-row .arrow { font-size: 1.05rem; }
.ve-row b { font-size: .98rem; color: var(--ink); }

/* ===== Method cards (Core Four / experiments) ===== */
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .3rem; }
.method-card { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .9rem 1rem; cursor: pointer; transition: all .15s; background: #fff; }
.method-card:hover { border-color: var(--rule-hi); transform: translateY(-1px); }
.method-card.sel { border-color: var(--accent); background: radial-gradient(400px 120px at 0% 0%, rgba(108,92,231,.10), transparent), #f8f7fe; box-shadow: 0 0 0 1px rgba(108,92,231,.25); }
.method-card h4 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.method-card p { color: var(--muted); font-size: .84rem; margin-top: .3rem; line-height: 1.5; }
@media (max-width: 940px) { .methods { grid-template-columns: 1fr; } }

/* ===== Mentor chat ===== */
.mentor-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mentor-bar > div:first-child { flex: 1; min-width: 200px; }
.mentor-bar select { max-width: 340px; }
.mentor-actions { display: flex; gap: .5rem; }
.m-thread { min-height: 280px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; padding: .3rem .1rem 1rem; }
/* Thanh chọn phiên chat (web / Telegram riêng / từng nhóm) */
.sess-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .7rem 1rem; }
.sess-list { display: flex; gap: .4rem; flex-wrap: wrap; }
.sess-chip { font: inherit; font-size: .84rem; cursor: pointer; border: 1px solid var(--rule-hi); background: #fff; color: var(--muted); border-radius: 999px; padding: .25rem .7rem; display: flex; align-items: center; gap: .35rem; transition: all .12s; }
.sess-chip:hover { border-color: var(--accent); color: var(--ink); }
.sess-chip.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; font-weight: 700; }
.sess-n { font-size: .74rem; opacity: .75; }

/* Nhãn chế độ mentor (Coach / Advisor / Challenger / Accountability) */
.mode-chip { font-size: .74rem; color: var(--accent); background: rgba(108,92,231,.09); border-radius: 6px; padding: .2rem .5rem; margin-bottom: .45rem; display: inline-block; line-height: 1.4; }
.m-user .mode-chip { background: rgba(255,255,255,.2); color: #fff; }

/* Cam kết đang mở */
.commit { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); margin-bottom: .45rem; background: #fcfbff; flex-wrap: wrap; }
.commit.overdue { border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.05); }

/* Wikilink Obsidian trong câu trả lời → chip gọn, đỡ rối mắt */
.note-chip { display: inline-block; background: rgba(108,92,231,.1); color: var(--accent); border-radius: 6px; padding: 0 .38rem; font-size: .88em; white-space: nowrap; }
.m-user .note-chip { background: rgba(255,255,255,.22); color: #fff; }
.m-empty { color: var(--muted); font-size: .92rem; line-height: 1.6; background: var(--panel-hi); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.m-msg { display: flex; flex-wrap: wrap; } /* wrap để khối suy luận rơi xuống DƯỚI bong bóng */
.m-msg.m-user { justify-content: flex-end; }

/* Suy luận của mentor — giấu sau nút ▸, người dùng chỉ đọc tin nhắn chính.
   Chữ nhỏ, màu trầm: đây là hậu trường, không được tranh chú ý với lời thoại. */
/* Bảng mã kích hoạt trong khu Quản trị. */
.lic-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: .5rem; }
.lic-table th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: .4rem .5rem; border-bottom: 1px solid var(--rule); }
.lic-table td { padding: .5rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.lic-table code { font-family: var(--mono); font-size: .8rem; color: #ff9c5e; }
.lic-table tr.is-revoked { opacity: .45; }
.lic-table tr.is-revoked code { text-decoration: line-through; }

/* Băng rôn "có bản mới" — chỉ hiện ở bản cài trên máy người dùng. */
.update-bar {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 9998; max-width: min(52rem, calc(100vw - 2rem));
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .65rem 1rem; border-radius: .7rem;
  border: 1px solid rgba(255, 111, 44, .45);
  background: linear-gradient(145deg, #241408, #16100d);
  color: var(--ink); font-size: .86rem; line-height: 1.45;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
.update-bar b { color: #ff9c5e; }
.update-acts { display: flex; gap: .4rem; margin-left: auto; }
.update-bar a.btn { text-decoration: none; }

/* Nháy nhẹ khi app vừa tự lưu một link người dùng dán trong chat — báo là có
   chuyện vừa xảy ra, mà không chen một dòng vào cuộc trò chuyện. */
.chat-source-state.just-added { color: var(--good); font-weight: 700; transition: color .2s; }

/* Thẻ audit bản tối giản. Trước đây mở đầu bằng tiêu đề lớn + huy hiệu % + 3 ô
   thống kê, hết một màn hình trước khi tới nội dung. Gộp thành một dải một dòng. */
.audit-strip {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  flex-wrap: wrap; padding-bottom: .5rem; margin-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
}
.audit-strip span { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: #ff7d3c; }
.audit-strip em { font-style: normal; font-size: .76rem; color: var(--faint); }
.audit-dont {
  margin: .6rem 0 0; padding: .5rem .7rem; border-radius: 8px;
  background: rgba(220, 38, 38, .1); color: var(--ink); font-size: .82rem; line-height: 1.5;
}

/* Thẻ thử nghiệm bản tối giản: một câu dẫn, một việc phải làm, một nút.
   Form ghi kết quả chỉ bung khi bấm — không đổ 3 ô nhập ra ngay từ đầu. */
.exp-lead { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.55; color: var(--muted); }
.exp-lead b { color: var(--ink); }
.exp-do { margin: 0 0 .35rem; font-size: .92rem; line-height: 1.5; color: var(--ink); font-weight: 600; }
.exp-win { margin: 0 0 .7rem; font-size: .82rem; color: var(--faint); }
.exp-actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.exp-form { margin-top: .8rem; display: flex; flex-direction: column; gap: .35rem; }
.exp-form label { font-size: .8rem; font-weight: 700; color: var(--ink); }
.exp-form textarea {
  width: 100%; padding: .5rem .65rem; border-radius: 8px; font: inherit; font-size: .86rem;
  border: 1px solid var(--rule-hi); background: var(--panel-hi); color: var(--ink); resize: vertical;
}
.proposal-acts { display: flex; gap: .35rem; flex-shrink: 0; }

/* Nhãn gọn dùng chung cho các khối gập trên màn Mentor. Trước đây mỗi khối có
   tiêu đề hai dòng (nhãn hoa + tên đầy đủ), ba khối xếp chồng là đã hết một màn
   hình trước khi thấy tin nhắn nào. */
.dock-label { font-size: .84rem; font-weight: 700; color: var(--ink); }
.dock-hint { margin: 0 0 .5rem; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.dock-hint .privacy-seal { margin-left: .35rem; }

/* Nút quét doanh nghiệp: từ nút to hết chiều ngang xuống một biểu tượng nhỏ nằm
   cạnh dòng trạng thái — nó là việc thỉnh thoảng mới bấm, không đáng chiếm chỗ. */
.m-tool-icon {
  cursor: pointer; margin-left: auto; width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--rule-hi);
  background: var(--panel-hi); color: var(--ink); font-size: .95rem; line-height: 1;
  transition: background .15s, transform .15s;
}
.m-tool-icon:hover { background: rgba(255, 111, 44, .18); transform: translateY(-1px); }
.m-tool-icon:disabled { opacity: .5; cursor: default; transform: none; }

/* Thẻ thử nghiệm đang chạy: đếm ngược + đường chốt kết quả. Hết hạn thì đổi màu
   sang đỏ — phép thử quá hạn mà không chốt là mất trắng công sức 7 ngày.
   Gập lại một dòng, chỉ tự bung khi đã hết hạn. */
.exp-live {
  margin: 0 0 .7rem; padding: .55rem .8rem; border-radius: 12px;
  border: 1px solid rgba(255, 111, 44, .34); background: rgba(255, 111, 44, .07);
}
.exp-live.is-over { border-color: var(--bad); background: rgba(220, 38, 38, .09); }
.exp-live-head {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
}
.exp-live-head::-webkit-details-marker { display: none; }
.exp-live-head::before { content: '▸'; margin-right: .3rem; font-size: .8em; color: var(--muted); transition: transform .15s; display: inline-block; }
.exp-live[open] .exp-live-head::before { transform: rotate(90deg); }
.exp-live-head em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--good); }
.exp-live-head em.bad { color: var(--bad); }
.exp-live-body { margin-top: .6rem; }
.exp-live h3 { margin: .4rem 0 .5rem; font-size: .98rem; line-height: 1.45; }
.exp-live-line { margin: .22rem 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.exp-live-line b { color: var(--ink); }
.exp-live-warn { margin: .6rem 0 0; padding: .5rem .7rem; border-radius: 8px; background: rgba(220, 38, 38, .14); color: var(--ink); font-size: .82rem; font-weight: 600; }
.exp-close { margin-top: .7rem; }
.exp-close summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--ink); }
.exp-close-body { margin-top: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.exp-close-body label { font-size: .76rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.exp-close-body textarea {
  width: 100%; padding: .5rem .65rem; border-radius: 8px; font: inherit; font-size: .86rem;
  border: 1px solid var(--rule-hi); background: var(--panel-hi); color: var(--ink); resize: vertical;
}
.exp-req { color: var(--bad); font-weight: 700; }
.exp-verdicts { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .3rem; }
.exp-msg { font-size: .82rem; line-height: 1.5; min-height: 1px; }
.exp-msg.bad { color: var(--bad); font-weight: 600; }

/* Dải ảnh vừa dán, nằm NGAY TRÊN ô chat — dán xong phải thấy ngay tại chỗ vừa
   dán, không phải đi tìm ở khu nguồn dữ liệu tận trên cùng. */
.m-attach-strip { display: none; }
.m-attach-strip.show {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 .5rem; padding: .5rem .6rem;
  border: 1px solid var(--rule-hi); border-radius: 10px; background: var(--panel-hi);
}
.m-attach-item { position: relative; width: 52px; height: 52px; }
.m-attach-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.m-attach-x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--bad); color: #fff;
  font-size: .8rem; line-height: 1; font-family: inherit; padding: 0;
}
.m-attach-x:disabled { opacity: .5; cursor: default; }
.m-attach-note { font-size: .76rem; color: var(--muted); }

/* Nút nhảy thẳng tới ô Hồ sơ kinh doanh mà mentor vừa nhắc tên. */
.m-jump { flex-basis: 100%; max-width: 82%; margin: .4rem 0 .1rem .15rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.m-jump-btn {
  cursor: pointer;
  padding: .32rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 111, 44, .42);
  background: rgba(255, 111, 44, .1);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  transition: background .15s, transform .15s;
}
.m-jump-btn:hover { background: rgba(255, 111, 44, .2); transform: translateY(-1px); }

.m-reason { flex-basis: 100%; max-width: 82%; margin: .3rem 0 .1rem .15rem; }
.m-reason summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .74rem;
  color: var(--muted);
  opacity: .85;
}
.m-reason summary::-webkit-details-marker { display: none; }
.m-reason summary::before { content: '▸'; font-size: .8em; transition: transform .15s; }
.m-reason[open] summary::before { transform: rotate(90deg); }
.m-reason > div {
  margin-top: .4rem;
  padding: .55rem .75rem;
  border-left: 2px solid rgba(255, 111, 44, .38);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
}
.m-bubble { max-width: 82%; padding: .7rem .95rem; border-radius: 14px; font-size: .94rem; line-height: 1.55; }
.m-user .m-bubble { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-bottom-right-radius: 4px; }
.m-assistant .m-bubble { background: var(--panel-hi); color: var(--ink); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.m-typing { display: inline-flex; gap: 4px; align-items: center; min-width: 40px; min-height: 20px; }
.m-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); opacity: .4; animation: typing 1.2s infinite; }
.m-typing span:nth-child(2) { animation-delay: .2s; }
.m-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.m-input { display: flex; gap: .6rem; align-items: flex-end; border-top: 1px solid var(--rule); padding-top: .9rem; }
.m-input textarea { min-height: 46px; max-height: 160px; }
.m-input .btn { flex: none; height: 46px; }
#m_mic.m-mic-on { background: var(--bad, #dc2626); color: #fff; border-color: transparent; animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ===== Call Mode (gọi điện rảnh tay) ===== */
body.call-open { overflow: hidden; }
.call-overlay {
  --call-ink: #070301;
  --call-panel: rgba(21, 10, 6, .82);
  --call-orange: #ff6428;
  --call-gold: #ffb06b;
  --call-violet: #8b5cf6;
  --call-overlay-pad: clamp(1rem, 3vw, 2.4rem);
  position: fixed;
  inset: 0;
  z-index: 999;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--call-overlay-pad);
  color: #fff8f1;
  background:
    radial-gradient(circle at 50% 108%, rgba(255, 95, 31, .18), transparent 36%),
    radial-gradient(circle at 18% 8%, rgba(139, 92, 246, .11), transparent 30%),
    linear-gradient(180deg, rgba(5, 2, 1, .975), rgba(11, 5, 2, .99));
  backdrop-filter: blur(18px) saturate(.86);
  animation: call-overlay-in .32s ease both;
}
.call-overlay::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: max(-36vw, -320px);
  width: min(1160px, 112vw);
  aspect-ratio: 1.75 / 1;
  border: clamp(2px, .32vw, 5px) solid rgba(255, 126, 55, .78);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: .92;
  filter: drop-shadow(0 0 12px rgba(255, 98, 29, .86)) drop-shadow(0 0 42px rgba(255, 88, 22, .52));
}
.call-overlay::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: auto 0 0;
  height: 42%;
  opacity: .26;
  background-image: radial-gradient(rgba(255, 146, 82, .38) .8px, transparent .8px);
  background-size: 13px 13px;
  mask-image: linear-gradient(transparent, #000);
}
.call-atmosphere {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -24%;
  width: min(870px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 94, 26, .2), rgba(123, 44, 15, .06) 48%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.call-shell {
  width: min(490px, 94vw);
  height: min(680px, calc(100dvh - var(--call-overlay-pad) - var(--call-overlay-pad)));
  max-height: calc(100dvh - var(--call-overlay-pad) - var(--call-overlay-pad));
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .8rem;
  animation: call-panel-rise .42s cubic-bezier(.2, .8, .2, 1) both;
}
.call-topline,
.call-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-inline: .25rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .09em;
  color: rgba(255, 232, 216, .58);
  text-transform: uppercase;
}
.call-live-chip,
.call-clock {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .36rem .72rem;
  border: 1px solid rgba(255, 162, 102, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.call-live-chip span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--call-orange);
  box-shadow: 0 0 0 4px rgba(255, 100, 40, .10), 0 0 15px rgba(255, 100, 40, .72);
  animation: call-live-blink 1.4s ease-in-out infinite;
}
.call-clock {
  min-width: 68px;
  justify-content: center;
  color: #ffe0ca;
  font-variant-numeric: tabular-nums;
}
.call-panel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) clamp(72px, 15vh, 126px) auto auto auto;
  align-items: center;
  row-gap: .22rem;
  padding: clamp(2.2rem, 6vw, 3rem) clamp(1.35rem, 5vw, 2rem) 1.7rem;
  border: 1px solid rgba(255, 152, 91, .26);
  border-radius: 36px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 104%, rgba(255, 91, 22, .24), transparent 40%),
    radial-gradient(circle at 10% 0%, rgba(139, 92, 246, .15), transparent 32%),
    linear-gradient(160deg, rgba(39, 19, 12, .80), rgba(8, 4, 3, .94) 68%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(255, 115, 47, .16),
    0 30px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(255, 104, 35, .04);
}
.call-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255,255,255,.07), transparent 18% 76%, rgba(255, 110, 41, .05)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.015) 40px);
}
.call-panel::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -36px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 92, 23, .32);
  filter: blur(32px);
  pointer-events: none;
}
.call-close {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 187, 143, .16);
  border-radius: 50%;
  color: rgba(255, 239, 228, .72);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, background .16s ease;
}
.call-close:hover {
  color: #fff;
  background: rgba(255, 103, 37, .18);
  transform: rotate(6deg);
}
.call-close svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}
.call-eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: .65rem;
  color: var(--call-gold);
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.call-caption-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.call-caption-scroll {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 129, 60, .56) rgba(255,255,255,.035);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9px, #000 calc(100% - 12px), transparent 100%);
}
.call-caption-scroll::-webkit-scrollbar { width: 5px; }
.call-caption-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.025); border-radius: 999px; }
.call-caption-scroll::-webkit-scrollbar-thumb { background: rgba(255, 129, 60, .56); border-radius: 999px; }
.call-caption-scroll:focus-visible {
  outline: 1px solid rgba(255, 174, 114, .56);
  outline-offset: 5px;
  border-radius: 12px;
}
.call-caption {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: .55rem .55rem 1rem;
  color: #fff8f2;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.call-scroll-note {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  color: rgba(255, 190, 148, .68);
  font-family: var(--mono);
  font-size: .59rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: height .16s ease, opacity .16s ease, transform .16s ease;
}
.call-scroll-note span {
  color: var(--call-orange);
  font-size: .78rem;
  line-height: 1;
}
.call-caption-wrap.can-scroll:not(.at-end) .call-scroll-note {
  height: 22px;
  opacity: 1;
  transform: none;
}
.call-wave {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 58px;
  max-height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1vw, 7px);
  margin: .2rem 0 .4rem;
}
.call-wave::before,
.call-wave::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 177, .66), transparent);
  box-shadow: 0 0 16px rgba(255, 130, 60, .42);
}
.call-wave::after {
  transform: translateY(13px);
  opacity: .24;
  filter: blur(1px);
}
.call-wave i {
  width: clamp(2px, .7vw, 4px);
  height: var(--wave-h);
  max-height: 96px;
  border-radius: 999px;
  transform: scaleY(.14);
  transform-origin: center;
  opacity: .45;
  background: linear-gradient(180deg, var(--call-violet), #fff2e8 48%, var(--call-orange));
  box-shadow: 0 0 10px rgba(255, 112, 44, .28);
}
.call-overlay[data-state="listening"] .call-wave i,
.call-overlay[data-state="speaking"] .call-wave i {
  animation: call-wave-talk .92s ease-in-out var(--wave-delay) infinite alternate;
  opacity: .92;
}
.call-overlay[data-state="speaking"] .call-wave i {
  animation-duration: 1.2s;
  background: linear-gradient(180deg, #9f7aea, #fff2e8 46%, #ff8a42);
}
.call-overlay[data-state="thinking"] .call-wave i {
  animation: call-wave-think 1.45s ease-in-out var(--wave-delay) infinite;
  opacity: .72;
}
.call-overlay[data-state="paused"] .call-wave i,
.call-overlay[data-state="error"] .call-wave i {
  transform: scaleY(.08);
  opacity: .22;
}
.call-mic-wrap {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.call-mic-halo {
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(255, 124, 54, .28);
  border-radius: 50%;
  opacity: 0;
}
.call-mic {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #170a05;
  background: linear-gradient(145deg, #fffdfb, #ffe9d8);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.38), inset 0 -3px 8px rgba(255, 118, 43, .12);
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.call-mic:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); filter: brightness(1.04); }
.call-mic:disabled { cursor: default; }
.call-mic svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.call-mic svg rect { fill: none; }
.call-overlay[data-state="listening"] .call-mic {
  box-shadow:
    0 10px 28px rgba(0,0,0,.4),
    0 0 0 7px rgba(255, 103, 35, .09),
    0 0 34px rgba(255, 91, 25, .38);
}
.call-overlay[data-state="listening"] .call-mic-halo {
  opacity: 1;
  animation: call-mic-ring 1.6s ease-out infinite;
}
.call-overlay[data-state="paused"] .call-mic {
  color: #fff0e5;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.call-overlay[data-state="thinking"] .call-mic,
.call-overlay[data-state="speaking"] .call-mic {
  color: #fff1e7;
  background: linear-gradient(145deg, rgba(139,92,246,.72), rgba(255,100,40,.74));
}
.call-overlay[data-state="error"] .call-mic {
  color: #ffc9b6;
  background: rgba(255, 85, 47, .13);
}
.call-status-text {
  position: relative;
  z-index: 1;
  margin-top: .7rem;
  color: #fff1e6;
  font-size: .96rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.call-status-hint {
  position: relative;
  z-index: 1;
  min-height: 1.2em;
  margin-top: .12rem;
  color: rgba(255, 224, 204, .52);
  font-size: .74rem;
  line-height: 1.45;
}
.call-footer > span { opacity: .6; }
.call-end {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 38px;
  padding: .52rem .86rem;
  border: 1px solid rgba(255, 138, 78, .19);
  border-radius: 999px;
  color: #ffd7bf;
  font: 700 .72rem/1 var(--font);
  letter-spacing: .01em;
  background: rgba(255, 88, 30, .08);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.call-end:hover {
  border-color: rgba(255, 138, 78, .42);
  background: rgba(255, 88, 30, .16);
  transform: translateY(-1px);
}
.call-end i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5c35;
  box-shadow: 0 0 12px rgba(255, 92, 53, .68);
}
.call-close:focus-visible,
.call-mic:focus-visible,
.call-end:focus-visible {
  outline: 2px solid #ffae72;
  outline-offset: 3px;
}
@keyframes call-overlay-in {
  from { opacity: 0; }
}
@keyframes call-panel-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
}
@keyframes call-live-blink {
  50% { opacity: .42; transform: scale(.82); }
}
@keyframes call-wave-talk {
  0% { transform: scaleY(.16); }
  100% { transform: scaleY(1); }
}
@keyframes call-wave-think {
  0%, 100% { transform: scaleY(.16); opacity: .35; }
  50% { transform: scaleY(.62); opacity: .92; }
}
@keyframes call-mic-ring {
  0% { transform: scale(.82); opacity: .8; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (max-width: 600px) {
  .call-overlay { padding: .75rem; align-items: center; }
  .call-shell {
    width: min(430px, 96vw);
    height: calc(100dvh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    gap: .55rem;
  }
  .call-panel {
    padding: 2.35rem 1.15rem 1.25rem;
    border-radius: 28px;
  }
  .call-caption { font-size: clamp(1.24rem, 6.2vw, 1.7rem); }
  .call-wave { max-height: 102px; margin: .1rem 0 .25rem; }
  .call-footer > span { display: none; }
  .call-footer { justify-content: center; }
}
@media (max-height: 690px) {
  .call-panel {
    grid-template-rows: auto minmax(0, 1fr) minmax(56px, 82px) auto auto auto;
    padding-top: 2.15rem;
  }
  .call-caption { padding-top: .35rem; }
  .call-wave { max-height: 82px; margin: 0 0 .2rem; }
  .call-mic-wrap { width: 78px; height: 78px; }
  .call-mic { width: 66px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .call-overlay,
  .call-shell,
  .call-wave i,
  .call-live-chip span,
  .call-mic-halo { animation: none !important; }
}

/* ===== Mentor settings ===== */
.ms-prov { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .8rem .9rem; margin-bottom: .6rem; background: #fcfbff; }
.ms-prov-h { display: flex; align-items: center; gap: .5rem; }

/* Ô khoá + nút thử ngay cạnh nhau: thử trước rồi mới lưu. */
.ms-prov-key { display: flex; gap: .45rem; align-items: center; }
.ms-prov-key > input { flex: 1; min-width: 0; }
.ms-prov-test { font-size: .78rem; margin-top: .3rem; min-height: 1em; }

/* Provider bị chặn (OAuth trên máy chủ nhiều người) — nêu lý do, không giấu nút
   rồi để người dùng tự đoán vì sao bấm không được. */
.ms-prov-blocked {
  font-size: .8rem;
  line-height: 1.45;
  padding: .5rem .6rem;
  border-radius: 9px;
  border: 1px dashed rgba(255, 140, 90, .38);
  background: rgba(255, 140, 90, .07);
}

/* ===== Màn kết nối khoá AI (chặn trước khi vào chat) ===== */
.connect-key { max-width: 620px; }
.connect-key h2 { margin: .25rem 0 .4rem; }
.connect-key input[type="password"] { width: 100%; }
.connect-key-steps { display: grid; gap: .5rem; margin: .9rem 0; }
.connect-key-steps > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  font-size: .88rem;
}
.connect-key-steps b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .74rem;
  color: #fff;
  background: linear-gradient(135deg, #ff4f16, #c92f08);
}
.connect-key-steps code {
  padding: .05rem .3rem;
  border-radius: 5px;
  font-size: .82em;
  background: rgba(255, 111, 44, .12);
}

/* ===== Academy (Duolingo-style) ===== */
.ac-path { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.ac-node {
  display: flex; align-items: center; gap: .5rem; font: inherit; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; padding: .5rem .9rem; background: #fff;
  transition: all .15s; font-size: .88rem; color: var(--ink);
}
.ac-node.open { border-color: var(--accent); box-shadow: 0 4px 14px rgba(108,92,231,.18); }
.ac-node.open:hover { transform: translateY(-2px); background: #f8f7fe; }
.ac-node.open .ac-node-ico { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.ac-node.done { border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.05); }
.ac-node.done .ac-node-ico { background: var(--good); color: #fff; }
.ac-node.locked { opacity: .45; cursor: default; }
.ac-node-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-hi); display: grid; place-items: center; font-size: .8rem; flex: none; }
.ac-node-score { font-family: var(--mono); font-size: .72rem; color: var(--good); font-weight: 700; }

.ac-player { max-width: 640px; margin: 0 auto; }
.ac-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.ac-q { font-size: 1.15rem; font-weight: 700; line-height: 1.45; margin-bottom: 1rem; }

/* Câu hỏi dài được tách vai (xem questionHtml trong app.js). Chữ giữ nguyên,
   chỉ đổi cách bày: dẫn nhập nhẹ → dữ liệu thành ô → câu hỏi đậm → cách tính. */
.ac-q-rich { display: grid; gap: .6rem; }
.ac-q-setup { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.ac-q-note {
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  padding-left: .7rem;
  border-left: 2px solid rgba(255, 111, 44, .35);
}
.ac-q-data {
  padding: .6rem .7rem;
  border-radius: 10px;
  background: rgba(255, 111, 44, .07);
  border: 1px solid rgba(255, 111, 44, .18);
}
.ac-q-data > b { display: block; font-size: .82rem; margin-bottom: .4rem; }
.ac-q-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ac-q-chips > span {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .22rem .5rem;
  border-radius: 7px;
  background: var(--card);
  border: 1px solid var(--rule);
}
.ac-q-chips i { font-style: normal; font-weight: 500; font-size: .8rem; color: var(--muted); }
.ac-q-chips em {
  font-style: normal;
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 700;
}
.ac-q-ask { font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.ac-q-how {
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.5;
  padding: .45rem .6rem;
  border-radius: 8px;
  border: 1px dashed var(--rule);
  color: var(--muted);
}
@media (max-width: 720px) {
  .ac-q-setup { font-size: .95rem; }
  .ac-q-ask { font-size: 1.02rem; }
}
.ac-body { display: grid; gap: .55rem; }
.ac-opt {
  text-align: left; font: inherit; font-size: .95rem; cursor: pointer; color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm); padding: .75rem .95rem; background: #fff;
  transition: all .12s;
}
.ac-opt:hover { border-color: var(--accent); background: #f8f7fe; }
.ac-opt.right { border-color: var(--good); background: rgba(22,163,74,.08); font-weight: 700; }
.ac-opt.wrong { border-color: var(--bad); background: rgba(220,38,38,.07); }
.ac-opt.dim { opacity: .5; }
.ac-fb { border-radius: var(--radius-sm); padding: .9rem 1rem; margin-top: 1rem; animation: fade .25s ease; }
.ac-fb.ok { background: rgba(22,163,74,.09); border: 1px solid rgba(22,163,74,.3); }
.ac-fb.no { background: rgba(220,38,38,.07); border: 1px solid rgba(220,38,38,.25); }
/* Bài tự luận đã được ghi nhận nhưng chưa đạt: không phải xanh (dễ tưởng đã
   xong), cũng không phải đỏ (không bị chặn) — màu cam "còn việc phải làm". */
.ac-fb.warn { background: rgba(255,140,60,.09); border: 1px solid rgba(255,140,60,.32); }
.ac-fb p { font-size: .9rem; margin: .35rem 0 .7rem; line-height: 1.55; }
.ac-learn-card { border: 1px solid rgba(108,92,231,.25); background: #f8f7fe; border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-bottom: .7rem; }
.ac-learn-t { font-weight: 700; margin-bottom: .35rem; }
.ac-learn-core { font-size: .98rem; line-height: 1.55; font-weight: 600; color: var(--accent); }
.ac-xp { font-size: 1.6rem; font-weight: 800; color: var(--warn); margin: .6rem 0; }

/* ===== Academy: match / order / sort ===== */
.ac-top { flex-wrap: wrap; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.shake { animation: shake .35s; }

.ac-match { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ac-col { display: grid; gap: .5rem; }
.ac-mitem, .ac-oitem, .ac-sitem {
  text-align: left; font: inherit; font-size: .92rem; cursor: pointer; color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm); padding: .65rem .8rem; background: #fff; transition: all .12s;
}
.ac-mitem:hover, .ac-oitem:hover, .ac-sitem:hover { border-color: var(--accent); }
.ac-mitem.sel { border-color: var(--accent); background: #f0edfd; box-shadow: 0 0 0 2px rgba(108,92,231,.2); }
.ac-mitem.done { border-color: var(--good); background: rgba(22,163,74,.08); opacity: .7; cursor: default; }

.ac-order { display: grid; gap: .5rem; }
.ac-oitem { position: relative; padding-left: 2.4rem; }
.ac-oitem.picked { border-color: var(--good); background: rgba(22,163,74,.08); }
.ord-badge { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }

.ac-sort-groups { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: .8rem; }
.ac-sort-g { border: 1.5px dashed var(--rule-hi); border-radius: var(--radius-sm); padding: .6rem; min-height: 90px; }
.ac-sort-g > b { font-size: .85rem; display: block; margin-bottom: .4rem; text-align: center; }
.ac-sort-drop { display: grid; gap: .35rem; min-height: 40px; cursor: pointer; }
.ac-sort-drop:hover { background: #f8f7fe; }
.ac-sort-pool { display: flex; flex-wrap: wrap; gap: .45rem; }
.ac-sitem.sel { border-color: var(--accent); background: #f0edfd; }
.ac-sitem.placed { cursor: default; font-size: .86rem; }
.ac-sitem.placed.ok { border-color: var(--good); background: rgba(22,163,74,.1); }
.ac-sitem.placed.bad { border-color: var(--bad); background: rgba(220,38,38,.08); }

.ac-filled { margin: .8rem 0 .2rem; display: grid; gap: .35rem; }
.ac-filled-row { background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.3); border-radius: var(--radius-sm); padding: .5rem .8rem; font-size: .88rem; }
.ac-conflict { background: rgba(249,115,22,.07); border: 1px solid rgba(249,115,22,.3); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .88rem; margin: .5rem 0; text-align: left; }

/* ===== Brain browser ===== */
.br-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .5rem; }
@media (max-width: 940px) { .br-grid { grid-template-columns: 1fr; } }
.br-card { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .85rem 1rem; background: #fcfbff; cursor: pointer; transition: all .15s; }
.br-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.br-card > b { font-size: .95rem; }
.br-card p { font-size: .85rem; color: var(--muted); margin-top: .3rem; line-height: 1.5; }
.br-card .br-apply { color: var(--ink); background: rgba(108,92,231,.07); border-radius: 8px; padding: .5rem .7rem; margin-top: .5rem; }
.br-links { margin-top: .55rem; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.br-link { font: inherit; font-size: .8rem; cursor: pointer; border: 1px solid var(--rule-hi); background: #fff; color: var(--accent); border-radius: 999px; padding: .18rem .6rem; transition: all .12s; }
.br-link:hover { background: var(--accent); color: #fff; border-color: transparent; }
.br-admin-actions { margin-top: .5rem; }
.br-flash { animation: brflash 1.2s ease; }
@keyframes brflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(108,92,231,.4); } }
.btn.active-view { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }

/* Obsidian-inspired Hormozi knowledge graph */
.brain-toolbar {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .8rem;
  padding: .65rem;
  border: 1px solid rgba(255, 134, 63, .18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24, 14, 10, .88), rgba(8, 5, 4, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.brain-search-wrap {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: 0 .72rem;
  border: 1px solid rgba(255, 137, 70, .18);
  border-radius: 12px;
  background: rgba(0,0,0,.24);
}
.brain-search-wrap > span {
  color: #ff9a5c;
  font: 700 1.25rem/1 var(--mono);
}
.brain-search-wrap input {
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #fff7f0;
  background: transparent;
  box-shadow: none;
}
.brain-search-wrap input:focus { border: 0; outline: 0; box-shadow: none; }
.brain-search-wrap b {
  min-width: 28px;
  padding: .15rem .4rem;
  border-radius: 999px;
  color: #ffc49f;
  font: 700 .65rem/1.35 var(--mono);
  text-align: center;
  background: rgba(255, 104, 35, .11);
}
.brain-view-switch {
  flex: none;
  display: flex;
  gap: .25rem;
  padding: .22rem;
  border: 1px solid rgba(255, 137, 70, .14);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.brain-view-switch button {
  min-height: 34px;
  padding: .42rem .75rem;
  border: 0;
  border-radius: 9px;
  color: #9d8b80;
  font: 700 .76rem/1 var(--font);
  background: transparent;
  cursor: pointer;
}
.brain-view-switch button:hover { color: #ffe5d4; }
.brain-view-switch button.active-view {
  color: #fff;
  background: linear-gradient(135deg, #e74310, #ff7c34);
  box-shadow: 0 5px 16px rgba(255, 75, 18, .2);
}
.brain-graph-shell {
  --brain-canvas: #070504;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 128, 55, .2);
  border-radius: 24px;
  background: #070504;
  box-shadow: 0 24px 70px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.03);
}
.brain-graph-meta {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid rgba(255, 139, 76, .11);
  color: #8e7e75;
  font: 700 .66rem/1 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.brain-graph-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.brain-graph-meta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6b2c;
  box-shadow: 0 0 0 4px rgba(255, 107, 44, .08), 0 0 13px rgba(255, 107, 44, .65);
  animation: brain-live 1.7s ease-in-out infinite;
}
.brain-graph-viewport {
  position: relative;
  height: clamp(520px, 72vh, 760px);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 101, 35, .065), transparent 34%),
    radial-gradient(circle at 18% 15%, rgba(139, 92, 246, .07), transparent 25%),
    radial-gradient(rgba(255, 213, 184, .16) .65px, transparent .75px);
  background-size: auto, auto, 16px 16px;
}
.brain-graph-viewport::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle, #000, transparent 78%);
}
.brain-graph-viewport.is-panning { cursor: grabbing; }
.brain-graph-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  user-select: none;
  touch-action: none;
}
#br_graph_world { transform-origin: 0 0; }
.brain-graph-edges { pointer-events: none; }
.br-edge {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  transition: opacity .2s ease, stroke .2s ease, stroke-width .2s ease;
}
.br-edge-root {
  stroke: rgba(255, 132, 68, .19);
  stroke-width: 1;
  stroke-dasharray: 3 8;
}
.br-edge-branch {
  stroke: color-mix(in srgb, var(--edge-color) 46%, transparent);
  stroke-width: .85;
  opacity: .56;
}
.br-edge-link {
  stroke: rgba(183, 151, 255, .35);
  stroke-width: .8;
  stroke-dasharray: 2 5;
}
.br-edge.active {
  stroke: #ffb27c;
  stroke-width: 1.8;
  stroke-dasharray: none;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 112, 43, .72));
}
.br-edge.dim { opacity: .07; }
.br-root-node { pointer-events: none; }
.br-root-orbit {
  fill: none;
  stroke: rgba(255, 128, 61, .24);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  transform-origin: center;
  animation: brain-orbit 18s linear infinite;
}
.br-root-core {
  fill: url(#br-core-gradient);
  filter: url(#br-node-glow);
}
.br-root-node > text:not(.br-root-label) {
  fill: #1d0903;
  font: 900 17px/1 var(--font);
}
.br-root-label {
  fill: rgba(255, 222, 201, .68);
  font: 700 9px/1 var(--mono);
  letter-spacing: .16em;
}
.br-book-node,
.br-neuron {
  cursor: pointer;
  outline: none;
  transition: opacity .2s ease;
}
.br-book-halo {
  fill: color-mix(in srgb, var(--node-color) 13%, transparent);
  stroke: color-mix(in srgb, var(--node-color) 28%, transparent);
  stroke-width: 1;
}
.br-book-core {
  fill: #100a07;
  stroke: var(--node-color);
  stroke-width: 2;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--node-color) 58%, transparent));
  transition: r .18s ease, fill .18s ease;
}
.br-book-icon {
  pointer-events: none;
  font-size: 13px;
}
.br-book-label,
.br-neuron-label {
  pointer-events: none;
  paint-order: stroke;
  stroke: #070504;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.br-book-label {
  fill: #d9c9bf;
  font: 700 10px/1 var(--font);
}
.br-neuron-hit { fill: transparent; }
.br-neuron-orbit {
  fill: color-mix(in srgb, var(--node-color) 8%, transparent);
  stroke: color-mix(in srgb, var(--node-color) 48%, transparent);
  stroke-width: .75;
  transition: r .16s ease, opacity .16s ease;
}
.br-neuron-core {
  fill: var(--node-color);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--node-color) 72%, transparent));
  transition: r .16s ease, fill .16s ease;
}
.br-neuron-label {
  fill: #aa9990;
  font: 500 9.5px/1 var(--font);
  letter-spacing: -.01em;
  transition: fill .16s ease, font-size .16s ease;
}
.br-neuron:hover .br-neuron-orbit,
.br-neuron:focus-visible .br-neuron-orbit { r: 14; stroke-width: 1.4; }
.br-neuron:hover .br-neuron-core,
.br-neuron:focus-visible .br-neuron-core { r: 6.5; }
.br-neuron:hover .br-neuron-label,
.br-neuron:focus-visible .br-neuron-label { fill: #fff5ed; font-size: 10.5px; }
.br-book-node:hover .br-book-core,
.br-book-node:focus-visible .br-book-core { r: 18; fill: color-mix(in srgb, var(--node-color) 18%, #100a07); }
.br-neuron.selected .br-neuron-orbit {
  r: 17;
  fill: color-mix(in srgb, var(--node-color) 18%, transparent);
  stroke: #fff1e8;
  stroke-width: 1.6;
}
.br-neuron.selected .br-neuron-core { r: 7; fill: #fff3e8; }
.br-neuron.selected .br-neuron-label { fill: #fff; font-size: 11px; font-weight: 800; }
.br-neuron.related .br-neuron-orbit { r: 13; opacity: 1; }
.br-book-node.selected .br-book-core { r: 19; fill: color-mix(in srgb, var(--node-color) 30%, #100a07); }
.br-neuron.dim,
.br-book-node.dim { opacity: .16; }
.brain-graph-controls {
  position: absolute;
  z-index: 5;
  left: 14px;
  bottom: 14px;
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(255, 150, 89, .17);
  border-radius: 12px;
  background: rgba(12, 7, 5, .82);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.brain-graph-controls button {
  width: 36px;
  height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(255, 150, 89, .1);
  color: #cdb9ac;
  font: 600 1rem/1 var(--mono);
  background: transparent;
  cursor: pointer;
}
.brain-graph-controls button:last-child { border-bottom: 0; }
.brain-graph-controls button:hover { color: #fff; background: rgba(255, 105, 40, .12); }
.brain-graph-legend {
  position: absolute;
  z-index: 4;
  left: 62px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .46rem .65rem;
  border: 1px solid rgba(255, 150, 89, .12);
  border-radius: 10px;
  color: #8f8077;
  font: 600 .61rem/1 var(--mono);
  background: rgba(12, 7, 5, .68);
  backdrop-filter: blur(9px);
}
.brain-graph-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.brain-graph-legend i { display: inline-block; border-radius: 50%; }
.legend-neuron { width: 7px; height: 7px; background: #ff6b2c; box-shadow: 0 0 7px rgba(255,107,44,.8); }
.legend-book { width: 11px; height: 11px; border: 1px solid #a78bfa; background: rgba(167,139,250,.13); }
.brain-graph-hint {
  padding: .58rem .9rem;
  border-top: 1px solid rgba(255, 139, 76, .11);
  color: #776961;
  font: 600 .62rem/1.4 var(--mono);
  text-align: center;
  letter-spacing: .025em;
}
.brain-inspector {
  position: absolute;
  z-index: 8;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(390px, 42%);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 117, 49, .38) transparent;
  padding: 1.2rem;
  border: 1px solid rgba(255, 147, 84, .24);
  border-radius: 19px;
  color: #f7eee8;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 103, 35, .13), transparent 35%),
    linear-gradient(155deg, rgba(32, 18, 12, .97), rgba(10, 6, 4, .98));
  box-shadow: -24px 0 80px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
  cursor: auto;
  touch-action: pan-y;
}
.brain-inspector.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.brain-inspector-close {
  position: sticky;
  z-index: 2;
  top: 0;
  float: right;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 170, 116, .16);
  border-radius: 50%;
  color: #cdb9ac;
  font: 400 1.25rem/1 var(--font);
  background: rgba(255,255,255,.045);
  cursor: pointer;
}
.brain-inspector-close:hover { color: #fff; background: rgba(255, 99, 36, .14); }
.brain-inspector-book {
  margin-bottom: .7rem;
  padding-right: 42px;
  color: #ff9b5d;
  font: 700 .63rem/1.4 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.brain-inspector h2 {
  margin: 0 0 .8rem;
  padding-right: 16px;
  color: #fff9f4;
  font-size: clamp(1.35rem, 2.7vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.brain-inspector-core {
  margin: 0 0 .9rem;
  color: #f1d9c9;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.52;
}
.brain-inspector-detail {
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 157, 96, .13);
  color: #ad9b90;
  font-size: .85rem;
  line-height: 1.62;
}
.brain-inspector-apply {
  margin-top: 1rem;
  padding: .85rem .9rem;
  border: 1px solid rgba(255, 119, 49, .22);
  border-radius: 13px;
  color: #ffe8d8;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.5;
  background: linear-gradient(135deg, rgba(255, 99, 35, .14), rgba(255,255,255,.018));
}
.brain-inspector-apply span {
  display: block;
  margin-bottom: .32rem;
  color: #ff8c49;
  font: 800 .61rem/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.brain-inspector-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .85rem;
}
.brain-inspector-tags span {
  padding: .23rem .48rem;
  border: 1px solid rgba(177, 145, 255, .18);
  border-radius: 999px;
  color: #bda8ee;
  font: 600 .64rem/1 var(--mono);
  background: rgba(139, 92, 246, .06);
}
.brain-inspector-related {
  display: grid;
  gap: .36rem;
  margin-top: 1rem;
}
.brain-inspector-related > b {
  margin-bottom: .1rem;
  color: #81716a;
  font: 700 .61rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.brain-inspector-related button {
  width: 100%;
  padding: .5rem .62rem;
  border: 1px solid rgba(255, 154, 92, .11);
  border-radius: 9px;
  color: #cab6a9;
  font: 600 .76rem/1.35 var(--font);
  text-align: left;
  background: rgba(255,255,255,.018);
  cursor: pointer;
}
.brain-inspector-related button:hover { color: #fff; border-color: rgba(255, 118, 48, .3); background: rgba(255, 104, 36, .08); }
.brain-inspector-related button strong,
.brain-inspector-related button small { display: block; }
.brain-inspector-related button small {
  margin-top: .22rem;
  color: #8f7f76;
  font-size: .68rem;
  font-weight: 500;
}
.brain-inspector-counts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: -.15rem 0 .95rem;
}
.brain-inspector-counts span {
  padding: .3rem .52rem;
  border: 1px solid rgba(255, 138, 72, .16);
  border-radius: 999px;
  color: #d5b7a4;
  font: 700 .63rem/1 var(--mono);
  background: rgba(255, 112, 45, .06);
}
.brain-inspector-section-title {
  margin: 1rem 0 .55rem;
  color: #8d786b;
  font: 800 .62rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.brain-book-neurons { display: grid; gap: .45rem; margin-top: .9rem; }
.brain-book-neurons > button {
  width: 100%;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem;
  border: 1px solid rgba(255, 143, 78, .12);
  border-radius: 11px;
  color: #e9dbd2;
  text-align: left;
  background: rgba(255,255,255,.018);
  cursor: pointer;
}
.brain-book-neurons > button:hover { border-color: rgba(255, 117, 45, .34); background: rgba(255, 104, 36, .07); }
.brain-book-neurons i {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: .36rem;
  border-radius: 50%;
  background: #ff6b2c;
  box-shadow: 0 0 8px rgba(255,107,44,.66);
}
.brain-book-neurons span { min-width: 0; display: grid; gap: .18rem; }
.brain-book-neurons b {
  color: #fff5ef;
  font-size: .79rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
.brain-book-neurons small {
  display: -webkit-box;
  overflow: hidden;
  color: #8f7f76;
  font-size: .69rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.brain-inspector-principles {
  display: grid;
  gap: .45rem;
  margin-top: .85rem;
}
.brain-inspector-principles > b {
  color: #8d786b;
  font: 800 .62rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.brain-inspector-principles > button {
  width: 100%;
  display: grid;
  gap: .26rem;
  padding: .68rem .72rem;
  border: 1px solid rgba(177, 145, 255, .15);
  border-radius: 11px;
  color: #f2e9ff;
  text-align: left;
  background: linear-gradient(135deg, rgba(139, 92, 246, .09), rgba(255,255,255,.016));
  cursor: pointer;
}
.brain-inspector-principles > button:hover {
  border-color: rgba(190, 162, 255, .35);
  background: linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(255, 110, 43, .04));
}
.brain-inspector-principles > button span {
  font-size: .79rem;
  font-weight: 800;
  line-height: 1.3;
}
.brain-inspector-principles > button small {
  display: -webkit-box;
  overflow: hidden;
  color: #9b8da9;
  font-size: .69rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.brain-principle-source {
  display: grid;
  gap: .22rem;
  margin: 0 0 1rem;
  padding: .7rem .78rem;
  border: 1px solid rgba(255, 144, 80, .14);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.brain-principle-source b { color: #ffd9c1; font-size: .78rem; }
.brain-principle-source span { color: #a38d80; font-size: .72rem; }
.brain-principle-source small { color: #75665e; font-size: .65rem; line-height: 1.35; }
.brain-principle-section {
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 142, 76, .1);
}
.brain-principle-section h3 {
  margin: 0 0 .5rem;
  color: #ff9a5a;
  font: 800 .63rem/1 var(--mono);
  letter-spacing: .085em;
  text-transform: uppercase;
}
.brain-principle-section ul {
  display: grid;
  gap: .42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brain-principle-section li {
  position: relative;
  padding-left: .9rem;
  color: #c9b8ad;
  font-size: .79rem;
  line-height: 1.48;
}
.brain-principle-section li::before {
  content: "";
  position: absolute;
  top: .52em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6b2c;
  box-shadow: 0 0 8px rgba(255, 107, 44, .58);
}
.brain-principle-challenge,
.brain-principle-evidence {
  display: grid;
  gap: .38rem;
  margin-top: .95rem;
  padding: .8rem .86rem;
  border-radius: 12px;
  color: #f1e7ff;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.48;
  background: linear-gradient(135deg, rgba(139, 92, 246, .13), rgba(255,255,255,.018));
}
.brain-principle-challenge span,
.brain-principle-evidence b {
  color: #bca6f4;
  font: 800 .61rem/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.brain-principle-evidence {
  color: #ffe5d4;
  background: linear-gradient(135deg, rgba(255, 103, 36, .11), rgba(255,255,255,.018));
}
.brain-principle-evidence b { color: #ff9353; }
.brain-practice-bank {
  display: grid;
  gap: .42rem;
  margin-top: 1rem;
}
.brain-practice-bank > h3 {
  margin: 0 0 .15rem;
  color: #8d786b;
  font: 800 .62rem/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.brain-practice-bank details {
  overflow: hidden;
  border: 1px solid rgba(255, 142, 76, .12);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.brain-practice-bank summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: flex-start;
  gap: .5rem;
  padding: .62rem .68rem;
  color: #d7c8bf;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.38;
  cursor: pointer;
}
.brain-practice-bank summary span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #ffaf7b;
  font: 800 .62rem/1 var(--mono);
  background: rgba(255, 102, 38, .11);
}
.brain-practice-bank details p {
  margin: 0;
  padding: .05rem .72rem .62rem 2.75rem;
  color: #9d8c82;
  font-size: .71rem;
  line-height: 1.45;
}
.brain-practice-bank details p b { color: #c9b7ab; }
.br-principle-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
  color: #ab96d9;
  font-size: .75rem;
}
.brain-empty {
  min-height: 280px;
  display: grid;
  place-content: center;
  gap: .4rem;
  padding: 2rem;
  border: 1px dashed rgba(255, 132, 64, .22);
  border-radius: 20px;
  color: #a08e84;
  text-align: center;
  background: rgba(255,255,255,.012);
}
.brain-empty b { color: #f4e6dc; }
@keyframes brain-live { 50% { opacity: .35; transform: scale(.75); } }
@keyframes brain-orbit { to { transform: rotate(360deg); } }
@media (max-width: 980px) {
  .brain-toolbar { align-items: stretch; flex-direction: column; }
  .brain-view-switch { width: 100%; }
  .brain-view-switch button { flex: 1; }
  .brain-graph-meta { font-size: .56rem; }
  .brain-graph-viewport { height: min(720px, 76dvh); min-height: 500px; }
  .brain-graph-legend { display: none; }
  .brain-inspector {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 66%;
    padding: 1.05rem;
    border-radius: 18px;
    transform: translateY(24px);
    box-shadow: 0 -22px 70px rgba(0,0,0,.58);
  }
  .brain-inspector h2 {
    max-width: calc(100% - 42px);
    font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  }
  .brain-inspector.open { transform: none; }
  .brain-graph-hint { font-size: .56rem; }
}
@media (max-width: 560px) {
  .brain-graph-viewport {
    height: min(690px, 74dvh);
    min-height: 470px;
  }
  .brain-inspector {
    left: 5px;
    right: 5px;
    bottom: 5px;
    max-height: 72%;
    padding: .9rem;
    border-radius: 16px;
  }
  .brain-inspector-core { font-size: .88rem; }
  .brain-book-neurons > button { padding: .72rem; }
  .brain-book-neurons b { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-graph-meta i,
  .br-root-orbit { animation: none; }
  .brain-inspector,
  .br-edge,
  .br-book-node,
  .br-neuron { transition: none; }
}
.br-admin-box { border: 1px solid rgba(249,115,22,.35); background: #fffaf5; }
.br-admin-box h2 { color: #b45309; }
.yt-draft { margin-top: .8rem; }
.yt-card { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; margin-bottom: .6rem; background: #fff; display: grid; gap: .4rem; }
.yt-card input, .yt-card textarea { font-size: .88rem; }

/* ===== Deep Profile ===== */
.dp-wb { border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; margin-bottom: .9rem; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.dp-wb.open { border-color: var(--rule-hi); box-shadow: var(--shadow); }
.dp-wb-head { width: 100%; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.dp-wb-head:hover { background: var(--panel-hi); }
.dp-wb-ico { font-size: 1.4rem; }
.dp-wb-title { font-weight: 700; font-size: 1.05rem; flex: 1; }
.dp-wb-pct { font-size: .82rem; color: var(--muted); font-family: var(--mono); }
.dp-wb-pct.done { color: var(--good); font-weight: 700; }
.dp-wb-caret { color: var(--muted); }
.dp-wb-bar { height: 4px; background: var(--rule); }
.dp-wb-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s; }
.dp-wb-body { padding: 1rem 1.2rem 1.3rem; }
.dp-group { box-shadow: none; }
.dp-group h2 { font-size: 1rem; margin-bottom: .3rem; }

.dp-table-wrap { display: grid; gap: .6rem; }
.dp-row { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; background: #fcfbff; }
.dp-row-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.dp-row-head .del { margin-left: auto; }
.dp-row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.dp-row-grid label { margin: 0 0 .15rem; font-size: .74rem; }

.dp-per-result { margin-bottom: .8rem; }
.dp-per-badge { display: inline-block; font-size: 1.15rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: .4rem .9rem; border-radius: 999px; }
.dp-per-grid { display: grid; gap: 3px; overflow-x: auto; font-size: .82rem; }
.dp-per-row { display: grid; grid-template-columns: 34px repeat(4, 1fr); gap: 3px; align-items: stretch; min-width: 560px; }
.dp-per-header { position: sticky; top: 0; font-weight: 700; font-size: .78rem; }
.dp-per-header > div { padding: .3rem; text-align: center; color: var(--muted); }
.dp-per-split { margin-top: .5rem; padding-top: .5rem; border-top: 2px dashed var(--rule-hi); }
.dp-per-idx { display: grid; place-items: center; color: var(--faint); font-size: .74rem; font-family: var(--mono); }
.dp-per-cell { font: inherit; font-size: .8rem; text-align: left; cursor: pointer; border: 1px solid var(--rule); border-radius: 7px; padding: .35rem .45rem; background: #fff; color: var(--ink); line-height: 1.25; transition: all .1s; }
.dp-per-cell:hover { border-color: var(--accent); background: #f8f7fe; }
.dp-per-cell.sel { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 600; }

.dp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.dp-pick-sm { grid-template-columns: repeat(3, 1fr); }
.dp-jung-group { font-size: .78rem; font-weight: 700; color: var(--accent); margin: .7rem 0 .35rem; }
.dp-pick-item { text-align: left; font: inherit; cursor: pointer; border: 1.5px solid var(--rule); border-radius: var(--radius-sm); padding: .6rem .75rem; background: #fff; color: var(--ink); transition: all .12s; display: grid; gap: .2rem; }
.dp-pick-item:hover { border-color: var(--accent); }
.dp-pick-item.sel { border-color: var(--accent); background: #f8f7fe; box-shadow: 0 0 0 1px rgba(108,92,231,.3); }
.dp-pick-item b { font-size: .92rem; }
.dp-pick-item span { font-size: .78rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 940px) { .dp-pick, .dp-pick-sm { grid-template-columns: 1fr; } }

/* ===== Problem cards ===== */
.prob-empty { color: var(--faint); font-size: .92rem; padding: .6rem 0 .2rem; font-style: italic; }
.prob-card { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-bottom: .75rem; background: #fcfbff; transition: border-color .15s; }
.prob-card:hover { border-color: var(--rule-hi); }
.prob-card.prob-keep { border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.05); }
.prob-header { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.prob-num { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--accent); background: rgba(108,92,231,.12); border-radius: 6px; padding: .15rem .45rem; }
.prob-keep-toggle { display: flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--muted); cursor: pointer; margin-left: auto; user-select: none; }
.prob-keep-toggle input { width: 16px; height: 16px; }
.prob-del { margin-left: .4rem; }
.prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .6rem; }
@media (max-width: 940px) { .prob-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   HOR-MOZI WAR ROOM — ember interface
   Visual language: carbon black, warm ivory, controlled orange light.
   This layer intentionally overrides the original light theme without changing
   the DOM contracts used by app.js/deep-ui.js.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #070504;
  --panel: #0e0a08;
  --panel-hi: #17100c;
  --ink: #f6efe9;
  --muted: #a89a90;
  --faint: #6f625a;
  --rule: rgba(255, 237, 222, .085);
  --rule-hi: rgba(255, 125, 54, .34);
  --accent: #ff5a1f;
  --accent2: #ff9a4c;
  --good: #57d68d;
  --bad: #ff5d66;
  --warn: #ff8a3d;
  --radius: 22px;
  --radius-sm: 13px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 110, 43, .04);
  --ember: 0 0 24px rgba(255, 83, 23, .28), 0 10px 34px rgba(0, 0, 0, .38);
}

html { background: #050302; }

body {
  color: var(--ink);
  background:
    radial-gradient(900px 540px at 76% -120px, rgba(255, 91, 28, .12), transparent 64%),
    radial-gradient(760px 440px at 14% 110%, rgba(255, 116, 43, .07), transparent 64%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 42px 42px, 42px 42px, auto;
  background-attachment: fixed;
}

::selection { color: #fff; background: rgba(255, 90, 31, .45); }

/* Shell */
.app { grid-template-columns: 272px minmax(0, 1fr); }

aside {
  padding: 1.35rem 1rem 1rem;
  border-right-color: var(--rule);
  background:
    radial-gradient(380px 260px at 35% 0%, rgba(255, 91, 28, .10), transparent 65%),
    linear-gradient(180deg, rgba(15, 10, 8, .985), rgba(7, 5, 4, .98));
  box-shadow: 18px 0 60px rgba(0, 0, 0, .18);
  isolation: isolate;
}

aside::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 18px 0;
  height: 150px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 83, 22, .12), transparent 68%);
  pointer-events: none;
}

aside .logo {
  min-height: 50px;
  padding: .2rem .45rem .9rem;
  font-size: 1.16rem;
  letter-spacing: -.025em;
}

aside .logo .mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff7f0;
  background:
    radial-gradient(circle at 50% 42%, #fff 0 4%, #ffd0aa 5% 9%, transparent 10%),
    radial-gradient(circle, #ff7b35 0 28%, #2a1209 31% 53%, #ff6a28 55% 58%, #0c0806 61%);
  box-shadow: 0 0 0 1px rgba(255, 154, 76, .4), 0 0 24px rgba(255, 85, 23, .34);
}

aside .logo small { color: #7c6d63; letter-spacing: .16em; }

.side-toggle {
  color: var(--muted);
  border-color: var(--rule);
  background: rgba(255,255,255,.025);
}

.side-toggle:hover {
  color: var(--ink);
  border-color: var(--rule-hi);
  background: rgba(255, 92, 30, .08);
}

nav.tabs { gap: .62rem; margin-top: 1.1rem; }
nav.tabs button {
  color: #94867d;
  padding: .66rem .78rem;
  border: 1px solid transparent;
  border-radius: 13px;
}
nav.tabs button:hover {
  color: var(--ink);
  border-color: rgba(255,255,255,.055);
  background: rgba(255,255,255,.035);
}
nav.tabs button.active {
  color: #fffaf6;
  border-color: rgba(255, 139, 73, .34);
  background:
    linear-gradient(90deg, rgba(255, 91, 31, .20), rgba(255, 91, 31, .04)),
    rgba(255,255,255,.025);
  box-shadow: inset 3px 0 0 #ff6b2b, 0 9px 28px rgba(0,0,0,.28), 0 0 22px rgba(255,82,21,.08);
}
nav.tabs .ico { filter: saturate(.8); }
.nav-group-h { color: #5f534c; letter-spacing: .13em; font-size: .66rem; }
.sidebar-foot { border-top-color: var(--rule); color: #8b7b71; }
.sidebar-foot .vault { color: #5e5149; }

main {
  width: 100%;
  max-width: 1280px;
  padding: clamp(2rem, 4vw, 3.7rem) clamp(1.4rem, 5vw, 5rem) 5rem;
}

/* Signature: every workspace opens under an ember horizon. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem clamp(1.3rem, 3vw, 2.6rem) 2.35rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 28px;
  background:
    radial-gradient(520px 210px at 84% 100%, rgba(255, 117, 47, .16), transparent 70%),
    radial-gradient(360px 190px at 8% -18%, rgba(255, 88, 26, .10), transparent 70%),
    linear-gradient(160deg, #100b08, #080504 70%);
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .52;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 186, 137, .32) 0 1px, transparent 1.2px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 76%);
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

.hero::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -55px;
  height: 76px;
  border-radius: 50%;
  background: #ff6a27;
  filter: blur(34px);
  opacity: .62;
  box-shadow: -230px 0 36px #ff8c42, 230px 0 42px #ff4d12;
  pointer-events: none;
}

.page-title,
.page-sub { position: relative; z-index: 1; }
h1.page-title {
  max-width: 760px;
  color: #fffaf6;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.page-sub {
  max-width: 66ch;
  color: #aa9b91;
  margin-top: .9rem;
  line-height: 1.6;
}
.page-sub b { color: #eee2da; }

/* Core surfaces */
.card,
.stat-tile,
.phase,
.dp-wb,
.br-card,
.yt-card,
.prob-card,
.method-card,
.ms-prov {
  color: var(--ink);
  border-color: var(--rule);
  background:
    linear-gradient(145deg, rgba(255,255,255,.028), transparent 58%),
    var(--panel);
  box-shadow: 0 18px 54px rgba(0,0,0,.18);
}

.card {
  position: relative;
  overflow: hidden;
  padding: 1.45rem 1.55rem;
}

.card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 117, 50, .28), transparent);
  opacity: .7;
}

.card:hover,
.dp-wb.open {
  border-color: rgba(255, 113, 47, .26);
  box-shadow: 0 24px 68px rgba(0,0,0,.28), 0 0 30px rgba(255,80,20,.045);
}
.card h2, .method-card h4, .phase h3, .stat-num, .ring-center b,
.progress-meta b, .next-action .t, .ve-row b, .br-card .br-apply {
  color: var(--ink);
}
.card .hint, .muted, .stat-lab, .progress-meta .lab, .phase .goal,
.method-card p, .br-card p, .br-links { color: var(--muted); }

/* Forms and controls */
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=url],
textarea,
select {
  color: #f4ece6;
  border-color: rgba(255, 237, 222, .10);
  background-color: #090605;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
input::placeholder, textarea::placeholder { color: #665950; }
input:focus, textarea:focus, select:focus {
  color: #fff;
  border-color: rgba(255, 105, 38, .68);
  background: #0d0806;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .12), 0 0 26px rgba(255, 82, 18, .08);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ff9a4c' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
select option { color: var(--ink); background: #110b08; }
label { color: #a99b91; }
input[type=checkbox] { border-color: rgba(255, 237, 222, .22); background: #090605; }
input[type=checkbox]:checked {
  border-color: rgba(255, 169, 107, .72);
  background: linear-gradient(135deg, #ff4d13, #ff9a4c);
  box-shadow: 0 0 16px rgba(255, 84, 20, .22);
}

.btn {
  color: #fffaf6;
  border: 1px solid rgba(255, 166, 103, .52);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(135deg, #ff4f16, #c92f08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--ember);
}
.btn:hover {
  border-color: rgba(255, 206, 166, .8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 30px rgba(255, 82, 20, .38), 0 14px 34px rgba(0,0,0,.44);
}
.btn.ghost,
.sess-chip,
.br-link {
  color: #c7b8ae;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
}
.btn.ghost:hover, .sess-chip:hover {
  color: #fff;
  border-color: rgba(255, 113, 47, .4);
  background: rgba(255, 88, 28, .08);
}
.btn.active-view,
.sess-chip.on,
.dp-per-badge {
  color: #fff;
  background: linear-gradient(135deg, #ff4f15, #9f2608);
}

.pill, .kbd, .note-chip, .mode-chip {
  border-color: rgba(255, 128, 61, .18);
  color: #ff9f60;
  background: rgba(255, 92, 27, .075);
}
.callout {
  color: #e9ddd5;
  border-color: rgba(255, 105, 39, .22);
  border-left-color: var(--accent);
  background: rgba(255, 89, 27, .06);
}
th, td { border-bottom-color: var(--rule); }
th { color: #776960; }

/* Dashboard */
.stat-tile { position: relative; overflow: hidden; padding: 1.15rem 1.2rem; }
.stat-tile::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -48px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 88, 27, .13);
  filter: blur(22px);
}
.stat-ico {
  border: 1px solid rgba(255, 122, 55, .18);
  background: rgba(255, 91, 28, .075) !important;
}
.ring::before { background: #0a0705; box-shadow: inset 0 0 0 1px var(--rule); }
.streak-card {
  border: 1px solid rgba(255, 135, 69, .3);
  background:
    radial-gradient(circle at 50% 112%, rgba(255, 171, 102, .9), rgba(255, 73, 14, .20) 24%, transparent 55%),
    linear-gradient(145deg, #180b06, #0a0604);
  box-shadow: 0 22px 60px rgba(0,0,0,.36), 0 0 38px rgba(255, 75, 12, .10);
}
.streak-flame { background: rgba(255, 102, 36, .16); box-shadow: 0 0 28px rgba(255, 78, 14, .28); }
.progress { background: #1e130e; }
.progress > i, .dp-wb-bar > i {
  background: linear-gradient(90deg, #ff4210, #ff9a4c);
  box-shadow: 0 0 18px rgba(255, 87, 22, .44);
}
.next-action {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 110, 43, .30);
  background:
    radial-gradient(420px 180px at 100% 100%, rgba(255, 115, 46, .19), transparent 72%),
    linear-gradient(145deg, #130a06, #0b0705);
  box-shadow: var(--shadow);
}
.next-action::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: -45px;
  width: 180px;
  height: 60px;
  background: #ff5a18;
  filter: blur(30px);
  opacity: .28;
}
.next-action .k { color: #ff8a45; }
.phase h3 .num {
  color: #ff8c4a;
  border-color: rgba(255, 118, 49, .20);
  background: rgba(255, 91, 28, .07);
}
.step:hover { background: rgba(255, 92, 30, .045); }

/* Offer, lead and selected states */
.method-card.sel,
.dp-pick-item.sel,
.ac-mitem.sel,
.ac-sitem.sel {
  color: var(--ink);
  border-color: rgba(255, 118, 51, .52);
  background:
    radial-gradient(380px 120px at 0 0, rgba(255, 90, 26, .15), transparent),
    #120b08;
  box-shadow: 0 0 0 1px rgba(255, 91, 28, .12), 0 0 24px rgba(255, 75, 13, .07);
}

/* Mentor */
.sess-bar { border-bottom: 1px solid var(--rule); }
.m-thread { scrollbar-color: rgba(255, 107, 43, .26) transparent; }
.m-empty {
  color: var(--muted);
  border: 1px dashed rgba(255, 121, 54, .18);
  background: rgba(255, 89, 24, .035);
}
.m-user .m-bubble {
  color: #fff;
  background: linear-gradient(135deg, #dd3c0e, #ff6a29);
  box-shadow: 0 10px 30px rgba(255, 66, 9, .14);
}
.m-assistant .m-bubble {
  color: #f0e7e1;
  border-color: rgba(255, 131, 66, .14);
  background: #110c09;
}
.m-input { border-top-color: var(--rule); }
.commit {
  border-color: var(--rule);
  background: rgba(255,255,255,.018);
}
.commit.overdue {
  border-color: rgba(255, 93, 102, .34);
  background: rgba(255, 73, 83, .055);
}

/* Academy */
.ac-node,
.ac-opt,
.ac-mitem,
.ac-oitem,
.ac-sitem,
.dp-per-cell,
.dp-pick-item,
.br-link {
  color: var(--ink);
  border-color: rgba(255,255,255,.10);
  background: #0d0907;
}
.ac-node.open {
  border-color: rgba(255, 113, 45, .48);
  box-shadow: 0 6px 24px rgba(255, 75, 13, .12);
}
.ac-node.open:hover,
.ac-opt:hover,
.dp-per-cell:hover,
.dp-wb-head:hover,
.ac-sort-drop:hover {
  color: #fff;
  border-color: rgba(255, 121, 55, .5);
  background: #17100c;
}
.ac-node.open .ac-node-ico { background: linear-gradient(135deg, #ff4b12, #ff9a4c); }
.ac-node-ico { background: #1b120d; }
.ac-learn-card {
  border-color: rgba(255, 112, 46, .25);
  background: rgba(255, 87, 25, .055);
}
.ac-learn-core { color: #ff9c60; }
.ac-fb.ok, .ac-node.done, .ac-mitem.done, .ac-oitem.picked,
.ac-sitem.placed.ok, .ac-filled-row {
  border-color: rgba(87, 214, 141, .28);
  background: rgba(87, 214, 141, .065);
}
.ac-fb.no, .ac-opt.wrong, .ac-sitem.placed.bad {
  border-color: rgba(255, 93, 102, .28);
  background: rgba(255, 93, 102, .055);
}
.ac-sort-g { border-color: rgba(255, 123, 56, .22); }
.ac-conflict { border-color: rgba(255, 138, 61, .28); background: rgba(255, 118, 38, .055); }

/* Brain, profile, admin */
.br-card,
.dp-row,
.prob-card,
.yt-card,
.ms-prov { background: rgba(255,255,255,.018); }
.br-card:hover { border-color: rgba(255, 111, 44, .42); }
.br-card .br-apply { background: rgba(255, 88, 25, .055); }
.br-admin-box {
  border-color: rgba(255, 130, 62, .28);
  background: linear-gradient(145deg, rgba(255, 89, 25, .075), rgba(255,255,255,.012));
}
.br-admin-box h2, .dp-jung-group { color: #ff9b59; }
.dp-wb { overflow: hidden; }
.dp-wb-head { color: var(--ink); }
.dp-wb-bar { background: #21150f; }
.dp-row { border-color: var(--rule); }
.dp-per-cell.sel { color: #fff; background: linear-gradient(135deg, #e9430f, #a72b0b); }
.prob-card.prob-keep {
  border-color: rgba(87, 214, 141, .28);
  background: rgba(87, 214, 141, .05);
}
.prob-num { color: #ff9956; background: rgba(255, 88, 24, .10); }

/* Call overlay có hệ màu và lớp kính riêng ở khối "Call Mode" phía trên. */

/* Keyboard and accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #ff9855;
  outline-offset: 3px;
}

@media (max-width: 940px) {
  .app, .app.sidebar-collapsed { grid-template-columns: 1fr; }
  aside, .app.sidebar-collapsed aside {
    position: sticky;
    z-index: 40;
    top: 0;
    padding: .85rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    background: rgba(8, 5, 4, .93);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 45px rgba(0,0,0,.34);
  }
  aside .logo { padding-bottom: .2rem; }
  nav.tabs { padding-bottom: .1rem; }
  nav.tabs button { padding: .52rem .68rem; font-size: .88rem; }
  .sidebar-foot { color: #817268; }
  main { max-width: none; padding: 1.25rem 1.15rem 3.5rem; }
  .hero { min-height: 164px; border-radius: 24px; }
  h1.page-title { font-size: clamp(1.85rem, 7vw, 2.8rem); }
}

@media (max-width: 560px) {
  aside, .app.sidebar-collapsed aside { padding: .7rem .75rem; }
  aside .logo .mark { width: 34px; height: 34px; }
  .sidebar-foot { color: #76675e; overflow: hidden; white-space: nowrap; }
  .sidebar-foot .vault { overflow: hidden; text-overflow: ellipsis; }
  main { padding: .9rem .7rem 2.5rem; }
  .hero {
    min-height: 152px;
    padding: 1.45rem 1.15rem 1.85rem;
    margin-bottom: .85rem;
    border-radius: 20px;
  }
  .hero::after { bottom: -66px; }
  .page-sub { font-size: .9rem; line-height: 1.52; }
  .card { padding: 1.1rem 1rem; border-radius: 18px; }
  .stat-grid { gap: .55rem; }
  .stat-tile { padding: .9rem; border-radius: 18px; }
  .m-bubble { max-width: 94%; }
  .ac-match, .ac-sort-groups { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Compact command bar on tablets and narrow laptop windows. */
@media (min-width: 561px) and (max-width: 940px) {
  aside,
  .app.sidebar-collapsed aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: .8rem;
    min-height: 74px;
  }
  aside .logo { min-width: 166px; }
  nav.tabs {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .18rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: 0 0 auto; white-space: nowrap; }
  .sidebar-foot {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }
  .sidebar-foot .vault { display: none; }
}

@media (max-width: 560px) {
  aside,
  .app.sidebar-collapsed aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: .45rem .7rem;
  }
  aside .logo { min-width: 0; width: auto; }
  nav.tabs {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .sidebar-foot {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin: 0;
  }
  .sidebar-foot .vault { display: none; }
}

/* ==========================================================================
   HOR-MOZI OBJECT ICONS
   One 5x2 atlas: fewer requests, identical material and lighting everywhere.
   Pure black pixels disappear via screen blending on the carbon UI.
   ========================================================================== */
.hero-icon,
nav.tabs .ico {
  display: inline-block;
  flex: none;
  overflow: hidden;
  color: transparent;
  background-image: url('/assets/hormozi-icon-atlas.png');
  background-repeat: no-repeat;
  background-size: 500% 200%;
  mix-blend-mode: normal;
  filter: saturate(1.1) contrast(1.05) drop-shadow(0 0 11px rgba(255, 106, 38, .30));
}

nav.tabs .ico {
  width: 28px;
  height: 28px;
  font-size: 0;
  border-radius: 8px;
  transform: scale(1.08);
  transition: transform .18s ease, filter .18s ease;
}

nav.tabs button:hover .ico,
nav.tabs button.active .ico {
  transform: scale(1.18) translateY(-1px);
  filter: saturate(1.22) contrast(1.08) drop-shadow(0 0 14px rgba(255, 113, 42, .50));
}

h1.page-title {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.15rem);
}

.hero-icon {
  width: clamp(58px, 7vw, 82px);
  height: clamp(58px, 7vw, 82px);
  border-radius: 18px;
  filter: saturate(1.16) contrast(1.05) drop-shadow(0 0 20px rgba(255, 107, 36, .38));
}

/* Atlas coordinates: five columns × two rows. */
nav.tabs button[data-view="dashboard"] .ico, .icon-roadmap { background-position: 0% 0%; }
nav.tabs button[data-view="mentor"] .ico, .icon-mentor { background-position: 25% 0%; }
nav.tabs button[data-view="deep"] .ico, .icon-profile { background-position: 50% 0%; }
nav.tabs button[data-view="agents"] .ico, .icon-agents { background-position: 75% 0%; }
nav.tabs button[data-view="offers"] .ico, .icon-offers { background-position: 100% 0%; }
nav.tabs button[data-view="leads"] .ico, .icon-leads { background-position: 0% 100%; }
nav.tabs button[data-view="academy"] .ico, .icon-academy { background-position: 25% 100%; }
nav.tabs button[data-view="brain"] .ico, .icon-brain { background-position: 50% 100%; }
nav.tabs button[data-view="knowledge"] .ico, .icon-knowledge { background-position: 75% 100%; }
nav.tabs button[data-view="settings"] .ico, .icon-settings { background-position: 100% 100%; }

@media (max-width: 940px) {
  nav.tabs .ico { width: 25px; height: 25px; }
}

@media (max-width: 560px) {
  h1.page-title { align-items: flex-start; }
  .hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
}

/* ==========================================================================
   2026-07 interaction + contrast polish
   ========================================================================== */

/* Clear chat canvas: warm graphite shell, crisp neutral assistant bubbles. */
#mentor .mentor-chat-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 140, 74, .34);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 104, 36, .10), transparent 34%),
    linear-gradient(145deg, #17110e 0%, #0d0907 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 22px 52px rgba(0,0,0,.36);
}
#mentor .mentor-chat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff7a31 40%, #ffd0a8 52%, transparent);
  opacity: .72;
}
#mentor .mentor-chat-card .m-thread {
  position: relative;
  margin: -.15rem -.15rem .8rem;
  padding: 1rem;
  border: 1px solid rgba(255, 145, 82, .16);
  border-radius: 17px;
  background: rgba(3, 2, 2, .56);
}
#mentor .m-assistant .m-bubble {
  color: #fff8f2;
  border-color: rgba(255, 180, 127, .24);
  background: linear-gradient(145deg, #251913, #17100d);
  box-shadow: 0 9px 24px rgba(0,0,0,.28);
}
#mentor .m-user .m-bubble {
  color: #fff;
  background: linear-gradient(135deg, #f04a16, #ff7a32);
  box-shadow: 0 10px 28px rgba(255, 79, 21, .24);
}
/* Thanh chat — bố cục kiểu "pill" (tham khảo app chat di động): nút đính kèm
   tròn bên trái, khung nhập bo tròn ở giữa gom sẵn nút gọi/nói, nút gửi tròn
   nổi bật bên phải. Vẫn giữ tông ember/đen của app, không đổi màu hệ thống. */
#mentor .m-input {
  align-items: center;
  gap: .55rem;
  padding: 0;
  border-top: 0;
  background: transparent;
}
#mentor .m-input-attach {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: #c7b8ae;
  font-size: 1.15rem;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
#mentor .m-input-attach:hover {
  color: #fff;
  border-color: rgba(255, 113, 47, .4);
  background: rgba(255, 88, 28, .08);
}
#mentor .m-input-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  padding: .3rem .4rem .3rem 1.05rem;
  border: 1px solid rgba(255, 154, 94, .22);
  border-radius: 26px;
  background: #0b0705;
  transition: border-color .18s ease;
}
#mentor .m-input-pill:focus-within {
  border-color: rgba(255, 132, 66, .55);
}
#mentor .m-input-pill textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: .62rem .2rem;
  border: 0;
  background: transparent;
}
#mentor .m-input-pill-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: .1rem;
  padding-bottom: .2rem;
}
#mentor .m-input-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #9a887f;
  font-size: 1.02rem;
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
#mentor .m-input-icon:hover {
  color: #ff9360;
  background: rgba(255, 113, 47, .12);
}
#mentor #m_mic.m-mic-on {
  color: #fff;
  background: var(--bad, #dc2626);
  animation: mic-pulse 1s ease-in-out infinite;
}
#mentor .m-input-send {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 166, 103, .52);
  border-radius: 50%;
  color: #fffaf6;
  font-size: 1.1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(135deg, #ff4f16, #c92f08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--ember);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#mentor .m-input-send i { font-style: normal; transform: translateX(1px); }
#mentor .m-input-send:hover {
  border-color: rgba(255, 206, 166, .8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 30px rgba(255, 82, 20, .38), 0 14px 34px rgba(0,0,0,.44);
}
#mentor .m-input-send:active { transform: translateY(1px); }
#mentor .m-input-send:disabled,
#mentor .m-input-attach:disabled,
#mentor .m-input-icon:disabled {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.4);
}
#mentor .m-input-pill textarea:disabled { cursor: not-allowed; }

/* Streak label reads as a UI status, not subdued body copy. */
.streak-card .streak-label {
  margin-top: .42rem;
  color: #ffe6d5;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .15em;
  line-height: 1;
  opacity: 1;
  text-transform: uppercase;
}

/* Reuse the transparent object atlas for dashboard/academy status icons. */
.stat-ico,
.streak-flame {
  color: transparent;
  font-size: 0;
  background-color: transparent !important;
  background-image: url('/assets/hormozi-icon-atlas.png') !important;
  background-repeat: no-repeat !important;
  background-size: 500% 200% !important;
  border: 0;
  border-radius: 0;
  filter: saturate(1.14) contrast(1.05) drop-shadow(0 0 12px rgba(255, 114, 42, .34));
}
.stat-ico {
  width: 50px;
  height: 50px;
  margin: -.15rem 0 .55rem -.15rem;
}
.stat-ico-a { background-position: 0% 0% !important; }
.stat-ico-b { background-position: 100% 0% !important; }
.stat-ico-c { background-position: 25% 100% !important; }
.stat-ico-d { background-position: 75% 100% !important; }
.streak-flame {
  width: 58px;
  height: 58px;
  margin-bottom: .5rem;
  background-position: 100% 0% !important;
}

/* Larger, undistorted navigation objects. */
nav.tabs .ico {
  width: 36px;
  height: 36px;
  border-radius: 0;
  transform: none;
}
nav.tabs button:hover .ico,
nav.tabs button.active .ico {
  transform: scale(1.08) translateY(-1px);
}

/* An unfinished roadmap item is a clear route to the place where it is done. */
.step {
  min-height: 46px;
  align-items: center;
  gap: .72rem;
  padding: .55rem .65rem;
}
.step .step-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.step.step-action {
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.step.step-action:hover,
.step.step-action:focus-visible {
  border-color: rgba(255, 124, 54, .30);
  outline: none;
  background: linear-gradient(90deg, rgba(255, 90, 26, .11), rgba(255, 90, 26, .025));
  transform: translateX(3px);
}
.step .step-go {
  flex: none;
  color: #ff8a45;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.step.step-action input {
  pointer-events: none;
}

@media (max-width: 940px) {
  nav.tabs .ico { width: 34px; height: 34px; }
}

@media (max-width: 560px) {
  nav.tabs .ico { width: 31px; height: 31px; }
  .step { align-items: flex-start; }
  .step .step-go { display: none; }
}

/* OAuth provider controls */
.ms-prov-oauth {
  border-color: rgba(255, 134, 64, .24);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 106, 36, .10), transparent 42%),
    rgba(255,255,255,.018);
}
.tag-oauth {
  color: #ffe4cf;
  border-color: rgba(255, 139, 73, .34);
  background: rgba(255, 102, 32, .12);
}
.oauth-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .65rem;
}
.oauth-state {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 136px;
  color: #c9b8ad;
  font-size: .8rem;
  font-weight: 750;
}
.oauth-state i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #76665d;
  box-shadow: 0 0 0 4px rgba(118, 102, 93, .12);
}

/* Inspector nằm trong canvas nhưng cũng dùng thẻ <aside>. Tách nó khỏi mọi
   quy tắc responsive của sidebar chính để màn hình dọc không ép nội dung
   thành hàng ngang/cột chữ siêu hẹp. Đặt cuối file để thắng các override shell. */
.app aside.brain-inspector {
  display: block;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  height: auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}
.oauth-state.connected { color: #baf3c9; }
.oauth-state.connected i {
  background: #38d875;
  box-shadow: 0 0 0 4px rgba(56, 216, 117, .13), 0 0 13px rgba(56, 216, 117, .44);
}
.oauth-state.disconnected { color: #ffd0ad; }
.oauth-state.disconnected i {
  background: #ff7b32;
  box-shadow: 0 0 0 4px rgba(255, 123, 50, .13);
}
.oauth-state.missing { color: #d9aaa0; }
.oauth-state.missing i { background: #d46555; }
.oauth-state.checking i { animation: oauthPulse 1s ease-in-out infinite alternate; }
.oauth-message {
  min-height: 1.1rem;
  margin-top: .5rem;
  font-size: .78rem;
}
@keyframes oauthPulse {
  to { opacity: .35; transform: scale(.78); }
}

/* ===== Product clarity pass: workspace, learning, accountability ===== */
.business-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
  padding: .55rem;
  border: 1px solid rgba(255, 131, 66, .16);
  border-radius: 18px;
  background: rgba(10, 6, 4, .78);
}
.business-workspace-tabs button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .55rem;
  padding: .72rem .78rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #aa9a8f;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.business-workspace-tabs button > span { grid-row: 1 / 3; align-self: center; font-size: 1.35rem; }
.business-workspace-tabs button b { color: #e9ddd4; font-size: .84rem; }
.business-workspace-tabs button small { overflow: hidden; color: #76685f; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.business-workspace-tabs button:hover,
.business-workspace-tabs button.active {
  border-color: rgba(255, 124, 58, .34);
  background: linear-gradient(145deg, rgba(255, 89, 28, .13), rgba(255,255,255,.02));
}
.business-workspace-tabs button.active {
  box-shadow: inset 3px 0 0 #ff6a29, 0 0 24px rgba(255, 79, 16, .08);
}

.state-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: #b2a399;
  background: rgba(255,255,255,.018);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.state-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.state-toggle-switch {
  position: relative;
  width: 48px;
  height: 27px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: #1a1210;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.5);
}
.state-toggle-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #8b7b71;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.state-toggle-copy { display: grid; gap: .22rem; }
.state-toggle-copy b { color: #eee3dc; font-size: .9rem; }
.state-toggle-copy small { color: #807168; font-size: .73rem; line-height: 1.45; }
.state-toggle-status {
  padding: .3rem .55rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #8f8076;
  font: 800 .64rem/1 var(--mono);
  letter-spacing: .06em;
}
.state-toggle.is-on {
  border-color: rgba(87, 214, 141, .52);
  background: linear-gradient(135deg, rgba(49, 193, 111, .13), rgba(255,255,255,.018));
  box-shadow: 0 0 0 1px rgba(87,214,141,.08), 0 0 28px rgba(49,193,111,.09);
}
.state-toggle.is-on .state-toggle-switch { border-color: rgba(87,214,141,.55); background: rgba(49,193,111,.25); }
.state-toggle.is-on .state-toggle-switch i {
  transform: translateX(21px);
  background: #78efa7;
  box-shadow: 0 0 12px rgba(87,214,141,.7);
}
.state-toggle.is-on .state-toggle-status { color: #baffcf; border-color: rgba(87,214,141,.45); background: rgba(49,193,111,.12); }
.state-toggle:focus-within { outline: 2px solid rgba(255, 124, 58, .6); outline-offset: 2px; }

.commit-center { border-color: rgba(255, 132, 65, .2); }
.commit-eyebrow { color: #ff8b49; font: 800 .62rem/1 var(--mono); letter-spacing: .12em; }
.commit-explain { margin: .7rem 0 .85rem; color: #96877d; font-size: .82rem; line-height: 1.5; }
.commit-explain b { color: #d9c9bf; }
.commit-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem;
  border: 1px dashed rgba(255, 137, 72, .24);
  border-radius: 13px;
  background: rgba(255, 95, 30, .035);
}
.commit-empty > div { display: grid; gap: .25rem; }
.commit-empty b { color: #ece0d8; font-size: .9rem; }
.commit-empty span { color: #8e7f75; font-size: .78rem; }
.commit-history { display: grid; gap: .38rem; margin-top: .85rem; }
.commit-history > span { color: #75665d; font: 800 .6rem/1 var(--mono); letter-spacing: .1em; }
.commit-history > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  color: #ab9b91;
  font-size: .76rem;
}
.commit-history i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-style: normal; }
.commit-history i.done { color: #79eaa6; background: rgba(87,214,141,.12); }
.commit-history i.missed { color: #ff959b; background: rgba(255,93,102,.1); }
.commit-history small { color: #74665e; }

.academy-daily-nudge {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(255, 139, 72, .42);
  border-radius: 18px;
  background:
    radial-gradient(360px 120px at 0 50%, rgba(255, 105, 38, .17), transparent),
    #100a07;
  box-shadow: 0 0 34px rgba(255, 74, 12, .08);
}
.academy-daily-nudge::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-120%) skewX(-20deg);
  animation: academyNudgeSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}
.academy-nudge-orb {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 173, 112, .55);
  border-radius: 50%;
  color: #fff7f1;
  background: linear-gradient(145deg, #ff7b32, #c92f08);
  box-shadow: 0 0 0 7px rgba(255, 91, 28, .08), 0 0 24px rgba(255, 77, 14, .34);
  animation: academyNudgePulse 2s ease-in-out infinite;
}
.academy-daily-nudge > div:not(.academy-nudge-orb) { display: grid; gap: .18rem; }
.academy-daily-nudge span { color: #ff8e4b; font: 800 .62rem/1 var(--mono); letter-spacing: .1em; }
.academy-daily-nudge b { color: #fff5ee; font-size: 1rem; }
.academy-daily-nudge small { color: #917f74; font-size: .75rem; }
.academy-unit-focus { animation: academyUnitFocus 1.8s ease; }
@keyframes academyNudgeSweep { 0%, 55% { transform: translateX(-120%) skewX(-20deg); } 82%, 100% { transform: translateX(370%) skewX(-20deg); } }
@keyframes academyNudgePulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 11px rgba(255,91,28,.04), 0 0 34px rgba(255,77,14,.48); } }
@keyframes academyUnitFocus { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px rgba(255,115,48,.62), 0 0 46px rgba(255,78,14,.2); } }

.dp-wb-head { position: relative; }
.dp-wb-order {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(255, 125, 58, .28);
  border-radius: 10px;
  color: #ff995e;
  font: 800 .72rem/1 var(--mono);
  background: rgba(255, 91, 28, .07);
}
.dp-wb-copy { min-width: 0; display: grid; flex: 1; gap: .18rem; }
.dp-wb-title { flex: initial; }
.dp-wb-step { overflow: hidden; color: #7c6d64; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.dp-wb.open .dp-wb-order { color: #fff; border-color: rgba(255,151,92,.6); background: linear-gradient(145deg, #ff6b2c, #9e2407); box-shadow: 0 0 18px rgba(255,76,12,.18); }
input::placeholder, textarea::placeholder { color: #7a6b62; opacity: 1; }

.knowledge-purpose {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  margin-bottom: 1rem;
}
.knowledge-purpose > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .6rem;
  padding: .9rem;
  border: 1px solid rgba(255, 130, 64, .14);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
}
.knowledge-purpose span { grid-row: 1 / 3; color: #ff7d38; font: 800 .74rem/1 var(--mono); }
.knowledge-purpose b { color: #eee3dc; font-size: .86rem; }
.knowledge-purpose small { color: #7f7168; font-size: .72rem; line-height: 1.45; }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.knowledge-card { margin: 0; display: flex; flex-direction: column; }
.knowledge-card-head > span { color: #ff8544; font: 800 .59rem/1 var(--mono); letter-spacing: .1em; }
.knowledge-card-head h2 { margin: .3rem 0 0; }
.knowledge-card .muted { flex: 1; }
.knowledge-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.knowledge-video { text-decoration: none; }
.knowledge-media-add { margin-top: .8rem; border-top: 1px solid var(--rule); padding-top: .7rem; }
.knowledge-media-add summary { color: #b6a59a; font-size: .76rem; font-weight: 700; cursor: pointer; }
.knowledge-media-add > div { display: flex; gap: .45rem; margin-top: .55rem; }
.knowledge-media-add input { min-width: 0; flex: 1; margin: 0; }
.knowledge-media-add > small { display: block; margin-top: .4rem; color: #75675e; font-size: .68rem; line-height: 1.45; }

.brain-inspector-nav {
  position: sticky;
  z-index: 5;
  top: -1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1.2rem -1.2rem .8rem;
  padding: .72rem 1.2rem;
  border-bottom: 1px solid rgba(255, 143, 77, .13);
  background: rgba(18, 10, 7, .92);
  backdrop-filter: blur(16px);
}
.brain-inspector-nav .brain-inspector-close {
  position: static;
  float: none;
  flex: none;
}
.brain-inspector-back {
  padding: .48rem .72rem;
  border: 1px solid rgba(255, 146, 83, .22);
  border-radius: 999px;
  color: #f1d6c4;
  font: 750 .75rem/1 var(--font);
  background: rgba(255, 103, 36, .08);
  cursor: pointer;
}
.brain-inspector-back:hover { color: #fff; border-color: rgba(255,146,83,.5); background: rgba(255,103,36,.16); }

@media (max-width: 720px) {
  .business-workspace-tabs { grid-template-columns: 1fr 1fr; }
  .knowledge-purpose { grid-template-columns: 1fr; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .academy-daily-nudge { grid-template-columns: auto 1fr; }
  .academy-daily-nudge .btn { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   HỒ SƠ KINH DOANH — 16 workbook dùng chung với Mentor/Academy
   ============================================================ */
main, .view { min-width: 0; }
.business-book-rail-wrap {
  min-width: 0;
  max-width: 100%;
  margin: 0 0 1.1rem;
  border: 1px solid rgba(255, 112, 40, .22);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(25, 11, 6, .96), rgba(8, 7, 7, .98));
  overflow: hidden;
}
.business-book-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.business-book-rail-head > div { display: grid; gap: .18rem; }
.business-book-rail-head span,
.workbook-inline-head span,
.workbook-cover span,
.workbook-activity > span,
.workbook-suggestions-head span {
  color: #ff793e;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.business-book-rail-head b { font-size: .98rem; }
.business-book-rail-head small { color: var(--muted); }
.business-workspace-tabs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex !important;
  grid-template-columns: none !important;
  gap: .55rem !important;
  padding: .85rem 1rem 1rem !important;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 104, 38, .55) transparent;
}
.business-workspace-tabs button {
  position: relative;
  flex: 0 0 150px;
  min-width: 150px;
  min-height: 116px;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: .25rem .55rem !important;
  padding: .72rem .75rem !important;
  border-radius: 16px !important;
  scroll-snap-align: start;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,106,34,.035)),
    #0d0908 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  text-align: left;
}
.business-workspace-tabs button::after {
  content: "";
  position: absolute;
  inset: auto 10px 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 102, 37, .2), transparent);
}
.business-workspace-tabs button.active {
  border-color: #ff6a27 !important;
  background: linear-gradient(145deg, rgba(255, 91, 25, .22), rgba(43, 14, 5, .9)) !important;
  box-shadow: inset 4px 0 0 #ff6728, 0 10px 30px rgba(255, 80, 16, .12) !important;
}
.business-workspace-tabs .book-order {
  grid-row: auto;
  color: #ff7b45;
  font: 800 .66rem ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
}
.business-workspace-tabs .book-icon {
  grid-row: auto;
  justify-self: end;
  font-size: 1.3rem !important;
  line-height: 1;
}
.business-workspace-tabs b {
  grid-column: 1 / -1;
  align-self: end;
  font-size: .93rem;
  line-height: 1.15;
}
.business-workspace-tabs small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .7rem;
}

.workbook-cover {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
  padding: 1.35rem;
  border: 1px solid rgba(255, 113, 42, .35);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 120%, rgba(255, 106, 37, .32), transparent 36%),
    linear-gradient(135deg, #190c07, #0a0808 64%);
  box-shadow: inset 0 -1px 0 rgba(255, 138, 75, .18);
}
.workbook-cover-no {
  display: grid;
  place-items: center;
  width: 74px;
  aspect-ratio: 1;
  border-radius: 18px;
  color: #ff7a3f;
  background: rgba(255, 91, 24, .09);
  border: 1px solid rgba(255, 104, 40, .32);
  font: 900 1.55rem ui-monospace, SFMono-Regular, Consolas, monospace;
}
.workbook-cover h2 { margin: .25rem 0 .35rem; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.workbook-cover p { margin: 0; color: var(--muted); }
.workbook-progress-ring {
  --p: 0;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 94px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #110a07 58%, transparent 59%), conic-gradient(#ff6326 calc(var(--p) * 1%), rgba(255,255,255,.08) 0);
}
.workbook-progress-ring b { font-size: 1.1rem; }
.workbook-progress-ring small { color: var(--muted); font-size: .65rem; }
.workbook-sync-note {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(67, 214, 143, .24);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(29, 157, 101, .09), rgba(12, 12, 12, .94));
}
.workbook-sync-orb {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(43, 210, 139, .12);
  box-shadow: 0 0 28px rgba(43, 210, 139, .12);
}
.workbook-sync-note b { color: #7be9b2; }
.workbook-sync-note p { margin: .2rem 0 0; color: var(--muted); font-size: .86rem; }
.workbook-sections { display: grid; gap: .85rem; }
.workbook-section {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(21, 15, 12, .98), rgba(9, 8, 8, .98));
  overflow: clip;
}
.workbook-section[open] { border-color: rgba(255, 103, 38, .3); }
.workbook-section > summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
}
.workbook-section > summary::-webkit-details-marker { display: none; }
.workbook-section > summary > span {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 10px;
  color: #ff793f;
  background: rgba(255, 103, 38, .08);
  border: 1px solid rgba(255, 103, 38, .22);
  font: 800 .72rem ui-monospace, SFMono-Regular, Consolas, monospace;
}
.workbook-section > summary > div { display: grid; gap: .2rem; }
.workbook-section > summary b { font-size: 1.04rem; }
.workbook-section > summary small { color: var(--muted); }
.workbook-section > summary i { color: #ff783d; font-style: normal; transition: transform .2s; }
.workbook-section[open] > summary i { transform: rotate(180deg); }
.workbook-section-body {
  padding: 1rem 1.1rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.workbook-core {
  margin: 0 0 1rem;
  padding: .8rem .9rem;
  border-left: 3px solid #ff6a2c;
  border-radius: 0 12px 12px 0;
  color: #d8cbc5;
  background: rgba(255, 99, 36, .055);
}
.workbook-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.workbook-field { min-width: 0; }
.workbook-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}
.workbook-field textarea { min-height: 112px; }
.workbook-field.from-mentor textarea,
.workbook-field.from-mentor input {
  border-color: rgba(72, 218, 151, .42);
  background: linear-gradient(135deg, rgba(29, 135, 92, .08), rgba(7, 8, 8, .94));
}
.mentor-filled {
  flex: 0 0 auto;
  color: #72e6ad;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.workbook-field > small { display: block; margin-top: .32rem; color: var(--muted); }
.workbook-evidence {
  margin-top: .42rem;
  padding: .45rem .55rem;
  border-radius: 8px;
  color: #8dddb6;
  background: rgba(37, 155, 103, .08);
  font-size: .72rem;
}
.workbook-section-actions { display: flex; justify-content: flex-end; margin-top: .9rem; }
.workbook-inline-wrap {
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 105, 40, .28);
}
.workbook-inline-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1.15rem 1.2rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 106, 40, .28);
  background: linear-gradient(135deg, rgba(255, 87, 24, .12), rgba(12, 9, 8, .96));
}
.workbook-inline-head h2 { margin: .25rem 0; }
.workbook-inline-head p { margin: 0; color: var(--muted); }
.workbook-inline-head > div:last-child { text-align: right; }
.workbook-inline-head > div:last-child b { display: block; color: #ff783d; font-size: 1.55rem; }
.workbook-inline-head > div:last-child small { white-space: nowrap; color: var(--muted); }
.workbook-activity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}
.workbook-activity > span { grid-column: 1 / -1; }
.workbook-activity > div {
  display: grid;
  gap: .2rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: #0e0b0a;
}
.workbook-activity small { color: var(--muted); }
.workbook-suggestions {
  margin-bottom: 1rem;
  padding: .9rem;
  border: 1px solid rgba(255, 176, 55, .32);
  border-radius: 18px;
  background: rgba(143, 78, 11, .08);
}
.workbook-suggestions-head { display: grid; gap: .2rem; margin-bottom: .65rem; }
.workbook-suggestions-head span { color: #ffb04d; }
.workbook-suggestion {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
}
.workbook-suggestion + .workbook-suggestion { margin-top: .5rem; }
.workbook-suggestion > div:first-child { display: grid; gap: .18rem; }
.workbook-suggestion small { color: var(--muted); }
.workbook-suggestion p { margin: .2rem 0 0; color: #ffd8b5; }
.workbook-suggestion > div:last-child { display: flex; align-items: center; gap: .4rem; }

/* ============================================================
   THƯ VIỆN — 16 quyển + video do Admin quản lý
   ============================================================ */
.library-purpose {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.library-purpose > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .18rem .65rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(13, 10, 9, .92);
}
.library-purpose span { grid-row: 1 / 3; color: #ff7439; font: 800 .72rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.library-purpose small { color: var(--muted); }
.library-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.library-book-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  min-height: 170px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 130%, rgba(255, 91, 26, .16), transparent 42%),
    linear-gradient(145deg, #130d0a, #090808);
  overflow: clip;
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.library-book-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 105, 42, .45);
  box-shadow: 0 16px 38px rgba(0,0,0,.28);
}
.library-book-spine {
  display: grid;
  place-items: center;
  align-content: space-between;
  padding: .8rem .3rem;
  color: #ff7c43;
  border-right: 1px solid rgba(255, 118, 54, .22);
  background: linear-gradient(180deg, rgba(255, 91, 24, .18), rgba(63, 18, 6, .15));
}
.library-book-spine span { writing-mode: vertical-rl; font: 900 .68rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.library-book-spine i { font-style: normal; font-size: 1.45rem; }
.library-book-copy { align-self: center; padding: 1rem; min-width: 0; }
.library-book-copy > span,
.library-panel-title > span,
.library-detail-cover small,
.library-admin-media > span {
  color: #ff7540;
  font: 900 .65rem ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}
.library-book-copy h2 { margin: .35rem 0 .4rem; font-size: 1.25rem; }
.library-book-copy p { margin: 0; color: var(--muted); }
.library-book-copy > div { display: flex; gap: .65rem; margin-top: .8rem; }
.library-book-copy > div small { padding: .25rem .45rem; border-radius: 999px; color: #cabbb3; background: rgba(255,255,255,.045); }
.library-book-card > button {
  align-self: end;
  margin: 0 1rem 1rem 0;
  padding: 0;
  color: #ff824b;
  background: none;
  border: 0;
  font-weight: 800;
}
.library-back {
  margin-bottom: .8rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: #e5d7d0;
  background: rgba(255,255,255,.035);
}
.library-detail-cover {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.2rem;
  border: 1px solid rgba(255, 108, 39, .3);
  border-radius: 22px;
  background: radial-gradient(circle at 90% 120%, rgba(255, 97, 32, .25), transparent 38%), #110b08;
}
.library-detail-cover > div:first-child {
  display: grid;
  place-items: center;
  gap: .35rem;
  width: 78px;
  aspect-ratio: 1;
  border-radius: 18px;
  color: #ff7a41;
  background: rgba(255, 95, 30, .1);
}
.library-detail-cover > div:first-child span { font: 900 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.library-detail-cover > div:first-child i { font-style: normal; font-size: 1.8rem; }
.library-detail-cover h2 { margin: .25rem 0; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.library-detail-cover p { margin: 0; color: var(--muted); }
.library-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: start;
  gap: 1rem;
}
.library-video-panel,
.library-outline {
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: #0d0a09;
}
.library-panel-title { display: grid; gap: .25rem; margin-bottom: .8rem; }
.library-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
  overflow: hidden;
}
.library-video-frame iframe { width: 100%; height: 100%; border: 0; }
.library-video-help { margin: .6rem 0 0; color: var(--muted); font-size: .78rem; }
.library-video-help a { color: #ff824c; }
.library-video-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 320px;
  padding: 1rem;
  border: 1px dashed rgba(255, 111, 45, .25);
  border-radius: 14px;
  text-align: center;
  background: radial-gradient(circle, rgba(255, 88, 24, .1), transparent 45%), #090808;
}
.library-video-empty > div {
  display: grid;
  place-items: center;
  width: 62px;
  aspect-ratio: 1;
  margin-bottom: .7rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff6e2d, #d93209);
  box-shadow: 0 0 35px rgba(255, 73, 18, .3);
}
.library-video-empty p { color: var(--muted); }
.library-admin-media {
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid rgba(255, 178, 50, .28);
  border-radius: 14px;
  background: rgba(126, 75, 8, .075);
}
.library-admin-media > span { color: #ffb74d; }
.library-admin-media label { margin-top: .65rem; }
.library-learning-points {
  display: grid;
  gap: .45rem;
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  color: #ded1ca;
}
.library-learning-points li::marker { color: #ff7339; font-weight: 800; }
.library-chapters { display: grid; gap: .5rem; margin-bottom: .8rem; }
.library-chapters details {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  overflow: clip;
}
.library-chapters summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .75rem;
  cursor: pointer;
}
.library-chapters summary::-webkit-details-marker { display: none; }
.library-chapters summary span { color: #ff7740; font: 800 .65rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.library-chapters summary i { color: #ff7a42; font-style: normal; }
.library-chapters details[open] summary i { transform: rotate(180deg); }
.library-chapters details p { margin: 0; padding: .75rem; border-top: 1px solid rgba(255,255,255,.05); color: #d3c5be; }
.library-chapters details ul { margin: 0; padding: 0 .75rem .85rem 2rem; color: var(--muted); }
.academy-book-icon { margin: 0 .15rem 0 -.35rem; }
.academy-source-note {
  margin: .55rem 0 .8rem;
  padding: .65rem .75rem;
  border-left: 3px solid #ffad45;
  border-radius: 0 10px 10px 0;
  color: #e5c9a4;
  background: rgba(255, 165, 60, .07);
  font-size: .78rem;
}

/* ---- Cổng đăng nhập ---- */
.gate {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,122,24,.14), transparent 60%), #0e0b09;
}
.gate[hidden] { display: none; }
#nav_admin[hidden],
nav.tabs button[data-view="agents"][hidden] { display: none !important; }
.gate-card {
  width: 100%; max-width: 25rem; padding: 1.8rem 1.6rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  background: rgba(255,255,255,.03); box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.gate-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.gate-brand .mark {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px;
  background: linear-gradient(135deg, #ff7a18, #ffb457); color: #1a1207; font-weight: 800;
}
.gate-brand b { font-size: 1.1rem; color: var(--ink); }
.gate-sub { margin: 0 0 1.1rem; color: var(--faint); font-size: .84rem; line-height: 1.6; }
.gate-tabs { display: flex; gap: .3rem; margin-bottom: 1rem; padding: .22rem; border-radius: 11px; background: rgba(255,255,255,.04); }
.gate-tabs button {
  flex: 1; padding: .5rem; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: .85rem;
}
.gate-tabs button.active { background: rgba(255,140,60,.16); color: #ffb457; font-weight: 700; }
.gate-card label { display: block; margin: .7rem 0 .3rem; color: var(--faint); font-size: .78rem; }
.gate-card input {
  width: 100%; padding: .62rem .75rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: var(--ink); font: inherit;
}
.gate-card input:focus { outline: none; border-color: rgba(255,140,60,.55); }
.gate-remember { display: flex !important; align-items: center; gap: .55rem; margin: .9rem 0 0 !important; cursor: pointer; }
/* `.gate-card input` ở trên đặt width:100% cho MỌI input kể cả checkbox, đè mất
   khung 19px vuông mà style checkbox chung của app (xem input[type=checkbox]
   phía trên) đã vẽ sẵn — khung tích biến mất gần như trong suốt. Ghi đè lại
   đúng kích thước cố định, không đụng border/background/trạng thái đã tích. */
.gate-remember input[type=checkbox] {
  width: 19px !important; height: 19px !important; min-width: 19px;
  padding: 0 !important; margin: 0; flex: 0 0 19px;
  border-radius: 6px !important;   /* đồng bộ bo góc với ô tích chuẩn của app */
}
.gate-remember span { color: var(--muted); font-size: .82rem; }
.gate-go { width: 100%; margin-top: 1.1rem; justify-content: center; }
.gate-msg { min-height: 1.2rem; margin: .6rem 0 0; color: #ff9f7a; font-size: .8rem; text-align: center; }

/* ---- Chấm điểm offer ---- */
.ve-score-empty { margin-top: .8rem; padding: .7rem .85rem; border-radius: 11px; background: rgba(255,255,255,.04); color: var(--muted); font-size: .85rem; }
.ve-score { margin-top: .9rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.ve-score.band-strong { border-color: rgba(74,222,128,.35); }
.ve-score.band-ok     { border-color: rgba(255,180,87,.35); }
.ve-score.band-weak   { border-color: rgba(255,140,60,.4); }
.ve-score.band-bad    { border-color: rgba(248,113,113,.4); }
.ve-score-num { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ve-score-num b { font-size: 2.4rem; line-height: 1; color: var(--ink); }
.ve-score-num span { color: var(--faint); font-size: .95rem; }
.ve-score-num em { font-style: normal; padding: .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255,140,60,.16); color: #ffb457; }
.ve-score-num i { font-style: normal; font-size: .78rem; margin-left: auto; }
.ve-score-num i.up { color: #4ade80; }
.ve-score-num i.down { color: #f87171; }
.ve-score > p { margin: .45rem 0 .8rem; color: var(--muted); font-size: .85rem; }

.ve-bars { display: grid; gap: .4rem; margin-bottom: .9rem; }
.ve-bar { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto; align-items: center; gap: .6rem; font-size: .82rem; }
.ve-bar > span { color: var(--muted); }
.ve-bar > span i { font-style: normal; color: var(--faint); font-size: .74rem; }
.ve-bar > div { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ve-bar > div i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a18, #ffb457); }
.ve-bar > b { color: var(--ink); font-size: .8rem; min-width: 2.6rem; text-align: right; }

.ve-lever { padding: .7rem .85rem; border-radius: 11px; background: rgba(255,140,60,.07); }
.ve-lever > b { display: block; margin-bottom: .35rem; font-size: .85rem; }
.ve-lever ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .83rem; line-height: 1.7; }
.ve-warn { margin-top: .7rem; color: #ffb457; font-size: .8rem; line-height: 1.6; }

.ve-advise { margin-top: .8rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(255,140,60,.28); background: rgba(255,140,60,.05); }
.ve-advise-head { font-weight: 700; color: #ffb457; margin-bottom: .5rem; }
.ve-verdict { margin: 0 0 .7rem; color: var(--ink); font-size: .9rem; line-height: 1.65; }
.ve-fixes { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.ve-fixes li b { color: #ffb457; font-size: .85rem; }
.ve-fixes li p { margin: .2rem 0; color: var(--ink); font-size: .86rem; line-height: 1.6; }
.ve-fixes li small { color: var(--faint); font-size: .78rem; }
.ve-rewrite { margin-top: .9rem; padding: .75rem .85rem; border-radius: 11px; background: rgba(0,0,0,.25); }
.ve-rewrite b { display: block; margin-bottom: .3rem; font-size: .82rem; color: var(--faint); }
.ve-rewrite p { margin: 0 0 .6rem; color: var(--ink); font-size: .88rem; line-height: 1.65; }

/* ---- Thử thách ---- */
/* Atlas sprite chỉ có 10 ô và đã dùng hết, không còn chỗ cho Thử thách — nav
   rơi về ô 0,0 (biểu tượng Tổng quan) còn hero mượn tạm icon-leads (cái loa).
   Cả hai đều sai. Vẽ cờ ô vuông về đích bằng SVG nội tuyến, đè hẳn atlas đi. */
nav.tabs button[data-view="challenge"] .ico,
.icon-challenge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.6 3v18' stroke='%23ff9a4c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4.6 4.2h15.2v8.4H4.6z' stroke='%23ff9a4c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M4.6 4.2h3.8v4.2H4.6zM12.2 4.2H16v4.2h-3.8zM8.4 8.4h3.8v4.2H8.4zM16 8.4h3.8v4.2H16z' fill='%23ff9a4c'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
/* Emoji 🏁 nằm dưới sprite — ẩn đi, nếu không nó lòi ra sau nền trong suốt. */
nav.tabs button[data-view="challenge"] .ico { font-size: 0; }

/* Dải thử thách trên Tổng quan */
.home-challenge {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin: 1rem 0; padding: 1.1rem 1.3rem; border-radius: 18px;
  border: 1px solid rgba(255,140,60,.3);
  background: linear-gradient(120deg, rgba(255,84,33,.14), rgba(255,140,60,.05));
}
.home-challenge.urgent { border-color: rgba(255,140,60,.6); box-shadow: 0 0 32px rgba(255,84,33,.12); }
.home-ch-left { flex: 1 1 18rem; min-width: 0; }
.home-ch-kicker { font-size: .7rem; letter-spacing: .1em; color: #ffb457; font-weight: 700; }
.home-challenge h2 { margin: .3rem 0 .2rem; font-size: 1.15rem; }
.home-challenge p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.home-ch-warn { display: block; margin-top: .5rem; color: #ffb457; font-size: .83rem; }
.home-ch-ok { display: block; margin-top: .5rem; color: #6ee7a0; font-size: .83rem; }
.home-ch-stats { display: flex; gap: .9rem; }
.home-ch-stats > div { text-align: center; }
.home-ch-stats b { display: block; font-size: 1.3rem; color: var(--ink); }
.home-ch-stats span { color: var(--faint); font-size: .72rem; }

/* Việc điền hồ sơ: không có ô tích, bấm là đi thẳng tới chỗ cần điền */
.ch-task-go { cursor: pointer; transition: border-color .15s, background .15s; }
.ch-task-go:hover, .ch-task-go:focus-visible { border-color: rgba(255,140,60,.5); background: rgba(255,140,60,.06); }
.ch-task-go.is-done { border-color: rgba(74,222,128,.3); cursor: default; }
.ch-check {
  display: grid; place-items: center; width: 19px; height: 19px; flex: none;
  border-radius: 6px; border: 1.6px solid rgba(255,169,107,.6);
  color: #ffb457; font-size: .8rem; font-weight: 700; margin-top: .1rem;
}
.ch-task-go.is-done .ch-check { background: linear-gradient(135deg, #4ade80, #22c55e); border-color: transparent; color: #08240f; }

/* Nhật ký báo cáo cũ */
.ch-hist { margin-top: .9rem; }
.ch-hist summary { cursor: pointer; color: #ffb457; font-size: .85rem; padding: .3rem 0; }
.ch-hist-list { display: grid; gap: .3rem; margin: .5rem 0; }
.ch-hist-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center;
  padding: .5rem .7rem; border-radius: 10px; background: rgba(255,255,255,.035);
  cursor: pointer; font-size: .84rem;
}
.ch-hist-row:hover, .ch-hist-row:focus-visible { background: rgba(255,140,60,.09); }
.ch-hist-row i { font-style: normal; color: var(--faint); font-size: .78rem; }
.ch-hist-detail { margin-top: .7rem; padding: .85rem .9rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); }
.ch-hist-head { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .88rem; }
.ch-hist-head span { color: var(--faint); }
.ch-hist-tasks { display: grid; gap: .2rem; margin-bottom: .6rem; font-size: .83rem; }
.ch-hist-tasks .ok { color: #6ee7a0; }
.ch-hist-tasks .no { color: var(--faint); }
.ch-hist-tasks i { font-style: normal; color: var(--faint); font-size: .75rem; }
.ch-hist-block { margin-top: .6rem; }
.ch-hist-block > b { display: block; margin-bottom: .2rem; font-size: .8rem; color: var(--faint); }
.ch-hist-block p { margin: .2rem 0; color: var(--ink); font-size: .85rem; line-height: 1.6; }
.ch-hist-q { color: #ffb457 !important; font-size: .8rem !important; }

.ch-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ch-title b { font-size: 1.05rem; }
.ch-goal { margin: .5rem 0 .8rem; color: var(--ink); font-size: .9rem; line-height: 1.6; }
.ch-pending { padding: .7rem .85rem; border-radius: 11px; background: rgba(255,180,87,.1); color: #ffb457; font-size: .85rem; }

/* ===== Lớp chi tiết từ asset pack trong khu Não ===== */
.br-pack-block { margin-top: .6rem; }
.br-pack-block > summary {
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
  padding: .45rem .6rem;
  border-radius: 9px;
  border: 1px dashed var(--rule);
}
.br-pack-block[open] > summary { color: var(--ink); margin-bottom: .55rem; }

/* ===== Bộ công cụ chi tiết trong trang quyển của Thư viện ===== */
.library-toolkit { display: grid; gap: .4rem; margin: .5rem 0 1rem; }
.library-toolkit details {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .5rem .7rem;
  background: rgba(255, 255, 255, .02);
}
.library-toolkit summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.library-toolkit summary i { margin-left: auto; opacity: .5; font-style: normal; }
.library-toolkit p { margin: .45rem 0 0; font-size: .84rem; line-height: 1.6; }

/* ===== Khu video kiểu YouTube trong Thư viện ===== */
.library-video-hub {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
  background: var(--card);
}
.library-video-hub .library-panel-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.library-video-hub .library-panel-title button { margin-left: auto; }
.lv-player { margin-top: .8rem; }
.lv-player-meta { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-top: .55rem; }
.lv-player-meta b { font-size: 1rem; }
.lv-player-meta span { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lv-mini {
  font: inherit; font-size: .74rem; cursor: pointer;
  color: var(--muted); background: none;
  border: 1px solid var(--rule); border-radius: 7px; padding: .12rem .45rem;
}
.lv-mini.danger { color: #ff7b6b; border-color: rgba(255, 123, 107, .35); }
/* Bố cục kiểu YouTube: phát bên trái, danh sách cột phải cuộn được.
   Điện thoại: xếp dọc — phát trên, danh sách dưới. */
.lv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: .9rem;
  margin-top: .8rem;
  align-items: start;
}
.lv-list {
  display: grid;
  gap: .55rem;
  max-height: 26rem;
  overflow-y: auto;
  padding-right: .2rem;
}
.lv-list .lv-card {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
}
.lv-list .lv-card > b { margin-top: 0; }
@media (max-width: 900px) {
  .lv-layout { grid-template-columns: 1fr; }
  .lv-list { max-height: none; grid-template-columns: 1fr; }
}
.lv-card {
  font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  background: none; border: 1px solid var(--rule); border-radius: 12px;
  padding: .45rem; transition: border-color .12s;
}
.lv-card:hover { border-color: rgba(255, 111, 44, .45); }
.lv-card.playing { border-color: rgba(255, 111, 44, .6); }
.lv-card > b { display: block; font-size: .8rem; line-height: 1.4; margin-top: .4rem; }
.lv-thumb {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #191114; display: grid; place-items: center;
}
.lv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lv-thumb i { font-size: 1.6rem; font-style: normal; opacity: .6; }
.lv-thumb em {
  position: absolute; left: .35rem; bottom: .35rem;
  font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  padding: .12rem .4rem; border-radius: 6px;
  background: rgba(255, 79, 22, .92); color: #fff;
}
.lv-form { margin-top: .8rem; padding: .7rem .8rem; border: 1px dashed var(--rule); border-radius: 11px; }

/* Thuật ngữ tiếng Anh giữ trong ngoặc sau bản dịch — chữ phụ, không tranh chú ý. */
i.term { font-style: normal; font-size: .88em; opacity: .6; }

/* Bảng AI đề xuất điểm Value Equation — đề xuất chờ duyệt, viền cam nhạt. */
.ve-ai {
  margin: .7rem 0;
  padding: .7rem .85rem;
  border: 1px dashed rgba(255, 140, 90, .4);
  border-radius: 12px;
  background: rgba(255, 140, 90, .05);
}
.ve-ai-row { padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.ve-ai-row:last-of-type { border-bottom: none; }
.ve-ai-row > b { font-size: .88rem; }
.ve-ai-row > p { margin: .15rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.lv-form-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: .7rem; }
@media (max-width: 720px) { .lv-form-grid { grid-template-columns: 1fr; } }

/* Đợt đã hết ngày — nói rõ đã xong, đừng để người học tưởng vẫn còn phải làm. */
.ch-over {
  padding: .7rem .85rem;
  border-radius: 11px;
  margin-bottom: .7rem;
  background: rgba(255, 180, 87, .09);
  border: 1px solid rgba(255, 180, 87, .26);
}
.ch-over > b { display: block; color: #ffb457; font-size: .9rem; margin-bottom: .2rem; }
.ch-over > span { font-size: .84rem; line-height: 1.6; color: var(--muted); }
.pill.tag-warn { background: rgba(255, 180, 87, .16); color: #ffb457; }

/* ===== Hộp thoại xác nhận trong app (thay confirm() của trình duyệt) ===== */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
}
.confirm-card {
  width: min(26rem, 100%);
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.confirm-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.confirm-card p { margin: 0 0 1rem; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.confirm-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.ch-mine { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; margin: .6rem 0; }
.ch-mine > div { padding: .55rem .7rem; border-radius: 10px; background: rgba(255,255,255,.04); }
.ch-mine b { display: block; font-size: 1.25rem; color: var(--ink); }
.ch-mine span { color: var(--faint); font-size: .73rem; }

.ch-ready { margin-top: .8rem; padding: .8rem .9rem; border-radius: 12px; background: rgba(255,255,255,.03); }
.ch-ready > div:first-child { display: flex; justify-content: space-between; font-size: .85rem; }
.ch-ready span { color: var(--faint); }
.ch-ready-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); margin: .45rem 0; overflow: hidden; }
.ch-ready-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a18, #ffb457); }

.ch-tasks { display: grid; gap: .5rem; margin: .7rem 0 1rem; }
.ch-task { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .85rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); cursor: pointer; }
.ch-task:hover { border-color: rgba(255,140,60,.35); }
.ch-task input { margin-top: .15rem; }
.ch-task b { display: block; font-size: .88rem; color: var(--ink); }
.ch-task small { display: block; margin: .25rem 0; color: var(--faint); font-size: .78rem; line-height: 1.55; }
.ch-task em { font-style: normal; font-size: .76rem; color: #ffb457; }

.ch-probes { margin: 1rem 0; padding: .85rem .9rem; border-radius: 12px; background: rgba(255,140,60,.06); }
.ch-probes > b { display: block; margin-bottom: .4rem; color: #ffb457; font-size: .85rem; }
.ch-probes label { display: block; margin: .6rem 0 .25rem; font-size: .83rem; color: var(--muted); }

.ch-board { display: grid; gap: .3rem; }
.ch-row { display: grid; grid-template-columns: 2rem 30px 1fr auto auto; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; font-size: .85rem; }
.ch-row.me { background: rgba(255,140,60,.1); }
.ch-row.left { opacity: .5; }
.ch-rank { text-align: center; font-weight: 700; color: var(--faint); }
.ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-name i { font-style: normal; color: var(--faint); font-size: .78rem; }
.ch-stat { color: var(--faint); font-size: .78rem; }
.ch-pts { color: #ffb457; font-size: .95rem; min-width: 2.5rem; text-align: right; }

.adm-ch { padding: .8rem .9rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); margin-bottom: .6rem; }
.adm-ch-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.adm-ch-pending { margin: .5rem 0; padding: .6rem .7rem; border-radius: 10px; background: rgba(255,180,87,.1); }
.adm-ch-pending > b { display: block; margin-bottom: .35rem; font-size: .82rem; color: #ffb457; }
.adm-ch-req { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .84rem; }
.adm-ch-req > span { flex: 1; }

/* Chương trình bám mục tiêu — bản nháp viền cam (chờ duyệt), đã duyệt viền xanh. */
.adm-ch-prog {
  margin: .55rem 0;
  padding: .55rem .7rem;
  border: 1px solid rgba(255, 180, 87, .3);
  border-radius: 11px;
  background: rgba(255, 180, 87, .06);
}
.adm-ch-prog.is-approved {
  border-color: rgba(94, 214, 143, .28);
  background: rgba(94, 214, 143, .05);
}
.adm-ch-prog > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  cursor: pointer;
  font-size: .85rem;
}
.adm-prog-days {
  max-height: 340px;
  overflow-y: auto;
  margin: .5rem 0;
  display: grid;
  gap: .45rem;
}
.adm-prog-day {
  padding: .5rem .6rem;
  border-radius: 9px;
  background: rgba(0,0,0,.28);
}
.adm-prog-day > b { display: block; margin-bottom: .35rem; font-size: .8rem; color: #ffb457; }
.adm-prog-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  padding: .25rem 0;
  font-size: .81rem;
}
.adm-prog-task > div > b { display: block; font-weight: 600; }
.adm-prog-task em {
  display: block;
  margin-top: .1rem;
  color: #9a887f;
  font-size: .74rem;
  font-style: normal;
}

/* ---- Khu quản trị ---- */
.adm-table-wrap { overflow-x: auto; margin: .6rem 0; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 46rem; }
.adm-table th {
  text-align: left; padding: .5rem .6rem; color: var(--faint);
  font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.adm-table td { padding: .6rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.adm-table td b { display: block; color: var(--ink); }
.adm-table td small { color: var(--faint); font-size: .76rem; }
.adm-table tr.off { opacity: .45; }
.adm-acts { display: flex; gap: .3rem; flex-wrap: wrap; }
.adm-acts .btn { padding: .3rem .5rem; font-size: .74rem; }
.btn.danger { color: #ff8a7a; border-color: rgba(255,120,100,.35); }
.btn.danger:hover { background: rgba(255,90,70,.14); }

.adm-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; margin: .5rem 0 .8rem; }
.adm-kv > div { padding: .6rem .7rem; border-radius: 10px; background: rgba(255,255,255,.035); }
.adm-kv b { display: block; font-size: 1.15rem; color: var(--ink); }
.adm-kv span { color: var(--faint); font-size: .74rem; }

.adm-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem; }
.adm-pack { padding: .55rem .7rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); }
.adm-pack b { display: block; font-size: .84rem; }
.adm-pack small { color: var(--faint); font-size: .74rem; }

.adm-new, .acc-pw { margin-top: .9rem; }
.adm-new summary, .acc-pw summary { cursor: pointer; color: #ffb457; font-size: .85rem; padding: .35rem 0; }
.pill.tag-bad { background: rgba(255,90,70,.16); color: #ff8a7a; }

/* ---- Ô chỉ số bấm được + khối giải thích ---- */
.stat-tile[data-stat] { cursor: pointer; transition: border-color .15s, background .15s; }
.stat-tile[data-stat]:hover, .stat-tile[data-stat]:focus-visible { border-color: rgba(255,140,60,.45); background: rgba(255,140,60,.06); }
.stat-tile[data-stat].active { border-color: rgba(255,140,60,.7); background: rgba(255,140,60,.09); }
.stat-lab em { display: block; margin-top: .15rem; font-style: normal; font-size: .74rem; color: var(--faint); }

.ac-explain {
  margin: -.3rem 0 1.1rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(255,140,60,.3); border-radius: 14px;
  background: rgba(255,140,60,.05);
}
.ac-explain h4 { margin: 0 0 .5rem; font-size: .98rem; color: var(--ink); }
.ac-explain p { margin: .45rem 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.ac-explain b { color: var(--ink); }
.ac-explain-steps { margin: .5rem 0 .5rem 1.1rem; padding: 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.ac-explain-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; margin: .7rem 0; }
.ac-explain-split > div { font-size: .82rem; color: var(--ink); }
.ac-explain-split ul, .ac-explain ul { margin: .3rem 0 0 1rem; padding: 0; color: var(--faint); font-size: .8rem; line-height: 1.6; }
.ac-explain-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: .5rem 0; }
.ac-explain-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a18, #ffb457); }
.ac-explain .btn { margin-top: .7rem; }
.ac-concepts-help { margin: .2rem 0 .7rem; color: var(--faint); font-size: .8rem; line-height: 1.6; }
.ac-concept.new { opacity: .5; }
.ac-concept.new .ac-concept-bar i { background: #6b7280; }

/* ---- Kiểm tra xếp mức ---- */
.ac-exam-box {
  margin: 1rem 0 1.2rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.ac-exam-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.ac-exam-head > div:first-child { flex: 1 1 16rem; }
.ac-exam-head b { display: block; color: var(--ink); font-size: .96rem; }
.ac-exam-head small { display: block; margin-top: .2rem; color: var(--faint); font-size: .79rem; line-height: 1.5; }
.ac-exam-last { text-align: right; }
.ac-exam-last span { display: block; color: var(--faint); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.ac-exam-last b { color: #ffb457; font-size: .92rem; }
.ac-exam-last small { color: var(--faint); }
.ac-exam-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .55rem; margin-top: .9rem; }
.ac-exam-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .7rem .8rem; border-radius: 11px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--ink);
  font: inherit;
}
.ac-exam-opt:hover { border-color: rgba(255,140,60,.5); background: rgba(255,140,60,.08); }
.ac-exam-opt i { font-style: normal; font-size: 1.15rem; }
.ac-exam-opt b { font-size: .87rem; }
.ac-exam-opt small { color: var(--faint); font-size: .74rem; }

.ac-exam-rules { margin: .8rem auto; max-width: 34rem; }
.ac-exam-rules p { margin: .3rem 0; color: var(--muted); font-size: .84rem; }
.ac-exam-skip { display: flex; justify-content: center; margin-top: .9rem; }

/* Bảng mức sau khi chấm */
.ac-level { text-align: center; padding: 1.2rem .9rem; border-radius: 14px; margin: .5rem 0 1.1rem; }
.ac-level span { display: block; color: var(--faint); font-size: .68rem; letter-spacing: .1em; }
.ac-level b { display: block; margin: .3rem 0; font-size: 1.6rem; }
.ac-level p { margin: .2rem auto .5rem; max-width: 30rem; color: var(--muted); font-size: .86rem; }
.ac-level small { color: var(--faint); }
.ac-level.lv0 { background: rgba(255,255,255,.04); }
.ac-level.lv0 b { color: var(--muted); }
.ac-level.lv1 { background: rgba(255,175,70,.1); } .ac-level.lv1 b { color: #ffb457; }
.ac-level.lv2 { background: rgba(120,200,255,.1); } .ac-level.lv2 b { color: #7cc7ff; }
.ac-level.lv3 { background: rgba(110,231,160,.1); } .ac-level.lv3 b { color: #6ee7a0; }

.ac-tier-list { display: grid; gap: .55rem; margin-bottom: 1rem; }
.ac-tier { padding: .65rem .8rem; border-radius: 11px; border: 1px solid rgba(255,255,255,.08); }
.ac-tier-h { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.ac-tier-h b { font-size: .87rem; }
.ac-tier-h span { color: var(--faint); font-size: .78rem; }
.ac-tier small { display: block; margin-top: .3rem; color: var(--faint); font-size: .76rem; line-height: 1.5; }
.ac-tier-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: .45rem; overflow: hidden; }
.ac-tier-bar i { display: block; height: 100%; border-radius: 3px; }
.ac-tier.pass .ac-tier-bar i { background: #4ade80; }
.ac-tier.fail .ac-tier-bar i { background: #f87171; }
.ac-tier.thin .ac-tier-bar i { background: #6b7280; }
.ac-tier.pass { border-color: rgba(74,222,128,.3); }
.ac-tier.fail { border-color: rgba(248,113,113,.28); }
.ac-result { text-align: left; }

/* Dải phân chặng giữa các Act — 16 quyển phẳng lì thì không ai thấy được đường đi. */
.ac-act {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 1.9rem 0 .6rem; padding: 0 .1rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ac-act:first-child { margin-top: .4rem; }
.ac-act b { color: var(--ink); font-size: .95rem; letter-spacing: .01em; }
.ac-act small { color: var(--faint); font-size: .78rem; }

@media (max-width: 980px) {
  .workbook-fields { grid-template-columns: 1fr; }
  .workbook-activity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-shelf { grid-template-columns: 1fr; }
  .library-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  main, .view, .business-book-rail-wrap, .workbook-inline-wrap { min-width: 0; max-width: 100%; }
  .business-book-rail-head { align-items: flex-start; }
  .business-book-rail-head > small { display: none; }
  .business-workspace-tabs { padding: .7rem !important; }
  .business-workspace-tabs button { flex-basis: 128px; min-width: 128px; min-height: 104px; }
  .workbook-cover { grid-template-columns: auto 1fr; gap: .8rem; padding: 1rem; }
  .workbook-cover-no { width: 54px; border-radius: 14px; font-size: 1.1rem; }
  .workbook-progress-ring { grid-column: 1 / -1; width: 100%; height: 42px; aspect-ratio: auto; border-radius: 12px; background: linear-gradient(90deg, #ff6326 calc(var(--p) * 1%), rgba(255,255,255,.07) 0); }
  .workbook-progress-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 9px; background: rgba(13,9,8,.9); }
  .workbook-progress-ring > * { position: relative; z-index: 1; }
  .workbook-sync-note { align-items: start; }
  .workbook-section > summary { padding: .85rem; }
  .workbook-section-body { padding: .85rem; }
  .workbook-section-actions .btn { width: 100%; white-space: normal; }
  .workbook-inline-head { align-items: flex-start; }
  .workbook-inline-head > div:last-child { min-width: 70px; }
  .workbook-activity { grid-template-columns: 1fr; }
  .workbook-suggestion { display: grid; }
  .workbook-suggestion > div:last-child { flex-wrap: wrap; }
  .library-purpose { grid-template-columns: 1fr; }
  .library-book-card { grid-template-columns: 52px 1fr; min-height: 150px; }
  .library-book-card > button { grid-column: 2; justify-self: start; margin: 0 1rem .8rem; }
  .library-book-copy { padding: .85rem; }
  .library-book-copy > div { flex-wrap: wrap; }
  .library-detail-cover { grid-template-columns: 58px 1fr; padding: .9rem; }
  .library-detail-cover > div:first-child { width: 58px; border-radius: 14px; }
  .library-video-panel, .library-outline { padding: .8rem; }
  .library-video-empty { min-height: 230px; }
}
@media (max-width: 520px) {
  .business-workspace-tabs button small { display: none; }
  .state-toggle { grid-template-columns: auto 1fr; }
  .state-toggle-status { grid-column: 2; justify-self: start; }
  .commit-empty { align-items: stretch; flex-direction: column; }
  .commit-history > div { grid-template-columns: auto 1fr; }
  .commit-history small { grid-column: 2; }
  .dp-wb-head { gap: .55rem; padding: .9rem .8rem; }
  .dp-wb-ico { display: none; }
  .dp-wb-pct { font-size: .7rem; }
}

/* ============================================================
   HOME COMMAND CENTER — profile data is the source of truth
   ============================================================ */
#view-dashboard {
  --home-bg: #080605;
  --home-panel: #100c0a;
  --home-panel-2: #17100c;
  --home-ink: #fff8f2;
  --home-muted: #a9988e;
  --home-orange: #ff6426;
  --home-ember: #ff9b5e;
  --home-rule: rgba(255, 163, 104, .16);
  max-width: 1180px;
}
.home-dashboard {
  display: grid;
  gap: 1.15rem;
  color: var(--home-ink);
}
.home-mentor-hero {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.4rem);
  padding-bottom: 8.3rem;
  border: 1px solid rgba(255, 146, 79, .22);
  border-radius: 32px;
  isolation: isolate;
  background-color: var(--home-bg);
  background-image:
    linear-gradient(90deg, rgba(8, 6, 5, .08) 0 48%, rgba(8, 6, 5, .02) 70%),
    url('/assets/alex-hormozi-dashboard-hero.png');
  background-size: cover;
  background-position: center;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .32), inset 0 1px rgba(255,255,255,.04);
}
.home-mentor-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 80% 58%, transparent 0 22%, rgba(8, 6, 5, .11) 47%, rgba(8, 6, 5, .38) 78%),
    linear-gradient(90deg, rgba(8, 6, 5, .98) 0%, rgba(8, 6, 5, .88) 31%, rgba(8, 6, 5, .15) 64%, rgba(8, 6, 5, .03));
}
.home-mentor-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 180px;
  background: linear-gradient(transparent, rgba(8,6,5,.94) 72%);
  pointer-events: none;
}
.home-hero-copy {
  position: relative;
  z-index: 2;
  width: min(58%, 620px);
}
.home-kicker,
.home-section-kicker,
.home-section-head > div > span,
.home-guide-strip > div:first-child > span {
  font: 700 .67rem/1 var(--mono);
  letter-spacing: .15em;
  color: var(--home-ember);
}
.home-kicker {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.4rem;
}
.home-kicker i {
  width: 24px;
  height: 1px;
  background: var(--home-orange);
  box-shadow: 0 0 14px rgba(255,100,38,.75);
}
.home-hero-copy h1 {
  max-width: 11ch;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.home-hero-copy h1 em {
  color: var(--home-ink);
  font-style: normal;
  font-weight: 400;
}
.home-hero-copy p {
  max-width: 55ch;
  margin: 1.4rem 0 0;
  color: #baa99f;
  font-size: 1rem;
  line-height: 1.65;
}
.home-hero-quote {
  position: relative;
  max-width: 48ch;
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.2rem;
  border-left: 2px solid rgba(255, 100, 38, .55);
  color: #eaded7;
  font: 500 1.02rem/1.5 var(--font);
  font-style: italic;
  text-wrap: balance;
}
.home-hero-quote i {
  position: absolute;
  top: -.5rem;
  left: -.15rem;
  color: var(--home-ember);
  font: 700 2.2rem/1 Georgia, serif;
  font-style: normal;
  opacity: .55;
}
.home-hero-actions {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.7rem;
}
.home-primary,
.home-secondary {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 700 .88rem var(--font);
}
.home-primary {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .35rem .4rem .35rem 1.15rem;
  color: #180a04;
  background: linear-gradient(135deg, #ffad78, var(--home-orange));
  box-shadow: 0 12px 34px rgba(255, 80, 17, .22);
}
.home-primary b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(22,7,2,.85);
}
.home-secondary {
  padding: 0 1.1rem;
  border: 1px solid rgba(255,255,255,.13);
  color: #eaded7;
  background: rgba(255,255,255,.035);
}
.home-secondary span { margin-left: .4rem; color: var(--home-ember); }
.home-primary,
.home-secondary,
.home-pillar,
.home-route,
.home-profile-meter > button,
.home-guide-actions button {
  transition: transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}
.home-primary:hover,
.home-secondary:hover,
.home-pillar:hover,
.home-route:hover,
.home-profile-meter > button:hover,
.home-guide-actions button:hover {
  transform: translateY(-2px);
}
.home-primary:focus-visible,
.home-secondary:focus-visible,
.home-pillar:focus-visible,
.home-route:focus-visible,
.home-profile-meter > button:focus-visible,
.home-guide-actions button:focus-visible {
  outline: 2px solid #ffaf78;
  outline-offset: 3px;
}
.home-portrait-caption {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 7.4rem;
  display: grid;
  gap: .12rem;
  padding-left: .65rem;
  border-left: 2px solid var(--home-orange);
  font-family: var(--mono);
  text-align: left;
}
.home-portrait-caption span {
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
}
.home-portrait-caption b {
  color: #a99285;
  font-size: .58rem;
  font-weight: 400;
}
.home-hero-metrics {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 3vw, 2.5rem);
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(12, 8, 6, .72);
  backdrop-filter: blur(18px);
}
.home-hero-metrics > div {
  min-width: 0;
  padding: .85rem 1rem;
  border-right: 1px solid rgba(255,255,255,.07);
}
.home-hero-metrics > div:last-child { border-right: 0; }
.home-hero-metrics span {
  display: block;
  overflow: hidden;
  color: #927f74;
  font: 700 .56rem var(--mono);
  letter-spacing: .11em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero-metrics b {
  display: block;
  margin-top: .16rem;
  color: #fff9f4;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
}
.home-hero-metrics small {
  color: #a99588;
  font-size: .68rem;
  font-weight: 400;
}
.home-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  gap: 1.15rem;
}
.home-next-card,
.home-profile-meter,
.home-business-section,
.home-route-section,
.home-guide-strip {
  border: 1px solid var(--home-rule);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 100%, rgba(255, 88, 24, .08), transparent 38%),
    var(--home-panel);
}
.home-next-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 3vw, 2.2rem);
}
.home-section-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.home-section-kicker i {
  padding: .28rem .5rem;
  border: 1px solid rgba(255, 117, 54, .25);
  border-radius: 999px;
  color: #e7c9b7;
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .12em;
}
.home-next-book {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  margin-top: 2rem;
}
.home-next-book > span {
  color: var(--home-orange);
  font: 700 2.35rem/1 var(--mono);
  letter-spacing: -.08em;
}
.home-next-book > div {
  display: grid;
  padding-left: .8rem;
  border-left: 1px solid rgba(255,255,255,.1);
}
.home-next-book small { color: #827168; }
.home-next-book b { color: #eaddd5; }
.home-next-book > i { font-size: 2rem; font-style: normal; }
.home-next-card > h2 {
  max-width: 28ch;
  margin-top: 1.25rem;
  color: #fff9f5;
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.home-next-card > p {
  max-width: 62ch;
  margin-top: .7rem;
  color: var(--home-muted);
}
.home-next-progress { margin-top: auto; padding-top: 1.5rem; }
.home-next-progress > div {
  display: flex;
  justify-content: space-between;
  color: #9f8e84;
  font-size: .72rem;
}
.home-next-progress > div b { color: #fff; }
.home-next-progress > i {
  height: 4px;
  display: block;
  overflow: hidden;
  margin-top: .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.home-next-progress > i span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--home-orange), #ffb06f);
  box-shadow: 0 0 12px rgba(255,100,38,.5);
}
.home-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.15rem;
}
.home-next-actions .btn { margin: 0; }
.home-complete-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-top: 2rem;
  border-radius: 50%;
  color: #07140b;
  background: #63d98a;
  font-size: 1.8rem;
}
.home-profile-meter {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
}
.home-meter-orbit {
  width: 144px;
  height: 144px;
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: conic-gradient(var(--home-orange) calc(var(--home-progress) * 1%), rgba(255,255,255,.075) 0);
  box-shadow: 0 0 44px rgba(255,84,22,.1);
}
.home-meter-orbit::before {
  content: "";
  grid-area: 1 / 1;
  width: 114px;
  height: 114px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  background: #0b0807;
}
.home-meter-orbit > div {
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  text-align: center;
}
.home-meter-orbit b {
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.home-meter-orbit span {
  margin-top: .25rem;
  color: #8e7d73;
  font-size: .68rem;
}
.home-profile-meter h3 {
  color: #fff8f3;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.home-profile-meter > p {
  margin-top: .6rem;
  color: var(--home-muted);
  font-size: .83rem;
}
.home-profile-meter > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1.2rem;
  padding: .72rem .8rem;
  border: 1px solid rgba(255, 111, 45, .24);
  border-radius: 12px;
  color: #f8eae1;
  background: rgba(255, 97, 34, .08);
  font-weight: 700;
  cursor: pointer;
}
.home-profile-meter > button span { color: var(--home-orange); }
.home-activity,
.home-empty-hint {
  margin-top: auto;
  padding-top: 1.2rem;
}
.home-activity {
  display: grid;
  gap: .4rem;
}
.home-activity > span {
  color: #806e64;
  font: 700 .58rem var(--mono);
  letter-spacing: .11em;
}
.home-activity small { color: #8f7d73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-activity small b { color: #d9cbc3; }
.home-empty-hint {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  color: #8f7e74;
  font-size: .75rem;
}
.home-empty-hint i {
  color: var(--home-orange);
  font: 700 .68rem var(--mono);
  font-style: normal;
}
.home-business-section,
.home-route-section {
  padding: clamp(1.25rem, 3vw, 2.1rem);
}
.home-section-head {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(280px, 1fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.4rem;
}
.home-section-head h2,
.home-guide-strip h2 {
  margin-top: .42rem;
  color: #fff8f3;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.home-section-head > p {
  color: var(--home-muted);
  font-size: .86rem;
}
.home-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.home-pillar {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 300px;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(160deg, rgba(255,255,255,.026), transparent 55%),
    #0b0807;
  cursor: pointer;
}
.home-pillar::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -45px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(255, 100, 38, .14);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 91, 24, .06);
}
.home-pillar:hover { border-color: rgba(255, 105, 43, .35); }
.home-pillar-order {
  color: #765f53;
  font: 700 .62rem var(--mono);
  letter-spacing: .12em;
}
.home-pillar > i {
  margin: .9rem 0 .7rem;
  font-size: 2rem;
  font-style: normal;
  line-height: 1;
  filter: saturate(.92);
}
.home-pillar h3 { color: #fff8f3; font-size: 1.22rem; }
.home-pillar p {
  margin-top: .35rem;
  color: #95847a;
  font-size: .78rem;
  line-height: 1.5;
}
.home-pillar > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  color: #8f7f76;
  font-size: .68rem;
}
.home-pillar > div b { color: #fff; }
.home-pillar > u {
  width: 100%;
  height: 3px;
  display: block;
  overflow: hidden;
  margin-top: .35rem;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
  text-decoration: none;
}
.home-pillar > u span {
  height: 100%;
  display: block;
  background: var(--home-orange);
}
.home-pillar > em {
  margin-top: .8rem;
  color: #ff8953;
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
}
.home-route-list {
  display: grid;
  border-top: 1px solid rgba(255,255,255,.07);
}
.home-route {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem .2rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.home-route:hover { padding-left: .5rem; background: rgba(255,255,255,.018); }
.home-route > span {
  color: #715e54;
  font: 700 .76rem var(--mono);
}
.home-route.current > span { color: var(--home-orange); }
.home-route > div small {
  color: #7e6c62;
  font: 700 .55rem var(--mono);
  letter-spacing: .12em;
}
.home-route.current > div small { color: var(--home-ember); }
.home-route h3 { color: #f4e9e2; font-size: 1rem; }
.home-route p { color: #89786f; font-size: .76rem; }
.home-route > i {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #8c7a70;
  font-style: normal;
}
.home-route > i b { font: 700 .82rem var(--mono); }
.home-route > i em { color: var(--home-orange); font-style: normal; font-size: 1.1rem; }
.home-guide-strip {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  margin-bottom: 1rem;
}
.home-guide-strip h2 { max-width: 11ch; font-size: 1.5rem; }
.home-guide-strip ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
.home-guide-strip li {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
  padding: .4rem .75rem;
  border-left: 1px solid rgba(255,255,255,.07);
}
.home-guide-strip li > b {
  color: var(--home-orange);
  font: 700 .62rem var(--mono);
}
.home-guide-strip li > span { display: grid; }
.home-guide-strip strong { color: #eee3dc; font-size: .72rem; }
.home-guide-strip small {
  margin-top: .2rem;
  color: #806f66;
  font-size: .64rem;
  line-height: 1.35;
}
.home-guide-actions {
  display: grid;
  gap: .4rem;
}
.home-guide-actions button {
  min-width: 112px;
  padding: .58rem .7rem;
  border: 1px solid rgba(255, 116, 52, .19);
  border-radius: 10px;
  color: #e9dbd3;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  font-weight: 700;
}
.home-guide-actions button:first-child {
  color: #1a0903;
  background: var(--home-orange);
}

@media (max-width: 1040px) {
  .home-mentor-hero { min-height: 540px; }
  .home-hero-copy { width: 62%; }
  .home-hero-copy h1 { font-size: clamp(2.8rem, 7vw, 4.8rem); }
  .home-guide-strip { grid-template-columns: 1fr; }
  .home-guide-strip h2 { max-width: none; }
  .home-guide-actions { grid-template-columns: repeat(2, minmax(0, 160px)); }
}
@media (max-width: 820px) {
  .home-command-grid { grid-template-columns: 1fr; }
  .home-profile-meter {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.2rem;
    align-items: center;
  }
  .home-meter-orbit { grid-row: 1 / 4; margin: 0; }
  .home-profile-meter > button,
  .home-activity,
  .home-empty-hint { grid-column: 1 / -1; }
  .home-section-head { grid-template-columns: 1fr; gap: .6rem; }
  .home-guide-strip ol { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .home-dashboard { gap: .8rem; }
  .home-mentor-hero {
    min-height: 720px;
    display: block;
    padding: 1.5rem 1.25rem 7.3rem;
    border-radius: 24px;
    background-size: auto 60%;
    background-position: 56% 73%;
    background-repeat: no-repeat;
  }
  .home-mentor-hero::before {
    background:
      linear-gradient(180deg, rgba(8,6,5,.98) 0 38%, rgba(8,6,5,.22) 60%, rgba(8,6,5,.72) 84%, #080605 100%);
  }
  .home-hero-copy { width: 100%; }
  .home-hero-copy h1 { max-width: 12ch; font-size: clamp(2.6rem, 12vw, 4.2rem); }
  .home-hero-copy p {
    max-width: 48ch;
    margin-top: 1rem;
    font-size: .88rem;
    line-height: 1.5;
  }
  .home-hero-quote { max-width: 42ch; margin-top: 1.1rem; font-size: .92rem; }
  .home-hero-actions { margin-top: 1.1rem; }
  .home-portrait-caption { right: 1.2rem; bottom: 7rem; }
  .home-hero-metrics {
    left: .65rem;
    right: .65rem;
    bottom: .65rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .home-hero-metrics > div:nth-child(2) { border-right: 0; }
  .home-hero-metrics > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); }
  .home-next-card { min-height: 450px; }
  .home-profile-meter { display: block; }
  .home-meter-orbit { width: 124px; height: 124px; margin-bottom: 1rem; }
  .home-meter-orbit::before { width: 98px; height: 98px; }
  .home-pillar-grid { grid-template-columns: 1fr; }
  .home-pillar { min-height: 220px; }
  .home-route { grid-template-columns: 38px 1fr auto; gap: .65rem; }
  .home-route p { display: none; }
  .home-guide-strip ol { grid-template-columns: 1fr; }
  .home-guide-strip li { padding: .6rem .2rem; border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 440px) {
  .home-mentor-hero { min-height: 750px; }
  .home-kicker { font-size: .58rem; letter-spacing: .1em; }
  .home-hero-actions { align-items: stretch; flex-direction: column; }
  .home-primary,
  .home-secondary { justify-content: space-between; width: 100%; }
  .home-portrait-caption { display: none; }
  .home-next-book > i { display: none; }
  .home-next-book { grid-template-columns: auto 1fr; }
  .home-next-actions { display: grid; }
  .home-next-actions .btn { width: 100%; }
  .home-route > i b { display: none; }
  .home-guide-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .home-primary,
  .home-secondary,
  .home-pillar,
  .home-route,
  .home-profile-meter > button,
  .home-guide-actions button { transition: none; }
}

/* ==========================================================================
   HYBRID SAAS · BUSINESS EVIDENCE / CONNECTED AUDIT
   ========================================================================== */
.business-eyebrow {
  color: #ff8649;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.business-evidence-dock {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 116, 51, .28);
  background:
    radial-gradient(520px 180px at 80% -20%, rgba(255, 96, 30, .16), transparent 66%),
    linear-gradient(145deg, #16100d, #0c0806 72%);
}
.business-evidence-dock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .26;
  background-image: radial-gradient(rgba(255, 141, 77, .48) .7px, transparent .7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
}
.business-evidence-dock > * { position: relative; z-index: 1; }
.business-evidence-head,
.connect-hub-hero,
.connected-source-head,
.proposal-head,
.audit-card-head,
.growth-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.business-evidence-head h2,
.connect-hub-hero h2 {
  margin: .15rem 0 .15rem;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  letter-spacing: -.035em;
}
.business-evidence-head p,
.connect-hub-hero p {
  max-width: 720px;
  color: var(--muted);
  font-size: .86rem;
}
.privacy-seal {
  flex: none;
  padding: .4rem .65rem;
  border: 1px solid rgba(91, 218, 143, .28);
  border-radius: 999px;
  color: #73e7a2;
  background: rgba(46, 150, 91, .09);
  font-family: var(--mono);
  font-size: .66rem;
}
.evidence-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: .5rem;
  align-items: center;
  margin: .9rem 0;
  padding: .65rem;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}
.evidence-flow span {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #cbbdb3;
  font-size: .72rem;
}
.evidence-flow span b { color: #ff7d3c; font-family: var(--mono); }
.evidence-flow i { color: #654338; font-style: normal; }
.evidence-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.business-audit-btn {
  margin-left: auto;
  box-shadow: 0 0 28px rgba(255, 85, 25, .22);
}
.business-link-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .55rem;
  margin-top: .65rem;
}
.business-link-row[hidden] { display: none; }
/* Hiện khi nền tảng chặn đọc (bài Instagram/Facebook, hồ sơ TikTok) — người dùng
   dán tay nội dung thay vì để mentor phân tích trên dữ liệu rỗng. */
.business-link-paste { margin-top: .55rem; }
.business-link-paste[hidden] { display: none; }
.business-link-paste .hint { margin: 0 0 .4rem; }
.business-link-paste textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}
.source-rail {
  display: flex;
  gap: .55rem;
  margin-top: .8rem;
  padding: .2rem 0 .45rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.source-chip {
  min-width: 185px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: .55rem;
  align-items: center;
  padding: .58rem .65rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  color: #b7aaa1;
  text-align: left;
  background: rgba(4,3,2,.62);
  cursor: pointer;
}
.source-chip:hover,
.source-chip.on {
  color: #fff7f1;
  border-color: rgba(255, 121, 55, .48);
  background: linear-gradient(145deg, rgba(255, 91, 31, .12), rgba(255,255,255,.025));
}
.source-chip i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ff8246;
  background: rgba(255, 96, 29, .1);
  font-style: normal;
}
.source-chip span { min-width: 0; display: grid; line-height: 1.15; }
.source-chip b { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.source-chip small { margin-top: .2rem; color: #796c64; font-size: .62rem; }
.source-chip em { color: #ff7c3a; font-size: .74rem; font-style: normal; }
.source-chip.status-needs-connector { opacity: .7; }
.source-empty {
  width: 100%;
  display: grid;
  gap: .15rem;
  padding: .8rem;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 12px;
  color: var(--muted);
  font-size: .78rem;
}
.source-empty b { color: #d9cdc5; }
.pending-image-note,
.business-dock-note {
  align-self: center;
  color: #9b8b80;
  font-size: .72rem;
}
.business-dock-note { margin-top: .5rem; min-height: 1em; }
.business-dock-note.good { color: var(--good); }
.business-dock-note.bad { color: var(--bad); }

#mentor .m-bubble.m-bubble-structured {
  width: min(100%, 920px);
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.audit-card,
.workbook-confirm-card {
  overflow: hidden;
  border: 1px solid rgba(255, 125, 58, .3);
  border-radius: 20px;
  color: #f6eee8;
  background:
    radial-gradient(520px 210px at 88% 0%, rgba(255, 103, 33, .14), transparent 65%),
    linear-gradient(145deg, #18110e, #0c0806 76%);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.audit-card-head { padding: 1rem 1.05rem .8rem; }
.audit-card-head h2 {
  margin-top: .15rem;
  max-width: 620px;
  font-size: 1.18rem;
  letter-spacing: -.03em;
}
.audit-score {
  width: 72px;
  height: 72px;
  flex: none;
  display: grid;
  place-content: center;
  text-align: center;
  border: 7px solid rgba(255, 116, 47, .18);
  border-top-color: #ff7431;
  border-radius: 50%;
  background: #090604;
}
.audit-score b { font-size: 1.05rem; line-height: 1; }
.audit-score span { margin-top: .2rem; color: #8d7d73; font-size: .54rem; }
.audit-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.22);
}
.audit-quality-grid > div { display: grid; gap: .2rem; padding: .75rem 1rem; border-right: 1px solid rgba(255,255,255,.06); }
.audit-quality-grid > div:last-child { border-right: 0; }
.audit-quality-grid span { color: #76675e; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; }
.audit-quality-grid b { overflow: hidden; color: #eaddd4; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.audit-truth { padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.audit-truth summary { color: #f2e8e0; font-size: .82rem; font-weight: 800; cursor: pointer; }
.truth-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: .7rem; }
.truth-columns > div {
  min-width: 0;
  padding: .7rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.truth-columns > div > b { font-family: var(--mono); font-size: .57rem; letter-spacing: .08em; }
.truth-fact { color: #6ee7a1; }
.truth-inference { color: #ffad67; }
.truth-confirm { color: #e9cf86; }
.truth-columns p { margin-top: .48rem; color: #c7b8ae; font-size: .72rem; line-height: 1.35; }
.truth-columns p strong { color: #f5ece6; }
.truth-columns small { display: block; margin-top: .12rem; color: #75675e; font-size: .6rem; }
.constraint-verdict { padding: 1rem; }
.constraint-verdict h2 { margin: .08rem 0 .25rem; font-size: clamp(1.45rem, 4vw, 2.25rem); letter-spacing: -.05em; }
.constraint-verdict p { color: #a8998f; font-size: .78rem; }
.framework-chip {
  display: inline-block;
  margin-top: .55rem;
  padding: .38rem .55rem;
  border: 1px solid rgba(255, 132, 66, .22);
  border-radius: 9px;
  color: #d7b59f;
  background: rgba(255, 89, 28, .07);
  font-size: .68rem;
}
.audit-plan { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid rgba(255,255,255,.06); }
.audit-plan-line { padding: .75rem; border-right: 1px solid rgba(255,255,255,.06); }
.audit-plan-line:last-child { border-right: 0; }
.audit-plan-line b { display: block; margin-bottom: .3rem; color: #ff9b66; font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; }
.audit-plan-line span { color: #b9aaa0; font-size: .68rem; line-height: 1.35; }
.audit-plan-line.stop b { color: #ff6b6b; }
.audit-plan-line.fix b { color: #65dea0; }
.growth-experiment { margin: .9rem; padding: .9rem; border: 1px solid rgba(255, 128, 60, .24); border-radius: 15px; background: rgba(255, 91, 27, .055); }
.growth-title span { color: #ff8446; font-family: var(--mono); font-size: .62rem; font-weight: 800; letter-spacing: .11em; }
.growth-title em { padding: .2rem .42rem; border-radius: 999px; color: #cfb9aa; background: rgba(255,255,255,.05); font-size: .58rem; font-style: normal; }
.growth-title em.on { color: #72e3a2; background: rgba(62, 186, 112, .1); }
.growth-experiment h3 { margin: .45rem 0; font-size: .92rem; line-height: 1.35; }
.growth-experiment p { margin-top: .25rem; color: #ac9c92; font-size: .72rem; }
.growth-experiment p b { color: #e8dcd4; }
.growth-experiment .btn { margin-top: .65rem; }
.audit-proposals,
.workbook-confirm-card { padding: 1rem; }
.audit-proposals { border-top: 1px solid rgba(255,255,255,.06); }
.proposal-head h3,
.workbook-confirm-card h3 { margin: .12rem 0; font-size: .95rem; }
.proposal-head > span { color: #ff8b50; font-family: var(--mono); font-size: .65rem; }
.workbook-confirm-card > p { margin: .25rem 0 .8rem; color: var(--muted); font-size: .75rem; }
.proposal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: center;
  margin-top: .55rem;
  padding: .7rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
}
.proposal-row > div:first-child { min-width: 0; }
.proposal-row b { display: block; color: #eee3db; font-size: .74rem; }
.proposal-row small { display: block; color: #786a61; font-size: .61rem; }
.proposal-row p { margin-top: .25rem; color: #bbaaa0; font-size: .72rem; line-height: 1.35; }
.proposal-row.is-applied,
.proposal-row.is-accepted { border-color: rgba(77, 211, 135, .24); background: rgba(53, 151, 92, .07); }
.proposal-row.is-rejected { opacity: .58; }
.proposal-actions { display: flex; gap: .4rem; }

.business-connect-hub { overflow: hidden; border-color: rgba(255, 119, 52, .3); }
.connect-hub-hero {
  margin: -.2rem -.2rem .9rem;
  padding: 1rem;
  border-radius: 17px;
  background:
    radial-gradient(440px 210px at 85% 0%, rgba(255, 95, 27, .18), transparent 68%),
    #0c0806;
}
.privacy-orbit {
  width: 160px;
  height: 86px;
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .4rem;
  align-items: center;
  color: #6f6057;
  font-family: var(--mono);
  font-size: .55rem;
}
.privacy-orbit i,
.privacy-orbit b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 127, 62, .28);
  border-radius: 50%;
  color: #ff8b50;
  background: rgba(255, 95, 27, .08);
  font-style: normal;
}
.privacy-orbit span { text-align: center; }
.privacy-control {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 360px);
  gap: 1rem;
  align-items: center;
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}
.privacy-control > div { display: grid; }
.privacy-control b { font-size: .82rem; }
.privacy-control small { color: var(--muted); font-size: .7rem; }
.connector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  margin-top: .8rem;
}
.connector-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .55rem;
  align-items: start;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(0,0,0,.2);
}
.connector-card.state-connected,
.connector-card.state-ready { border-color: rgba(67, 197, 123, .2); }
.connector-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ff8a4e;
  background: rgba(255, 92, 27, .1);
  font-weight: 800;
}
.connector-card > div:nth-child(2) { min-width: 0; }
.connector-card b { color: #ecdfd7; font-size: .78rem; }
.connector-card p { margin-top: .15rem; color: #796c64; font-size: .64rem; line-height: 1.35; }
.connector-card > span {
  grid-column: 1 / -1;
  color: #a9988d;
  font-family: var(--mono);
  font-size: .57rem;
}
.connector-card.state-connected > span,
.connector-card.state-ready > span { color: #65dda0; }
.connector-card .btn { grid-column: 2 / 3; justify-self: start; }
.connected-source-head { align-items: center; margin-top: 1rem; }
.connected-source-head > div { display: grid; }
.connected-source-head small { color: var(--muted); font-size: .7rem; }
.connected-source-list { display: grid; gap: .45rem; margin-top: .6rem; }
.connected-source-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: .6rem;
  align-items: center;
  padding: .58rem .65rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
}
.connected-source-row > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ff8446;
  background: rgba(255, 94, 28, .09);
  font-style: normal;
}
.connected-source-row > div { min-width: 0; display: grid; }
.connected-source-row b { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.connected-source-row small { color: #766960; font-size: .62rem; }

@media (max-width: 900px) {
  .connector-grid { grid-template-columns: repeat(2, 1fr); }
  .audit-plan { grid-template-columns: 1fr 1fr; }
  .audit-plan-line { border-bottom: 1px solid rgba(255,255,255,.06); }
  .truth-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .business-evidence-head,
  .connect-hub-hero { display: grid; }
  .privacy-seal { justify-self: start; }
  .privacy-orbit { display: none; }
  .evidence-flow { grid-template-columns: 1fr 1fr; }
  .evidence-flow i { display: none; }
  .evidence-flow span { padding: .35rem; border: 1px solid rgba(255,255,255,.05); border-radius: 8px; }
  .business-audit-btn { width: 100%; margin-left: 0; }
  .business-link-row { grid-template-columns: 1fr; }
  .business-link-row .btn { width: 100%; }
  .audit-quality-grid { grid-template-columns: 1fr; }
  .audit-quality-grid > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .audit-plan { grid-template-columns: 1fr; }
  .audit-plan-line { border-right: 0; }
  .proposal-row { grid-template-columns: 1fr; }
  .proposal-actions { flex-wrap: wrap; }
  .privacy-control { grid-template-columns: 1fr; }
  .connector-grid { grid-template-columns: 1fr; }
  .connected-source-row { grid-template-columns: 30px 1fr; }
  .connected-source-row .btn { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Mentor workspace — compact controls, evidence docks and richer input
   ========================================================================== */
#mentor {
  max-width: 1180px;
  margin-inline: auto;
}
.mentor-control-panel {
  padding: 0;
  overflow: hidden;
}
.mentor-control-panel > summary,
.compact-dock > summary,
.session-switcher > summary {
  list-style: none;
  cursor: pointer;
}
.mentor-control-panel > summary::-webkit-details-marker,
.compact-dock > summary::-webkit-details-marker,
.session-switcher > summary::-webkit-details-marker { display: none; }
.mentor-control-panel > summary {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
}
.mentor-control-panel > summary span { display: grid; gap: .16rem; }
.mentor-control-panel > summary small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.mentor-control-panel > summary em {
  color: #ff9b63;
  font-size: .72rem;
  font-style: normal;
  white-space: nowrap;
}
.mentor-control-panel[open] > summary { border-bottom: 1px solid var(--rule); }
.mentor-control-body {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: .85rem 1rem;
  align-items: end;
  padding: .9rem 1rem 1rem;
}
.mentor-control-body select { margin: .25rem 0 0; }
.mentor-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.mentor-control-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
}
.wake-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 750;
}
.wake-toggle input { width: auto; margin: 0; accent-color: #ff6428; }
.wake-toggle.on,
.wake-toggle:has(input:checked) {
  color: #fff4ed;
  border-color: rgba(255, 103, 39, .55);
  background: rgba(255, 92, 24, .09);
  box-shadow: 0 0 18px rgba(255, 85, 22, .12);
}
.chat-meta-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: center;
  margin-bottom: .65rem;
}
.session-switcher { position: relative; }
.session-switcher > summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: #e5d7cf;
  background: rgba(255,255,255,.025);
  font-size: .72rem;
  font-weight: 750;
}
.session-switcher[open] > summary { border-color: rgba(255, 110, 43, .45); }
.session-switcher .sess-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + .45rem);
  left: 0;
  width: min(420px, 78vw);
  max-height: 280px;
  overflow: auto;
  padding: .55rem;
  border: 1px solid rgba(255, 120, 52, .28);
  border-radius: 14px;
  background: #130d0a;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.chat-source-state {
  color: #9c8e86;
  font-size: .67rem;
  white-space: nowrap;
}
.compact-dock {
  position: relative;
  margin-bottom: .55rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.compact-dock > summary {
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .65rem .8rem;
}
.compact-dock > summary span { min-width: 0; display: grid; gap: .05rem; }
.compact-dock > summary b {
  color: #ff8449;
  font: 700 .55rem/1 var(--mono);
  letter-spacing: .14em;
}
.compact-dock > summary strong { color: #efe5df; font-size: .78rem; }
.compact-dock > summary em {
  overflow: hidden;
  color: #87786f;
  font-size: .65rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-dock[open] { border-color: rgba(255, 117, 47, .24); }
.compact-dock[open] > summary { border-bottom: 1px solid rgba(255,255,255,.055); }
.compact-dock .dock-body { padding: .8rem; }
#mentor .mentor-chat-card .m-thread {
  min-height: 390px;
  max-height: 62vh;
}
#mentor .m-input {
  position: sticky;
  bottom: .35rem;
  z-index: 6;
  backdrop-filter: blur(18px);
}
#mentor .m-input-pill textarea { min-height: 52px; }

/* A source can now be toggled and removed independently. */
.source-chip {
  position: relative;
  min-width: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem;
  padding: .25rem;
}
.source-chip-toggle {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  padding: .38rem .3rem;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.source-chip-remove {
  width: 28px;
  min-width: 28px;
  height: 28px;
  align-self: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  color: #8f7d73;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  font-size: 1rem;
}
.source-chip-remove:hover {
  color: #fff;
  border-color: rgba(255, 76, 48, .55);
  background: rgba(255, 66, 36, .16);
}

/* Audit copy should teach the model, not look like an unexplained form. */
.growth-help {
  margin: .7rem 0;
  border: 1px solid rgba(255, 137, 73, .16);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}
.growth-help summary {
  padding: .6rem .7rem;
  color: #ffb181;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
}
.growth-help p { margin: 0; padding: 0 .7rem .7rem; color: #ab9a90; font-size: .72rem; }
.growth-data-warning {
  margin-top: .55rem;
  padding: .55rem .65rem;
  border-left: 3px solid #ff7b3b;
  color: #d7c7be;
  background: rgba(255, 105, 36, .06);
  font-size: .7rem;
}

/* Academy feedback and drag/click sorting affordance. */
.ac-use-tip {
  margin: 0 0 .65rem;
  color: #ad9f96;
  font-size: .72rem;
}
.ac-sort-g {
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ac-sort-g:hover,
.ac-sort-g:focus-visible,
.ac-sort-g.drag-over {
  outline: none;
  border-color: #ff7b3a;
  background: rgba(255, 104, 38, .07);
  transform: translateY(-1px);
}
.ac-sort-g > small {
  display: block;
  margin-top: .4rem;
  color: #72675f;
  text-align: center;
  font-size: .61rem;
}
.ac-sitem.sel {
  color: #fff;
  border-color: #ff8b50;
  background: rgba(255, 102, 38, .18);
  box-shadow: 0 0 0 2px rgba(255, 101, 37, .08);
}
.ac-answer-guide {
  margin-top: .75rem;
  padding: .72rem .8rem;
  border: 1px solid rgba(72, 255, 171, .2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(12, 67, 46, .22), rgba(255,255,255,.018));
}
.ac-answer-guide > span {
  display: block;
  margin-bottom: .35rem;
  color: #54efaa;
  font: 800 .59rem/1 var(--mono);
  letter-spacing: .13em;
}
.ac-answer-guide strong {
  display: block;
  color: #fff;
  font-size: .84rem;
  font-weight: 900;
  line-height: 1.45;
}
.ac-answer-guide p { margin: .35rem 0 0; color: #b5d8c8; font-size: .75rem; }
.neon-check {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  margin-right: .35rem;
  border: 1px solid #70ffc0;
  border-radius: 50%;
  color: #061b11;
  background: #66ffb5;
  box-shadow: 0 0 8px rgba(84,255,176,.75), 0 0 20px rgba(43,255,156,.3);
  font-size: .78rem;
  font-style: normal;
}

/* Connection helper opens the real platform, with a compact explanation first. */
.connector-modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(10px);
}
.connector-modal-card {
  position: relative;
  width: min(580px, 100%);
  padding: 1.25rem;
  border: 1px solid rgba(255, 126, 59, .32);
  border-radius: 20px;
  background: radial-gradient(circle at 100% 0, rgba(255, 83, 26, .15), transparent 36%), #130d0a;
  box-shadow: 0 28px 80px rgba(0,0,0,.65);
}
.connector-modal-card h2 { margin: .35rem 0 .5rem; }
.connector-modal-card p,
.connector-modal-card li { color: #ad9e95; font-size: .78rem; line-height: 1.55; }
.connector-modal-card ol { margin: .75rem 0; padding-left: 1.2rem; }
.connector-modal-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: #d9ccc4;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-size: 1.15rem;
}
.connector-warning {
  padding: .65rem .75rem;
  border-left: 3px solid #ff7835;
  color: #cbbab0;
  background: rgba(255, 105, 35, .06);
  font-size: .7rem;
}
.connector-modal-card .btn { text-decoration: none; }

.schedule-divider {
  height: 1px;
  margin: .85rem 0;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 55, .25), transparent);
}
.account-intro { margin: 0 0 .75rem; color: var(--muted); font-size: .78rem; }
.account-state {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: .7rem;
  align-items: center;
  padding: .7rem;
  border: 1px solid rgba(66, 215, 139, .18);
  border-radius: 13px;
  background: rgba(31, 170, 96, .055);
}
.account-state > span:nth-child(2) { display: grid; }
.account-state small { color: var(--muted); font-size: .68rem; }
.account-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #170804;
  background: linear-gradient(135deg, #ffb16e, #ff5421);
  font-weight: 950;
  overflow: hidden;         /* ảnh phải bị khung bo góc cắt, không tràn ra ngoài */
  flex: none;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar.lg { width: 76px; height: 76px; border-radius: 20px; font-size: 1.8rem; }
.account-avatar.sm { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; }

.acc-avatar-row { display: flex; align-items: center; gap: .9rem; margin: .7rem 0 .3rem; }
.acc-avatar-row .hint { margin: .3rem 0 0; }

/* Thẻ tài khoản ở chân thanh bên — luôn biết đang đăng nhập bằng ai. */
.sidebar-account {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem;
  padding: .35rem .45rem; border-radius: 11px; cursor: pointer;
  transition: background .15s;
}
.sidebar-account:hover, .sidebar-account:focus-visible { background: rgba(255,255,255,.06); }
.sidebar-account-name {
  font-size: .82rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app.sidebar-collapsed .sidebar-account-name { display: none; }
.app.sidebar-collapsed .sidebar-account { justify-content: center; }

/* Sidebar streak must update visually and remain readable at a glance. */
.sidebar-foot .streak-chip {
  border-color: rgba(255, 112, 42, .48);
  color: #fff4ed;
  background: radial-gradient(circle at 18% 50%, rgba(255, 92, 22, .22), transparent 34%), rgba(255, 98, 27, .075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 24px rgba(255, 72, 10, .08);
}
.sidebar-foot .streak-chip small { color: #a99184; }
/* Chuỗi = 0: tắt ngọn lửa cam đi, để người dùng thấy ngay là chuỗi đã đứt
   thay vì tưởng số 0 là lỗi hiển thị. */
.streak-chip.is-cold { border-color: rgba(255, 255, 255, .07); }
.streak-chip.is-cold i { filter: grayscale(1); opacity: .45; }
.sidebar-foot .streak-chip.is-cold .streak { color: #8b7b73; }

@media (max-width: 720px) {
  .mentor-control-body { grid-template-columns: 1fr; }
  .mentor-control-note { grid-column: auto; }
  #mentor .mentor-chat-card { padding: .72rem; }
  #mentor .mentor-chat-card .m-thread { min-height: 46vh; max-height: 60vh; padding: .72rem; }
  #mentor .m-input { gap: .4rem; }
  #mentor .m-input-attach,
  #mentor .m-input-send { width: 42px; height: 42px; }
  #mentor .m-input-pill { padding-left: .8rem; }
  #mentor .m-input-icon { width: 34px; height: 34px; }
  .compact-dock > summary { align-items: flex-start; }
  .compact-dock > summary em { max-width: 42%; }
  .chat-meta-row { align-items: flex-start; }
  .chat-source-state { max-width: 45%; white-space: normal; text-align: right; }
  .account-state { grid-template-columns: 42px 1fr; }
  .account-state .pill { grid-column: 2; justify-self: start; }
}

/* ========================================================================== 
   UX CLARITY PASS · 2026-08
   Một màu cam = hành động chính. Thông tin phụ dùng bề mặt trung tính để người
   mới luôn biết nên đọc gì trước và bấm gì tiếp theo.
   ========================================================================== */

/* Chẩn đoán doanh nghiệp: nói lợi ích trước, số liệu kỹ thuật sau. */
.audit-card {
  border-color: rgba(255,255,255,.1);
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(255, 103, 33, .07), transparent 70%),
    #0d0a08;
  box-shadow: 0 16px 44px rgba(0,0,0,.25);
}
.audit-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.audit-feature-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 122, 58, .24);
  border-radius: 12px;
  color: #ff9a61;
  background: rgba(255, 98, 31, .075);
  font-size: 1.05rem;
}
.audit-summary > div { min-width: 0; }
.audit-summary b { display: block; color: #f7eee8; font-size: .94rem; }
.audit-summary p {
  max-width: 64ch;
  margin-top: .12rem;
  color: #95877f;
  font-size: .72rem;
  line-height: 1.45;
}
.audit-summary time {
  align-self: start;
  padding: .28rem .48rem;
  border-radius: 999px;
  color: #897a71;
  background: rgba(255,255,255,.04);
  font: 700 .58rem var(--mono);
}
.audit-readiness {
  display: grid;
  gap: .4rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.015);
}
.audit-readiness > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #b9aaa1;
  font-size: .72rem;
}
.audit-readiness > div b { color: #f0e5de; }
.audit-readiness > i {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.audit-readiness > i span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #d9632f, #ff9a62);
}
.audit-readiness > small { color: #776b64; font-size: .64rem; line-height: 1.45; }
.audit-truth { padding: .7rem 1rem; }
.audit-truth summary {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: baseline;
  color: #d7cbc4;
  font-size: .76rem;
}
.audit-truth summary small { color: #746861; font-size: .62rem; font-weight: 500; }
.constraint-verdict { padding: 1.1rem 1rem .8rem; }
.constraint-verdict h2 {
  max-width: 32ch;
  margin: .3rem 0 .35rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.constraint-verdict p { max-width: 72ch; color: #a8998f; line-height: 1.5; }
.audit-dont {
  display: grid;
  gap: .12rem;
  margin: .15rem 1rem .8rem;
  padding: .6rem .7rem;
  border-left: 2px solid #ba6b43;
  color: #9e8f86;
  background: rgba(255,255,255,.025);
}
.audit-dont b { color: #d7c5ba; font-size: .7rem; }
.audit-dont span { font-size: .7rem; }
.growth-experiment {
  margin: .2rem 1rem 1rem;
  padding: .9rem;
  border-color: rgba(255, 128, 60, .2);
  background: linear-gradient(135deg, rgba(255, 91, 27, .075), rgba(255,255,255,.014));
}
.growth-experiment .exp-do {
  max-width: 72ch;
  margin-top: .4rem;
  color: #eee4de;
  font-size: .84rem;
}
.audit-action-help {
  display: block;
  max-width: 68ch;
  margin-top: .35rem;
  color: #81736b;
  font-size: .66rem;
  line-height: 1.45;
}
.growth-experiment .btn { min-height: 38px; margin-top: .7rem; }
.audit-proposals summary { color: #ded2cb; font-size: .78rem; cursor: pointer; }

/* Học viện: số liệu là tín hiệu phụ nên gom thành dải nhỏ. Lộ trình bài học và
   nút Học ngay tiếp tục là hành động nổi bật duy nhất. */
.academy-stats {
  gap: .5rem;
  margin: .55rem 0 .7rem;
}
.academy-stats .stat-tile {
  min-height: 68px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .55rem;
  align-items: center;
  padding: .58rem .65rem;
  border-radius: 12px;
  box-shadow: none;
}
.academy-stats .stat-ico {
  width: 28px;
  height: 28px;
  grid-row: 1 / 3;
  margin: 0;
  border-radius: 8px;
  font-size: .78rem;
  filter: saturate(.68);
}
.academy-stats .stat-num {
  align-self: end;
  font-size: 1.02rem;
  line-height: 1.05;
}
.academy-stats .stat-lab {
  align-self: start;
  overflow: hidden;
  margin: .08rem 0 0;
  font-size: .65rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.academy-stats .stat-lab em {
  display: inline;
  margin-left: .2rem;
  font-size: .58rem;
}

/* Kiểm tra kiến thức trở thành công cụ phụ, thu gọn mặc định. */
details.ac-exam-box {
  margin: .55rem 0 1.1rem;
  padding: 0;
  border-color: rgba(255,255,255,.065);
  border-radius: 12px;
  background: rgba(255,255,255,.012);
}
.ac-exam-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: .75rem;
  align-items: center;
  padding: .7rem .8rem;
  list-style: none;
  cursor: pointer;
}
.ac-exam-summary::-webkit-details-marker { display: none; }
.ac-exam-title {
  min-width: 0;
  display: flex;
  gap: .6rem;
  align-items: center;
}
.ac-exam-title > i {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #9d8e85;
  background: rgba(255,255,255,.025);
  font-style: normal;
  font-size: .75rem;
}
.ac-exam-title > span { min-width: 0; display: grid; }
.ac-exam-title b { color: #d8cec8; font-size: .78rem; }
.ac-exam-title small {
  overflow: hidden;
  color: #746861;
  font-size: .64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-exam-last { display: grid; text-align: right; }
.ac-exam-last small { color: #675d57; font-size: .57rem; }
.ac-exam-last b { color: #a99589; font-size: .68rem; font-weight: 600; }
.ac-exam-chevron {
  color: #776960;
  font-style: normal;
  transition: transform .18s ease;
}
.ac-exam-box[open] .ac-exam-chevron { transform: rotate(180deg); }
.ac-exam-body {
  padding: .8rem;
  border-top: 1px solid rgba(255,255,255,.055);
}
.ac-exam-body > p {
  max-width: 72ch;
  color: #85776e;
  font-size: .7rem;
  line-height: 1.5;
}
.ac-exam-opts { margin-top: .65rem; }
.ac-exam-opt {
  padding: .62rem .7rem;
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.018);
}
.ac-exam-opt:hover,
.ac-exam-opt:focus-visible {
  border-color: rgba(255,140,60,.32);
  background: rgba(255,140,60,.045);
  outline: none;
}
.ac-exam-opt i { font-size: .92rem; filter: saturate(.7); }
.ac-exam-opt b { color: #d9cfc9; font-size: .76rem; }
.ac-exam-opt small { font-size: .64rem; }

@media (max-width: 820px) {
  .truth-columns { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .audit-summary { grid-template-columns: 38px minmax(0, 1fr); }
  .audit-feature-icon { width: 38px; height: 38px; }
  .audit-summary time { grid-column: 2; justify-self: start; }
  .audit-truth summary { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .academy-stats { grid-template-columns: repeat(2, 1fr); }
  .ac-exam-summary { grid-template-columns: minmax(0, 1fr) 18px; }
  .ac-exam-last { display: none; }
}

@media (max-width: 440px) {
  .academy-stats .stat-tile { min-height: 64px; }
  .ac-exam-title small { max-width: 52vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-exam-chevron { transition: none; }
}

/* ========================================================================== 
   DASHBOARD BELOW THE HERO · progressive disclosure
   Hero giữ nguyên bản sắc ban đầu. Phần vận hành bên dưới chỉ hiện việc cần làm
   và tiến độ; sơ đồ toàn hệ thống nằm trong một khối người dùng chủ động mở.
   ========================================================================== */

#home_challenge:empty { display: none; }
.home-challenge {
  margin: 0;
  padding: .82rem 1rem;
  gap: .9rem;
  border-color: rgba(255, 140, 60, .2);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(255, 84, 33, .085), rgba(255,255,255,.018));
}
.home-challenge.urgent {
  border-color: rgba(255, 140, 60, .34);
  box-shadow: none;
}
.home-ch-kicker { font-size: .6rem; color: #ca875f; }
.home-challenge h2 { margin: .15rem 0 .05rem; font-size: 1rem; }
.home-challenge p { font-size: .74rem; }
.home-ch-warn,
.home-ch-ok { margin-top: .25rem; font-size: .7rem; }
.home-ch-stats { gap: .65rem; }
.home-ch-stats > div {
  min-width: 44px;
  padding-left: .65rem;
  border-left: 1px solid rgba(255,255,255,.07);
}
.home-ch-stats b { font-size: 1rem; }
.home-ch-stats span { font-size: .6rem; }
.home-challenge > .btn { min-height: 38px; padding: .45rem .8rem; font-size: .74rem; }

.home-command-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .72fr);
  gap: .8rem;
}
.home-next-card {
  min-height: 315px;
  padding: clamp(1.15rem, 2.4vw, 1.55rem);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 100%, rgba(255, 88, 24, .06), transparent 38%),
    #0f0b09;
}
.home-next-book { margin-top: 1.05rem; }
.home-next-book > span { font-size: 1.8rem; }
.home-next-book > i { font-size: 1.45rem; }
.home-next-card > h2 {
  margin-top: .8rem;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
.home-next-card > p { margin-top: .45rem; font-size: .82rem; }
.home-next-progress { padding-top: 1rem; }
.home-next-actions { margin-top: .85rem; }

.home-profile-meter {
  padding: 1.2rem;
  border-radius: 20px;
  background: #0d0a08;
}
.home-meter-orbit {
  width: 104px;
  height: 104px;
  margin-bottom: .9rem;
  box-shadow: none;
}
.home-meter-orbit::before { width: 82px; height: 82px; }
.home-meter-orbit b { font-size: 1.45rem; }
.home-meter-orbit span { font-size: .58rem; }
.home-profile-meter h3 { font-size: .96rem; }
.home-profile-meter > p { margin-top: .42rem; font-size: .72rem; line-height: 1.5; }
.home-profile-meter > button {
  margin-top: .8rem;
  padding: .58rem .65rem;
  font-size: .7rem;
}
.home-activity,
.home-empty-hint { padding-top: .8rem; }
.home-activity small { font-size: .66rem; }
.home-activity small:nth-of-type(n+2) { display: none; }
.home-empty-hint { font-size: .66rem; }

.home-system-details {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  color: var(--home-ink);
  background: rgba(255,255,255,.015);
}
.home-system-details > summary {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1.1rem;
  list-style: none;
  cursor: pointer;
  transition: background .18s ease;
}
.home-system-details > summary::-webkit-details-marker { display: none; }
.home-system-details > summary:hover { background: rgba(255,255,255,.025); }
.home-system-details > summary:focus-visible {
  outline: 2px solid #ff9b5e;
  outline-offset: -3px;
}
.home-system-details > summary > span { min-width: 0; display: grid; }
.home-system-details > summary b { color: #e9dfd9; font-size: .86rem; }
.home-system-details > summary small {
  margin-top: .1rem;
  overflow: hidden;
  color: #7f7169;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-system-details > summary em {
  padding: .28rem .5rem;
  border-radius: 999px;
  color: #7e7068;
  background: rgba(255,255,255,.03);
  font-size: .62rem;
  font-style: normal;
}
.home-system-details > summary > i {
  color: #a88e7e;
  font-style: normal;
  transition: transform .18s ease;
}
.home-system-details[open] > summary {
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.home-system-details[open] > summary > i { transform: rotate(180deg); }
.home-system-body {
  display: grid;
  gap: .75rem;
  padding: .75rem;
}
.home-system-details .home-business-section,
.home-system-details .home-route-section,
.home-system-details .home-guide-strip {
  margin: 0;
  border-color: rgba(255,255,255,.065);
  border-radius: 16px;
  background: #0c0907;
}
.home-system-details .home-business-section,
.home-system-details .home-route-section { padding: clamp(1rem, 2.3vw, 1.5rem); }
.home-system-details .home-section-head { margin-bottom: 1rem; }
.home-system-details .home-section-head h2 { font-size: clamp(1.3rem, 2.3vw, 1.8rem); }
.home-system-details .home-pillar { min-height: 210px; padding: .9rem; }
.home-system-details .home-pillar > i { margin: .6rem 0 .45rem; font-size: 1.45rem; }
.home-system-details .home-pillar h3 { font-size: 1rem; }
.home-system-details .home-pillar > em { margin-top: .55rem; }
.home-system-details .home-route { padding: .78rem .2rem; }
.home-system-details .home-guide-strip { padding: 1rem; }

@media (max-width: 820px) {
  .home-command-grid { grid-template-columns: 1fr; }
  .home-profile-meter {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
  }
  .home-meter-orbit { grid-row: 1 / 4; margin: 0; }
  .home-profile-meter > button,
  .home-activity,
  .home-empty-hint { grid-column: 1 / -1; }
  .home-system-details > summary em { display: none; }
}

@media (max-width: 680px) {
  .home-challenge { align-items: flex-start; }
  .home-ch-stats { order: 3; width: 100%; }
  .home-challenge > .btn { margin-left: auto; }
  .home-next-card { min-height: 330px; }
  .home-profile-meter { display: block; }
  .home-meter-orbit { margin-bottom: .8rem; }
  .home-system-details > summary {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: .6rem;
    padding: .75rem .85rem;
  }
  .home-system-body { padding: .5rem; }
  .home-system-details .home-pillar { min-height: 175px; }
}

@media (max-width: 440px) {
  .home-challenge > .btn { width: 100%; }
  .home-next-actions { display: grid; }
  .home-next-actions .btn { width: 100%; }
  .home-system-details > summary small { max-width: 72vw; }
}

@media (prefers-reduced-motion: reduce) {
  .home-system-details > summary,
  .home-system-details > summary > i { transition: none; }
}