/* ============================================================
   云督伴学 · 登录页（S4 Apple 风格重构）
   ------------------------------------------------------------
   设计原则：
   - 成熟、克制、简洁：纯色背景 + 居中卡片 + 唯一 Primary 按钮
   - 无 Emoji / 无渐变 / 无炫光 / 无红色 glow / 无插画
   - 消费 Design System token（tokens.css），并自带 fallback，
     保证未加载 DS 时仍可正常渲染。
   - 登录认证行为（form / name / required / submit）不做任何修改。
   ============================================================ */

/* 注意：token 由 _app_head.html 引入的 tokens.css 提供；
   本文件所有 var() 均带字面量 fallback，未加载 DS 时仍可渲染。 */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* ---------- 页面：纯色背景 + 居中 + 安全区 ---------- */

.login-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh; /* iOS 键盘弹出时视口收缩，卡片可正常滚动不被遮挡 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 12%, rgba(229, 57, 53, 0.08), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(185, 14, 23, 0.05), transparent 32%),
        var(--ydb-bg, #F5F5F7);
    color: var(--ydb-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- 登录卡片：surface / 20px 圆角 / 1px 极浅边框 / 极轻阴影 ---------- */

.login-card {
    width: 100%;
    max-width: 400px; /* 桌面端不过宽 */
    background-color: var(--ydb-surface);
    border: 1px solid var(--ydb-border);
    border-radius: 20px;
    box-shadow: var(--ydb-shadow-card);
    padding: 44px 40px 32px;
}

/* ---------- 品牌区 ---------- */

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.login-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: var(--ydb-primary); /* 扁平品牌红，无渐变无光效 */
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ydb-text);
}

.login-subtitle {
    margin: 10px 0 32px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--ydb-text-3);
}

/* ---------- 门户登录标题（最终合并：V1.5.1 身份登录视图 + Apple 视觉） ---------- */

.login-portal-title {
    margin: 18px 0 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ydb-text);
}

/* ---------- 错误提示：danger 语义 tint ---------- */

.login-error {
    padding: 11px 14px;
    border-radius: 10px;
    background-color: var(--ydb-danger-bg);
    color: var(--ydb-danger);
    text-align: center;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 20px;
}

/* ---------- 表单字段：Label + 48px Input ---------- */

.login-form {
    margin: 0;
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ydb-text-2);
}

.login-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ydb-separator);
    border-radius: var(--ydb-radius-control);
    font-size: 16px; /* ≥16px 避免 iOS 聚焦自动放大 */
    font-family: inherit;
    color: var(--ydb-text);
    background-color: var(--ydb-surface);
    box-sizing: border-box;
    transition: border-color var(--ydb-dur-fast) var(--ydb-ease),
        box-shadow var(--ydb-dur-fast) var(--ydb-ease);
    -webkit-appearance: none;
    appearance: none;
}

.login-field input::placeholder {
    color: var(--ydb-text-3);
}

.login-field input:focus-visible,
.login-field input:focus {
    outline: none;
    border-color: var(--ydb-primary);
    box-shadow: 0 0 0 3px var(--ydb-primary-glow); /* 克制的 focus ring */
}

.login-field input:disabled {
    opacity: 0.5;
    background-color: var(--ydb-surface-2);
}

/* ---------- 登录按钮：全页唯一 Primary Action ---------- */

.login-submit {
    width: 100%;
    height: 48px;
    margin-top: 10px;
    padding: 0 16px;
    border: none;
    border-radius: var(--ydb-radius-control);
    background-color: var(--ydb-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color var(--ydb-dur-fast) var(--ydb-ease),
        transform var(--ydb-dur-fast) var(--ydb-ease);
}

.login-submit:hover {
    background-color: var(--ydb-primary-pressed);
}

.login-submit:active {
    background-color: var(--ydb-primary-pressed);
    transform: scale(0.985);
}

.login-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ydb-primary-glow);
}

.login-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ---------- 底部链接与提示 ---------- */

.login-footer {
    text-align: center;
    margin-top: 22px;
    font-size: 14px;
    color: var(--ydb-text-2);
}

