/* TradeOS — phong cách theo SagaCraft Dashboard: nền slate, panel trắng bo 12px, accent xanh, sidebar nhóm. */
:root {
    --bg: #f1f5f9; --panel: #ffffff; --ink: #0f172a; --muted: #64748b; --border: #e2e8f0;
    --accent: #2563eb; --accent-hover: #1d4ed8; --accent-pressed: #1e40af;
    --danger: #b91c1c; --danger-border: #fecaca;
    --nav-ink: #334155; --nav-group-ink: #94a3b8; --nav-active-bg: #eff6ff; --nav-active-ink: #1d4ed8; --nav-hover-bg: #f1f5f9;
    --row-border: #f1f5f9; --shadow-2: none;
    --badge-info-bg: #dbeafe; --badge-info-fg: #1d4ed8;
    --badge-success-bg: #dcfce7; --badge-success-fg: #15803d;
    --badge-warning-bg: #fef3c7; --badge-warning-fg: #b45309;
    --badge-danger-bg: #fee2e2; --badge-danger-fg: #b91c1c;
    --badge-violet-bg: #ede9fe; --badge-violet-fg: #6d28d9;
    --badge-neutral-bg: #f1f5f9; --badge-neutral-fg: #475569;
    --bar-error-bg: #fef2f2; --bar-error-border: #fecaca; --bar-error-accent: #b91c1c; --bar-error-ink: #7f1d1d;
    --bar-warn-bg: #fffbeb; --bar-warn-border: #fde68a; --bar-warn-accent: #b45309; --bar-warn-ink: #78350f;
    --bar-info-bg: #eff6ff; --bar-info-border: #bfdbfe; --bar-info-accent: #2563eb; --bar-info-ink: #1e3a8a;
    --bar-ok-bg: #f0fdf4; --bar-ok-border: #bbf7d0; --bar-ok-accent: #16a34a; --bar-ok-ink: #14532d;
    --good: #107c10; --bad: #c50f1f;
    --app-font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --mono-font: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
html.dark {
    color-scheme: dark;
    --bg: #1f1f1f; --panel: #292929; --ink: #ffffff; --muted: #adadad; --border: #3d3d3d;
    --accent: #479ef5; --accent-hover: #62abf5; --accent-pressed: #2886de;
    --danger: #fca5a5; --danger-border: #7f1d1d;
    --nav-ink: #d6d6d6; --nav-group-ink: #8a8a8a; --nav-active-bg: #17324f; --nav-active-ink: #79b8ff; --nav-hover-bg: #2f2f2f;
    --row-border: #333333;
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .42), 0 0 2px rgba(0, 0, 0, .32);
    --badge-info-bg: rgba(59, 130, 246, .16); --badge-info-fg: #93c5fd;
    --badge-success-bg: rgba(34, 197, 94, .16); --badge-success-fg: #86efac;
    --badge-warning-bg: rgba(245, 158, 11, .16); --badge-warning-fg: #fcd34d;
    --badge-danger-bg: rgba(239, 68, 68, .16); --badge-danger-fg: #fca5a5;
    --badge-violet-bg: rgba(139, 92, 246, .18); --badge-violet-fg: #c4b5fd;
    --badge-neutral-bg: rgba(148, 163, 184, .16); --badge-neutral-fg: #cbd5e1;
    --bar-error-bg: #2a1416; --bar-error-border: #7f1d1d; --bar-error-accent: #f87171; --bar-error-ink: #fecaca;
    --bar-warn-bg: #2a2013; --bar-warn-border: #78350f; --bar-warn-accent: #fbbf24; --bar-warn-ink: #fde68a;
    --bar-info-bg: #14233a; --bar-info-border: #1e3a8a; --bar-info-accent: #60a5fa; --bar-info-ink: #bfdbfe;
    --bar-ok-bg: #12261a; --bar-ok-border: #14532d; --bar-ok-accent: #4ade80; --bar-ok-ink: #bbf7d0;
    --good: #6ccb5f; --bad: #f87171;
}

html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--app-font); font-size: 14px; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
/* FocusOnNavigate của Blazor focus vào h1 khi chuyển trang — không vẽ khung quanh tiêu đề. */
.app-shell h1:focus { outline: none !important; }
a { color: var(--accent); }

/* Token Fluent theo palette của app (khai báo trên vỏ app để thắng token gán ở html/body). */
.app-shell {
    --colorNeutralBackground1: var(--panel); --colorNeutralBackground2: var(--bg); --colorNeutralBackground3: var(--bg);
    --colorNeutralForeground1: var(--ink); --colorNeutralForeground2: var(--ink); --colorNeutralForeground3: var(--muted);
    --colorNeutralStroke1: var(--border); --colorNeutralStroke2: var(--border);
    --colorBrandBackground: var(--accent); --colorBrandBackgroundHover: var(--accent-hover); --colorBrandBackgroundPressed: var(--accent-pressed);
    --colorBrandForeground1: var(--accent); --colorBrandStroke1: var(--accent);
    --fontFamilyBase: var(--app-font);
}

