/* =============================================
   login/login.css — сторінка входу (стиль Дія)
   Manrope/Unbounded · зелений #4a9d77 · аврора-фон + анімація відкриття
   ============================================= */
:root {
    --bg:#eef3f0; --surface:#ffffff; --s2:#f6f7f9; --s3:#eef1f4;
    --border:#e0e0e0; --border2:#d9dde2;
    --ink:#0a0a0a; --ink2:#677281; --ink3:#9aa1ab;
    --accent:#4a9d77; --accent2:#3c8463; --acc-bg:#ebf5ef;
    --dark:#232f3d;
    --rm:#f44336; --r-bg:#feeceb; --r-bd:#f1c4c0;
    --shadow-lg:0 30px 80px -40px rgba(20,30,45,.45);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Manrope',system-ui,sans-serif;
    font-variant-numeric:tabular-nums;
    background:var(--bg);
    color:var(--ink);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
}

/* ── ЖИВИЙ ФОН (аврора з зелених плям) ── */
.lg-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lg-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.lg-blob.b1{width:48vw;height:48vw;left:-10vw;top:-12vw;
    background:radial-gradient(circle,rgba(74,157,119,.55),transparent 70%);animation:blob1 26s ease-in-out infinite alternate}
.lg-blob.b2{width:42vw;height:42vw;right:-8vw;bottom:-12vw;
    background:radial-gradient(circle,rgba(60,132,99,.40),transparent 70%);animation:blob2 30s ease-in-out infinite alternate}
.lg-blob.b3{width:34vw;height:34vw;right:18vw;top:-14vw;
    background:radial-gradient(circle,rgba(122,210,176,.35),transparent 70%);animation:blob3 22s ease-in-out infinite alternate}
@keyframes blob1{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,6vw) scale(1.12)}}
@keyframes blob2{from{transform:translate(0,0) scale(1)}to{transform:translate(-7vw,-5vw) scale(1.15)}}
@keyframes blob3{from{transform:translate(0,0) scale(1)}to{transform:translate(-5vw,7vw) scale(1.1)}}
/* легка сітка поверх — ледь помітна */
.lg-bg::after{content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(35,47,61,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(35,47,61,.025) 1px,transparent 1px);
    background-size:46px 46px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%)}

/* ── ВЕРХНІЙ РЯДОК ── */
.lg-top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
    padding:22px 30px;flex-shrink:0;animation:topFade .6s .1s both}
.lg-brand{display:flex;align-items:center;gap:10px;font-family:'Unbounded',sans-serif;
    font-weight:700;font-size:18px;letter-spacing:-.5px;color:var(--ink);text-decoration:none}
.lg-brand-sq{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.lg-date{font-size:12.5px;color:var(--ink2);font-weight:600;white-space:nowrap}
@keyframes topFade{from{opacity:0;transform:translateY(-10px)}}

/* ── ЦЕНТР ── */
.lg-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 16px 56px;position:relative;z-index:1}

/* ── КАРТКА ── */
.lg-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);
    border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);
    animation:cardRise .65s cubic-bezier(.18,.85,.25,1) both}
@keyframes cardRise{from{opacity:0;transform:translateY(34px) scale(.95)}}

/* ── ХЕДЕР (темний слейт + зелене лого) ── */
.lg-head{background:linear-gradient(150deg,#2b3845 0%,#232f3d 100%);padding:34px 34px 28px;text-align:center;position:relative;overflow:hidden}
.lg-head::after{content:'';position:absolute;top:-40%;left:-30%;width:80%;height:160%;
    background:radial-gradient(circle,rgba(74,157,119,.22),transparent 60%);pointer-events:none}
.lg-logo{position:relative;width:56px;height:56px;border-radius:16px;background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:21px;font-weight:800;
    margin:0 auto 16px;animation:logoPop .7s .25s both;}
.lg-logo::before{content:'';position:absolute;inset:0;border-radius:16px;animation:logoGlow 3.2s 1s ease-in-out infinite}
.lg-title{position:relative;font-family:'Unbounded',sans-serif;font-size:24px;font-weight:700;color:#fff;letter-spacing:-.6px;
    animation:riseUp .55s .34s both}
.lg-sub{position:relative;font-size:12.5px;color:rgba(255,255,255,.62);font-weight:600;margin-top:6px;
    animation:riseUp .55s .42s both}
@keyframes logoPop{0%{opacity:0;transform:scale(.4) rotate(-16deg)}55%{opacity:1;transform:scale(1.12) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes logoGlow{0%,100%{box-shadow:0 0 0 0 rgba(74,157,119,0)}50%{box-shadow:0 0 28px 3px rgba(74,157,119,.5)}}

/* ── ФОРМА ── */
.lg-form{padding:28px 32px 30px;display:flex;flex-direction:column;gap:16px}
.lg-rise{animation:riseUp .55s both;animation-delay:var(--d,0s)}
@keyframes riseUp{from{opacity:0;transform:translateY(16px)}}

.lg-field{display:flex;flex-direction:column;gap:7px}
.lg-field label{font-size:10.5px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.5px}
.lg-input-wrap{position:relative}
.lg-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink3);pointer-events:none}
.lg-input-wrap input{
    width:100%;padding:13px 14px 13px 42px;border:1.5px solid var(--border);border-radius:12px;
    font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--surface);outline:none;
    transition:border-color .15s,box-shadow .15s}
.lg-input-wrap input::placeholder{color:var(--ink3);font-weight:500}
.lg-input-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(74,157,119,.15)}
.lg-input-wrap:focus-within .lg-ico{color:var(--accent)}
input.is-error{border-color:var(--rm)!important;box-shadow:0 0 0 4px rgba(244,67,54,.13)!important}
.eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;
    padding:6px;font-size:16px;line-height:1;color:var(--ink3);border-radius:8px;transition:background .12s}
