/* Log in page (auth/layouts/split.blade.php + auth/login.blade.php).
   Colours are theme tokens only, so the page follows the admin panel's theme. */

:root {
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --control-h: 3.25rem;
}

body.auth-split {
    min-height: 100vh;
    background-color: var(--kt-gray-100);
    color: var(--kt-gray-800);
}

/* ---------- Shell ---------- */
.auth-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* Faint dot grid that fades out towards the edges - texture, not decoration. */
.auth-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--kt-gray-300) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%);
    transition: opacity .3s;
}

.auth-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 2.5rem 1rem;
}

.auth-head {
    width: 100%;
    max-width: 440px;
    display: flex;
    justify-content: center;
    margin-top: auto;
    margin-bottom: 1.75rem;
}

.auth-head img {
    height: 44px;
}

.auth-column {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background-color: var(--kt-white);
    border-radius: 1rem;
    box-shadow: var(--kt-dropdown-box-shadow);
    padding: 2.5rem;
    transition: padding .3s var(--ease-out), box-shadow .3s;
}

.auth-footer {
    margin-top: auto;
    padding-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    font-size: .85rem;
}

.auth-aside {
    display: none;
}

/* ---------- Split layout (desktop only) ---------- */
@media (min-width: 992px) {
    body.auth-split {
        background-color: var(--kt-white);
    }

    body.auth-split .auth-shell {
        /* The panel leads: a little wider than the form side. */
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    body.auth-split .auth-shell::before {
        opacity: 0;
    }

    body.auth-split .auth-main {
        padding: 2.5rem 3rem;
    }

    /* Logo sits just above the form, centred over it; the auto margins centre logo + form
       together in the column, with the footer links left at the bottom. */
    body.auth-split .auth-head {
        max-width: 380px;
        justify-content: center;
        margin-top: auto;
        margin-bottom: 2.25rem;
    }

    body.auth-split .auth-head img {
        height: 38px;
    }

    body.auth-split .auth-column {
        max-width: 380px;
        margin: 0 0 auto;
    }

    body.auth-split .auth-card {
        box-shadow: none;
        padding: 0;
        background: transparent;
    }

    body.auth-split .auth-footer {
        margin-top: 0;
    }

    /* Panel on the left, form on the right. The form stays first in the DOM so keyboard
       and screen-reader order still starts at the username field. */
    body.auth-split .auth-aside {
        display: flex;
        order: -1;
    }
}

/* ---------- Brand panel ---------- */
.auth-aside {
    position: sticky;
    top: 1rem;
    height: calc(100vh - 2rem);
    margin: 1rem 0 1rem 1rem;
    border-radius: 1.25rem;
    overflow: hidden;
    flex-direction: column;
    padding: 3rem;
    isolation: isolate;
    /* The admin panel's own content grey, so the panel reads as part of the product. */
    background-color: var(--kt-gray-100);
}

/* A soft white light from the top that drifts slowly - neutral on purpose, red stays on the
   card only. Turned off with everything else under prefers-reduced-motion. */
.auth-aside::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(ellipse at 40% 18%, color-mix(in srgb, var(--kt-white) 85%, transparent), transparent 55%);
    animation: drift 18s ease-in-out infinite alternate;
}

.auth-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(color-mix(in srgb, var(--kt-gray-400) 22%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--kt-gray-400) 22%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 40% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse at 40% 0%, #000, transparent 70%);
}

@keyframes drift {
    to {
        transform: translate(8%, 6%) scale(1.08);
    }
}

/* Headline + demo window, centred as one group in the panel. */
.aside-inner {
    margin: auto 0;
    width: 100%;
    max-width: 640px;
}

.aside-copy {
    max-width: 600px;
}

/* The biggest text on the page, so the panel - not the form - is what the eye lands on.
   Sized by width and height, so a short laptop screen still fits headline + card. */