/* Vỏ app: header · (nav | nội dung cuộn) · footer */
.app-shell { display: flex; flex-direction: column; height: 100vh; }
.app-header { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.app-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 17px; }
.logo-text { font-weight: 600; font-size: 15px; }
.logo-sub { color: var(--muted); font-size: 12px; }
.fluent-spacer, .spacer { flex: 1 1 auto; }
.nav-toggle { display: none; }
.shell-body { flex: 1 1 auto; display: flex; min-height: 0; }
.app-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; background: var(--bg); }
.content { padding: 24px 28px; }
.app-footer { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; padding: 6px 16px; box-sizing: border-box; border-top: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 12px; }

/* Sidebar */
.app-nav { flex: 0 0 232px; display: flex; flex-direction: column; gap: 1px; padding: 8px 8px 16px; box-sizing: border-box; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; }
.app-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px; color: var(--nav-ink); text-decoration: none; font-size: 14px; }
.app-nav a:hover { background: var(--nav-hover-bg); color: var(--ink); }
.app-nav a.active { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 600; }
.nav-glyph { display: inline-flex; }
.nav-glyph svg { fill: currentColor !important; color: currentColor !important; width: 18px !important; height: 18px !important; }
.app-nav-group-label { display: flex; align-items: center; gap: .4rem; width: 100%; padding: 14px 12px 4px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-group-ink); }
.nav-chevron { display: inline-block; transition: transform .15s; font-size: 10px; }
.app-nav-group-label.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-backdrop { display: none; }
@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }
    .app-nav { position: fixed; top: 48px; bottom: 0; left: 0; z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
    .nav-open .app-nav { transform: none; }
    .nav-open .nav-backdrop { display: block; position: fixed; inset: 48px 0 0 0; z-index: 10; background: rgba(15, 23, 42, .35); }
    .content { padding: 16px 12px; }
}

