/* =====================================================================
   VoiceBox — светлая тема.
   Структура: переменные → база → каркас → сайдбар → шапка → компоненты
   → страницы → плеер → адаптив.
   ===================================================================== */

/* --- Переменные ---------------------------------------------------- */
:root {
    --violet: #7c5cff;
    --violet-dark: #6742f0;
    --violet-soft: #f1ecff;
    --gradient: linear-gradient(135deg, #8b6bff 0%, #6d4aff 100%);

    --text: #16161a;
    --text-soft: #5c5c66;
    --muted: #8e8e99;
    --muted-light: #b4b4bd;

    --bg: #ffffff;
    --bg-soft: #f7f7f9;
    --bg-hover: #f1f1f4;
    --border: #e9e9ee;
    --border-strong: #d9d9e0;

    --green: #12a150;
    --red: #e5484d;
    --amber: #f0a020;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(20, 20, 35, .05);
    --shadow: 0 4px 16px rgba(20, 20, 35, .07);
    --shadow-lg: 0 12px 40px rgba(20, 20, 35, .12);

    --sidebar-w: 236px;
    --topbar-h: 60px;
    --content-max: 1080px;
}

/* --- База ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 30px; line-height: 1.2; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #dcdce3; border-radius: 6px; border: 3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #c6c6d0; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Каркас --------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    padding: 28px 40px 120px;
}

.content-inner { max-width: var(--content-max); margin: 0 auto; }
.content-narrow { max-width: 760px; margin: 0 auto; }

.page-head { margin-bottom: 26px; }
.page-head h1 { margin-bottom: 6px; }
.page-head p { color: var(--muted); margin: 0; }

/* --- Сайдбар -------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 16px 12px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg);
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 7px;
}

.brand-mark {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--gradient);
    display: grid; place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.brand-sub { font-size: 13px; color: var(--muted); font-weight: 500; }

/* Подпись под логотипом; там, где её нет, отступ добирает сам логотип. */
.brand-tagline {
    margin: 0;
    padding: 0 8px 18px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
}

.nav-group { margin-bottom: 4px; }

.nav-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-light);
    text-transform: none;
    padding: 14px 10px 6px;
    letter-spacing: .02em;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-weight: 500;
    transition: background .15s, color .15s;
}

.nav-link:hover { background: var(--bg-hover); color: var(--text); }

.nav-link.is-active {
    background: var(--bg-hover);
    color: var(--text);
    font-weight: 600;
}

.nav-link svg { flex-shrink: 0; opacity: .8; }
.nav-link.is-active svg { opacity: 1; }

.nav-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--violet-soft);
    color: var(--violet-dark);
    letter-spacing: .01em;
}

.sidebar-foot { margin-top: auto; padding-top: 18px; }

.sidebar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 14px 10px 4px;
    font-size: 11px;
    color: var(--muted-light);
}

.sidebar-links a:hover { color: var(--text-soft); }

.sidebar-copy { padding: 6px 10px; font-size: 11px; color: var(--muted-light); }

/* --- Шапка ---------------------------------------------------------- */
.topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 40px;
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    z-index: 30;
}

.topbar-burger {
    display: none;
    margin-right: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    line-height: 0;
}

.balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 20px;
    background: var(--bg-soft);
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    transition: background .15s, box-shadow .15s;
}

a.balance-pill:hover { background: var(--violet-soft); box-shadow: var(--shadow); }

.balance-pill .coin {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--gradient);
    display: grid; place-items: center;
    color: #fff; font-size: 9px; font-weight: 700;
}

.balance-pill.is-low { background: #fff4f4; color: var(--red); }

.avatar-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: grid;
    place-items: center;
}

/* Меню пользователя */
.dropdown { position: relative; }

.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 232px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
}

.dropdown-menu[hidden] { display: none; }

.dropdown-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.dropdown-head strong { display: block; font-size: 14px; }
.dropdown-head span { font-size: 12px; color: var(--muted); }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 13px;
    text-align: left;
}

.dropdown-item:hover { background: var(--bg-hover); color: var(--text); }

/* --- Кнопки --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--bg-soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, box-shadow .15s, opacity .15s;
    white-space: nowrap;
}

.btn:hover { background: var(--bg-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 2px 10px rgba(109, 74, 240, .28);
}
.btn-primary:hover { background: var(--gradient); filter: brightness(1.06); }

.btn-outline { background: #fff; border-color: var(--border-strong); }
.btn-outline:hover { background: var(--bg-soft); }

.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

.btn-danger { background: #fff1f1; color: var(--red); }
.btn-danger:hover { background: #ffe3e3; }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; border-radius: 12px; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 9px; }
.btn-block { width: 100%; }

.btn-gradient-outline {
    background: #fff;
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: var(--violet-dark);
    border-radius: 20px;
}

.btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    color: #fff;
}
.btn-outline.is-loading::after, .btn-ghost.is-loading::after { color: var(--violet); }

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Карточки и поля ------------------------------------------------ */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
}

.card-flat { background: var(--bg-soft); border-color: transparent; }
.card-pad-lg { padding: 24px; }

.field { margin-bottom: 16px; }

.field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
}

.field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

.input, .textarea, .select {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

/*
 * Однострочные поля держим на высоте, а не на вертикальных отступах: иначе
 * в местах, где высоту уменьшают до 36 пикселей, строка перестаёт помещаться
 * и у букв срезаются хвостики.
 */
.input, .select {
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
}

.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .14);
}

.input::placeholder, .textarea::placeholder { color: var(--muted-light); }

.textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e8e99' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    /* Длинная подпись в узком поле обрывается многоточием, а не стрелкой. */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
    width: 38px; height: 22px;
    border-radius: 20px;
    background: var(--border-strong);
    position: relative;
    transition: background .18s;
    flex-shrink: 0;
}

.switch-track::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s;
    box-shadow: var(--shadow-sm);
}

.switch input:checked + .switch-track { background: var(--violet); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }

