/*
 * Vouch — fonctionnalités produit et expérience contextuelle
 * Démo, statut, affiliation, assistant, comparateur et diagnostic serveur.
 * Les vues autonomes restent préfixées ; les blocs intégrés ont un namespace dédié.
 */

.vf-feature {
    --vf-surface: var(--card, #fffdf8);
    --vf-surface-soft: var(--card-soft, #fbf8f2);
    --vf-ink: var(--fg, #12131a);
    --vf-muted: var(--muted, #6d7180);
    --vf-line: var(--border, rgba(26, 28, 38, .13));
    --vf-primary: var(--primary, #5865f2);
    --vf-primary-strong: var(--primary-strong, #4c58e8);
    --vf-success: var(--success, #12a66a);
    --vf-warning: #d97706;
    --vf-danger: var(--danger, #d34848);
    display: grid;
    gap: 24px;
    color: var(--vf-ink);
}

.vf-feature [hidden],
.vf-support [hidden] {
    display: none !important;
}

.vf-feature button,
.vf-feature input,
.vf-feature select,
.vf-feature textarea,
.vf-support button,
.vf-support textarea {
    font: inherit;
}

.vf-feature button,
.vf-support button {
    cursor: pointer;
}

.vf-feature :focus-visible,
.vf-support :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--vf-primary, #5865f2) 35%, transparent);
    outline-offset: 2px;
}

.vf-page-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr);
    gap: 42px;
    align-items: end;
    min-height: 460px;
    padding: clamp(32px, 5vw, 66px);
    overflow: hidden;
    border: 1px solid var(--vf-line);
    border-radius: 32px;
    background:
        radial-gradient(circle at 86% 8%, rgba(88, 101, 242, .18), transparent 31%),
        linear-gradient(145deg, var(--vf-surface) 0%, var(--vf-surface-soft) 100%);
}

.vf-page-hero::after {
    position: absolute;
    right: 34px;
    top: 34px;
    width: 12px;
    height: 12px;
    content: "";
    background: var(--vf-primary);
    box-shadow: -18px 18px 0 rgba(88, 101, 242, .24);
}

.vf-page-hero__copy {
    position: relative;
    z-index: 1;
    max-width: 770px;
}

.vf-page-hero h1 {
    max-width: 760px;
    margin: 18px 0 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(48px, 5.6vw, 78px);
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: .96;
    text-wrap: balance;
}

.vf-page-hero__copy > p:not(.vg-eyebrow) {
    max-width: 680px;
    margin: 24px 0 0;
    color: var(--vf-muted);
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.65;
}

.vf-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.vf-page-hero__proof {
    position: relative;
    z-index: 1;
    display: grid;
    border-top: 1px solid var(--vf-line);
}

.vf-page-hero__proof > span {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 2px 12px;
    align-items: center;
    min-height: 82px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--vf-line);
}

.vf-page-hero__proof .vg-icon {
    grid-row: 1 / span 2;
    color: var(--vf-primary);
}

.vf-page-hero__proof strong {
    font-size: 15px;
}

.vf-page-hero__proof small {
    color: var(--vf-muted);
    font-size: 13px;
}

.vf-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

.vf-section-heading > div > span {
    color: var(--vf-primary);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.vf-section-heading h2 {
    margin: 9px 0 0;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;
}

.vf-section-heading > p {
    max-width: 430px;
    margin: 4px 0 0;
    color: var(--vf-muted);
    line-height: 1.55;
    text-align: right;
}

.vf-text-button {
    padding: 7px 0;
    border: 0;
    color: var(--vf-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.vf-text-button:hover {
    color: var(--vf-primary);
}

/* Démonstration */

.vf-demo__workspace {
    display: grid;
    grid-template-columns: minmax(330px, .76fr) minmax(0, 1.24fr);
    overflow: hidden;
    border: 1px solid var(--vf-line);
    border-radius: 32px;
    background: var(--vf-surface);
}

.vf-demo__editor {
    padding: clamp(24px, 3vw, 38px);
    border-right: 1px solid var(--vf-line);
}

.vf-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 28px;
    padding: 6px;
    border: 1px solid var(--vf-line);
    border-radius: 18px;
    background: var(--vf-surface-soft);
}

.vf-segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 0 10px;
    border: 0;
    border-radius: 13px;
    color: var(--vf-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.vf-segmented button.is-active {
    color: var(--vf-ink);
    background: var(--vf-surface);
    box-shadow: 0 1px 3px rgba(18, 19, 26, .11);
}

.vf-segmented .vg-icon,
.vf-segmented .vg-icon svg {
    width: 17px;
    height: 17px;
}

.vf-demo__form {
    display: grid;
    gap: 19px;
    margin-top: 26px;
}

.vf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.vf-demo__form label:not(.vf-check-control) {
    display: grid;
    gap: 8px;
    color: var(--vf-ink);
    font-size: 13px;
    font-weight: 800;
}

.vf-demo__form label small {
    color: var(--vf-muted);
    font-size: 11px;
    font-weight: 500;
}

.vf-demo__form code {
    padding: 2px 5px;
    border-radius: 5px;
    color: var(--vf-primary);
    background: color-mix(in srgb, var(--vf-primary) 9%, transparent);
}

.vf-demo__form input[type="text"],
.vf-demo__form select,
.vf-demo__form textarea {
    width: 100%;
    border: 1px solid var(--vf-line);
    border-radius: 13px;
    color: var(--vf-ink);
    background: var(--vf-surface-soft);
    outline: 0;
}

.vf-demo__form input[type="text"],
.vf-demo__form select {
    height: 48px;
    padding: 0 13px;
}

.vf-demo__form textarea {
    min-height: 118px;
    padding: 13px;
    resize: vertical;
    line-height: 1.55;
}

.vf-demo__form input:focus,
.vf-demo__form select:focus,
.vf-demo__form textarea:focus {
    border-color: var(--vf-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-primary) 12%, transparent);
}

.vf-color-field {
    margin: 0;
    padding: 0;
    border: 0;
}

.vf-color-field legend {
    margin-bottom: 11px;
    font-size: 13px;
    font-weight: 800;
}

.vf-color-field > div {
    display: flex;
    gap: 10px;
}

.vf-color-field button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 4px solid var(--vf-surface);
    border-radius: 50%;
    background: #5865f2;
    box-shadow: 0 0 0 1px var(--vf-line);
}

.vf-color-field button[data-vf-demo-color="green"] {
    background: #23a55a;
}

.vf-color-field button[data-vf-demo-color="orange"] {
    background: #e67e22;
}

.vf-color-field button[data-vf-demo-color="rose"] {
    background: #e05a8a;
}

.vf-color-field button.is-active {
    box-shadow: 0 0 0 2px var(--vf-ink);
}

.vf-check-control {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 11px 13px;
    border: 1px solid var(--vf-line);
    border-radius: 16px;
    background: var(--vf-surface-soft);
}

.vf-check-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.vf-check-control > span {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--vf-muted);
}

.vf-check-control > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    content: "";
    border-radius: 50%;
    background: #fff;
}

.vf-check-control input:checked + span {
    background: var(--vf-primary);
}

.vf-check-control input:checked + span::after {
    left: 21px;
}

.vf-check-control input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--vf-primary) 30%, transparent);
    outline-offset: 2px;
}