/* Tiêu đề trang và panel */
/* Fluent v5 đặt cỡ h1/h2 bằng adopted stylesheet (đứng sau app.css) — cần specificity cao hơn. */
.app-shell h1 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.app-shell h2 { font-size: 15px; line-height: 1.35; font-weight: 600; margin: 0; }
.app-shell h3 { font-size: 14px; font-weight: 600; margin: 0; }
.panel-head { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-bottom: .75rem; }
/* Nút ở đầu khối giữ nguyên một dòng; ghi chú dài co lại thay vì bóp nút. */
.panel-head > fluent-button, .panel-head > fluent-anchor-button { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
    /* Màn hẹp: tiêu đề + nút trên một hàng, ghi chú xuống hàng riêng thay vì bị ép thành cột hẹp. */
    .section-card .panel-head { flex-wrap: wrap; }
    .section-card .panel-head > .muted { order: 3; flex-basis: 100%; }
}
.page-head { align-items: flex-end; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head p.muted { font-size: .8125rem; line-height: 1.35; margin: 2px 0 0; }
.page-head-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-head-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.section-card { display: block; width: 100%; box-sizing: border-box; padding: 16px; margin-bottom: 1.5rem; border: 1px solid var(--border) !important; background: var(--panel) !important; box-shadow: var(--shadow-2) !important; border-radius: 12px !important; }
.section-card .panel-head h2 + .muted { font-size: 12px; }
.section-danger { border-left: 3px solid var(--bar-error-accent) !important; }

/* Ô KPI */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 1.5rem; }
/* Quy tắc UI: ô KPI cùng hàng luôn cao bằng nhau (Fluent card không tự giãn trong grid). */
.cards > .stat-card { height: auto !important; align-self: stretch !important; }
.stat-card { display: flex !important; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px !important; box-sizing: border-box; border: 1px solid var(--border) !important; background: var(--panel) !important; box-shadow: var(--shadow-2) !important; border-radius: 12px !important; }
.stat-card-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; }
.stat-card-icon svg { fill: currentColor !important; color: currentColor !important; width: 20px !important; height: 20px !important; }
.stat-card-value { font-size: 1.2rem; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-card-label { margin-top: 3px; font-size: .82rem; color: var(--muted); }
.stat-card-hint { font-size: 12px; color: var(--muted); }

/* Bảng */
.grid-shell { overflow: auto; max-height: min(70vh, 760px); border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.grid-shell table { width: 100%; }
.grid-shell th { position: sticky; top: 0; z-index: 2; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
/* Quy tắc UI: chữ trong ô bảng luôn căn giữa theo chiều dọc (ô cao bằng hàng, nội dung ở giữa). */
.app-shell .grid-shell th, .app-shell .grid-shell td { align-content: center !important; align-self: stretch !important; }
/* Không để thanh cuộn ngang trong từng ô; độ rộng cột đặt qua GridTemplateColumns. */
.app-shell .grid-shell td { overflow: hidden !important; }
/* Pill + chữ trong cùng ô: thẳng hàng giữa. */
.cell-row { display: inline-flex; align-items: center; gap: 6px; }
/* Quy tắc UI: hàng bảng cao tối thiểu 44px. Fluent v5 dựng bảng bằng CSS grid (tr display:contents) và ép height 32px, nên phải height:auto + min-height, không đặt height cố định (ô nhiều dòng sẽ bị cắt). */
.grid-shell td { font-size: 13px; height: auto !important; min-height: 44px !important; box-sizing: border-box; border-bottom: 1px solid var(--row-border); }
/* Fluent đặt padding 0 18px cho ô và thắng app.css: cần !important, nếu không chữ nhiều dòng chạm viền hàng. */
.app-shell .grid-shell td { padding-top: 8px !important; padding-bottom: 8px !important; }
.grid-shell th { height: auto !important; min-height: 40px !important; box-sizing: border-box; }
.grid-shell tr:last-child td { border-bottom: 0; }
.mono { font-family: var(--mono-font); font-size: 12.5px; }

/* Giải thích cột / thẻ KPI / ảnh (Shared/ColumnHelp, GlossaryPanel, ChartHelp, StatTile Help): gạch chấm dưới tiêu đề có tooltip, "?" nhỏ cạnh nhãn KPI,
   khối gập dưới bảng / ảnh. Chỉ đổi chữ trong ô tiêu đề — không đổi chiều cao hàng. */
.col-help { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); text-underline-offset: 3px; cursor: help; }
.help-tip { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1; vertical-align: 1px; cursor: help; }
.help-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
details.glossary { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
details.glossary > summary { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
details.glossary[open] > summary { border-bottom: 1px solid var(--border); }
/* Khối gập ngay dưới hàng thẻ KPI (ngoài Section): sát hàng thẻ, chừa khoảng tới Section kế tiếp */
.cards + details.glossary { margin-top: -0.75rem; margin-bottom: 1.5rem; }
.glossary-list { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 16px; margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.glossary-list dt { font-weight: 600; }
.glossary-list dd { margin: 0; }
.chart-help ul { margin: 0; padding: 10px 12px 10px 30px; font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
    .glossary-list { grid-template-columns: 1fr; gap: 2px; }
    .glossary-list dd { margin-bottom: 8px; }
}

/* Badge dạng viên thuốc */
fluent-badge.pill { white-space: nowrap; border-radius: 999px !important; border-color: transparent !important; font-size: .78rem; font-weight: 600; padding: 0 .6rem; min-height: 20px; }
fluent-badge.pill-info { background-color: var(--badge-info-bg) !important; color: var(--badge-info-fg) !important; }
fluent-badge.pill-success { background-color: var(--badge-success-bg) !important; color: var(--badge-success-fg) !important; }
fluent-badge.pill-warning { background-color: var(--badge-warning-bg) !important; color: var(--badge-warning-fg) !important; }
fluent-badge.pill-danger { background-color: var(--badge-danger-bg) !important; color: var(--badge-danger-fg) !important; }
fluent-badge.pill-violet { background-color: var(--badge-violet-bg) !important; color: var(--badge-violet-fg) !important; }
fluent-badge.pill-neutral { background-color: var(--badge-neutral-bg) !important; color: var(--badge-neutral-fg) !important; }

/* Banner thông báo */
.bar { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 1rem; border-radius: 8px; border: 1px solid var(--bar-border); border-left: 3px solid var(--bar-accent); background: var(--bar-bg); color: var(--bar-ink); font-size: 13px; }
.bar strong { display: block; margin-bottom: 2px; }
.bar-error { --bar-bg: var(--bar-error-bg); --bar-border: var(--bar-error-border); --bar-accent: var(--bar-error-accent); --bar-ink: var(--bar-error-ink); }
.bar-warning { --bar-bg: var(--bar-warn-bg); --bar-border: var(--bar-warn-border); --bar-accent: var(--bar-warn-accent); --bar-ink: var(--bar-warn-ink); }
.bar-info { --bar-bg: var(--bar-info-bg); --bar-border: var(--bar-info-border); --bar-accent: var(--bar-info-accent); --bar-ink: var(--bar-info-ink); }
.bar-success { --bar-bg: var(--bar-ok-bg); --bar-border: var(--bar-ok-border); --bar-accent: var(--bar-ok-accent); --bar-ink: var(--bar-ok-ink); }

/* Trạng thái rỗng */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; text-align: center; color: var(--muted); }
.empty-state-icon svg { fill: var(--border) !important; color: var(--border) !important; width: 34px !important; height: 34px !important; }
.empty-state-title { font-size: .875rem; font-weight: 600; color: var(--ink); }
.empty-state-text { font-size: .8125rem; line-height: 1.5; max-width: 380px; }

/* Trạng thái tải (Shared/LoadView, BusyButton): spinner giữ chỗ lần đầu; tải lại = lớp phủ trên nội dung cũ (bảng giữ nguyên cỡ);
   lỗi = dải đỏ + Thử lại. Spinner hiện sau 150 ms để lần tải nhanh không nháy; lớp phủ chặn bấm ngay từ đầu. */
.load-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 24px; box-sizing: border-box; color: var(--muted); font-size: 13px; animation: load-fade-in .2s ease-out .15s both; }
.load-zone { position: relative; }
/* Khối đang tải lại mà chưa có nội dung (VD lỗi lần trước): đủ chỗ cho vòng quay. */
.load-zone.is-loading { min-height: 64px; }
.load-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--panel) 62%, transparent); cursor: progress; animation: load-fade-in .2s ease-out .15s both; }
.load-overlay-box { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); color: var(--muted); font-size: 12.5px; }
.load-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@keyframes load-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .load-placeholder, .load-overlay { animation: none; } }
/* Spinner thay icon trong nút đang chạy (BusyButton, RowButton). */
.app-shell fluent-button[aria-busy="true"] { cursor: progress; }
.app-shell fluent-button[aria-busy="true"] fluent-spinner { flex: 0 0 16px; width: 16px; height: 16px; }