/* Ползунок */
.range-row { display: flex; align-items: center; gap: 12px; }

.range {
    flex: 1;
    appearance: none;
    height: 4px;
    border-radius: 3px;
    background: var(--border-strong);
}

.range::-webkit-slider-thumb {
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--violet);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--violet);
    cursor: pointer;
}

.range-value {
    min-width: 46px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-soft);
    font-weight: 600;
}

/* --- Чипы и бейджи -------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    transition: background .15s, border-color .15s, color .15s;
}

.chip:hover { background: var(--bg-soft); color: var(--text); }
.chip.is-active { border-color: var(--violet); color: var(--violet-dark); background: var(--violet-soft); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--bg-soft);
    color: var(--text-soft);
}

.badge-success { background: #e9f8ef; color: var(--green); }
.badge-danger  { background: #fdecec; color: var(--red); }
.badge-warning { background: #fdf3e2; color: #a86a05; }
.badge-violet  { background: var(--violet-soft); color: var(--violet-dark); }

.badge-dot::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge-pulse::before { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* --- Аватар голоса -------------------------------------------------- */
/* Вместо букв — размытый цветной шар, свой у каждого голоса. */
.voice-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 0;
}

.voice-avatar.sz-sm { width: 26px; height: 26px; }
.voice-avatar.sz-lg { width: 48px; height: 48px; }

