/* signin.css — собственный экран входа: светлый холст с мягкими пятнами
   и одна карточка по центру. Акцент общий с CRM — #1563FF. */

:root {
    --rg-text:   #0F172A;
    --rg-muted:  #64748B;
    --rg-field:  #F5F7FA;
    --rg-line:   #E6EAF0;
    --rg-blue:   #1563FF;
    --rg-blue-d: #0F4FE0;
}

*, *::before, *::after { box-sizing:border-box; }

body {
    margin:0; min-height:100dvh;
    font-family:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--rg-text);
    background:#fff;
    -webkit-font-smoothing:antialiased;
    display:flex; align-items:center; justify-content:center;
    padding:32px 20px;
    overflow:hidden;
}

/* ── Холст: дрейфующие пятна + сетка, стянутая маской к центру ────── */
.rg-canvas { position:fixed; inset:0; overflow:hidden; pointer-events:none; }
.rg-orb { position:absolute; border-radius:50%; filter:blur(90px); }
.rg-orb.a { width:600px; height:600px; left:-160px; top:-180px; opacity:.20;
    background:radial-gradient(circle, #1563FF, transparent 70%); animation:rg-drift-a 24s ease-in-out infinite; }
.rg-orb.b { width:520px; height:520px; right:-140px; bottom:-160px; opacity:.16;
    background:radial-gradient(circle, #7C3AED, transparent 70%); animation:rg-drift-b 30s ease-in-out infinite; }
.rg-orb.c { width:380px; height:380px; left:54%; top:60%; opacity:.13;
    background:radial-gradient(circle, #0EA5E9, transparent 70%); animation:rg-drift-c 26s ease-in-out infinite; }

@keyframes rg-drift-a { 50% { transform:translate3d(70px, 50px, 0) scale(1.12); } }
@keyframes rg-drift-b { 50% { transform:translate3d(-60px, -46px, 0) scale(1.08); } }
@keyframes rg-drift-c { 50% { transform:translate3d(-52px, 34px, 0) scale(.9); } }

.rg-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 10%, transparent 66%);
    mask-image:radial-gradient(circle at 50% 46%, #000 10%, transparent 66%);
}

/* ── Карточка ─────────────────────────────────────────────────────── */
.rg-card {
    position:relative; z-index:1; width:min(420px, 100%);
    background:#fff; border:1px solid #EEF1F5; border-radius:22px; padding:34px 34px 30px;
    box-shadow:rgba(145,158,171,.2) 0 0 2px 0, rgba(145,158,171,.24) 0 20px 44px -12px;
    animation:rg-rise .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rg-rise { from { opacity:0; transform:translateY(14px); } }

.rg-title { font-size:24px; font-weight:800; letter-spacing:-.025em; margin:0 0 24px; color:var(--rg-text); }

/* ── Поля ─────────────────────────────────────────────────────────── */
.rg-label { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#94A3B8; margin-bottom:7px; }
.rg-input-wrap { position:relative; margin-bottom:16px; }
.rg-input-wrap > .ic { position:absolute; left:14px; top:38px; color:#94A3B8; pointer-events:none; transition:color .14s; }
.rg-input {
    width:100%; height:50px; padding:0 14px 0 42px;
    font-family:inherit; font-size:14.5px; font-weight:600; color:var(--rg-text);
    background:var(--rg-field); border:1.5px solid transparent; border-radius:13px; outline:none;
    transition:background .14s, border-color .14s, box-shadow .14s;
}
.rg-input::placeholder { color:#A3AEC0; font-weight:500; }
.rg-input:hover { border-color:var(--rg-line); }
.rg-input:focus { background:#fff; border-color:var(--rg-blue); box-shadow:0 0 0 4px rgba(21,99,255,.13); }
.rg-input-wrap:focus-within > .ic { color:var(--rg-blue); }
.rg-input:-webkit-autofill,
.rg-input:-webkit-autofill:hover,
.rg-input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 40px var(--rg-field) inset !important;
    -webkit-text-fill-color:var(--rg-text) !important; transition:background-color 5000s ease-in-out 0s; }

.rg-eye {
    position:absolute; right:7px; top:31px; width:38px; height:38px; border:none; background:none;
    display:flex; align-items:center; justify-content:center; border-radius:10px;
    color:#94A3B8; cursor:pointer; transition:color .12s, background .12s;
}
.rg-eye:hover { color:var(--rg-text); background:#ECEFF4; }

.rg-caps { display:none; align-items:center; gap:6px; margin:-8px 0 14px;
    font-size:11.5px; font-weight:700; color:#D97706; }
.rg-caps.on { display:flex; }

/* ── Кнопка ───────────────────────────────────────────────────────── */
.rg-submit {
    width:100%; height:50px; margin-top:6px;
    display:flex; align-items:center; justify-content:center; gap:9px;
    font-family:inherit; font-size:14.5px; font-weight:700; color:#fff;
    background:var(--rg-blue); border:none; border-radius:13px; cursor:pointer;
    box-shadow:0 10px 22px -10px rgba(21,99,255,.75);
    transition:background .14s, transform .06s, box-shadow .14s;
}
.rg-submit:hover { background:var(--rg-blue-d); box-shadow:0 14px 26px -10px rgba(21,99,255,.8); }
.rg-submit:active { transform:translateY(1px); }
.rg-submit svg { transition:transform .16s; }
.rg-submit:hover svg { transform:translateX(3px); }
.rg-submit:focus-visible { outline:3px solid rgba(21,99,255,.4); outline-offset:2px; }
.rg-submit:disabled { background:#E8EBF0; color:#A3AEC0; box-shadow:none; cursor:not-allowed; }
.rg-submit:disabled svg { display:none; }

/* ── Ошибка ───────────────────────────────────────────────────────── */
.rg-alert {
    display:flex; align-items:center; gap:9px; margin-bottom:18px; padding:11px 13px;
    border-radius:12px; background:#FEF2F2; border:1px solid #FEE2E2;
    color:#DC2626; font-size:13px; font-weight:600; line-height:1.4;
    animation:rg-shake .32s cubic-bezier(.36,.07,.19,.97) both;
}
.rg-alert svg { flex-shrink:0; }
@keyframes rg-shake { 20%,60% { transform:translateX(-4px); } 40%,80% { transform:translateX(4px); } }

@media (max-width:420px) {
    .rg-card { padding:28px 22px 24px; border-radius:18px; }
}

@media (prefers-reduced-motion: reduce) {
    .rg-orb, .rg-card, .rg-alert { animation:none !important; }
    .rg-submit svg { transition:none; }
}