.vf-check-control strong {
    font-size: 13px;
    line-height: 1.35;
}

.vf-demo__validation {
    padding: 17px;
    border-radius: 17px;
    background: color-mix(in srgb, var(--vf-success) 8%, var(--vf-surface-soft));
}

.vf-demo__validation > p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: var(--vf-muted);
    font-size: 12px;
    font-weight: 700;
}

.vf-demo__validation > p span {
    color: var(--vf-success);
}

.vf-demo__validation ul {
    display: grid;
    gap: 8px;
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.vf-demo__validation li {
    display: flex;
    gap: 8px;
    color: var(--vf-muted);
}

.vf-demo__validation li span {
    color: var(--vf-success);
    font-weight: 900;
}

.vf-demo__validation li.is-warning,
.vf-demo__validation li.is-warning span {
    color: var(--vf-warning);
}

.vf-demo__result {
    margin: -4px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--vf-success) 35%, transparent);
    border-radius: 13px;
    color: var(--vf-success);
    background: color-mix(in srgb, var(--vf-success) 8%, transparent);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.vf-demo__stage {
    min-width: 0;
    padding: clamp(20px, 3vw, 34px);
    color: #f2f3f5;
    background: #111318;
}

.vf-demo__stage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vf-demo__stage-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.vf-demo__stage-head strong {
    color: #fff;
    font-size: 12px;
}

.vf-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23a55a;
    box-shadow: 0 0 0 4px rgba(35, 165, 90, .14);
}

.vf-discord {
    display: grid;
    grid-template-columns: 66px 172px minmax(330px, 1fr);
    min-height: 600px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    background: #313338;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .24);
}

.vf-discord__servers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    background: #1e1f22;
}

.vf-discord__servers i {
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, .11);
}

.vf-discord__server {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #b5bac1;
    background: #313338;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.vf-discord__server--brand {
    border-radius: 14px;
    color: #fff;
    background: #5865f2;
}

.vf-discord__channels {
    padding: 17px 10px;
    background: #2b2d31;
}

.vf-discord__channels strong {
    display: block;
    overflow: hidden;
    color: #f2f3f5;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-discord__channels small {
    display: block;
    margin-top: 3px;
    color: #949ba4;
    font-size: 10px;
}

.vf-discord__channels > span {
    display: block;
    margin: 26px 4px 8px;
    color: #949ba4;
    font-size: 9px;
    font-weight: 800;
}

.vf-discord__channels p {
    margin: 2px 0;
    padding: 7px 8px;
    overflow: hidden;
    border-radius: 5px;
    color: #949ba4;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-discord__channels p.is-active {
    color: #f2f3f5;
    background: #404249;
}

.vf-discord__conversation {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: #313338;
}

.vf-discord__conversation > header {
    display: grid;
    grid-template-columns: 20px auto 1fr;
    gap: 7px;
    align-items: center;
    min-height: 49px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.vf-discord__conversation > header > span {
    color: #949ba4;
    font-size: 20px;
}

.vf-discord__conversation > header strong {
    font-size: 13px;
}

.vf-discord__conversation > header small {
    overflow: hidden;
    color: #949ba4;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-discord__empty {
    margin-top: auto;
    padding: 22px 18px 15px;
}

.vf-discord__empty > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background: #41434a;
    font-size: 28px;
}

.vf-discord__empty h3 {
    margin: 11px 0 3px;
    color: #f2f3f5;
    font-family: inherit;
    font-size: 19px;
    letter-spacing: -.02em;
}

.vf-discord__empty p {
    margin: 0;
    color: #b5bac1;
    font-size: 11px;
}

.vf-discord__message {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    padding: 10px 18px 14px;
}

.vf-discord__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: #5865f2;
    font-size: 14px;
    font-weight: 900;
}

.vf-discord__author {
    margin: 0 0 7px;
    color: #f2f3f5;
    font-size: 12px;
    font-weight: 700;
}

.vf-discord__author b {
    margin-left: 4px;
    padding: 2px 4px;
    border-radius: 3px;
    color: #fff;
    background: #5865f2;
    font-size: 7px;
}

.vf-discord__author time {
    margin-left: 5px;
    color: #949ba4;
    font-size: 9px;
    font-weight: 400;
}

.vf-discord__embed {
    max-width: 365px;
    padding: 13px 13px 11px;
    border-left: 4px solid #5865f2;
    border-radius: 4px;
    background: #2b2d31;
}

.vf-discord__embed--green {
    border-left-color: #23a55a;
}

.vf-discord__embed--orange {
    border-left-color: #e67e22;
}

.vf-discord__embed--rose {
    border-left-color: #e05a8a;
}

.vf-discord__embed strong {
    display: block;
    font-size: 13px;
}