/* Шар: тёмная основа, цветной блик сбоку и мягкая тень снизу. */
.voice-avatar, .voice-play::before {
    background-color: var(--orb-base, #6c6a86);
    background-image:
        radial-gradient(38% 38% at 32% 26%, var(--orb-light, #fff) 0%, transparent 68%),
        radial-gradient(62% 62% at 78% 32%, var(--orb-mid, #8b6bff) 0%, transparent 72%),
        radial-gradient(85% 85% at 48% 108%, var(--orb-deep, #2b2350) 0%, transparent 72%);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, .5),
        inset 0 -6px 12px rgba(16, 12, 36, .45);
}

/* Кнопка прослушивания — светлая плитка, шар внутри с отступом. */
.voice-play::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
}

.accent-0  { --orb-base: #4a3ba0; --orb-light: #d8ccff; --orb-mid: #7c5cff; --orb-deep: #251c58; }
.accent-1  { --orb-base: #b34a73; --orb-light: #ffd3e2; --orb-mid: #ff7aa8; --orb-deep: #4d1730; }
.accent-2  { --orb-base: #2f74b8; --orb-light: #cfeaff; --orb-mid: #58bdf5; --orb-deep: #10314f; }
.accent-3  { --orb-base: #b8802c; --orb-light: #ffe6bd; --orb-mid: #ffb24d; --orb-deep: #4a2e07; }
.accent-4  { --orb-base: #1f8f6b; --orb-light: #c6f6e3; --orb-mid: #45d7a6; --orb-deep: #0a3b2c; }
.accent-5  { --orb-base: #6f3fb5; --orb-light: #e6d2ff; --orb-mid: #b07bff; --orb-deep: #2c1350; }
.accent-6  { --orb-base: #b95436; --orb-light: #ffd8c4; --orb-mid: #ff8f66; --orb-deep: #4b1a0d; }
.accent-7  { --orb-base: #3a4cae; --orb-light: #d2d9ff; --orb-mid: #7b8dff; --orb-deep: #171f56; }
.accent-8  { --orb-base: #8a3f86; --orb-light: #f6d0f2; --orb-mid: #d57ccd; --orb-deep: #3b1439; }
.accent-9  { --orb-base: #2c8a94; --orb-light: #c8f2f6; --orb-mid: #4fd0dc; --orb-deep: #0c3a3f; }
.accent-10 { --orb-base: #7c8a2f; --orb-light: #eef6c2; --orb-mid: #c5d95e; --orb-deep: #313a0c; }
.accent-11 { --orb-base: #56606e; --orb-light: #dde4ee; --orb-mid: #93a2b6; --orb-deep: #1f252d; }

/* --- Уведомления ---------------------------------------------------- */
.toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200;
    max-width: 360px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    animation: toast-in .22s ease;
}

.toast-success { border-left: 3px solid var(--green); }
.toast-error   { border-left: 3px solid var(--red); }
.toast-info    { border-left: 3px solid var(--violet); }

.toast-close { border: none; background: none; color: var(--muted); padding: 0 0 0 6px; line-height: 1; }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    font-size: 13px;
    margin-bottom: 16px;
}

.alert-warning { background: #fdf6e8; color: #8a5a05; }
.alert-danger  { background: #fdeeee; color: #a3272b; }
.alert-info    { background: var(--violet-soft); color: var(--violet-dark); }

/* --- Пустое состояние ----------------------------------------------- */
.empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--muted);
}

.empty-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--bg-soft);
    display: grid; place-items: center;
    margin: 0 auto 14px;
    color: var(--muted-light);
}

.empty h3 { color: var(--text); margin-bottom: 6px; }

/* --- Студия озвучки ------------------------------------------------- */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }

.composer {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.composer:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }

.composer-area {
    width: 100%;
    border: none;
    background: none;
    padding: 18px;
    min-height: 220px;
    resize: vertical;
    line-height: 1.7;
    font-size: 15px;
}

.composer-area:focus { outline: none; }

.composer-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.composer-counter { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.composer-counter.is-over { color: var(--red); font-weight: 600; }

.voice-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 12px 0 5px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: #fff;
    max-width: 260px;
}

.voice-trigger:hover { background: var(--bg-soft); }
.voice-trigger .name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-panel { position: sticky; top: calc(var(--topbar-h) + 20px); }
.settings-panel .card { padding: 16px; }
.settings-panel h3 { font-size: 13px; margin-bottom: 14px; }

.settings-group + .settings-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }

/* Результат озвучки */
.result-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
}

.result-card + .result-card { margin-top: 10px; }
.result-meta { min-width: 0; flex: 1; }
/* Поле, в которое превращается название при переименовании. */
.input-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.result-meta .input-sm { width: min(100%, 320px); }
.result-meta strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-meta span { font-size: 12px; color: var(--muted); }

.play-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--gradient);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(109, 74, 240, .25);
}

.play-btn.is-playing { background: var(--text); box-shadow: none; }
.play-btn.sz-sm { width: 32px; height: 32px; }

/* --- Библиотека голосов --------------------------------------------- */
.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.search-field { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.search-field .input { padding-left: 36px; height: 38px; border-radius: 20px; }
.search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }

.voice-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.voice-tab {
    position: relative;
    padding: 0 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

.voice-tab:hover { color: var(--text); }

.voice-tab.is-active { color: var(--text); font-weight: 600; }

.voice-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--violet);
}

.voice-tabs-count { margin-left: auto; padding-bottom: 12px; font-size: 12.5px; color: var(--muted); }

.voice-search {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.voice-search .search-field { max-width: none; }
.voice-search .btn.is-active { border-color: var(--violet); color: var(--violet-dark); }

.voice-filters { width: 300px; padding: 14px; }
.voice-filters .filter-row + .filter-row { margin-top: 14px; }
.voice-filters .field-label { display: block; margin-bottom: 7px; }

/* Переключатели «пол» и «возраст»: одна дорожка, выбранное — белой таблеткой. */
.seg-row {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-hover);
}

.seg-link {
    flex: 1;
    padding: 6px 4px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.seg-link:hover { color: var(--text-soft); }
.seg-link.is-active { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

.filter-count {
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--violet);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

/* Выбор языка: кнопка с флагом и список со своим поиском. */
.lang-pick .btn { gap: 7px; }
.lang-caret { color: var(--muted); }
.lang-clear { color: var(--muted); }

.lang-menu {
    left: 0;
    right: auto;
    width: 280px;
    padding: 8px;
}

.lang-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    color: var(--muted);
}

.lang-search svg { position: absolute; left: 10px; pointer-events: none; }
.lang-search .input { padding-left: 32px; }
.lang-search .input::-webkit-search-cancel-button { display: none; }

.lang-list { max-height: 320px; overflow-y: auto; }

.lang-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
}

.lang-option:hover { background: var(--bg-hover); }
.lang-option.is-active { background: var(--violet-soft); color: var(--violet-dark); font-weight: 600; }
.lang-option[hidden] { display: none; }

.lang-any { display: inline-flex; color: var(--muted); }
.lang-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.lang-none { margin: 0; padding: 12px 9px; font-size: 12.5px; color: var(--muted); text-align: center; }

.voice-list { display: flex; flex-direction: column; }

.voice-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: var(--radius);
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}

.voice-row:last-child { border-bottom: none; }
.voice-row:hover { background: var(--bg-soft); }

/* Аватар превращается в кнопку воспроизведения при наведении. */
.voice-play {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: var(--bg-soft);
    color: #fff;
    cursor: pointer;
    overflow: hidden;
}

.voice-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s;
}

.voice-play-icon { opacity: 0; background: rgba(15, 12, 32, .42); line-height: 0; }
.voice-row:hover .voice-play-icon,
.voice-play:focus-visible .voice-play-icon { opacity: 1; }
.voice-play.is-loading .voice-play-icon,
.voice-play.is-playing .voice-play-icon { opacity: 1; }
.voice-play.is-loading { pointer-events: none; }
.voice-play.is-loading .voice-play-icon svg { animation: spin .9s linear infinite; }

.voice-play-icon .i-pause { display: none; }
.voice-play.is-playing .voice-play-icon .i-play { display: none; }
.voice-play.is-playing .voice-play-icon .i-pause { display: block; }

.voice-row-main { flex: 1; min-width: 0; }
.voice-row-main strong { display: block; font-size: 14px; margin-bottom: 2px; }
.voice-row-main span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-row-tags { display: flex; gap: 6px; flex: none; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-soft);
    font-size: 11.5px;
    white-space: nowrap;
}

.tag-violet { background: var(--violet-soft); color: var(--violet-dark); }

/* Флаг страны перед названием языка. Картинки квадратные, круг делаем здесь;
   тонкая рамка нужна белым флагам, иначе они сливаются с фоном. */
.flag {
    /* Глобальный сброс делает картинки блочными, а флаг стоит внутри строки. */
    display: inline-block;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(20, 20, 35, .1);
    vertical-align: -2px;
}

/* В строках без flex флаг стоит перед текстом обычной картинкой. */
:not(.tag) > .flag { margin-right: 5px; }

.voice-row-use { flex: none; visibility: hidden; }
.voice-row:hover .voice-row-use,
.voice-row:focus-within .voice-row-use { visibility: visible; }

.fav-btn.is-active svg { fill: currentColor; }

@media (max-width: 720px) {
    .voice-row-tags { display: none; }
    .voice-row-use { visibility: visible; }
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.voice-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.voice-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.voice-card-head { display: flex; align-items: center; gap: 10px; }
/* Аватар на карточке одновременно служит кнопкой прослушивания. */
.voice-card-head .voice-play { width: 36px; height: 36px; border-radius: 50%; }
/* Плитка здесь и так круглая, поэтому шар занимает её целиком. */
.voice-card-head .voice-play::before { inset: 0; }
.voice-card:hover .voice-play-icon { opacity: 1; }
.voice-card-head .info { min-width: 0; flex: 1; }
.voice-card-head strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-card-head span { font-size: 12px; color: var(--muted); }

.voice-card-desc {
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}

.voice-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }

.fav-btn {
    border: none;
    background: none;
    color: var(--muted-light);
    padding: 4px;
    line-height: 0;
    border-radius: 6px;
}
.fav-btn:hover { color: var(--muted); background: var(--bg-hover); }
.fav-btn.is-active { color: #f0518a; }

/* Закладка «в коллекцию» — не сердечко, поэтому и цвет свой, фирменный. */
.fav-btn.is-mark.is-active { color: var(--violet); }

/* --- Сравнение с зарубежными сервисами ------------------------------ */
.compare {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.compare-row {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.5;
    border-top: 1px solid var(--border);
}

.compare-row:first-child { border-top: 0; }
.compare-row:nth-child(even) { background: var(--bg-soft); }

.compare-head {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: #fff !important;
}

.compare-head span:last-child { color: var(--violet-dark); font-weight: 600; }
.compare-key { font-weight: 600; color: var(--text); }
.compare-them { color: var(--muted); }
.compare-us { color: var(--text); }

.compare-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(124, 92, 255, .07), transparent 65%);
}

.compare-cta div { flex: 1; }
.compare-cta strong { display: block; font-size: 16px; }
.compare-cta p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-soft); }

/* --- Вопросы и ответы ------------------------------------------------ */
.faq { border-top: 1px solid var(--border); }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 2px;
    font-size: 14.5px;
    font-weight: 550;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--violet-dark); }

/* Плюс, который на раскрытой карточке становится минусом. */
.faq-sign {
    position: relative;
    flex: none;
    width: 13px;
    height: 13px;
    margin-left: auto;
    color: var(--muted);
}

.faq-sign::before,
.faq-sign::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    height: 1.5px;
    background: currentColor;
    transition: transform .2s;
}

