/**
 * 文件路径: /opt/captive-portal/static/css/portal.css
 * 文件说明: 用户端"沉浸式"页面共享外壳（portal/payment/paid_portal/status/错误页/维护页）
 * 参考 Linear / Vercel：纯色中性背景，卡片靠边框分层，不使用渐变
 * 依赖 tokens.css + base.css + components.css
 */

/* 居中卡片布局：portal / payment / status / 404 / 500 / maintenance / network_offline */
body.auth-shell {
    background: var(--bg-app);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

/* 非居中、可滚动布局：paid_portal（套餐网格页） */
body.auth-shell-scroll {
    background: var(--bg-app);
    min-height: 100dvh;
    padding: var(--space-6) var(--space-5);
}

.auth-container { width: 100%; max-width: 480px; }
.auth-container-md { width: 100%; max-width: 520px; }
.auth-container-lg { width: 100%; max-width: 1200px; margin: 0 auto; }

/* 带 header/body/footer 结构的卡片：编辑式直角卡片，靠墨色描边分层，不用阴影/圆角 */
.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-ink);
    border-radius: 0;
    overflow: hidden;
    animation: authCardIn var(--duration-slow) var(--ease-standard);
}

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-card-header {
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-ink);
}

.auth-card-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto var(--space-4);
    background: var(--ink);
    color: var(--ink-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.auth-card-icon-success { background: var(--color-success); }

.auth-card-body { padding: var(--space-8) var(--space-6); }

.auth-card-footer {
    padding: var(--space-5) var(--space-6);
    text-align: center;
    background: var(--bg-surface-alt);
    border-top: 1px solid var(--border-ink);
}

/* 无 header 的简单居中卡片：payment / error / maintenance / offline */
.auth-plain-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-ink);
    border-radius: 0;
    padding: var(--space-10) var(--space-8);
    text-align: center;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    color: var(--text-secondary);
    font-size: var(--text-body-sm);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

.auth-divider::before { margin-right: var(--space-4); }
.auth-divider::after { margin-left: var(--space-4); }

@media (max-width: 768px) {
    .auth-card-header,
    .auth-card-body { padding: var(--space-6) var(--space-5); }
    .auth-plain-card { padding: var(--space-8) var(--space-5); }
}