/* =====================================================================
   VSL Commerce Passport — shared configuration control styling.

   This stylesheet is loaded by BOTH surfaces that render a Passport-owned
   control:

     1. the standalone AI Connect settings pages, through ui/components/layout.php
     2. the Commerce Passport page at /dev/account/passport, which injects the
        very same fragment into an inline panel

   One stylesheet for one fragment renderer is the whole point: a control
   cannot look like a VSL configuration surface in one place and a raw HTML
   form in the other, because there is only one set of rules.

   SCOPING RULE
   ------------
   Every selector below is prefixed with .vsl-ctl. There is deliberately no
   bare `main`, `.card`, `button`, `a`, `input`, `select` or `textarea`
   selector anywhere in this file, so loading it on the Passport page cannot
   restyle the global VSL header, left menu or marketplace sidebar, and
   loading it on an AI Connect page cannot disturb the existing vsl-ai-*
   layout.

   DESIGN DIRECTION
   ----------------
   VSL business control centre, not an admin database form. Hierarchy comes
   from typography and whitespace rather than from wrapping every single
   input in its own bordered card.
   ===================================================================== */

.vsl-ctl {
    --vsl-ctl-ink: #241a27;
    --vsl-ctl-ink-soft: #6d6270;
    --vsl-ctl-ink-faint: #8d8390;
    --vsl-ctl-line: #e4dee6;
    --vsl-ctl-line-soft: #f1edf2;
    --vsl-ctl-purple: #4a174b;
    --vsl-ctl-purple-soft: #f4eff4;
    --vsl-ctl-surface: #ffffff;
    --vsl-ctl-field-bg: #fdfcfd;
    --vsl-ctl-danger: #a3283f;
    --vsl-ctl-good: #157a49;
    --vsl-ctl-good-bg: #ecf8f1;
    --vsl-ctl-warn: #8a5b00;
    --vsl-ctl-warn-bg: #fff6e4;

    color: var(--vsl-ctl-ink);
    font-size: .875rem;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------
   SECTIONS
   A section is a small label plus its fields. No box, no card. The
   rule above the label is the only separator, which is what keeps a
   long control from reading as a questionnaire.
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-section {
    padding: 0;
    margin: 0 0 22px;
}
.vsl-ctl .vsl-ctl-section:last-child { margin-bottom: 0; }

.vsl-ctl .vsl-ctl-section + .vsl-ctl-section {
    border-top: 1px solid var(--vsl-ctl-line-soft);
    padding-top: 18px;
}

.vsl-ctl .vsl-ctl-section-label {
    display: block;
    margin: 0 0 2px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vsl-ctl-ink-faint);
}

.vsl-ctl .vsl-ctl-section-note {
    margin: 0 0 12px;
    font-size: .79rem;
    line-height: 1.5;
    color: var(--vsl-ctl-ink-soft);
}

/* ---------------------------------------------------------------
   FIELD GRID
   Two columns on desktop, one on mobile. Declared with a media query
   rather than auto-fit so a single field in a row cannot silently
   stretch to full width and break the rhythm of the column beside it.
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 16px;
}
@media (min-width: 620px) {
    .vsl-ctl .vsl-ctl-grid.is-two { grid-template-columns: 1fr 1fr; }
}
.vsl-ctl .vsl-ctl-grid > .is-wide { grid-column: 1 / -1; }

.vsl-ctl .vsl-ctl-field { min-width: 0; }

.vsl-ctl .vsl-ctl-field > label {
    display: block;
    margin: 0 0 5px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--vsl-ctl-ink);
}

.vsl-ctl .vsl-ctl-hint {
    font-weight: 400;
    color: var(--vsl-ctl-ink-faint);
}

.vsl-ctl .vsl-ctl-field-note {
    margin: 5px 0 0;
    font-size: .755rem;
    line-height: 1.5;
    color: var(--vsl-ctl-ink-faint);
}

/* ---------------------------------------------------------------
   INPUTS
   43px tall, 10px radius, neutral border, near-white background,
   normal weight, no shadow, no blue anywhere, VSL purple focus.
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-input,
.vsl-ctl .vsl-ctl-select,
.vsl-ctl .vsl-ctl-textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 12px;
    font-family: inherit;
    font-size: .855rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--vsl-ctl-ink);
    background: var(--vsl-ctl-field-bg);
    border: 1px solid var(--vsl-ctl-line);
    border-radius: 10px;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.vsl-ctl .vsl-ctl-input,
.vsl-ctl .vsl-ctl-select { height: 43px; }

.vsl-ctl .vsl-ctl-select {
    /* Chevron drawn inline so the control needs no image asset and no
       icon font, which keeps it identical inside the Passport panel. */
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d6270' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px 15px;
}

