/* Visitor Simulator Wix dashboard. Colors: VisitorSimulator-Colors.md (approved 24.10.2026); layout follows Wix dashboard
   guidelines: content up to 1200px, height by content, one main action per page. Gradient only in the brand icon. */
:root {
    --vs-primary: #4F46E5;
    --vs-primary-hover: #4338CA;
    --vs-primary-soft: #EEF2FF;
    --vs-page-bg: #F8FAFC;
    --vs-surface: #FFFFFF;
    --vs-border: #E2E8F0;
    --vs-border-strong: #94A3B8;
    --vs-text: #1E293B;
    --vs-text-secondary: #64748B;
    --vs-on-primary: #FFFFFF;

    --vs-brand-blue: #2563EB;
    --vs-brand-violet: #7C3AED;
    --vs-brand-dark: #151B2E;
    --vs-brand-gradient: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);

    --vs-success: #15803D;
    --vs-warning: #B45309;
    --vs-error: #B42318;
    --vs-inconclusive: #667085;

    --vs-avatar-blue: #DBEAFE;
    --vs-avatar-lavender: #EDE9FE;
    --vs-avatar-teal: #CCFBF1;
    --vs-avatar-peach: #FFEDD5;
    --vs-avatar-pink: #FCE7F3;
    --vs-avatar-gray: #E2E8F0;
    --vs-avatar-foreground: #1E293B;

    /* 0.4.7: tokens for colors that were written inline */
    --vs-muted-bg: #F1F5F9;
    --vs-border-control: #CBD5E1;
    --vs-info-bg: #E0F2FE;
    --vs-info-fg: #075985;
    --vs-warn-fg: #92400E;
    --vs-overlay: rgba(15, 23, 42, .75);
}

/* 0.4.7: dark theme (Settings → Theme). "auto" follows the device. Avatars keep their light circles. */
.vs-root { background: var(--vs-page-bg); color: var(--vs-text); min-height: 100vh; }
.vs-root[data-theme="dark"] {
    color-scheme: dark;
    --vs-primary: #818CF8; --vs-primary-hover: #A5B4FC; --vs-primary-soft: #23215A;
    --vs-page-bg: #0F172A; --vs-surface: #1E293B; --vs-border: #334155; --vs-border-strong: #64748B;
    --vs-text: #E2E8F0; --vs-text-secondary: #94A3B8; --vs-on-primary: #0F172A;
    --vs-success: #4ADE80; --vs-warning: #FBBF24; --vs-error: #F87171; --vs-inconclusive: #94A3B8;
    --vs-muted-bg: #273449; --vs-border-control: #475569; --vs-info-bg: #0C4A6E; --vs-info-fg: #BAE6FD; --vs-warn-fg: #FDE68A;
    --vs-overlay: rgba(2, 6, 23, .8);
}
@media (prefers-color-scheme: dark) {
    .vs-root[data-theme="auto"] {
        color-scheme: dark;
        --vs-primary: #818CF8; --vs-primary-hover: #A5B4FC; --vs-primary-soft: #23215A;
        --vs-page-bg: #0F172A; --vs-surface: #1E293B; --vs-border: #334155; --vs-border-strong: #64748B;
        --vs-text: #E2E8F0; --vs-text-secondary: #94A3B8; --vs-on-primary: #0F172A;
        --vs-success: #4ADE80; --vs-warning: #FBBF24; --vs-error: #F87171; --vs-inconclusive: #94A3B8;
        --vs-muted-bg: #273449; --vs-border-control: #475569; --vs-info-bg: #0C4A6E; --vs-info-fg: #BAE6FD; --vs-warn-fg: #FDE68A;
        --vs-overlay: rgba(2, 6, 23, .8);
    }
}

html, body {
    margin: 0;
    background: var(--vs-page-bg);
    color: var(--vs-text);
    font-family: "Wix Madefor Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}
input, select, textarea, button { font: inherit; color: inherit; }
a { color: var(--vs-primary); }
a:hover { color: var(--vs-primary-hover); }
:focus-visible { outline: 2px solid var(--vs-primary); outline-offset: 2px; }

.vs-page { max-width: 1200px; margin: 0 auto; padding: 20px 24px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }

/* Header and tabs */
.vs-head { max-width: 1200px; margin: 0 auto; padding: 20px 24px 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.vs-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.vs-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vs-crumb { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--vs-text-secondary); }
.vs-crumb .vs-link { text-decoration: none; }
.vs-crumb .vs-link:hover { text-decoration: underline; }
.vs-h1 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.vs-h2 { margin: 0; font-size: 18px; font-weight: 600; }
.vs-h3 { margin: 0; font-size: 15px; font-weight: 600; }
.vs-tabs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--vs-border); }
.vs-tabs { display: flex; gap: 24px; }
.vs-tab { padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; color: var(--vs-text); }
.vs-tab-on { border-bottom-color: var(--vs-primary); color: var(--vs-primary); font-weight: 600; }
.vs-usage { padding: 8px 0; }