.eye-btn:hover{background:var(--s2)}

/* ── ПОМИЛКА ── */
.error-msg{display:none;align-items:center;gap:8px;background:var(--r-bg);border:1px solid var(--r-bd);
    border-radius:12px;padding:11px 13px;font-size:12.5px;font-weight:700;color:var(--rm)}
.error-msg.is-visible{display:flex;animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ── КНОПКА ── */
.submit-btn{width:100%;padding:14px;border:none;border-radius:12px;background:var(--accent);color:#fff;
    font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
    transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 10px 24px -12px rgba(74,157,119,.7)}
.submit-btn:hover:not(:disabled){background:var(--accent2);transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(60,132,99,.8)}
.submit-btn:active:not(:disabled){transform:translateY(0) scale(.99)}
.submit-btn:disabled{opacity:.7;cursor:not-allowed}
.spinner{display:none;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
    animation:spin .7s linear infinite;flex-shrink:0}
.submit-btn.is-loading .spinner{display:block}
.submit-btn.is-loading .btn-text{display:none}
.submit-btn.is-success{background:var(--accent2)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── ПІДКАЗКА ── */
.lg-hint{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;
    font-size:12px;color:var(--ink2);line-height:1.6;font-weight:500}
.lg-hint strong{color:var(--ink);font-weight:800}
.lg-hint code{font-family:'Manrope',monospace;font-size:11.5px;background:#fff;padding:2px 7px;border-radius:7px;
    border:1px solid var(--border);color:var(--accent2);font-weight:700}

/* ── УСПІШНИЙ ВХІД (повноекранний оверлей) ── */
.lg-success{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
    background:rgba(244,247,245,.92);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .4s}
.lg-success.show{opacity:1;visibility:visible}
.lgs-inner{text-align:center;transform:translateY(10px);transition:transform .45s}
.lg-success.show .lgs-inner{transform:none}
.lgs-check{position:relative;width:104px;height:104px;margin:0 auto 24px}
.lgs-disc{position:absolute;inset:0;border-radius:50%;background:var(--acc-bg);transform:scale(0)}
.lg-success.show .lgs-disc{animation:lgsDisc .5s .05s cubic-bezier(.2,.85,.25,1) forwards}
@keyframes lgsDisc{to{transform:scale(1)}}
.lgs-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0}
.lg-success.show .lgs-ring{animation:lgsRipple 1s .55s ease-out 1}
@keyframes lgsRipple{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.lgs-check svg{position:relative;width:104px;height:104px;display:block}
.lgs-c{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:145;stroke-dashoffset:145}
.lgs-k{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48}
.lg-success.show .lgs-c{animation:lgsDraw .5s .12s ease forwards}
.lg-success.show .lgs-k{animation:lgsDraw .4s .55s ease forwards}
@keyframes lgsDraw{to{stroke-dashoffset:0}}
.lgs-title{font-family:'Unbounded',sans-serif;font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.6px;opacity:0}
.lg-success.show .lgs-title{animation:riseUp .5s .85s both}
.lgs-sub{font-size:13.5px;color:var(--ink2);font-weight:600;margin-top:8px;opacity:0}
.lg-success.show .lgs-sub{animation:riseUp .5s 1s both}

/* ── МОБІЛЬНА ── */
@media (max-width:480px){
    .lg-top{padding:16px 18px}
    .lg-head{padding:28px 24px 22px}
    .lg-form{padding:24px 22px 26px}
    .lg-title{font-size:21px}
}

/* ── ПОВАГА ДО reduced-motion ── */
@media (prefers-reduced-motion:reduce){
    .lg-card,.lg-rise,.lg-logo,.lg-title,.lg-sub,.lg-top,.lg-blob{animation:none!important}
    .lg-logo::before{animation:none!important}
    /* success: показати фінальний стан без анімації */
    .lgs-c,.lgs-k{stroke-dashoffset:0!important}
    .lgs-disc{transform:none!important}
    .lgs-ring{display:none}
    .lgs-title,.lgs-sub{opacity:1!important;animation:none!important}
    .lgs-inner{transform:none!important}
}