/* _content/Intertraff.Vmm.Web/Components/Pages/Admin.razor.rz.scp.css */
/* Joined-date filter bar */
.admin-filter[b-q9anqewnz0] { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.6rem; }
.admin-filter-label[b-q9anqewnz0] {
    font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); margin-right: .5rem;
}
.admin-filter-btn[b-q9anqewnz0] {
    font-size: .85rem; font-weight: 500; color: var(--ink-500);
    padding: .45rem .9rem; border-radius: var(--r-pill);
    border: 1px solid var(--line-2); background: #fff;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.admin-filter-btn:hover[b-q9anqewnz0] { color: var(--blue-700); border-color: var(--blue-300); }
.admin-filter-btn.active[b-q9anqewnz0] { color: #fff; background: var(--blue-600); border-color: transparent; }

.admin-stats[b-q9anqewnz0] { margin-bottom: 1.4rem; }
.admin-stats .stat[b-q9anqewnz0] { text-align: center; }
.admin-count[b-q9anqewnz0] { color: var(--ink-500); font-size: .92rem; margin: 0 0 1.4rem; }
.admin-count strong[b-q9anqewnz0] { color: var(--ink-900); }
.admin-table[b-q9anqewnz0] { overflow-x: auto; }
.admin-table table[b-q9anqewnz0] { min-width: 880px; }
.admin-key[b-q9anqewnz0] { color: var(--ink-500); }
/* _content/Intertraff.Vmm.Web/Components/Pages/Contact.razor.rz.scp.css */
/* ---------------- Contact layout ---------------- */
.contact-grid[b-t590dpiswn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

@media (max-width: 940px) {
    .contact-grid[b-t590dpiswn] { grid-template-columns: 1fr; gap: 2.6rem; }
}

.contact-intro h1[b-t590dpiswn] { margin-top: 1rem; }
.contact-intro .lead[b-t590dpiswn] { margin-bottom: 2rem; }

/* ---------------- Contact details ---------------- */
.contact-details[b-t590dpiswn] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin-bottom: 2rem;
}

.contact-line[b-t590dpiswn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    color: var(--ink-900);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t-fast);
}

.contact-line:hover[b-t590dpiswn] {
    border-color: var(--blue-300);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    color: var(--ink-900);
}

.contact-ico[b-t590dpiswn] {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--grad-accent-soft);
    color: var(--blue-600);
}

.contact-ico[b-t590dpiswn]  svg { width: 20px; height: 20px; }

.contact-line-label[b-t590dpiswn] {
    display: block;
    font-size: .78rem;
    color: var(--ink-500);
    margin-bottom: .1rem;
}

.contact-line-val[b-t590dpiswn] {
    display: block;
    font-weight: 600;
    color: var(--ink-900);
}

/* ---------------- Reasons ---------------- */
.contact-reasons[b-t590dpiswn] { margin-bottom: 1.8rem; }