/* Text helpers */
.vs-muted { color: var(--vs-text-secondary); }
.vs-small { font-size: 13px; }
.vs-strong { font-weight: 600; }
.vs-p { margin: 0; }
.vs-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vs-nowrap { white-space: nowrap; }
.vs-end { text-align: end; }
.vs-min0 { min-width: 0; }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons and links */
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 18px;
          border: 1px solid var(--vs-border-control); background: var(--vs-surface); color: var(--vs-text); cursor: pointer; text-decoration: none; font-weight: 500; }
.vs-btn:hover { border-color: var(--vs-border-strong); color: var(--vs-text); }
.vs-btn-primary { background: var(--vs-primary); border-color: var(--vs-primary); color: var(--vs-on-primary); font-weight: 600; }
.vs-btn-primary:hover { background: var(--vs-primary-hover); border-color: var(--vs-primary-hover); color: var(--vs-on-primary); }
.vs-btn-outline { border-color: var(--vs-primary); color: var(--vs-primary); }
.vs-btn:disabled { opacity: .55; cursor: default; }
.vs-link { border: 0; background: none; padding: 0; color: var(--vs-primary); cursor: pointer; text-decoration: underline; }

/* Layout blocks */
.vs-card { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: 8px; padding: 20px; box-sizing: border-box; }
.vs-box { background: var(--vs-page-bg); border: 1px solid var(--vs-border); border-radius: 8px; padding: 14px 16px; }
.vs-stack { display: flex; flex-direction: column; gap: 16px; }
.vs-stack-tight { display: flex; flex-direction: column; gap: 4px; }
.vs-row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.vs-align-start { align-items: flex-start; }
.vs-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vs-inline { display: flex; align-items: center; gap: 10px; }
.vs-indent { padding-inline-start: 28px; }
.vs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vs-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .vs-grid-2, .vs-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Notices */
.vs-loading { color: var(--vs-text-secondary); padding: 24px 0; }
.vs-notice { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--vs-border); background: var(--vs-surface); }
.vs-notice-warn { border-color: var(--vs-warning); background: color-mix(in srgb, var(--vs-warning) 8%, var(--vs-surface)); }
.vs-notice-error { border-color: var(--vs-error); background: color-mix(in srgb, var(--vs-error) 8%, var(--vs-surface)); }
/* 0.6.3: notices from the periodic refresh (bottom corner, above the content). */
.vs-toaster { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.vs-toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--vs-surface); color: var(--vs-text);
    border: 1px solid var(--vs-border); border-inline-start: 4px solid var(--vs-primary); box-shadow: 0 6px 20px rgba(15, 23, 42, .16); animation: vs-toast-in .18s ease-out; }
.vs-toast-text { flex: 1; font-size: 14px; line-height: 1.4; }
.vs-toast-close { border: 0; background: transparent; color: var(--vs-text-secondary); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
@keyframes vs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vs-toast { animation: none; } }
/* 0.6.4: messages from our team above the views. */
.vs-messages-bar { padding-bottom: 0; display: flex; flex-direction: column; gap: 8px; }
.vs-team-message { display: flex; flex-direction: column; gap: 8px; border-inline-start: 4px solid var(--vs-primary); }
.vs-team-message-text { white-space: pre-wrap; margin: 0; }
.vs-notice-ok { border-color: var(--vs-success); background: color-mix(in srgb, var(--vs-success) 8%, var(--vs-surface)); }

/* Status: icon + text; colors only for results, never decorative */
.vs-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.vs-st-ok { color: var(--vs-success); }
.vs-st-warn { color: var(--vs-warning); }
.vs-st-err { color: var(--vs-error); }
.vs-st-na { color: var(--vs-inconclusive); }
.vs-st-run { color: var(--vs-primary); }
.vs-spin { animation: vs-spin 1.2s linear infinite; }
@keyframes vs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vs-spin { animation: none; } }
.vs-result-big .vs-status { font-size: 20px; font-weight: 600; }
.vs-result-big svg { width: 22px; height: 22px; }

