@import "/_shared/vilkax-a11y.css"; /* a11y system: reduced-motion + focus-ring (must be first) */
/* ============================================================
 * Vilkax · /app/ - end-user PWA dashboard
 * ============================================================
 *
 * This is the end-user-facing surface. Different from /admin/wolf-den
 * (operator) and from / (marketing) - it's the THIRD dashboard
 * layer, and the one that ships inside the installed PWA on
 * Android / iOS / Mac / Windows / Linux.
 *
 * Reuses brand tokens from /style.css. Layout is "dashboard
 * dense" - multiple cards per row on desktop, single-column on
 * phones. No hero composition here - the user came here to DO
 * something, not absorb brand.
 */

.app-body {
  background: var(--bg-absolute, #0B1426);
  /* Override the centered-hero layout /style.css applies to <body>. */
  display: block;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  /* Opaque, no backdrop-filter: a blur on a sticky bar re-samples the whole
     scrolling page every frame and stuttered on phones and low-end laptops. */
  background: rgb(11, 20, 38);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-brand-mark {
  /* Pass-169 - header brandmark now uses vilkax-brandmark-row.png
     (wolf + VILKAX wordmark composite, 1280×320 ~4:1).  44 px tall
     → ~176 px wide.  Glow stack uses Ice + Signal Blue + a soft
     Bone highlight so the chrome wordmark catches light when
     hovered. */
  width: auto;
  height: 44px;
  max-width: 220px;
  filter:
    drop-shadow(0 4px 12px rgba(61, 123, 217, 0.32))
    drop-shadow(0 0 18px rgba(127, 207, 230, 0.26))
    drop-shadow(0 0 4px  rgba(233, 238, 246, 0.20));
  transition: transform 220ms ease, filter 220ms ease;
  will-change: transform, filter;
}
.app-brand-mark:hover,
a:focus-visible > .app-brand-mark {
  transform: translateY(-1px) scale(1.04);
  filter:
    drop-shadow(0 6px 18px rgba(61, 123, 217, 0.50))
    drop-shadow(0 0 28px rgba(127, 207, 230, 0.46))
    drop-shadow(0 0 6px  rgba(233, 238, 246, 0.30));
}
@media (max-width: 640px) {
  .app-brand-mark { height: 36px; max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-brand-mark { transition: none; }
  .app-brand-mark:hover { transform: none; }
}
.app-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.app-brand-name {
  font-weight: 800;
  letter-spacing: 0.20em;
  color: var(--text-strong);
  font-size: 13px;
}
.app-brand-sub {
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 3px;
}
.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.app-nav-link {
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 8px;
  transition: color 180ms ease, background 180ms ease;
}
.app-nav-link:hover { color: var(--text-strong); background: rgba(255, 255, 255, 0.04); }
.app-nav-link.is-active {
  color: var(--brand-primary-bright, #3b82f6);
  background: rgba(77, 169, 255, 0.10);
}
.app-install-btn {
  margin-left: 8px;
  background: linear-gradient(135deg, var(--brand-primary-bright, #3b82f6), var(--brand-primary, #2563EB));
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-brand, "Manrope", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30);
}
.app-install-btn:hover { filter: brightness(1.10); }

/* ── Tier badge + sign-in link in the nav ───────────────────── */
.app-tier-badge {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
/* Belt-and-suspenders, the same guard .vlx-welcome and .vlx-subnudge carry:
   the badge stays hidden until unified-nav.js has read a REAL tier from
   /api/auth/me, and nothing above may resurrect it with a display. */
.app-tier-badge[hidden] { display: none !important; }
.app-tier-badge[data-tier="free"]       { color: #94a3b8; }
.app-tier-badge[data-tier="basic"]      { color: #7fcfe6; }
.app-tier-badge[data-tier="pro"]        { color: var(--brand-primary-bright, #3b82f6); }
.app-tier-badge[data-tier="family"]     { color: #c4b5fd; }
.app-tier-badge[data-tier="enterprise"] { color: #10b981; }
.app-signin-link {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-primary-bright, #3b82f6);
  text-decoration: none;
}
.app-signin-link:hover { text-decoration: underline; }

@media (max-width: 540px) {
  .app-header   { flex-wrap: wrap; }
  .app-nav-link { padding: 8px 9px; font-size: 11px; letter-spacing: 0.05em; }
}

/* ── Main column ─────────────────────────────────────────────── */
.app-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Shield banner (the orb + headline + 24h counter) ─────── */
.app-shield {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 22px;
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(37, 99, 235, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.app-shield-orb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(77, 169, 255, 0.55),
      rgba(37, 99, 235, 0.20) 60%,
      transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: appPulse 3.5s ease-in-out infinite;
}
.app-shield-orb-core {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-primary-bright) 0%, var(--brand-primary) 100%);
  box-shadow: 0 0 32px rgba(77, 169, 255, 0.65), inset 0 0 12px rgba(255, 255, 255, 0.30);
}
.app-shield[data-state="degraded"] .app-shield-orb-core {
  background: radial-gradient(circle, #fbbf24, #f59e0b);
  box-shadow: 0 0 28px rgba(251, 191, 36, 0.55), inset 0 0 10px rgba(255, 255, 255, 0.30);
}
/* "Reconnecting" means we have not heard back yet, not that anything is wrong.
   It is what a signed-out visitor, a slow connection or a rate-limited status
   call sees on open, so it must never read as an alert. Neutral, not red. */
.app-shield[data-state="offline"] .app-shield-orb-core {
  background: radial-gradient(circle, #94a3b8, #475569);
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.30), inset 0 0 10px rgba(255, 255, 255, 0.20);
}
@keyframes appPulse {
  0%, 100% { transform: scale(1.000); opacity: 1; }
  50%      { transform: scale(1.030); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shield-orb { animation: none; }
}
.app-shield-headline {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  line-height: 1.2;
}
.app-shield-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
/* The one press that closes the no-device gap. Shown only in that state
   (app.js renderShield sets [hidden]), so it never competes with the calm
   "you are protected" reading. */
.app-shield-cta {
  display: inline-block;
  margin: 10px 0 0;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent, currentColor);
  color: var(--accent, currentColor);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.app-shield-cta:hover,
.app-shield-cta:focus-visible {
  background: color-mix(in srgb, var(--accent, currentColor) 12%, transparent);
}
.app-shield-cta[hidden] { display: none; }

.app-shield-meta {
  text-align: end;
  display: flex;
  flex-direction: column;
}
.app-shield-meta-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.app-shield-meta-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* "This week" + next best step (home-today.js). Logical properties so the
   column mirrors in RTL; numbers wrap instead of clipping in de / lt. */
.app-shield-week { display: flex; flex-direction: column; gap: 6px; min-width: 132px; max-width: 220px; text-align: start; }
.app-shield-week[hidden] { display: none; }
.app-shield-week-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.app-shield-week-list li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-muted); }
.app-shield-week-list strong { font-size: 20px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; min-width: 3.5ch; text-align: end; }
.app-shield-week-quiet { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.app-shield-next { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.app-shield-next[hidden] { display: none; }
.app-shield-next-lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.app-shield-next-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent, currentColor); text-decoration: none; }
.app-shield-next-link:hover, .app-shield-next-link:focus-visible { text-decoration: underline; }

@media (max-width: 640px) {
  .app-shield-week { grid-column: 1 / -1; max-width: none; }
  .app-shield-week-list { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  .app-shield      { grid-template-columns: 64px 1fr; }
  .app-shield-orb  { width: 64px; height: 64px; }
  .app-shield-orb-core { width: 34px; height: 34px; }
  .app-shield-meta { grid-column: 1 / -1; text-align: left; flex-direction: row; align-items: baseline; gap: 8px; margin-top: 4px; }
  .app-shield-meta-num { font-size: 24px; }
}

/* ── Card grid (live counters) ───────────────────────────────── */
.app-grid {
  display: grid;
  gap: 14px;
}
.app-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.app-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-card-full {
  /* Full-width card with a header - used for the AB board,
   * coverage, OS info, and the locked personal panel. */
  padding: 20px 22px;
  gap: 12px;
}
.app-card-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.app-card-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.app-card-foot {
  font-size: 11px;
  color: var(--text-muted);
}
.app-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.app-card-h {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.app-card-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.app-card-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── AB engine row ─────────────────────────────────────────── */
.app-ab {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app-ab-row {
  display: grid;
  grid-template-columns: 1fr auto 110px auto;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.app-ab-row:last-child { border-bottom: 0; }
.app-ab-model {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--text-strong);
}
.app-ab-msgs {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.app-ab-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.app-ab-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 320ms ease;
}
.app-ab-bar-fill[data-low="true"] {
  background: linear-gradient(90deg, #ff6b6b, #f97316);
}
.app-ab-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ── Coverage pills ───────────────────────────────────────── */
.app-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app-cov-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}
.app-cov-pill[data-on="true"] {
  border-color: rgba(16, 185, 129, 0.40);
  color: #10b981;
}
.app-cov-pill[data-on="false"] {
  border-color: rgba(148, 163, 184, 0.30);
  color: #94a3b8;
}
.app-cov-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* ── OS feature matrix ─────────────────────────────────────── */
.app-os-hint {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-strong);
}
.app-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.app-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.app-feature-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.app-feature[data-on="true"]  .app-feature-icon { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.app-feature[data-on="false"] .app-feature-icon { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.app-feature-name { color: var(--text-strong); font-weight: 600; }
.app-feature-state { margin-left: auto; font-size: 11px; color: var(--text-muted); }

/* ── Locked personal panel ─────────────────────────────────── */
.app-card-locked {
  position: relative;
  opacity: 0.92;
}
.app-card-locked::before {
  content: "🔒";
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 16px;
  opacity: 0.55;
}
.app-locked-body {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.app-empty {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 14px;
  margin: 0;
}

/* ── Footer ────────────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: 20px 16px 30px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ============================================================
 * /business/ portal - reuses .app-* primitives, adds hero + CTA
 * ============================================================ */

.biz-hero {
  display: grid;
  grid-template-columns: 1fr 160px;
  align-items: center;
  gap: 24px;
  padding: 32px 28px;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(37, 99, 235, 0.16), transparent 55%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  margin-bottom: 4px;
}
.biz-hero-h {
  margin: 0 0 12px;
  font-size: clamp(22px, 3.0vw, 32px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  line-height: 1.2;
}
.biz-hero-accent {
  color: var(--brand-primary-bright, #3b82f6);
}
.biz-hero-sub {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.biz-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.biz-hero-cta .submit-btn {
  text-decoration: none;
  display: inline-block;
}
.biz-secondary {
  color: var(--brand-primary-bright, #3b82f6);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.biz-secondary:hover { text-decoration: underline; }
.biz-hero-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary-bright, #3b82f6);
}
.biz-hero-h { font-size: clamp(26px, 4.0vw, 44px); }
.biz-hero-sub { font-size: 15px; max-width: 56ch; }
.biz-hero-foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Core-value strip (one engine, two ways in) ──────────────── */
.biz-value {
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}
.biz-value-lead {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.biz-value-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.biz-value-k {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary-bright, #3b82f6);
}
.biz-value-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.biz-value-body strong { color: var(--text-strong); font-weight: 700; }

.biz-value-roi {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 64ch;
}

/* ── Threats grid (grouped, scannable chips) ─────────────────── */
.biz-threats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.biz-threat-group {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.biz-threat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.biz-threat-ic {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  font-size: 16px;
  background: rgba(91, 107, 255, 0.12);
  border: 1px solid rgba(91, 107, 255, 0.3);
  color: #7C8EFF;
  flex: 0 0 auto;
}
.biz-threat-h { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.biz-threat-hook {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(199, 207, 217, 0.7);
}
.biz-threat-chips {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.biz-threat-chips li {
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(225, 230, 238, 0.82);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.biz-threat-foot {
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(199, 207, 217, 0.55);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.biz-threat-foot strong { color: rgba(225, 230, 238, 0.85); font-weight: 700; }
.biz-threat-tier {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7C8EFF;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(91, 107, 255, 0.12);
  border: 1px solid rgba(91, 107, 255, 0.3);
}
.biz-threats-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(91, 107, 255, 0.06);
  border: 1px solid rgba(91, 107, 255, 0.18);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.biz-threats-note strong { color: var(--text-strong); font-weight: 700; }

/* ── Three pillars: company / staff / tools ──────────────────── */
.biz-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.biz-pillar {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.biz-pillar-ic {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 18px;
  background: rgba(91, 107, 255, 0.12);
  border: 1px solid rgba(91, 107, 255, 0.3);
  color: #7C8EFF;
  margin-bottom: 12px;
}
.biz-pillar-h { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 0.01em; }
.biz-pillar-lead { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #7C8EFF; }
.biz-pillar-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.biz-pillar-list li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(225, 230, 238, 0.78);
}
.biz-pillar-list li::before {
  content: "›";
  position: absolute;
  left: 2px;
  top: -1px;
  color: #7C8EFF;
  font-weight: 700;
}
.biz-pillar-out {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(199, 207, 217, 0.7);
}
.biz-pillar-out strong { color: rgba(225, 230, 238, 0.92); font-weight: 700; }

/* ── Industry strip (capabilities, no fabricated case studies) ─── */
.biz-industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.biz-industry {
  padding: 16px 16px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.biz-industry-h { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #fff; }
.biz-industry-body { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(199, 207, 217, 0.7); }

/* ── The Vilkax edge (four pillars) ──────────────────────────── */
.biz-edge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.biz-edge {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.biz-edge-k {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7C8EFF;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(91, 107, 255, 0.12);
  border: 1px solid rgba(91, 107, 255, 0.3);
}
.biz-edge-h { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #fff; }
.biz-edge-body { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(199, 207, 217, 0.66); }
.biz-edge-body em { font-style: italic; color: rgba(225, 230, 238, 0.9); }
.biz-hero-orb {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(77, 169, 255, 0.45),
      rgba(37, 99, 235, 0.16) 60%,
      transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: appPulse 4.5s ease-in-out infinite;
}
.biz-hero-orb-core {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-primary-bright) 0%, var(--brand-primary) 100%);
  box-shadow: 0 0 48px rgba(77, 169, 255, 0.55), inset 0 0 16px rgba(255, 255, 255, 0.30);
}

@media (max-width: 720px) {
  .biz-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .biz-hero-orb { display: none; }
}

/* ── Business capability grid ────────────────────────────── */
.biz-grid {
  display: grid;
  gap: 14px;
}
.biz-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.biz-cap-h {
  margin: 6px 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.biz-cap-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.biz-cap-body code {
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
}

/* ── Feature list (the "what you'll see" bullets) ─────────── */
.biz-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.biz-feature-list li {
  position: relative;
  padding: 8px 12px 8px 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.biz-feature-list li::before {
  content: "▸";
  position: absolute;
  left: 10px;
  top: 9px;
  color: var(--brand-primary-bright, #3b82f6);
  font-weight: 700;
}
.biz-feature-list strong {
  color: var(--text-strong);
  font-weight: 700;
}
.biz-feature-list em {
  font-style: italic;
  color: var(--text-strong);
}
.biz-feature-list code {
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
}

/* ── Footer CTA ──────────────────────────────────────────── */
.biz-cta-foot {
  text-align: center;
  padding: 22px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.biz-cta-foot a {
  margin-left: 6px;
}

/* ── Business landing · video gap placeholders ──────────────────────
 * A 16:9 slot with a graceful "video coming soon" state. Swap the
 * inner .biz-video-ph for a real <iframe>/<video> at upload time —
 * the slot keeps the layout from shifting. */
.biz-video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(91,107,255,0.10), transparent 60%),
    rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.biz-video-slot iframe,
.biz-video-slot video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.biz-video-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 24px;
}
.biz-video-ic {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  font-size: 20px; color: #7C8EFF;
  background: rgba(91,107,255,0.14);
  border: 1px solid rgba(91,107,255,0.32);
  margin-bottom: 4px;
}
.biz-video-ph-t {
  margin: 0; font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.biz-video-ph-s {
  margin: 0; font-size: 13px; line-height: 1.55; max-width: 46ch;
  color: rgba(199,207,217,0.6);
}

/* ── Business landing · downloads (coming soon) ─────────────────── */
.biz-dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.biz-dl-card {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
}
.biz-dl-ic {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px; font-size: 19px;
  background: rgba(91,107,255,0.12); border: 1px solid rgba(91,107,255,0.3);
  color: #7C8EFF; margin-bottom: 10px;
}
.biz-dl-h { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.biz-dl-body { font-size: 13px; line-height: 1.5; color: rgba(199,207,217,0.62); margin: 0 0 12px; }
.biz-dl-state {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(199,207,217,0.55);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
}

/* ── Business landing · contact box ─────────────────────────────── */
.biz-contact-form { margin-top: 8px; max-width: 640px; }
.biz-contact-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 560px) {
  .biz-contact-row { grid-template-columns: 1fr; }
}
.biz-contact-field { display: flex; flex-direction: column; }
.biz-contact-textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
/* honeypot — always off-screen; a real user never sees or fills it */
.biz-hp-field {
  position: absolute !important; left: 0 !important; top: 0 !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
  overflow: hidden !important; clip-path: inset(50%) !important;
  pointer-events: none;
}

/* ── Shield 2.0 · PRS card ──────────────────────────────────── */
.prs-card {
  --prs-band-c: #7fcfe6;
  position: relative;
  padding: 22px 24px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(11,20,38,0.65);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 60px -28px rgba(0,0,0,0.65),
    0 0 30px -6px var(--prs-band-c);
  overflow: hidden;
}
.prs-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--prs-band-c), transparent);
  opacity: 0.85;
}
.prs-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.prs-score-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.prs-score {
  font-family: var(--font-brand, "Manrope", sans-serif);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 64px);
  letter-spacing: -0.02em;
  color: var(--prs-band-c);
  line-height: 1;
}
.prs-band-pill {
  font-size: 10px;
  letter-spacing: 0.20em;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--prs-band-c);
}
.prs-delta {
  font-family: var(--font-brand, "Manrope", sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.prs-delta[data-dir="up"]   { color: #5eead4; }
.prs-delta[data-dir="down"] { color: #fca5a5; }
.prs-spark-block {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prs-spark {
  width: 180px;
  height: 48px;
  display: block;
}
.prs-spark-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.prs-h {
  margin: 12px 0 8px;
  font-family: var(--font-brand, "Manrope", sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.prs-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prs-reasons li {
  font-size: 13px;
  color: var(--text-strong);
  padding: 6px 0;
  border-left: 2px solid var(--prs-band-c);
  padding-left: 10px;
}
.prs-drilldown {
  margin-top: 12px;
}
.prs-drilldown summary {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 700;
  padding: 4px 0;
}
.prs-components {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}
.prs-components li {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "lbl val"
    "ev ev";
  gap: 2px 8px;
  font-size: 12px;
}
.prs-comp-lbl { grid-area: lbl; font-weight: 700; color: var(--text-strong); }
.prs-comp-val { grid-area: val; font-weight: 800; color: var(--text-muted); font-family: ui-monospace, monospace; }
.prs-comp-val.is-up   { color: #5eead4; }
.prs-comp-val.is-down { color: #fca5a5; }
.prs-comp-ev  { grid-area: ev; color: var(--text-muted); font-size: 11.5px; }
@media (max-width: 540px) {
  .prs-spark { width: 140px; height: 40px; }
}

/* ── Personal protection feed (WIRING_AUDIT pass 2 #14).
       Replaces the locked "early access" card. ─────────── */
.app-feed-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
/* The `display: flex` above OUTRANKS the UA sheet's `[hidden]{display:none}`,
   so `list.hidden = true` in app.js did nothing and the loading skeleton kept
   showing underneath the 401 / empty / error state it was supposed to be
   replaced by. Same class of bug as the inline `style="display:none"` that
   shipped the welcome banner visible to everyone. */
.app-feed-list[hidden] { display: none !important; }
.app-feed-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.app-feed-ts {
  color: var(--text-dim, #6b7588);
  font-variant-numeric: tabular-nums;
}
.app-feed-kind {
  color: var(--text-strong, #e7eef7);
  font-weight: 600;
}
.app-feed-kind[data-severity="warning"] { color: #f5b066; }
.app-feed-kind[data-severity="error"],
.app-feed-kind[data-severity="critical"] { color: #ff8896; }
.app-feed-meta {
  color: var(--text-muted, #94a0b3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Tier-locked surface (rendered by VlxTier.mountLock).
       Used by Hearth VRM, future Vault stake controls,
       any feature gated above the user's plan. ─────────── */
.vlx-tier-locked {
  position: relative;
}
.vlx-tier-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.05));
  border: 1px solid rgba(245,158,11,0.34);
  color: var(--text-strong, #e7eef7);
  font-size: 13px;
  line-height: 1.45;
}
.vlx-tier-cta > svg { color: #f5b066; flex: 0 0 auto; }
.vlx-tier-cta-text { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.vlx-tier-cta-sub {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-muted, #94a0b3);
  line-height: 1.5;
  font-weight: 400;
}
.vlx-tier-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  color: #1a0e00;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: filter 140ms ease, transform 120ms ease;
}
.vlx-tier-cta-btn:hover  { filter: brightness(1.06); }
.vlx-tier-cta-btn:active { transform: translateY(1px); }
.vlx-tier-cta-btn:focus-visible {
  outline: 3px solid rgba(245,158,11,0.6);
  outline-offset: 2px;
}
/* When the lock is because the user is signed out, use the cool
   palette instead of the warm "you can pay" palette - different
   call to action. */
.vlx-tier-anon .vlx-tier-cta {
  background: linear-gradient(180deg, rgba(127,207,230,0.10), rgba(127,207,230,0.04));
  border-color: rgba(127,207,230,0.34);
}
.vlx-tier-anon .vlx-tier-cta > svg { color: #7FCFE6; }
.vlx-tier-anon .vlx-tier-cta-btn {
  /* was the bright violet: white measured 2.4:1, under WCAG AA */
  background: linear-gradient(180deg, #8E3DCC, #7A22C4);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .vlx-tier-cta-btn { transition: none; }
}

/* ── Toast notifications (replaces alert()) ── */
.vlx-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: rgba(15,23,42,0.94); color: #34D399; padding: 11px 22px;
  border-radius: 14px; font-size: 13px; font-weight: 600; z-index: 99999;
  border: 1px solid rgba(52,211,153,0.3); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none; max-width: 90vw; text-align: center;
  font-family: var(--f-body, system-ui, sans-serif);
}
.vlx-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.vlx-toast--error { color: #F87171; border-color: rgba(248,113,113,0.3); }
.vlx-toast--warn  { color: #FBBF24; border-color: rgba(251,191,36,0.3); }

/* ── Business landing: named-tools grid (Pass 135) ──────────────────── */
.biz-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.biz-tool {
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
}
.biz-tool-ic {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  font-size: 19px;
  background: rgba(91,107,255,0.12);
  border: 1px solid rgba(91,107,255,0.3);
  color: #7C8EFF;
  margin-bottom: 10px;
}
.biz-tool-h { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.biz-tool-body { font-size: 13px; line-height: 1.5; color: rgba(199,207,217,0.62); margin: 0 0 10px; }
.biz-tool-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.biz-tool-caps li {
  font-size: 12px; color: rgba(199,207,217,0.55); padding-left: 16px; position: relative;
}
.biz-tool-caps li::before {
  content: "›"; position: absolute; left: 2px; color: #7C8EFF; font-weight: 700;
}
.biz-inline-cta {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--brand-primary-bright, #3b82f6);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.biz-inline-cta:hover { text-decoration: underline; }

/* ── Business signup dialog ─────────────────────────────────────────── */
.biz-signup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* No blur on a full-viewport overlay; a darker scrim does the same job. */
  background: rgba(4,8,18,0.86);
  animation: vlx-fadeIn 0.2s ease-out;
}
/* A fixed overlay MUST honour [hidden] — a bare display:flex above beats the
   UA [hidden]{display:none} on specificity, so the overlay rendered on load
   and blocked the whole page. This guard makes hidden actually hidden. */
.biz-signup-overlay[hidden] { display: none !important; }
.biz-signup-card {
  position: relative;
  width: 100%; max-width: 420px;
  padding: 30px 30px 26px;
  border-radius: 18px;
  background: rgba(18,30,56,0.92);
  border: 1px solid rgba(91,107,255,0.22);
  box-shadow: 0 36px 80px -22px rgba(91,107,255,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
}
.biz-signup-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; cursor: pointer;
  color: rgba(199,207,217,0.5); font-size: 17px; line-height: 1;
}
.biz-signup-close:hover { color: #fff; }
.biz-signup-h { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.biz-signup-sub { font-size: 13px; color: rgba(199,207,217,0.6); margin: 0 0 18px; line-height: 1.5; }
.biz-signup-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(199,207,217,0.5); margin: 12px 0 5px;
}
.biz-signup-input {
  width: 100%; padding: 11px 13px; font-size: 14px; font-family: inherit;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; color: #fff; box-sizing: border-box;
}
.biz-signup-input:focus { outline: none; border-color: rgba(91,107,255,0.6); box-shadow: 0 0 0 3px rgba(91,107,255,0.15); }
.biz-signup-submit { width: 100%; margin-top: 18px; }
.biz-signup-msg { font-size: 12.5px; color: #F87171; margin: 10px 0 0; min-height: 1.2em; line-height: 1.45; }
.biz-signup-msg[data-ok="true"] { color: #34D399; }

/* ── First-sign-in welcome banner (/app/?welcome=1) ─────────────────── */
/* Styled via class — NOT a style="" attribute — because the production
   CSP is style-src 'self': inline styles are blocked, which left the raw
   banner text visible to every visitor. Default-hidden via the hidden
   attribute; welcome-banner.js flips el.hidden. */
.vlx-welcome {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(135deg, #0ea5e9 0%, #1e40af 100%);
  color: #fff;
  padding: 14px 22px; border-radius: 10px;
  font: 600 15px/1.3 Manrope, system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(2,18,52,0.45);
  max-width: 480px; text-align: center; cursor: pointer;
}
/* Belt-and-suspenders: nothing above sets display on .vlx-welcome, but a
   fixed banner MUST honour [hidden] even if a future rule does (same
   guard the .biz-signup-overlay carries). */
.vlx-welcome[hidden] { display: none !important; }
.vlx-welcome-kicker {
  display: block; font-size: 13px; opacity: 0.85;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.vlx-welcome-body { display: block; margin-top: 4px; }

/* ── Smart 2FA nudge card ────────────────────────────────── */
.app-2fa-nudge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 0 0 12px;
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(59,130,246,.12),rgba(99,102,241,.08));
  border: 1px solid rgba(59,130,246,.25);
  color: var(--text-secondary, #cbd5e1);
}
.app-2fa-nudge[hidden] { display: none; }
.app-2fa-nudge-icon { font-size: 1.4rem; flex-shrink: 0; }
.app-2fa-nudge-body { flex: 1; font-size: .82rem; line-height: 1.35; }
.app-2fa-nudge-body strong { display: block; color: #f1f5f9; font-size: .88rem; margin-bottom: 2px; }
.app-2fa-nudge-copy { opacity: .7; }
.app-2fa-nudge-link {
  padding: 6px 12px; border-radius: 7px; flex-shrink: 0;
  background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.30);
  color: #60a5fa; font-size: .78rem; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: background 180ms;
}
.app-2fa-nudge-link:hover { background: rgba(59,130,246,.28); }

/* ── The occasional subscription reminder ─────────────────────────────────
   Deliberately NOT a fixed overlay like .vlx-welcome. This is a reminder,
   not an announcement: it sits in the page flow, scrolls away, and never
   covers anything the person came here to read. A billing prompt that
   interrupts a protection surface is the shape this product does not use.

   Default-hidden via the [hidden] attribute, which subscription-reminder.js
   toggles — the /app/* CSP is `style-src 'self'`, so an inline
   style="display:none" is silently blocked and the card would render for
   everybody, which is exactly how the welcome banner first shipped. */
.vlx-subnudge {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 14px auto; max-width: 720px;
  padding: 14px 16px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 14px;
  background: rgba(148,163,184,0.06);
  font: 400 13px/1.5 Manrope, system-ui, sans-serif;
}
/* Belt-and-suspenders, same guard .vlx-welcome carries. */
.vlx-subnudge[hidden] { display: none !important; }
.vlx-subnudge-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.vlx-subnudge-title { font-weight: 600; font-size: 14px; }
.vlx-subnudge-body { opacity: 0.82; }
.vlx-subnudge-cta {
  flex: 0 0 auto; align-self: center;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.3);
  text-decoration: none; font-weight: 600; font-size: 13px;
  white-space: nowrap;
}
.vlx-subnudge-close {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; opacity: 0.55;
  padding: 2px 4px;
  /* A 32px target, because "not now" is the answer people most need to be
     able to give and a 12px × is a dark pattern by omission. */
  min-width: 32px; min-height: 32px;
}
.vlx-subnudge-close:hover { opacity: 0.9; }
@media (max-width: 560px) {
  .vlx-subnudge { flex-wrap: wrap; }
  .vlx-subnudge-cta { align-self: flex-start; }
}


/* At narrow widths the three-across flex row leaves the CTA floating in the
   middle of a tall wrapped paragraph, which reads as a stray button rather
   than the answer to the sentence beside it. Below 480px the card becomes a
   column: text, then the action, with the dismiss pinned top-right where a
   dismiss belongs. Seen in a 375px screenshot, not inferred. */
@media (max-width: 480px) {
  .vlx-subnudge { flex-wrap: wrap; position: relative; padding-inline-end: 44px; }
  .vlx-subnudge-text { flex: 1 1 100%; }
  .vlx-subnudge-cta  { align-self: stretch; text-align: center; margin-top: 4px; }
  .vlx-subnudge-close { position: absolute; top: 8px; inset-inline-end: 8px; }
}

/* ============================================================
 * Alert inbox (#app-alerts) + the shared card error line
 * ------------------------------------------------------------
 * Added with /app/alerts-card.js. Lives here rather than in a
 * style attribute because the /app/* CSP is `style-src 'self'`
 * and an inline style is silently dropped by the browser — the
 * bug that shipped the welcome banner invisible.
 * ============================================================ */

/* The unread chip in the card header. Reuses .app-card-sub's
   typography and only adds the pill treatment on top. */
.app-alerts-count {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(59,130,246,0.14);
  border: 1px solid rgba(59,130,246,0.30);
  color: #93c5fd;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.app-alerts-count[hidden] { display: none !important; }

.app-alerts-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app-alerts-list[hidden] { display: none !important; }

/* One alert. The severity stripe is the only colour that carries
   meaning here; the row itself stays calm so a feed of four alerts
   does not read as an emergency. */
.app-alert-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-inline-start: 3px solid var(--app-alert-accent, #64748b);
}
.app-alert-item[data-severity="info"]     { --app-alert-accent: #60a5fa; }
.app-alert-item[data-severity="notice"]   { --app-alert-accent: #5eead4; }
.app-alert-item[data-severity="warning"]  { --app-alert-accent: #f5b066; }
.app-alert-item[data-severity="critical"] { --app-alert-accent: #f87171; }
/* Read alerts recede but are never removed — the user may want to
   re-read what they dismissed. */
.app-alert-item[data-read="1"] { opacity: 0.62; }

.app-alert-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.app-alert-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong, #e7eef7);
  flex: 1 1 auto;
  min-width: 0;
}
.app-alert-new {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
}
.app-alert-time {
  font-size: 11px;
  color: var(--text-dim, #6b7588);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
.app-alert-body {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted, #94a3b8);
}
.app-alert-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
}
/* 32px min-height on both controls: these are the tap targets on a
   375px phone and an 11px link is not one. */
.app-alert-cta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #bfdbfe;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.32);
}
.app-alert-cta:hover { background: rgba(59,130,246,0.20); color: #dbeafe; }
.app-alert-read,
.app-alert-feedback {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
}
.app-alert-read:hover,
.app-alert-feedback:hover { color: var(--text-strong, #e7eef7); border-color: rgba(255,255,255,0.22); }
.app-alert-feedback:disabled { opacity: 0.6; cursor: default; }
.app-alert-feedback-note { font-size: 12px; color: var(--text-muted, #94a3b8); align-self: center; }

/* Shared failure line for the cards on this page (alerts, feed).
   A card that cannot load says so and offers a retry — it does not
   hide itself, and it does not leave a skeleton pulsing forever. */
.app-card-error {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #fcd7b0;
  background: rgba(245,176,102,0.07);
  border: 1px solid rgba(245,176,102,0.26);
}
.app-card-error[hidden] { display: none !important; }
.app-card-retry {
  min-height: 32px;
  padding: 5px 13px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #fcd7b0;
  background: rgba(245,176,102,0.12);
  border: 1px solid rgba(245,176,102,0.38);
}
.app-card-retry:hover { background: rgba(245,176,102,0.22); color: #ffe9d2; }

/* Focus must be visible on every control this file adds — these sit
   inside a dark card where the UA default ring is nearly invisible. */
.app-alert-cta:focus-visible,
.app-alert-read:focus-visible,
.app-card-retry:focus-visible {
  outline: 2px solid #7fcfe6;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .app-alert-time { margin-inline-start: 0; flex-basis: 100%; }
  .app-card-error { align-items: flex-start; }
}

/* [hidden] guards — see the note above .app-feed-list. Audit 2026-09-09. */
.app-card[hidden]   { display: none !important; }
.submit-btn[hidden] { display: none !important; }

/* ── Quick actions (quick-actions.js) ───────────────────────── */
.app-quick-note { margin: 0 0 10px; color: var(--text-muted, #9aa7bd); font-size: 13px; }
.app-quick-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.app-quick-tile {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px;
  align-items: center;
  min-height: 64px; padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: inherit; text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.app-quick-tile:hover { background: rgba(255,255,255,0.08); border-color: rgba(127,207,230,0.35); }
.app-quick-tile:focus-visible { outline: 3px solid rgba(77,169,255,0.55); outline-offset: 2px; }
/* The glyph lives here, not in the markup: it is decorative, and an emoji in
   the HTML reads to the i18n guard as untranslatable user-visible text. */
.app-quick-ic { grid-row: 1 / span 2; font-size: 22px; line-height: 1; }
.app-quick-ic[data-ic="twofa"]::before  { content: "\1F510"; }
.app-quick-ic[data-ic="scan"]::before   { content: "\1F50E"; }
.app-quick-ic[data-ic="locate"]::before { content: "\1F4CD"; }
.app-quick-ic[data-ic="vpn"]::before    { content: "\1F6E1\FE0F"; }
.app-quick-ic[data-ic="kin"]::before    { content: "\1F43A"; }
.app-quick-ic[data-ic="ext"]::before    { content: "\1F9E9"; }
.app-quick-name { font-weight: 600; font-size: 14px; padding-right: 64px; }
.app-quick-sub { font-size: 12px; color: var(--text-muted, #9aa7bd); }
.app-quick-pill {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: rgba(248,113,113,0.16); color: #fca5a5;
}
.app-quick-pill[data-on="1"] { background: rgba(52,211,153,0.16); color: #6ee7b7; }
.app-quick-pill-app { background: rgba(127,207,230,0.14); color: #a5dff0; }
.app-quick-pill[hidden] { display: none; }

/* ── Nudge card (#app-nudges) — /app/nudge-card.js ──────────────────
   One or two honest "next step" rows from /api/nudges/next. Same
   visible-state contract as the alert inbox: list / empty / sign-in /
   error+retry, never hidden by a failure. */
.app-nudges-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-nudges-list[hidden] { display: none !important; }
.app-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
}
.app-nudge-body { flex: 1 1 260px; min-width: 0; }
.app-nudge-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.app-nudge-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
}
.app-nudge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.app-nudge-cta,
.app-nudge-later,
.app-nudge-never {
  min-height: 32px;
  padding: 5px 13px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.app-nudge-cta {
  color: #06212b;
  background: #7fcfe6;
  border: 1px solid #7fcfe6;
}
.app-nudge-cta:hover { background: #9fdcee; }
.app-nudge-later,
.app-nudge-never {
  color: inherit;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  opacity: 0.85;
}
.app-nudge-later:hover,
.app-nudge-never:hover { background: rgba(255,255,255,0.07); opacity: 1; }
.app-nudge-later:disabled,
.app-nudge-never:disabled { opacity: 0.5; cursor: default; }
.app-nudge-cta:focus-visible,
.app-nudge-later:focus-visible,
.app-nudge-never:focus-visible {
  outline: 2px solid #7fcfe6;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .app-nudge-actions { flex-basis: 100%; }
}

/* ── Notification Centre additions (notification-centre.js) ──────────
   Reuses the .app-nudge row above. Kind eyebrow, alert severity edge,
   the daily-brief next step and the anti-phish code line. Tokens only. */
.app-nudge-kind {
  display: block;
  margin: 0 0 4px;
  font-family: var(--vx-f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vx-text-muted);
}
.app-nudge-alert { border-inline-start: 3px solid var(--vx-sev-elevated); }
.app-nudge-sev-critical { border-inline-start-color: var(--vx-sev-critical); }
.app-nudge-legal { border-inline-start: 3px solid var(--vx-accent-ln); }
.app-nudge-question .app-nudge-title { font-weight: 700; }
.app-nudge-error { color: var(--vx-sev-high); flex-basis: 100%; }
.app-nudge-error[hidden] { display: none !important; }
.app-centre-next {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed var(--vx-line-2);
}
.app-centre-next[hidden] { display: none !important; }
.app-centre-next .app-nudge-kind { margin: 0; flex-basis: 100%; }
.app-centre-next-title { font-size: 14px; }
.app-centre-next-detail { font-size: 13px; color: var(--vx-text-muted); flex: 1 1 240px; }
/* Ahead of you — brief.foresight (notification-centre.js paintAhead). */
.app-centre-ahead {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--vx-line-2);
}
.app-centre-ahead[hidden] { display: none !important; }
.app-centre-ahead .app-nudge-kind { margin: 0 0 6px; display: block; }
.app-centre-ahead-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.app-centre-ahead-item { display: flex; flex-direction: column; gap: 4px; padding-block-end: 8px; border-block-end: 1px solid var(--vx-line); }
.app-centre-ahead-item:last-child { border-block-end: 0; padding-block-end: 0; }
.app-centre-ahead-title { font-size: 14px; }
.app-centre-ahead-action { font-weight: 600; }
.app-centre-ahead-meta { margin: 0; font-size: 12px; }
.app-centre-ahead-plays-h { margin: 4px 0 0; }
.app-centre-ahead-plays { margin: 0; padding-inline-start: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.app-centre-ahead-rule { font-weight: 600; }
.app-centre-ahead-limits { margin-block-start: 6px; padding: 8px 10px; border: 1px solid var(--vx-line); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.app-centre-ahead-limits-h { font-size: 13px; }
.app-centre-ahead-limits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-centre-ahead-limits-list > li { font-size: 13px; }
.app-centre-ahead-limits-list > li > p { margin: 2px 0 0; }
.app-centre-ahead-limit-level { font-weight: 600; }
.app-centre-ahead-limit-cannot .app-centre-ahead-limit-level { color: var(--vx-sev-high); }
.app-centre-ahead-limit-shared_only .app-centre-ahead-limit-level { color: var(--vx-sev-elevated); }
.app-centre-ahead-your-step { font-weight: 600; }
.app-centre-ahead-item .app-nudge-never { align-self: flex-start; }
.app-centre-ahead-limit { margin-block-start: 8px; font-size: 12px; }
#app-centre-ahead-locked[hidden], #app-centre-ahead-empty[hidden] { display: none !important; }
.app-antiphish {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--vx-text-muted);
}
.app-antiphish[hidden] { display: none !important; }
.app-antiphish-code {
  font-family: var(--vx-f-mono);
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--vx-text);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--vx-accent-sf);
  border: 1px solid var(--vx-accent-ln);
}
.app-antiphish-hint { font-size: 12px; opacity: .8; }

/* ── Kin Guardian Alerts: always-visible banner until acknowledged ─────── */
.kin-guardian-banner-host { position: sticky; top: 0; z-index: 9998; padding: 10px 16px 0; }
.kin-guardian-banner {
  background: linear-gradient(135deg, #7c2d12 0%, #b45309 100%);
  color: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px;
}
.kin-guardian-banner.is-error { background: rgba(255,255,255,.06); border: 1px solid var(--border-subtle, rgba(255,255,255,.12)); }
.kin-guardian-banner strong { font: 700 15px/1.3 Manrope, system-ui, sans-serif; }
.kin-guardian-banner-body { margin: 0; font-size: 14px; line-height: 1.45; opacity: .95; }
.kin-guardian-banner-sub, .kin-guardian-banner-err { font-size: 13px; opacity: .9; }
.kin-guardian-banner-err { color: #fecaca; }
.kin-guardian-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kin-guardian-btn {
  appearance: none; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff;
  padding: 8px 14px; border-radius: 999px; font: 600 14px/1 Manrope, system-ui, sans-serif; cursor: pointer; text-decoration: none;
}
.kin-guardian-btn-primary { background: #fff; color: #7c2d12; }
.kin-guardian-btn[disabled] { opacity: .6; cursor: default; }

/* ============================================================
 * Consent reminder (#vlx-consent-reminder) + home upgrade card.
 * One calm line: what protection is off, one button to fix it.
 * Tokens only (vilkax-tokens.css); no new colours. Styled here
 * because the /app/* CSP is style-src 'self'.
 * ============================================================ */
.vlx-reminder {
  margin: 14px auto; max-width: 720px;
  padding: 12px 14px;
  border: 1px solid var(--vx-accent-ln, var(--vx-line));
  border-radius: var(--vx-radius, 14px);
  background: var(--vx-accent-sf, var(--vx-surface-1));
  color: var(--vx-text);
  font: 400 13px/1.5 var(--vx-f-body, Manrope, system-ui, sans-serif);
}
.vlx-reminder[hidden] { display: none !important; }
.vlx-reminder-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vlx-reminder-text { margin: 0; flex: 1 1 260px; min-width: 0; }
.vlx-reminder-links { white-space: nowrap; }
.vlx-reminder-link { color: var(--vx-accent); margin-inline-end: 10px; }
.vlx-reminder-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vlx-reminder-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--vx-accent);
  background: var(--vx-accent); color: var(--vx-on-accent);
  font: 600 13px/1 var(--vx-f-body, Manrope, system-ui, sans-serif);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.vlx-reminder-cta[disabled] { opacity: 0.6; cursor: default; }
.vlx-reminder-quiet {
  min-height: 36px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid transparent; background: none; color: var(--vx-text-muted);
  font: 500 12.5px/1 var(--vx-f-body, Manrope, system-ui, sans-serif);
  cursor: pointer; white-space: nowrap;
}
.vlx-reminder-quiet:hover { color: var(--vx-text); border-color: var(--vx-line); }
.vlx-reminder-error { margin: 8px 0 0; color: var(--vx-sev-high); font-size: 12.5px; }
@media (max-width: 480px) {
  .vlx-reminder-actions { width: 100%; }
  .vlx-reminder-cta { flex: 1 1 100%; }
  .vlx-reminder-quiet { flex: 1 1 0; }
}

/* Phone width: the language pill (#vlx-lang) is position:fixed, and style.css
   parks it at 68px on /app/ so it clears the header. But the first things on
   /app/ are now full-width notices ABOVE the header (the consent reminder, the
   plan card), and at 375px the pill sat on the reminder's button and the
   card's close button. Lift the pill into its own lane at the very top and
   reserve that lane with padding, so nothing it could cover starts there.
   14px offset + ~32px pill + 8px air. Same selector as style.css, later file. */
@media (max-width: 640px) {
  body.app-body #vlx-lang { top: max(14px, env(safe-area-inset-top)); }
  .app-body { padding-top: calc(max(14px, env(safe-area-inset-top)) + 40px); }
}

/* Offline / service-notice banner (status-banner.js). */
.vlx-status-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:13.5px;line-height:1.4;color:#fff;background:#1d2b44;border-bottom:1px solid rgba(255,255,255,.12)}
.vlx-status-banner.is-notice{background:#16406e}
.vlx-status-banner.is-maintenance{background:#5a3b0b}
.vlx-status-banner[hidden]{display:none}
.vlx-status-text{flex:1;min-width:0}
.vlx-status-btn{flex:0 0 auto;font:inherit;font-weight:700;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:4px 12px;cursor:pointer}
.vlx-status-btn:focus-visible{outline:2px solid #4DA9FF;outline-offset:2px}

/* One-time "What's new" sheet (whats-new.js). */
.vlx-whatsnew{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(3,8,20,.62)}
.vlx-whatsnew-card{width:100%;max-width:520px;max-height:85vh;overflow:auto;background:#0f1a2e;color:#eef3fb;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px 22px}
.vlx-whatsnew-card h2{margin:0;font-size:20px}
.vlx-whatsnew-lead{margin:4px 0 12px;opacity:.75;font-size:14px}
.vlx-whatsnew-card ul{margin:0 0 16px;padding-left:20px;display:grid;gap:8px;font-size:14.5px;line-height:1.45}
.vlx-whatsnew-btn{font:inherit;font-weight:700;color:#fff;background:#2f7de1;border:0;border-radius:10px;padding:9px 18px;cursor:pointer;float:right}
.vlx-whatsnew-btn:focus-visible{outline:2px solid #4DA9FF;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.vlx-whatsnew-card{animation:vlxWnIn .18s ease-out}}
@keyframes vlxWnIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
/* ── Notification centre: bell + drawer (notification-centre.js) ──
   No new hex: every colour is the existing ice / alert palette as rgba. */
.app-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline-start: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
}
.app-bell[hidden] { display: none !important; }
.app-bell:hover { background: rgba(255, 255, 255, 0.08); }
.app-bell:focus-visible { outline: 2px solid rgba(127, 207, 230, 1); outline-offset: 2px; }
.app-bell-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 1);
  color: rgba(11, 20, 38, 1);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.app-bell-badge[hidden] { display: none !important; }
.app-nc {
  position: fixed;
  top: 68px;
  inset-inline-end: 16px;
  z-index: 60;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 92px);
  overflow-y: auto;
  padding: 14px 16px 18px;
  border-radius: 16px;
  background: rgba(14, 25, 46, 0.98);
  border: 1px solid rgba(127, 207, 230, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.app-nc[hidden] { display: none !important; }
.app-nc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.app-nc-title { flex: 1; margin: 0; font-size: 16px; font-weight: 700; }
.app-nc-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: inherit; cursor: pointer;
}
.app-nc-section { margin-top: 12px; }
.app-nc-section .app-nudge-kind { display: block; margin-bottom: 8px; }
.app-nc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.app-nc-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-inline-start: 3px solid rgba(96, 165, 250, 0.7);
  touch-action: pan-y;
  transition: transform 160ms ease;
}
.app-nc-item[data-severity="high"], .app-nc-item[data-severity="critical"] { border-inline-start-color: rgba(248, 113, 113, 0.9); }
.app-nc-item[data-severity="warn"], .app-nc-item[data-severity="warning"] { border-inline-start-color: rgba(245, 176, 102, 0.9); }
.app-nc-item.is-unread { background: rgba(127, 207, 230, 0.07); }
.app-nc-item.is-unread .app-nc-item-title::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px;
  border-radius: 999px; background: rgba(127, 207, 230, 1); vertical-align: middle;
}
.app-nc-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.app-nc-item-title { font-size: 14px; }
.app-nc-item-main .app-nudge-cta { align-self: flex-start; }
.app-nc-dismiss {
  flex: none; font: inherit; font-size: 11px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: inherit; opacity: 0.75; cursor: pointer;
}
.app-nc-dismiss:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.app-nc-empty { padding: 18px 4px 6px; text-align: center; }
.app-nudge-smart {
  background: linear-gradient(135deg, rgba(127, 207, 230, 0.08), rgba(61, 123, 217, 0.05));
  border-color: rgba(127, 207, 230, 0.2);
}
.app-nudge-why { margin-top: 6px; font-size: 12px; }
.app-nudge-why summary { cursor: pointer; opacity: 0.75; }
.app-nudge-why summary:focus-visible { outline: 2px solid rgba(127, 207, 230, 1); outline-offset: 2px; }
@media (max-width: 560px) {
  .app-nc { inset-inline: 8px; width: auto; top: 60px; }
}
@media (prefers-reduced-motion: reduce) { .app-nc-item { transition: none; } }

/* Ask Vilkax */
.ask-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ask-form textarea { flex: 1 1 260px; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--vx-line-strong, rgba(255,255,255,.18)); background: transparent; color: inherit; font: inherit; resize: vertical; }
.ask-answer { margin-top: 10px; line-height: 1.5; white-space: pre-wrap; }
.ask-answer .ask-meta { font-size: 12px; opacity: .75; margin-top: 6px; }