.vf-discord__embed p {
    margin: 7px 0 11px;
    color: #dbdee1;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.vf-discord__embed small {
    color: #949ba4;
    font-size: 9px;
}

.vf-discord__action {
    min-height: 30px;
    margin-top: 7px;
    padding: 0 11px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    background: #4e5058;
    font-size: 10px;
    font-weight: 600;
}

.vf-discord__composer {
    min-height: 42px;
    margin: 4px 14px 14px;
    padding: 13px;
    border-radius: 8px;
    color: #949ba4;
    background: #383a40;
    font-size: 10px;
}

.vf-demo__stage-note {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    margin-top: 20px;
    padding: 0 4px;
    color: rgba(255, 255, 255, .55);
}

.vf-demo__stage-note .vg-icon {
    color: #8891ff;
}

.vf-demo__stage-note p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
}

.vf-demo__stage-note strong {
    color: rgba(255, 255, 255, .82);
}

.vf-demo__handoff,
.vf-affiliate__footer,
.vf-status__support {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--vf-line);
    border-radius: 30px;
    background: var(--vf-surface);
}

.vf-demo__handoff h2,
.vf-affiliate__footer h2 {
    max-width: 760px;
    margin: 12px 0 0;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.05;
}

/* Statut public */

.vf-status__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .65fr);
    gap: 32px;
    align-items: end;
    min-height: 330px;
    padding: clamp(32px, 5vw, 60px);
    border-radius: 32px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(88, 101, 242, .12), transparent 45%),
        #171923;
}

.vf-status__hero h1 {
    margin: 16px 0 0;
    color: #fff;
    font-size: clamp(56px, 7vw, 90px);
    line-height: .9;
}

.vf-status__hero > div:first-child > p:last-child {
    max-width: 650px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: 18px;
    line-height: 1.6;
}

.vf-status__summary {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 92px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 21px;
    background: rgba(255, 255, 255, .06);
}

.vf-status__summary > span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #7f8794;
}

.vf-status__summary--good > span {
    background: #23c77b;
    box-shadow: 0 0 0 6px rgba(35, 199, 123, .11);
}

.vf-status__summary--warn > span {
    background: #f2a444;
    box-shadow: 0 0 0 6px rgba(242, 164, 68, .11);
}

.vf-status__summary--danger > span {
    background: #f06464;
    box-shadow: 0 0 0 6px rgba(240, 100, 100, .11);
}

.vf-status__summary strong {
    display: block;
    font-size: 15px;
}

.vf-status__summary small {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .52);
    font-size: 11px;
    line-height: 1.4;
}

.vf-status__summary a {
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-weight: 800;
}

.vf-status__notice,
.vf-affiliate__pending {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--vf-warning) 28%, var(--vf-line));
    border-radius: 20px;
    color: #8b4a07;
    background: color-mix(in srgb, var(--vf-warning) 8%, var(--vf-surface));
}

.vf-status__notice .vg-icon,
.vf-affiliate__pending .vg-icon {
    flex: 0 0 auto;
}

.vf-status__notice p,
.vf-affiliate__pending p {
    margin: 0;
    line-height: 1.55;
}

.vf-status__components,
.vf-status__history,
.vf-affiliate__process {
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--vf-line);
    border-radius: 30px;
    background: var(--vf-surface);
}

.vf-status__component-list {
    display: grid;
    gap: 0;
    margin-top: 30px;
    border-top: 1px solid var(--vf-line);
}

.vf-status__component-list article {
    display: grid;
    grid-template-columns: 15px minmax(190px, 1fr) minmax(130px, .4fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 92px;
    border-bottom: 1px solid var(--vf-line);
}

.vf-status__component-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ca3af;
}

.vf-status__component-icon--good {
    background: var(--vf-success);
}

.vf-status__component-icon--warn {
    background: var(--vf-warning);
}

.vf-status__component-icon--danger {
    background: var(--vf-danger);
}

.vf-status__component-list h3 {
    margin: 0;
    font-family: inherit;
    font-size: 16px;
}

.vf-status__component-list p {
    margin: 5px 0 0;
    color: var(--vf-muted);
    font-size: 13px;
}

.vf-status__component-list article > small {
    color: var(--vf-muted);
    font-size: 12px;
    text-align: right;
}

.vf-status__pill {
    min-width: 102px;
    padding: 7px 10px;
    border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.vf-status__pill--good {
    color: #08764d;
    background: color-mix(in srgb, var(--vf-success) 14%, transparent);
}

.vf-status__pill--warn {
    color: #9a5100;
    background: color-mix(in srgb, var(--vf-warning) 14%, transparent);
}

.vf-status__pill--danger {
    color: #b52e2e;
    background: color-mix(in srgb, var(--vf-danger) 14%, transparent);
}

.vf-status__pill--neutral {
    color: var(--vf-muted);
    background: var(--vf-surface-soft);
}

.vf-status__timeline {
    display: grid;
    grid-template-columns: repeat(24, minmax(5px, 1fr));
    gap: 5px;
    height: 78px;
    margin-top: 34px;
}

.vf-status__timeline > span {
    border-radius: 7px;
    background: #b8bec7;
}

.vf-status__timeline .is-online,
.vf-status__legend .is-online {
    background: var(--vf-success);
}

.vf-status__timeline .is-degraded,
.vf-status__legend .is-degraded {
    background: var(--vf-warning);
}

.vf-status__timeline .is-offline,
.vf-status__legend .is-offline {
    background: var(--vf-danger);
}

.vf-status__timeline .is-unknown,
.vf-status__legend .is-unknown {
    background: #b8bec7;
}

.vf-status__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    color: var(--vf-muted);
    font-size: 11px;
}

.vf-status__legend span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.vf-status__legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vf-status__disclaimer {
    margin: 18px 0 0;
    color: var(--vf-muted);
    font-size: 11px;
}

.vf-status__support > div {
    display: flex;
    gap: 15px;
    align-items: center;
}

