/* ==========================================================================
   Tokvian Theme Styles: Dark (Default) & Light Theme Support
   Adheres strictly to AGENTS.md: Typography >= 15px, comfortable spacing & hit targets
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Toggle Button (Shared & Dark Mode Base)
   -------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  max-width: 38px;
  max-height: 38px;
  padding: 0;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: #d0d0d8;
  box-sizing: border-box;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   2. Light Theme Design System Tokens
   -------------------------------------------------------------------------- */
[data-theme="light"],
html.theme-light {
  color-scheme: light;
  --bg: #f7f8fa;
  --panel: #ffffff;
  --line: rgba(0, 0, 0, 0.08);
  --line-hi: rgba(0, 0, 0, 0.16);
  --text: #11141a;
  --muted: #5e6573;
  --faint: #8a919e;
  --white: #ffffff;
  --accent: #00875a;
  --accent-hover: #006b47;
  --accent-rgb: 0, 135, 90;
}

/* Hide dark fractal noise overlay in light theme */
[data-theme="light"] body:before,
html.theme-light body:before {
  display: none !important;
}

/* Base Body & Scrollbar in Light Mode */
html.theme-light,
html.theme-light body {
  background-color: #f7f8fa !important;
  color: #11141a !important;
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent !important;
}

html.theme-light * {
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent !important;
}

html.theme-light ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

html.theme-light ::-webkit-scrollbar-track {
  background: transparent !important;
}

html.theme-light ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 6px !important;
}

html.theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.42) !important;
}