.aside-copy h2 {
    color: var(--kt-gray-900);
    font-size: clamp(2.5rem, min(3.4vw, 6.2vh), 4.4rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin-bottom: 1.25rem;
    /* Even line lengths - no single word left alone on the last line. */
    text-wrap: balance;
}

.aside-copy p {
    color: var(--kt-gray-600);
    font-size: 1.3rem;
    line-height: 1.55;
    max-width: 520px;
    margin: 0;
}

/* ---------- Mini admin window: create a test, then see its results ---------- */
/* One knob for the whole window's size. It steps up with the screen, and only when the
   screen is tall enough for headline + window to fit without clipping. */
.demo-stack {
    --demo-scale: 1;
}

@media (min-width: 1200px) and (min-height: 700px) {
    .demo-stack {
        --demo-scale: 1.15;
    }
}

@media (min-width: 1400px) and (min-height: 760px) {
    .demo-stack {
        --demo-scale: 1.3;
    }
}

.demo-stack {
    position: relative;
    margin-top: calc(2.75rem * var(--demo-scale));
    max-width: calc(440px * var(--demo-scale));
}

/* The sheet behind the window, tilted the other way. */
.demo-stack::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: calc(1rem * var(--demo-scale));
    background-color: color-mix(in srgb, var(--kt-primary) 16%, transparent);
    transform: rotate(2.5deg) translate(10px, 8px);
}

.demo-card {
    position: relative;
    padding: calc(1rem * var(--demo-scale)) calc(1.25rem * var(--demo-scale)) calc(1.25rem * var(--demo-scale));
    border-radius: calc(1rem * var(--demo-scale));
    background-color: var(--kt-white);
    border: 1px solid var(--kt-gray-200);
    box-shadow: var(--kt-dropdown-box-shadow);
    transform: rotate(-1.2deg);
    overflow: hidden;
    color: var(--kt-gray-800);
}

/* Segmented tabs with a white pill that slides to the active tab. */
.demo-tabs {
    position: relative;
    display: inline-flex;
    padding: 3px;
    margin-bottom: calc(1rem * var(--demo-scale));
    border-radius: calc(.65rem * var(--demo-scale));
    background-color: var(--kt-gray-100);
}

.demo-tab {
    position: relative;
    z-index: 1;
    padding: calc(.35rem * var(--demo-scale)) calc(.85rem * var(--demo-scale));
    font-size: calc(.8rem * var(--demo-scale));
    font-weight: 600;
    color: var(--kt-gray-600);
    transition: color .25s;
}

.demo-tab.is-active {
    color: var(--kt-gray-900);
}

.demo-tab-pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    border-radius: calc(.5rem * var(--demo-scale));
    background-color: var(--kt-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: transform .4s var(--ease-out), width .4s var(--ease-out);
}

/* Both scenes sit in the same grid cell, so the window keeps one height while they swap. */
.demo-scenes {
    display: grid;
}

.demo-scene {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    transition: opacity .3s, transform .4s var(--ease-out);
}

.demo-scene:not(.is-active) {
    opacity: 0;
    transform: translateY(8px);
}

.demo-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(.75rem * var(--demo-scale));
    margin-bottom: calc(.9rem * var(--demo-scale));
}

.demo-title {
    font-size: calc(.95rem * var(--demo-scale));
    font-weight: 600;
    color: var(--kt-gray-900);
}

.demo-pill {
    white-space: nowrap;
    padding: calc(.2rem * var(--demo-scale)) calc(.6rem * var(--demo-scale));
    border-radius: calc(2rem * var(--demo-scale));
    background-color: var(--kt-gray-100);
    color: var(--kt-gray-700);
    font-size: calc(.72rem * var(--demo-scale));
    font-weight: 600;
}

.demo-label {
    margin-bottom: calc(.55rem * var(--demo-scale));
    font-size: calc(.75rem * var(--demo-scale));
    font-weight: 600;
    color: var(--kt-gray-600);
}

.cov-row {
    display: grid;
    grid-template-columns: calc(4.75rem * var(--demo-scale)) 1fr calc(1.75rem * var(--demo-scale));
    align-items: center;
    gap: calc(.75rem * var(--demo-scale));
    font-size: calc(.85rem * var(--demo-scale));
}

.cov-row + .cov-row {
    margin-top: calc(.6rem * var(--demo-scale));
}

/* Last subject row (the footer row follows it): keeps a gap above the footer's divider. */
.cov-row:nth-last-child(2) {
    margin-bottom: calc(1rem * var(--demo-scale));
}