.vf-status__support .vg-icon {
    color: var(--vf-primary);
}

.vf-status__support strong,
.vf-status__support small {
    display: block;
}

.vf-status__support small {
    max-width: 700px;
    margin-top: 5px;
    color: var(--vf-muted);
    line-height: 1.5;
}

/* Affiliation */

.vf-page-hero--affiliate {
    background:
        linear-gradient(135deg, rgba(124, 58, 237, .12), transparent 54%),
        var(--vf-surface);
}

.vf-affiliate__seal {
    position: relative;
    padding: 30px;
    border: 1px solid var(--vf-line);
    border-radius: 28px;
    background: var(--vf-surface);
}

.vf-affiliate__seal > span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--vf-primary), #7c3aed);
}

.vf-affiliate__seal strong {
    display: block;
    margin-top: 30px;
    font-size: 27px;
    line-height: 1.06;
}

.vf-affiliate__seal p {
    margin: 15px 0 0;
    color: var(--vf-muted);
    line-height: 1.55;
}

.vf-affiliate__dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: 20px;
}

.vf-affiliate__link-card,
.vf-affiliate__stats {
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid var(--vf-line);
    border-radius: 28px;
    background: var(--vf-surface);
}

.vf-affiliate__code {
    display: inline-flex;
    padding: 8px 11px;
    border-radius: 9px;
    color: var(--vf-primary);
    background: color-mix(in srgb, var(--vf-primary) 9%, transparent);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .08em;
}

.vf-affiliate__link-card > label {
    display: block;
    margin-top: 29px;
    font-size: 12px;
    font-weight: 800;
}

.vf-copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 9px;
}

.vf-copy-field input {
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--vf-line);
    border-radius: 13px;
    color: var(--vf-ink);
    background: var(--vf-surface-soft);
}

.vf-copy-field button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-width: 108px;
    padding: 0 16px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: var(--vf-primary);
    font-size: 12px;
    font-weight: 800;
}

.vf-copy-field button.is-copied {
    background: var(--vf-success);
}

.vf-affiliate__link-card > p {
    margin: 14px 0 0;
    color: var(--vf-muted);
    font-size: 12px;
    line-height: 1.55;
}

.vf-affiliate__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    overflow: hidden;
    background: var(--vf-line);
}

.vf-affiliate__stats article {
    min-height: 145px;
    padding: 20px;
    background: var(--vf-surface);
}

.vf-affiliate__stats span,
.vf-affiliate__stats small {
    display: block;
    color: var(--vf-muted);
    font-size: 10px;
}

.vf-affiliate__stats strong {
    display: block;
    margin: 20px 0 5px;
    font-size: clamp(25px, 3vw, 35px);
    letter-spacing: -.04em;
}

.vf-affiliate__dashboard > .vf-affiliate__pending {
    grid-column: 1 / -1;
}

.vf-affiliate__pending .vg-btn {
    margin-left: auto;
    flex: 0 0 auto;
}

.vf-affiliate__process ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 34px 0 0;
    padding: 0;
    border-top: 1px solid var(--vf-line);
    list-style: none;
}

.vf-affiliate__process li {
    min-height: 230px;
    padding: 24px 22px;
    border-right: 1px solid var(--vf-line);
}

.vf-affiliate__process li:last-child {
    border-right: 0;
}

.vf-affiliate__process li > span {
    color: var(--vf-primary);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 800;
}

.vf-affiliate__process li div {
    margin-top: 68px;
}

.vf-affiliate__process li strong {
    font-size: 18px;
}

.vf-affiliate__process li p {
    margin: 9px 0 0;
    color: var(--vf-muted);
    font-size: 13px;
    line-height: 1.55;
}

.vf-affiliate__rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.vf-affiliate__rules article {
    min-height: 260px;
    padding: 28px;
    border: 1px solid var(--vf-line);
    border-radius: 26px;
    background: var(--vf-surface);
}

.vf-affiliate__rules .vg-icon {
    color: var(--vf-primary);
}

.vf-affiliate__rules h3 {
    margin: 55px 0 0;
    font-family: inherit;
    font-size: 19px;
}

.vf-affiliate__rules p {
    margin: 11px 0 0;
    color: var(--vf-muted);
    line-height: 1.6;
}


.vf-support {
    --vf-support-bg: #f8f7f3;
    --vf-support-card: #ffffff;
    --vf-support-ink: #171923;
    --vf-support-muted: #6d7180;
    --vf-support-line: rgba(23, 25, 35, .13);
    --vf-support-primary: #5865f2;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    font-family: var(--font-body, Inter, system-ui, sans-serif);
}

.vf-support__launcher {
    display: flex;
    gap: 11px;
    align-items: center;
    min-width: 190px;
    min-height: 58px;
    padding: 8px 17px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    color: #fff;
    background: #171923;
    box-shadow: 0 14px 35px rgba(10, 12, 19, .22);
}

.vf-support__launcher > span {
    text-align: left;
}

.vf-support__launcher strong,
.vf-support__launcher small {
    display: block;
}

.vf-support__launcher strong {
    font-size: 13px;
}

.vf-support__launcher small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .54);
    font-size: 10px;
}

.vf-support__launcher::before {
    content: "✦";
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #a7adff;
    font-family: var(--font-body, Inter, system-ui, sans-serif);
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 0 16px rgba(142, 151, 255, .7);
}

.vf-support__launcher .vg-icon {
    display: none;
}

.vf-support__panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: grid;
    grid-template-rows: auto minmax(170px, 1fr) auto auto auto;
    width: min(410px, calc(100vw - 32px));
    height: min(650px, calc(100vh - 120px));
    overflow: hidden;
    border: 1px solid var(--vf-support-line);
    border-radius: 24px;
    color: var(--vf-support-ink);
    background: var(--vf-support-bg);
    box-shadow: 0 24px 70px rgba(10, 12, 19, .25);
}

.vf-support__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    min-height: 78px;
    padding: 16px 18px;
    color: #fff;
    background: #171923;
}

