/* ═══════════════════════════════════════════════════
    DESIGN TOKENS — mirrored from dashboard
═══════════════════════════════════════════════════ */
:root {
    --accent     : #4f52e8;
    --accent-s   : rgba(79,82,232,.12);
    --accent-m   : rgba(79,82,232,.22);
    --accent-gl  : rgba(79,82,232,.35);
    --accent-dark: #3c3fc0;

    --tx-1  : #0f1117;
    --tx-2  : #5d6070;
    --tx-3  : #9496a8;

    --surface : #ffffff;
    --border  : #e2e5ea;
    --bg-input: #f6f7fa;

    --green  : #16a34a;
    --green-s: rgba(22,163,74,.12);
    --amber  : #d97706;
    --amber-s: rgba(217,119,6,.12);
    --red    : #dc2626;
    --red-s  : rgba(220,38,38,.12);

    --shadow-card: 0 20px 60px rgba(79,82,232,.14), 0 4px 20px rgba(0,0,0,.08);
    --radius-card: 18px;
    --radius-inp : 10px;
    --ease       : 0.3s ease;
}

/* ═══════════════════════════════════════════════════
    RESET & LOCK VIEWPORT
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    height: 100%;
}

body {
    font-family : 'Plus Jakarta Sans', system-ui, sans-serif;
    height      : 100vh;
    color       : var(--tx-1);
    font-size   : 13.5px;
    line-height : 1.6;
    position    : relative;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ═══════════════════════════════════════════════════
    BACKGROUND — gradient mesh + animated blobs
═══════════════════════════════════════════════════ */
.page-bg {
    position : fixed;
    inset     : 0;
    z-index   : 0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 10%,  rgba(101,103,245,.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 80%,  rgba(79,82,232,.14)  0%, transparent 55%),
        radial-gradient(ellipse 70% 70% at 50% 50%,  rgba(244,114,182,.07) 0%, transparent 70%),
        linear-gradient(135deg, #f0f1ff 0%, #fafaff 40%, #f3f4fa 100%);
}

/* Floating blobs */
.blob {
    position      : absolute;
    border-radius : 50%;
    filter        : blur(60px);
    opacity       : 0.55;
    animation     : blobDrift 12s ease-in-out infinite alternate;
    pointer-events: none;
}
.blob-1 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(101,103,245,.28) 0%, transparent 70%);
    top: -80px; left: -80px;
    animation-duration: 14s;
}
.blob-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(244,114,182,.22) 0%, transparent 70%);
    bottom: -60px; right: -60px;
    animation-duration: 10s; animation-delay: -4s;
}
.blob-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(79,82,232,.18) 0%, transparent 70%);
    top: 50%; right: 15%;
    animation-duration: 16s; animation-delay: -7s;
}

@keyframes blobDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(20px, 15px) scale(1.05); }
}

/* ═══════════════════════════════════════════════════
    PAGE WRAPPER — full viewport flex center
═══════════════════════════════════════════════════ */
.page-wrapper {
    position: relative;
    z-index : 1;
    height  : 100vh;
    width   : 100%;
    display : flex;
    align-items    : center;
    justify-content: center;
    padding : 50px 0px;
}

/* ═══════════════════════════════════════════════════
    REGISTER CARD
═══════════════════════════════════════════════════ */
.reg-card {
    width           : 420px;
    max-width       : 95vw;
    background      : rgba(255,255,255,0.82);
    backdrop-filter : blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border          : 1px solid rgba(255,255,255,0.75);
    border-radius   : var(--radius-card);
    box-shadow      : var(--shadow-card);
    padding         : 32px 32px 24px;
    animation       : cardIn .45s cubic-bezier(.22,.68,0,1.2) both;
    transform-origin: center center;
}

/* Status icons bigger */
.table i.fs-5 {
    font-size: 1.4rem;
}

