/* QuantHub design system.
   Reference: Quant project/QuantHub-Landing.html (Claude design, 27/07/2026).

   Fonts and hero art are SELF-HOSTED, extracted from that bundle. No CDN,
   no Google Fonts request: the platform must render identically on a VPS
   with no outbound network, and an external font is a third party who can
   see every visitor. One CSS file, no build step.

   The mock is fixed at min-width 1320px. That is deliberately NOT copied —
   every grid here collapses instead of forcing a horizontal scrollbar. */

/* ------------------------------------------------------------- fonts */
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/bvp-400-viet.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
                 U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/bvp-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/bvp-500-viet.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
                 U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/bvp-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/bvp-600-viet.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
                 U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/bvp-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/bvp-700-viet.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
                 U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/bvp-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/bvp-800-viet.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
                 U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/bvp-800-latin.woff2") format("woff2");
}

/* ------------------------------------------------------------ tokens */
:root {
  --bg: #06060f;
  --bg-2: #080913;
  --surface: #0c0d1a;          /* cards                       */
  --surface-2: #0e0f1e;        /* tiles nested inside a panel */
  --surface-3: #0a0b16;        /* panel that holds tiles      */
  --surface-4: #0d0e1c;        /* floating / glass            */
  --field: #08090f;            /* inputs                      */

  --ink: #e9e9f2;
  --ink-2: #dcdcec;
  --dim: #8b8ba7;
  --dim-2: #7d7d99;
  --dim-3: #6f6f8c;

  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .14);

  --brand: #4f5bff;
  --brand-2: #8b5cf6;
  --brand-ink: #8b93ff;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #ef4444;

  --radius: 16px;
  --radius-sm: 11px;
  --shell: 1320px;
  --grad: linear-gradient(135deg, #4f5bff, #8b5cf6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 "Be Vietnam Pro", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::placeholder { color: #5a5a74; }
::selection { background: rgba(124, 92, 255, .35); }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

/* --------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(6, 6, 15, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 30px; height: 72px; }
/* The nav grew to 12 entries. Without min-width:0 the link row refuses
   to shrink and shoves the CTA buttons past the viewport edge, which
   puts a horizontal scrollbar on EVERY page. Let the links scroll
   inside their own box instead. */
.nav-cta { flex: none; margin-left: auto; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
/* Dấu hiệu thương hiệu nằm trong MỘT file SVG, không dựng bằng CSS nữa.
   Trước đây là ô bo góc gradient chàm-tím với một lục giác trắng cắt bằng
   clip-path. Nay dùng chung hình lục giác và dải màu #22d3ee -> #7c3aed
   với logo AutoTradingVN để hai sản phẩm đọc ra là một nhà.

   Để trong file riêng chứ không nội tuyến vào template: dấu hiệu này xuất
   hiện hai lần trên mỗi trang (đầu trang và chân trang). SVG nội tuyến hai
   lần sẽ có hai phần tử trùng id gradient — trình duyệt vẫn vẽ, nhưng đó
   là HTML không hợp lệ và id nào thắng thì tuỳ trình duyệt. */
.brand-mark {
  width: 36px; height: 36px; flex: none;
  background: url("../img/brand-mark.svg") center / contain no-repeat;
}
.brand-name { display: block; font-size: 19px; font-weight: 700;
              letter-spacing: -.3px; line-height: 1.2; }
.brand-sub { display: block; font-size: 10.5px; color: var(--dim-2); }

.nav-links { display: flex; align-items: center; gap: 22px; font-size: 13.5px;
             color: #a9a9c2; margin-left: 8px; min-width: 0; overflow-x: auto;
             scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { flex: none; }
.nav-links a { position: relative; padding: 24px 0; font-weight: 500;
               white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.on { color: var(--violet); }
.nav-links a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, #7c5cff, #c084fc);
}
/* gap 12px chứ không phải 14px như trước: thanh điều hướng vốn khít đúng
   100% — sáu mục cần 606px trong 606px chỗ có, không dư một pixel nào.
   Thêm biểu tượng AutoTradingVN vào đây làm thiếu 1px và mục "Nền tảng"
   bị cắt. Thu 2px ở bốn khoảng cách của khối nút trả lại 8px, đủ dư. */
.nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Liên kết sang AutoTradingVN. Dùng chính logo của họ chứ không phải một
   biểu tượng chung chung: khách phải nhận ra mình sắp sang đâu TRƯỚC khi
   bấm. Mờ đi khi nghỉ để không tranh chỗ với nút chính, rõ lên khi rê. */
.nav-sibling {
  width: 22px; height: 22px; flex: none; display: block; opacity: .72;
  background: url("../img/autotradingvn-mark.svg") center / contain no-repeat;
  transition: opacity .15s, transform .15s;
}
.nav-sibling:hover { opacity: 1; transform: translateY(-1px); }
.lang { display: flex; align-items: center; gap: 6px; color: #c3c3d8;
        font-size: 13px; }

/* ----------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 13px 22px; border-radius: var(--radius-sm); font-size: 14.5px;
  font-weight: 600; border: 1px solid transparent; white-space: nowrap;
  transition: filter .14s ease, background .14s ease, border-color .14s ease;
}
.btn-primary { background: var(--grad); color: #fff;
               box-shadow: 0 12px 30px rgba(99, 102, 241, .38); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: rgba(255, 255, 255, .05); }
.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 9px; }

/* ------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 22px; }
.card-hover { transition: border-color .16s ease, transform .16s ease; }
.card-hover:hover { border-color: rgba(124, 92, 255, .45);
                    transform: translateY(-3px); }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.auto-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.auto-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* -------------------------------------------------------------- typo */
h1, h2, h3 { margin: 0; letter-spacing: -.5px; }
.h-xl { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.1; font-weight: 700;
        letter-spacing: -1.6px; text-wrap: pretty; }
.h-lg { font-size: clamp(21px, 2.4vw, 25px); font-weight: 700; }
.h-md { font-size: 19px; font-weight: 700; }
.grad { background: linear-gradient(90deg, #5b8dff, #a06bff);
        -webkit-background-clip: text; background-clip: text;
        color: transparent; }
.muted { color: var(--dim); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.up { color: var(--ok); } .down { color: var(--bad); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-radius: 999px; border: 1px solid rgba(124, 92, 255, .4);
  background: rgba(124, 92, 255, .12); font-size: 11px; font-weight: 600;
  letter-spacing: 1.1px; color: #a5b4fc;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
                   background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

section { padding: 27px 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between;
            gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.sec-head p { margin: 6px 0 0; color: var(--dim); font-size: 13px;
              max-width: 70ch; }
.link-more { display: inline-flex; align-items: center; gap: 8px;
             font-size: 13.5px; color: var(--brand-ink); }
.link-more:hover { color: #b3b8ff; }

/* ------------------------------------------------------------ status */
.badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
                 background: currentColor; }
.badge-live { background: rgba(52, 211, 153, .15); color: #4ade80; }
.badge-beta { background: rgba(251, 191, 36, .15); color: var(--warn); }
.badge-planned { background: rgba(148, 163, 184, .13); color: #94a3b8; }

/* -------------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
        gap: 32px; align-items: center; padding: 46px 0 30px; }
.hero h1 { margin-top: 22px; }
.hero .lead { margin: 22px 0 0; font-size: 15.5px; line-height: 1.75;
              color: #9a9ab4; max-width: 460px; text-wrap: pretty; }
.hero-btns { display: flex; align-items: center; gap: 14px; margin-top: 30px;
             flex-wrap: wrap; }
.play { width: 26px; height: 26px; border-radius: 50%; flex: none;
        background: rgba(255, 255, 255, .1); display: grid; place-items: center; }

.hero-stats { display: flex; gap: 34px; margin-top: 46px; flex-wrap: wrap; }
.hero-stats > div { display: flex; align-items: center; gap: 9px; }
.hero-stats b { display: block; font-size: 19px; font-weight: 700;
                line-height: 1.25; }
.hero-stats span { font-size: 11.5px; color: var(--dim-2); }

/* --------------------------------------------------------- workflows */
.workflow-showcase { padding-top: 6px; }
.workflow-kicker { display: block; margin-bottom: 7px; color: var(--cyan); font-weight: 700;
                   letter-spacing: 1px; }
.workflow-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.workflow-tile { min-height: 154px; padding: 16px; border: 1px solid var(--line);
                 border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
                 display: flex; flex-direction: column; gap: 13px;
                 transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.workflow-tile:hover { border-color: rgba(124, 92, 255, .52); background: var(--surface-2);
                         transform: translateY(-2px); }
.workflow-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; }
.workflow-copy { display: grid; gap: 3px; min-width: 0; }
.workflow-copy small { color: var(--dim-2); font-size: 10.5px; font-weight: 600; }
.workflow-copy b { font-size: 13px; line-height: 1.35; }
.workflow-copy em { color: var(--dim); font-size: 11px; font-style: normal; line-height: 1.45; }
.workflow-arrow { margin-top: auto; color: var(--brand-ink); }
.architecture-kicker { color: var(--cyan); font-weight: 700; letter-spacing: 1px; }
.architecture-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.architecture-mini { min-height: 112px; display: flex; flex-direction: column; gap: 9px; padding: 17px; border: 1px solid var(--line); border-top: 2px solid var(--layer-accent); border-radius: var(--radius-sm); background: var(--surface); }
.architecture-mini:hover { border-color: var(--layer-accent); background: var(--surface-2); }
.architecture-mini b { font-size: 15px; }.architecture-mini small { color: var(--dim); font-size: 11px; line-height: 1.55; }.architecture-layer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--layer-accent); box-shadow: 0 0 12px var(--layer-accent); }
.architecture-head { padding-top: 42px; }.architecture-head h1 { margin-top: 18px; }.architecture-flow { padding-top: 24px; }.architecture-root { width: 164px; margin: 0 auto; display: grid; place-items: center; gap: 5px; padding: 15px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }.architecture-root-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--grad); box-shadow: 0 0 24px rgba(99,102,241,.45); }.architecture-root small, .architecture-layer-head small { color: var(--dim); font-size: 10.5px; }.architecture-connector { width: 1px; height: 28px; margin: 0 auto; background: var(--line-2); }.architecture-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.architecture-layer { padding: 19px; border: 1px solid var(--line); border-top: 2px solid var(--layer-accent); border-radius: var(--radius-sm); background: var(--surface); }.architecture-layer-head { display: flex; align-items: center; gap: 10px; }.architecture-layer-head h2 { font-size: 19px; }.architecture-layer > p { color: var(--dim); font-size: 12px; line-height: 1.65; margin: 14px 0; }.architecture-items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }.architecture-items span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); font-size: 10.5px; }.architecture-steps { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 5px; }.architecture-step { min-width: 170px; flex: 1; display: grid; align-content: center; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }.architecture-step b { font-size: 12px; }.architecture-step span { color: var(--dim); font-size: 10.5px; line-height: 1.45; }.architecture-steps > i { align-self: center; color: var(--brand-ink); font-style: normal; }.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.service-item { min-height: 82px; display: flex; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }.service-item:hover { border-color: var(--cyan); }.service-item > span:nth-child(2) { flex: 1; display: grid; gap: 4px; }.service-item b { font-size: 13px; }.service-item small { color: var(--dim); font-size: 10.5px; line-height: 1.4; }.service-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(34,211,238,.12); }
.workflow-page-head { padding-top: 42px; }
.workflow-page-head h1 { margin-top: 18px; }
.workflow-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.workflow-directory-item { min-height: 88px; display: flex; align-items: center; justify-content: space-between;
                           gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
                           background: var(--surface); transition: border-color .16s ease, background .16s ease; }
.workflow-directory-item:hover { border-color: rgba(124, 92, 255, .52); background: var(--surface-2); }
.workflow-directory-item span { min-width: 0; display: grid; gap: 4px; }
.workflow-directory-item b { font-size: 13px; line-height: 1.35; }
.workflow-directory-item small { color: var(--dim); font-size: 11px; line-height: 1.4; }

/* -------------------------------------------------- industry visuals */
.industry-visual { min-height: 286px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr);
                   gap: 24px; align-items: stretch; padding: 24px; border: 1px solid var(--line);
                   border-radius: var(--radius); background: linear-gradient(120deg, var(--iv-accent)12, transparent 48%), var(--surface); }
.industry-visual-copy { display: flex; flex-direction: column; justify-content: center; }
.industry-visual-kicker { color: var(--iv-accent); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.industry-visual-copy h2 { margin-top: 9px; }
.industry-visual-copy p { max-width: 54ch; margin: 10px 0 0; color: var(--dim); line-height: 1.7; }
.industry-flow { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.industry-flow span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.industry-flow i { width: 20px; height: 1px; background: var(--iv-accent); opacity: .75; position: relative; }
.industry-flow i::after { content: ""; position: absolute; right: -1px; top: -2px; width: 5px; height: 5px; border-top: 1px solid var(--iv-accent); border-right: 1px solid var(--iv-accent); transform: rotate(45deg); }
.industry-scene { position: relative; min-height: 232px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px;
                  display: grid; place-items: center; background: #080a15; }
.industry-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
                           background: linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.04) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, rgba(255,255,255,.04) 50%, transparent 50.5%); background-size: 42px 42px; }
