/*
 * Khung v2 cổng giáo viên (menu 6 mục). MỌI selector nằm dưới html[data-ui="v2"]:
 * khi cờ ở host/shell-v2/flag.js trả "v1", file này không có tác dụng gì (rollback, xem
 * DOCS/thiet-ke-gv-2026-10/THIET_KE_LAI_GIAO_DIEN_GV.md mục 14).
 *
 * Màu: bộ sáng dùng ngay. Bộ tối đã định nghĩa nhưng chỉ bật khi app gắn data-ui-theme="dark"
 * — app.js chỉ gắn khi DARK_READY = true (sau khi các màn cũ đã chuyển sang token v2, đợt A6),
 * để không có cảnh khung tối + nội dung sáng chắp vá.
 */
html[data-ui="v2"] {
  --v2-bg: #eef2f9;
  --v2-surface: #ffffff;
  --v2-card: #ffffff;
  --v2-card-2: #f4f7fc;
  --v2-line: #dfe6f1;
  --v2-line-2: #cbd5e3;
  --v2-fg: #16213a;
  --v2-fg-2: #3d4a5c;
  --v2-muted: #5f6b80;
  --v2-accent: #2f5fe0;
  --v2-accent-hover: #2850c8;
  --v2-accent-soft: #e3ebfd;
  --v2-on-accent: #ffffff;
  --v2-ok: #138a4f;
  --v2-ok-soft: #e3f6ec;
  --v2-shadow: 0 10px 30px rgba(22, 33, 58, 0.12);
  --v2-font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
html[data-ui="v2"][data-ui-theme="dark"] {
  --v2-bg: #0e1524;
  --v2-surface: #131c2e;
  --v2-card: #172238;
  --v2-card-2: #1c2942;
  --v2-line: #26334d;
  --v2-line-2: #31405f;
  --v2-fg: #e9eef8;
  --v2-fg-2: #b6c1d6;
  --v2-muted: #8e9ab3;
  --v2-accent: #6a96ff;
  --v2-accent-hover: #7aa2ff;
  --v2-accent-soft: rgba(106, 150, 255, 0.16);
  --v2-on-accent: #0e1524; /* chữ tối trên nút xanh sáng: 6,4:1; chữ xanh trên nền tối ≥ 5,1:1 (WCAG AA) */
  --v2-ok: #34c77b;
  --v2-ok-soft: rgba(52, 199, 123, 0.14);
  --v2-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* Khung cũ dùng token --h-*: ánh xạ sang token v2 để các màn cũ (đang nằm trong khung) đổi
   cùng tông mà không phải sửa từng màn. */
html[data-ui="v2"] .home-shell {
  --h-bg: var(--v2-bg);
  --h-surface: var(--v2-surface);
  --h-border: var(--v2-line);
  --h-text: var(--v2-fg);
  --h-text-muted: var(--v2-muted);
  --h-indigo: var(--v2-accent);
  --h-indigo-dark: var(--v2-accent-hover);
  --h-indigo-weak: var(--v2-accent-soft);
  --h-font: var(--v2-font);
}

/* Nền tối: các màn cũ trong khung (host/style.css dùng --bg/--card/--text…, home.css dùng --h-*) đổi theo token v2.
   Chỉ có tác dụng khi app gắn data-ui-theme="dark" (DARK_READY). Kiểm: tests/e2e/teacher-shell-v2-dark.spec.mjs. */
html[data-ui="v2"][data-ui-theme="dark"] {
  --bg: var(--v2-surface);
  --card: var(--v2-card);
  --card-border: var(--v2-line);
  --accent: var(--v2-accent);
  --accent-strong: var(--v2-accent-hover);
  --accent-weak: var(--v2-accent-soft);
  --accent-ink: var(--v2-on-accent);
  --text: var(--v2-fg);
  --muted: var(--v2-muted);
  --danger: #ff8a8a;
}
html[data-ui="v2"][data-ui-theme="dark"] .home-shell {
  --h-text-faint: #8e9ab3;
  --h-amber-weak: rgba(245, 179, 1, 0.14);
  --h-green: #34c77b;
  --h-green-weak: rgba(52, 199, 123, 0.14);
  --h-blue-weak: rgba(106, 150, 255, 0.14);
  --h-purple-weak: rgba(165, 139, 255, 0.15);
}
/* Active "Hôm nay" must stay readable on the dark sidebar. The legacy sidebar
   and the v2 navigation can both be present during the migration. */
html[data-ui="v2"][data-ui-theme="dark"] .home-nav-item.is-active,
html[data-ui="v2"][data-ui-theme="dark"] .v2-nav-item[aria-current="page"] {
  background: #214e9d;
  color: #ffffff;
}
html[data-ui="v2"][data-ui-theme="dark"] .home-nav-item.is-active .icon,
html[data-ui="v2"][data-ui-theme="dark"] .v2-nav-item[aria-current="page"] .v2-ic {
  color: #ffffff;
}
html[data-ui="v2"][data-ui-theme="dark"] .home-avatar-circle { color: var(--v2-on-accent); }
html[data-ui="v2"][data-ui-theme="dark"] .home-sidebar-logo .brand-on-light { display: none; }
html[data-ui="v2"][data-ui-theme="dark"] .home-sidebar-logo .brand-on-dark { display: block; }
/* Các khối màn cũ có màu viết cứng (style.css, workflow-components.css, class-workflow.css, import-workflow.css):
   chỉ đổi ở nền tối của v2 — v1 và nền sáng giữ nguyên. Ảnh, mã QR, nút Google giữ nền trắng có chủ ý. */
html[data-ui="v2"][data-ui-theme="dark"] {
  --border: var(--v2-line);
  --dk-warn-bg: rgba(245, 179, 1, 0.12); --dk-warn-line: rgba(245, 179, 1, 0.45); --dk-warn-fg: #f5cf6b;
  --dk-ok-bg: rgba(52, 199, 123, 0.12); --dk-ok-line: rgba(52, 199, 123, 0.45); --dk-ok-fg: #6fdca3;
  --dk-bad-bg: rgba(255, 107, 107, 0.12); --dk-bad-line: rgba(255, 107, 107, 0.45); --dk-bad-fg: #ff9b9b;
}
html[data-ui="v2"][data-ui-theme="dark"] .assignment-report-roster-tabs button { border-color: var(--v2-line-2); background: var(--v2-card); color: var(--v2-fg-2); }
html[data-ui="v2"][data-ui-theme="dark"] .assignment-report-roster-tabs button[aria-pressed="true"] { border-color: var(--v2-accent); background: var(--v2-accent-soft); color: var(--v2-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .assignment-report-caveat,
html[data-ui="v2"][data-ui-theme="dark"] .question-ai-review-state.is-warning,
html[data-ui="v2"][data-ui-theme="dark"] .class-profile-group,
html[data-ui="v2"][data-ui-theme="dark"] .class-profile-table tr.is-review { border-color: var(--dk-warn-line); background: var(--dk-warn-bg); color: var(--dk-warn-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .question-ai-review-state.is-reviewed { border-color: var(--dk-ok-line); background: var(--dk-ok-bg); color: var(--dk-ok-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .question-ai-review-state,
html[data-ui="v2"][data-ui-theme="dark"] .editor-review-summary { border-color: var(--v2-line-2); background: var(--v2-card-2); color: var(--v2-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .editor-review-summary strong { color: var(--v2-accent); }
html[data-ui="v2"][data-ui-theme="dark"] .question-stat-statements li.is-correct,
html[data-ui="v2"][data-ui-theme="dark"] .ai-review-choices li.is-correct { color: var(--dk-ok-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .ai-review-light.is-green { background: var(--dk-ok-bg); color: var(--dk-ok-fg); border-color: var(--dk-ok-line); }
html[data-ui="v2"][data-ui-theme="dark"] .ai-review-light.is-red { background: var(--dk-bad-bg); color: var(--dk-bad-fg); border-color: var(--dk-bad-line); }
html[data-ui="v2"][data-ui-theme="dark"] .ai-review-reasons,
html[data-ui="v2"][data-ui-theme="dark"] .ai-review-warning.is-blocker { color: var(--dk-bad-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .menu-item:hover,
html[data-ui="v2"][data-ui-theme="dark"] .folder-tree-item:hover { background: rgba(255, 255, 255, 0.06); }
html[data-ui="v2"][data-ui-theme="dark"] .class-profile-student-panel { background: var(--v2-card); }
html[data-ui="v2"][data-ui-theme="dark"] .class-profile-dist { background: var(--v2-card-2); }
html[data-ui="v2"][data-ui-theme="dark"] .import-steps > [aria-current="step"],
html[data-ui="v2"][data-ui-theme="dark"] .import-progress { border-color: var(--v2-accent); background: var(--v2-accent-soft); color: var(--v2-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .import-file-note { background: var(--v2-card-2); color: var(--v2-fg-2); }
/* Hộp giao bài kiểu thẻ chế độ (assign-mode-card, class-workflow.css): chữ phụ trên nền thẻ đang chọn. */
html[data-ui="v2"][data-ui-theme="dark"] .assign-mode-card small { color: var(--v2-fg-2); }
html[data-ui="v2"][data-ui-theme="dark"] .home-kicker,
html[data-ui="v2"][data-ui-theme="dark"] .home-secondary-card span { color: var(--v2-accent); }
html[data-ui="v2"][data-ui-theme="dark"] .home-flow-steps span { border-color: var(--v2-line-2); background: var(--v2-card); color: var(--v2-fg-2); }
html[data-ui="v2"][data-ui-theme="dark"] .home-flow-steps .is-current { border-color: var(--v2-accent); background: var(--v2-accent-soft); color: var(--v2-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .home-todo-state--loading { background: var(--v2-accent-soft); color: var(--v2-fg); }
html[data-ui="v2"][data-ui-theme="dark"] .home-todo-state--error { background: var(--dk-bad-bg); color: var(--dk-bad-fg); }

/* Ẩn điều hướng cũ (vẫn nằm trong DOM: app.js/home.js còn dùng id bên trong). */
html[data-ui="v2"] .home-sidebar > .home-nav,
html[data-ui="v2"] .home-sidebar > .home-sidebar-bottom,
html[data-ui="v2"] .mobile-workflow-nav { display: none !important; }

.v2-ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Menu trái ─────────────────────────────────────────────────────────────── */
html[data-ui="v2"] .v2-nav { display: flex; flex-direction: column; gap: 2px; }
html[data-ui="v2"] .v2-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 10px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: var(--v2-fg-2); font: 500 15px/1.3 var(--v2-font); text-align: left;
}
html[data-ui="v2"] .v2-nav-item:hover { background: var(--v2-card-2); color: var(--v2-fg); }
html[data-ui="v2"] .v2-nav-item[aria-current="page"] {
  background: var(--v2-accent-soft); color: var(--v2-fg); box-shadow: inset 3px 0 0 var(--v2-accent); font-weight: 600;
}
html[data-ui="v2"] .v2-nav-item[aria-current="page"] .v2-ic { color: var(--v2-accent); }
html[data-ui="v2"] .v2-nav-item:focus-visible,
html[data-ui="v2"] .v2-nav-sub button:focus-visible,
html[data-ui="v2"] .v2-create-btn:focus-visible,
html[data-ui="v2"] .v2-create-menu button:focus-visible,
html[data-ui="v2"] .v2-btn:focus-visible,
html[data-ui="v2"] .v2-mobile-nav button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
html[data-ui="v2"] .v2-nav-sub {
  display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 30px; padding-left: 12px; border-left: 1px solid var(--v2-line);
}
html[data-ui="v2"] .v2-nav-sub button {
  border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  color: var(--v2-fg-2); font: 400 14px/1.3 var(--v2-font);
}
html[data-ui="v2"] .v2-nav-sub button:hover { background: var(--v2-card-2); }
html[data-ui="v2"] .v2-nav-sub button.is-on { color: var(--v2-accent); font-weight: 600; }
html[data-ui="v2"] .v2-nav-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--v2-line); }

/* ── Nút Tạo mới trên thanh trên ──────────────────────────────────────────── */
html[data-ui="v2"] .v2-create-wrap { position: relative; }
html[data-ui="v2"] .v2-create-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border: 0; border-radius: 10px; background: var(--v2-accent); color: var(--v2-on-accent);
  font: 600 14.5px/1 var(--v2-font); cursor: pointer;
}
html[data-ui="v2"] .v2-create-btn:hover { background: var(--v2-accent-hover); }
html[data-ui="v2"] .v2-create-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 300px; max-width: calc(100vw - 32px);
  padding: 6px; border: 1px solid var(--v2-line-2); border-radius: 12px; background: var(--v2-surface); box-shadow: var(--v2-shadow);
}
html[data-ui="v2"] .v2-create-menu[hidden] { display: none; }
/* PB-E09: điện thoại — nút Tạo mới không nằm sát mép phải (còn chuông, Trợ giúp, ảnh đại diện) nên hộp canh theo nút tràn mép trái,
   cắt chữ. Màn hẹp: hộp thành bảng trượt từ dưới lên, rộng trọn màn hình, nằm trên thanh dưới, cuộn được khi màn thấp. */
@media (max-width: 760px) {
  html[data-ui="v2"] .v2-create-menu {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    min-width: 0; max-width: none; max-height: calc(100dvh - 150px); overflow-y: auto; z-index: 60;
  }
}
html[data-ui="v2"] .v2-create-menu button {
  display: flex; width: 100%; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; text-align: left; color: var(--v2-fg); font: 400 14px/1.35 var(--v2-font);
}
html[data-ui="v2"] .v2-create-menu button:hover { background: var(--v2-card-2); }
html[data-ui="v2"] .v2-create-menu strong { display: block; font-weight: 600; }
html[data-ui="v2"] .v2-create-menu small { display: block; color: var(--v2-muted); font-size: 12.5px; }

/* PB-H05: thanh đầu trang dính trên cùng — scrollIntoView / focus của các màn chừa chỗ cho nó, không để phần cần xem nằm khuất dưới. */
html[data-ui="v2"] { scroll-padding-top: 76px; }

/* ── Thanh dưới cho điện thoại ────────────────────────────────────────────── */
html[data-ui="v2"] .v2-mobile-nav { display: none; }
@media (max-width: 760px) {
  html[data-ui="v2"] .v2-mobile-nav {
    position: fixed; inset: auto 0 0; z-index: 24; display: grid; grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--v2-surface); border-top: 1px solid var(--v2-line);
  }
  html[data-ui="v2"] .v2-mobile-nav button {
    display: grid; justify-items: center; gap: 2px; min-height: 58px; border: 0; background: none; cursor: pointer;
    color: var(--v2-muted); font: 500 11.5px/1.2 var(--v2-font);
  }
  html[data-ui="v2"] .v2-mobile-nav button.is-active { color: var(--v2-accent); font-weight: 700; }
  html[data-ui="v2"] .home-main { padding-bottom: 64px; }
  html[data-ui="v2"] .v2-create-label { display: none; }
  html[data-ui="v2"] .v2-create-btn { padding: 8px 10px; }
}

/* ── Trang mới (Video, Công cụ) ───────────────────────────────────────────── */
html[data-ui="v2"] .v2-page { max-width: 1360px; padding: 26px 32px 96px; font-family: var(--v2-font); color: var(--v2-fg); }
html[data-ui="v2"] .v2-page-head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
html[data-ui="v2"] .v2-page h1 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
html[data-ui="v2"] .v2-page h2 { margin: 0; font-size: 18px; }
html[data-ui="v2"] .v2-sub { margin: 4px 0 0; color: var(--v2-fg-2); }
html[data-ui="v2"] .v2-card { background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 12px; padding: 20px; }
html[data-ui="v2"] .v2-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 20px; }
html[data-ui="v2"] .v2-empty p { margin: 0; max-width: 56ch; color: var(--v2-fg-2); }
html[data-ui="v2"] .v2-empty-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--v2-accent-soft); color: var(--v2-accent); }
html[data-ui="v2"] .v2-grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
html[data-ui="v2"] .v2-tool { display: flex; flex-direction: column; gap: 14px; }
html[data-ui="v2"] .v2-tool-head { display: flex; gap: 14px; align-items: flex-start; }
html[data-ui="v2"] .v2-tool-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--v2-accent-soft); color: var(--v2-accent); }
html[data-ui="v2"] .v2-tool-ic--ok { background: var(--v2-ok-soft); color: var(--v2-ok); }
html[data-ui="v2"] .v2-steps { margin: 0; padding-left: 20px; color: var(--v2-fg-2); display: grid; gap: 4px; }
html[data-ui="v2"] .v2-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
html[data-ui="v2"] .v2-tool .v2-row { justify-content: flex-start; }
html[data-ui="v2"] .v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px;
  border: 1px solid var(--v2-line-2); border-radius: 10px; background: transparent; color: var(--v2-fg);
  font: 500 14.5px/1.2 var(--v2-font); cursor: pointer; text-decoration: none;
}
html[data-ui="v2"] .v2-btn:hover { background: var(--v2-card-2); }
html[data-ui="v2"] .v2-btn--primary { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-on-accent); }
html[data-ui="v2"] .v2-btn--primary:hover { background: var(--v2-accent-hover); }
@media (max-width: 720px) {
  html[data-ui="v2"] .v2-page { padding: 18px 16px 96px; }
  html[data-ui="v2"] .v2-page h1 { font-size: 25px; }
}

/* Nút ☰ chỉ cần khi menu trái thu vào (≤ 960px). Ở khung cũ, .home-icon-btn khai báo sau
   .home-menu-btn nên nút hiện cả trên màn rộng; khung v2 sửa lại. */
html[data-ui="v2"] .home-topbar .home-menu-btn { display: none; }
@media (max-width: 960px) {
  html[data-ui="v2"] .home-topbar .home-menu-btn { display: grid; }
}

/* ── Trang Hôm nay (A1) ───────────────────────────────────────────────────── */
html[data-ui="v2"] {
  --v2-warn: #9a6200; --v2-warn-soft: #fdf1d8; --v2-bad: #c62f2f; --v2-bad-soft: #fde6e6;
  --v2-ai: #6a4bd8; --v2-ai-soft: #efeaff;
}
html[data-ui="v2"][data-ui-theme="dark"] {
  --v2-warn: #f1b54a; --v2-warn-soft: rgba(241, 181, 74, 0.15); --v2-bad: #ff8a8a; --v2-bad-soft: rgba(240, 99, 99, 0.14);
  --v2-ai: #a58bff; --v2-ai-soft: rgba(165, 139, 255, 0.15);
}
html[data-ui="v2"] .v2-today-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
html[data-ui="v2"] .v2-section { margin-top: 22px; }
html[data-ui="v2"] .v2-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
html[data-ui="v2"] .v2-page h3 { margin: 0; font-size: 15.5px; line-height: 1.35; }
html[data-ui="v2"] .v2-muted { color: var(--v2-muted); }
html[data-ui="v2"] .v2-small { font-size: 13.5px; }
html[data-ui="v2"] .v2-num { font-variant-numeric: tabular-nums; }
html[data-ui="v2"] .v2-quiet { margin: 0; color: var(--v2-fg-2); }
html[data-ui="v2"] .v2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html[data-ui="v2"] .v2-todo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 14px;
  border: 1px solid var(--v2-line); border-radius: 10px; background: var(--v2-card-2);
}
html[data-ui="v2"] .v2-todo-body { flex: 1 1 200px; min-width: 0; }
html[data-ui="v2"] .v2-todo-body p { margin: 2px 0 0; color: var(--v2-fg-2); font-size: 14px; }
html[data-ui="v2"] .v2-todo-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
html[data-ui="v2"] .v2-tone--bad { background: var(--v2-bad-soft); color: var(--v2-bad); }
html[data-ui="v2"] .v2-tone--warn { background: var(--v2-warn-soft); color: var(--v2-warn); }
html[data-ui="v2"] .v2-tone--ok { background: var(--v2-ok-soft); color: var(--v2-ok); }
html[data-ui="v2"] .v2-tone--ai { background: var(--v2-ai-soft); color: var(--v2-ai); }
html[data-ui="v2"] .v2-tone--info { background: var(--v2-accent-soft); color: var(--v2-accent); }
html[data-ui="v2"] .v2-btn--sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
html[data-ui="v2"] .v2-btn--tonal { background: var(--v2-accent-soft); border-color: transparent; color: var(--v2-accent); }
html[data-ui="v2"] .v2-link { border: 0; background: none; padding: 4px 0; color: var(--v2-accent); font: 500 14.5px/1.3 var(--v2-font); cursor: pointer; }
html[data-ui="v2"] .v2-link:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
html[data-ui="v2"] .v2-grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
html[data-ui="v2"] .v2-active { display: flex; flex-direction: column; gap: 12px; }
html[data-ui="v2"] .v2-active-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
html[data-ui="v2"] .v2-cls { font-weight: 700; font-size: 15px; padding: 4px 10px; border-radius: 8px; background: var(--v2-accent-soft); color: var(--v2-fg); }
html[data-ui="v2"] .v2-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 2px 10px; border-radius: 99px; }
html[data-ui="v2"] .v2-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html[data-ui="v2"] .v2-chip--ok { background: var(--v2-ok-soft); color: var(--v2-ok); }
html[data-ui="v2"] .v2-chip--warn { background: var(--v2-warn-soft); color: var(--v2-warn); }
html[data-ui="v2"] .v2-chip--bad { background: var(--v2-bad-soft); color: var(--v2-bad); }
html[data-ui="v2"] .v2-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
html[data-ui="v2"] .v2-bar { height: 8px; border-radius: 99px; background: var(--v2-line); overflow: hidden; margin-top: 6px; }
html[data-ui="v2"] .v2-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--v2-ok); }
html[data-ui="v2"] .v2-bar--blue > span { background: var(--v2-accent); }
html[data-ui="v2"] .v2-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
html[data-ui="v2"] .v2-actions .v2-btn { flex: 1 1 auto; }
html[data-ui="v2"] .v2-list--plain { gap: 0; }
html[data-ui="v2"] .v2-recent { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--v2-line); }
html[data-ui="v2"] .v2-recent:last-child { border-bottom: 0; }
html[data-ui="v2"] .v2-skel div { height: 56px; border-radius: 10px; background: var(--v2-card-2); margin-bottom: 10px; animation: v2-pulse 1.4s ease-in-out infinite; }
@keyframes v2-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"] .v2-skel div { animation: none; } }
@media (max-width: 1100px) { html[data-ui="v2"] .v2-today-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Ngăn kéo dùng chung (A2) ─────────────────────────────────────────────── */
.v2-drawer-layer { position: fixed; inset: 0; z-index: 1000; font-family: var(--v2-font, system-ui, sans-serif); }
.v2-scrim { position: absolute; inset: 0; background: rgba(4, 8, 18, 0.45); }
.v2-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column;
  background: var(--v2-surface, #fff); color: var(--v2-fg, #16213a); border-left: 1px solid var(--v2-line, #dfe6f1);
  box-shadow: var(--v2-shadow, 0 10px 30px rgba(22, 33, 58, 0.12));
  padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.v2-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px; padding-top: calc(18px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--v2-line, #dfe6f1); }
.v2-drawer-head h2 { margin: 0; font-size: 19px; }
.v2-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.v2-drawer-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--v2-line, #dfe6f1); }
.v2-drawer-foot[hidden] { display: none; }
.v2-foot-spacer { flex: 1; }
.v2-drawer .v2-sub { margin: 4px 0 0; color: var(--v2-fg-2, #3d4a5c); }
.v2-icon-btn { border: 0; background: none; font-size: 26px; line-height: 1; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; color: var(--v2-fg-2, #3d4a5c); }
.v2-icon-btn:hover { background: var(--v2-card-2, #f4f7fc); }
.v2-drawer .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--v2-line-2, #cbd5e3); border-radius: 10px; background: transparent; color: var(--v2-fg, #16213a); font: 500 14.5px/1.2 var(--v2-font, system-ui); cursor: pointer; }
.v2-drawer .v2-btn--primary { background: var(--v2-accent, #2f5fe0); border-color: var(--v2-accent, #2f5fe0); color: var(--v2-on-accent, #fff); }
.v2-drawer .v2-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.v2-btn--danger-ghost { border-color: transparent !important; color: var(--v2-bad, #c62f2f) !important; }
.v2-drawer :focus-visible { outline: 2px solid var(--v2-accent, #2f5fe0); outline-offset: 2px; }
.v2-success { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 4px; }
.v2-success p { margin: 0; }
.v2-success-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--v2-ok-soft, #e3f6ec); color: var(--v2-ok, #138a4f); }
.v2-success-ic .v2-ic { width: 30px; height: 30px; }
.v2-note-box { padding: 12px 14px; border-radius: 10px; background: var(--v2-card-2, #f4f7fc); border: 1px solid var(--v2-line, #dfe6f1); font-size: 14px; }
.v2-revoke-msg, .v2-import-msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--v2-bad-soft, #fde6e6); color: var(--v2-bad, #c62f2f); font-size: 14px; }
.v2-revoke-msg[hidden], .v2-import-msg[hidden] { display: none; }
.v2-drop { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 2px dashed var(--v2-line-2, #cbd5e3); border-radius: 12px; text-align: center; align-items: center; cursor: pointer; }
.v2-drop[hidden] { display: none; }
.v2-import-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-table-wrap { overflow-x: auto; border: 1px solid var(--v2-line, #dfe6f1); border-radius: 10px; }
.v2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v2-table th { text-align: left; font-weight: 500; color: var(--v2-muted, #5f6b80); background: var(--v2-card-2, #f4f7fc); padding: 8px 12px; white-space: nowrap; }
.v2-table td { padding: 8px 12px; border-top: 1px solid var(--v2-line, #dfe6f1); }
.v2-drawer .v2-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 2px 10px; border-radius: 99px; }
.v2-drawer .v2-chip--ok { background: var(--v2-ok-soft, #e3f6ec); color: var(--v2-ok, #138a4f); }
.v2-drawer .v2-chip--warn { background: var(--v2-warn-soft, #fdf1d8); color: var(--v2-warn, #9a6200); }
.v2-drawer .v2-chip--bad { background: var(--v2-bad-soft, #fde6e6); color: var(--v2-bad, #c62f2f); }
.v2-num { font-variant-numeric: tabular-nums; }

/* ── Trang Lớp học (A2) ───────────────────────────────────────────────────── */
html[data-ui="v2"] .v2-class-card { display: flex; flex-direction: column; gap: 14px; }
html[data-ui="v2"] .v2-class-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
html[data-ui="v2"] .v2-class-head .v2-cls { font-size: 18px; }
html[data-ui="v2"] .v2-class-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
html[data-ui="v2"] .v2-box { padding: 12px 14px; border-radius: 10px; background: var(--v2-card-2); border: 1px solid var(--v2-line); display: flex; flex-direction: column; gap: 6px; }
html[data-ui="v2"] .v2-strong { font-weight: 600; }
html[data-ui="v2"] .v2-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
html[data-ui="v2"] .v2-assign-btn { background: var(--v2-accent) !important; border-color: var(--v2-accent) !important; color: var(--v2-on-accent) !important; }
/* Kết nối chéo (X1): menu "Giao ▾" của trang lớp. */
html[data-ui="v2"] .v2-assign-panel { min-width: 250px; max-width: min(320px, calc(100vw - 32px)); }
html[data-ui="v2"] .v2-assign-panel .menu-item strong { display: block; font-weight: 600; }
html[data-ui="v2"] .v2-assign-panel .menu-item small { display: block; color: var(--v2-muted); font-size: 12.5px; margin-top: 2px; }
html[data-ui="v2"] .v2-create-ctx { display: block; color: var(--v2-accent); font-size: 12px; font-weight: 600; margin-top: 2px; }
html[data-ui="v2"] .assignment-recipients-summary { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--v2-accent-soft); color: var(--v2-fg); font-size: 14px; }

/* ── Luyện tập & Kiểm tra (A3) + thành phần dùng chung cho các lane ───────── */
html[data-ui="v2"] .v2-row--end { justify-content: flex-end; }
html[data-ui="v2"] .v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html[data-ui="v2"] .v2-table-wrap, html[data-ui="v2"] .v2-filters label { position: relative; }
html[data-ui="v2"] .v2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--v2-line); margin-bottom: 16px; overflow-x: auto; }
html[data-ui="v2"] .v2-tabs button { border: 0; background: none; padding: 10px 14px; color: var(--v2-fg-2); font: 500 15px/1.3 var(--v2-font); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
html[data-ui="v2"] .v2-tabs button[aria-selected="true"] { color: var(--v2-accent); border-bottom-color: var(--v2-accent); font-weight: 600; }
html[data-ui="v2"] .v2-tabs button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
html[data-ui="v2"] .v2-count { font-size: 12px; color: var(--v2-muted); margin-left: 2px; }
html[data-ui="v2"] .v2-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
html[data-ui="v2"] .v2-search input, html[data-ui="v2"] .v2-select {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--v2-line-2); border-radius: 10px; background: var(--v2-card); color: var(--v2-fg); font: 400 14.5px/1.3 var(--v2-font);
}
html[data-ui="v2"] .v2-search { flex: 1 1 240px; display: flex; }
html[data-ui="v2"] .v2-search input { width: 100%; }
html[data-ui="v2"] .v2-search input:focus-visible, html[data-ui="v2"] .v2-select:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
html[data-ui="v2"] .v2-table-card { padding: 0; overflow: visible; }
html[data-ui="v2"] .v2-table-card .v2-table-wrap { border: 0; overflow: visible; }
html[data-ui="v2"] .v2-table td { vertical-align: middle; }
html[data-ui="v2"] .v2-tt { display: flex; gap: 12px; align-items: center; min-width: 220px; }
html[data-ui="v2"] .v2-tt .v2-todo-ic { width: 36px; height: 36px; }
html[data-ui="v2"] .v2-row-title { border: 0; background: none; padding: 0; font: 600 15px/1.35 var(--v2-font); color: var(--v2-fg); cursor: pointer; text-align: left; }
html[data-ui="v2"] .v2-row-title:hover { color: var(--v2-accent); text-decoration: underline; }
html[data-ui="v2"] .v2-row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
html[data-ui="v2"] .v2-btn--icon { min-width: 36px; padding: 6px 8px; font-size: 18px; line-height: 1; }
html[data-ui="v2"] .v2-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
html[data-ui="v2"] .v2-menu-wrap { position: relative; }
html[data-ui="v2"] .v2-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 6px; background: var(--v2-surface); border: 1px solid var(--v2-line-2); border-radius: 10px; box-shadow: var(--v2-shadow); }
html[data-ui="v2"] .v2-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--v2-fg); font: 400 14.5px/1.3 var(--v2-font); cursor: pointer; }
html[data-ui="v2"] .v2-menu button:hover:not([disabled]) { background: var(--v2-card-2); }
html[data-ui="v2"] .v2-menu button[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 720px) {
  html[data-ui="v2"] .v2-hide-sm { display: none; }
  html[data-ui="v2"] .v2-table-card .v2-table-wrap { overflow-x: auto; }
  html[data-ui="v2"] .v2-tt { min-width: 180px; }
}

/* ── Công cụ dạy học (A6) + chọn một mục trong ngăn kéo ───────────────────── */
html[data-ui="v2"] .v2-chip--info, .v2-drawer .v2-chip--info { background: var(--v2-accent-soft, #e3ebfd); color: var(--v2-accent, #2f5fe0); }
.v2-picklist { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.v2-picklist legend { margin-bottom: 6px; }
.v2-pick { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--v2-line, #dfe6f1); border-radius: 10px; background: var(--v2-card-2, #f4f7fc); cursor: pointer; }
.v2-pick:has(input:checked) { border-color: var(--v2-accent, #2f5fe0); background: var(--v2-accent-soft, #e3ebfd); }
.v2-pick input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--v2-accent, #2f5fe0); flex: none; }

/* Mục Game khởi động (host/shell-v2/games-v2.js) */
html[data-ui="v2"] .v2-game-card { display: flex; flex-direction: column; gap: 10px; }
html[data-ui="v2"] .v2-game-head { display: flex; align-items: center; gap: 12px; }
html[data-ui="v2"] .v2-game-head h3 { margin: 0; font-size: 17px; }
.v2-game-ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--v2-accent-soft, #e3ebfd); font-size: 26px; line-height: 1; }
html[data-ui="v2"] .v2-game-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.v2-drawer-layer--modal .v2-drawer { top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); border: 1px solid var(--v2-line, #dfe6f1); border-radius: 16px; overflow: hidden; }
.v2-game-pick { display: grid; gap: 8px; }
.v2-game-option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 1px solid var(--v2-line, #dfe6f1); border-radius: 12px; background: var(--v2-card-2, #f4f7fc); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.v2-game-option:hover { border-color: var(--v2-accent, #2f5fe0); background: var(--v2-accent-soft, #e3ebfd); }
.v2-game-option strong { display: block; }
.v2-game-option .v2-sub { display: block; margin: 2px 0 0; }
.v2-pick > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-pick .v2-sub { margin: 0; }
.v2-small { font-size: 13.5px; }

/* Trang mở ngay trong vùng giữa (host/shell-v2/embed-view.js): khung đầy vùng giữa, biểu tượng đang tải. */
html[data-ui="v2"] #v2EmbedView { position: relative; padding: 0; display: flex; flex-direction: column; min-height: 0; }
html[data-ui="v2"] #v2EmbedView.hidden { display: none; }
html[data-ui="v2"] .v2-embed-frame { flex: 1 1 auto; display: flex; min-height: 0; }
html[data-ui="v2"] .v2-embed-frame[hidden] { display: none; }
html[data-ui="v2"] .v2-embed-frame iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: var(--v2-bg); }
html[data-ui="v2"] .v2-embed-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: var(--v2-bg); color: var(--v2-fg); z-index: 1; }
html[data-ui="v2"] .v2-embed-status[hidden] { display: none; }
html[data-ui="v2"] .v2-embed-status p { margin: 0; }
html[data-ui="v2"] .v2-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--v2-line-2); border-top-color: var(--v2-accent); animation: v2-spin 0.8s linear infinite; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"] .v2-spinner { animation-duration: 2.4s; } }

/* Thu gọn menu trái (host/shell-v2/nav.js > setCollapsed). Màn hẹp (≤ 960px) menu trượt ra bằng ☰ nên không có nút này. */
html[data-ui="v2"] .home-sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html[data-ui="v2"] .v2-collapse-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--v2-muted); cursor: pointer; }
html[data-ui="v2"] .v2-collapse-btn:hover { background: var(--v2-card-2); color: var(--v2-fg); }
html[data-ui="v2"] .v2-collapse-btn:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
html[data-ui="v2"] .v2-collapse-btn .v2-ic { width: 20px; height: 20px; }
@media (max-width: 960px) { html[data-ui="v2"] .v2-collapse-btn { display: none; } }
@media (min-width: 961px) {
  html[data-ui="v2"] .home-sidebar { transition: width .18s ease, padding .18s ease; }
  html[data-ui="v2"][data-nav-collapsed="1"] .home-sidebar { width: 72px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
  html[data-ui="v2"][data-nav-collapsed="1"] .home-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-ui="v2"][data-nav-collapsed="1"] .home-sidebar-logo { display: none; }
  html[data-ui="v2"][data-nav-collapsed="1"] .v2-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-ui="v2"][data-nav-collapsed="1"] .v2-nav-item > span,
  html[data-ui="v2"][data-nav-collapsed="1"] .v2-nav-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"] .home-sidebar { transition: none; } }

/* Bank is a continuation of practice; return remains usable during loading. */
html[data-ui="v2"] .v2-embed-context { display:flex; align-items:center; gap:18px; flex:none; padding:12px 28px; border-bottom:1px solid var(--v2-line); color:var(--v2-muted); font:13px var(--v2-font,system-ui); }
html[data-ui="v2"] .v2-embed-context[hidden] { display:none; }
html[data-ui="v2"] .v2-embed-context button { min-height:40px; padding:8px 12px; background:var(--v2-card); color:var(--v2-accent); border:1px solid var(--v2-line); border-radius:9px; font:inherit; cursor:pointer; }
html[data-ui="v2"] .v2-embed-has-context .v2-embed-status { top:65px; }
@media(max-width:650px) { html[data-ui="v2"] .v2-embed-context { padding:12px 16px; gap:12px; } }

/* Kho game: ba tab Chọn ngẫu nhiên / Ôn luyện theo nhóm / Ôn luyện cả lớp */
.v2-game-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; border-bottom: 1px solid var(--v2-border, #d9dfeb); }
.v2-game-tab { min-height: 44px; padding: 8px 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.v2-game-tab.is-active { border-bottom-color: var(--v2-accent, #2563eb); color: var(--v2-accent, #2563eb); }
.v2-game-tab:focus-visible { outline: 3px solid var(--v2-accent, #2563eb); outline-offset: 2px; }
.v2-game-pick-title { margin: 12px 0 8px; font-size: 16px; }
/* Thêm bộ câu hỏi cho game (host/shell-v2/games-add-set.js) */
.v2-game-option:disabled { opacity: .6; cursor: progress; }
.v2-game-form { display: grid; gap: 12px; }
.v2-game-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.v2-game-field { display: grid; gap: 6px; min-width: 0; }
.v2-game-field > span { font-weight: 600; font-size: 14px; }
.v2-game-field .v2-select { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px; border: 1px solid var(--v2-line-2, #c9d3e4); border-radius: 10px; background: var(--v2-card, #fff); color: var(--v2-fg, inherit); font: inherit; }
.v2-game-field textarea.v2-select { resize: vertical; }
.v2-game-preview { display: grid; gap: 12px; margin: 0; padding-left: 0; list-style: none; }
.v2-game-preview-q { padding: 12px; border: 1px solid var(--v2-line, #dfe6f1); border-radius: 10px; background: var(--v2-card-2, #f4f7fc); overflow-wrap: anywhere; }
.v2-game-preview-q ol { margin: 6px 0; padding-left: 22px; }
.v2-drawer-body .v2-error:empty { display: none; }
.v2-drawer-body .v2-error { margin: 8px 0 0; color: var(--v2-danger, #b42318); font-weight: 600; }
/* PB-D01: nút "Trợ giúp" ở đầu trang và ngăn hướng dẫn (host/shell-v2/help.js). */
.v2-help-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1px solid var(--v2-line);border-radius:10px;background:var(--v2-card,#fff);color:var(--v2-fg);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.v2-help-btn:hover{border-color:var(--v2-accent);color:var(--v2-accent)}
.v2-help-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.v2-help-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.v2-help-btn{padding:6px 9px}}
.v2-help-lead{margin:0 0 14px;color:var(--v2-muted);line-height:1.5}
.v2-help-topics{display:grid;gap:8px;margin-bottom:18px}
.v2-help-topic{border:1px solid var(--v2-line);border-radius:10px;padding:0 14px}
.v2-help-topic summary{cursor:pointer;padding:12px 0;font-weight:650}
.v2-help-topic ol{margin:0 0 12px;padding-left:20px;display:grid;gap:6px;line-height:1.55}
.v2-help-contact{border-top:1px solid var(--v2-line);padding-top:14px}.v2-help-contact h3{margin:0 0 6px;font-size:16px}.v2-help-contact p{margin:4px 0}

/* Phân tổ cho lớp (host/shell-v2/class-squads.js) */
.v2-squad-setup { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.v2-squad-count { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.v2-squad-count input { width: 72px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--v2-line-2, #cbd5e3); border-radius: 10px; font: inherit; background: var(--v2-surface, #fff); color: inherit; }
.v2-squad-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: -18px; z-index: 1; padding: 8px 0; background: var(--v2-surface, #fff); }
.v2-squad-target { display: inline-flex; align-items: center; gap: 2px; }
.v2-squad-target .v2-icon-btn { font-size: 16px; width: 32px; height: 32px; }
.v2-squad-move:not(:disabled) { border-color: var(--v2-accent, #2f5fe0); color: var(--v2-accent, #2f5fe0); }
.v2-squad-rename-input { width: 150px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--v2-accent, #2f5fe0); border-radius: 10px; font: inherit; background: var(--v2-surface, #fff); color: inherit; }
.v2-squad-selinfo { margin: 0; font-size: 14px; color: var(--v2-muted, #5f6b80); }
.v2-link-btn { border: 0; background: none; padding: 0 2px; color: var(--v2-accent, #2f5fe0); font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: underline; cursor: pointer; }
.v2-squad-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.v2-squad-group { border: 1px solid var(--v2-line, #dfe6f1); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.v2-squad-group--none { border-style: dashed; }
.v2-squad-group h4 { margin: 0 0 6px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.v2-squad-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-squad-group label { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.v2-squad-group label:hover { background: var(--v2-card-2, #f4f7fc); }
.v2-squad-group label.is-picked { background: var(--v2-accent-soft, #e3ebfd); }
.v2-squad-group input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.v2-squad-empty { margin: 0; font-size: 13.5px; }