.sfv-shell {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px 64px;
    background: var(--sf-color-canvas);
}

.sfv-card {
    width: 100%;
    max-width: 560px;
    background: var(--sf-color-surface);
    border: 1px solid var(--sf-color-border);
    border-radius: var(--sf-radius-lg);
    padding: 32px;
    box-shadow: var(--sf-shadow-sm);
}

.sfv-title {
    font-family: var(--sf-font-heading);
    font-size: var(--sf-font-2xl);
    font-weight: var(--sf-weight-bold);
    margin: 0 0 6px;
}

.sfv-sub {
    color: var(--sf-color-text-secondary);
    font-size: var(--sf-font-md);
    margin: 0 0 20px;
}

.sfv-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sfv-input {
    flex: 1 1 220px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

.sfv-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: var(--sf-radius-md);
    border: 1px solid var(--sf-color-border);
}

.sfv-result i { font-size: 1.2rem; margin-top: 2px; }
.sfv-result strong { display: block; }
.sfv-result span { color: var(--sf-color-text-secondary); font-size: var(--sf-font-sm); }

.sfv-result.is-valid { border-color: var(--sf-color-success); }
.sfv-result.is-valid i { color: var(--sf-color-success); }
.sfv-result.is-expired { border-color: var(--sf-color-warning); }
.sfv-result.is-expired i { color: var(--sf-color-warning); }
.sfv-result.is-revoked, .sfv-result.is-notfound { border-color: var(--sf-color-danger); }
.sfv-result.is-revoked i, .sfv-result.is-notfound i { color: var(--sf-color-danger); }

.sfv-details {
    margin: 18px 0 0;
    border-top: 1px solid var(--sf-color-border);
}

.sfv-details > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sf-color-border);
}

.sfv-details dt {
    color: var(--sf-color-text-secondary);
    font-size: var(--sf-font-sm);
    font-weight: var(--sf-weight-semibold);
}

.sfv-details dd {
    margin: 0;
    text-align: right;
    font-weight: var(--sf-weight-medium);
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .sfv-card { padding: 22px 18px; }
}