.industry-scene svg { position: relative; width: min(100%, 420px); height: 210px; }
.industry-scene-label { position: absolute; right: 12px; bottom: 10px; color: var(--dim-3); font-size: 10px; }
.iv-grid, .iv-axis, .iv-limit { stroke: rgba(255,255,255,.13); stroke-width: 1; fill: none; }
.iv-limit { stroke-dasharray: 5 5; }
.iv-area { fill: var(--iv-accent); opacity: .12; }
.iv-trace, .iv-route { fill: none; stroke: var(--iv-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: iv-draw 4s ease-in-out infinite; }
.iv-route { stroke-dasharray: 10 8; stroke-dashoffset: 0; animation: iv-route 2.8s linear infinite; }
.iv-pulse-dot, .iv-node, .iv-core { fill: var(--iv-accent); stroke: #080a15; stroke-width: 3; }
.iv-node-main, .iv-core { animation: iv-pulse 2.2s ease-in-out infinite; }
.iv-link { stroke: rgba(255,255,255,.32); stroke-width: 1.5; fill: none; }
.iv-bar { fill: var(--iv-accent); opacity: .32; transform-origin: bottom; animation: iv-bars 2.6s ease-in-out infinite alternate; }
.iv-bar:nth-of-type(2n) { animation-delay: -.8s; }
.iv-orbit { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.3; }
.iv-funnel { position: relative; width: 220px; display: grid; gap: 7px; }
.iv-funnel span { height: 28px; margin: auto; background: var(--iv-accent); opacity: .2; clip-path: polygon(0 0,100% 0,85% 100%,15% 100%); animation: iv-bars 2.8s ease-in-out infinite alternate; }
.iv-funnel span:nth-child(1) { width: 100%; opacity: .38; }.iv-funnel span:nth-child(2) { width: 76%; animation-delay: -.6s; }.iv-funnel span:nth-child(3) { width: 52%; animation-delay: -1.2s; }.iv-funnel span:nth-child(4) { width: 30%; animation-delay: -1.8s; }
.iv-matrix { position: relative; width: 178px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.iv-matrix span { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(255,255,255,.04); }
.iv-matrix span.active { background: var(--iv-accent); border-color: var(--iv-accent); animation: iv-pulse 2.4s ease-in-out infinite; }
.iv-field { position: relative; width: 290px; height: 164px; border: 2px solid rgba(255,255,255,.35); border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%); }
.iv-field::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.35); }.iv-field::after { content: ""; position: absolute; left: calc(50% - 26px); top: calc(50% - 26px); width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.iv-field i, .iv-field b { position: absolute; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--iv-accent); }.iv-field i:nth-child(1) { left: 20%; top: 22%; }.iv-field i:nth-child(2) { left: 28%; top: 66%; }.iv-field i:nth-child(3) { left: 42%; top: 42%; }.iv-field i:nth-child(4) { left: 55%; top: 24%; }.iv-field b:nth-of-type(1) { right: 17%; top: 30%; }.iv-field b:nth-of-type(2) { right: 28%; top: 62%; }.iv-field b:nth-of-type(3) { right: 42%; top: 48%; }.iv-field b.ball { left: 54%; top: 52%; width: 10px; height: 10px; background: #fff; animation: iv-ball 3s ease-in-out infinite; }

/* ----------------------------------------------- weather map workspace */
.weather-workspace { width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #07111d; }
.weather-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px; border-bottom: 1px solid var(--line); background: rgba(6, 12, 23, .9); }
.weather-layer-list { display: flex; flex-wrap: wrap; gap: 7px; }
.weather-layer-list label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--dim); font-size: 10px; cursor: pointer; }
.weather-layer-list input { accent-color: var(--iv-accent); margin: 0; }
.weather-layer-list label:has(input:checked) { color: var(--ink); border-color: color-mix(in srgb, var(--iv-accent) 55%, transparent); background: color-mix(in srgb, var(--iv-accent) 12%, transparent); }
.weather-timeline { display: grid; grid-template-columns: auto 100px auto; align-items: center; gap: 7px; color: var(--dim); font-size: 10px; white-space: nowrap; }
.weather-timeline input { width: 100px; accent-color: var(--iv-accent); }.weather-timeline b { color: var(--ink-2); font-size: 10px; }
.weather-map-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(160px, .72fr); min-height: 264px; }
.weather-map-canvas { position: relative; min-height: 264px; cursor: crosshair; overflow: hidden; background: radial-gradient(circle at 68% 38%, color-mix(in srgb, var(--iv-accent) 14%, transparent), transparent 34%), linear-gradient(150deg, #092034, #06111f); }
.weather-map-canvas svg { width: 100%; height: 100%; min-height: 264px; }.weather-grid { stroke: rgba(148, 163, 184, .15); stroke-width: 1; fill: none; }.weather-vietnam { fill: color-mix(in srgb, var(--iv-accent) 16%, #0e2b3f); stroke: color-mix(in srgb, var(--iv-accent) 80%, white); stroke-width: 2; }.weather-coast { fill: none; stroke: #d8f3ff; stroke-width: 1.2; opacity: .8; }
.weather-rain-band, .weather-wind-line, .weather-pressure-line { fill: none; opacity: 0; transition: opacity .2s ease; }.weather-rain-band { stroke: #38bdf8; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 3 9; }.weather-wind-line { stroke: #a78bfa; stroke-width: 3; stroke-dasharray: 10 8; animation: weather-drift 2.4s linear infinite; }.weather-pressure-line { stroke: #fbbf24; stroke-width: 2; stroke-dasharray: 5 6; }
.weather-mark { opacity: 0; transition: opacity .2s ease, transform .2s ease; transform-origin: center; }.weather-show-temperature .weather-temperature { opacity: .62; fill: #fb7185; animation: weather-pulse 2.6s ease-in-out infinite; }.weather-show-rain .weather-rain { opacity: .6; fill: #38bdf8; animation: weather-pulse 2.2s ease-in-out infinite .2s; }.weather-show-wind .weather-wind { opacity: .55; fill: #a78bfa; animation: weather-pulse 2.8s ease-in-out infinite .4s; }.weather-show-cloud .weather-cloud { opacity: .54; fill: #cbd5e1; }.weather-show-radar .weather-radar { opacity: .48; fill: #22d3ee; animation: weather-pulse 2.4s ease-in-out infinite; }.weather-show-lightning .weather-lightning { opacity: .8; fill: #fbbf24; }.weather-show-solar .weather-solar { opacity: .6; fill: #f59e0b; }.weather-show-turbine .weather-turbine { opacity: .56; fill: #34d399; }.weather-show-flood .weather-flood { opacity: .58; fill: #60a5fa; }.weather-show-aqi .weather-aqi { opacity: .55; fill: #f97316; }.weather-show-rain .weather-rain-band, .weather-show-wind .weather-wind-line, .weather-show-pressure .weather-pressure-line { opacity: .8; }
.weather-station { position: absolute; z-index: 2; padding: 3px 5px; border: 1px solid rgba(255,255,255,.24); border-radius: 5px; background: rgba(7,17,29,.88); color: #dbeafe; font: inherit; font-size: 10px; cursor: pointer; }.weather-station::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--iv-accent); box-shadow: 0 0 8px var(--iv-accent); }.weather-station:hover { border-color: var(--iv-accent); }.station-hanoi { left: 55%; top: 20%; }.station-danang { left: 57%; top: 39%; }.station-hcm { left: 52%; top: 61%; }.weather-map-caption { position: absolute; left: 10px; bottom: 8px; color: rgba(219,234,254,.58); font-size: 10px; }
.weather-detail { display: flex; flex-direction: column; padding: 18px 14px; border-left: 1px solid var(--line); background: #08101d; }.weather-detail > span { color: var(--iv-accent); font-weight: 700; letter-spacing: .7px; }.weather-detail h3 { margin: 8px 0 0; font-size: 15px; }.weather-detail p { margin: 4px 0 0; color: var(--dim); font-size: 11px; }.weather-detail dl { display: grid; gap: 10px; margin: 19px 0 0; }.weather-detail dl div { display: grid; gap: 3px; }.weather-detail dt { color: var(--dim-2); font-size: 10px; }.weather-detail dd { margin: 0; color: var(--ink-2); font-size: 11px; line-height: 1.45; }.weather-detail small { margin-top: auto; color: var(--dim-3); font-size: 10px; line-height: 1.45; }
@keyframes weather-drift { to { stroke-dashoffset: -54; } } @keyframes weather-pulse { 0%,100% { transform: scale(.85); } 50% { transform: scale(1.12); } }
@keyframes iv-draw { 0%,20% { stroke-dashoffset: 520; } 68%,100% { stroke-dashoffset: 0; } }
@keyframes iv-route { to { stroke-dashoffset: -144; } }
@keyframes iv-pulse { 0%,100% { filter: drop-shadow(0 0 0 var(--iv-accent)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px var(--iv-accent)); transform: scale(1.18); } }
@keyframes iv-bars { from { transform: scaleY(.72); opacity: .2; } to { transform: scaleY(1); opacity: .52; } }
@keyframes iv-ball { 0%,100% { transform: translate(0,0); } 50% { transform: translate(46px,-30px); } }

/* grid-template-columns BẮT BUỘC phải có, dù chỉ có một phần tử con.
   Thiếu nó, lưới tự sinh một cột ngầm cỡ `auto` — và `auto` ở đây nghĩa là
   MAX-CONTENT, tức là bằng đúng `width: 470px` của .globe, KỂ CẢ khi khung
   chứa chỉ rộng 361px. Hai hậu quả, cái sau khó thấy hơn cái trước:

     1. Track 470px tràn ra khỏi khung 361px -> cả trang cuộn ngang.
     2. `max-width: 90%` của .globe tính theo containing block, mà containing
        block chính là track 470px đó. Nên nó ra 423px thay vì 90% của 361.
        Cái van an toàn tự lấy chính mình làm mốc, và vì vậy không chặn gì.

   minmax(0, 1fr) cho phép track co lại theo khung thật. Đo được ở khổ
   1024px: trước 423px và tràn 86px, sau 325px và không tràn. Từ ~1240px
   trở lên cột đã rộng hơn 470px nên không có gì đổi — đây là bản vá chỉ
   chạm vào khoảng 1000–1240px. */
.hero-art { position: relative; min-height: 520px; display: grid;
            grid-template-columns: minmax(0, 1fr); place-items: center; }
.hero-art::before {
  content: ""; position: absolute; width: 620px; max-width: 118%;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 90, 255, .22) 0%,
              rgba(76, 90, 255, .06) 40%, rgba(6, 6, 15, 0) 68%);
}
.globe { position: relative; width: 470px; max-width: 90%; }
.globe img {
  width: 100%; display: block;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 54%,
                      rgba(0, 0, 0, .88) 63%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 54%,
              rgba(0, 0, 0, .88) 63%, transparent 74%);
}

.float-card {
  position: absolute; border-radius: 12px; padding: 13px 14px;
  background: rgba(13, 14, 28, .92); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.float-card .t { display: flex; align-items: center; justify-content: space-between;
                 font-size: 12px; font-weight: 600; color: var(--ink-2); }
.float-card .sub { font-size: 10.5px; color: var(--dim-2); margin-top: 7px; }
.float-card .v { font-size: 17px; font-weight: 700; }
.fc-1 { left: 2%;  top: 3%;  width: 212px; }
.fc-2 { left: 0;   top: 45%; width: 198px; }
.fc-3 { right: 3%; top: 5%;  width: 172px; }
.fc-4 { right: 0;  top: 52%; width: 234px; }

.gauge { width: 50px; height: 50px; border-radius: 50%; display: grid;
         place-items: center; flex: none; }
.gauge > span { width: 38px; height: 38px; border-radius: 50%;
                background: var(--surface-4); display: grid; place-items: center;
                font-size: 15px; font-weight: 700; }

/* ------------------------------------------------------------ search */
.search-card { padding: 26px 28px 28px; background: var(--surface);
               border: 1px solid var(--line); border-radius: var(--radius); }
.search-head { display: flex; align-items: center; gap: 14px; }
.search-head .ic { width: 42px; height: 42px; border-radius: 11px; flex: none;
                   display: grid; place-items: center;
                   background: linear-gradient(140deg, rgba(124, 92, 255, .28),
                               rgba(34, 211, 238, .18)); }
.search-row { display: flex; gap: 14px; margin-top: 22px; }
.search-field { flex: 1; position: relative; min-width: 0; }
.search-field svg { position: absolute; left: 16px; top: 50%; margin-top: -8px; }
.search-row input {
  width: 100%; height: 52px; padding: 0 16px 0 44px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .09); background: var(--field);
  color: var(--ink); font: inherit; font-size: 13.5px; outline: none;
}
.search-row input:focus { border-color: rgba(124, 92, 255, .55); }
.search-row .btn { height: 52px; padding: 0 34px; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px;
        border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08);
        background: var(--surface-3); font-size: 13px; color: #c6c6da; }
.chip:hover { border-color: rgba(124, 92, 255, .5); }

/* --------------------------------------------------------- ind cards */
.ind-card { display: flex; flex-direction: column; padding: 0; overflow: hidden;
            background: var(--surface); }
.ind-card h3 { padding: 15px 16px 0; font-size: 15px; font-weight: 600;
               line-height: 1.3; }
.ind-vis { height: 96px; margin: 12px 12px 0; border-radius: 8px;
           overflow: hidden; display: flex; align-items: center;
           justify-content: center; }
.ind-vis img { width: 100%; height: 100%; object-fit: cover;
               transition: transform .32s ease, filter .32s ease; }
.ind-card:hover .ind-vis img { transform: scale(1.025); filter: brightness(1.07); }
.ind-vis svg { width: 100%; height: 100%; display: block; }
.ind-body { padding: 12px 16px 16px; flex: 1; display: flex;
            flex-direction: column; }
.ind-body p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--dim); }
.ind-go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
          padding-top: 14px; font-size: 12.5px; font-weight: 500; }


/* ------------------------------------------------------- product row */
.panel { padding: 18px; border-radius: var(--radius); background: var(--surface-3);
         border: 1px solid rgba(255, 255, 255, .05); }
.tile { display: flex; gap: 12px; padding: 14px; border-radius: 12px;
        background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .06);
        transition: border-color .16s ease; }
.tile:hover { border-color: rgba(124, 92, 255, .4); }
.tile-ic { width: 36px; height: 36px; border-radius: 10px; flex: none;
           display: grid; place-items: center; }
.tile b { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
          font-weight: 600; }
.tile span { display: block; font-size: 11px; color: var(--dim-2);
             line-height: 1.5; margin-top: 4px; }

/* ----------------------------------------------------------- why box */
.why { display: grid; grid-template-columns: minmax(0, 300px) repeat(4, minmax(0, 1fr));
       gap: 30px; align-items: start; padding: 34px 36px; }
.why-item { text-align: center; }
.why-item svg { margin: 0 auto; }
.why-item b { display: block; font-size: 17px; font-weight: 700; margin-top: 12px; }
.why-item span { display: block; font-size: 11.5px; line-height: 1.6;
                 color: var(--dim-2); margin-top: 8px; }

/* -------------------------------------------------------- post cards */
.post { display: flex; flex-direction: column; padding: 0; overflow: hidden;
        background: var(--surface); }
.post-art { position: relative; height: 138px; overflow: hidden;
            display: flex; align-items: flex-end; }
.post-art img { width: 100%; height: 100%; object-fit: cover; }
.post-art svg { width: 100%; height: 100%; display: block; }
.tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 9px;
       border-radius: 5px; font-size: 9px; font-weight: 700;
       letter-spacing: .7px; color: #fff; }
.post-body { padding: 14px 15px 16px; }
.post-body h3 { font-size: 14px; font-weight: 600; line-height: 1.45;
                min-height: 40px; letter-spacing: -.2px; text-wrap: pretty; }
.post-body .meta { font-size: 11px; color: var(--dim-3); margin-top: 12px; }

/* -------------------------------------------------------------- misc */
.list-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
            border-radius: var(--radius-sm); border: 1px solid transparent; }