.cov-track {
    height: calc(.5rem * var(--demo-scale));
    border-radius: calc(1rem * var(--demo-scale));
    background-color: var(--kt-gray-100);
    overflow: hidden;
}

.cov-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--kt-primary);
    transition: width .9s var(--ease-out);
}

.cov-count,
.demo-num {
    font-variant-numeric: tabular-nums;
}

.cov-count {
    text-align: right;
    font-weight: 600;
    color: var(--kt-gray-900);
}

/* Auto top margin: the shorter Create scene keeps its footer row at the window's bottom. */
.demo-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(1rem * var(--demo-scale));
    margin-top: auto;
    padding-top: calc(.9rem * var(--demo-scale));
    border-top: 1px solid var(--kt-gray-200);
}

.demo-total {
    font-size: calc(.82rem * var(--demo-scale));
    color: var(--kt-gray-700);
}

.demo-total strong {
    color: var(--kt-gray-900);
}

.demo-btn {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: calc(2.15rem * var(--demo-scale));
    width: calc(8.75rem * var(--demo-scale));
    border-radius: calc(.55rem * var(--demo-scale));
    background-color: var(--kt-primary);
    color: var(--kt-white);
    font-size: calc(.8rem * var(--demo-scale));
    font-weight: 600;
    transition: background-color .3s, color .3s, transform .12s;
}

.demo-btn.is-pressed {
    transform: scale(.95);
}

/* "Test ready" is dark words on the pale green, not white on green - the theme's green is
   too light to carry white text. */
.demo-btn[data-face="done"] {
    background-color: var(--kt-success-light);
    color: var(--kt-gray-900);
}

.demo-btn[data-face="done"] svg {
    color: var(--kt-success);
}

.demo-btn[data-face="done"] .tick {
    animation: draw .45s .1s var(--ease-out) forwards;
}

.demo-btn .btn-face {
    gap: calc(.4rem * var(--demo-scale));
}

.demo-btn[data-face="idle"] .face-idle,
.demo-btn[data-face="busy"] .face-busy,
.demo-btn[data-face="done"] .face-done {
    opacity: 1;
    transform: none;
}

.demo-btn:not([data-face="idle"]) .face-idle {
    transform: translateY(-110%);
}

.res-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: calc(.9rem * var(--demo-scale));
    border: 1px solid var(--kt-gray-200);
    border-radius: calc(.75rem * var(--demo-scale));
}

.res-stat {
    padding: calc(.55rem * var(--demo-scale)) calc(.75rem * var(--demo-scale));
}

.res-stat + .res-stat {
    border-left: 1px solid var(--kt-gray-200);
}

.res-stat .k {
    font-size: calc(.72rem * var(--demo-scale));
    color: var(--kt-gray-600);
}

.res-stat .v {
    font-size: calc(1.15rem * var(--demo-scale));
    font-weight: 700;
    color: var(--kt-gray-900);
}

.res-stat .v small {
    font-size: calc(.72rem * var(--demo-scale));
    font-weight: 500;
    color: var(--kt-gray-500);
}

.lb-row {
    display: grid;
    grid-template-columns: calc(1rem * var(--demo-scale)) calc(1.75rem * var(--demo-scale)) 1fr auto;
    align-items: center;
    gap: calc(.6rem * var(--demo-scale));
    padding: calc(.35rem * var(--demo-scale)) calc(.5rem * var(--demo-scale));
    border-radius: calc(.55rem * var(--demo-scale));
    font-size: calc(.85rem * var(--demo-scale));
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .3s, transform .45s var(--ease-out), background-color .3s;
}

.lb-row.is-in {
    opacity: 1;
    transform: none;
}

.lb-row.is-in.is-top {
    background-color: var(--kt-gray-100);
}

.lb-rank {
    text-align: center;
    font-weight: 600;
    color: var(--kt-gray-600);
}

.lb-avatar {
    width: calc(1.75rem * var(--demo-scale));
    height: calc(1.75rem * var(--demo-scale));
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--kt-gray-200);
    color: var(--kt-gray-700);
    font-size: calc(.68rem * var(--demo-scale));
    font-weight: 700;
}

