/* ==================== 移动端布局容器 ==================== */
.layout-mobile {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    -webkit-overflow-scrolling: touch;
}

/* 伪元素实现自适应垂直居中（内容少时居中，多时可滚动） */
.layout-mobile::before,
.layout-mobile::after {
    content: '';
    display: block;
    flex: 1 0 auto;
    min-height: 0;
}

.mobile-container {
    flex: 0 0 auto;
    width: 100%;
}

/* ==================== 品牌区域 ==================== */
.app-brand {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.app-brand h1 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}

.app-brand p {
    color: var(--text-secondary);
}

/* ==================== 登录卡片 ==================== */
.login-card {
    background: var(--card-bg);
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* 移动端隐藏卡片内“登录”标题 */
.layout-mobile .login-card h2 {
    display: none;
}

/* ==================== 表单元素间距优化 ==================== */
.form-group {
    margin-bottom: 16px;
}

.form-options {
    margin-bottom: 20px;
}

.form-input {
    font-size: 16px;
}

/* ==================== 隐藏 PC 布局 ==================== */
.layout-pc {
    display: none;
}