/* Avatar */
.vs-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }

/* Tests list */
.vs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.vs-tile { display: flex; flex-direction: column; gap: 6px; text-align: start; padding: 16px; background: var(--vs-surface);
           border: 1px solid var(--vs-border); border-radius: 8px; cursor: pointer; min-width: 0; }
button.vs-tile:hover, .vs-test-row:hover, .vs-visitor-card:hover { border-color: var(--vs-border-strong); }
.vs-tile-value { font-size: 16px; font-weight: 600; }
.vs-test-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; text-align: start; width: 100%; cursor: pointer; }
.vs-test-goal { display: flex; flex-direction: column; gap: 6px; flex: 999 1 340px; min-width: 0; }
.vs-test-visitors { display: flex; flex-direction: column; gap: 10px; flex: 1 1 460px; min-width: 0; }
.vs-visitor-line { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.2fr) 110px; gap: 10px; align-items: center; }

/* New test */
.vs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.vs-step { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--vs-surface); border: 1px solid var(--vs-border); }
.vs-step-on { background: var(--vs-primary-soft); border-color: var(--vs-primary); font-weight: 600; }
.vs-step-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
               background: var(--vs-border); font-weight: 600; flex: none; }
.vs-step-on .vs-step-dot, .vs-step-done .vs-step-dot { background: var(--vs-primary); color: var(--vs-on-primary); }
.vs-choice { display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 14px; border-radius: 8px;
             border: 1px solid var(--vs-border); background: var(--vs-surface); cursor: pointer; }
.vs-choice-on { border-color: var(--vs-primary); background: var(--vs-primary-soft); }
.vs-persona { flex-direction: row; align-items: flex-start; gap: 12px; }
.vs-persona input { margin-top: 10px; width: 18px; height: 18px; accent-color: var(--vs-primary); }
.vs-disabled { opacity: .55; cursor: default; }
.vs-badge { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--vs-primary-soft);
            color: var(--vs-primary); font-size: 12px; font-weight: 600; }
.vs-field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.vs-field textarea, .vs-field input, .vs-form-row input, .vs-form-row select, .vs-inline select, .vs-inline input, .vs-table input {
    padding: 9px 12px; border: 1px solid var(--vs-border-strong); border-radius: 8px; background: var(--vs-surface); font-weight: 400; }
.vs-field textarea { resize: vertical; }
.vs-check { display: flex; align-items: center; gap: 10px; }
.vs-check input { width: 18px; height: 18px; accent-color: var(--vs-primary); }
.vs-details { border-top: 1px solid var(--vs-border); padding-top: 14px; }
.vs-details > summary { cursor: pointer; font-weight: 500; margin-bottom: 12px; }
.vs-card.vs-details { border-top: 1px solid var(--vs-border); padding-top: 16px; }

/* Test run */
.vs-split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.vs-split-side { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 8px; }
.vs-split-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vs-visitor-card { display: flex; gap: 12px; align-items: center; text-align: start; padding: 12px; cursor: pointer; width: 100%; }
.vs-shot { margin: 0; border: 1px solid var(--vs-border); border-radius: 8px; overflow: hidden; }
.vs-shot-bar { padding: 8px 12px; background: var(--vs-muted-bg); border-bottom: 1px solid var(--vs-border); color: var(--vs-text-secondary); font-size: 13px; display: flex; }
.vs-shot img { display: block; width: 100%; height: auto; }
.vs-shot-empty { height: 240px; display: flex; align-items: center; justify-content: center; color: var(--vs-text-secondary); background: var(--vs-page-bg); }
.vs-shot figcaption { padding: 8px 12px; }
.vs-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vs-step-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--vs-border); }
.vs-step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--vs-border); }
.vs-step-current .vs-step-num { background: var(--vs-primary); color: var(--vs-on-primary); }
.vs-step-current { font-weight: 600; }
.vs-thumb { max-width: 360px; width: 100%; border: 1px solid var(--vs-border); border-radius: 4px; margin-top: 6px; }
.vs-quote { margin: 0; padding: 12px 16px; border-radius: 8px; background: var(--vs-page-bg); border: 1px solid var(--vs-border); font-size: 15px; }
.vs-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.vs-facts dt { color: var(--vs-text-secondary); }
.vs-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Site settings */
.vs-form-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; }
.vs-form-row input, .vs-form-row select { max-width: 520px; }
@media (max-width: 720px) { .vs-form-row { grid-template-columns: minmax(0, 1fr); } }
.vs-seg { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--vs-border-control); background: var(--vs-surface); cursor: pointer; }
.vs-seg-on { background: var(--vs-primary); border-color: var(--vs-primary); color: var(--vs-on-primary); }
.vs-table-wrap { overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; }
.vs-table th { text-align: start; font-weight: 500; font-size: 13px; color: var(--vs-text-secondary); padding: 8px; border-bottom: 1px solid var(--vs-border); }
.vs-table td { padding: 10px 8px; border-bottom: 1px solid var(--vs-border); }
.vs-table input { width: 100%; box-sizing: border-box; }