.vf-support__head > div {
    display: grid;
    grid-template-columns: 9px 1fr;
    gap: 2px 10px;
    align-items: center;
}

.vf-support__presence {
    grid-row: 1 / span 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23c77b;
}

.vf-support__head p,
.vf-support__head small {
    margin: 0;
}

.vf-support__head p {
    font-size: 13px;
    font-weight: 800;
}

.vf-support__head small {
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
}

.vf-support__head button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    font-size: 20px;
}

.vf-support__messages {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 18px;
    overscroll-behavior: contain;
}

.vf-support__message {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 9px;
    align-self: flex-start;
    max-width: 94%;
}

.vf-support__message > span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    color: #fff;
    background: var(--vf-support-primary);
    font-size: 10px;
    font-weight: 900;
}

.vf-support__message p {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--vf-support-line);
    border-radius: 4px 15px 15px;
    background: var(--vf-support-card);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.vf-support__message--user {
    grid-template-columns: minmax(0, 1fr);
    align-self: flex-end;
}

.vf-support__message--user p {
    border-color: transparent;
    border-radius: 15px 4px 15px 15px;
    color: #fff;
    background: var(--vf-support-primary);
}

.vf-support__message--error p {
    color: #a12e2e;
    background: #fff1f1;
}

.vf-support__message a {
    display: inline-flex;
    margin-top: 9px;
    color: var(--vf-support-primary);
    font-weight: 800;
}

.vf-support__suggestions {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 18px 12px;
}

.vf-support__suggestions button {
    flex: 0 0 auto;
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid var(--vf-support-line);
    border-radius: 999px;
    color: var(--vf-support-muted);
    background: var(--vf-support-card);
    font-size: 10px;
    font-weight: 700;
}

.vf-support__form {
    display: grid;
    gap: 7px;
    padding: 13px 18px;
    border-top: 1px solid var(--vf-support-line);
    background: var(--vf-support-card);
}

.vf-support__form > label {
    color: var(--vf-support-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vf-support__form textarea {
    width: 100%;
    min-height: 70px;
    max-height: 130px;
    padding: 10px 11px;
    resize: vertical;
    border: 1px solid var(--vf-support-line);
    border-radius: 11px;
    color: var(--vf-support-ink);
    background: var(--vf-support-bg);
    font-size: 12px;
    line-height: 1.45;
}

.vf-support__form > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vf-support__form small {
    color: var(--vf-support-muted);
    font-size: 9px;
}

.vf-support__form button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--vf-support-primary);
    font-size: 11px;
    font-weight: 800;
}

.vf-support__form button:disabled {
    cursor: wait;
    opacity: .58;
}

.vf-support__privacy {
    margin: 0;
    padding: 9px 18px 12px;
    color: var(--vf-support-muted);
    background: var(--vf-support-card);
    font-size: 8px;
    line-height: 1.4;
}

/* Server onboarding and permission diagnostics */
.guild-progress {
    display: block;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    appearance: none;
    accent-color: var(--primary);
    background: var(--secondary);
}

.guild-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--secondary);
}

.guild-progress::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), #7b68ee);
}

.guild-progress::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), #7b68ee);
}

.guild-checklist {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.guild-checklist > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--card-soft);
}

.guild-checklist > div > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 900;
}

.guild-checklist .is-done > span {
    color: #007a4f;
    background: var(--success-soft);
}

.guild-checklist .is-pending > span {
    color: var(--warning);
    background: var(--warning-soft);
}

.guild-checklist p,
.guild-checklist strong,
.guild-checklist small {
    display: block;
    margin: 0;
}

.guild-checklist small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.4;
}

.guild-diagnostic__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 22px;
    align-items: start;
}

.guild-diagnostic__issues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.guild-diagnostic__issue {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 17px;
    background: var(--card-soft);
}

.guild-diagnostic__issue.is-critical {
    border-left-color: var(--danger);
}

.guild-diagnostic__issue.is-warning {
    border-left-color: var(--warning);
}

.guild-diagnostic__issue.is-info {
    border-left-color: var(--primary);
}

.guild-diagnostic__issue-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 13px;
}

.guild-diagnostic__issue-head > span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guild-diagnostic__issue > strong {
    display: block;
    line-height: 1.35;
}

.guild-diagnostic__issue > p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.guild-diagnostic__issue > small {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--fg);
    line-height: 1.45;
}

.guild-diagnostic__success,
.guild-diagnostic__empty {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 132px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card-soft);
}

.guild-diagnostic__success > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #007a4f;
    background: var(--success-soft);
    font-size: 20px;
    font-weight: 900;
}

.guild-diagnostic__success p,
.guild-diagnostic__empty p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.guild-diagnostic__empty {
    display: grid;
    align-content: center;
}

.guild-diagnostic__action {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--secondary);
}

.guild-diagnostic__score {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.guild-diagnostic__score strong {
    font-family: var(--font-display, sans-serif);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1;
}

.guild-diagnostic__score span,
.guild-diagnostic__action > small {
    color: var(--muted);
}

.guild-diagnostic__action form,
.guild-diagnostic__action .vg-btn {
    width: 100%;
}

.guild-diagnostic__action > small {
    font-size: 12px;
    line-height: 1.45;
}

/* Contextual plan comparison */
.pricing-comparator {
    margin-bottom: 24px;
}

.pricing-contexts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pricing-contexts a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--card-soft);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.pricing-contexts a:hover,
.pricing-contexts a:focus-visible {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.pricing-contexts a.is-active {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
}

.pricing-comparator .admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
}