.contact-reasons-head[b-t590dpiswn] {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.contact-assure[b-t590dpiswn] {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    font-size: .9rem;
}

/* ---------------- Final CTA ---------------- */
.contact-cta-lead[b-t590dpiswn] { max-width: 580px; margin-bottom: 1.8rem; }
.contact-cta-actions[b-t590dpiswn] { justify-content: center; }

/* AURORA LIGHT — deep-royal finale band + inverted button (matches Home/Support). */
.final-cta[b-t590dpiswn] {
    background:
        radial-gradient(700px 420px at 18% -30%, rgba(45,212,191,.18), transparent 60%),
        radial-gradient(760px 460px at 92% 130%, rgba(91,108,255,.30), transparent 60%),
        linear-gradient(165deg, #0b1b6e 0%, #142b9e 55%, #1e50ff 100%);
    color: #dfe9ff;
}
.final-cta h2[b-t590dpiswn] { color: #fff; }
.final-cta .lead[b-t590dpiswn] { color: #e6edff; }
.final-cta .btn-primary[b-t590dpiswn] { background: #fff; color: var(--blue-700); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.final-cta .btn-primary:hover[b-t590dpiswn] { box-shadow: 0 24px 56px rgba(0,0,0,.34); color: var(--blue-700); }
/* _content/Intertraff.Vmm.Web/Components/Pages/Coverage.razor.rz.scp.css */
/* Supported-countries page — area cards with country chips (Aurora Light). */
.cov-shell[b-e4pvpbjc1a] { display: flex; flex-direction: column; gap: 1.1rem; }

.cov-area[b-e4pvpbjc1a] { padding: 1.4rem clamp(1.1rem, 3vw, 1.6rem); }
.cov-area-head[b-e4pvpbjc1a] {
    display: flex; align-items: center; gap: .7rem;
    margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line);
}
.cov-area-head h2[b-e4pvpbjc1a] { margin: 0; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-900); }
.cov-count[b-e4pvpbjc1a] {
    font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
    color: var(--blue-700); background: rgba(30, 107, 255, .08);
    border: 1px solid rgba(30, 107, 255, .16); border-radius: var(--r-pill); padding: .12rem .55rem;
}

.cov-list[b-e4pvpbjc1a] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cov-chip[b-e4pvpbjc1a] {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .88rem; color: var(--ink-700);
    background: var(--paper); border: 1px solid var(--line-2);
    border-radius: var(--r-pill); padding: .34rem .72rem .34rem .5rem;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.cov-chip:hover[b-e4pvpbjc1a] { border-color: var(--blue-300); background: #fff; }
.cov-flag[b-e4pvpbjc1a] {
    width: 20px; height: 14px; object-fit: cover; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(13, 27, 62, .08); flex: none;
}

/* Not-listed call to action → support */
.cov-cta[b-e4pvpbjc1a] {
    text-align: center; margin-top: 1.4rem;
    padding: clamp(2rem, 5vw, 3.2rem) 1.5rem;
    background: var(--paper-aurora); border: 1px solid var(--line); border-radius: 20px;
    box-shadow: var(--shadow-brand);
}
.cov-cta h2[b-e4pvpbjc1a] { margin: 0 0 .5rem; color: var(--ink-brand); font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
.cov-cta p[b-e4pvpbjc1a] { margin: 0 auto 1.4rem; max-width: 470px; color: var(--ink-500); }
/* _content/Intertraff.Vmm.Web/Components/Pages/Dashboard.razor.rz.scp.css */
/* ===================================================================
   Dashboard — Aurora Light (premium, overflow-safe)
   =================================================================== */

/* ---------- Hero ---------- */
.dash-head[b-ctm4i6b7kd] {
    position: relative;
    overflow: hidden;
    background:
        var(--aurora-mesh),
        linear-gradient(180deg, var(--paper-aurora) 0%, var(--paper-mist) 100%);
    border-bottom: 1px solid var(--line);
}
.dash-head .eyebrow[b-ctm4i6b7kd] { color: var(--blue-700); }   /* blue-700 clears AA on the light hero (blue-600 was ~4.3:1) */
.dash-head h1[b-ctm4i6b7kd] { margin-top: .5rem; color: var(--ink-brand); }
/* gradient name — background-IMAGE (not the shorthand) so background-clip:text survives.
   overflow-wrap guards against one pathological long token clipping in the hero. */
.dash-name[b-ctm4i6b7kd] {
    background-image: var(--grad-brand-text);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    overflow-wrap: anywhere; word-break: break-word;
}
.dash-head .lead[b-ctm4i6b7kd] { color: var(--ink-700); max-width: 62ch; }

.dash-meta[b-ctm4i6b7kd] { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.3rem; }
.dash-meta-item[b-ctm4i6b7kd] { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--ink-500); }
.dash-meta-ic[b-ctm4i6b7kd] { display: inline-flex; color: var(--brand-teal); }
.dash-meta-ic[b-ctm4i6b7kd]  svg { width: 16px; height: 16px; }
.dash-meta-sep[b-ctm4i6b7kd] { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }

/* ---------- Grid (overflow-safe) ----------
   minmax(0,1fr) + min-width:0 let wide code blocks scroll INSIDE their column
   instead of stretching the whole page sideways (the old bug). */
.dash-grid[b-ctm4i6b7kd] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.6rem; align-items: start; }
.dash-grid > *[b-ctm4i6b7kd] { min-width: 0; }
@media (max-width: 900px) { .dash-grid[b-ctm4i6b7kd] { grid-template-columns: minmax(0, 1fr); } }

.dash-main[b-ctm4i6b7kd] { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.dash-side[b-ctm4i6b7kd] { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }

.dash-setup[b-ctm4i6b7kd] { grid-column: 1 / -1; max-width: 640px; }

/* ---------- Cards ---------- */
.dash-card[b-ctm4i6b7kd], .dash-usage[b-ctm4i6b7kd], .dash-links[b-ctm4i6b7kd] {
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-brand);
}
/* coloured accent rail across the top of each card */
.dash-card[b-ctm4i6b7kd]::before, .dash-usage[b-ctm4i6b7kd]::before, .dash-links[b-ctm4i6b7kd]::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.dash-card--key[b-ctm4i6b7kd]::before   { background: linear-gradient(90deg, var(--brand-royal), var(--brand-indigo)); }
.dash-card--quick[b-ctm4i6b7kd]::before { background: linear-gradient(90deg, var(--brand-indigo), var(--brand-teal)); }
.dash-card--usage[b-ctm4i6b7kd]::before { background: linear-gradient(90deg, var(--brand-teal), var(--brand-royal)); }
.dash-card--next[b-ctm4i6b7kd]::before  { background: linear-gradient(90deg, var(--brand-violet), var(--brand-indigo)); }
.dash-setup[b-ctm4i6b7kd]::before       { background: linear-gradient(90deg, var(--brand-royal), var(--brand-teal)); }

/* card header: icon chip + title, optional badge on the right */
.dash-card-head[b-ctm4i6b7kd] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.dash-card-title[b-ctm4i6b7kd] { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.dash-card-title h2[b-ctm4i6b7kd] { margin: 0; min-width: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.dash-card-ic[b-ctm4i6b7kd] {
    flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600);
}
.dash-card-ic[b-ctm4i6b7kd]  svg { width: 20px; height: 20px; }
/* per-card icon-chip hue tie-in */
.dash-card--key   .dash-card-ic[b-ctm4i6b7kd] { color: var(--brand-royal); }
.dash-card--quick .dash-card-ic[b-ctm4i6b7kd] { color: var(--brand-indigo); }
.dash-card--usage .dash-card-ic[b-ctm4i6b7kd] { color: var(--brand-teal); }
.dash-card--next  .dash-card-ic[b-ctm4i6b7kd] { color: var(--brand-violet); }

/* regenerate row */
.dash-regen[b-ctm4i6b7kd] { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }
.dash-regen .field-hint[b-ctm4i6b7kd] { margin: 0; }

/* ---------- Usage ---------- */
.usage-num[b-ctm4i6b7kd] { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.usage-used[b-ctm4i6b7kd] { background-image: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.usage-track[b-ctm4i6b7kd] {
    height: 10px; border-radius: 999px; background: var(--paper-2);
    border: 1px solid var(--line); overflow: hidden; margin: .9rem 0 .5rem;
}
.usage-fill[b-ctm4i6b7kd] {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-royal), var(--brand-teal));
    transition: width .6s var(--ease);
}
/* sliver only when there is genuine usage — a truly-zero account shows an empty bar */
.usage-fill.has-usage[b-ctm4i6b7kd] { min-width: 4px; }
/* at/over the monthly allowance → amber fill */
.usage-fill.is-over[b-ctm4i6b7kd] { background: linear-gradient(90deg, #b45309, #f59e0b); }

.usage-limits[b-ctm4i6b7kd] { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.usage-limits li[b-ctm4i6b7kd] {
    display: flex; flex-direction: column; gap: .25rem; min-width: 0;
    padding: .75rem .6rem; border-radius: var(--r-md);
    background: var(--paper); border: 1px solid var(--line);
}
.ul-num[b-ctm4i6b7kd] { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink-brand); line-height: 1; }
.ul-lbl[b-ctm4i6b7kd] { font-size: .72rem; color: var(--ink-500); white-space: nowrap; }

/* hint text clears AA on the light cards (the --ink-400 default was only 3.49:1 on white) */
.dash-card .field-hint[b-ctm4i6b7kd], .dash-usage .field-hint[b-ctm4i6b7kd] { color: var(--ink-500); }
.dash-usage .field-hint.usage-over[b-ctm4i6b7kd] { color: #b45309; font-weight: 600; }

/* ---------- Next steps ---------- */
.dash-links-list[b-ctm4i6b7kd] { display: flex; flex-direction: column; gap: .45rem; }
.dash-links a[b-ctm4i6b7kd] {
    display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem;
    border-radius: var(--r-md); border: 1px solid transparent;
    color: var(--ink-700); font-weight: 500; font-size: .94rem;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dash-link-ic[b-ctm4i6b7kd] {
    flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600);
    transition: background var(--t-fast), color var(--t-fast);
}
.dash-link-ic[b-ctm4i6b7kd]  svg { width: 17px; height: 17px; }
.dash-link-tx[b-ctm4i6b7kd] { min-width: 0; }
.dash-link-arrow[b-ctm4i6b7kd] {
    margin-left: auto; display: inline-flex; color: var(--ink-400);
    opacity: 0; transform: translateX(-4px);
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.dash-link-arrow[b-ctm4i6b7kd]  svg { width: 16px; height: 16px; }
.dash-links a:hover[b-ctm4i6b7kd] { background: var(--paper); border-color: var(--line); color: var(--blue-700); }
.dash-links a:hover .dash-link-ic[b-ctm4i6b7kd] { background: var(--brand-royal); color: #fff; }
.dash-links a:hover .dash-link-arrow[b-ctm4i6b7kd] { opacity: 1; transform: translateX(0); }

/* keyboard focus gets the same affordances mouse hover does (links + regenerate button) */
.dash-links a:focus-visible[b-ctm4i6b7kd] {
    outline: none; border-color: var(--blue-300);
    box-shadow: 0 0 0 3px rgba(30, 107, 255, .18); color: var(--blue-700);
}
.dash-links a:focus-visible .dash-link-ic[b-ctm4i6b7kd] { background: var(--brand-royal); color: #fff; }
.dash-links a:focus-visible .dash-link-arrow[b-ctm4i6b7kd] { opacity: 1; transform: translateX(0); }
.dash-regen .btn:focus-visible[b-ctm4i6b7kd] { outline: none; box-shadow: 0 0 0 3px rgba(30, 107, 255, .22); }

/* ---------- Content section wash ---------- */
.dash-body[b-ctm4i6b7kd] {
    background:
        radial-gradient(760px 440px at 92% -6%, rgba(45,212,191,.05), transparent 60%),
        radial-gradient(720px 480px at 4% 102%, rgba(30,80,255,.05), transparent 60%),
        var(--paper-aurora);
}

/* ---------- Responsive ---------- */
@media (max-width: 420px) {
    .usage-limits[b-ctm4i6b7kd] { grid-template-columns: 1fr; }
    .usage-limits li[b-ctm4i6b7kd] { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

/* match the codebase's motion policy — disable the one-time usage-bar fill sweep */
@media (prefers-reduced-motion: reduce) {
    .usage-fill[b-ctm4i6b7kd] { transition: none; }
}
/* _content/Intertraff.Vmm.Web/Components/Pages/Docs.razor.rz.scp.css */
/* ---------------- Hero ---------------- */
.docs-hero[b-gtkz4ra9j6] { padding-block: clamp(56px, 8vw, 96px); overflow: hidden; }
.docs-hero-copy[b-gtkz4ra9j6] { max-width: 720px; }
.docs-hero-copy h1[b-gtkz4ra9j6] { margin-top: .9rem; }
.docs-hero-meta[b-gtkz4ra9j6] { margin-top: 1.6rem; }

/* ---------------- Two-column layout ---------------- */
.docs-section[b-gtkz4ra9j6] { padding-top: clamp(40px, 5vw, 64px); }
.docs-layout[b-gtkz4ra9j6] {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}

/* ---------------- Sticky TOC (wide screens only) ---------------- */
.docs-toc-inner[b-gtkz4ra9j6] {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
    display: flex;
    flex-direction: column;
}
.docs-toc-title[b-gtkz4ra9j6] {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: .9rem;
}
.docs-toc-nav[b-gtkz4ra9j6] { display: flex; flex-direction: column; gap: .1rem; }
.docs-toc-nav a[b-gtkz4ra9j6] {
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-500);
    padding: .42rem .8rem;
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.docs-toc-nav a:hover[b-gtkz4ra9j6] {
    color: var(--blue-700);
    background: var(--paper-2);
    border-left-color: var(--blue-300);
}
.docs-toc-div[b-gtkz4ra9j6] { margin: 1.2rem 0; }

/* ---------------- Content column ---------------- */
.docs-content[b-gtkz4ra9j6] { min-width: 0; }
.docs-block[b-gtkz4ra9j6] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.docs-block + .docs-block[b-gtkz4ra9j6] { margin-top: clamp(48px, 6vw, 76px); }
.docs-block > .eyebrow[b-gtkz4ra9j6] { display: inline-flex; margin-bottom: .5rem; }
.docs-block h2[b-gtkz4ra9j6] { margin-bottom: .7rem; }
.docs-block > p[b-gtkz4ra9j6] { color: var(--ink-700); max-width: 68ch; }
.docs-block .lead[b-gtkz4ra9j6] { max-width: 68ch; }
.docs-block .codeblock[b-gtkz4ra9j6] { margin-top: 1.6rem; }
.docs-block .table-card[b-gtkz4ra9j6] { margin-top: 1.4rem; }

/* ---------------- Quickstart steps ---------------- */
.docs-steps[b-gtkz4ra9j6] {
    margin: 1.8rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
@media (max-width: 720px) { .docs-steps[b-gtkz4ra9j6] { grid-template-columns: 1fr; gap: 1.1rem; } }
.docs-step[b-gtkz4ra9j6] { display: flex; gap: .9rem; align-items: flex-start; }
.docs-step-n[b-gtkz4ra9j6] {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    color: #fff; background: var(--grad-accent); box-shadow: var(--shadow-glow);
}
.docs-step h3[b-gtkz4ra9j6] { font-size: 1.02rem; margin-bottom: .15rem; }
.docs-step p[b-gtkz4ra9j6] { font-size: .9rem; margin: 0; }

/* ---------------- Callouts ---------------- */
.callout[b-gtkz4ra9j6] {
    display: flex; gap: 1rem; align-items: flex-start;
    margin-top: 1.6rem; padding: 1.1rem 1.3rem;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--paper);
}
.callout p[b-gtkz4ra9j6] { margin: .3rem 0 0; font-size: .92rem; }
.callout strong[b-gtkz4ra9j6] { color: var(--ink-900); }
.callout-warn[b-gtkz4ra9j6] {
    border-color: rgba(217, 119, 6, .28);
    background: linear-gradient(135deg, rgba(217, 119, 6, .07), rgba(217, 119, 6, .02));
}
.callout-icon[b-gtkz4ra9j6] {
    flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: rgba(217, 119, 6, .12); color: var(--warning);
}
.callout-icon[b-gtkz4ra9j6]  svg { width: 20px; height: 20px; }

/* ---------------- Endpoint row ---------------- */
.endpoint-row[b-gtkz4ra9j6] {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    margin-top: 1.5rem; padding: .85rem 1rem;
    background: var(--navy-900); border: 1px solid var(--navy-700);
    border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.endpoint-method[b-gtkz4ra9j6] { flex: none; }
.endpoint-url[b-gtkz4ra9j6] {
    font-family: var(--font-mono); font-size: .9rem;
    color: #d7e3f5; word-break: break-all;
}
.docs-endpoint-notes[b-gtkz4ra9j6] { margin-top: 1.4rem; }
.docs-endpoint-notes li[b-gtkz4ra9j6] { font-size: .94rem; }

/* ---------------- Parameter / field tables ---------------- */
.docs-content .table td[b-gtkz4ra9j6] { vertical-align: top; }
.param-name[b-gtkz4ra9j6] {
    font-family: var(--font-mono); font-size: .85rem;
    color: var(--blue-700); white-space: nowrap;
}
.param-type[b-gtkz4ra9j6] {
    font-family: var(--font-mono); font-size: .78rem;
    color: var(--ink-500);
    background: var(--paper-2); border: 1px solid var(--line-2);
    padding: .12rem .45rem; border-radius: 6px; white-space: nowrap;
}
.docs-content .table td code[b-gtkz4ra9j6] {
    font-size: .85rem; color: var(--ink-700);
    background: var(--paper-2); padding: .05rem .35rem; border-radius: 5px;
}
.req-yes[b-gtkz4ra9j6] { display: inline-flex; align-items: center; gap: .35rem; color: var(--success); font-weight: 600; }
.req-yes[b-gtkz4ra9j6]  svg { width: 17px; height: 17px; }
.req-label[b-gtkz4ra9j6] { font-size: .78rem; }
.req-no[b-gtkz4ra9j6] { color: var(--ink-400); }

/* ---------------- Regions ---------------- */
.regions-row[b-gtkz4ra9j6] { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.region-pill[b-gtkz4ra9j6] { padding: .45rem .9rem; }
.region-pill code[b-gtkz4ra9j6] {
    font-family: var(--font-mono); font-weight: 700; color: var(--blue-700);
}
.region-label[b-gtkz4ra9j6] { color: var(--ink-700); font-weight: 500; }
.region-hint[b-gtkz4ra9j6] { margin-top: 1rem; font-size: .9rem; }
.region-hint code[b-gtkz4ra9j6] {
    font-family: var(--font-mono); font-size: .84rem; color: var(--blue-700);
    background: var(--paper-2); padding: .08rem .4rem; border-radius: 5px;
}

/* ---------------- Language sample switcher ---------------- */
.docs-samples-lead[b-gtkz4ra9j6] { margin-top: 1.8rem; font-size: .92rem; }
.lang-switch[b-gtkz4ra9j6] { margin-top: .6rem; }
.lang-tabs[b-gtkz4ra9j6] { margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.lang-panel[b-gtkz4ra9j6] { display: none; }
.lang-panel.is-active[b-gtkz4ra9j6] { display: block; }
.lang-switch .codeblock[b-gtkz4ra9j6] { margin-top: 0; }

/* ---------------- Upload samples ---------------- */
.upload-samples[b-gtkz4ra9j6] { margin-top: 1.6rem; }

/* ---------------- Help footer ---------------- */
.docs-help[b-gtkz4ra9j6] {
    display: flex; align-items: center; gap: .85rem;
    margin-top: clamp(48px, 6vw, 72px); padding: 1.1rem 1.3rem;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--paper); font-size: .95rem; color: var(--ink-700);
}
.docs-help-icon[b-gtkz4ra9j6] {
    flex: none; width: 38px; height: 38px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600);
}
.docs-help-icon[b-gtkz4ra9j6]  svg { width: 20px; height: 20px; }

/* ---------------- Compact auth / region line under the endpoint ---------------- */
.docs-auth-line[b-gtkz4ra9j6] { margin-top: 1rem; font-size: .92rem; max-width: 68ch; }
.docs-auth-line code[b-gtkz4ra9j6] {
    font-family: var(--font-mono); font-size: .82rem; color: var(--blue-700);
    background: var(--paper-2); padding: .08rem .4rem; border-radius: 5px;
}

/* ---------------- Personalized API-key note ---------------- */
.docs-key-note[b-gtkz4ra9j6] {
    display: flex; align-items: flex-start; gap: .8rem;
    margin-top: 1.5rem; padding: .9rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--paper); font-size: .92rem; color: var(--ink-700); max-width: 68ch;
}
.docs-key-note a[b-gtkz4ra9j6] { font-weight: 600; }
.docs-key-ic[b-gtkz4ra9j6] {
    flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600); margin-top: .05rem;
}
.docs-key-ic[b-gtkz4ra9j6]  svg { width: 16px; height: 16px; }
.docs-key-note.is-live[b-gtkz4ra9j6] {
    border-color: rgba(22, 163, 74, .3);
    background: linear-gradient(135deg, rgba(22, 163, 74, .08), rgba(22, 163, 74, .02));
}
.docs-key-note.is-live .docs-key-ic[b-gtkz4ra9j6] { background: rgba(22, 163, 74, .14); color: var(--success); }
.docs-key-note.is-live strong[b-gtkz4ra9j6] { color: var(--success); }

/* ---------------- Collapsible reference accordions ---------------- */
.docs-details[b-gtkz4ra9j6] {
    margin-top: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: #fff; overflow: hidden;
    scroll-margin-top: calc(var(--nav-h) + 24px);   /* deep-links land below the sticky nav */
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.docs-details + .docs-details[b-gtkz4ra9j6] { margin-top: .7rem; }
.docs-details[open][b-gtkz4ra9j6] { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
.docs-details > summary[b-gtkz4ra9j6] {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.2rem; font-weight: 600; color: var(--ink-900);
}
.docs-details > summary[b-gtkz4ra9j6]::-webkit-details-marker { display: none; }
.docs-details > summary:hover[b-gtkz4ra9j6] { color: var(--blue-700); }
.docs-details > summary:focus-visible[b-gtkz4ra9j6] { outline: none; box-shadow: inset 0 0 0 2px var(--blue-300); }
.docs-details-t[b-gtkz4ra9j6] { flex: 1; min-width: 0; }
.docs-details-c[b-gtkz4ra9j6] { font-weight: 400; font-size: .82rem; color: var(--ink-500); white-space: nowrap; }
.docs-details > summary[b-gtkz4ra9j6]::after {
    content: "+"; flex: none; font-size: 1.4rem; line-height: 1; font-weight: 300; color: var(--blue-600);
}
.docs-details[open] > summary[b-gtkz4ra9j6]::after { content: "\2013"; }
.docs-details-body[b-gtkz4ra9j6] { padding: 0 1.2rem 1.2rem; }
.docs-details-body .table-card[b-gtkz4ra9j6] { margin-top: 0; }
.docs-details-body .regions-row[b-gtkz4ra9j6] { margin-top: 0; }
.docs-details-body .docs-endpoint-notes[b-gtkz4ra9j6] { margin-top: 0; }
.docs-details-body .lang-switch[b-gtkz4ra9j6] { margin-top: 1.2rem; }
.docs-details-intro[b-gtkz4ra9j6] { margin: 0 0 1.1rem; font-size: .92rem; max-width: 68ch; }

/* ---------------- Responsive: TOC stacks above content ---------------- */
@media (max-width: 920px) {
    .docs-layout[b-gtkz4ra9j6] { grid-template-columns: 1fr; gap: 2rem; }
    .docs-toc[b-gtkz4ra9j6] {
        border-bottom: 1px solid var(--line);
        padding-bottom: 1.4rem;
    }
    .docs-toc-inner[b-gtkz4ra9j6] { position: static; }
    .docs-toc-nav[b-gtkz4ra9j6] {
        flex-direction: row; flex-wrap: wrap; gap: .4rem;
    }
    .docs-toc-nav a[b-gtkz4ra9j6] { border-left: 0; border: 1px solid var(--line); }
    .docs-toc-div[b-gtkz4ra9j6], .docs-toc .btn[b-gtkz4ra9j6] { display: none; }
}
/* _content/Intertraff.Vmm.Web/Components/Pages/Home.razor.rz.scp.css */
/* ---------------- Hero ---------------- */
.hero[b-yyla22wkvj] { padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px); overflow: hidden; }
.hero-grid[b-yyla22wkvj] { display: grid; grid-template-columns: 1fr 1.12fr; gap: 3rem; align-items: center; }
.hero-copy h1[b-yyla22wkvj] { margin-top: 1rem; }

/* "Milliseconds" gradient highlight + underline flourish */
.hl[b-yyla22wkvj] {
    position: relative; white-space: nowrap;
    background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hl[b-yyla22wkvj]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: .14em;
    border-radius: 999px; background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
    opacity: .85;
}

/* Feature checklist */
.hero-checks[b-yyla22wkvj] {
    list-style: none; padding: 0; margin: 1.6rem 0 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.6rem;
}
.hero-checks li[b-yyla22wkvj] { display: flex; align-items: center; gap: .6rem; font-size: .96rem; color: #d7e3f5; }
.hero-checks[b-yyla22wkvj]  svg { width: 18px; height: 18px; flex: none; color: var(--cyan-400); }

.hero-cta[b-yyla22wkvj] { margin: 1.9rem 0 1.6rem; }

/* Inline stat strip */
.hero-stats[b-yyla22wkvj] { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; padding-top: .4rem; }
.hstat[b-yyla22wkvj] { display: flex; align-items: center; gap: .65rem; }
.hstat-ic[b-yyla22wkvj] {
    width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
    background: rgba(56, 189, 248, .12); color: var(--cyan-300); border: 1px solid rgba(56, 189, 248, .22);
}
.hstat-ic[b-yyla22wkvj]  svg { width: 19px; height: 19px; }
.hstat-num[b-yyla22wkvj] { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; line-height: 1.1; }
.hstat-label[b-yyla22wkvj] { font-size: .8rem; color: #9fb2cd; }

@media (max-width: 1040px) {
    .hero-grid[b-yyla22wkvj] { grid-template-columns: 1fr; gap: 2.6rem; }
    .hero-visual[b-yyla22wkvj] { width: 100%; }
}

/* ---------------- Demo card ---------------- */
.demo-card[b-yyla22wkvj] {
    background: rgba(8, 18, 34, .68); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px; box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); overflow: hidden;
}
.demo-body[b-yyla22wkvj] { padding: 1.2rem; }
.demo-panel[b-yyla22wkvj] { display: none; }
.demo-panel.is-active[b-yyla22wkvj] { display: block; }

.demo-image-grid[b-yyla22wkvj] { display: block; }

/* Uploader — full width now that the preview panel is gone */
.demo-drop[b-yyla22wkvj] {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
    padding: 2.8rem 1.5rem; border: 1.5px dashed rgba(255, 255, 255, .2); border-radius: 14px;
    background: rgba(255, 255, 255, .02); transition: border-color var(--t-fast), background var(--t-fast);
}
.demo-drop:hover[b-yyla22wkvj] { border-color: var(--cyan-400); background: rgba(56, 189, 248, .05); }
.demo-drop-ic[b-yyla22wkvj] { color: var(--cyan-300); }
.demo-drop-ic[b-yyla22wkvj]  svg { width: 46px; height: 46px; }
.demo-drop strong[b-yyla22wkvj] { color: #e7eefc; font-size: .92rem; font-weight: 600; }
.demo-or[b-yyla22wkvj] { font-size: .8rem; color: #6f86a8; }
.demo-upload-btn[b-yyla22wkvj] { margin-top: .1rem; }
.demo-upload-btn[b-yyla22wkvj]  svg { width: 14px; height: 14px; }
.demo-formats[b-yyla22wkvj] { font-size: .72rem; color: #7d8aa0; margin-top: .15rem; }

.demo-samples[b-yyla22wkvj] { margin-top: 1rem; }
.demo-samples-h[b-yyla22wkvj] { display: block; font-size: .86rem; font-weight: 600; color: #e7eefc; margin-bottom: .6rem; }
.demo-thumbs[b-yyla22wkvj] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.demo-thumb[b-yyla22wkvj] { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; min-width: 0; text-decoration: none; }
.demo-thumb-img[b-yyla22wkvj] {
    border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10;
    background: radial-gradient(120% 120% at 30% 20%, #16314f, #0a1426 75%);
    border: 1.5px solid rgba(255, 255, 255, .12); transition: border-color var(--t-fast), transform var(--t-fast);
}
.demo-thumb-img img[b-yyla22wkvj] { width: 100%; height: 100%; object-fit: cover; }
.demo-thumb:hover .demo-thumb-img[b-yyla22wkvj] { border-color: var(--cyan-400); transform: translateY(-1px); }
.demo-thumb-label[b-yyla22wkvj] { font-size: .68rem; color: #9fb2cd; text-align: center; line-height: 1.2; }
.demo-thumb.active .demo-thumb-label[b-yyla22wkvj] { color: #e7eefc; }

/* Preview column */
.demo-preview[b-yyla22wkvj] {
    position: relative; aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden;
    background: radial-gradient(130% 130% at 28% 18%, #134076, #0a1426 70%);
    display: grid; place-items: center;
}
.demo-preview-glyph[b-yyla22wkvj] { color: rgba(255, 255, 255, .14); }
.demo-preview-glyph[b-yyla22wkvj]  svg { width: 92px; height: 92px; }

.demo-bbox-vehicle[b-yyla22wkvj] {
    position: absolute; inset: 18% 12% 16% 11%; border: 2px solid rgba(56, 189, 248, .9);
    border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}
.demo-bbox-tag[b-yyla22wkvj] {
    position: absolute; top: -.95rem; left: -2px; font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
    background: var(--cyan-400); color: #06243f; padding: .1rem .35rem; border-radius: 4px; white-space: nowrap;
}
.demo-plate-badge[b-yyla22wkvj] {
    position: absolute; top: .5rem; left: .5rem; z-index: 2; font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    background: var(--blue-600); color: #fff; padding: .18rem .45rem; border-radius: 5px;
}
.demo-plate-box[b-yyla22wkvj] {
    position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); z-index: 2;
    min-width: 34%; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: .8rem;
    color: #06243f; background: rgba(255, 255, 255, .92); border: 2px solid #fff; border-radius: 5px;
    padding: .12rem .35rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.demo-scan[b-yyla22wkvj] {
    position: absolute; left: 0; right: 0; height: 2px; top: 0; z-index: 1;
    background: linear-gradient(90deg, transparent, var(--cyan-300), transparent);
    box-shadow: 0 0 14px var(--cyan-300); animation: demo-scan-b-yyla22wkvj 2.8s var(--ease) infinite;
}
@keyframes demo-scan-b-yyla22wkvj { 0% { top: 6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 92%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo-scan[b-yyla22wkvj] { display: none; } }

/* Result rows (shared) */
.demo-results[b-yyla22wkvj] { margin-top: .85rem; }
.dr[b-yyla22wkvj] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dr:last-child[b-yyla22wkvj] { border-bottom: 0; }
.dr-k[b-yyla22wkvj] { display: inline-flex; align-items: center; gap: .5rem; color: #9fb2cd; font-size: .82rem; }
.dr-k[b-yyla22wkvj]  svg { width: 15px; height: 15px; }
.dr-v[b-yyla22wkvj] { font-weight: 600; color: #fff; font-size: .86rem; display: inline-flex; align-items: center; gap: .4rem; }
.dr-good[b-yyla22wkvj] { color: #3ddc84; }
.mono[b-yyla22wkvj] { font-family: var(--font-mono); }
.flag[b-yyla22wkvj] { font-size: 1rem; }
.swatch[b-yyla22wkvj] { width: 11px; height: 11px; border-radius: 50%; background: #9aa3ad; border: 1px solid rgba(255,255,255,.4); display: inline-block; }

.demo-foot[b-yyla22wkvj] { display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; margin-top: .2rem; }

/* ---------------- Pricing ---------------- */
.pricing[b-yyla22wkvj] { background: radial-gradient(900px 420px at 50% -12%, rgba(30, 107, 255, .055), transparent 62%); }
.pricing .section-head[b-yyla22wkvj] { margin-bottom: 2.6rem; }

.pricing-grid[b-yyla22wkvj] {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
    max-width: 900px; margin-inline: auto; align-items: stretch;
}
@media (max-width: 720px) { .pricing-grid[b-yyla22wkvj] { grid-template-columns: 1fr; max-width: 440px; } }

.pricing-card[b-yyla22wkvj] {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 2rem 1.9rem; box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.pricing-card:not(.is-featured):hover[b-yyla22wkvj] {
    transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300);
}

/* featured: gradient border + blue glow + slight scale */
.pricing-card.is-featured[b-yyla22wkvj] {
    border: 1.5px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--grad-accent) border-box;
    box-shadow: 0 24px 60px rgba(30, 107, 255, .18), var(--shadow-md);
}
.pricing-card.is-featured:hover[b-yyla22wkvj] { box-shadow: 0 30px 70px rgba(30, 107, 255, .24), var(--shadow-md); }
@media (min-width: 721px) {
    .pricing-card.is-featured[b-yyla22wkvj] { transform: scale(1.035); }
    .pricing-card.is-featured:hover[b-yyla22wkvj] { transform: scale(1.035) translateY(-5px); }
}

.pricing-ribbon[b-yyla22wkvj] {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; white-space: nowrap;
    background: var(--grad-accent); padding: .35rem .95rem; border-radius: var(--r-pill); box-shadow: var(--shadow-glow);
}

.pricing-head[b-yyla22wkvj] { display: flex; align-items: center; gap: .85rem; }
.pricing-ic[b-yyla22wkvj] {
    flex: none; width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600);
}
.pricing-ic[b-yyla22wkvj]  svg { width: 23px; height: 23px; }
.pricing-name[b-yyla22wkvj] { font-size: 1.35rem; margin: 0; line-height: 1.15; }
.pricing-sub[b-yyla22wkvj] { font-size: .82rem; color: var(--ink-500); }

.pricing-price[b-yyla22wkvj] { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; margin: 1.4rem 0 .2rem; }
.pricing-amount[b-yyla22wkvj] {
    font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3rem); font-weight: 600;
    line-height: 1; letter-spacing: -.02em;
    background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pricing-period[b-yyla22wkvj] { font-size: .88rem; color: var(--ink-500); }
.pricing-tagline[b-yyla22wkvj] { margin: .75rem 0 0; font-size: .95rem; color: var(--ink-500); }

.pricing-features[b-yyla22wkvj] { margin: 1.4rem 0 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); flex: 1; }
.pricing-features li[b-yyla22wkvj] { font-size: .95rem; }

.pricing-cta[b-yyla22wkvj] { margin-top: auto; }
.pricing-note[b-yyla22wkvj] { display: block; text-align: center; margin-top: .7rem; font-size: .8rem; color: var(--ink-400); }

.pricing-compare[b-yyla22wkvj] { margin-top: 2rem; }
.pricing-compare a[b-yyla22wkvj] { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--blue-600); }
.pricing-compare a:hover[b-yyla22wkvj] { color: var(--blue-700); }
.pricing-compare[b-yyla22wkvj]  svg { width: 16px; height: 16px; }

/* ---------------- CTAs ---------------- */
.testzone-cta h2[b-yyla22wkvj] { margin-bottom: .5rem; }
.testzone-cta .btn[b-yyla22wkvj] { margin-top: 1.7rem; }
.final-cta .lead[b-yyla22wkvj] { margin-bottom: 1.8rem; }

/* ---------------- Trusted For (use-case cards) ---------------- */
/* keep the subtitle on one line (shrinking to fit); wrap only on narrow phones */
.tf-lead[b-yyla22wkvj] { max-width: none; white-space: nowrap; font-size: clamp(.85rem, 1.9vw, 1.12rem); }
@media (max-width: 640px) { .tf-lead[b-yyla22wkvj] { white-space: normal; font-size: 1rem; } }

.tf-card[b-yyla22wkvj] { padding: 0; overflow: hidden; }
.tf-illu[b-yyla22wkvj] {
    aspect-ratio: 16 / 10; overflow: hidden;
    background: radial-gradient(120% 120% at 72% 12%, #eef4ff, #d8e6fb);
    border-bottom: 1px solid var(--line);
}
.tf-illu img[b-yyla22wkvj] { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.tf-card:hover .tf-illu img[b-yyla22wkvj] { transform: scale(1.05); }
.tf-text[b-yyla22wkvj] { padding: 1.25rem 1.5rem 1.5rem; }
.tf-text h3[b-yyla22wkvj] { font-size: 1.15rem; margin-bottom: .35rem; }
.tf-text p[b-yyla22wkvj] { color: var(--ink-500); margin: 0; font-size: .95rem; }

/* =====================================================================
   Built for Your Region
   ===================================================================== */
.region[b-yyla22wkvj] {
    position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px);
    background:
        radial-gradient(900px 520px at 85% -8%, rgba(56, 189, 248, .12), transparent 55%),
        radial-gradient(820px 600px at -5% 105%, rgba(30, 107, 255, .16), transparent 55%),
        linear-gradient(180deg, #070f1e 0%, #0a1426 100%);
    color: #e7eefc;
}
.region h2[b-yyla22wkvj] { color: #fff; }
.region-head[b-yyla22wkvj] { max-width: 760px; margin: 0 auto 2.8rem; text-align: center; }
.region-head .eyebrow[b-yyla22wkvj] { color: var(--cyan-300); justify-content: center; }
.region-head .lead[b-yyla22wkvj] { color: #c4d2e8; }

/* ---- infinite auto-scrolling marquee ---- */
.region-marquee[b-yyla22wkvj] {
    position: relative; overflow: hidden; padding-block: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.region-track[b-yyla22wkvj] { display: flex; width: max-content; will-change: transform; animation: region-marquee-b-yyla22wkvj 48s linear infinite; }
.region-marquee:hover .region-track[b-yyla22wkvj] { animation-play-state: paused; }
.region-track .rc[b-yyla22wkvj] { flex: none; width: 280px; margin-right: 1.1rem; }
@keyframes region-marquee-b-yyla22wkvj { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 520px) { .region-track .rc[b-yyla22wkvj] { width: 244px; } }
@media (prefers-reduced-motion: reduce) {
    .region-track[b-yyla22wkvj] { animation: none; }
    .region-marquee[b-yyla22wkvj] { overflow-x: auto; }
}

/* ---- flags strip (scrolls to the right) ---- */
.flag-marquee[b-yyla22wkvj] {
    position: relative; overflow: hidden; margin-top: clamp(1.4rem, 3vw, 2.2rem); padding-block: 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.flag-track[b-yyla22wkvj] { display: flex; width: max-content; will-change: transform; animation: flag-marquee-b-yyla22wkvj 64s linear infinite; }
.flag-marquee:hover .flag-track[b-yyla22wkvj] { animation-play-state: paused; }
/* trailing margin (not gap) keeps the duplicated set seamless at the loop seam */
.flag-chip[b-yyla22wkvj] {
    flex: none; width: 44px; height: 30px; margin-right: 1.05rem; border-radius: 5px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
    opacity: .9; transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.flag-chip img[b-yyla22wkvj] { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-chip:hover[b-yyla22wkvj] { transform: translateY(-3px) scale(1.1); opacity: 1; }
/* rightward: start shifted left by one copy, slide back to 0 */
@keyframes flag-marquee-b-yyla22wkvj { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    .flag-track[b-yyla22wkvj] { animation: none; }
    .flag-marquee[b-yyla22wkvj] { overflow-x: auto; }
}

.rc[b-yyla22wkvj] {
    position: relative; display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px; padding: 1rem; overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rc[b-yyla22wkvj]::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(120% 80% at 50% -10%, rgba(56, 189, 248, .16), transparent 60%);
    transition: opacity .3s var(--ease);
}
.rc:hover[b-yyla22wkvj] {
    transform: translateY(-5px) scale(1.015); border-color: rgba(56, 189, 248, .4);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .42), 0 0 0 1px rgba(56, 189, 248, .15);
}
.rc:hover[b-yyla22wkvj]::before { opacity: 1; }

.rc-head[b-yyla22wkvj] { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.rc-flag[b-yyla22wkvj] {
    width: 28px; height: 19px; flex: none; object-fit: cover; border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.rc-name[b-yyla22wkvj] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rc-native[b-yyla22wkvj] { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-lang[b-yyla22wkvj] { font-size: .74rem; color: #9fb2cd; }
.rc-supported[b-yyla22wkvj] {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; white-space: nowrap;
    font-size: .66rem; font-weight: 600; padding: .25rem .5rem; border-radius: var(--r-pill);
    color: #9fb2cd; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rc-supported[b-yyla22wkvj]  svg { width: 12px; height: 12px; }
.rc:hover .rc-supported[b-yyla22wkvj] { color: #06243f; background: #3ddc84; border-color: #3ddc84; box-shadow: 0 0 16px rgba(61, 220, 132, .5); }

/* ---- stage (vehicle + plate) ---- */
.rc-stage[b-yyla22wkvj] {
    position: relative; aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden;
    background: radial-gradient(130% 130% at 30% 18%, #16345c, #0a1426 72%); display: grid; place-items: center;
}
.rc-photo[b-yyla22wkvj] { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rc-glyph[b-yyla22wkvj] { color: rgba(255, 255, 255, .12); }
.rc-glyph[b-yyla22wkvj]  svg { width: 64px; height: 64px; }
.rc-bbox[b-yyla22wkvj] {
    position: absolute; left: 8%; right: 8%; top: 50%; bottom: 14%; opacity: 0;
    border: 1.5px solid var(--cyan-300); border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
    transition: opacity .3s var(--ease);
}
.rc-bbox-tag[b-yyla22wkvj] {
    position: absolute; top: -.85rem; left: -1.5px; font-family: var(--font-mono); font-size: .55rem; font-weight: 700;
    background: var(--cyan-400); color: #06243f; padding: .06rem .28rem; border-radius: 3px; white-space: nowrap;
}
.rc-scan[b-yyla22wkvj] {
    position: absolute; left: 0; right: 0; height: 2px; top: 0; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--cyan-300), transparent); box-shadow: 0 0 12px var(--cyan-300);
}
.rc:hover .rc-bbox[b-yyla22wkvj] { opacity: 1; }
.rc:hover .rc-scan[b-yyla22wkvj] { animation: rc-scan-b-yyla22wkvj 1.8s var(--ease) infinite; }
@keyframes rc-scan-b-yyla22wkvj { 0% { top: 6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 92%; opacity: 0; } }

/* ---- license plates ---- */
.plate[b-yyla22wkvj] {
    position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); z-index: 2;
    display: inline-flex; align-items: center; background: #fff; border-radius: 5px; padding: .26rem .5rem;
    border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 5px 16px rgba(0, 0, 0, .5);
    font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.plate-text[b-yyla22wkvj] { font-size: .92rem; color: #0b1b2b; }

/* real plate image (overrides the white CSS plate styling, keeps positioning) */
.plate-img[b-yyla22wkvj] {
    background: none; border: 0; padding: 0; width: 54%; height: auto;
    border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}

.plate--eu[b-yyla22wkvj] { overflow: hidden; }
.plate-strip[b-yyla22wkvj] {
    align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: #003399; color: #fff; padding: .1rem .3rem; margin: -.26rem .4rem -.26rem -.5rem;
}
.plate-stars[b-yyla22wkvj] { width: 11px; height: 11px; background: radial-gradient(circle, #ffcc00 1px, transparent 1.5px) 0 0 / 4px 4px; }
.plate-code[b-yyla22wkvj] { font-size: .56rem; font-weight: 700; line-height: 1; }

.plate--us[b-yyla22wkvj] { background: linear-gradient(180deg, #fff, #f1f5fb); }
.plate--us .plate-text[b-yyla22wkvj] { color: #14387a; }

.plate--cn[b-yyla22wkvj] { background: #173a8c; border-color: #0e2a6b; }
.plate--cn .plate-text[b-yyla22wkvj] { color: #fff; }

.plate--ru .plate-ru[b-yyla22wkvj] {
    display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem; padding-left: .35rem;
    font-size: .5rem; font-weight: 700; color: #0b1b2b; border-left: 1px solid rgba(0, 0, 0, .25);
}
.plate-ru-flag[b-yyla22wkvj] {
    width: 13px; height: 9px; border-radius: 1px; border: 1px solid rgba(0, 0, 0, .15);
    background: linear-gradient(180deg, #fff 0 33%, #0039a6 33% 66%, #d52b1e 66% 100%);
}

.plate--me[b-yyla22wkvj] { background: linear-gradient(180deg, #fff, #eef3ef); }
.plate--me .plate-text[b-yyla22wkvj] { font-size: 1rem; }

/* UK — yellow rear plate, no band */
.plate--uk[b-yyla22wkvj] { background: #f5d211; border-color: rgba(0, 0, 0, .35); }
.plate--uk .plate-text[b-yyla22wkvj] { color: #14181f; font-size: .95rem; }

/* Ukraine — left blue band with the national flag + UA */
.plate--ua[b-yyla22wkvj] { overflow: hidden; }
.plate-strip--ua[b-yyla22wkvj] { background: #0057b7; }
.plate-ua-flag[b-yyla22wkvj] {
    width: 14px; height: 9px; border-radius: 1px; border: 1px solid rgba(255, 255, 255, .35);
    background: linear-gradient(180deg, #0057b7 0 50%, #ffd700 50% 100%);
}

/* ---- OCR readout ---- */
.rc-ocr[b-yyla22wkvj] { margin-top: .85rem; display: flex; flex-direction: column; gap: .42rem; }
.rc-ocr-row[b-yyla22wkvj] { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.rc-ocr-k[b-yyla22wkvj] { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: #9fb2cd; flex: none; }
.rc-ocr-k[b-yyla22wkvj]  svg { width: 13px; height: 13px; color: var(--cyan-300); }
.rc-ocr-v[b-yyla22wkvj] { font-size: .8rem; font-weight: 600; color: #fff; min-width: 0; text-align: right; line-height: 1.25; }
.rc-conf[b-yyla22wkvj] { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; }
.rc-conf-track[b-yyla22wkvj] { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rc-conf-fill[b-yyla22wkvj] { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #1e6bff, #3ddc84); }
.rc-conf-num[b-yyla22wkvj] { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: #3ddc84; flex: none; }

.rc[dir="rtl"] .rc-ocr-v[b-yyla22wkvj], .rc[dir="rtl"] .plate-text[b-yyla22wkvj] { direction: rtl; }

/* ---- world band ---- */
.region-world[b-yyla22wkvj] { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.world-viz[b-yyla22wkvj] { display: flex; justify-content: center; }
.globe[b-yyla22wkvj] { width: min(600px, 100%); height: auto; }
/* Connection lines. Opacity kept low because the full mesh (every region linked to
   every other) is 15 lines — faint keeps it a delicate network, not a tangle. */
.globe .arc[b-yyla22wkvj] { fill: none; stroke: rgba(125, 211, 252, .18); stroke-width: 1; stroke-dasharray: 3 5; animation: arc-flow-b-yyla22wkvj 7s linear infinite; }
.globe .pin-glow[b-yyla22wkvj] { transform-box: fill-box; transform-origin: 50% 50%; animation: pin-pulse-b-yyla22wkvj 3s ease-in-out infinite; }

/* Continent labels — light text with a dark halo (paint-order) so they stay legible
   over the sphere and the connection mesh. */
.globe-label[b-yyla22wkvj] {
    fill: #cfe0f5; font-family: var(--font-display); font-size: 12px; font-weight: 600;
    paint-order: stroke; stroke: rgba(7, 15, 30, .9); stroke-width: 3px; stroke-linejoin: round;
}
@keyframes pin-pulse-b-yyla22wkvj { 0%, 100% { opacity: .4; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes arc-flow-b-yyla22wkvj { to { stroke-dashoffset: -120; } }

.region-stats[b-yyla22wkvj] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 780px; margin: -1.2rem auto 0; }
@media (max-width: 560px) { .region-stats[b-yyla22wkvj] { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; } }
.rstat-num[b-yyla22wkvj] {
    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1;
    background: linear-gradient(90deg, #7dd3fc, #4f95ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rstat-label[b-yyla22wkvj] { font-size: .84rem; color: #9fb2cd; margin-top: .2rem; }

/* Rotating multilingual tagline — all phrases stacked in one grid cell, each
   fades/slides in turn. Cell auto-sizes to the tallest phrase, so no layout jump. */
.region-tagline[b-yyla22wkvj] {
    display: grid; place-items: center; margin: 0 auto 1.8rem; max-width: 620px;
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(1.05rem, 2vw, 1.35rem); color: #e7eefc;
}
.region-tagline span[b-yyla22wkvj] {
    grid-area: 1 / 1; text-align: center; padding: 0 .5rem; line-height: 1.45;
    opacity: 0; animation: lang-rotate-b-yyla22wkvj 21s ease-in-out infinite;
}
@keyframes lang-rotate-b-yyla22wkvj {
    0%    { opacity: 0; transform: translateY(12px); }
    2.5%  { opacity: 1; transform: translateY(0); }
    12%   { opacity: 1; transform: translateY(0); }
    15%   { opacity: 0; transform: translateY(-12px); }
    100%  { opacity: 0; transform: translateY(-12px); }
}
/* The brand promise inside each rotating line — pulled forward in brand cyan so the
   message (and the company name) reads first. Stays italic with the rest of the line. */
.region-tagline-em[b-yyla22wkvj] {
    color: var(--cyan-300);
    font-weight: 600;
    text-shadow: 0 0 18px rgba(125, 211, 252, .35);
}

@media (prefers-reduced-motion: reduce) {
    .region-tagline span[b-yyla22wkvj] { animation: none; }
    .region-tagline span:first-child[b-yyla22wkvj] { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .globe .pin-glow[b-yyla22wkvj], .globe .arc[b-yyla22wkvj] { animation: none; }
    .rc:hover[b-yyla22wkvj] { transform: none; }
    .rc:hover .rc-scan[b-yyla22wkvj] { animation: none; opacity: 0; }
}

/* =====================================================================
   AURORA LIGHT — home redesign overrides (appended last so same-specificity
   overrides of the rules above win by source order). Tokens live in theme.css.
   Light, logo-true, with color as punctuation: aurora-light hero → one dark
   Region showcase → aurora-light Trusted For → royal→teal CTA band → aurora
   Pricing → paper FAQ → deep-royal CTA finale.
   ===================================================================== */

/* ============ 1 — HERO: dark → light aurora ============ */
.hero[b-yyla22wkvj] {
    background:
        var(--aurora-mesh),
        linear-gradient(180deg, var(--paper-aurora) 0%, var(--paper-mist) 100%);
    color: var(--ink-700);
}
.hero h1[b-yyla22wkvj] { color: var(--ink-brand); }

/* Headline highlight darkened for AA on near-white; keep the underline flourish.
   Use background-IMAGE (not the shorthand) so the base rule's background-clip:text
   survives — otherwise the gradient fills the box and the text turns invisible. */
.hl[b-yyla22wkvj] { background-image: var(--grad-brand-text); }
.hl[b-yyla22wkvj]::after { background: linear-gradient(90deg, var(--brand-royal), var(--blue-500)); opacity: .9; }

/* Re-assert LIGHT variants that theme.css forces dark off .bg-hero */
.hero .lead[b-yyla22wkvj]    { color: var(--ink-700); }
.hero .pill[b-yyla22wkvj]    { background: var(--grad-accent-soft); color: var(--blue-700); border: 1px solid rgba(30,107,255,.18); }
.hero .btn-ghost[b-yyla22wkvj] { color: var(--ink-900); border-color: var(--line-2); }
.hero .btn-ghost:hover[b-yyla22wkvj] { background: var(--paper); color: var(--ink-900); border-color: var(--blue-300); }

.hero-checks li[b-yyla22wkvj] { color: var(--ink-700); }
.hero-checks[b-yyla22wkvj]  svg { color: var(--blue-600); }   /* cyan ticks would vanish on white */

.hstat-ic[b-yyla22wkvj] { background: var(--grad-accent-soft); color: var(--blue-600); border: 1px solid rgba(30,107,255,.18); }
.hstat-num[b-yyla22wkvj]   { color: var(--ink-brand); }
.hstat-label[b-yyla22wkvj] { color: var(--ink-500); }

/* ---- 1b. DEMO CARD: dark glass → clean elevated white card ---- */
.demo-card[b-yyla22wkvj] {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-brand);
    backdrop-filter: none;
}
.demo-drop[b-yyla22wkvj] { border: 1.5px dashed rgba(30,107,255,.28); background: var(--paper); }
.demo-drop:hover[b-yyla22wkvj] { border-color: var(--blue-500); background: rgba(30,107,255,.05); }
.demo-drop-ic[b-yyla22wkvj]     { color: var(--blue-500); }
.demo-drop strong[b-yyla22wkvj] { color: var(--ink-900); }
.demo-or[b-yyla22wkvj]          { color: var(--ink-500); }
.demo-formats[b-yyla22wkvj]     { color: var(--ink-500); }
.demo-samples-h[b-yyla22wkvj]   { color: var(--ink-900); }
.demo-thumb-img[b-yyla22wkvj]   { background: linear-gradient(135deg, #eef4ff, #dde9fb); border: 1.5px solid var(--line); }
.demo-thumb:hover .demo-thumb-img[b-yyla22wkvj] { border-color: var(--blue-400); }
.demo-thumb-label[b-yyla22wkvj] { color: var(--ink-500); }
.demo-thumb.active .demo-thumb-label[b-yyla22wkvj] { color: var(--ink-900); }

/* ============ 2 — REGION: the ONE dark showcase (kept dark, tied in) ============ */
.region[b-yyla22wkvj] {
    background:
        radial-gradient(900px 520px at 85% -8%, rgba(56,189,248,.12), transparent 55%),
        radial-gradient(820px 600px at -5% 105%, rgba(30,107,255,.16), transparent 55%),
        radial-gradient(700px 520px at 50% 120%, rgba(91,108,255,.10), transparent 60%),
        linear-gradient(180deg, #070f1e 0%, #0a1426 100%);
    border-top: 1px solid rgba(125,211,252,.12);    /* luminous seam under the pale hero */
    border-bottom: 1px solid rgba(125,211,252,.10); /* mirror seam into Trusted For */
}
.rc-conf-fill[b-yyla22wkvj] { background: linear-gradient(90deg, var(--brand-royal), var(--brand-teal)); }

/* ============ 3 — TRUSTED FOR: aurora-white + per-column hues ============ */
.trusted[b-yyla22wkvj] {
    background:
        radial-gradient(820px 460px at 88% -6%, rgba(45,212,191,.06), transparent 60%),
        radial-gradient(760px 520px at 6% 100%, rgba(30,80,255,.06), transparent 60%),
        var(--paper-aurora);
}
/* Hues cycle per column (grid-3) so all cards are covered: col1 indigo, col2 teal, col3 violet */
.trusted .tf-card:nth-child(3n+1)[b-yyla22wkvj] { box-shadow: inset 0 3px 0 var(--brand-indigo), var(--shadow-sm); }
.trusted .tf-card:nth-child(3n+2)[b-yyla22wkvj] { box-shadow: inset 0 3px 0 var(--brand-teal),   var(--shadow-sm); }
.trusted .tf-card:nth-child(3n)[b-yyla22wkvj]   { box-shadow: inset 0 3px 0 var(--brand-violet), var(--shadow-sm); }
.trusted .tf-card:nth-child(3n+1) .tf-illu[b-yyla22wkvj] { background: radial-gradient(120% 120% at 72% 12%, #eef4ff, #e0e3ff); }
.trusted .tf-card:nth-child(3n+2) .tf-illu[b-yyla22wkvj] { background: radial-gradient(120% 120% at 72% 12%, #eaf8f5, #d4efe9); }
.trusted .tf-card:nth-child(3n)   .tf-illu[b-yyla22wkvj] { background: radial-gradient(120% 120% at 72% 12%, #f0ecff, #e0d8fb); }
.trusted .tf-card:nth-child(3n+1):hover[b-yyla22wkvj] { border-color: var(--brand-indigo); box-shadow: inset 0 3px 0 var(--brand-indigo), var(--shadow-md); }
.trusted .tf-card:nth-child(3n+2):hover[b-yyla22wkvj] { border-color: var(--brand-teal);   box-shadow: inset 0 3px 0 var(--brand-teal),   var(--shadow-md); }
.trusted .tf-card:nth-child(3n):hover[b-yyla22wkvj]   { border-color: var(--brand-violet); box-shadow: inset 0 3px 0 var(--brand-violet), var(--shadow-md); }
.trusted .tf-text h3[b-yyla22wkvj] { color: var(--ink-brand); }

/* ============ 4 — TEST ZONE: flat dark → bright royal→teal band ============ */
.testzone-cta[b-yyla22wkvj] {
    background:
        radial-gradient(900px 380px at 50% -20%, rgba(255,255,255,.14), transparent 60%),
        var(--grad-brand);
    color: #eaf1ff;
}
.testzone-cta h2[b-yyla22wkvj] { color: #fff; }
.testzone-cta .eyebrow[b-yyla22wkvj] { color: #fff; }
.testzone-cta .lead[b-yyla22wkvj]    { color: rgba(255,255,255,.88); }
.testzone-cta .btn-primary[b-yyla22wkvj] { background: #fff; color: var(--blue-700); box-shadow: 0 18px 40px rgba(13,27,62,.22); }
.testzone-cta .btn-primary:hover[b-yyla22wkvj] { box-shadow: 0 24px 52px rgba(13,27,62,.30); color: var(--blue-700); }

/* ============ 5 — PRICING: light aurora wash + violet featured tie-in ============ */
.pricing[b-yyla22wkvj] {
    background:
        radial-gradient(900px 420px at 50% -12%, rgba(30,80,255,.06), transparent 62%),
        radial-gradient(720px 460px at 88% 18%, rgba(91,108,255,.05), transparent 60%),
        var(--paper-aurora);
}
.pricing-card.is-featured[b-yyla22wkvj] {
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, var(--brand-royal), var(--brand-violet)) border-box;
    box-shadow: 0 24px 60px rgba(91,108,255,.18), var(--shadow-md);
}
.pricing-card.is-featured:hover[b-yyla22wkvj] { box-shadow: 0 30px 70px rgba(91,108,255,.24), var(--shadow-md); }
/* Price clip: end the gradient on an AA-safe blue (cyan tail failed large-text 3:1 on white).
   background-IMAGE only, so the base rule's background-clip:text survives. */
.pricing-amount[b-yyla22wkvj] { background-image: linear-gradient(135deg, var(--brand-royal) 0%, #1488c7 100%); }

/* ============ 6 — FAQ: unchanged paper 'rest beat' ============ */

/* ============ 7 — FINAL CTA: flat navy → deep royal band finale ============ */
.final-cta[b-yyla22wkvj] {
    background:
        radial-gradient(700px 420px at 18% -30%, rgba(45,212,191,.18), transparent 60%),
        radial-gradient(760px 460px at 92% 130%, rgba(91,108,255,.30), transparent 60%),
        linear-gradient(165deg, #0b1b6e 0%, #142b9e 55%, #1e50ff 100%);  /* deeper + steeper than Test Zone so the two CTA bands diverge */
    color: #dfe9ff;
}
.final-cta h2[b-yyla22wkvj] { color: #fff; }
.final-cta .lead[b-yyla22wkvj] { color: #e6edff; }
.final-cta .btn-primary[b-yyla22wkvj] { background: #fff; color: var(--blue-700); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.final-cta .btn-primary:hover[b-yyla22wkvj] { box-shadow: 0 24px 56px rgba(0,0,0,.34); color: var(--blue-700); }
/* _content/Intertraff.Vmm.Web/Components/Pages/Login.razor.rz.scp.css */
/* ===================================================================
   Login — premium split auth card (brand panel + sign-in form)
   =================================================================== */

.auth-section[b-cdscm1ugmv] {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--nav-h));
}

/* ---------- Shell ---------- */
.auth-shell[b-cdscm1ugmv] {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    max-width: 980px;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* ---------- Brand panel ---------- */
.auth-brand[b-cdscm1ugmv] {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    padding: clamp(2rem, 4vw, 3.2rem);
    position: relative;
}

.auth-brand-copy h2[b-cdscm1ugmv] {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    margin-bottom: .7rem;
}
.auth-brand-copy .pill[b-cdscm1ugmv] { margin-bottom: 1.1rem; }
.auth-brand-copy .lead[b-cdscm1ugmv] { margin: 0; }

.auth-brand-list[b-cdscm1ugmv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.auth-brand-list li[b-cdscm1ugmv] {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #c4d2e8;
    font-size: .95rem;
}
.auth-brand-ic[b-cdscm1ugmv] {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--cyan-300);
}
.auth-brand-ic[b-cdscm1ugmv]  svg { width: 18px; height: 18px; }

.auth-brand-foot[b-cdscm1ugmv] {
    margin: 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .02em;
}

/* ---------- Form panel ---------- */
.auth-form[b-cdscm1ugmv] {
    background: var(--white);
    padding: clamp(2rem, 4vw, 3.2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form-head[b-cdscm1ugmv] { margin-bottom: 1.8rem; }
.auth-form-head h1[b-cdscm1ugmv] {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    margin: .5rem 0 .35rem;
}
.auth-form-head .muted[b-cdscm1ugmv] { margin: 0; }

.auth-fields[b-cdscm1ugmv] { margin: 0; }

/* Input with leading icon */
.auth-input-wrap[b-cdscm1ugmv] { position: relative; }
.auth-input-ic[b-cdscm1ugmv] {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
    display: inline-flex;
}
.auth-input-ic[b-cdscm1ugmv]  svg { width: 18px; height: 18px; }
/* The input is rendered by <InputText>, so it doesn't carry this component's scoped
   attribute — pierce with ::deep so the icon-clearing left padding actually applies. */
.auth-input-wrap[b-cdscm1ugmv]  .auth-input { padding-left: 2.8rem; }

.auth-label-row[b-cdscm1ugmv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.auth-forgot[b-cdscm1ugmv] {
    font-size: .82rem;
    font-weight: 600;
}

/* Informational notice (backend not wired) */
.auth-notice[b-cdscm1ugmv] {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: var(--grad-accent-soft);
    border: 1px solid rgba(30, 107, 255, .2);
    border-radius: var(--r-md);
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}
.auth-notice-ic[b-cdscm1ugmv] {
    flex: none;
    color: var(--blue-600);
    display: inline-flex;
    margin-top: .1rem;
}
.auth-notice-ic[b-cdscm1ugmv]  svg { width: 20px; height: 20px; }
.auth-notice strong[b-cdscm1ugmv] {
    display: block;
    color: var(--ink-900);
    font-size: .94rem;
    line-height: 1.4;
}
.auth-notice .muted[b-cdscm1ugmv] {
    margin: .25rem 0 0;
    font-size: .86rem;
}

.auth-submit[b-cdscm1ugmv] { margin-top: .4rem; }

/* Divider */
.auth-divider[b-cdscm1ugmv] {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin: 1.6rem 0 1rem;
    color: var(--ink-400);
    font-size: .82rem;
}
.auth-divider[b-cdscm1ugmv]::before,
.auth-divider[b-cdscm1ugmv]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.auth-switch[b-cdscm1ugmv] { margin: 0; }
.auth-switch a[b-cdscm1ugmv] { font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .auth-shell[b-cdscm1ugmv] { grid-template-columns: 1fr; max-width: 480px; }
    .auth-brand[b-cdscm1ugmv] { display: none; }
    .auth-section[b-cdscm1ugmv] { min-height: 0; }
}

/* =====================================================================
   AURORA LIGHT — Login: keep the brand aside as a dark brand-gradient panel.
   The section is .bg-hero (now light aurora); the aside re-asserts a gradient
   + light text so its content stays readable (matches Register's aside).
   ===================================================================== */
.auth-brand[b-cdscm1ugmv] {
    background:
        radial-gradient(120% 120% at 12% 8%, rgba(45,212,191,.20), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(91,108,255,.30), transparent 55%),
        var(--grad-brand);
}
.auth-brand .pill[b-cdscm1ugmv] { background: rgba(255,255,255,.14); color: #eaf1ff; border-color: rgba(255,255,255,.28); }
.auth-brand-copy h2[b-cdscm1ugmv] { color: #fff; }
.auth-brand-copy .lead[b-cdscm1ugmv] { color: #dbe6ff; }
.auth-brand-ic[b-cdscm1ugmv] { color: #eaf1ff; }
.auth-brand-foot[b-cdscm1ugmv] { color: #c4d2e8; }
/* _content/Intertraff.Vmm.Web/Components/Pages/Pricing.razor.rz.scp.css */
/* ---------------- Header ---------------- */
/* The header is the section's only content, so the section-head's bottom margin
   is wasted space; drop it and trim the section's bottom padding so the title
   block doesn't float above a big gap before the plans. */
.pricing-header[b-oqumn32csk] { padding-bottom: clamp(1.75rem, 3.2vw, 3.25rem); }
.pricing-header .section-head[b-oqumn32csk] { margin-bottom: 0; }
.pricing-header .lead[b-oqumn32csk] { margin-bottom: 0; }

/* ---------------- Plans ---------------- */
.plans[b-oqumn32csk] { background: radial-gradient(900px 440px at 50% -12%, rgba(30, 107, 255, .06), transparent 62%); }
.plans-grid[b-oqumn32csk] { align-items: stretch; max-width: 920px; margin-inline: auto; }

.plan-card[b-oqumn32csk] {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 2.2rem 2rem; box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.plan-card:not(.is-featured):hover[b-oqumn32csk] { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }

/* featured: gradient border + glow + slight scale */
.plan-card.is-featured[b-oqumn32csk] {
    border: 1.5px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--grad-accent) border-box;
    box-shadow: 0 24px 60px rgba(30, 107, 255, .18), var(--shadow-md);
}
.plan-card.is-featured:hover[b-oqumn32csk] { box-shadow: 0 30px 70px rgba(30, 107, 255, .24), var(--shadow-md); }
@media (min-width: 721px) {
    .plan-card.is-featured[b-oqumn32csk] { transform: scale(1.03); }
    .plan-card.is-featured:hover[b-oqumn32csk] { transform: scale(1.03) translateY(-5px); }
}

.plan-ribbon[b-oqumn32csk] {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; white-space: nowrap;
    background: var(--grad-accent); padding: .35rem .95rem; border-radius: var(--r-pill); box-shadow: var(--shadow-glow);
}

.plan-head[b-oqumn32csk] { display: flex; align-items: center; gap: .85rem; }
.plan-ic[b-oqumn32csk] {
    flex: none; width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600);
}
.plan-ic[b-oqumn32csk]  svg { width: 24px; height: 24px; }
.plan-name[b-oqumn32csk] { font-size: 1.5rem; margin: 0; line-height: 1.1; }
.plan-sub[b-oqumn32csk] { font-size: .84rem; color: var(--ink-500); }

.plan-price[b-oqumn32csk] { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0 .2rem; }
.plan-amount[b-oqumn32csk] {
    font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.2rem); font-weight: 600;
    line-height: 1; letter-spacing: -.02em;
    background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-meta[b-oqumn32csk] { font-size: .9rem; color: var(--ink-500); }
.plan-tagline[b-oqumn32csk] { margin: .75rem 0 0; font-size: .98rem; color: var(--ink-500); }

.plan-features[b-oqumn32csk] { margin: 1.5rem 0 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line); flex: 1; }
.plan-cta[b-oqumn32csk] { margin-top: auto; }
.plan-note[b-oqumn32csk] { display: block; text-align: center; margin-top: .75rem; font-size: .82rem; color: var(--ink-400); }

/* ---------------- Reassurance strip ---------------- */
.reassure-row[b-oqumn32csk] { gap: 1rem; }
.reassure-item[b-oqumn32csk] {
    display: flex; align-items: center; gap: .8rem; font-weight: 600; color: var(--ink-700); font-size: .95rem;
    padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.reassure-ico[b-oqumn32csk] {
    flex: none; width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600);
}
.reassure-ico[b-oqumn32csk]  svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .reassure-row[b-oqumn32csk] { gap: .7rem; } }

/* AURORA LIGHT — deep-royal finale band + inverted button (matches Home/Support). */
.final-cta[b-oqumn32csk] {
    background:
        radial-gradient(700px 420px at 18% -30%, rgba(45,212,191,.18), transparent 60%),
        radial-gradient(760px 460px at 92% 130%, rgba(91,108,255,.30), transparent 60%),
        linear-gradient(165deg, #0b1b6e 0%, #142b9e 55%, #1e50ff 100%);
    color: #dfe9ff;
}
.final-cta h2[b-oqumn32csk] { color: #fff; }
.final-cta .lead[b-oqumn32csk] { color: #e6edff; }
.final-cta .btn-primary[b-oqumn32csk] { background: #fff; color: var(--blue-700); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.final-cta .btn-primary:hover[b-oqumn32csk] { box-shadow: 0 24px 56px rgba(0,0,0,.34); color: var(--blue-700); }
/* _content/Intertraff.Vmm.Web/Components/Pages/Register.razor.rz.scp.css */
/* ============================ Register / Auth ============================ */
.auth[b-z1tr3qxw09] { display: flex; align-items: center; min-height: calc(100vh - var(--nav-h)); }

.auth-card[b-z1tr3qxw09] {
    max-width: 880px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(8, 18, 34, .62);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* ---------- Left brand / benefits panel ---------- */
.auth-aside[b-z1tr3qxw09] {
    position: relative;
    padding: 2.4rem 2.2rem;
    color: #e7eefc;
    background:
        radial-gradient(120% 120% at 12% 8%, rgba(56, 189, 248, .18), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(30, 107, 255, .22), transparent 55%),
        rgba(6, 14, 29, .55);
    border-right: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-direction: column;
}

.auth-aside-title[b-z1tr3qxw09] { font-size: 1.55rem; color: #fff; margin-bottom: .6rem; }
.auth-aside-lead[b-z1tr3qxw09] { color: #b9c8e2; font-size: .96rem; line-height: 1.65; margin-bottom: 1.6rem; }

.auth-benefits[b-z1tr3qxw09] { margin-bottom: auto; }
.auth-benefits li[b-z1tr3qxw09] { color: #dbe6f8; font-size: .93rem; }
.auth-benefits li[b-z1tr3qxw09]::before {
    background: rgba(56, 189, 248, .15)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center/12px no-repeat;
}

.auth-aside-foot[b-z1tr3qxw09] {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
    margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .1);
}
.auth-aside-by[b-z1tr3qxw09] { font-size: .76rem; color: #8fa6c6; letter-spacing: .03em; }

/* ---------- Right active step ---------- */
.auth-main[b-z1tr3qxw09] {
    padding: 2.4rem 2.2rem;
    background: rgba(255, 255, 255, .015);
    display: flex;
    flex-direction: column;
}

/* Step indicator */
.auth-steps[b-z1tr3qxw09] {
    list-style: none; margin: 0 0 1.8rem; padding: 0;
    display: flex; align-items: center; gap: .35rem;
}
.auth-step[b-z1tr3qxw09] { display: inline-flex; align-items: center; gap: .5rem; }
.auth-step-dot[b-z1tr3qxw09] {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
    color: #9fb2cd; background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: all var(--t);
}
.auth-step-dot[b-z1tr3qxw09]  svg { width: 14px; height: 14px; }
.auth-step-label[b-z1tr3qxw09] { font-size: .82rem; color: #8fa6c6; font-weight: 500; }
.auth-step.active .auth-step-dot[b-z1tr3qxw09] {
    color: #fff; background: var(--grad-accent); border-color: transparent; box-shadow: var(--shadow-glow);
}
.auth-step.active .auth-step-label[b-z1tr3qxw09] { color: #fff; }
.auth-step.complete .auth-step-dot[b-z1tr3qxw09] { color: var(--cyan-300); background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .4); }
.auth-step.complete .auth-step-label[b-z1tr3qxw09] { color: #c4d2e8; }
.auth-step-bar[b-z1tr3qxw09] {
    flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); transition: background var(--t);
}
.auth-step-bar.done[b-z1tr3qxw09] { background: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); }

@media (max-width: 460px) {
    .auth-step-label[b-z1tr3qxw09] { display: none; }
}

/* Panels */
.auth-panel[b-z1tr3qxw09] { animation: fadeUp .4s var(--ease) both; }
.auth-title[b-z1tr3qxw09] { font-size: clamp(1.5rem, 4vw, 1.9rem); color: #fff; margin-bottom: .35rem; }
.auth-sub[b-z1tr3qxw09] { font-size: .94rem; color: #9fb2cd; margin-bottom: 1.6rem; max-width: 42ch; }
.auth-success .auth-sub[b-z1tr3qxw09] { margin-inline: auto; }
.auth-email[b-z1tr3qxw09] { color: #fff; }

/* Field theming on the dark card */
.auth-main[b-z1tr3qxw09]  .field label { color: #c4d2e8; }
.auth-main[b-z1tr3qxw09]  .input {
    background: rgba(8, 18, 34, .5);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}
.auth-main[b-z1tr3qxw09]  .input::placeholder { color: #6f86a6; }
.auth-main[b-z1tr3qxw09]  .input:focus {
    border-color: var(--cyan-400);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .18);
}
.auth-main[b-z1tr3qxw09]  .field-hint { color: #8093ad; }

.auth-submit[b-z1tr3qxw09] { margin-top: .6rem; }

/* Icons heading the OTP / success panels */
.auth-icon[b-z1tr3qxw09] {
    width: 54px; height: 54px; border-radius: var(--r-md);
    display: grid; place-items: center; margin-bottom: 1.1rem;
    background: var(--grad-accent-soft); color: var(--cyan-300);
    border: 1px solid rgba(56, 189, 248, .25);
}
.auth-icon[b-z1tr3qxw09]  svg { width: 26px; height: 26px; }
.auth-success .auth-icon[b-z1tr3qxw09] { margin-inline: auto; }
.auth-icon-success[b-z1tr3qxw09] { background: rgba(22, 163, 74, .14); border-color: rgba(22, 163, 74, .4); color: #4ade80; }

/* OTP input */
.auth-otp[b-z1tr3qxw09] {
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: .55em;
    padding-left: .55em;
    font-weight: 700;
}
.auth-otp[b-z1tr3qxw09]::placeholder { letter-spacing: .35em; color: #44597a; }

/* Resend + back */
.btn-link[b-z1tr3qxw09] {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 600; color: var(--cyan-300);
    transition: color var(--t-fast);
}
.btn-link:hover[b-z1tr3qxw09] { color: #fff; }
.auth-resend[b-z1tr3qxw09] { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.auth-resend-note[b-z1tr3qxw09] { font-size: .82rem; color: #8fa6c6; }
.auth-back[b-z1tr3qxw09] { display: inline-block; margin-top: 1.4rem; color: #9fb2cd; }

/* Success API key chip */
.auth-key[b-z1tr3qxw09] { margin: 1.6rem 0 .4rem; text-align: left; }
.auth-key-label[b-z1tr3qxw09] {
    display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
    color: #8fa6c6; margin-bottom: .5rem;
}
.auth-key-chip[b-z1tr3qxw09] {
    display: flex; align-items: center; gap: .7rem;
    background: var(--navy-900); border: 1px solid var(--navy-700);
    border-radius: var(--r-md); padding: .85rem 1rem; box-shadow: var(--shadow-md);
}
.auth-key-icon[b-z1tr3qxw09] { display: inline-flex; color: var(--cyan-300); flex: none; }
.auth-key-icon[b-z1tr3qxw09]  svg { width: 18px; height: 18px; }
.auth-key-chip code[b-z1tr3qxw09] { color: #d7e3f5; font-size: .92rem; word-break: break-all; }
.auth-key-hint[b-z1tr3qxw09] { margin-top: .6rem; }

/* Footer bits */
.auth-terms[b-z1tr3qxw09] { font-size: .82rem; margin-top: 1.3rem; color: #8093ad; }
.auth-terms a[b-z1tr3qxw09] { color: var(--cyan-300); }
.auth-alt[b-z1tr3qxw09] {
    font-size: .9rem; color: #9fb2cd; text-align: center;
    margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .08);
}
.auth-alt a[b-z1tr3qxw09] { color: var(--cyan-300); font-weight: 600; }

/* ---------- Responsive: collapse to single column ---------- */
@media (max-width: 760px) {
    .auth-card[b-z1tr3qxw09] { grid-template-columns: 1fr; max-width: 460px; }
    .auth-aside[b-z1tr3qxw09] {
        border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .1);
        padding: 2rem 1.8rem;
    }
    .auth-benefits[b-z1tr3qxw09] { margin-bottom: 1.4rem; }
    .auth-main[b-z1tr3qxw09] { padding: 2rem 1.8rem; }
}

/* =====================================================================
   AURORA LIGHT — Register re-skin (appended last so equal-specificity wins).
   Card → clean elevated white; LEFT aside → brand gradient panel (white text);
   RIGHT form → white surface (dark text, light inputs).
   ===================================================================== */
.auth-card[b-z1tr3qxw09] {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-brand);
    backdrop-filter: none;
}

/* LEFT aside — brand gradient panel */
.auth-aside[b-z1tr3qxw09] {
    background:
        radial-gradient(120% 120% at 12% 8%, rgba(45,212,191,.20), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(91,108,255,.30), transparent 55%),
        var(--grad-brand);
    border-right: 1px solid rgba(255,255,255,.12);
    color: #eaf1ff;
}
.auth-aside-title[b-z1tr3qxw09] { color: #fff; }
.auth-aside-lead[b-z1tr3qxw09] { color: #dbe6ff; }
.auth-benefits li[b-z1tr3qxw09] { color: #eaf1ff; }
.auth-benefits li[b-z1tr3qxw09]::before {
    background: rgba(255,255,255,.16)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center/12px no-repeat;
}
.auth-aside-foot[b-z1tr3qxw09] { border-top: 1px solid rgba(255,255,255,.16); }
.auth-aside-by[b-z1tr3qxw09] { color: #c4d2e8; }
.auth-aside .badge-success[b-z1tr3qxw09] { background: rgba(255,255,255,.16); color: #eafff2; }

/* RIGHT main — white form surface */
.auth-main[b-z1tr3qxw09] { background: #ffffff; }
.auth-title[b-z1tr3qxw09] { color: var(--ink-brand); }
.auth-sub[b-z1tr3qxw09] { color: var(--ink-500); }
.auth-email[b-z1tr3qxw09] { color: var(--ink-900); }

/* Step indicator on white */
.auth-step-dot[b-z1tr3qxw09] { color: var(--ink-500); background: var(--paper-2); border: 1px solid var(--line-2); }
.auth-step-label[b-z1tr3qxw09] { color: var(--ink-500); }
.auth-step.active .auth-step-dot[b-z1tr3qxw09] { color: #fff; background: var(--grad-accent); border-color: transparent; box-shadow: var(--shadow-glow); }
.auth-step.active .auth-step-label[b-z1tr3qxw09] { color: var(--ink-900); }
.auth-step.complete .auth-step-dot[b-z1tr3qxw09] { color: var(--blue-700); background: rgba(30,107,255,.12); border-color: rgba(30,107,255,.35); }
.auth-step.complete .auth-step-label[b-z1tr3qxw09] { color: var(--ink-700); }
.auth-step-bar[b-z1tr3qxw09] { background: var(--line-2); }
.auth-step-bar.done[b-z1tr3qxw09] { background: linear-gradient(90deg, var(--blue-500), var(--blue-300)); }

/* Fields → global light .input */
.auth-main[b-z1tr3qxw09]  .field label { color: var(--ink-700); }
.auth-main[b-z1tr3qxw09]  .input { background: var(--white); border-color: var(--line-2); color: var(--ink-900); }
.auth-main[b-z1tr3qxw09]  .input::placeholder { color: var(--ink-400); }
.auth-main[b-z1tr3qxw09]  .input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(30,107,255,.14); }
.auth-main[b-z1tr3qxw09]  .field-hint { color: var(--ink-400); }

.auth-icon[b-z1tr3qxw09] { background: var(--grad-accent-soft); color: var(--blue-600); border: 1px solid rgba(30,107,255,.20); }
.auth-otp[b-z1tr3qxw09]::placeholder { color: var(--line-2); }

.btn-link[b-z1tr3qxw09] { color: var(--blue-600); }
.btn-link:hover[b-z1tr3qxw09] { color: var(--blue-700); }
.auth-back[b-z1tr3qxw09] { color: var(--ink-500); }
.auth-terms[b-z1tr3qxw09] { color: var(--ink-500); }
.auth-terms a[b-z1tr3qxw09] { color: var(--blue-600); }
.auth-alt[b-z1tr3qxw09] { color: var(--ink-500); border-top: 1px solid var(--line); }
.auth-alt a[b-z1tr3qxw09] { color: var(--blue-600); }

/* API-key chip (verify step) stays a dark credential terminal — intentionally KEPT. */

@media (max-width: 760px) {
    .auth-aside[b-z1tr3qxw09] { border-right: none; border-bottom: 1px solid rgba(255,255,255,.16); }
}
/* _content/Intertraff.Vmm.Web/Components/Pages/Support.razor.rz.scp.css */
/* ---------------- Header ---------------- */
.support-header h1[b-qb37oyzsxl] { margin-top: 1rem; }
.support-header-cta[b-qb37oyzsxl] { margin-top: 1.9rem; }

/* ---------------- Need more help (minimal direct-help block) ---------------- */
.support-help[b-qb37oyzsxl] {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.support-help h2[b-qb37oyzsxl] { margin-bottom: .55rem; }
/* Keep the multilingual line on a single line (shrinks to fit); wraps only on
   very small phones so it never overflows. */
.support-help-langs[b-qb37oyzsxl] {
    font-size: clamp(.82rem, 1.9vw, 1.05rem); color: var(--ink-700); line-height: 1.6;
    margin: 0 auto .45rem; max-width: none; white-space: nowrap;
}
@media (max-width: 600px) {
    .support-help-langs[b-qb37oyzsxl] { white-space: normal; font-size: 1rem; }
    .support-help-desc[b-qb37oyzsxl] { white-space: normal; }
}
.support-help-desc[b-qb37oyzsxl] {
    color: var(--ink-500); margin: 0 auto 1.6rem; max-width: none; white-space: nowrap;
}
.support-help-actions[b-qb37oyzsxl] {
    display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
}

/* WhatsApp green primary action (recognisable affordance) */
.btn-whatsapp[b-qb37oyzsxl] {
    background: #25d366; color: #fff;
    box-shadow: 0 14px 30px rgba(37, 211, 102, .28);
}
.btn-whatsapp:hover[b-qb37oyzsxl] { background: #1eb858; color: #fff; }

/* Embedded contact form below the help block */
.support-form[b-qb37oyzsxl] {
    max-width: 560px;
    margin: clamp(1.8rem, 3.5vw, 2.6rem) auto 0;
    text-align: left;
}

/* ---------------- Final CTA ---------------- */
.final-cta .lead[b-qb37oyzsxl] { margin-bottom: 1.8rem; }

/* AURORA LIGHT — deep-royal finale band (Home's .final-cta is scoped & unreachable).
   The global .bg-dark already gives a brand band + white text; this deepens it and
   inverts the primary button so it doesn't camouflage on the gradient. */
.final-cta[b-qb37oyzsxl] {
    background:
        radial-gradient(700px 420px at 18% -30%, rgba(45,212,191,.18), transparent 60%),
        radial-gradient(760px 460px at 92% 130%, rgba(91,108,255,.30), transparent 60%),
        linear-gradient(165deg, #0b1b6e 0%, #142b9e 55%, #1e50ff 100%);
    color: #dfe9ff;
}
.final-cta h2[b-qb37oyzsxl] { color: #fff; }
.final-cta .lead[b-qb37oyzsxl] { color: #e6edff; }
.final-cta .btn-primary[b-qb37oyzsxl] { background: #fff; color: var(--blue-700); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.final-cta .btn-primary:hover[b-qb37oyzsxl] { box-shadow: 0 24px 56px rgba(0,0,0,.34); color: var(--blue-700); }
/* _content/Intertraff.Vmm.Web/Components/Pages/TestZone.razor.rz.scp.css */
/* =====================================================================
   Test Zone — premium single-screen console
   ===================================================================== */
.tz-page[b-7xcq0f92yu] {
    display: flex; flex-direction: column;
    min-height: calc(100vh - var(--nav-h));
    padding-block: clamp(.6rem, 1.8vh, 1.3rem);
    color: #e7eefc;
    background:
        radial-gradient(900px 480px at 85% -12%, rgba(56, 189, 248, .12), transparent 55%),
        radial-gradient(760px 520px at -5% 112%, rgba(30, 107, 255, .16), transparent 55%),
        linear-gradient(180deg, #070f1e 0%, #0a1426 100%);
}
.tz-shell[b-7xcq0f92yu] { display: flex; flex-direction: column; gap: clamp(.55rem, 1.6vh, 1rem); }

/* ---------- Intro ---------- */
.tz-intro[b-7xcq0f92yu] { text-align: center; }
.tz-intro .eyebrow[b-7xcq0f92yu] { color: var(--cyan-300); justify-content: center; }
.tz-intro h1[b-7xcq0f92yu] { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin: .3rem 0 .25rem; }
.tz-intro-sub[b-7xcq0f92yu] { color: #9fb2cd; font-size: .9rem; margin: 0 auto; max-width: 600px; }

/* ---------- Console (fills remaining height) ---------- */
.tz-console[b-7xcq0f92yu] {
    display: grid; grid-template-columns: 360px 1fr; gap: 1.2rem; align-items: start;
}
/* min-width:0 lets the 1fr column hold its share instead of being blown out by
   the wide JSON code block (which scrolls internally on overflow-x). */
.tz-controls[b-7xcq0f92yu], .tz-results[b-7xcq0f92yu] {
    min-width: 0;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px; backdrop-filter: blur(8px);
}
.tz-controls[b-7xcq0f92yu]::-webkit-scrollbar, .tz-results[b-7xcq0f92yu]::-webkit-scrollbar { width: 8px; }
.tz-controls[b-7xcq0f92yu]::-webkit-scrollbar-thumb, .tz-results[b-7xcq0f92yu]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 8px; }

.tz-controls[b-7xcq0f92yu] { padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; }

/* ---------- Samples ---------- */
.tz-samples-head[b-7xcq0f92yu] { margin-bottom: .6rem; }
.tz-samples-h[b-7xcq0f92yu] { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff; }
.tz-samples-sub[b-7xcq0f92yu] { display: block; font-size: .8rem; color: #9fb2cd; margin-top: .12rem; }
.tz-sample-grid[b-7xcq0f92yu] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.tz-sample[b-7xcq0f92yu] {
    display: flex; flex-direction: column; gap: .3rem; min-width: 0;
    padding: 0; background: none; border: 0; cursor: pointer; text-align: center; font: inherit;
}
.tz-sample-thumb[b-7xcq0f92yu] {
    display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10;
    border: 2px solid rgba(255, 255, 255, .12);
    background: radial-gradient(120% 120% at 30% 20%, #16314f, #0a1426 75%);
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.tz-sample-thumb img[b-7xcq0f92yu] { width: 100%; height: 100%; object-fit: cover; }
.tz-sample:hover:not(:disabled) .tz-sample-thumb[b-7xcq0f92yu] { border-color: var(--cyan-400); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.tz-sample.active .tz-sample-thumb[b-7xcq0f92yu] { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(56, 189, 248, .28); }
.tz-sample-label[b-7xcq0f92yu] { font-size: .74rem; font-weight: 500; color: #cfe0f5; line-height: 1.2; }
.tz-sample:disabled[b-7xcq0f92yu] { opacity: .5; cursor: default; }

/* ---------- Your own image ---------- */
.tz-own[b-7xcq0f92yu] { display: flex; flex-direction: column; gap: .7rem; }
.tz-modes[b-7xcq0f92yu] { display: flex; gap: .25rem; background: rgba(255, 255, 255, .06); padding: .25rem; border-radius: var(--r-pill); }
.tz-modes .tab[b-7xcq0f92yu] { flex: 1; text-align: center; color: #9fb2cd; border-color: transparent; }
.tz-modes .tab:hover[b-7xcq0f92yu] { color: #fff; background: rgba(255, 255, 255, .06); }
.tz-modes .tab.active[b-7xcq0f92yu] { color: #06243f; background: var(--cyan-300); border-color: transparent; }

.tz-drop[b-7xcq0f92yu] {
    position: relative; border: 1.5px dashed rgba(255, 255, 255, .2); border-radius: 12px;
    background: rgba(255, 255, 255, .02); transition: border-color var(--t-fast), background var(--t-fast);
}
.tz-drop:hover[b-7xcq0f92yu] { border-color: var(--cyan-400); background: rgba(56, 189, 248, .05); }
.tz-drop[b-7xcq0f92yu]  .tz-fileinput { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.tz-drop-inner[b-7xcq0f92yu] { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: .85rem 1rem; pointer-events: none; }
.tz-drop-icon[b-7xcq0f92yu] { color: var(--cyan-300); }
.tz-drop-icon[b-7xcq0f92yu]  svg { width: 28px; height: 28px; }
.tz-drop-inner strong[b-7xcq0f92yu] { font-size: .9rem; color: #e7eefc; }
.tz-drop-inner .muted[b-7xcq0f92yu] { font-size: .76rem; color: #7d8aa0; }

.tz-urlfield[b-7xcq0f92yu] { margin: 0; }
.tz-urlfield .input[b-7xcq0f92yu] { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: #fff; }
.tz-urlfield .input[b-7xcq0f92yu]::placeholder { color: #6f86a8; }
.tz-link[b-7xcq0f92yu] { background: none; border: 0; color: var(--cyan-300); font-size: .82rem; font-weight: 600; cursor: pointer; padding: .45rem 0 0; }
.tz-link:hover[b-7xcq0f92yu] { color: #fff; text-decoration: underline; }

/* ---------- Action row: region + detect, anchored to the bottom ---------- */
.tz-actions[b-7xcq0f92yu] { display: flex; align-items: flex-end; gap: .7rem; margin-top: auto; }
.tz-regionfield[b-7xcq0f92yu] { flex: 1; margin: 0; }
.tz-regionfield label[b-7xcq0f92yu] { display: block; font-size: .76rem; font-weight: 600; color: #9fb2cd; margin-bottom: .35rem; }
.tz-regionfield .select[b-7xcq0f92yu] { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: #fff; }
/* The closed control is white-on-dark, but the open dropdown popup is light —
   force the option rows to dark text on white so they stay readable. */
.tz-regionfield .select option[b-7xcq0f92yu] { color: var(--navy-850); background: #fff; }
.tz-detect[b-7xcq0f92yu] { flex: none; white-space: nowrap; }

.tz-error[b-7xcq0f92yu] { padding: .7rem .9rem; border-radius: 10px; background: rgba(220, 38, 38, .14); border: 1px solid rgba(220, 38, 38, .35); color: #fca5a5; font-size: .85rem; }

/* ---------- Results screen ---------- */
.tz-results[b-7xcq0f92yu] { padding: 1.1rem; display: flex; flex-direction: column; }
.tz-empty[b-7xcq0f92yu] {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: 46vh; padding: 2rem; border: 1.5px dashed rgba(255, 255, 255, .14); border-radius: 14px;
}
.tz-empty-icon[b-7xcq0f92yu] {
    width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .22); color: var(--cyan-300); margin-bottom: 1rem;
}
.tz-empty-icon[b-7xcq0f92yu]  svg { width: 28px; height: 28px; }
.tz-empty h3[b-7xcq0f92yu] { color: #fff; margin-bottom: .35rem; }
.tz-empty p[b-7xcq0f92yu] { color: #9fb2cd; max-width: 340px; margin: 0; }

/* Stage shrink-wraps the image (fit-content) and centers it, so the absolutely
   positioned 3D overlay always lines up exactly with the rendered pixels. The
   image is capped in height and never upscaled, so a tall/portrait photo no
   longer dominates the screen. */
.tz-stage[b-7xcq0f92yu] {
    position: relative; border-radius: 14px; overflow: hidden; background: #0a1426;
    box-shadow: var(--shadow-md); line-height: 0;
    width: fit-content; max-width: 100%; margin-inline: auto;
}
.tz-img[b-7xcq0f92yu] { display: block; width: auto; height: auto; max-width: 100%; max-height: min(52vh, 480px); }
.tz-overlay[b-7xcq0f92yu] { position: absolute; inset: 0; pointer-events: none; }

/* graceful fallback when the image can't be loaded (e.g. hot-link protection) */
.tz-stage .tz-imgfail[b-7xcq0f92yu] { display: none; }
.tz-stage.is-broken[b-7xcq0f92yu] { min-height: 200px; display: grid; place-items: center; line-height: 1.5; }
.tz-stage.is-broken .tz-img[b-7xcq0f92yu] { display: none; }
.tz-stage.is-broken .tz-imgfail[b-7xcq0f92yu] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 1.8rem; }
.tz-imgfail-ic[b-7xcq0f92yu] { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .22); color: var(--cyan-300); }
.tz-imgfail-ic[b-7xcq0f92yu]  svg { width: 24px; height: 24px; }
.tz-imgfail p[b-7xcq0f92yu] { margin: 0; color: #cfe0f5; font-size: .88rem; max-width: 340px; }
.tz-imgfail strong[b-7xcq0f92yu] { color: #fff; }
.tz-stage-veil[b-7xcq0f92yu] { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 18, 34, .45); backdrop-filter: blur(1px); }

.tz-summary[b-7xcq0f92yu] { margin-top: 1rem; padding: 1.2rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; }
.tz-plate[b-7xcq0f92yu] { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tz-plate .muted[b-7xcq0f92yu] { color: #9fb2cd; }
.tz-plate-badge[b-7xcq0f92yu] {
    font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; letter-spacing: .08em;
    background: linear-gradient(180deg, #fff, #eef3fb); border: 1px solid var(--line-2); color: var(--navy-850);
    padding: .5rem 1.1rem; border-radius: 10px; box-shadow: var(--shadow-xs);
}
.tz-fields[b-7xcq0f92yu] { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; }
@media (max-width: 520px) { .tz-fields[b-7xcq0f92yu] { grid-template-columns: 1fr; } }
.tz-field[b-7xcq0f92yu] { display: flex; flex-direction: column; gap: .15rem; }
.tz-flabel[b-7xcq0f92yu] { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #9fb2cd; }
.tz-fval[b-7xcq0f92yu] { font-weight: 600; color: #fff; }
.tz-json[b-7xcq0f92yu] { margin-top: 1rem; }
.tz-error-soft[b-7xcq0f92yu] { margin-top: 1rem; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #cfe0f5; }

/* ---------- Spinner ---------- */
.spinner[b-7xcq0f92yu] {
    width: 16px; height: 16px; border-radius: 50%; display: inline-block; vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin-b-7xcq0f92yu .7s linear infinite;
}
.spinner-lg[b-7xcq0f92yu] { width: 34px; height: 34px; border-width: 3px; border-color: rgba(255, 255, 255, .25); border-top-color: var(--cyan-300); }
@keyframes spin-b-7xcq0f92yu { to { transform: rotate(360deg); } }

/* ---------- Responsive: stack & let the page scroll on small screens ---------- */
@media (max-width: 880px) {
    .tz-page[b-7xcq0f92yu] { min-height: 0; }
    .tz-console[b-7xcq0f92yu] { grid-template-columns: 1fr; }
    .tz-controls[b-7xcq0f92yu], .tz-results[b-7xcq0f92yu] { overflow: visible; }
}

/* =====================================================================
   AURORA LIGHT — Test Zone re-skin (appended last; equal-specificity wins by
   source order). This page paints its OWN dark canvas, so the global theme
   change doesn't reach it — this block is required.
   KEEP DARK on purpose: .tz-stage image well + .tz-overlay + .tz-stage-veil,
   .tz-plate-badge plate chip, .tz-json CodeBlock terminal.
   ===================================================================== */

/* 1. Canvas: dark mesh → light aurora */
.tz-page[b-7xcq0f92yu] {
    color: var(--ink-700);
    background:
        var(--aurora-mesh),
        linear-gradient(180deg, var(--paper-aurora) 0%, var(--paper-mist) 100%);
}

/* 2. Intro */
.tz-intro .eyebrow[b-7xcq0f92yu] { color: var(--blue-600); }
.tz-intro h1[b-7xcq0f92yu] { color: var(--ink-brand); }
.tz-intro-sub[b-7xcq0f92yu] { color: var(--ink-500); }

/* 3. Panels: dark glass → clean white cards + inset hue accents */
.tz-controls[b-7xcq0f92yu], .tz-results[b-7xcq0f92yu] {
    background: #ffffff;
    border: 1px solid var(--line);
    backdrop-filter: none;
}
.tz-controls[b-7xcq0f92yu] { box-shadow: inset 0 3px 0 var(--brand-indigo), var(--shadow-brand); }
.tz-results[b-7xcq0f92yu]  { box-shadow: inset 0 3px 0 var(--brand-teal),   var(--shadow-brand); }
.tz-controls[b-7xcq0f92yu]::-webkit-scrollbar-thumb,
.tz-results[b-7xcq0f92yu]::-webkit-scrollbar-thumb { background: var(--line-2); }

/* 4. Samples */
.tz-samples-h[b-7xcq0f92yu] { color: var(--ink-900); }
.tz-samples-sub[b-7xcq0f92yu] { color: var(--ink-500); }
.tz-sample-thumb[b-7xcq0f92yu] { border: 2px solid var(--line); background: linear-gradient(135deg, #eef4ff, #dde9fb); }
.tz-sample:hover:not(:disabled) .tz-sample-thumb[b-7xcq0f92yu] { border-color: var(--blue-500); box-shadow: 0 6px 16px rgba(11,27,43,.12); }
.tz-sample.active .tz-sample-thumb[b-7xcq0f92yu] { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30,107,255,.22); }
.tz-sample-label[b-7xcq0f92yu] { color: var(--ink-700); }

/* 5. Mode tabs: dark track → light track, cyan-active → blue tint */
.tz-modes[b-7xcq0f92yu] { background: var(--paper-2); }
.tz-modes .tab[b-7xcq0f92yu] { color: var(--ink-500); }
.tz-modes .tab:hover[b-7xcq0f92yu] { color: var(--ink-900); background: rgba(30,107,255,.06); }
.tz-modes .tab.active[b-7xcq0f92yu] { color: var(--blue-700); background: rgba(30,107,255,.10); border-color: rgba(30,107,255,.18); }

/* 6. Drop zone → light dashed pattern */
.tz-drop[b-7xcq0f92yu] { border: 1.5px dashed rgba(30,107,255,.28); background: var(--paper); }
.tz-drop:hover[b-7xcq0f92yu] { border-color: var(--blue-500); background: rgba(30,107,255,.05); }

/* Primed: arriving via the home hero "Upload Image" deep link (test?upload=1).
   A short attention pulse so the visitor's next click lands on the picker. */
.tz-drop.is-primed[b-7xcq0f92yu] { animation: tz-prime-b-7xcq0f92yu 1.3s ease-out 2; }
@keyframes tz-prime-b-7xcq0f92yu {
    0%   { border-color: var(--blue-500); box-shadow: 0 0 0 0 rgba(30,107,255,.40); background: rgba(30,107,255,.10); }
    70%  { border-color: var(--blue-500); box-shadow: 0 0 0 10px rgba(30,107,255,0); background: rgba(30,107,255,.05); }
    100% { border-color: rgba(30,107,255,.28); box-shadow: 0 0 0 0 rgba(30,107,255,0); background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
    .tz-drop.is-primed[b-7xcq0f92yu] { animation: none; border-color: var(--blue-500); background: rgba(30,107,255,.06); }
}
.tz-drop-icon[b-7xcq0f92yu] { color: var(--blue-500); }
.tz-drop-inner strong[b-7xcq0f92yu] { color: var(--ink-900); }
.tz-drop-inner .muted[b-7xcq0f92yu] { color: var(--ink-500); }

/* 7. URL field + region: light inputs with dark text */
.tz-urlfield .input[b-7xcq0f92yu] { background: var(--white); border-color: var(--line-2); color: var(--ink-900); }
.tz-urlfield .input[b-7xcq0f92yu]::placeholder { color: var(--ink-400); }
.tz-link[b-7xcq0f92yu] { color: var(--blue-600); }
.tz-link:hover[b-7xcq0f92yu] { color: var(--blue-700); }
.tz-regionfield label[b-7xcq0f92yu] { color: var(--ink-700); }
.tz-regionfield .select[b-7xcq0f92yu] { background: var(--white); border-color: var(--line-2); color: var(--ink-900); }

/* 8. Empty state */
.tz-empty[b-7xcq0f92yu] { border: 1.5px dashed var(--line-2); }
.tz-empty-icon[b-7xcq0f92yu] { background: rgba(30,107,255,.10); border: 1px solid rgba(30,107,255,.20); color: var(--blue-600); }
.tz-empty h3[b-7xcq0f92yu] { color: var(--ink-900); }
.tz-empty p[b-7xcq0f92yu] { color: var(--ink-500); }

/* 9. Summary card: dark glass → white card */
.tz-summary[b-7xcq0f92yu] { background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow-brand); }
.tz-plate[b-7xcq0f92yu] { border-bottom: 1px solid var(--line); }
.tz-plate .muted[b-7xcq0f92yu] { color: var(--ink-500); }
.tz-flabel[b-7xcq0f92yu] { color: var(--ink-500); }
.tz-fval[b-7xcq0f92yu] { color: var(--ink-900); }

/* 10. Notices */
.tz-error-soft[b-7xcq0f92yu] { background: var(--paper-2); border-color: var(--line-2); color: var(--ink-700); }
.tz-error[b-7xcq0f92yu] { color: var(--danger); }

/* 11. Image-fail icon tile (sits inside the KEPT-DARK stage well) → blue */
.tz-imgfail-ic[b-7xcq0f92yu] { background: rgba(30,107,255,.16); border: 1px solid rgba(30,107,255,.30); color: var(--blue-300); }

/* 12. Spinners: visible brand ring on light surfaces */
.spinner[b-7xcq0f92yu] { border-color: rgba(13,27,62,.22); border-top-color: var(--brand-royal); }
.spinner-lg[b-7xcq0f92yu] { border-color: rgba(13,27,62,.22); border-top-color: var(--brand-royal); }

/* 13. "Report this image" — quiet tertiary prompt beneath the results.
   Present and clickable, but deliberately understated so it never competes
   with the plate result or the raw JSON above it. */
.tz-report[b-7xcq0f92yu] { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }

.tz-report-prompt[b-7xcq0f92yu] { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .82rem; color: var(--ink-500); }
.tz-report-ic[b-7xcq0f92yu] { display: inline-flex; color: var(--ink-400); }
.tz-report-ic[b-7xcq0f92yu]  svg { width: 15px; height: 15px; }
.tz-report-link[b-7xcq0f92yu] {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: .82rem; font-weight: 600; color: var(--blue-600);
    text-decoration: underline; text-underline-offset: 2px;
}
.tz-report-link:hover[b-7xcq0f92yu] { color: var(--blue-700); }

.tz-report-form[b-7xcq0f92yu] { display: flex; flex-direction: column; gap: .55rem; }
.tz-report-title[b-7xcq0f92yu] { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--ink-900); }
.tz-report-title[b-7xcq0f92yu]  svg { width: 16px; height: 16px; color: var(--blue-500); }
.tz-report-note[b-7xcq0f92yu] {
    width: 100%; resize: vertical; min-height: 56px; font-size: .85rem;
    background: var(--white); border-color: var(--line-2); color: var(--ink-900);
}
.tz-report-note[b-7xcq0f92yu]::placeholder { color: var(--ink-400); }
.tz-report-actions[b-7xcq0f92yu] { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.tz-report-cancel[b-7xcq0f92yu] { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .82rem; color: var(--ink-500); }
.tz-report-cancel:hover[b-7xcq0f92yu] { color: var(--ink-900); }
.tz-report-cancel:disabled[b-7xcq0f92yu] { opacity: .5; cursor: default; }
.tz-report-hint[b-7xcq0f92yu] { margin-left: auto; font-size: .74rem; color: var(--ink-400); }

.tz-report-done[b-7xcq0f92yu] { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .85rem; font-weight: 500; color: var(--blue-700); }
.tz-report-done[b-7xcq0f92yu]  svg { width: 16px; height: 16px; color: var(--brand-teal); }
/* _content/Intertraff.Vmm.Web/Components/Shared/ContactForm.razor.rz.scp.css */
/* Reusable contact-form styles (moved out of the Contact page so the form can be
   embedded anywhere — /contact and /support). */

.contact-form[b-mn76jekygh] { padding: 2rem; }
.contact-form-title[b-mn76jekygh] { font-size: 1.45rem; margin-bottom: .25rem; }
.contact-form-sub[b-mn76jekygh] { margin-bottom: 1.6rem; font-size: .9rem; }

.contact-form .btn-lg[b-mn76jekygh] { margin-top: .4rem; }

.contact-form-foot[b-mn76jekygh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}
.contact-form-foot[b-mn76jekygh]  svg { width: 14px; height: 14px; flex: none; }

/* ---------------- Success panel ---------------- */
.contact-success[b-mn76jekygh] {
    padding: 2.6rem 2rem;
    text-align: center;
}
.contact-success-ico[b-mn76jekygh] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin: 0 auto 1.3rem;
    display: grid;
    place-items: center;
    background: var(--success-bg);
    color: var(--success);
    box-shadow: 0 12px 30px rgba(22, 163, 74, .18);
}
.contact-success-ico[b-mn76jekygh]  svg { width: 32px; height: 32px; }
.contact-success h2[b-mn76jekygh] { font-size: 1.5rem; margin-bottom: .5rem; }
.contact-success .lead[b-mn76jekygh] { margin-bottom: 1rem; }
.contact-success .muted[b-mn76jekygh] { margin-bottom: 1.6rem; }