.vsl-ctl .vsl-ctl-textarea {
    min-height: 78px;
    height: 78px;
    padding: 10px 12px;
    resize: vertical;
}
.vsl-ctl .vsl-ctl-textarea.is-tall { min-height: 104px; height: 104px; }

.vsl-ctl .vsl-ctl-input::placeholder,
.vsl-ctl .vsl-ctl-textarea::placeholder {
    color: #a79fab;
    opacity: 1;
}

.vsl-ctl .vsl-ctl-input:hover,
.vsl-ctl .vsl-ctl-select:hover,
.vsl-ctl .vsl-ctl-textarea:hover { border-color: #d6cdd9; }

.vsl-ctl .vsl-ctl-input:focus,
.vsl-ctl .vsl-ctl-select:focus,
.vsl-ctl .vsl-ctl-textarea:focus {
    outline: none;
    background: var(--vsl-ctl-surface);
    border-color: var(--vsl-ctl-purple);
    box-shadow: 0 0 0 3px rgba(74, 23, 75, .12);
}

/* Keyboard users still get a visible ring even where focus-visible
   differs from focus. */
.vsl-ctl .vsl-ctl-input:focus-visible,
.vsl-ctl .vsl-ctl-select:focus-visible,
.vsl-ctl .vsl-ctl-textarea:focus-visible {
    border-color: var(--vsl-ctl-purple);
    box-shadow: 0 0 0 3px rgba(74, 23, 75, .18);
}

/* ---------------------------------------------------------------
   BOOLEAN SETTING ROWS
   A checkbox, a label and one explanatory sentence on a single
   compact row. Explicitly NOT a card per option: the previous screens
   spent an enormous amount of vertical space on simple booleans.
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-switches {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}
@media (min-width: 620px) {
    .vsl-ctl .vsl-ctl-switches.is-two { grid-template-columns: 1fr 1fr; gap: 2px 16px; }
}

.vsl-ctl .vsl-ctl-switch {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .12s ease;
}
.vsl-ctl .vsl-ctl-switch:hover { background: #faf8fb; }

.vsl-ctl .vsl-ctl-switch > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--vsl-ctl-purple);
    cursor: pointer;
}

.vsl-ctl .vsl-ctl-switch-text { min-width: 0; }

.vsl-ctl .vsl-ctl-switch-text strong {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vsl-ctl-ink);
}

.vsl-ctl .vsl-ctl-switch-text small {
    display: block;
    margin-top: 1px;
    font-size: .755rem;
    line-height: 1.45;
    color: var(--vsl-ctl-ink-faint);
}

/* The single prominent switch (Enable delegated actions). Prominent, but
   still one compact row rather than a hero panel. */
.vsl-ctl .vsl-ctl-switch.is-prominent {
    padding: 12px 13px;
    background: var(--vsl-ctl-purple-soft);
    border: 1px solid #e6dae7;
}
.vsl-ctl .vsl-ctl-switch.is-prominent:hover { background: #f0e8f1; }
.vsl-ctl .vsl-ctl-switch.is-prominent .vsl-ctl-switch-text strong { font-size: .855rem; }

/* ---------------------------------------------------------------
   NOTICES
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-notice {
    margin: 0 0 16px;
    padding: 10px 13px;
    font-size: .795rem;
    line-height: 1.5;
    border: 1px solid var(--vsl-ctl-line);
    border-radius: 10px;
    background: #faf9fb;
    color: var(--vsl-ctl-ink-soft);
}
.vsl-ctl .vsl-ctl-notice.is-success {
    background: var(--vsl-ctl-good-bg);
    border-color: #cfeadd;
    color: #12603a;
}
.vsl-ctl .vsl-ctl-notice.is-error {
    background: #fdf2f4;
    border-color: #e7cdd2;
    color: #8f2338;
}
.vsl-ctl .vsl-ctl-notice.is-security {
    background: var(--vsl-ctl-warn-bg);
    border-color: #f2e0bb;
    color: #6f4a05;
}
.vsl-ctl .vsl-ctl-notice strong { font-weight: 700; }

/* ---------------------------------------------------------------
   READ-ONLY KEY/VALUE ROWS (connection activity, permissions)
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-rows { margin: 0; }

.vsl-ctl .vsl-ctl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--vsl-ctl-line-soft);
}
.vsl-ctl .vsl-ctl-row:last-child { border-bottom: 0; }

.vsl-ctl .vsl-ctl-row-key {
    flex: 0 0 auto;
    min-width: 150px;
    font-size: .775rem;
    font-weight: 600;
    color: var(--vsl-ctl-ink-faint);
}

.vsl-ctl .vsl-ctl-row-val {
    flex: 1 1 200px;
    min-width: 0;
    font-size: .82rem;
    color: var(--vsl-ctl-ink);
    overflow-wrap: anywhere;
}

.vsl-ctl .vsl-ctl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vsl-ctl .vsl-ctl-chip {
    padding: 3px 9px;
    font-size: .73rem;
    line-height: 1.45;
    color: var(--vsl-ctl-ink-soft);
    background: #f6f4f7;
    border: 1px solid var(--vsl-ctl-line);
    border-radius: 999px;
}

.vsl-ctl .vsl-ctl-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: .74rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--vsl-ctl-line);
    background: #f6f4f7;
    color: var(--vsl-ctl-ink-soft);
}
.vsl-ctl .vsl-ctl-state.is-on {
    background: var(--vsl-ctl-good-bg);
    border-color: #cfeadd;
    color: var(--vsl-ctl-good);
}
.vsl-ctl .vsl-ctl-state.is-warn {
    background: var(--vsl-ctl-warn-bg);
    border-color: #f2e0bb;
    color: var(--vsl-ctl-warn);
}

/* Earlier connections are informational only. They are visually quieter
   than the current connection so nobody reads a revoked authorisation as
   something that can still act. */
.vsl-ctl .vsl-ctl-past {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--vsl-ctl-line-soft);
}
.vsl-ctl .vsl-ctl-past:last-child { border-bottom: 0; }
.vsl-ctl .vsl-ctl-past-name { font-size: .805rem; color: var(--vsl-ctl-ink-soft); }
.vsl-ctl .vsl-ctl-past-meta { font-size: .755rem; color: var(--vsl-ctl-ink-faint); }

.vsl-ctl .vsl-ctl-empty {
    padding: 14px 0;
    font-size: .8rem;
    color: var(--vsl-ctl-ink-faint);
}

/* ---------------------------------------------------------------
   JSON VIEWER (passport document / AI catalog)
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-json {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .755rem;
    line-height: 1.62;
    color: #2f2333;
    background: #faf9fb;
    border: 1px solid var(--vsl-ctl-line);
    border-radius: 10px;
    overflow: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}
.vsl-ctl .vsl-ctl-json:focus-visible {
    outline: 2px solid var(--vsl-ctl-purple);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   BUTTONS
   Primary purple, secondary neutral, danger visually separated.
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 41px;
    padding: 0 16px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    color: var(--vsl-ctl-ink);
    background: var(--vsl-ctl-surface);
    border: 1px solid var(--vsl-ctl-line);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.vsl-ctl .vsl-ctl-btn:hover { background: #f7f6f8; border-color: #d6cdd9; text-decoration: none; color: var(--vsl-ctl-ink); }
.vsl-ctl .vsl-ctl-btn:focus-visible { outline: 2px solid var(--vsl-ctl-purple); outline-offset: 2px; }
.vsl-ctl .vsl-ctl-btn[disabled] { opacity: .55; cursor: default; }

.vsl-ctl .vsl-ctl-btn.is-primary {
    color: #fff;
    background: var(--vsl-ctl-purple);
    border-color: var(--vsl-ctl-purple);
}
.vsl-ctl .vsl-ctl-btn.is-primary:hover { background: #5c1f5d; border-color: #5c1f5d; color: #fff; }

.vsl-ctl .vsl-ctl-btn.is-danger {
    color: var(--vsl-ctl-danger);
    background: #fff;
    border-color: #e7cdd2;
}
.vsl-ctl .vsl-ctl-btn.is-danger:hover { background: #fdf2f4; border-color: #dcb8bf; color: var(--vsl-ctl-danger); }

.vsl-ctl .vsl-ctl-btn.is-sm { min-height: 33px; padding: 0 12px; font-size: .78rem; }

/* A danger action never sits shoulder to shoulder with the primary action.
   This rule is what keeps Disconnect from competing with Save. */
.vsl-ctl .vsl-ctl-danger-zone {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--vsl-ctl-line-soft);
}
.vsl-ctl .vsl-ctl-danger-zone .vsl-ctl-section-note { margin-bottom: 10px; }