html.theme-light ::selection {
  background: rgba(0, 135, 90, 0.18) !important;
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   3. Theme Toggle in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .theme-toggle {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #333742 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .theme-toggle:hover {
  background: #f0f2f5 !important;
  border-color: #b8bec9 !important;
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   4. Brand Logo & Graphic Assets in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .logo {
  color: #11141a !important;
}

html.theme-light .logo-mark {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) !important;
}

html.theme-light .logo-mark:before {
  background: linear-gradient(160deg, #11141a, #4a4f5c) !important;
}

html.theme-light .logo-mark:after {
  background: linear-gradient(160deg, #323742, #7a8194) !important;
}

html.theme-light .logo small {
  color: #5e6573 !important;
  border-color: #d5d9e0 !important;
  background: #f0f2f5 !important;
}

/* Invert monochrome white vendor logos on light backgrounds */
html.theme-light img[src*="xai.svg"],
html.theme-light img[src*="grok.svg"],
html.theme-light img[src*="grok-dark.svg"],
html.theme-light img[src*="moonshot.svg"],
html.theme-light img[src*="moonshotai-dark.svg"],
html.theme-light img[src*="hermes.svg"],
html.theme-light img[src*="pi-coding-agent.svg"],
html.theme-light img[src*="cline.svg"],
html.theme-light img[src*="cursor.svg"] {
  filter: invert(1) !important;
}

/* --------------------------------------------------------------------------
   5. Buttons & Controls in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .btn.primary {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.theme-light .btn.primary:hover:not(:disabled) {
  background: #252832 !important;
  border-color: #252832 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
  transform: translateY(-1px) !important;
}

html.theme-light .btn:not(.primary):not(.subtle) {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .btn:not(.primary):not(.subtle):hover:not(:disabled) {
  background: #f2f4f7 !important;
  border-color: #b8bec9 !important;
  color: #11141a !important;
}

html.theme-light .btn.subtle {
  background: transparent !important;
  border-color: transparent !important;
  color: #5e6573 !important;
}

html.theme-light .btn.subtle:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #11141a !important;
}

html.theme-light .icon-btn {
  color: #5e6573 !important;
}

html.theme-light .icon-btn:hover {
  background: #f0f2f5 !important;
  color: #11141a !important;
  border-color: #d5d9e0 !important;
}

/* --------------------------------------------------------------------------
   6. Topbar & Header Navigation in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .app-topbar,
html.theme-light .topnav {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .breadcrumb {
  color: #8a919e !important;
}

html.theme-light .crumb-brand {
  color: #11141a !important;
}

html.theme-light .breadcrumb span:last-child {
  color: #11141a !important;
}

html.theme-light .topbar-news-link {
  color: #374151 !important;
}
html.theme-light .topbar-news-link:hover {
  color: #059669 !important;
}
html.theme-light .topbar-news-link svg,
html.theme-light .topbar-news-link .icon {
  color: #059669 !important;
}

html.theme-light .user-email,
html.theme-light .topnav-account .user-email,
html.theme-light .topbar-account .user-email,
html.theme-light .app-topbar .user-email {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .avatar,
html.theme-light .topnav-account .avatar,
html.theme-light .topbar-account .avatar,
html.theme-light .app-topbar .avatar {
  background: #e9ecf2 !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .topnav-account,
html.theme-light .topbar-account {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #11141a !important;
}

html.theme-light .topnav-account:hover,
html.theme-light .topbar-account:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #000000 !important;
}

html.theme-light .topbar-balance,
html.theme-light .currency-toggle,
html.theme-light .lang-toggle {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .topbar-balance:hover,
html.theme-light .currency-toggle:hover,
html.theme-light .lang-toggle:hover {
  background: #f0f2f5 !important;
  border-color: #b8bec9 !important;
  color: #11141a !important;
}

html.theme-light .currency-menu.is-open .currency-toggle,
html.theme-light .lang-menu.is-open .lang-toggle {
  background: #e9ecf2 !important;
  border-color: #b8bec9 !important;
  color: #11141a !important;
}

html.theme-light .currency-dropdown,
html.theme-light .lang-dropdown {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

html.theme-light .currency-option,
html.theme-light .lang-option {
  color: #2b303b !important;
}

html.theme-light .currency-option:hover,
html.theme-light .lang-option:hover {
  background: #f2f4f7 !important;
  color: #11141a !important;
}

html.theme-light .currency-option.active,
html.theme-light .currency-option.is-active,
html.theme-light .lang-option.active,
html.theme-light .lang-option.is-active {
  background: #e9ecf2 !important;
  color: #11141a !important;
}

html.theme-light .currency-option.active .currency-option-code,
html.theme-light .currency-option.is-active .currency-option-code {
  font-weight: 500 !important;
}

html.theme-light .currency-arrow {
  color: #3b404d !important;
}

html.theme-light .currency-toggle:hover .currency-arrow,
html.theme-light .currency-menu.is-open .currency-arrow {
  color: #11141a !important;
}

html.theme-light .currency-option-symbol {
  color: #4b5262 !important;
  font-weight: 400 !important;
}

html.theme-light .currency-option.active .currency-option-symbol,
html.theme-light .currency-option.is-active .currency-option-symbol {
  color: #11141a !important;
  font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   7. Sidebar & Workspace Navigation in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e3e6eb !important;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .side-nav a {
  color: #4b5260 !important;
  box-shadow: none !important;
}

html.theme-light .side-nav a:hover {
  background: #e9ecf2 !important;
  border-color: #d5d9e0 !important;
  color: #11141a !important;
  box-shadow: none !important;
}

html.theme-light .side-nav a.active,
html.theme-light .side-nav a:active {
  background: #e9ecf2 !important;
  border-color: #d5d9e0 !important;
  color: #11141a !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html.theme-light .side-nav a.active .icon,
html.theme-light .side-nav a:hover .icon {
  color: #11141a !important;
  stroke: #11141a !important;
}

.side-nav a,
.side-nav a.active,
.side-nav a:active,
.side-nav a:focus {
  box-shadow: none !important;
}

html.theme-light .nav-group-label,
html.theme-light .workspace-label {
  color: #8a919e !important;
}

html.theme-light .sidebar-bottom .sidebar-topup-btn {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
}

html.theme-light .side-promo {
  background: #f4f5f8 !important;
  border: 1px solid #e3e6eb !important;
  color: #11141a !important;
}

html.theme-light .side-promo p {
  color: #5e6573 !important;
}

/* --------------------------------------------------------------------------
   8. Cards, Panels, Metrics & Glass in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .panel,
html.theme-light .glass,
html.theme-light .metric,
html.theme-light .catalog-card,
html.theme-light .feature,
html.theme-light .pricing-panel,
html.theme-light .key-card,
html.theme-light .onboarding,
html.theme-light .quickstart,
html.theme-light .settings-panel,
html.theme-light .doc-content .panel,
html.theme-light .docs-toc,
html.theme-light .payment-card,
html.theme-light .billing-card {
  background: #ffffff !important;
  border-color: #e3e6eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.02) !important;
  color: #11141a !important;
}

html.theme-light .metric:first-child {
  background: #ffffff !important;
  border-color: #d5d9e0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html.theme-light .metric-top,
html.theme-light .metric-foot,
html.theme-light .panel-head p {
  color: #5e6573 !important;
}

html.theme-light .metric-value,
html.theme-light .panel-head h2,
html.theme-light .account-safety h2 {
  color: #11141a !important;
}

html.theme-light .page-header h1 {
  color: #11141a !important;
}

html.theme-light .page-header p {
  color: #5e6573 !important;
}

html.theme-light .pill {
  background: #f0f2f5 !important;
  border-color: #d5d9e0 !important;
  color: #333742 !important;
}

html.theme-light .status-dot {
  background: #8a919e !important;
}

html.theme-light .status-dot.online {
  background: #00875a !important;
  box-shadow: 0 0 8px rgba(0, 135, 90, 0.4) !important;
}

/* --------------------------------------------------------------------------
   9. Forms, Inputs & Selects in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.theme-light textarea,
html.theme-light select {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #8a919e !important;
}

html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus {
  border-color: #11141a !important;
  box-shadow: 0 0 0 3px rgba(17, 20, 26, 0.08) !important;
}

html.theme-light .field label {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .field small {
  color: #6b7280 !important;
}

html.theme-light .base-url {
  background: #f4f5f8 !important;
  border-color: #e3e6eb !important;
}

html.theme-light .base-url code {
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   10. Tables & Usage History (Пункт 4: МОДЕЛЬ / ИСТОЧНИК)
   -------------------------------------------------------------------------- */
html.theme-light table {
  color: #11141a !important;
}

html.theme-light th {
  background: #f4f5f8 !important;
  color: #4a5160 !important;
  border-top: 1px solid #e3e6eb !important;
  border-bottom: 1px solid #e3e6eb !important;
  font-weight: 600 !important;
}

html.theme-light td {
  border-bottom: 1px solid #edf0f4 !important;
  color: #2b303b !important;
}

html.theme-light tr:hover td {
  background: #f8f9fb !important;
}

/* Модель в истории запросов и последних запросах: чёткий чёрный цвет */
html.theme-light .table-detail-link,
html.theme-light .usage-col-model .table-detail-link {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .table-detail-link:hover,
html.theme-light .usage-col-model .table-detail-link:hover {
  color: #00875a !important;
  text-decoration: underline !important;
}

html.theme-light .usage-col-date,
html.theme-light .usage-col-tokens {
  color: #2b303b !important;
}
html.theme-light .usage-col-cost {
  color: #2b303b !important;
  font-weight: 450 !important;
}

/* Источник запроса: стиль чёткого статуса с высоким контрастом */
html.theme-light .usage-source-badge {
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}

html.theme-light .usage-source-badge.source-playground {
  background: #e6f7ef !important;
  color: #007a4d !important;
  border: 1px solid #b2ebd4 !important;
  box-shadow: 0 1px 2px rgba(0, 122, 77, 0.06) !important;
}

html.theme-light .usage-source-badge.source-image {
  background: #fff8ec !important;
  color: #9c6204 !important;
  border: 1px solid #fedfa8 !important;
  box-shadow: 0 1px 2px rgba(156, 98, 4, 0.06) !important;
}

html.theme-light .usage-source-badge.source-api {
  background: #f0f2f5 !important;
  color: #333742 !important;
  border: 1px solid #d5d9e0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .status-label {
  background: #f0f2f5 !important;
  border-color: #d5d9e0 !important;
  color: #2b303b !important;
}

html.theme-light .status-label.online,
html.theme-light .status-label.ready {
  background: #e6f7ef !important;
  border-color: #b2ebd4 !important;
  color: #007a4d !important;
}

html.theme-light .status-label.pending {
  background: #fff8ec !important;
  border-color: #fedfa8 !important;
  color: #9c6204 !important;
}

/* --------------------------------------------------------------------------
   11. Dialogs, Modals & Auth in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light dialog {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.18) !important;
}

html.theme-light dialog::backdrop {
  background: rgba(15, 18, 24, 0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html.theme-light .modal-head h2 {
  color: #11141a !important;
}

html.theme-light .modal-intro {
  color: #5e6573 !important;
}

html.theme-light .auth-tabs {
  background: #f0f2f5 !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .auth-tab {
  color: #5e6573 !important;
}

html.theme-light .auth-tab.active {
  background: #ffffff !important;
  color: #11141a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .auth-main-pane {
  background: #ffffff !important;
}

html.theme-light .auth-main-pane .auth-head h2 {
  color: #11141a !important;
}

html.theme-light .auth-main-pane .modal-intro {
  color: #555b69 !important;
}

html.theme-light .auth-promo-pane {
  background: #f7f8fa !important;
  border-left: 1px solid #e3e6eb !important;
}

html.theme-light .auth-promo-title {
  color: #11141a !important;
}

html.theme-light .auth-promo-desc {
  color: #555b69 !important;
}

html.theme-light .auth-promo-card {
  background: #ffffff !important;
  border: 1px solid #e2e5ec !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .auth-promo-icon {
  background: #e9ecf2 !important;
  border: 1px solid #d2d6df !important;
  color: #11141a !important;
}

html.theme-light .auth-promo-card-text strong {
  color: #11141a !important;
}

html.theme-light .auth-promo-card-text span {
  color: #555b69 !important;
}

html.theme-light .auth-promo-foot {
  color: #555b69 !important;
  border-top-color: #e3e6eb !important;
}

html.theme-light .auth-forgot-link {
  color: #494e5b !important;
}

html.theme-light .auth-forgot-link:hover {
  color: #11141a !important;
}

html.theme-light .auth-fineprint {
  color: #6b7280 !important;
}

html.theme-light .auth-switch {
  color: #5e6573 !important;
}

html.theme-light .auth-switch button {
  color: #11141a !important;
}

/* Пополнение баланса: плашки способов оплаты и расчет в светлой теме */
html.theme-light .btn-payment-method {
  background: #ffffff !important;
  border: 1px solid #dce1e8 !important;
  border-radius: 8px !important;
  color: #11141a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .btn-payment-method:hover:not(:disabled) {
  background: #f4f6fa !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light .btn-payment-method .pm-title {
  color: #11141a !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

html.theme-light .btn-payment-method .pm-subtitle {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .btn-payment-method .pm-arrow {
  color: #5e6573 !important;
}

html.theme-light .btn-payment-method:hover:not(:disabled) .pm-arrow {
  color: #11141a !important;
  transform: translateX(3px);
}

html.theme-light .pm-coin {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #374151 !important;
}

html.theme-light .topup-estimate {
  background: #f7f8fa !important;
  border: 1px dashed #d5d9e0 !important;
  color: #5e6573 !important;
}

html.theme-light .topup-estimate span {
  color: #11141a !important;
}

html.theme-light .topup-estimate strong,
html.theme-light #topup-rub-val,
.topup-estimate strong,
#topup-rub-val {
  color: #49d69e !important;
  font-weight: 500 !important;
}

html.theme-light .topup-estimate small,
html.theme-light #topup-rate-val {
  color: #5e6573 !important;
}

/* Скрыть галочки при выборе валюты в обеих темах */
.currency-option-check {
  display: none !important;
}

html.theme-light .secret-key {
  background: #f4f5f8 !important;
  border-color: #d5d9e0 !important;
}

html.theme-light .secret-key code {
  color: #11141a !important;
}

html.theme-light .amount-choices button {
  background: #f4f5f8 !important;
  border-color: #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light .amount-choices button.selected {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
}

html.theme-light .invoice-summary {
  background: #f4f5f8 !important;
  border-color: #e3e6eb !important;
  color: #5e6573 !important;
}

html.theme-light .invoice-summary strong {
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   12. Chat & Playground (Пункт 6: Выбор модели в чате)
   -------------------------------------------------------------------------- */
html.theme-light .chat-panel {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .chat-toolbar {
  background: #fafbfc !important;
  border-bottom: 1px solid #e3e6eb !important;
  color: #4b5260 !important;
}

html.theme-light .chat-messages,
html.theme-light .chat-focused .chat-messages,
html.theme-light .app-content[data-page=playground] .chat-focused .chat-messages {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

html.theme-light .chat-welcome h2 {
  color: #11141a !important;
}

html.theme-light .chat-welcome p {
  color: #5e6573 !important;
}

html.theme-light .chat-welcome .welcome-orb {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  box-shadow: none !important;
}

html.theme-light .chat-welcome .welcome-orb .icon,
html.theme-light .welcome-orb svg {
  color: #11141a !important;
}

html.theme-light .suggestions button {
  background: #f4f5f8 !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light .suggestions button:hover {
  background: #e9ecf2 !important;
  color: #11141a !important;
  border-color: #b8bec9 !important;
}

html.theme-light .suggestions button svg,
html.theme-light .suggestions button .icon {
  color: #11141a !important;
}

/* Chat Composer Bar in Light Theme (Item 1: white bar, adequate soft shadow, no clipping) */
html.theme-light .chat-focused .chat-panel,
html.theme-light .app-content[data-page=playground] .chat-focused .chat-panel {
  padding-bottom: 12px !important;
}

html.theme-light .chat-focused .composer,
html.theme-light .app-content[data-page=playground] .chat-focused .composer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto 18px !important;
  padding: 0 0 6px !important;
  overflow: visible !important;
}

html.theme-light .composer-bar {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07) !important;
  border-radius: 10px !important;
}

html.theme-light .composer-bar:focus-within {
  border-color: #11141a !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.11), 0 0 0 2px rgba(17, 20, 26, 0.08) !important;
}

html.theme-light .composer-attach-btn {
  background: #f4f5f8 !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  border-radius: 8px !important;
}

html.theme-light .composer-attach-btn:hover:not(:disabled) {
  background: #e9ecf2 !important;
  border-color: #b8bec9 !important;
  color: #000000 !important;
}

html.theme-light .composer-attach-btn svg {
  color: #11141a !important;
}

html.theme-light .composer-bar #prompt,
html.theme-light .composer-bar #image-prompt,
html.theme-light .composer-bar #video-prompt,
html.theme-light .composer textarea {
  color: #11141a !important;
  background: transparent !important;
}

html.theme-light .composer-bar #prompt::placeholder,
html.theme-light .composer-bar #image-prompt::placeholder,
html.theme-light .composer-bar #video-prompt::placeholder,
html.theme-light .composer textarea::placeholder {
  color: #8a919e !important;
}

html.theme-light .composer-sub-row {
  color: #5e6573 !important;
}

html.theme-light .composer-sub-row button {
  color: #5e6573 !important;
}

html.theme-light .composer-sub-row button:hover {
  color: #11141a !important;
}

html.theme-light .composer-foot button {
  color: #5e6573 !important;
}

html.theme-light .chat-focused .send-btn,
html.theme-light .composer-bar .send-btn,
html.theme-light .send-btn {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
}

html.theme-light .chat-focused .send-btn:hover:not(:disabled),
html.theme-light .composer-bar .send-btn:hover:not(:disabled),
html.theme-light .send-btn:hover:not(:disabled) {
  background: #252832 !important;
  border-color: #252832 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

html.theme-light .message-label strong {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .message-label {
  color: #5e6573 !important;
}

html.theme-light .message-meta-row .message-copy,
html.theme-light .message-meta-row .message-check-billing {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #333742 !important;
}

html.theme-light .message-meta-row .message-copy:hover,
html.theme-light .message-meta-row .message-check-billing:hover {
  background: #e4e7ec !important;
  border-color: #cbd2dc !important;
  color: #11141a !important;
}

html.theme-light .message-meta-row .chat-usage {
  background: #f8f9fa !important;
  border: 1px solid #e3e6eb !important;
  color: #4b5563 !important;
}

html.theme-light .message-text {
  color: #1e2128 !important;
}

html.theme-light .message-text h1,
html.theme-light .message-text h2,
html.theme-light .message-text h3,
html.theme-light .message-text h4,
html.theme-light .message-text h5,
html.theme-light .message-text h6 {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .message-text strong {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .message-text em {
  color: inherit !important;
  font-style: italic !important;
}

html.theme-light .message-text code:not(pre code) {
  background: #f0f2f6 !important;
  border: 1px solid #d5d9e0 !important;
  color: #0b6b4d !important;
  font-weight: 500 !important;
}

html.theme-light .message-text a,
html.theme-light .message-link {
  color: #007048 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
}

html.theme-light .message-text a:hover,
html.theme-light .message-link:hover {
  color: #004d32 !important;
}

html.theme-light .answer-bullet {
  color: #1e2128 !important;
}

html.theme-light .answer-bullet > span:first-child {
  color: #555b6a !important;
  font-weight: 700 !important;
}

html.theme-light .answer-ordered-item {
  color: #1e2128 !important;
}

html.theme-light .answer-ordered-item > span:first-child {
  color: #555b6a !important;
  font-weight: 600 !important;
}

html.theme-light .answer-quote {
  background: #f4f5f8 !important;
  border-left-color: #00875a !important;
  color: #333742 !important;
}

html.theme-light .message-avatar {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #333742 !important;
  box-shadow: none !important;
}

html.theme-light .message.user .message-avatar {
  background: #e9ecf2 !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light .message.user .message-text {
  color: #11141a !important;
  background: #ebeef5 !important;
  border-color: #d8dce6 !important;
}

html.theme-light .message-error {
  background: #fff5e6 !important;
  border-left-color: #f59e0b !important;
  color: #92400e !important;
}

html.theme-light .settings-panel {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .settings-panel h2 {
  color: #11141a !important;
}

/* Выбор модели в шапке чата */
html.theme-light .chat-model-trigger {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.theme-light .chat-model-trigger:hover:not(:disabled),
html.theme-light .chat-model-trigger.dropdown-open {
  background: #f0f2f5 !important;
  border-color: #b8bec9 !important;
  color: #11141a !important;
}

html.theme-light .chat-model-name {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .chat-model-trigger svg:not(.chat-model-chevron) {
  color: #11141a !important;
  filter: none !important;
}

html.theme-light .favorite {
  color: #5e6573 !important;
}

html.theme-light .favorite.is-favorite {
  color: #11141a !important;
}

html.theme-light .favorite.is-favorite .icon {
  fill: #11141a !important;
}

html.theme-light .chat-model-trigger .chat-model-chevron {
  color: #5e6573 !important;
}

html.theme-light .chat-model-dropdown {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
  border-radius: 8px !important;
}

html.theme-light .chat-model-search-wrap input#playground-model-search {
  background: #f7f8fa !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

html.theme-light .chat-model-search-wrap .search-icon {
  color: #6b7280 !important;
}

html.theme-light .chat-model-group-title {
  color: #4b5563 !important;
  font-size: 15px !important;
}

html.theme-light .chat-model-group:not(:first-child) {
  border-top: 1px solid #edf0f5 !important;
}

html.theme-light .chat-model-option {
  color: #11141a !important;
  border-radius: 8px !important;
}

html.theme-light .chat-model-option:hover {
  background: #f0f2f5 !important;
  border-color: #e2e4e8 !important;
}

html.theme-light .chat-model-option.selected {
  background: #f0f2f5 !important;
  border: 1px solid #11141a !important;
  border-radius: 8px !important;
}

html.theme-light .chat-model-option strong {
  color: #11141a !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

html.theme-light .chat-model-option small {
  color: #4b5563 !important;
  font-size: 15px !important;
}

html.theme-light .chat-model-vendor-badge {
  background: #e9ecf2 !important;
  color: #333742 !important;
  font-size: 15px !important;
}

html.theme-light .chat-model-check {
  display: none !important;
}

/* Chat History Dialog in Light Theme (Item 4 & 5) */
html.theme-light dialog.chat-history-dialog {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16) !important;
}

html.theme-light .chat-history-dialog .modal-head h2 {
  color: #11141a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

html.theme-light .chat-history-dialog .modal-head .icon-btn {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #4b5563 !important;
}

html.theme-light .chat-history-dialog .modal-head .icon-btn:hover {
  background: #e5e7eb !important;
  color: #11141a !important;
}

html.theme-light .chat-history-item {
  background: #f8f9fb !important;
  border: 1px solid #e3e6eb !important;
  border-radius: 8px !important;
}

html.theme-light .chat-history-item:hover {
  background: #f0f2f5 !important;
  border-color: #cbd2dc !important;
}

/* 5. Active chat: neutral palette strictly per AGENTS.md */
html.theme-light .chat-history-item.current-chat {
  background: #f0f2f5 !important;
  border: 1px solid #11141a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 4. Chat titles: crisp, bold, dark, perfectly legible */
html.theme-light .chat-history-open strong {
  color: #11141a !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

html.theme-light .chat-history-item:hover .chat-history-open strong {
  color: #000000 !important;
}

html.theme-light .chat-history-meta {
  color: #4b5563 !important;
  font-size: 15px !important;
}

html.theme-light .chat-history-model {
  color: #1f2937 !important;
  background: #e5e7eb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
}

html.theme-light .chat-history-dot {
  color: #9ca3af !important;
}

html.theme-light .chat-history-date {
  color: #4b5563 !important;
  font-size: 13px !important;
}

html.theme-light .chat-history-badge {
  display: none !important;
}

html.theme-light .chat-history-actions .icon-btn {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #4b5563 !important;
}

html.theme-light .chat-history-actions .icon-btn:hover {
  background: #f0f2f5 !important;
  border-color: #9ca3af !important;
  color: #11141a !important;
}

html.theme-light .chat-history-actions .icon-btn[data-action="chat-history-delete"]:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* --------------------------------------------------------------------------
   13. Images & Video Studio (Пункты 7 и 8: Заголовки, модели, промпты, пустые состояния)
   -------------------------------------------------------------------------- */
html.theme-light .image-settings,
html.theme-light .image-preview-panel,
html.theme-light .video-creator-panel,
html.theme-light .video-history-panel {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .image-settings .panel-head h2,
html.theme-light .video-creator-panel .panel-head h2,
html.theme-light .image-history-title-wrap h2,
html.theme-light .image-panel-title-wrap h2,
html.theme-light .video-panel-title-wrap h2 {
  color: #11141a !important;
  font-weight: 700 !important;
}

html.theme-light .image-panel-subtitle,
html.theme-light .video-panel-subtitle {
  color: #5e6573 !important;
}

html.theme-light .image-settings .panel-head svg,
html.theme-light .video-creator-panel .panel-head svg {
  color: #11141a !important;
  opacity: 0.85 !important;
}

html.theme-light #image-model {
  background-color: #ffffff !important;
  border-color: #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light #image-model:hover:not(:disabled) {
  border-color: #b8bec9 !important;
  background-color: #f4f5f8 !important;
}

html.theme-light .prompt-chip,
html.theme-light .ratio-chip {
  background: #f4f5f8 !important;
  border: 1px solid #d5d9e0 !important;
  color: #333742 !important;
  border-radius: 8px !important;
}

html.theme-light .prompt-chip:hover,
html.theme-light .ratio-chip:hover {
  background: #e9ecf2 !important;
  color: #11141a !important;
  border-color: #b8bec9 !important;
}

html.theme-light .ratio-chip.is-active,
html.theme-light .ratio-chip.active {
  background: #e9ecf2 !important;
  color: #11141a !important;
  border-color: #11141a !important;
  box-shadow: 0 0 0 1px #11141a !important;
}

html.theme-light .ratio-chip.is-active strong,
html.theme-light .ratio-chip.active strong {
  color: #11141a !important;
}

html.theme-light .ratio-chip.is-active small,
html.theme-light .ratio-chip.active small {
  color: #5e6573 !important;
}

html.theme-light .ratio-chip.is-active .ratio-icon,
html.theme-light .ratio-chip.active .ratio-icon {
  stroke: #11141a !important;
  color: #11141a !important;
}

html.theme-light .ratio-chip .ratio-icon {
  stroke: #5e6573 !important;
  color: #5e6573 !important;
}

html.theme-light .ratio-chip small {
  color: #5e6573 !important;
}

/* Upload & Attach Buttons (Item 2: remove pale green everywhere, neutral borders & dark text) */
html.theme-light .video-upload-button,
html.theme-light .image-upload-button,
html.theme-light .field label.image-upload-button,
html.theme-light .image-settings .field label.image-upload-button,
html.theme-light label[for="video-file"],
html.theme-light label[for="video-reference-file"],
html.theme-light .video-attach-btn,
html.theme-light .attachment-card {
  border: 1.5px dashed #c0c5d0 !important;
  background: #f7f8fa !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .video-upload-button:hover:not(.is-disabled),
html.theme-light .image-upload-button:hover:not(.is-disabled),
html.theme-light .field label.image-upload-button:hover,
html.theme-light label[for="video-file"]:hover,
html.theme-light label[for="video-reference-file"]:hover,
html.theme-light .video-attach-btn:hover {
  border-color: #11141a !important;
  background: #eef0f4 !important;
  color: #11141a !important;
}

html.theme-light .video-upload-button svg,
html.theme-light .video-upload-button .icon,
html.theme-light .image-upload-button svg,
html.theme-light .image-upload-button .icon,
html.theme-light .video-attach-btn svg {
  color: #11141a !important;
}

html.theme-light .video-reference-label,
html.theme-light .image-reference-label {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .video-reference-label small,
html.theme-light .image-reference-label small,
html.theme-light .video-upload-note,
html.theme-light .image-upload-note,
html.theme-light .video-form-note,
html.theme-light .image-form-note,
html.theme-light .field-note,
html.theme-light .upload-note {
  color: #5e6573 !important;
}

/* Cost Calculations & Specs (Unified sleek card style matching dark theme) */
html.theme-light .video-specs,
html.theme-light .image-specs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 10px 0 12px !important;
}

html.theme-light .video-quote-card {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
}

html.theme-light .video-spec-cell,
html.theme-light .image-specs > span {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .video-spec-cell .spec-label,
html.theme-light .image-specs > span {
  color: #5e6573 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

html.theme-light .video-specs strong,
html.theme-light .video-spec-cell strong,
html.theme-light #video-quote,
html.theme-light #video-quote-per-sec {
  color: #11141a !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html.theme-light .image-specs strong,
html.theme-light .image-specs > span strong {
  color: #11141a !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html.theme-light #video-quote,
html.theme-light #video-quote-per-sec,
html.theme-light #model-estimate,
html.theme-light .detail-estimate output,
html.theme-light .estimate strong,
html.theme-light .budget-total output {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .detail-estimate,
html.theme-light .estimate,
html.theme-light .budget-total {
  color: #11141a !important;
}

html.theme-light .detail-estimate span,
html.theme-light .estimate span,
html.theme-light .budget-total span {
  color: #333742 !important;
  font-weight: 600 !important;
}

/* Название модели над изображениями / видео */
html.theme-light .image-model-badge,
html.theme-light .video-model-badge,
html.theme-light .video-card-title {
  color: #11141a !important;
  font-weight: 700 !important;
}

/* Название / промпт картинки и видео */
html.theme-light .image-card-prompt,
html.theme-light .video-card-prompt {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .image-card {
  background: #ffffff !important;
  border: 1px solid #e2e4e8 !important;
  box-shadow: none !important;
}

html.theme-light .image-player-frame {
  box-shadow: none !important;
}

html.theme-light .video-card {
  background: #ffffff !important;
  border: 1px solid #e2e4e8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .video-stage-frame {
  background: #f1f3f7 !important;
  border: 1px solid #dce1e8 !important;
  box-shadow: none !important;
}

html.theme-light .video-stage-frame video {
  background: #f1f3f7 !important;
}

html.theme-light .video-overlay-meta {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid #dce1e8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light .video-overlay-pill {
  color: #11141a !important;
}

html.theme-light .video-overlay-pill.res-pill {
  color: #5e6573 !important;
}

html.theme-light .video-overlay-date {
  color: #5e6573 !important;
}

html.theme-light .video-segmented-group {
  background: #f0f2f5 !important;
  border: 1px solid #d8dce2 !important;
}

html.theme-light .video-segment-btn {
  color: #475569 !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.theme-light .video-segment-btn:hover:not(:disabled):not(.is-active):not([aria-checked="true"]) {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}

html.theme-light .video-segment-btn.is-active,
html.theme-light .video-segment-btn[aria-checked="true"],
html.theme-light .video-segment-btn.is-active:hover,
html.theme-light .video-segment-btn[aria-checked="true"]:hover {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

html.theme-light .video-segment-btn.is-active span,
html.theme-light .video-segment-btn[aria-checked="true"] span,
html.theme-light .video-segment-btn.is-active:hover span,
html.theme-light .video-segment-btn[aria-checked="true"]:hover span {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html.theme-light .video-spec-cell {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
}

html.theme-light .video-stage-prompt-card {
  background: #f7f8fa !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .video-stage-prompt-card .prompt-label {
  color: #11141a !important;
}

html.theme-light .video-stage-prompt-card .prompt-text {
  color: #374151 !important;
}

html.theme-light .video-retention-notice {
  background: #ffffff !important;
  border: 1px solid #dce1e8 !important;
  color: #11141a !important;
}
html.theme-light .video-retention-notice svg,
html.theme-light .video-retention-notice .icon {
  color: #4b5563 !important;
}

html.theme-light .video-retention-badge {
  background: #f0f2f5 !important;
  border-color: #d5d9e0 !important;
  color: #333742 !important;
}

html.theme-light .video-overlay-pill.video-retention-pill {
  color: #4b5563 !important;
  border-color: #dce1e8 !important;
}

html.theme-light .video-filmstrip-head .filmstrip-title {
  color: #11141a !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

html.theme-light .video-filmstrip-head .filmstrip-hint {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .filmstrip-counter {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .filmstrip-nav-btn {
  background: #f0f2f5 !important;
  border: 1px solid #d8dce2 !important;
  color: #11141a !important;
}

html.theme-light .filmstrip-nav-btn:hover:not(:disabled) {
  background: #e4e7ed !important;
  border-color: #cbd5e1 !important;
  color: #11141a !important;
}

html.theme-light .video-filmstrip-card {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .video-filmstrip-card:hover {
  background: #f9fafb !important;
  border-color: #cbd5e1 !important;
}

html.theme-light .video-filmstrip-card.is-active {
  background: #f4f6fa !important;
  border-color: #11141a !important;
  box-shadow: 0 0 0 1px #11141a !important;
}

html.theme-light .filmstrip-card-thumb {
  background: #eef1f6 !important;
  border: 1px solid #d8dce2 !important;
}

html.theme-light .filmstrip-thumb-video {
  background: #eef1f6 !important;
}

html.theme-light .filmstrip-card-model {
  color: #11141a !important;
}

html.theme-light .filmstrip-meta-quality {
  color: #5e6573 !important;
  font-weight: 500 !important;
}

html.theme-light .filmstrip-date {
  color: #5e6573 !important;
}

html.theme-light .filmstrip-status-dot.is-done {
  background: #5e6573 !important;
  box-shadow: none !important;
}

html.theme-light .video-nav-pos {
  color: #555966 !important;
}

html.theme-light .image-meta-params {
  color: #00875a !important;
  font-weight: 600 !important;
}

html.theme-light .image-id-subtle .image-date,
html.theme-light .image-id-subtle .image-id,
html.theme-light .image-id-subtle .image-meta-sep {
  color: #5e6573 !important;
}

/* Пустые состояния: «Здесь появятся ваши ролики / изображения» */
html.theme-light .video-empty-state h3,
html.theme-light .image-empty-state h3,
html.theme-light .empty-state h3 {
  color: #11141a !important;
  font-weight: 700 !important;
}

html.theme-light .video-empty-state p,
html.theme-light .image-empty-state p,
html.theme-light .empty-state p {
  color: #2b303b !important;
}

html.theme-light .video-empty-icon,
html.theme-light .image-empty-icon,
html.theme-light .empty-state .empty-icon {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   14. Models Catalog (Пункт 9: Категории моделей, плашки, фильтры)
   -------------------------------------------------------------------------- */
html.theme-light .catalog-summary {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* Плашки категорий моделей в невыбранном состоянии */
html.theme-light .category-tab {
  font-size: 15px !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .category-tab:hover {
  background: #f0f2f5 !important;
  border-color: #b8bec9 !important;
  color: #11141a !important;
}

html.theme-light .category-tab .icon {
  color: #4b5260 !important;
  width: 16px !important;
  height: 16px !important;
}

html.theme-light .category-tab-label {
  font-size: 15px !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .category-tab-count {
  font-size: 15px !important;
  background: #f0f2f5 !important;
  color: #4b5260 !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* Выбранная плашка категории модели — в стильных оттенках черного */
html.theme-light .category-tab.active {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

html.theme-light .category-tab.active .icon {
  color: #ffffff !important;
}

html.theme-light .category-tab.active .category-tab-label {
  color: #ffffff !important;
}

html.theme-light .category-tab.active .category-tab-count {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* Фильтры и чипы */
html.theme-light .filter-chip {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .filter-chip:hover {
  background: #f0f2f5 !important;
  border-color: #b8bec9 !important;
}

html.theme-light .filter-chip.active {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
}

html.theme-light .filter-chip.active .icon,
html.theme-light .filter-chip.active span {
  color: #ffffff !important;
}

/* Models catalog: provider rail and sort switch, same neutral language as category tabs */
html.theme-light .catalog-group-head strong,
html.theme-light .catalog-result-summary {
  color: #11141a !important;
}

html.theme-light .provider-rail-title,
html.theme-light #catalog-sort-hint,
html.theme-light .catalog-group-head > span:last-child,
html.theme-light .catalog-card .vendor-name {
  color: #4b5563 !important;
}

html.theme-light .catalog-layout,
html.theme-light .catalog-group-head {
  border-top-color: #dce1e8 !important;
}

html.theme-light .provider-chip,
html.theme-light .sort-chip {
  background: transparent !important;
  border-color: transparent !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .sort-switch {
  background: #f0f2f5 !important;
  border-color: #dce1e8 !important;
}

html.theme-light .provider-chip:not(:disabled):hover,
html.theme-light .sort-chip:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

html.theme-light .provider-chip > .icon,
html.theme-light .provider-chip-count {
  color: #4b5260 !important;
}

html.theme-light .provider-chip.active,
html.theme-light .sort-chip.active {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
}

html.theme-light .provider-chip.active > .icon,
html.theme-light .provider-chip.active .provider-chip-count {
  color: #ffffff !important;
}

html.theme-light .catalog-card .popular-mark {
  color: #11141a !important;
}

/* Keep white monochrome logos white on the black active row */
html.theme-light .provider-chip.active img[src*="grok.svg"] {
  filter: none !important;
}

@media (max-width: 900px) {
  html.theme-light .provider-chip:not(.active) {
    background: #ffffff !important;
    border-color: #d5d9e0 !important;
  }
}

html.theme-light .catalog-result-head,
html.theme-light #model-count,
html.theme-light #catalog-freshness {
  color: #4b5260 !important;
  font-weight: 500 !important;
}

html.theme-light .catalog-card {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .catalog-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

html.theme-light .catalog-card h2,
html.theme-light .catalog-card h2 button {
  color: #11141a !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

html.theme-light .catalog-card .model-type {
  color: #5e6573 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

html.theme-light .vendor-name {
  color: #5e6573 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

html.theme-light .model-id code {
  color: #5e6573 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

html.theme-light .model-id .icon-btn {
  color: #5e6573 !important;
}

html.theme-light .model-id .icon-btn:hover {
  color: #11141a !important;
}

html.theme-light .catalog-card-price {
  color: #11141a !important;
  font-size: 15px !important;
}

html.theme-light .catalog-card-price > span {
  color: #11141a !important;
  font-size: 15px !important;
}

html.theme-light .catalog-card-price small {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .catalog-card-price strong {
  color: #11141a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

html.theme-light .catalog-card > code {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .catalog-card-bottom {
  border-top: 1px solid #edf0f4 !important;
}

html.theme-light .detail-pricing > div {
  background: #f7f8fa !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .detail-pricing strong {
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   15. Pricing Calculator & Plans (Пункт 11: Меню калькулятора и белые тексты тарифов)
   -------------------------------------------------------------------------- */
/* Правая панель калькулятора — светлый фон и контрастные поля */
html.theme-light .pricing-layout .budget-panel,
html.theme-light .budget-panel {
  background: #ffffff !important;
  border: 1px solid #e2e4e8 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light .pricing-layout .budget-panel h2,
html.theme-light .budget-panel h2 {
  color: #11141a !important;
  font-weight: 700 !important;
}

html.theme-light .pricing-layout .budget-panel p,
html.theme-light .budget-panel p {
  color: #5e6573 !important;
}

html.theme-light .pricing-layout .budget-panel .field label,
html.theme-light .budget-panel .field label {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .pricing-layout .budget-panel select,
html.theme-light .pricing-layout .budget-panel input,
html.theme-light .budget-panel select,
html.theme-light .budget-panel input {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light .budget-presets .filter-chip {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .budget-presets .filter-chip:hover {
  background: #e4e7ec !important;
}

html.theme-light .budget-presets .filter-chip.active {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
}

html.theme-light .budget-total {
  border-top: 1px solid #e2e4e8 !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .budget-total output {
  color: #11141a !important;
  font-weight: 500 !important;
}

/* Тарифы моделей в калькуляторе — чёткий глубокий чёрный текст */
html.theme-light .pricing-caption h2,
html.theme-light .pricing-caption h3,
html.theme-light .pricing-subcaption h2,
html.theme-light .pricing-subcaption h3 {
  color: #11141a !important;
  font-weight: 700 !important;
}

html.theme-light .pricing-caption p,
html.theme-light .pricing-subcaption p {
  color: #5e6573 !important;
}

html.theme-light .pricing-caption > span,
html.theme-light .pricing-subcaption > span {
  color: #5e6573 !important;
}

html.theme-light .pricing-layout .retail-table {
  background: #ffffff !important;
  border: 1px solid #e2e4e8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .pricing-layout .retail-table th {
  background: #f4f5f8 !important;
  color: #4a5160 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e2e4e8 !important;
}

html.theme-light .pricing-layout .retail-table td {
  border-top: 1px solid #edf0f4 !important;
  color: #11141a !important;
}

html.theme-light .pricing-layout .retail-table td:first-child strong,
html.theme-light .retail-table td:first-child strong {
  color: #11141a !important;
  font-weight: 700 !important;
}

/* Table Edge Padding (Item 5: prevent first column sticking to edge) */
html.theme-light table th:first-child,
html.theme-light table td:first-child,
html.theme-light .table-wrap th:first-child,
html.theme-light .table-wrap td:first-child,
html.theme-light .invoices-table th:first-child,
html.theme-light .invoices-table td:first-child,
html.theme-light .ledger-table th:first-child,
html.theme-light .ledger-table td:first-child {
  padding-left: 18px !important;
}

html.theme-light table th:last-child,
html.theme-light table td:last-child,
html.theme-light .table-wrap th:last-child,
html.theme-light .table-wrap td:last-child,
html.theme-light .invoices-table th:last-child,
html.theme-light .invoices-table td:last-child,
html.theme-light .ledger-table th:last-child,
html.theme-light .ledger-table td:last-child {
  padding-right: 18px !important;
}

html.theme-light .invoices-table,
html.theme-light .ledger-table {
  background: #ffffff !important;
}

html.theme-light .invoices-table th,
html.theme-light .ledger-table th {
  background: #f4f5f8 !important;
  color: #4a5160 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e2e4e8 !important;
}

html.theme-light .invoices-table td,
html.theme-light .ledger-table td {
  border-bottom: 1px solid #edf0f4 !important;
  color: #11141a !important;
}

html.theme-light .invoice-col-date,
html.theme-light .ledger-col-date {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .pricing-layout .rate-model {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .pricing-layout .table-model-text small,
html.theme-light .retail-table small {
  color: #5e6573 !important;
}

html.theme-light .pricing-layout .table-model-text .tier-badge {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #5e6573 !important;
}

html.theme-light .retail-table tr[data-model].selected-model-row,
html.theme-light .retail-table tr:has(.rate-model[aria-pressed=true]) {
  background: #e9ecf2 !important;
}

html.theme-light .retail-table tr[data-model].selected-model-row td,
html.theme-light .retail-table tr:has(.rate-model[aria-pressed=true]) td {
  background: #e9ecf2 !important;
}

html.theme-light .retail-table tr[data-model].selected-model-row:hover,
html.theme-light .retail-table tr:has(.rate-model[aria-pressed=true]):hover {
  background: #dfe3ea !important;
}

html.theme-light .retail-table tr[data-model].selected-model-row:hover td,
html.theme-light .retail-table tr:has(.rate-model[aria-pressed=true]):hover td {
  background: #dfe3ea !important;
}

html.theme-light .rate-model[aria-pressed=true] {
  color: #11141a !important;
}

html.theme-light .pricing-layout .retail-table .mono {
  color: #11141a !important;
  font-weight: 500 !important;
}

.retail-table .mono,
.retail-table .mono strong,
.retail-table .mono span,
.image-price-list .mono,
.image-price-list .mono strong,
.image-price-list .mono span,
.video-price-list .mono,
.video-price-list .mono strong,
.video-price-list .mono span,
html.theme-light .retail-table .mono,
html.theme-light .retail-table .mono strong,
html.theme-light .retail-table .mono span,
html.theme-light .image-price-list .mono,
html.theme-light .image-price-list .mono strong,
html.theme-light .image-price-list .mono span,
html.theme-light .video-price-list .mono,
html.theme-light .video-price-list .mono strong,
html.theme-light .video-price-list .mono span {
  font-weight: 500 !important;
}

html.theme-light .pricing-category-tabs .filter-chip {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .pricing-category-tabs .filter-chip:hover {
  background: #f0f2f5 !important;
}

html.theme-light .pricing-category-tabs .filter-chip.active {
  background: #11141a !important;
  color: #ffffff !important;
  border-color: #11141a !important;
}

html.theme-light .pricing-category-tabs .filter-chip small {
  color: #5e6573 !important;
}

html.theme-light .pricing-category-tabs .filter-chip.active small {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   16. Landing Page Elements & Hero Architecture (Пункты 1, 2, 3)
   -------------------------------------------------------------------------- */
html.theme-light .product-landing {
  background-color: #f7f8fa !important;
  color: #11141a !important;
}

html.theme-light .landing-grid-bg {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}

html.theme-light .product-landing .nav-links a {
  color: #4a5160 !important;
}

html.theme-light .product-landing .nav-links a:hover {
  color: #11141a !important;
}

html.theme-light .product-hero h1 {
  color: #11141a !important;
}

html.theme-light .product-hero-copy > p {
  color: #4b5260 !important;
}

html.theme-light .product-hero .eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: fit-content !important;
  background: rgba(73, 214, 158, 0.08) !important;
  border: 1px solid rgba(73, 214, 158, 0.25) !important;
  color: #49d69e !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
}

html.theme-light .product-section .eyebrow,
html.theme-light .product-section-head .eyebrow,
html.theme-light .product-landing .eyebrow {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #49d69e !important;
  display: block !important;
  width: auto !important;
}

html.theme-light .product-hero h1 .hero-highlight,
html.theme-light .product-landing .hero-highlight,
[data-theme="light"] .product-hero h1 .hero-highlight,
[data-theme="light"] .product-landing .hero-highlight {
  color: #11141a !important;
}

/* Пункт 2: Преимущества и оплата — чистый чёрный текст */
html.theme-light .product-benefits,
html.theme-light .product-benefits > span {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .product-benefits .icon,
html.theme-light .product-benefits svg {
  color: #11141a !important;
  stroke: #11141a !important;
}

html.theme-light .product-payments-label {
  color: #55625b !important;
  font-weight: 600 !important;
}

html.theme-light .payment-badge {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  color: #1a2228 !important;
  font-weight: 550 !important;
  white-space: nowrap !important;
}

/* Hero Architecture Diagram (white cards, black title/wires/moving box borders, no hover animations) */
html.theme-light .arch-card {
  fill: #ffffff !important;
  stroke: #e2e4e8 !important;
  stroke-width: 1.2px !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.06)) !important;
  transition: none !important;
}

html.theme-light .arch-card:hover {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.06)) !important;
  transform: none !important;
}

html.theme-light .arch-card-title {
  fill: #11141a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

html.theme-light .arch-card-sub {
  fill: #5e6573 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

html.theme-light .arch-icon-box {
  fill: #ffffff !important;
  stroke: #11141a !important;
  stroke-width: 1.6px !important;
  stroke-dasharray: 6 6 !important;
  animation: archDashFlow 1.6s linear infinite !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.04)) !important;
  transition: none !important;
}

html.theme-light .arch-icon-box:hover {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.04)) !important;
  transform: none !important;
}

html.theme-light .arch-center-box {
  fill: #ffffff !important;
  stroke: #11141a !important;
  stroke-width: 1.8px !important;
  stroke-dasharray: 6 6 !important;
  animation: archDashFlow 1.6s linear infinite !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.05)) !important;
  transition: none !important;
}

html.theme-light .arch-center-box:hover {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.05)) !important;
  transform: none !important;
}

/* Tokvian T Logo in Center Box (identical to header logo) */
html.theme-light .arch-tokvian-logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
}

html.theme-light .arch-logo-top {
  fill: url(#arch-tok-top) !important;
}

html.theme-light .arch-logo-stem {
  fill: url(#arch-tok-stem) !important;
}

html.theme-light .arch-app-icon rect {
  fill: #11141a !important;
}

html.theme-light .arch-app-icon path {
  stroke: #11141a !important;
}

html.theme-light .arch-wire-line,
html.theme-light .arch-wire-bg,
html.theme-light .arch-wire-flow {
  stroke: #11141a !important;
  stroke-width: 2.2px !important;
  stroke-dasharray: 6 6 !important;
  fill: none !important;
  animation: archDashFlow 1.2s linear infinite !important;
}

html.theme-light .arch-node-group {
  cursor: default !important;
  transition: none !important;
  transform: none !important;
}

html.theme-light .arch-node-group:hover {
  filter: none !important;
  transform: none !important;
}

html.theme-light .arch-wire-pulse,
.arch-wire-pulse {
  display: none !important;
}

html.theme-light .arch-svg image {
  filter: none !important;
}

html.theme-light .product-tools {
  border-color: #e3e6eb !important;
}

html.theme-light .product-tools > span {
  color: #4a5160 !important;
}

html.theme-light .product-tools > div {
  color: #11141a !important;
}

html.theme-light .popular-models-section .product-section-head h2 {
  color: #11141a !important;
}

html.theme-light .popular-model-card {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .popular-model-card:hover {
  border-color: #00875a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

html.theme-light .popular-model-name {
  color: #11141a !important;
}

html.theme-light .popular-model-vendor {
  color: #5e6573 !important;
}

html.theme-light .popular-rate-label,
html.theme-light .popular-rate-unit {
  color: #6b7280 !important;
}

html.theme-light .popular-rate-value {
  color: #11141a !important;
}

html.theme-light .popular-models-banner {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .popular-banner-text h3 {
  color: #11141a !important;
}

html.theme-light .popular-banner-text p {
  color: #5e6573 !important;
}

html.theme-light .product-demo {
  background: #ffffff !important;
  border-color: #e3e6eb !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light .product-demo-head {
  color: #11141a !important;
}

html.theme-light .demo-apps > span {
  background: #f7f8fa !important;
  border-color: #e3e6eb !important;
  color: #11141a !important;
}

html.theme-light .demo-model h2 {
  color: #11141a !important;
}

html.theme-light .demo-model p {
  color: #5e6573 !important;
}

html.theme-light .demo-rates strong {
  color: #11141a !important;
}

html.theme-light .demo-rates span {
  color: #5e6573 !important;
}

html.theme-light .product-start article {
  border-color: #e3e6eb !important;
}

html.theme-light .product-start h3 {
  color: #11141a !important;
}

html.theme-light .product-start p {
  color: #5e6573 !important;
}

html.theme-light .product-start article > span {
  color: #5e6573 !important;
  font-weight: 500 !important;
}

html.theme-light .popular-banner-text .banner-link {
  color: #49d69e !important;
}

/* Item 2: .product-callout white badge in light theme */
html.theme-light .product-callout {
  background: #ffffff !important;
  border: 1px solid #e2e4e8 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .product-callout h2 {
  color: #11141a !important;
}

html.theme-light .product-callout p {
  color: #5e6573 !important;
}

/* Пункт 3: FAQ секция — чёткий читаемый чёрный текст */
html.theme-light .product-landing .product-faq summary,
html.theme-light .product-faq summary,
html.theme-light .faq-section summary,
html.theme-light .faq-list summary {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .product-landing .product-faq p,
html.theme-light .product-faq p,
html.theme-light .faq-section p,
html.theme-light .faq-list details p {
  color: #1e2128 !important;
}

html.theme-light .product-faq h2,
html.theme-light .faq-section h2 {
  color: #11141a !important;
}

html.theme-light .product-faq details,
html.theme-light .faq-list details {
  border-bottom: 1px solid #e2e4e8 !important;
}

html.theme-light .feedback-card,
html.theme-light .feedback-info-card {
  background: #ffffff !important;
  border-color: #e3e6eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .feedback-card label {
  color: #11141a !important;
}

html.theme-light .feedback-info-content h3 {
  color: #11141a !important;
}

html.theme-light .feedback-info-content p {
  color: #5e6573 !important;
}

html.theme-light .feedback-info-content strong {
  color: #11141a !important;
}

html.theme-light .feedback-radar-glow {
  display: none !important;
}

html.theme-light .feedback-info-visual {
  background: #f7f8fa !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .feedback-icon-bubble {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  color: #11141a !important;
}

html.theme-light .feedback-icon-bubble svg {
  stroke: #11141a !important;
}

/* Feedback Consent & Privacy Policy (Пункт 3: текст 5e6573) */
html.theme-light .feedback-consent,
html.theme-light .feedback-consent span,
html.theme-light .feedback-consent a {
  color: #5e6573 !important;
}

html.theme-light .feedback-consent a {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html.theme-light .feedback-consent a:hover {
  color: #11141a !important;
}

/* Secondary & Muted Texts in Light Theme (строго 5e6573, полный запрет a2b5ad) */
html.theme-light .product-section-head p,
html.theme-light .product-landing .product-section-head p,
html.theme-light .product-tools > span,
html.theme-light .retail-table th,
html.theme-light .retail-table small,
html.theme-light .product-callout p,
html.theme-light .product-start p,
html.theme-light .reviews-slider .review-author-info small {
  color: #5e6573 !important;
}

/* --------------------------------------------------------------------------
   17. Footer in Light Mode (Пункт 5: Светлый подвал)
   -------------------------------------------------------------------------- */
html.theme-light .app-footer,
html.theme-light .product-landing .app-footer,
html.theme-light .product-footer,
html.theme-light .landing-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e4e8 !important;
  color: #5e6573 !important;
}

html.theme-light .footer-col-brand .logo {
  color: #11141a !important;
}

html.theme-light .footer-col-brand .footer-desc {
  color: #4b5260 !important;
}

html.theme-light .footer-col-brand .footer-copy {
  color: #717784 !important;
}

html.theme-light .footer-col-title {
  color: #11141a !important;
  font-weight: 700 !important;
}

html.theme-light .footer-col-links a {
  color: #4b5260 !important;
}

html.theme-light .footer-col-links a:hover {
  color: #11141a !important;
}

html.theme-light .footer-links a,
html.theme-light .product-footer a,
html.theme-light .landing-footer a {
  color: #4b5260 !important;
}

html.theme-light .footer-links a:hover,
html.theme-light .product-footer a:hover,
html.theme-light .landing-footer a:hover {
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   18. Documentation & Legal Pages (Пункт 10: Документация, условия, конфиденциальность)
   -------------------------------------------------------------------------- */
html.theme-light .doc-content p,
html.theme-light .doc-content li,
html.theme-light .doc-content .notice,
html.theme-light .doc-content .notice div,
html.theme-light .doc-endpoint-block p,
html.theme-light .privacy-content p,
html.theme-light .privacy-content ul,
html.theme-light .privacy-content ol,
html.theme-light .privacy-content li {
  color: #11141a !important;
}

/* Documentation & Legal Links (neutral dark text, high contrast) */
html.theme-light .inline-link,
html.theme-light .doc-content a:not(.btn),
html.theme-light .doc-section a:not(.btn),
html.theme-light .docs-table a,
html.theme-light .privacy-content a:not(.btn),
html.theme-light .terms-content a:not(.btn),
html.theme-light article a:not(.btn):not(.tag),
html.theme-light .guide-step a:not(.btn) {
  color: #11141a !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
}

html.theme-light .inline-link:hover,
html.theme-light .doc-content a:not(.btn):hover,
html.theme-light .doc-section a:not(.btn):hover,
html.theme-light .docs-table a:hover,
html.theme-light .privacy-content a:not(.btn):hover,
html.theme-light .terms-content a:not(.btn):hover {
  color: #000000 !important;
}

html.theme-light .doc-step {
  color: #5e6573 !important;
  font-weight: 500 !important;
}

html.theme-light .doc-content h2,
html.theme-light .privacy-content h2,
html.theme-light .privacy-content strong,
html.theme-light .doc-content strong {
  color: #11141a !important;
  font-weight: 700 !important;
}

html.theme-light .doc-endpoint-block h3,
html.theme-light .doc-content h3 {
  color: #11141a !important;
  font-weight: 550 !important;
}

html.theme-light .doc-endpoint-block h3 code,
html.theme-light .doc-content h3 code {
  font-size: 17.5px !important;
  font-weight: 500 !important;
  color: #11141a !important;
}

html.theme-light .notice {
  background: #f7f8fa !important;
  border-color: #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light .notice strong,
html.theme-light .notice .icon {
  color: #11141a !important;
}

html.theme-light .doc-content .notice .icon {
  color: #11141a !important;
}

html.theme-light .privacy-content li::marker {
  color: #11141a !important;
}

html.theme-light .doc-content code.inline,
html.theme-light .doc-content p code {
  background: #f0f2f5 !important;
  color: #11141a !important;
  border: 1px solid #d5d9e0 !important;
  font-size: 16px !important;
}

html.theme-light .docs-toc-link,
html.theme-light .docs-toc-action,
html.theme-light .docs-toc a {
  color: #4b5260 !important;
}

html.theme-light .docs-toc-link:hover,
html.theme-light .docs-toc-action:hover,
html.theme-light .docs-toc a:hover {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .docs-toc-link.active,
html.theme-light .docs-toc a.active {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .docs-toc-link.active::before,
html.theme-light .docs-toc a.active::before {
  background: #11141a !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   19. Connect & Admin Workspace in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .cw-step-num {
  background: #11141a !important;
  color: #ffffff !important;
}

html.theme-light .connect-app {
  background: #ffffff !important;
  border-color: #e3e6eb !important;
  color: #11141a !important;
}

html.theme-light .connect-app:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

html.theme-light .connect-app.active {
  background: #f1f5f9 !important;
  border-color: #11141a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light .connect-app.active:hover {
  background: #f1f5f9 !important;
  border-color: #11141a !important;
}

html.theme-light .connect-app strong {
  color: #11141a !important;
}

html.theme-light .connect-app small {
  color: #5e6573 !important;
}

html.theme-light .connect-app-check,
html.theme-light .connect-app-check .icon {
  color: #11141a !important;
}

html.theme-light .connect-price {
  background: #f8fafc !important;
  border-color: #e3e6eb !important;
}

html.theme-light .connect-rates dd {
  color: #11141a !important;
}

html.theme-light .admin-summary > * {
  background: #ffffff !important;
  color: #11141a !important;
}

html.theme-light .admin-summary {
  border-color: #e3e6eb !important;
  background: #e3e6eb !important;
}

html.theme-light .admin-metric {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .admin-metric strong {
  color: #11141a !important;
}

html.theme-light .admin-tabs {
  background: #f0f2f5 !important;
  border-color: #e3e6eb !important;
}

html.theme-light .admin-tabs a {
  color: #5e6573 !important;
}

html.theme-light .admin-tabs a.active {
  background: #ffffff !important;
  color: #11141a !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light .admin-system-summary {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .admin-user-numbers {
  background: #f7f8fa !important;
  border: 1px solid #e3e6eb !important;
}

/* --------------------------------------------------------------------------
   20. Toast Notifications in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light #toast {
  background: #11141a !important;
  border-color: #333742 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
}

/* --------------------------------------------------------------------------
   21. Settings Page in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light .settings-view {
  background: transparent !important;
}

html.theme-light .settings-section {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .settings-section .panel-head svg,
html.theme-light .settings-section .panel-head .icon {
  color: #5e6573 !important;
}

html.theme-light .settings-section .panel-title-wrap h2 {
  color: #11141a !important;
}

html.theme-light .settings-section .panel-title-wrap .section-description {
  color: #5e6573 !important;
}

html.theme-light .settings-choice-card {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  box-shadow: none !important;
}

html.theme-light .settings-choice-card:hover {
  background: #f4f5f8 !important;
  border-color: #b8bec9 !important;
}

html.theme-light .settings-choice-card.active {
  background: #e9ecf2 !important;
  border: 1.5px solid #11141a !important;
  box-shadow: 0 0 0 1px #11141a !important;
  color: #11141a !important;
}

/* Inactive card icon box */
html.theme-light .settings-choice-icon {
  background: #f0f2f5 !important;
  border: 1px solid #e3e6eb !important;
  color: #11141a !important;
}

/* Active card icon box */
html.theme-light .settings-choice-card.active .settings-choice-icon {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

/* Sun, moon, and all icons in choice card must be BLACK */
html.theme-light .settings-choice-icon svg,
html.theme-light .settings-choice-icon .icon,
html.theme-light .settings-choice-card .icon {
  color: #11141a !important;
  stroke: #11141a !important;
  fill: none !important;
}

html.theme-light .settings-choice-badge {
  color: #11141a !important;
  font-weight: 500 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html.theme-light .settings-choice-info strong {
  color: #11141a !important;
}

html.theme-light .settings-choice-info small {
  color: #5e6573 !important;
}

/* Checkmarks must be pure black in light theme */
html.theme-light .settings-choice-check,
html.theme-light .settings-choice-check svg,
html.theme-light .settings-choice-check .icon {
  color: #11141a !important;
  stroke: #11141a !important;
  fill: none !important;
}

html.theme-light .settings-account-box {
  background: #f7f8fa !important;
  border: 1px solid #e3e6eb !important;
}

html.theme-light .settings-account-label {
  color: #5e6573 !important;
}

html.theme-light .settings-account-val {
  color: #11141a !important;
}

/* Model Details Modal Light Theme Contrast & Font Sizing (Item 6) */
html.theme-light .detail-note {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .detail-status {
  color: #4a5160 !important;
  font-size: 15px !important;
}

html.theme-light .detail-status .icon {
  color: #11141a !important;
}

html.theme-light .model-calculator h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #11141a !important;
  margin-bottom: 14px !important;
}

html.theme-light .detail-estimate span {
  font-size: 15px !important;
  color: #4a5160 !important;
  font-weight: 600 !important;
}

html.theme-light .detail-estimate output {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #11141a !important;
}

/* --------------------------------------------------------------------------
   22. Connect Page Refinements in Light Mode (Items 6 & 7)
   -------------------------------------------------------------------------- */
html.theme-light .setup-number {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .picker-change,
html.theme-light .connect-rate-heading a,
html.theme-light .connect-instructions a {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .picker-change .icon,
html.theme-light .picker-change svg,
html.theme-light .connect-rate-heading a .icon,
html.theme-light .connect-rate-heading a svg,
html.theme-light .connect-instructions a .icon,
html.theme-light .connect-instructions a svg {
  color: #11141a !important;
  stroke: #11141a !important;
}

html.theme-light .connect-token-settings summary,
html.theme-light .connect-advanced summary {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .connect-check {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .connect-token-settings {
  border-top: 1px solid #e3e6eb !important;
  border-bottom: 1px solid #e3e6eb !important;
  margin: 12px 0 0 !important;
}

html.theme-light .connect-advanced {
  border-top: none !important;
  border-bottom: 1px solid #e3e6eb !important;
  margin-top: 0 !important;
}

html.theme-light .connect-instructions h3 {
  color: #11141a !important;
}

html.theme-light .connect-instructions p {
  color: #333742 !important;
}

/* --------------------------------------------------------------------------
   23. Video History Refinements in Light Mode (Item 5)
   -------------------------------------------------------------------------- */
html.theme-light .video-meta-params {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .video-model-badge {
  color: #11141a !important;
  font-weight: 700 !important;
}

html.theme-light .video-id-subtle,
html.theme-light .video-id-subtle .video-date,
html.theme-light .video-id-subtle .video-id {
  color: #5e6573 !important;
}

/* Custom Select in Light Mode */
html.theme-light .custom-select-trigger {
  background: #f7f8fa !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}
html.theme-light .custom-select-trigger:hover:not(:disabled) {
  background: #eff1f5 !important;
  border-color: #bcc1cc !important;
}
html.theme-light .custom-select-menu.is-open .custom-select-trigger {
  background: #ffffff !important;
  border-color: #11141a !important;
}
html.theme-light .custom-select-dropdown {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}
html.theme-light .custom-select-option {
  color: #11141a !important;
}
html.theme-light .custom-select-option:hover {
  background: #f0f2f5 !important;
}
html.theme-light .custom-select-option.is-selected {
  background: #e8ebf0 !important;
  border-color: #d0d4dc !important;
}
html.theme-light .custom-select-option-info strong {
  color: #11141a !important;
}
html.theme-light .custom-select-option-info small {
  color: #5e6573 !important;
}

html.theme-light .custom-select-list {
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
}

html.theme-light .custom-select-list::-webkit-scrollbar {
  width: 5px !important;
}

html.theme-light .custom-select-list::-webkit-scrollbar-track {
  background: transparent !important;
}

html.theme-light .custom-select-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.28) !important;
  border-radius: 4px !important;
}

html.theme-light .custom-select-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.48) !important;
}

/* Page Header & Actions: Unified size for Images and Videos in Light Theme */
html.theme-light [data-page=images] .page-header h1,
html.theme-light [data-page=videos] .page-header h1 {
  color: #11141a !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.8px !important;
}

html.theme-light [data-page=images] .page-header .btn,
html.theme-light [data-page=videos] .page-header .btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light [data-page=images] .page-header .btn:hover:not(:disabled),
html.theme-light [data-page=videos] .page-header .btn:hover:not(:disabled) {
  background: #f0f2f5 !important;
  border-color: #b8bec9 !important;
  color: #000000 !important;
}

/* Page Header Subtitles in Light Theme */
html.theme-light .page-header p,
html.theme-light .settings-section .panel-title-wrap .section-description {
  color: #5e6573 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin-top: 6px !important;
}

/* Connect Page: Code Configuration Disclosure & Preview in Light Theme */
html.theme-light .code-disclosure {
  border-top: 1px solid #e3e6eb !important;
}

html.theme-light .code-disclosure > summary {
  color: #11141a !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

html.theme-light .code-disclosure > summary:hover {
  color: #000000 !important;
}

html.theme-light .code-disclosure > summary .icon,
html.theme-light .code-disclosure > summary svg {
  color: #5e6573 !important;
}

html.theme-light .code-disclosure pre,
html.theme-light [data-page=connect] .connect-preview pre {
  background: #f4f5f8 !important;
  border: 1px solid #d5d9e0 !important;
  border-radius: 9px !important;
  color: #11141a !important;
}

html.theme-light .connect-preview .connect-heading .mono,
html.theme-light #connect-file {
  color: #11141a !important;
  font-weight: 500 !important;
}

/* Code Boxes (Python, Node.js, cURL, etc.) in Light Theme: light header, black text */
html.theme-light .code-box {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .code-head {
  background: #f7f8fa !important;
  border-bottom: 1px solid #e3e6eb !important;
  color: #11141a !important;
}

html.theme-light .code-head span,
html.theme-light .code-head strong {
  color: #11141a !important;
  font-weight: 500 !important;
}

html.theme-light .code-head .window-dots i {
  background: #c5cbd5 !important;
}

html.theme-light .code-head .icon-btn {
  color: #5e6573 !important;
}

html.theme-light .code-head .icon-btn:hover {
  color: #11141a !important;
  background: #e9ecf2 !important;
}

html.theme-light .code-box pre {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 0 12px 12px !important;
  color: #11141a !important;
}

html.theme-light .code-disclosure pre code,
html.theme-light #connect-code,
html.theme-light .code-box pre code {
  color: #11141a !important;
  font-size: 14.5px !important;
  font-family: var(--mono) !important;
}

html.theme-light .code-box .code-comment {
  color: #6c7381 !important;
}

/* Chat Assistant Code Blocks in Light Theme */
html.theme-light .answer-code {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .answer-code > div {
  background: #f7f8fa !important;
  border-bottom: 1px solid #e3e6eb !important;
  color: #11141a !important;
}

html.theme-light .answer-code > div span {
  color: #11141a !important;
  font-weight: 600 !important;
}

html.theme-light .answer-code > div .icon-btn {
  color: #5e6573 !important;
}

html.theme-light .answer-code > div .icon-btn:hover {
  color: #11141a !important;
  background: #e9ecf2 !important;
}

html.theme-light .answer-code pre {
  background: #ffffff !important;
  border: none !important;
  color: #11141a !important;
}

html.theme-light .answer-code pre code {
  color: #11141a !important;
}

html.theme-light .connect-note,
html.theme-light #connect-warning {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .connect-instructions h3 {
  color: #11141a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

html.theme-light .connect-instructions p {
  color: #5e6573 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

html.theme-light .connect-instructions a {
  color: #00875a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Harmonized Left Menu: Inputs, selects, buttons in Images & Videos */
html.theme-light #video-model,
html.theme-light #image-model {
  background-color: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
  font-size: 15px !important;
  border-radius: 9px !important;
  min-height: 40px !important;
}

html.theme-light #video-model:hover:not(:disabled),
html.theme-light #image-model:hover:not(:disabled) {
  border-color: #b8bec9 !important;
  background-color: #f4f5f8 !important;
}

html.theme-light .composer-bar #video-prompt,
html.theme-light .composer-bar #image-prompt,
html.theme-light #video-prompt,
html.theme-light #image-prompt {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #11141a !important;
  font-size: 15px !important;
  border-radius: 0 !important;
}

html.theme-light .composer-bar #video-prompt:focus,
html.theme-light .composer-bar #image-prompt:focus,
html.theme-light #video-prompt:focus,
html.theme-light #image-prompt:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

html.theme-light .video-submit-btn,
html.theme-light #image-form .btn.primary {
  min-height: 44px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

html.theme-light #image-form .btn.primary,
html.theme-light #image-form .btn.primary:hover:not(:disabled),
html.theme-light #image-form .btn.primary:active,
html.theme-light #image-form .btn.primary:focus {
  box-shadow: none !important;
}

/* Video Filmstrip Scrollbar & Spacing in Light Theme */
html.theme-light .video-filmstrip-track {
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent !important;
  padding: 4px 4px 14px !important;
}
html.theme-light .video-filmstrip-track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
}
html.theme-light .video-filmstrip-track::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22) !important;
}
html.theme-light .video-filmstrip-track::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.42) !important;
}

/* Query Activity Dashboard Card (Активность запросов) in Light Theme */
html.theme-light .dashboard-grid .panel-head h2 {
  color: #11141a !important;
}

html.theme-light .dashboard-grid .panel-head p {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .chart-bar label {
  color: #5e6573 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

html.theme-light .chart-empty {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light .chart-grid i {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .bar-fill {
  background: linear-gradient(#4b5563, #9ca3af) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html.theme-light .pill,
html.theme-light .panel-head .pill {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #333742 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-radius: 8px !important;
}

/* --------------------------------------------------------------------------
   24. Service Status Page (/status) in Light Mode
   -------------------------------------------------------------------------- */
html.theme-light [data-page=status] .page-header p {
  color: #5e6573 !important;
  font-size: 15px !important;
}

html.theme-light [data-page=status] .status-banner,
html.theme-light .status-banner {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.02) !important;
  padding: 20px 24px !important;
  gap: 16px !important;
}

html.theme-light .status-banner h2 {
  color: #11141a !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  margin: 0 !important;
}

html.theme-light .status-banner p {
  color: #4b5262 !important;
  font-size: 15px !important;
  margin-top: 4px !important;
}

html.theme-light .status-banner .icon,
html.theme-light .status-banner svg {
  color: #00875a !important;
  stroke: #00875a !important;
  width: 28px !important;
  height: 28px !important;
}

html.theme-light .status-banner.is-not-ready .icon,
html.theme-light .status-banner.is-not-ready svg {
  color: #d97706 !important;
  stroke: #d97706 !important;
  width: 28px !important;
  height: 28px !important;
}

html.theme-light [data-page=status] .status-components,
html.theme-light .status-components {
  background: #ffffff !important;
  border: 1px solid #e3e6eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.02) !important;
  padding: 0 28px !important;
}

html.theme-light .status-component {
  border-bottom: 1px solid #edf0f4 !important;
  padding: 20px 0 !important;
}

html.theme-light .status-component:last-child {
  border-bottom: none !important;
}

html.theme-light .status-component h3 {
  color: #11141a !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin: 0 0 4px 0 !important;
}

html.theme-light .status-component p {
  color: #374151 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

html.theme-light .status-component small {
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  display: block !important;
  margin-top: 4px !important;
}

/* Status pills in light mode - styled like standard .status-label badges (screenshot "Истёк") */
html.theme-light .status-component .pill,
html.theme-light .status-pill,
html.theme-light .status-pill.status-operational,
html.theme-light .status-pill.status-configured,
html.theme-light .status-pill.status-unconfigured {
  background: #f0f2f5 !important;
  border: 1px solid #d5d9e0 !important;
  color: #2b303b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

html.theme-light .status-pill.status-degraded {
  background: #fff8ec !important;
  border: 1px solid #fedfa8 !important;
  color: #9c6204 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .theme-toggle,
  .app-shell .theme-toggle,
  .app-topbar .theme-toggle,
  .topnav-actions .theme-toggle,
  .app-shell-theme-toggle {
    display: none !important;
  }
  .mobile-toggle,
  .app-topbar .mobile-toggle,
  header.app-topbar .mobile-toggle {
    display: inline-flex !important;
  }
}

@media (min-width: 901px) {
  .mobile-toggle,
  .app-topbar .mobile-toggle,
  header.app-topbar .mobile-toggle {
    display: none !important;
  }
}

/* Models Ticker Light Theme Overrides (Strictly Neutral per AGENTS.md) */
[data-theme="light"] .product-models-ticker,
html.theme-light .product-models-ticker {
  border: none !important;
}

[data-theme="light"] .models-ticker-caption,
html.theme-light .models-ticker-caption {
  color: #5e6573 !important;
}

[data-theme="light"] .model-ticker-item,
html.theme-light .model-ticker-item {
  color: #2b313a !important;
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .model-ticker-item:hover,
html.theme-light .model-ticker-item:hover {
  color: #000000 !important;
}

[data-theme="light"] .model-ticker-name,
html.theme-light .model-ticker-name {
  color: inherit !important;
}

/* News Feed Light Theme (Strictly Neutral per AGENTS.md) */
[data-theme="light"] .product-news-section .product-section-head h2,
html.theme-light .product-news-section .product-section-head h2 {
  color: #11141a !important;
}

[data-theme="light"] .news-card,
html.theme-light .news-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .news-card-art,
html.theme-light .news-card-art {
  background: #f4f6f8 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  --news-art-bg: #f4f6f8;
  --news-grid-line: rgba(0, 0, 0, 0.04);
  --news-circuit: rgba(5, 150, 105, 0.25);
  --news-chip-bg: #ffffff;
  --news-chip-border: rgba(0, 0, 0, 0.1);
  --news-chip-text: #11141a;
  --news-chip-muted: #55625b;
  --news-badge-bg: rgba(0, 0, 0, 0.03);
  --news-4k-stroke: rgba(2, 132, 199, 0.3);
  --news-lane-bg: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .news-card-tag,
html.theme-light .news-card-tag {
  color: #55625b !important;
}

[data-theme="light"] .news-card-date,
html.theme-light .news-card-date {
  color: #5e6573 !important;
}

[data-theme="light"] .news-card-title,
html.theme-light .news-card-title {
  color: #11141a !important;
}

[data-theme="light"] .admin-news-card,
html.theme-light .admin-news-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .admin-news-title,
html.theme-light .admin-news-title {
  color: #11141a !important;
}

[data-theme="light"] .admin-news-notice,
html.theme-light .admin-news-notice {
  background: rgba(5, 150, 105, 0.08) !important;
  border: 1px solid rgba(5, 150, 105, 0.25) !important;
  color: #064e3b !important;
}

[data-theme="light"] .admin-news-media,
html.theme-light .admin-news-media {
  background: #f4f6f8 !important;
}

[data-theme="light"] .news-upload-zone,
html.theme-light .news-upload-zone {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}