.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0); }

.faq-item p {
    margin: 0;
    padding: 0 40px 18px 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-soft);
}

@media (max-width: 760px) {
    .compare-row { grid-template-columns: 1fr; gap: 4px; }
    .compare-head { display: none; }
    .compare-them::before { content: 'У них: '; color: var(--muted-light); }
    .compare-us::before { content: 'У нас: '; color: var(--violet); }
    .compare-cta { flex-direction: column; align-items: stretch; }
}

/* --- Гость на странице генерации ------------------------------------ */
.guest-modal .modal { max-width: 460px; }
.guest-modal-body { padding: 18px; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.guest-modal-body p { margin: 0; }

.guest-modal-bonus {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px !important;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    font-size: 13px;
}

.guest-modal-bonus svg { flex: none; margin-top: 2px; color: var(--violet); }

/* --- Выбор голоса (модальное окно) ---------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 18, 28, .35);
    backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-backdrop[hidden] { display: none; }

.modal {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 620px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-head h3 { flex: 1; }
.modal-body { overflow-y: auto; padding: 12px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

.voice-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid transparent;
    width: 100%;
    background: none;
    text-align: left;
}

.voice-option:hover { background: var(--bg-soft); }
.voice-option.is-selected { border-color: var(--violet); background: var(--violet-soft); }
.voice-option .info { min-width: 0; flex: 1; }
.voice-option strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-option span { font-size: 11.5px; color: var(--muted); }

/* --- Загрузка файлов ------------------------------------------------ */
.dropzone {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 40px 20px;
    text-align: center;
    background: #fff;
    transition: border-color .15s, background .15s;
    cursor: pointer;
}

.dropzone:hover, .dropzone.is-over { border-color: var(--violet); background: var(--violet-soft); }

.dropzone-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--violet-soft);
    color: var(--violet-dark);
    display: grid; place-items: center;
    margin: 0 auto 12px;
}

.dropzone p { margin: 0 0 4px; font-weight: 500; }
.dropzone small { color: var(--muted); }

.file-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    font-size: 13px;
}

.file-pill .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* --- Таблицы -------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* --- Главная -------------------------------------------------------- */

/*
 * Витрина: светлая плашка с шестью слайдами. Каждый слайд приносит свой
 * акцентный цвет (--accent), им красятся эквалайзер, вторая строка
 * заголовка, кнопка и полоска прогресса. Перелистывание держится на
 * CSS-анимации полоски: она же ставится на паузу при наведении, а её
 * окончание — сигнал JS показать следующий слайд.
 */
.stage {
    --accent: var(--violet-dark);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 22px 30px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* Тонкая вертикальная линовка, чтобы плашка не выглядела пустым листом. */
.stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(20, 20, 35, .028) 0 1px, transparent 1px 32px);
}

/* Мягкое пятно акцента в углу — единственная заливка цветом. */
.stage-glow {
    position: absolute;
    top: -180px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .12;
    filter: blur(80px);
    transition: background .5s;
}

.stage-top,
.stage-body,
.stage-tabs { position: relative; }

.stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.stage-live { display: inline-flex; align-items: center; gap: 8px; }

.stage-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    transition: background .5s;
    animation: stage-pulse 2.6s ease-out infinite;
}

@keyframes stage-pulse {
    0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
    70%, 100% { box-shadow: 0 0 0 8px transparent; }
}

.stage-count b { color: var(--text); font-variant-numeric: tabular-nums; }

.stage-body { display: flex; align-items: center; gap: 30px; }

/* Слайды лежат в одной ячейке сетки: высота плашки не скачет. */
.stage-slides { display: grid; flex: 1; min-width: 0; }

.stage-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.stage-slide.is-active { opacity: 1; visibility: visible; }

.stage-slide.is-active > * { animation: stage-in .5s cubic-bezier(.2, .7, .3, 1) backwards; }
.stage-slide.is-active > :nth-child(2) { animation-delay: .05s; }
.stage-slide.is-active > :nth-child(3) { animation-delay: .1s; }
.stage-slide.is-active > :nth-child(4) { animation-delay: .15s; }

@keyframes stage-in { from { opacity: 0; transform: translateY(12px); } }

.stage-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color .5s;
}

.stage-kicker::before { content: ''; width: 20px; height: 1px; background: currentColor; }

.stage-title {
    margin: 13px 0 10px;
    font-size: 34px;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -.025em;
}

.stage-title span { display: block; color: var(--accent); transition: color .5s; }

.stage-text {
    max-width: 520px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-soft);
}