.pricing-comparison-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.pricing-comparison-table th,
.pricing-comparison-table td {
    padding: 15px 17px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.pricing-comparison-table th {
    color: var(--muted);
    background: var(--card-soft);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pricing-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.pricing-comparison-table td:nth-child(n+3),
.pricing-comparison-table th:nth-child(n+3) {
    text-align: center;
}

.pricing-capability {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
}

.pricing-capability.is-included {
    color: #007a4f;
    background: var(--success-soft);
}

.pricing-capability.is-absent {
    color: var(--muted);
    background: var(--secondary);
}

.pricing-comparator__note {
    margin: 18px 0 0;
    padding: 15px 17px;
    border-left: 3px solid var(--primary);
    border-radius: 0 14px 14px 0;
    color: var(--muted);
    background: var(--secondary);
    line-height: 1.55;
}

.pricing-comparator__note strong {
    color: var(--fg);
}

/* Testimonials stay hidden until a verified database record is published. */
.vg-verified-proof {
    margin-top: 30px;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
}

.vg-verified-proof__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.vg-verified-proof blockquote {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    margin: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card-soft);
}

.vg-verified-proof blockquote > p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

.vg-verified-proof blockquote footer {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding-top: 24px;
}

.vg-verified-proof blockquote footer span {
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 1120px) {
    .vf-demo__workspace {
        grid-template-columns: 1fr;
    }

    .vf-demo__editor {
        border-right: 0;
        border-bottom: 1px solid var(--vf-line);
    }

    .vf-affiliate__dashboard {
        grid-template-columns: 1fr;
    }

    .vf-affiliate__process ol {
        grid-template-columns: repeat(2, 1fr);
    }

    .vf-affiliate__process li:nth-child(2) {
        border-right: 0;
    }

    .vf-affiliate__process li:nth-child(-n+2) {
        border-bottom: 1px solid var(--vf-line);
    }

    .guild-diagnostic__issues,
    .vg-verified-proof__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {
    .vf-page-hero,
    .vf-status__hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .vf-page-hero__proof {
        grid-template-columns: repeat(3, 1fr);
    }

    .vf-page-hero__proof > span {
        grid-template-columns: 1fr;
        align-content: start;
        border-right: 1px solid var(--vf-line);
    }

    .vf-page-hero__proof > span:last-child {
        border-right: 0;
    }

    .vf-page-hero__proof .vg-icon {
        grid-row: auto;
        margin-bottom: 8px;
    }

    .vf-section-heading {
        display: grid;
    }

    .vf-section-heading > p {
        text-align: left;
    }

    .vf-discord {
        grid-template-columns: 56px 140px minmax(300px, 1fr);
        overflow-x: auto;
    }

    .vf-demo__handoff,
    .vf-affiliate__footer,
    .vf-status__support {
        align-items: flex-start;
        flex-direction: column;
    }

    .vf-status__component-list article {
        grid-template-columns: 13px minmax(0, 1fr) auto;
        padding: 15px 0;
    }

    .vf-status__component-list article > small {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
    }

    .vf-status__pill {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .vf-affiliate__rules {
        grid-template-columns: 1fr;
    }

    .guild-diagnostic__layout {
        grid-template-columns: 1fr;
    }

    .guild-diagnostic__action {
        grid-template-columns: auto minmax(180px, 1fr);
        align-items: center;
    }

    .guild-diagnostic__action > small {
        grid-column: 1 / -1;
    }

    .vg-verified-proof__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .vf-feature {
        gap: 16px;
    }

    .vf-page-hero,
    .vf-status__hero {
        padding: 27px 22px;
        border-radius: 24px;
    }

    .vf-page-hero h1 {
        font-size: 44px;
    }

    .vf-page-hero__proof {
        grid-template-columns: 1fr;
    }

    .vf-page-hero__proof > span {
        grid-template-columns: 32px 1fr;
        border-right: 0;
    }

    .vf-page-hero__proof .vg-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    .vf-demo__workspace,
    .vf-status__components,
    .vf-status__history,
    .vf-affiliate__process {
        border-radius: 23px;
    }

    .vf-demo__editor,
    .vf-demo__stage,
    .vf-status__components,
    .vf-status__history,
    .vf-affiliate__process {
        padding: 22px 18px;
    }

    .vf-form-grid {
        grid-template-columns: 1fr;
    }

    .vf-segmented button {
        min-height: 44px;
        font-size: 0;
    }

    .vf-segmented .vg-icon {
        width: 19px;
        height: 19px;
    }

    .vf-discord {
        grid-template-columns: 46px minmax(310px, 1fr);
        min-height: 520px;
    }

    .vf-discord__channels {
        display: none;
    }

    .vf-status__summary {
        grid-template-columns: 13px 1fr;
    }

    .vf-status__summary a {
        grid-column: 2;
    }

    .vf-status__component-list article {
        grid-template-columns: 12px 1fr;
    }

    .vf-status__pill {
        grid-column: 2;
        grid-row: auto;
        justify-self: start;
    }

    .vf-status__timeline {
        grid-template-columns: repeat(12, 1fr);
        height: 120px;
    }

    .vf-affiliate__stats {
        grid-template-columns: 1fr 1fr;
    }

    .vf-affiliate__process ol {
        grid-template-columns: 1fr;
    }

    .vf-affiliate__process li,
    .vf-affiliate__process li:nth-child(2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--vf-line);
    }

    .vf-affiliate__process li:last-child {
        border-bottom: 0;
    }

    .vf-affiliate__process li div {
        margin-top: 35px;
    }

    .vf-copy-field {
        grid-template-columns: 1fr;
    }

    .vf-copy-field button {
        min-height: 46px;
        justify-content: center;
    }

    .vf-support {
        right: 16px;
        bottom: 16px;
    }

    .vf-support__launcher {
        min-width: 58px;
        width: 58px;
        padding: 0;
        justify-content: center;
    }

    .vf-support__launcher > span {
        display: none;
    }

    .vf-support__panel {
        position: fixed;
        right: 12px;
        bottom: 84px;
        width: calc(100vw - 24px);
        height: min(650px, calc(100vh - 100px));
    }

    .guild-diagnostic .vg-card-header {
        display: grid;
    }

    .guild-diagnostic__issues,
    .guild-diagnostic__action {
        grid-template-columns: 1fr;
    }

    .guild-diagnostic__action > small {
        grid-column: auto;
    }

    .guild-diagnostic__score {
        justify-content: center;
    }

    .pricing-contexts {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pricing-contexts a {
        justify-content: center;
        text-align: center;
    }
}

.module-presets {
    margin: 18px 0;
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid color-mix(in srgb, var(--vf-primary, var(--primary)) 24%, var(--vf-line, var(--border)));
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--vf-primary, var(--primary)) 13%, transparent), transparent 38%),
        var(--vf-surface, var(--card));
    box-shadow: 0 20px 52px color-mix(in srgb, #000 12%, transparent);
}

.vg-server-card__actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.vg-locale-picker {
    margin: 0;
}

/* Public pages also use the enhanced select component. Keep its menu out of
   the document flow and give it the same finished treatment as module forms. */
.v-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.v-select__native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.v-select__button {
    display: grid;
    width: 100%;
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--fg);
    background: var(--card);
    text-align: left;
    cursor: pointer;
}