.list-row:hover { background: rgba(255, 255, 255, .04); border-color: var(--line); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 11px; }
.kv div { background: var(--surface-2); border: 1px solid var(--line);
          border-radius: var(--radius-sm); padding: 12px 13px; }
.kv b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.kv span { font-size: 11.5px; color: var(--dim-2); }

table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th, table.t td { padding: 10px 9px; text-align: left;
                         border-bottom: 1px solid var(--line); }
table.t th { color: var(--dim-2); font-weight: 600; font-size: 12px;
             text-transform: uppercase; letter-spacing: .4px; }

.note { background: rgba(251, 191, 36, .08);
        border: 1px solid rgba(251, 191, 36, .3);
        border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13.5px; }
.note-ok, .note-good { background: rgba(52, 211, 153, .08);
                       border-color: rgba(52, 211, 153, .3); }
.note-bad { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .32); }
/* .note-good và .note-warn được template dùng nhưng chưa từng tồn tại trong
   CSS. .note-warn vô hại vì .note vốn đã màu hổ phách; .note-good thì định
   nói "ổn" mà lại hiện ra như cảnh báo — sai nghĩa, không phải sai thẩm mỹ. */
.note-warn { background: rgba(251, 191, 36, .08);
             border-color: rgba(251, 191, 36, .3); }

/* Nhãn dữ liệu mẫu: đậm hơn một note thường, vì nó trả lời đúng câu hỏi
   "con số này có phải của tôi không". Viền trái dày để mắt bắt được nó
   trước khi rơi xuống hàng thẻ số ngay bên dưới. */
.tw-sample { border-left: 4px solid var(--warn); margin-bottom: 14px;
             line-height: 1.65; }
.tw-sample b { color: var(--warn); }

.crumb { font-size: 13px; color: var(--dim-3); margin-bottom: 12px; }
.crumb a:hover { color: var(--brand-ink); }

label.f { display: block; font-size: 13px; color: var(--dim); margin: 13px 0 5px; }
input.f, select.f {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--field); border: 1px solid rgba(255, 255, 255, .1);
  color: var(--ink); font: inherit; font-size: 14px; outline: none;
}
input.f:focus, select.f:focus { border-color: rgba(124, 92, 255, .55); }

/* ------------------------------------------------------------ footer */
footer.ft { margin-top: 64px; border-top: 1px solid var(--line);
            background: var(--bg-2); }
.ft-grid { display: grid;
           grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, .85fr))
                                  minmax(0, 1.5fr);
           gap: 26px; padding: 44px 0 30px; }
.ft h4 { font-size: 13.5px; font-weight: 600; margin: 0 0 15px; }
.ft-col { display: flex; flex-direction: column; gap: 9px; font-size: 12px;
          color: var(--dim-2); }