/* Danh sách nhãn – giá trị, tab */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.tab-body { padding-top: 14px; }

.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px 32px; }
.mt { margin-top: 14px; }
.check-row { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
/* Quy tắc UI: ô nhập + nút cùng hàng phải chung mép dưới. fluent-field mang sẵn margin my-3 nên nút lệch xuống 14px. */
.app-shell .inline-form > fluent-field, .app-shell .form-grid fluent-field, .app-shell .tw-row fluent-field { margin-top: 0 !important; margin-bottom: 0 !important; }
/* FluentSelect cao 34px và mang thêm một dòng message rỗng (2px + gap) nên nằm cao hơn ô nhập bên cạnh 2px. */
.app-shell fluent-dropdown { height: 32px !important; min-height: 32px !important; }
.app-shell fluent-field > [slot=message]:empty { display: none; }
/* fluent-field là grid 3 hàng (label, ô, message) với gap 2px: hàng message rỗng vẫn cộng 2px dưới ô, nên nút đứng
   cạnh (align-items:flex-end) bị lệch xuống 2px. Bỏ gap, giữ khoảng cách bằng margin của label/message. */
.app-shell fluent-field { row-gap: 0 !important; }
.app-shell fluent-field > label { margin-bottom: 2px; }
.app-shell fluent-field > [slot=message]:not(:empty) { margin-top: 2px; }

/* Nút trong bảng (RowButton trong RowActions): viền mảnh, cao 28px, icon màu accent; Danger = chữ đỏ. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.app-shell fluent-button.row-btn {
    height: 28px !important; min-height: 28px !important; min-width: 0 !important; padding: 0 10px !important; gap: 5px !important;
    border: 1px solid var(--border) !important; border-radius: 6px !important; background: var(--panel) !important;
    color: var(--ink) !important; font-size: 12.5px !important; font-weight: 500 !important; box-shadow: none !important;
    transition: background-color .12s, border-color .12s, color .12s;
}
/* flex 0 0 16px: không có thì icon bị bóp còn 11px trong slot start. */
.app-shell fluent-button.row-btn svg { flex: 0 0 16px !important; width: 16px !important; min-width: 16px !important; height: 16px !important; fill: currentColor !important; color: var(--accent); }
.app-shell fluent-button.row-btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important; color: var(--accent) !important; }
.app-shell fluent-button.row-btn:active { background: color-mix(in srgb, var(--accent) 14%, var(--panel)) !important; }
.app-shell fluent-button.row-btn-danger, .app-shell fluent-button.row-btn-danger svg { color: var(--danger) !important; }
.app-shell fluent-button.row-btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--panel)) !important; border-color: var(--danger-border) !important; color: var(--danger) !important; }
/* Nút trang của danh sách phân trang cursor (CursorPager), dưới bảng. */
.pager { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; }
.app-shell .pager fluent-button.row-btn[disabled] { opacity: .45; pointer-events: none; }

