/* ========== Компонент auth — все стили (design tokens, layout, компоненты) ========== */ /* ---------- Design tokens (цвета, тени, радиусы) ---------- */ :root { --auth-bg-page: #f3f4f6; --auth-bg-card: #fff; --auth-text: #111827; --auth-text-muted: #6b7280; --auth-border: #e5e7eb; --auth-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); --auth-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1); --auth-radius: 0.5rem; --auth-radius-lg: 0.75rem; /* Система отступов (как Tailwind: 1=0.25rem, 2=0.5rem, 3=0.75rem, 4=1rem, 5=1.25rem, 6=1.5rem) */ --auth-space-1: 0.25rem; --auth-space-2: 0.5rem; --auth-space-3: 0.75rem; --auth-space-4: 1rem; --auth-space-5: 1.25rem; --auth-space-6: 1.5rem; /* Акценты для кнопок/карточек */ --auth-accent-blue: #3b82f6; --auth-accent-blue-hover: #2563eb; --auth-accent-green: #22c55e; --auth-accent-green-hover: #16a34a; --auth-accent-purple: #9333ea; --auth-accent-purple-hover: #7e22ce; --auth-accent-indigo: #6366f1; --auth-accent-indigo-hover: #4f46e5; --auth-primary: #6366f1; --auth-primary-hover: #4f46e5; /* Кнопки: градиенты как в оригинале (Tailwind) */ --auth-btn-primary: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%); --auth-btn-primary-hover: linear-gradient(90deg, #2563eb 0%, #7e22ce 100%); --auth-btn-green: linear-gradient(135deg, #10b981 0%, #0d9488 100%); --auth-btn-green-hover: linear-gradient(135deg, #059669 0%, #0f766e 100%); --auth-btn-purple: linear-gradient(90deg, #9333ea 0%, #db2777 100%); --auth-btn-purple-hover: linear-gradient(90deg, #7e22ce 0%, #be185d 100%); --auth-btn-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%); --auth-btn-orange-hover: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); --auth-btn-red: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); --auth-btn-red-hover: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%); --auth-btn-yellow: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); --auth-btn-yellow-hover: linear-gradient(135deg, #ca8a04 0%, #a16207 100%); /* Как в Tailwind: shadow-md для кнопок */ --auth-btn-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --auth-btn-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Шрифты: один источник правды (идентичны по всему проекту) */ --auth-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --auth-text-xs: 0.75rem; --auth-text-sm: 0.875rem; --auth-text-base: 1rem; --auth-text-lg: 1.125rem; --auth-text-xl: 1.25rem; --auth-text-2xl: 1.5rem; --auth-text-3xl: 1.875rem; --auth-text-4xl: 2.25rem; --auth-text-5xl: 3rem; --auth-text-6xl: 3.75rem; --auth-text-icon: 2rem; --auth-text-icon-xl: 2.25rem; --auth-leading-tight: 1.25; --auth-leading-normal: 1.5; --auth-leading-loose: 1.75; --auth-font-normal: 400; --auth-font-medium: 500; --auth-font-semibold: 600; --auth-font-bold: 700; --auth-font-black: 900; --auth-html-font-size: 16px; /* Вторичный текст (подписи, мета) */ --auth-text-secondary: #4b5563; /* Разделители */ --auth-divider: var(--auth-border); /* Скроллбар (стандарт scrollbar-color + опционально WebKit) */ --auth-scrollbar-track: #f3f4f6; --auth-scrollbar-thumb: #9ca3af; --auth-scrollbar-thumb-hover: #6b7280; } .dark { --auth-bg-page: #111827; --auth-bg-card: #1f2937; --auth-text: #f3f4f6; --auth-text-muted: #9ca3af; --auth-text-secondary: #9ca3af; --auth-border: #374151; --auth-divider: var(--auth-border); --auth-scrollbar-track: #374151; --auth-scrollbar-thumb: #4b5563; --auth-scrollbar-thumb-hover: #6b7280; } /* Общие значения (hover, ссылки) — один источник правды */ :root { --auth-hover-bg: #f3f4f6; --auth-hover-bg-strong: #e5e7eb; --auth-link-color: #374151; --auth-link-color-hover: #111827; } .dark { --auth-hover-bg: #374151; --auth-hover-bg-strong: #1f2937; --auth-link-color: #d1d5db; --auth-link-color-hover: #fff; } /* ---- Корневой контейнер auth (изоляция от хост-проекта) ---- */ .auth { position: relative; z-index: 100001; } /* ---- Система отступов: вертикальный стек (аналог Tailwind space-y-*) ---- */ .auth-stack { display: flex; flex-direction: column; } .auth-stack--1 { gap: var(--auth-space-1); } .auth-stack--2 { gap: var(--auth-space-2); } .auth-stack--3 { gap: var(--auth-space-3); } .auth-stack--4 { gap: var(--auth-space-4); } .auth-stack--5 { gap: var(--auth-space-5); } .auth-stack--6 { gap: var(--auth-space-6); } /* ---- Auth: ссылки без подчёркивания (типизированное общее правило) ---- */ #profile-dropdown a, #profile-dropdown .auth-dropdown__link, .auth-dropdown__link, .auth-sidebar__link, .auth-nav-link, .auth-nav-logout, .auth-quick-action, .auth-btn-primary, .auth-btn-secondary, .auth-dash-actions__link { text-decoration: none; } /* ---- Base (ограничено .auth, не влияет на остальной сайт) ---- */ .auth, .auth *, .auth *::before, .auth *::after { box-sizing: border-box; } .auth { font-family: var(--auth-font-sans); font-size: var(--auth-text-base); line-height: var(--auth-leading-normal); color: var(--auth-text); } .auth.dark, .dark .auth { color: var(--auth-text); } /* Убираем двойной скролл: когда загружен dashboard/admin, скроллит только .auth-layout__content */ body:has(.auth-layout) { overflow: hidden; height: 100vh; } .auth.auth-layout { overflow: hidden; height: 100vh; } /* Изоляция input/textarea/select от глобальных стилей хост-проекта */ .auth input, .auth textarea, .auth select { margin-bottom: 0; } /* Remix Icon: базовый размер внутри auth */ .auth [class^="ri-"], .auth [class*=" ri-"] { font-size: var(--auth-text-xl); font-style: normal; display: inline-block; } .auth input[type="number"]::-webkit-inner-spin-button, .auth input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* ---- JS utilities (dashboard.js, header-icons.js, profile-menu, toast) ---- */ .hidden { display: none !important; } .translate-x-0 { transform: translateX(0); } .-translate-x-64 { transform: translateX(-16rem); } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .invisible { visibility: hidden; } .scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .translate-x-full { transform: translateX(100%); } /* ---- Toast уведомления (showToast) ---- */ #toast-container { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 99999999; pointer-events: none; } .auth-toast { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-radius: var(--auth-radius-lg); box-shadow: var(--auth-shadow-lg); color: #fff; font-weight: var(--auth-font-medium); transform: translateX(100%); opacity: 0; transition: transform 0.3s, opacity 0.3s; pointer-events: auto; } .auth-toast.auth-toast--visible { transform: translateX(0); opacity: 1; } .auth-toast--success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } .auth-toast--error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .auth-toast i { font-size: var(--auth-text-2xl); flex-shrink: 0; } /* ---- Layout: dashboard ---- */ /* Адаптер хоста: скрываем шапку/подвал сайта и убираем внешний скролл, когда загружен dashboard/admin */ html:has(.auth-layout) { overflow: hidden; } body:has(.auth-layout) > .main-wrapper > .route_container > .site-header, body:has(.auth-layout) > .main-wrapper > .site-footer { display: none; } .auth-layout { display: flex; height: 100vh; overflow: hidden; background: var(--auth-bg-page); color: var(--auth-text-secondary); min-width: 0; } .dark .auth-layout { background: var(--auth-bg-page); color: var(--auth-text-muted); } .auth-layout__content { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; } .auth-layout__main { flex-grow: 1; min-width: 0; } .auth-layout__inner { padding: 2rem 1rem; width: 100%; max-width: 128rem; margin: 0 auto; min-width: 0; } @media (min-width: 640px) { .auth-layout__inner { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .auth-layout__inner { padding: 2rem 2rem; } } /* ---- Sidebar ---- */ .auth-sidebar-wrap { min-width: fit-content; } #sidebar-backdrop { position: fixed; inset: 0; background: rgb(17 24 39 / 0.3); z-index: 40; transition: opacity 200ms; } @media (min-width: 1024px) { #sidebar-backdrop { display: none; } } #sidebar { display: flex; flex-direction: column; position: absolute; z-index: 40; left: 0; top: 0; height: 100dvh; overflow-y: scroll; width: 16rem; padding: 1rem; background: var(--auth-bg-card); border-radius: 0 1rem 1rem 0; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); flex-shrink: 0; transition: transform 200ms ease-in-out, width 200ms ease-in-out; transform: translateX(-16rem); } #sidebar.sidebar-transition { transition: transform 200ms ease-in-out, width 200ms ease-in-out; } .dark #sidebar { background: var(--auth-bg-card); } /* Десктоп (lg+): всегда полная ширина; узкая «рейка» 5rem давала свёрнутый вид на ноутбуках <1280px */ @media (min-width: 1024px) { #sidebar { position: static; transform: none; overflow-y: auto; width: 16rem; } } @media (min-width: 1024px) { body.sidebar-expanded #sidebar { width: 16rem; } } .no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .auth-sidebar__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--auth-space-6); padding-right: var(--auth-space-3); } @media (min-width: 640px) { .auth-sidebar__head { padding-left: var(--auth-space-2); padding-right: var(--auth-space-2); } } #sidebar-close { color: var(--auth-text-muted); background: none; border: none; cursor: pointer; padding: var(--auth-space-1); } #sidebar-close:hover { color: var(--auth-text-muted); } .dark #sidebar-close { color: var(--auth-text-muted); } .dark #sidebar-close:hover { color: var(--auth-text-muted); } @media (min-width: 1024px) { #sidebar-close { display: none; } } #sidebar-close svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } .auth-sidebar__logo { display: block; } .auth-sidebar__logo svg { fill: #8b5cf6; } .auth-sidebar__nav { margin: 0; } .auth-sidebar__nav + .auth-sidebar__nav { margin-top: var(--auth-space-6); } .auth-sidebar__title { font-size: var(--auth-text-xs); text-transform: uppercase; color: var(--auth-text-muted); font-weight: var(--auth-font-semibold); padding-left: var(--auth-space-3); margin: 0 0 var(--auth-space-3) 0; } .dark .auth-sidebar__title { color: var(--auth-text-muted); } .auth-sidebar__title-dots { display: none; width: 1.5rem; text-align: center; } body.sidebar-expanded .auth-sidebar__title-dots { display: none; } .auth-sidebar__title-text { display: block; } body.sidebar-expanded .auth-sidebar__title-text { display: block; } .auth-sidebar__list { margin-top: 0.75rem; list-style: none; padding: 0; margin: 0.75rem 0 0; } .auth-sidebar__item { padding: 0.5rem 0.75rem 0.5rem 1rem; border-radius: 0.5rem; margin-bottom: 0.125rem; } .auth-sidebar__item:last-child { margin-bottom: 0; } .auth-sidebar__item--active { background: linear-gradient(90deg, rgb(139 92 246 / 0.12), rgb(139 92 246 / 0.04)); } .dark .auth-sidebar__item--active { background: linear-gradient(90deg, rgb(139 92 246 / 0.24), rgb(139 92 246 / 0.04)); } .auth-sidebar__link { display: block; color: var(--auth-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; } .dark .auth-sidebar__link { color: var(--auth-text); } .auth-sidebar__item:not(.auth-sidebar__item--active) .auth-sidebar__link:hover { color: var(--auth-link-color-hover); } .dark .auth-sidebar__item:not(.auth-sidebar__item--active) .auth-sidebar__link:hover { color: var(--auth-link-color-hover); } .auth-sidebar__link-inner { display: flex; align-items: center; } .auth-sidebar__icon { flex-shrink: 0; fill: currentColor; } /* Stroke-only иконки (как в parser_standalone): не подменять fill, иначе контур превращается в заливку */ .auth-sidebar__icon[fill="none"] { fill: none; } .auth-sidebar__item--active .auth-sidebar__icon { color: #8b5cf6; } .auth-sidebar__item:not(.auth-sidebar__item--active) .auth-sidebar__icon { color: var(--auth-text-muted); } .dark .auth-sidebar__item:not(.auth-sidebar__item--active) .auth-sidebar__icon { color: var(--auth-text-muted); } .auth-sidebar__label { font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); margin-left: 1rem; opacity: 0; transition: opacity 200ms; } /* Оверлей (до 1024px): подписи видны; десктоп: всегда видны (без узкой рейки) */ @media (max-width: 1023px) { .auth-sidebar__label { opacity: 1; } } @media (min-width: 1024px) { .auth-sidebar__label { opacity: 1; } } body.sidebar-expanded .auth-sidebar__label { opacity: 1; } .auth-sidebar__expand { padding-top: 0.75rem; margin-top: auto; display: none; justify-content: flex-end; } #sidebar-expand { color: var(--auth-text-muted); background: none; border: none; cursor: pointer; padding: 0.5rem 0.75rem; } #sidebar-expand:hover { color: var(--auth-text-muted); } .dark #sidebar-expand { color: var(--auth-text-muted); } .dark #sidebar-expand:hover { color: var(--auth-text-muted); } #sidebar-expand svg { flex-shrink: 0; fill: currentColor; transition: transform 200ms; } body.sidebar-expanded #sidebar-expand svg { transform: rotate(180deg); } /* ---- Dashboard header ---- */ .auth-dash-header { position: sticky; top: 0; z-index: 30; width: 100%; display: block; } .auth-dash-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: -1; } @media (max-width: 1024px) { .auth-dash-header::before { background: rgb(255 255 255 / 0.9); } } .dark .auth-dash-header::before { background: rgb(31 41 55 / 0.9); } @media (min-width: 1024px) { .auth-dash-header::before { background: rgb(243 244 246 / 0.9); } } .dark .auth-dash-header::before { background: rgb(17 24 39 / 0.9); } .auth-dash-header__inner { padding: 0 1rem; } @media (min-width: 640px) { .auth-dash-header__inner { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .auth-dash-header__inner { padding: 0 2rem; } } .auth-dash-header__row { display: flex; align-items: center; justify-content: space-between; height: 4rem; } @media (min-width: 1024px) { .auth-dash-header__row { border-bottom: 1px solid var(--auth-border); } } .dark .auth-dash-header__row { border-color: var(--auth-border); } #sidebar-hamburger { color: var(--auth-text-muted); background: none; border: none; cursor: pointer; padding: 0.25rem; } #sidebar-hamburger:hover { color: var(--auth-text-secondary); } .dark #sidebar-hamburger:hover { color: var(--auth-text-muted); } @media (min-width: 1024px) { #sidebar-hamburger { display: none; } } #sidebar-hamburger svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } .auth-dash-header__icons { display: flex; align-items: center; gap: 0.75rem; } .auth-dash-header__icon-btn { position: relative; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; border: none; background: none; margin-left: 0.75rem; color: var(--auth-text-muted); } .auth-dash-header__icon-btn:hover { background: var(--auth-hover-bg); color: var(--auth-text-secondary); } @media (min-width: 1024px) { .auth-dash-header__icon-btn:hover { background: var(--auth-hover-bg-strong); } } .dark .auth-dash-header__icon-btn { color: var(--auth-text-muted); } .dark .auth-dash-header__icon-btn:hover { color: var(--auth-link-color-hover); background: var(--auth-hover-bg); } @media (min-width: 1024px) { .dark .auth-dash-header__icon-btn:hover { background: var(--auth-hover-bg-strong); } } .auth-dash-header__icon-btn svg { fill: currentColor; opacity: 0.8; } .auth-dash-header__icon-btn svg[fill="none"] { fill: none; } .auth-dash-header__divider { width: 1px; height: 1.5rem; background: var(--auth-border); border: none; margin: 0; } .dark .auth-dash-header__divider { background: var(--auth-border); } /* Индикатор непрочитанных уведомлений: красная точка на иконке колокольчика (правый верхний угол) */ .auth-notif-badge { position: absolute; top: 0; right: 0; width: 0.5rem; height: 0.5rem; min-width: 0.5rem; min-height: 0.5rem; background: #ef4444; border: 2px solid var(--auth-bg-card); border-radius: 9999px; } .dark .auth-notif-badge { border-color: var(--auth-bg-card); } .auth-notif-badge:empty { display: none; } .auth-notif-badge.has-dot { display: block; } .auth-dropdown { position: absolute; z-index: 10; top: 100%; right: 0; margin-top: 0.25rem; min-width: 11rem; background: var(--auth-bg-card); border: 1px solid var(--auth-border); border-radius: 0.5rem; box-shadow: var(--auth-shadow); overflow: hidden; padding: 0.375rem 0; } .dark .auth-dropdown { background: var(--auth-bg-card); border-color: var(--auth-border); } .auth-dropdown__title { font-size: var(--auth-text-xs); font-weight: var(--auth-font-semibold); color: var(--auth-text-muted); text-transform: uppercase; padding: 0.375rem 0.75rem 0.5rem; } .dark .auth-dropdown__title { color: var(--auth-text-muted); } .auth-dropdown__item { border-bottom: 1px solid var(--auth-border); } .dark .auth-dropdown__item { border-color: var(--auth-border); } .auth-dropdown__item:last-child { border-bottom: 0; } .auth-dropdown__link { display: block; padding: 0.5rem 0.75rem; font-size: var(--auth-text-sm); color: var(--auth-link-color); transition: background 0.2s; } .auth-dropdown__link:hover { background: var(--auth-hover-bg); } .dark .auth-dropdown__link { color: var(--auth-link-color); } .dark .auth-dropdown__link:hover { background: var(--auth-hover-bg); } .auth-dropdown__link--violet { font-weight: var(--auth-font-medium); color: #8b5cf6; } .auth-dropdown__link--violet:hover { color: #7c3aed; } .dark .auth-dropdown__link--violet:hover { color: #a78bfa; } .auth-dropdown__link-inner { display: inline-flex; align-items: center; } .auth-dropdown__link-inner svg { margin-right: 0.5rem; flex-shrink: 0; } .auth-dropdown--notif { min-width: 20rem; right: 0; margin-right: 0; } .theme-toggle .theme-icon-sun { display: block; } .theme-toggle .theme-icon-moon { display: none; } .dark .theme-toggle .theme-icon-sun { display: none; } .dark .theme-toggle .theme-icon-moon { display: block; } .theme-toggle svg { fill: currentColor; opacity: 0.8; } .dark .theme-toggle svg { opacity: 0.8; } /* ---- Search modal ---- */ #search-modal-backdrop { position: fixed; inset: 0; background: rgb(17 24 39 / 0.3); z-index: 50; transition: opacity 0.2s; } #search-modal { position: fixed; inset: 0; z-index: 50; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; padding: 0 1rem; padding-top: 5rem; margin-bottom: 1rem; } @media (min-width: 640px) { #search-modal { padding-left: 1.5rem; padding-right: 1.5rem; } } #search-modal .auth-search-dialog { background: var(--auth-bg-card); border: 1px solid transparent; overflow: auto; max-width: 42rem; width: 100%; max-height: 100%; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); } .dark #search-modal .auth-search-dialog { background: var(--auth-bg-card); border-color: rgb(55 65 81 / 0.6); } .auth-search-dialog__form { border-bottom: 1px solid var(--auth-border); } .dark .auth-search-dialog__form { border-color: rgb(55 65 81 / 0.6); } .auth-search-dialog__field { position: relative; } #search-input { width: 100%; background: var(--auth-bg-card); border: 0; padding: 0.75rem 1rem 0.75rem 2.5rem; font-size: var(--auth-text-base); } #search-input:focus { outline: none; } .dark #search-input { background: var(--auth-bg-card); color: #d1d5db; } #search-input::placeholder { color: #9ca3af; } .dark #search-input::placeholder { color: #6b7280; } .auth-search-dialog__body { padding: 1rem 0.5rem; } .auth-search-dialog__section-title { font-size: var(--auth-text-xs); font-weight: var(--auth-font-semibold); color: #9ca3af; text-transform: uppercase; padding: 0 0.5rem 0.5rem; } .dark .auth-search-dialog__section-title { color: #6b7280; } .auth-search-dialog__placeholder { display: flex; align-items: center; padding: 0.5rem; font-size: var(--auth-text-sm); color: #4b5563; border-radius: 0.5rem; } .dark .auth-search-dialog__placeholder { color: #9ca3af; } .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } #mobile-menu-button { padding: 0.5rem; border-radius: 0.375rem; color: #4b5563; background: none; border: none; cursor: pointer; transition: color 0.2s, background 0.2s; } #mobile-menu-button:hover { color: var(--auth-text); background: #f3f4f6; } .dark #mobile-menu-button { color: #d1d5db; } .dark #mobile-menu-button:hover { color: #fff; background: #374151; } @media (min-width: 768px) { #mobile-menu-button { display: none; } } #mobile-menu-button i { font-size: var(--auth-text-2xl); } #mobile-menu { border-top: 1px solid var(--auth-border); padding-bottom: 1rem; margin-top: 0.5rem; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s; max-height: 0; opacity: 0; } .dark #mobile-menu { border-color: #374151; } #mobile-menu.mobile-menu-open { max-height: 24rem; opacity: 1; } #mobile-menu .auth-nav-mobile { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; } #mobile-menu .auth-nav-mobile a { color: #4b5563; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); transition: color 0.2s; } #mobile-menu .auth-nav-mobile a:hover { color: var(--auth-text); } #mobile-menu .auth-nav-mobile a i { margin-right: 0.5rem; } .dark #mobile-menu .auth-nav-mobile a { color: #d1d5db; } .dark #mobile-menu .auth-nav-mobile a:hover { color: #fff; } @media (min-width: 768px) { #mobile-menu { display: none; } } /* ---- Profile menu ---- */ #profile-menu-container { position: relative; } #profile-menu-button { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; border: none; background: none; cursor: pointer; transition: background 0.2s; } @media (min-width: 768px) { #profile-menu-button { padding: 0.5rem; } } #profile-menu-button:hover { background: var(--auth-hover-bg); } .dark #profile-menu-button:hover { background: var(--auth-hover-bg); } .auth-profile-avatar { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; max-width: 2rem; max-height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); overflow: hidden; background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%); flex-shrink: 0; } @media (min-width: 768px) { .auth-profile-avatar { width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; } } .auth-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .auth-profile-avatar i { color: #fff; font-size: var(--auth-text-sm); } #profile-menu-button .auth-profile-avatar { width: 1.5rem; height: 1.5rem; } @media (min-width: 768px) { #profile-menu-button .auth-profile-avatar { width: 2rem; height: 2rem; } } .auth-profile-info { text-align: left; display: none; } @media (min-width: 768px) { .auth-profile-info { display: block; } } .auth-profile-name { font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); color: var(--auth-text); } #profile-menu-button:hover .auth-profile-name { color: #374151; } .dark .auth-profile-name { color: #fff; } .dark #profile-menu-button:hover .auth-profile-name { color: #d1d5db; } .auth-profile-role { font-size: var(--auth-text-xs); color: #6b7280; } #profile-menu-button:hover .auth-profile-role { color: #4b5563; } .dark .auth-profile-role { color: #9ca3af; } .dark #profile-menu-button:hover .auth-profile-role { color: #6b7280; } .auth-profile-arrow { color: #9ca3af; transition: transform 0.2s; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex: 0 0 1rem; line-height: 1; } .auth-profile-arrow svg { width: 1rem; height: 1rem; display: block; } #profile-menu-button:hover .auth-profile-arrow { color: #4b5563; } .dark #profile-menu-button:hover .auth-profile-arrow { color: #d1d5db; } #profile-dropdown { position: absolute; right: 0; margin-top: 0.5rem; width: 14rem; background: var(--auth-bg-card); border-radius: 0.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); border: 1px solid var(--auth-border); opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 50; } .dark #profile-dropdown { background: var(--auth-bg-card); border-color: #374151; } #profile-dropdown.opacity-100.visible.scale-100 { opacity: 1; visibility: visible; transform: scale(1); } #profile-dropdown .auth-dropdown__inner { padding: 0.5rem 0; } #profile-dropdown a { display: flex; align-items: center; padding: 0.75rem 1rem; font-size: var(--auth-text-sm); color: var(--auth-link-color); transition: background 0.2s, color 0.2s; } #profile-dropdown a:hover { background: var(--auth-hover-bg); color: var(--auth-link-color-hover); } .dark #profile-dropdown a { color: var(--auth-link-color); } .dark #profile-dropdown a:hover { background: var(--auth-hover-bg); color: var(--auth-link-color-hover); } #profile-dropdown a i { margin-right: 0.75rem; font-size: var(--auth-text-lg); } #profile-dropdown a:hover i { color: #3b82f6; } #profile-dropdown .auth-dropdown-divider { border-top: 1px solid var(--auth-border); margin: 0.5rem 0; } .dark #profile-dropdown .auth-dropdown-divider { border-color: #4b5563; } #profile-dropdown .open_logout { color: #dc2626; } #profile-dropdown .open_logout:hover { background: #fef2f2; color: #b91c1c; } .dark #profile-dropdown .open_logout { color: #f87171; } .dark #profile-dropdown .open_logout:hover { background: rgb(127 29 29 / 0.2); color: #fca5a5; } #profile-dropdown .open_logout:hover i { color: #ef4444; } .auth-profile-wrap { position: relative; } .auth-profile-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; border: none; background: none; cursor: pointer; transition: background 0.2s; } @media (min-width: 768px) { .auth-profile-btn { padding: 0.5rem; } } .auth-profile-btn:hover { background: var(--auth-hover-bg); } .dark .auth-profile-btn:hover { background: var(--auth-hover-bg); } .arrow-icon { color: #9ca3af; transition: transform 0.2s; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex: 0 0 1rem; line-height: 1; } .auth-profile-btn:hover .arrow-icon { color: #4b5563; } .dark .auth-profile-btn:hover .arrow-icon { color: #d1d5db; } /* Site header nav links (when using renderAuthNavigation) */ .auth-nav-link { color: #4b5563; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.25rem; } .auth-nav-link:hover { color: var(--auth-text); } .auth-nav-link i { font-size: var(--auth-text-base); } .dark .auth-nav-link { color: #d1d5db; } .dark .auth-nav-link:hover { color: #fff; } .auth-nav-actions { display: flex; align-items: center; gap: 0.5rem; padding-left: 1rem; border-left: 1px solid #d1d5db; } .dark .auth-nav-actions { border-color: #4b5563; } .auth-nav-user { display: flex; align-items: center; gap: 0.75rem; padding-left: 1rem; border-left: 1px solid #d1d5db; } .dark .auth-nav-user { border-color: #4b5563; } .auth-nav-user__info { display: flex; align-items: center; gap: 0.5rem; } .auth-nav-user__text { display: block; } .auth-nav-logout { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); background: #dc2626; color: #fff; transition: background 0.2s; } .auth-nav-logout:hover { background: #b91c1c; } .auth-nav-logout-text { display: none; } @media (min-width: 768px) { .auth-nav-logout-text { display: inline; } } /* ---- Buttons (типизированные, как в оригинале Tailwind) ---- */ /* Кнопки: как в оригинале Tailwind — py-3 px-4 (0.75rem 1rem), line-height 1.5rem → высота 3rem (48px) */ .auth-btn, .auth-btn-primary, .auth-btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; line-height: var(--auth-text-2xl); min-height: 3rem; border-radius: 0.5rem; font-weight: var(--auth-font-semibold); border: none; cursor: pointer; transition: all 0.3s; text-decoration: none; color: #fff; box-shadow: var(--auth-btn-shadow); } .auth-btn:disabled, .auth-btn-primary:disabled, .auth-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .auth-btn i, .auth-btn-primary i, .auth-btn-secondary i { margin-right: 0.5rem; } .auth-btn-primary { width: 100%; background: var(--auth-btn-primary); } .auth-btn-primary:hover:not(:disabled) { background: var(--auth-btn-primary-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-primary--green { background: var(--auth-btn-green); } .auth-btn-primary--green:hover:not(:disabled) { background: var(--auth-btn-green-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-primary--purple { background: var(--auth-btn-purple); } .auth-btn-primary--purple:hover:not(:disabled) { background: var(--auth-btn-purple-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-primary--orange { background: var(--auth-btn-orange); } .auth-btn-primary--orange:hover:not(:disabled) { background: var(--auth-btn-orange-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-primary--red { background: var(--auth-btn-red); } .auth-btn-primary--red:hover:not(:disabled) { background: var(--auth-btn-red-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-primary--yellow { background: var(--auth-btn-yellow); } .auth-btn-primary--yellow:hover:not(:disabled) { background: var(--auth-btn-yellow-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-secondary { background: var(--auth-btn-green); } .auth-btn-secondary:hover:not(:disabled) { background: var(--auth-btn-green-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-secondary--orange { background: var(--auth-btn-orange); } .auth-btn-secondary--orange:hover:not(:disabled) { background: var(--auth-btn-orange-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn-secondary--yellow { background: var(--auth-btn-yellow); } .auth-btn-secondary--yellow:hover:not(:disabled) { background: var(--auth-btn-yellow-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-btn--sm { padding: 0.5rem 1rem; font-size: var(--auth-text-sm); line-height: var(--auth-text-xl); min-height: 2.25rem; width: auto; } .auth-btn-full { width: 100%; justify-content: center; } /* ---- Login page ---- */ .auth-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 50%, #f5f3ff 100%); } @media (min-width: 640px) { .auth-login-page { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .auth-login-page { padding: 3rem 2rem; } } .dark .auth-login-page { background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%); } .auth-login-wrap { max-width: 28rem; width: 100%; } .auth-login-form, .login_form { background: var(--auth-bg-card); border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); padding: 2rem; } .dark .auth-login-form, .dark .login_form { background: var(--auth-bg-card); } .auth-modal .auth-form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--auth-border); } .dark .auth-modal .auth-form-header { border-color: #374151; } .auth-form-header__left { display: flex; align-items: center; gap: 0.75rem; } .auth-form-header__icon { width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%); } .auth-form-header__icon--green { background: linear-gradient(135deg, #10b981 0%, #0d9488 100%); } .auth-form-header__icon--indigo { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); } .auth-form-header__icon--purple { background: linear-gradient(135deg, #9333ea 0%, #db2777 100%); } .auth-form-header__icon i { color: #fff; font-size: var(--auth-text-2xl); } .auth-form-header__title { font-size: var(--auth-text-2xl); font-weight: var(--auth-font-bold); color: var(--auth-text); } .dark .auth-form-header__title { color: #fff; } .auth-form-header__sub { font-size: var(--auth-text-sm); color: #6b7280; } .dark .auth-form-header__sub { color: #9ca3af; } .air-modal-close { color: #9ca3af; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 9999px; transition: color 0.2s, background 0.2s; } .air-modal-close:hover { color: #4b5563; background: var(--auth-hover-bg); } .air-modal-close.auth-btn-primary { border-radius: var(--auth-radius); padding: 0.75rem 1rem; } .air-modal-close.auth-btn-primary:hover { background: var(--auth-btn-primary-hover); color: #fff; } .dark .air-modal-close { color: #6b7280; } .dark .air-modal-close:hover { color: #d1d5db; background: var(--auth-hover-bg); } .dark .air-modal-close.auth-btn-primary:hover { background: var(--auth-btn-primary-hover); color: #fff; } .air-modal-close i { font-size: var(--auth-text-2xl); } .auth-form-body { display: flex; flex-direction: column; gap: 1.5rem; } .auth-form-body--center { align-items: center; text-align: center; } .auth-form { display: flex; flex-direction: column; gap: 1.5rem; } .auth-form-group { display: block; } .auth-form-label { display: block; font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); color: #374151; margin-bottom: 0.5rem; } .auth-form-label__muted { font-weight: var(--auth-font-normal); color: #6b7280; font-size: var(--auth-text-xs); } .dark .auth-form-label { color: #d1d5db; } .dark .auth-form-label__muted { color: #9ca3af; } .auth-form-label i { margin-right: 0.25rem; font-size: 0.875em; } .auth-form-hint { font-size: var(--auth-text-xs); margin-top: 0.25rem; color: #6b7280; } .auth-form-hint--success { color: #16a34a; } .auth-form-hint--error { color: #dc2626; } .dark .auth-form-hint { color: #9ca3af; } .dark .auth-form-hint--success { color: #4ade80; } .dark .auth-form-hint--error { color: #f87171; } .auth-form-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .auth-form-label-row .auth-form-label { margin-bottom: 0; } .auth-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: var(--auth-text-base); transition: border-color 0.2s, box-shadow 0.2s; background: var(--auth-bg-card); color: var(--auth-text); } .auth-input:focus { outline: none; box-shadow: 0 0 0 2px #3b82f6; border-color: transparent; } .dark .auth-input { border-color: #4b5563; background: #374151; color: #fff; } .auth-input::placeholder { color: #9ca3af; } .dark .auth-input::placeholder { color: #6b7280; } .auth-input--with-btn { padding-right: 3rem; } .auth-input-btn { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #6b7280; background: none; border: none; cursor: pointer; } .auth-input-btn:hover { color: #374151; } .dark .auth-input-btn { color: #9ca3af; } .dark .auth-input-btn:hover { color: #d1d5db; } .auth-input-wrap { position: relative; } /* Вкладки (Login: По телефону / По паролю) */ .auth-tabs { display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 2px solid var(--auth-border); } .auth-tab { flex: 1; padding: 0.625rem 0.75rem; font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); font-family: var(--auth-font-sans); color: var(--auth-text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.375rem; } .auth-tab:hover { color: var(--auth-text); } .auth-tab--active { color: var(--auth-accent-blue); border-bottom-color: var(--auth-accent-blue); font-weight: var(--auth-font-semibold); } .auth-tab i { font-size: 1.1em; } .dark .auth-tab { color: #9ca3af; } .dark .auth-tab:hover { color: #e5e7eb; } .dark .auth-tab--active { color: #60a5fa; border-bottom-color: #60a5fa; } .dark .auth-tabs { border-bottom-color: #374151; } .auth-tab-content { animation: authTabFade 0.2s ease; } @keyframes authTabFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Верификация телефона (Zvonok) */ .auth-phone-verification-block .auth-phone-row { display: flex; gap: 0.5rem; align-items: stretch; } .auth-phone-verification-block .auth-phone-row .auth-input { flex: 1; min-width: 0; } .auth-phone-verification-block .auth-btn-send-code { flex-shrink: 0; white-space: nowrap; height: 42px; min-height: 42px; padding-top: 0; padding-bottom: 0; line-height: 42px; font-size: var(--auth-text-sm); } .auth-phone-code-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--auth-border); } /* 4-digit PIN input */ .auth-pin-group { display: flex; gap: 0.625rem; margin-top: 0.5rem; justify-content: flex-start; } .auth-pin-input { width: 3rem; height: 3.5rem; text-align: center; font-size: 1.375rem; font-weight: var(--auth-font-semibold); font-family: var(--auth-font-sans); border: 2px solid var(--auth-border); border-radius: var(--auth-radius); background: var(--auth-bg-card); color: var(--auth-text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; caret-color: var(--auth-accent-blue); } .auth-pin-input:focus { border-color: var(--auth-accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } .auth-pin-input.auth-pin-input--filled { border-color: var(--auth-accent-green); } .auth-pin-input.auth-pin-input--error { border-color: #ef4444; animation: authPinShake 0.4s ease; } .auth-pin-input.auth-pin-input--success { border-color: var(--auth-accent-green); background: rgba(34, 197, 94, 0.08); } .auth-pin-group.auth-pin-group--verifying .auth-pin-input { opacity: 0.6; pointer-events: none; } @keyframes authPinShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .dark .auth-pin-input { background: #1f2937; border-color: #374151; color: #f3f4f6; } .dark .auth-pin-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); } .dark .auth-pin-input.auth-pin-input--filled { border-color: #4ade80; } .dark .auth-pin-input.auth-pin-input--error { border-color: #f87171; } .dark .auth-pin-input.auth-pin-input--success { border-color: #4ade80; background: rgba(74, 222, 128, 0.1); } .auth-pin-status { font-size: var(--auth-text-sm); margin-top: 0.5rem; min-height: 1.25rem; transition: color 0.2s; } .auth-pin-status--verifying { color: var(--auth-accent-blue); } .auth-pin-status--error { color: #ef4444; } .auth-pin-status--success { color: var(--auth-accent-green); } .dark .auth-pin-status--verifying { color: #60a5fa; } .dark .auth-pin-status--error { color: #f87171; } .dark .auth-pin-status--success { color: #4ade80; } .auth-btn-verify-fallback { margin-top: 0.5rem; font-size: var(--auth-text-sm); } .auth-code-display { font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); color: var(--auth-text); margin-top: 0.5rem; } .auth-phone-verified { font-size: var(--auth-text-sm); color: var(--auth-accent-green); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.25rem; } .auth-phone-verified i { font-size: 1.25em; } .dark .auth-phone-verified { color: #4ade80; } .auth-alert { padding: 1rem; border-radius: 0.5rem; border: 1px solid; } .auth-alert--success { background: #f0fdf4; border-color: #bbf7d0; } .auth-alert--success .auth-alert__text { color: #15803d; } .dark .auth-alert--success { background: rgb(22 101 52 / 0.2); border-color: #166534; } .dark .auth-alert--success .auth-alert__text { color: #86efac; } .auth-alert--info { background: #eff6ff; border-color: #bfdbfe; } .auth-alert--info .auth-alert__title { color: #1e40af; } .auth-alert--info .auth-alert__text { color: #1d4ed8; } .dark .auth-alert--info { background: rgb(30 64 175 / 0.2); border-color: #1e3a8a; } .dark .auth-alert--info .auth-alert__title { color: #93c5fd; } .dark .auth-alert--info .auth-alert__text { color: #93c5fd; } .auth-alert--warning { background: #fefce8; border-color: #fef08a; } .auth-alert--warning .auth-alert__title { color: #854d0e; } .auth-alert--warning .auth-alert__text { color: #713f12; } .dark .auth-alert--warning { background: rgb(113 63 18 / 0.2); border-color: #854d0e; } .dark .auth-alert--warning .auth-alert__title { color: #fde047; } .dark .auth-alert--warning .auth-alert__text { color: #fde047; } .auth-alert--error { background: #fef2f2; border-color: #fecaca; } .auth-alert--error .auth-alert__title { color: #b91c1c; } .auth-alert--error .auth-alert__text { color: #991b1b; } .auth-alert--error i { color: #dc2626; } .dark .auth-alert--error { background: rgb(127 29 29 / 0.2); border-color: #991b1b; } .dark .auth-alert--error .auth-alert__title { color: #fca5a5; } .dark .auth-alert--error .auth-alert__text { color: #fca5a5; } .dark .auth-alert--error i { color: #f87171; } .auth-alert--block { text-align: center; } .auth-alert--block .auth-alert__title { margin-bottom: 0.25rem; } .auth-alert--block .auth-alert__text { margin: 0 0 1rem; } .auth-alert__title { font-weight: var(--auth-font-semibold); margin: 0 0 0.25rem; } .auth-alert__text { margin: 0; font-size: var(--auth-text-sm); } .auth-alert__text--mt { margin-top: 0.5rem; } .auth-alert__row { display: flex; align-items: flex-start; gap: 0.5rem; } .auth-alert__row i { flex-shrink: 0; margin-right: 0; } .auth-alert ul { margin: 0.25rem 0 0; padding-left: 1rem; list-style: none; } .auth-alert ul li { margin-bottom: 0.25rem; } .auth-alert__row i { margin-right: 0.5rem; } .auth-divider { position: relative; margin: 1.5rem 0; } .auth-divider__line { position: absolute; inset: 0; display: flex; align-items: center; } .auth-divider__line div { width: 100%; border-top: 1px solid var(--auth-border); } .dark .auth-divider__line div { border-color: #4b5563; } .auth-divider__text { position: relative; display: flex; justify-content: center; font-size: var(--auth-text-sm); } .auth-divider__text span { padding: 0 0.5rem; background: var(--auth-bg-card); color: #6b7280; } .dark .auth-divider__text span { background: var(--auth-bg-card); color: #9ca3af; } .auth-form-footer { text-align: center; } .auth-form-footer p { color: #4b5563; } .dark .auth-form-footer p { color: #d1d5db; } .auth-form-footer a { color: #2563eb; font-weight: var(--auth-font-semibold); cursor: pointer; } .auth-form-footer a:hover { color: #1d4ed8; } .dark .auth-form-footer a { color: #60a5fa; } .dark .auth-form-footer a:hover { color: #93c5fd; } .open_modal_forgot_password_form { font-size: var(--auth-text-sm); color: #2563eb; font-weight: var(--auth-font-medium); cursor: pointer; } .open_modal_forgot_password_form:hover { color: #1d4ed8; } .dark .open_modal_forgot_password_form { color: #60a5fa; } .dark .open_modal_forgot_password_form:hover { color: #93c5fd; } /* ---- Box modal (shared) ---- */ .box-modal { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background: var(--auth-bg-card); } .dark .box-modal { background: var(--auth-bg-card); } .box-modal input, .box-modal textarea, .box-modal a { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; } .login-modal.box-modal, .register-modal.box-modal { padding: 1.5rem; } /* Узкая модалка только для входа. Регистрация и остальные — широкие (1215px из airModal.js). */ .login-modal.box-modal { padding: 1.5rem; max-width: 32rem !important; width: 100% !important; border-radius: var(--auth-radius-lg); box-shadow: var(--auth-shadow-lg); } .auth-modal.box-modal { padding: 1.5rem; border-radius: var(--auth-radius-lg); box-shadow: var(--auth-shadow-lg); } /* Password strength (modal) */ .auth-password-strength { margin-top: 0.5rem; } .auth-password-strength__bars { display: flex; gap: 0.25rem; margin-bottom: 0.25rem; } .auth-password-strength__bar { flex: 1; height: 0.25rem; border-radius: 9999px; background: var(--auth-border); transition: background 0.2s; } .dark .auth-password-strength__bar { background: #4b5563; } .auth-password-strength__bar.strength-1 { background: #ef4444; } .auth-password-strength__bar.strength-2 { background: #f59e0b; } .auth-password-strength__bar.strength-3 { background: #eab308; } .auth-password-strength__bar.strength-4 { background: #22c55e; } .auth-password-strength__text { font-size: var(--auth-text-xs); color: #6b7280; margin: 0; } .auth-password-strength__text--weak { color: #dc2626; } .auth-password-strength__text--medium { color: #ca8a04; } .auth-password-strength__text--strong { color: #16a34a; } .dark .auth-password-strength__text { color: #9ca3af; } .dark .auth-password-strength__text--weak { color: #f87171; } .dark .auth-password-strength__text--medium { color: #facc15; } .dark .auth-password-strength__text--strong { color: #4ade80; } /* Subscription modal */ .auth-subscription-current { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .auth-subscription-current__name { font-weight: var(--auth-font-bold); font-size: var(--auth-text-lg); } .auth-subscription-current__badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: var(--auth-text-xs); font-weight: var(--auth-font-semibold); margin-left: auto; } .auth-subscription-current__badge--active { background: #dcfce7; color: #166534; } .dark .auth-subscription-current__badge--active { background: rgb(22 101 52 / 0.3); color: #86efac; } .auth-subscription-current__badge--inactive { background: #f3f4f6; color: #4b5563; } .dark .auth-subscription-current__badge--inactive { background: #374151; color: #9ca3af; } .auth-subscription-current__expires { font-size: var(--auth-text-xs); width: 100%; margin-top: 0.25rem; } .auth-form--subscription { gap: 1rem; } .auth-subscription-plans { display: flex; flex-direction: column; gap: 0.75rem; } .auth-subscription-plan { display: flex; align-items: flex-start; padding: 1rem; border: 2px solid var(--auth-border); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .dark .auth-subscription-plan { border-color: #374151; } .auth-subscription-plan:hover { border-color: #c4b5fd; background: #faf5ff; } .dark .auth-subscription-plan:hover { border-color: #6b21a8; background: rgb(147 51 234 / 0.1); } .auth-subscription-plan--current { border-color: #9333ea; background: #faf5ff; } .dark .auth-subscription-plan--current { border-color: #a855f7; background: rgb(147 51 234 / 0.15); } .auth-subscription-plan__input { margin: 0.25rem 0.75rem 0 0; flex-shrink: 0; accent-color: #9333ea; } .auth-subscription-plan__content { flex: 1; min-width: 0; } .auth-subscription-plan__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; } .auth-subscription-plan__info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; } .auth-subscription-plan__name { font-size: var(--auth-text-lg); font-weight: var(--auth-font-bold); color: var(--auth-text); } .auth-subscription-plan__badge { padding: 0.125rem 0.5rem; font-size: var(--auth-text-xs); font-weight: var(--auth-font-semibold); background: #9333ea; color: #fff; border-radius: 9999px; } .auth-subscription-plan__desc { display: block; width: 100%; font-size: var(--auth-text-sm); color: var(--auth-text-muted); } .auth-subscription-plan__price { text-align: right; } .auth-subscription-plan__price-value { font-size: var(--auth-text-2xl); font-weight: var(--auth-font-bold); color: var(--auth-text); } .auth-subscription-plan__price-period { display: block; font-size: var(--auth-text-xs); color: var(--auth-text-muted); } .auth-subscription-plan__features { margin: 0; padding: 0; list-style: none; font-size: var(--auth-text-sm); color: var(--auth-text-muted); } .auth-subscription-plan__features li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .auth-subscription-plan__features li i { color: #22c55e; flex-shrink: 0; } .dark .auth-subscription-plan__features li i { color: #4ade80; } /* ---- Cards, panels, stats ---- */ .auth-card { background: var(--auth-bg-card); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); padding: 1.5rem; transition: all 0.3s ease; } .auth-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); } .dark .auth-card { background: var(--auth-bg-card); } .auth-card--stat { display: flex; align-items: center; } .auth-card--stat .auth-card__icon { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-right: 1rem; } .auth-card--stat .auth-card__value { font-size: var(--auth-text-2xl); font-weight: var(--auth-font-bold); color: var(--auth-text); } .dark .auth-card--stat .auth-card__value { color: #fff; } .auth-card--stat .auth-card__label { font-size: var(--auth-text-sm); color: #4b5563; } .dark .auth-card--stat .auth-card__label { color: #9ca3af; } .auth-card__icon--blue { background: #3b82f6; color: #fff; } .auth-card__icon--red { background: #ef4444; color: #fff; } .auth-card__icon--green { background: #22c55e; color: #fff; } .auth-card__icon--purple { background: #a855f7; color: #fff; } .auth-page-title { font-size: var(--auth-text-3xl); font-weight: var(--auth-font-bold); color: var(--auth-text); margin-bottom: 0.5rem; } .dark .auth-page-title { color: #fff; } .auth-page-title i { margin-right: 0.5rem; } .auth-page-subtitle { color: #4b5563; } .dark .auth-page-subtitle { color: #d1d5db; } /* Стандартные отступы p/h1-h6 внутри auth (хост-проект может сбрасывать глобально). :where() даёт нулевую специфичность класса, чтобы компонентные правила вроде .auth-dash-hero__meta { margin: 0 } не перебивались. */ :where(.auth) p { margin: 1em 0; } :where(.auth) h1 { margin: 0.67em 0; } :where(.auth) h2 { margin: 0.83em 0; } :where(.auth) h3 { margin: 1em 0; } :where(.auth) h4 { margin: 1.33em 0; } :where(.auth) h5 { margin: 1.67em 0; } :where(.auth) h6 { margin: 2.33em 0; } .auth-grid-4 { display: grid; gap: 1.5rem; margin-bottom: 2rem; } @media (min-width: 768px) { .auth-grid-4 { grid-template-columns: repeat(4, 1fr); } } .auth-alert-inline { margin-bottom: 1.5rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid; display: flex; align-items: center; } .auth-alert-inline--success { background: #f0fdf4; border-color: #bbf7d0; } .auth-alert-inline--success i { color: #22c55e; margin-right: 0.5rem; } .auth-alert-inline--success span { color: #15803d; font-weight: var(--auth-font-medium); } .dark .auth-alert-inline--success { background: rgb(22 101 52 / 0.2); border-color: #166534; } .dark .auth-alert-inline--success i { color: #4ade80; } .dark .auth-alert-inline--success span { color: #86efac; } .auth-alert-inline--error { background: #fef2f2; border-color: #fecaca; } .auth-alert-inline--error i { color: #ef4444; margin-right: 0.5rem; } .auth-alert-inline--error span { color: #b91c1c; font-weight: var(--auth-font-medium); } .dark .auth-alert-inline--error { background: rgb(127 29 29 / 0.2); border-color: #991b1b; } .dark .auth-alert-inline--error i { color: #f87171; } .dark .auth-alert-inline--error span { color: #fca5a5; } /* ---- Buttons (Mosaic) ---- */ .btn, .btn-lg, .btn-sm, .btn-xs { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; border: 1px solid transparent; font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); line-height: var(--auth-leading-tight); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .btn { padding: 0.5rem 0.75rem; } .btn-lg { padding: 0.75rem 1rem; } .btn-sm { padding: 0.25rem 0.5rem; } .btn-xs { padding: 0.125rem 0.5rem; } .form-input, .form-textarea { border: 1px solid var(--auth-border); border-radius: 0.5rem; background: var(--auth-bg-card); padding: 0.5rem 0.75rem; font-size: var(--auth-text-sm); line-height: var(--auth-text-xl); color: #1f2937; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: border-color 0.15s, box-shadow 0.15s; } .form-input:focus, .form-textarea:focus { outline: none; box-shadow: 0 0 0 2px #e5e7eb; } .dark .form-input, .dark .form-textarea { border-color: rgb(55 65 81 / 0.6); background: rgb(31 41 55 / 0.5); color: #f3f4f6; } .dark .form-input:focus, .dark .form-textarea:focus { box-shadow: 0 0 0 2px #4b5563; } .form-input::placeholder, .form-textarea::placeholder { color: #9ca3af; } .dark .form-input::placeholder, .dark .form-textarea::placeholder { color: #6b7280; } .form-checkbox { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid #d1d5db; background: var(--auth-bg-card); color: #8b5cf6; appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; } .form-checkbox:checked { border-color: transparent; background-color: #8b5cf6; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .form-checkbox:focus { outline: none; box-shadow: 0 0 0 2px #8b5cf6; } .dark .form-checkbox { border-color: #4b5563; background-color: rgb(31 41 55 / 0.5); } .dark .form-checkbox:checked { border-color: transparent; background-color: #8b5cf6; } /* ---- Consent checkboxes (registration) ---- */ .auth-consent-group { display: flex; flex-direction: column; gap: 0.75rem; } .auth-consent-label { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; font-size: var(--auth-text-sm); color: #374151; line-height: 1.4; } .dark .auth-consent-label { color: #d1d5db; } .auth-consent-label .form-checkbox { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; margin-top: 0.1rem; cursor: pointer; } .auth-consent-label span { flex: 1; user-select: none; } .auth-consent-link { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; font-weight: var(--auth-font-medium); transition: color 0.2s; } .auth-consent-link:hover { color: #1d4ed8; } .dark .auth-consent-link { color: #60a5fa; } .dark .auth-consent-link:hover { color: #93c5fd; } /* ---- Home page ---- */ .auth-theme-btn { position: fixed; top: 5rem; right: 1rem; z-index: 50; width: 3rem; height: 3rem; border-radius: 9999px; background: rgb(255 255 255 / 0.9); backdrop-filter: blur(4px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); border: 1px solid var(--auth-border); display: flex; align-items: center; justify-content: center; color: #374151; transition: all 0.3s; cursor: pointer; } .auth-theme-btn:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); transform: scale(1.1); } @media (min-width: 640px) { .auth-theme-btn { right: 2rem; } } .dark .auth-theme-btn { background: rgb(31 41 55 / 0.9); border-color: #374151; color: #e5e7eb; } .auth-theme-btn i { font-size: var(--auth-text-2xl); } .auth-hero { min-height: 100vh; position: relative; overflow: hidden; background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 50%, #f5f3ff 50%, #fce7f3 100%); transition: background 0.5s; min-width: 0; } .dark .auth-hero { background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%); } .auth-hero__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .auth-hero__blur { position: absolute; width: 20rem; height: 20rem; border-radius: 9999px; mix-blend-mode: multiply; filter: blur(24px); opacity: 0.3; animation: float 6s ease-in-out infinite; } .dark .auth-hero__blur { opacity: 0.2; } .auth-hero__blur--blue { top: -10rem; right: -10rem; background: #60a5fa; } .dark .auth-hero__blur--blue { background: #2563eb; } .auth-hero__blur--purple { bottom: -10rem; left: -10rem; background: #c084fc; animation-delay: 2s; } .dark .auth-hero__blur--purple { background: #9333ea; } .auth-hero__blur--pink { top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f472b6; opacity: 0.2; animation-delay: 4s; } .dark .auth-hero__blur--pink { background: #db2777; opacity: 0.1; } .auth-hero__content { position: relative; z-index: 10; padding: 4rem 0; } .auth-hero__inner { max-width: 80rem; width: 100%; margin: 0 auto; padding: 0 1rem; min-width: 0; } @media (min-width: 640px) { .auth-hero__inner { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .auth-hero__inner { padding: 0 2rem; } } .auth-hero__grid { display: grid; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .auth-hero__grid { grid-template-columns: 1fr 1fr; } } .auth-hero__section { display: flex; flex-direction: column; gap: 2rem; } .auth-hero__logo-row { display: flex; align-items: center; gap: 1rem; } .auth-hero__logo-box { position: relative; width: 5rem; height: 5rem; border-radius: 1rem; background: var(--auth-bg-card); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .auth-hero__logo-box:hover { box-shadow: 0 0 30px rgba(59, 130, 246, 0.5); } .dark .auth-hero__logo-box { background: var(--auth-bg-card); } .auth-hero__logo-box img { width: 3.5rem; height: 3.5rem; object-fit: contain; } .auth-hero__badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; background: linear-gradient(90deg, rgb(59 130 246 / 0.1), rgb(168 85 247 / 0.1)); border: 1px solid rgb(59 130 246 / 0.5); } .dark .auth-hero__badge { background: linear-gradient(90deg, rgb(59 130 246 / 0.2), rgb(168 85 247 / 0.2)); border-color: rgb(59 130 246 / 0.5); } .auth-hero__badge span { font-size: var(--auth-text-xs); font-weight: var(--auth-font-bold); letter-spacing: 0.1em; color: #2563eb; text-transform: uppercase; } .dark .auth-hero__badge span { color: #60a5fa; } .auth-hero__badge-desc { font-size: var(--auth-text-sm); color: #4b5563; margin-top: 0.25rem; } .dark .auth-hero__badge-desc { color: #9ca3af; } .auth-hero__title { font-size: var(--auth-text-4xl); font-weight: var(--auth-font-black); color: var(--auth-text); line-height: 1.2; } @media (min-width: 640px) { .auth-hero__title { font-size: var(--auth-text-5xl); } } @media (min-width: 1024px) { .auth-hero__title { font-size: var(--auth-text-6xl); } } .dark .auth-hero__title { color: #fff; } .auth-hero__title span { display: block; background: linear-gradient(90deg, #2563eb, #9333ea, #db2777); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradient-shift 8s ease infinite; } .dark .auth-hero__title span { background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-hero__lead { font-size: var(--auth-text-lg); color: #374151; max-width: 36rem; line-height: 1.6; } @media (min-width: 640px) { .auth-hero__lead { font-size: var(--auth-text-xl); } } .dark .auth-hero__lead { color: #d1d5db; } .auth-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .auth-hero__stat-card { padding: 1rem; text-align: center; border-radius: 0.75rem; transition: all 0.3s; } .auth-hero__stat-card .auth-hero__stat-num { font-size: var(--auth-text-2xl); font-weight: var(--auth-font-black); background: linear-gradient(90deg, #2563eb, #9333ea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dark .auth-hero__stat-card .auth-hero__stat-num { background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-hero__stat-card .auth-hero__stat-label { font-size: var(--auth-text-xs); color: #4b5563; font-weight: var(--auth-font-medium); margin-top: 0.25rem; } .dark .auth-hero__stat-card .auth-hero__stat-label { color: #9ca3af; } .auth-hero__stat-card:hover { transform: scale(1.05); } .auth-hero__stat-card .auth-hero__stat-num--purple { background: linear-gradient(90deg, #9333ea, #db2777); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-hero__stat-card .auth-hero__stat-num--pink { background: linear-gradient(90deg, #db2777, #dc2626); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dark .auth-hero__stat-card .auth-hero__stat-num--purple { background: linear-gradient(90deg, #a78bfa, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dark .auth-hero__stat-card .auth-hero__stat-num--pink { background: linear-gradient(90deg, #f472b6, #f87171); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-hero__feature-icon--blue { background: linear-gradient(135deg, #3b82f6, #2563eb); } .auth-hero__feature-icon--purple { background: linear-gradient(135deg, #9333ea, #7e22ce); } .auth-hero__feature-icon--emerald { background: linear-gradient(135deg, #10b981, #059669); } .auth-hero__feature-icon--pink { background: linear-gradient(135deg, #ec4899, #db2777); } .auth-hero__panel-icon--blue { background: linear-gradient(135deg, #3b82f6, #9333ea); } .auth-hero__panel-icon--purple { background: linear-gradient(135deg, #9333ea, #db2777); } .auth-hero__features { display: grid; gap: 1rem; } @media (min-width: 640px) { .auth-hero__features { grid-template-columns: repeat(2, 1fr); } } .auth-hero__feature { padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; border-radius: 0.75rem; transition: all 0.3s; } .auth-hero__feature:hover { transform: scale(1.02); } .auth-hero__feature-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); flex-shrink: 0; } .auth-hero__feature-title { font-weight: var(--auth-font-bold); color: var(--auth-text); font-size: var(--auth-text-sm); margin-bottom: 0.25rem; } .dark .auth-hero__feature-title { color: #fff; } .auth-hero__feature-desc { font-size: var(--auth-text-xs); color: #4b5563; line-height: var(--auth-leading-normal); } .dark .auth-hero__feature-desc { color: #9ca3af; } .auth-hero__cta { padding-top: 0.5rem; } .auth-hero__cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 0.75rem; color: #fff; font-weight: var(--auth-font-bold); font-size: var(--auth-text-base); background: linear-gradient(90deg, #2563eb, #9333ea, #db2777); border: none; cursor: pointer; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); transition: all 0.3s; position: relative; overflow: hidden; } .auth-hero__cta-btn:hover { background: linear-gradient(90deg, #1d4ed8, #7e22ce, #be185d); box-shadow: 0 0 50px rgb(59 130 246 / 0.5); transform: scale(1.02) translateY(-2px); } .auth-hero__cta-btn i { margin-right: 0.5rem; font-size: var(--auth-text-2xl); position: relative; z-index: 10; } .auth-hero__cta-btn span { position: relative; z-index: 10; } .auth-hero__panel { border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); padding: 2rem; margin-top: 1.5rem; transition: all 0.3s; } .auth-hero__panel:hover { transform: scale(1.02); } .auth-hero__panel-title-row { display: flex; align-items: center; margin-bottom: 1.5rem; } .auth-hero__panel-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); margin-right: 0.75rem; } .auth-hero__panel-title { font-size: var(--auth-text-2xl); font-weight: var(--auth-font-black); color: var(--auth-text); } .dark .auth-hero__panel-title { color: #fff; } .auth-hero__list { display: flex; flex-direction: column; gap: 1rem; font-size: var(--auth-text-sm); color: #374151; } .dark .auth-hero__list { color: #d1d5db; } .auth-hero__list li { display: flex; align-items: flex-start; } .auth-hero__list li span:first-child { margin-top: 0.25rem; margin-right: 0.75rem; font-size: var(--auth-text-xl); transition: transform 0.3s; } .auth-hero__list li:hover span:first-child { transform: scale(1.25); } .auth-hero__list-icon--blue { color: #3b82f6; } .auth-hero__list-icon--purple { color: #9333ea; } .auth-hero__list-icon--pink { color: #ec4899; } .auth-hero__list-icon--emerald { color: #10b981; } .auth-hero__list-text { font-weight: var(--auth-font-medium); } .auth-hero__dl-grid { display: grid; gap: 1rem; } @media (min-width: 640px) { .auth-hero__dl-grid { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } } .auth-hero__dl-item dt { font-weight: var(--auth-font-black); color: var(--auth-text); font-size: var(--auth-text-base); } .dark .auth-hero__dl-item dt { color: #fff; } .auth-hero__dl-item dd { color: #4b5563; font-size: var(--auth-text-sm); } .dark .auth-hero__dl-item dd { color: #9ca3af; } /* ---- Animations ---- */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .flip-img { animation: flip 3s infinite linear; transform-style: preserve-3d; } @keyframes flip { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-gradient { background-size: 200% 200%; animation: gradient-shift 8s ease infinite; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { opacity: 0; transform: translateY(30px); animation: fade-in-up 0.6s ease-out forwards; will-change: opacity, transform; } /* ---- Glass, glow ---- */ .glass-effect { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } .dark .glass-effect { background: rgba(31, 41, 55, 0.7); border: 1px solid rgba(75, 85, 99, 0.3); } .glow-effect { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(147, 51, 234, 0.2); } .hover-glow:hover { box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), 0 0 60px rgba(147, 51, 234, 0.3); transition: box-shadow 0.3s ease; } .auth-dashboard, .auth-admin { z-index: 100; position: relative; } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); } /* ---- Footer ---- */ .site-footer { background: var(--auth-bg-card); color: #fff; padding: 1.5rem 0; } .site-footer__inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; text-align: center; } .site-footer p { color: #d1d5db; } .site-footer .ri-heart-line { color: #ef4444; } /* ---- Admin table & edit modal ---- */ .auth-table-wrap { background: var(--auth-bg-card); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); overflow: hidden; max-width: 100%; overflow-x: auto; } .dark .auth-table-wrap { background: var(--auth-bg-card); } .auth-table-head { padding: 0 1.5rem; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--auth-border); display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 768px) { .auth-table-head { flex-direction: row; align-items: center; justify-content: space-between; } } .dark .auth-table-head { border-color: #374151; } .auth-table-head h3 { font-size: var(--auth-text-lg); font-weight: var(--auth-font-semibold); color: var(--auth-text); } .dark .auth-table-head h3 { color: #fff; } .auth-table-head h3 i { margin-right: 0.5rem; } .auth-table-head p { font-size: var(--auth-text-sm); color: #6b7280; } .dark .auth-table-head p { color: #9ca3af; } #admin-filters { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } @media (min-width: 640px) { #admin-filters { flex-direction: row; width: auto; } } #admin-filters .auth-filter-search-wrap { position: relative; flex: 1; display: flex; align-items: center; } #admin-filters .auth-filter-search-wrap i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; font-size: var(--auth-text-xl); line-height: 1; } .dark #admin-filters .auth-filter-search-wrap i { color: #6b7280; } #admin-filters .auth-filter-search-wrap .form-input { padding-left: 2.25rem; width: 100%; margin-bottom: 0; min-height: 2.5rem; box-sizing: border-box; } #admin-filters .form-input { padding-left: 2.25rem; width: 100%; } #admin-filters select.form-input { width: 100%; } @media (min-width: 640px) { #admin-filters select.form-input { width: 10rem; } } #admin-filters select.form-input:nth-of-type(2) { width: 11rem; } .auth-table-header-row { display: grid; grid-template-columns: 80px 1fr 1.5fr 120px 180px 120px; gap: 1rem; padding: 0.75rem 1.5rem; background: #f9fafb; border-bottom: 1px solid var(--auth-border); font-size: var(--auth-text-xs); font-weight: var(--auth-font-medium); color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; min-width: 640px; } .dark .auth-table-header-row { background: rgb(55 65 81 / 0.5); border-color: #4b5563; color: #9ca3af; } #users-table-body { background: var(--auth-bg-card); } .dark #users-table-body { background: var(--auth-bg-card); } #users-table-body > div { border-bottom: 1px solid var(--auth-border); } .dark #users-table-body > div { border-color: #374151; } .auth-table-row { display: grid; grid-template-columns: 80px 1fr 1.5fr 120px 180px 120px; gap: 1rem; padding: 1rem 1.5rem; align-items: center; transition: background 0.2s; min-width: 640px; } .auth-table-row:hover { background: #f9fafb; } .dark .auth-table-row:hover { background: rgb(55 65 81 / 0.5); } .auth-table-row__cell { font-size: var(--auth-text-sm); color: var(--auth-text); white-space: nowrap; } .dark .auth-table-row__cell { color: #fff; } .auth-table-row__user { display: flex; align-items: center; white-space: nowrap; } .auth-table-row__avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: #3b82f6; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem; } .auth-table-row__avatar i { color: #fff; font-size: var(--auth-text-sm); } .auth-table-row__username { font-weight: var(--auth-font-medium); } .auth-role-badge { padding: 0.25rem 0.5rem; font-size: var(--auth-text-xs); font-weight: var(--auth-font-semibold); border-radius: 9999px; } .auth-role-badge--admin { background: #fee2e2; color: #b91c1c; } .dark .auth-role-badge--admin { background: rgb(127 29 29 / 0.3); color: #fca5a5; } .auth-role-badge--user { background: #dcfce7; color: #15803d; } .dark .auth-role-badge--user { background: rgb(22 101 52 / 0.3); color: #86efac; } .auth-table-row__actions { display: flex; gap: 0.5rem; font-weight: var(--auth-font-medium); white-space: nowrap; } .auth-table-row__actions button { background: none; border: none; cursor: pointer; padding: 0.25rem; color: #2563eb; } .auth-table-row__actions button:hover { color: #1d4ed8; } .dark .auth-table-row__actions button { color: #60a5fa; } .dark .auth-table-row__actions button:hover { color: #93c5fd; } .auth-table-row__actions button[title*="Удалить"] { color: #dc2626; } .auth-table-row__actions button[title*="Удалить"]:hover { color: #b91c1c; } .dark .auth-table-row__actions button[title*="Удалить"] { color: #f87171; } .dark .auth-table-row__actions button[title*="Удалить"]:hover { color: #fca5a5; } #users-loading-indicator, #users-end-indicator { padding: 0.75rem; text-align: center; font-size: var(--auth-text-sm); color: #6b7280; } .dark #users-loading-indicator, .dark #users-end-indicator { color: #9ca3af; } #users-loading-indicator i, #users-end-indicator i { margin-right: 0.25rem; } .auth-edit-modal__content { position: relative; top: 5rem; margin: 0 auto 2rem; padding: 1.5rem; border: 1px solid #d1d5db; width: 24rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); border-radius: 0.5rem; background: var(--auth-bg-card); } .dark .auth-edit-modal__content { border-color: #4b5563; background: var(--auth-bg-card); } .auth-edit-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb; } .dark .auth-edit-modal__header { border-bottom-color: #374151; } .auth-edit-modal__title { font-size: var(--auth-text-lg); font-weight: var(--auth-font-semibold); color: var(--auth-text); display: flex; align-items: center; } .dark .auth-edit-modal__title { color: #fff; } .auth-edit-modal__title i { margin-right: 0.5rem; flex-shrink: 0; } .auth-edit-modal__close { color: #9ca3af; background: none; border: none; cursor: pointer; padding: 0.25rem; } .auth-edit-modal__close:hover { color: #374151; } .dark .auth-edit-modal__close:hover { color: #d1d5db; } .auth-edit-modal__content .auth-form-group { margin-bottom: 1.25rem; } .auth-edit-modal__content .auth-form-group:last-of-type { margin-bottom: 0; } .auth-edit-modal__content .auth-form-label { margin-bottom: 0.375rem; display: flex; align-items: center; } .auth-edit-modal__content .auth-form-label i { margin-right: 0.375rem; vertical-align: middle; } .auth-edit-modal__content .form-input { width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; box-sizing: border-box; } .auth-edit-modal__actions { display: flex; gap: 0.75rem; padding-top: 1.25rem; margin-top: 1rem; border-top: 1px solid #e5e7eb; } .dark .auth-edit-modal__actions { border-top-color: #374151; } .auth-edit-modal__btn-save { flex: 1; background: #3b82f6; color: #fff; padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; font-weight: var(--auth-font-semibold); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .auth-edit-modal__btn-save:hover { background: #2563eb; } .auth-edit-modal__btn-save:disabled { opacity: 0.5; cursor: not-allowed; } .auth-edit-modal__btn-cancel { padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #d1d5db; background: var(--auth-bg-card); color: #374151; cursor: pointer; } .dark .auth-edit-modal__btn-cancel { border-color: #4b5563; background: #374151; color: #d1d5db; } .auth-edit-modal__content .auth-alert--warning { margin-bottom: 1rem; } /* ---- View user modal ---- */ .auth-view-modal__content { width: 28rem; } .auth-view-loading { text-align: center; padding: 2rem 0; color: #6b7280; font-size: var(--auth-text-sm); } .dark .auth-view-loading { color: #9ca3af; } .auth-view-loading i { margin-right: 0.375rem; } .auth-view-section { margin-bottom: 1.25rem; } .auth-view-section__title { font-size: var(--auth-text-sm); font-weight: var(--auth-font-semibold); color: var(--auth-text); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.375rem; } .dark .auth-view-section__title { color: #f3f4f6; } .auth-view-field { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; } .dark .auth-view-field { border-bottom-color: #374151; } .auth-view-field__label { font-size: var(--auth-text-sm); color: #6b7280; } .dark .auth-view-field__label { color: #9ca3af; } .auth-view-field__value { font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); color: var(--auth-text); } .dark .auth-view-field__value { color: #f3f4f6; } .auth-view-empty { font-size: var(--auth-text-sm); color: #9ca3af; text-align: center; padding: 0.75rem 0; } .auth-consent-info { display: flex; flex-direction: column; gap: 0.625rem; } .auth-consent-info__row { background: #f9fafb; border-radius: 0.5rem; padding: 0.625rem 0.75rem; } .dark .auth-consent-info__row { background: rgb(31 41 55 / 0.5); } .auth-consent-info__status { font-size: var(--auth-text-sm); font-weight: var(--auth-font-semibold); display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.125rem; } .auth-consent-info__accepted { color: #16a34a; } .dark .auth-consent-info__accepted { color: #4ade80; } .auth-consent-info__declined { color: #dc2626; } .dark .auth-consent-info__declined { color: #f87171; } .auth-consent-info__label { font-size: var(--auth-text-sm); color: var(--auth-text); } .dark .auth-consent-info__label { color: #e5e7eb; } .auth-consent-info__meta { font-size: var(--auth-text-xs); color: #9ca3af; margin-top: 0.125rem; } .dark .auth-consent-info__meta { color: #6b7280; } .auth-info-block { margin-top: 2rem; } .auth-info-block__title { font-size: var(--auth-text-lg); margin-bottom: 1rem; } .auth-info-block__grid { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .auth-info-block__grid { grid-template-columns: repeat(2, 1fr); } } .auth-info-block__heading { font-weight: var(--auth-font-medium); color: var(--auth-text); margin-bottom: 0.25rem; } .dark .auth-info-block__heading { color: #fff; } .auth-info-block__text { font-size: var(--auth-text-sm); color: #4b5563; } .dark .auth-info-block__text { color: #d1d5db; } .auth-info-block__text div { margin-bottom: 0.25rem; } /* ---- Dashboard hero (приветственный блок) ---- */ .auth-dash-hero { background: linear-gradient(90deg, #2563eb 0%, #9333ea 50%, #db2777 100%); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); padding: 2rem; margin-bottom: 2rem; color: #fff; position: relative; overflow: hidden; } .auth-dash-hero__overlay { position: absolute; inset: 0; background: rgb(0 0 0 / 0.1); pointer-events: none; } .auth-dash-hero__inner { position: relative; z-index: 10; } .auth-dash-hero__row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; } @media (min-width: 768px) { .auth-dash-hero__row { flex-direction: row; gap: 2rem; } } .auth-dash-hero__left { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0; min-width: 0; flex: 1; } @media (min-width: 768px) { .auth-dash-hero__left { gap: 1.5rem; } } @media (max-width: 767px) { .auth-dash-hero__left { margin-bottom: 0.5rem; } } .auth-dash-hero__left > div { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; } @media (min-width: 768px) { .auth-dash-hero__left > div { gap: 0.25rem; } } /* Hero: заголовок и мета ближе друг к другу, как в оригинале */ .auth-dash-hero__title { font-size: var(--auth-text-3xl); font-weight: var(--auth-font-bold); margin: 0 0 0.25rem; color: #fff; overflow-wrap: break-word; word-break: break-word; line-height: 1.2; } @media (min-width: 768px) { .auth-dash-hero__title { font-size: var(--auth-text-4xl); } } .auth-dash-hero__meta { font-size: var(--auth-text-lg); color: rgb(191 219 254); display: flex; align-items: center; gap: 0.5rem; margin: 0; line-height: 1.75; } .auth-dash-hero__meta i { font-size: var(--auth-text-lg); } @media (min-width: 768px) { .auth-dash-hero__meta i { font-size: var(--auth-text-xl); } } .auth-dash-hero__role { background: rgb(255 255 255 / 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 0.75rem; padding: 1rem 1.5rem; border: 1px solid rgb(255 255 255 / 0.3); display: flex; flex-direction: column; gap: 0.25rem; } .auth-dash-hero__role-label { font-size: var(--auth-text-sm); color: rgb(191 219 254); margin: 0; } .auth-dash-hero__role-value { font-size: var(--auth-text-xl); font-weight: var(--auth-font-bold); display: flex; align-items: center; gap: 0.5rem; color: #fff; margin: 0; } @media (min-width: 768px) { .auth-dash-hero__role-value { font-size: var(--auth-text-2xl); } } .auth-dash-hero__role-value i { font-size: var(--auth-text-xl); } @media (min-width: 768px) { .auth-dash-hero__role-value i { font-size: var(--auth-text-2xl); } } /* ---- Быстрые действия (типизированные карточки-кнопки) ---- */ .auth-quick-actions { margin-bottom: 2rem; } /* Быстрые действия: как в Tailwind 4 — text-xl (1.25rem), mb-4; кнопки text-sm / text-xs, иконка text-2xl (1.5rem) */ .auth-quick-actions__title { font-size: var(--auth-text-xl); font-weight: var(--auth-font-bold); color: var(--auth-text); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .auth-quick-actions__title i { color: var(--auth-accent-purple); } .dark .auth-quick-actions__title i { color: #a78bfa; } .auth-quick-actions__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .auth-quick-actions__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .auth-quick-action { display: block; width: 100%; padding: 1.5rem; background: var(--auth-bg-card); border-radius: var(--auth-radius-lg); box-shadow: var(--auth-shadow); border: 2px solid transparent; text-align: center; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s, border-color 0.2s; text-decoration: none; color: inherit; font-size: var(--auth-text-sm); /* Защита от внешних reset'ов (tailwind-compat и т.п.) для button-элементов */ -webkit-appearance: none; appearance: none; background-image: none; } .auth-quick-action:hover { transform: scale(1.02); box-shadow: var(--auth-shadow-lg); } .auth-quick-action--blue:hover { border-color: #3b82f6; } .dark .auth-quick-action--blue:hover { border-color: #60a5fa; } .auth-quick-action--green:hover { border-color: #22c55e; } .dark .auth-quick-action--green:hover { border-color: #4ade80; } .auth-quick-action--purple:hover { border-color: #9333ea; } .dark .auth-quick-action--purple:hover { border-color: #a78bfa; } .auth-quick-action--indigo:hover { border-color: #6366f1; } .dark .auth-quick-action--indigo:hover { border-color: #818cf8; } .auth-quick-action__icon { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: var(--auth-radius); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.3s; } .auth-quick-action:hover .auth-quick-action__icon { transform: scale(1.1); } .auth-quick-action--blue .auth-quick-action__icon { background: linear-gradient(135deg, #3b82f6, #2563eb); } .auth-quick-action--green .auth-quick-action__icon { background: linear-gradient(135deg, #22c55e, #16a34a); } .auth-quick-action--purple .auth-quick-action__icon { background: linear-gradient(135deg, #9333ea, #7e22ce); } .auth-quick-action--indigo .auth-quick-action__icon { background: linear-gradient(135deg, #6366f1, #4f46e5); } .auth-quick-action__icon i { font-size: var(--auth-text-2xl); } .auth-quick-action__label { font-size: var(--auth-text-sm); font-weight: var(--auth-font-semibold); color: var(--auth-text); } .auth-quick-action__sublabel { font-size: var(--auth-text-xs); color: var(--auth-text-muted); margin-top: 0.25rem; } /* ---- User dashboard content ---- */ .auth-dash-grid { display: grid; gap: 1.5rem; margin-bottom: 2rem; } @media (min-width: 1024px) { .auth-dash-grid { grid-template-columns: 2fr 1fr; } } .auth-dash-grid__main { display: flex; flex-direction: column; gap: 1.5rem; } .auth-dash-card { background: var(--auth-bg-card); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); padding: 1.5rem; transition: all 0.3s; } .auth-dash-card:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); } .dark .auth-dash-card { background: var(--auth-bg-card); } .auth-dash-card__title { font-size: var(--auth-text-xl); font-weight: var(--auth-font-bold); color: var(--auth-text); margin-bottom: 1.5rem; display: flex; align-items: center; } .dark .auth-dash-card__title { color: #fff; } .auth-dash-card__title i { color: #2563eb; margin-right: 0.75rem; font-size: var(--auth-text-2xl); } .dark .auth-dash-card__title i { color: #60a5fa; } .auth-dash-card__body { display: flex; flex-direction: column; gap: 1rem; } .auth-dash-card__row { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: #f9fafb; border-radius: 0.5rem; transition: background 0.2s; } .auth-dash-card__row:hover { background: #f3f4f6; } .dark .auth-dash-card__row { background: rgb(55 65 81 / 0.5); } .dark .auth-dash-card__row:hover { background: #374151; } .auth-dash-card__row-label { display: flex; align-items: center; color: #4b5563; } .auth-dash-card__row-label i { color: #2563eb; margin-right: 0.75rem; } .dark .auth-dash-card__row-label { color: #d1d5db; } .dark .auth-dash-card__row-label i { color: #60a5fa; } .auth-dash-card__row-value { font-weight: var(--auth-font-semibold); color: var(--auth-text); } .dark .auth-dash-card__row-value { color: #fff; } .auth-dash-stats { background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); padding: 1.5rem; color: #fff; } .auth-dash-stats__title { font-size: var(--auth-text-lg); font-weight: var(--auth-font-bold); margin-bottom: 1rem; display: flex; align-items: center; } .auth-dash-stats__title i { margin-right: 0.5rem; font-size: var(--auth-text-xl); } .auth-dash-stats__body { display: flex; flex-direction: column; gap: 0.75rem; } .auth-dash-stats__item { background: rgb(255 255 255 / 0.2); backdrop-filter: blur(8px); border-radius: 0.5rem; padding: 0.75rem; border: 1px solid rgb(255 255 255 / 0.3); } .auth-dash-stats__item-label { font-size: var(--auth-text-xs); color: rgb(243 232 255); margin-bottom: 0.25rem; } .auth-dash-stats__item-value { font-size: var(--auth-text-2xl); font-weight: var(--auth-font-bold); } .auth-dash-grid__side { display: flex; flex-direction: column; gap: 1.5rem; } .auth-dash-metrics { display: grid; gap: 1.5rem; margin-bottom: 2rem; } @media (min-width: 768px) { .auth-dash-metrics { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .auth-dash-metrics { grid-template-columns: repeat(4, 1fr); } } .auth-dash-metric { background: var(--auth-bg-card); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); padding: 1.5rem; transition: all 0.3s; border-left: 4px solid #3b82f6; } .dark .auth-dash-metric { background: var(--auth-bg-card); } .auth-dash-metric--blue { border-left-color: #3b82f6; } .auth-dash-metric--green { border-left-color: #22c55e; } .auth-dash-metric--purple { border-left-color: #a855f7; } .auth-dash-metric--emerald { border-left-color: #10b981; } .auth-dash-metric__inner { display: flex; align-items: center; justify-content: space-between; } .auth-dash-metric__icon { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; } .auth-dash-metric__icon--blue { background: #dbeafe; color: #2563eb; } .dark .auth-dash-metric__icon--blue { background: rgb(59 130 246 / 0.2); color: #60a5fa; } .auth-dash-metric__icon--green { background: #dcfce7; color: #16a34a; } .dark .auth-dash-metric__icon--green { background: rgb(34 197 94 / 0.2); color: #4ade80; } .auth-dash-metric__icon--purple { background: #f3e8ff; color: #9333ea; } .dark .auth-dash-metric__icon--purple { background: rgb(168 85 247 / 0.2); color: #a78bfa; } .auth-dash-metric__icon--emerald { background: #d1fae5; color: #059669; } .dark .auth-dash-metric__icon--emerald { background: rgb(16 185 129 / 0.2); color: #34d399; } .auth-dash-metric__value { font-size: var(--auth-text-2xl); font-weight: var(--auth-font-bold); color: var(--auth-text); text-align: right; } .dark .auth-dash-metric__value { color: #fff; } .auth-dash-metric__label { font-size: var(--auth-text-xs); color: #6b7280; } .dark .auth-dash-metric__label { color: #9ca3af; } /* Безопасность: те же отступы, что у auth-dash-card__body (gap 1rem между row) */ .auth-dash-security { background: var(--auth-bg-card); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); padding: var(--auth-space-6); display: flex; flex-direction: column; gap: var(--auth-space-4); } .dark .auth-dash-security { background: var(--auth-bg-card); } .auth-dash-security__title { font-size: var(--auth-text-xl); font-weight: var(--auth-font-bold); color: var(--auth-text); margin: 0 0 0 0; display: flex; align-items: center; } .auth-dash-security__title i { color: #16a34a; margin-right: var(--auth-space-3); font-size: var(--auth-text-2xl); } .dark .auth-dash-security__title { color: #fff; } .dark .auth-dash-security__title i { color: #4ade80; } .auth-dash-security__row { display: flex; align-items: center; justify-content: space-between; padding: var(--auth-space-3) var(--auth-space-4); background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--auth-radius); margin: 0; } .dark .auth-dash-security__row { background: rgb(22 101 52 / 0.2); border-color: #166534; } .auth-dash-security__row span:first-child { color: #374151; } .dark .auth-dash-security__row span:first-child { color: #d1d5db; } .auth-dash-security__row span:first-child i { margin-right: var(--auth-space-2); color: #16a34a; } .dark .auth-dash-security__row span:first-child i { color: #4ade80; } .auth-dash-security__row span:last-child { color: #16a34a; font-weight: var(--auth-font-semibold); } .dark .auth-dash-security__row span:last-child { color: #4ade80; } .auth-dash-actions { display: flex; flex-direction: column; gap: 0.75rem; } .auth-dash-actions .auth-btn-full { margin-bottom: 0; } .auth-dash-actions .auth-btn-secondary { width: 100%; justify-content: center; } .auth-dash-panel { background: var(--auth-bg-card); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); padding: 1.5rem; } .dark .auth-dash-panel { background: var(--auth-bg-card); } .auth-dash-panel--border { border: 2px solid #fecaca; } .dark .auth-dash-panel--border { border-color: #991b1b; } .auth-dash-panel__title { font-size: var(--auth-text-lg); font-weight: var(--auth-font-bold); color: var(--auth-text); margin-bottom: 1rem; display: flex; align-items: center; } .auth-dash-panel__title i { margin-right: 0.5rem; font-size: var(--auth-text-xl); } .dark .auth-dash-panel__title { color: #fff; } .auth-dash-panel__title--red i { color: #dc2626; } .dark .auth-dash-panel__title--red i { color: #f87171; } .auth-dash-panel__title--indigo i { color: #4f46e5; } .dark .auth-dash-panel__title--indigo i { color: #818cf8; } /* Кнопки в панелях: как в Tailwind 4 — градиент, shadow-md, hover:scale-105, py-3 px-4, rounded-lg */ .auth-dash-panel-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.75rem 1rem; min-height: 3rem; border-radius: 0.5rem; font-weight: var(--auth-font-semibold); border: none; cursor: pointer; transition: all 0.3s; text-decoration: none; color: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .auth-dash-panel-btn:hover { transform: scale(1.05); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .auth-dash-panel-btn i { margin-right: 0.5rem; } .auth-dash-panel-btn--green-teal { background: linear-gradient(90deg, #22c55e 0%, #0d9488 100%); } .auth-dash-panel-btn--green-teal:hover { background: linear-gradient(90deg, #16a34a 0%, #0f766e 100%); } .auth-dash-panel-btn--orange { background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); } .auth-dash-panel-btn--orange:hover { background: linear-gradient(90deg, #ea580c 0%, #c2410c 100%); } .auth-dash-panel-btn--red { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); } .auth-dash-panel-btn--red:hover { background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%); } .auth-dash-panel-btn--yellow { background: linear-gradient(90deg, #eab308 0%, #ca8a04 100%); } .auth-dash-panel-btn--yellow:hover { background: linear-gradient(90deg, #ca8a04 0%, #a16207 100%); } /* ---- Tables (admin) ---- */ #users-table-container { overflow: auto; max-height: 600px; } #users-table-container::-webkit-scrollbar { width: 8px; height: 8px; } #users-table-container::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 4px; } #users-table-container::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; } #users-table-container::-webkit-scrollbar-thumb:hover { background: #6b7280; } .dark #users-table-container::-webkit-scrollbar-track { background: #374151; } .dark #users-table-container::-webkit-scrollbar-thumb { background: #4b5563; } .dark #users-table-container::-webkit-scrollbar-thumb:hover { background: #6b7280; } #users-table-container { scrollbar-width: thin; scrollbar-color: #9ca3af #f3f4f6; } .dark #users-table-container { scrollbar-color: #4b5563 #374151; } .air-modal-overlay::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ---- Avatar (dropzone highlight, viewer modal, delete btn) ---- */ /* Dashboard hero: аватар в приветственном блоке */ /* Аватар в hero: как в оригинале — круг, картинка заполняет через absolute + object-fit: cover */ #dashboard-hero-avatar { position: relative; width: 80px; height: 80px; min-width: 80px; min-height: 80px; border-radius: 50%; overflow: hidden; border: 4px solid rgb(255 255 255 / 0.3); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); cursor: pointer; transition: transform 0.2s; background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } #dashboard-hero-avatar:hover { transform: scale(1.02); } #dashboard-hero-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 50%; } #dashboard-hero-avatar img.hidden { display: none; } #dashboard-hero-avatar i { position: relative; z-index: 1; color: #fff; font-size: var(--auth-text-icon); } /* Секция загрузки аватара: превью не растягивать */ #avatar-preview-container { width: 5rem; height: 5rem; min-width: 5rem; min-height: 5rem; max-width: 6rem; max-height: 6rem; border-radius: 9999px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%); display: flex; align-items: center; justify-content: center; } .dark #avatar-preview-container { border-color: #374151; } @media (min-width: 768px) { #avatar-preview-container { width: 6rem; height: 6rem; min-width: 6rem; min-height: 6rem; } } #avatar-preview-container img { width: 100%; height: 100%; object-fit: cover; display: block; } #avatar-preview-container i { color: #fff; font-size: var(--auth-text-4xl); } #avatar-upload-section.auth-form-group { margin-bottom: 1.5rem; } #avatar-dropzone { display: block; border: 2px dashed #d1d5db; border-radius: 1rem; background: #f9fafb; padding: 1rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; outline: none; } #avatar-dropzone:hover { border-color: #93c5fd; background: #eff6ff; } #avatar-dropzone:focus { box-shadow: 0 0 0 2px rgb(59 130 246 / 0.3); } .dark #avatar-dropzone { border-color: #4b5563; background: rgb(31 41 55 / 0.4); } .dark #avatar-dropzone:hover { border-color: #60a5fa; background: rgb(59 130 246 / 0.1); } .auth-avatar-dropzone-inner { display: flex; align-items: center; gap: 1rem; } .auth-avatar-dropzone-preview { flex-shrink: 0; } .auth-avatar-dropzone-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .auth-avatar-dropzone-title { font-size: var(--auth-text-sm); font-weight: var(--auth-font-semibold); color: var(--auth-text); } .dark .auth-avatar-dropzone-title { color: #f3f4f6; } .auth-avatar-dropzone-hint { font-size: var(--auth-text-sm); color: #6b7280; } .dark .auth-avatar-dropzone-hint { color: #9ca3af; } .auth-avatar-dropzone-formats { font-size: var(--auth-text-xs); color: #6b7280; } .dark .auth-avatar-dropzone-formats { color: #9ca3af; } .auth-avatar-dropzone-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--auth-bg-card); border: 1px solid var(--auth-border); font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); color: #374151; } .dark .auth-avatar-dropzone-btn { background: #111827; border-color: #4b5563; color: #e5e7eb; } .auth-avatar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .avatar-dropzone--active { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 2px rgb(59 130 246 / 0.3); } .dark .avatar-dropzone--active { background: rgb(59 130 246 / 0.1); } @media (min-width: 768px) { #avatar-dropzone { padding: 1.25rem; } } .auth-avatar-viewer-wrap { max-width: 32rem; margin: 0 auto; padding: 0; background: transparent; box-shadow: none; } .auth-avatar-viewer { width: 100%; background: var(--auth-bg-card); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); overflow: hidden; border: 1px solid var(--auth-border); } .dark .auth-avatar-viewer { background: #111827; border-color: #374151; } .auth-avatar-viewer__header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--auth-border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .dark .auth-avatar-viewer__header { border-color: #374151; } .auth-avatar-viewer__title { font-size: var(--auth-text-sm); font-weight: var(--auth-font-semibold); color: var(--auth-text); } .dark .auth-avatar-viewer__title { color: #f3f4f6; } .auth-avatar-viewer__actions { display: flex; align-items: center; gap: 0.75rem; } .auth-link-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--auth-text-sm); font-weight: var(--auth-font-medium); color: #2563eb; background: none; border: none; cursor: pointer; padding: 0; } .auth-link-btn:hover { color: #1d4ed8; } .dark .auth-link-btn { color: #60a5fa; } .dark .auth-link-btn:hover { color: #93c5fd; } .auth-avatar-viewer__close { width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid var(--auth-border); background: rgb(255 255 255 / 0.9); color: #374151; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .auth-avatar-viewer__close:hover { background: var(--auth-bg-card); } .dark .auth-avatar-viewer__close { border-color: #4b5563; background: rgb(31 41 55 / 0.9); color: #e5e7eb; } .dark .auth-avatar-viewer__close:hover { background: #374151; } .auth-avatar-viewer__body { padding: 1.25rem; } .auth-avatar-viewer__body img { width: 100%; height: auto; border-radius: 0.75rem; background: #f3f4f6; } .dark .auth-avatar-viewer__body img { background: #374151; } .auth-avatar-actions .auth-btn-primary { width: auto; } .auth-avatar-delete-btn { padding: 0.5rem 1rem; font-size: var(--auth-text-sm); font-weight: var(--auth-font-semibold); line-height: var(--auth-text-xl); min-height: 2.25rem; border-radius: 0.5rem; border: none; background: var(--auth-btn-red); color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s; box-shadow: var(--auth-btn-shadow); } .auth-avatar-delete-btn:hover { background: var(--auth-btn-red-hover); transform: scale(1.05); box-shadow: var(--auth-btn-shadow-hover); } .auth-avatar-delete-btn i { margin-right: 0; } .auth-avatar-status { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: var(--auth-text-sm); } .auth-avatar-status.hidden { display: none !important; } .auth-avatar-status #avatar-status-icon { margin-right: 0; } .auth-avatar-status #avatar-status-text { color: #6b7280; } .dark .auth-avatar-status #avatar-status-text { color: #9ca3af; } .auth-avatar-status-icon { margin-right: 0.5rem; } .auth-avatar-status-icon--loading { color: #3b82f6; } .auth-avatar-status-icon--success { color: #22c55e; } .auth-avatar-status-icon--error { color: #ef4444; } /* ---- Dev-модалки: контент (Tailwind-классы → нативные стили) ---- */ /* Ширина контейнеров dev-модалок (вместо !w-[95%] lg:!w-[800px] в HTML) */ .box-modal.seed-users-modal { width: 95%; max-width: 95%; padding: 1.5rem; } @media (min-width: 1024px) { .box-modal.seed-users-modal { width: 800px; max-width: 800px; } } /* Инфоблок seed-users: фон/рамка + читаемое выделение (утилиты dark:bg-blue-900/20 в tailwind-compat нет) */ .seed-users-info-callout { background-color: #eff6ff; border: 1px solid #bfdbfe; } html.dark .seed-users-info-callout { background-color: rgba(30, 58, 138, 0.22); border-color: rgba(30, 64, 175, 0.45); } .seed-users-info-callout::selection, .seed-users-info-callout *::selection { background-color: #bfdbfe; color: #1e3a8a; } html.dark .seed-users-info-callout::selection, html.dark .seed-users-info-callout *::selection { background-color: #2563eb; color: #ffffff; } .seed-users-info-callout code { font-size: 0.75rem; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding: 0.125rem 0.375rem; border-radius: 0.25rem; border: 1px solid #bfdbfe; background-color: #dbeafe; color: #1e3a8a; } html.dark .seed-users-info-callout code { background-color: rgba(15, 23, 42, 0.95); border-color: #475569; color: #f1f5f9; } html.dark .seed-users-info-callout code::selection { background-color: #3b82f6; color: #ffffff; } .box-modal.check-session-modal, .box-modal.php-demo-modal { width: 95%; max-width: 95%; padding: 1.5rem; } @media (min-width: 1024px) { .box-modal.check-session-modal, .box-modal.php-demo-modal { width: 1280px; max-width: 1280px; } } /* Общие утилиты внутри .box-modal */ .box-modal .flex { display: flex; } .box-modal .inline-flex { display: inline-flex; } .box-modal .block { display: block; } .box-modal .grid { display: grid; } .box-modal .hidden { display: none !important; } .box-modal .items-center { align-items: center; } .box-modal .items-start { align-items: flex-start; } .box-modal .justify-between { justify-content: space-between; } .box-modal .justify-center { justify-content: center; } .box-modal .flex-1 { flex: 1; } .box-modal .space-x-3 > * + * { margin-left: 0.75rem; } .box-modal .space-x-2 > * + * { margin-left: 0.5rem; } .box-modal .space-y-6 > * + * { margin-top: 1.5rem; } .box-modal .space-y-4 > * + * { margin-top: 1rem; } .box-modal .space-y-2 > * + * { margin-top: 0.5rem; } .box-modal .space-y-1 > * + * { margin-top: 0.25rem; } .box-modal .mb-6 { margin-bottom: 1.5rem; } .box-modal .mb-4 { margin-bottom: 1rem; } .box-modal .mb-3 { margin-bottom: 0.75rem; } .box-modal .mb-2 { margin-bottom: 0.5rem; } .box-modal .mb-1 { margin-bottom: 0.25rem; } .box-modal .mt-1 { margin-top: 0.25rem; } .box-modal .mt-2 { margin-top: 0.5rem; } .box-modal .mt-0\.5 { margin-top: 0.125rem; } .box-modal .mr-2 { margin-right: 0.5rem; } .box-modal .mr-3 { margin-right: 0.75rem; } .box-modal .mx-auto { margin-left: auto; margin-right: auto; } .box-modal .pb-4 { padding-bottom: 1rem; } .box-modal .p-4 { padding: 1rem; } .box-modal .p-6 { padding: 1.5rem; } .box-modal .p-2 { padding: 0.5rem; } .box-modal .px-4 { padding-left: 1rem; padding-right: 1rem; } .box-modal .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .box-modal .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .box-modal .pt-4 { padding-top: 1rem; } .box-modal .border { border-width: 1px; } .box-modal .border-2 { border-width: 2px; } .box-modal .border-b { border-bottom-width: 1px; } .box-modal .border-t { border-top-width: 1px; } .box-modal .rounded { border-radius: 0.25rem; } .box-modal .rounded-lg { border-radius: 0.5rem; } .box-modal .rounded-full { border-radius: 9999px; } .box-modal .overflow-hidden { overflow: hidden; } .box-modal .overflow-x-auto { overflow-x: auto; } .box-modal .overflow-y-auto { overflow-y: auto; } .box-modal .text-center { text-align: center; } .box-modal .text-left { text-align: left; } .box-modal .text-xs { font-size: var(--auth-text-xs); } .box-modal .text-sm { font-size: var(--auth-text-sm); } .box-modal .text-lg { font-size: var(--auth-text-lg); } .box-modal .text-xl { font-size: var(--auth-text-xl); } .box-modal .text-2xl { font-size: var(--auth-text-2xl); } .box-modal .text-3xl { font-size: var(--auth-text-3xl); } .box-modal .font-semibold { font-weight: var(--auth-font-semibold); } .box-modal .font-bold { font-weight: var(--auth-font-bold); } .box-modal .cursor-pointer { cursor: pointer; } .box-modal .transition-all { transition: all 0.2s; } .box-modal .duration-300 { transition-duration: 0.3s; } .box-modal h2, .box-modal h3, .box-modal h4 { margin: 0; } .box-modal ul { margin: 0; padding-left: 1rem; } .box-modal pre { margin: 0; white-space: pre-wrap; word-break: break-word; } /* Цвета и фоны в .box-modal */ .box-modal .text-gray-900 { color: var(--auth-text); } .box-modal .text-gray-700 { color: #374151; } .box-modal .text-gray-600 { color: #4b5563; } .box-modal .text-gray-500 { color: #6b7280; } .box-modal .text-white { color: #fff; } .box-modal .text-blue-600 { color: #2563eb; } .box-modal .text-blue-800 { color: #1e40af; } .box-modal .text-blue-700 { color: #1d4ed8; } .box-modal .text-green-700 { color: #15803d; } .box-modal .text-green-600 { color: #16a34a; } .box-modal .text-red-600 { color: #dc2626; } .box-modal .text-yellow-500 { color: #eab308; } .box-modal .text-yellow-800 { color: #854d0e; } .box-modal .text-yellow-700 { color: #a16207; } .box-modal .text-purple-600 { color: #9333ea; } .box-modal .text-indigo-600 { color: #4f46e5; } .box-modal .bg-white { background: var(--auth-bg-card); } .box-modal .bg-gray-50 { background: #f9fafb; } .box-modal .bg-gray-200 { background: #e5e7eb; } .box-modal .bg-gray-500 { background: #6b7280; } .box-modal .bg-blue-50 { background: #eff6ff; } .box-modal .bg-blue-500 { background: #3b82f6; } .box-modal .bg-green-50 { background: #f0fdf4; } .box-modal .bg-green-500 { background: #22c55e; } .box-modal .bg-red-50 { background: #fef2f2; } .box-modal .bg-red-500 { background: #ef4444; } .box-modal .bg-red-100 { background: #fee2e2; } .box-modal .border-red-200 { border-color: #fecaca; } .box-modal .text-red-500 { color: #ef4444; } .box-modal .text-red-700 { color: #b91c1c; } .box-modal .bg-yellow-50 { background: #fefce8; } .box-modal .bg-linear-to-br { background: linear-gradient(135deg, var(--tw-from, #3b82f6), var(--tw-to, #2563eb)); } .box-modal .from-green-500 { --tw-from: #22c55e; } .box-modal .to-teal-600 { --tw-to: #0d9488; } .box-modal .from-red-500 { --tw-from: #ef4444; } .box-modal .to-red-600 { --tw-to: #dc2626; } .box-modal .from-blue-500 { --tw-from: #3b82f6; } .box-modal .to-purple-600 { --tw-to: #9333ea; } .box-modal .from-orange-500 { --tw-from: #f97316; } .box-modal .to-teal-600 { --tw-to: #0d9488; } .box-modal .to-red-600 { --tw-to: #dc2626; } .box-modal .border-gray-200 { border-color: var(--auth-border); } .box-modal .border-blue-200 { border-color: #bfdbfe; } .box-modal .border-blue-800 { border-color: #1e40af; } .box-modal .border-green-200 { border-color: #bbf7d0; } .box-modal .border-green-800 { border-color: #166534; } .box-modal .border-yellow-200 { border-color: #fef08a; } .box-modal .border-yellow-800 { border-color: #854d0e; } .box-modal .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .box-modal .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .box-modal .gap-3 { gap: 0.75rem; } /* Генерация пользователей: выбор количества в одну строку (4 колонки) */ .box-modal.seed-users-modal form .grid { grid-template-columns: repeat(4, 1fr); } .box-modal .gap-4 { gap: 1rem; } .box-modal .h-3 { height: 0.75rem; } .box-modal .w-12 { width: 3rem; min-width: 3rem; flex-shrink: 0; } .box-modal .h-12 { height: 3rem; min-height: 3rem; } .box-modal .w-16 { width: 4rem; } /* Круглая иконка-обёртка в строке: фиксированный размер, контент по центру */ .box-modal .rounded-full.flex { flex-shrink: 0; } .box-modal .rounded-full.flex i { line-height: 1; display: block; text-align: center; } .box-modal .w-full { width: 100%; } .box-modal .max-h-\[70vh\] { max-height: 70vh; } /* peer-checked для выбора количества (seed users) */ .box-modal .peer-checked\:border-green-500 ~ div { border-color: #22c55e; background: #f0fdf4; } .box-modal .peer-checked\:bg-green-50 ~ div { background: #f0fdf4; } .box-modal .hover\:border-green-300:hover { border-color: #86efac; } .box-modal label.seed-amount-option input:checked + div { border-color: #22c55e; background: #f0fdf4; } .dark .box-modal label.seed-amount-option input:checked + div { border-color: #4ade80; background: rgb(22 101 52 / 0.2); } /* Только обёртка карточки (прямой потомок), не внутренние div с текстом */ .box-modal label.seed-amount-option > div { border: 2px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; text-align: center; transition: border-color 0.2s, background 0.2s; } .dark .box-modal label.seed-amount-option > div { border-color: #4b5563; } .box-modal label.seed-amount-option:hover > div { border-color: #86efac; } .dark .box-modal label.seed-amount-option:hover > div { border-color: #16a34a; } /* Кнопки и прогресс в dev-модалках */ .box-modal #seed-progress-bar { background: linear-gradient(90deg, #22c55e, #0d9488); height: 0.75rem; border-radius: 9999px; transition: width 0.3s; } .box-modal .bg-linear-to-r.from-green-500.to-teal-600 { background: linear-gradient(90deg, #22c55e 0%, #0d9488 100%); } .box-modal button.bg-linear-to-r { border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .box-modal .clear_session_btn, .box-modal .refresh_session_btn { border: none; display: inline-flex; align-items: center; justify-content: center; } .box-modal .hover\:bg-red-600:hover { background: #dc2626; } .box-modal .hover\:bg-gray-600:hover { background: #4b5563; } .box-modal .hover\:from-green-600:hover { background: linear-gradient(90deg, #16a34a, #0f766e); } .box-modal .hover\:to-teal-700:hover { background: linear-gradient(90deg, #22c55e, #0f766e); } /* Dark theme для контента модалок */ .dark .box-modal .text-gray-900 { color: #fff; } .dark .box-modal .text-gray-700 { color: #e5e7eb; } .dark .box-modal .text-gray-600 { color: #d1d5db; } .dark .box-modal .text-gray-500 { color: #9ca3af; } .dark .box-modal .text-gray-400 { color: #9ca3af; } .dark .box-modal .text-gray-300 { color: #d1d5db; } .dark .box-modal .bg-white { background: var(--auth-bg-card); } .dark .box-modal .bg-gray-50 { background: #374151; } .dark .box-modal .bg-gray-800 { background: var(--auth-bg-card); } .dark .box-modal .bg-gray-700 { background: #4b5563; } .dark .box-modal .bg-blue-50 { background: rgb(30 64 175 / 0.2); } .dark .box-modal .bg-green-50 { background: rgb(22 101 52 / 0.2); } .dark .box-modal .bg-yellow-50 { background: rgb(113 63 18 / 0.2); } .dark .box-modal .bg-red-50 { background: rgb(127 29 29 / 0.15); } .dark .box-modal .bg-red-100 { background: rgb(127 29 29 / 0.3); } .dark .box-modal .border-red-200 { border-color: #991b1b; } .dark .box-modal .border-gray-200 { border-color: #4b5563; } .dark .box-modal .border-gray-700 { border-color: #4b5563; } .dark .box-modal .border-blue-200 { border-color: #1e3a8a; } .dark .box-modal .border-blue-800 { border-color: #1e3a8a; } .dark .box-modal .border-green-200 { border-color: #166534; } .dark .box-modal .border-green-800 { border-color: #166534; } .dark .box-modal .border-yellow-200 { border-color: #854d0e; } .dark .box-modal .border-yellow-800 { border-color: #854d0e; } .dark .box-modal .text-blue-600 { color: #60a5fa; } .dark .box-modal .text-blue-400 { color: #93c5fd; } .dark .box-modal .text-blue-800 { color: #93c5fd; } .dark .box-modal .text-blue-300 { color: #93c5fd; } .dark .box-modal .text-blue-700 { color: #93c5fd; } .dark .box-modal .text-green-700 { color: #4ade80; } .dark .box-modal .text-green-400 { color: #4ade80; } .dark .box-modal .text-green-300 { color: #86efac; } .dark .box-modal .text-red-500 { color: #f87171; } .dark .box-modal .text-red-600 { color: #f87171; } .dark .box-modal .text-red-700 { color: #fca5a5; } .dark .box-modal .text-red-400 { color: #f87171; } .dark .box-modal .text-yellow-500 { color: #eab308; } .dark .box-modal .text-yellow-800 { color: #fde047; } .dark .box-modal .text-yellow-700 { color: #fde047; } .dark .box-modal .text-yellow-300 { color: #fde047; } .dark .box-modal .text-purple-600 { color: #a78bfa; } .dark .box-modal .text-purple-400 { color: #a78bfa; } .dark .box-modal .text-indigo-600 { color: #818cf8; } .dark .box-modal .text-indigo-400 { color: #818cf8; } .dark .box-modal .bg-gray-500 { background: #4b5563; } .dark .box-modal .bg-gray-600 { background: #4b5563; } .dark .box-modal .hover\:bg-gray-500:hover { background: #6b7280; } /* ---- OAuth buttons ---- */ .auth-oauth-buttons { display: flex; justify-content: center; padding: 0.25rem 0; } .auth-google-btn-wrap { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 48px; } /* ---- Map placeholder ---- */ .map-placeholder-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #374151 100%); } .map-placeholder-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #9ca3af; font-size: var(--auth-text-sm); z-index: 1; } /* ---- DB Toggle Switch ---- */ .auth-db-switch { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .auth-db-switch__label { font-size: 0.9rem; color: #9ca3af; transition: color 0.2s; } .auth-db-switch__label--active { color: var(--auth-primary, #6366f1); font-weight: 700; } .auth-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer; } .auth-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .auth-toggle__slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 26px; transition: background 0.25s; box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.15); } .auth-toggle__slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.25s; box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); } .auth-toggle input:checked + .auth-toggle__slider { background: var(--auth-primary, #6366f1); } .auth-toggle input:checked + .auth-toggle__slider::before { transform: translateX(22px); } .dark .auth-toggle__slider { background: #4b5563; } .dark .auth-db-switch__label { color: #6b7280; } .dark .auth-db-switch__label--active { color: var(--auth-primary, #6366f1); }