.avatar-uploader .el-upload {
    border-radius: 4px !important;
    background: #fcfcfc
}

.avatar-uploader .avatar-uploader-icon {
    background: #fcfcfc
}

.avatar-uploader .el-icon-plus:before {
    content: "\4E0A\4F20\56FE\7247" !important;
    font-size: 12px;
    color: #000
}

.el-dialog {
    border-radius: 8px
}

.el-dialog__header {
    background: #fbfbfa;
    border-radius: 8px 8px 0 0;
    border: none
}

/* ===== Login Page — Glassmorphism ===== */

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

/* Button: shimmer sweep */
@keyframes btnShimmer {
    0%   { left: -100%; }
    100% { left: 160%;  }
}

/* Button: idle glow pulse */
@keyframes btnGlowPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(255,194,0,.40), 0 0 0 0   rgba(255,194,0,.00); }
    50%       { box-shadow: 0 6px 28px rgba(255,194,0,.55), 0 0 0 7px rgba(255,194,0,.12); }
}

/* ── Full-page wrapper ── */
.login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    background: #0d1117;
    position: relative;
    overflow: hidden
}

/* Blurred food image — stretched beyond edges to hide blur artifacts */
.login::before {
    content: '';
    position: absolute;
    inset: -50px;
    background: url('../img/login-l.6ef9d260.png') center / cover no-repeat;
    filter: blur(22px) brightness(.78) saturate(1.3);
    z-index: 0;
    transform: scale(1.04)
}

/* Dark colour-tint overlay */
.login::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8,12,28,.28) 0%, rgba(15,20,45,.22) 100%);
    z-index: 0
}

/* ── Glass card ── */
.login, .login-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.login-box {
    width: 1000px;
    height: 474.38px;
    border-radius: 20px;
    box-shadow:
        0 40px 80px rgba(0,0,0,.45),
        0  0   0 1px rgba(255,255,255,.12);
    animation: loginFadeUp .65s cubic-bezier(.22,.68,0,1.2) both;
    position: relative;
    z-index: 1;
    overflow: hidden
}

.login-box > img:first-child {
    width: 60%;
    height: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0
}

.title {
    margin: 0 auto 10px auto;
    text-align: left;
    color: #707070
}

/* ── Form panel (right 40%, glassmorphism) ── */
.login-form {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(36px) saturate(1.8);
    backdrop-filter: blur(36px) saturate(1.8);
    width: 40%;
    flex-shrink: 0;
    border-radius: 0 20px 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    border-left: 1px solid rgba(255,255,255,.6)
}

/* Top glass-highlight line */
.login-form::after {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
    pointer-events: none
}

/* Remove old side accent */
.login-form::before {
    display: none
}

.login-form .el-form {
    width: 214px;
    height: 307px
}

.login-form .el-form-item {
    margin-bottom: 28px;
    position: relative
}

.login-form .el-form-item.is-error .el-input__inner {
    border: 0 !important;
    border-bottom: 1.5px solid #fd7065 !important;
    background: rgba(253,112,101,.05) !important
}

.login-form .input-icon {
    height: 32px;
    width: 18px;
    margin-left: -2px
}

.login-form .el-input__inner {
    border: 0;
    border-bottom: 1.5px solid rgba(0,0,0,.13);
    border-radius: 0;
    font-size: 13px;
    font-weight: 400;
    color: #1e293b;
    height: 38px;
    line-height: 38px;
    background: transparent;
    transition: border-color .3s ease, color .3s ease
}

.login-form .el-input__inner:focus {
    border-bottom-color: transparent;
    outline: none;
    color: #1a1a2e
}

/* Underline track */
.login-form .el-form-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 1.5px;
    background: rgba(0,0,0,.10);
    pointer-events: none
}

/* Animated golden bar expands from center */
.login-form .el-form-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: scaleX(0) translateX(-50%);
    transform-origin: center;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ffc200, #ff8c00);
    border-radius: 2px;
    transition: transform .35s cubic-bezier(.22,.68,0,1.2);
    pointer-events: none;
    z-index: 1
}

