/* ═════════════════════════════════════════════════════════════════════════
   DrakeAPI — Red Core / Cyber Dragon Master Theme
   Выбранный дизайн-вариант (Gemini Flash Red Core)
   Автономно (Zero-CDN), 60fps micro-interactions, Glassmorphism 20px blur
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. Локальные шрифты Inter и JetBrains Mono ────────────────────────── */
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Inter-400-cyrillic.woff2') format('woff2'),
       url('/static/fonts/Inter-400-latin.woff2') format('woff2')}

@font-face {font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Inter-500-cyrillic.woff2') format('woff2'),
       url('/static/fonts/Inter-500-latin.woff2') format('woff2')}

@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Inter-600-cyrillic.woff2') format('woff2'),
       url('/static/fonts/Inter-600-latin.woff2') format('woff2')}

@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/Inter-700-cyrillic.woff2') format('woff2'),
       url('/static/fonts/Inter-700-latin.woff2') format('woff2')}

@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/JetBrainsMono-400-cyrillic.woff2') format('woff2'),
       url('/static/fonts/JetBrainsMono-400-latin.woff2') format('woff2')}

@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/JetBrainsMono-600-cyrillic.woff2') format('woff2'),
       url('/static/fonts/JetBrainsMono-600-latin.woff2') format('woff2')}

/* ── 2. Токены ──────────────────────────────────────────────────────────── */
/* Все объявления custom properties перенесены в tokens.css (секция
   «from red-core»); здесь только компонентные правила. */

[data-theme="light"] body {background-color: var(--bg-darkest); background-image: none}
[data-theme="light"] body::before {display: none}

/* ── 3. Глобальный фон и разметка ──────────────────────────────────────── */
body { background-color: var(--bg-darkest); color: var(--text); background-image: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 46, 91, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 40%, rgba(255, 46, 91, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 30% at 10% 75%, rgba(255, 71, 114, 0.05), transparent 60%); background-attachment: fixed; overflow-x: hidden}

body::before {content: ''; position: fixed; inset: 0; background-size: 40px 40px; background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); pointer-events: none; z-index: 0}

/* ── 4. Карточки (Glassmorphic Red Core Cards) ────────────────────────── */
.card, .panel, article.svc, .dk-card, .model-card, .mdl-card {background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden}

.card:hover, article.svc:hover, .dk-card:hover, .model-card:hover, .mdl-card:hover {border-color: var(--border-accent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), var(--border-glow); transform: translateY(-2px)}

/* ── 5. Кнопки (Red Core Buttons) ──────────────────────────────────────── */
.btn.primary, a.btn.primary, button.primary, .dk-btn--blue, .dk-btn--primary {background: var(--accent-gradient) !important; background-color: #B91C1C !important; color: #FFFFFF !important; border: none !important; border-radius: var(--radius-full) !important; font-weight: 600 !important; box-shadow: 0 4px 16px rgba(255, 46, 91, 0.38) !important; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px}

.btn.primary:hover, a.btn.primary:hover, button.primary:hover, .dk-btn--blue:hover {transform: translateY(-1px); box-shadow: 0 8px 26px rgba(255, 46, 91, 0.58)}

.btn:not(.primary), .dk-btn--ghost {background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); border-radius: var(--radius-full); transition: all 0.2s ease}

.btn:not(.primary):hover, .dk-btn--ghost:hover {background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 46, 91, 0.4); color: #FFFFFF}

