/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(115, 100, 255, .12),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(115, 100, 255, .10),
            transparent 25%
        ),
        #f3f5ff;

    color: #17205f;
}


/* =========================================================
   LOGIN PAGE
========================================================= */

.login-page {

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}


/* =========================================================
   MAIN LOGIN WRAPPER
========================================================= */

.login-wrapper {

    width: 1060px;
    height: 530px;

    display: grid;

    grid-template-columns: 57% 43%;

    overflow: hidden;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(47, 40, 140, .16);
}


/* =========================================================
   LEFT BRAND PANEL
========================================================= */

.brand-panel {

    position: relative;

    overflow: hidden;

    padding: 27px 38px;

    color: white;

    background-image: url("../img/login-left-panel.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* =========================================================
   IMAGE BRAND PANEL
   The supplied artwork contains the complete left section.
   ========================================================= */

.brand-panel > .circle,
.brand-panel > .dot-pattern,
.brand-panel > .brand-logo,
.brand-panel > .brand-content,
.brand-panel > .feature-list,
.brand-panel > .dashboard-scene,
.brand-panel > .security-strip {
    display: none;
}



/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.circle {

    position: absolute;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    pointer-events: none;
}


.circle-1 {

    width: 400px;
    height: 400px;

    right: -135px;
    top: -230px;
}


.circle-2 {

    width: 300px;
    height: 300px;

    left: -190px;
    bottom: -220px;

    background: rgba(255,255,255,.025);
}


/* =========================================================
   DOT PATTERN
========================================================= */

.dot-pattern {

    position: absolute;

    width: 95px;
    height: 80px;

    right: 175px;
    top: 150px;

    opacity: .16;

    background-image:
        radial-gradient(
            circle,
            white 1.7px,
            transparent 1.7px
        );

    background-size: 14px 14px;
}


/* =========================================================
   LOGO
========================================================= */

.brand-logo {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 11px;
}


.logo-mark {

    position: relative;

    width: 45px;
    height: 45px;

    border: 4px solid white;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}


.logo-inner {

    position: absolute;

    width: 18px;
    height: 18px;

    left: 9px;
    top: 9px;

    border: 3px solid white;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}


.brand-name {

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -.4px;
}


.brand-tagline {

    font-size: 8px;

    letter-spacing: 3px;

    margin-top: 1px;

    opacity: .85;
}


/* =========================================================
   BRAND CONTENT
========================================================= */

.brand-content {

    position: relative;

    z-index: 5;

    margin-top: 38px;

    width: 380px;

    max-width: 100%;
}


.brand-content h1 {

    margin: 0;

    font-size: 31px;

    line-height: 1.08;

    letter-spacing: -.7px;

    font-weight: 750;
}


.brand-content h1 span {

    color: #c7c1ff;
}


.brand-content p {

    width: 360px;

    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 0;

    color: rgba(255,255,255,.68);

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.feature-list {

    position: absolute;

    z-index: 8;

    right: 18px;
    top: 72px;

    width: 145px;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.feature-card {

    min-height: 57px;

    padding: 7px 8px;

    display: flex;

    align-items: center;

    gap: 7px;

    border-radius: 9px;

    border: 1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            135deg,
            rgba(129,112,255,.45),
            rgba(49,36,150,.35)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter: blur(8px);
}


.feature-icon {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 14px;

    background:
        radial-gradient(
            circle at 30% 25%,
            #968bff,
            #5945dd
        );

    box-shadow:
        0 5px 14px rgba(0,0,0,.15);
}


.feature-card strong,
.feature-card span {

    display: block;

    font-size: 10px;

    line-height: 1.2;
}


.feature-card strong {

    font-weight: 600;
}


.feature-card span {

    color: rgba(255,255,255,.82);
}


/* =========================================================
   DASHBOARD SCENE
========================================================= */

.dashboard-scene {

    position: absolute;

    left: 20px;
    right: 15px;

    bottom: 0;

    height: 295px;
}


/* =========================================================
   MONITOR
========================================================= */

.monitor {

    position: absolute;

    left: 75px;
    bottom: 30px;

    width: 350px;
    height: 225px;

    padding: 8px;

    display: flex;

    border-radius: 12px;

    border: 3px solid rgba(255,255,255,.85);

    background: #d9d8f8;

    box-shadow:
        0 12px 25px rgba(0,0,0,.25);
}


/* Monitor sidebar */

.monitor-sidebar {

    width: 65px;

    padding: 6px 5px;

    border-radius: 7px 0 0 7px;

    background: #33268f;

    color: white;
}


.mini-logo {

    width: 17px;
    height: 17px;

    margin: 3px auto 11px;

    border: 2px solid white;

    clip-path: polygon(
        50% 0,
        100% 25%,
        100% 75%,
        50% 100%,
        0 75%,
        0 25%
    );
}


.side-item {

    display: flex;

    gap: 4px;

    align-items: center;

    padding: 5px 2px;

    margin-bottom: 1px;

    font-size: 5px;

    color: rgba(255,255,255,.72);

    border-radius: 3px;
}


.side-item i {

    width: 8px;

    font-size: 5px;
}


.side-item.active {

    background: rgba(255,255,255,.16);

    color: white;
}


/* =========================================================
   MONITOR CONTENT
========================================================= */

.monitor-content {

    flex: 1;

    padding: 8px;

    background: #fafaff;

    border-radius: 0 7px 7px 0;
}


.stats-row {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 5px;
}



.stat-box {

    padding: 7px;

    border-radius: 5px;

    background: white;

    box-shadow:
        0 2px 7px rgba(38,35,100,.08);
}


.stat-box small {

    display: block;

    font-size: 5px;

    color: #76799e;
}


.stat-box strong {

    display: block;

    margin-top: 3px;

    font-size: 11px;

    color: #26256d;
}


.stat-box em {

    font-style: normal;

    font-size: 5px;

    color: #23b979;
}


/* =========================================================
   CHART
========================================================= */

.chart-box {

    position: relative;

    margin-top: 6px;

    padding: 7px;

    height: 135px;

    border-radius: 5px;

    background: white;

    box-shadow:
        0 2px 7px rgba(38,35,100,.08);
}


.chart-title {

    font-size: 6px;

    font-weight: 700;

    color: #2b2872;
}


.chart {

    position: relative;

    height: 85px;

    margin-top: 4px;
}


.chart svg {

    width: 100%;
    height: 100%;
}


.growth-badge {

    position: absolute;

    right: 16px;
    top: 12px;

    padding: 3px 5px;

    border-radius: 4px;

    color: white;

    background: #4936ba;

    font-size: 5px;

    font-weight: bold;
}


.chart-months {

    display: flex;

    justify-content: space-between;

    color: #a0a1ba;

    font-size: 5px;
}


/* =========================================================
   LAPTOP
========================================================= */

.laptop {

    position: absolute;

    left: 20px;
    bottom: 15px;

    width: 105px;

    z-index: 10;
}


.laptop-screen {

    height: 70px;

    padding: 6px;

    border: 4px solid #26206d;

    border-radius: 6px;

    background: white;

    transform: perspective(400px) rotateY(7deg);
}


.fake-bars {

    display: flex;

    gap: 3px;
}


.fake-bars span {

    width: 14px;
    height: 3px;

    border-radius: 2px;

    background: #c9c5ff;
}


.fake-chart {

    height: 40px;

    margin-top: 6px;

    display: flex;

    align-items: end;

    gap: 4px;
}


.fake-chart i {

    width: 9px;

    background: #8073ed;

    border-radius: 2px 2px 0 0;
}


.laptop-base {

    height: 5px;

    margin-left: -10px;
    margin-right: -10px;

    border-radius: 0 0 12px 12px;

    background: #322879;
}


/* =========================================================
   PLANT
========================================================= */

.plant {

    position: absolute;

    right: 50px;

    bottom: 18px;

    width: 90px;
    height: 160px;

    z-index: 10;
}


.leaf {

    position: absolute;

    width: 43px;
    height: 82px;

    border-radius:
        100% 0
        100% 0;

    transform-origin: bottom;

    background:
        linear-gradient(
            135deg,
            #9ecbbd,
            #275e64
        );
}


.leaf-1 {

    left: 22px;
    top: 0;

    transform: rotate(-25deg);
}


.leaf-2 {

    left: 42px;
    top: 13px;

    transform: rotate(28deg);
}


.leaf-3 {

    left: 7px;
    top: 28px;

    transform: rotate(-48deg);
}


.leaf-4 {

    left: 47px;
    top: 43px;

    transform: rotate(50deg);
}


.leaf-5 {

    left: 22px;
    top: 47px;

    transform: rotate(-10deg);
}


.plant-pot {

    position: absolute;

    bottom: 0;
    left: 26px;

    width: 47px;
    height: 42px;

    border-radius:
        4px 4px 12px 12px;

    background:
        linear-gradient(
            90deg,
            #241c58,
            #41326f,
            #1c174d
        );
}


/* =========================================================
   COFFEE CUP
========================================================= */

.coffee {

    position: absolute;

    right: 8px;
    bottom: 17px;

    width: 45px;
    height: 70px;

    z-index: 11;
}


.cup {

    position: absolute;

    left: 0;
    bottom: 4px;

    width: 33px;
    height: 40px;

    border-radius:
        4px 4px 11px 11px;

    background:
        linear-gradient(
            90deg,
            #d7d2ff,
            #faf9ff,
            #aaa4df
        );
}


.handle {

    position: absolute;

    right: 0;
    bottom: 18px;

    width: 17px;
    height: 19px;

    border: 5px solid #c2bdf0;

    border-left: 0;

    border-radius:
        0 11px 11px 0;
}


/* =========================================================
   SECURITY STRIP
========================================================= */

.security-strip {

    position: absolute;

    z-index: 20;

    left: 215px;
    right: 0;

    bottom: 0;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding: 0 10px;

    border-radius: 20px 0 0 0;

    background:
        rgba(39, 27, 125, .78);

    backdrop-filter: blur(10px);
}


.security-strip div {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 9px;

    color: white;
}


.security-strip i {

    font-size: 13px;

    color: #c8c2ff;
}


/* =========================================================
   RIGHT LOGIN PANEL
========================================================= */

.login-panel {

    position: relative;

    display: grid;

    grid-template-rows: minmax(0, 1fr) auto;

    min-height: 0;

    padding: 40px 48px 18px;

    background: rgba(255,255,255,.98);

    overflow: hidden;
}


.login-content {

    width: 100%;

    max-width: 350px;

    min-height: 0;

    margin: 0 auto;

    overflow: visible;
}


/* =========================================================
   LOGIN HEADING
========================================================= */

.login-content h2 {

    margin: 0;

    font-size: 29px;

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.7px;

    color: #17215e;
}


.login-subtitle {

    margin: 8px 0 18px;

    font-size: 13px;

    color: #8185a8;
}


/* =========================================================
   FORM
========================================================= */

.form-group {

    margin-bottom: 12px;
}


.form-group label {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 650;

    color: #18205c;
}


/* =========================================================
   INPUT
========================================================= */

.input-wrapper {

    position: relative;

    display: flex;

    width: 100%;
    height: 43px;

    overflow: hidden;

    border: 1px solid #e0e2ef;

    border-radius: 6px;

    background: #f3f5fc;

    transition: .2s ease;
}


.input-wrapper:focus-within {

    border-color: #6855df;

    box-shadow:
        0 0 0 3px rgba(104,85,223,.10);
}


.input-icon {

    width: 44px;

    flex: 0 0 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-right: 1px solid #e0e2ef;

    background:
        rgba(255,255,255,.72);

    color: #70759e;

    font-size: 14px;
}


.input-wrapper input {

    width: 100%;

    border: 0;
    outline: 0;

    padding: 0 12px;

    color: #171e58;

    background: transparent;

    font-size: 13px;
}


.input-wrapper input::placeholder {

    color: #969ab6;
}


/* =========================================================
   SELECT
========================================================= */

.select-wrapper {

    align-items: center;

    padding-left: 12px;
}


.select-wrapper select {

    width: 100%;
    height: 100%;

    border: 0;
    outline: 0;

    appearance: none;

    color: #8589a8;

    background: transparent;

    font-size: 13px;
}


.select-wrapper i {

    position: absolute;

    right: 14px;

    color: #747aa1;

    font-size: 9px;

    pointer-events: none;
}


/* =========================================================
   SIGN IN BUTTON
========================================================= */

.sign-in-btn {

    width: 100%;

    height: 43px;

    margin-top: 7px;

    border: 0;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 16px;

    color: white;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #614bdd,
            #533bd0
        );

    box-shadow:
        0 7px 15px rgba(83,59,208,.18);

    transition: .2s ease;
}


.sign-in-btn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 10px 20px rgba(83,59,208,.28);
}


.sign-in-btn i {

    font-size: 14px;
}


/* =========================================================
   SESSION ERROR / ALERT
   Keeps the recovery message compact so the lower
   security and copyright areas remain inside the panel.
========================================================= */

.login-content .alert {
    margin-top: 12px;
    margin-bottom: 0;
    padding: 10px 12px;
    line-height: 1.35;
}

.login-content .alert button,
.login-content .alert .btn {
    margin-top: 6px;
}


/* =========================================================
   DIVIDER
========================================================= */

.divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 14px 0;
}


.divider span {

    flex: 1;

    height: 1px;

    background: #e5e5ef;
}


.divider label {

    color: #8588a8;

    font-size: 12px;
}


/* =========================================================
   SECURITY MESSAGE
========================================================= */

.protected {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    color: #303774;

    font-size: 11px;
}


.protected i {

    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 4px;

    color: white;

    background: #5a49d4;

    font-size: 9px;
}


/* =========================================================
   FOOTER
========================================================= */

.login-footer {

    text-align: center;

    color: #8a8eae;

    font-size: 12px;

    line-height: 1.5;
}


.login-footer strong {

    color: #5540d1;

    font-weight: 600;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .login-page {
        padding: 15px;
    }

    .login-wrapper {
        width: 100%;
        max-width: 1000px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

    .login-page {
        padding: 0;
    }

    .login-wrapper {

        width: 100%;
        height: auto;
        min-height: 100vh;

        grid-template-columns: 1fr;

        border-radius: 0;
    }

    .brand-panel {

        min-height: 390px;

        padding: 25px;
    }

    .feature-list {
        display: none;
    }

    .brand-content {

        margin-top: 35px;

        width: 100%;
    }

    .brand-content h1 {

        font-size: 29px;
    }

    .brand-content p {

        width: 100%;

        font-size: 13px;
    }

    .dashboard-scene {

        display: none;
    }

    .security-strip {

        display: none;
    }

    .login-panel {

        min-height: 500px;

        padding:
            40px
            25px
            25px;
    }

    .login-content {

        max-width: 400px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .brand-panel {

        min-height: 350px;
    }

    .brand-name {

        font-size: 18px;
    }

    .brand-tagline {

        font-size: 7px;

        letter-spacing: 2px;
    }

    .logo-mark {

        width: 40px;
        height: 40px;
    }

    .logo-inner {

        width: 16px;
        height: 16px;

        left: 8px;
        top: 8px;
    }

    .brand-content h1 {

        font-size: 26px;
    }

    .login-panel {

        padding:
            35px
            20px
            20px;
    }
}

/* =========================================================
   PREMIUM RECOVER SESSION MODAL
   ========================================================= */

.recover-session-modal {

    border: 0;

    border-radius: 20px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(35, 24, 105, .20);

}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.recover-modal-header {

    position: relative;

    display: flex;

    align-items: center;

    padding: 24px 24px 20px;

    background:
        linear-gradient(
            135deg,
            #f7f5ff 0%,
            #ffffff 100%
        );

    border-bottom: 1px solid #eeeefe;

}


.recover-modal-icon {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #ffffff;

    font-size: 19px;

    background:
        linear-gradient(
            135deg,
            #7c5cff 0%,
            #5a3ef2 100%
        );

    box-shadow:
        0 8px 20px rgba(92, 62, 242, .25);

}


.recover-modal-title {

    margin-left: 14px;

}


.recover-modal-title h5 {

    margin: 0;

    color: #18245c;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: -.2px;

}


.recover-modal-title span {

    display: block;

    margin-top: 3px;

    color: #8a8eae;

    font-size: 11px;

}


.recover-modal-close {

    margin-left: auto;

    opacity: .55;

}


.recover-modal-close:hover {

    opacity: 1;

}


/* ---------------------------------------------------------
   BODY
   --------------------------------------------------------- */

.recover-modal-body {

    padding: 22px 24px 18px;

}


/* ---------------------------------------------------------
   WARNING
   --------------------------------------------------------- */

.recover-warning {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px;

    margin-bottom: 22px;

    border-radius: 13px;

    border: 1px solid #ffd5d8;

    background:
        linear-gradient(
            135deg,
            #fff5f5,
            #fffafa
        );

}


.recover-warning-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: #d93645;

    background: #ffe0e3;

    font-size: 15px;

}


.recover-warning-text {

    padding-top: 1px;

}


.recover-warning-text strong {

    display: block;

    margin-bottom: 3px;

    color: #a92332;

    font-size: 13px;

    font-weight: 700;

}


.recover-warning-text p {

    margin: 0;

    color: #8c5960;

    font-size: 11.5px;

    line-height: 1.5;

}


/* ---------------------------------------------------------
   RECOVERY CODE
   --------------------------------------------------------- */

.recover-code-group label {

    display: block;

    margin-bottom: 7px;

    color: #18245c;

    font-size: 12px;

    font-weight: 700;

}


.recover-code-input {

    position: relative;

    display: flex;

    align-items: center;

}


.recover-input-icon {

    position: absolute;

    left: 0;

    top: 0;

    width: 46px;

    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #7566d9;

    border-right: 1px solid #e4e3f2;

    pointer-events: none;

}


.recover-code-input .form-control {

    height: 44px;

    padding-left: 60px;

    padding-right: 14px;

    border-radius: 10px;

    border: 1px solid #deddf0;

    background: #fafaff;

    color: #25285c;

    font-size: 13px;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.recover-code-input .form-control:focus {

    border-color: #7258ef;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(114, 88, 239, .10);

}


/* ---------------------------------------------------------
   DYNAMIC MESSAGE
   --------------------------------------------------------- */

.recover-session-message {

    min-height: 0;

    margin-top: 8px;

    font-size: 12px;

}


/* ---------------------------------------------------------
   SECURITY NOTE
   --------------------------------------------------------- */

.recover-security-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #eeeeF7;

    color: #8b8eaa;

    font-size: 10.5px;

}


.recover-security-note i {

    color: #6753df;

    font-size: 12px;

}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.recover-modal-footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    padding: 15px 24px 20px;

    border-top: 0;

    background: #ffffff;

}


.recover-cancel-btn {

    height: 40px;

    padding: 0 17px;

    border-radius: 9px;

    border: 1px solid #e2e1ed;

    background: #ffffff;

    color: #777b98;

    font-size: 12px;

    font-weight: 600;

}


.recover-cancel-btn:hover {

    background: #f7f7fb;

    color: #4e526f;

}


.recover-confirm-btn {

    height: 40px;

    padding: 0 15px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    border: 0;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #7c5cff 0%,
            #5a3ef2 100%
        );

    font-size: 12px;

    font-weight: 600;

    box-shadow:
        0 7px 18px rgba(90, 62, 242, .20);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.recover-confirm-btn:hover {

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(90, 62, 242, .28);

}


.recover-confirm-btn .recover-arrow {

    margin-left: 3px;

    font-size: 11px;

}