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

.auth-body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #000;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}

.auth-body,
.auth-body * {
    box-sizing: border-box;
}

.auth-shell {
    display: grid;
    grid-template-columns: 63.4% 36.6%;
    min-height: 100vh;
    width: 100vw;
    background: #fff;
}

.auth-brand-panel {
    position: relative;
    min-width: 0;
    min-height: 100vh;
    padding: clamp(46px, 6.1vh, 78px) clamp(58px, 5.3vw, 104px);
    color: #fff;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(0, 24, 60, 0.98) 0%, rgba(0, 31, 72, 0.82) 31%, rgba(0, 76, 126, 0.4) 68%, rgba(0, 101, 162, 0.62) 100%),
        url('../img/login-landchange-bg.png');
    background-size: cover;
    background-position: 38% center;
    display: flex;
    flex-direction: column;
}

.auth-brand-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 12, 36, 0.06), rgba(0, 17, 50, 0.24)),
        radial-gradient(ellipse at left center, rgba(0, 10, 30, 0.4), rgba(0, 10, 30, 0) 56%);
}

.auth-brand-content {
    position: relative;
    z-index: 2;
    width: min(710px, 58vw);
}

.auth-logo-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.auth-brand-logo-img {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.32));
}

.auth-brand-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-brand-title {
    color: #fff;
    font-size: clamp(40px, 3vw, 52px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.46);
}

.auth-brand-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(15px, 1vw, 20px);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
}

.auth-hero-copy {
    position: relative;
    margin-top: clamp(112px, 14.2vh, 166px);
    padding-left: 58px;
}

.auth-quote-mark {
    position: absolute;
    top: -28px;
    left: 0;
    color: #188bff;
    font-size: 84px;
    line-height: 1;
    font-weight: 800;
    text-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);
}

.auth-hero-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(27px, 1.82vw, 35px);
    line-height: 1.58;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
}

.auth-hero-copy h1 span {
    color: #20e8df;
}

.auth-closing-quote {
    color: #168dff !important;
    font-size: 1.2em;
    vertical-align: -0.12em;
}

.auth-accent-line {
    width: 104px;
    height: 6px;
    margin-top: 42px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1692ff, #23ece1);
    box-shadow: 0 0 14px rgba(35, 236, 225, 0.42);
}

.auth-hero-copy p {
    margin: 48px 0 0;
    max-width: 540px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.78;
    font-weight: 600;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.auth-map-stack {
    position: absolute;
    z-index: 2;
    top: clamp(128px, 15.3vh, 184px);
    right: clamp(42px, 5vw, 92px);
    width: clamp(330px, 28vw, 432px);
    height: clamp(600px, 63vh, 735px);
    pointer-events: none;
}

.auth-stack-frame {
    position: absolute;
    top: 0;
    right: 0;
    width: 310px;
    height: 620px;
    border: 2px dashed rgba(33, 229, 238, 0.62);
    transform: skewY(-29deg);
    filter: drop-shadow(0 0 11px rgba(45, 212, 191, 0.34));
}

.auth-stack-frame::before,
.auth-stack-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: inherit;
}

.auth-stack-frame::before {
    transform: translate(-72px, 60px);
}

.auth-stack-frame::after {
    transform: translate(70px, 60px);
}

.auth-stack-frame,
.auth-stack-frame::before,
.auth-stack-frame::after {
    border-radius: 4px;
}

.auth-map-layer {
    position: absolute;
    right: 24px;
    width: 260px;
    height: 136px;
    border: 3px solid rgba(255, 255, 255, 0.82);
    border-radius: 18px;
    transform: rotateX(59deg) rotateZ(-45deg);
    transform-style: preserve-3d;
    box-shadow: 0 22px 34px rgba(0, 12, 35, 0.42), inset 0 0 28px rgba(255, 255, 255, 0.23);
}

.auth-map-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
    background-size: 24px 24px;
}

.auth-map-layer-heat {
    top: 44px;
    background:
        radial-gradient(circle at 63% 56%, rgba(239, 39, 27, 0.94) 0 12%, rgba(245, 121, 11, 0.9) 13% 24%, rgba(255, 229, 28, 0.82) 25% 38%, transparent 39%),
        linear-gradient(135deg, rgba(36, 187, 106, 0.9), rgba(76, 214, 78, 0.84) 44%, rgba(209, 231, 53, 0.9));
}

.auth-map-layer-lines {
    top: 178px;
    background:
        radial-gradient(circle at 45% 62%, rgba(30, 136, 229, 0.72) 0 8%, transparent 10%),
        repeating-linear-gradient(26deg, rgba(6, 146, 220, 0.86) 0 2px, transparent 2px 15px),
        linear-gradient(135deg, rgba(212, 237, 251, 0.92), rgba(91, 190, 242, 0.8), rgba(233, 246, 255, 0.9));
}