.v-select__button .v-select__value,
.v-select__option-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v-select__button small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.v-select__chevron {
    color: var(--muted);
    transition: transform .18s ease;
}

.v-select.is-open .v-select__chevron {
    transform: rotate(180deg);
}

.v-select__menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.v-select.is-open .v-select__menu {
    display: block;
}

.v-select__search {
    display: none;
    width: calc(100% - 20px);
    min-height: 42px;
    margin: 10px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--fg);
    background: var(--card-soft);
}

.v-select__menu.has-search .v-select__search {
    display: block;
}

.v-select__list {
    max-height: 300px;
    overflow: auto;
    padding: 7px;
}

.v-select__option {
    display: grid;
    width: 100%;
    min-height: 42px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 0;
    border-radius: 11px;
    color: var(--fg);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.v-select__option:hover,
.v-select__option.is-selected {
    color: var(--primary);
    background: var(--primary-soft);
}

.v-select__option-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 11px;
    font-weight: 900;
}

.v-select__empty {
    padding: 15px;
    color: var(--muted);
    text-align: center;
}

.vg-locale-picker .v-select {
    width: 156px;
}

.vg-locale-picker select {
    min-width: 76px;
    min-height: 42px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    background: var(--panel);
    font: 700 .78rem/1 "Inter", sans-serif;
    cursor: pointer;
}

.vg-server-card__actions form {
    display: contents;
}

.vg-server-card__actions .vg-btn {
    width: 100%;
    min-height: 43px;
    padding-inline: 12px;
    text-align: center;
    white-space: normal;
}

.vg-btn-premium-state {
    border-color: color-mix(in srgb, #f5b942 48%, var(--border));
    color: #a96600;
    background: color-mix(in srgb, #f5b942 13%, var(--card));
}

.vg-btn-premium-state:hover {
    border-color: #f5b942;
    color: #7c4d00;
}

.vg-btn-premium-state.is-active {
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    cursor: default;
}

.vg-btn-premium-state.is-locked {
    color: var(--muted);
    background: var(--card-soft);
    cursor: default;
}

.guild-premium-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 22px;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card-soft);
}

.guild-premium-control.is-active {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--card)), var(--card-soft));
}

.guild-premium-control h3 {
    margin: 9px 0 5px;
}

.guild-premium-control p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}

.guild-premium-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 750;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .vg-top-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-end;
    }

    .vg-locale-picker .v-select {
        width: 136px;
    }

    .vg-locale-picker .v-select__button small {
        display: none;
    }

    .vg-server-card__actions {
        grid-template-columns: 1fr;
    }

    .guild-premium-control {
        align-items: flex-start;
        flex-direction: column;
    }
}

.module-presets__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.module-presets__header h2 {
    margin: 5px 0 7px;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.module-presets__header p {
    max-width: 760px;
    margin: 0;
    color: var(--vf-muted, var(--muted));
    line-height: 1.65;
}

.module-presets__safe {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, #22c55e 35%, var(--vf-line, var(--border)));
    border-radius: 999px;
    color: #22c55e;
    background: color-mix(in srgb, #22c55e 10%, transparent);
    font-size: .78rem;
    font-weight: 750;
}

.module-presets__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.module-preset-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--vf-line, var(--border));
    border-radius: 19px;
    background: color-mix(in srgb, var(--vf-surface-soft, var(--card-soft)) 90%, var(--vf-primary, var(--primary)) 10%);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.module-preset-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--vf-primary, var(--primary)) 48%, var(--vf-line, var(--border)));
    box-shadow: 0 14px 34px color-mix(in srgb, #000 14%, transparent);
}