.stage-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .5s, transform .15s, box-shadow .15s;
}

.stage-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.stage-cta svg { transition: transform .15s; }
.stage-cta:hover svg { transform: translateX(3px); }

/* Эквалайзер — единственная картинка на плашке, и та нарисована полосками. */
.stage-eq { display: flex; align-items: flex-end; gap: 6px; height: 132px; flex: none; }

.stage-eq i {
    width: 6px;
    height: 24%;
    border-radius: 3px;
    background: var(--accent);
    opacity: var(--fade, 1);
    transition: background .5s;
    animation: stage-wave var(--beat, 1.3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes stage-wave { 0%, 100% { height: 14%; } 50% { height: 100%; } }

.stage-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.stage-tab {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .2s;
}

.stage-tab:hover { color: var(--text-soft); }
.stage-tab.is-active { color: var(--text); }

.stage-track {
    height: 2px;
    border-radius: 2px;
    background: var(--border-strong);
    overflow: hidden;
}

.stage-track i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.stage-tab.is-active .stage-track i { animation: stage-fill 7s linear forwards; }

@keyframes stage-fill { to { transform: scaleX(1); } }

/* Пока читают слайд, перелистывание ждёт: пауза анимации = пауза таймера. */
.stage:hover .stage-tab.is-active .stage-track i,
.stage:focus-within .stage-tab.is-active .stage-track i { animation-play-state: paused; }

@media (max-width: 1100px) {
    .stage-title { font-size: 28px; }
    .stage-eq { height: 108px; }
}

/* Колонки перестают помещаться рядом — эквалайзер уходит первым. */
@media (max-width: 900px) {
    .stage-eq { display: none; }
}

@media (max-width: 640px) {
    .stage { padding: 16px; }
    .stage-title { font-size: 22px; }
    .stage-text { font-size: 13px; }
    .stage-tabs { gap: 7px; margin-top: 18px; }
    /* Подписи не влезают — от переключателя остаются полоски. */
    .stage-tab { font-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stage-eq i { animation: none; height: 55%; }
    .stage-slide.is-active > * { animation: none; }
    .stage-live::before { animation: none; }
    .stage-tab.is-active .stage-track i { animation: none; transform: scaleX(1); }
}

.tab-switch {
    display: inline-flex;
    gap: 6px;
    padding: 0;
    margin-bottom: 18px;
}

.tab-switch .tab {
    height: 34px;
    padding: 0 16px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--muted);
}

.tab-switch .tab.is-active { border-color: var(--text); color: var(--text); }

/* Шесть плиток: на широком экране ложатся в два ряда по три. */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.feature-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
}

.feature-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.feature-icon {
    width: 36px; height: 36px;
    border-radius: 11px;
    background: var(--violet-soft);
    color: var(--violet-dark);
    display: grid; place-items: center;
    margin-bottom: 12px;
}

.feature-card h3 { font-size: 15px; margin-bottom: 5px; }
.feature-card p { font-size: 13px; color: var(--muted); margin: 0; }

/*
 * Полка каталога: обложки в один ряд, над каждой — номер и хронометраж,
 * разделённые пунктиром, как в списке треков на конверте пластинки.
 */
.shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 18px 14px;
}

.shelf-item { min-width: 0; }

.shelf-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--muted-light);
    font-variant-numeric: tabular-nums;
}

.shelf-rule { flex: 1; border-top: 1px dotted var(--border-strong); }

/* Обложка та же, что в каталоге, но крупная и во всю ширину ячейки. */
.track-cover.shelf-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s;
}

.shelf-item:hover .shelf-cover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Пока трек не играет, кнопка не перекрывает обложку. */
.shelf-cover .track-cover-icon { background: rgba(17, 17, 21, 0); opacity: 0; transition: opacity .15s, background .15s; }
.shelf-cover:hover .track-cover-icon,
.shelf-cover.is-playing .track-cover-icon { opacity: 1; }

.shelf-cat {
    display: block;
    margin: 10px 0 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shelf-cat:hover { color: var(--violet-dark); }

.shelf-title {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Играющий трек подсвечивается и в подписи, не только на обложке. */
.shelf-cover.is-playing ~ .shelf-title { color: var(--violet-dark); }

.shelf-note { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }

.banner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }

.banner {
    border-radius: var(--radius-lg);
    padding: 22px;
    color: #fff;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--gradient);
}

.banner.alt { background: linear-gradient(135deg, #4a3aff 0%, #9d4aff 100%); }
.banner h3 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.banner p { color: rgba(255, 255, 255, .82); font-size: 13px; margin: 0; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 32px 0 14px;
}

.section-head h2 { font-size: 18px; }
.section-head a { font-size: 13px; color: var(--muted); }
.section-head a:hover { color: var(--violet-dark); }

/* --- Страницы входа ------------------------------------------------- */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: var(--bg-soft);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 30px 28px;
}

.auth-card .brand { justify-content: center; padding: 0 0 18px; }
.auth-card h1 { font-size: 21px; text-align: center; margin-bottom: 4px; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.auth-foot { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }
.auth-foot a { color: var(--violet-dark); font-weight: 600; }

/* --- Плеер ---------------------------------------------------------- */
.player {
    position: fixed;
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    height: 68px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 28px;
    z-index: 40;
}

.player[hidden] { display: none; }
.player-info { min-width: 0; width: 210px; }
.player-info strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-info span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-progress { flex: 1; display: flex; align-items: center; gap: 10px; }
.player-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; }

.player-bar {
    flex: 1;
    height: 4px;
    border-radius: 3px;
    background: var(--border-strong);
    position: relative;
    cursor: pointer;
}

.player-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 3px;
    background: var(--gradient);
    width: 0;
}

/* --- Пагинация ------------------------------------------------------ */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

.pagination a, .pagination span {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    color: var(--text-soft);
}

.pagination a:hover { background: var(--bg-soft); color: var(--text); }
.pagination .is-current { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }

/* --- Служебные страницы --------------------------------------------- */
.state-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 40px 20px;
}

