/* ============================================================ ИИ ГОСТ Справочник — Editorial Design System ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Literata:wght@400;500;600;700&display=swap'); /* ── Design Tokens ────────────────────────────────────────── */ :root { /* === DARK THEME (основная) — Editorial Dark === */ --bg-primary: #1E1E1E; --bg-secondary: #252525; --bg-tertiary: #2E2E2E; /* Backward-compat aliases — все компоненты используют эти имена */ --bg-light: #1A1A1A; --surface-light: #252525; --border-light: #3A3A3A; --text-light-primary: #E8E8E8; --text-light-muted: #989898; --text-muted: #767676; /* Accent palette (legacy marine-* names) */ --marine-50: #2A2A2A; --marine-100: #303030; --marine-200: #3A3A3A; --marine-300: #4A4A4A; --marine-400: #E8E8E8; --marine-500: #F3F3F3; --marine-600: #F3F3F3; --marine-700: #FFFFFF; --marine-800: #E8E8E8; --marine-900: #1E1E1E; --marine-950: #141414; /* Gold / brass для цитат ГОСТов */ --copper-300: #D4B84A; --copper-400: #C9A227; --copper-500: #B8962E; --copper-600: #9A7B1A; /* Вторичный акцент (иконки, hover) */ --accent-secondary: #767676; /* Semantic */ --color-primary: #F3F3F3; --color-primary-hover: #FFFFFF; --color-accent: #C9A227; --color-danger: #EF4444; --color-success: #10B981; --color-warning: #F59E0B; /* Alerts */ --alert-success-bg: rgba(184, 150, 46, 0.12); --alert-success-border: rgba(201, 162, 39, 0.32); --alert-success-text: var(--copper-300); --alert-error-bg: rgba(239, 68, 68, 0.1); --alert-error-border: rgba(239, 68, 68, 0.28); --alert-error-text: #FCA5A5; --alert-warning-bg: rgba(245, 158, 11, 0.1); --alert-warning-border: rgba(245, 158, 11, 0.28); --alert-warning-text: #FCD34D; --alert-info-bg: var(--marine-50); --alert-info-border: var(--marine-200); --alert-info-text: var(--marine-400); --link-color: #E8E8E8; --link-hover-color: #FFFFFF; /* Sky accent — ссылки, имена, вторичный акцент */ --accent-sky: rgba(148, 210, 255, 0.92); --accent-sky-hover: rgba(186, 228, 255, 1); --accent-sky-muted: rgba(148, 210, 255, 0.72); /* Blueprint grid — очень тонкий, не давит */ --grid-color: rgba(255, 255, 255, 0.035); /* Radius — мягкие, человечные скругления */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; /* Transitions */ --transition-ui: 0.24s cubic-bezier(0.4, 0, 0.2, 1); /* Typography */ --font-family-base: 'Literata', Georgia, serif; /* 17px mobile → rem-компоненты читаются комфортнее без правки каждого размера */ font-size: 17px; /* Scrollbars — тёмная тема: полупрозрачный, как сейчас */ --scrollbar-size: 8px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.22); --scrollbar-thumb-hover: rgba(229, 177, 62, 0.42); } /* ── Light theme — editorial (ref: top15moscow.ru) ─────────── */ /* Applied when */ body.light-theme { --bg-light: #FFFFFF; --surface-light: #FFFFFF; --border-light: #E8E8E8; --text-light-primary: #252525; --text-light-muted: #767676; --text-muted: #989898; --marine-50: #F8F8F8; --marine-100: #F3F3F3; --marine-200: #E8E8E8; --marine-300: #D4D4D4; --marine-400: #252525; --marine-500: #1E1E1E; --marine-600: #1E1E1E; --marine-700: #000000; --marine-800: #252525; --marine-900: #1E1E1E; --marine-950: #141618; --copper-400: #C9A227; --copper-500: #B8962E; --copper-600: #9A7B1A; --link-color: #252525; --link-hover-color: #000000; --accent-sky: #5B8399; --accent-sky-hover: #4A7185; --accent-sky-muted: #7A9AAD; --color-success: #16A34A; --color-danger: #DC2626; --alert-success-bg: rgba(184, 150, 46, 0.1); --alert-success-border: rgba(184, 150, 46, 0.35); --alert-success-text: var(--copper-600); --alert-error-bg: #FEF2F2; --alert-error-border: #FECACA; --alert-error-text: #B91C1C; --alert-warning-bg: #FFFBEB; --alert-warning-border: #FDE68A; --alert-warning-text: #B45309; --alert-info-bg: var(--marine-50); --alert-info-border: var(--border-light); --alert-info-text: var(--marine-800); --grid-color: rgba(0, 0, 0, 0.04); /* Scrollbars — светлая тема: золотистые */ --scrollbar-thumb: var(--copper-400); --scrollbar-thumb-hover: var(--copper-600); background-color: #FFFFFF; background-image: none; } body.light-theme a { color: var(--link-color, #252525); text-decoration: none; } body.light-theme a:hover:not(.btn):not(.lp-btn-primary):not(.lp-btn-secondary) { color: var(--link-hover-color, #000000); text-decoration: underline; } body.light-theme .sidebar-link { color: var(--text-light-primary); } body.light-theme .sidebar-link:hover { background: var(--marine-50); border-left-color: var(--marine-300); } body.light-theme .sidebar-link.active { color: var(--marine-900); background: var(--marine-50); border-left-color: var(--marine-900); } body.light-theme .message-ai .message-avatar { background: var(--marine-50); color: var(--copper-500); border-color: var(--border-light); } body.light-theme .message-bubble { background: #FFFFFF; color: var(--text-light-primary); border: 1px solid var(--border-light); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } body.light-theme .message-ai .message-bubble code { background: var(--marine-50); color: #252525; } body.light-theme .message-user .message-avatar { background: var(--marine-100); color: var(--marine-800); border: 1px solid var(--border-light); } body.light-theme .badge-success { background: none; color: #151515; } body.light-theme .badge-danger { background: #FEE2E2; color: #991B1B; } body.light-theme .badge-marine { background: var(--marine-100); color: var(--marine-800); } body.light-theme .badge-copper { background: var(--marine-100); color: var(--marine-800); } body.light-theme .btn-danger { background: #FEF2F2; color: #DC2626; border-color: #FECACA; } body.light-theme .btn-danger:hover { background: #DC2626; color: #fff; border-color: #B91C1C; } body.light-theme .btn-danger:active { background: #B91C1C; color: #fff; border-color: #991B1B; } body.light-theme .btn-secondary { background: #fff; color: var(--text-light-primary); border-color: var(--border-light); } body.light-theme .btn-secondary:hover, body.light-theme .btn-secondary:focus-visible { background: var(--marine-50); border-color: var(--marine-300); color: var(--text-light-primary) !important; } body.light-theme .btn-secondary:active { background: var(--marine-100); border-color: var(--marine-300); color: var(--text-light-primary) !important; } body.light-theme .skeleton { background: var(--border-light); } body.light-theme .plan-price { color: var(--marine-900); } body.light-theme .data-table tbody tr:hover { background: var(--marine-50); } /* ── Light theme: Navbar ──────────────────────────────────── */ body.light-theme .navbar { background: rgba(255, 255, 255, 0.98); border-bottom-color: #E8E8E8; box-shadow: none; } body.light-theme .navbar::after { background: rgba(0, 0, 0, 0.08); height: 1px; } body.light-theme .navbar-brand { color: var(--marine-800); } body.light-theme .navbar-brand .brand-accent { color: var(--copper-500); } body.light-theme .navbar-nav a:not(.btn) { color: var(--text-light-primary); } body.light-theme .navbar-nav a:not(.btn):hover, body.light-theme .navbar-nav a:not(.btn).active { color: var(--marine-900); background: rgba(0, 0, 0, 0.05); text-decoration: none; } body.light-theme .navbar-nav a.btn-primary, body.light-theme .navbar-nav a.btn-primary:hover, body.light-theme .navbar-nav a.btn-primary:focus-visible, body.light-theme .navbar-nav a.btn-copper, body.light-theme .navbar-nav a.btn-copper:hover { color: #fff !important; text-decoration: none !important; } body.light-theme .navbar-nav a.btn-primary:hover, body.light-theme .navbar-nav a.btn-primary:focus-visible { background: #000 !important; } body.light-theme .btn-eng-mode { background: transparent; border-color: var(--marine-900); color: var(--marine-900); } body.light-theme .btn-eng-mode:hover { background: var(--marine-900); color: #fff; } body.light-theme .burger-btn span { background: var(--marine-800); } body.light-theme .mobile-theme-btn { color: var(--marine-800); } /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button, input, textarea, select, optgroup { font-family: inherit; } /* ── Base ─────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--font-family-base); font-size: 0.9375rem; /* ~15px при root 16px, ~16px при root 17px */ line-height: 1.72; background-color: var(--bg-light); color: var(--text-light-primary); /* Лёгкая текстура: сетка + радиальный градиент для живости */ background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), radial-gradient(ellipse 70% 55% at 25% 15%, rgba(229, 177, 62, 0.025) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 80% 85%, rgba(95, 99, 110, 0.04) 0%, transparent 60%); background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%; } /* Blueprint grid hidden by default, shown with JS toggle */ body.engineering-mode { --grid-color: rgba(229, 177, 62, 0.11); } a { color: var(--marine-400); text-decoration: none; } a:hover { color: #F0D080; text-decoration: underline; } /* ── Typography ───────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; } code, .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.875em; } /* ── Layout ───────────────────────────────────────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } .app-shell { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 1fr; min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); } /* ── Navbar ───────────────────────────────────────────────── */ .navbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; height: 56px; background: var(--marine-900); border-bottom: 1px solid rgba(255,255,255,0.07); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 24px rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .navbar-brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-family-base); font-size: 0.9rem; font-weight: 500; color: #fff; letter-spacing: 0.02em; } .navbar-brand .brand-accent { color: var(--copper-400); } /* ── Site logo SVG — 3×3 grid mark + wordmark ─────────────────────────────── */ .logo-dot { fill: var(--copper-500); } .logo-ring { fill: none; stroke: #FFFFFF; stroke-width: 2.8; } .logo-mark-bg { fill: #1A1A1A; } .logo-ai { fill: var(--copper-400); font-family: var(--font-family-base); } .logo-gost { fill: #F1F5F9; font-family: var(--font-family-base); } .logo-sub { fill: #64748B; font-family: var(--font-family-base); } /* ── Site logo SVG — светлая тема ─────────────────────────────────────────── */ body.light-theme .logo-ring { stroke: #252525; } body.light-theme .logo-ai { fill: var(--copper-500); } body.light-theme .logo-gost { fill: #252525; } body.light-theme .logo-sub { fill: #767676; } /* Ruler decoration */ .navbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: repeating-linear-gradient( 90deg, var(--copper-500) 0px, var(--copper-500) 8px, transparent 8px, transparent 16px ); } .navbar > nav { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; min-width: 0; flex: 1 1 auto; justify-content: flex-end; } .navbar-nav { display: flex; align-items: center; gap: 0.25rem; list-style: none; min-width: 0; } .navbar-nav a { padding: 0.375rem 0.75rem; color: rgba(255,255,255,0.72); border-radius: var(--radius); font-size: 0.8125rem; font-weight: 500; transition: color var(--transition-ui), background var(--transition-ui); } .navbar-nav a:hover, .navbar-nav a.active { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; } /* User menu trigger in navbar */ .navbar-user-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.55rem 0.3rem 0.35rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: rgba(255,255,255,0.88); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui); -webkit-tap-highlight-color: transparent; flex-shrink: 0; max-width: min(12rem, 36vw); } .navbar-user-btn:hover, .navbar-user-btn[aria-expanded="true"] { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.24); color: #fff; } .navbar-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: rgba(229,177,62,0.18); color: var(--copper-400); font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; } .navbar-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-user-chevron { flex-shrink: 0; opacity: 0.55; transition: transform var(--transition-ui); } .navbar-user-btn[aria-expanded="true"] .navbar-user-chevron { transform: rotate(180deg); } body.light-theme .navbar-user-btn { background: transparent; border-color: rgba(0, 0, 0, 0.12); color: var(--text-light-primary); } body.light-theme .navbar-user-btn:hover, body.light-theme .navbar-user-btn[aria-expanded="true"] { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.18); } /* User menu modal */ .user-menu-modal { position: fixed; inset: 0; z-index: 500; display: none; align-items: flex-start; justify-content: flex-end; padding: calc(56px + 0.5rem) 1rem 1rem; pointer-events: none; } .user-menu-modal:not([hidden]) { display: flex; pointer-events: auto; } .user-menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.48); opacity: 0; transition: opacity 0.16s ease-out; } .user-menu-modal.is-open .user-menu-backdrop { opacity: 1; } .user-menu-panel { position: relative; width: min(18rem, calc(100vw - 2rem)); background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32); overflow: hidden; opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity 0.16s ease-out, transform 0.16s ease-out; } .user-menu-modal.is-open .user-menu-panel { opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .user-menu-backdrop, .user-menu-panel { transition: none; } .user-menu-modal.is-open .user-menu-panel { transform: none; } } .user-menu-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem 0.875rem; border-bottom: 1px solid var(--border-light); } .user-menu-avatar { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(229,177,62,0.16); color: var(--copper-500); font-size: 0.875rem; font-weight: 700; flex-shrink: 0; } .user-menu-name { font-size: 0.875rem; font-weight: 600; color: var(--text-light-primary); line-height: 1.3; } .user-menu-email { font-size: 0.6875rem; color: var(--text-light-muted); margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10rem; } .user-menu-close { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: transparent; border: none; border-radius: var(--radius); color: var(--text-light-muted); cursor: pointer; flex-shrink: 0; } .user-menu-close:hover { background: rgba(255,255,255,0.06); color: var(--text-light-primary); } body.light-theme .user-menu-close:hover { background: rgba(15,23,42,0.06); } .user-menu-links { display: flex; flex-direction: column; padding: 0.375rem; } .user-menu-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--radius); color: var(--text-light-primary); font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: background var(--transition-ui), color var(--transition-ui); } .user-menu-link:hover { background: rgba(255,255,255,0.06); color: var(--marine-400); text-decoration: none; } .user-menu-link.active { background: rgba(229,177,62,0.1); color: var(--copper-400); } body.light-theme .user-menu-link:hover { background: rgba(0, 0, 0, 0.05); color: var(--marine-900); } body.light-theme .user-menu-link.active { background: var(--marine-50); color: var(--marine-900); } .user-menu-footer { padding: 0.375rem; border-top: 1px solid var(--border-light); } .user-menu-notice { margin: 0 1rem 0.75rem; padding: 0.875rem 0.9375rem; border-radius: var(--radius); border: 1px solid rgba(229, 177, 62, 0.28); background: rgba(229, 177, 62, 0.08); } .user-menu-notice__title { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-light-primary); } .user-menu-notice__text { margin: 0 0 0.75rem; font-size: 0.75rem; line-height: 1.45; color: var(--text-light-muted); } .user-menu-notice__cta { width: 100%; justify-content: center; } body.light-theme .user-menu-notice { background: rgba(180, 115, 65, 0.08); border-color: rgba(180, 115, 65, 0.22); } .user-menu-logout { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.625rem 0.75rem; background: transparent; border: none; border-radius: var(--radius); color: var(--text-light-muted); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background var(--transition-ui), color var(--transition-ui); } .user-menu-logout:hover { background: rgba(239,68,68,0.1); color: #f87171; } body.user-menu-open { overflow: hidden; } /* Engineering mode toggle */ .btn-eng-mode { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; background: rgba(245,166,35,0.12); border: 1px solid var(--copper-600); border-radius: var(--radius); color: var(--copper-300); font-family: var(--font-family-base); font-size: 0.75rem; cursor: pointer; transition: background 0.15s; } .btn-eng-mode:hover { background: rgba(245,166,35,0.22); } /* ── Sidebar ──────────────────────────────────────────────── */ .sidebar { background: var(--surface-light); border-right: 1px solid var(--border-light); padding: 1.25rem 0 0; overflow: hidden; display: flex; flex-direction: column; } .sidebar-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } .sidebar .sidebar-section { flex-shrink: 0; margin-bottom: 1rem; } .sessions-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--border-light); padding-top: 0.75rem; margin-bottom: 0; } .sessions-section > .sidebar-label { padding: 0 1rem 0.375rem; } .sessions-panel-head { padding: 0 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; } .sessions-search { width: 100%; background: var(--surface-light, #fff); border: 1px solid var(--border-light); border-radius: 6px; padding: 0.35rem 0.6rem; font-size: 0.8125rem; color: var(--text-light-primary); outline: none; } .sessions-search:focus { border-color: var(--copper-500, #b47341); } .btn-new-session { width: 100%; background: var(--copper-500, #b47341); color: #fff; border: none; border-radius: 6px; padding: 0.45rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; transition: background 0.15s; } .btn-new-session:hover { background: var(--copper-600, #C99A2E); } .sessions-list { flex: 1; overflow-y: auto; padding: 0.25rem; min-height: 0; } /* ── Scrollbars ─────────────────────────────────────────── */ .sessions-list, .sessions-panel .sidebar-section, .chat-messages, .chat-textarea, .main-content { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } .sessions-list::-webkit-scrollbar, .sessions-panel .sidebar-section::-webkit-scrollbar, .chat-messages::-webkit-scrollbar, .chat-textarea::-webkit-scrollbar, .main-content::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } .sessions-list::-webkit-scrollbar-track, .sessions-panel .sidebar-section::-webkit-scrollbar-track, .chat-messages::-webkit-scrollbar-track, .chat-textarea::-webkit-scrollbar-track, .main-content::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 10px; } .sessions-list::-webkit-scrollbar-thumb, .sessions-panel .sidebar-section::-webkit-scrollbar-thumb, .chat-messages::-webkit-scrollbar-thumb, .chat-textarea::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .sessions-list::-webkit-scrollbar-thumb:hover, .sessions-panel .sidebar-section::-webkit-scrollbar-thumb:hover, .chat-messages::-webkit-scrollbar-thumb:hover, .chat-textarea::-webkit-scrollbar-thumb:hover, .main-content::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } .session-item { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer; text-decoration: none; color: var(--text-light-primary); font-size: 0.8125rem; transition: background 0.1s; } .session-item:hover, .session-item.active { background: var(--marine-50); } .session-item.active { font-weight: 600; } .session-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .session-item-pin { display: inline-flex; align-items: center; color: var(--copper-500); flex-shrink: 0; } .session-item-actions { display: none; gap: 0.15rem; flex-shrink: 0; align-items: center; } .session-item:hover .session-item-actions { display: flex; } .session-icon { display: block; width: 13px; height: 15px; } .session-action-btn { background: none; border: none; cursor: pointer; padding: 0.2rem; border-radius: 4px; color: var(--text-light-muted); line-height: 0; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-ui), color var(--transition-ui); } .session-action-btn:hover { background: var(--marine-100); color: var(--text-light-primary); } .session-action-btn--pin.is-pinned, .session-action-btn--pin.is-pinned:hover { color: var(--copper-500); } .session-action-btn.danger:hover { background: rgba(239, 68, 68, 0.12); color: var(--color-danger); } body.light-theme .session-action-btn.danger:hover { background: #FEE2E2; color: #DC2626; } .sessions-empty { text-align: center; padding: 2rem 1rem; font-size: 0.8rem; color: var(--text-light-muted); } /* Chat page: unified sessions panel */ .sessions-panel { grid-row: 1 / 3; border-right: 1px solid var(--border-light); background: var(--surface-light); display: flex; flex-direction: column; overflow: hidden; padding: 1.25rem 0 0; } .chat-sidebar-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } .sessions-panel .sidebar-section { margin-bottom: 1rem; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .sidebar-subscription:not(.sidebar-subscription--inline) { padding: 0 1rem; margin-top: auto; } .sidebar-subscription--inline { padding: 0 1rem; margin-bottom: 0; flex-shrink: 0; } .sidebar-subscription-card { padding: 0.875rem; background: var(--marine-50); border: 1px solid var(--border-light); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.375rem; } .sidebar-subscription-label { margin: 0; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light-muted); font-family: var(--font-family-base); } .sidebar-subscription-status { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-light-primary); font-family: var(--font-family-base); line-height: 1.35; } .sidebar-subscription-cta { width: 100%; margin-top: 0.375rem; justify-content: center; font-size: 0.8125rem; min-height: 34px; } .sidebar-subscription-hint { margin: 0.375rem 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--text-light-muted); } body.light-theme .sidebar-subscription-card { background: #fff; border-color: var(--border-light); } body.light-theme .sidebar-subscription-status { color: var(--marine-900); } .sidebar-section { margin-bottom: 1.5rem; } .sidebar-label { padding: 0 1rem 0.375rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light-muted); font-family: var(--font-family-base); } .sidebar-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; color: var(--text-light-primary); font-size: 0.875rem; border-left: 2px solid transparent; transition: background var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .sidebar-link:hover { background: var(--marine-50); border-left-color: var(--marine-300); text-decoration: none; } .sidebar-link.active { background: var(--marine-50); border-left-color: var(--marine-700); color: var(--marine-400); font-weight: 500; } /* ── Main content ─────────────────────────────────────────── */ .main-content { padding: 2rem 1.5rem; overflow-y: auto; } /* Длинные страницы (тарифы и т.п.): скролл у document, не внутри main */ body.page-scroll .app-shell { grid-template-rows: auto !important; min-height: auto; } body.page-scroll .main-content { overflow: visible; overflow-y: visible; min-height: auto; } /* ── Card ──────────────────────────────────────────────────── */ .card { background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1.5rem; } .card-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); } .card-title { font-size: 0.9375rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } /* Corner ornament (чертёжный стиль) — тонкий, не давит */ .card::before { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-top: 1px solid var(--marine-300); border-left: 1px solid var(--marine-300); opacity: 0.5; border-top-left-radius: var(--radius); } .card { position: relative; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.08); } /* ── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1.125rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui), box-shadow var(--transition-ui), transform 0.18s ease; white-space: nowrap; text-decoration: none; } .btn:hover, .btn:active, .btn:focus, .btn:visited { text-decoration: none; } .btn-primary { background: var(--marine-600); color: #1A1C1E; border-color: var(--marine-700); box-shadow: 0 2px 10px rgba(229, 177, 62, 0.25); } .btn-primary:hover { background: var(--marine-700); color: #1A1C1E; text-decoration: none; box-shadow: 0 4px 18px rgba(229, 177, 62, 0.38); transform: translateY(-1px); } .btn-primary:active { background: var(--copper-600); color: #1A1C1E; text-decoration: none; transform: translateY(0); box-shadow: none; } .btn-primary:focus-visible { outline: 2px solid var(--marine-400); outline-offset: 2px; } .btn-secondary { background: var(--surface-light); color: var(--text-light-primary); border-color: var(--border-light); } .btn-secondary:hover { background: var(--marine-100); border-color: var(--marine-300); } .btn-secondary:active { background: var(--marine-200); border-color: var(--marine-300); } .btn-secondary:focus-visible { outline: 2px solid var(--marine-400); outline-offset: 2px; } .btn-copper { background: var(--copper-400); color: #fff; border-color: var(--copper-500); } .btn-copper:hover { background: var(--copper-500); color: #fff; } .btn-copper:active { background: var(--copper-600, #b45309); color: #fff; } .btn-copper:focus-visible { outline: 2px solid var(--copper-400); outline-offset: 2px; } .btn-danger { background: rgba(239,68,68,0.08); color: #FCA5A5; border-color: rgba(239,68,68,0.25); } .btn-danger:hover { background: var(--color-danger); color: #fff; } .btn-danger:active { background: #b91c1c; color: #fff; border-color: #991b1b; } .btn-danger:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; } .btn-sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; } /* ── Forms ───────────────────────────────────────────────── */ .form-group { margin-bottom: 1rem; } label { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--text-light-primary); } .form-control { width: 100%; padding: 0.65rem 1rem; font-size: 0.875rem; font-family: inherit; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface-light); color: var(--text-light-primary); transition: border-color var(--transition-ui), box-shadow var(--transition-ui); outline: none; } .form-control:focus { border-color: var(--marine-400); box-shadow: 0 0 0 4px rgba(229, 177, 62, 0.10), 0 1px 6px rgba(0,0,0,0.10); } .form-control::placeholder { color: var(--text-light-muted); opacity: 1; } /* Compact role select in admin tables */ .admin-role-select { font-size: 0.75rem; padding: 0.2rem 0.4rem; width: auto; min-width: 5.5rem; border-radius: 4px; cursor: pointer; } /* Native select — readable text in both themes */ select.form-control, .admin-role-select { color: var(--text-light-primary); } body:not(.light-theme) select.form-control, body:not(.light-theme) .admin-role-select { color-scheme: dark; } body:not(.light-theme) select.form-control option, body:not(.light-theme) .admin-role-select option { background-color: var(--surface-light); color: var(--text-light-primary); } body.light-theme select.form-control, body.light-theme .admin-role-select { color-scheme: light; } body.light-theme select.form-control option, body.light-theme .admin-role-select option { background-color: #fff; color: var(--text-light-primary); } .form-error { font-size: 0.75rem; color: var(--color-danger); margin-top: 0.25rem; } /* ── Chat Interface ──────────────────────────────────────── */ .chat-layout { display: grid; grid-template-rows: 1fr auto; height: calc(100vh - 56px); font-family: var(--font-family-base); } .md-content { font-family: var(--font-family-base); } .chat-messages { overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .message { display: flex; gap: 0.75rem; max-width: 860px; } .message-user { flex-direction: row-reverse; align-self: flex-end; } .message-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .message-ai .message-avatar { background: var(--marine-800); color: var(--copper-400); border: 1px solid var(--marine-600); font-family: var(--font-family-base); } .message-user .message-avatar { background: rgba(95, 99, 110, 0.35); color: var(--marine-400); font-size: 0.875rem; font-weight: 600; line-height: 1; } .message-bubble { padding: 0.625rem 0.875rem; border-radius: var(--radius-lg); max-width: 720px; line-height: 1.65; font-family: var(--font-family-base); } .message-bubble .md-content { font-family: inherit; } .message-bubble .md-content p { margin: 0.25rem 0; } .message-bubble .md-content h1, .message-bubble .md-content h2, .message-bubble .md-content h3 { margin: 0.65rem 0 0.3rem; } .message-user .message-bubble { background: var(--marine-600); color: #1A1C1E; border-bottom-right-radius: 4px; box-shadow: 0 2px 12px rgba(229, 177, 62, 0.22); } .message-ai .message-bubble { background: var(--surface-light); border: 1px solid var(--border-light); border-bottom-left-radius: 4px; font-size: 0.9375rem; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); } /* AI response animation */ .ai-response { animation: fadeIn 0.45s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Code blocks in AI response */ .message-ai .message-bubble code { background: var(--marine-800); color: var(--copper-400); padding: 0.125rem 0.375rem; border-radius: 2px; font-size: 0.8125rem; font-family: 'JetBrains Mono', monospace; } /* ── GOST Sources ────────────────────────────────────────── */ .gost-sources { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 0.5rem; } .gost-source-item { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8125rem; padding: 0.5rem 0.75rem; background: linear-gradient(135deg, rgba(212,133,10,0.06) 0%, rgba(212,133,10,0.02) 100%); border: 1px solid rgba(212,133,10,0.18); border-radius: var(--radius); } body.light-theme .gost-source-item { background: rgba(212, 133, 10, 0.06); border-color: rgba(212, 133, 10, 0.18); } .gost-number { font-family: var(--font-family-base); font-weight: 500; color: var(--copper-500); white-space: nowrap; } .gost-page { color: var(--text-light-muted); font-size: 0.75rem; margin-top: 0.125rem; } .gost-quote { color: var(--text-light-primary); font-style: italic; border-left: 2px solid var(--copper-400); padding-left: 0.5rem; margin-top: 0.25rem; } .sources-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; padding: 0.25rem 0; background: none; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--copper-500); font-family: var(--font-family-base); } .sources-toggle .toggle-chevron { transition: transform 0.15s; } .sources-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(90deg); } /* ── Skeleton loading (blueprint style) ──────────────────── */ .skeleton { background: var(--marine-200); border-radius: var(--radius); position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(229,177,62,0.08) 50%, transparent 100% ); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── Chat input bar ──────────────────────────────────────── */ .chat-input-bar { padding: 1rem 1.5rem; border-top: 1px solid var(--border-light); background: var(--surface-light); } .chat-input-form { display: flex; gap: 0.5rem; align-items: flex-end; width: 100%; } .chat-textarea { flex: 1; min-height: 46px; max-height: 180px; resize: none; overflow-y: auto; padding: 0.75rem 1rem; font-family: inherit; font-size: 0.9375rem; border: 1px solid var(--border-light); border-radius: var(--radius-lg); outline: none; line-height: 1.58; transition: border-color var(--transition-ui), box-shadow var(--transition-ui); } .chat-textarea:focus { border-color: var(--marine-400); box-shadow: 0 0 0 4px rgba(229, 177, 62, 0.09), 0 2px 10px rgba(0,0,0,0.08); } .daily-limit-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-light-muted); margin-bottom: 0.5rem; font-family: var(--font-family-base); } .limit-track { height: 3px; background: var(--border-light); border-radius: 99px; flex: 1; } .limit-fill { height: 100%; border-radius: 99px; background: var(--marine-500); transition: width 0.3s; } .limit-fill.danger { background: var(--color-danger); } /* ── Pricing cards ───────────────────────────────────────── */ .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .plan-card { background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; position: relative; transition: border-color var(--transition-ui), box-shadow var(--transition-ui), transform var(--transition-ui); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.14); } .plan-card:hover { border-color: var(--marine-300); box-shadow: 0 8px 40px rgba(229,177,62,0.12), 0 2px 12px rgba(0,0,0,0.08); transform: translateY(-2px); } .plan-card.featured { border-color: rgba(229, 177, 62, 0.4); background: linear-gradient(165deg, rgba(229, 177, 62, 0.07) 0%, var(--surface-light) 42%); box-shadow: 0 4px 20px rgba(229, 177, 62, 0.1), 0 2px 14px rgba(0, 0, 0, 0.12); } .plan-card.featured:hover { border-color: rgba(229, 177, 62, 0.55); box-shadow: 0 8px 32px rgba(229, 177, 62, 0.14), 0 2px 12px rgba(0, 0, 0, 0.1); } .plan-badge { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; margin: 0; background: rgba(229, 177, 62, 0.14); color: var(--marine-400); border: 1px solid rgba(229, 177, 62, 0.28); font-size: 0.625rem; font-weight: 500; padding: 0.2rem 0.55rem; letter-spacing: 0.03em; border-radius: 100px; white-space: nowrap; line-height: 1.25; pointer-events: none; } .plan-name { font-size: 1rem; font-weight: 600; } .plan-price { font-size: 2.25rem; font-weight: 700; color: var(--marine-400); line-height: 1; } .plan-price span { font-size: 0.875rem; font-weight: 400; color: var(--text-light-muted); } .plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .plan-feature { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--text-light-primary); line-height: 1.5; } .plan-feature::before { content: '—'; color: var(--marine-400); font-family: var(--font-family-base); } .plan-tagline { font-size: 0.75rem; color: var(--text-light-muted); margin-top: 0.25rem; font-family: var(--font-family-base); } .plan-feature__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .plan-feature__main { line-height: 1.45; } .plan-feature__note { font-size: 0.75rem; color: var(--text-light-muted); line-height: 1.45; } .plan-feature-note { font-size: 0.75rem; color: var(--text-light-muted); line-height: 1.45; } .plan-cta-btn { width: 100%; min-height: 44px; justify-content: center; text-align: center; } .plan-subscribe-form .consent-block { margin: 0.5rem 0 0; } .plan-subscribe-form .plan-pay-btn { margin-top: 1.25rem; } /* ── History reactions ───────────────────────────────────── */ .react-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--border-light); background: var(--surface-light); color: var(--text-light-primary); cursor: pointer; font-size: 0.8rem; font-family: inherit; transition: border-color 0.15s, background 0.15s, color 0.15s; } .react-btn:hover { border-color: var(--copper-400); color: var(--text-light-primary); } .react-btn.active-like { border-color: var(--copper-500); background: rgba(184, 150, 46, 0.12); color: var(--copper-400); } .react-btn.active-dislike { border-color: var(--marine-300); background: var(--marine-50); color: var(--text-light-muted); } body.light-theme .react-btn.active-like { background: rgba(184, 150, 46, 0.1); color: var(--copper-600); } body.light-theme .react-btn.active-dislike { background: var(--marine-50); color: var(--text-light-muted); } .history-reaction--like { color: var(--copper-500); } .history-reaction--dislike { color: var(--text-light-muted); } /* ── Consent checkboxes ─────────────────────────────────── */ .consent-block { position: relative; margin: 0.75rem 0; } .consent-block--collapsible { margin: 0.4375rem 0; } .consent-label { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; line-height: 1.45; } input[type="checkbox"], .consent-check { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1.0625rem; height: 1.0625rem; cursor: pointer; border: 1.5px solid var(--border-light, #5F636E); border-radius: 0.375rem; background: var(--surface-light, #2A2D31); position: relative; vertical-align: middle; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .consent-check { margin-top: 0.125rem; } input[type="checkbox"]:hover:not(:checked), .consent-check:hover:not(:checked) { border-color: var(--copper-500, #C99A2E); box-shadow: 0 0 0 2px rgba(201, 154, 46, 0.12); } input[type="checkbox"]:checked, .consent-check:checked { background: var(--copper-500, #C99A2E); border-color: var(--copper-500, #C99A2E); box-shadow: 0 0 0 2px rgba(201, 154, 46, 0.18); } input[type="checkbox"]:checked::after, .consent-check:checked::after { content: ''; position: absolute; left: 50%; top: 46%; width: 0.28rem; height: 0.5rem; border: solid #1A1C1E; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); } input[type="checkbox"]:focus-visible, .consent-check:focus-visible { outline: 2px solid var(--copper-500, #C99A2E); outline-offset: 2px; } /* Themed radio buttons (global) */ input[type="radio"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1.0625rem; height: 1.0625rem; margin: 0; cursor: pointer; border: 1.5px solid var(--border-light, #5F636E); border-radius: 50%; background: var(--surface-light, #2A2D31); position: relative; vertical-align: middle; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } input[type="radio"]:hover:not(:checked) { border-color: var(--copper-500, #C99A2E); box-shadow: 0 0 0 2px rgba(201, 154, 46, 0.12); } input[type="radio"]:checked { border-color: var(--copper-500, #C99A2E); background: var(--surface-light, #2A2D31); box-shadow: 0 0 0 2px rgba(201, 154, 46, 0.18); } input[type="radio"]:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--copper-500, #C99A2E); transform: translate(-50%, -50%); } input[type="radio"]:focus-visible { outline: 2px solid var(--copper-500, #C99A2E); outline-offset: 2px; } input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; } .form-radio-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 0.5rem; } .form-radio-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; line-height: 1.45; color: var(--text-light-primary); } .consent-text { font-size: 0.8125rem; color: var(--text-light-muted, #94A3B8); line-height: 1.5; } .consent-block--collapsible .consent-text { font-size: 0.75rem; line-height: 1.45; } .consent-text a { color: var(--copper-400, #C9A227); text-decoration: none; transition: color 0.15s; } .consent-text a:hover { color: var(--copper-300, #D4B84A); text-decoration: none; } .consent-details { margin: 0.25rem 0 0 1.6875rem; } .consent-details__toggle { font-size: 0.6875rem; color: var(--text-light-muted); opacity: 0.85; cursor: pointer; list-style: none; user-select: none; } .consent-details__toggle::-webkit-details-marker { display: none; } .consent-details__toggle::before { content: '▸ '; color: var(--copper-500, #C9A227); font-size: 0.625rem; } .consent-details[open] .consent-details__toggle::before { content: '▾ '; } .consent-details__toggle:hover { color: var(--copper-400, #C9A227); } .consent-text--full { margin-top: 0.375rem; padding: 0.5rem 0.625rem; font-size: 0.6875rem; line-height: 1.55; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.03); } .consent-block__error { margin-top: 0.25rem; margin-left: 1.6875rem; } .plan-subscribe-form .plan-consent-hint { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0.625rem 0 0.75rem; padding: 0.75rem 0.875rem; border-radius: var(--radius); border: 1px solid rgba(229, 177, 62, 0.28); background: rgba(229, 177, 62, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); } .plan-subscribe-form .plan-consent-hint[hidden] { display: none !important; } .plan-consent-hint__icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(229, 177, 62, 0.16); color: var(--copper-400); } .plan-consent-hint__text { margin: 0; padding-top: 0.125rem; font-size: 0.8125rem; line-height: 1.5; color: var(--text-light-primary); } body.light-theme .plan-subscribe-form .plan-consent-hint { background: #FFFBEB; border-color: rgba(180, 83, 9, 0.22); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); } body.light-theme .plan-consent-hint__icon { background: rgba(180, 83, 9, 0.12); color: var(--copper-500); } body.light-theme .plan-consent-hint__text { color: var(--marine-900); } .plan-mail-btn { display: flex; justify-content: center; align-items: center; } .plan-mail-btn__inner { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .plan-mail-btn__icon { flex-shrink: 0; } .plan-team-cta { border-top: 1px solid var(--border-light); padding-top: 1rem; margin-top: 0.75rem; } .plan-team-cta__text { font-size: 0.8rem; color: var(--text-light-muted); margin-bottom: 0.75rem; line-height: 1.55; } /* ── Plans page layout ───────────────────────────────────── */ .plans-page { max-width: 1100px; margin: 0 auto; } .plans-page__header { text-align: center; margin-bottom: 2.5rem; } .plans-page__title { font-size: 1.75rem; margin-bottom: 0.5rem; } .plans-page__lead { color: var(--text-light-muted); max-width: 540px; margin: 0 auto; line-height: 1.6; } .plans-page__header .plans-page__ruler { display: block; max-width: 520px; width: 100%; margin: 1.5rem auto 0; } .plans-expired-alert { max-width: 640px; margin: 0 auto 1.5rem; display: grid; grid-template-columns: 2.25rem 1fr; align-items: start; gap: 0.75rem 0.875rem; padding: 0.875rem 1rem; background: rgba(229, 177, 62, 0.08); border: 1px solid rgba(229, 177, 62, 0.28); border-radius: var(--radius-lg); } .plans-expired-alert__icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(229, 177, 62, 0.14); color: var(--copper-400); } .plans-expired-alert__title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-light-primary); } .plans-expired-alert__text { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-light-muted); } /* ── Subscription expired banner (landing page) ─────────── */ .sub-expired-banner { max-width: 1100px; margin: 0 auto; padding: 0.875rem 1.25rem; display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: 0.75rem 1rem; background: rgba(229, 177, 62, 0.08); border-bottom: 1px solid rgba(229, 177, 62, 0.28); } .sub-expired-banner__icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(229, 177, 62, 0.14); color: var(--copper-400); } .sub-expired-banner__title { margin: 0 0 0.2rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-light-primary); } .sub-expired-banner__text { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-light-muted); } .sub-expired-banner__cta { white-space: nowrap; } body.light-theme .sub-expired-banner { background: rgba(184, 150, 46, 0.08); border-bottom-color: rgba(184, 150, 46, 0.25); } body.light-theme .sub-expired-banner__icon { background: rgba(184, 150, 46, 0.12); color: var(--copper-500, #B8962E); } body.light-theme .sub-expired-banner__title { color: #252525; } body.light-theme .sub-expired-banner__text { color: #767676; } @media (max-width: 720px) { .sub-expired-banner { grid-template-columns: 2.25rem 1fr; padding: 0.75rem 1rem; } .sub-expired-banner__cta { grid-column: 1 / -1; justify-self: start; } } /* ── Chat access notice (toast, no subscription) ─────────── */ .chat-access-notice { position: fixed; z-index: 10050; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(1rem); width: min(440px, calc(100vw - 2rem)); display: grid; grid-template-columns: 2.25rem 1fr auto; grid-template-rows: auto auto; align-items: start; gap: 0.625rem 0.75rem; padding: 0.875rem 1rem; background: var(--marine-900, #0A1628); border: 1px solid rgba(229, 177, 62, 0.35); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; } .chat-access-notice--visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .chat-access-notice__icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(229, 177, 62, 0.14); color: var(--copper-400); } .chat-access-notice__title { margin: 0 0 0.2rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-light-primary); } .chat-access-notice__text { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-light-muted); } .chat-access-notice__cta { grid-column: 2 / 3; grid-row: 2; justify-self: start; white-space: nowrap; } .chat-access-notice__close { grid-column: 3; grid-row: 1 / 3; align-self: start; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--text-light-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .chat-access-notice__close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-light-primary); } .sidebar-link--locked { opacity: 0.72; } .bottom-nav-item--locked { opacity: 0.65; } body.light-theme .chat-access-notice { background: #fff; border-color: rgba(184, 150, 46, 0.35); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } body.light-theme .chat-access-notice__icon { background: rgba(184, 150, 46, 0.12); color: var(--copper-500, #B8962E); } body.light-theme .chat-access-notice__title { color: var(--marine-900); } body.light-theme .chat-access-notice__text { color: var(--text-light-muted); } body.light-theme .chat-access-notice__close:hover { background: rgba(0, 0, 0, 0.05); color: var(--marine-900); } @media (max-width: 768px) { .chat-access-notice { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } body.no-bottom-nav .chat-access-notice { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); } } body.light-theme .plans-expired-alert { background: rgba(180, 115, 65, 0.08); border-color: rgba(180, 115, 65, 0.22); } .plans-active-alert { --plans-alert-icon: 2.25rem; max-width: 640px; margin: 0 auto 1.5rem; display: grid; grid-template-columns: var(--plans-alert-icon) 1fr auto; align-items: center; gap: 0.625rem 0.875rem; padding: 0.75rem 1rem; background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .plans-active-alert__icon { width: var(--plans-alert-icon); height: var(--plans-alert-icon); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: var(--marine-50); color: var(--marine-400); } .plans-active-alert__info { min-width: 0; } .plans-active-alert__title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; line-height: 1.3; font-size: 0.875rem; } .plans-active-alert__label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--marine-400); font-family: var(--font-family-base); padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); background: rgba(229, 177, 62, 0.12); line-height: 1.2; } .plans-active-alert__plan { font-size: 0.9375rem; font-weight: 600; color: var(--text-light-primary); } .plans-active-alert__meta { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--text-light-muted); font-family: var(--font-family-base); line-height: 1.3; } .plans-active-alert__action { margin: 0; flex-shrink: 0; } .plans-active-alert__btn { min-height: 34px; padding: 0.35rem 0.75rem; font-size: 0.8125rem; white-space: nowrap; } @media (max-width: 767px) { .plans-page .plans-active-alert { --plans-alert-icon: 2rem; grid-template-columns: var(--plans-alert-icon) 1fr; grid-template-areas: "icon info" "action action"; gap: 0.5rem 0.625rem; padding: 0.625rem 0.75rem; margin-bottom: 1.25rem; max-width: none; width: 100%; box-sizing: border-box; } .plans-page .plans-active-alert__icon { grid-area: icon; align-self: start; margin-top: 0.125rem; } .plans-page .plans-active-alert__info { grid-area: info; } .plans-page .plans-active-alert__action { grid-area: action; width: 100%; } .plans-page .plans-active-alert__btn { width: 100%; min-height: 40px; justify-content: center; } } @media (min-width: 480px) and (max-width: 767px) { .plans-page .plans-active-alert { grid-template-columns: var(--plans-alert-icon) 1fr auto; grid-template-areas: "icon info action"; align-items: center; } .plans-page .plans-active-alert__icon { align-self: center; margin-top: 0; } .plans-page .plans-active-alert__action { width: auto; } .plans-page .plans-active-alert__btn { width: auto; min-height: 34px; } } .plans-enterprise { margin-top: 2.5rem; max-width: 700px; margin-left: auto; margin-right: auto; background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1.5rem; } .plans-enterprise__head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .plans-enterprise__icon { flex-shrink: 0; margin-top: 0.125rem; } .plans-enterprise__title { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0; } .plans-enterprise__text { font-size: 0.8125rem; color: var(--text-light-muted); line-height: 1.6; margin-bottom: 1rem; } .plans-enterprise__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .plans-payment-notice { text-align: center; margin-top: 2rem; padding: 1rem; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 0.8rem; color: var(--text-light-muted); } .plans-test-mode { text-align: center; margin-top: 2rem; padding: 1.25rem; border: 1px dashed var(--border-light); border-radius: var(--radius); max-width: 600px; margin-left: auto; margin-right: auto; } .plans-test-mode__label { font-family: var(--font-family-base); font-size: 0.75rem; color: var(--copper-500); margin-bottom: 0.375rem; } .plans-test-mode__text { font-size: 0.8125rem; color: var(--text-light-muted); margin: 0; } .plans-faq { margin-top: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .plans-faq__title { font-size: 1.125rem; margin-bottom: 1.25rem; } .plans-faq__list { display: flex; flex-direction: column; gap: 1rem; } .plans-faq__item { background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem 1.125rem; } .plans-faq__item summary { font-weight: 500; cursor: pointer; user-select: none; list-style: none; padding-right: 1.5rem; position: relative; line-height: 1.45; } .plans-faq__item summary::-webkit-details-marker { display: none; } .plans-faq__item summary::after { content: '+'; position: absolute; right: 0; top: 0; font-family: var(--font-family-base); color: var(--marine-400); font-size: 1.125rem; line-height: 1; } .plans-faq__item[open] summary::after { content: '−'; } .plans-faq__item p { margin-top: 0.625rem; color: var(--text-light-muted); font-size: 0.875rem; line-height: 1.6; } /* ── Alert / flash ───────────────────────────────────────── */ .alert { padding: 0.875rem 1.125rem; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.65; border: 1px solid var(--border-light); background: var(--surface-light); color: var(--text-light-primary); } .alert a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .alert a:hover { opacity: 0.85; } .alert-success { background: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-text); } .alert-error, .alert-danger { background: var(--alert-error-bg); border-color: var(--alert-error-border); color: var(--alert-error-text); } .alert-warning { background: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-text); } .alert-info { background: var(--alert-info-bg); border-color: var(--alert-info-border); color: var(--alert-info-text); } /* Welcome flash after registration */ .app-flash { margin-bottom: 1.25rem; } .app-flash--welcome { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.125rem; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: var(--surface-light); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .app-flash__icon { flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(229, 177, 62, 0.14); color: var(--copper-400); } .app-flash__body { min-width: 0; padding-top: 0.125rem; } .app-flash__title { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 600; color: var(--text-light-primary); line-height: 1.35; } .app-flash__text { margin: 0; font-size: 0.875rem; color: var(--text-light-muted); line-height: 1.55; } body.light-theme .app-flash--welcome { background: #fff; border-color: #E8E8E8; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } body.light-theme .app-flash__icon { background: var(--marine-50); color: var(--copper-500); } body.light-theme .app-flash__title { color: var(--marine-900); } body.light-theme .app-flash__text { color: var(--text-light-muted); } /* Themed checkboxes (plans, register, history, admin, etc.) */ body.light-theme input[type="checkbox"], body.light-theme .consent-check { background: #fff; border-color: #CBD5E1; } body.light-theme input[type="checkbox"]:hover:not(:checked), body.light-theme .consent-check:hover:not(:checked) { border-color: var(--copper-500, #B45309); box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.1); } body.light-theme input[type="checkbox"]:checked, body.light-theme .consent-check:checked { background: var(--copper-500, #B45309); border-color: var(--copper-500, #B45309); } body.light-theme input[type="checkbox"]:checked::after, body.light-theme .consent-check:checked::after { border-color: #fff; } body.light-theme input[type="radio"] { background: #fff; border-color: #CBD5E1; } body.light-theme input[type="radio"]:hover:not(:checked) { border-color: var(--copper-500, #B45309); box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.1); } body.light-theme input[type="radio"]:checked { border-color: var(--copper-500, #B45309); background: #fff; box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12); } body.light-theme input[type="radio"]:checked::after { background: var(--copper-500, #B45309); } body.light-theme .consent-text a { color: var(--copper-600, #9A7B1A); } body.light-theme .consent-text a:hover { color: var(--copper-500, #B8962E); } body.light-theme .consent-details__toggle:hover { color: var(--copper-600, #9A7B1A); } body.light-theme .consent-text--full { background: rgba(154, 123, 26, 0.05); border-color: #E8E8E8; } /* ── Tables ──────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table th { text-align: left; padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light-muted); border-bottom: 1px solid var(--border-light); font-family: var(--font-family-base); } .data-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; } .data-table tbody tr:hover { background: var(--marine-50); } /* ── Badge ───────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; font-size: 0.6875rem; font-weight: 600; border-radius: var(--radius-sm); font-family: var(--font-family-base); text-transform: uppercase; letter-spacing: 0.04em; } .badge-success { background: rgba(16,185,129,0.12); color: #34D399; } .badge-danger { background: rgba(239,68,68,0.12); color: #FCA5A5; } .badge-marine { background: var(--marine-100); color: var(--marine-400); } .badge-copper { background: rgba(245,166,35,0.15); color: var(--copper-400); } /* ── Ruler decorative element ────────────────────────────── */ .ruler { height: 20px; background: repeating-linear-gradient( 90deg, var(--border-light), var(--border-light) 1px, transparent 1px, transparent 10px ); position: relative; margin: 1rem 0; } .ruler::before, .ruler::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); height: 12px; width: 1px; background: var(--text-light-muted); } .ruler::before { left: 0; } .ruler::after { right: 0; } /* ── Engineering mode grid overlay ──────────────────────── */ @keyframes drawLine { from { width: 0; } to { width: 100%; } } .eng-coordinates { position: fixed; bottom: 1rem; right: 1rem; font-family: var(--font-family-base); font-size: 0.6875rem; color: var(--marine-400); background: rgba(26, 28, 30, 0.85); padding: 0.25rem 0.625rem; border-radius: 2px; display: none; z-index: 999; } body.engineering-mode .eng-coordinates { display: block; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { .app-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } .sidebar { display: none; border-right: none; border-bottom: 1px solid var(--border-light); } .sidebar.open { display: block; } .plans-page .plans-grid { grid-template-columns: 1fr; margin-top: 1.25rem; } } /* ── Print (for engineers who want paper) ────────────────── */ @media print { .navbar, .sidebar, .chat-input-bar { display: none; } body { background: white; } .gost-source-item { break-inside: avoid; } } /* ══════════════════════════════════════════════════════════════ THEME TOGGLE SWITCH (sun — track/thumb — moon) ══════════════════════════════════════════════════════════════ */ .theme-toggle-switch { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: 100px; color: rgba(255,255,255,0.75); transition: color 0.2s, background 0.2s; } .theme-toggle-switch:hover { color: #fff; background: rgba(255,255,255,0.08); } .theme-toggle-switch:active { transform: scale(0.95); } .theme-toggle-switch svg { flex-shrink: 0; } /* Track */ .tts-track { position: relative; width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); flex-shrink: 0; transition: background 0.25s, border-color 0.25s; } .tts-track--on { background: var(--copper-500, #b07040); border-color: var(--copper-500, #b07040); } /* Thumb */ .tts-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform 0.25s cubic-bezier(.4,0,.2,1); } .tts-thumb--on { transform: translateX(16px); } /* Light theme adjustments */ body.light-theme .theme-toggle-switch { color: rgba(15,23,42,0.55); } body.light-theme .theme-toggle-switch:hover { color: rgba(15,23,42,0.9); background: rgba(15,23,42,0.06); } body.light-theme .tts-track { background: rgba(15,23,42,0.12); border-color: rgba(15,23,42,0.2); } /* Light + atop transparent navbar — keep white icons */ body.light-theme .navbar.navbar--atop .theme-toggle-switch { color: rgba(15,23,42,0.55); } body.light-theme .navbar.navbar--atop .theme-toggle-switch:hover { color: rgba(15,23,42,0.9); background: rgba(15,23,42,0.06); } body.light-theme .navbar.navbar--atop .tts-track { background: rgba(15,23,42,0.12); border-color: rgba(15,23,42,0.2); } /* ══════════════════════════════════════════════════════════════ LIGHT THEME FIXES ══════════════════════════════════════════════════════════════ */ /* 1. btn-primary as gets overridden by body.light-theme a { color: marine-600 } (that rule has higher specificity). Force white text on all button variants. */ body.light-theme .btn-primary { background: var(--marine-800, #252525); border-color: var(--marine-800, #252525); color: #fff !important; text-decoration: none; box-shadow: none; } body.light-theme a.btn-primary:hover, body.light-theme a.btn-primary:focus-visible, body.light-theme .btn-primary:hover, body.light-theme .btn-primary:focus-visible { background: var(--marine-900, #1E1E1E) !important; border-color: var(--marine-900, #1E1E1E) !important; color: #fff !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } body.light-theme a.btn-primary:active, body.light-theme .btn-primary:active { background: var(--copper-600, #9A7B1A) !important; border-color: var(--copper-600, #9A7B1A) !important; color: #fff !important; text-decoration: none !important; transform: translateY(0); box-shadow: none; } body.light-theme .btn-copper, body.light-theme .btn-copper:hover { color: #fff !important; } /* 2. Logout button in app navbar (inline style is overridden by !important) */ body.light-theme .navbar-logout-btn { background: transparent !important; border-color: rgba(0, 0, 0, 0.18) !important; color: var(--text-light-muted) !important; } body.light-theme .navbar-logout-btn:hover { background: rgba(0, 0, 0, 0.05) !important; color: var(--marine-900) !important; } /* 3. Vertical separator in app navbar */ body.light-theme .navbar-sep { border-left-color: rgba(0, 0, 0, 0.1) !important; } /* ══════════════════════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════════════════════ */ .pagination-info { font-size: 0.875rem; color: var(--text-main, #E2E8F0); margin-bottom: 0; } .pagination-info span { font-weight: normal; color: inherit; } .pagination-list { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; } .pagination-item { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1; text-decoration: none; color: #94A3B8; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .pagination-item:hover { background: rgba(255,255,255,0.1); color: #E2E8F0; border-color: rgba(255,255,255,0.2); text-decoration: none; } .pagination-item--current { background: #C99A2E; color: #1A1C1E; border-color: #A88325; cursor: default; } .pagination-item--current:hover { background: #C99A2E; color: #1A1C1E; } .pagination-item--disabled { opacity: 0.4; cursor: default; } .pagination-item--disabled:hover { background: rgba(255,255,255,0.05); color: #94A3B8; } .pagination-item--dots { background: transparent; border-color: transparent; cursor: default; padding: 0 0.25rem; } .pagination-btn { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; font-size: 0.875rem; color: #94A3B8; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; text-decoration: none; transition: background 0.15s; } .pagination-btn:hover { background: rgba(255,255,255,0.1); color: #E2E8F0; text-decoration: none; } .pagination-btn--disabled { opacity: 0.4; cursor: default; } body.light-theme .pagination-info { color: var(--text-light-primary); } body.light-theme .pagination-info span { color: inherit; } body.light-theme .pagination-item { color: var(--text-light-muted); background: #fff; border-color: var(--border-light); } body.light-theme .pagination-item:hover { background: var(--marine-50); color: var(--marine-900); border-color: var(--marine-300); } body.light-theme .pagination-item--current { background: var(--marine-900); color: #fff; border-color: var(--marine-900); } body.light-theme .pagination-item--disabled:hover { background: #fff; color: var(--text-light-muted); } body.light-theme .pagination-btn { color: var(--text-light-muted); background: #fff; border-color: var(--border-light); } body.light-theme .pagination-btn:hover { background: var(--marine-50); color: var(--marine-900); } /* ══════════════════════════════════════════════════════════════ PALETTE — Graphite (графитовая: технический серый + золотой акцент) Применяется при: body.palette-default ══════════════════════════════════════════════════════════════ */ body.palette-default:not(.light-theme) { --bg-primary: #1A1C1E; --bg-secondary: #24262B; --bg-tertiary: #2A2D33; --bg-light: #1A1C1E; --surface-light: #24262B; --border-light: #34373D; --text-light-primary: #E8E9EB; --text-light-muted: #8B8F99; --text-muted: #6B6F78; --marine-50: #2A2D33; --marine-100: #2E3138; --marine-200: #34373D; --marine-300: #34373D; --marine-400: #E5B13E; --marine-500: #E5B13E; --marine-600: #E5B13E; --marine-700: #C99A2E; --marine-800: #24262B; --marine-900: #1A1C1E; --marine-950: #141618; --copper-300: #F0D080; --copper-400: #EBC04A; --copper-500: #E5B13E; --copper-600: #C99A2E; --accent-secondary: #5F636E; --color-primary: #E5B13E; --color-primary-hover: #C99A2E; --color-accent: #E5B13E; --grid-color: rgba(229, 177, 62, 0.038); } /* ══════════════════════════════════════════════════════════════ PALETTE — Slate Gray (Индустриальная, тёмно-синяя + оранжевый) Применяется при: body.palette-slate ══════════════════════════════════════════════════════════════ */ body.palette-slate:not(.light-theme) { --bg-primary: #0B1121; --bg-secondary: #1E293B; --bg-tertiary: #263349; --bg-light: #0B1121; --surface-light: #1E293B; --border-light: #2E3F55; --text-light-primary: #F1F5F9; --text-light-muted: #94A3B8; --text-muted: #64748B; --marine-50: #192435; --marine-100: #1E293B; --marine-200: #263349; --marine-300: #3A5070; --marine-400: #94A3B8; --marine-500: #F97316; --marine-600: #F97316; --marine-700: #EA6700; --marine-800: #1E293B; --marine-900: #0B1121; --marine-950: #07101C; --copper-300: #FED7AA; --copper-400: #FB923C; --copper-500: #F97316; --copper-600: #EA6700; --color-primary: #F97316; --color-primary-hover: #EA6700; --color-accent: #F97316; --grid-color: rgba(249, 115, 22, 0.04); /* Navbar badge & bottom-nav */ --accent-secondary: #F97316; } /* Slate: кнопки-акценты */ body.palette-slate:not(.light-theme) .btn-primary { background: #F97316; border-color: #EA6700; box-shadow: 0 2px 10px rgba(249, 115, 22, 0.28); } body.palette-slate:not(.light-theme) .btn-primary:hover { background: #EA6700; box-shadow: 0 4px 18px rgba(249, 115, 22, 0.40); } body.palette-slate:not(.light-theme) .btn-copper { background: #F97316; border-color: #EA6700; } body.palette-slate:not(.light-theme) .btn-copper:hover { background: #EA6700; } /* Slate: навигация снизу мобиль */ body.palette-slate:not(.light-theme) .bottom-nav-item.active, body.palette-slate:not(.light-theme) .bottom-nav-item:hover { color: #F97316; } body.palette-slate:not(.light-theme) .bottom-nav-item.active svg { stroke: #F97316; } /* ══════════════════════════════════════════════════════════════ PALETTE — Dark Olive (Минимум усталости, оливковые тона) Применяется при: body.palette-olive ══════════════════════════════════════════════════════════════ */ body.palette-olive:not(.light-theme) { --bg-primary: #13130F; --bg-secondary: #1E1E19; --bg-tertiary: #26261F; --bg-light: #13130F; --surface-light: #1E1E19; --border-light: #2C2C24; --text-light-primary: #E8E8DC; --text-light-muted: #9CA38F; --text-muted: #6B7260; --marine-50: #1A1A14; --marine-100: #1E1E19; --marine-200: #26261F; --marine-300: #3C3C31; --marine-400: #A68A56; --marine-500: #A68A56; --marine-600: #A68A56; --marine-700: #8A7040; --marine-800: #1E1E19; --marine-900: #13130F; --marine-950: #0C0C09; --copper-300: #D4BA8A; --copper-400: #C8A464; --copper-500: #A68A56; --copper-600: #8A7040; --color-primary: #A68A56; --color-primary-hover: #8A7040; --color-accent: #A68A56; --grid-color: rgba(166, 138, 86, 0.038); --accent-secondary: #6F8F6F; } /* Olive: кнопки-акценты */ body.palette-olive:not(.light-theme) .btn-primary { background: #A68A56; border-color: #8A7040; box-shadow: 0 2px 10px rgba(166, 138, 86, 0.25); } body.palette-olive:not(.light-theme) .btn-primary:hover { background: #8A7040; box-shadow: 0 4px 18px rgba(166, 138, 86, 0.38); } body.palette-olive:not(.light-theme) .btn-copper { background: #A68A56; border-color: #8A7040; } body.palette-olive:not(.light-theme) .btn-copper:hover { background: #8A7040; } /* Olive: сообщения пользователя */ body.palette-olive:not(.light-theme) .message-user .message-bubble { background: #A68A56; box-shadow: 0 2px 12px rgba(166, 138, 86, 0.22); } /* Olive: навигация снизу мобиль */ body.palette-olive:not(.light-theme) .bottom-nav-item.active, body.palette-olive:not(.light-theme) .bottom-nav-item:hover { color: #C8A464; } body.palette-olive:not(.light-theme) .bottom-nav-item.active svg { stroke: #C8A464; } /* Olive: боковая панель активная ссылка */ body.palette-olive:not(.light-theme) .sidebar-link.active { color: #C8A464; border-left-color: #A68A56; } /* ══════════════════════════════════════════════════════════════ DEFAULT DARK THEME — Editorial (тёмный вариант светлой редакционной темы) Применяется по умолчанию; отключается при body.palette-default ══════════════════════════════════════════════════════════════ */ body:not(.light-theme):not(.palette-default) { --bg-primary: #1E1E1E; --bg-secondary: #252525; --bg-tertiary: #2E2E2E; --bg-light: #1A1A1A; --surface-light: #252525; --border-light: #3A3A3A; --text-light-primary: #E8E8E8; --text-light-muted: #989898; --text-muted: #767676; --marine-50: #2A2A2A; --marine-100: #303030; --marine-200: #3A3A3A; --marine-300: #4A4A4A; --marine-400: #E8E8E8; --marine-500: #F3F3F3; --marine-600: #F3F3F3; --marine-700: #FFFFFF; --marine-800: #E8E8E8; --marine-900: #1E1E1E; --marine-950: #141414; --copper-400: #C9A227; --copper-500: #B8962E; --copper-600: #9A7B1A; --color-primary: #F3F3F3; --color-primary-hover: #FFFFFF; --color-accent: #C9A227; --link-color: #E8E8E8; --link-hover-color: #FFFFFF; --grid-color: rgba(255, 255, 255, 0.035); --accent-secondary: #767676; background-color: var(--bg-light); background-image: none; } body:not(.light-theme):not(.palette-default) a { color: var(--link-color); text-decoration: none; } body:not(.light-theme):not(.palette-default) a:hover:not(.btn):not(.lp-btn-primary):not(.lp-btn-secondary) { color: var(--link-hover-color); text-decoration: underline; } body:not(.light-theme):not(.palette-default) .navbar { background: rgba(30, 30, 30, 0.98); border-bottom-color: #3A3A3A; box-shadow: none; } body:not(.light-theme):not(.palette-default) .navbar::after { background: rgba(255, 255, 255, 0.08); height: 1px; } body:not(.light-theme):not(.palette-default) .navbar-brand { color: var(--marine-800); } body:not(.light-theme):not(.palette-default) .navbar-brand .brand-accent { color: var(--copper-500); } body:not(.light-theme):not(.palette-default) .navbar-nav a:not(.btn) { color: var(--text-light-primary); } body:not(.light-theme):not(.palette-default) .navbar-nav a:not(.btn):hover, body:not(.light-theme):not(.palette-default) .navbar-nav a:not(.btn).active { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); text-decoration: none; } body:not(.light-theme):not(.palette-default) .logo-ring { stroke: #FFFFFF; } body:not(.light-theme):not(.palette-default) .logo-ai { fill: var(--copper-500); } body:not(.light-theme):not(.palette-default) .logo-gost { fill: #E8E8E8; } body:not(.light-theme):not(.palette-default) .logo-sub { fill: #989898; } body:not(.light-theme):not(.palette-default) .navbar-user-btn { background: transparent; border-color: rgba(255, 255, 255, 0.14); color: var(--text-light-primary); } body:not(.light-theme):not(.palette-default) .navbar-user-btn:hover, body:not(.light-theme):not(.palette-default) .navbar-user-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); } body:not(.light-theme):not(.palette-default) .burger-btn span { background: var(--marine-800); } body:not(.light-theme):not(.palette-default) .mobile-theme-btn { color: var(--marine-800); } body:not(.light-theme):not(.palette-default) .sidebar-link { color: var(--text-light-primary); } body:not(.light-theme):not(.palette-default) .sidebar-link:hover { background: var(--marine-50); border-left-color: var(--marine-300); } body:not(.light-theme):not(.palette-default) .sidebar-link.active { color: #F3F3F3; background: var(--marine-50); border-left-color: #F3F3F3; } body:not(.light-theme):not(.palette-default) .message-ai .message-avatar { background: var(--marine-50); color: var(--copper-500); border-color: var(--border-light); } body:not(.light-theme):not(.palette-default) .message-ai .message-bubble { background: var(--surface-light); color: var(--text-light-primary); border: 1px solid var(--border-light); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } body:not(.light-theme):not(.palette-default) .message-ai .message-bubble code { background: var(--marine-50); color: #E8E8E8; } body:not(.light-theme):not(.palette-default) .message-user .message-avatar { background: var(--marine-100); color: var(--marine-800); border: 1px solid var(--border-light); } body:not(.light-theme):not(.palette-default) .message-user .message-bubble { background: var(--marine-50); color: var(--text-light-primary); border: 1px solid var(--border-light); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } body:not(.light-theme):not(.palette-default) .btn-primary { background: #F3F3F3; border-color: #F3F3F3; color: #1E1E1E !important; box-shadow: none; } body:not(.light-theme):not(.palette-default) a.btn-primary:hover, body:not(.light-theme):not(.palette-default) a.btn-primary:focus-visible, body:not(.light-theme):not(.palette-default) .btn-primary:hover, body:not(.light-theme):not(.palette-default) .btn-primary:focus-visible { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #000000 !important; box-shadow: none !important; transform: none; } body:not(.light-theme):not(.palette-default) .btn-copper, body:not(.light-theme):not(.palette-default) .btn-copper:hover { color: #fff !important; } body:not(.light-theme):not(.palette-default) .user-menu-link:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; } body:not(.light-theme):not(.palette-default) .user-menu-link.active { background: var(--marine-50); color: #F3F3F3; } body:not(.light-theme):not(.palette-default) .bottom-nav-item.active, body:not(.light-theme):not(.palette-default) .bottom-nav-item:hover { color: #F3F3F3; } body:not(.light-theme):not(.palette-default) .bottom-nav-item.active svg { stroke: #F3F3F3; } body:not(.light-theme):not(.palette-default) .pagination-info { color: var(--text-light-primary); } body:not(.light-theme):not(.palette-default) .pagination-item { color: var(--text-light-muted); background: var(--surface-light); border-color: var(--border-light); } body:not(.light-theme):not(.palette-default) .pagination-item:hover { background: var(--marine-50); color: #FFFFFF; border-color: var(--marine-300); } body:not(.light-theme):not(.palette-default) .pagination-item--current { background: #F3F3F3; color: #1E1E1E; border-color: #F3F3F3; } body:not(.light-theme):not(.palette-default) .pagination-btn { color: var(--text-light-muted); background: var(--surface-light); border-color: var(--border-light); } body:not(.light-theme):not(.palette-default) .pagination-btn:hover { background: var(--marine-50); color: #FFFFFF; } /* ══════════════════════════════════════════════════════════════ PALETTE SWITCHER UI ══════════════════════════════════════════════════════════════ */ #paletteSwitcherWrap { display: none; } .palette-switcher { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(255,255,255,0.05); border-radius: 100px; border: 1px solid rgba(255,255,255,0.10); } .palette-switcher-label { font-size: 0.6rem; color: rgba(255,255,255,0.32); font-family: var(--font-family-base); letter-spacing: 0.05em; text-transform: uppercase; margin-right: 2px; user-select: none; } .palette-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; padding: 0; -webkit-tap-highlight-color: transparent; flex-shrink: 0; outline: none; } .palette-dot:hover { transform: scale(1.3); } .palette-dot:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 2px; } .palette-dot.p-active { border-color: rgba(255,255,255,0.70); box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.3); } .palette-dot[data-palette="default"] { background: linear-gradient(135deg, #E5B13E 0%, #5F636E 100%); } .palette-dot[data-palette="editorial"] { background: linear-gradient(135deg, #F3F3F3 0%, #252525 55%, #C9A227 100%); } .palette-dot[data-palette="slate"] { background: linear-gradient(135deg, #F97316 0%, #EA6700 100%); } .palette-dot[data-palette="olive"] { background: linear-gradient(135deg, #A68A56 0%, #6F7C4A 100%); } .palette-dot--hidden, .palette-dot[data-palette="slate"], .palette-dot[data-palette="olive"] { display: none !important; } /* ── Font presets ─────────────────────────────────────────── */ html.font-inter, body.font-inter { --font-family-base: 'Inter', system-ui, sans-serif; } html.font-golos, body.font-golos { --font-family-base: 'Golos Text', system-ui, sans-serif; } html.font-ptserif, body.font-ptserif, html.font-playfair, body.font-playfair { --font-family-base: 'PT Serif', Georgia, 'Times New Roman', serif; } html.font-literata, body.font-literata { --font-family-base: 'Literata', Georgia, serif; } html.font-georgia, body.font-georgia { --font-family-base: Georgia, 'Source Serif 4', serif; } html.font-times, body.font-times { --font-family-base: 'Times New Roman', 'Tinos', Times, serif; } html.font-garamond, body.font-garamond { --font-family-base: 'EB Garamond', Georgia, 'Times New Roman', serif; } body.font-inter code, body.font-golos code, body.font-ptserif code, body.font-literata code, body.font-georgia code, body.font-times code, body.font-garamond code, body.font-playfair code { font-family: 'JetBrains Mono', 'Fira Code', monospace; } #appFontSelect option[value="inter"] { font-family: 'Inter', system-ui, sans-serif; } #appFontSelect option[value="golos"] { font-family: 'Golos Text', system-ui, sans-serif; } #appFontSelect option[value="ptserif"] { font-family: 'PT Serif', Georgia, serif; } #appFontSelect option[value="literata"] { font-family: 'Literata', Georgia, serif; } #appFontSelect option[value="georgia"] { font-family: Georgia, 'Source Serif 4', serif; } #appFontSelect option[value="times"] { font-family: 'Times New Roman', 'Tinos', Times, serif; } #appFontSelect option[value="garamond"] { font-family: 'EB Garamond', Georgia, serif; } /* Скрываем переключатель шрифтов — используется Literata */ #fontSwitcherWrap { display: none !important; } /* Скрываем переключатель палитр в светлой теме */ body.light-theme #paletteSwitcherWrap { display: none !important; } /* ══════════════════════════════════════════════════════════════ PROFILE PAGE ══════════════════════════════════════════════════════════════ */ .profile-page { max-width: 860px; margin: 0 auto; width: 100%; } .profile-page__header { margin-bottom: 1.5rem; } .profile-page__title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.25rem; letter-spacing: -0.02em; } .profile-page__lead { color: var(--text-light-muted); font-size: 0.9375rem; line-height: 1.5; } .profile-page > .alert { margin-bottom: 1.25rem; } .profile-card { margin-bottom: 1.5rem; } .profile-card:last-child { margin-bottom: 0; } .profile-section-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 1.25rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--border-light); color: var(--text-light-primary); } .profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .profile-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .profile-form-grid .form-group { margin-bottom: 0; } .profile-form-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .profile-card--danger { border-color: rgba(245, 166, 35, 0.35); } .profile-delete-lead { font-size: 0.8125rem; line-height: 1.65; color: var(--text-light-muted); margin: 0 0 1rem; } .profile-delete-lead a { color: var(--marine-400); } .profile-delete-form { max-width: 360px; } .profile-delete-password { margin-bottom: 0.875rem; } .profile-delete-btn { color: var(--copper-400); border-color: rgba(245, 166, 35, 0.45); } .form-hint { font-size: 0.8125rem; color: var(--text-light-muted); margin-top: 0.35rem; line-height: 1.45; } .profile-empty { color: var(--text-light-muted); font-size: 0.9375rem; } .profile-sub-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; padding: 0 0.25rem; } .profile-sub-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.875rem; } .profile-sub-table th { text-align: left; padding: 0.5rem 0.75rem; color: var(--text-light-muted); font-weight: 500; font-size: 0.8125rem; border-bottom: 1px solid var(--border-light); white-space: nowrap; } .profile-sub-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; } .profile-sub-table tbody tr:last-child td { border-bottom: none; } .profile-sub-date { font-family: var(--font-family-base); font-size: 0.8125rem; white-space: nowrap; } .profile-sub-status { display: inline-block; font-size: 0.8125rem; font-weight: 500; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap; min-width: 6.5rem; text-align: center; } .profile-sub-status--active { color: var(--alert-success-text); background: var(--alert-success-bg); border-color: var(--alert-success-border); } .profile-sub-status--cancelled { color: var(--alert-error-text); background: var(--alert-error-bg); border-color: var(--alert-error-border); } .profile-sub-status--expired { color: var(--text-light-muted); background: var(--marine-50); border-color: var(--border-light); } .profile-sub-receipt-link { font-size: 0.8125rem; color: var(--copper-500); font-weight: 500; white-space: nowrap; } .profile-sub-receipt-link:hover { color: var(--copper-400); } .profile-sub-cards { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 0.75rem; } .profile-sub-card { background: var(--bg-tertiary, #2A2D33); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.75rem; } body.light-theme .profile-sub-card { background: #F8FAFC; border-color: #E2E8F0; } .profile-sub-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .profile-sub-card__plan { font-weight: 600; font-size: 1rem; color: var(--text-light-primary); line-height: 1.3; } .profile-sub-card__meta { display: grid; gap: 0.5rem; margin: 0; } .profile-sub-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.875rem; } .profile-sub-card__row dt { color: var(--text-light-muted); font-weight: 500; margin: 0; } .profile-sub-card__row dd { margin: 0; text-align: right; color: var(--text-light-primary); } .profile-sub-card__receipt { align-self: stretch; justify-content: center; } @media (max-width: 1023px) { .profile-sub-table-wrap { display: none; } .profile-sub-cards { display: flex; } .profile-form-grid { grid-template-columns: 1fr; } .profile-password-grid { grid-template-columns: 1fr; } .profile-password-confirm { grid-column: auto; } .profile-form-actions .btn { width: 100%; justify-content: center; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════════════ GOST DOCUMENT SOURCES (attribution) ══════════════════════════════════════════════════════════════ */ .gost-sources { margin: 0; font-size: 0.6875rem; line-height: 1.55; color: var(--text-light-muted); } .gost-sources a { color: var(--copper-300, #D4B84A); text-decoration: none; transition: color 0.15s; } .gost-sources a:hover { color: var(--copper-400, #C9A227); text-decoration: none; } .gost-sources--compact { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .gost-sources--footer { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .gost-sources--footer .gost-sources__label, .gost-sources--compact .gost-sources__label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-light-muted); opacity: 1; margin: 0; } .gost-sources__items { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .gost-sources__items a { font-size: 0.8125rem; } @media (min-width: 640px) { .gost-sources--footer, .gost-sources--compact { flex-direction: row; align-items: baseline; gap: 0.75rem; } } .gost-sources__label { opacity: 0.75; margin-right: 0.25rem; } .gost-sources__sep { margin: 0 0.35rem; color: var(--text-light-muted); opacity: 0.65; user-select: none; } .gost-sources--block { padding: 0.75rem 1rem; border-radius: var(--radius, 8px); border: 1px solid var(--border-light, rgba(255,255,255,0.1)); background: rgba(255,255,255,0.03); } .gost-sources--block .gost-sources__text { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.55; } .gost-sources--block .gost-sources__items { gap: 0.5rem; } .gost-sources__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .gost-sources__links a { font-size: 0.8125rem; } .docs-hero .gost-sources--block { margin-top: 1rem; border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65); } .docs-hero .gost-sources--block .gost-sources__label { color: var(--copper-300, #D4B84A); } .lf__sources { grid-column: 1 / -1; margin-top: 0.25rem; padding-top: 1rem; min-width: 0; max-width: 100%; box-sizing: border-box; } .lf__sources.gost-sources--footer { border: none; } .lf__sources .gost-sources__items { gap: 0.35rem 0.75rem; } .lf__sources .gost-sources__items a { overflow-wrap: anywhere; word-break: break-word; } body.light-theme .gost-sources { color: #767676; } body.light-theme .gost-sources a { color: var(--copper-600, #9A7B1A); } body.light-theme .gost-sources a:hover { color: var(--copper-500, #B8962E); text-decoration: none; } body.light-theme .gost-sources--block { background: rgba(15,23,42,0.03); border-color: #E8E8E8; } body.light-theme .docs-hero .gost-sources--block { background: rgba(15,23,42,0.04); border-color: var(--border-light, #E2E8F0); color: var(--text-light-muted, #64748B); } body.light-theme .docs-hero .gost-sources--block .gost-sources__label { color: var(--copper-600, #9A7B1A); } /* ══════════════════════════════════════════════════════════════ FONT SWITCHER UI ══════════════════════════════════════════════════════════════ */ .navbar-preferences { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .font-select-wrap { display: flex; align-items: center; max-width: 100%; } .font-select-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; } .font-select { appearance: none; -webkit-appearance: none; min-width: 7.5rem; max-width: 11rem; padding: 5px 1.75rem 5px 8px; font-size: 0.6875rem; line-height: 1.3; font-family: var(--font-family-base); color: rgba(255,255,255,0.88); color-scheme: dark; background: rgba(255,255,255,0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(255,255,255,0.55)' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; cursor: pointer; touch-action: manipulation; } body:not(.light-theme) .font-select option { background-color: var(--bg-secondary, #24262B); color: var(--text-light-primary, #E8E9EB); } .font-select:hover { border-color: rgba(255,255,255,0.28); background-color: rgba(255,255,255,0.09); } .font-select:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 2px; } body.light-theme .font-select { color: var(--marine-800); color-scheme: light; background-color: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(15,23,42,0.45)' d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); } body.light-theme .font-select option { background-color: #fff; color: var(--marine-800); } body.light-theme .font-select:hover { background-color: rgba(15,23,42,0.07); border-color: rgba(15,23,42,0.22); }