:root {
    color-scheme: dark;
    --vcfu-bg: #080b10;
    --vcfu-panel: #11171e;
    --vcfu-raised: #192028;
    --vcfu-border: #344150;
    --vcfu-text: #f7f8fb;
    --vcfu-muted: #b6c3d3;
    --vcfu-orange: #ff8c00;
    --vcfu-orange-hover: #ffad48;
    --vcfu-green: #95e9b7;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.55;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--vcfu-bg);
    color: var(--vcfu-text);
}

button, input { font: inherit; }

a {
    color: var(--vcfu-orange-hover);
    text-underline-offset: .2em;
}

a:hover { color: var(--vcfu-text); }

:where(a, button, input, summary):focus-visible {
    outline: 2px solid var(--vcfu-orange-hover);
    outline-offset: 4px;
}

.vcfu-frame {
    width: min(48rem, calc(100% - 2.5rem));
    margin-inline: auto;
}

.vcfu-header {
    background: #0e1318;
    border-block-end: 1px solid var(--vcfu-border);
}

.vcfu-header-inner {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vcfu-logo {
    display: block;
    width: 8.8125rem;
    height: auto;
}

.vcfu-secure {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    color: var(--vcfu-muted);
}

.vcfu-secure svg { color: var(--vcfu-orange); }

.vcfu-main { padding-block: 1.75rem 2rem; }
.vcfu-main-narrow { max-width: 32rem; }
.vcfu-intro { margin-block-end: 1rem; }

h1, h2, p { margin: 0; }
h1, h2 { line-height: 1.2; }
h1 { font-size: 2rem; letter-spacing: -.025em; }
h2 { font-size: 1.125rem; }

.vcfu-intro > p:not(.vcfu-reference) {
    max-width: 56ch;
    margin-block-start: .6rem;
    color: var(--vcfu-muted);
}

.vcfu-reference {
    margin-block-start: .45rem;
    color: var(--vcfu-muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.vcfu-reference strong { color: var(--vcfu-orange-hover); }

.vcfu-panel,
.vcfu-collection,
.vcfu-message {
    padding: 1.25rem;
    border: 1px solid var(--vcfu-border);
    border-radius: .75rem;
}

.vcfu-panel { background: var(--vcfu-panel); }
.vcfu-collection, .vcfu-message { margin-block-end: 1rem; }

.vcfu-collection p {
    margin-block: .5rem;
    color: var(--vcfu-muted);
}

.vcfu-collection p,
.vcfu-message { overflow-wrap: anywhere; }

.vcfu-collection a,
.vcfu-collection p { font-size: .9375rem; }

.vcfu-message {
    background: #34200c;
    border-color: #925817;
    color: #ffe2b5;
}

.vcfu-complete {
    background: #14271d;
    border-color: #36654a;
    color: #c4f4d6;
}

.vcfu-panel-heading,
.vcfu-slot-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
    flex-wrap: wrap;
}

.vcfu-panel-heading + p,
.vcfu-sign form { margin-block-start: .55rem; }

.vcfu-count, .vcfu-file-help, .vcfu-sign p {
    font-size: .9375rem;
    color: var(--vcfu-muted);
}

.vcfu-slots {
    padding: 0;
    margin: .8rem 0 0;
    list-style: none;
}

.vcfu-slot {
    padding-block: 1rem;
    border-block-start: 1px solid var(--vcfu-border);
}

.vcfu-slot:last-child { padding-block-end: 0; }
.vcfu-slot-heading { align-items: center; }
.vcfu-slot-heading > :is(label, span:first-child) { font-weight: 650; }

.vcfu-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: .3rem;
    padding: .18rem .48rem;
    font-size: .8125rem;
    font-weight: 600;
    background: #252e3a;
    color: var(--vcfu-muted);
}

.vcfu-received { background: #183326; color: var(--vcfu-green); }

.vcfu-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem .8rem;
    margin-block-start: .5rem;
}

.vcfu-upload input[type=file] {
    flex: 1 1 13rem;
    max-width: 100%;
    min-width: 0;
    padding: .12rem;
    color: var(--vcfu-muted);
    font-size: .875rem;
}

.vcfu-button,
.vcfu-upload input::file-selector-button,
.vcfu-code {
    min-height: 2.75rem;
    padding: .45rem .85rem;
    border: 1px solid var(--vcfu-border);
    border-radius: .45rem;
    background: var(--vcfu-raised);
    color: var(--vcfu-text);
}

.vcfu-button,
.vcfu-upload input::file-selector-button {
    cursor: pointer;
    font-weight: 650;
}

.vcfu-upload input::file-selector-button {
    margin-inline-end: .55rem;
    font: inherit;
}

.vcfu-button:hover,
.vcfu-upload input:hover::file-selector-button { background: #253240; }

.vcfu-primary {
    background: var(--vcfu-orange);
    border-color: var(--vcfu-orange);
    color: #171006;
}

.vcfu-primary:hover {
    background: var(--vcfu-orange-hover);
    border-color: var(--vcfu-orange-hover);
}

.vcfu-sign { margin-block-start: 1rem; }
.vcfu-sign form { margin-block-start: .85rem; }

.vcfu-verify {
    display: grid;
    justify-items: start;
    gap: .6rem;
}

.vcfu-verify label { font-weight: 650; }

.vcfu-code {
    width: 10.5rem;
    max-width: 100%;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .18em;
}

.vcfu-verify .vcfu-button { margin-block-start: .2rem; }

.vcfu-link-button {
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vcfu-orange-hover);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.vcfu-link-button:hover { color: var(--vcfu-text); }
.vcfu-resend { margin-block-start: .5rem; }

.vcfu-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding-block: 1rem 2rem;
    border-block-start: 1px solid var(--vcfu-border);
    font-size: .875rem;
    color: var(--vcfu-muted);
}

@media (max-width: 32rem) {
    .vcfu-frame { width: calc(100% - 2rem); }
    .vcfu-main { padding-block-start: 1.3rem; }
    .vcfu-panel, .vcfu-message { padding: 1rem; }
    .vcfu-upload input[type=file] { flex-basis: 100%; }
    h1 { font-size: 1.75rem; }
}


.vcfu-sign-form {
    display: grid;
    gap: .65rem;
    justify-items: start;
}

.vcfu-name {
    background: var(--vcfu-bg, #080b10);
    border: 1px solid var(--vcfu-border, #657080);
    border-radius: .45rem;
    color: inherit;
    font: inherit;
    max-width: 100%;
    min-height: 44px;
    padding: .6rem .75rem;
    width: min(100%, 18rem);
}

.vcfu-consent {
    align-items: start;
    display: flex;
    gap: .65rem;
    padding-block: .5rem;
}

.vcfu-consent input {
    accent-color: #ff6b00;
    flex: none;
    height: 1.15rem;
    margin: .13rem 0 0;
    width: 1.15rem;
}

.vcfu-collection { padding: 0 .9rem; }
.vcfu-collection[open] { padding-block-end: .65rem; }
.vcfu-collection summary {
    color: var(--vcfu-orange-hover);
    cursor: pointer;
    font-size: .9375rem;
    font-weight: 650;
    padding-block: .65rem;
}
.vcfu-collection summary:hover { color: var(--vcfu-text); }

.vcfu-slot > .vcfu-message, .vcfu-sign > .vcfu-message {
    margin-block: .7rem;
    padding: .55rem .75rem;
}
.vcfu-error {
    background: #351c23;
    border-color: #9d4d60;
    color: #ffd6dd;
}
.vcfu-slot, #vcfu-privacy { scroll-margin-block-start: 1rem; }
.vcfu-scanning { background: #332b1c; color: #ffe2a5; }
.vcfu-needs-replacement { background: #3c2831; color: #ffd6dd; }

.vcfu-upload .vcfu-button:not(:disabled) {
    border-color: var(--vcfu-orange);
    background: var(--vcfu-orange);
    color: #171006;
}
.vcfu-upload .vcfu-button:not(:disabled):hover { background: var(--vcfu-orange-hover); }
.vcfu-button:disabled, .vcfu-button:disabled:hover {
    cursor: default;
    color: var(--vcfu-muted);
    background: var(--vcfu-panel);
}
.vcfu-upload-status {
    flex-basis: 100%;
    color: var(--vcfu-muted);
    font-size: .875rem;
}
.vcfu-upload-status:empty { display: none; }

.vcfu-scan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 .75rem;
    color: var(--vcfu-muted);
    font-size: .875rem;
}
.vcfu-sign .vcfu-name-help { margin-block-start: -.25rem; }
.vcfu-name-help strong { color: var(--vcfu-text); overflow-wrap: anywhere; }
.vcfu-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
}