/* Plan */
.vs-plan { display: flex; flex-wrap: wrap; gap: 24px; }
.vs-plan > * { flex: 1 1 320px; }
.vs-plan-name { font-size: 22px; font-weight: 600; }
.vs-meter { height: 8px; border-radius: 999px; background: var(--vs-border); overflow: hidden; }
.vs-meter > div { height: 8px; background: var(--vs-primary); }

/* 0.4.2: personas */
.vs-segbar { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--vs-border); }
.vs-segbar-item { padding: 8px 16px; border-radius: 8px; border: 0; background: transparent; color: var(--vs-text); font-weight: 500; cursor: pointer; }
.vs-segbar-on { background: var(--vs-surface); }
.vs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vs-filters input[type="search"] { padding: 8px 12px; border: 1px solid var(--vs-border-strong); border-radius: 8px; background: var(--vs-surface); min-width: 200px; }
.vs-filters select { padding: 8px 10px; border: 1px solid var(--vs-border-strong); border-radius: 8px; background: var(--vs-surface); }
.vs-persona-card { display: flex; flex-direction: column; gap: 12px; }
.vs-persona-card .vs-p { margin: 0; }
.vs-card-actions { margin-top: auto; }
.vs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vs-chips li { padding: 4px 10px; border-radius: 999px; background: var(--vs-muted-bg); font-size: 13px; }
.vs-btn-danger { background: var(--vs-error); border-color: var(--vs-error); color: var(--vs-on-primary); }
.vs-btn-danger:hover { filter: brightness(.88); color: var(--vs-on-primary); }
.vs-btn-dashed { border-style: dashed; border-color: var(--vs-border-strong); }

/* 0.4.2: persona editor */
.vs-editor { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.vs-editor-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vs-editor-aside { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.vs-trait-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; }
.vs-trait-row input { padding: 9px 12px; border: 1px solid var(--vs-border-strong); border-radius: 8px; background: var(--vs-surface); max-width: 520px; }
@media (max-width: 720px) { .vs-trait-row { grid-template-columns: minmax(0, 1fr); } .vs-editor-aside { position: static; max-width: none; } }
.vs-field select { padding: 9px 10px; border: 1px solid var(--vs-border-strong); border-radius: 8px; background: var(--vs-surface); font-weight: 400; }
.vs-lang-rows { display: flex; flex-direction: column; gap: 10px; }
.vs-lang-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.vs-lang-row select { padding: 9px 10px; border: 1px solid var(--vs-border-strong); border-radius: 8px; background: var(--vs-surface); }
.vs-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
               border: 1px solid var(--vs-border-control); background: var(--vs-surface); color: var(--vs-text); cursor: pointer; }
.vs-icon-btn:disabled { opacity: .45; cursor: default; }
.vs-gap-l { gap: 24px; }
.vs-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--vs-surface); box-shadow: 0 0 0 1px var(--vs-border); cursor: pointer; padding: 0; }
.vs-swatch-on { border-color: var(--vs-text); }