/* ---------------------------------------------------------------
   FOOTER
   Predictable on every control: one way back on the left, the single
   primary action on the right. Nothing else belongs on this row.
   On the standalone pages it sits at the end of the form; inside the
   Passport panel the panel makes its own copy sticky.
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--vsl-ctl-line);
}
.vsl-ctl .vsl-ctl-footer > .vsl-ctl-btn { flex: 0 0 auto; }

@media (max-width: 520px) {
    .vsl-ctl .vsl-ctl-footer > .vsl-ctl-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .vsl-ctl .vsl-ctl-input,
    .vsl-ctl .vsl-ctl-select,
    .vsl-ctl .vsl-ctl-textarea,
    .vsl-ctl .vsl-ctl-switch,
    .vsl-ctl .vsl-ctl-btn { transition: none; }
}

/* =====================================================================
   GUIDED CONTROL POLISH — 2026-09-02
   Makes Passport-owned controls read like configuration choices rather
   than a long admin form. This is presentation-only and remains scoped.
   ===================================================================== */
.vsl-ctl .vsl-ctl-section { margin-bottom: 18px; }
.vsl-ctl .vsl-ctl-section + .vsl-ctl-section { padding-top: 16px; }
.vsl-ctl .vsl-ctl-section-label {
    font-size: .68rem;
    letter-spacing: .065em;
}
.vsl-ctl .vsl-ctl-grid { gap: 10px 12px; }
.vsl-ctl .vsl-ctl-field > label { margin-bottom: 4px; font-size: .77rem; }
.vsl-ctl .vsl-ctl-input,
.vsl-ctl .vsl-ctl-select,
.vsl-ctl .vsl-ctl-textarea {
    background-color: #faf8fa;
    border-color: #ece6ed;
    border-radius: 11px;
}
.vsl-ctl .vsl-ctl-select {
    min-height: 44px;
    font-weight: 600;
    color: #382a3c;
    background-color: #f8f3f8;
    border-color: #e5dbe6;
}
.vsl-ctl .vsl-ctl-select:hover { background-color: #f5eff6; border-color: #d9ccda; }
.vsl-ctl .vsl-ctl-field-note { margin-top: 4px; font-size: .72rem; }
.vsl-ctl .vsl-ctl-textarea { min-height: 72px; height: 72px; }
.vsl-ctl .vsl-ctl-switch {
    min-height: 44px;
    align-items: center;
    padding: 8px 9px;
    border: 1px solid transparent;
}
.vsl-ctl .vsl-ctl-switch:has(> input[type="checkbox"]:checked) {
    background: #f8f3f8;
    border-color: #e7dce8;
}
.vsl-ctl .vsl-ctl-switch:has(> input[type="checkbox"]:checked) .vsl-ctl-switch-text strong {
    color: var(--vsl-ctl-purple);
}
.vsl-ctl .vsl-ctl-notice.is-security {
    padding: 11px 12px;
    background: #fffaf0;
    border-color: #efe2c7;
    color: #66501c;
}
.vsl-ctl .vsl-ctl-btn,
.vsl-ctl .vsl-ctl-btn.is-primary {
    border-radius: 11px;
    font-weight: 650;
}

@media (max-width: 619px) {
    .vsl-ctl .vsl-ctl-section { margin-bottom: 16px; }
    .vsl-ctl .vsl-ctl-section + .vsl-ctl-section { padding-top: 14px; }
    .vsl-ctl .vsl-ctl-grid { gap: 10px; }
    .vsl-ctl .vsl-ctl-select { min-height: 46px; }
}

/* =====================================================================
   PREMIUM FORM POLISH — 2026-09-12
   Adds real visual hierarchy (a coloured accent tick per section label,
   soft card elevation on switch rows and notices, sharper focus states)
   so a control reads as a designed VSL surface instead of a stock form,
   whether it renders inside the Passport panel or a standalone page.
   ===================================================================== */
.vsl-ctl .vsl-ctl-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 0;
}
.vsl-ctl .vsl-ctl-section-label::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vsl-ctl-purple), #f5c94a);
    box-shadow: 0 0 0 3px rgba(74, 23, 75, .08);
}

