.oa-signin {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(220px, 28vw) minmax(0, 1fr);
    grid-template-rows: minmax(min-content, 1fr);
    align-items: center;
    color: var(--oa-ink);
    background: var(--oa-bg);
    font: 14px/1.5 var(--oa-font);
}
.oa-signin-brand {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: clamp(24px, 4vw, 60px);
    background: var(--oa-nav-bg);
    color: var(--oa-nav-text);
}
.oa-signin-brand strong { font-size: clamp(18px, 2.4vw, 30px); }
.oa-signin-brand span { color: var(--oa-nav-muted); }
.oa-signin #loginBox { width: min(340px, calc(100% - 48px)); margin: 48px auto; }
.oa-signin h1 { margin: 0 0 8px; font-size: 27px; font-weight: 650; }
.oa-signin p { margin: 0 0 26px; color: var(--oa-muted); }
.oa-signin label { display: block; margin: 0 0 5px; font-weight: 600; }
.oa-signin .inputbox {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    margin-bottom: 15px;
    padding: 0 10px;
    border: 1px solid var(--oa-border-strong);
    border-radius: 7px;
    color: var(--oa-ink);
    background: var(--oa-bg);
    font: inherit;
}
.oa-signin .btn { margin-top: 4px; }
.oa-signin :focus-visible { outline: 2px solid var(--oa-focus); outline-offset: -2px; }
.oa-signin #popup_container {
    background: var(--oa-bg);
    border: 1px solid var(--oa-border);
    border-radius: 12px;
    box-shadow: var(--oa-dialog-shadow);
    color: var(--oa-ink);
    font: 13px var(--oa-font);
}
.oa-signin #popup_title {
    background: var(--oa-surface);
    border-color: var(--oa-border);
    color: var(--oa-ink);
}
@media (max-width: 640px) {
    .oa-signin { display: block; }
    .oa-signin-brand { padding: 20px 24px; }
}