/* Vibe · Quản trị (CR-166 P2): the app's design system (tokens v2, Be Vietnam Pro) on the license server's pages. */
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 400; font-display: swap; src: url(/static/fonts/be-vietnam-pro-vietnamese-400-normal.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-weight: 500; font-display: swap; src: url(/static/fonts/be-vietnam-pro-vietnamese-500-normal.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-weight: 600; font-display: swap; src: url(/static/fonts/be-vietnam-pro-vietnamese-600-normal.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-weight: 700; font-display: swap; src: url(/static/fonts/be-vietnam-pro-vietnamese-700-normal.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-weight: 400; font-display: swap; src: url(/static/fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 500; font-display: swap; src: url(/static/fonts/be-vietnam-pro-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-display: swap; src: url(/static/fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 700; font-display: swap; src: url(/static/fonts/be-vietnam-pro-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/static/fonts/jetbrains-mono-vietnamese-400-normal.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: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --brand: #c8233b; --brand-hover: #a81c31; --brand-ink: #fff; --brand-soft: #fbe7ea;
  --mist: #e8eef7; --mist-strong: #d3ddec;
  --ground: #f3f5f9; --surface: #fff; --sunk: #f8f9fc; --ink: #1a1d26; --muted: #5a6273; --faint: #8b93a3; --line: #dde2ea;
  --error: #8e1b2e; --error-soft: #f6e1e4; --wait: #a86200; --wait-soft: #fcefd8; --ok: #2c7a4b; --ok-soft: #e0f1e6;
  --font-sans: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(15, 18, 26, 0.05), 0 6px 20px rgba(15, 18, 26, 0.05);
  --dur: 160ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}
/* Light only (owner, 2026-10-08: "không cần darkmode nhé, chỉ sáng thôi"). */

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 14px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -0.015em; }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.hint { color: var(--muted); }
.faint { color: var(--faint); }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- Buttons and fields (as in the app) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 500 13.5px var(--font-sans); white-space: nowrap; cursor: pointer; transition: border-color var(--dur), background var(--dur), color var(--dur), box-shadow var(--dur); }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 28%, transparent); }
.btn.quiet { border-color: transparent; background: none; color: var(--muted); }
.btn.quiet:hover { background: var(--sunk); color: var(--ink); }
.btn.danger { color: var(--error); }
.btn.danger:hover { border-color: var(--error); background: var(--error-soft); color: var(--error); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.lg { height: 46px; font-size: 15px; border-radius: var(--radius-md); }
.btn.block { width: 100%; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
input, select, textarea { width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 14px var(--font-sans); transition: border-color var(--dur), box-shadow var(--dur); }
textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; font-family: var(--font-mono); font-size: 12.5px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input::placeholder { color: var(--faint); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--sunk); color: var(--muted); border: 1px solid var(--line); }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.bad { background: var(--error-soft); color: var(--error); border-color: transparent; }
.chip.wait { background: var(--wait-soft); color: var(--wait); border-color: transparent; }

/* ---------- Sign-in: brand panel left, form right (the app's login) ---------- */
.auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--surface); }
.auth-side { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 24px; padding: clamp(28px, 4vw, 52px); color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 10% 0%, #e0344c 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #3b1330 0%, transparent 60%), linear-gradient(155deg, #b01e35 0%, #7a1530 45%, #2a0f1e 100%); }
.auth-side::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 80%); }
.auth-side::after { content: ''; position: absolute; width: 520px; height: 520px; right: -160px; top: 18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 150, 170, 0.35), transparent 65%); filter: blur(20px); animation: a-breathe 9s ease-in-out infinite; }
@keyframes a-breathe { 50% { transform: scale(1.12) translate(-20px, 10px); opacity: 0.7; } }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 10px 26px rgba(0, 0, 0, 0.3); }
.brand b { display: block; font-size: 16px; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.show { position: relative; align-self: center; justify-self: center; width: min(500px, 100%); height: 300px; }
.glass { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(20, 4, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); animation: a-float 8s ease-in-out infinite; }
@keyframes a-float { 50% { transform: translateY(-10px); } }
.glass .tag { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.glass b { font-size: 22px; letter-spacing: -0.02em; }
.glass .sub { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.glass .pill { align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(92, 203, 138, 0.22); color: #b6f2cd; box-shadow: 0 0 0 1px rgba(92, 203, 138, 0.4); }
.g1 { left: 0; top: 0; width: 230px; animation-delay: -2s; }
.g2 { left: 50%; margin-left: -170px; top: 118px; width: 340px; background: rgba(14, 16, 24, 0.72); animation-delay: -5s; z-index: 2; }
.g3 { right: 0; top: 18px; width: 190px; animation-delay: -1s; }
.g2 .row { display: flex; justify-content: space-between; gap: 10px; font: 12px var(--font-mono); color: #e8ecf3; }
.g2 .row em { font-style: normal; color: #ff9fb0; }
.bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.bar i { display: block; height: 100%; width: 64%; border-radius: 3px; background: linear-gradient(90deg, #ffd1d8, #fff); }
.pitch h1 { margin: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.025em; }
.pitch p { margin: 10px 0 0; max-width: 460px; color: rgba(255, 255, 255, 0.8); font-size: 15px; }
.auth-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: clamp(24px, 4vw, 48px); background: radial-gradient(70% 50% at 100% 0%, var(--brand-soft) 0%, transparent 60%), var(--surface); }
.auth-form { align-self: center; justify-self: center; width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
.auth-form h2 { margin: 0; font-size: 26px; }
.auth-form .sub { margin: -8px 0 4px; color: var(--muted); }
.auth-form input { height: 44px; }
.code { letter-spacing: 0.4em; font-family: var(--font-mono); font-size: 16px; text-align: center; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--error-soft); color: var(--error); font-size: 13px; }
.trust { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--muted); font-size: 12.5px; }
.trust b { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 13px; }
.auth-foot { justify-self: center; width: min(380px, 100%); display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; font-size: 12px; color: var(--faint); }
@media (max-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr); } .show { display: none; } .auth-side { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .auth-side::after, .glass { animation: none; } }

/* ---------- Admin shell: side navigation (as the app's sidebar), content right ---------- */
.shell { min-height: 100%; padding-left: 240px; }
.side { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; overflow-y: auto; z-index: 5; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--line); }
.side .brand { color: var(--ink); padding: 4px 8px 16px; }
.side .brand img { width: 32px; height: 32px; box-shadow: none; }
.side .brand small { color: var(--faint); opacity: 1; letter-spacing: 0.12em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-md); color: var(--muted); font-weight: 500; text-decoration: none; transition: background var(--dur), color var(--dur); }
.nav a:hover { background: var(--sunk); color: var(--ink); }
.nav a[aria-current] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--ink); font-size: 12px; font-weight: 700; }
.me .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me .who small { color: var(--faint); font-size: 11.5px; }
.me form { margin: 0; }
.content { min-width: 0; padding: 28px clamp(16px, 3vw, 36px) 48px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.head h1 { margin: 0; font-size: 24px; }
.head p { margin: 4px 0 0; color: var(--muted); }
.flash { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--ok-soft); color: var(--ok); font-weight: 500; }
@media (max-width: 860px) {
  .shell { padding-left: 0; }
  .side { position: static; width: auto; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side .brand { padding: 0 8px 0 0; }
  .nav { flex-direction: row; flex-wrap: wrap; order: 3; width: 100%; }
  .nav a { height: 32px; }
  .me { margin: 0 0 0 auto; padding: 0; border: 0; max-width: 60%; }
}

/* ---------- Content blocks ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.stat .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-weight: 500; }
.stat .top .ico { color: var(--brand); width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--brand-soft); }
.stat b { font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 20px; }
.panel > h2, .section-title { margin: 0 0 4px; font-size: 16px; }
.panel > .hint { margin: 0 0 14px; }
.section-title { margin: 8px 0 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.grid .wide { grid-column: 1 / -1; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
form.inline input { width: 96px; height: 34px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input { max-width: 360px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 14px; padding: 0; list-style: none; }
.meta li { display: flex; flex-direction: column; min-width: 0; }
.meta li span { font-size: 12px; color: var(--faint); }
.meta li b { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Tables: scroll inside their own box ---------- */
.tbl { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; padding: 10px 14px; background: var(--sunk); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--dur); }
tbody tr:hover { background: var(--sunk); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sub { display: block; color: var(--faint); font-size: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; color: var(--muted); text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.nowrap { white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
.form-grid .span2 { grid-column: span 2; }
.form-grid .span3 { grid-column: span 3; }
.form-grid > .btn { grid-column: span 2; height: 38px; }
@media (max-width: 1100px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span3, .form-grid > .btn { grid-column: 1 / -1; } }
.panel > .actions { padding-top: 14px; border-top: 1px solid var(--line); }

/* Row actions: on one line, at the right (orders) */
.row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.row-actions .ico { width: 15px; height: 15px; }

/* Plans: one card each, side by side */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; }
.plan-pro { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.plan-head h2 { margin: 0; font-size: 18px; }
.plan-head p { margin: 2px 0 0; font-size: 12.5px; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price b { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; }
.price span { color: var(--muted); }
.plan > .hint { margin: -10px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--sunk); border: 1px solid var(--line); }
.suffix { position: relative; display: block; }
.suffix input { padding-right: 28px; font-variant-numeric: tabular-nums; }
.suffix i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--faint); font-weight: 500; pointer-events: none; }
.feats { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feats legend { display: flex; justify-content: space-between; width: 100%; padding: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.feat { flex-direction: row; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; font-weight: 400; color: var(--ink); cursor: pointer; }
.feat:hover { background: var(--sunk); }
.feat input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.feat span { display: flex; flex-direction: column; min-width: 0; }
.feat b { font-size: 13.5px; font-weight: 500; }
.feat small { color: var(--faint); font-size: 12px; }
.feat.all { margin-bottom: 4px; border: 1px dashed var(--line); }
.plan .btn.block { margin-top: 4px; height: 40px; }
@media (max-width: 1180px) { .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* Settings: the bank account form and what the buyer sees */
.settings { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.panel.stack { display: flex; flex-direction: column; gap: 14px; }
.panel.stack > h2 { margin: 0; }
.panel.stack > .hint { margin: -8px 0 0; }
.actions.end { justify-content: flex-end; }
.transfer h2 { margin: 0 0 4px; font-size: 16px; }
.transfer > .hint { margin: 0 0 14px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--sunk); border: 1px dashed var(--line); }
.kv dt { color: var(--faint); font-size: 12.5px; }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .settings { grid-template-columns: minmax(0, 1fr); } }

/* Search: a box with its icon, a status filter, then the button */
.search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.search-box { position: relative; flex: 1 1 280px; max-width: 420px; min-width: 0; }
.search-box .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.search-box input { padding-left: 34px; }
.search select { width: auto; min-width: 150px; flex: none; }

/* Tài khoản của khách (CR-167) */
.ptop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 3vw, 32px); background: var(--surface); border-bottom: 1px solid var(--line); }
.ptop .brand { color: var(--ink); }
.ptop .brand img { width: 32px; height: 32px; box-shadow: none; }
.ptop .brand small { color: var(--faint); opacity: 1; letter-spacing: 0.12em; }
.ptop .me { margin: 0; padding: 0; border: 0; max-width: 50%; }
.pwrap { max-width: 980px; margin: 0 auto; padding: 28px 16px 56px; }
.lic-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.lic-top h2 { margin: 0; font-size: 17px; }
.lic-top p { margin: 2px 0 0; }
.keybox { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius-md); background: var(--sunk); border: 1px dashed var(--line); }
.keybox .mono { font-size: 16px; letter-spacing: 0.06em; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.back { display: inline-block; margin-bottom: 6px; font-size: 13px; }
.seats { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.seat-meter { flex: 1 1 auto; max-width: 360px; height: 8px; border-radius: 99px; background: var(--mist); overflow: hidden; }
.seat-meter i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
form.invite { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
form.invite .grow { flex: 1 1 260px; }
form.invite .btn { height: 38px; }
td .ell { display: block; max-width: 320px; }

/* Charts on the overview */
.charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.chart-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.chart-head h2 { margin: 0; font-size: 16px; }
.chart-head p { margin: 2px 0 0; }
.kpi { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.kpi b { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.kpi span { font-size: 12px; white-space: nowrap; }
.kpi .up { color: var(--ok); }
.kpi .down { color: var(--muted); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .axis { fill: var(--faint); font: 11px var(--font-sans); }
.chart .bar rect { fill: color-mix(in srgb, var(--brand) 32%, transparent); transition: fill var(--dur); }
.chart .bar.now rect { fill: var(--brand); }
.chart .bar:hover rect { fill: var(--brand-hover); }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.7; }
.chart .dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
@media (max-width: 1100px) { .charts { grid-template-columns: minmax(0, 1fr); } }

/* Pages under a list */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.pages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pg { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; }
a.pg:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pg.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pg.off { color: var(--faint); background: var(--sunk); }
.pager .gap { color: var(--faint); padding: 0 2px; }
.suffix.people input { padding-right: 56px; }

/* Mua license, đơn hàng, tải về (CR-166 P3) */
.pnav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.pnav a { padding: 6px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; text-decoration: none; }
.pnav a:hover { background: var(--sunk); color: var(--ink); }
.pnav a.btn { color: var(--ink); padding: 0 12px; }
.ptop .me { margin-left: 8px; }
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
@media (max-width: 760px) { .plans.two { grid-template-columns: minmax(0, 1fr); } }
.buy-form { display: flex; flex-direction: column; gap: 12px; }
.periods { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.periods legend { padding: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.period { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); font-weight: 400; cursor: pointer; }
.period:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.period input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.period span { display: flex; flex-direction: column; min-width: 0; }
.period b { font-weight: 600; }
.period small { color: var(--muted); }
.ticks { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; }
.ticks .ico { width: 16px; height: 16px; color: var(--ok); margin-top: 2px; }
.pay { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 14px; }
.qr { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.qr svg { width: 220px; height: 220px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.qr figcaption { font-size: 12px; color: var(--muted); text-align: center; }
.done { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-md); background: var(--ok-soft); }
.done .ico { width: 24px; height: 24px; color: var(--ok); }
.done p { margin: 4px 0 0; }
.head .chip { align-self: center; }
.hash { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 640px) {
  .pay { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ptop { flex-wrap: wrap; row-gap: 8px; }
  .ptop .brand { flex: 1 1 auto; min-width: 0; }
  .ptop .brand b { white-space: nowrap; }
  .ptop .me { margin-left: auto; max-width: none; }
  .ptop .me .who { display: none; }
  .pnav { margin-left: 0; order: 3; width: 100%; border-top: 1px solid var(--line); padding-top: 6px; }
}
.seat-cell { display: flex; align-items: center; gap: 8px; }
.seat-meter.sm { width: 64px; flex: none; height: 6px; }
td .sub.ell { display: block; max-width: 180px; }
.meter { display: block; flex: 1 1 auto; max-width: 360px; width: 100%; height: 8px; }
.meter.sm { flex: none; width: 64px; height: 6px; }
.meter .bg { fill: var(--mist); }
.meter .fg { fill: var(--brand); }
form.inline input.wide { width: 260px; max-width: 100%; }
.notes { margin-top: 4px; }

/* ---------- Trang giới thiệu (CR-166 P4) ---------- */
body.lp { background: var(--surface); height: auto; min-height: 100%; }
/* The header stays on top while reading (CR-169): the body is not a fixed 100% box here, and a section reached from the
   menu stops below the header instead of under it. */
html:has(body.lp) { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html:has(body.lp) { scroll-behavior: smooth; } }
.lp-nav a.on { color: var(--brand); background: var(--brand-soft); }
/* Scrolling stays smooth (CR-170): the sketches move only on screen, animate only transform and opacity (drawn by the
   graphics card, no repaint), and each sketch is its own paint box. */
.lp-app { contain: layout paint; }
html.js .lp-app:not(.on) *, html.js .lp-app:not(.on) *::before, html.js .lp-app:not(.on) *::after { animation-play-state: paused !important; }
.lp-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 12px clamp(16px, 4vw, 48px); background: var(--surface); border-bottom: 1px solid var(--line); }
.lp-top .brand { color: var(--ink); min-width: 0; flex: 0 1 auto; }
.lp-top .brand span { min-width: 0; }
.lp-top .brand b, .lp-top .brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cta { flex: none; }
.lp-top .brand img { width: 34px; height: 34px; box-shadow: none; }
.lp-top .brand small { color: var(--faint); opacity: 1; letter-spacing: 0.12em; }
.lp-nav { display: flex; gap: 4px; margin-left: auto; }
.lp-nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; text-decoration: none; }
.lp-nav a:hover { background: var(--sunk); color: var(--ink); text-decoration: none; }
.lp-cta { display: flex; gap: 8px; }
.lp-sec, .lp-hero, .lp-strip, .lp-end, .lp-foot { max-width: 1180px; margin: 0 auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 56px; }
.lp-eyebrow { display: inline-block; padding: 4px 12px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 13px; }
.lp-hero h1 { margin: 16px 0 14px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.035em; }
.lp-hero p { font-size: 17px; color: var(--muted); max-width: 540px; }
.lp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px; }
.lp-sec { padding-top: 72px; padding-bottom: 8px; }
.lp-sec > h2, .lp-dark-shot h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; text-align: center; }
.lp-lead { margin: 0 auto 32px; max-width: 640px; text-align: center; color: var(--muted); font-size: 16px; }
.lp-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.lp-strip span { width: 100%; text-align: center; font-size: 13px; }
.lp-strip b { font-size: 17px; color: var(--ink); opacity: 0.75; letter-spacing: -0.01em; }
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-cards article { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sunk); }
.lp-cards h3 { margin: 12px 0 6px; font-size: 17px; }
.lp-cards p { margin: 0; color: var(--muted); }
.lp-cards b { color: var(--ink); }
.lp-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); }
.lp-ico .ico { width: 22px; height: 22px; }
.lp-feat { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 44px; align-items: center; margin: 0 0 64px; }
.lp-feat.flip .lp-feat-text { order: 2; }
.lp-feat h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -0.02em; }
.lp-feat p { color: var(--muted); font-size: 16px; }
.lp-feat .ticks { border-top: 0; padding-top: 4px; }
.lp-shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 28px -18px rgba(15, 18, 26, 0.3); }
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-dark-shot { display: grid; gap: 20px; }
.lp-dark-shot .lp-shot { max-width: 980px; margin: 0 auto; }
.lp-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 32px 0 0; padding: 0; }
.lp-steps li { counter-increment: s; display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lp-steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.lp-steps span { color: var(--muted); }
.lp-trust { display: flex; gap: 20px; align-items: flex-start; margin-top: 72px; padding: 28px; border-radius: var(--radius-lg); background: var(--ok-soft); }
.lp-trust h2 { text-align: left; margin: 0 0 8px; font-size: 22px; }
.lp-trust .ticks { border-top: 0; padding-top: 0; }
.lp-trust .lp-ico { background: var(--surface); color: var(--ok); flex: none; }
.lp-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin: 0 auto; align-items: start; }
.lp-price.trial { background: var(--sunk); }
.lp-price { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.lp-price.hot { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 20px 40px -24px color-mix(in srgb, var(--brand) 50%, transparent); }
.lp-price header { display: flex; justify-content: space-between; align-items: center; }
.lp-price h3 { margin: 0; font-size: 20px; }
.lp-price > .hint { margin: -6px 0 0; }
.lp-faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.lp-faq details { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 18px; background: var(--surface); }
.lp-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::after { content: '+'; color: var(--faint); font-size: 18px; line-height: 1; }
.lp-faq details[open] summary::after { content: '–'; }
.lp-faq p { margin: 10px 0 0; color: var(--muted); }
.lp-end { margin-top: 80px; padding-top: 56px; padding-bottom: 56px; text-align: center; border-radius: 20px; color: #fff; background: radial-gradient(120% 90% at 10% 0%, #e0344c 0%, transparent 55%), linear-gradient(155deg, #b01e35 0%, #7a1530 55%, #2a0f1e 100%); }
.lp-end h2 { margin: 0 0 20px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; }
.lp-end .btn.primary { background: #fff; border-color: #fff; color: #7a1530; }
.lp-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 40px; color: var(--faint); font-size: 13px; }
.lp-foot nav { display: flex; gap: 16px; }
.lp-foot a { color: var(--muted); }

/* The sketch of the app at work */
.lp-app { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 18px 40px -22px rgba(15, 18, 26, 0.3); }
.lp-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--sunk); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.lp-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.lp-bar i:nth-child(1) { background: #ff5f57; } .lp-bar i:nth-child(2) { background: #febc2e; } .lp-bar i:nth-child(3) { background: #28c840; }
.lp-bar span { margin-left: 8px; }
.lp-body { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 14px; min-height: 300px; }
.lp-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.lp-track li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--muted); }
.lp-track li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.lp-track li.ok::before { background: var(--ok); border-color: var(--ok); }
.lp-track li.now { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.lp-track li.now::before { border-color: var(--brand); animation: lp-pulse 1.6s ease-in-out infinite; }
.lp-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-content: start; }
.lp-pane { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #151821; color: #dbe1ea; min-width: 0; }
.lp-pane:first-child { grid-column: 1 / -1; }
.lp-pane b { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; min-width: 0; }
.lp-pane b i { font-style: normal; min-width: 0; line-height: 1.3; }
.lp-pane em { flex: none; }
.lp-pane em { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; }
.lp-pane em.c { background: #d46a3b; } .lp-pane em.x { background: #3d4a5c; } .lp-pane em.g { background: #4a73d9; }
.lp-pane code { display: flex; flex-direction: column; gap: 4px; font: 11.5px/1.5 var(--font-mono); }
.lp-pane code span { position: relative; display: block; white-space: nowrap; overflow: hidden; }
.lp-pane code span::after { content: ''; position: absolute; inset: 0; background: #151821; transform-origin: right; animation: lp-type1 9s steps(24, end) infinite; }
.lp-pane code .t2::after { animation-name: lp-type2; } .lp-pane code .t3 { color: #7ee0a6; } .lp-pane code .t3::after { animation-name: lp-type3; }
@keyframes lp-type1 { 0%, 0% { transform: scaleX(1); } 14%, 88% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
@keyframes lp-type2 { 0%, 16% { transform: scaleX(1); } 30%, 88% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
@keyframes lp-type3 { 0%, 32% { transform: scaleX(1); } 46%, 88% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
.lp-gate { position: absolute; right: 18px; bottom: 18px; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -12px rgba(15, 18, 26, 0.35); animation: lp-pop 9s ease-in-out infinite; }
.lp-gate b { font-size: 13px; color: var(--ok); }
.lp-gate small { grid-column: 2; color: var(--faint); font-size: 11.5px; }
.lp-dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
@keyframes lp-pop { 0%, 42% { opacity: 0; transform: translateY(10px) scale(0.96); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .lp-pane code span::after { display: none; } .lp-gate, .lp-track li.now::before { animation: none; opacity: 1; } }

@media (max-width: 1000px) {
  .lp-hero, .lp-feat { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-feat.flip .lp-feat-text { order: 0; }
  .lp-cards, .lp-steps, .lp-tools, .lp-gallery, .lp-help { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-prices { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .lp-nav { display: none; }
  .lp-cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .lp-cards, .lp-steps, .lp-prices, .lp-tools, .lp-gallery, .lp-help { grid-template-columns: minmax(0, 1fr); }
  .m-sql { grid-template-columns: minmax(0, 1fr); }
  .m-tree { display: none; }
  .lp-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lp-panes { grid-template-columns: minmax(0, 1fr); }
  .lp-track { flex-direction: row; flex-wrap: wrap; }
  .lp-track li:not(.now):not(:nth-last-child(-n+3)) { display: none; }
  .lp-gate { position: static; margin-top: 8px; }
  .lp-top .brand small { display: none; }
  .lp-cta .btn:not(.primary) { display: none; }
  .lp-top { gap: 12px; }
  .lp-trust { flex-direction: column; }
}


/* ---------- Moving sketches of each feature (CR-169) ---------- */
.lp-mock { min-width: 0; }
.lp-mbody { position: relative; padding: 16px; min-height: 300px; font-size: 12.5px; }
.lp-mbody .m-btns { display: flex; gap: 8px; }
.m-btn { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 12px; white-space: nowrap; }
.m-btn.m-ok { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.m-say, .m-block { padding: 8px 10px; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Process: steps fill one after another; the approval is pressed; the step after it starts. */
.lp-mbody:has(.m-steps) { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: start; }
.m-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.m-steps li { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--muted); min-width: 0; }
.m-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-approve { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 28px -18px rgba(15, 18, 26, 0.4); min-width: 0; animation: m-in 12s 0s infinite; }
.m-approve small { color: var(--wait); font-weight: 600; }
.m-approve b { font-size: 15px; }
.m-approve p { margin: 0; color: var(--muted); }
.m-note { padding: 6px 8px; border-radius: 6px; background: var(--sunk); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-approve .m-ok { animation: m-press 12s 0s infinite; }
.m-done { display: flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; opacity: 0; animation: m-show 12s 0s infinite; }
.m-done .ico { width: 16px; height: 16px; flex: none; }
@keyframes m-in { 0%, 12% { opacity: 0.35; transform: translateY(6px); } 17%, 92% { opacity: 1; transform: none; } 100% { opacity: 0.35; } }
@keyframes m-press { 0%, 34% { transform: none; } 36% { transform: scale(0.92); } 39%, 100% { transform: none; } }
@keyframes m-show { 0%, 38% { opacity: 0; } 42%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* Components: each row fills its own steps; the step at work pulses. */
.m-grid { display: grid; grid-template-columns: 88px repeat(6, minmax(0, 1fr)); gap: 6px 5px; align-items: center; }
.m-grid em { font-style: normal; font-size: 10px; line-height: 1.2; color: var(--faint); text-align: center; align-self: end; min-width: 0; }
.m-grid b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-grid i { position: relative; height: 22px; border-radius: 6px; background: var(--sunk); border: 1px solid var(--line); }
.m-grid i.d::after { content: ''; position: absolute; inset: -1px; border-radius: 6px; background: color-mix(in srgb, var(--ok) 55%, var(--surface)); border: 1px solid var(--ok); opacity: 0; }
.m-grid i.w { animation: m-work 1.4s ease-in-out infinite; background: var(--wait-soft); border-color: var(--wait); }
@keyframes m-work { 50% { opacity: 0.45; } }
.m-legend { display: flex; gap: 14px; margin-top: 16px; color: var(--muted); font-size: 11.5px; flex-wrap: wrap; }
.m-legend span { display: flex; align-items: center; gap: 6px; }
.m-legend span::before { content: ''; width: 12px; height: 12px; border-radius: 4px; background: var(--sunk); border: 1px solid var(--line); }
.m-legend .d::before { background: color-mix(in srgb, var(--ok) 55%, var(--surface)); border-color: var(--ok); }
.m-legend .w::before { background: var(--wait-soft); border-color: var(--wait); }

/* Board: one card travels across the columns. */
.m-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 260px; }
.m-col { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: var(--sunk); min-width: 0; padding-bottom: 72px; }
.m-col h4 { margin: 0 0 2px; font-size: 12px; color: var(--muted); }
.m-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.m-card b, .m-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card b { font-size: 12px; }
.m-card small { color: var(--faint); font-size: 11px; }
.m-mover { position: absolute; bottom: 10px; left: 8px; width: calc((100% - 20px) / 3 - 16px); border-color: var(--brand); box-shadow: 0 10px 24px -12px rgba(15, 18, 26, 0.45); animation: m-move 9s ease-in-out infinite; }
@keyframes m-move {
  0%, 18% { transform: none; }
  32%, 58% { transform: translateX(calc(100% + 26px)); }
  72%, 92% { transform: translateX(calc(200% + 52px)); }
  100% { transform: none; }
}

/* Gate: the agent wants to stop; refused; the checks run one by one; passed. */
.m-say { background: var(--sunk); color: var(--ink); }
.m-block { margin-top: 8px; color: var(--error); background: var(--error-soft); font-weight: 600; animation: m-block 10s infinite; }
@keyframes m-block { 0%, 4% { opacity: 0; } 7%, 54% { opacity: 1; } 58%, 92% { opacity: 0.25; } 97%, 100% { opacity: 0; } }
.m-checks { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.m-checks li { --i: 0; position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-checks li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-checks i { flex: none; width: 16px; height: 16px; }
.m-checks .sp { border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); }
.m-checks .ok { position: absolute; left: 0; color: var(--ok); opacity: 0; }
.m-q tbody tr { opacity: 0; }
.m-steps li::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); }
.m-steps li::after { content: ''; position: absolute; left: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--ok); opacity: 0; }
.m-checks .ok .ico { width: 16px; height: 16px; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-pass { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--ok-soft); opacity: 0; animation: m-pass 10s infinite; }
.m-pass b { color: var(--ok); }
.m-pass small { grid-column: 2; color: var(--muted); }
@keyframes m-pass { 0%, 56% { opacity: 0; transform: translateY(6px); } 60%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

@keyframes m-step1 { 0%, 3.0% { opacity: 0; } 5.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.m-steps li:nth-child(1)::after { animation: m-step1 12s infinite; }
@keyframes m-step2 { 0%, 8.0% { opacity: 0; } 10.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.m-steps li:nth-child(2)::after { animation: m-step2 12s infinite; }
@keyframes m-step3 { 0%, 13.0% { opacity: 0; } 15.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.m-steps li:nth-child(3)::after { animation: m-step3 12s infinite; }
@keyframes m-step4 { 0%, 36.0% { opacity: 0; } 38.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.m-steps li:nth-child(4)::after { animation: m-step4 12s infinite; }
@keyframes m-step5 { 0%, 44.0% { opacity: 0; } 46.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.m-steps li:nth-child(5)::after { animation: m-step5 12s infinite; }
@keyframes m-step6 { 0%, 52.0% { opacity: 0; } 54.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.m-steps li:nth-child(6)::after { animation: m-step6 12s infinite; }
@keyframes m-step7 { 0%, 60.0% { opacity: 0; } 62.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.m-steps li:nth-child(7)::after { animation: m-step7 12s infinite; }
@keyframes m-cell0 { 0%, 2.0% { opacity: 0; } 4.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-cell1 { 0%, 8.0% { opacity: 0; } 10.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-cell2 { 0%, 14.0% { opacity: 0; } 16.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-cell3 { 0%, 20.0% { opacity: 0; } 22.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-cell4 { 0%, 26.0% { opacity: 0; } 28.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-cell5 { 0%, 32.0% { opacity: 0; } 34.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-cell6 { 0%, 38.0% { opacity: 0; } 40.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-cell7 { 0%, 44.0% { opacity: 0; } 46.0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-sp0 { 0%, 11.0% { opacity: 1; } 12.0%, 100% { opacity: 0; } }
@keyframes m-ok0 { 0%, 11.0% { opacity: 0; } 12.0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.m-checks li:nth-child(1) .sp { animation: m-spin 0.8s linear infinite, m-sp0 10s infinite; } .m-checks li:nth-child(1) .ok { animation: m-ok0 10s infinite; }
@keyframes m-sp1 { 0%, 19.0% { opacity: 1; } 20.0%, 100% { opacity: 0; } }
@keyframes m-ok1 { 0%, 19.0% { opacity: 0; } 20.0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.m-checks li:nth-child(2) .sp { animation: m-spin 0.8s linear infinite, m-sp1 10s infinite; } .m-checks li:nth-child(2) .ok { animation: m-ok1 10s infinite; }
@keyframes m-sp2 { 0%, 27.0% { opacity: 1; } 28.0%, 100% { opacity: 0; } }
@keyframes m-ok2 { 0%, 27.0% { opacity: 0; } 28.0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.m-checks li:nth-child(3) .sp { animation: m-spin 0.8s linear infinite, m-sp2 10s infinite; } .m-checks li:nth-child(3) .ok { animation: m-ok2 10s infinite; }
@keyframes m-sp3 { 0%, 35.0% { opacity: 1; } 36.0%, 100% { opacity: 0; } }
@keyframes m-ok3 { 0%, 35.0% { opacity: 0; } 36.0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.m-checks li:nth-child(4) .sp { animation: m-spin 0.8s linear infinite, m-sp3 10s infinite; } .m-checks li:nth-child(4) .ok { animation: m-ok3 10s infinite; }
@keyframes m-sp4 { 0%, 43.0% { opacity: 1; } 44.0%, 100% { opacity: 0; } }
@keyframes m-ok4 { 0%, 43.0% { opacity: 0; } 44.0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.m-checks li:nth-child(5) .sp { animation: m-spin 0.8s linear infinite, m-sp4 10s infinite; } .m-checks li:nth-child(5) .ok { animation: m-ok4 10s infinite; }
@keyframes m-sp5 { 0%, 51.0% { opacity: 1; } 52.0%, 100% { opacity: 0; } }
@keyframes m-ok5 { 0%, 51.0% { opacity: 0; } 52.0%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.m-checks li:nth-child(6) .sp { animation: m-spin 0.8s linear infinite, m-sp5 10s infinite; } .m-checks li:nth-child(6) .ok { animation: m-ok5 10s infinite; }
@keyframes m-row0 { 0%, 27.0% { opacity: 0; } 28.0%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
.m-q tbody tr:nth-child(1) { animation: m-row0 11s infinite; }
@keyframes m-row1 { 0%, 29.5% { opacity: 0; } 30.5%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
.m-q tbody tr:nth-child(2) { animation: m-row1 11s infinite; }
@keyframes m-row2 { 0%, 32.0% { opacity: 0; } 33.0%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
.m-q tbody tr:nth-child(3) { animation: m-row2 11s infinite; }
@keyframes m-row3 { 0%, 34.5% { opacity: 0; } 35.5%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
.m-q tbody tr:nth-child(4) { animation: m-row3 11s infinite; }

.m-grid i.d:nth-child(7n + 2)::after { animation: m-cell0 10s infinite; }
.m-grid i.d:nth-child(7n + 3)::after { animation: m-cell1 10s infinite; }
.m-grid i.d:nth-child(7n + 4)::after { animation: m-cell2 10s infinite; }
.m-grid i.d:nth-child(7n + 5)::after { animation: m-cell3 10s infinite; }
.m-grid i.d:nth-child(7n + 6)::after { animation: m-cell4 10s infinite; }
.m-grid i.d:nth-child(7n + 7)::after { animation: m-cell5 10s infinite; }

/* Architecture: links drawn with data flowing along them. */
.m-arch { display: block; width: 100%; height: auto; }
.m-arch .m-link { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0.55; }
.m-arch .m-link2 { stroke: var(--ok); }
/* Data moving along the links: dots placed in the diagram's own units (cqw follow its width), moved by transform only. */
.m-archw { position: relative; container-type: inline-size; }
.m-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); animation: m-d1 2.4s linear infinite; }
.m-dot.d1 { left: 25%; top: 23.33%; }
.m-dot.d2 { left: 25%; top: 70%; animation-name: m-d2; animation-delay: -1.1s; }
.m-dot.d3 { left: 71.15%; top: 50%; animation-name: m-d3; animation-duration: 1.4s; }
.m-dot.d4 { left: 59.62%; top: 58.33%; animation-name: m-d4; animation-duration: 2.8s; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
@keyframes m-d1 { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 36.8% { transform: translate(13.46cqw, 0); } 73.7% { transform: translate(13.46cqw, 13.46cqw); } 92% { opacity: 1; } 100% { transform: translate(23.08cqw, 13.46cqw); opacity: 0; } }
@keyframes m-d2 { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 41.2% { transform: translate(13.46cqw, 0); } 70.6% { transform: translate(13.46cqw, -9.62cqw); } 92% { opacity: 1; } 100% { transform: translate(23.08cqw, -9.62cqw); opacity: 0; } }
@keyframes m-d3 { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(9.62cqw, 0); opacity: 0; } }
@keyframes m-d4 { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 37.1% { transform: translate(0, 12.5cqw); } 92% { opacity: 1; } 100% { transform: translate(21.15cqw, 12.5cqw); opacity: 0; } }
.m-arch rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.m-arch .m-hub rect { stroke: var(--brand); stroke-width: 2.5; }
.m-arch text { fill: var(--ink); font: 600 13px var(--font-sans); text-anchor: middle; }
.m-arch .m-sub { fill: var(--faint); font: 500 11px var(--font-sans); }

/* SQL: a query typed, run, rows arriving; a changing statement waits for the owner. */
.m-sql { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
.m-tree { display: flex; flex-direction: column; gap: 4px; color: var(--muted); min-width: 0; }
.m-tree small { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.m-tree span { padding: 3px 6px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tree span.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.m-q { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-q code { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: #151821; color: #dbe1ea; font: 11.5px/1.5 var(--font-mono); }
.m-q code span { position: relative; display: block; white-space: nowrap; overflow: hidden; }
.m-q code span::after { content: ''; position: absolute; inset: 0; background: #151821; transform-origin: right; animation: m-type1 11s steps(20, end) infinite; }
.m-q code .q2::after { animation-name: m-type2; } .m-q code .q3 { color: #f6c177; } .m-q code .q3::after { animation-name: m-type3; }
@keyframes m-type1 { 0%, 0% { transform: scaleX(1); } 8%, 90% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
@keyframes m-type2 { 0%, 9% { transform: scaleX(1); } 15%, 90% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
@keyframes m-type3 { 0%, 16% { transform: scaleX(1); } 24%, 90% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
.m-run { align-self: flex-start; padding: 4px 10px; border-radius: 6px; background: var(--ok); color: #fff; font-weight: 600; font-size: 11.5px; animation: m-run 11s infinite; }
@keyframes m-run { 0%, 25% { transform: none; } 27% { transform: scale(0.92); } 30%, 100% { transform: none; } }
.m-q table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11.5px; }
.m-q th, .m-q td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-q th { color: var(--faint); font-weight: 600; }
.m-confirm { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; max-width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -14px rgba(15, 18, 26, 0.45); opacity: 0; animation: m-confirm 11s infinite; }
.m-confirm b { font-family: var(--font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-confirm small { color: var(--wait); }
@keyframes m-confirm { 0%, 60% { opacity: 0; transform: translateY(8px); } 64%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Other tools, real screens, support */
.lp-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-tools article { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.lp-tools .lp-ico { flex: none; }
.lp-tools h3 { margin: 2px 0 4px; font-size: 15.5px; }
.lp-tools p { margin: 0; color: var(--muted); }
.lp-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-gallery a { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-weight: 600; text-decoration: none; }
.lp-gallery a:hover { color: var(--brand); text-decoration: none; }
.lp-gallery .lp-shot { box-shadow: 0 16px 30px -18px rgba(15, 18, 26, 0.35); transition: transform 0.2s; }
.lp-gallery a:hover .lp-shot { transform: translateY(-3px); }
.lp-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; }
.lp-help a { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; min-width: 0; }
.lp-help a:hover { border-color: var(--brand); text-decoration: none; }
.lp-help .lp-ico { flex: none; }
.lp-help span:not(.lp-ico) { display: flex; flex-direction: column; min-width: 0; }
.lp-help small { color: var(--muted); }
.lp-help b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .lp-mock *, .lp-mock *::before { animation: none !important; }
  .m-steps li:nth-child(-n + 4)::after { opacity: 1; }
  .m-grid i.d::after { opacity: 1; }
  .m-approve, .m-done, .m-pass, .m-checks .ok, .m-q tbody tr, .m-confirm { opacity: 1; }
  .m-checks .sp { opacity: 0; }
  .m-q code span::after, .lp-pane code span::after { display: none; }
  .m-mover { transform: translateX(calc(100% + 26px)); }
}

/* Tải Vibe (CR-169): the installer for this machine is marked and comes first. */
.dl { display: flex; flex-direction: column; gap: 14px; }
.dl-msg { margin: 0; font-weight: 600; }
.dl-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dl-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; min-width: 0; }
.dl-opt:hover { border-color: var(--brand); text-decoration: none; }
.dl-opt b { font-size: 16px; }
.dl-opt small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-opt .btn { margin-top: auto; }
.dl-opt small:last-of-type { margin-bottom: 12px; }
.dl-opt:not(.rec) .btn.primary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.dl-opt.rec { order: -1; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.dl-badge { visibility: hidden; align-self: flex-start; padding: 2px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-size: 11.5px; font-weight: 600; }
.dl-opt.rec .dl-badge { visibility: visible; }
.dl-help summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.dl-help p { margin: 8px 0 0; color: var(--muted); }
@media (max-width: 760px) { .dl-opts { grid-template-columns: minmax(0, 1fr); } }

/* Narrow screens for the parts above (after their base rules, so they win). */
@media (max-width: 1000px) { .lp-tools, .lp-gallery, .lp-help { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) {
  .lp-tools, .lp-gallery, .lp-help { grid-template-columns: minmax(0, 1fr); }
  .lp-mbody { padding: 12px; min-height: 0; }
  .lp-mbody:has(.m-steps) { grid-template-columns: minmax(0, 1fr); }
  .m-steps { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .m-steps li { padding: 3px 6px; font-size: 11.5px; }
  .m-grid { grid-template-columns: 72px repeat(6, minmax(0, 1fr)); gap: 5px 3px; }
  .m-grid em { font-size: 9px; }
  .m-grid b { font-size: 11px; }
  .m-card { padding: 6px 7px; } .m-card b { font-size: 11px; white-space: normal; line-height: 1.25; } .m-card small { display: none; }
  .m-col { padding: 6px; padding-bottom: 56px; }
  .m-mover { width: calc((100% - 20px) / 3 - 12px); } @keyframes m-move { 0%, 18% { transform: none; } 32%, 58% { transform: translateX(calc(100% + 22px)); } 72%, 92% { transform: translateX(calc(200% + 44px)); } 100% { transform: none; } }
}

/* Plans side by side line up (CR-170): price, button and list start at the same height whatever the text above. */
.lp-prices > .lp-price { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; }
.lp-prices { align-items: stretch; }
.plans.two > .plan.buy { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; }

/* Blocks rise into view while scrolling (CR-170): opacity and transform only; set by landing.js, so without script all is shown. */
html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv:nth-child(3n + 2) { transition-delay: 0.08s; } html.js .rv:nth-child(3n) { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } }

/* Customer pages (CR-171): the free trial beside the plans; the way home. */
.plans.three > .plan.buy { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; }
.plan-trial { background: var(--sunk); }
.auth-side a.brand { color: inherit; text-decoration: none; }
.auth-form > .back { display: inline-block; margin-bottom: 14px; }
.dl-none p { color: var(--muted); }
.plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .plans.three { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }