/* Ver-IF-MCP: layout on top of hexart.css. Outside the hx.* layers, so it wins without !important. */

.vf-brand { display: inline-flex; align-items: center; gap: var(--hx-space-3); color: var(--hx-fg); text-decoration: none; }
.vf-brand svg { height: 32px; width: auto; }
.vf-brand__name { font-family: var(--hx-font-condensed); font-weight: 600; letter-spacing: var(--hx-tracking-caps-tight); font-size: 1.125rem; }

.vf-lang { min-height: 44px; min-width: 44px; padding: 0 var(--hx-space-3); background: none; border: 1px solid var(--hx-line); color: var(--hx-fg-muted); font-family: var(--hx-font-condensed); font-weight: 600; letter-spacing: var(--hx-tracking-caps); cursor: pointer; }

@media (max-width: 767.98px) {
  .hx-navbar__actions { display: none; }
  .vf-navbar__links--always { display: flex; position: static; flex-direction: row; gap: var(--hx-space-2); padding: 0; background: none; border: 0; }
}

/* Hero */
.vf-hero { display: grid; gap: var(--hx-space-12); align-items: center; }
@media (min-width: 1024px) { .vf-hero { grid-template-columns: 1.4fr 1fr; } }
.vf-hero__title { font-size: var(--hx-text-h1); line-height: var(--hx-leading-h1); letter-spacing: var(--hx-tracking-h1); font-weight: var(--hx-weight-light); max-width: 18ch; }

.vf-demo { margin: 0; background: var(--hx-surface); border: 1px solid var(--hx-line); padding: var(--hx-space-6); display: grid; gap: var(--hx-space-3); font-family: var(--hx-font-mono); font-size: var(--hx-text-small); }
.vf-demo__row { display: flex; justify-content: space-between; align-items: center; gap: var(--hx-space-3); padding-bottom: var(--hx-space-3); border-bottom: 1px solid var(--hx-line); }
.vf-demo__model { color: var(--hx-fg-muted); overflow-wrap: anywhere; }
.vf-demo__alarm { margin-top: var(--hx-space-2); color: var(--hx-signal-text); font-family: var(--hx-font-condensed); font-weight: 600; letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; }

/* Bands and grids */
.vf-band { background: var(--hx-bg-deep); border-block: 1px solid var(--hx-line); }
.vf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hx-space-6); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.vf-plans { display: grid; gap: var(--hx-space-6); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.vf-plan .hx-stat { margin: var(--hx-space-2) 0 var(--hx-space-4); }
.vf-plan--main { border-color: var(--hx-line-accent); }
.vf-two { display: grid; gap: var(--hx-space-6); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

.vf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hx-space-2); color: var(--hx-fg-muted); font-size: var(--hx-text-small); }
.vf-list li { padding-inline-start: var(--hx-space-6); position: relative; }
.vf-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; width: 12px; height: 1px; background: var(--hx-accent); }
.vf-list--never li::before { background: var(--hx-fg-subtle); }

/* Connect */
.vf-url { display: grid; gap: var(--hx-space-2); }
.vf-url__row { display: flex; flex-wrap: wrap; gap: var(--hx-space-3); align-items: center; }
.vf-url__value { font-family: var(--hx-font-mono); font-size: var(--hx-text-body); color: var(--hx-accent-text); padding: var(--hx-space-3) var(--hx-space-4); background: var(--hx-input-bg); border: 1px solid var(--hx-line); overflow-wrap: anywhere; }
.vf-tabs { display: grid; gap: var(--hx-space-4); }
.vf-tabs .hx-tabs__list { overflow-x: auto; }
.vf-tabs .hx-tabpanel { display: grid; gap: var(--hx-space-3); justify-items: start; }
.vf-tabs .hx-tabpanel[hidden] { display: none; }
.vf-code { margin: 0; width: 100%; max-width: 100%; overflow-x: auto; padding: var(--hx-space-4); background: var(--hx-input-bg); border: 1px solid var(--hx-line); font-family: var(--hx-font-mono); font-size: var(--hx-text-code); line-height: var(--hx-leading-code); color: var(--hx-fg); }
.vf-details { border-top: 1px solid var(--hx-line); padding-top: var(--hx-space-4); display: grid; gap: var(--hx-space-3); }
.vf-details summary { cursor: pointer; color: var(--hx-fg-muted); min-height: 44px; display: flex; align-items: center; }

/* Auth card */
.vf-auth { display: grid; justify-items: center; }
.vf-auth__card { width: 100%; max-width: 30rem; }
.vf-auth__title { font-size: var(--hx-text-h3); line-height: var(--hx-leading-h3); font-weight: var(--hx-weight-light); }
.vf-auth__links { margin-top: var(--hx-space-2); }
.vf-or { text-align: center; color: var(--hx-fg-subtle); font-size: var(--hx-text-small); }

/* Panel */
.vf-facts { display: flex; flex-wrap: wrap; gap: var(--hx-space-8); margin: 0; }
.vf-facts dd { margin: var(--hx-space-1) 0 0; overflow-wrap: anywhere; }
.vf-panel { gap: var(--hx-space-4); }
.vf-panel__title { font-size: var(--hx-text-h3); line-height: var(--hx-leading-h3); font-weight: var(--hx-weight-light); }
.vf-sub { display: grid; gap: var(--hx-space-3); padding-top: var(--hx-space-6); border-top: 1px solid var(--hx-line); }

.vf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--hx-space-2); }
.vf-chip { display: inline-flex; align-items: center; gap: var(--hx-space-2); padding-inline-start: var(--hx-space-3); border: 1px solid var(--hx-line-accent); background: var(--hx-surface-2); font-size: var(--hx-text-small); }
.vf-chip__x { min-width: 44px; min-height: 36px; border: 0; background: none; color: var(--hx-fg-muted); cursor: pointer; font-size: 1.125rem; }

.vf-results { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; border: 1px solid var(--hx-line); }
.vf-result { display: flex; justify-content: space-between; align-items: center; gap: var(--hx-space-4); padding: var(--hx-space-3) var(--hx-space-4); border-bottom: 1px solid var(--hx-line); }
.vf-result:last-child { border-bottom: 0; }
.vf-result__txt { display: grid; gap: var(--hx-space-1); min-width: 0; }
.vf-result__txt p { margin: 0; overflow-wrap: anywhere; }
.vf-result__name { font-weight: var(--hx-weight-medium); }

.vf-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.vf-row { display: flex; justify-content: space-between; align-items: center; gap: var(--hx-space-4); padding: var(--hx-space-3) 0; border-bottom: 1px solid var(--hx-line); }
.vf-row p { margin: 0; }
.vf-row__name { font-weight: var(--hx-weight-medium); }

.vf-qr { background: var(--hx-white); padding: var(--hx-space-2); }
.vf-secret { overflow-wrap: anywhere; color: var(--hx-accent-text); }
.vf-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--hx-space-2); }
.vf-danger { color: var(--hx-signal-text); }

/* Toasts */
.vf-toasts { position: fixed; right: var(--hx-space-4); bottom: var(--hx-space-4); left: var(--hx-space-4); z-index: var(--hx-z-toast); display: grid; gap: var(--hx-space-2); justify-items: end; pointer-events: none; }
.vf-toast { max-width: 28rem; pointer-events: auto; background: var(--hx-surface); box-shadow: var(--hx-shadow-md); }

.vf-nf { min-height: 70vh; align-content: center; }

/* Panel: subscription, statistics, diagnostics */
.vf-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--hx-space-4); }
.vf-period { min-width: 10rem; }