.vsl-ctl .vsl-ctl-switches {
    gap: 6px;
}
.vsl-ctl .vsl-ctl-switch {
    background: #fff;
    border: 1px solid var(--vsl-ctl-line-soft);
    box-shadow: 0 1px 2px rgba(36, 26, 39, .03);
}
.vsl-ctl .vsl-ctl-switch:hover {
    background: #faf8fb;
    border-color: #e7dce8;
    box-shadow: 0 3px 8px rgba(36, 26, 39, .06);
}
.vsl-ctl .vsl-ctl-switch:has(> input[type="checkbox"]:checked) {
    box-shadow: 0 3px 10px rgba(74, 23, 75, .08);
}

.vsl-ctl .vsl-ctl-notice {
    position: relative;
    padding: 11px 14px 11px 38px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(36, 26, 39, .03);
}
.vsl-ctl .vsl-ctl-notice::before {
    content: "\2139";
    position: absolute;
    left: 12px;
    top: 11px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ece3ee;
    color: var(--vsl-ctl-purple);
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.vsl-ctl .vsl-ctl-notice.is-success::before { background: #cfeadd; color: var(--vsl-ctl-good); }
.vsl-ctl .vsl-ctl-notice.is-error::before { background: #f6d3da; color: #8f2338; content: "\2715"; }
.vsl-ctl .vsl-ctl-notice.is-security::before { background: #f2e0bb; color: #6f4a05; content: "\26A0"; }

.vsl-ctl .vsl-ctl-state.is-on {
    box-shadow: 0 0 0 3px rgba(21, 122, 73, .08);
}
.vsl-ctl .vsl-ctl-state.is-on::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 1px;
    border-radius: 50%;
    background: var(--vsl-ctl-good);
    box-shadow: 0 0 0 3px rgba(21, 122, 73, .18);
}

.vsl-ctl .vsl-ctl-btn.is-primary {
    background: linear-gradient(135deg, var(--vsl-ctl-purple), #6b2b70);
    box-shadow: 0 8px 18px rgba(74, 23, 75, .18);
}
.vsl-ctl .vsl-ctl-btn.is-primary:hover {
    background: linear-gradient(135deg, #591d5a, #7a3480);
    box-shadow: 0 10px 22px rgba(74, 23, 75, .24);
}

.vsl-ctl .vsl-ctl-json {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---------------------------------------------------------------
   TOGGLE SWITCHES
   Real checkboxes stay in the DOM/markup untouched (so labels, forms and
   JS keep working exactly as before) but are visually re-skinned into an
   iOS-style pill toggle: switch-text on the left, the toggle on the
   right, a satisfying colour flip when checked.
   --------------------------------------------------------------- */
.vsl-ctl .vsl-ctl-switch {
    justify-content: space-between;
    align-items: center;
}
.vsl-ctl .vsl-ctl-switch-text { order: 1; flex: 1 1 auto; }
.vsl-ctl .vsl-ctl-switch > input[type="checkbox"] {
    order: 2;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: 999px;
    background: #dcd6de;
    border: 1px solid #d2c9d4;
    box-shadow: inset 0 1px 2px rgba(36, 26, 39, .12);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.vsl-ctl .vsl-ctl-switch > input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(36, 26, 39, .28);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.vsl-ctl .vsl-ctl-switch > input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--vsl-ctl-purple), #6b2b70);
    border-color: var(--vsl-ctl-purple);
}
.vsl-ctl .vsl-ctl-switch > input[type="checkbox"]:checked::before {
    transform: translateX(16px);
}
.vsl-ctl .vsl-ctl-switch > input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--vsl-ctl-purple);
    outline-offset: 2px;
}