.state-page .code { font-size: 64px; font-weight: 700; letter-spacing: -.03em; color: var(--violet); }
.state-page p { color: var(--muted); max-width: 420px; margin: 8px auto 20px; }

/* --- Прочее --------------------------------------------------------- */
.stack-sm > * + * { margin-top: 8px; }
.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 24px; }

.row { display: flex; gap: 12px; align-items: center; }
.row-wrap { flex-wrap: wrap; }
.row-tight { gap: 6px; }
.row-between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.divider { height: 1px; background: var(--border); margin: 20px 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.stat {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}

.stat .value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.stat .label { font-size: 12px; color: var(--muted); }

.transcript {
    white-space: pre-wrap;
    line-height: 1.75;
    font-size: 14px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 16px;
    max-height: 420px;
    overflow-y: auto;
}

/* --- Адаптив -------------------------------------------------------- */
@media (max-width: 1100px) {
    .studio { grid-template-columns: minmax(0, 1fr); }
    .settings-panel { position: static; }
    .banner-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 90;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: none; }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(18, 18, 28, .3);
        z-index: 80;
    }
    .sidebar-overlay[hidden] { display: none; }

    .topbar-burger { display: inline-flex; }
    .topbar { padding: 0 18px; }
    .content { padding: 20px 18px 120px; }
    .player { left: 0; padding: 0 16px; }
    .player-info { width: 130px; }
    h1 { font-size: 24px; }
    .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .voice-grid { grid-template-columns: 1fr; }
    .player-time { display: none; }
}

/* --- Служебная панель ------------------------------------------------ */

.is-green { color: var(--green); }
.is-red   { color: var(--red); }

.admin-sidebar .brand { padding-bottom: 20px; }
.admin-sidebar .brand-sub { color: var(--muted); }
.admin-topbar-title { font-weight: 600; margin-right: auto; }
.sidebar-user { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-user-name { font-weight: 600; font-size: 13px; }

.admin-money {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.admin-money-card { padding: 16px 18px; }

.admin-money-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.admin-period { font-weight: 600; font-size: 15px; }

.admin-money-rows { display: flex; flex-direction: column; gap: 8px; }

.admin-money-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--muted);
}

.admin-money-row b { color: var(--text); font-size: 14px; }

.admin-money-row.is-total {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 2px;
}

.admin-money-row.is-total b { font-size: 16px; }

.admin-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.admin-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
}

.admin-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
}

.admin-chart-bar {
    width: 100%;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #8b7cf6, #6366f1);
    min-height: 4px;
}

.admin-chart-label { font-size: 10px; color: var(--muted); }

.admin-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}

.admin-filters .field { margin: 0; }
.admin-filters .field-label { font-size: 12px; }
.admin-filters .input,
.admin-filters .select { height: 36px; }

.admin-filters-actions { display: flex; gap: 8px; }

.table-compact th,
.table-compact td { padding: 8px 10px; font-size: 13px; }

@media (max-width: 1100px) {
    .admin-money { grid-template-columns: 1fr; }
    .admin-split { grid-template-columns: 1fr; }
}

.play-btn.is-empty {
    background: var(--bg-hover);
    color: var(--muted);
    box-shadow: none;
}

/* Плеер перекрывает нижние строки таблиц, поэтому оставляем запас снизу. */
.is-admin .content { padding-bottom: 120px; }

/* Правка баланса: компактная сетка, чтобы форма не растягивала таблицу. */
.balance-form {
    display: grid;
    grid-template-columns: 116px 96px;
    gap: 6px;
    min-width: 230px;
}

.balance-form .balance-form-reason,
.balance-form button { grid-column: 1 / -1; }
.balance-form .select.input-sm { padding-right: 24px; }

/* --- Загрузка и запись голоса ---------------------------------------- */

.import-voice-title { margin: 0 0 12px; font-size: 15px; }

.import-voice {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 16px;
}

.import-voice .dropzone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-soft);
}

.import-voice-or {
    align-self: center;
    position: relative;
    color: var(--muted);
    font-size: 13px;
    padding: 0 6px;
}

/* Вертикальная черта между «загрузить» и «записать». */
.import-voice-or::before,
.import-voice-or::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    height: 46px;
    background: var(--border);
}
.import-voice-or::before { bottom: calc(100% + 8px); }
.import-voice-or::after  { top: calc(100% + 8px); }

.record-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 34px 20px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.record-box.is-recording { border-color: var(--violet); }
.record-box p { margin: 0 0 4px; font-weight: 500; }
.record-box small { color: var(--muted); }