.login-form .el-form-item:focus-within::before {
    transform: scaleX(1) translateX(-50%)
}

.login-form .el-input__prefix {
    left: 0;
    color: #94a3b8;
    transition: color .3s ease
}

.login-form .el-form-item:focus-within .el-input__prefix {
    color: #ffc200
}

.login-form .el-input--prefix .el-input__inner {
    padding-left: 28px
}

.login-form .el-input__inner::-webkit-input-placeholder { color: #b0bac9 }
.login-form .el-input__inner::-moz-placeholder           { color: #b0bac9 }
.login-form .el-input__inner:-ms-input-placeholder       { color: #b0bac9 }
.login-form .el-input__inner::-ms-input-placeholder      { color: #b0bac9 }
.login-form .el-input__inner::placeholder                { color: #b0bac9 }

.login-form .el-form-item--medium .el-form-item__content,
.login-form .el-input--medium .el-input__icon {
    line-height: 38px
}

/* ── Login button ── */
.login-btn {
    border-radius: 20px;
    padding: 11px 20px !important;
    margin-top: 8px;
    font-size: 13px;
    border: 0;
    font-weight: 700;
    color: #1a1a2e;
    background: linear-gradient(135deg, #ffd000 0%, #ff9900 100%);
    box-shadow: 0 6px 20px rgba(255,194,0,.4);
    transition: transform .22s cubic-bezier(.22,.68,0,1.2),
                box-shadow .22s ease,
                background .22s ease;
    letter-spacing: .5px;
    position: relative;
    overflow: hidden;
    animation: btnGlowPulse 3s ease-in-out infinite
}

/* Shimmer sweep beam */
.login-btn::before {
    content: '';
    position: absolute;
    top: -10%; left: -100%;
    width: 55%; height: 120%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.45) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none
}

.login-btn:hover::before {
    animation: btnShimmer .55s ease forwards
}

/* Top gloss line */
.login-btn::after {
    content: none
}

.login-btn:hover {
    background: linear-gradient(135deg, #ffe040 0%, #ffb020 100%);
    box-shadow: 0 10px 32px rgba(255,194,0,.60), 0 0 0 4px rgba(255,194,0,.15);
    color: #1a1a2e;
    transform: translateY(-3px)
}

.login-btn:active {
    transform: translateY(1px) scale(.97);
    box-shadow: 0 3px 10px rgba(255,194,0,.4);
    animation: none
}

/* ── Logo title ── */
.login-form-title {
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 36px
}

.login-form-title .title-label {
    font-weight: 600;
    font-size: 20px;
    color: #1e293b;
    margin-left: 10px
}

/* Override inline logo size from JS */
.login-form-title img {
    width: 220px !important;
    height: auto !important
}

/* ── Page-transition overlay (login → dashboard) ── */

/* Wipe in: panel sweeps from left edge to full screen */
@keyframes ptWipeIn {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Wipe out: panel exits upward */
@keyframes ptWipeOut {
    from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    to   { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
}

/* Golden leading-edge streak travels with the wipe */
@keyframes ptStreak {
    0%   { opacity: 0; left: 0%; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; left: 100%; }
}

.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: all;
    background: linear-gradient(160deg, #0f1923 0%, #1a1a2e 50%, #0d1117 100%);
    animation: ptWipeIn .34s cubic-bezier(.86, 0, .07, 1) forwards;
}

/* Travelling golden streak on the leading edge */
.page-transition-overlay::before {
    content: '';
    position: absolute;
    top: -5%; bottom: -5%;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 194, 0, .9) 40%,
        rgba(255, 140, 0, 1)  60%,
        transparent 100%
    );
    box-shadow: 0 0 18px 6px rgba(255, 194, 0, .55),
                0 0 40px 12px rgba(255, 140, 0, .25);
    animation: ptStreak .34s cubic-bezier(.86, 0, .07, 1) forwards;
}

/* Subtle radial glow on the panel */
.page-transition-overlay::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw; height: 60vh;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 194, 0, .06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.page-transition-overlay.leaving {
    animation: ptWipeOut .28s cubic-bezier(.86, 0, .07, 1) forwards;
}