[data-theme="light"] .btn:not(.primary):hover,
[data-theme="light"] .dk-btn--ghost:hover,
[data-theme="light"] .btn-ghost:hover {background: rgba(0, 0, 0, 0.06); color: var(--text, #141416); border-color: rgba(194, 24, 64, 0.4)}

.btn-ghost { border-color: transparent}

/* ── 6. Чипы, бейджи и фильтры ─────────────────────────────────────────── */
.chip, .badge, .dk-badge {font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-muted); white-space: normal !important; max-width: 100%}

.chip.acc, .badge.acc, .badge-primary, .dk-badge--blue {background: rgba(255, 46, 91, 0.15) !important; border-color: rgba(255, 46, 91, 0.35) !important; color: var(--acc2) !important}

.badge-success, .badge-ok, .dk-badge--ok {background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(52, 211, 153, 0.3) !important; color: #34D399 !important}

.filter-chip.active, .dk-tab.is-active {background: var(--accent-gradient) !important; background-color: #B91C1C !important; border-color: transparent !important; color: #FFFFFF !important; box-shadow: 0 2px 10px rgba(255, 46, 91, 0.35)}

/* ── 7. Прогресс-бары бюджета API-ключей (Budget Bars) ─────────────────── */
.key-budget-bar {     margin-top: 6px}

.key-budget-fill {   box-shadow: 0 0 8px rgba(255, 46, 91, 0.5); transition: width 0.4s ease}

/* ── 8. Таблицы логов и данных ─────────────────────────────────────────── */
table, .dk-table {width: 100%; border-collapse: collapse}

th, .dk-table th {background: rgba(0, 0, 0, 0.45); color: var(--text-muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 16px; border-bottom: 1px solid var(--border)}

td, .dk-table td {padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--text); font-size: 0.9rem}

tr:hover td, .dk-table tr:hover td {background: rgba(255, 46, 91, 0.04)}

/* ── 9. Терминал и сниппеты кода ───────────────────────────────────────── */
pre, code, .dk-mono {font-family: var(--font-mono)}

.term-code, pre.code-block, .mdl-curl, .keys-new__curl pre {background: var(--bg-terminal); border: 1px solid rgba(255, 46, 91, 0.22); border-radius: var(--radius); padding: 16px 20px; color: #E2E8F0; overflow-x: auto; font-size: 0.85rem; line-height: 1.6}

/* ── 10. Формы авторизации и инпуты ────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], select, textarea, .dk-input {width: 100%; padding: 12px 16px; background: rgba(10, 12, 18, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); color: #FFFFFF; font-family: inherit; font-size: 0.95rem; transition: all 0.2s ease}

input:focus, select:focus, textarea:focus, .dk-input:focus {outline: none; border-color: var(--accent); box-shadow: 0 0 16px rgba(255, 46, 91, 0.35); background: rgba(14, 18, 28, 0.95)}

/* ── 11. Плавающий остров навигации и боковое меню ────────────────────── */
.app-topbar { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 10}

.sidebar {background: var(--sidebar-bg, rgba(7, 8, 12, 0.95)); border-right: 1px solid var(--border-subtle)}

.sidebar-brand .logo-dragon {filter: drop-shadow(0 0 10px rgba(255, 46, 91, 0.65))}

.sidebar-nav a.active, .sidebar-nav a[aria-current="page"] {background: rgba(255, 46, 91, 0.12); border-left-color: var(--accent); color: #FFFFFF}

[data-theme="light"] .sidebar-nav a.active,
[data-theme="light"] .sidebar-nav a[aria-current="page"] {background: rgba(25, 130, 84, 0.12); border-left-color: var(--accent); color: #047857}

/* ── 12. Каталог моделей (/models) — Red Core Enhancement ──────────────── */
.mdl-logo {background: rgba(255, 46, 91, 0.08); border: 1px solid rgba(255, 46, 91, 0.2); border-radius: 10px}

.mdl-card__title h3 {color: #FFFFFF; font-size: 15px}

.mdl-prices dd {color: #FFA07A; font-family: var(--font-mono)}

.mdl-prices dt {color: var(--text-muted)}

/* ── 13. Кабинет разработчика (/dashboard) — Red Core Enhancement ──────── */
.dash-avatar {background: var(--accent-gradient); background-color: #B91C1C !important; color: #FFFFFF; box-shadow: 0 0 20px rgba(255, 46, 91, 0.45) !important}

.dash-hero {background: radial-gradient(520px 200px at 0% 0%, rgba(255, 46, 91, 0.14), transparent 70%), var(--bg-card); border: 1px solid var(--border-subtle)}

.dash-action:hover {border-color: var(--border-accent); box-shadow: var(--border-glow)}

.dash-action__ico {color: var(--accent); background: rgba(255, 46, 91, 0.12) !important}

.keys-new {border-color: rgba(255, 46, 91, 0.45); background: linear-gradient(180deg, rgba(255, 46, 91, 0.08), var(--bg-card) 70%)}

.keys-new__key {border-color: rgba(255, 46, 91, 0.4)}

/* ── 14. Страница авторизации (/login, /register) ─────────────────────── */
.auth-shell {margin: 60px auto; max-width: 440px}

.auth-mark img {filter: drop-shadow(0 0 20px rgba(255, 46, 91, 0.65))}

.auth-shell .card.form {padding: 32px 28px; border: 1px solid var(--border-accent); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 46, 91, 0.2)}

/* ── 15. Мониторинг каналов (/status) ─────────────────────────────────── */
.node-blade {display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: 12px}

.node-blade:hover {border-color: var(--border-accent); box-shadow: var(--border-glow)}

.status-pulse {width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); display: inline-block; margin-right: 8px}

.status-pulse.warn {background: var(--warning); box-shadow: 0 0 10px var(--warning)}

.status-pulse.err {background: var(--error); box-shadow: 0 0 10px var(--error)}

/* ── 16. Панель администратора (/admin и все подразделы) ─────────────── */
.app-content.is-admin {max-width: 1480px; margin: 0 auto; padding: 24px}

/* Карточки метрик KPI в админке */
.admin-kpi-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px}

.admin-kpi-card {background: var(--bg-card); backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-card); transition: all 0.2s ease}

.admin-kpi-card:hover {border-color: var(--border-accent); box-shadow: var(--border-glow); transform: translateY(-2px)}

.admin-kpi-val {font-size: 26px; font-weight: 700; font-family: var(--font-mono); margin-bottom: 4px}

.admin-kpi-lbl {font-size: 13px; color: var(--text-muted)}

/* Хаб разделов админки (Admin Hub) */
.admin-hub { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 16px !important; padding: 24px !important; background: var(--bg-card) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important; margin-bottom: 28px !important}

.admin-hub > div {background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius); padding: 16px 18px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1)}

.admin-hub > div:hover {background: rgba(255, 46, 91, 0.03); border-color: rgba(255, 46, 91, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 46, 91, 0.15); transform: translateY(-2px)}

.admin-hub h3 {margin: 0 0 12px !important; font-size: 14px !important; font-weight: 600 !important; color: #FFFFFF !important; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06)}

.admin-hub h3 .admin-ico {font-size: 16px}

.admin-hub ul.plain {   display: flex !important; flex-direction: column !important; gap: 4px !important}

.admin-hub a {  padding: 6px 10px !important; font-size: 13px !important; color: var(--text) !important; text-decoration: none !important; border-radius: var(--radius-sm) !important; transition: all 0.15s ease}

.admin-hub a:hover {color: #FFFFFF !important; background: rgba(255, 46, 91, 0.12) !important; transform: translateX(3px)}

/* Двухуровневая навигация подменю админки (Admin Subnavs) */
.admin-subnav {display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; background: rgba(11, 14, 22, 0.88); backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); margin-bottom: 10px}

.admin-subnav .subnav-tab {padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); border-radius: var(--radius-full); text-decoration: none; transition: all 0.2s ease}

.admin-subnav .subnav-tab:hover {color: #FFFFFF; background: rgba(255, 255, 255, 0.06)}

.admin-subnav .subnav-tab.active {background: var(--accent-gradient); background-color: #B91C1C; color: #FFFFFF; box-shadow: 0 2px 14px rgba(255, 46, 91, 0.45)}

.admin-subnav-pages {display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px;  border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-full); margin-bottom: 24px}

.admin-subnav-pages .subnav-tab {padding: 5px 12px; font-size: 12px; color: var(--text-dim); border-radius: var(--radius-full); text-decoration: none; transition: all 0.15s ease}

.admin-subnav-pages .subnav-tab:hover {color: #FFFFFF; background: rgba(255, 255, 255, 0.05)}

.admin-subnav-pages .subnav-tab.active {color: #FFA07A; background: rgba(255, 46, 91, 0.14); border: 1px solid rgba(255, 46, 91, 0.35); font-weight: 600}

/* Сворачиваемые блоки админки (Details & Folds) */
details.fold { backdrop-filter: var(--glass-blur);   margin-bottom: 20px; box-shadow: var(--shadow-card); overflow: hidden; transition: border-color 0.2s ease}

details.fold:hover {border-color: rgba(255, 46, 91, 0.35)}

details.fold > summary { justify-content: space-between; border-bottom: 1px solid transparent; transition: background 0.2s ease}

details.fold[open] > summary {border-bottom: 1px solid rgba(255, 255, 255, 0.06)}

details.fold > summary::-webkit-details-marker {display: none}

details.fold > summary h2 { font-size: 16px; font-weight: 600; color: #FFFFFF}

details.fold .fold-body {padding: 20px}

/* Таблицы данных в админке */
.table-wrap {overflow-x: auto; }

.table-wrap table {width: 100%; border-collapse: collapse}

.table-wrap th {background: rgba(0, 0, 0, 0.45); color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 14px; border-bottom: 1px solid var(--border)}

.table-wrap td {padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 13px; color: var(--text)}

.table-wrap tr:hover td {background: rgba(255, 46, 91, 0.04)}

.empty-cell {text-align: center; padding: 32px 16px; color: var(--text-dim)}

/* Кнопки действий в админке */
.btn-xs {font-size: 11.5px; padding: 4px 10px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease}

.btn-xs.primary, button.btn-xs.primary {background: var(--accent-gradient) !important; background-color: #B91C1C !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 2px 8px rgba(255, 46, 91, 0.35)}

.btn-xs.danger, button.btn-xs.danger {background: rgba(239, 68, 68, 0.25); border: 1px solid rgba(239, 68, 68, 0.45); color: #FFFFFF}

.btn-xs.danger:hover {background: rgba(239, 68, 68, 0.25); color: #FFFFFF}

.breadcrumbs ol {   font-size: 13px}

.breadcrumbs li:not(:last-child)::after {content: '/'; margin-left: 8px; color: var(--text-dim)}

/* ── 9. Фирменные компоненты лендинга Red Core (Failover, Bento, Calculator, CLI, Steps, FAQ) ── */

.hero-split, .hero-copy {min-width: 0; max-width: 100%}

.hero-quick-cmd {display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 16px; background: rgba(10, 12, 17, 0.85); border: 1px solid rgba(255, 46, 91, 0.25); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 0.84rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); margin-top: 14px}

.cmd-text {color: #E2E8F0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); min-width: 0; max-width: 100%}

.cmd-text .cmd-prompt {color: #FFA3B8; font-weight: 600; margin-right: 6px}

.cmd-copy-btn {display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-sm); background: rgba(255, 46, 91, 0.15); border: 1px solid rgba(255, 46, 91, 0.3); color: #FFA3B8; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; margin-left: 12px}

.cmd-copy-btn:hover {background: rgba(255, 46, 91, 0.35); color: #FFFFFF}

/* Protocols Grid */
.protocols-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px}

.protocol-card {background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 26px 24px; display: flex; flex-direction: column; position: relative; transition: all 0.25s ease}

.protocol-card:hover {transform: translateY(-3px); border-color: rgba(255, 46, 91, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 46, 91, 0.2)}

.protocol-card-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px}

.protocol-icon-box {width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(255, 46, 91, 0.12); border: 1px solid rgba(255, 46, 91, 0.25); display: flex; align-items: center; justify-content: center; color: #FF4772}

.protocol-icon-box img {width: 24px; height: 24px}

.proto-tag {font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); color: #94A3B8}

.proto-tag.active {background: rgba(255, 46, 91, 0.2); color: #FFA3B8; border: 1px solid rgba(255, 46, 91, 0.35)}

.proto-name {font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; color: var(--text, #FFFFFF)}

.proto-endpoint {display: inline-block; font-family: var(--font-mono); font-size: 0.82rem; padding: 5px 10px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 46, 91, 0.22); border-radius: var(--radius-sm); color: #FFA07A; margin-bottom: 14px; word-break: break-all}

.proto-desc {font-size: 0.9rem; color: var(--text-muted, #94A3B8); line-height: 1.55; margin-bottom: 20px; flex-grow: 1}

.proto-supported-tools {border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 14px}

.tools-label {font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94A3B8; margin-bottom: 8px}

.tools-chips {display: flex; flex-wrap: wrap; gap: 6px}

.tool-chip {font-size: 0.75rem; font-weight: 500; padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #CBD5E1}

/* Bento Grid */
.bento-grid {display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 16px}

.bento-card {background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: all 0.25s ease}

.bento-card:hover {border-color: rgba(255, 46, 91, 0.42); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 46, 91, 0.2)}

.bento-col-8 {grid-column: span 8}

.bento-col-4 {grid-column: span 4}

.bento-card-title {font-size: 1.35rem; font-weight: 700; color: var(--text, #FFFFFF); margin-bottom: 8px}

.bento-card-desc {font-size: 0.92rem; color: var(--text-muted, #94A3B8); line-height: 1.55; margin-bottom: 20px}

/* Key Features Inside Bento */
.key-features-list {list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding: 0}

.key-feature-item {display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: #94A3B8; line-height: 1.5}

.feature-check-icon {width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 46, 91, 0.15); color: #FFA3B8; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; margin-top: 2px}

/* Bento Art */
.bento-art-container {margin-top: auto; border-radius: var(--radius-md); overflow: hidden; height: 150px; position: relative}

.bento-art-container img {width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1); display: block}

/* Steps 1-2-3 */
.steps-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 16px 0 0}

.step-card {background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 28px 24px; position: relative; display: flex; flex-direction: column; transition: all 0.25s ease}

.step-card:hover {transform: translateY(-3px); border-color: rgba(255, 46, 91, 0.42); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 46, 91, 0.2)}

.step-number {font-size: 2.4rem; font-weight: 900; color: #FFA3B8; line-height: 1; margin-bottom: 12px; transition: color 0.2s ease; font-family: var(--font-mono)}

.step-card:hover .step-number {color: #FFFFFF}

.step-title {font-size: 1.15rem; font-weight: 700; color: var(--text, #FFFFFF); margin-bottom: 10px}

.step-desc {font-size: 0.88rem; color: var(--text-muted, #94A3B8); line-height: 1.55; margin: 0}

.step-desc code {font-family: var(--font-mono); font-size: 0.8rem; padding: 2px 6px; background: rgba(0, 0, 0, 0.4); border-radius: var(--radius-sm); color: #FFA07A}

/* Billing & Calculator */
.billing-split {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px}

.billing-card {background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column}

.billing-card h3 {font-size: 1.25rem; font-weight: 700; color: var(--text, #FFFFFF); margin-bottom: 10px}

.billing-card p {font-size: 0.9rem; color: var(--text-muted, #94A3B8); line-height: 1.6; margin-bottom: 16px}

.calc-box {background: #07080C; border: 1px solid rgba(255, 46, 91, 0.22); border-radius: var(--radius-md); padding: 20px; margin-top: auto}

.calc-slider-wrap {margin-bottom: 18px}

.calc-slider-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 0.86rem; font-weight: 600}

.calc-slider { -webkit-appearance: none; background: rgba(255, 255, 255, 0.12); outline: none}

.calc-slider::-webkit-slider-thumb {-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #FF2E5B; box-shadow: 0 0 10px #FF2E5B; cursor: pointer; transition: transform 0.1s}

.calc-slider::-webkit-slider-thumb:hover {transform: scale(1.15)}

.calc-result-row {display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px}

.calc-price-tag {font-size: 1.5rem; font-weight: 800; color: var(--text, #FFFFFF); display: flex; align-items: baseline; gap: 4px; font-family: var(--font-mono)}

.calc-price-tag span {font-size: 0.78rem; color: var(--text-muted, #94A3B8); font-weight: 500; font-family: var(--font-sans)}

/* FAQ Accordion */
.faq-list {max-width: 900px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 12px}

.faq-item {background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); overflow: hidden; transition: all 0.2s ease}

.faq-item.open {border-color: rgba(255, 46, 91, 0.38); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5)}

.faq-trigger {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; text-align: left; font-size: 1rem; font-weight: 600; color: var(--text, #FFFFFF); background: none; border: none; cursor: pointer; transition: color 0.2s ease}

.faq-trigger:hover {color: #FF4772}

.faq-chevron {width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #FF4772; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; margin-left: 12px}

.faq-item.open .faq-chevron {transform: rotate(180deg)}

.faq-content {display: none; padding: 0 22px 18px; font-size: 0.92rem; color: var(--text-muted, #94A3B8); line-height: 1.6}

.faq-item.open .faq-content {display: block}

/* Responsive Overrides */
@media (max-width: 900px) {.protocols-grid,
  .steps-grid,
  .billing-split {
    grid-template-columns: 1fr; }
  .bento-col-8,
  .bento-col-4 {
    grid-column: span 12; }}

@media (max-width: 768px) {.hero-quick-cmd {
    flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .cmd-text {
    white-space: normal; word-break: break-all; font-size: 0.8rem; width: 100%; max-width: 100%; }
  .cmd-copy-btn {
    margin-left: 0; align-self: flex-start; }
  .hero-terminal {
    max-width: 100%; min-width: 0; }
}


/* Media Art & Responsive Containers */
.affiliate-hero-art {max-width: 100%; min-width: 0; box-sizing: border-box}

.affiliate-hero-art img {max-width: 100%; height: auto; display: block}

.error-art-wrap {max-width: 100%; box-sizing: border-box}

.error-art-wrap img {max-width: 100%; height: auto; display: block}

/* ─────────────────────────────────────────────────────────────
   SECTION 10: CYBER AI PLAYGROUND STUDIO (REDESIGNED)
   ───────────────────────────────────────────────────────────── */

.pg-section {max-width: 1440px; margin: 0 auto; padding: 0 4px}

.pg-header-row {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 22px}

.pg-header-left {display: flex; flex-direction: column; gap: 4px}

.pg-title {font-size: clamp(26px, 3.2vw, 36px); font-weight: 750; color: #FFFFFF;  letter-spacing: -0.03em}

.pg-lead {max-width: 680px;   font-size: 14px; line-height: 1.55}

.pg-header-actions {display: flex; align-items: center; gap: 12px; flex-wrap: wrap}

.pg-status-badge {display: inline-flex; align-items: center; gap: 8px; background: rgba(18, 22, 32, 0.75); border: 1px solid rgba(255, 46, 91, 0.22); border-radius: 9999px; padding: 7px 16px; font-size: 12px; color: #CBD5E1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px)}

/* ── Левая колонка: Параметры инференса (Studio Inspector) ── */
.pg-settings {background: rgba(18, 22, 32, 0.75); border: 1px solid rgba(255, 46, 91, 0.16); border-radius: 16px; padding: 22px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);  flex-direction: column;  transition: all 0.2s ease}

.pg-settings:hover {border-color: rgba(255, 46, 91, 0.3)}

.pg-panel-head {display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08)}

.pg-panel-icon {width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 46, 91, 0.1); border: 1px solid rgba(255, 46, 91, 0.25); color: #FF2E5B; font-size: 14px}

.pg-panel-title {margin: 0; font-size: 15px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em}

.pg-field-group {display: flex; flex-direction: column; gap: 6px}

.pg-label {display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #94A3B8)}

.pg-select-wrap, .pg-input-wrap {position: relative; width: 100%}

.pg-select, .pg-input, .pg-textarea {width: 100%; background: rgba(10, 13, 20, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: #FFFFFF; padding: 10px 14px; font-family: inherit; font-size: 13.5px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box}

.pg-select:focus, .pg-input:focus, .pg-textarea:focus {outline: none; border-color: #FF2E5B; box-shadow: 0 0 0 3px rgba(255, 46, 91, 0.22), 0 0 20px rgba(255, 46, 91, 0.18); background: rgba(14, 18, 28, 0.95)}

.pg-key-eye {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; font-size: 14px; opacity: 0.7; padding: 4px; display: flex; align-items: center; justify-content: center; color: var(--text); transition: opacity 0.15s, color 0.15s}

.pg-key-eye:hover {opacity: 1; color: #FF2E5B}

.pg-textarea {resize: vertical; min-height: 64px; line-height: 1.5}

.pg-sliders-box {background: rgba(10, 13, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px}

.pg-slider-labels {display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted, #94A3B8); margin-bottom: 6px}

.pg-slider-labels b {font-family: var(--font-mono); color: #FFA07A; font-size: 13px; font-weight: 700}

.calc-slider {width: 100%; accent-color: #FF2E5B; height: 6px; border-radius: 3px; cursor: pointer}

.pg-checks-grid {display: flex; flex-direction: column; gap: 10px; padding: 4px 0}

.pg-switch {display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 12.5px; color: #CBD5E1}

.pg-switch input {display: none}

.switch-slider {width: 34px; height: 20px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; position: relative; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0}

.switch-slider::before {content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #94A3B8; top: 2px; left: 2px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1)}

.pg-switch input:checked + .switch-slider {background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%); border-color: #FF2E5B; box-shadow: 0 0 12px rgba(255, 46, 91, 0.45)}

.pg-switch input:checked + .switch-slider::before {transform: translateX(14px); background: #FFFFFF}

.pg-actions-row {display: flex; gap: 10px; margin-top: auto; padding-top: 10px}

.pg-btn-ghost {flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-muted, #94A3B8); font-size: 12.5px; padding: 8px 12px; border-radius: 10px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: center}

.pg-btn-ghost:hover {background: rgba(255, 46, 91, 0.1); border-color: rgba(255, 46, 91, 0.4); color: #FFFFFF; transform: translateY(-1px)}

/* ── Правая колонка: Neural Terminal & Stream Viewer ── */
.pg-chat-card {background: rgba(18, 22, 32, 0.75); border: 1px solid rgba(255, 46, 91, 0.16); border-radius: 16px;    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; position: relative}

.console-heading {padding: 16px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); justify-content: space-between; background: rgba(10, 13, 20, 0.75)}

.console-title b { font-weight: 700; color: #FFFFFF; }

.console-actions { align-items: center}

/* Телеметрия HUD */
.pg-hud {     border-bottom: 1px solid rgba(255, 255, 255, 0.06)}

.hud-item {background: rgba(18, 22, 34, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px}

.hud-label {font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #94A3B8)}

.hud-item b {font-family: var(--font-mono); font-size: 15px; color: #FFA07A; font-weight: 700; letter-spacing: -0.01em}

/* Холст чата */
.pg-chat-card .chat {  overflow-y: auto; min-height: 380px; display: flex; flex-direction: column; gap: 16px}

.chat-empty { max-width: 680px; padding: 24px 12px}

.chat-empty-img {filter: drop-shadow(0 8px 24px rgba(255, 46, 91, 0.25)); margin-bottom: 16px}

.chat-empty-title { font-weight: 700; color: #FFFFFF;  letter-spacing: -0.02em}

.chat-empty-desc {   line-height: 1.5}

.pg-quick-prompts {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: left}

.pg-prompt-chip {background: rgba(14, 18, 28, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); color: inherit; font-family: inherit}

.pg-prompt-chip:hover {border-color: #FF2E5B; background: rgba(255, 46, 91, 0.08); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 46, 91, 0.2)}

.chip-icon {font-size: 22px; flex-shrink: 0}

.chip-body {display: flex; flex-direction: column; gap: 2px; min-width: 0}

.chip-body strong {font-size: 13.5px; color: #FFFFFF; font-weight: 600}

.chip-body small {font-size: 11.5px; color: var(--text-muted, #94A3B8); line-height: 1.35}

/* Сообщения в диалоге */
.msg-bubble { margin: 4px 0;  line-height: 1.65; word-break: break-word}

.msg-bubble.user {margin-left: auto;  border: 1px solid rgba(255, 255, 255, 0.08); border-right: 3px solid #FF2E5B; border-radius: 14px 14px 2px 14px; padding: 12px 18px; color: #FFFFFF; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3)}

.msg-bubble.assistant {margin-right: auto; background: rgba(14, 18, 28, 0.9); border: 1px solid rgba(255, 46, 91, 0.18); border-radius: 14px 14px 14px 2px; padding: 16px 20px; color: #E2E8F0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4)}

.msg-bubble.assistant .code-block {margin: 14px 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #07090E}

.msg-bubble.assistant .code-head {padding: 8px 14px; background: rgba(18, 22, 34, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center}

.msg-bubble.assistant pre {margin: 0; padding: 14px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: #38BDF8}

.pg-meta {  font-size: 11px; color: var(--text-muted, #94A3B8); font-family: var(--font-mono)}

/* Нижняя панель ввода (Input Dock) */
.pg-input-dock {padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 13, 20, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px)}

.pg-input-row {display: flex; gap: 12px; align-items: flex-end}

.pg-input-textarea {flex: 1; background: rgba(18, 22, 32, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px 16px; color: #FFFFFF; font-family: inherit; font-size: 13.5px; resize: none; min-height: 52px; box-sizing: border-box; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1)}

.pg-input-textarea:focus {outline: none; border-color: #FF2E5B; box-shadow: 0 0 0 3px rgba(255, 46, 91, 0.22), 0 0 20px rgba(255, 46, 91, 0.15); background: rgba(22, 28, 42, 0.95)}

.pg-dock-controls {display: flex; flex-direction: column; gap: 6px; align-items: flex-end}

.pg-hotkey-hint {font-size: 10px; font-family: var(--font-mono); color: var(--text-muted, #94A3B8)}

.pg-btn-send {padding: 12px 22px; font-weight: 700; font-size: 13.5px; border-radius: 10px; background: linear-gradient(135deg, #E11D48 0%, #9F1239 100%); color: #FFFFFF; border: 1px solid rgba(255, 46, 91, 0.35); box-shadow: 0 4px 16px rgba(225, 29, 72, 0.4); white-space: nowrap; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1)}

.pg-btn-send:hover {transform: translateY(-1px); box-shadow: 0 6px 22px rgba(225, 29, 72, 0.6); background: linear-gradient(135deg, #BE123C 0%, #881337 100%)}

.pg-btn-stop {padding: 12px 20px; font-weight: 700; font-size: 13px; border-radius: 10px}

.pg-status-msg {margin-top: 6px; font-size: 11.5px}

/* Светлая тема для Playground */
[data-theme="light"] .pg-title {color: #0F172A}
[data-theme="light"] .pg-settings,
[data-theme="light"] .pg-chat-card {background: #FFFFFF; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08)}
[data-theme="light"] .pg-panel-title,
[data-theme="light"] .console-title b,
[data-theme="light"] .chat-empty-title,
[data-theme="light"] .chip-body strong {color: #0F172A}
[data-theme="light"] .console-heading,
[data-theme="light"] .pg-input-dock {background: #F8FAFC; border-color: rgba(0, 0, 0, 0.08)}
[data-theme="light"] .pg-hud { border-color: rgba(0, 0, 0, 0.08)}
[data-theme="light"] .pg-select,
[data-theme="light"] .pg-input,
[data-theme="light"] .pg-textarea,
[data-theme="light"] .pg-input-textarea {background: #FFFFFF; border-color: rgba(0, 0, 0, 0.15); color: #0F172A}
[data-theme="light"] .msg-bubble.user {background: #E2E8F0; color: #0F172A; border-color: rgba(0, 0, 0, 0.08); border-right-color: #B91C1C}
[data-theme="light"] .msg-bubble.assistant {background: #F8FAFC; color: #1E293B; border-color: rgba(225, 29, 72, 0.25)}
[data-theme="light"] .msg-bubble.assistant pre {color: #0284C7}

@media (max-width: 960px) {.pg-layout {
    grid-template-columns: 1fr; }
  .pg-quick-prompts {
    grid-template-columns: 1fr; }
  .pg-hud {
    grid-template-columns: repeat(2, 1fr); }}

/* ── Section 11. Complete Green Purge / Unified Red Core Overhaul ──────── */
/* 1. Universal Pagination & Table Pagers */
.dk-pager__page.is-current, 
.dk-pager__size.is-current,
.usage-pagination .active,
.dk-table-pager .is-current {background: linear-gradient(135deg, #E11D48 0%, #9F1239 100%) !important; background-color: #B91C1C !important; color: #FFFFFF !important; font-weight: 700 !important; border-radius: 6px !important; border: 1px solid rgba(255, 46, 91, 0.5) !important; box-shadow: 0 2px 10px rgba(255, 46, 91, 0.45) !important}

.dk-pager__page:hover:not(.is-current),
.dk-pager__size:hover:not(.is-current),
.dk-pager__btn:hover:not(.is-disabled) {color: #FF6584; background: rgba(255, 46, 91, 0.1)}

/* 2. Universal Eyebrows & Section Markers */
.eyebrow,
.dash-eyebrow,
.affiliate-eyebrow,
.keys-eyebrow,
[data-panel-layout="pult"] .eyebrow {color: #FF2E5B !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; font-weight: 700 !important}

/* 3. Primary Buttons & Call to Actions */
.dk-btn--primary,
.btn.primary,
.btn-primary,
.btn.btn-sm.primary,
a.btn.btn-sm.primary,
[data-panel-layout="pult"] .btn.primary,
[data-panel-layout="pult"] .btn-primary {background: linear-gradient(135deg, #E11D48 0%, #9F1239 100%) !important; background-color: #B91C1C !important; color: #FFFFFF !important; border-color: rgba(225, 29, 72, 0.35) !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(190, 18, 60, 0.35) !important}

.dk-btn--primary:hover,
.btn.primary:hover,
.btn-primary:hover,
[data-panel-layout="pult"] .btn.primary:hover,
[data-panel-layout="pult"] .btn-primary:hover {background: linear-gradient(135deg, #BE123C 0%, #881337 100%); background-color: #881337; color: #FFFFFF; box-shadow: 0 6px 22px rgba(190, 18, 60, 0.5)}

/* 4. Affiliate Components */
.affiliate-step-num {color: #FF2E5B}

.affiliate-hero-mark span:first-child {border-color: #FF2E5B; color: #FF2E5B}

.affiliate-case-marker { box-shadow: 0 0 16px rgba(255, 46, 91, 0.85)}

.affiliate-case-marker::before {border-top-color: #FF2E5B}

.affiliate-case-marker::after {border-bottom-color: #FF2E5B}

/* 5. Dashboard Steps & Navigation Tabs */
.dash-step a:hover {color: #FF2E5B}

.dash-step.is-done .dash-step__dot {background: rgba(255, 46, 91, 0.16); color: #FF2E5B; border-color: rgba(255, 46, 91, 0.45)}

.dk-sort:focus-visible,
.usage-page :is(a, button, input, select, .usage-svg__point, .usage-rank__bar):focus-visible,
.dash-action:focus-visible,
:focus-visible,
.dk-btn:focus-visible,
.dk-input:focus-visible,
.dk-select:focus-visible,
.dk-textarea:focus-visible {outline: 2px solid var(--acc2) !important; outline-offset: 2px !important}

.nav-btn:focus-visible,
.dk-heat__cell:focus-visible {outline-offset: -2px !important}

.dk-kpi a.dk-kpi__link,
.keys-note a {color: #FF2E5B !important}

.dk-meter > i {background: linear-gradient(90deg, #FF2E5B, #FF758C) !important}

/* 8. Links and Inline Code */
a:not(.btn):not(.dk-btn):not(.nav-btn):not(.tab-item):not(.lang-btn) {color: var(--link, #FF6584)}

a:not(.btn):not(.dk-btn):not(.nav-btn):not(.tab-item):not(.lang-btn):hover {color: var(--link-hover, #FFA07A)}

:not(pre) > code {color: #FFA07A}

/* ── Section 12. Seamless Cross-Document View Transitions ──────────────── */
@view-transition {navigation: auto}

::view-transition-old(root),
::view-transition-new(root) {animation-duration: 0.18s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1)}

/* Сайдбар и шапка остаются неподвижными при смене страниц (эффект SPA) */
.app-shell > .sidebar,
#sidebar {view-transition-name: app-sidebar}

.app-main > .app-topbar,
.app-topbar {view-transition-name: app-topbar}

.app-main > .app-content,
#app-content {view-transition-name: app-main-content}

/* ── Section 13. Light Theme Accessibility & Contrast Overrides (WCAG AA ≥ 4.5:1) ── */

[data-theme="light"] .sidebar {background: var(--sidebar-bg, #f8f9fd); border-right-color: var(--border, rgba(0, 0, 0, 0.08))}

[data-theme="light"] .sidebar-nav a.active,
[data-theme="light"] .nav-btn.active {color: #064e3b; background: rgba(6, 78, 59, 0.12)}

[data-theme="light"] .sidebar-nav a {color: #4b5568}

[data-theme="light"] .eyebrow,
[data-theme="light"] .dash-eyebrow,
[data-theme="light"] .keys-eyebrow,
[data-theme="light"] .affiliate-eyebrow,
[data-theme="light"] [data-panel-layout="pult"] .eyebrow,
[data-theme="light"] .mdl-section-label {color: #C21840 !important}

[data-theme="light"] :not(pre) > code,
[data-theme="light"] .keys-endpoint__url,
[data-theme="light"] .dk-mono:not(.btn):not(.dk-btn):not(h3):not(.mdl-prov-count) {color: #B91C1C !important}

/* Светлая тема: инлайн-код был красным на полупрозрачном тёмном фоне — контраст 2.03:1
   при норме 4.5:1. Фон делаем светлым, текст остаётся брендовым красным. */
[data-theme="light"] :not(pre) > code,
[data-theme="light"] .step-desc code {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.22);
  color: #B91C1C !important;
}

[data-theme="light"] .dash-stat__v,
[data-theme="light"] .dash-stat__v.dk-num,
[data-theme="light"] .dk-kpi a.dk-kpi__link,
[data-theme="light"] .keys-note a,
[data-theme="light"] .rd-fresh {color: #C21840 !important}

[data-theme="light"] .badge-success,
[data-theme="light"] .badge-ok,
[data-theme="light"] .dk-badge--ok {background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(5, 150, 105, 0.28) !important; color: #064e3b !important}

[data-theme="light"] .btn-xs.danger,
[data-theme="light"] button.btn-xs.danger {background: #DC2626; background-color: #DC2626; color: #FFFFFF; border-color: #DC2626}

[data-theme="light"] .admin-hub h3,
[data-theme="light"] .admin-hub h2,
[data-theme="light"] details.fold > summary h2 {color: var(--text, #141416) !important; border-bottom-color: var(--border, rgba(0, 0, 0, 0.08)) !important}
[data-theme="light"] .admin-hub h3 .admin-ico {color: var(--text, #141416)}
[data-theme="light"] .admin-hub a {color: var(--text, #141416) !important}
[data-theme="light"] .admin-hub a:hover {color: var(--text, #141416) !important; background: rgba(194, 24, 64, 0.10) !important}
[data-theme="light"] .chip.acc,
[data-theme="light"] .badge.acc,
[data-theme="light"] .badge-primary,
[data-theme="light"] .dk-badge--blue {background: rgba(194, 24, 64, 0.10) !important; border-color: rgba(194, 24, 64, 0.3) !important; color: #9F1239 !important}
[data-theme="light"] .chip.acc:hover,
[data-theme="light"] .badge.acc:hover,
[data-theme="light"] .badge-primary:hover,
[data-theme="light"] .dk-badge--blue:hover {background: rgba(194, 24, 64, 0.16); color: #881337}
[data-theme="light"] .admin-subnav-pages {background: var(--bg2, #eef0f7); border-color: var(--border, rgba(0, 0, 0, 0.08))}
[data-theme="light"] .admin-subnav .subnav-tab {color: var(--text-muted, #4b5568)}
[data-theme="light"] .admin-subnav-pages .subnav-tab {color: var(--text-dim, #586174)}
[data-theme="light"] .admin-subnav-pages .subnav-tab.active {color: #C21840; background: rgba(194, 24, 64, 0.12); border-color: rgba(194, 24, 64, 0.35)}

[data-theme="light"] .admin-kpi-val {color: var(--text, #141416)}
[data-theme="light"] .admin-kpi-card:nth-child(1) .admin-kpi-val {color: #C21840}
[data-theme="light"] .admin-kpi-card:nth-child(2) .admin-kpi-val {color: #047857}
[data-theme="light"] .admin-kpi-card:nth-child(3) .admin-kpi-val {color: #1D4ED8}
[data-theme="light"] .admin-kpi-card:nth-child(4) .admin-kpi-val {color: #141416}

[data-theme="light"] th,
[data-theme="light"] .dk-table th,
[data-theme="light"] .table-wrap th,
[data-theme="light"] .is-admin th {background: var(--bg2, #eef0f7) !important; color: var(--text-muted, #4b5568) !important}
[data-theme="light"] th a,
[data-theme="light"] th span,
[data-theme="light"] .dk-sort-link,
[data-theme="light"] .dk-sort-arrow {color: #047857}
[data-theme="light"] .rd-total span {color: var(--text-muted, #4b5568)}

/* Light Theme: Playground */
[data-theme="light"] .pg-chat-card,
[data-theme="light"] .pg-settings-card {background: var(--bg-card, rgba(255, 255, 255, 0.95)); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06)}
[data-theme="light"] .console-heading,
[data-theme="light"] .pg-hud {background: var(--bg2, #eef0f7); border-bottom-color: rgba(0, 0, 0, 0.08)}
[data-theme="light"] .console-heading b,
[data-theme="light"] .console-heading span,
[data-theme="light"] .console-heading time {color: var(--text, #141416)}
[data-theme="light"] .pg-status-badge {background: var(--bg2, #eef0f7); border-color: rgba(0, 0, 0, 0.12); color: var(--text-muted, #4b5568)}
[data-theme="light"] .pg-status-badge b {color: #064e3b}
[data-theme="light"] .pg-status-badge time {color: var(--text-muted, #4b5568)}
[data-theme="light"] .hud-item {background: #FFFFFF; border-color: rgba(0, 0, 0, 0.10)}
[data-theme="light"] .hud-label {color: var(--text-muted, #4b5568)}
[data-theme="light"] .hud-item b {color: #C21840}
[data-theme="light"] .pg-sliders-box {background: var(--bg2, #eef0f7); border-color: rgba(0, 0, 0, 0.08)}
[data-theme="light"] .pg-slider-labels {color: var(--text-muted, #4b5568)}
[data-theme="light"] .pg-slider-labels b {color: #C21840}
[data-theme="light"] .switch-label {color: var(--text, #141416)}
[data-theme="light"] .switch-slider {background: #cbd5e1}
[data-theme="light"] .pg-btn-ghost {background: var(--bg2, #eef0f7); border-color: rgba(0, 0, 0, 0.12); color: var(--text-muted, #4b5568)}
[data-theme="light"] .pg-panel-icon {color: var(--text, #141416)}
[data-theme="light"] .chip-icon {color: var(--text-muted, #4b5568)}
[data-theme="light"] .pg-prompt-chip {background: #FFFFFF; border-color: rgba(0, 0, 0, 0.10); color: var(--text, #141416)}
[data-theme="light"] .chip-body strong {color: var(--text, #141416)}
[data-theme="light"] .chip-body small {color: var(--text-muted, #4b5568)}

/* Layout & helper classes for admin and playground */
.admin-top-section {margin-bottom: 28px}
.admin-header-row {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px}
.admin-title {margin: 6px 0 8px}
.admin-lead {margin: 0; color: var(--text-muted)}
.admin-header-actions {display: flex; flex-wrap: wrap; gap: 10px}
.admin-kpi-val.kpi-spent {color: var(--accent)}
.admin-kpi-val.kpi-topups {color: #10B981}
.admin-kpi-val.kpi-balances {color: #60A5FA}
.admin-kpi-val.kpi-requests {color: #F8FAFC}
[data-theme="light"] .admin-kpi-val.kpi-spent {color: #C21840}
[data-theme="light"] .admin-kpi-val.kpi-topups {color: #047857}
[data-theme="light"] .admin-kpi-val.kpi-balances {color: #1D4ED8}
[data-theme="light"] .admin-kpi-val.kpi-requests {color: #141416}

.pg-title {margin: 6px 0 8px}
.pg-lead {margin: 0; color: var(--text-muted)}
.pg-slider-last {margin-bottom: 0}
.console-title {display: flex; align-items: center; gap: 8px}
.console-title b {font-size: 14px; letter-spacing: 0.02em}
.console-actions {display: flex; gap: 8px}
.chat-empty-art {margin-bottom: 16px}
.chat-empty-img {max-width: 140px; height: auto; border-radius: 12px; margin: 0 auto; display: block; box-shadow: 0 0 25px rgba(255, 46, 91, 0.25); border: 1px solid rgba(255, 46, 91, 0.3)}
.chat-empty-title {font-size: 18px; margin: 0 0 6px}
.chat-empty-desc {color: var(--text-muted); font-size: 13px; max-width: 480px; margin: 0 auto 20px}

/* D-04: Nav icons alignment in Pult */
[data-panel-layout="pult"] .nav-fold-links {padding-left: 0}

/* D-47: Mobile inputs font-size >= 16px to prevent iOS zoom */
@media (max-width: 600px) {.pg-select,
  .pg-textarea,
  #pgModel,
  #pgPreset,
  #pgSystem,
  #pgIn {
    font-size: 16px; }}

/* Hero Accent Gradient Text */
.hero-accent-text {background: linear-gradient(135deg, #FF3366 0%, #FF6584 50%, #FFA3B8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block}
[data-theme="light"] .hero-accent-text {background: linear-gradient(135deg, #991B1B 0%, #B91C1C 50%, #C21840 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block}

/* Terminal Footer Chips */
.terminal-footer-chips {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px}
.foot-chip {padding: 3px 8px; border-radius: var(--radius-sm, 6px); background: rgba(255, 255, 255, 0.08); color: #94A3B8; font-family: var(--font-mono); font-size: 11px}
.foot-chip.active {background: rgba(255, 46, 91, 0.2); color: #FFA3B8; border: 1px solid rgba(255, 46, 91, 0.35); font-weight: 600}
.foot-meta {color: #94A3B8; font-size: 11px; margin-left: auto}

/* Light theme overrides for form controls, dialogs, and playground */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .dk-input,
[data-theme="light"] .dk-select,
[data-theme="light"] .dk-textarea {background: #FFFFFF !important; border-color: rgba(15, 23, 42, 0.16) !important; color: #0F172A !important}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .dk-input:focus,
[data-theme="light"] .dk-select:focus,
[data-theme="light"] .dk-textarea:focus {background: #FFFFFF; border-color: #B91C1C; box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15)}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] .dk-input::placeholder,
[data-theme="light"] .dk-textarea::placeholder,
[data-theme="light"] .pg-select::placeholder,
[data-theme="light"] .pg-input::placeholder,
[data-theme="light"] .pg-textarea::placeholder {color: #475569}

[data-theme="light"] dialog.dk-modal {background-color: #FFFFFF; color: var(--text); border-color: rgba(15, 23, 42, 0.14)}

[data-theme="light"] .dk-modal__foot {background: #F8FAFC; border-top-color: rgba(15, 23, 42, 0.08)}

[data-theme="light"] .pg-settings {background: #FFFFFF; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05)}

[data-theme="light"] .pg-panel-head {border-bottom-color: rgba(0, 0, 0, 0.08); color: var(--text, #141416)}

[data-theme="light"] .pg-panel-title {color: var(--text, #141416)}

[data-theme="light"] .pg-label {color: #334155}

[data-theme="light"] .pg-chat-card {background: #FFFFFF; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05)}

[data-theme="light"] .console-heading {background: #F8FAFC; border-bottom-color: rgba(0, 0, 0, 0.08); color: var(--text, #141416)}

[data-theme="light"] .pg-hud {background: #F1F5F9; border-bottom-color: rgba(0, 0, 0, 0.08)}

[data-theme="light"] .pg-select,
[data-theme="light"] .pg-input,
[data-theme="light"] .pg-textarea,
[data-theme="light"] #pgModel,
[data-theme="light"] #pgPreset,
[data-theme="light"] #pgSystem,
[data-theme="light"] #pgIn,
[data-theme="light"] #pgKey {background: #FFFFFF; border-color: rgba(0, 0, 0, 0.15); color: #0F172A}

[data-theme="light"] .proto-tag.active {background: rgba(185, 28, 28, 0.12); color: #991B1B; border-color: rgba(185, 28, 28, 0.35)}

[data-theme="light"] .proto-name {color: #0F172A}

[data-theme="light"] .proto-desc {color: #475569}

[data-theme="light"] .proto-endpoint {background: #F1F5F9 !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #047857 !important}

[data-theme="light"] .tools-label {color: #475569}

[data-theme="light"] .tool-chip {background: #F1F5F9 !important; border-color: rgba(15, 23, 42, 0.10) !important; color: #334155 !important}

[data-theme="light"] .proto-tag:not(.active) {background: #F1F5F9; color: #475569}

[data-theme="light"] .bento-card-title {color: #0F172A}

[data-theme="light"] .bento-card-desc {color: #475569}

[data-theme="light"] .key-feature-item {color: #334155}

[data-theme="light"] .step-number {color: #C21840}

[data-theme="light"] .step-title {color: #0F172A}

[data-theme="light"] .step-desc {color: #475569}

[data-theme="light"] .feature-check-icon {background: rgba(185, 28, 28, 0.12); color: #991B1B}

[data-theme="light"] .billing-card h3 {color: #0F172A}

[data-theme="light"] .billing-card p {color: #475569}

[data-theme="light"] .billing-card .tool-chip {color: #991B1B !important; border-color: rgba(185, 28, 28, 0.3) !important}

[data-theme="light"] .calc-box {background: #F8FAFC; border-color: rgba(15, 23, 42, 0.12)}

[data-theme="light"] .calc-slider-head {color: #0F172A}

[data-theme="light"] .calc-slider-head span:first-child {color: #0F172A}

[data-theme="light"] #calcVolumeLabel {color: #B91C1C !important}

[data-theme="light"] .calc-price-tag {color: #B91C1C}

[data-theme="light"] .calc-price-tag span {color: #475569}

[data-theme="light"] .faq-trigger {color: #0F172A}

[data-theme="light"] .faq-trigger:hover {color: #B91C1C}

[data-theme="light"] .faq-chevron {color: #B91C1C}

[data-theme="light"] .faq-content {color: #475569}