.module-preset-card.is-active {
    border-color: color-mix(in srgb, #22c55e 58%, var(--vf-line, var(--border)));
    background:
        linear-gradient(160deg, color-mix(in srgb, #22c55e 10%, var(--vf-surface-soft, var(--card-soft))), var(--vf-surface-soft, var(--card-soft)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 18%, transparent);
}

.module-preset-card.is-active .module-preset-card__tag {
    color: #22c55e;
    background: color-mix(in srgb, #22c55e 13%, transparent);
}

.module-preset-card .btn:disabled {
    color: #22c55e;
    border-color: color-mix(in srgb, #22c55e 30%, var(--border));
    background: color-mix(in srgb, #22c55e 9%, var(--card-soft));
    cursor: default;
    opacity: 1;
}

.module-preset-card__top {
    min-height: 132px;
}

.module-preset-card__tag {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vf-primary, var(--primary)) 14%, transparent);
    color: var(--vf-primary, var(--primary));
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.module-preset-card h3 {
    margin: 0 0 7px;
    font-size: 1.08rem;
}

.module-preset-card p {
    margin: 0;
    color: var(--vf-muted, var(--muted));
    font-size: .9rem;
    line-height: 1.55;
}

.module-preset-card ul {
    display: grid;
    gap: 8px;
    margin: 16px 0 20px;
    padding: 0;
    list-style: none;
}

.module-preset-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vf-ink, var(--fg));
    font-size: .85rem;
}

.module-preset-card li svg {
    width: 18px;
    height: 18px;
    color: #22c55e;
}

.module-preset-card form {
    margin-top: auto;
}

.module-preset-card .btn {
    width: 100%;
    min-height: 44px;
    white-space: normal;
}

.module-context-bar,
.module-resource-notice,
.module-applied-preset {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0 18px;
    padding: 15px 17px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    border-radius: 20px;
    background: color-mix(in srgb, var(--card) 92%, var(--primary) 8%);
}

.module-context-bar {
    justify-content: space-between;
}

.module-context-status {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.module-context-status > span:last-child {
    display: grid;
    gap: 3px;
}

.module-context-status strong {
    font-size: .95rem;
}

.module-context-status small,
.module-resource-notice p,
.module-applied-preset p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.module-context-status.is-active .module-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 6px color-mix(in srgb, #22c55e 13%, transparent);
}

.module-context-status.is-inactive .module-status-dot {
    background: #94a3b8;
    box-shadow: 0 0 0 6px color-mix(in srgb, #94a3b8 13%, transparent);
}

.module-resource-notice {
    align-items: flex-start;
    border-color: color-mix(in srgb, #f59e0b 38%, var(--border));
    background: color-mix(in srgb, #f59e0b 8%, var(--card));
}

.module-resource-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 15px;
    border: 1px solid color-mix(in srgb, #f59e0b 36%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, #f59e0b 8%, var(--card-soft));
}

.module-resource-hint .vg-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #f59e0b;
}

.module-resource-hint strong {
    display: block;
    margin-bottom: 3px;
}

.module-resource-hint p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.module-resource-notice .vg-icon,
.module-applied-preset .vg-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--primary);
}

.module-resource-notice strong,
.module-applied-preset strong {
    display: block;
    margin-bottom: 3px;
}

.module-applied-preset {
    align-items: flex-start;
    border-color: color-mix(in srgb, #22c55e 38%, var(--border));
    background: color-mix(in srgb, #22c55e 8%, var(--card));
}

.module-applied-preset > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: #22c55e;
    background: color-mix(in srgb, #22c55e 14%, transparent);
}

.module-applied-preset small {
    display: block;
    margin-bottom: 2px;
    color: #22c55e;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.module-support-overlay {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 6, 15, .76);
    backdrop-filter: blur(10px);
}

.module-support-overlay.is-open {
    display: flex;
}

.module-support-modal {
    width: min(640px, 100%);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
    border-radius: 26px;
    color: var(--fg);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 18%, transparent), transparent 42%),
        var(--card);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
}

.module-support-header,
.module-support-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
}

.module-support-header {
    border-bottom: 1px solid var(--border);
}

.module-support-header h3,
.module-support-header p,
.module-support-content h4,
.module-support-content p {
    margin: 0;
}

.module-support-header h3 {
    font-size: 1.28rem;
}

.module-support-header p,
.module-support-content p {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.65;
}

.module-support-close {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--fg);
    background: var(--card-soft);
    font-size: 1.35rem;
    cursor: pointer;
}

.module-support-content {
    padding: 28px 22px;
}

.module-support-content h4 {
    font-size: 1.45rem;
}

.module-support-content ul {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.module-support-content li {
    position: relative;
    padding: 12px 14px 12px 42px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-soft);
}

.module-support-content li::before {
    position: absolute;
    top: 12px;
    left: 14px;
    content: "✓";
    color: #22c55e;
    font-weight: 900;
}

.module-support-footer {
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-soft) 75%, transparent);
}

.module-support-progress {
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: .75rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .module-presets__grid {
        grid-template-columns: 1fr;
    }

    .module-preset-card__top {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .module-presets__header {
        display: grid;
    }

    .module-presets__safe {
        justify-self: start;
    }

    .module-context-bar,
    .module-support-header,
    .module-support-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .module-context-bar .module-command-actions,
    .module-support-footer .module-command-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vf-feature *,
    .vf-support * {
        scroll-behavior: auto !important;
    }
}

/* Guided module configuration */
.module-guided-setup {
    display: grid;
    gap: 22px;
    margin-bottom: 20px;
    padding: 26px;
    border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, var(--primary) 4%), var(--card));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
}

.module-guided-setup h2 {
    margin: 5px 0 6px;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
}

.module-guided-setup p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
}

.module-guided-modes {
    display: inline-flex;
    justify-self: start;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card-soft) 88%, transparent);
}

.module-guided-modes button {
    padding: 10px 15px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.module-guided-modes button.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 30%, transparent);
}

.module-guided-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.module-guided-steps span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--card-soft) 82%, transparent);
    font-weight: 750;
}

.module-guided-steps b {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary-light, #8b8cff);
}

.module-page:not(.is-expert-config) .config-advanced {
    display: none !important;
}

.ticket-launchpad {
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, #22c55e 35%, var(--border));
    border-radius: 22px;
    background: linear-gradient(145deg, color-mix(in srgb, #22c55e 7%, var(--card)), var(--card));
}

.ticket-launchpad__head,
.ticket-launchpad__list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ticket-launchpad__head h3 {
    margin: 4px 0 0;
    font-size: 1.35rem;
}

.ticket-launchpad__state {
    padding: 7px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #f59e0b;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ticket-launchpad__state.is-ready {
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #22c55e;
}

.ticket-launchpad__form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.ticket-launchpad__form label,
.ticket-launchpad__list,
.ticket-launchpad__list article > div {
    display: grid;
    gap: 7px;
}

.ticket-launchpad__form label > span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

.ticket-launchpad__list article {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card-soft);
}

.ticket-launchpad__list article span,
.ticket-launchpad__help {
    color: var(--muted);
    font-size: .88rem;
}

@media (max-width: 900px) {
    .ticket-launchpad__form,
    .module-guided-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .module-guided-setup,
    .ticket-launchpad {
        padding: 18px;
    }

    .module-guided-modes,
    .ticket-launchpad__head,
    .ticket-launchpad__list article {
        align-items: stretch;
        flex-direction: column;
    }

    .module-guided-modes button,
    .ticket-launchpad__list .btn {
        width: 100%;
    }
}