.auth-map-layer-green {
    top: 312px;
    background:
        radial-gradient(circle at 29% 39%, rgba(171, 222, 60, 0.64) 0 13%, transparent 14%),
        radial-gradient(circle at 66% 66%, rgba(70, 184, 45, 0.58) 0 18%, transparent 19%),
        linear-gradient(135deg, rgba(139, 190, 36, 0.86), rgba(80, 177, 39, 0.8), rgba(188, 229, 107, 0.86));
}

.auth-map-layer-grid {
    top: 446px;
    background:
        radial-gradient(circle at 55% 60%, rgba(0, 95, 210, 0.82) 0 11%, transparent 12%),
        linear-gradient(135deg, rgba(230, 232, 230, 0.9), rgba(181, 190, 188, 0.68));
}

.auth-map-layer-grid::before {
    background-image:
        linear-gradient(rgba(18, 142, 136, 0.48) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 142, 136, 0.42) 1px, transparent 1px);
}

.auth-stack-icons {
    position: absolute;
    inset: 0;
}

.auth-stack-icons span {
    position: absolute;
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 16px 28px rgba(0, 18, 48, 0.34);
    font-size: 43px;
}

.auth-stack-icons span:nth-child(1) {
    left: 24px;
    bottom: 124px;
    background: linear-gradient(135deg, #31bdff, #1267e8);
}

.auth-stack-icons span:nth-child(2) {
    left: 112px;
    bottom: 10px;
    background: linear-gradient(135deg, #25ca74, #0fa55d);
}

.auth-stack-icons span:nth-child(3) {
    right: 6px;
    bottom: 50px;
    background: linear-gradient(135deg, #20d7c5, #109b91);
    font-size: 48px;
}

.auth-feature-strip {
    position: absolute;
    z-index: 3;
    left: clamp(48px, 5.3vw, 100px);
    right: clamp(32px, 4.2vw, 70px);
    bottom: clamp(42px, 4.8vh, 58px);
    min-height: 122px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
    align-items: center;
    padding: 16px 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(7, 45, 84, 0.58);
    box-shadow: 0 18px 34px rgba(0, 11, 35, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
}

.auth-feature-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.auth-feature-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-size: 27px;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3);
}

.auth-feature-blue { background: linear-gradient(135deg, #0ea5ff, #0c58e8); }
.auth-feature-green { background: linear-gradient(135deg, #20c978, #06996e); }
.auth-feature-purple { background: linear-gradient(135deg, #9b56ec, #6035d8); }
.auth-feature-teal { background: linear-gradient(135deg, #27d5c4, #0d978f); }

.auth-feature-item strong {
    display: block;
    margin: 4px 0 8px;
    color: #fff;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
}

.auth-feature-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 600;
}

.auth-form-panel {
    position: relative;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 58px;
    background:
        radial-gradient(circle at 14% 12%, rgba(29, 155, 240, 0.12) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 91%, rgba(29, 155, 240, 0.14) 0 2px, transparent 3px),
        linear-gradient(90deg, rgba(248, 251, 255, 0.9), rgba(255, 255, 255, 0.96));
    background-size: 32px 32px, 34px 34px, auto;
    overflow: hidden;
}

.auth-form-panel::before {
    content: "";
    position: absolute;
    inset: -8%;
    opacity: 0.56;
    pointer-events: none;
    background-image:
        repeating-radial-gradient(ellipse at 20% 26%, transparent 0 34px, rgba(148, 163, 184, 0.14) 35px 36px),
        repeating-radial-gradient(ellipse at 92% 92%, transparent 0 42px, rgba(148, 163, 184, 0.11) 43px 44px);
}

.auth-form-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 548px;
    min-height: 858px;
    padding: 54px 56px 46px;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.965);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
    transform: translateY(58px);
}

.auth-form-logo-wrap {
    width: 82px;
    height: 82px;
    margin: 0 auto 26px;
    display: grid;
    place-items: center;
}

.auth-form-logo-img {
    width: 82px;
    height: 82px;
    filter: drop-shadow(0 11px 20px rgba(37, 99, 235, 0.18));
}

.auth-form-title {
    margin: 0 0 12px;
    color: #0b1736;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
}

.auth-form-subtitle {
    margin: 0 0 44px;
    color: #55647d;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 500;
    text-align: center;
}

.auth-form-subtitle span {
    color: #1269ef;
    font-weight: 800;
}

.auth-alerts {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
}

.auth-alert-danger {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fca5a5;
}

.auth-alert-success {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.auth-alert-info,
.auth-alert-message {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.auth-field {
    margin-bottom: 26px;
}

.auth-field label {
    display: block;
    margin-bottom: 14px;
    color: #263a58;
    font-size: 16px;
    font-weight: 600;
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-wrap > i:first-child {
    position: absolute;
    left: 22px;
    color: #8ea0ba;
    font-size: 20px;
    pointer-events: none;
}

.auth-input {
    width: 100%;
    height: 70px;
    padding: 0 58px 0 70px;
    border: 2px solid #e3e9f2;
    border-radius: 10px;
    background: #fff;
    color: #26344f;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #26344f;
    box-shadow: 0 0 0 1000px #fff inset;
}

.auth-input:focus {
    border-color: #2675f6;
    box-shadow: 0 0 0 4px rgba(38, 117, 246, 0.12);
}

.auth-input::placeholder {
    color: transparent;
    opacity: 0;
}

.auth-toggle-password {
    position: absolute;
    right: 18px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #8ea0ba;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    transition: color 0.15s ease;
}

.auth-toggle-password:hover {
    color: #334155;
}

.auth-field-error {
    display: block;
    margin-top: 8px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
}

.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 40px;
    font-size: 16px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #53627b;
    font-weight: 500;
}

.auth-remember input {
    width: 27px;
    height: 27px;
    border-radius: 6px;
    accent-color: #1777f2;
    cursor: pointer;
}

.auth-form-options a {
    color: #1269ef;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.auth-form-options a:hover {
    color: #0d54d8;
    text-decoration: underline;
}

.auth-submit-btn {
    width: min(280px, 100%);
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(90deg, #0e8bf6 0%, #0b52e8 100%);
    font-family: inherit;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(18, 105, 239, 0.2);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.auth-submit-btn:hover {
    filter: brightness(0.98);
    box-shadow: 0 14px 25px rgba(18, 105, 239, 0.26);
}

.auth-submit-btn:active {
    transform: translateY(1px);
}

.auth-form-footer {
    margin: auto 0 0;
    padding-top: 30px;
    border-top: 1px solid #e5ebf3;
    color: #96a6bd;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 1280px) {
    .auth-shell {
        grid-template-columns: 61% 39%;
    }

    .auth-brand-panel {
        padding-left: 54px;
        padding-right: 54px;
    }

    .auth-brand-content {
        width: min(550px, 52vw);
    }

    .auth-feature-strip {
        left: 42px;
        right: 34px;
        gap: 16px;
    }

    .auth-feature-item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
    }

    .auth-feature-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .auth-form-panel {
        padding: 36px 34px;
    }

    .auth-form-card {
        min-height: 760px;
        padding: 42px 42px 38px;
    }
}

@media (max-width: 1024px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        min-height: 650px;
        padding: 40px 32px 180px;
        background-position: 60% center;
    }

    .auth-brand-content {
        width: min(620px, 100%);
    }

    .auth-hero-copy {
        margin-top: 76px;
    }

    .auth-feature-strip {
        left: 28px;
        right: 28px;
        bottom: 30px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-form-panel {
        min-height: auto;
        padding: 48px 24px;
    }
}

@media (max-width: 640px) {
    .auth-brand-panel {
        min-height: 720px;
        padding: 30px 20px 270px;
    }

    .auth-logo-row {
        gap: 12px;
    }

    .auth-brand-logo-img {
        width: 54px;
        height: 54px;
    }

    .auth-brand-title {
        font-size: 30px;
    }

    .auth-brand-subtitle {
        max-width: 260px;
        white-space: normal;
        font-size: 12px;
    }

    .auth-hero-copy {
        margin-top: 56px;
        padding-left: 36px;
    }

    .auth-quote-mark {
        top: -20px;
        font-size: 56px;
    }

    .auth-hero-copy h1 {
        font-size: 23px;
        line-height: 1.42;
    }

    .auth-hero-copy p {
        margin-top: 30px;
        font-size: 14px;
    }

    .auth-feature-strip {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .auth-feature-item strong {
        font-size: 13px;
    }

    .auth-feature-item p {
        font-size: 12px;
    }

    .auth-form-panel {
        padding: 36px 18px;
    }

    .auth-form-card {
        min-height: 0;
        padding: 34px 24px 30px;
        border-radius: 20px;
    }

    .auth-form-title {
        font-size: 28px;
    }

    .auth-form-subtitle {
        font-size: 15px;
        margin-bottom: 34px;
    }

    .auth-input {
        height: 60px;
        padding-left: 58px;
        font-size: 15px;
    }

    .auth-input-wrap > i:first-child {
        left: 19px;
        font-size: 18px;
    }

    .auth-form-options {
        align-items: flex-start;
        flex-wrap: wrap;
        font-size: 14px;
    }

    .auth-submit-btn {
        width: min(240px, 100%);
        height: 56px;
        font-size: 17px;
    }

    .auth-form-footer {
        font-size: 13px;
    }
}