/* Reference: supplied VELO­NIC QR web plan, screens 4, 7–11 and admin spec 15.
   White account/settings surfaces, sky-blue actions, navy visitor landing. */
:root {
  --bg:#f4f7fb; --paper:#fff; --ink:#172538; --muted:#607185;
  --line:#dce5ef; --green:#007fb5; --deep:#0f172a;
  --lime:#38bdf8; --pale:#eaf6fc; --radius:16px;
  --shadow:0 5px 22px #0f172a05;
  --brand-blue:#007fb5; --brand-sky:#38bdf8; --brand-navy:#0f172a;
  --success:#047857; --success-bg:#ecfdf5;
}
body {min-height:100vh}
.topbar {background:#fff;border-bottom-color:var(--line);height:80px}
.brand-mark {background:var(--brand-navy);color:var(--brand-sky);border-radius:9px}
.brand-name {color:var(--ink)}
.brand-en {color:#637b92;letter-spacing:2.7px}
.topnav a.active,.bottom-nav a.active,.admin-bottom-nav a.active {color:var(--brand-blue)}
.topnav a.active:after {background:var(--brand-blue)}
.demo-pill {background:#eef7fd;border-color:#d6e8f5;color:#37617f;letter-spacing:0}
.dot {background:#0ea5e9}
.eyebrow,.admin-overline {color:#48718e}
.button {border-radius:9px;min-height:46px}
.button.primary {background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.button.primary:hover {background:#036994;border-color:#036994}
.button.light {background:var(--pale);border-color:#cce9f5;color:#075985}
.button:hover {background:#f1f7fc}
.panel,dialog,.admin-summary-card {border-radius:var(--radius)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:3px solid #38bdf8;outline-offset:3px}
.form-field input,.admin-search,.registration-panel .registration-code {background:#fff;border-color:#cbd8e5}
.form-field input {font-size:16px;min-height:49px}
.form-field>small {display:block;color:var(--muted);font-size:11px;font-weight:400;line-height:1.7;margin-top:8px}
.form-field input:focus,.registration-code-pair .registration-code:focus {border-color:#0284c7;box-shadow:0 0 0 3px #0284c71a}
input[aria-invalid="true"] {border-color:#dc2626!important;background:#fffafa!important}
.form-error,.phone-field-error {color:#b42318;font-size:12px;line-height:1.7}
.phone-field-hint {color:var(--muted);font-size:11px;line-height:1.7}
.page-intro h1,.admin-intro h1 {letter-spacing:-1.2px}
.owner-demo-strip,.owner-admin-context,.admin-preview-notice,.registration-demo-note {background:#eef7fd;border-color:#d6e8f5;color:#426781}
.active-panel {background:var(--brand-navy);border-top:3px solid #38bdf8}
.active-panel .subtle-label,.active-contact p,.active-bottom {color:#c4d3e6}
.active-avatar {background:#203450;color:#38bdf8}
.active-bottom .link-button {color:#7dd3fc}
.status-tag {background:#123d36;border-color:#226654;color:#6ee7b7}
.status-tag.paused {background:#334155;border-color:#64748b;color:#e2e8f0}
.contact-card.selected {background:var(--success-bg);border-color:#10b981}
.selected .radio-check {background:#059669;border-color:#059669}
.contact-phone {color:#4b637c;font-size:13px;font-variant-numeric:tabular-nums}
.contact-role {background:#eef2f6;color:#5d7185}
.qr-frame,.steps-panel {background:#f5f9fd;border-color:var(--line)}
.qr-id,.qr-tap-hint,.steps-panel p,.steps,.footnote,.demo-note {color:#607185}
.login-symbol,.registration-symbol,.success-icon {background:#e8f5fc;color:#0284c7}
.login-card {border-top:3px solid #0284c7;box-shadow:0 14px 40px #17253808}
.login-description,.login-note,.login-footnote {color:#607185}
.login-card h1 {font-size:28px}
.registration-card-art {background:var(--brand-navy);color:#e0f2fe;transform:none;box-shadow:0 14px 26px #0f172a14}
.registration-card-art:before {border-color:#38bdf8}
.registration-card-v {color:#38bdf8}
.registration-card-qr {background:#e0f2fe;color:#0f172a}
.registration-status {background:#eaf6fc;border-color:#cce9f5;color:#075985}
.registration-code-pair .registration-code {background:#f8fbfe}
.registration-steps .current {color:#036994}
.registration-steps .current b {background:#0284c7}
.registration-card-chip {color:#b9dcf3}
.registration-existing,.registration-after>span {background:#eaf6fc;border-color:#cce9f5;color:#075985}
.admin-workspace {--admin-navy:#0f172a;--admin-mint:#7dd3fc}
.admin-intro h1 {font-size:32px}
.admin-summary-card.is-primary {border-top:3px solid #38bdf8;padding-top:20px}
.admin-summary-card.is-primary>span:first-child,.admin-summary-card.is-primary strong small {color:#c4d3e6}
.admin-summary-card.is-primary .admin-summary-icon {background:#203450;color:#38bdf8}
.admin-subscriber.is-selected {background:#eef7fd;border-color:#a8d9f1}
.admin-subscriber:hover {background:#f4f9fd}
.admin-subscriber-title>strong {font-size:15px;line-height:1.5}
.admin-subscriber-meta,.admin-subscriber-contact,.admin-detail-top p:not(.admin-overline),.admin-phone {color:#536c84}
.admin-subscriber-contact b {color:#284a68;font-size:12px}
.admin-phone {font-size:13px}
.admin-detail-top h3 {font-size:23px;line-height:1.5}
.admin-contact.is-current {background:#ecfdf5;border-color:#a7e5ce}
.admin-current-mark {color:#047857}
.admin-badge-mint {background:#e6f7f1;color:#047857}
.admin-badge-navy {background:#eaf3fd;color:#1d578d}
.admin-filters button.is-active {background:#e0f2fe;color:#075985}
.admin-pool-ring {background:conic-gradient(#0ea5e9 var(--available),#e2e8f0 0)}
.admin-pool-key i {background:#0ea5e9}
.admin-pool-metric.tone-mint {border-color:#0ea5e9}
.admin-pool-metric.tone-navy {border-color:#334155}
.admin-profile-facts dt,.admin-contact-note,.admin-caption,.admin-pool-footnote,.admin-event-list p,.admin-event-list time {color:#61758b}
.admin-search:focus-within {outline-color:#38bdf8}
.admin-subscriber-list {scrollbar-color:#cbd8e5 transparent}
/* Visitor route follows the navy calling screen in the plan. */
body:has(.visitor-wrap) {background:#0f172a;color:#f8fafc}
body:has(.visitor-wrap) .visitor-topbar {background:#0c1323;border-bottom-color:#26364c}
body:has(.visitor-wrap) .brand-name {color:#fff}
body:has(.visitor-wrap) .brand-en {color:#94a3b8}
body:has(.visitor-wrap) .demo-pill {background:#162a40;border-color:#25415b;color:#a5ddf5}
.visitor-wrap {max-width:490px;padding-top:37px}
.visitor-wrap .eyebrow {color:#38bdf8}
.visitor-intro h1 {color:#fff}
.visitor-intro p {color:#b2c1d5}
.illustration-circle {background:#15324a}
.visitor-illustration>.icon {color:#38bdf8}
.shield-bubble {background:#0c263f;border-color:#0f172a;color:#38bdf8}
.visitor-card {background:#17243a;border-color:#2a3d56;box-shadow:none}
.visitor-card .car-label,.visitor-card p {color:#b2c1d5}
.visitor-card .license-plate {color:#fff;font-size:30px}
.visitor-card hr {border-color:#2a3d56}
.visitor-status {background:#0d3d35;color:#6ee7b7}
.visitor-card .button.primary {min-height:59px;background:#0284c7;border-color:#0284c7;font-size:16px}
.visitor-card .button.light {background:#334155;border-color:#40536c;color:#e2e8f0}
.privacy-row,.visitor-bottom {color:#b2c1d5}
.visitor-demo {background:#162a40;color:#b2c1d5;border:1px solid #25415b}
.visitor-demo strong {color:#7dd3fc}
.visitor-card .dialer-preview {background:#0f172a;border-color:#2a3d56}
.visitor-card .dialer-number {color:#7dd3fc}
.visitor-card .dialer-kicker,.visitor-card .dialer-preview small {color:#b2c1d5}
.visitor-card .dialer-preview .dialer-warning,.visitor-card .dialer-preview .dialer-warning b {color:#fcd89b}
.visitor-wrap.paused .illustration-circle {background:#334155}
.visitor-wrap.paused .visitor-status {background:#374151;color:#e2e8f0}
.toast {background:#152a43}
.toast.error {background:#922c22}
@media(max-width:650px) {
  .topbar {height:70px}
  .page-intro h1,.admin-intro h1 {font-size:26px}
  .panel {border-radius:14px}
  .contact-phone {font-size:13px;letter-spacing:0}
  .active-contact p {font-size:15px;letter-spacing:.5px}
  .admin-subscriber-title>strong {font-size:14px}
  .admin-phone {font-size:13px}
  .visitor-wrap {padding:28px 20px 34px}
  .visitor-card .license-plate {font-size:28px}
}