body {
    display: flex; min-height: 100vh;
    background: var(--bg);
}

.login-left {
    flex: 1;
    background: linear-gradient(145deg, #fff5f4 0%, #fce8f3 50%, #ede8ff 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.login-left::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,112,95,0.15), transparent 70%);
    top: -100px; left: -100px;
}
.login-left::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,103,158,0.12), transparent 70%);
    bottom: -80px; right: -80px;
}

.left-content { position: relative; z-index: 1; max-width: 380px; }

.left-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.left-gem { width: 42px; height: 42px; background: linear-gradient(135deg, var(--accent), var(--pink)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 6px 20px rgba(249,112,95,0.3); }
.left-brand-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; }

.left-headline { font-family: var(--font-head); font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.8px; margin-bottom: 16px; }
.left-headline span { background: linear-gradient(135deg, var(--accent), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.left-sub { font-size: 15px; color: var(--muted2); line-height: 1.6; margin-bottom: 40px; }

.left-stats { display: flex; gap: 28px; }
.left-stat-num { font-family: var(--font-head); font-size: 24px; font-weight: 700; }
.left-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }

.login-right {
    width: 460px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 50px;
    border-left: 1px solid var(--border);
    flex-shrink: 0;
}

.login-form-wrap { width: 100%; max-width: 340px; }

.form-head { margin-bottom: 32px; }
.form-head h2 { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.form-head p { font-size: 14px; color: var(--muted2); margin-top: 6px; }

.login-form { display: flex; flex-direction: column; gap: 18px; }

.input-group label { display: block; margin-bottom: 6px; }

.input-wrap { position: relative; }
.input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.input-wrap input { padding-left: 38px; }
.eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 16px; line-height: 1; }

.form-row { display: flex; align-items: center; justify-content: space-between; }
.remember { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; color: var(--muted2); }
.remember input[type="checkbox"] { width: auto; accent-color: var(--accent); }
.forgot { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 500; }
.forgot:hover { color: var(--accent-h); text-decoration: underline; }

.btn-login {
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, var(--accent), var(--pink));
    color: #fff; border: none; border-radius: var(--r);
    font-size: 14px; font-weight: 600; font-family: var(--font);
    cursor: pointer; transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 18px rgba(249,112,95,0.32);
    letter-spacing: 0.01em;
}
.btn-login:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }

.security-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 20px; justify-content: center; }
.security-note svg { width: 13px; height: 13px; color: var(--green); }