@layer feature-layout {
/* Feature geometry and state only. Visuals: /css/design-system.css. */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-container {
    width: 100%;
    max-width: 400px;
    padding: var(--space-12) var(--space-8);
    text-align: center;
}
.login-logo {
    margin-bottom: var(--space-2);
}
.login-subtitle {
    margin-bottom: var(--space-12);
}
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    cursor: pointer;
    margin-bottom: var(--space-3);
}
.login-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.login-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0px;
}
.login-divider::before, .login-divider::after {
    content: "";
    flex: 1 1 0%;
    height: 1px;
}
.login-footer {
    margin-top: var(--space-12);
}
.error-msg {
    display: none;
    margin-top: var(--space-6);
    padding: var(--space-3);
}
.qr-panel {
    margin-top: var(--space-4);
    padding: var(--space-5);
}
.qr-panel[hidden] {
    display: none;
}
.qr-title {
    margin-bottom: var(--space-2);
}
.qr-help {
    margin-bottom: var(--space-4);
}
.qr-code {
    width: 280px;
    max-width: 100%;
    min-height: 280px;
    margin: 0px auto var(--space-3h);
    padding: var(--space-2h);
    display: grid;
    place-items: center;
}
.qr-code svg {
    width: 100%;
    height: auto;
    display: block;
}
.qr-status {
    min-height: 38px;
    margin-top: var(--space-2h);
}
.qr-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.qr-small-btn {
    flex: 1 1 0%;
    cursor: pointer;
}
@media (max-width: 420px) {
    .login-container {
        padding: var(--space-8) var(--space-4);
    }
    .qr-code {
        min-height: 240px;
    }
}
}