.record-mic {
    width: 46px; height: 46px;
    margin: 0 auto 12px;
    border: none;
    border-radius: 50%;
    background: var(--violet-soft);
    color: var(--violet-dark);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.record-box:hover .record-mic { background: var(--violet); color: #fff; }

.record-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 28px; height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.record-close:hover { background: var(--bg-hover); color: var(--text); }

.record-time {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.record-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 34px;
    margin: 16px 0 18px;
}

.record-wave span {
    width: 3px;
    height: 20px;
    border-radius: 2px;
    background: var(--violet);
    opacity: .5;
    transform: scaleY(.12);
    transition: transform .08s linear;
}

.record-stop {
    width: 44px; height: 44px;
    margin: 0 auto;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.record-stop span {
    width: 16px; height: 16px;
    border-radius: 4px;
    background: var(--red);
    display: block;
}
.record-stop:hover { border-color: var(--red); }

.record-device { margin-top: 14px; }
.record-device .select { width: 100%; max-width: 240px; }

.record-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

@media (max-width: 720px) {
    .import-voice { grid-template-columns: 1fr; }
    .import-voice-or::before,
    .import-voice-or::after { display: none; }
}

/* Правка карточек голосов в служебной панели */
.voice-editor { margin-top: 12px; padding: 14px 16px; }

.voice-editor-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voice-editor-meta { flex: 1; min-width: 0; }
.voice-editor-meta code { color: var(--muted); }

.voice-editor-body {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 130px 130px 150px minmax(200px, 2fr);
    gap: 12px;
    margin-top: 12px;
}

.voice-editor-body .field { margin: 0; }
.voice-editor-body .field-label { font-size: 12px; }
.voice-editor-body .input,
.voice-editor-body .select { height: 36px; }
.voice-editor-desc .textarea { min-height: 36px; resize: vertical; }

.voice-editor-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

[hidden] { display: none !important; }

.save-state { font-size: 13px; color: var(--muted); min-height: 18px; }
.save-state.is-done { color: var(--green); }
.save-state.is-error { color: var(--red); }

@media (max-width: 900px) {
    .voice-editor-body { grid-template-columns: 1fr; }
}

/* Справочник языков */
.page-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.language-add {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 150px 210px minmax(220px, 1.4fr) auto;
    gap: 12px;
    align-items: end;
}

.language-add .field { margin: 0; }
.language-add .field-label { font-size: 12px; }
.language-add .input,
.language-add .select { height: 36px; }

.language-editor { margin-top: 12px; padding: 14px 16px; }

.language-editor-body {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 150px 210px minmax(220px, 1.4fr);
    gap: 12px;
}

.language-editor-body .field { margin: 0; }
.language-editor-body .field-label { font-size: 12px; }
.language-editor-body .input,
.language-editor-body .select { height: 36px; }

.language-editor-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.language-editor-foot .save-state { margin-left: auto; }

@media (max-width: 900px) {
    .language-add,
    .language-editor-body { grid-template-columns: 1fr; }
    .page-head-row { flex-direction: column; }
}

/* Голоса сервиса в служебной панели */
.admin-voice { margin-bottom: 0; }

.admin-voice-publish {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}


/* Окно выбора голоса: вкладки, поиск, прослушивание на кружке */
.voice-picker-top {
    padding: 12px 18px 0;
    display: grid;
    gap: 12px;
}

.voice-picker-top .voice-tabs { margin: 0; gap: 18px; }
.voice-picker-top .voice-tab { font-size: 13px; padding-bottom: 10px; background: none; border: 0; cursor: pointer; }
.voice-picker-top .tab-count { margin-left: 5px; font-size: 11.5px; color: var(--muted); }

.voice-option .info {
    min-width: 0;
    flex: 1;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.voice-option .voice-play {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

/* Кружок и так круглый, поэтому шар занимает его целиком. */
.voice-option .voice-play::before { inset: 0; }
.voice-option:hover .voice-play-icon { opacity: 1; }
.voice-option .fav-btn { flex: none; }

/* Панель настроек: заголовок со сбросом */
.settings-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.settings-head h3 { margin: 0; }

.btn-reset {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}

.btn-reset:hover { color: var(--violet); }
.btn-reset svg { flex: none; }

/* Выбранный голос как карточка */
.voice-picker-card { display: block; }

.voice-chosen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
}

.voice-chosen:hover { border-color: var(--border-strong); }

.voice-chosen-main {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.voice-chosen-text { min-width: 0; display: block; }

.voice-chosen-text strong {
    display: block;
    font-size: 13.5px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-chosen-actions { display: flex; align-items: center; gap: 2px; flex: none; }

/* Переключатель длинного текста с подсказкой */
.long-switch { gap: 8px; }

.tip { position: relative; display: inline-flex; color: var(--muted); line-height: 0; }
.tip:hover { color: var(--violet); }

.tip-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: 280px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    z-index: 30;
}

.tip:hover .tip-bubble,
.tip:focus-within .tip-bubble { opacity: 1; visibility: visible; }

/* Меню, раскрывающееся вверх (под полем ввода места нет) */
.dropdown-up .dropdown-menu,
.dropdown-menu.dropdown-up {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
}

/* Звуковые вставки */
.tag-menu { min-width: 250px; padding: 8px; }
.tag-menu-hint { margin: 2px 4px 8px; font-size: 11.5px; color: var(--muted); }
.tag-menu-list { max-height: 260px; overflow-y: auto; }
.tag-menu .dropdown-item { justify-content: space-between; }
.tag-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Расход кредитов */
.cost-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    font-size: 12.5px;
    color: var(--muted);
    cursor: pointer;
}

.cost-toggle:hover { background: var(--bg-soft); color: var(--text); }
.cost-toggle[aria-expanded="true"] { border-color: var(--violet); color: var(--violet); }
.cost-toggle svg { flex: none; }

.cost-menu { min-width: 262px; padding: 12px 14px; }
.cost-menu-head { display: block; font-size: 12.5px; color: var(--violet); margin-bottom: 10px; }

.cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 12.5px;
}

.cost-row span:first-child { color: var(--muted); }
.cost-row span:last-child { font-variant-numeric: tabular-nums; }

.cost-row-total {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.cost-row-total span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

/* Меню паузы */
.pause-menu { min-width: 250px; padding: 10px; }
.pause-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pause-presets .chip { height: 30px; }
.pause-custom { gap: 6px; }
.pause-custom .input { width: 108px; }

/* Текст озвучки внутри строки трека */
.result-card { flex-wrap: wrap; }

.job-text {
    flex-basis: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.text-block + .text-block { margin-top: 12px; }
.text-block .row { margin-bottom: 6px; }

.job-text-body {
    margin: 0 0 10px;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}

.btn-ghost.is-active { color: var(--violet); background: var(--violet-soft); }

/* --- Покупка кредитов ------------------------------------------------ */
.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

/* Пакет — это переключатель: сам радиоввод скрыт, рамку красит :has(). */
.package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.package:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.package input { position: absolute; opacity: 0; pointer-events: none; }
.package:has(input:checked) { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.package.is-preferred { border-color: var(--violet); }

.package-badge {
    position: absolute;
    top: -10px; left: 18px;
    height: 20px;
    padding: 0 9px;
    display: inline-flex; align-items: center;
    border-radius: 10px;
    background: var(--violet);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}


.package-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.package-price strong { font-size: 26px; letter-spacing: -.02em; }
.package-credits { font-size: 14px; font-weight: 600; }

.package-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.package-meta span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.package-meta svg { flex: none; }

.package-note {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}

.row-wrap { flex-wrap: wrap; }

/* --- Вход через сторонние сервисы ----------------------------------- */
.oauth-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.btn-oauth:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-oauth svg { flex: none; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 12.5px;
}

.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* --- Код подтверждения ---------------------------------------------- */
.code-input { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }

.code-cell {
    width: 56px; height: 64px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}

.code-cell:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-soft);
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--violet);
    font: inherit;
    cursor: pointer;
}

.link-button:disabled { color: var(--muted); cursor: default; }

/* --- Создание музыки -------------------------------------------------- */
.music-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.music-form .tab-switch { margin-bottom: 16px; }
.music-works { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }

/* Переключатель «с вокалом / инструментал» */
.segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-soft);
}

.seg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.seg.is-active { background: #fff; color: var(--text); box-shadow: var(--shadow); }

/* Карточка трека: обложка слева, название и действия справа */
.track-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}

.track-card.is-waiting { border-style: dashed; }
/* Стиль трека всегда в одну строку: при нехватке места обрезаем.
   Строки с собственным классом (название, значки) правило не трогает. */
.track-card .result-meta > span:not([class]) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-slots > * + * { margin-top: 8px; }
.track-slots + .track-slots { margin-top: 8px; }

.track-cover {
    position: relative;
    flex: none;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-hover);
    color: #fff;
    cursor: pointer;
}