.login-footer-link {
    color: var(--ydb-primary);
    text-decoration: none;
    font-weight: 500;
}

.login-footer-link:hover {
    text-decoration: underline;
}

.login-footer-link:focus-visible {
    outline: 2px solid var(--ydb-primary-glow);
    outline-offset: 2px;
    border-radius: 4px;
}

.login-tips {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ydb-separator);
    font-size: 12px;
    line-height: 16px;
    color: var(--ydb-text-3);
}

/* ---------- 响应式 ---------- */

/* 平板 / 桌面：卡片保持 400px，背景留白更大 */
@media (min-width: 768px) {
    .login-body {
        padding: 48px 32px;
    }
}

/* 大屏：卡片不过宽 */
@media (min-width: 1024px) {
    .login-card {
        max-width: 420px;
    }
}

/* 手机：卡片左右保留安全边距，不紧贴屏幕 */
@media (max-width: 480px) {
    .login-body {
        padding: 20px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        align-items: flex-start; /* 小屏改顶部对齐，键盘弹出时输入框不被遮挡 */
    }

    .login-card {
        padding: 36px 26px 28px;
        border-radius: 18px;
        margin: auto 0; /* 内容较少时仍保持垂直居中 */
    }

    .login-title {
        font-size: 24px;
    }
}

/* 超小屏（375）：进一步收紧留白 */
@media (max-width: 390px) {
    .login-body {
        padding: 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .login-card {
        padding: 32px 22px 24px;
    }
}

/* 键盘弹出（视口高度较矮的横屏或小窗）：允许滚动，卡片完整可见 */
@media (max-height: 560px) {
    .login-body {
        align-items: flex-start;
        overflow-y: auto;
    }
}

/* ============================================================
   身份选择页（V1.5.1）
   /login 第一层：三个身份入口卡片 + 登录页返回链接
   ============================================================ */

.back-to-select {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--ydb-text-2);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.back-to-select:hover {
    color: var(--ydb-primary);
}

.role-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 4px;
}

.role-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 18px;
    border: 1.5px solid var(--ydb-border);
    border-radius: 14px;
    text-decoration: none;
    background: #FBFCFE;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
        transform 0.1s ease;
}

.role-card:hover {
    border-color: var(--ydb-primary);
    box-shadow: 0 8px 22px rgba(229, 57, 53, 0.12);
}

.role-card:active {
    transform: translateY(1px);
}

.role-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: var(--ydb-primary, #E53935);
    background: rgba(229, 57, 53, 0.08);
    border: 1px solid rgba(229, 57, 53, 0.12);
}

.role-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.role-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ydb-text);
}

.role-card-desc {
    font-size: 13px;
    color: var(--ydb-text-3);
}

/* 登录视图的标题区上边距（有返回链接时压缩留白） */
.login-box .login-brand {
    margin-bottom: 10px;
}


/* ===== 登录入口 / 教师注册页收口 2026-08-31 ===== */
.role-select {
    max-width: 560px;
    padding: 42px;
}
.role-select .login-brand {
    margin-bottom: 12px;
}
.role-select .login-brand-dot {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #F04A45, #D92D2A);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(229, 57, 53, 0.18);
}
.role-select h1 {
    margin: 12px 0 0;
    text-align: center;
    font-size: 30px;
    letter-spacing: -0.03em;
}
.role-select-subtitle {
    margin-bottom: 26px;
}
.role-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    min-height: 82px;
}
.role-card:hover {
    transform: translateY(-1px);
}

