RN API: elevation=flat|raised|overlay · padding=xxs..jumbo ─────────────────────────────────────────────────────────────── */ .ds-card { background: var(--ds-brand-white); border-radius: var(--ds-radius-lg); padding: var(--ds-space-md); box-shadow: var(--ds-shadow-flat); transition: box-shadow .15s ease, transform .12s ease; } .ds-card[data-elevation="raised"] { box-shadow: var(--ds-shadow-raised); } .ds-card[data-elevation="overlay"] { box-shadow: var(--ds-shadow-overlay); } .ds-card[data-padding="xxs"] { padding: var(--ds-space-xxs); } .ds-card[data-padding="xs"] { padding: var(--ds-space-xs); } .ds-card[data-padding="sm"] { padding: var(--ds-space-sm); } .ds-card[data-padding="md"] { padding: var(--ds-space-md); } .ds-card[data-padding="lg"] { padding: var(--ds-space-lg); } .ds-card[data-padding="xl"] { padding: var(--ds-space-xl); } .ds-card[data-radius="md"] { border-radius: var(--ds-radius-md); } .ds-card[data-radius="lg"] { border-radius: var(--ds-radius-lg); } .ds-card[data-radius="xl"] { border-radius: var(--ds-radius-xl); } .ds-card[data-radius="xxl"] { border-radius: var(--ds-radius-xxl); } a.ds-card, .ds-card[role="button"] { display: block; color: inherit; text-decoration: none; cursor: pointer; } a.ds-card:hover, .ds-card[role="button"]:hover { box-shadow: var(--ds-shadow-hover); transform: translateY(-1px); } /* ─────────────────────────── ds-tag ───────────────────────────── Новое RN API: variant=neutral|primary|success|warning|error · size=xs|sm|md ─────────────────────────────────────────────────────────────── */ .ds-tag { display: inline-flex; align-items: center; gap: var(--ds-space-xxs); border-radius: var(--ds-radius-pill); align-self: flex-start; white-space: nowrap; font-family: var(--ds-font-family); font-weight: 500; } .ds-tag[data-size="xs"], .ds-tag:not([data-size]) { height: 20px; padding: 0 var(--ds-space-xs); font-size: 12px; line-height: 16px; letter-spacing: 0; } .ds-tag[data-size="sm"] { height: 24px; padding: 0 var(--ds-space-sm); font-size: 13px; line-height: 16px; letter-spacing: -0.13px; } .ds-tag[data-size="md"] { height: 28px; padding: 0 var(--ds-space-sm); font-size: 15px; line-height: 20px; letter-spacing: -0.225px; } .ds-tag[data-variant="neutral"], .ds-tag:not([data-variant]) { background: var(--ds-fill-secondary); color: var(--ds-brand-black); } .ds-tag[data-variant="primary"] { background: var(--ds-purple-pure); color: var(--ds-brand-white); } .ds-tag[data-variant="success"] { background: var(--ds-green-light); color: var(--ds-brand-black); } .ds-tag[data-variant="warning"] { background: var(--ds-cat-hen-yellow); color: var(--ds-brand-black); } .ds-tag[data-variant="error"] { background: var(--ds-error-primary); color: var(--ds-brand-white); } /* ─────────────────────────── ds-avatar ──────────────────────────

─────────────────────────────────────────────────────────────── */ .ds-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--ds-purple-pure); color: var(--ds-brand-white); font-family: var(--ds-font-family); font-weight: 600; flex-shrink: 0; } .ds-avatar[data-size="xs"] { width: 24px; height: 24px; font-size: 12px; line-height: 16px; } .ds-avatar[data-size="sm"] { width: 32px; height: 32px; font-size: 12px; line-height: 16px; } .ds-avatar[data-size="md"], .ds-avatar:not([data-size]) { width: 40px; height: 40px; font-size: 17px; line-height: 22px; } .ds-avatar[data-size="lg"] { width: 56px; height: 56px; font-size: 17px; line-height: 22px; } .ds-avatar[data-size="xl"] { width: 80px; height: 80px; font-size: 22px; line-height: 28px; } .ds-avatar[data-shape="square"] { border-radius: var(--ds-radius-md); } .ds-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ─────────────────────────── ds-badge ─────────────────────────── 2 · ─────────────────────────────────────────────────────────────── */ .ds-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ds-radius-pill); background: var(--ds-error-primary); color: var(--ds-brand-white); font-family: var(--ds-font-family); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.11px; } .ds-badge[data-dot] { width: 8px; height: 8px; min-width: 0; padding: 0; } .ds-badge[data-variant="primary"] { background: var(--ds-purple-pure); } .ds-badge[data-variant="success"] { background: var(--ds-green-acid); } /* ─────────────────────────── ds-search ────────────────────────── ⌕ ─────────────────────────────────────────────────────────────── */ .ds-search { display: flex; align-items: center; gap: var(--ds-space-xs); height: 36px; padding: 0 var(--ds-space-sm); background: var(--ds-fill-secondary); border-radius: var(--ds-radius-sm); width: 100%; } .ds-search__glyph { color: var(--ds-labels-secondary); font-size: 17px; line-height: 1; flex-shrink: 0; } .ds-search__input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--ds-font-family); font-size: 17px; line-height: 22px; letter-spacing: -0.34px; color: var(--ds-brand-black); } .ds-search__input::placeholder { color: var(--ds-labels-secondary); } /* ─────────────────────────── ds-screen ────────────────────────── Контейнер экрана (порт RN ). На вебе — без SafeArea. ─────────────────────────────────────────────────────────────── */ .ds-screen { background: var(--ds-brand-white); padding: var(--ds-space-md); display: flex; flex-direction: column; gap: var(--ds-space-md); } /* ─────────────────────────── ds-tile ──────────────────────────── Композитный компонент для плитки tools-grid (Card + cover + content). Используется в .figma-skin override блоке ниже. ─────────────────────────────────────────────────────────────── */ .ds-tile { display: grid; grid-template-columns: 56px 1fr; gap: var(--ds-space-sm); align-items: start; background: var(--ds-brand-white); border-radius: var(--ds-radius-lg); padding: var(--ds-space-md); box-shadow: var(--ds-shadow-raised); transition: box-shadow .15s ease, transform .12s ease; cursor: pointer; text-decoration: none; color: inherit; } .ds-tile:hover { box-shadow: var(--ds-shadow-hover); transform: translateY(-1px); } .ds-tile__cover { width: 56px; height: 56px; border-radius: var(--ds-radius-md); display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; } .ds-tile__body { min-width: 0; } .ds-tile__title { font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; color: var(--ds-brand-black); margin-bottom: 4px; } .ds-tile__desc { font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; color: var(--ds-labels-secondary); } /* ═══════════════════════════════════════════════════════════════ OVERRIDE-СЛОЙ для существующей разметки hub.html Активируется только при . Не задевает другие страницы хаба. ═══════════════════════════════════════════════════════════════ */ body.figma-skin { background: var(--ds-brand-white); font-family: var(--ds-font-family); color: var(--ds-brand-black); } body.figma-skin .content { padding: var(--ds-space-xl); gap: var(--ds-space-xl); display: flex; flex-direction: column; } /* ─── Заголовок страницы ─── */ body.figma-skin .page-title { font-family: var(--ds-font-family); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: 0; color: var(--ds-brand-black); margin: 0; } /* ─── Hero-card — purple_pure градиент ─── */ body.figma-skin .hero-card { background: var(--ds-gradient-purple-linear); border: 0; border-radius: var(--ds-radius-xxl); padding: var(--ds-space-xxl); color: var(--ds-brand-white); box-shadow: var(--ds-shadow-raised); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--ds-space-xxl); align-items: center; position: relative; overflow: hidden; } /* спрячем декоративные псевдо-круги из components.css */ body.figma-skin .hero-card::before, body.figma-skin .hero-card::after { display: none; } @media (max-width: 920px) { body.figma-skin .hero-card { grid-template-columns: 1fr; padding: var(--ds-space-xl); } } body.figma-skin .hero-text { display: flex; flex-direction: column; gap: var(--ds-space-md); } body.figma-skin .hero-label { font-family: var(--ds-font-family); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; color: rgba(255, 255, 255, 0.7); text-transform: none; } body.figma-skin .hero-title { font-family: var(--ds-font-family); font-weight: 600; font-size: 40px; line-height: 44px; letter-spacing: -0.5px; color: var(--ds-brand-white); margin: 0; } body.figma-skin .hero-sub { font-family: var(--ds-font-family); font-weight: 400; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; color: rgba(255, 255, 255, 0.85); } body.figma-skin .hero-card .btn-primary { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--ds-space-lg); border-radius: var(--ds-radius-pill); background: var(--ds-brand-white); color: var(--ds-purple); font-family: var(--ds-font-family); font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; text-decoration: none; transition: transform .06s ease, background-color .12s ease; } body.figma-skin .hero-card .btn-primary:hover { background: rgba(255,255,255,0.92); } body.figma-skin .hero-card .btn-primary:active { transform: scale(.985); } body.figma-skin .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-md); } body.figma-skin .stat { background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(20px); border-radius: var(--ds-radius-lg); padding: var(--ds-space-md) var(--ds-space-lg); display: flex; flex-direction: column; gap: 4px; } body.figma-skin .stat-val { font-family: var(--ds-font-family); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: 0; color: var(--ds-brand-white); } body.figma-skin .stat-label { font-family: var(--ds-font-family); font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; color: rgba(255, 255, 255, 0.75); text-transform: none; } /* ─── section-label / section-count ─── */ body.figma-skin .section-label { display: flex; align-items: center; gap: var(--ds-space-sm); font-family: var(--ds-font-family); font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -0.4px; color: var(--ds-brand-black); text-transform: none; margin-top: var(--ds-space-md); margin-bottom: var(--ds-space-xs); } body.figma-skin .section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; background: var(--ds-fill-secondary); color: var(--ds-brand-black); border-radius: var(--ds-radius-pill); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; } /* ─── tools-grid + tool-card → стилистика ds-card raised ─── */ body.figma-skin .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ds-space-md); } body.figma-skin .tool-card { display: flex; flex-direction: column; gap: var(--ds-space-xs); background: var(--ds-brand-white); border-radius: var(--ds-radius-lg); padding: var(--ds-space-lg); box-shadow: var(--ds-shadow-raised); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: box-shadow .15s ease, transform .12s ease; min-height: 180px; } body.figma-skin .tool-card:hover { box-shadow: var(--ds-shadow-hover); transform: translateY(-1px); } body.figma-skin .tool-card .card-owner { position: absolute; top: var(--ds-space-md); right: var(--ds-space-md); font-family: var(--ds-font-family); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.11px; color: var(--ds-labels-secondary); text-transform: uppercase; } body.figma-skin .tool-card .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ds-radius-md); background: rgba(173, 131, 255, 0.14); font-size: 24px; line-height: 1; margin-bottom: var(--ds-space-xs); } body.figma-skin .tool-card .card-tag { display: inline-flex; align-self: flex-start; align-items: center; height: 20px; padding: 0 var(--ds-space-xs); background: var(--ds-fill-secondary); color: var(--ds-brand-black); border-radius: var(--ds-radius-pill); font-family: var(--ds-font-family); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; white-space: nowrap; } body.figma-skin .tool-card .card-title { font-family: var(--ds-font-family); font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; color: var(--ds-brand-black); } body.figma-skin .tool-card .card-desc { font-family: var(--ds-font-family); font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: -0.08px; color: var(--ds-labels-secondary); flex: 1; } body.figma-skin .tool-card .card-link { font-family: var(--ds-font-family); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; color: var(--ds-purple-pure); margin-top: var(--ds-space-xs); } body.figma-skin .tool-card .card-link::after { content: ' →'; font-weight: 500; } /* По владельцу — окрасить cover (опционально, не обязательно подключать) */ body.figma-skin .tool-card[data-owner="alex"] .card-icon { background: rgba(80, 101, 255, 0.14); } body.figma-skin .tool-card[data-owner="mark"] .card-icon { background: rgba(255, 102, 53, 0.14); } body.figma-skin .tool-card[data-owner="amir"] .card-icon { background: rgba(254, 232, 87, 0.30); } body.figma-skin .tool-card[data-owner="elena"] .card-icon { background: rgba(255, 60, 118, 0.14); } body.figma-skin .tool-card[data-owner="nick"] .card-icon { background: rgba(116, 210, 255, 0.18); } /* ─── Бейджи в topbar (если они есть) ─── */ body.figma-skin .badge-internal { background: var(--ds-green-light); color: var(--ds-brand-black); border-radius: var(--ds-radius-pill); padding: 4px 10px; font-family: var(--ds-font-family); font-weight: 500; font-size: 12px; letter-spacing: 0; } /* ═══════════════════════════════════════════════════════════════ SIDEBAR — light Figma skin Перекрывает тёмный sidebar из components.css по специфичности (body.figma-skin .sidebar > .sidebar). ═══════════════════════════════════════════════════════════════ */ body.figma-skin .sidebar { background: var(--ds-brand-white); border-right: 1px solid rgba(0, 0, 0, 0.06); font-family: var(--ds-font-family); } body.figma-skin .sidebar-logo { border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: var(--ds-space-md) var(--ds-space-lg); } body.figma-skin .sidebar-toggle { color: var(--ds-labels-secondary); border-radius: var(--ds-radius-sm); } body.figma-skin .sidebar-toggle:hover { color: var(--ds-brand-black); background: var(--ds-fill-secondary); } body.figma-skin .sidebar nav { padding: var(--ds-space-xs) 0; } body.figma-skin .nav-section { font-family: var(--ds-font-family); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.11px; text-transform: uppercase; color: var(--ds-labels-secondary); padding: var(--ds-space-md) var(--ds-space-lg) var(--ds-space-xxs); } body.figma-skin .nav-item { font-family: var(--ds-font-family); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.14px; color: #3a3a3c; padding: 9px var(--ds-space-lg); margin: 1px var(--ds-space-xs); border-radius: var(--ds-radius-sm); gap: 10px; transition: background .15s ease, color .15s ease; } body.figma-skin .nav-item:hover { background: var(--ds-fill-secondary); color: var(--ds-brand-black); } body.figma-skin .nav-item.active { background: rgba(173, 131, 255, 0.14); color: var(--ds-purple); font-weight: 600; } body.figma-skin .nav-item.active::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; background: var(--ds-purple-pure); border-radius: 0 2px 2px 0; } body.figma-skin .nav-icon { font-size: 16px; width: 20px; text-align: center; } /* ─── Footer ─── */ body.figma-skin .sidebar-footer { padding: var(--ds-space-md) var(--ds-space-lg); border-top: 1px solid rgba(0, 0, 0, 0.06); color: var(--ds-labels-secondary); } body.figma-skin .user-info { gap: 10px; margin-bottom: 10px; } body.figma-skin .user-avatar { background: var(--ds-gradient-purple-linear); color: var(--ds-brand-white); font-weight: 600; } body.figma-skin .user-name { font-family: var(--ds-font-family); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; color: var(--ds-brand-black); } body.figma-skin .user-role { font-family: var(--ds-font-family); font-weight: 400; font-size: 11px; line-height: 14px; letter-spacing: 0.11px; color: var(--ds-labels-secondary); } body.figma-skin .api-status { font-family: var(--ds-font-family); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.11px; color: #2a8a00; } body.figma-skin .api-status::before { background: var(--ds-green-acid); } body.figma-skin .btn-logout { font-family: var(--ds-font-family); font-weight: 500; font-size: 12px; background: var(--ds-fill-secondary); border: 0; color: var(--ds-labels-secondary); border-radius: var(--ds-radius-sm); padding: 9px; transition: background .15s ease, color .15s ease; } body.figma-skin .btn-logout:hover { background: rgba(255, 59, 48, 0.10); color: var(--ds-system-red); } /* ═══════════════════════════════════════════════════════════════ TOPBAR — light Figma skin (чтобы шапка не выпадала из контекста) ═══════════════════════════════════════════════════════════════ */ body.figma-skin .topbar { background: var(--ds-brand-white); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } body.figma-skin .topbar .search { background: var(--ds-fill-secondary); border: 0; color: var(--ds-brand-black); font-family: var(--ds-font-family); font-weight: 400; font-size: 14px; border-radius: var(--ds-radius-sm); } body.figma-skin .topbar .search::placeholder { color: var(--ds-labels-secondary); } body.figma-skin .topbar .hamburger span { background: var(--ds-brand-black); } /* ═══════════════════════════════════════════════════════════════ AUTH-страницы (login.html для player/partner/sponsor/organizer) Активируется через . ═══════════════════════════════════════════════════════════════ */ /* ─────────────────────────── ds-textfield ─────────────────────── Email подсказка data-state="error|success" на .ds-textfield для подсветки. ─────────────────────────────────────────────────────────────── */ .ds-textfield { display: flex; flex-direction: column; gap: var(--ds-space-xxs); width: 100%; } .ds-textfield__label { font-family: var(--ds-font-family); font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; color: var(--ds-labels-secondary); } .ds-textfield__row { display: flex; align-items: center; gap: var(--ds-space-xs); height: 56px; padding: 0 var(--ds-space-md); background: var(--ds-fill-secondary); border: 1px solid transparent; border-radius: var(--ds-radius-lg); transition: border-color .12s ease, background-color .12s ease; } .ds-textfield__row:focus-within { border-color: var(--ds-purple-pure); background: var(--ds-brand-white); box-shadow: 0 0 0 4px rgba(173, 131, 255, .12); } .ds-textfield[data-state="error"] .ds-textfield__row { border-color: var(--ds-error-primary); } .ds-textfield[data-state="success"] .ds-textfield__row { border-color: var(--ds-green-acid); } .ds-textfield__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--ds-font-family); font-weight: 400; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; color: var(--ds-brand-black); padding: 0; } .ds-textfield__input::placeholder { color: var(--ds-labels-secondary); } .ds-textfield__input:disabled { opacity: .5; cursor: not-allowed; } .ds-textfield__hint { font-family: var(--ds-font-family); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--ds-labels-secondary); } .ds-textfield[data-state="error"] .ds-textfield__hint { color: var(--ds-error-primary); } /* ─────────────────────────── ds-banner ────────────────────────── ─────────────────────────────────────────────────────────────── */ .ds-banner { display: flex; align-items: flex-start; gap: var(--ds-space-sm); padding: var(--ds-space-md); border-radius: var(--ds-radius-md); font-family: var(--ds-font-family); font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: -0.13px; } .ds-banner__glyph { flex-shrink: 0; font-size: 16px; line-height: 18px; } .ds-banner__body { flex: 1; min-width: 0; } .ds-banner__body b { font-weight: 600; } .ds-banner[data-variant="info"], .ds-banner:not([data-variant]) { background: rgba(0, 122, 255, 0.08); color: #0a4a8f; } .ds-banner[data-variant="info"] .ds-banner__glyph { color: var(--ds-system-blue); } .ds-banner[data-variant="success"] { background: rgba(132, 208, 0, 0.12); color: #2d5800; } .ds-banner[data-variant="success"] .ds-banner__glyph { color: var(--ds-green-acid); } .ds-banner[data-variant="warning"] { background: rgba(255, 204, 36, 0.16); color: #6a4a00; } .ds-banner[data-variant="error"] { background: rgba(255, 59, 48, 0.10); color: #8a1410; } .ds-banner[data-variant="error"] .ds-banner__glyph { color: var(--ds-error-primary); } /* ─────────────────────────── ds-divider ─────────────────────────

или

─────────────────────────────────────────────────────────────── */ .ds-divider { display: flex; align-items: center; gap: var(--ds-space-sm); color: var(--ds-labels-secondary); font-family: var(--ds-font-family); font-size: 13px; line-height: 16px; } .ds-divider::before, .ds-divider::after { content: ''; flex: 1; height: 1px; background: var(--ds-fill-secondary); } /* ─────────────────────────── ds-auth-page ─────────────────────── Центрируем карточку, фон — светлый с градиентным акцентом сверху. ─────────────────────────────────────────────────────────────── */ body.ds-auth-page { min-height: 100vh; margin: 0; background: var(--ds-light-grey-0); background-image: radial-gradient(ellipse at 50% -10%, rgba(173, 131, 255, 0.18) 0%, rgba(173, 131, 255, 0) 60%); font-family: var(--ds-font-family); color: var(--ds-brand-black); display: flex; align-items: center; justify-content: center; padding: var(--ds-space-lg); } .ds-auth-card { width: 100%; max-width: 440px; background: var(--ds-brand-white); border-radius: var(--ds-radius-xxl); padding: var(--ds-space-xxl); box-shadow: 0 20px 60px rgba(100, 42, 175, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: var(--ds-space-lg); } @media (max-width: 480px) { body.ds-auth-page { padding: 0; align-items: stretch; } .ds-auth-card { max-width: 100%; border-radius: 0; min-height: 100vh; padding: var(--ds-space-xl); justify-content: flex-start; padding-top: var(--ds-space-huge); } } .ds-auth-header { display: flex; flex-direction: column; gap: var(--ds-space-xs); align-items: flex-start; } .ds-auth-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-xxs); height: 24px; padding: 0 var(--ds-space-sm); background: rgba(173, 131, 255, 0.12); color: var(--ds-purple); border-radius: var(--ds-radius-pill); font-family: var(--ds-font-family); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .ds-auth-title { font-family: var(--ds-font-family); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: 0; color: var(--ds-brand-black); margin: 0; } .ds-auth-sub { font-family: var(--ds-font-family); font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: -0.3px; color: var(--ds-labels-secondary); margin: 0; } .ds-auth-form { display: flex; flex-direction: column; gap: var(--ds-space-md); } .ds-auth-actions { display: flex; flex-direction: column; gap: var(--ds-space-sm); } .ds-auth-footer { font-family: var(--ds-font-family); font-size: 12px; line-height: 16px; color: var(--ds-labels-secondary); text-align: center; } .ds-auth-footer a { color: var(--ds-purple); text-decoration: none; } .ds-auth-footer a:hover { text-decoration: underline; } /* Telegram-кнопка (брендовый синий) */ .ds-button[data-variant="telegram"] { background: #229ED9; color: var(--ds-brand-white); } .ds-button[data-variant="telegram"]:hover { background: #1d8cc0; } /* Spinner для loading-состояния */ .ds-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: ds-spin .8s linear infinite; } @keyframes ds-spin { to { transform: rotate(360deg); } }