/* 0.4.2: plans */
.vs-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .vs-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vs-plans { grid-template-columns: minmax(0, 1fr); } }
.vs-plan-card { display: flex; flex-direction: column; gap: 12px; }
.vs-plan-current { border-color: var(--vs-primary); }
.vs-plan-title { font-size: 18px; font-weight: 600; }
.vs-plan-lines { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.vs-plan-choose { margin-top: auto; }

/* 0.4.2.2: a mobile visitor's screen at phone width */
.vs-shot-mobile { max-width: 420px; }

/* 0.4.4: report path, thumbnails, live thought, start path, persona details */
.vs-path { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; }
.vs-path li + li::before { content: "→"; margin-inline-end: 6px; color: var(--vs-text-secondary); }
[dir="rtl"] .vs-path li + li::before { content: "←"; }
.vs-thumb-btn { padding: 0; border: 0; background: none; cursor: zoom-in; align-self: flex-start; }
.vs-thumb-btn .vs-thumb { max-width: 240px; }
.vs-zoom { position: fixed; inset: 0; z-index: 1000; background: var(--vs-overlay); display: flex; align-items: center;
           justify-content: center; padding: 48px 16px 16px; box-sizing: border-box; cursor: zoom-out; }
.vs-zoom img { max-width: 100%; max-height: 100%; border-radius: 6px; background: var(--vs-surface); }
.vs-zoom-close { position: absolute; top: 12px; inset-inline-end: 16px; }
.vs-reason { font-style: italic; }
.vs-thought { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--vs-primary-soft); }
.vs-url-field { display: flex; align-items: stretch; max-width: 620px; border: 1px solid var(--vs-border-strong); border-radius: 8px; overflow: hidden; background: var(--vs-surface); }
.vs-url-base { display: flex; align-items: center; padding: 0 10px; background: var(--vs-muted-bg); color: var(--vs-text-secondary); font-weight: 400;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.vs-url-field input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; padding: 9px 10px; }
.vs-self-start { align-self: flex-start; }
.vs-persona-details { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.vs-persona-details .vs-facts { gap: 4px 16px; }

/* 0.4.5: app bar (logo, name, site, plan, visits), as in Insite AI */
.vs-appbar { background: var(--vs-surface); border-bottom: 1px solid var(--vs-border); }
.vs-appbar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vs-appbar-logo { flex: none; display: block; }
.vs-appbar-name { display: flex; flex-direction: column; min-width: 0; margin-inline-end: 6px; }
.vs-appbar-title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.vs-appbar-url { font-size: 11px; color: var(--vs-text-secondary); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
           border: 0; background: var(--vs-muted-bg); color: var(--vs-text); white-space: nowrap; }
button.vs-chip { cursor: pointer; }
.vs-chip-primary { background: var(--vs-primary-soft); color: var(--vs-primary); }
.vs-chip-info { background: var(--vs-info-bg); color: var(--vs-info-fg); }
.vs-chip-warn { background: color-mix(in srgb, var(--vs-warning) 14%, var(--vs-surface)); color: var(--vs-warn-fg); }

/* 0.4.6: support */
.vs-spacer { flex: 1; }
.vs-account-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--vs-border);
                  background: var(--vs-surface); color: var(--vs-text); cursor: pointer; max-width: 240px; }
.vs-account-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-account-btn:hover { border-color: var(--vs-border-strong); }
.vs-align-end { align-items: flex-end; }
.vs-narrow { max-width: 560px; }
.vs-auth .vs-field input { width: 100%; box-sizing: border-box; }
.vs-or { text-align: center; }
.vs-context { margin: 0; white-space: pre-wrap; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vs-text-secondary); }
.vs-thread-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: start; cursor: pointer; }
.vs-thread-row:hover { border-color: var(--vs-border-strong); }
.vs-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vs-message { padding: 12px 14px; border-radius: 10px; background: var(--vs-page-bg); border: 1px solid var(--vs-border); max-width: 85%; display: flex; flex-direction: column; gap: 4px; }
.vs-message-mine { align-self: flex-end; background: var(--vs-primary-soft); border-color: transparent; }
.vs-message-body { overflow-wrap: anywhere; }
.vs-message-body p { margin: 0 0 6px; }
.vs-tab .vs-badge { margin-inline-start: 4px; }

