/** * Dynamic Athletic Minimal — единая дизайн-система «Школа Достижений» * Подключать в конце после локальных стилей страницы. */ :root { --bg: #FAFAFC; --surface: #FFFFFF; --surface2: #F1F1F5; --border: #E2E2E9; --text: #121214; --muted: #787885; --accent: #FF5A00; --accent-dim: #D94600; --accent-d: #D94600; --primary: #FF5A00; --primary-d: #D94600; --primary-hover: #D94600; --orange: #FF5A00; --green: #10B981; --green-dim: #059669; --green-bg: rgba(16, 185, 129, 0.12); --yellow: #F59E0B; --yellow-dim: #D97706; --yellow-bg: rgba(245, 158, 11, 0.14); --red: #EF4444; --red-dim: #DC2626; --red-bg: rgba(239, 68, 68, 0.16); --badge-bg: #FFF3EB; --badge-text: #D94600; --nav-wash-top: #FFF8F4; --nav-wash-bottom: #FFF3EB; --nav-wash-border: #FFD4B8; --radius: 6px; --radius-sm: 4px; } html { scrollbar-color: var(--border) var(--bg); } /* Типографика */ h1, h2, h3, .topbar-brand h1, .section-title, .sum-value, .stat-value, .kpi-value { font-weight: 800; letter-spacing: -0.02em; } /* KPI-маркер: оранжевая полоса 4px */ .sum-card.neutral, .sum-card.accent { border-left-width: 4px !important; border-left-color: var(--accent) !important; } /* Плоский стиль — без теней */ .login-card, .topbar, header:has(.topbar-nav), header:has(nav.topbar-nav), div.topbar:has(.topbar-nav) { box-shadow: none !important; } /* Athletic hover — лёгкий сдвиг */ .btn-primary, .btn, .sum-card, .stat-card, .nav-link { transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s ease; } .sum-card:hover, .stat-card:hover { transform: translate(-2px, -2px); } .btn-primary:active, .btn:active { transform: scale(0.98); } /* Градиенты заменяем на плоский акцент */ .btn-ai { background: var(--accent) !important; background-image: none !important; } /* ══════════════════════════════════════════════════════════════ Orange Wash — полоса разделов программы (единая навигация) ══════════════════════════════════════════════════════════════ */ /* Шапка: строка бренда/действий + полоса навигации снизу */ header.topbar:has(.topbar-nav), header.topbar:has(nav.topbar-nav), header:has(> .topbar-nav), header:has(> nav.topbar-nav), div.topbar:has(.topbar-nav) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 12px !important; row-gap: 0 !important; padding: 10px 28px 0 !important; background: var(--surface) !important; border-bottom: none !important; position: sticky !important; top: 0 !important; z-index: 100 !important; } header.topbar:has(.topbar-nav) .topbar-spacer, div.topbar:has(.topbar-nav) .spacer { display: none !important; } /* Действия — в правую часть верхней строки */ header.topbar:has(.topbar-nav) > .sync-info, header.topbar:has(.topbar-nav) > .topbar-actions, header.topbar:has(.topbar-nav) > .btn, header.topbar:has(.topbar-nav) > button:not(.period-btn), header:has(.topbar-nav) > .header-actions, header:has(.topbar-nav) > .header-right, header:has(.topbar-nav) > .notification-container { margin-left: auto !important; } header:has(.topbar-nav) > .topbar-brand, div.topbar:has(.topbar-nav) > .brand-logo { flex-shrink: 0; } /* Orange Wash — полоса вкладок */ .topbar-nav, nav.topbar-nav, .section-nav { flex: 1 1 100% !important; order: 99 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; max-width: none !important; margin: 10px -28px 0 !important; padding: 6px 28px !important; min-height: 44px; background: linear-gradient(180deg, var(--nav-wash-top) 0%, var(--nav-wash-bottom) 100%) !important; border-top: 3px solid var(--accent) !important; border-bottom: 1px solid var(--nav-wash-border) !important; } .section-nav-label { flex-shrink: 0; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dim); padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--nav-wash-border); } .nav-sep { width: 1px; height: 20px; background: var(--nav-wash-border); margin: 0 2px; align-self: center; flex-shrink: 0; } .topbar-nav .nav-link, nav.topbar-nav .nav-link, .section-nav .nav-link { white-space: nowrap !important; flex-shrink: 0; padding: 8px 14px !important; font-size: 0.78rem !important; font-weight: 600 !important; color: var(--muted) !important; text-decoration: none !important; border-radius: var(--radius-sm) !important; background: transparent !important; border: none !important; border-bottom: none !important; } .topbar-nav .nav-link:hover, nav.topbar-nav .nav-link:hover, .section-nav .nav-link:hover { background: rgba(255, 90, 0, 0.1) !important; color: var(--accent-dim) !important; } .topbar-nav .nav-link.active, nav.topbar-nav .nav-link.active, .section-nav .nav-link.active { background: var(--accent) !important; color: #fff !important; } .topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Панель авторизации в шапке */ .auth-panel, .auth-panel-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .auth-panel-loading { color: var(--muted); font-size: 0.85rem; padding: 0 4px; } .auth-user-block { display: flex; align-items: center; gap: 8px; max-width: 220px; } .auth-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--badge-bg); color: var(--badge-text); font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .auth-user-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .auth-user-name { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auth-role-badge, .user-role-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--badge-text); background: var(--badge-bg); padding: 2px 6px; border-radius: var(--radius-sm); align-self: flex-start; } .auth-login-btn { white-space: nowrap; } header.topbar:has(.topbar-nav) > .auth-panel-actions, header:has(.topbar-nav) > .auth-panel-actions, div.topbar:has(.topbar-nav) > .auth-panel-actions { margin-left: auto !important; }