.lb-name {
    display: flex;
    align-items: center;
    gap: calc(.35rem * var(--demo-scale));
    color: var(--kt-gray-800);
    font-weight: 500;
}

.lb-name svg {
    color: var(--kt-warning);
}

.lb-marks {
    font-weight: 700;
    color: var(--kt-gray-900);
    font-variant-numeric: tabular-nums;
}

.lb-marks small {
    font-weight: 500;
    color: var(--kt-gray-500);
}

.demo-cursor {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}

.demo-cursor svg {
    display: block;
    width: calc(22px * var(--demo-scale));
    height: calc(22px * var(--demo-scale));
    transition: transform .12s;
    transform-origin: 3px 3px;
}

.demo-cursor.is-pressing svg {
    transform: scale(.82);
}

/* ---------- Entrance: fields rise in one after another ---------- */
/* Hidden only when scripts run (html.js, set in the layout's head) - without JavaScript nothing
   would ever add body.is-ready, and the form would stay invisible. */
html.js .reveal {
    opacity: 0;
    transform: translateY(8px);
}

body.is-ready .reveal {
    animation: rise .5s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}

/* After a failed try the page reloads with the error; show it at once instead of replaying the
   entrance. */
html.js body.skip-intro .reveal {
    opacity: 1;
    transform: none;
    animation: none;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Form ---------- */
.auth-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kt-gray-900);
    margin-bottom: .4rem;
}

.auth-sub {
    color: var(--kt-gray-600);
    font-size: .95rem;
    margin-bottom: 2rem;
}

.field + .field {
    margin-top: 1.25rem;
}

.field .form-label {
    font-weight: 600;
    color: var(--kt-gray-800);
    margin-bottom: .5rem;
    transition: color .15s;
}

.field:focus-within .form-label {
    color: var(--kt-gray-900);
}

/* A link shown beside the label but placed after the input in the markup, so it comes
   after the input in tab order. Everything except the label and link spans both columns. */
.field-with-aside {
    display: grid;
    grid-template-columns: 1fr auto;
}

.field-with-aside > * {
    grid-column: 1 / -1;
}

.field-with-aside > .form-label {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
}

.field-with-aside > .field-aside {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
}

.input-wrap {
    position: relative;
}

.input-wrap .form-control {
    height: var(--control-h);
    padding-left: 2.9rem;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s, box-shadow .2s var(--ease-out);
}

.input-wrap .form-control.has-eye {
    padding-right: 3rem;
}

/* Grey focus ring, never the brand red - red reads as an error in this theme. */
.input-wrap .form-control:focus {
    background-color: var(--kt-white);
    border-color: var(--kt-input-focus-border-color);
    box-shadow: 0 0 0 4px var(--kt-gray-200);
}

.input-wrap .form-control:disabled {
    opacity: .7;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kt-gray-500);
    display: flex;
    pointer-events: none;
    transition: color .15s;
}

.input-wrap:focus-within .input-icon {
    color: var(--kt-gray-800);
}

.eye-btn {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--kt-gray-500);
    display: grid;
    place-items: center;
    transition: background-color .15s, color .15s;
}

.eye-btn:hover {
    background-color: var(--kt-gray-200);
    color: var(--kt-gray-800);
}

.eye-btn:focus-visible {
    outline: 2px solid var(--kt-input-focus-border-color);
    outline-offset: 1px;
}

.eye-btn svg {
    grid-area: 1 / 1;
    transition: opacity .2s, transform .25s var(--ease-out);
}

.eye-btn .eye-closed,
.eye-btn.is-shown .eye-open {
    opacity: 0;
    transform: rotate(-25deg) scale(.6);
}

.eye-btn.is-shown .eye-closed {
    opacity: 1;
    transform: none;
}

/* Height-animating message slot: 0fr -> 1fr grid rows, so text slides open without
   measuring its height in JS. */
.slide {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .24s var(--ease-out), opacity .2s;
}

.slide.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.slide > div {
    overflow: hidden;
    min-height: 0;
}

.field-msg {
    color: var(--kt-danger);
    font-size: .85rem;
    padding-top: .4rem;
}

.caps-hint {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--kt-gray-700);
    font-size: .85rem;
    padding-top: .45rem;
}