.step-one-card {
    width: 70%;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Adaptive scaling for very short screens */
@media (max-height: 700px) {
    .reg-card { padding: 22px 24px 16px; }
}

@media (max-height: 580px) {
    .reg-card { transform: scale(0.88); }
}

@media (max-height: 480px) {
    .reg-card { transform: scale(0.78); }
}

/* ── Card Header ── */
.card-logo {
    width        : 42px; height: 42px;
    background   : linear-gradient(135deg, #6567f5 0%, #4f52e8 100%);
    border-radius: 12px;
    display      : flex; align-items: center; justify-content: center;
    box-shadow   : 0 4px 14px rgba(79,82,232,.40);
    margin-bottom: 16px;
    animation    : logoIn .5s .1s cubic-bezier(.22,.68,0,1.4) both;
}
.card-logo i { font-size: 20px; color: #fff; }

@keyframes logoIn {
    from { opacity: 0; transform: scale(.6) rotate(-15deg); }
    to   { opacity: 1; transform: scale(1)  rotate(0deg);   }
}

.card-title {
    font-size    : 21px; font-weight: 800;
    letter-spacing: -.5px; color: var(--tx-1);
    margin-bottom: 3px;
}
.card-sub {
    font-size : 13px; color: var(--tx-3);
    margin-bottom: 20px;
}

/* ── Form Fields ── */
.field-group {
    margin-bottom: 13px;
    animation    : fieldIn .4s ease both;
}

.field-group:nth-child(1) { animation-delay: .08s; }
.field-group:nth-child(2) { animation-delay: .13s; }
.field-group:nth-child(3) { animation-delay: .18s; }
.field-group:nth-child(4) { animation-delay: .23s; }

@keyframes fieldIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.field-label {
    display      : block;
    font-size    : 12px; font-weight: 600;
    color        : var(--tx-2); letter-spacing: .2px;
    margin-bottom: 5px;
}

.input-wrap { position: relative; }

.field-icon {
    position  : absolute; left: 12px; top: 50%;
    transform : translateY(-50%);
    color     : var(--tx-3); font-size: 15px;
    pointer-events: none; transition: color var(--ease);
    line-height: 1;
}

.nx-input {
    width        : 100%;
    height       : 42px;
    background   : var(--bg-input);
    border       : 1.5px solid var(--border);
    border-radius: var(--radius-inp);
    padding      : 0 38px 0 38px;
    font-size    : 13.5px; font-family: inherit;
    color        : var(--tx-1);
    outline      : none;
    transition   : border-color var(--ease), box-shadow var(--ease), background var(--ease);
    -webkit-appearance: none;
}

.nx-input::placeholder { color: var(--tx-3); }

.nx-input:focus {
    border-color: var(--accent);
    background  : #fff;
    box-shadow  : 0 0 0 3.5px var(--accent-s);
}

.nx-input:focus ~ .field-icon,
.input-wrap:focus-within .field-icon { color: var(--accent); }

/* Validation states */
.nx-input.is-valid   { border-color: var(--green); background: #fff; }
.nx-input.is-valid:focus { box-shadow: 0 0 0 3.5px var(--green-s); }
.nx-input.is-invalid { border-color: var(--red);   background: #fff; }
.nx-input.is-invalid:focus { box-shadow: 0 0 0 3.5px var(--red-s); }

/* Eye toggle */
.eye-btn {
    position   : absolute; right: 11px; top: 50%;
    transform  : translateY(-50%);
    background : none; border: none;
    color      : var(--tx-3); font-size: 16px;
    padding    : 3px; line-height: 1;
    transition : color var(--ease);
    z-index    : 2;
}

.eye-btn:hover { color: var(--accent); }

/* Field error / hint */
.field-msg {
    font-size  : 11.5px; margin-top: 4px;
    display    : none; padding-left: 2px;
    transition : all var(--ease);
    }
    .field-msg.error { color: var(--red);   display: block; }
    .field-msg.hint  { color: var(--tx-3);  display: block; }
    .field-msg.ok    { color: var(--green); display: block; }

    /* ── Password Strength ── */
    .strength-wrap {
    margin-top  : 7px;
    display     : none;
    }
    .strength-wrap.visible { display: block; }

    .strength-bars {
    display: flex; gap: 4px; margin-bottom: 4px;
    }
    .strength-bar {
    flex          : 1; height: 3px;
    border-radius : 99px;
    background    : var(--border);
    transition    : background var(--ease);
    }
    .strength-bar.filled-weak   { background: var(--red);   }
    .strength-bar.filled-medium { background: var(--amber); }
    .strength-bar.filled-strong { background: var(--green); }

    .strength-label {
    font-size  : 11px; font-weight: 600;
    transition : color var(--ease);
    }
    .strength-label.weak   { color: var(--red);   }
    .strength-label.medium { color: var(--amber); }
    .strength-label.strong { color: var(--green); }

    /* ── Terms Checkbox ── */
    .terms-row {
    display    : flex; align-items: flex-start; gap: 9px;
    margin-bottom: 14px;
    animation  : fieldIn .4s .28s ease both;
    }
    .nx-checkbox {
    width        : 16px; height: 16px; flex-shrink: 0;
    border       : 1.5px solid var(--border);
    border-radius: 4px; cursor: pointer;
    accent-color : var(--accent);
    margin-top   : 2px;
    transition   : border-color var(--ease);
    }
    .nx-checkbox:focus { outline: 2px solid var(--accent-s); }
    .terms-text { font-size: 12px; color: var(--tx-2); line-height: 1.5; }
    .terms-text a { color: var(--accent); font-weight: 500; }
    .terms-text a:hover { text-decoration: underline; }
    .terms-error { font-size: 11.5px; color: var(--red); margin-top: 3px; display: none; }

    /* ── Submit Button ── */
    .btn-submit {
    width        : 100%;
    height       : 44px;
    background   : linear-gradient(135deg, #6567f5 0%, #4f52e8 100%);
    color        : #fff; border: none;
    border-radius: var(--radius-inp);
    font-size    : 14px; font-weight: 700;
    letter-spacing: .2px;
    display      : flex; align-items: center; justify-content: center; gap: 8px;
    transition   : opacity var(--ease), transform var(--ease), box-shadow var(--ease);
    box-shadow   : 0 4px 16px var(--accent-gl);
    margin-bottom: 16px;
    animation    : fieldIn .4s .32s ease both;
    position     : relative; overflow: hidden;
    }
    .btn-submit::before {
    content     : '';
    position    : absolute; inset: 0;
    background  : linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
    opacity     : 0;
    transition  : opacity var(--ease);
    }
    .btn-submit:hover:not(:disabled) {
    opacity   : .92;
    transform : translateY(-1px);
    box-shadow: 0 8px 24px var(--accent-gl);
}
.logo img {
    width: 100px;
    margin-bottom: 25px;
}
.btn-submit:hover::before { opacity: 1; }
.btn-submit:active:not(:disabled) { transform: translateY(0); }
.btn-submit:disabled {
    opacity : .72;
    cursor  : not-allowed;
    transform: none;
}

/* Spinner */
.btn-spinner {
    width        : 16px; height: 16px;
    border       : 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation    : spin .7s linear infinite;
    flex-shrink  : 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Divider ── */
.or-divider {
    display    : flex; align-items: center; gap: 10px;
    margin-bottom: 14px; font-size: 11.5px;
    color      : var(--tx-3); font-weight: 500;
    animation  : fieldIn .4s .36s ease both;
}
.or-divider::before,
.or-divider::after {
    content   : '';
    flex      : 1;
    height    : 1px;
    background: var(--border);
}

/* ── Social Buttons ── */
.social-row {
    display      : flex; gap: 10px;
    margin-bottom: 16px;
    animation    : fieldIn .4s .40s ease both;
}

.btn-social {
    flex         : 1;
    height       : 40px;
    background   : #fff;
    border       : 1.5px solid var(--border);
    border-radius: var(--radius-inp);
    display      : flex; align-items: center; justify-content: center; gap: 7px;
    font-size    : 12.5px; font-weight: 600; color: var(--tx-2);
    transition   : border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn-social:hover {
    border-color : var(--accent);
    background   : var(--accent-s);
    color        : var(--accent);
    transform    : translateY(-1px);
    box-shadow   : 0 4px 12px rgba(79,82,232,.12);
}
.btn-social:hover i { color: var(--accent); }
.btn-social i { font-size: 17px; transition: color var(--ease); }
.btn-social .g-icon { color: #EA4335; }
.btn-social .fb-icon { color: #1877F2; }

/* ── Footer link ── */
.card-footer-link {
    text-align : center;
    font-size  : 12.5px; color: var(--tx-3);
    animation  : fieldIn .4s .44s ease both;
}
.card-footer-link a { color: var(--accent); font-weight: 600; }
.card-footer-link a:hover { text-decoration: underline; }

/* ── Branding below card ── */
.page-brand {
    position : absolute; bottom: 16px; left: 0; right: 0;
    text-align: center;
    font-size : 11.5px; color: rgba(255,255,255,.55);
    pointer-events: none;
    z-index   : 2;
}

.page-brand span { background: rgba(0,0,0,.12); border-radius: 99px; padding: 3px 12px; }

/* ═══════════════════════════════════════════════════
    RESPONSIVE TWEAKS
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .reg-card { padding: 24px 20px 18px; }
    .card-title { font-size: 18px; }
    .btn-social span { display: none; }  /* icons only on very small */
    .btn-social { gap: 0; }
}

@media (max-width: 360px) {
    .reg-card { padding: 20px 16px 14px; border-radius: 14px; }
    .card-sub  { margin-bottom: 14px; }
    .field-group { margin-bottom: 10px; }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-7px); }
    30%     { transform: translateX(6px); }
    45%     { transform: translateX(-5px); }
    60%     { transform: translateX(4px); }
    75%     { transform: translateX(-3px); }
    90%     { transform: translateX(2px); }
}

/* Notification */
.lobibox-notify-wrapper {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.lobibox-notify-wrapper.bottom.right { bottom: 20px; right: 20px; }
.lobibox-notify-wrapper.top.right { top: 20px; right: 20px; }

.lobibox-notify {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #333;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    pointer-events: auto;
    animation: lobiboxSlideIn 0.3s ease forwards;
    transition: all 0.3s ease;
}

.lobibox-notify.mini {
    padding: 8px 14px;
    font-size: 13px;
    min-width: 200px;
}

.lobibox-notify.rounded {
    border-radius: 30px;
}

.lobibox-notify.success { border-left: 5px solid #2ecc71; background: #e8f8f5; color: #1e8449; }
.lobibox-notify.warning { border-left: 5px solid #f1c40f; background: #fef9e7; color: #b7950b; }
.lobibox-notify.error   { border-left: 5px solid #e74c3c; background: #fdedec; color: #943126; }
.lobibox-notify.info    { border-left: 5px solid #3498db; background: #ebf5fb; color: #21618c; }

.lobibox-notify .lobibox-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.lobibox-close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.5;
    font-weight: bold;
}
.lobibox-close:hover { opacity: 1; }

@keyframes lobiboxSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes lobiboxFadeOut {
    to { transform: scale(0.9); opacity: 0; }
}
.mask-password {
    -webkit-text-security: disc !important;
    text-security: disc !important;
}

.show-password-text {
    -webkit-text-security: none !important;
    text-security: none !important;
}
html, body{ height:100%; overflow:hidden; }

    .cm-shell{
        display:flex;
        width:100%;
        height:100vh;
        overflow:hidden;
    }

    /* ══════════ LEFT — BRAND PANEL ══════════ */
    .cm-brand{
        position:relative;
        width:55%;
        height:100%;
        background:linear-gradient(160deg, var(--cm-navy-1) 0%, var(--cm-navy-3) 55%, var(--cm-navy-2) 100%);
        color:#e7e9f5;
        overflow:hidden;
        display:flex;
        align-items:center;
    }

    .cm-brand-bg{ position:absolute; inset:0; z-index:0; }

    .cm-grid{
        position:absolute; inset:0;
        background-image:
            linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
        background-size:44px 44px;
        mask-image:radial-gradient(ellipse 80% 70% at 30% 30%, #000 40%, transparent 85%);
    }

    .cm-glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
    .cm-glow-1{ width:420px; height:420px; background:radial-gradient(circle, rgba(79,82,232,.45) 0%, transparent 70%); top:-120px; left:-100px; }
    .cm-glow-2{ width:340px; height:340px; background:radial-gradient(circle, rgba(99,179,237,.28) 0%, transparent 70%); bottom:-80px; right:-60px; }

    .cm-shape{ position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:28px; }
    .cm-shape-1{ width:220px; height:220px; top:12%; right:8%; transform:rotate(18deg); }
    .cm-shape-2{ width:140px; height:140px; bottom:10%; left:6%; transform:rotate(-12deg); border-radius:36px; }

    .cm-brand-inner{
        position:relative; z-index:1;
        max-width:95%;
        margin:0 auto;
        padding:48px;
    }

    .cm-brand-logo{ margin-bottom:28px; animation:cmFadeUp .6s ease both; }
    .cm-brand-logo img{ height:34px; width:auto; filter:brightness(0) invert(1); }

    .cm-badge{
        display:inline-flex; align-items:center; gap:7px;
        background:rgba(79,82,232,.18);
        border:1px solid rgba(99,102,241,.35);
        color:#c7cafd;
        font-size:12px; font-weight:600; letter-spacing:.2px;
        padding:6px 14px; border-radius:99px;
        margin-bottom:22px;
        animation:cmFadeUp .6s .05s ease both;
    }

    .cm-heading{
        font-size:38px; font-weight:800; line-height:1.18;
        letter-spacing:-.8px; color:#fff;
        margin-bottom:16px;
        animation:cmFadeUp .6s .1s ease both;
    }

    .cm-desc{
        font-size:15px; color:#a7abc9; line-height:1.7;
        max-width:420px;
        margin-bottom:34px;
        animation:cmFadeUp .6s .15s ease both;
    }

    .cm-features{
        list-style:none; padding:0; margin:0 0 40px 0;
        display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
    }
    .cm-features li{
        display:flex; align-items:center; gap:10px;
        font-size:13.5px; font-weight:500; color:#dfe1f5;
        animation:cmFadeUp .5s ease both, cmFloat 4.5s ease-in-out infinite;
        animation-delay:var(--d), calc(var(--d) + .6s);
    }
    .cm-feature-icon{
        display:flex; align-items:center; justify-content:center;
        width:30px; height:30px; flex-shrink:0;
        background:rgba(255,255,255,.07);
        border:1px solid rgba(255,255,255,.09);
        border-radius:9px; color:#9fa3f7; font-size:15px;
    }

    .cm-trusted{ animation:cmFadeUp .6s .3s ease both; }
    .cm-trusted-label{
        display:block; font-size:11.5px; font-weight:700;
        letter-spacing:.6px; text-transform:uppercase;
        color:#71759c; margin-bottom:12px;
    }
    .cm-tech-badges{ display:flex; flex-wrap:wrap; gap:8px; }
    .cm-tech-badge{
        display:inline-flex; align-items:center; gap:6px;
        font-size:12px; font-weight:600; color:#c3c6e6;
        background:rgba(255,255,255,.055);
        border:1px solid rgba(255,255,255,.09);
        border-radius:8px; padding:6px 11px;
        transition:background .25s ease, transform .25s ease;
    }
    .cm-tech-badge:hover{ background:rgba(255,255,255,.11); transform:translateY(-1px); }

    @keyframes cmFadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
    @keyframes cmFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }

    /* ══════════ RIGHT — AUTH PANEL ══════════ */
    .cm-auth{
        width:45%;
        height:100%;
        background:#ffffff;
        display:flex; align-items:center; justify-content:center;
        padding:32px;
    }

    .cm-auth-card{
        width:100%; max-width:420px;
        animation:cmCardIn .5s cubic-bezier(.22,.68,0,1.15) both;
    }
    @keyframes cmCardIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

    .cm-auth-logo{ margin-bottom:26px; }
    .cm-auth-logo img{ height:30px; width:auto; }

    .cm-auth-title{
        font-size:24px; font-weight:800; letter-spacing:-.5px;
        color:var(--cm-txt-1); margin-bottom:6px;
    }
    .cm-auth-sub{ font-size:13.5px; color:var(--cm-txt-3); margin-bottom:28px; }

    .cm-label{
        font-size:12.5px; font-weight:600; color:var(--cm-txt-2);
        margin-bottom:6px;
    }

    .cm-input-wrap{ position:relative; }
    .cm-input-icon{
        position:absolute; left:16px; top:50%; transform:translateY(-50%);
        color:var(--cm-txt-3); font-size:16px; pointer-events:none;
    }
    .cm-input{
        height:50px;
        padding-left:44px;
        border:1.5px solid var(--cm-border);
        border-radius:11px;
        font-size:14px;
        background:#f8f9fb;
        transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .cm-input-pass{ padding-right:44px; }
    .cm-input:focus{
        border-color:var(--cm-accent);
        background:#fff;
        box-shadow:0 0 0 4px var(--cm-accent-soft);
    }

    .cm-eye-btn{
        position:absolute; right:12px; top:50%; transform:translateY(-50%);
        background:none; border:none; color:var(--cm-txt-3); padding:4px;
        transition:color .2s ease;
    }
    .cm-eye-btn:hover{ color:var(--cm-accent); }

    .cm-row-between{ margin-bottom:22px; }
    .cm-check{ accent-color:var(--cm-accent); cursor:pointer; }
    .cm-remember-label{ font-size:12.5px; color:var(--cm-txt-2); cursor:pointer; }
    .cm-forgot-link{ font-size:12.5px; font-weight:600; color:var(--cm-accent); }
    .cm-forgot-link:hover{ text-decoration:underline; }

    .cm-btn-submit{
        height:50px;
        background:linear-gradient(135deg, var(--cm-accent-2) 0%, var(--cm-accent) 100%);
        color:#fff; font-weight:700; font-size:14.5px;
        border:none; border-radius:11px;
        display:flex; align-items:center; justify-content:center;
        box-shadow:0 10px 24px rgba(79,82,232,.28);
        transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
        margin-bottom:22px;
    }
    .cm-btn-submit:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 14px 30px rgba(79,82,232,.34); }
    .cm-btn-submit:disabled{ opacity:.75; }

    .cm-divider{
        display:flex; align-items:center; gap:12px;
        font-size:11px; font-weight:700; letter-spacing:.6px;
        color:var(--cm-txt-3); margin-bottom:18px;
    }
    .cm-divider::before, .cm-divider::after{ content:''; flex:1; height:1px; background:var(--cm-border); }

    .cm-social-row{ display:flex; gap:10px; margin-bottom:26px; }
    .cm-btn-social{
        flex:1; height:44px;
        display:flex; align-items:center; justify-content:center; gap:8px;
        background:#fff; border:1.5px solid var(--cm-border); border-radius:11px;
        font-size:13px; font-weight:600; color:var(--cm-txt-2);
        opacity:.6; cursor:not-allowed;
    }

    .cm-secure-footer{
        display:flex; align-items:center; justify-content:center; gap:6px;
        font-size:12px; color:var(--cm-txt-3);
    }
    .cm-secure-footer i{ color:#16a34a; }

    /* ══════════ RESPONSIVE ══════════ */
    @media (max-width:991.98px){
        .cm-brand{ width:50%; }
        .cm-auth{ width:50%; }
        .cm-heading{ font-size:30px; }
        .cm-features{ grid-template-columns:1fr; }
    }

    @media (max-width:767.98px){
        html, body{ overflow-y:auto; }
        .cm-shell{ flex-direction:column; height:auto; min-height:100vh; }
        .cm-brand{ width:100%; padding:40px 0; }
        .cm-brand-inner{ padding:32px 24px; }
        .cm-auth{ width:100%; padding:32px 24px 48px; }
        .cm-trusted{ display:none; }
        .cm-features{ grid-template-columns:1fr 1fr; margin-bottom:8px; }
    }

    @media (max-width:420px){
        .cm-heading{ font-size:26px; }
        .cm-features{ grid-template-columns:1fr; }
    }