.ft-col a:hover { color: #c6c6da; }
.ft-col .more { display: inline-flex; align-items: center; gap: 6px;
                color: var(--brand-ink); margin-top: 3px; }
.ft-about { font-size: 12px; line-height: 1.7; color: var(--dim-2);
            margin-top: 14px; max-width: 230px; }
.ft-sibling { font-size: 12px; color: var(--dim-3); margin-top: 10px; }
.ft-sibling a { color: #22d3ee; font-weight: 600; }
.ft-sibling a:hover { color: #67e8f9; }
.ft-sibling span { font-size: 10px; opacity: .8; }

.social { display: flex; gap: 14px; margin-top: 20px; color: var(--dim-3); }
.social a:hover { color: #c6c6da; }
.newsletter { padding: 20px; border-radius: 12px; background: var(--surface-4);
              border: 1px solid var(--line); align-self: start; }
.newsletter b { font-size: 14px; font-weight: 600; }
.newsletter p { font-size: 11.5px; line-height: 1.65; color: var(--dim-2);
                margin: 8px 0 0; }
.newsletter form { display: flex; gap: 8px; margin-top: 16px; }
.newsletter input { flex: 1; min-width: 0; height: 38px; padding: 0 12px;
                    border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1);
                    background: var(--field); color: var(--ink); font: inherit;
                    font-size: 12px; outline: none; }
.newsletter .btn { height: 38px; padding: 0 16px; font-size: 12.5px; }
.ft-bottom { display: flex; align-items: center; justify-content: space-between;
             gap: 16px; flex-wrap: wrap; padding: 18px 0; font-size: 11.5px;
             color: var(--dim-3); border-top: 1px solid rgba(255, 255, 255, .06); }
.ft-bottom div { display: flex; gap: 26px; flex-wrap: wrap; }

/* -------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .newsletter { grid-column: span 3; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 340px; order: -1; }
  .float-card { display: none; }
  .workflow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-visual { grid-template-columns: 1fr; }
  .architecture-columns, .service-grid { grid-template-columns: 1fr; }
  .weather-toolbar { flex-direction: column; }.weather-map-layout { grid-template-columns: 1fr; }.weather-detail { border-left: 0; border-top: 1px solid var(--line); min-height: 180px; }.weather-detail small { margin-top: 18px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  .shell { padding: 0 18px; }
  .g2, .g3, .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: 1fr; padding: 26px 22px; }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsletter { grid-column: span 2; }
  .hide-sm { display: none; }
  .search-row { flex-direction: column; }
  .search-row .btn { justify-content: center; }
}
@media (max-width: 520px) {
  .g2, .g3, .g4, .g6 { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-directory-grid { grid-template-columns: 1fr; }
  .industry-visual { padding: 18px; }
  .architecture-mini-grid { grid-template-columns: 1fr; }
  .weather-timeline { grid-template-columns: 1fr; width: 100%; }.weather-timeline input { width: 100%; }
  .ft-grid, .newsletter { grid-column: auto; grid-template-columns: 1fr; }
  .hero-stats { gap: 18px 26px; }
  section { padding: 22px 0; }
}

/* ==================================================================
   Lottery Quant dashboard
   Three columns on desktop, stacked on tablet. Tabs are CSS-only:
   sibling radio inputs drive :checked selectors, so no JavaScript and
   every pane is in the HTML a crawler receives.
   ================================================================== */
.lq { display: block; }
.lq-head { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 20px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 4px; }
.lq-head-act { display: flex; gap: 9px; }

.lq-warn { margin-top: 14px; padding: 12px 15px; border-radius: 10px;
           font-size: 13px; line-height: 1.6; color: #f4dfae;
           background: rgba(251, 191, 36, .09);
           border: 1px solid rgba(251, 191, 36, .28); }
.lq-warn b { color: var(--warn); }

.lq-wrap { display: grid; gap: 16px; padding-top: 16px; padding-bottom: 30px;
           grid-template-columns: 268px minmax(0, 1fr) 300px;
           align-items: start; }

/* ---------------------------------------------------------- sidebar */
.lq-side { padding: 16px; position: sticky; top: 84px; }
.lq-sec { margin-bottom: 18px; }
.lq-sec-t { display: block; font-size: 11px; font-weight: 700;
            letter-spacing: .07em; text-transform: uppercase;
            color: var(--dim-2); margin-bottom: 9px; }
.lq-radio { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
            border-radius: 8px; cursor: pointer; font-size: 13px;
            border: 1px solid transparent; }
.lq-radio:hover { background: rgba(255, 255, 255, .035); }
.lq-radio.on { background: rgba(139, 92, 246, .12);
               border-color: rgba(139, 92, 246, .35); }
.lq-radio input { accent-color: var(--brand-2); }
.lq-lab { display: block; font-size: 11.5px; color: var(--dim-2);
          margin: 10px 0 5px; }
.lq-in, .lq-ta, .lq-file {
  width: 100%; padding: 8px 10px; border-radius: 8px; background: var(--field);
  border: 1px solid rgba(255, 255, 255, .1); color: var(--ink);
  font: inherit; font-size: 12.5px; outline: none; }
.lq-ta { resize: vertical; font-family: ui-monospace, Consolas, monospace;
         line-height: 1.55; }
.lq-in:focus, .lq-ta:focus { border-color: rgba(124, 92, 255, .55); }
.lq-file { padding: 6px 8px; font-size: 11.5px; color: var(--dim); }

/* ------------------------------------------------------- stat cards */
/* auto-fit, not repeat(5): with a 268px sidebar and a 300px read-out column
   the middle column can be ~660px, and five forced cells clip "100,000". */
.lq-cards { display: grid; gap: 12px; margin-bottom: 14px;
            grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.lq-card { padding: 13px 15px; }
.lq-card-l { display: block; font-size: 11px; color: var(--dim-2); }
.lq-card-v { display: block; font-size: 21px; font-weight: 700;
             letter-spacing: -.02em; margin: 5px 0 2px; }
.lq-card-s { font-size: 11px; color: var(--dim-3); }

/* -------------------------------------------------------------- tabs */
.lq-tabs { padding: 0; overflow: hidden; }
.lq-tabin { position: absolute; opacity: 0; pointer-events: none; }
.lq-tabbar { display: flex; gap: 2px; overflow-x: auto; padding: 6px 8px 0;
             border-bottom: 1px solid var(--line); }
.lq-tab { padding: 9px 14px; font-size: 13px; color: var(--dim);
          cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0;
          border-bottom: 2px solid transparent; }
.lq-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .03); }
.lq-pane { display: none; padding: 20px; }
.lq-pane h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.lq-hint { font-weight: 400; color: var(--dim-2); font-size: 11.5px; }

#lqt-tq:checked  ~ .lq-tabbar label[for="lqt-tq"],
#lqt-xs:checked  ~ .lq-tabbar label[for="lqt-xs"],
#lqt-ts:checked  ~ .lq-tabbar label[for="lqt-ts"],
#lqt-nl:checked  ~ .lq-tabbar label[for="lqt-nl"],
#lqt-ck:checked  ~ .lq-tabbar label[for="lqt-ck"],
#lqt-pb:checked  ~ .lq-tabbar label[for="lqt-pb"],
#lqt-mc:checked  ~ .lq-tabbar label[for="lqt-mc"],
#lqt-kd:checked  ~ .lq-tabbar label[for="lqt-kd"],
#lqt-bs:checked  ~ .lq-tabbar label[for="lqt-bs"],
#lqt-tq2:checked ~ .lq-tabbar label[for="lqt-tq2"] {
  color: var(--ink); background: rgba(139, 92, 246, .13);
  border-bottom-color: var(--brand-2); font-weight: 600; }

#lqt-tq:checked  ~ #lqp-tq,
#lqt-xs:checked  ~ #lqp-xs,
#lqt-ts:checked  ~ #lqp-ts,
#lqt-nl:checked  ~ #lqp-nl,
#lqt-ck:checked  ~ #lqp-ck,
#lqt-pb:checked  ~ #lqp-pb,
#lqt-mc:checked  ~ #lqp-mc,
#lqt-kd:checked  ~ #lqp-kd,
#lqt-bs:checked  ~ #lqp-bs,
#lqt-tq2:checked ~ #lqp-tq2 { display: block; }

/* ------------------------------------------------------------ panels */
.lq-2col { display: grid; gap: 14px;
           grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lq-box { background: var(--surface-2); border: 1px solid var(--line);
          border-radius: 10px; padding: 14px; min-width: 0; }
.lq-note { font-size: 12.5px; line-height: 1.65; color: var(--dim);
           margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
           background: rgba(255, 255, 255, .025);
           border-left: 2px solid rgba(139, 92, 246, .5); }
.lq-note b { color: var(--ink-2); }

table.lq-tab-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.lq-tab-t th { text-align: left; font-weight: 600; font-size: 11px;
                    color: var(--dim-2); padding: 0 8px 8px;
                    border-bottom: 1px solid var(--line); white-space: nowrap; }
table.lq-tab-t td { padding: 6px 8px; white-space: nowrap;
                    border-bottom: 1px solid rgba(255, 255, 255, .04); }
table.lq-tab-t tr:last-child td { border-bottom: 0; }
.lq-wide { display: block; overflow-x: auto; }
.lq-num { font-weight: 700; font-variant-numeric: tabular-nums;
          color: var(--ink); }
.lq-c { text-align: right; font-variant-numeric: tabular-nums; }
.lq-z { color: var(--dim); }
.lq-flag { color: #ef4d6d; font-weight: 600; }
.lq-barcell { width: 55%; }
.lq-bar { display: block; height: 7px; border-radius: 4px; opacity: .8; }

.lq-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lq-leg { display: grid; gap: 8px; font-size: 12.5px; }
.lq-leg div { display: flex; align-items: center; gap: 8px; }
.lq-leg i { width: 10px; height: 10px; border-radius: 3px; }
.lq-leg b { margin-left: auto; font-variant-numeric: tabular-nums; }
.lq-leg span { color: var(--dim-2); font-size: 11px; min-width: 54px;
               text-align: right; }

.lq-kv { display: grid; gap: 10px; margin-top: 12px;
         grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lq-kv4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lq-kv div { background: var(--surface-3); border: 1px solid var(--line);
             border-radius: 8px; padding: 9px 11px; }
.lq-kv b { display: block; font-size: 15px; font-weight: 700; }
.lq-kv span { font-size: 10.5px; color: var(--dim-2); }

/* ------------------------------------------------------- number grid */
.lq-grid { display: grid; gap: 4px;
           grid-template-columns: repeat(var(--lq-cols, 10), minmax(0, 1fr)); }
.lq-cell { border-radius: 6px; padding: 7px 2px; text-align: center;
           border: 1px solid var(--line); }
.lq-cell b { display: block; font-size: 12px;
             font-variant-numeric: tabular-nums; }
.lq-cell span { font-size: 10px; color: var(--dim-2); }

/* ------------------------------------------------------ read-out col */
.lq-read { padding: 15px; position: sticky; top: 84px; }
.lq-read-h { display: flex; align-items: center; gap: 7px; font-size: 11px;
             font-weight: 700; letter-spacing: .07em;
             text-transform: uppercase; color: var(--dim-2);
             margin-bottom: 13px; }
.lq-score-bar { height: 7px; border-radius: 4px; overflow: hidden;
                background: rgba(255, 255, 255, .07); }
.lq-score-bar span { display: block; height: 100%;
                     background: linear-gradient(90deg, #4f5bff, #34d399); }
.lq-score-n { display: flex; justify-content: space-between;
              align-items: baseline; font-size: 15px; font-weight: 700;
              margin: 7px 0 15px; }
.lq-score-n span { font-size: 11px; font-weight: 400; color: var(--dim-2); }
.lq-read-i { padding: 10px 0; border-top: 1px solid var(--line); }
.lq-read-i b { display: block; font-size: 12.5px; margin-bottom: 5px; }
.lq-read-i p { font-size: 12px; line-height: 1.62; color: var(--dim);
               margin: 0; }
.lq-read-foot { margin-top: 13px; padding: 11px 12px; border-radius: 8px;
                font-size: 11.5px; line-height: 1.62; color: var(--dim);
                background: rgba(239, 68, 68, .07);
                border: 1px solid rgba(239, 68, 68, .22); }
.lq-read-foot b { color: #ff9aa8; }

@media (max-width: 1180px) {
  .lq-wrap { grid-template-columns: 240px minmax(0, 1fr); }
  .lq-read { grid-column: 1 / -1; position: static; }
  .lq-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lq-wrap { grid-template-columns: 1fr; }
  .lq-side { position: static; }
  .lq-2col { grid-template-columns: 1fr; }
  .lq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lq-kv4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lq-grid { --lq-cols: 5 !important; }
}

.lq-err { margin-top: 14px; padding: 12px 15px; border-radius: 10px;
          font-size: 13px; line-height: 1.6; color: #ffc9d1;
          background: rgba(239, 68, 68, .10);
          border: 1px solid rgba(239, 68, 68, .32); }
.lq-err b { color: #ff8b9c; }
.lq-err span { color: var(--dim); }

/* Fact lists hold sentences, not figures: they must wrap or the box overflows. */
table.lq-facts td { white-space: normal; line-height: 1.55; }
table.lq-facts td.lq-k { color: var(--dim-2); white-space: nowrap;
                         width: 1%; padding-right: 16px; vertical-align: top; }

/* Disclaimer block. Deliberately not styled as an error — it is a standing
   statement about what the page is, not a fault the reader should dismiss. */
.lq-disc { margin-top: 16px; padding: 13px 15px; border-radius: 10px;
           font-size: 12.5px; line-height: 1.7; color: var(--dim);
           background: rgba(148, 163, 184, .07);
           border: 1px solid rgba(148, 163, 184, .22); }
.lq-disc b { color: var(--ink-2); }

/* ==================================================================
   Tool result dashboard (_tool.html)
   Sidebar + tabbed result area. Tabs are CSS-only sibling-radio
   selectors, so the page works with scripting off and every pane sits
   in the HTML a crawler receives.
   ================================================================== */
.tp { max-width: var(--shell); margin: 0 auto; padding: 4px 28px 30px; }

.tp-head { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.tp-name { font-size: 25px; font-weight: 700; letter-spacing: -.4px;
           display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.tp-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px;
           border-radius: 999px; color: var(--brand-ink);
           background: rgba(124, 92, 255, .14);
           border: 1px solid rgba(124, 92, 255, .3); }
.tp-sub { color: var(--dim); font-size: 14px; margin: 7px 0 0; max-width: 82ch;
          line-height: 1.65; }
.tp-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------- stat cards */
.tp-cards { display: grid; gap: 12px; margin-bottom: 16px;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tp-card { padding: 14px 16px; }
.tp-card-l { display: block; font-size: 11px; color: var(--dim-2);
             text-transform: uppercase; letter-spacing: .05em; }
.tp-card-v { display: block; font-size: 25px; font-weight: 700;
             letter-spacing: -.03em; margin-top: 7px; word-break: break-word; }
.tp-badge { display: inline-block; margin-top: 9px; padding: 5px 12px;
            border-radius: 8px; font-size: 13px; font-weight: 600; }

.tp-t-ok    { --tp-c: #34d399; --tp-bg: rgba(52, 211, 153, .12);
              --tp-bd: rgba(52, 211, 153, .34); }
.tp-t-warn  { --tp-c: #fbbf24; --tp-bg: rgba(251, 191, 36, .12);
              --tp-bd: rgba(251, 191, 36, .34); }
.tp-t-bad   { --tp-c: #ef4d6d; --tp-bg: rgba(239, 77, 109, .12);
              --tp-bd: rgba(239, 77, 109, .34); }
.tp-t-info  { --tp-c: #8b93ff; --tp-bg: rgba(124, 92, 255, .12);
              --tp-bd: rgba(124, 92, 255, .32); }
.tp-badge { background: var(--tp-bg, rgba(255,255,255,.06));
            color: var(--tp-c, var(--ink));
            border: 1px solid var(--tp-bd, var(--line-2)); }
.tp-verdict { border-color: var(--tp-bd, var(--line)); }

/* -------------------------------------------------------------- layout */
.tp-wrap { display: grid; gap: 16px; align-items: start;
           grid-template-columns: 292px minmax(0, 1fr); }

.tp-side { padding: 16px; position: sticky; top: 84px; }
.tp-sec { margin-bottom: 4px; }
.tp-sec-t { display: block; font-size: 11px; font-weight: 700;
            letter-spacing: .07em; text-transform: uppercase;
            color: var(--dim-2); margin-bottom: 10px; }
.tp-lab { display: block; font-size: 12px; color: var(--ink-2);
          margin: 12px 0 5px; font-weight: 500; }
.tp-lab:first-of-type { margin-top: 0; }
.tp-hint { color: var(--dim-3); font-weight: 400; }
.tp-in, .tp-ta {
  width: 100%; padding: 8px 11px; border-radius: 8px; background: var(--field);
  border: 1px solid rgba(255, 255, 255, .1); color: var(--ink);
  font: inherit; font-size: 13px; outline: none; }
.tp-ta { resize: vertical; line-height: 1.55; font-size: 12.5px;
         font-family: ui-monospace, Consolas, monospace; }
.tp-in:focus, .tp-ta:focus { border-color: rgba(124, 92, 255, .55); }
.tp-file { margin-top: 8px; padding: 8px 10px; border-radius: 8px;
           background: var(--field); border: 1px dashed var(--line-2); }
.tp-file input { width: 100%; font-size: 11.5px; color: var(--dim); }
.tp-note-s { font-size: 11px; line-height: 1.6; color: var(--dim-3);
             margin: 6px 0 0; }
.tp-run { width: 100%; margin-top: 18px; justify-content: center; }

.tp-main { min-width: 0; display: grid; gap: 14px; }
.tp-err { padding: 12px 15px; border-radius: 10px; font-size: 13px;
          line-height: 1.6; color: #ffc9d1;
          background: rgba(239, 68, 68, .10);
          border: 1px solid rgba(239, 68, 68, .32); }
.tp-err b { color: #ff8b9c; }

/* ---------------------------------------------------------------- tabs */
.tp-tabs { padding: 0; overflow: hidden; }
.tp-tabin { position: absolute; opacity: 0; pointer-events: none; }
.tp-tabbar { display: flex; gap: 2px; overflow-x: auto; padding: 6px 8px 0;
             border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tp-tabbar::-webkit-scrollbar { display: none; }
.tp-tab { padding: 9px 15px; font-size: 13px; color: var(--dim);
          cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0;
          border-bottom: 2px solid transparent; }
.tp-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .03); }
.tp-pane { display: none; padding: 18px; }
.tp-pane h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; }

#tpt-tq:checked ~ .tp-tabbar label[for="tpt-tq"],
#tpt-bd:checked ~ .tp-tabbar label[for="tpt-bd"],
#tpt-bs:checked ~ .tp-tabbar label[for="tpt-bs"],
#tpt-ct:checked ~ .tp-tabbar label[for="tpt-ct"],
#tpt-hd:checked ~ .tp-tabbar label[for="tpt-hd"] {
  color: var(--ink); background: rgba(139, 92, 246, .13);
  border-bottom-color: var(--brand-2); font-weight: 600; }

#tpt-tq:checked ~ #tpp-tq,
#tpt-bd:checked ~ #tpp-bd,
#tpt-bs:checked ~ #tpp-bs,
#tpt-ct:checked ~ #tpp-ct,
#tpt-hd:checked ~ #tpp-hd { display: block; }

/* -------------------------------------------------------------- panels */
.tp-grid { display: grid; gap: 14px; align-items: start;
           grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr)
                                  minmax(0, 1.05fr); }
.tp-col-a, .tp-col-b, .tp-col-c { min-width: 0; display: grid; gap: 14px; }
.tp-box { background: var(--surface-2); border: 1px solid var(--line);
          border-radius: 10px; padding: 14px; min-width: 0; }
.tp-cap { font-size: 11.5px; line-height: 1.65; color: var(--dim-2);
          margin: 10px 0 0; }
.tp-cap code { font-size: 11px; padding: 1px 5px; border-radius: 4px;
               background: var(--field); }

.tp-read { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tp-read:last-of-type { border-bottom: 0; }
.tp-read b { display: block; font-size: 13px; margin-bottom: 5px;
             color: var(--tp-c, var(--ink)); }
.tp-read p { font-size: 12px; line-height: 1.65; color: var(--dim); margin: 0; }

.tp-caveat { margin-top: 12px; padding: 11px 13px; border-radius: 9px;
             font-size: 12px; line-height: 1.68; color: var(--dim);
             background: rgba(251, 191, 36, .07);
             border: 1px solid rgba(251, 191, 36, .24); }
.tp-caveat b { color: var(--warn); }

.tp-empty { padding: 26px; text-align: center; }
.tp-empty b { font-size: 15px; }
.tp-empty p { font-size: 13px; color: var(--dim); margin: 8px 0 0; }

table.tp-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tp-t th { text-align: left; font-weight: 600; font-size: 11px;
                color: var(--dim-2); padding: 0 9px 8px; white-space: nowrap;
                border-bottom: 1px solid var(--line); }
table.tp-t td { padding: 7px 9px; line-height: 1.55; vertical-align: top;
                border-bottom: 1px solid rgba(255, 255, 255, .04); }
table.tp-t tr:last-child td { border-bottom: 0; }
table.tp-t td.tp-k { color: var(--dim-2); width: 42%; }
table.tp-t pre { margin: 0; font-size: 11.5px; line-height: 1.5;
                 overflow-x: auto; }
table.tp-data td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-scroll { overflow-x: auto; }

.tp-formula { margin: 0; padding: 13px 15px; border-radius: 9px;
              background: var(--field); overflow-x: auto; font-size: 12.5px;
              line-height: 1.7; color: var(--ink-2);
              font-family: ui-monospace, Consolas, monospace;
              white-space: pre-wrap; }
.tp-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.75;
            color: var(--dim); }
.tp-steps li { margin-bottom: 9px; }
.tp-steps b { color: var(--ink-2); }
.tp-steps code { font-size: 11.5px; padding: 1px 5px; border-radius: 4px;
                 background: var(--field); }

.vz-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
          font-size: 11.5px; color: var(--dim); }
.vz-leg span { display: inline-flex; align-items: center; gap: 6px; }
.vz-leg i { width: 10px; height: 10px; border-radius: 3px; }

@media (max-width: 1240px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-col-c { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .tp-wrap { grid-template-columns: 1fr; }
  .tp-side { position: static; }
  .tp-grid { grid-template-columns: 1fr; }
  .tp-col-c { grid-column: auto; }
  .tp { padding-left: 18px; padding-right: 18px; }
}

/* Main + sidebar split used by the topic section on node pages. Was an inline
   style, which no media query can override — so it stayed two columns down to
   375px and made every node page scroll sideways by ~10px. */
.g-main-side { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
               gap: 18px; align-items: start; }
@media (max-width: 900px) {
  .g-main-side { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- Data Source picker
   Radio + a body panel per option. CSS-only: the checked radio reveals its
   own body, so the picker works with scripting off like the rest of the
   page. `:has()` is used with a sibling fallback so older engines still
   show every body rather than hiding all of them — degrading to "too much
   visible" is safe, degrading to "nothing visible" would break the form. */
.tp-src { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.tp-opt { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px;
          border-radius: 9px; cursor: pointer; margin-top: 6px;
          border: 1px solid transparent; }
.tp-opt:hover { background: rgba(255, 255, 255, .035); }
.tp-opt.on { background: rgba(139, 92, 246, .11);
             border-color: rgba(139, 92, 246, .34); }
.tp-opt input { margin-top: 2px; accent-color: var(--brand-2); flex: none; }
.tp-opt b { display: block; font-size: 13px; font-weight: 600; }
.tp-opt i { display: block; font-style: normal; font-size: 11px;
            color: var(--dim-2); margin-top: 2px; line-height: 1.5; }

.tp-src-body { display: none; padding: 4px 2px 2px 30px; }
.tp-opt.on + .tp-src-body { display: block; }

.tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
          margin-bottom: 8px; }
.tp-row label { display: block; font-size: 11px; color: var(--dim-2); }
.tp-row select { margin-top: 4px; }
select.tp-in { appearance: none; cursor: pointer;
               background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                                 linear-gradient(135deg, var(--dim) 50%, transparent 50%);
               background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
               background-size: 5px 5px, 5px 5px;
               background-repeat: no-repeat; padding-right: 26px; }
select.tp-in option { background: var(--surface); color: var(--ink); }

.tp-src-meta { font-size: 11px; color: var(--brand-ink); margin: 2px 0 6px;
               font-variant-numeric: tabular-nums; }
.tp-used { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
           padding: 9px 12px; border-radius: 9px; font-size: 12px;
           color: var(--dim); background: rgba(124, 92, 255, .08);
           border: 1px solid rgba(124, 92, 255, .24); }
.tp-used b { color: var(--brand-ink); }

@media (max-width: 520px) {
  .tp-row { grid-template-columns: 1fr; }
  .tp-src-body { padding-left: 10px; }
}

/* ------------------------------------------------------- number + slider
   The slider is decoration over an authoritative number input, so it is
   styled to read as secondary. Both thumb pseudo-elements are needed:
   WebKit and Firefox do not share one. */
.tp-num { display: block; }
.tp-num.has-slider { padding-bottom: 2px; }
.tp-range { -webkit-appearance: none; appearance: none; width: 100%;
            height: 4px; margin: 10px 0 2px; border-radius: 3px;
            background: rgba(255, 255, 255, .12); outline: none;
            cursor: pointer; }
.tp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
  border-radius: 50%; background: var(--brand-2); cursor: pointer;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(139,92,246,.5); }
.tp-range::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--brand-2);
  cursor: pointer; border: 2px solid var(--surface); }
.tp-range:focus-visible { outline: 2px solid rgba(139, 92, 246, .6);
                          outline-offset: 3px; }
.tp-range-ends { display: flex; justify-content: space-between;
                 font-size: 10px; color: var(--dim-3);
                 font-variant-numeric: tabular-nums; }
.tp-range-ends i { font-style: normal; }

/* -------------------------------------------------------- Tool Workspace */
.tw { padding-top: 22px; }
.tw-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start;
           margin-bottom: 16px; }
.tw-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr);
           gap: 16px; align-items: start; }
.tw-form { position: sticky; top: 14px; }
.tw-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tw-form-head p { margin: 0; text-align: right; }
.tw-section { margin: 18px 0 0; padding: 14px 0 0; min-inline-size: 0;
              border: 0; border-top: 1px solid var(--line); }
.tw-section legend { padding: 0 8px 0 0; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.tw-section-desc { margin: 2px 0 0; }
.tw-field { margin-top: 16px; }
.tw-field .f { margin-top: 6px; }
.tw-field .tiny { margin: 5px 0 0; line-height: 1.5; }
.tw-file-picker{
  position:relative;display:flex;align-items:center;gap:10px;min-height:42px;
  margin-top:8px;padding:6px 10px;border:1px solid var(--line);background:#080914;
  cursor:pointer;overflow:hidden
}
.tw-file-picker>span{flex:none;padding:5px 9px;background:#171827;color:var(--text);font-size:12px;font-weight:700}
.tw-file-picker small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.tw-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tw-error { color: #fca5a5; font-size: 12px; margin: 6px 0 0; }
.tw-run { width: 100%; justify-content: center; margin-top: 20px; }
.tw-guardrail { margin: 10px 0 0; line-height: 1.55; }
.tw-pane, .tw-chart { margin-bottom: 14px; }
.tw-empty { min-height: 160px; display: grid; place-items: center; text-align: center; }
.tw-method { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; }
.tw-method summary { cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.tw-structured { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.tw-structured summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.tw-structured pre { margin: 9px 0 0; padding: 10px; overflow-x: auto; font-size: 11px;
                      line-height: 1.55; background: var(--field); border: 1px solid var(--line); }
.tw-exports { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.tw-history { margin-top: 16px; }
.tw-history-list { margin-top: 10px; display: grid; gap: 8px; }
.tw-history-list > div { display: flex; justify-content: space-between; gap: 12px; align-items: center;
                         padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; }
.tw-history-list small { display: block; margin-top: 3px; color: var(--dim-2); }
.tw-history-list a { color: var(--brand-ink); margin-left: 8px; }

@media (max-width: 900px) {
  .tw-grid { grid-template-columns: 1fr; }
  .tw-form { position: static; }
}
/* Architecture and platform surfaces */
.architecture-value{border-top:1px solid var(--line);padding-top:10px;margin-top:12px;display:grid;gap:4px}
.architecture-value b{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--layer-accent)}
.architecture-value span{font-size:13px;line-height:1.5;color:var(--muted)}
.service-main{display:grid;gap:8px;min-width:0;flex:1}
.service-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.service-detail{display:grid;grid-template-columns:72px 1fr;gap:8px;font-size:12px;line-height:1.45;color:var(--muted)}
.service-detail b{color:var(--text)}
.core-taxonomy{padding-top:14px}
.core-family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.core-family{border:1px solid var(--line);padding:16px;background:#0b0b18}
.core-family>div{display:flex;justify-content:space-between;gap:10px;align-items:start}
.core-family p{font-size:12px;color:var(--muted);line-height:1.45;min-height:36px}
.core-capabilities{display:flex;flex-wrap:wrap;gap:6px}
.core-capabilities span{font-size:11px;padding:5px 7px;border:1px solid var(--line);color:var(--muted)}
.core-capabilities .is-live{border-color:#34d39966;color:#8ef0c4}
.core-capabilities .is-planned{opacity:.65}
.workspace-value{padding-top:10px}
.workspace-value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}
.workspace-value-grid>div{padding:16px;border-right:1px solid var(--line);display:grid;gap:7px}
.workspace-value-grid>div:last-child{border-right:0}
.workspace-value-grid b{color:#a78bfa}
.workspace-value-grid span{font-size:13px;line-height:1.45;color:var(--muted)}
.labs-return{padding-top:22px}
@media(max-width:1000px){.core-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-value-grid>div:nth-child(2){border-right:0}.workspace-value-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:520px){.core-family-grid{grid-template-columns:1fr}.workspace-value-grid{grid-template-columns:1fr}.workspace-value-grid>div{border-right:0;border-bottom:1px solid var(--line)}.workspace-value-grid>div:last-child{border-bottom:0}.service-detail{grid-template-columns:1fr}}

/* Platform hub */
.platform-head{padding-top:56px;padding-bottom:34px}
.platform-head .lead{max-width:760px}
.platform-stats{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:30px}
.platform-stats span{display:grid;gap:3px;padding:18px 28px 18px 0;margin-right:28px;border-right:1px solid var(--line);font-size:12px;color:var(--muted)}
.platform-stats span:last-child{border-right:0}
.platform-stats b{font-size:22px;color:var(--ink)}
.platform-sections{border-top:1px solid var(--line)}
.platform-band{border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--layer-accent) 5%,transparent),transparent 45%)}
.platform-band-in{display:grid;grid-template-columns:1.25fr 1fr auto;gap:44px;align-items:center;padding-top:34px;padding-bottom:34px}
.platform-band h2{font-size:25px;margin:4px 0 8px}
.platform-band p{color:var(--muted);line-height:1.55;margin:0;max-width:62ch}
.platform-number{font-size:11px;color:var(--layer-accent);font-weight:700}
.platform-delivery{border-left:2px solid var(--layer-accent);padding-left:18px}
.platform-delivery b{font-size:12px;text-transform:uppercase}
.platform-delivery p{font-size:13px;margin:6px 0}
.platform-delivery small{display:block;color:var(--dim-2);line-height:1.45}
.platform-route{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:40px;padding-bottom:48px}
.platform-route>div:last-child{display:flex;gap:10px;flex-wrap:wrap}

/* Quant Core capability library */
.core-head{padding-top:48px;padding-bottom:22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.core-head .lead{max-width:780px}
.core-summary{display:grid;grid-template-columns:repeat(3,86px);border:1px solid var(--line)}
.core-summary span{display:grid;gap:3px;padding:14px;border-right:1px solid var(--line);text-align:center}
.core-summary span:last-child{border-right:0}
.core-summary b{font-size:22px}
.core-summary small{font-size:10px;color:var(--muted);text-transform:uppercase}
.core-controls{padding-top:10px;padding-bottom:12px}
.core-controls form{display:grid;grid-template-columns:minmax(230px,1.4fr) minmax(170px,.7fr) minmax(170px,.7fr) auto auto;gap:10px;align-items:end}
.core-controls label{display:grid;gap:6px;font-size:11px;color:var(--muted)}
.core-controls input,.core-controls select{width:100%;height:42px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 12px;font:inherit}
.core-controls select{cursor:pointer}
.core-search{position:relative}
.core-search>span{position:absolute;left:12px;bottom:12px;z-index:1}
.core-search input{padding-left:39px}
.core-controls .btn{height:42px;padding:0 17px;justify-content:center}
.core-reset{height:42px;display:flex;align-items:center;font-size:12px;color:var(--muted)}
.core-controls>p{font-size:12px;color:var(--muted);margin:12px 0 0}
.status-key{margin-left:10px}
.status-key i{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4px 0 10px}
.status-key .runnable{background:#34d399}.status-key .library{background:#fbbf24}.status-key .planned{background:#64748b}
.core-model-group{padding-top:23px}
.core-model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.core-model-card{border:1px solid var(--line);background:var(--surface);padding:18px;display:flex;flex-direction:column;min-height:330px}
.core-model-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.core-model-top>a{font-size:11px;color:var(--brand-ink)}
.cap-status{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;padding:5px 8px;border:1px solid}
.cap-status::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.cap-runnable{color:#55dba6;border-color:#34d39955;background:#34d39912}
.cap-library{color:#f5c75b;border-color:#fbbf2455;background:#fbbf2410}
.cap-planned{color:#94a3b8;border-color:#64748b55;background:#64748b10}
.core-model-card h3{font-size:20px;margin:15px 0 7px}
.core-model-card>p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.core-model-card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0}
.core-model-card dl>div{border-top:1px solid var(--line);padding-top:10px}
.core-model-card dt{font-size:10px;text-transform:uppercase;color:var(--dim-2);margin-bottom:5px}
.core-model-card dd{font-size:12px;line-height:1.45;color:var(--muted);margin:0}
.core-model-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
.core-industry-links{display:flex;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.core-industry-links a{font-size:10px;color:var(--dim-2);border-bottom:1px solid var(--line-2)}
.core-industry-links a:hover{color:var(--ink)}
.core-empty{padding-top:45px;padding-bottom:45px;text-align:center}
.core-empty p{color:var(--muted)}
.model-primary-action{margin-top:18px}
.model-primary-action>span{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:9px 12px;display:inline-block}

@media(max-width:1000px){
  .platform-band-in{grid-template-columns:1fr 1fr}.platform-band-in>.btn{grid-column:1/-1;width:max-content}
  .core-head{grid-template-columns:1fr}.core-summary{width:max-content}
  .core-controls form{grid-template-columns:1fr 1fr}.core-search{grid-column:1/-1}
}
@media(max-width:700px){
  .platform-stats{display:grid;grid-template-columns:1fr 1fr}.platform-stats span{margin:0;padding:14px;border-bottom:1px solid var(--line)}
  .platform-band-in{grid-template-columns:1fr;gap:20px}.platform-band-in>.btn{grid-column:auto}
  .platform-route{align-items:flex-start;flex-direction:column}
  .core-controls form,.core-model-grid{grid-template-columns:1fr}.core-search{grid-column:auto}
  .core-model-card dl{grid-template-columns:1fr}.core-summary{grid-template-columns:repeat(3,minmax(72px,1fr));width:100%}
}

.nav-auth-form{margin:0}
.auth-shell{min-height:calc(100vh - 280px);display:grid;place-items:center;padding-top:64px;padding-bottom:64px}
.auth-panel{width:min(100%,520px);border:1px solid var(--line);padding:30px;background:var(--surface)}
.auth-panel h1{font-size:30px;margin:12px 0 8px}
.auth-panel>p{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 22px}
.auth-panel form{display:grid;gap:16px;margin-top:18px}
.auth-panel label{display:grid;gap:7px;font-size:11px;text-transform:uppercase;color:var(--dim-2)}
.auth-panel input[type=password]{height:44px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 12px;font:inherit}
.auth-panel .btn{justify-content:center}

/* Vietnam Stock Quant */
.vnq-hero{position:relative;min-height:390px;overflow:hidden;border-bottom:1px solid var(--line)}
.vnq-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vnq-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,14,.97) 0%,rgba(5,6,14,.84) 43%,rgba(5,6,14,.25) 78%,rgba(5,6,14,.5) 100%)}
.vnq-hero-in{position:relative;z-index:1;padding-top:48px;padding-bottom:42px}
.vnq-hero h1{font-size:56px;line-height:1;margin:13px 0 12px;letter-spacing:0}
.vnq-hero-in>p{max-width:670px;color:#d4d4e5;font-size:16px;line-height:1.6}
.vnq-symbol-form{display:grid;gap:6px;max-width:680px;margin-top:23px}
.vnq-symbol-form>label{font-size:11px;text-transform:uppercase;color:#c7c7d6;font-weight:700}
.vnq-symbol-form>div{display:grid;grid-template-columns:minmax(180px,1fr) auto;background:rgba(8,9,18,.84);border:1px solid rgba(255,255,255,.18);padding:5px}
.vnq-symbol-form input{background:transparent;border:0;color:#fff;padding:0 13px;font:inherit;min-width:0}
.vnq-symbol-form input:focus{outline:0}
.vnq-scope{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}
.vnq-scope span{font-size:10px;padding:5px 8px;border:1px solid rgba(255,255,255,.2);background:rgba(5,6,14,.55);color:#d6d6e3}
.vnq-readiness{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:26px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.vnq-readiness h2{font-size:17px;margin:9px 0 4px}
.vnq-readiness p{font-size:12px;line-height:1.5;color:var(--muted);margin:0;max-width:820px}
.vnq-readiness-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.vnq-workflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.vnq-workflow{background:var(--surface);padding:20px;display:flex;flex-direction:column;min-height:260px}
.vnq-workflow>div:first-child{display:flex;justify-content:space-between;align-items:center}
.vnq-workflow>div:first-child>span{font-size:11px;color:#ef4444;font-weight:700}
.vnq-workflow h3{font-size:19px;margin:13px 0 6px}
.vnq-workflow>p{font-size:12px;color:var(--muted);line-height:1.5;margin:0}
.vnq-child-list{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.vnq-child-list a{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:5px 7px}
.vnq-child-list a:hover{border-color:#ef444466;color:var(--ink)}
.vnq-workflow>.link-more{margin-top:auto}
.vnq-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#090a13;margin-top:36px}
.vnq-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}
.vnq-modes>div{display:grid;gap:7px;padding:18px;border-right:1px solid var(--line)}
.vnq-modes>div:last-child{border-right:0}
.vnq-modes b{color:#ef7a7a}
.vnq-modes span{font-size:12px;line-height:1.5;color:var(--muted)}
.vnq-output-section{display:grid;grid-template-columns:.85fr 1.5fr;gap:45px;align-items:start}
.vnq-output-section p{font-size:13px;color:var(--muted);line-height:1.5}
.vnq-output-list{display:flex;flex-wrap:wrap;gap:7px}
.vnq-output-list span{font-size:11px;padding:7px 9px;border:1px solid var(--line);background:var(--surface)}
.vnq-company-head{padding-top:28px}
.vnq-company-head>div:last-child{margin-top:22px;border-bottom:1px solid var(--line);padding-bottom:22px}
.vnq-company-head h1{font-size:36px;margin:12px 0 5px}
.vnq-company-head h1 small{font-size:16px;color:var(--muted);font-weight:500}
.vnq-company-head p{color:var(--muted);font-size:13px}
.vnq-company-layout{display:grid;grid-template-columns:150px minmax(0,1fr) 260px;gap:24px;padding-top:18px}
.vnq-company-layout>nav{display:grid;align-content:start}
.vnq-company-layout>nav a{font-size:12px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.vnq-company-empty{min-height:360px;border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.vnq-company-empty h2{font-size:24px;margin:11px 0 6px}
.vnq-company-empty p,.vnq-company-layout>aside p{color:var(--muted);font-size:13px;line-height:1.55}
.vnq-company-empty>div{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 22px}
.vnq-company-empty>div span{font-size:10px;border:1px solid var(--line);padding:6px 8px}
.vnq-company-layout>aside{border-left:1px solid var(--line);padding-left:20px}
.vnq-company-layout>aside h3{font-size:16px;margin:10px 0 5px}
@media(max-width:900px){.vnq-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.vnq-modes>div:nth-child(2){border-right:0}.vnq-modes>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.vnq-company-layout{grid-template-columns:130px 1fr}.vnq-company-layout>aside{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:18px 0 0}}
@media(max-width:640px){.vnq-hero{min-height:470px}.vnq-hero h1{font-size:40px}.vnq-hero-shade{background:rgba(5,6,14,.78)}.vnq-symbol-form>div{grid-template-columns:1fr}.vnq-symbol-form .btn{justify-content:center}.vnq-readiness{align-items:flex-start;flex-direction:column}.vnq-workflow-grid,.vnq-output-section,.vnq-company-layout{grid-template-columns:1fr}.vnq-modes{grid-template-columns:1fr}.vnq-modes>div{border-right:0;border-bottom:1px solid var(--line)}.vnq-modes>div:last-child{border-bottom:0}.vnq-company-layout>aside{grid-column:auto}}

/* Vietnam equity executable MVP and data control surface */
.vnq-live{padding-top:34px}
.vnq-live-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line)}
.vnq-live-item{padding:18px;display:flex;flex-direction:column;min-height:310px;border-right:1px solid var(--line);background:var(--surface)}
.vnq-live-item:last-child{border-right:0}
.vnq-live-item>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vnq-live-no{color:#ef4444;font-size:11px;font-weight:700}
.vnq-live-item h3{font-size:17px;line-height:1.3;margin:18px 0 7px}
.vnq-live-item>p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.vnq-live-item dl{margin:18px 0;display:grid;gap:10px}
.vnq-live-item dl>div{border-top:1px solid var(--line);padding-top:8px}
.vnq-live-item dt{font-size:9px;text-transform:uppercase;color:var(--dim-2)}
.vnq-live-item dd{font-size:11px;line-height:1.4;color:var(--muted);margin:4px 0 0}
.vnq-live-item>.link-more{margin-top:auto}
.vnq-advanced{padding-top:12px}
.vnq-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}
.vnq-module-grid>a{padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;min-height:180px}
.vnq-module-grid>a:nth-child(4n){border-right:0}
.vnq-module-grid b{font-size:15px;line-height:1.35;margin-top:15px}
.vnq-module-grid small{font-size:11px;line-height:1.45;color:var(--muted);margin-top:7px}
.vnq-module-grid i{font-style:normal;color:var(--brand-ink);font-size:10px;margin-top:auto}
.vnq-connectors{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line)}
.vnq-connectors>div{min-width:0;padding:15px 12px;border-right:1px solid var(--line);display:grid;align-content:start;gap:6px}
.vnq-connectors>div:last-child{border-right:0}
.vnq-connectors b{font-size:12px;line-height:1.3}
.vnq-connectors small{color:var(--dim-2);font-size:10px}
.vnq-connector-state{display:inline-flex;width:max-content;max-width:100%;font-size:9px;text-transform:uppercase;font-weight:700;color:#94a3b8}
.vnq-connector-state.is-upload-ready{color:#55dba6}
.vnq-connector-state.is-contract-ready{color:#f5c75b}
.vnq-connector-state.is-configuration-required{color:#94a3b8}
.vnq-data-head{padding-top:44px;padding-bottom:35px}
.vnq-data-head .eyebrow{display:block;margin-top:28px}
.vnq-data-head h1{font-size:46px;line-height:1.05;letter-spacing:0;margin:12px 0}
.vnq-data-head p{max-width:760px;color:var(--muted);font-size:15px;line-height:1.6}
.vnq-pipeline-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#090a13}
.vnq-pipeline{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.vnq-pipeline>div{padding:20px 12px;border-right:1px solid var(--line);display:grid;gap:8px;min-height:94px}
.vnq-pipeline>div:first-child{border-left:1px solid var(--line)}
.vnq-pipeline span{font-size:9px;color:#ef4444;font-weight:700}
.vnq-pipeline b{font-size:11px;line-height:1.35}
.vnq-connector-table{border:1px solid var(--line)}
.vnq-connector-row{display:grid;grid-template-columns:1fr .7fr .9fr 1.7fr;gap:14px;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line);font-size:12px}
.vnq-connector-row:last-child{border-bottom:0}
.vnq-connector-row>span:not(.vnq-connector-state){color:var(--muted);line-height:1.45}
.vnq-connector-row.is-head{font-size:9px;text-transform:uppercase;color:var(--dim-2);background:#090a13}
.vnq-gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line)}
.vnq-gates>div{padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.vnq-gates>div:nth-child(3n){border-right:0}
.vnq-gates>div:nth-last-child(-n+3){border-bottom:0}
.vnq-gates b{font-size:13px;color:#ef8b8b}
.vnq-gates p{font-size:12px;line-height:1.5;color:var(--muted);margin:7px 0 0}
.vnq-data-workflows{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line)}
.vnq-data-workflows>a{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:190px}
.vnq-data-workflows>a:last-child{border-right:0}
.vnq-data-workflows b{font-size:15px;line-height:1.35;margin-top:16px}
.vnq-data-workflows small{font-size:11px;line-height:1.45;color:var(--muted);margin-top:7px}
.vnq-data-workflows i{font-style:normal;font-size:11px;color:var(--brand-ink);margin-top:auto}
.vnq-data-note{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:28px;padding-bottom:28px}
.vnq-data-note h2{font-size:20px;margin:7px 0}
.vnq-data-note p{font-size:12px;line-height:1.55;color:var(--muted);max-width:850px;margin:0}
.vnq-ingest{padding-top:30px}
.vnq-ingest-layout{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);border:1px solid var(--line)}
.vnq-ingest-form{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:13px;border-right:1px solid var(--line);align-content:start}
.vnq-ingest-form label{display:grid;gap:6px;font-size:10px;text-transform:uppercase;color:var(--dim-2)}
.vnq-ingest-form input,.vnq-ingest-form select{width:100%;min-width:0;height:40px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 10px;font:inherit;font-size:12px}
.vnq-ingest-form input[type=file]{padding:8px;height:auto}
.vnq-ingest-form .btn{grid-column:1/-1;justify-content:center}
.vnq-raw-log{padding:18px;min-width:0}
.vnq-raw-log>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px}
.vnq-raw-log>div:first-child span{font-size:10px;color:var(--dim-2)}
.vnq-raw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);padding:10px 0}
.vnq-raw-row>span{display:grid;gap:3px;min-width:0}
.vnq-raw-row b{font-size:12px}
.vnq-raw-row small{font-size:10px;color:var(--dim-2);overflow:hidden;text-overflow:ellipsis}
.vnq-raw-row code{font-size:11px;color:#ef8b8b}
.vnq-store-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-top:0}
.vnq-store-counts>div{padding:13px 16px;border-right:1px solid var(--line);display:grid;gap:3px}
.vnq-store-counts>div:last-child{border-right:0}
.vnq-store-counts b{font-size:18px}
.vnq-store-counts span{font-size:10px;color:var(--dim-2);text-transform:uppercase}
.vnq-ssi{padding-top:18px}
.vnq-ssi-grid{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);border:1px solid var(--line)}
.vnq-ssi-status,.vnq-ssi-actions{padding:22px}
.vnq-ssi-status{border-right:1px solid var(--line)}
.vnq-ssi-status h3{font-size:20px;margin:14px 0}
.vnq-ssi-status dl{display:grid;gap:9px;margin:0}
.vnq-ssi-status dl>div{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:9px}
.vnq-ssi-status dt{font-size:9px;text-transform:uppercase;color:var(--dim-2)}
.vnq-ssi-status dd{margin:0;font-size:11px;text-align:right}
.vnq-ssi-status>p,.vnq-ssi-wait p{font-size:12px;line-height:1.55;color:var(--muted)}
.vnq-ssi-actions{display:grid;align-content:start;gap:14px}
.vnq-ssi-check{display:flex;justify-content:flex-end}
.vnq-ssi-import{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.vnq-ssi-import label{display:grid;gap:6px;font-size:10px;text-transform:uppercase;color:var(--dim-2)}
.vnq-ssi-import input{height:40px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 10px;font:inherit}
.vnq-ssi-import .btn{grid-column:1/-1;justify-content:center}
.vnq-connector-state.is-configured{color:#55dba6}
@media(max-width:1100px){
  .vnq-live-grid,.vnq-data-workflows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vnq-live-item,.vnq-data-workflows>a{border-bottom:1px solid var(--line)}
  .vnq-live-item:nth-child(2n),.vnq-data-workflows>a:nth-child(2n){border-right:0}
  .vnq-connectors{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vnq-connectors>div{border-bottom:1px solid var(--line)}
  .vnq-pipeline{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vnq-pipeline>div:nth-child(4n){border-right:0}
  .vnq-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vnq-module-grid>a:nth-child(2n){border-right:0}
}
@media(max-width:700px){
  .vnq-live-grid,.vnq-data-workflows,.vnq-connectors,.vnq-pipeline,.vnq-gates,.vnq-module-grid{grid-template-columns:1fr}
  .vnq-live-item,.vnq-data-workflows>a,.vnq-connectors>div,.vnq-pipeline>div,.vnq-gates>div{border-right:0;border-bottom:1px solid var(--line);min-height:auto}
  .vnq-live-item:last-child,.vnq-data-workflows>a:last-child,.vnq-connectors>div:last-child,.vnq-pipeline>div:last-child,.vnq-gates>div:last-child{border-bottom:0}
  .vnq-pipeline>div:first-child{border-left:0}
  .vnq-connector-row{grid-template-columns:1fr}
  .vnq-connector-row.is-head{display:none}
  .vnq-data-head h1{font-size:36px}
  .vnq-data-note{align-items:flex-start;flex-direction:column}
  .vnq-ingest-layout,.vnq-ingest-form{grid-template-columns:1fr}
  .vnq-ingest-form{border-right:0;border-bottom:1px solid var(--line)}
  .vnq-ingest-form .btn{grid-column:auto}
  .vnq-raw-row{grid-template-columns:1fr}
  .vnq-store-counts{grid-template-columns:1fr 1fr}
  .vnq-store-counts>div:nth-child(2){border-right:0}
  .vnq-store-counts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .vnq-module-grid>a{border-right:0}
  .vnq-ssi-grid,.vnq-ssi-import{grid-template-columns:1fr}
  .vnq-ssi-status{border-right:0;border-bottom:1px solid var(--line)}
}

/* Vietnam Market Intelligence */
.mi-head{border-bottom:1px solid var(--line);background:#090a12}
.mi-head>.shell{padding-top:28px;padding-bottom:25px}
.mi-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-top:25px}
.mi-head h1{font-size:38px;line-height:1.08;margin:8px 0 7px;letter-spacing:0}
.mi-head p{max-width:760px;color:var(--muted);font-size:13px;line-height:1.55;margin:0}
.mi-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-top:0}
.mi-kpis>div,.mi-company-kpis>div{padding:15px 17px;border-right:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--surface)}
.mi-kpis>div:last-child,.mi-company-kpis>div:last-child{border-right:0}
.mi-kpis span,.mi-company-kpis span{font-size:10px;text-transform:uppercase;color:var(--dim-2)}
.mi-kpis b,.mi-company-kpis b{font-size:24px}.mi-kpis .is-critical b{color:#fb7185}.mi-kpis .is-high b{color:#f6ad55}.mi-kpis .is-medium b{color:#facc15}
.mi-controls{padding-top:16px;padding-bottom:16px}
.mi-controls form{display:grid;grid-template-columns:1.35fr .55fr .65fr .75fr auto auto;gap:9px;align-items:end}
.mi-controls label,.mi-ingest label{display:grid;gap:6px;font-size:9px;text-transform:uppercase;color:var(--dim-2)}
.mi-controls input,.mi-controls select,.mi-ingest input,.mi-ingest textarea{width:100%;min-width:0;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 11px;font:inherit;font-size:12px}
.mi-controls input,.mi-controls select,.mi-ingest input{height:40px}.mi-controls .btn{height:40px;justify-content:center}.mi-reset{height:40px;display:flex;align-items:center;font-size:11px;color:var(--muted)}
.mi-layout{display:grid;grid-template-columns:minmax(440px,.95fr) minmax(460px,1.05fr);border:1px solid var(--line);padding-left:0;padding-right:0}
.mi-feed{border-right:1px solid var(--line);min-width:0}.mi-detail{min-width:0}
.mi-panel-head{min-height:61px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--line);background:#090a12}
.mi-panel-head h2,.mi-panel-head h3{font-size:17px;margin:4px 0 0}.mi-panel-head>span{font-size:10px;color:var(--dim-2)}
.mi-feed-list{max-height:850px;overflow:auto}.mi-event{display:block;padding:15px 16px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink)}
.mi-event:hover,.mi-event.is-selected{background:#10121d}.mi-event.is-selected{box-shadow:inset 3px 0 #38bdf8}
.mi-event-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.mi-event-top>span:last-child{font-size:10px;color:var(--dim-2)}
.mi-severity{display:inline-flex;width:max-content;padding:4px 7px;border:1px solid;font-size:9px;text-transform:uppercase;font-weight:700}
.mi-severity.is-critical{color:#fb7185;border-color:#fb718566;background:#fb718510}.mi-severity.is-high{color:#f6ad55;border-color:#f6ad5566;background:#f6ad5510}.mi-severity.is-medium{color:#facc15;border-color:#facc1560;background:#facc1510}.mi-severity.is-low{color:#5eead4;border-color:#5eead450;background:#5eead410}
.mi-event h3{font-size:15px;line-height:1.4;margin:11px 0 8px}.mi-symbols{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.mi-symbols b{font-size:10px;color:#7dd3fc;border:1px solid #38bdf840;padding:3px 5px}.mi-symbols span{font-size:10px;color:var(--muted)}
.mi-event-metrics{display:grid;grid-template-columns:auto auto auto 1fr;gap:10px;align-items:center;margin-top:12px;font-size:9px;color:var(--dim-2)}.mi-event-metrics b{color:var(--ink)}.mi-event-metrics i{justify-self:end;font-style:normal;font-weight:700}.mi-event-metrics i.is-unverified{color:#f6ad55}.mi-event-metrics i.is-verified{color:#55dba6}.mi-event-metrics i.is-disputed,.mi-event-metrics i.is-false{color:#fb7185}
.mi-detail-head{padding:20px;border-bottom:1px solid var(--line)}.mi-detail-head>div:first-child{display:flex;gap:7px;flex-wrap:wrap}.mi-verify{padding:4px 7px;font-size:9px;border:1px solid var(--line-2);color:var(--muted)}.mi-verify.is-unverified{color:#f6ad55}.mi-verify.is-verified{color:#55dba6}.mi-detail-head h2{font-size:22px;line-height:1.3;margin:15px 0 8px}.mi-detail-head p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.mi-detail-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.mi-detail-links a{font-size:10px;color:#7dd3fc}
.mi-score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}.mi-score-grid>div{padding:13px;border-right:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:7px}.mi-score-grid>div:nth-child(3n){border-right:0}.mi-score-grid>div:nth-child(-n+3){border-bottom:1px solid var(--line)}.mi-score-grid span{font-size:9px;color:var(--dim-2);text-transform:uppercase}.mi-score-grid b{font-size:16px}.mi-score-grid i,.mi-company-score i{grid-column:1/-1;height:3px;background:#202330;overflow:hidden}.mi-score-grid u,.mi-company-score u{display:block;height:100%;background:#38bdf8;text-decoration:none}
.mi-evidence article{padding:15px 18px;border-bottom:1px solid var(--line)}.mi-evidence article>div{display:flex;justify-content:space-between;gap:12px}.mi-evidence article>div b,.mi-evidence article>div span{font-size:9px;color:var(--dim-2)}.mi-evidence h4{font-size:13px;line-height:1.4;margin:9px 0 5px}.mi-evidence p{font-size:11px;line-height:1.55;color:var(--muted);margin:0 0 7px}.mi-evidence a{font-size:10px;color:#7dd3fc}.mi-no-url{font-size:9px;color:var(--dim-2)}
/* Khối chú giải AI. Cố ý KHÔNG dùng lại kiểu của các panel số phía trên:
   nền khác, viền trái riêng, chữ nhãn màu khác. Người đọc phải nhận ra ngay
   đây là phần model đoán chứ không phải phần rule engine tính, mà không cần
   đọc chữ nào. */
.mi-ai{padding:14px 18px;border-bottom:1px solid var(--line);background:#0b1115;
       border-left:3px solid #334155}
.mi-ai.is-live{border-left-color:#5eead4}
.mi-ai>span{font-size:9px;color:#5eead4;font-weight:700;letter-spacing:.4px}
.mi-ai p{font-size:11px;color:var(--muted);margin:5px 0 0}
.mi-ai-summary{color:var(--ink-2)!important;font-size:12px!important;line-height:1.6}
.mi-ai-facts{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);
             gap:4px 12px;margin:10px 0 0;font-size:11px}
.mi-ai-facts dt{color:#64748b}
.mi-ai-facts dd{margin:0;color:var(--ink-2)}
.mi-ai-agree{color:#34d399;font-weight:600}
.mi-ai-differ{color:#fbbf24;font-weight:600}
.mi-ai-warn{margin:9px 0 0;padding-left:16px;font-size:10.5px;color:#fbbf24}
.mi-ai-note{font-size:10px!important;color:#64748b!important;margin-top:9px!important;
            font-style:italic}
.mi-actions{padding:16px 18px;display:grid;gap:9px}.mi-actions>div{display:flex;gap:6px;flex-wrap:wrap}.mi-actions button{border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:7px 9px;font:inherit;font-size:10px;cursor:pointer}.mi-actions button:hover{border-color:#38bdf8}.mi-action-status{font-size:10px;color:#f6ad55;margin:0;min-height:14px}
.mi-empty{min-height:260px;padding:30px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.mi-empty h3{font-size:19px;margin:12px 0 5px}.mi-empty p{font-size:12px;line-height:1.55;color:var(--muted);max-width:450px}
.mi-social-ops{padding-top:28px}.mi-social-state{font-size:10px;color:var(--dim-2)}.mi-social-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line)}.mi-social-kpis>div{padding:14px;border-right:1px solid var(--line);display:grid;gap:5px}.mi-social-kpis>div:last-child{border-right:0}.mi-social-kpis span{font-size:9px;color:var(--dim-2);text-transform:uppercase}.mi-social-kpis b{font-size:22px}.mi-social-kpis small{font-size:9px;color:var(--muted)}.mi-social-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0}.mi-provider-status{border-right:1px solid var(--line)}.mi-provider-row{display:grid;grid-template-columns:85px minmax(130px,.7fr) 1fr;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}.mi-provider-row b{font-size:11px}.mi-provider-row small{font-size:9px;color:var(--dim-2)}.mi-burst-row{display:grid;grid-template-columns:70px 1fr 1fr auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}.mi-burst-row b{font-size:11px;color:#7dd3fc}.mi-burst-row span,.mi-burst-row em{font-size:9px;color:var(--dim-2);font-style:normal}.mi-burst-row em.is-high{color:#fb7185}.mi-burst-row em.is-medium{color:#f6ad55}.mi-social-empty{font-size:11px;color:var(--muted);padding:20px;margin:0}.mi-alias-admin{padding-top:8px}.mi-alias-admin form{display:grid;grid-template-columns:130px minmax(220px,1.4fr) 150px 120px auto auto;gap:10px;align-items:end;border:1px solid var(--line);padding:14px}.mi-alias-admin label{display:grid;gap:5px;font-size:9px;color:var(--dim-2);text-transform:uppercase}.mi-alias-admin input,.mi-alias-admin select{height:36px;min-width:0;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 9px;font:inherit;font-size:11px}.mi-alias-admin .btn{height:36px;justify-content:center}.mi-alias-admin p{grid-column:1/-1;margin:0;font-size:10px;color:#f6ad55;min-height:13px}
.mi-ops-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#090a12;margin-top:28px;padding-bottom:28px}.mi-source-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}.mi-source-grid>div{padding:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;align-content:start;gap:7px;min-height:155px}.mi-source-grid>div:nth-child(4n){border-right:0}.mi-source-grid b{font-size:12px;line-height:1.35}.mi-source-grid small{font-size:9px;color:var(--dim-2);line-height:1.45}.mi-source-grid em{font-size:9px;color:#fb7185;font-style:normal;line-height:1.4}.mi-health{font-size:9px;font-weight:700;color:#94a3b8}.mi-health.is-backoff,.mi-health.is-stale{color:#f6ad55}.mi-health.is-configuration-required{color:#facc15}.mi-delivery-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0}.mi-delivery-row>div{padding:11px 14px;border-right:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}.mi-delivery-row>div:last-child{border-right:0}.mi-delivery-row b{font-size:11px}.mi-delivery-row span{font-size:10px;color:var(--dim-2)}
.mi-ingest{padding-top:18px}.mi-ingest form{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:1px solid var(--line);padding:18px}.mi-ingest textarea{padding:10px;resize:vertical}.mi-ingest .mi-span-2{grid-column:1/-1}.mi-ingest .btn{width:max-content}.mi-ingest form>p{font-size:11px;color:#f6ad55;margin:0;align-self:center}
.mi-source-admin{padding-top:8px}.mi-source-admin-list{border:1px solid var(--line)}.mi-source-form{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(210px,1.5fr) 100px 100px 105px 90px auto auto minmax(110px,.7fr);gap:9px;align-items:end;padding:12px 14px;border-bottom:1px solid var(--line)}.mi-source-form:last-child{border-bottom:0}.mi-source-form>b{font-size:11px;align-self:center}.mi-source-form label{display:grid;gap:5px;font-size:9px;color:var(--dim-2);text-transform:uppercase}.mi-source-form input{height:36px;min-width:0;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 9px;font:inherit;font-size:11px}.mi-source-form .mi-source-toggle{display:flex;align-items:center;gap:7px;height:36px}.mi-source-form .mi-source-toggle input{width:15px;height:15px}.mi-source-form button{height:36px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);font:inherit;font-size:10px;padding:0 10px;cursor:pointer}.mi-source-form button:disabled{opacity:.4;cursor:not-allowed}.mi-source-form>span{font-size:9px;color:#f6ad55;align-self:center}.mi-run-history{margin-top:18px;border:1px solid var(--line)}.mi-run-table-wrap{overflow-x:auto}.mi-run-history table{width:100%;border-collapse:collapse;min-width:760px}.mi-run-history th,.mi-run-history td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:10px;white-space:nowrap}.mi-run-history th{color:var(--dim-2);font-size:9px;text-transform:uppercase;background:#090a12}.mi-run-history td:first-child{white-space:normal;min-width:170px}
.mi-company-head{background:#090a12;border-bottom:1px solid var(--line)}.mi-company-head>.shell{padding-top:27px;padding-bottom:24px}.mi-company-title{display:grid;grid-template-columns:58px 1fr auto;gap:16px;align-items:center;margin-top:24px}.mi-company-mark{width:58px;height:58px;display:grid;place-items:center;border:1px solid #38bdf866;color:#7dd3fc;font-size:18px;font-weight:800;background:#38bdf80a}.mi-company-title h1{font-size:36px;line-height:1;margin:5px 0}.mi-company-title p{font-size:12px;color:var(--muted);margin:0}.mi-company-kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0}
.mi-company-layout{display:grid;grid-template-columns:220px minmax(400px,1fr) 310px;border:1px solid var(--line);margin-top:18px;padding:0}.mi-company-profile{padding:19px;border-right:1px solid var(--line)}.mi-company-profile h2{font-size:16px;margin:9px 0}.mi-aliases{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0 20px}.mi-aliases span{font-size:9px;border:1px solid var(--line-2);padding:4px 6px}.mi-aliases p{font-size:11px;color:var(--muted)}.mi-company-profile dl{display:grid;gap:9px;margin:0 0 20px}.mi-company-profile dl>div{border-top:1px solid var(--line);padding-top:8px}.mi-company-profile dt{font-size:9px;color:var(--dim-2);text-transform:uppercase}.mi-company-profile dd{font-size:11px;margin:4px 0 0}
.mi-timeline{border-right:1px solid var(--line);min-width:0}.mi-timeline-item{display:grid;grid-template-columns:78px 10px 1fr;gap:12px;padding:17px;border-bottom:1px solid var(--line);color:var(--ink)}.mi-timeline-item:hover,.mi-timeline-item.is-selected{background:#10121d}.mi-timeline-item time{font-size:9px;color:var(--dim-2);padding-top:3px}.mi-timeline-item>i{width:8px;height:8px;border-radius:50%;margin-top:3px;background:#5eead4}.mi-timeline-item>i.is-medium{background:#facc15}.mi-timeline-item>i.is-high{background:#f6ad55}.mi-timeline-item>i.is-critical{background:#fb7185}.mi-timeline-item span{font-size:9px;color:#7dd3fc;text-transform:uppercase}.mi-timeline-item h3{font-size:14px;line-height:1.4;margin:5px 0}.mi-timeline-item p{font-size:10px;line-height:1.5;color:var(--muted);margin:0 0 7px}.mi-timeline-item small{font-size:9px;color:var(--dim-2)}
.mi-company-evidence{padding:18px;min-width:0}.mi-company-evidence>h2{font-size:18px;line-height:1.35;margin:12px 0 7px}.mi-company-evidence>p{font-size:11px;line-height:1.55;color:var(--muted)}.mi-company-score{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;margin:15px 0}.mi-company-score>span{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:9px;color:var(--dim-2)}.mi-company-score b{color:var(--ink);font-size:14px}.mi-company-evidence>h3{font-size:13px}.mi-company-evidence article{border-top:1px solid var(--line);padding:11px 0;display:grid;gap:4px}.mi-company-evidence article b{font-size:10px}.mi-company-evidence article span{font-size:9px;color:var(--dim-2)}.mi-company-evidence article p{font-size:10px;line-height:1.45;color:var(--muted);margin:2px 0}.mi-company-evidence article a{font-size:9px;color:#7dd3fc}
@media(max-width:1050px){.mi-controls form{grid-template-columns:1fr 1fr 1fr}.mi-layout{grid-template-columns:1fr}.mi-feed{border-right:0;border-bottom:1px solid var(--line)}.mi-feed-list{max-height:560px}.mi-source-grid{grid-template-columns:repeat(3,1fr)}.mi-source-grid>div{border-bottom:1px solid var(--line)}.mi-social-kpis{grid-template-columns:repeat(3,1fr)}.mi-social-kpis>div{border-bottom:1px solid var(--line)}.mi-alias-admin form{grid-template-columns:1fr 1.5fr 1fr}.mi-company-layout{grid-template-columns:190px 1fr}.mi-company-evidence{grid-column:1/-1;border-top:1px solid var(--line)}}
@media(max-width:1050px){.mi-source-form{grid-template-columns:1fr 1.5fr 110px 110px}.mi-source-form>span{grid-column:1/-1}}
@media(max-width:700px){.mi-head-row{align-items:flex-start;flex-direction:column}.mi-head h1{font-size:31px}.mi-kpis,.mi-company-kpis{grid-template-columns:1fr 1fr}.mi-kpis>div,.mi-company-kpis>div{border-bottom:1px solid var(--line)}.mi-kpis>div:nth-child(2n),.mi-company-kpis>div:nth-child(2n){border-right:0}.mi-controls form,.mi-score-grid,.mi-source-grid,.mi-delivery-row,.mi-ingest form,.mi-company-layout,.mi-source-form,.mi-social-kpis,.mi-social-grid,.mi-alias-admin form{grid-template-columns:1fr}.mi-controls .btn{width:100%}.mi-score-grid>div,.mi-score-grid>div:nth-child(3n){border-right:0;border-bottom:1px solid var(--line)}.mi-score-grid>div:last-child{border-bottom:0}.mi-event-metrics{grid-template-columns:1fr 1fr}.mi-event-metrics i{justify-self:start}.mi-source-grid>div,.mi-delivery-row>div,.mi-social-kpis>div{border-right:0;border-bottom:1px solid var(--line);min-height:auto}.mi-provider-status{border-right:0;border-bottom:1px solid var(--line)}.mi-provider-row{grid-template-columns:75px 1fr}.mi-provider-row small{grid-column:1/-1}.mi-burst-row{grid-template-columns:55px 1fr 1fr}.mi-burst-row em{grid-column:2/-1}.mi-ingest .mi-span-2{grid-column:auto}.mi-company-title{grid-template-columns:50px 1fr}.mi-company-title>.btn{grid-column:1/-1;width:max-content}.mi-company-mark{width:50px;height:50px}.mi-company-profile,.mi-timeline{border-right:0;border-bottom:1px solid var(--line)}.mi-company-evidence{grid-column:auto}.mi-timeline-item{grid-template-columns:65px 8px 1fr}.mi-source-form>span{grid-column:auto}}
.mi-health.is-healthy{color:#55dba6}.mi-health.is-failed{color:#fb7185}

/* MI-4.1 production operations */
.mi4-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.mi4-state{display:inline-flex;align-items:center;height:34px;padding:0 11px;border:1px solid var(--line-2);font-size:10px;font-weight:700;text-transform:uppercase}.mi4-state.is-ready{color:#55dba6;border-color:#55dba666}.mi4-state.is-degraded{color:#f6ad55;border-color:#f6ad5566}.mi4-state.is-blocked{color:#fb7185;border-color:#fb718566}
.mi4-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-top:0}.mi4-kpis>div{min-width:0;padding:15px 16px;border-right:1px solid var(--line);display:grid;gap:5px;background:var(--surface)}.mi4-kpis>div:last-child{border-right:0}.mi4-kpis span{font-size:9px;color:var(--dim-2);text-transform:uppercase}.mi4-kpis b{font-size:20px;line-height:1.2;overflow-wrap:anywhere}.mi4-kpis small{font-size:9px;color:var(--muted)}
.mi4-main{padding:9px 0 38px}.mi4-section{padding-top:24px;padding-bottom:0}.mi4-section-head{min-height:62px;padding:12px 14px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;background:#090a12}.mi4-section-head h2{font-size:19px;margin:4px 0 0}.mi4-section-head>span{font-size:9px;color:var(--dim-2);text-align:right}
.mi4-checks{border:1px solid var(--line);border-top:0}.mi4-check{display:grid;grid-template-columns:78px minmax(220px,1fr) minmax(220px,.8fr);gap:15px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}.mi4-check:last-child{border-bottom:0}.mi4-check>span{font-size:9px;font-weight:700;text-transform:uppercase}.mi4-check.is-pass>span{color:#55dba6}.mi4-check.is-warn>span{color:#f6ad55}.mi4-check.is-blocked>span{color:#fb7185}.mi4-check b{font-size:11px;text-transform:uppercase}.mi4-check p{font-size:10px;color:var(--muted);margin:4px 0 0;line-height:1.45}.mi4-check small{font-size:10px;color:var(--dim-2);line-height:1.45}
.mi4-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}.mi4-pane{min-width:0;border:1px solid var(--line)}.mi4-pane+ .mi4-pane{border-left:0}.mi4-pane .mi-panel-head h2{font-size:17px}
.mi4-form{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:11px}.mi4-form label{min-width:0;display:grid;gap:5px;font-size:9px;text-transform:uppercase;color:var(--dim-2)}.mi4-form input,.mi4-form select{width:100%;height:38px;min-width:0;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 10px;font:inherit;font-size:11px}.mi4-form input[type=file]{padding:8px}.mi4-form .mi4-file,.mi4-form>p{grid-column:1/-1}.mi4-form .btn{width:max-content;height:38px;justify-content:center}.mi4-form>p{font-size:10px;color:#f6ad55;min-height:14px;margin:0;align-self:center}.mi4-receipt{border-top:1px solid var(--line);padding:13px 16px;display:grid;grid-template-columns:1fr auto;gap:5px}.mi4-receipt span,.mi4-receipt small{font-size:9px;color:var(--dim-2)}.mi4-receipt b{font-size:11px}.mi4-receipt small{grid-column:1/-1}
.mi4-worker{display:grid;grid-template-columns:1fr 1fr;margin:0}.mi4-worker>div{padding:13px 15px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:0}.mi4-worker>div:nth-child(2n){border-right:0}.mi4-worker dt{font-size:9px;text-transform:uppercase;color:var(--dim-2)}.mi4-worker dd{font-size:11px;margin:5px 0 0;overflow-wrap:anywhere}.mi4-note{font-size:10px;line-height:1.5;color:var(--muted);padding:13px 15px;margin:0}
.mi4-table-wrap{border:1px solid var(--line);border-top:0;overflow-x:auto}.mi4-table{width:100%;min-width:980px;border-collapse:collapse}.mi4-table th,.mi4-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:10px;vertical-align:top}.mi4-table th{font-size:9px;text-transform:uppercase;color:var(--dim-2);background:#090a12}.mi4-table td>b,.mi4-table td>small{display:block}.mi4-table td>small{margin-top:4px;color:var(--dim-2);font-size:9px;max-width:280px}.mi4-row-actions{display:flex;gap:6px}.mi4-row-actions button,.mi4-replay button,.mi4-outcome-form button{height:30px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 9px;font:inherit;font-size:9px;cursor:pointer}.mi4-row-actions button:hover,.mi4-replay button:hover,.mi4-outcome-form button:hover{border-color:#38bdf8}.mi4-row-actions button:disabled,.mi4-replay button:disabled{opacity:.4;cursor:not-allowed}
.mi4-calibration-grid{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-top:0}.mi4-profile-form{border-right:1px solid var(--line)}.mi4-profile-form fieldset{border:1px solid var(--line);padding:9px;display:flex;gap:11px;flex-wrap:wrap}.mi4-profile-form legend{padding:0 5px;font-size:9px;color:var(--dim-2);text-transform:uppercase}.mi4-profile-form fieldset label{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:5px;text-transform:none}.mi4-profile-form input[type=checkbox]{width:14px;height:14px}.mi4-span-2{grid-column:1/-1}.mi4-form .mi4-toggle{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:7px;height:38px}.mi4-replay{min-width:0}.mi4-replay .mi-panel-head button{height:32px}.mi4-replay-kpis{display:grid;grid-template-columns:1fr 1fr}.mi4-replay-kpis>div{padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:5px}.mi4-replay-kpis>div:nth-child(2n){border-right:0}.mi4-replay-kpis span{font-size:9px;text-transform:uppercase;color:var(--dim-2)}.mi4-replay-kpis b{font-size:18px;overflow-wrap:anywhere}.mi4-replay>p{font-size:10px;color:var(--muted);padding:15px;margin:0;line-height:1.5}
.mi4-outcome-list{border:1px solid var(--line);border-top:0}.mi4-outcome-form{display:grid;grid-template-columns:minmax(260px,1.2fr) 150px minmax(220px,.8fr) auto;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.mi4-outcome-form:last-child{border-bottom:0}.mi4-outcome-form>div{min-width:0;display:grid;gap:4px}.mi4-outcome-form>div b{font-size:10px;color:#7dd3fc}.mi4-outcome-form>div span{font-size:11px;line-height:1.35;overflow-wrap:anywhere}.mi4-outcome-form select,.mi4-outcome-form input{height:34px;min-width:0;border:1px solid var(--line-2);background:var(--field);color:var(--ink);padding:0 9px;font:inherit;font-size:10px}.mi4-outcome-form>small{grid-column:2/-1;color:#f6ad55;font-size:9px;min-height:11px}.mi4-empty{border:1px solid var(--line);border-top:0;padding:22px 14px;margin:0;font-size:11px;color:var(--muted)}
@media(max-width:1000px){.mi4-kpis{grid-template-columns:repeat(3,1fr)}.mi4-kpis>div{border-bottom:1px solid var(--line)}.mi4-setup-grid,.mi4-calibration-grid{grid-template-columns:1fr}.mi4-pane+ .mi4-pane{border-left:1px solid var(--line);border-top:0}.mi4-profile-form{border-right:0;border-bottom:1px solid var(--line)}.mi4-outcome-form{grid-template-columns:1fr 150px}.mi4-outcome-form input{grid-column:1/-1}.mi4-outcome-form>small{grid-column:1/-1}}
@media(max-width:700px){.mi4-head-actions{justify-content:flex-start}.mi4-kpis,.mi4-worker,.mi4-replay-kpis{grid-template-columns:1fr 1fr}.mi4-kpis>div:nth-child(2n),.mi4-worker>div:nth-child(2n),.mi4-replay-kpis>div:nth-child(2n){border-right:0}.mi4-check{grid-template-columns:68px 1fr}.mi4-check small{grid-column:2}.mi4-section-head{align-items:flex-start;flex-direction:column}.mi4-section-head>span{text-align:left}.mi4-form,.mi4-outcome-form{grid-template-columns:1fr}.mi4-form .mi4-file,.mi4-form>p,.mi4-span-2,.mi4-outcome-form input,.mi4-outcome-form>small{grid-column:auto}.mi4-profile-form fieldset{grid-column:1}.mi4-outcome-form button{width:max-content}.mi4-head .mi-head-row{align-items:flex-start}}