:root {
    --bg: #f5f6fa;
    --panel: #ffffff;
    --border: #dfe3ec;
    --text: #131722;
    --muted: #6d7382;
    --primary: #131722;
    --primary-contrast: #ffffff;
    --danger: #b42318;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}

.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

.brand-panel {
    display: none;
}

.form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 72px;
}

.form-shell {
    width: 100%;
    max-width: 420px;
}

.mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
    font-size: 18px;
    font-weight: 600;
}

.mobile-brand .brand-name {
    font-size: 16px;
}

.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7f56d9 0%, #3b82f6 50%, #f97316 100%);
    box-shadow: 0 8px 20px rgba(19, 23, 34, 0.18);
}

.brand-name {
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
}

.form-header h1 {
    font-size: 32px;
    line-height: 1.2;
}

.form-header p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field-block label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
}

.field-input {
    position: relative;
}

.field-input input {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 15px;
    padding: 0 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input input:focus {
    border-color: #98a2b3;
    box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.2);
}

.field-input input::placeholder {
    color: #98a2b3;
}

.password-row input {
    padding-right: 86px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 12px;
    cursor: pointer;
    border-radius: 10px;
    padding: 4px 8px;
}

.password-toggle .eye-close {
    display: none;
}

body.password-visible .password-toggle .eye-open {
    display: none;
}

body.password-visible .password-toggle .eye-close {
    display: inline;
}

.field-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.remember-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475467;
    font-size: 13px;
    cursor: pointer;
}

.remember-me input {
    width: 16px;
    height: 16px;
}

.fake-link {
    color: #344054;
    font-size: 13px;
    text-decoration: none;
}

.error-message {
    display: none;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid #fda29b;
    background: #fef3f2;
    color: var(--danger);
    font-size: 13px;
    line-height: 1.45;
}

.error-message.show {
    display: block;
}

.login-btn {
    position: relative;
    width: 100%;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
}

.login-btn .btn-default,
.login-btn .btn-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.login-btn .btn-hover {
    color: var(--primary-contrast);
    background: var(--primary);
    opacity: 0;
    transform: translateX(-56%);
}

.login-btn:hover .btn-default {
    opacity: 0;
    transform: translateX(62%);
}

.login-btn:hover .btn-hover {
    opacity: 1;
    transform: translateX(0);
}

.login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.copyright-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.icp-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #667085;
    font-size: 12px;
}

.icp-text a {
    text-decoration: none;
    color: #475467;
}

.icp-text a[href=""] {
    pointer-events: none;
}

.icp-label {
    color: #98a2b3;
    margin-left: 6px;
}

.network-link,
.icp-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.beian-icon {
    width: 14px;
    height: 14px;
    fill: #667085;
}

.success-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    overflow: hidden;
}