/* Lớp dùng chung (các trang chưa chuyển) */
.panel { margin-bottom: 16px; padding: 16px; }
.cards-legacy { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; align-items: end; }
.form-grid .wide { grid-column: 1 / -1; }
/* Khung giờ trade (Shared/TradingWindowsInput): nút ngày bắt đầu + ô Từ/Đến + nút Xoá chung mép dưới (align-items: flex-end). */
.tw-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tw-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.tw-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.tw-days { display: flex; flex-direction: column; }
.tw-label { margin-bottom: 2px; font-size: 14px; line-height: 20px; color: var(--ink); }
.tw-chips { display: flex; gap: 4px; }
.day-chip {
    height: 32px; min-width: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.day-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.day-chip.on { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 600; }
.day-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tw-time { width: 150px; }
.tw-arrow, .tw-flag { display: flex; align-items: center; height: 32px; }
.tw-arrow { color: var(--muted); }
.tw-explain { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
.tw-summary { white-space: nowrap; }
/* Luật lọc vào lệnh (spec luật lọc vào lệnh mục 5.2) */
.er-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.er-group { display: flex; flex-direction: column; gap: 8px; }
.er-group-title { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.er-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.er-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.er-name { flex: 1 1 320px; min-width: 0; }
.er-name .muted { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.er-mode { width: 150px; }
.er-params { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-top: 10px; }
.er-param { width: 270px; }
.app-shell .er-param fluent-field, .app-shell .er-param fluent-text-input { width: 100%; }
.app-shell .er-row fluent-field, .app-shell .er-params fluent-field { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Trang Bài học: nút Lọc thẳng hàng ô nhập; nhóm cặp × khung */
.filter-actions { display: flex; align-items: flex-end; }
.lesson-group + .lesson-group { margin-top: 20px; }
.lesson-proposal { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border-radius: 4px; }
.app-shell .lesson-group-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* Ảnh bài học (spec ảnh bài học mục 5): ảnh đại diện trong bảng, popup Editors/LessonChartsEditor. */
.lesson-thumb-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0; }
.lesson-thumb-cell .row-actions { justify-content: flex-start; }
img.lesson-thumb { display: block; width: 150px; aspect-ratio: 1000 / 520; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.lesson-source { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.lesson-source-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lesson-source-head .row-actions { margin-left: auto; }
.lesson-source p { margin: 0; }
.lesson-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 12px; }
.lesson-charts figure { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
img.lesson-chart { display: block; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.lesson-charts figcaption { font-size: 12px; line-height: 1.35; }
.lesson-attach-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
/* ZoomImage có Fallback: ảnh tải lỗi thì ẩn, hiện dòng chữ thay biểu tượng ảnh hỏng. */
img.zoomable.failed { display: none; }
.zoom-fallback { display: none; font-size: 12px; }
img.zoomable.failed + .zoom-fallback { display: inline; }
/* ZoomImage đang tải (img-pending, trình duyệt bỏ lớp khi onload/onerror): khung giữ chỗ nền nhạt + vòng quay giữa khung,
   cùng kiểu FluentSpinner (vòng mờ + cung accent). Ảnh nhỏ (lesson-thumb) giữ đúng cỡ. */
:root {
    --img-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='none' stroke='%23e2e8f0' stroke-width='3'/%3E%3Cpath d='M16 3a13 13 0 0 1 13 13' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 16 16' to='360 16 16' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}
html.dark {
    --img-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='none' stroke='%233d3d3d' stroke-width='3'/%3E%3Cpath d='M16 3a13 13 0 0 1 13 13' fill='none' stroke='%23479ef5' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 16 16' to='360 16 16' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}
img.zoomable.img-pending { min-height: 160px; background: var(--bg) var(--img-spinner) center / 28px no-repeat !important; }
img.zoomable.lesson-thumb.img-pending { min-height: 0; background-size: 20px !important; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.feedback { margin-top: 12px; }
.ok { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--badge-warning-fg); }
.muted { color: var(--muted); }
pre { white-space: pre-wrap; margin: 0; font: inherit; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 16px; background: #fde7e9; z-index: 1000; }

/* Popup tạo/sửa (Shared/Modal.razor). Quy tắc UI: màn hình tạo/sửa luôn mở bằng popup, không trang riêng. */
.modal-backdrop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; background: rgba(15, 23, 42, .45); overflow-y: auto; }
.modal-panel { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 96px); background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); outline: none; }
/* Panel nhận focus (để Esc hoạt động) nhưng không vẽ viền focus quanh cả popup. */
.app-shell .modal-panel:focus, .app-shell .modal-panel:focus-visible { outline: none !important; }
.modal-md { max-width: 640px; }
.modal-lg { max-width: 960px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.app-shell .modal-head h2 { margin: 0; font-size: 16px !important; font-weight: 600; flex: 1; }
/* Kéo popup bằng thanh tiêu đề (modal-drag.js); nút ✕ giữ con trỏ tay. */
.modal-head.drag-handle { cursor: move; user-select: none; touch-action: none; }
.modal-panel.dragging { user-select: none; }
.modal-panel.dragging .modal-head { cursor: grabbing; }
.modal-close { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 16px; cursor: pointer !important; }
.modal-close:hover { background: var(--nav-hover-bg); color: var(--ink); }
.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px 0; }
.modal-intro { margin: 0 0 12px; font-size: 13px; }
/* Section bên trong popup: bỏ khung thẻ, chỉ giữ tiêu đề nhóm. */
.modal-body .section-card { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important; background: transparent !important; }
.modal-body .section-card .panel-head { padding: 0 0 8px; }
.app-shell .modal-body .section-card .panel-head h2 { font-size: 13px !important; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.modal-foot { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--panel); border-radius: 0 0 12px 12px; }
html.dark .modal-backdrop { background: rgba(0, 0, 0, .6); }

/* Ảnh biểu đồ lúc vào lệnh (tab Biểu đồ của trang lệnh). */
.trade-chart { display: block; width: 100%; max-width: 1000px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
/* Popup ảnh nhãn / ảnh mức học máy (TASK-ML-14): Trước / Sau cùng hàng; điều khiển thời điểm của tab mức thẳng hàng với ô nhập */
.ml-label-nav { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.ml-time-nav { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

/* Bảng "Claude khai | TradeOS tính" (tab Top-down của trang lệnh). */
.compare-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.compare-table th, .compare-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.compare-table th { font-size: .78rem; color: var(--muted); font-weight: 600; }
.compare-table tr.row-mismatch td { background: var(--badge-danger-bg); }

/* Ảnh trang xem thử cấu trúc. */
.structure-preview { display: block; width: 100%; max-width: 1200px; margin: 12px 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* Ảnh bấm để xem toàn màn hình (Shared/ZoomImage): nền tối phủ kín, ảnh vừa khung nhìn; .actual = kích thước thật, cuộn được. */
img.zoomable { cursor: zoom-in; }
.image-viewer { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #0b1120; outline: none; }
.image-viewer-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 16px; color: #e2e8f0; font-size: 13px; }
.image-viewer-bar span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-viewer-bar a { color: #93c5fd; white-space: nowrap; }
.image-viewer-close { border: 0; background: transparent; color: #e2e8f0; font-size: 20px; line-height: 1; padding: 6px 8px; cursor: pointer; }
.image-viewer-close:hover { color: #fff; }
.image-viewer-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px 16px; overflow: auto; }
.image-viewer-body img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.image-viewer-body.actual { align-items: flex-start; justify-content: flex-start; }
.image-viewer-body.actual img { width: auto; height: auto; max-width: none; object-fit: none; cursor: zoom-out; background: #fff; }

/* Bộ nhớ cặp (trang /Pairs, phiên Backtest/Demo, tab Top-down). */
.pair-card p { margin: 4px 0; }
.pair-levels { list-style: none; padding: 0; margin: 6px 0; }
.pair-levels li { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.pair-history-item { border-bottom: 1px solid var(--border); padding: 10px 0; }

/* Bảng chéo thống kê (/Stats). */
.cross-wrap { overflow-x: auto; }
.cross-table { border-collapse: collapse; min-width: 100%; }
.cross-table th, .cross-table td { padding: 8px 10px; border: 1px solid var(--border); text-align: right; white-space: nowrap; }
.cross-table th { background: var(--panel); font-weight: 600; text-align: left; }
.cross-table td { cursor: pointer; }
.cross-table td.cell-good { background: var(--badge-success-bg); }
.cross-table td.cell-bad { background: var(--badge-danger-bg); }
.cross-table td.cell-low { opacity: .5; }

.compare-sessions th:first-child { min-width: 200px; text-align: left; }
.row-select { width: 16px; height: 16px; accent-color: var(--accent, #2563eb); cursor: pointer; }
.compare-sessions td, .compare-sessions th { text-align: left; }
/* Trang phiên có nhiều tab: cho thanh tab xuống dòng thay vì kéo cả vùng nội dung cuộn ngang ở màn hẹp. */
fluent-tablist { flex-wrap: wrap; max-width: 100%; }

/* Thư viện ảnh phiên học mô hình (/Studies/{id}) */
.study-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.study-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.study-card-head, .study-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.study-card img { display: block; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.study-card-foot { display: flex; justify-content: flex-end; }
.study-similar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.study-similar a { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: inherit; text-decoration: none; }
/* Lịch tránh vào lệnh (/Avoid): lý do của trạng thái "Bây giờ", mỗi lý do một dòng */
.avoid-now { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 6px; font-size: 13px; }
.avoid-now li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; }

/* Sổ bằng chứng (/Evidence): khối "Dùng được để quyết định" + bảng bấm dòng mở báo cáo gốc */
.evidence-usable { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evidence-usable li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.evidence-usable li .muted { margin-top: 4px; font-size: 12.5px; line-height: 1.4; }
.evidence-grid td { cursor: pointer; }
/* Sức khoẻ dữ liệu (/DataHealth): gợi ý nguyên nhân lỗ hở, mỗi gợi ý một dòng */
.datahealth-causes { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: 13px; }
/* "Claude có giúp không" (/Backtests/ClaudeValue): ô chọn phiên — mỗi phiên một dòng chọn */
.cv-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 4px 16px; margin-top: 12px; font-size: 13px; }
.cv-sessions label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
/* Dự đoán giá (/Forecasts + khối trang chủ): thẻ KPI tách Bạn / Claude, ghi chú popup, ảnh thu nhỏ trong hàng 44px, vùng kéo-thả ảnh, popup chi tiết */
.forecast-kpis-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.forecast-kpis .cards { margin-bottom: 1rem; }
.forecast-grid td, .forecast-home-grid td { cursor: pointer; }
.forecast-mini { display: block; height: 32px; width: 48px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.forecast-notes { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; font-size: 13px; }
.forecast-warn { color: var(--warn, #b45309); }
.forecast-images { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.forecast-image { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.forecast-image-new { min-height: 44px; justify-content: center; font-size: 13px; }
.forecast-thumb { display: block; width: 160px; height: 100px; object-fit: cover; border-radius: 6px; background: #fff; }
.forecast-photo { display: block; max-width: 100%; max-height: 360px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.forecast-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 12px;
    border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
.forecast-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.forecast-facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 12px 0; font-size: 13px; }
.forecast-facts dt { color: var(--muted); }
.forecast-facts dd { margin: 0; }
.forecast-reason { white-space: pre-wrap; margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.forecast-home-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

/* Hồ sơ vùng giá (/Zones/{id}): thang giá của vùng, cảnh báo ngoài tầm sổ */
/* Cảnh báo vùng giá (spec cảnh báo vùng mục 4): thẻ trang chủ cao bằng nhau, tóm tắt trên hồ sơ vùng */
.zone-alert-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: stretch; margin-bottom: .75rem; }
.zone-alert-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--neutral-stroke-rest, rgba(127,127,127,.25)); background: var(--neutral-layer-1, transparent); }
.zone-alert-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zone-alert-card-now { font-size: 13px; }
.zone-alert-card-lines, .zone-alert-summary ol { margin: 0; padding-left: 1.25rem; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.zone-alert-card-actions { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.zone-alert-summary { margin-bottom: 12px; }
.zone-subtitle { font-size: 1rem; margin: 1rem 0 .5rem; }
.zone-outside { padding: .75rem 1rem; border-radius: 8px; background: var(--neutral-layer-2, rgba(127,127,127,.08)); }
.zone-ladder-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 16px; align-items: start; margin-bottom: 1rem; }
.zone-ladder { font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.zone-ladder-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 22px; }
.zone-ladder-bars { display: flex; align-items: center; gap: 6px; min-width: 0; }
.zone-ladder-bar { display: inline-block; height: 12px; border-radius: 3px; max-width: 70%; }
.zone-ladder-bar.bid { background: #16a34a; }
.zone-ladder-bar.ask { background: #dc2626; }
.zone-ladder-wall { color: var(--warning, #d97706); white-space: nowrap; }
.zone-ladder-mid { border-top: 1px dashed currentColor; opacity: .7; text-align: center; margin: 2px 0; }
.zone-ladder-summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.zone-ladder-summary dt { color: var(--neutral-foreground-hint, #888); }
.zone-ladder-summary dd { margin: 0; }
.zone-ladder-summary .good, .zone-walls-grid .good { color: #16a34a; }
.zone-ladder-summary .bad, .zone-walls-grid .bad { color: #dc2626; }
@media (max-width: 900px) { .zone-ladder-wrap { grid-template-columns: 1fr; } }
.zone-touch-counts { margin: .25rem 0; }
.zone-touch-chart { width: 100%; height: auto; border-radius: 8px; }
.zone-sources { margin: .25rem 0 .75rem 1.25rem; font-size: 13px; }
.zone-sweep-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.zone-sweep-suggest { margin: .75rem 0; padding: .75rem 1rem; border-radius: 8px; background: var(--neutral-layer-2, rgba(127,127,127,.08)); }
@media (max-width: 1100px) { .zone-sweep-cols { grid-template-columns: 1fr; } }

/* /MySl "SL của tôi" (TASK-RPT-05): dòng giá vào / SL / TP trong bảng bản đồ, khoảng trong đệm stop đám đông, vùng bảo vệ SL, hai ảnh cạnh nhau */
.mysl-plan-entry { color: #2563eb; }
.mysl-plan-sl { color: #dc2626; }
.mysl-plan-tp { color: #16a34a; }
.mysl-buffer { color: var(--warning, #d97706); font-weight: 600; }
.mysl-protective { color: #ea580c; font-weight: 600; }
.mysl-taken { text-decoration: line-through; opacity: .7; }
.mysl-sources { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.mysl-ok { padding: .75rem 1rem; border-radius: 8px; color: #16a34a; background: rgba(22, 163, 74, .08); }
.mysl-warnings { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; }
.mysl-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .mysl-charts { grid-template-columns: 1fr; } }

/* /Traps → Tài liệu (spec 2026-10-31 mục 3): thẻ 17 bẫy theo nhóm, màu trạng thái đo, ngăn chi tiết bên phải */
:root { --trap-real: #16a34a; --trap-weak: #d97706; --trap-nodata: #94a3b8; --trap-nodetector: #cbd5e1; --trap-proven: #2563eb; }
html.dark { --trap-real: #4ade80; --trap-weak: #fbbf24; --trap-nodata: #8a8a8a; --trap-nodetector: #4a4a4a; --trap-proven: #60a5fa; }
.trap-legend { margin: .25rem 0 1rem; font-size: 13px; }
.trap-docs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 20px; align-items: start; }
.trap-group { margin-bottom: 1rem; }
.trap-group-head { font-weight: 600; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem; }
.trap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.trap-card { display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 88px; padding: 10px 12px; cursor: pointer; font: inherit;
    color: var(--ink); background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--trap-nodetector); border-radius: 10px; }
.trap-card:hover { border-color: var(--accent); }
.trap-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trap-card.is-selected { box-shadow: 0 0 0 2px var(--accent); }
.trap-card.trap-proven { outline: 2px solid var(--trap-proven); outline-offset: -1px; }
.trap-card-code { font-weight: 700; font-size: 12px; color: var(--muted); }
.trap-card-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.trap-card-sub { font-size: 12px; color: var(--muted); line-height: 1.3; }
.trap-card-ml { align-self: flex-start; margin-top: auto; font-size: 11px; font-weight: 600; padding: 0 .45rem; border-radius: 999px;
    background: var(--badge-violet-bg); color: var(--badge-violet-fg); }
.trap-card.trap-state-real { border-left-color: var(--trap-real); }
.trap-card.trap-state-weak { border-left-color: var(--trap-weak); }
.trap-card.trap-state-nodata { border-left-color: var(--trap-nodata); }
.trap-card.trap-state-nodetector { border-left-color: var(--trap-nodetector); opacity: .8; }
.trap-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: middle; background: var(--trap-nodetector); }
.trap-dot.trap-state-real { background: var(--trap-real); }
.trap-dot.trap-state-weak { background: var(--trap-weak); }
.trap-dot.trap-state-nodata { background: var(--trap-nodata); }
.trap-detail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 16px 18px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px; font-size: 14px; line-height: 1.5; }
.trap-detail-title { margin: 0 0 .4rem; font-size: 17px; }
.trap-detail-tags { flex-wrap: wrap; gap: 8px; margin-bottom: .25rem; }
.trap-detail h4 { margin: 1rem 0 .35rem; font-size: 14px; }
.trap-block { margin: .5rem 0; }
.trap-block p { margin: .1rem 0 0; }
.trap-block-label { font-weight: 600; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.trap-list { margin: .25rem 0 .25rem 1.1rem; padding: 0; }
.trap-list li { margin: .15rem 0; }
.trap-measure { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 10px; }
.trap-measure dt { font-weight: 600; color: var(--muted); font-size: 13px; }
.trap-measure dd { margin: 0; }
.trap-result { margin: .4rem 0; }
.trap-general { margin-top: 1rem; font-size: 14px; }
/* Bảng 17 bẫy: chữ dài (nguồn đo, kết quả) xuống dòng thay vì bị cắt — Fluent mặc định nowrap + ẩn phần thừa */
.trap-docs .fluent-data-grid td { white-space: normal !important; }
.trap-docs .fluent-data-grid td .cell-row { white-space: normal; }
@media (max-width: 1100px) { .trap-docs { grid-template-columns: 1fr; } .trap-detail { position: static; max-height: none; } }
/* Chế độ Bảng: 9 cột tối thiểu 990 px + ngăn chi tiết 320 px không vừa một hàng dưới ~1700 px → ngăn xuống dưới bảng (bấm dòng tự cuộn tới, js/reveal.js) */
@media (max-width: 1699px) { .trap-docs.is-table { grid-template-columns: minmax(0, 1fr); } .trap-docs.is-table .trap-detail { position: static; max-height: none; } }
@media (max-width: 600px) { .trap-measure { grid-template-columns: 1fr; } .trap-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
/* Đăng nhập / thiết lập (spec đăng nhập mục 3): trang tĩnh (form post), thẻ giữa màn hình, ô nhập HTML thường (không web component — form post gửi đúng giá trị) */
.auth-shell { height: 100%; overflow: auto; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; }
.auth-card { width: 100%; max-width: 420px; box-sizing: border-box; padding: 28px 28px 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); }
.auth-card .app-logo { margin-bottom: 20px; }
.auth-card h1 { font-size: 20px; margin: 0 0 4px; }
.auth-card > p.muted, .auth-card .auth-note { font-size: 13px; line-height: 1.45; margin: 0 0 16px; }
.auth-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.auth-field input, .auth-input { height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 400; }
.auth-field input:focus, .auth-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.auth-submit { height: 36px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.auth-submit:hover { background: var(--accent-hover); }
.auth-form .validation-message, .auth-form .validation-errors { color: var(--danger); font-size: 12.5px; margin: 0; padding-left: 16px; }
.auth-links { margin-top: 16px; font-size: 13px; }
.auth-links a, .auth-card a { color: var(--accent); }
.auth-card .auth-code { font-family: var(--mono-font); letter-spacing: .04em; }
/* Thanh trên: email người dùng + Đăng xuất (form post) */
.user-menu { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.user-menu form { margin: 0; }
.user-menu button { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.user-menu button:hover { background: var(--nav-hover-bg); }
@media (max-width: 640px) { .user-menu .user-email { display: none; } }
/* /Account/Manage: form đổi mật khẩu (form post thường), khoá vừa tạo hiện một lần */
.password-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; align-items: end; max-width: 960px; }
.password-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.password-form .auth-submit { padding: 0 16px; justify-self: start; }
.new-key { display: block; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 8px; font-family: var(--mono-font); font-size: 13px; word-break: break-all; user-select: all; background: var(--bg); }
.scope-list { display: grid; gap: 8px; }

/* Job theo lịch (/Jobs — spec FEAT-DATAOPS mục 2–4): kết quả lượt cắt 2 dòng (rê chuột xem đủ), lỗi màu đỏ, danh sách xem trước lịch */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.text-danger { color: var(--danger, #d13438); }
.schedule-preview { margin: 0; padding-left: 20px; display: grid; gap: 4px; }