/* 0.4.7: prices on plan cards, settings button */
.vs-price { display: flex; flex-direction: column; gap: 2px; }
.vs-price-main { font-size: 24px; font-weight: 700; line-height: 1.2; }
.vs-price-unit { font-size: 13px; font-weight: 400; color: var(--vs-text-secondary); margin-inline-start: 4px; }
.vs-price-save { color: var(--vs-success); font-weight: 500; }
.vs-appbar .vs-icon-btn { width: 32px; height: 32px; color: var(--vs-text-secondary); }
.vs-appbar .vs-icon-btn:hover, .vs-appbar .vs-icon-btn[aria-current="page"] { color: var(--vs-primary); background: var(--vs-primary-soft); }
.vs-root select { color: var(--vs-text); background-color: var(--vs-surface); }
/* Page behind the app (overscroll, short pages) in the dark theme. */
body:has(.vs-root[data-theme="dark"]) { background: #0F172A; }
@media (prefers-color-scheme: dark) { body:has(.vs-root[data-theme="auto"]) { background: #0F172A; } }
/* 0.4.7.1: logo for the theme */
.vs-logo-dark { display: none; }
.vs-root[data-theme="dark"] .vs-logo-light { display: none; }
.vs-root[data-theme="dark"] .vs-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
    .vs-root[data-theme="auto"] .vs-logo-light { display: none; }
    .vs-root[data-theme="auto"] .vs-logo-dark { display: block; }
}
/* 0.4.9: Insite AI tab and report card */
.vs-insite-logo { flex: none; border-radius: 8px; }
.vs-insite-points { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.vs-insite-card { border-inline-start: 3px solid var(--vs-primary); }
.vs-insite-ok { border-inline-start-color: var(--vs-success); }
/* 0.4.9: next action on the live screenshot */
.vs-shot-frame { position: relative; overflow: hidden; }
.vs-mark-box { position: absolute; box-sizing: border-box; border: 2px solid #F97316; border-radius: 6px; pointer-events: none;
               box-shadow: 0 0 0 9999px rgba(15, 23, 42, .08); }
.vs-mark-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
               background: rgba(249, 115, 22, .85); border: 2px solid #FFFFFF; box-shadow: 0 0 0 0 rgba(249, 115, 22, .6); animation: vs-pulse 1.4s ease-out infinite; }
.vs-mark-box.vs-mark-type { border-color: #2563EB; }
.vs-mark-dot.vs-mark-type { background: rgba(37, 99, 235, .85); box-shadow: 0 0 0 0 rgba(37, 99, 235, .6); }
.vs-mark-scroll { position: absolute; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                  background: rgba(249, 115, 22, .9); color: #FFFFFF; font-size: 20px; font-weight: 700; animation: vs-pulse 1.4s ease-out infinite; }
.vs-mark-down { bottom: 12px; }
.vs-mark-up { top: 12px; }
@keyframes vs-pulse { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); } 100% { box-shadow: 0 0 0 16px rgba(249, 115, 22, 0); } }
@media (prefers-reduced-motion: reduce) { .vs-mark-dot, .vs-mark-scroll { animation: none; } }
/* 0.4.13: accessibility needs in the persona editor */
.vs-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vs-fieldset legend { padding: 0; margin-bottom: 6px; font-weight: 500; }
/* 0.4.16: list tools, pager, more filters */
.vs-list-tools { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vs-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vs-more-filters > summary { cursor: pointer; color: var(--vs-primary); font-weight: 500; }
.vs-more-filters[open] > summary { margin-bottom: 10px; }
.vs-filters select { max-width: 220px; }
/* 0.4.16: help */
.vs-help-section > summary { cursor: pointer; list-style-position: inside; }
.vs-help-section[open] > summary { margin-bottom: 10px; }
.vs-help-traits { margin: 6px 0 0; display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 16px; }
.vs-help-traits dt { font-weight: 600; }
.vs-help-traits dd { margin: 0; color: var(--vs-text-secondary); }
/* 0.4.18: Insite AI status in Help */
.vs-help-status { padding: 8px 12px; border-radius: 8px; background: var(--vs-muted-bg); border-inline-start: 3px solid var(--vs-border-strong); }
.vs-help-status.vs-help-ok { border-inline-start-color: var(--vs-success); }
@media (max-width: 640px) { .vs-help-traits { grid-template-columns: 1fr; } .vs-help-traits dd { margin-bottom: 6px; } }

/* 0.5.0: schedules */
.vs-badge-soft { background: var(--vs-muted-bg); color: var(--vs-text); }
.vs-trend { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; font-size: .85em; color: var(--vs-text-secondary); }
.vs-trend-worse { color: var(--vs-error); font-weight: 600; }
.vs-trend-better { color: var(--vs-success); font-weight: 600; }
.vs-schedule-paused { border-inline-start: 3px solid var(--vs-warning); }
.vs-schedule-actions { margin-top: 6px; }

/* 0.5.2: how to fix */
.vs-fixes { border-inline-start: 3px solid var(--vs-primary); }
.vs-fix-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.5; }

/* 0.5.4: App Market review prompt */
.vs-review { border-inline-start: 3px solid var(--vs-primary); gap: 8px; display: flex; flex-direction: column; }
.vs-review-head { align-items: flex-start; }
.vs-review-head .vs-icon-btn { width: 32px; height: 32px; color: var(--vs-text-secondary); flex: none; }