.shell
{
    min-height: 100vh;
    background: var(--surface-sunken);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5) var(--space-4);
    position: relative;
}

.topbar
{
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    right: var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

/* 页面级 logo 容器：仅定字号（驱动内部 Wordmark 的图文整体大小），
   字体 / 字重 / 双色由内部 Wordmark 负责。 */
.brand
{
    font-size: var(--fs-22);
}

.center
{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.card
{
    width: 100%;
    max-width: 440px;
    background: var(--surface-raised);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
    border: 1px solid var(--divider);
    padding: var(--space-6) var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
}

/* 顶部 3px accent 条:整张卡的语义锚,在浅 / 深主题里都能突出。 */
.card::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* 卡内品牌字标：表单 hero 上方的小号 logo，内部 Wordmark 负责字体 / 双色。
   字号小于顶栏 .brand —— 顶栏是页面级 logo,这里是表单 hero 的一部分。 */
.cardBrand
{
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-18);
    margin-bottom: calc(var(--space-1) * -1);
}

.hero
{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.title
{
    margin: 0;
    font-size: var(--fs-28);
    font-weight: 600;
    line-height: var(--lh-title);
    letter-spacing: -0.01em;
    color: var(--text);
}

.subtitle
{
    margin: 0;
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    color: var(--text-muted);
}

.body
{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* 卡内分隔线:用于"或"切换不同登录方式时。 */
.divider
{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-11);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    margin: var(--space-1) 0;
}
.divider::before,
.divider::after
{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider);
}

/* footer:卡片底部留给版权 / 链接行,与卡内主行为隔开。 */
.footer
{
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-11);
    padding: var(--space-4) 0 0;
}

.footerLinks
{
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
}
.footerLinks a
{
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.footerLinks a:hover { color: var(--accent); text-decoration: underline; }
.footerLinks .sep { color: var(--divider); }

@media (max-width: 480px)
{
    .card { padding: var(--space-5) var(--space-4); }
    .title { font-size: var(--fs-22); }
    .cardBrand { font-size: var(--fs-11); }
}