.flower-piece {
    position: absolute;
    display: block;
    left: 50%;
    top: 38%;
    width: 12px;
    height: 16px;
    border-radius: 10px 10px 8px 8px;
    background: var(--petal-color, #f472b6);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    animation: flowerBurst 1.05s ease-out forwards;
}

@keyframes flowerBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.05) rotate(var(--rot, 300deg));
    }
}

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

    .brand-panel {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 40px 42px;
        color: #1d2939;
        overflow: hidden;
        background: linear-gradient(145deg, #ced4de 0%, #c0c8d4 48%, #b8c0ca 100%);
    }

    .brand-head {
        position: relative;
        z-index: 2;
    }

    .brand-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #1d2939;
        font-weight: 600;
        font-size: 16px;
    }

    .characters-wrap {
        position: relative;
        z-index: 2;
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 20px;
    }

    .characters-stage {
        position: relative;
        width: 560px;
        height: 390px;
        transform: scale(1.05);
        transform-origin: center bottom;
    }

    .character {
        position: absolute;
        bottom: 0;
        transition: transform 0.55s ease, height 0.55s ease;
    }

    .character .eyes {
        position: absolute;
        display: flex;
        gap: 24px;
    }

    .eye {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: height 0.14s ease;
    }

    .pupil {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #2d2d2d;
        transition: transform 0.12s ease;
    }

    .character.orange .pupil,
    .character.yellow .pupil {
        width: 11px;
        height: 11px;
    }

    .character.orange .eyes,
    .character.yellow .eyes {
        gap: 18px;
    }

    .character .eyes.pupils-only .pupil {
        background: #2d2d2d;
    }

    .character .eyes.pupils-only {
        gap: 22px;
    }

    .character.purple {
        left: 70px;
        width: 180px;
        height: 400px;
        background: #6c3ff5;
        border-radius: 10px 10px 0 0;
        z-index: 1;
    }

    .character.purple .eyes {
        left: 44px;
        top: 42px;
        gap: 28px;
    }

    .character.black {
        left: 240px;
        width: 120px;
        height: 310px;
        background: #2d2d2d;
        border-radius: 8px 8px 0 0;
        z-index: 2;
    }

    .character.black .eyes {
        left: 27px;
        top: 34px;
        gap: 18px;
    }

    .character.orange {
        left: 0;
        width: 240px;
        height: 200px;
        background: #ff9b6b;
        border-radius: 120px 120px 0 0;
        z-index: 3;
    }

    .character.orange .eyes {
        left: 84px;
        top: 90px;
    }

    .character.yellow {
        left: 310px;
        width: 140px;
        height: 230px;
        background: #e8d754;
        border-radius: 70px 70px 0 0;
        z-index: 4;
    }

    .character.yellow .eyes {
        left: 52px;
        top: 40px;
    }

    .character.yellow .mouth {
        position: absolute;
        left: 42px;
        top: 88px;
        width: 54px;
        height: 4px;
        border-radius: 999px;
        background: #2d2d2d;
        transition: transform 0.16s ease, width 0.16s ease, height 0.16s ease, border-radius 0.16s ease, border-bottom-width 0.16s ease;
        border-bottom: 0 solid #2d2d2d;
    }

    .characters-stage.intro-enter .character {
        will-change: transform, opacity;
        backface-visibility: hidden;
    }

    .characters-stage.intro-enter .character.purple {
        animation: charFlipInPurple 1.85s cubic-bezier(0.2, 0.95, 0.2, 1) 0.05s both;
    }

    .characters-stage.intro-enter .character.black {
        animation: charFlipInBlack 1.9s cubic-bezier(0.2, 0.95, 0.2, 1) 0.2s both;
    }

    .characters-stage.intro-enter .character.orange {
        animation: charFlipInOrange 1.8s cubic-bezier(0.2, 0.95, 0.2, 1) 0.35s both;
    }

    .characters-stage.intro-enter .character.yellow {
        animation: charFlipInYellow 1.95s cubic-bezier(0.2, 0.95, 0.2, 1) 0.5s both;
    }

    @keyframes charFlipInPurple {
        0% {
            opacity: 0;
            transform: translate(-280px, -220px) rotate(-860deg) scale(0.62);
        }
        65% {
            opacity: 1;
            transform: translate(26px, 20px) rotate(16deg) scale(1.06);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg) scale(1);
        }
    }

    @keyframes charFlipInBlack {
        0% {
            opacity: 0;
            transform: translate(260px, -260px) rotate(820deg) scale(0.64);
        }
        65% {
            opacity: 1;
            transform: translate(14px, 16px) rotate(-13deg) scale(1.04);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg) scale(1);
        }
    }

    @keyframes charFlipInOrange {
        0% {
            opacity: 0;
            transform: translate(-300px, 180px) rotate(-760deg) scale(0.66);
        }
        70% {
            opacity: 1;
            transform: translate(18px, 12px) rotate(10deg) scale(1.04);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg) scale(1);
        }
    }

    @keyframes charFlipInYellow {
        0% {
            opacity: 0;
            transform: translate(300px, 220px) rotate(780deg) scale(0.62);
        }
        68% {
            opacity: 1;
            transform: translate(-16px, 14px) rotate(-11deg) scale(1.05);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg) scale(1);
        }
    }

    .characters-stage.is-typing .character.purple {
        height: 478px;
        transform: skewX(-14deg) translateX(46px);
    }

    .characters-stage.is-typing .character.black {
        height: 360px;
        transform: skewX(10deg) translateX(26px);
    }

    .characters-stage.is-typing .character.purple .eyes {
        top: 22px;
        left: 56px;
    }

    .characters-stage.is-typing .character.black .eyes {
        top: 20px;
        left: 36px;
    }

    .characters-stage.is-hidden-password .character.purple {
        height: 470px;
        transform: skewX(-12deg) translateX(42px);
    }

    .characters-stage.is-password-visible .character {
        transform: skewX(0deg);
    }

    .characters-stage.is-password-visible .character.purple {
        transform: translateX(-34px) rotate(-8deg) skewX(-2deg);
    }

    .characters-stage.is-password-visible .character.black {
        transform: translateX(-24px) rotate(-6deg);
    }

    .characters-stage.is-password-visible .character.orange {
        transform: translateX(-20px) rotate(-5deg);
    }

    .characters-stage.is-password-visible .character.yellow {
        transform: translateX(-36px) rotate(-8deg);
    }

    .characters-stage.is-password-visible .character.purple .eyes {
        left: 6px;
        top: 24px;
    }

    .characters-stage.is-password-visible .character.black .eyes {
        left: 4px;
        top: 20px;
    }

    .characters-stage.is-password-visible .character.orange .eyes {
        left: 34px;
        top: 76px;
    }

    .characters-stage.is-password-visible .character.yellow .eyes {
        left: 8px;
        top: 24px;
    }

    .characters-stage.is-password-visible .character.yellow .mouth {
        transform: translateX(-30px);
    }

    .characters-stage.login-success .character.yellow .mouth {
        width: 62px;
        height: 18px;
        background: transparent;
        border-bottom-width: 5px;
        border-radius: 0 0 30px 30px;
        transform: translateX(-8px) translateY(2px);
    }

    .characters-stage.is-password-visible .pupil {
        transform: translate(-9px, -4px) !important;
    }

    .characters-stage.is-blinking .character.purple .eye,
    .characters-stage.is-blinking .character.black .eye {
        height: 3px;
    }

    .characters-stage.login-error .character {
        animation: headShakeNo 0.82s ease-in-out 1;
    }

    .characters-stage.login-success .character {
        animation: celebrateHop 0.55s ease-out 1;
    }

    @keyframes headShakeNo {
        0% { transform: translateX(0) rotate(0deg); }
        12% { transform: translateX(-10px) rotate(-8deg); }
        24% { transform: translateX(10px) rotate(8deg); }
        36% { transform: translateX(-10px) rotate(-8deg); }
        48% { transform: translateX(10px) rotate(8deg); }
        60% { transform: translateX(-8px) rotate(-6deg); }
        72% { transform: translateX(8px) rotate(6deg); }
        84% { transform: translateX(-4px) rotate(-3deg); }
        100% { transform: translateX(0) rotate(0deg); }
    }

    @keyframes celebrateHop {
        0% { transform: translateY(0) scale(1); opacity: 1; }
        35% { transform: translateY(-22px) scale(1.06) rotate(2deg); opacity: 1; }
        100% { transform: translateY(0) scale(1); opacity: 1; }
    }

    .brand-foot {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 28px;
        font-size: 14px;
        color: #344054;
    }

    .brand-foot a {
        color: inherit;
        text-decoration: none;
    }

    .decor-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
        background-size: 22px 22px;
        opacity: 0.45;
    }

    .decor-glow {
        position: absolute;
        border-radius: 999px;
        filter: blur(70px);
        opacity: 0.4;
    }

    .decor-one {
        width: 250px;
        height: 250px;
        right: 18%;
        top: 18%;
        background: #9ca3af;
    }

    .decor-two {
        width: 320px;
        height: 320px;
        left: 20%;
        bottom: 15%;
        background: #d1d5db;
    }

    .mobile-brand {
        display: none;
    }

    .form-panel {
        padding: 32px 28px 76px;
        background: var(--panel);
    }
}

@media (prefers-reduced-motion: reduce) {
    .characters-stage.intro-enter .character {
        animation: none !important;
    }
}