/* ============================================================
   Art CRM — Auth V3 (final): centered card + aurora backdrop
   Все стили scope-нуты под .auth-page, чтобы не конфликтовать
   с teacher.css (там :root и data-theme переключаются для CRM).
   Login screen ВСЕГДА в светлой палитре.
   ============================================================ */

/* ------- Токены light-палитры (только в .auth-page scope) ------- */
.auth-page {
    --bg: #faf6ef;
    --bg-soft: #f4efe5;
    --bg-card: #ffffff;
    --bg-card-2: #fbf8f2;
    --bg-input: #f4efe5;

    --border: #eae3d5;
    --border-strong: #d9d0bc;

    --text: #2a2622;
    --text-secondary: #595048;
    --text-dim: #8a7f73;
    --text-faint: #b8ae9f;

    --brand: #3d3a8e;
    --brand-hover: #5754ae;
    --brand-soft: #e8e6f7;
    --brand-ink: #2d2b6e;

    --green: #4f9d7a;
    --green-bg: #daeddf;
    --green-ink: #2e6849;
    --red: #c75a6e;
    --red-bg: #f7dfe3;
    --red-ink: #8e3a4a;
    --amber: #d4a53d;
    --amber-bg: #f8ebc5;
    --amber-ink: #7a5d14;
    --coral: #e08263;
    --coral-bg: #fbe4d9;
    --coral-ink: #8c3f25;

    --lavender: #c7c3f0;
    --lavender-soft: #e5e2f8;
    --lavender-ink: #4a4790;

    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
    --shadow-1: 0 1px 2px rgba(60,50,40,.04), 0 1px 1px rgba(60,50,40,.03);
    --shadow: 0 4px 12px rgba(60,50,40,.06), 0 2px 4px rgba(60,50,40,.04);
    --shadow-3: 0 18px 40px rgba(60,50,40,.10), 0 6px 14px rgba(60,50,40,.06);
}

/* ============================================================
   Каркас auth-страницы (V3 — flex column center)
   ============================================================ */
.auth-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(199,195,240,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 85%, rgba(224,130,99,0.18) 0%, transparent 65%),
        var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    overflow: hidden;
    position: relative;
}
.auth-page * { box-sizing: border-box; }

/* ============================================================
   V3 Backdrop — aurora + grid + floating-карточки
   ============================================================ */
.auth-page .v3-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.auth-page .v3-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    animation: v3float 18s ease-in-out infinite;
}
.auth-page .v3-aurora.a1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--lavender), transparent 70%);
    top: -150px; left: -150px;
    opacity: 0.55;
}
.auth-page .v3-aurora.a2 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, var(--coral), transparent 70%);
    bottom: -200px; right: -200px;
    animation-delay: -6s;
    opacity: 0.28;
}
.auth-page .v3-aurora.a3 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #c8d8e8, transparent 70%);
    top: 30%; left: 50%;
    animation-delay: -12s;
    opacity: 0.45;
}
@keyframes v3float {
    0%, 100% { transform: translate(0,0); }
    33% { transform: translate(40px, -30px); }
    66% { transform: translate(-30px, 40px); }
}
.auth-page .v3-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(61,58,142,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61,58,142,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 80%);
}

/* Floating UI deco — белые карточки на фоне */
.auth-page .v3-float {
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text);
    box-shadow: var(--shadow-3);
    pointer-events: none;
    min-width: 220px;
}
.auth-page .v3-float-1 { top: 12%; left: 8%;  transform: rotate(-3deg); }
.auth-page .v3-float-2 { bottom: 16%; left: 6%; transform: rotate(2deg); }
.auth-page .v3-float-3 { top: 18%; right: 8%; transform: rotate(2deg); }