.caps-hint svg {
    color: var(--kt-warning);
}

.form-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Ink links with an underline that grows from the left on hover. */
.ink-link {
    color: var(--kt-gray-800);
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .25s var(--ease-out), color .15s;
    padding-bottom: 1px;
}

.ink-link:hover,
.ink-link:focus-visible {
    color: var(--kt-gray-900);
    background-size: 100% 1px;
}

.muted-link {
    color: var(--kt-gray-600);
    font-weight: 500;
}

/* ---------- Alert above the fields ---------- */
.alert-box {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: .75rem;
    background-color: var(--kt-danger-light);
    color: var(--kt-gray-800);
    font-size: .925rem;
    line-height: 1.5;
}

.alert-box .alert-icon {
    flex-shrink: 0;
    color: var(--kt-danger);
    display: flex;
    margin-top: 1px;
}

.alert-box.is-lock {
    background-color: var(--kt-warning-light);
}

.alert-box.is-lock .alert-icon {
    color: var(--kt-warning);
}

.alert-box strong {
    color: var(--kt-gray-900);
    font-weight: 600;
}

.lock-bar {
    height: 3px;
    margin-top: .65rem;
    border-radius: 3px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--kt-warning) 20%, transparent);
}

.lock-bar span {
    display: block;
    height: 100%;
    width: 100%;
    background-color: var(--kt-warning);
    transition: width 1s linear;
}

@keyframes shake {
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

.auth-card.shake {
    animation: shake .36s ease-in-out;
}

/* ---------- Log in button with sliding states ---------- */
.login-btn {
    position: relative;
    overflow: hidden;
    height: var(--control-h);
    margin-top: 1.75rem;
    transition: transform .12s, box-shadow .2s, background-color .2s, color .2s;
}

.login-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--kt-primary) 70%, transparent);
}

.login-btn:active:not(:disabled) {
    transform: scale(.985);
}

/* Each disabled state below paints its own look; Bootstrap's generic fade would read as
   "something went wrong". */
.login-btn:disabled {
    opacity: 1;
}

/* Logging in: the theme's light-primary pair (as .btn-light-primary), so the button clearly reads
   as busy and not clickable. It has to read that way as a still frame too - once the dashboard
   starts loading, Chrome keeps showing this page's last frame and the spinner stops moving. */
.login-btn[data-face="busy"] {
    background-color: var(--kt-primary-light) !important;
    color: var(--kt-primary) !important;
    box-shadow: none;
}

/* The rest of the form steps back too: fields are read-only while the form posts (login.js).
   Dimmed with filter, not opacity - these rows keep the entrance animation's opacity: 1
   (fill-mode forwards), which outranks any opacity set here. */
.auth-card form.is-submitting {
    cursor: progress;
}

.auth-card form.is-submitting .field,
.auth-card form.is-submitting .form-row-between,
.auth-card form.is-submitting .demo-line {
    filter: opacity(55%);
    transition: filter .2s;
}

.auth-card form.is-submitting .form-control,
.auth-card form.is-submitting .eye-btn,
.auth-card form.is-submitting a,
.auth-card form.is-submitting .form-check {
    pointer-events: none;
}

.login-btn[data-face="locked"] {
    background-color: var(--kt-gray-200) !important;
    color: var(--kt-gray-600) !important;
    opacity: 1;
}

.btn-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    opacity: 0;
    transform: translateY(110%);
    transition: transform .3s var(--ease-out), opacity .2s;
}

.login-btn:not([data-face="idle"]) .face-idle {
    transform: translateY(-110%);
}

.login-btn[data-face="idle"] .face-idle,
.login-btn[data-face="busy"] .face-busy,
.login-btn[data-face="done"] .face-done,
.login-btn[data-face="locked"] .face-locked {
    opacity: 1;
    transform: none;
}

.face-done .tick {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
}

.login-btn[data-face="done"] .tick {
    animation: draw .45s .1s var(--ease-out) forwards;
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

.demo-line {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .9rem;
    color: var(--kt-gray-600);
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 1.75rem 1.25rem;
    }

    .auth-main {
        padding-top: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html.js .reveal {
        opacity: 1;
        transform: none;
        animation: none;
    }
}