/* ============================================================ штаб benuame — admin.css · Premium Dark (Apple-inspired) Drop-in замена public/css/admin.css. Палитра и настроение: style.css публичного сайта benuame. Контракт: все имена классов и CSS-переменных сохранены. Темы: тёмная по умолчанию; светлая — атрибут data-theme="light" на (или ): document.documentElement.setAttribute('data-theme','light'). ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: dark; /* Backgrounds */ --bg: #000000; --bg-raised: #0A0A0A; --bg-overlay: #111113; --bg-subtle: #1C1C1E; --surface: var(--bg-overlay); --surface-2: #17171A; --surface-hover: rgba(255,255,255,0.04); /* Text */ --text: #FFFFFF; --text-2: rgba(255,255,255,0.68); --text-3: rgba(255,255,255,0.44); --text-4: rgba(255,255,255,0.28); --text-primary: rgba(255,255,255,0.96); --text-secondary: rgba(255,255,255,0.66); --text-tertiary: rgba(255,255,255,0.42); --text-muted: rgba(255,255,255,0.42); /* Accent */ --accent: #3A82FF; --accent-hover: #5A9AFF; --accent-purple: #A78BFA; --accent-2: #A78BFA; --accent-glow: rgba(58,130,255,0.25); --accent-soft: rgba(58,130,255,0.13); --gradient-accent: linear-gradient(90deg, #3A82FF, #A78BFA); --gradient-btn: linear-gradient(180deg, #4D8FFF 0%, #2563EB 100%); /* Status */ --success: #34D399; --success-text: #4CE0A8; --danger: #FF453A; --danger-text: #FF847B; --warning: #FFB340; --warning-text: #FFC46E; --info: #64D2FF; --info-text: #76D6FF; /* Borders */ --border: rgba(255,255,255,0.10); --border-soft: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.20); /* Radius */ --radius-sm: 10px; --radius-md: 12px; --radius: 16px; --radius-lg: 24px; --radius-pill: 980px; --radius-full: 999px; /* Layout */ --sidebar-width: 248px; --sidebar-width-collapsed: 60px; --header-height: 64px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 24px 64px rgba(0,0,0,0.6); /* Font */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* Motion */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Alpine.js */ [x-cloak] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.25; } p { margin: 0 0 10px; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent-hover); } button { font-family: inherit; } strong, b { font-weight: 600; color: var(--text); } small { font-size: 12px; } ::selection { background: rgba(58,130,255,0.38); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: padding-box; border: 3px solid transparent; } ::-webkit-scrollbar-corner { background: transparent; } :is(a, .btn, .nav-item, .settings-nav-item, .tab, .page-btn, .modal-close, .sidebar-toggle, .mobile-menu-btn, .badge-clickable, .metric-card-link):focus-visible { outline: 2px solid rgba(90,154,255,0.65); outline-offset: 2px; } /* ============================================================ КАРКАС: сайдбар ============================================================ */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--bg-raised); border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; z-index: 300; transition: width 0.25s var(--ease-out), transform 0.3s var(--ease-out); } .sidebar-logo { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; flex-shrink: 0; } .sidebar-logo:hover { color: var(--text); } .sidebar-logo-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #3A82FF, #A78BFA); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 14px rgba(58,130,255,0.30); } .sidebar-logo-img { height: 26px; width: auto; filter: brightness(0) invert(1); } .sidebar-logo-sub { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-4); margin-top: 2px; } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; } .nav-section-label { padding: 16px 11px 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-4); white-space: nowrap; } /* Черта внутри группы: делит длинный список на смысловые блоки, не заводя ещё один заголовок. Через переменную — тогда светлая тема не требует пары. */ .nav-divider { height: 1px; margin: 7px 11px; background: var(--border); } /* Отметка давности снапшота в контент-разделе: данные приезжают вручную, и «когда» здесь такая же часть показаний, как сами цифры. */ .sync-stamp { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 11px; border: none; border-radius: var(--radius-sm); background: none; font-family: inherit; font-size: 13.5px; font-weight: 500; text-align: left; color: var(--text-2); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; } .nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(58,130,255,0.18); } .nav-item.active svg { color: #7EB1FF; } .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--radius-pill); background: rgba(58,130,255,0.18); color: #8AB6FF; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; flex-shrink: 0; } .nav-item.active .nav-badge { background: var(--accent); color: #fff; } .sidebar-footer { flex-shrink: 0; padding: 12px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 10px; } .sidebar-toggle { width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .sidebar-toggle svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); } .sidebar-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text); } /* Свёрнутый сайдбар (60px) */ .sidebar.collapsed { width: var(--sidebar-width-collapsed); } .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-badge, .sidebar.collapsed .nav-section-label, .sidebar.collapsed .sidebar-logo-sub, .sidebar.collapsed .sidebar-logo-img, .sidebar.collapsed .sidebar-logo > *:not(.sidebar-logo-mark) { display: none; } .sidebar.collapsed .sidebar-logo { justify-content: center; padding: 18px 8px 14px; } .sidebar.collapsed .sidebar-nav { padding: 8px 10px 16px; } .sidebar.collapsed .nav-item { justify-content: center; padding: 10px 8px; } .sidebar.collapsed .sidebar-footer { justify-content: center; padding: 12px 8px; } .sidebar.collapsed .sidebar-footer > *:not(.sidebar-toggle) { display: none; } .sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); } .sidebar-overlay { position: fixed; inset: 0; z-index: 290; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .sidebar-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; } /* ============================================================ КАРКАС: основная область ============================================================ */ .main-layout { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.25s var(--ease-out); } .sidebar.collapsed ~ .main-layout, .sidebar.collapsed + .main-layout { margin-left: var(--sidebar-width-collapsed); } .topbar { position: sticky; top: 0; z-index: 90; height: var(--header-height); display: flex; align-items: center; gap: 14px; padding: 0 24px; background: rgba(0,0,0,0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,0.08); } .topbar-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .mobile-menu-btn { display: none; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); color: var(--text); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease; } .mobile-menu-btn svg { width: 18px; height: 18px; } .mobile-menu-btn:hover { background: rgba(255,255,255,0.08); } .page-content { flex: 1; width: 100%; padding: 26px 28px 56px; } /* ============================================================ ДАШБОРД: метрики ============================================================ */ .metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 24px; } .metric-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: transform 0.2s var(--ease-out), border-color 0.2s ease, box-shadow 0.2s ease; } .metric-card-link { text-decoration: none; color: inherit; cursor: pointer; } a.metric-card:hover, .metric-card-link:hover, .metric-card[onclick]:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.45); color: inherit; } .metric-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; margin: 2px 0; } .metric-label { font-size: 12.5px; font-weight: 500; color: var(--text-3); } .metric-sub { font-size: 12px; color: var(--text-4); margin-top: 4px; } .metric-card.accent { border-color: rgba(58,130,255,0.28); } .metric-card.accent .metric-value { background: linear-gradient(135deg, #5A9AFF, #B79CFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .metric-card.success { border-color: rgba(52,211,153,0.24); } .metric-card.success .metric-value { color: var(--success-text); } .metric-card.warning { border-color: rgba(255,179,64,0.24); } .metric-card.warning .metric-value { color: var(--warning-text); } /* ============================================================ КОНТЕЙНЕРЫ ============================================================ */ .card, .detail-card, .section-block, .settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .card { margin-bottom: 20px; } .card-full { grid-column: 1 / -1; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); } .card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0; } .card-body { padding: 20px; } .section-block { padding: 20px 22px; margin-bottom: 20px; } .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0; } .detail-card { padding: 20px 22px; } .detail-field { margin-bottom: 14px; } .detail-field:last-child { margin-bottom: 0; } .detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-4); margin-bottom: 4px; } .info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); } .info-row:last-child { border-bottom: none; } .info-label { font-size: 12.5px; color: var(--text-3); flex-shrink: 0; } .info-value { font-size: 13px; font-weight: 500; color: var(--text-primary); text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .two-col-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .divider { height: 1px; border: none; background: var(--border-soft); margin: 16px 0; } /* ============================================================ ТАБЛИЦЫ И СПИСКИ ============================================================ */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-4); padding: 11px 14px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; font-variant-numeric: tabular-nums; } .data-table th:first-child, .data-table td:first-child { padding-left: 18px; } .data-table th:last-child, .data-table td:last-child { padding-right: 18px; } .data-table tbody tr { transition: background 0.12s ease; } .data-table tbody tr:hover { background: rgba(255,255,255,0.025); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table td strong, .data-table td b { color: var(--text); font-weight: 600; } .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; } .empty-row td { text-align: center; padding: 36px 16px; color: var(--text-3); } .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; } .empty-icon { font-size: 36px; line-height: 1; margin-bottom: 14px; filter: grayscale(1); opacity: 0.45; } .empty-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .empty-text { font-size: 13px; color: var(--text-3); max-width: 360px; } .pagination { display: flex; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; } .page-btn { min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .page-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); } .page-btn.active { background: var(--gradient-btn); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(58,130,255,0.28); } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .page-info { font-size: 12px; color: var(--text-3); margin-left: auto; font-variant-numeric: tabular-nums; } /* ============================================================ ФИЛЬТРЫ ============================================================ */ .filters-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .filter-select { width: auto; height: 34px; padding: 0 32px 0 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); background-color: rgba(255,255,255,0.05); color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .filter-select:hover { border-color: var(--border-hover); } .filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .filter-search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 320px; } .filter-search { width: 100%; height: 34px; padding: 0 12px 0 36px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); background-color: rgba(255,255,255,0.05); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 15px 15px; color: var(--text); font-family: inherit; font-size: 13px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .filter-search::placeholder { color: var(--text-4); } .filter-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 10px rgba(58,130,255,0.35); } /* ============================================================ ТАЙМЛАЙН ============================================================ */ .timeline-item { position: relative; display: flex; gap: 12px; padding: 2px 0 16px; } .timeline-item::before { content: ''; position: absolute; left: 4.5px; top: 19px; bottom: -2px; width: 1px; background: rgba(255,255,255,0.09); } .timeline-item:last-child { padding-bottom: 2px; } .timeline-item:last-child::before { display: none; } .timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #3A82FF, #A78BFA); box-shadow: 0 0 0 3px rgba(58,130,255,0.14); margin-top: 5px; flex-shrink: 0; } .timeline-body { flex: 1; min-width: 0; } .timeline-text { font-size: 13px; color: var(--text-2); line-height: 1.5; } .timeline-text strong, .timeline-text b { color: var(--text); font-weight: 600; } .timeline-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); margin-top: 3px; } .timeline-time { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* ============================================================ БЕЙДЖИ ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 4px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; white-space: nowrap; vertical-align: middle; } /* лид */ .badge-new { background: rgba(58,130,255,0.13); border-color: rgba(58,130,255,0.30); color: #85B4FF; } /* отклик */ .badge-sent { background: rgba(167,139,250,0.13); border-color: rgba(167,139,250,0.30); color: #C7B3FF; } /* в работе */ .badge-info { background: rgba(100,210,255,0.12); border-color: rgba(100,210,255,0.28); color: #76D6FF; } /* завершён */ .badge-won { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.28); color: #4CE0A8; } /* архив */ .badge-rejected { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.45); } .badge-success { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.28); color: #4CE0A8; } .badge-danger { background: rgba(255,69,58,0.13); border-color: rgba(255,69,58,0.30); color: #FF847B; } .badge-warning { background: rgba(255,179,64,0.13); border-color: rgba(255,179,64,0.30); color: #FFC46E; } .badge-secondary { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.60); } .badge-primary { background: linear-gradient(135deg, #3A82FF, #8B6CF8); border-color: transparent; color: #fff; box-shadow: 0 0 12px rgba(58,130,255,0.25); } .badge-clickable { cursor: pointer; transition: filter 0.15s ease, transform 0.12s ease; } .badge-clickable:hover { filter: brightness(1.25); } .badge-clickable:active { transform: scale(0.95); } /* ============================================================ КНОПКИ ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease; } .btn svg { width: 15px; height: 15px; flex-shrink: 0; } .btn:active { transform: scale(0.97); } .btn:disabled, .btn[disabled] { opacity: 0.42; cursor: not-allowed; pointer-events: none; box-shadow: none; } .btn-primary { background: var(--gradient-btn); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 0 18px rgba(58,130,255,0.28); } .btn-primary:hover { background: linear-gradient(180deg, #5A9AFF 0%, #3A82FF 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 0 26px rgba(58,130,255,0.42); color: #fff; } .btn-secondary { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: var(--text); } .btn-secondary:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); color: var(--text); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--text); } .btn-success { background: rgba(52,211,153,0.13); border-color: rgba(52,211,153,0.28); color: #4CE0A8; } .btn-success:hover { background: rgba(52,211,153,0.22); border-color: rgba(52,211,153,0.45); color: #6BF0BE; } .btn-danger { background: rgba(255,69,58,0.13); border-color: rgba(255,69,58,0.28); color: #FF847B; } .btn-danger:hover { background: rgba(255,69,58,0.22); border-color: rgba(255,69,58,0.45); color: #FF9C94; } .btn-warning { background: rgba(255,179,64,0.13); border-color: rgba(255,179,64,0.28); color: #FFC46E; } .btn-warning:hover { background: rgba(255,179,64,0.22); border-color: rgba(255,179,64,0.45); color: #FFD494; } .btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: var(--text-2); } .btn-icon:hover { background: rgba(255,255,255,0.10); color: var(--text); } .btn-icon svg { width: 16px; height: 16px; } .btn-sm { padding: 6px 13px; font-size: 12.5px; } .btn-xs { padding: 4px 10px; font-size: 11.5px; gap: 4px; } .btn-lg { padding: 12px 26px; font-size: 15px; } .btn-icon.btn-sm { width: 28px; height: 28px; padding: 0; } .btn-icon.btn-sm svg { width: 14px; height: 14px; } .btn-icon.btn-xs { width: 24px; height: 24px; padding: 0; } .btn-icon.btn-xs svg { width: 12px; height: 12px; } .btn-icon.btn-lg { width: 42px; height: 42px; padding: 0; } .w-full { width: 100%; } /* ============================================================ ФОРМЫ ============================================================ */ .form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .form-group:last-child { margin-bottom: 0; } label, .form-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .form-label { display: block; } .form-input, .form-select, .form-textarea, input:where(:not([type='checkbox'],[type='radio'],[type='range'],[type='file'],[type='color'],[type='button'],[type='submit'],[type='reset'])), select, textarea { width: 100%; padding: 9px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); background-color: rgba(255,255,255,0.05); color: var(--text); font-family: var(--font); font-size: 13.5px; line-height: 1.45; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .form-input::placeholder, .form-textarea::placeholder, input::placeholder, textarea::placeholder { color: var(--text-4); } .form-input:focus, .form-select:focus, .form-textarea:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background-color: rgba(255,255,255,0.06); } .form-input:disabled, .form-select:disabled, .form-textarea:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; background-color: rgba(255,255,255,0.03); } .form-select, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; padding-right: 38px; cursor: pointer; } select option, .form-select option { background: var(--bg-subtle); color: var(--text); } .form-textarea, textarea { min-height: 92px; resize: vertical; } input[type='checkbox'], input[type='radio'] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #16161A inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); border-radius: var(--radius-md); } .form-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.45; } .input-row { display: flex; gap: 12px; } .input-row > * { flex: 1; min-width: 0; } /* Переключатель (iOS-style) */ .toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .toggle-slider { position: relative; width: 40px; height: 24px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); transition: background 0.22s ease, box-shadow 0.22s ease; flex-shrink: 0; } .toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: transform 0.22s var(--ease-out); } .toggle input:checked + .toggle-slider { background: linear-gradient(135deg, #3A82FF, #7C6CF8); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 12px rgba(58,130,255,0.30); } .toggle input:checked + .toggle-slider::after { transform: translateX(16px); } .toggle input:focus-visible + .toggle-slider { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 3px var(--accent-glow); } .toggle input:disabled + .toggle-slider { opacity: 0.4; cursor: not-allowed; } .toggle-label { font-size: 13px; font-weight: 500; color: var(--text-2); } /* ============================================================ МОДАЛКИ ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.60); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); animation: overlay-in 0.18s ease both; overflow-y: auto; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 520px; max-height: calc(100dvh - 64px); display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06); animation: modal-in 0.25s var(--ease-out) both; margin: auto; } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; } .modal-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0; } .modal-close { width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: rgba(255,255,255,0.05); color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .modal-close svg { width: 15px; height: 15px; } .modal-close:hover { background: rgba(255,255,255,0.10); color: var(--text); } .modal-body { padding: 22px 24px; overflow-y: auto; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--border-soft); flex-shrink: 0; } /* ============================================================ НАСТРОЙКИ ============================================================ */ .settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; } .settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--header-height) + 24px); } .settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: none; border-radius: var(--radius-sm); background: none; font-family: inherit; font-size: 13.5px; font-weight: 500; text-align: left; color: var(--text-2); text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .settings-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; } .settings-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text); } .settings-nav-item.active { background: var(--accent-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(58,130,255,0.18); } .settings-body { min-width: 0; } .settings-section { padding: 22px 24px; margin-bottom: 20px; } .settings-section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0 0 16px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #3A82FF, #A78BFA); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* ============================================================ ТОСТЫ ============================================================ */ .toast-container { position: fixed; top: calc(var(--header-height) + 14px); right: 20px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; padding: 12px 16px 12px 14px; background: rgba(28,28,32,0.92); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05); font-size: 13px; color: var(--text); pointer-events: auto; animation: toast-in 0.28s var(--ease-out) both; } @keyframes toast-in { from { opacity: 0; transform: translateX(18px) scale(0.98); } to { opacity: 1; transform: translateX(0) scale(1); } } .toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); flex-shrink: 0; } .toast.success { border-color: rgba(52,211,153,0.28); } .toast.success::before { background: var(--success); box-shadow: 0 0 10px rgba(52,211,153,0.6); } .toast.error, .toast.danger { border-color: rgba(255,69,58,0.30); } .toast.error::before, .toast.danger::before { background: var(--danger); box-shadow: 0 0 10px rgba(255,69,58,0.6); } .toast.warning { border-color: rgba(255,179,64,0.30); } .toast.warning::before { background: var(--warning); box-shadow: 0 0 10px rgba(255,179,64,0.6); } .toast.info { border-color: rgba(100,210,255,0.28); } .toast.info::before { background: var(--info); box-shadow: 0 0 10px rgba(100,210,255,0.6); } /* ============================================================ ЛОГИН ============================================================ */ .login-page { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(720px 420px at 50% -8%, rgba(58,130,255,0.16), transparent 65%), radial-gradient(600px 420px at 88% 112%, rgba(167,139,250,0.10), transparent 65%), var(--bg); } .login-card { position: relative; width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 36px 34px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05); } .login-card::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, rgba(58,130,255,0.55), rgba(167,139,250,0.55), transparent); } .login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 6px; } .login-logo img { height: 44px; width: auto; filter: brightness(0) invert(1); } .login-sub { text-align: center; font-size: 13px; color: var(--text-3); margin-bottom: 28px; } /* ============================================================ ТАБЫ (segmented control) ============================================================ */ .tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-soft); border-radius: var(--radius-md); max-width: 100%; overflow-x: auto; } .tab { padding: 6px 16px; border: none; border-radius: 9px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .tab:hover { color: var(--text); } .tab.active { background: rgba(255,255,255,0.11); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); } .tab-content { margin-top: 16px; } /* ============================================================ УТИЛИТЫ ============================================================ */ .text-muted { color: var(--text-3); } .text-danger { color: var(--danger-text); } .text-success { color: var(--success-text); } .text-warning { color: var(--warning-text); } .text-xs { font-size: 11.5px; } .text-sm { font-size: 12.5px; } .text-mono { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0.01em; } .text-truncate-200 { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .ml-auto { margin-left: auto; } .date-relative { white-space: nowrap; font-variant-numeric: tabular-nums; } .loading-spinner, .spinner-sm { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; flex-shrink: 0; } .spinner-sm, .loading-spinner.spinner-sm { width: 13px; height: 13px; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ АДАПТИВ ============================================================ */ @media (max-width: 1100px) { .two-col-layout { grid-template-columns: 1fr; } } @media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); width: var(--sidebar-width); box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: 24px 0 60px rgba(0,0,0,0.55); } /* collapsed не действует на мобильном — панель всегда полная */ .sidebar.collapsed { width: var(--sidebar-width); } .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-section-label, .sidebar.collapsed .sidebar-logo-sub, .sidebar.collapsed .sidebar-logo-img, .sidebar.collapsed .sidebar-logo > *:not(.sidebar-logo-mark) { display: revert; } .sidebar.collapsed .nav-badge { display: inline-flex; } .sidebar.collapsed .sidebar-logo { justify-content: flex-start; padding: 18px 18px 14px; } .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 8px 11px; } .sidebar.collapsed .sidebar-footer { justify-content: flex-start; padding: 12px; } .sidebar.collapsed .sidebar-footer > *:not(.sidebar-toggle) { display: revert; } .sidebar.collapsed .sidebar-toggle svg { transform: none; } .sidebar .sidebar-toggle { display: none; } .main-layout, .sidebar.collapsed ~ .main-layout, .sidebar.collapsed + .main-layout { margin-left: 0; } .mobile-menu-btn { display: inline-flex; } .topbar { padding: 0 16px; } .page-content { padding: 18px 16px 48px; } .settings-layout { grid-template-columns: 1fr; gap: 16px; } .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; } .settings-nav-item { flex-shrink: 0; } } @media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .metrics-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .metric-value { font-size: 26px; } .filter-search-wrap { min-width: 100%; max-width: none; } .toast-container { left: 16px; right: 16px; } .toast { min-width: 0; max-width: none; width: 100%; } } /* Узкий экран: суммы в карточках дают до ~7 значащих цифр — уменьшаем шрифт, чтобы миллионные суммы «за всё время» влезали без обрезки многоточием */ @media (max-width: 440px) { .metric-value { font-size: 21px; } .cell-clamp { max-width: 160px; } } @media (max-width: 560px) { .modal-overlay { padding: 12px; } .modal { border-radius: 20px; max-height: calc(100dvh - 24px); } .modal-header { padding: 16px 18px; } .modal-body { padding: 18px; } .modal-footer { padding: 14px 18px 16px; flex-wrap: wrap; } .login-card { padding: 32px 24px 28px; } .page-info { margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ СВЕТЛАЯ ТЕМА Включение: data-theme="light" на или . Палитра — светлая тема публичного сайта benuame (#0071E3 → #7C3AED, белые поверхности, границы rgba(0,0,0,.08)). ============================================================ */ [data-theme="light"] { color-scheme: light; --bg: #F5F5F7; --bg-raised: #FFFFFF; --bg-overlay: #FFFFFF; --bg-subtle: #F1F3F5; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-hover: rgba(0,0,0,0.04); --text: #1D1D1F; --text-2: rgba(29,29,31,0.75); --text-3: rgba(29,29,31,0.52); --text-4: rgba(29,29,31,0.36); --text-primary: #1D1D1F; --text-secondary: rgba(29,29,31,0.72); --text-tertiary: rgba(29,29,31,0.50); --text-muted: rgba(29,29,31,0.50); --accent: #0071E3; --accent-hover: #0077ED; --accent-purple: #7C3AED; --accent-2: #7C3AED; --accent-glow: rgba(0,113,227,0.18); --accent-soft: rgba(0,113,227,0.09); --gradient-accent: linear-gradient(90deg, #0071E3, #7C3AED); --gradient-btn: linear-gradient(180deg, #1A8CFF 0%, #0055E6 100%); --success: #34C759; --success-text: #1B7F4C; --danger: #FF3B30; --danger-text: #D6281C; --warning: #FF9F0A; --warning-text: #B25A00; --info: #32ADE6; --info-text: #0071A4; --border: rgba(0,0,0,0.10); --border-soft: rgba(0,0,0,0.06); --border-hover: rgba(0,0,0,0.20); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 24px 64px rgba(0,0,0,0.14); } [data-theme="light"] ::selection { background: rgba(0,113,227,0.20); color: #1D1D1F; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border: 3px solid transparent; background-clip: padding-box; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.30); background-clip: padding-box; border: 3px solid transparent; } /* Каркас */ [data-theme="light"] .sidebar { background: #FFFFFF; border-right-color: rgba(0,0,0,0.08); } [data-theme="light"] .sidebar-logo-mark { box-shadow: 0 0 14px rgba(0,113,227,0.22); } [data-theme="light"] .sidebar-logo-img { filter: none; } [data-theme="light"] .sidebar-footer { border-top-color: rgba(0,0,0,0.06); } [data-theme="light"] .sidebar.open { box-shadow: 24px 0 60px rgba(0,0,0,0.18); } [data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.045); color: var(--text); } [data-theme="light"] .nav-item.active { background: var(--accent-soft); color: #0064D2; box-shadow: inset 0 0 0 1px rgba(0,113,227,0.16); } [data-theme="light"] .nav-item.active svg { color: #0071E3; } [data-theme="light"] .nav-badge { background: rgba(0,113,227,0.10); color: #0071E3; } [data-theme="light"] .nav-item.active .nav-badge { background: #0071E3; color: #fff; } [data-theme="light"] .sidebar-toggle:hover { background: rgba(0,0,0,0.05); } [data-theme="light"] .topbar { background: rgba(245,245,247,0.78); border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .mobile-menu-btn { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.10); } [data-theme="light"] .mobile-menu-btn:hover { background: rgba(0,0,0,0.06); } /* Поверхности: вместо внутренней подсветки — мягкая тень */ [data-theme="light"] .card, [data-theme="light"] .detail-card, [data-theme="light"] .section-block, [data-theme="light"] .settings-section, [data-theme="light"] .table-wrap, [data-theme="light"] .filters-bar, [data-theme="light"] .metric-card { border-color: rgba(0,0,0,0.07); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } [data-theme="light"] a.metric-card:hover, [data-theme="light"] .metric-card-link:hover { border-color: rgba(0,0,0,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.09); } [data-theme="light"] .metric-card.accent { border-color: rgba(0,113,227,0.30); } [data-theme="light"] .metric-card.accent .metric-value { background: linear-gradient(135deg, #0071E3, #7C3AED); -webkit-background-clip: text; background-clip: text; } [data-theme="light"] .metric-card.success { border-color: rgba(52,199,89,0.32); } [data-theme="light"] .metric-card.warning { border-color: rgba(255,159,10,0.32); } /* Таблицы */ [data-theme="light"] .data-table th { background: rgba(0,0,0,0.02); } [data-theme="light"] .data-table tbody tr:hover { background: rgba(0,0,0,0.02); } [data-theme="light"] .page-btn:hover { background: rgba(0,0,0,0.05); } [data-theme="light"] .page-btn.active { box-shadow: 0 0 14px rgba(0,113,227,0.24); } /* Таймлайн */ [data-theme="light"] .timeline-item::before { background: rgba(0,0,0,0.10); } [data-theme="light"] .timeline-dot { background: linear-gradient(135deg, #0071E3, #7C3AED); box-shadow: 0 0 0 3px rgba(0,113,227,0.13); } /* Бейджи */ [data-theme="light"] .badge-new { background: rgba(0,113,227,0.10); border-color: rgba(0,113,227,0.28); color: #0064D2; } [data-theme="light"] .badge-sent { background: rgba(124,58,237,0.09); border-color: rgba(124,58,237,0.26); color: #6D28D9; } [data-theme="light"] .badge-info { background: rgba(50,173,230,0.12); border-color: rgba(50,173,230,0.34); color: #0071A4; } [data-theme="light"] .badge-won, [data-theme="light"] .badge-success { background: rgba(52,199,89,0.12); border-color: rgba(52,199,89,0.34); color: #1B7F4C; } [data-theme="light"] .badge-rejected { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); color: rgba(29,29,31,0.45); } [data-theme="light"] .badge-danger { background: rgba(255,59,48,0.10); border-color: rgba(255,59,48,0.28); color: #D6281C; } [data-theme="light"] .badge-warning { background: rgba(255,159,10,0.13); border-color: rgba(255,159,10,0.34); color: #B25A00; } [data-theme="light"] .badge-secondary { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.11); color: rgba(29,29,31,0.60); } [data-theme="light"] .badge-primary { background: linear-gradient(135deg, #0071E3, #7C3AED); border-color: transparent; color: #fff; box-shadow: 0 0 12px rgba(0,113,227,0.22); } [data-theme="light"] .badge-clickable:hover { filter: brightness(0.96); } /* Кнопки */ [data-theme="light"] .btn-primary { box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 0 18px rgba(0,113,227,0.22); } [data-theme="light"] .btn-primary:hover { background: linear-gradient(180deg, #3399FF 0%, #0066FF 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 0 26px rgba(0,113,227,0.34); } [data-theme="light"] .btn-secondary { background: #FFFFFF; border-color: rgba(0,0,0,0.14); } [data-theme="light"] .btn-secondary:hover { background: #F5F5F7; border-color: rgba(0,0,0,0.24); } [data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.05); } [data-theme="light"] .btn-success { background: rgba(52,199,89,0.12); border-color: rgba(52,199,89,0.32); color: #1B7F4C; } [data-theme="light"] .btn-success:hover { background: rgba(52,199,89,0.20); border-color: rgba(52,199,89,0.48); color: #146A3D; } [data-theme="light"] .btn-danger { background: rgba(255,59,48,0.10); border-color: rgba(255,59,48,0.28); color: #D6281C; } [data-theme="light"] .btn-danger:hover { background: rgba(255,59,48,0.18); border-color: rgba(255,59,48,0.44); color: #B91C10; } [data-theme="light"] .btn-warning { background: rgba(255,159,10,0.13); border-color: rgba(255,159,10,0.32); color: #B25A00; } [data-theme="light"] .btn-warning:hover { background: rgba(255,159,10,0.22); border-color: rgba(255,159,10,0.48); color: #8F4800; } [data-theme="light"] .btn-icon { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.10); } [data-theme="light"] .btn-icon:hover { background: rgba(0,0,0,0.06); } /* Формы */ [data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea, [data-theme="light"] input:where(:not([type='checkbox'],[type='radio'],[type='range'],[type='file'],[type='color'],[type='button'],[type='submit'],[type='reset'])), [data-theme="light"] select, [data-theme="light"] textarea { background-color: #FFFFFF; border-color: rgba(0,0,0,0.15); } [data-theme="light"] .form-input:focus, [data-theme="light"] .form-select:focus, [data-theme="light"] .form-textarea:focus, [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { background-color: #FFFFFF; border-color: var(--accent); } [data-theme="light"] .form-input:disabled, [data-theme="light"] input:disabled, [data-theme="light"] select:disabled, [data-theme="light"] textarea:disabled { background-color: rgba(0,0,0,0.03); } [data-theme="light"] .form-select, [data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(30,30,30,0.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } [data-theme="light"] select option, [data-theme="light"] .form-select option { background: #FFFFFF; color: #1D1D1F; } [data-theme="light"] input:-webkit-autofill, [data-theme="light"] input:-webkit-autofill:hover, [data-theme="light"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #FFFFFF inset; -webkit-text-fill-color: #1D1D1F; caret-color: #1D1D1F; } [data-theme="light"] .filter-select, [data-theme="light"] .filter-search { background-color: #FFFFFF; border-color: rgba(0,0,0,0.13); } [data-theme="light"] .filter-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(30,30,30,0.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } [data-theme="light"] .filter-search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(30,30,30,0.42)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E"); } [data-theme="light"] .filter-badge { box-shadow: 0 0 10px rgba(0,113,227,0.28); } /* Переключатель */ [data-theme="light"] .toggle-slider { background: rgba(0,0,0,0.16); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); } [data-theme="light"] .toggle-slider::after { box-shadow: 0 1px 3px rgba(0,0,0,0.25); } [data-theme="light"] .toggle input:checked + .toggle-slider { background: linear-gradient(135deg, #0071E3, #7C3AED); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 0 12px rgba(0,113,227,0.26); } /* Модалки и тосты */ [data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.32); } [data-theme="light"] .modal { box-shadow: var(--shadow-lg); } [data-theme="light"] .modal-close { background: rgba(0,0,0,0.04); } [data-theme="light"] .modal-close:hover { background: rgba(0,0,0,0.09); } [data-theme="light"] .toast { background: rgba(255,255,255,0.94); border-color: rgba(0,0,0,0.10); color: #1D1D1F; box-shadow: 0 8px 30px rgba(0,0,0,0.14); } [data-theme="light"] .toast.success { border-color: rgba(52,199,89,0.40); } [data-theme="light"] .toast.error, [data-theme="light"] .toast.danger { border-color: rgba(255,59,48,0.40); } [data-theme="light"] .toast.warning { border-color: rgba(255,159,10,0.42); } [data-theme="light"] .toast.info { border-color: rgba(50,173,230,0.42); } /* Логин */ [data-theme="light"] .login-page { background: radial-gradient(720px 420px at 50% -8%, rgba(0,113,227,0.10), transparent 65%), radial-gradient(600px 420px at 88% 112%, rgba(124,58,237,0.07), transparent 65%), var(--bg); } [data-theme="light"] .login-card { box-shadow: var(--shadow-lg); } [data-theme="light"] .login-card::before { background: linear-gradient(90deg, transparent, rgba(0,113,227,0.40), rgba(124,58,237,0.40), transparent); } [data-theme="light"] .login-logo img { filter: none; } /* Табы */ [data-theme="light"] .tabs { background: rgba(0,0,0,0.045); border-color: rgba(0,0,0,0.05); } [data-theme="light"] .tab.active { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.14); } /* ── Совместимость платформы: алерты и сброс фильтров (в макете NewDesign их нет) ── */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; margin-top: 12px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-secondary); } .alert-success { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.35); color: var(--success-text); } .alert-danger { background: rgba(255,69,58,0.10); border-color: rgba(255,69,58,0.35); color: var(--danger-text); } .alert-info { background: rgba(100,210,255,0.10); border-color: rgba(100,210,255,0.35); color: var(--info-text); } .alert-warning { background: rgba(255,179,64,0.10); border-color: rgba(255,179,64,0.35); color: var(--warning-text); } .filters-bar .btn-reset { background: transparent; border: 1px dashed var(--border-hover); color: var(--text-secondary); } .filters-bar .btn-reset:hover { border-color: var(--text-tertiary); color: var(--text-primary); background: var(--surface-hover); } [data-theme="light"] .alert-success { background: rgba(52,199,89,0.10); border-color: rgba(52,199,89,0.35); } [data-theme="light"] .alert-danger { background: rgba(255,59,48,0.08); border-color: rgba(255,59,48,0.30); } [data-theme="light"] .alert-info { background: rgba(50,173,230,0.10); border-color: rgba(50,173,230,0.32); } [data-theme="light"] .alert-warning { background: rgba(255,159,10,0.10); border-color: rgba(255,159,10,0.32); } /* Логотип-wordmark (logo.webp) как в прежнем интерфейсе: в САЙДБАРЕ марк — обёртка-ссылка, а не градиентный квадрат; в свёрнутом виде — обрезанный знак «B». На логине марк остаётся референсным градиентным квадратом */ .sidebar .sidebar-logo-mark { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; } .sidebar-logo-img { height: 34px; } .sidebar.collapsed .sidebar-logo-img { display: block; height: 24px; max-width: 40px; object-fit: cover; object-position: left; } [data-theme="light"] .sidebar .sidebar-logo-mark { box-shadow: none; } /* Кастомное меню селектов (Chromium 135+, appearance: base-select). Браузеры без поддержки молча остаются на нативном меню ОС. ТОЛЬКО select: на input[type=date|month] base-select прячет текст значения */ select, select.filter-select, select.form-select, select::picker(select) { appearance: base-select; } /* Длинные суммы не вылезают за metric-card: fmtMoney разделяет разряды обычным пробелом, поэтому число переносится ПО РАЗРЯДАМ (не за край и не внутри цифры). overflow-wrap:normal запрещает разрыв внутри неразрывной группы «число NBSP ₽» */ .metric-card { min-width: 0; overflow: hidden; } .metric-value { overflow-wrap: normal; word-break: normal; } /* Длинный комментарий выплаты не раздувает строку таблицы: 2 строки + многоточие */ .cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 280px; } /* Комментарий-ячейка как кликабельная кнопка без хрома: раскрывает модалку */ .comment-cell { display: block; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .comment-cell:hover .cell-clamp { color: var(--text-primary); text-decoration: underline; } /* date/month-инпуты в фильтрах — не селекты: нативная календарь-иконка вместо стрелки */ input.filter-select { background-image: none; padding-right: 12px; } input.filter-select::-webkit-calendar-picker-indicator { filter: invert(0.65); cursor: pointer; } [data-theme="light"] input.filter-select::-webkit-calendar-picker-indicator { filter: none; } /* стрелка остаётся фоновой SVG из темы — встроенную иконку base-select прячем */ select::picker-icon { display: none; } select::picker(select) { background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0,0,0,0.55); padding: 5px; margin-top: 5px; } select option { padding: 8px 12px; border-radius: 7px; font-size: 13px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background .12s, color .12s; } select option:hover, select option:focus { background: var(--surface-hover); color: var(--text-primary); } select option:checked { background: var(--accent-soft); color: var(--text-primary); } select option::checkmark { color: var(--accent); margin-right: 6px; } [data-theme="light"] select::picker(select) { background: #FFFFFF; box-shadow: 0 16px 40px rgba(0,0,0,0.18); } /* Просмотр практикума: рамка + плавный разворот на весь экран */ .practicum-frame { position: relative; height: calc(100vh - var(--header-height, 64px) - 148px); } .practicum-frame iframe { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: block; } .practicum-frame.expanded, .practicum-frame.collapsing { position: fixed; inset: 12px; z-index: 1200; height: auto; background: var(--bg); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.70); } .practicum-frame.expanded { animation: practicum-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .practicum-frame.collapsing { animation: practicum-out 0.22s ease forwards; pointer-events: none; } @keyframes practicum-in { from { opacity: 0.35; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes practicum-out { to { opacity: 0; transform: scale(0.97); } } .practicum-frame .practicum-collapse { position: absolute; top: 14px; right: 26px; z-index: 2; display: none; box-shadow: 0 6px 20px rgba(0,0,0,0.45); } .practicum-frame.expanded .practicum-collapse { display: inline-flex; } @media (prefers-reduced-motion: reduce) { .practicum-frame.expanded, .practicum-frame.collapsing { animation: none; } } /* Мобильные настройки: правая группа info-row (бейджи+кнопки) переносится на свою строку, выровненную под текст (аватар 36px + gap 12px) */ @media (max-width: 640px) { .settings-section .info-row { flex-wrap: wrap; row-gap: 8px; } .settings-section .info-row > .flex:last-child { width: 100%; padding-left: 48px; flex-wrap: wrap; } } /* Вертикальное центрирование: кнопка base-select — флекс с align-items:normal (текст прижимался к верху); info-row в настройках — baseline не подходит строкам с аватарами и кнопками */ select { align-items: center; } .settings-section .info-row { align-items: center; } /* Тумблер темы: солнце в светлой, луна в тёмной, плавная смена (как в моке) */ .theme-toggle-icons { position: relative; width: 16px; height: 16px; display: block; } .theme-toggle-icons svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: opacity 0.25s ease, transform 0.25s ease; } .theme-toggle-icons .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.4); } .theme-toggle-icons .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] .theme-toggle-icons .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] .theme-toggle-icons .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.4); } [data-theme="light"] .filters-bar .btn-reset { border-color: rgba(0,0,0,0.25); } [data-theme="light"] .filters-bar .btn-reset:hover { border-color: rgba(0,0,0,0.45); } /* ─── Фаза 3: сводки и эскалации ─── */ /* Master-detail сводок: список дат слева, текст выбранной справа */ .master-detail { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .master-detail { grid-template-columns: 1fr; } } .report-list-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border: none; border-radius: var(--radius-md); background: none; color: var(--text-primary); cursor: pointer; font: inherit; } .report-list-item:hover { background: var(--surface-hover); } .report-list-item.active { background: var(--bg-subtle); } /* Рендер mdSafe(): экранированный markdown внутри карточек */ .md-body { font-size: 13.5px; line-height: 1.65; color: var(--text-primary); } .md-body p { margin: 0 0 4px; } .md-body h3 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; } .md-body h4 { font-size: 13.5px; font-weight: 600; margin: 12px 0 4px; } .md-body h3:first-child, .md-body h4:first-child { margin-top: 0; } .md-body ul { margin: 4px 0 8px; padding-left: 20px; } .md-body li { margin: 2px 0; } .md-body code { font-family: var(--font-mono, monospace); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--bg-subtle); } /* ============================================================ Кабинет покупателя: витрина, программа, лендинг Компоненты собраны на переменных :root — светлая тема получает их из [data-theme="light"] сама, парный блок нужен только там, где цвет захардкожен (обложки курсов, белый текст на них). ============================================================ */ /* ─── Витрина ─────────────────────────────────────────── */ .course-hero { position: relative; overflow: hidden; padding: 28px 30px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .course-hero::after { content: ''; position: absolute; top: -60%; right: -10%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 70%); pointer-events: none; } .course-hero-text { position: relative; z-index: 1; max-width: 640px; } .course-hero-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; } .course-hero-sub { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 18px; } .course-hero-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 20px; } .course-hero-stat { display: flex; flex-direction: column; gap: 2px; } .course-hero-stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .course-hero-stat span { font-size: 11.5px; color: var(--text-tertiary); } .course-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: none; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .chip:hover { border-color: var(--border-hover); color: var(--text); } .chip.active { border-color: transparent; background: var(--accent-soft); color: var(--accent-hover); } .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .course-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; text-decoration: none; color: inherit; /* Не --ease-spring: перелёт на подъёме карточки — самый узнаваемый штамп сгенерированных интерфейсов. Реальные предметы тормозят плавно. */ transition: transform 0.25s var(--ease-out), border-color 0.2s ease, box-shadow 0.25s var(--ease-out); } .course-card:hover { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: var(--shadow); } .course-card.locked { opacity: 0.72; } .course-card.locked:hover { opacity: 1; } .course-card-cover { position: relative; height: 92px; display: flex; align-items: flex-end; padding: 10px 14px; background: linear-gradient(135deg, var(--cover-from), var(--cover-to)); } .course-card-kind { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.92); } .course-card-glyph { position: absolute; right: 12px; bottom: -14px; font-size: 68px; font-weight: 800; line-height: 1; color: rgba(255,255,255,0.22); pointer-events: none; } .course-card-body { flex: 1; padding: 14px 16px 10px; } .course-card-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); margin: 0 0 6px; } .course-card-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px; } .course-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; } .course-card-sections { display: flex; flex-direction: column; gap: 3px; } .course-card-sections span { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .course-card-sections .muted { color: var(--text-4); } .course-card-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--border-soft); margin-top: 10px; } .course-card-cta { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-hover); } .course-card-lock { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; color: var(--text-tertiary); } /* Результат поиска: раньше жил инлайновыми стилями в трёх вьюхах */ .search-result { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } .search-result:hover { border-color: var(--border-hover); background: var(--surface-hover); } .search-result-title { font-size: 12px; color: var(--text-secondary); } .search-result-snippet { font-size: 13px; margin-top: 3px; color: var(--text-primary); } /* ─── Программа ───────────────────────────────────────── */ .program-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: linear-gradient(135deg, var(--cover-from), var(--cover-to)); } .program-dot.lg { width: 30px; height: 30px; border-radius: 9px; } .program-nav-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .program-nav-count { font-size: 11.5px; color: var(--text-4); } .program-course { scroll-margin-top: calc(var(--header-height) + 16px); } .program-course-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .program-course-meta { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; } .program-section { margin-bottom: 14px; } .program-section-name { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); margin-bottom: 6px; } .program-lesson { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-primary); text-decoration: none; transition: background 0.15s ease; } .program-lesson:hover { background: var(--surface-hover); } .program-lesson-title { flex: 1; min-width: 0; } .program-lesson-time { font-size: 11.5px; color: var(--text-4); flex-shrink: 0; } .program-lesson.locked { color: var(--text-tertiary); } .program-lesson-lock { flex-shrink: 0; color: var(--text-4); } /* ─── Лендинг (страница без сайдбара) ─────────────────── */ .landing { max-width: 980px; margin: 0 auto; padding: 0 20px 80px; } .landing-top { display: flex; align-items: center; gap: 12px; padding: 20px 0 8px; } .landing-top img { height: 26px; width: auto; } .landing-top .btn { margin-left: auto; } .landing-hero { padding: 56px 0 40px; text-align: center; } .landing-eyebrow { display: inline-block; padding: 5px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 20px; } .landing-h1 { font-size: clamp(30px, 6vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--text); margin: 0 0 18px; } .landing-h1 em { font-style: normal; color: var(--accent); } .landing-lead { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--text-secondary); max-width: 660px; margin: 0 auto 28px; } .landing-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .landing-note { font-size: 12.5px; color: var(--text-tertiary); margin-top: 14px; } .landing-section { padding: 46px 0; border-top: 1px solid var(--border-soft); } .landing-h2 { font-size: clamp(21px, 3.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; } .landing-sub { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 26px; } .landing-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; } .landing-stat { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: center; } .landing-stat b { display: block; font-size: 30px; font-weight: 750; letter-spacing: -0.03em; color: var(--text); margin-bottom: 4px; } .landing-stat span { font-size: 12.5px; color: var(--text-tertiary); } .landing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .landing-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .landing-card h3 { font-size: 15px; font-weight: 650; color: var(--text); margin: 0 0 8px; } .landing-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; } .landing-list { list-style: none; display: grid; gap: 10px; } .landing-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--text-primary); } .landing-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 13px; height: 7px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); } .landing-price { padding: 34px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; } .landing-price-value { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); line-height: 1.1; } .landing-price-note { font-size: 13.5px; color: var(--text-secondary); margin: 8px 0 22px; } .landing-foot { padding: 30px 0 0; border-top: 1px solid var(--border-soft); font-size: 12px; line-height: 1.7; color: var(--text-tertiary); } .landing-foot a { color: var(--text-secondary); } .landing-course { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); margin-bottom: 10px; } .landing-course-meta { margin-left: auto; font-size: 12.5px; color: var(--text-tertiary); white-space: nowrap; } .landing-course h3 { font-size: 14.5px; font-weight: 600; color: var(--text); margin: 0 0 2px; } .landing-course p { font-size: 12.5px; color: var(--text-tertiary); margin: 0; } /* ─── Светлая тема: только там, где цвет захардкожен ──── */ [data-theme="light"] .course-card-glyph { color: rgba(255,255,255,0.32); } [data-theme="light"] .chip.active { color: var(--accent); } /* ─── Появление карточек ──────────────────────────────── */ @keyframes course-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .course-grid > .course-card { animation: course-card-in 0.4s var(--ease-out) backwards; } .course-grid > .course-card:nth-child(2) { animation-delay: 0.04s; } .course-grid > .course-card:nth-child(3) { animation-delay: 0.08s; } .course-grid > .course-card:nth-child(4) { animation-delay: 0.12s; } .course-grid > .course-card:nth-child(5) { animation-delay: 0.16s; } .course-grid > .course-card:nth-child(n+6) { animation-delay: 0.2s; } @media (prefers-reduced-motion: reduce) { .course-grid > .course-card { animation: none; } .course-card:hover { transform: none; } } @media (max-width: 768px) { .course-hero { padding: 22px 20px; } .course-hero-stats { gap: 18px; } .settings-layout .settings-nav { position: static; } .landing-hero { padding: 36px 0 28px; } .landing-price { padding: 24px 18px; } } /* Прогресс курса на карточке: тонкая полоса, рисуется только когда что-то прочитано */ .course-progress { height: 3px; margin-top: 12px; border-radius: 2px; background: var(--bg-subtle); overflow: hidden; } .course-progress > i { display: block; height: 100%; background: var(--accent); } /* ============================================================ Мини-апп Telegram. Экран узкий и без сайдбара, поэтому свой набор компонентов — но на тех же токенах, что весь практикум. ============================================================ */ .tg-body { background: var(--bg); } .tg-screen { max-width: 640px; margin: 0 auto; padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); } .tg-center { padding: 60px 0; text-align: center; } .tg-hero { padding: 18px 18px 16px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .tg-hero-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .tg-hero-sub { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-top: 5px; } .tg-hero-stats { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--text-tertiary); } .tg-hero-stats b { color: var(--text); font-size: 14px; font-weight: 700; } .tg-course, .tg-link-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-family: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; } .tg-course:active, .tg-link-row:active { background: var(--surface-hover); } .tg-course-dot { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, var(--cover-from), var(--cover-to)); } .tg-course-text { flex: 1; min-width: 0; } .tg-course-title { display: block; font-weight: 600; letter-spacing: -0.01em; } .tg-course-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; } .tg-chevron { color: var(--text-4); font-size: 20px; line-height: 1; } .tg-link-row { justify-content: space-between; margin-top: 18px; font-size: 13.5px; color: var(--text-secondary); } .tg-free { color: var(--success-text); font-size: 11.5px; font-weight: 600; } .tg-lock { font-size: 11px; opacity: 0.6; } .tg-back { border: none; background: none; padding: 4px 0 12px; font-family: inherit; font-size: 14px; color: var(--accent-hover); cursor: pointer; } .tg-h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .tg-sub { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin: 4px 0 18px; } .tg-section { margin-bottom: 18px; } .tg-section-name { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); margin-bottom: 6px; } .tg-lesson { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: none; border-bottom: 1px solid var(--border-soft); background: none; font-family: inherit; font-size: 14px; color: var(--text-primary); text-align: left; cursor: pointer; } .tg-lesson:active { background: var(--surface-hover); } .tg-lesson.locked { color: var(--text-tertiary); } .tg-lesson-title { flex: 1; min-width: 0; } .tg-lesson-time { font-size: 11.5px; color: var(--text-4); flex-shrink: 0; } /* Текст урока приходит из учебника со своей разметкой — задаём только базовую типографику */ .tg-article { font-size: 15.5px; line-height: 1.65; color: var(--text-primary); } .tg-article h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--text); } .tg-article h2 { font-size: 18px; font-weight: 650; margin: 26px 0 10px; color: var(--text); } .tg-article h3 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; color: var(--text); } .tg-article p { margin: 0 0 14px; } .tg-article ul, .tg-article ol { margin: 0 0 14px; padding-left: 22px; } .tg-article li { margin: 4px 0; } .tg-article img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 10px 0; } .tg-article a { color: var(--accent-hover); } .tg-article code { font-family: var(--font-mono); font-size: 13px; padding: 1px 5px; border-radius: 4px; background: var(--bg-subtle); } .tg-article pre { padding: 12px 14px; margin: 0 0 14px; border-radius: var(--radius-sm); background: var(--bg-subtle); overflow-x: auto; } .tg-article pre code { padding: 0; background: none; } .tg-article table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; } .tg-article th, .tg-article td { padding: 7px 9px; border: 1px solid var(--border); text-align: left; } .tg-article blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--border-hover); color: var(--text-secondary); } .tg-card { padding: 16px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .tg-card-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; color: var(--text-secondary); } .tg-card-row b { color: var(--text); font-weight: 600; } .tg-locked-card { padding: 26px 20px; margin-top: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: center; } .tg-locked-title { font-size: 15px; font-weight: 650; color: var(--text); margin-bottom: 8px; } .tg-locked-card p, .tg-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; } .tg-price { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: 16px; }