@charset "UTF-8";

/* Login page — built on theme.css tokens (load order: bootstrap -> theme.css -> login.css) */

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-page);
    background-attachment: fixed;
    color: var(--color-text);
    padding: 34px 22px;
    background-image: radial-gradient(circle at 12% 12%, rgba(43, 186, 169, .22), transparent 32%), radial-gradient(circle at 90% 85%, rgba(54, 106, 171, .18), transparent 35%), var(--gradient-page);
}

.login-layout {
    width: min(1080px, 100%);
    min-height: 610px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 20px;
    align-items: stretch;
}

.login-intro {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 34px 42px;
    border: 1px solid rgba(103, 219, 192, .38);
    border-radius: 26px;
    background: linear-gradient(145deg, #123b3d 0%, #102c39 46%, #15263f 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
    color: #f4fffc;
}
.login-intro::before,.login-intro::after { content:"";position:absolute;z-index:-1;border:1px solid rgba(132,234,211,.18);border-radius:50%;pointer-events:none }
.login-intro::before { width:480px;height:480px;left:-220px;top:-210px;box-shadow:0 0 0 55px rgba(111,232,205,.045),0 0 0 110px rgba(111,232,205,.025) }
.login-intro::after { width:300px;height:300px;right:-190px;bottom:-140px }
.intro-brand { display:flex;align-items:center;gap:12px;font-size:1.12rem;font-weight:800;letter-spacing:-.03em }
.intro-brand small { display:block;font-size:.68rem;font-weight:400;color:#b2d8d2;letter-spacing:0 }
.brand-symbol { display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:rgba(70,207,175,.22);color:#78edcc;font-size:1.25rem }
.intro-eyebrow { color:#78e9cb;font-size:.76rem;font-weight:700 }
.intro-content h1 { margin:13px 0 14px;line-height:1.55;font-size:clamp(1.7rem,3vw,2.55rem);font-weight:800;letter-spacing:-.045em }
.intro-content h1 em { color:#81e8cf;font-style:normal }
.intro-content p { color:#c0d8d7;line-height:2;font-size:.89rem;max-width:470px }
.intro-features { display:grid;gap:10px;margin-top:28px }
.intro-features>div { display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid rgba(215,255,245,.16);border-radius:11px;background:rgba(255,255,255,.045);font-size:.85rem }
.intro-features span { color:#81e8cf;font-size:.78rem }
.intro-footer { color:#b9d5d4;font-size:.76rem }
.intro-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:#54dbae;box-shadow:0 0 0 4px rgba(84,219,174,.17);margin-left:8px }

.login-card {
    width: 100%;
    max-width: none;
    padding: var(--space-10) var(--space-8);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-primary-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-xl);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.form-control {
    padding: var(--space-3) var(--space-4);
    background: var(--color-input-bg);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-input-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-control::placeholder { color: var(--color-text-muted); opacity: 1; }
.form-control:focus {
    background: var(--color-input-bg);
    color: var(--color-text);
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.input-group-text {
    background: var(--color-bg-subtle) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text-secondary);
}

.input-ltr {
    direction: ltr !important;
    text-align: left !important;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.btn-login {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-focus-box-shadow: var(--focus-ring);
    padding: var(--space-3);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-primary);
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.captcha-img {
    border: var(--border-width) solid var(--color-input-border);
    border-radius: var(--radius-md);
    user-select: none;
}
.captcha-refresh {
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border: var(--border-width) solid var(--color-input-border);
    border-radius: var(--radius-md);
}
.captcha-refresh:hover { color: var(--color-primary); border-color: var(--color-primary); }

.version-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    background: var(--color-bg-subtle);
    color: var(--color-primary);
    border: var(--border-width) solid var(--color-input-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    direction: ltr;
}

.login-footer {
    font-size: var(--font-size-xs);
}

@media (max-width: 850px) {
    .login-layout { grid-template-columns: 1fr; max-width: 530px; }
    .login-intro { min-height: 310px; padding: 28px; }
    .intro-content h1 { font-size: 1.7rem; }
    .intro-features { display: none; }
    .login-card { min-height: 530px; }
}
@media (max-width: 520px) {
    body { padding: 18px 12px 32px; }
    .login-layout { gap: 12px; }
    .login-intro { min-height: 260px; padding: 22px; border-radius: 19px; }
    .intro-content p { margin-bottom: 0; }
    .intro-footer { display: none; }
    .login-card { min-height: 0; padding: 30px 22px; }
}