@charset "utf-8";
:root {
    color-scheme: light;
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    color: #172033;
    background: #eef3fb;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(69, 127, 255, .18), transparent 34rem),
        linear-gradient(135deg, #eef4ff 0%, #f8fafc 48%, #e9f1ff 100%);
}

.trial-login {
    width: min(1080px, calc(100% - 40px));
    min-height: 680px;
    margin: max(28px, 5vh) auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 32px 90px rgba(30, 64, 175, .14);
}

.trial-login__intro {
    position: relative;
    padding: 54px;
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(96, 165, 250, .42), transparent 19rem),
        linear-gradient(145deg, #0f2f64, #174ea6 62%, #2368cf);
}

.trial-login__intro::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
}

.trial-login__brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.trial-login__mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #174ea6;
    background: #fff;
    font-size: 21px;
    font-weight: 900;
}

.trial-login__brand strong,
.trial-login__brand small { display: block; }
.trial-login__brand strong { font-size: 19px; }
.trial-login__brand small { margin-top: 3px; color: #bcd2f8; font-size: 9px; letter-spacing: .18em; }

.trial-login__copy { margin-top: 92px; max-width: 520px; }
.trial-login__eyebrow { color: #bcd7ff; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.trial-login__copy h1 { margin: 15px 0 20px; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.13; letter-spacing: -.04em; }
.trial-login__copy p { margin: 0; color: #d7e5fb; font-size: 15px; line-height: 1.9; }

.trial-login__features {
    margin: 46px 0 0;
    padding: 0;
    display: grid;
    gap: 13px;
    list-style: none;
}
.trial-login__features li { display: flex; align-items: center; gap: 14px; color: #eef5ff; font-size: 13px; }
.trial-login__features b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.12); color: #bcd7ff; font-size: 10px; }
.trial-login__notice { position: relative; z-index: 1; margin: auto 0 0; padding-top: 34px; color: #a9c4ed; font-size: 11px; line-height: 1.7; }

.trial-login__panel { padding: 64px 56px; display: grid; place-items: center; background: #fff; }
.login-form { width: 100%; max-width: 370px; }
.login-form__heading span { color: #2563eb; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.login-form__heading h2 { margin: 9px 0 8px; color: #172033; font-size: 27px; line-height: 1.3; }
.login-form__heading p { margin: 0 0 36px; color: #7a8699; font-size: 13px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 9px; color: #344054; font-size: 13px; font-weight: 700; }
.form-group input {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid #d8e0ec;
    border-radius: 11px;
    outline: none;
    color: #172033;
    background: #fbfdff;
    font: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.form-group input:focus { border-color: #4f84e8; box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); }
.login-button {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #1f5fc5, #3478dc);
    box-shadow: 0 12px 24px rgba(37, 99, 235, .2);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.login-button:hover { background: linear-gradient(135deg, #194fa6, #2869c7); }
.error { margin: 0 0 18px; padding: 11px 13px; border: 1px solid #fecaca; border-radius: 9px; color: #b42318; background: #fff6f5; font-size: 12px; line-height: 1.6; }
.login-form__help { margin: 22px 0 0; color: #8a94a6; font-size: 11px; line-height: 1.7; text-align: center; }

@media (max-width: 820px) {
    .trial-login { width: min(560px, calc(100% - 24px)); min-height: 0; margin: 12px auto; grid-template-columns: 1fr; border-radius: 20px; }
    .trial-login__intro { padding: 30px 28px; }
    .trial-login__copy { margin-top: 42px; }
    .trial-login__copy h1 { font-size: 34px; }
    .trial-login__features { display: none; }
    .trial-login__notice { margin-top: 30px; padding-top: 0; }
    .trial-login__panel { padding: 42px 28px 48px; }
}