/* ===== Студийная тема Продюсера (единая с приложением) =====
   Цвета заданы тройками RGB (--c-*), их же использует скомпилированный tw.css.
   Смена цветовой темы в настройках меняет только акцент. */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2'); }

:root {
    --c-bg: 14 14 16;          /* #0E0E10 */
    --c-surface: 22 22 24;     /* #161618 */
    --c-surface2: 30 30 33;    /* #1E1E21 */
    --c-line: 42 42 47;        /* #2A2A2F */
    --c-line2: 58 58 64;       /* #3A3A40 */
    --c-text: 237 237 239;     /* #EDEDEF */
    --c-text2: 200 200 206;    /* #C8C8CE */
    --c-muted: 161 161 170;    /* #A1A1AA */
    --c-faint: 113 113 122;    /* #71717A */
    --c-accent: 255 138 61;    /* #FF8A3D */
    --c-accenthi: 255 170 110; /* #FFAA6E */
    --c-onaccent: 26 16 8;     /* #1A1008 */

    /* старые имена переменных — на них завязаны стили и скрипты страницы */
    --bg: rgb(var(--c-bg));
    --surface: rgb(var(--c-surface));
    --surface-2: rgb(var(--c-surface2));
    --border: rgb(var(--c-line));
    --text: rgb(var(--c-text));
    --muted: rgb(var(--c-muted));
    --accent: rgb(var(--c-accent));
    --accent-2: rgb(var(--c-accent));
    --on-accent: rgb(var(--c-onaccent));
    --radius: 12px;
}

html, body { background: var(--bg); color: var(--text); }
body {
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}
h1, h2, h3, .font-display { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.015em; }
.font-mono, code, pre, kbd { font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: 0; }
body::before { display: none !important; }

/* Шапка: плоская, с тонкой линией */
header { background: rgb(var(--c-bg) / .92) !important; border-bottom: 1px solid var(--border) !important; }
header h1 {
    background: none !important; -webkit-text-fill-color: currentColor; color: var(--text) !important;
    font-weight: 700 !important; letter-spacing: -0.02em;
}
header h1::after {
    content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 1px;
    background: var(--accent); vertical-align: middle;
}

/* Панели: без теней и свечения, тонкая рамка */
.rounded-2xl { border-radius: 14px !important; }
.rounded-xl { border-radius: 12px !important; }
.rounded-lg { border-radius: 10px !important; }
.shadow-xl, .shadow-lg, .shadow-2xl, .shadow-md, .shadow-sm { box-shadow: none !important; }
[class*="shadow-indigo"] { --tw-shadow-color: transparent !important; }
main .bg-slate-800.rounded-2xl { background: var(--surface) !important; border-color: var(--border) !important; }

/* Заголовки панелей — «пультовые» метки */
main h2 {
    font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase;
    letter-spacing: .09em !important; color: var(--muted);
}
main h2 svg { width: 16px !important; height: 16px !important; color: var(--accent) !important; }
main h3 { letter-spacing: -0.01em; }
label { letter-spacing: .01em; }

/* Поля ввода: утоплены в фон, фокус — акцентная рамка без свечения */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input:not([type]), textarea, select {
    background-color: var(--bg) !important; border-color: var(--border) !important; color: var(--text);
    border-radius: 10px !important;
}
input:focus, textarea:focus, select:focus {
    outline: none !important; border-color: var(--accent) !important;
    --tw-ring-color: transparent !important; box-shadow: 0 0 0 1px var(--accent) !important;
}
textarea { line-height: 1.55; }
::placeholder { color: rgb(var(--c-faint)) !important; }

/* Кнопки на акценте: тёмный текст — белый на оранжевом плохо читается */
.bg-indigo-600, .bg-indigo-500, .hover\:bg-indigo-500:hover,
[style*="var(--accent)"].text-white, [style*="var(--accent)"] .text-white, #generateBtn {
    color: var(--on-accent) !important;
}
.bg-indigo-600, #generateBtn { background: var(--accent) !important; font-weight: 600; }
.bg-indigo-600:hover, .hover\:bg-indigo-500:hover { filter: brightness(1.08); }
button:active { transform: translateY(0.5px); }
button:disabled { opacity: .45 !important; }

/* Ползунки: тонкая дорожка, квадратная ручка как на пульте */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; height: 22px; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--border); border-radius: 1px; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 3px; margin-top: -6px;
    background: var(--accent); box-shadow: 0 0 0 3px var(--bg) !important; transition: none;
}
input[type=range]::-webkit-slider-thumb:hover { transform: none; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); box-shadow: none; }
input[type=range]::-moz-range-track { height: 2px; background: var(--border); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* Переключатель Простой/Профи и другие сегменты */
#uiSwitch { background: var(--bg) !important; border-color: var(--border) !important; }

/* Модальные окна */
#apiModal, #genreModal, #adminModal, #settingsModal, #authOverlay { background: rgb(var(--c-bg) / .88) !important; }
#apiModal > div, #genreModal > div, #adminModal > div, #settingsModal > div {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
}

/* Тост */
#toast { background: var(--surface-2) !important; border: 1px solid var(--line2, var(--border)) !important;
    color: var(--text) !important; border-radius: 10px !important; font-weight: 500; }

/* Скроллбары */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-line2)); border-radius: 3px; }

/* Выделение текста */
::selection { background: rgb(var(--c-accent) / .3); }

/* Кольцо прогресса генерации */
#progressRing { stroke: var(--accent) !important; }

/* Внутри приложения — без заставки и без тяжёлых эффектов размытия (они тормозят на слабых телефонах) */
.in-app .backdrop-blur-sm, .in-app .backdrop-blur-md, .in-app #apiModal, .in-app #genreModal,
.in-app #adminModal, .in-app #settingsModal, .in-app header {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.in-app header { background: var(--bg) !important; }