.auth-page .v3-fl-row { display: flex; align-items: center; gap: 10px; }
.auth-page .v3-fl-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--lavender);
    color: var(--lavender-ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
}
.auth-page .v3-fl-name { font-size: 13px; font-weight: 700; color: var(--text); }
.auth-page .v3-fl-sub  { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.auth-page .v3-fl-pill {
    margin-left: auto;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.auth-page .v3-fl-pill.green { background: var(--green-bg); color: var(--green-ink); }

.auth-page .v3-fl-stat-l { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.auth-page .v3-fl-stat-v { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-top: 2px; }
.auth-page .v3-fl-spark { margin-top: 6px; }

/* ============================================================
   Центральная карточка
   ============================================================ */
.auth-page .v3-card-wrap {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 460px;
    padding: 40px 24px;
}
.auth-page .v3-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 36px 36px 28px;
    box-shadow: 0 30px 70px -20px rgba(61,50,40,0.18), 0 6px 18px -4px rgba(61,50,40,0.08);
    color: var(--text);
}

/* Бренд-блок (логотип + имя) */
.auth-page .v3-brand {
    display: flex; align-items: center; gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
}
.auth-page .v3-brand .mark {
    width: 36px; height: 36px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.auth-page .v3-brand .mark img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
}
.auth-page .v3-brand .name {
    font-size: 14px; font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.auth-page .v3-brand .name small {
    display: block; font-weight: 500; font-size: 11px;
    color: var(--text-dim);
    margin-top: 1px;
}

/* ============================================================
   Базовые формы (h1, sub, fields, buttons, social)
   ============================================================ */
.auth-page .auth-h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    color: var(--text);
}
.auth-page .auth-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.5;
}
.auth-page .auth-sub b { color: var(--text); }

.auth-page .auth-field {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.auth-page .auth-field label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-page .auth-field label.req::after { content: ' *'; color: var(--red); }
.auth-page .auth-field-input-wrap { position: relative; }

.auth-page .auth-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.auth-page .auth-input::placeholder { color: var(--text-faint); }
.auth-page .auth-input:focus {
    border-color: var(--brand);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.auth-page .auth-input.has-action { padding-right: 42px; }

.auth-page .auth-eye {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px;
    background: none; border: none;
    color: var(--text-dim);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
}
.auth-page .auth-eye:hover { color: var(--text); background: var(--bg-soft); }

.auth-page .auth-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
}
.auth-page .auth-hint svg { flex-shrink: 0; opacity: 0.7; }

.auth-page .auth-row-between {
    display: flex; align-items: center; justify-content: space-between;
    margin: 8px 0 22px;
    font-size: 13px;
}

.auth-page .auth-check {
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer;
    color: var(--text-secondary);
    user-select: none;
    line-height: 1.4;
}
.auth-page .auth-check input { display: none; }
.auth-page .auth-check .box {
    width: 18px; height: 18px;
    border-radius: 5px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.auth-page .auth-check .box svg { opacity: 0; transition: opacity 0.15s; }
.auth-page .auth-check input:checked + .box {
    background: var(--brand);
    border-color: var(--brand);
}
.auth-page .auth-check input:checked + .box svg { opacity: 1; }
.auth-page .auth-check:hover .box { border-color: var(--brand); }

.auth-page .auth-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.auth-page .auth-link:hover { text-decoration: underline; }

.auth-page .auth-btn {
    width: 100%;
    padding: 13px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 4px 12px -2px rgba(61,58,142,0.35);
}
.auth-page .auth-btn:hover { background: var(--brand-hover); }
.auth-page .auth-btn:active { transform: translateY(1px); }
.auth-page .auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.auth-page .auth-btn.gradient { background: var(--brand); }

.auth-page .auth-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0;
    font-size: 11.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.auth-page .auth-divider::before, .auth-page .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-page .auth-social {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.auth-page .auth-social-btn {
    flex: 1;
    padding: 11px 14px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: background 0.15s, border-color 0.15s;
}
.auth-page .auth-social-btn:hover {
    background: var(--bg-soft);
    border-color: var(--border-strong);
}
.auth-page .auth-social-btn .ico { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }

.auth-page .auth-foot {
    margin-top: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
}
.auth-page .auth-legal {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}
.auth-page .auth-legal a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
}

.auth-page .auth-msg-error {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--red-bg);
    color: var(--red-ink);
    border-radius: var(--r-sm);
    font-size: 13px;
    border-left: 3px solid var(--red);
}

/* ============================================================
   Сброс старого #login-screen — V3 .auth-page управляет layout-ом
   ============================================================ */
#login-screen {
    display: block;
    padding: 0;
    background: var(--bg, #faf6ef);
    min-height: 100vh;
}
#login-screen.hidden { display: none !important; }

/* ============================================================
   Welcome overlay (показывается поверх календаря после регистрации)
   ============================================================ */
.v3-welcome-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 22, 35, 0.32);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.v3-welcome-overlay.is-closed { opacity: 0; visibility: hidden; pointer-events: none; }
.v3-welcome-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 22px;
    padding: 36px 36px 28px;
    box-shadow: 0 40px 80px -20px rgba(30,30,50,0.35), 0 0 0 1px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
    color: #2a2622;
}
.v3-welcome-confetti { position: absolute; inset: 0; pointer-events: none; }
.v3-welcome-confetti span {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 2px;
    opacity: 0.85;
    animation: v3-confetti 6s ease-in-out infinite;
}
.v3-welcome-confetti span:nth-child(1) { top: 12%; left: 12%; background: #e08263; animation-delay: -0.4s; }
.v3-welcome-confetti span:nth-child(2) { top: 18%; right: 14%; background: #c7c3f0; animation-delay: -1.2s; }
.v3-welcome-confetti span:nth-child(3) { top: 8%;  left: 50%;  background: #d4a53d; animation-delay: -2.0s; }
.v3-welcome-confetti span:nth-child(4) { top: 28%; right: 28%; background: #4f9d7a; animation-delay: -2.8s; }
.v3-welcome-confetti span:nth-child(5) { top: 14%; left: 32%;  background: #3d3a8e; animation-delay: -3.4s; }
.v3-welcome-confetti span:nth-child(6) { top: 22%; right: 8%;  background: #e08263; animation-delay: -4.2s; }
@keyframes v3-confetti {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(14px) rotate(180deg); }
}
.v3-welcome-ill {
    width: 88px; height: 88px;
    margin: 0 auto 18px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.v3-welcome-ill-circle {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: #4f9d7a;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 32px -8px rgba(79,157,122,0.55);
    animation: v3-welcome-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v3-welcome-ill-circle svg { width: 36px; height: 36px; }
@keyframes v3-welcome-pop {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.v3-welcome-card h2 {
    font-size: 28px; font-weight: 800;
    text-align: center; margin: 0 0 8px;
    letter-spacing: -0.02em;
    color: #2a2622;
}
.v3-welcome-card .v3-welcome-sub {
    font-size: 14px;
    color: #595048;
    text-align: center;
    margin-bottom: 22px;
    line-height: 1.55;
}
.v3-welcome-card .v3-welcome-sub b { color: #2a2622; }
.v3-welcome-steps {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #f4efe5;
    border-radius: 12px;
    margin: 4px 0 22px;
}
.v3-welcome-step {
    display: flex; align-items: center; gap: 12px;
    font-size: 13.5px;
    color: #595048;
}
.v3-welcome-step .dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #d9d0bc;
    color: #8a7f73;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.v3-welcome-step.done .dot {
    background: #4f9d7a;
    border-color: #4f9d7a;
    color: #fff;
}
.v3-welcome-step.done { color: #2a2622; }
.v3-welcome-step.done .dot svg { width: 12px; height: 12px; }

.v3-welcome-card .auth-btn {
    width: 100%;
    padding: 13px;
    background: #3d3a8e;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(61,58,142,0.35);
    transition: background 0.15s, transform 0.05s;
}
.v3-welcome-card .auth-btn:hover { background: #5754ae; }
.v3-welcome-card .auth-btn:active { transform: translateY(1px); }
.v3-welcome-card .v3-welcome-foot {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
}
.v3-welcome-card .v3-welcome-foot a {
    color: #3d3a8e;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.v3-welcome-card .v3-welcome-foot a:hover { text-decoration: underline; }

/* dev-блок (показывает пароль пока SMTP не настроен) */
.v3-welcome-card .v3-welcome-dev {
    margin: -8px 0 18px;
    padding: 10px 12px;
    background: #f8ebc5;
    color: #7a5d14;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    border-left: 3px solid #d4a53d;
}
.v3-welcome-card .v3-welcome-dev code {
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-weight: 700;
    color: #2a2622;
}

/* Toast (после закрытия welcome-overlay) */
.v3-toast {
    position: fixed;
    top: 84px; right: 28px;
    z-index: 999;
    width: 320px;
    background: #fff;
    border: 1px solid #eae3d5;
    border-radius: 12px;
    padding: 14px 14px 14px 16px;
    box-shadow: 0 18px 36px -10px rgba(60,50,40,0.22), 0 4px 12px -4px rgba(60,50,40,0.1);
    display: flex; align-items: center; gap: 12px;
    transform: translateX(380px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.36, 0.64, 1), opacity 0.45s;
    border-left: 3px solid #4f9d7a;
    font-family: 'Inter', sans-serif;
}
.v3-toast.is-show { transform: translateX(0); opacity: 1; }
.v3-toast-ico {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #daeddf;
    color: #2e6849;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.v3-toast-ico svg { width: 18px; height: 18px; }
.v3-toast-body { flex: 1; min-width: 0; color: #2a2622; }
.v3-toast-t { font-size: 13.5px; font-weight: 700; }
.v3-toast-s { font-size: 12px; color: #8a7f73; margin-top: 1px; word-break: break-all; }
.v3-toast-x {
    width: 24px; height: 24px;
    background: none;
    border: none;
    color: #8a7f73;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    font-family: inherit;
}
.v3-toast-x:hover { background: #f4efe5; color: #2a2622; }