/* Retail POS — login page (дизайн-кит «Дія»: світло, зелений акцент, аврора-фон) */

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

:root {
    --bg:#fafafa; --surface:#ffffff; --bg2:#eef1f4;
    --ink:#0a0a0a; --ink2:#677281; --ink3:#9aa1ab;
    --border:#e0e0e0;
    /* Сторінка входу не підключає app.css — тут своя копія палітри.
       --accent-rgb міняти РАЗОМ з --accent (світіння і фокусні обводки). */
    --accent:#4a9d77; --accent-2:#3c8463; --acc-bg:#ebf5ef;
    --accent-rgb: 74, 157, 119;
    --dark:#232f3d;
    --neg:#e5484d;
}

html, body {
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
code { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.disp { font-family: 'Unbounded', sans-serif; }

/* ── Аврора-фон (3 зелені плями, що дрейфують) ── */
.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(var(--accent-rgb),.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-wrap {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}

/* ── Картка ── */
.lg-card {
    width: 100%; max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(20,30,45,.45);
    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;
    color: #fff;
}
.lg-logo {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    animation: logoPop .7s .25s both;
}
.lg-logo svg { display: block; }
.lg-logo .lg-hole { fill: var(--accent); }
@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); }
}
.lg-title { font-size: 22px; font-weight: 700; letter-spacing: -.6px; }
.lg-sub { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 6px; font-weight: 500; }

.lg-body { padding: 26px 34px 30px; }

.lg-rise { animation: riseUp .55s both; animation-delay: var(--d, 0s); }
@keyframes riseUp { from { opacity: 0; transform: translateY(16px); } }

/* ── Помилка ── */
.error-msg {
    display: none;
    align-items: center; gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #feeceb;
    border: 1px solid #f1c4c0;
    border-radius: 12px;
    color: var(--neg);
    font-size: 13px; font-weight: 600;
}
.error-msg.show { display: flex; animation: shake .4s; }
.error-ico { font-size: 16px; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ── Поля ── */
.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 11px; color: var(--ink2);
    margin-bottom: 7px;
    font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase;
}
.lg-input-wrap {
    position: relative;
    display: flex; align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.lg-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15); }
.lg-input-wrap.is-error { border-color: var(--neg) !important; box-shadow: 0 0 0 4px rgba(229,72,77,.14) !important; }
.input-ico { padding: 0 12px; color: var(--ink3); font-size: 14px; }
.lg-input-wrap input {
    flex: 1;
    padding: 13px 12px 13px 0;
    background: transparent; border: none; outline: none;
    color: var(--ink); font-size: 15px; font-weight: 600;
    font-family: inherit;
}
.lg-input-wrap input::placeholder { color: var(--ink3); font-weight: 500; }
.eye-btn {
    background: none; border: none; cursor: pointer;
    padding: 0 12px; color: var(--ink3); font-size: 16px;
}
.eye-btn:hover { color: var(--ink2); }

/* ── Кнопка ── */
.submit-btn {
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    background: var(--accent);
    border: none; border-radius: 12px;
    color: #fff; font-size: 15px; font-weight: 800;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 10px 24px -12px rgba(var(--accent-rgb),.7);
    transition: background .15s, transform .1s, box-shadow .15s;
    font-family: inherit;
}
.submit-btn:hover:not(:disabled) { background: var(--accent-2); transform: translateY(-1px); }
.submit-btn:active { transform: translateY(1px); }
.submit-btn:disabled { opacity: .65; cursor: not-allowed; }
.spinner {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
.submit-btn.loading .spinner { display: block; }
.submit-btn.loading .btn-text { opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Підказка ── */
.hint-box {
    margin-top: 18px;
    padding: 13px 15px;
    background: var(--bg2);
    border-radius: 12px;
    font-size: 13px; color: var(--ink2);
    line-height: 1.6;
}
.hint-box strong { color: var(--ink); }
.hint-box code {
    background: var(--surface);
    padding: 2px 6px; border-radius: 5px;
    color: var(--accent);
}

/* ── Підвал ── */
.lg-foot {
    padding: 14px 34px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--ink3);
}

/* ── Success-галочка після входу ── */
.lg-success {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(250,250,250,.96);
    backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 22px;
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.lg-success.show { opacity: 1; visibility: visible; }
.lgs-disc {
    position: relative;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 50px -20px rgba(var(--accent-rgb),.7);
    transform: scale(0);
}
.lg-success.show .lgs-disc { animation: lgsDisc .5s cubic-bezier(.18,.85,.25,1) forwards; }
@keyframes lgsDisc { to { transform: scale(1); } }
.lgs-ripple {
    position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid var(--accent); opacity: .6;
}
.lg-success.show .lgs-ripple { animation: lgsRipple 1s .25s ease-out forwards; }
@keyframes lgsRipple { to { transform: scale(1.7); opacity: 0; } }
.lgs-disc svg { width: 56px; height: 56px; }
.lgs-disc svg path {
    fill: none; stroke: #fff; stroke-width: 5;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 48; stroke-dashoffset: 48;
}
.lg-success.show .lgs-disc svg path { animation: lgsDraw .4s .35s ease forwards; }
@keyframes lgsDraw { to { stroke-dashoffset: 0; } }
.lgs-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px; font-weight: 700; color: var(--ink);
    opacity: 0;
}
.lg-success.show .lgs-title { animation: riseUp .4s .5s both; }

@media (prefers-reduced-motion: reduce) {
    .lg-blob, .lg-card, .lg-logo, .lg-rise,
    .lgs-disc, .lgs-ripple, .lgs-disc svg path, .lgs-title,
    .error-msg.show, .spinner { animation: none !important; }
    .lgs-disc { transform: scale(1); }
    .lgs-disc svg path { stroke-dashoffset: 0; }
    .lgs-title { opacity: 1; }
}

/* ── Перемикач мови (кут екрана) ─────────────────────────────────────────── */
.lg-lang {
    position: fixed; top: 18px; right: 22px; z-index: 10;
    display: flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700;
}
.lg-lang span { color: rgba(35,47,61,.35); }
.lg-lang a { color: rgba(35,47,61,.45); text-decoration: none; padding: 4px 6px; border-radius: 8px; }
.lg-lang a:hover { color: var(--accent, #4a9d77); }
.lg-lang a.on { color: var(--accent, #4a9d77); background: rgba(var(--accent-rgb),.12); }