/* =============================================
   ELDORIA — LOGIN MODAL
   Dark · Gold accent · Syne + DM Sans
   ============================================= */

/* ── Overlay ─────────────────────────────────── */
.lm-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
}

.lm-overlay.is-open {
    opacity: 1; visibility: visible;
}

/* ── Box ─────────────────────────────────────── */
.lm-box {
    position: relative;
    background: #0e1117;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    padding: 40px 38px 36px;
    width: 100%; max-width: 420px;
    box-shadow: 0 32px 80px rgba(0,0,0,.6),
                0 0 0 1px rgba(255,255,255,.04);
    transform: translateY(18px) scale(.97);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

/* верхняя accent-линия */
.lm-box::before {
    content: '';
    position: absolute; top:0;left:0;right:0; height:2px;
    background: linear-gradient(90deg, #e9b84a, #f43f6b);
}

.lm-overlay.is-open .lm-box {
    transform: translateY(0) scale(1);
}

/* ── Close ───────────────────────────────────── */
.lm-close {
    position: absolute; top:16px; right:16px;
    width:32px; height:32px; border-radius:50%;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    color: #5a6478; cursor: pointer; font-size: 0.88rem;
    display:flex; align-items:center; justify-content:center;
    transition: background .18s, color .18s;
}
.lm-close:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }

/* ── Logo ────────────────────────────────────── */
.lm-logo {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 24px;
}
.lm-logo__icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(233,184,74,.6));
}
.lm-logo__text {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem; font-weight: 800;
    background: linear-gradient(90deg, #e9b84a, #fff 60%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Titles ──────────────────────────────────── */
.lm-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff;
    margin-bottom: 5px;
}
.lm-sub { font-size: 0.85rem; color: #5a6478; margin-bottom: 24px; }

/* ── Alert ───────────────────────────────────── */
.lm-alert {
    border-radius: 10px; font-size: 0.84rem; font-weight: 600;
    margin-bottom: 18px;
}
.lm-alert:empty { display: none; }

.lm-alert--error {
    padding: 12px 16px;
    background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25);
    color: #f87171;
    display: flex; align-items: center; gap: 8px;
    animation: lmShake .4s cubic-bezier(.36,.07,.19,.97);
}
.lm-alert--success {
    padding: 12px 16px;
    background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25);
    color: #34d399;
    display: flex; align-items: center; gap: 8px;
}

@keyframes lmShake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    40%{transform:translateX(5px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(3px)}
}

/* ── Form ────────────────────────────────────── */
.lm-group { margin-bottom: 16px; }

.lm-label {
    display: flex; align-items: center; gap: 7px;
    font-family: 'Syne', sans-serif;
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #8492a6; margin-bottom: 8px;
}
.lm-label i { font-size: 0.68rem; color: #e9b84a; }

.lm-input-wrap { position: relative; }

.lm-input {
    width: 100%; padding: 12px 44px 12px 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: #e2e8f0; font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
    outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.lm-input::placeholder { color: #3a4357; }
.lm-input:focus {
    border-color: rgba(233,184,74,.5);
    background: rgba(233,184,74,.03);
    box-shadow: 0 0 0 3px rgba(233,184,74,.07);
}
.lm-input.error {
    border-color: rgba(248,113,113,.5);
    box-shadow: 0 0 0 3px rgba(248,113,113,.06);
}

/* Eye toggle */
.lm-eye {
    position: absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer;
    color:#5a6478; font-size:0.85rem;
    padding:4px; transition:color .18s;
}
.lm-eye:hover { color:#e2e8f0; }

/* ── Options ─────────────────────────────────── */
.lm-options {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 22px; margin-top: 6px;
}

.lm-remember {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 0.82rem; color: #8492a6;
    user-select: none;
}
.lm-remember input { display: none; }

.lm-remember__box {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center;
    transition: all .18s; flex-shrink: 0;
}
.lm-remember input:checked ~ .lm-remember__box {
    background: #e9b84a; border-color: #e9b84a;
}
.lm-remember input:checked ~ .lm-remember__box::after {
    content: '';
    width: 5px; height: 8px;
    border: 2px solid #0e0900; border-top: none; border-left: none;
    transform: rotate(45deg); margin-top: -2px;
}

.lm-forgot {
    font-size: 0.8rem; color: #e9b84a; text-decoration: none;
    border-bottom: 1px solid rgba(233,184,74,.3); transition: border-color .18s;
}
.lm-forgot:hover { border-color: #e9b84a; }

/* ── Submit ──────────────────────────────────── */
.lm-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, #e9b84a, #d4920f);
    color: #0e0900; border: none; border-radius: 100px;
    font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 800;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: box-shadow .22s, transform .22s;
    position: relative; overflow: hidden;
}
.lm-submit::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg,rgba(255,255,255,.15),transparent);
    opacity: 0; transition: opacity .2s;
}
.lm-submit:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(233,184,74,.4); }
.lm-submit:hover::after { opacity: 1; }
.lm-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Footer ──────────────────────────────────── */
.lm-footer {
    margin-top: 22px; text-align: center;
    font-size: 0.82rem; color: #5a6478;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.lm-reg-link {
    color: #e9b84a; text-decoration: none; font-weight: 700;
    font-family: 'Syne', sans-serif; font-size: 0.82rem;
    border-bottom: 1px solid rgba(233,184,74,.3); transition: border-color .18s;
}
.lm-reg-link:hover { border-color: #e9b84a; }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 480px) {
    .lm-box { padding: 32px 24px 28px; }
    .lm-title { font-size: 1.2rem; }
}