.register-page {
    align-items: flex-start;
    padding-top: max(36px, env(safe-area-inset-top));
    padding-bottom: max(36px, env(safe-area-inset-bottom));
}
.register-card {
    max-width: 720px;
    padding: 34px 38px 30px;
    margin: auto;
}
.register-brand {
    justify-content: flex-start;
    margin-bottom: 22px;
}
.register-kicker {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ydb-text-3, #86868B);
}
.register-note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(229, 57, 53, 0.055);
    border: 1px solid rgba(229, 57, 53, 0.10);
    color: var(--ydb-text-2, #6E6E73);
    font-size: 13px;
    line-height: 1.55;
}
.register-note strong {
    color: var(--ydb-text, #1D1D1F);
    font-size: 14px;
}
.register-form {
    margin-top: 4px;
}
.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.field-help {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ydb-text-3, #86868B);
}
.field-error {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ydb-danger, #D70015);
}
.service-choice-fieldset {
    min-width: 0;
    margin: 2px 0 20px;
    padding: 0;
    border: 0;
}
.service-choice-fieldset legend {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ydb-text-2, #6E6E73);
}
.service-choice-fieldset legend span {
    font-weight: 400;
    color: var(--ydb-text-3, #86868B);
}
.service-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.service-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 12px;
    border: 1px solid var(--ydb-separator, rgba(60,60,67,.18));
    border-radius: 12px;
    background: var(--ydb-surface, #fff);
    color: var(--ydb-text, #1D1D1F);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.service-choice:active { transform: scale(.99); }
.service-choice.is-selected {
    border-color: rgba(229, 57, 53, .42);
    background: rgba(229, 57, 53, .055);
}
.service-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.service-choice-check {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    border: 1.5px solid rgba(60,60,67,.28);
    background: #fff;
    position: relative;
    flex: 0 0 auto;
}
.service-choice.is-selected .service-choice-check {
    background: var(--ydb-primary, #E53935);
    border-color: var(--ydb-primary, #E53935);
}
.service-choice.is-selected .service-choice-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.register-success {
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(52, 199, 89, .09);
    border: 1px solid rgba(52, 199, 89, .18);
    color: #247A3D;
    line-height: 1.6;
}
.register-success-title {
    margin-bottom: 4px;
    font-weight: 700;
    color: #176A31;
}
.register-link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.register-footnote {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ydb-separator, rgba(60,60,67,.12));
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ydb-text-3, #86868B);
}
.register-footnote a {
    color: var(--ydb-primary, #E53935);
    text-decoration: none;
    margin-left: 4px;
}
@media (max-width: 640px) {
    .role-select, .register-card {
        padding: 30px 22px 24px;
        border-radius: 20px;
    }
    .register-grid, .service-choice-grid {
        grid-template-columns: 1fr;
    }
    .register-brand { align-items: flex-start; }
}


/* Android 浏览器：主登录页提供官方 APP 下载入口；YDBApp WebView 内不显示。 */
.android-download-entry {
    display: block;
    margin: 14px auto 0;
    text-align: center;
    color: var(--ydb-primary, #E53935);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.android-download-entry:active {
    opacity: .68;
}

/* ===== 品牌入口精修 2026-08-31 · Step 5 教职工入口 ===== */
.login-body{
    background:
        radial-gradient(circle at 12% 10%, rgba(227,33,40,.09), transparent 34%),
        radial-gradient(circle at 88% 88%, rgba(185,14,23,.045), transparent 30%),
        #FFF9F6;
}
.login-brand-logo{
    width:40px;height:40px;display:block;flex:0 0 auto;border-radius:12px;
    box-shadow:0 8px 20px rgba(174,25,33,.14);
}
.login-brand-logo-large{width:58px;height:58px;border-radius:17px;box-shadow:0 14px 30px rgba(174,25,33,.16)}
.role-select .login-brand-dot{display:none}
.role-select .login-brand-logo-large{margin:0 auto}
.role-card:hover{border-color:rgba(227,33,40,.32);box-shadow:0 10px 28px rgba(174,25,33,.09)}
.role-card-icon{color:#C91620;background:rgba(227,33,40,.075);border-color:rgba(227,33,40,.12)}
.staff-role-select{max-width:500px}
.staff-role-grid{gap:12px}
.staff-role-grid .role-card{position:relative;padding-right:48px}
.role-card-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;color:var(--ydb-text-3,#86868B)}
.role-parent-return{display:block;margin:20px auto 0;text-align:center;color:var(--ydb-text-2,#6E6E73);font-size:13px;text-decoration:none}
.role-parent-return:active{opacity:.65}
@media(max-width:480px){
  .staff-role-select{padding-top:34px}
  .staff-role-grid .role-card{min-height:88px;padding:17px 46px 17px 16px}
}