.track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.track-cover-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 21, .42);
    transition: background .15s;
}

.track-cover:hover .track-cover-icon { background: rgba(17, 17, 21, .6); }
.track-cover.is-playing .track-cover-icon { background: rgba(17, 17, 21, .3); }

/* На паузе показываем треугольник, во время игры — две полоски.
   Обложка при этом остаётся на месте, только слегка размывается. */
.track-cover-icon .i-pause { display: none; }
.track-cover.is-playing .track-cover-icon .i-play { display: none; }
.track-cover.is-playing .track-cover-icon .i-pause { display: block; }
.track-cover.is-playing img { filter: blur(3px) saturate(1.1); transform: scale(1.06); }
.track-cover img { transition: filter .2s, transform .2s; }

.track-cover.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: default;
}

/* Пока трек считается, место под него мягко переливается. */
.track-card.is-waiting .track-cover.is-empty {
    background: linear-gradient(100deg, var(--bg-hover) 30%, var(--bg-soft) 50%, var(--bg-hover) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

.track-time {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(17, 17, 21, .68);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

@media (max-width: 1100px) {
    .music-layout { grid-template-columns: minmax(0, 1fr); }
    .music-works { position: static; max-height: none; }
}

/* Подсказки стилей: одна строка с прокруткой и стрелками по краям */
.chips-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.chips-row {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.chips-row::-webkit-scrollbar { display: none; }
.chips-row .chip { flex: none; }

.chips-nav {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-soft);
    cursor: pointer;
    transition: color .15s, border-color .15s, opacity .15s;
}

.chips-nav:hover { color: var(--text); border-color: var(--violet); }
.chips-nav:disabled { opacity: .35; cursor: default; }
.chips-nav.is-prev svg { transform: rotate(90deg); }
.chips-nav.is-next svg { transform: rotate(-90deg); }

/* Поле текста при инструментале: остаётся на месте, но не принимает ввод */
.field.is-off .textarea { background: var(--bg-soft); color: var(--muted); }
.field.is-off .field-label { color: var(--muted); }

/* Лента треков в служебной панели */
.admin-track { padding: 12px; gap: 14px; }
.admin-track .track-cover { width: 62px; height: 62px; }

.track-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.admin-track-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    max-width: 220px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-track-user:hover { border-color: var(--violet); color: var(--violet-dark); }

@media (max-width: 760px) {
    .admin-track { flex-wrap: wrap; }
    .admin-track-user { order: 5; }
}

/* --- Каталог музыки ---------------------------------------------------- */

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.catalog-card:hover {
    border-color: var(--violet);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.catalog-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, .04));
    color: var(--violet);
}

.catalog-cover img { width: 100%; height: 100%; object-fit: cover; }

.catalog-body { display: flex; flex-direction: column; gap: 3px; }

.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-bar .field { margin: 0; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}

.back-link:hover { color: var(--violet); }
.back-link svg { transform: rotate(90deg); }

/* Заготовка каталога: карточка трека и строка публикации под ней. */
.draft-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.draft-card .track-card { border: 0; border-radius: 0; }

.draft-publish {
    /* Подписи вроде «Поднимающий настроение» длинные, поэтому полям даём
       ширину и переносим их на вторую строку вместо того, чтобы сжимать. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px dashed var(--border);
    background: var(--surface-soft, rgba(124, 92, 255, .04));
}

.draft-publish .select { height: 36px; }

.draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
}

/* Место под треки, которые ещё едут с сервера: форма карточки та же,
   поэтому при подстановке настоящих список не дёргается. */
.skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(100deg, var(--bg-hover) 30%, var(--bg-soft) 50%, var(--bg-hover) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.6s linear infinite;
}

.is-skeleton { pointer-events: none; }
.is-skeleton .result-meta { display: grid; gap: 7px; }

.skeleton-cover { width: 54px; height: 54px; border-radius: 10px; flex: none; }
.skeleton-line { height: 11px; }
.skeleton-field { height: 36px; border-radius: 9px; }

/* Не дозвонились до сервера: заглушки замирают и ждут клика. */
#music-more.is-failed { cursor: pointer; }
#music-more.is-failed .skeleton { animation: none; opacity: .5; }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}