.vf-bill { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); border: 1px solid var(--hx-line); }
.vf-bill__plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--hx-space-3); padding: var(--hx-space-6); background: var(--hx-bg); border: 0 solid var(--hx-line); }
.vf-bill__plan + .vf-bill__plan { border-inline-start-width: 1px; }
.vf-bill__plan.is-picked { background: var(--hx-surface-2); }
.vf-bill__plan.is-picked::before { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; background: var(--hx-accent); }
.vf-bill__plan p { margin: 0; }
.vf-bill__name { font-family: var(--hx-font-condensed); font-size: var(--hx-text-label); font-weight: var(--hx-weight-semibold); letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; color: var(--hx-accent-text); }
.vf-bill__free { justify-self: start; padding: 0.2rem 0.55rem; font-family: var(--hx-font-condensed); font-size: var(--hx-text-label); font-weight: var(--hx-weight-semibold); letter-spacing: var(--hx-tracking-caps-tight); text-transform: uppercase; color: var(--hx-on-accent); background: var(--hx-accent); }
.vf-bill__price { font-size: var(--hx-text-h4); font-weight: var(--hx-weight-light); font-variant-numeric: tabular-nums; }
.vf-bill__plan > .hx-badge { justify-self: start; }
@media (max-width: 47.99rem) {
  .vf-bill__plan + .vf-bill__plan { border-inline-start-width: 0; border-top-width: 1px; }
}

.vf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--hx-space-6); }
.vf-tiles .hx-stat p { margin: 0; }
.vf-tiles .hx-stat__value { font-size: var(--hx-text-h3); overflow-wrap: anywhere; }

.vf-rates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--hx-space-6); }
.vf-rate { display: grid; gap: var(--hx-space-2); align-content: start; }
.vf-rate p { margin: 0; }
.vf-rate__value { font-family: var(--hx-font-condensed); font-size: var(--hx-text-h3); line-height: 1; font-variant-numeric: tabular-nums; color: var(--hx-fg); }
.vf-rate__name { font-weight: var(--hx-weight-medium); }
.vf-rate__bar { display: block; height: 2px; background: var(--hx-line); position: relative; }
.vf-rate__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline: 0 auto; width: calc(var(--v, 0) * 100%); background: var(--hx-accent); }

.vf-bars { list-style: none; margin: 0; padding: 0; display: flex; align-items: end; justify-content: space-around; gap: 2px; height: 8rem; border-bottom: 1px solid var(--hx-line); }
.vf-bars__bar { flex: 1 1 0; min-width: 2px; max-width: 0.9rem; height: max(2px, calc(var(--h, 0) * 100%)); background: var(--hx-accent); position: relative; opacity: 0.85; }
.vf-bars__alarm { position: absolute; inset: 0 0 auto; height: calc(var(--a, 0) * 100%); background: var(--hx-signal); }

.vf-diag { border-bottom: 1px solid var(--hx-line); }
.vf-diag .vf-row { border-bottom: 0; flex-wrap: wrap; }
.vf-diag__detail { display: grid; gap: var(--hx-space-2); padding-bottom: var(--hx-space-4); }
.vf-diag__detail[hidden] { display: none; }
.vf-diag__detail p { margin: 0; }
.vf-pre { margin: 0; max-height: 20rem; overflow: auto; padding: var(--hx-space-3); background: var(--hx-input-bg); border: 1px solid var(--hx-line); font-family: var(--hx-font-mono); font-size: var(--hx-text-code); line-height: var(--hx-leading-code); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Autofill and password managers: keep the dark field instead of the browser's light fill colour. */
.hx-input:-webkit-autofill,
.hx-input:-webkit-autofill:hover,
.hx-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hx-fg);
  caret-color: var(--hx-fg);
  box-shadow: 0 0 0 100vmax var(--hx-input-bg) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.hx-input:autofill { color: var(--hx-fg); }
/* A key typed like a password, without being one (no "save password" for it). */
.vf-masked { -webkit-text-security: disc; font-family: var(--hx-font-mono); }