/* 登录页样式：基于 Tabler（vendor/tabler.min.css），这里只补布局与细节。
 * 设计令牌全部取 Tabler 的 CSS 变量，与看板保持一致。 */

/* 顶部这段变量与看板 app.css 的「珍珠玻璃」令牌保持一致。
   登录页只 link 了 tabler + 本文件，所以这里要自己覆盖一遍主色。
   改看板主色时这里必须同步改，否则登录页和看板会是两套蓝。 */
:root {
    --tblr-primary: #236de9;
    --tblr-primary-rgb: 35, 109, 233;
    --tblr-primary-lt-rgb: 214, 231, 253;
    --tblr-body-color: #101418;
    --tblr-heading-color: #0b0f12;
    --tblr-secondary-color: #596368;
    --tblr-muted: #7e888c;

    /* 圆角：与看板同一套 4px 一档 */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 24px;

    /* 珍珠玻璃：画布、阅读面与材质阴影 */
    --shade: 46, 58, 62;
    --line: rgba(46, 58, 62, .085);
    --line-strong: rgba(46, 58, 62, .11);
    --edge: inset 0 1px 0 rgba(255, 255, 255, .92);
    --edge-strong: inset 0 1px 0 rgba(255, 255, 255, .98);
    --e1: 0 1px 2px rgba(46, 58, 62, .05), 0 5px 14px rgba(46, 58, 62, .04);
    --e2: 0 1px 3px rgba(46, 58, 62, .06), 0 12px 30px rgba(46, 58, 62, .055);
    --e3: 0 2px 6px rgba(46, 58, 62, .07), 0 22px 50px rgba(46, 58, 62, .08);
    --canvas: #f6f8f7;
    --pearl: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(249, 252, 251, .93));
    --pearl-solid: #fbfcfc;
    --lime: #82dd2d;
    --ambient-a: rgba(130, 221, 45, .07);
    --ambient-b: rgba(35, 109, 233, .055);
    --blue-soft: rgba(35, 109, 233, .1);
}

html, body {
    color-scheme: light;
    margin: 0;
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px 16px;
    /* 同款珍珠画布：灰白底 + 两团极淡漫射光（青柠 / 蓝） */
    background-color: var(--canvas);
    background-image:
        radial-gradient(46% 38% at 8% -6%, var(--ambient-a), transparent 70%),
        radial-gradient(52% 44% at 98% 4%, var(--ambient-b), transparent 72%);
    background-size: auto, auto;
    background-attachment: fixed;
    color: var(--tblr-body-color);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #236de9 0%, #82dd2d 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 18px -6px rgba(35, 109, 233, .6);
}

.login-brand-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--tblr-heading-color);
    line-height: 1.3;
}

.login-brand-sub {
    font-size: 12px;
    color: var(--tblr-muted);
    line-height: 1.3;
}

/* 珍珠玻璃卡片：阅读面 + 内高光 + 一条中性细边 */
.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--pearl);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--edge-strong), var(--e3);
}

.login-title { font-size: 20px; font-weight: 600; color: var(--tblr-heading-color); }

/* 输入框聚焦用蓝色柔光环 */
.login-card .form-control:focus {
    border-color: #236de9;
    box-shadow: 0 0 0 3px var(--blue-soft);
}

/* 登录按钮：蓝 → 深蓝渐变 + 蓝色外发光 */
.login-card .btn-primary {
    background: linear-gradient(135deg, #3478ee 0%, #236de9 100%);
    border-color: transparent;
    box-shadow: 0 8px 22px -8px rgba(35, 109, 233, .55);
    transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.login-card .btn-primary:hover {
    filter: brightness(1.07);
    box-shadow: 0 12px 26px -8px rgba(35, 109, 233, .62);
    transform: translateY(-1px);
}

.login-desc {
    margin-top: 4px;
    font-size: 13px;
    color: var(--tblr-secondary-color);
}

/* JS 通过 .is-show 控制显隐（Tabler 的 .alert 默认是显示的） */
.login-error {
    display: none;
    margin-top: 14px;
    font-size: 13px;
}
.login-error.is-show { display: block; }

/* 密码框右侧的明文切换按钮 */
.login-pwd { position: relative; }
.login-pwd .form-control { padding-right: 42px; }

.login-eye {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--tblr-border-radius);
    background: transparent;
    color: var(--tblr-muted);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.login-eye:hover { color: var(--tblr-primary); background: rgba(35, 109, 233, .08); }

.login-foot {
    font-size: 12px;
    color: var(--tblr-muted);
}