:root {
    --login-blue: #6161e8;
    --login-purple: #7b61ff;
    --login-ink: #252b3d;
    --login-muted: #737b91;
    --login-border: #e2e5ed;
    --login-surface: #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    padding: 26px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--login-ink);
    background:
        radial-gradient(circle at 78% 12%, rgba(255,255,255,.2), transparent 24%),
        linear-gradient(135deg, #565ee7 0%, #7660f5 54%, #8970fa 100%);
}

.login-wrapper {
    position: relative;
    width: 100%;
    max-width: 1240px;
    min-height: calc(100vh - 52px);
    margin: 0 auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(41, 42, 112, .28);
    background: var(--login-surface);
}

.login-brand {
    position: relative;
    overflow: hidden;
    padding: 56px 62px 46px;
    color: #fff;
    background: linear-gradient(145deg, rgba(39, 44, 154, .26), rgba(76, 59, 177, .7));
}

.login-brand::before, .login-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.login-brand::before { width: 430px; height: 430px; right: -170px; top: -190px; }
.login-brand::after { width: 300px; height: 300px; left: -190px; bottom: -150px; }

.brand-logo, .brand-content { position: relative; z-index: 1; }
.brand-logo { display: flex; align-items: center; gap: 14px; }
.brand-mark, .form-brand-mark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
}
.brand-mark { height: 38px; }
.brand-mark i, .form-brand-mark i {
    display: block;
    width: 11px;
    border-radius: 9px;
    transform: skew(-29deg);
}
.brand-mark i:nth-child(1), .form-brand-mark i:nth-child(1) { height: 26px; background: #f44877; }
.brand-mark i:nth-child(2), .form-brand-mark i:nth-child(2) { height: 32px; background: #ffca05; }
.brand-mark i:nth-child(3), .form-brand-mark i:nth-child(3) { height: 13px; background: #00ca72; }
.brand-copy h1 { margin: 0; font-size: 31px; line-height: 1; letter-spacing: -1.8px; }
.brand-copy h1 span, .form-brand > span span { font-weight: 400; }
.brand-copy small { display: block; margin-top: 7px; color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; }

.brand-content { margin-top: 90px; }
.eyebrow { margin: 0 0 17px; color: #d5d4ff; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; }
.brand-content h2 { max-width: 550px; margin: 0 0 20px; font-size: clamp(34px, 4vw, 49px); line-height: 1.1; font-weight: 400; letter-spacing: -1.5px; }
.brand-content h2 strong { color: #fff; font-weight: 750; }
.brand-content > p:not(.eyebrow) { max-width: 460px; margin: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; }

.login-board-preview {
    max-width: 560px;
    margin: 38px 0 27px;
    padding: 14px 16px 17px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 13px 28px rgba(39,35,125,.14);
    transform: rotate(-1deg);
}
.preview-toolbar { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.85); font-size: 10px; }
.preview-toolbar span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.preview-toolbar b { margin-left: 8px; font-size: 11px; font-weight: 600; }
.preview-tabs { display: flex; gap: 20px; margin: 17px 0 14px; border-bottom: 1px solid rgba(255,255,255,.17); padding-bottom: 8px; }
.preview-tabs i { width: 56px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.4); }
.preview-tabs i:first-child { background: #fff; }
.preview-group-label { width: 90px; height: 7px; margin: 5px 0 9px; border-radius: 4px; background: #d9c7ff; }
.preview-row { display: grid; grid-template-columns: 1.5fr .5fr .9fr .7fr; gap: 8px; align-items: center; min-height: 28px; border-top: 4px solid rgba(94,84,203,.34); background: rgba(255,255,255,.8); }
.preview-row span, .preview-row em, .preview-row strong, .preview-row i { display: block; height: 8px; border-radius: 3px; }
.preview-row span { width: 75%; margin-left: 9px; background: #a6afbf; }
.preview-row em { width: 25px; height: 25px; border-radius: 50%; background: #f2a761; }
.preview-row strong { height: 18px; background: #28c99a; }
.preview-row i { width: 75%; background: #8ca3f5; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.feature-card { padding: 13px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(255,255,255,.09); }
.feature-icon { width: 28px; height: 28px; margin-bottom: 10px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.19); color: #fff; font-size: 15px; font-weight: 700; }
.feature-card strong { display: block; margin-bottom: 4px; font-size: 12px; }
.feature-card small { display: block; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1.45; }

.login-form-area { display: flex; align-items: center; justify-content: center; padding: 48px 64px; background: #fff; }
.login-box { width: 100%; max-width: 380px; }
.form-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 44px; color: #303647; font-size: 25px; font-weight: 750; letter-spacing: -1.5px; }
.form-brand-mark { height: 28px; }
.form-brand-mark i:nth-child(1) { height: 19px; width: 8px; }
.form-brand-mark i:nth-child(2) { height: 24px; width: 8px; }
.form-brand-mark i:nth-child(3) { height: 10px; width: 8px; }
.login-box h2 { margin: 0 0 9px; text-align: center; color: #252b3d; font-size: 29px; letter-spacing: -.8px; }
.subtitle { margin: 0 0 34px; text-align: center; color: var(--login-muted); font-size: 14px; }
.form-group { margin-bottom: 21px; }
.form-group label { display: block; margin-bottom: 8px; color: #41495c; font-size: 13px; font-weight: 650; }
.input-box { position: relative; }
.input-box input { width: 100%; height: 49px; border: 1px solid var(--login-border); border-radius: 6px; padding: 0 48px 0 42px; color: var(--login-ink); font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input-box input::placeholder { color: #a1a8b7; }
.input-box input:focus { border-color: var(--login-blue); box-shadow: 0 0 0 3px rgba(97,97,232,.13); }
.input-icon, .toggle-password { position: absolute; top: 50%; transform: translateY(-50%); }
.input-icon { left: 15px; color: #8992a5; font-size: 17px; font-weight: 700; }
.toggle-password { right: 10px; border: 0; background: transparent; color: #7a8396; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; padding: 6px; }
.toggle-password:hover { color: var(--login-blue); }
.form-submit { margin-top: 30px; margin-bottom: 0; }
.btn-login { width: 100%; height: 50px; border: 0; border-radius: 6px; background: var(--login-blue); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 16px rgba(97,97,232,.2); transition: background .2s, transform .2s; }
.btn-login:hover { background: #5050d8; transform: translateY(-1px); }

@media (max-width: 1050px) {
    body { padding: 16px; }
    .login-wrapper { grid-template-columns: 1fr; max-width: 650px; }
    .login-brand { min-height: 440px; padding: 42px; }
    .brand-content { margin-top: 55px; }
    .login-form-area { padding: 48px 42px; }
}
@media (max-width: 600px) {
    body { padding: 0; }
    .login-wrapper { min-height: 100vh; border-radius: 0; }
    .login-brand { display: none; }
    .login-form-area { padding: 35px 23px; }
    .form-brand { margin-bottom: 38px; }
}