/* ============================================
   DioLabs — Основные стили
   ============================================ */

/* === Шрифт Inter (локально, без обращений к Google Fonts) === */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-ext-ec84a376.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-4ee8fc98.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-39529051.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-56724408.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-ext-ec84a376.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-4ee8fc98.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-39529051.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-56724408.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-ext-ec84a376.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-4ee8fc98.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-39529051.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-56724408.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-ext-ec84a376.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-4ee8fc98.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-39529051.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-56724408.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === CSS Variables === */
:root {
    --color-bg: #FFFFFF;
    --color-text: #1A1A1A;
    --color-text-secondary: #666666;
    --color-text-muted: #9CA3AF;
    --color-sidebar-bg: #FAFAFA;
    --color-border: #E5E5E5;
    --color-accent: #000000;
    --color-accent-hover: #333333;
    --color-selected: #E8F4FD;
    --color-generated: #4CAF50;
    --color-not-generated: #D0D0D0;
    --color-pause: #FFF3E0;
    --color-error: #EF4444;
    --color-success: #22C55E;
    --color-link: #2563EB;

    --radius-card: 8px;
    --radius-btn: 6px;
    --radius-input: 4px;

    --sidebar-width: 260px;
    --topbar-height: 64px;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === Reset === */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

/* === Typography === */
h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 20px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1;
}

.btn-primary {
    background: var(--color-accent);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
}

.btn-primary:disabled {
    background: #999;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: #F5F5F5;
    text-decoration: none;
}

.btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}

.btn-full {
    width: 100%;
}

/* === Form === */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    outline: none;
    transition: border-color 0.15s ease;
}

.form-input:focus {
    border-color: var(--color-accent);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: #FEF2F2;
    color: var(--color-error);
    border-radius: var(--radius-input);
    font-size: 14px;
}

.form-note {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.input-with-icon {
    position: relative;
}

.input-with-icon .form-input {
    padding-right: 44px;
}

.input-icon-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
}

.input-icon-btn:hover {
    color: var(--color-text);
}

/* ============================================
   LANDING PAGE
   ============================================ */

.landing-body {
    background: var(--color-bg);
}

/* Landing Header */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}

.landing-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.landing-header .landing-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.landing-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.landing-logo:hover {
    text-decoration: none;
}

/* Hero */
.hero {
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-content {
    max-width: 520px;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

.hero-decoration {
    position: relative;
    width: 340px;
    height: 340px;
    flex-shrink: 0;
}

.hero-circle {
    position: absolute;
    border-radius: 50%;
}

.hero-circle-1 {
    width: 280px;
    height: 280px;
    top: 30px;
    left: 30px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.08), transparent 70%);
    animation: pulse-slow 6s ease-in-out infinite;
}

.hero-circle-2 {
    width: 200px;
    height: 200px;
    top: 80px;
    left: 80px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12), rgba(236, 72, 153, 0.06), transparent 70%);
    animation: pulse-slow 6s ease-in-out infinite 3s;
}

.hero-wave {
    position: absolute;
    bottom: 80px;
    left: 20px;
    width: 300px;
    opacity: 0.7;
}

@keyframes pulse-slow {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.7;
    }
}

/* Features */
.features {
    padding: 80px 0;
    border-top: 1px solid var(--color-border);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.feature-card {
    text-align: center;
    padding: 32px 24px;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-sidebar-bg);
    border-radius: 12px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.feature-title {
    margin-bottom: 10px;
}

.feature-text {
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

/* How it works */
.how-it-works {
    padding: 80px 0;
    border-top: 1px solid var(--color-border);
}

.section-title {
    text-align: center;
    margin-bottom: 48px;
}

.steps-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.step-card {
    text-align: center;
    padding: 24px;
    max-width: 260px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.step-title {
    margin-bottom: 8px;
}

.step-text {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.step-connector {
    display: flex;
    align-items: center;
    padding-top: 44px;
}

/* Footer */
.landing-footer {
    padding: 32px 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-body {
    background: var(--color-sidebar-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 40px 32px;
}

.login-logo {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 8px;
}

.login-title {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 28px;
}

.login-form .btn-full {
    margin-top: 8px;
}

.btn-loader {
    animation: spin 1s linear infinite;
}

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

/* ============================================
   APP LAYOUT (Sidebar + Main)
   ============================================ */

.app-body {
    overflow: hidden;
}

.app-layout {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-top {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    display: block;
}

.sidebar-logo:hover {
    text-decoration: none;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 400;
    transition: all 0.12s ease;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-family);
    width: 100%;
    text-align: left;
}

.sidebar-link:hover {
    background: var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.sidebar-link.active {
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sidebar-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-link.active svg,
.sidebar-link:hover svg {
    opacity: 1;
}

.sidebar-badge {
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.sidebar-bottom {
    padding: 16px 8px 32px 8px;
    border-top: 1px solid var(--color-border);
}

.sidebar-logout {
    color: var(--color-text-muted);
}

.sidebar-logout:hover {
    color: var(--color-error);
}

/* Main Area */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top Bar */
.top-bar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-bar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
}

.top-bar-title svg {
    opacity: 0.5;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.12s ease;
}

.top-bar-btn:hover {
    background: var(--color-sidebar-bg);
    text-decoration: none;
}

.top-bar-btn svg {
    opacity: 0.6;
}

.top-bar-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.12s ease;
}

.top-bar-icon:hover {
    background: var(--color-sidebar-bg);
    color: var(--color-text);
}

/* ============================================
   КОНТЕКСТНОЕ МЕНЮ РЕДАКТОРА СТУДИИ (правая кнопка)
   ============================================ */

.ctx-menu {
    position: fixed;
    display: none;
    min-width: 232px;
    padding: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    /* Выше редактора и панелей, но ниже тостов (9000) и модальных окон (10000) */
    z-index: 8000;
}

.ctx-menu.is-open {
    display: block;
}

.ctx-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text);
    cursor: pointer;
    /* Текст пунктов не выделяется: иначе клик по меню съедал бы
       выделение, ради которого меню и открыли */
    user-select: none;
    transition: background 0.1s ease;
}

.ctx-menu-item:hover {
    background: #EFEDFD;
}

.ctx-menu-item.is-disabled {
    color: var(--color-text-muted);
    cursor: default;
}

.ctx-menu-item.is-disabled:hover {
    background: none;
}

.ctx-menu-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Пункты правки буквы: справа показываем, ЧТО получится */
.ctx-menu-accent .ctx-menu-hint {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.ctx-menu-item.is-disabled .ctx-menu-hint {
    color: var(--color-text-muted);
}

.ctx-menu-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-border);
}

/* Варианты числа словами: фраза длинная, меню под них расширяется */
.ctx-menu-wide {
    min-width: 300px;
    max-width: 380px;
}

.ctx-menu-num {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
}

.ctx-menu-num-text {
    /* Длинное числительное переносится, а не обрезается: человек выбирает
       именно по тексту, и не увидеть его целиком нельзя */
    white-space: normal;
    line-height: 1.35;
}

.ctx-menu-num-form {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ============================================
   КАРТОЧКА ПРОФИЛЯ (иконка в правом верхнем углу)
   ============================================ */

/* Обёртка нужна, чтобы карточка позиционировалась от иконки */
.profile-wrap {
    position: relative;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    /* Поверх содержимого страницы, но ниже модальных окон */
    z-index: 900;
    overflow: hidden;

    /* Закрытое состояние: не просто display:none — так карточка появляется
       плавно и не «прыгает» */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.profile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Верхний блок: имя, роль, баланс, дата, пополнение --- */
.profile-menu-head {
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--color-border);
}

.profile-menu-name {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    /* Длинное имя или почта не должны разрывать карточку */
    overflow-wrap: anywhere;
}

.profile-menu-role {
    margin-top: 2px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.profile-menu-balance-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.profile-menu-balance {
    font-size: 16px;
    font-weight: 600;
}

.profile-menu-balance-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Полоска баланса */
.profile-bar {
    margin-top: 10px;
    height: 6px;
    border-radius: 3px;
    background: #ECECEC;
    overflow: hidden;
}

.profile-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}

/* Цвет — ступенями по остатку (пороги владельца, см. balanceBarState) */
.profile-bar-red { background: #DC2626; }
.profile-bar-yellow { background: #F59E0B; }
.profile-bar-green { background: #22C55E; }
.profile-bar-black { background: var(--color-text); }

.profile-menu-date {
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-text);
}

.profile-menu-topup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 16px;
    background: var(--color-sidebar-bg);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.12s ease;
}

.profile-menu-topup:hover {
    background: var(--color-border);
    text-decoration: none;
}

/* --- Список пунктов --- */
.profile-menu-list {
    padding: 8px;
}

.profile-menu-foot {
    padding: 8px;
    border-top: 1px solid var(--color-border);
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

.profile-menu-item svg {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.profile-menu-item:hover:not(:disabled) {
    background: #EFEDFD;
    text-decoration: none;
}

/* Тикеты и помощь пока не работают: видны, но не нажимаются */
.profile-menu-item:disabled {
    cursor: default;
    color: var(--color-text-muted);
}

.profile-menu-item:disabled svg {
    color: var(--color-text-muted);
}

.profile-menu-danger,
.profile-menu-danger svg {
    color: #DC2626;
}

.profile-menu-danger:hover {
    background: #FEF2F2;
}

/* На узком экране карточка не должна вылезать за край окна */
@media (max-width: 420px) {
    .profile-menu {
        width: calc(100vw - 32px);
        right: -8px;
    }
}

/* Page Content */
.page-content {
    flex: 1;
    overflow-y: auto;
    padding: 75px;
}

/* ============================================
   DASHBOARD — «Текст в Речь»
   ============================================ */

.dashboard-layout {
    display: flex;
    gap: 0;
    height: 100%;
}

.dashboard-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
}

.dashboard-right {
    width: 500px;
    min-width: 500px;
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Textarea */
.tts-textarea-wrap {
    flex: 1;
    padding: 80px 32px;
    display: flex;
    justify-content: center;
}

.tts-textarea {
    width: 798px;
    height: 100%;
    min-height: 200px;
    border: none;
    outline: none;
    resize: none;
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    background: transparent;
}

.tts-textarea::placeholder {
    color: var(--color-text-muted);
}

/* Bottom bar */
.tts-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px 30px 32px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}

.tts-bottom-left {
    display: flex;
    align-items: center;
}

.credits-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.tts-bottom-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.char-counter {
    font-size: 13px;
    color: var(--color-text-muted);
}

.tts-download-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.12s ease;
}

.tts-download-btn:hover:not(:disabled) {
    background: var(--color-sidebar-bg);
    color: var(--color-text);
}

.tts-download-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Quick Player */
.quick-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 32px;
    border-top: 1px solid var(--color-border);
    background: var(--color-sidebar-bg);
}

.player-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease;
}

.player-btn:hover {
    background: var(--color-accent-hover);
}

.player-progress-wrap {
    flex: 1;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.player-progress-bar {
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.player-time {
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Right panel */
.right-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 20px;
    flex-shrink: 0;
}

.right-tab {
    padding: 14px 16px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}

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

.right-tab.active {
    color: var(--color-text);
    font-weight: 500;
    border-bottom-color: var(--color-accent);
}

.right-tab-content {
    display: none;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.right-tab-content.active {
    display: block;
}

.right-section {
    margin-bottom: 20px;
}

.right-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 8px;
}

.form-select {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-select:focus {
    border-color: var(--color-accent);
}

.right-add-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.right-add-link:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* History items */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    padding: 40px 0;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius-btn);
    transition: background 0.1s ease;
}

.history-item:hover {
    background: var(--color-sidebar-bg);
}

.history-item-info {
    flex: 1;
    min-width: 0;
}

.history-item-text {
    display: block;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-meta {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.history-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

.history-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.12s ease;
}

.history-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card {
    background: var(--color-bg);
    border-radius: var(--radius-card);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}

.modal-header h3 {
    font-size: 16px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.modal-close:hover {
    color: var(--color-text);
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px 20px;
}

/* Page content override for dashboard */
.page-content:has(.dashboard-layout) {
    padding: 0;
    overflow: hidden;
}

/* Stub */
.stub-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.stub-inner {
    text-align: center;
}

.stub-title {
    margin-top: 16px;
    color: var(--color-text-muted);
}

.stub-text {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ============================================
   SETTINGS PAGE
   ============================================ */

/* Ширина и центровка — как у остальных разделов кабинета
   (промпты, студия, загрузки): один макет на весь личный кабинет.
   Формы внутри остаются узкими: поле пароля во всю ширину неудобно. */
.settings-page {
    max-width: 1200px;
    margin: 0 auto;
}

.settings-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
}

.settings-section:last-of-type {
    border-bottom: none;
}

.settings-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.settings-hint {
    color: var(--color-text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.settings-actions {
    padding-top: 8px;
}

/* Выбор провайдера TTS (Google / OpenRouter) */
.provider-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.provider-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.provider-option:hover {
    background: var(--color-sidebar-bg);
}

.provider-option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-sidebar-bg);
}

.provider-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.provider-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.provider-option-text strong {
    font-size: 14px;
    font-weight: 500;
}

.provider-option-text small {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Service Account Status */
.sa-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FEF2F2;
    border-radius: var(--radius-card);
    margin-bottom: 16px;
}

.sa-status.sa-status-ok {
    background: #F0FDF4;
}

.sa-status-icon {
    flex-shrink: 0;
    display: flex;
}

.sa-status-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-status-label {
    font-size: 14px;
    font-weight: 500;
}

.sa-status-email {
    font-size: 12px;
    color: var(--color-text-muted);
    word-break: break-all;
}

.sa-upload-btn {
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 8px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    min-width: 260px;
    max-width: 400px;
    transform: translateX(120%);
    transition: transform 0.3s ease;
}

.toast.toast-show {
    transform: translateX(0);
}

.toast-success {
    border-left: 3px solid var(--color-success);
}

.toast-error {
    border-left: 3px solid var(--color-error);
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-decoration {
        width: 200px;
        height: 200px;
    }

    .hero-circle-1 {
        width: 160px;
        height: 160px;
        top: 20px;
        left: 20px;
    }

    .hero-circle-2 {
        width: 120px;
        height: 120px;
        top: 40px;
        left: 40px;
    }

    .hero-wave {
        width: 160px;
        bottom: 40px;
        left: 10px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .steps-grid {
        flex-direction: column;
        align-items: center;
    }

    .step-connector {
        transform: rotate(90deg);
        padding-top: 0;
    }

    .sidebar {
        display: none;
    }

    .top-bar-btn span:not(.top-bar-icon) {
        display: none;
    }
}

/* ============================================
   PROMPTS PAGE
   ============================================ */

.prompts-page {
    max-width: 1200px;
    margin: 0 auto;
}

.prompts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.prompts-title {
    font-size: 24px;
    font-weight: 700;
}

.prompts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.prompts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-text-muted);
    text-align: center;
}

/* Prompt Card */
.prompt-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.prompt-card:hover {
    border-color: #CCC;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.prompt-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.prompt-card-name {
    font-size: 15px;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #F0FDF4;
    color: #16A34A;
    border-radius: 10px;
    white-space: nowrap;
    font-weight: 500;
}

.prompt-card-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 40px;
}

.prompt-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* Icon Buttons */
.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background: #F5F5F5;
    color: var(--color-text);
    border-color: #CCC;
}

.btn-icon-danger:hover {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}

/* Danger Button */
.btn-danger {
    background: #DC2626;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-danger:hover {
    background: #B91C1C;
}

/* Prompt textarea in modal */
.prompt-textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

/* ============================================
   MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 20px;
}

.modal-card {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-card-sm {
    max-width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 0;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
}

.modal-close:hover {
    color: var(--color-text);
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px 20px;
}

/* ============================================
   STUDIO PAGE
   ============================================ */

.studio-page {
    max-width: 1200px;
    margin: 0 auto;
}

.studio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.studio-title {
    font-size: 24px;
    font-weight: 700;
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.projects-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--color-text-muted);
    text-align: center;
}

.projects-empty-hint {
    font-size: 13px;
    max-width: 380px;
    line-height: 1.5;
}

/* Project Row */
.project-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-card);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
}

.project-row:hover {
    background: #F5F5F5;
    text-decoration: none;
}

.project-row-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F0F0;
    border-radius: 8px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.project-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.project-row-name {
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-row-meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

.project-row-edit,
.project-row-delete {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.project-row:hover .project-row-edit,
.project-row:hover .project-row-delete {
    opacity: 1;
}

/* ============================================
   EDITOR PAGE — /studio/{project_id}
   ============================================ */

/* Full-page layout for editor */
.editor-body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-bg);
}

.editor-layout {
    display: grid;
    grid-template-columns: 60px auto 1fr;
    grid-template-rows: 48px 1fr 56px 70px;
    grid-template-areas:
        "topbar topbar topbar"
        "leftnav sidepanel content"
        "player player player"
        "editorfooter editorfooter editorfooter";
    height: 100vh;
    overflow: hidden;
}

.editor-layout.no-panel {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
        "topbar topbar"
        "leftnav content"
        "player player"
        "editorfooter editorfooter";
}

/* === Top Bar === */
.editor-top-bar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    z-index: 10;
}

.editor-top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.editor-project-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    cursor: default;
}

.editor-project-name-input {
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-family);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: 2px 8px;
    outline: none;
    width: 300px;
}

.editor-project-name-input:focus {
    border-color: var(--color-accent);
}

.editor-top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.editor-credits {
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.editor-export-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family);
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background 0.12s ease;
}

.editor-export-btn:hover {
    background: var(--color-accent-hover);
}

/* === Left Nav (icons) === */
.editor-left-nav {
    grid-area: leftnav;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 4px;
    border-right: 1px solid var(--color-border);
    background: var(--color-sidebar-bg);
    z-index: 5;
}

.editor-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 6px;
    width: 52px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.12s ease;
    border: none;
    background: none;
}

.editor-nav-item:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.editor-nav-item.active {
    background: var(--color-selected);
    color: var(--color-text);
}

.editor-nav-spacer {
    flex: 1;
}

/* === Side Panels Container === */
.editor-side-panels {
    grid-area: sidepanel;
    overflow: hidden;
}

.editor-layout.no-panel .editor-side-panels {
    display: none;
}

.editor-side-panel {
    width: 370px;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.editor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    flex-shrink: 0;
}

.editor-panel-title {
    font-size: 14px;
    font-weight: 600;
}

.editor-panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.editor-panel-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.12s ease;
}

.editor-panel-btn:hover {
    background: #F5F5F5;
    color: var(--color-text);
    border-color: #CCC;
}

.editor-panel-body {
    /* Единственная прокручиваемая область панели: занимает всю оставшуюся
       высоту и скроллится сама (min-height: 0 — иначе flex-элемент не сжимается
       и содержимое выдавливает соседей). Полоса прокрутки скрыта: длинный
       список просто уходит вниз, листается колесом мыши. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* старый Edge */
}

.editor-panel-body::-webkit-scrollbar {
    display: none;              /* Chrome, Safari */
}

/* Panel: Settings */
.editor-setting-group {
    margin-bottom: 16px;
}

.editor-setting-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.editor-setting-select {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.editor-setting-select:focus {
    border-color: var(--color-accent);
}

/* Panel: Chapters */
.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chapter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 14px;
    color: var(--color-text);
}

.chapter-item:hover {
    background: #F5F5F5;
}

.chapter-item.active {
    background: var(--color-selected);
    font-weight: 500;
}

.chapter-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chapter-item-count {
    font-size: 11px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.chapter-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.chapter-item:hover .chapter-item-actions {
    opacity: 1;
}

.chapter-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.1s ease;
}

.chapter-action-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.chapter-action-btn.danger:hover {
    background: #FEF2F2;
    color: #DC2626;
}

/* === Content Area === */
.editor-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    min-height: 57px;
    flex-shrink: 0;
}

.toolbar-spacer {
    flex: 1;
}

.editor-generate-btn {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family);
    background: transparent;
    color: var(--color-text);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-generate-btn:hover {
    background: #F0F0F0;
}

.editor-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}

/* Вертикальный разделитель между кнопками тулбара */
.toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Block Editor */
.editor-blocks-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 24px 24px 80px;
}

.editor-blocks {
    max-width: 780px;
    margin: 0 auto;
    min-height: 200px;
}

.paragraph-block {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    position: relative;
}

.paragraph-indicator {
    width: 3px;
    flex-shrink: 0;
    border-radius: 2px;
    margin-right: 12px;
    background: var(--color-not-generated);
    transition: background 0.2s ease;
}

.paragraph-indicator.generated {
    background: var(--color-generated);
}

.paragraph-indicator.generating {
    animation: indicator-pulse 1.8s ease-in-out infinite;
}

@keyframes indicator-pulse {

    0%,
    100% {
        background: var(--color-not-generated);
    }

    50% {
        background: #F9A825;
    }
}

.paragraph-text {
    flex: 1;
    min-height: 24px;
    padding: 6px 8px;
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    outline: none;
    border: none;
    border-radius: var(--radius-input);
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: background 0.12s ease;
}

.paragraph-text:focus {
    background: #FAFAFA;
}

.paragraph-block.selected .paragraph-text {
    background: var(--color-selected);
}

.paragraph-text:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Delete button on paragraph (shows on hover) */
.paragraph-delete-btn {
    position: absolute;
    right: -8px;
    top: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.12s ease, border-color 0.12s ease;
    z-index: 2;
}

.paragraph-block:hover .paragraph-delete-btn {
    opacity: 1;
}

.paragraph-delete-btn:hover {
    color: #E53935;
    border-color: #E53935;
}

/* Clear all button in toolbar */
.editor-clear-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    background: none;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.12s ease;
}

.editor-clear-btn:hover {
    color: #E53935;
    border-color: #E53935;
}

.editor-copy-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.12s ease;
}

.editor-copy-btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Empty state for editor */
.editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--color-text-muted);
    text-align: center;
    gap: 12px;
}

.editor-empty-text {
    font-size: 14px;
}

/* === Player Bar === */
.editor-player {
    grid-area: player;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    gap: 16px;
    z-index: 10;
}

/* Подвал редактора: таймлайн (шкала + волна + playhead) */
.editor-footer {
    grid-area: editorfooter;
    position: relative;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}

.timeline-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    touch-action: none; /* Перетаскивание playhead без прокрутки страницы */
}

.timeline-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--color-text-muted);
    pointer-events: none;
    background: var(--color-bg);
}

.editor-player-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-player-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-player-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-nav-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.12s ease;
}

.player-nav-btn:hover {
    background: #F0F0F0;
    color: var(--color-text);
}

.player-main-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s ease;
}

.player-main-btn:hover {
    background: var(--color-accent-hover);
}

.player-duration {
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.player-download-link {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-family);
    transition: color 0.12s ease;
}

.player-download-link:hover {
    color: var(--color-text);
}

/* Generating indicator */
.paragraph-generating {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Chapter rename input */
.chapter-rename-input {
    width: 100%;
    padding: 4px 8px;
    font-family: var(--font-family);
    font-size: 14px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-input);
    outline: none;
}

/* ====== Stage 7: Pause blocks ====== */
.pause-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 4px 0 14px 0;
    background: rgba(255, 193, 7, 0.08);
    border: 1px dashed rgba(255, 193, 7, 0.35);
    border-radius: 6px;
    color: #bbb;
    font-size: 13px;
    user-select: none;
}

.pause-block svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.pause-block-text {
    flex: 1;
}

.pause-block-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
}

.pause-block:hover .pause-block-delete {
    opacity: 1;
}

.pause-block-delete:hover {
    color: var(--color-error);
}

/* Pause popup */
.pause-popup {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    z-index: 100;
}

.pause-popup input {
    width: 70px;
    padding: 5px 8px;
    font-size: 13px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    text-align: center;
}

.pause-popup-label {
    font-size: 13px;
    color: #aaa;
    white-space: nowrap;
}

.pause-popup-insert {
    padding: 5px 12px;
    font-size: 13px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.pause-popup-insert:hover {
    opacity: .85;
}

/* Pause toolbar button (иконка вставки паузы) */
.editor-pause-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}

.editor-pause-btn:hover {
    background: #F0F0F0;
}

/* ====== Stage 7: Automation toggle ====== */
.automation-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #888;
    font-size: 12px;
    user-select: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color .15s;
}

.automation-toggle:hover {
    color: #bbb;
}

.automation-toggle.active {
    color: #16A34A;
}

.automation-toggle .toggle-track {
    width: 32px;
    height: 16px;
    background: #444;
    border-radius: 8px;
    position: relative;
    transition: background .2s;
}

.automation-toggle.active .toggle-track {
    background: #22C55E;
}

.automation-toggle .toggle-thumb {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left .2s, background .2s;
}

.automation-toggle.active .toggle-thumb {
    left: 18px;
    background: #fff;
}

/* Stop automation button */
.editor-stop-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 13px;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    animation: pulse-stop 1.5s infinite;
}

.editor-stop-btn:hover {
    background: rgba(255, 107, 107, 0.2);
}

@keyframes pulse-stop {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Pipeline generating indicator on paragraph */
.paragraph-pipeline-pending {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 11px;
    color: #888;
}

/* ============================================
   DOWNLOADS & HISTORY PAGES
   ============================================ */

.downloads-page {
    max-width: 1200px;
    margin: 0 auto;
}

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

.downloads-title {
    font-size: 24px;
    font-weight: 700;
}

/* Filter buttons */
.downloads-filters {
    display: flex;
    gap: 4px;
    background: var(--color-sidebar-bg);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--color-border);
}

.filter-btn {
    padding: 7px 16px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-btn:hover {
    color: var(--color-text);
}

.filter-btn.active {
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Downloads list */
.downloads-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Downloads row */
.downloads-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-card);
    transition: background 0.12s ease;
}

.downloads-row:hover {
    background: var(--color-sidebar-bg);
}

.downloads-row-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sidebar-bg);
    border-radius: 8px;
    color: var(--color-text-muted);
}

.downloads-row:hover .downloads-row-icon {
    background: var(--color-border);
}

.downloads-row-main {
    flex: 1;
    min-width: 0;
}

.downloads-row-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.downloads-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.downloads-meta-sep {
    color: var(--color-border);
}

.downloads-meta-source {
    color: var(--color-text-secondary);
}

/* Action buttons */
.downloads-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.downloads-action-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
    text-decoration: none;
}

.downloads-action-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: #CCC;
    text-decoration: none;
}

.downloads-action-btn.playing {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.downloads-action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Empty state */
.downloads-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 80px 20px;
    color: var(--color-text-muted);
    text-align: center;
}

.downloads-empty p {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 6px;
}

.downloads-empty-hint {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Load more */
.downloads-load-more {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

/* Header right side (filters + clear all) */
.downloads-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Danger outline button (Очистить всё) */
.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: #DC2626;
    background: transparent;
    border: 1px solid #FECACA;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-danger-outline:hover {
    background: #FEF2F2;
    border-color: #DC2626;
}

/* Delete action button (trash icon on rows) */
.downloads-action-delete:hover {
    color: #DC2626;
    border-color: #FECACA;
    background: #FEF2F2;
}

/* Small modal card */
.modal-card-sm {
    max-width: 400px;
}

/* === Export Files Panel === */
.export-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.export-item:last-child {
    border-bottom: none;
}

.export-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4CAF50;
}

.export-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.export-duration {
    font-size: 14px;
    font-weight: 600;
    color: #3a3a3a;
    line-height: 1.2;
}

.export-meta {
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}

.export-download {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.export-download:hover {
    color: #1A1A1A;
    background: #F0F0F0;
}

/* === Variations Panel === */
.editor-panel-divider {
    height: 1px;
}

/* Заголовок «Вариации» внутри прокручиваемой области (не фиксированная шапка).
   Отрицательные поля гасят padding .editor-panel-body, чтобы строки вариаций
   шли во всю ширину панели, как раньше. */
.editor-panel-subheader {
    margin: 8px -16px 4px;
    padding: 10px 15px 0;
}

#variations-list {
    margin: 0 -16px;
}

.variations-empty {
    color: #999;
    font-size: 12px;
    padding: 8px 15px;
    margin: 0;
}

.variation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 15px;
    border-radius: 0px;
    transition: background 0.12s ease;
}

.variation-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.variation-active {
    background: rgba(74, 144, 226, 0.08);
}

.variation-active:hover {
    background: rgba(74, 144, 226, 0.12);
}

.variation-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.variation-name {
    font-size: 12px;
    font-weight: 500;
    color: #3a3a3a;
    line-height: 1.3;
}

.variation-active .variation-name {
    color: var(--color-accent);
}

.variation-meta {
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}

.variation-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 2px solid #999999;
    border-radius: 50px;
    color: #676262;
    cursor: pointer;
    transition: all 0.12s ease;
}

.variation-btn:hover {
    color: #333;
    border-color: #aaa;
    background: #f5f5f5;
}

.variation-btn-play:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.variation-btn-apply:hover {
    color: #4CAF50;
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.06);
}
/* ============================================
   Настройки голоса — ползунки (шаг 3.8)
   Показываются только для моделей с поддержкой voice_settings
   ============================================ */

.voice-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.voice-settings-head .right-label,
.voice-settings-head .editor-setting-label {
    margin-bottom: 0;
}

.voice-settings-reset {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: color 0.12s ease;
}

.voice-settings-reset:hover {
    color: var(--color-accent);
}

.voice-settings-hint {
    margin: 0 0 16px;
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}

.voice-slider-group {
    margin-bottom: 16px;
}

.voice-slider-group:last-child {
    margin-bottom: 0;
}

.voice-slider-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.voice-slider-name {
    font-size: 13px;
    color: #1A1A1A;
}

.voice-slider-value {
    font-size: 12px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.voice-slider-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    color: #B0B0B0;
}

/* Сам ползунок: тонкая дорожка + чёрная ручка (стиль приложения) */
.voice-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #E5E5E5;
    outline: none;
    cursor: pointer;
}

.voice-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1A1A1A;
    cursor: pointer;
    transition: transform 0.12s ease;
}

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

.voice-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: #1A1A1A;
    cursor: pointer;
}

.voice-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #E5E5E5;
}

/* ============================================
   Оценка стоимости генерации «спишется ~X тк» (шаг 4.2)
   ============================================ */

.cost-estimate {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Страницы регистрации и восстановления пароля (шаг 4.3)
   Используют базовые стили .login-* — здесь только добавленные элементы
   ============================================ */

.auth-hint {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: -8px 0 20px;
}

.auth-links {
    margin: 20px 0 0;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.auth-links a {
    color: #1A1A1A;
    text-decoration: none;
    border-bottom: 1px solid #DDD;
}

.auth-links a:hover {
    border-bottom-color: #1A1A1A;
}

.auth-links-sep {
    margin: 0 8px;
    color: #CCC;
}

.form-success {
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #F0F9F1;
    border: 1px solid #CDE9D0;
    color: #2E6B33;
    font-size: 14px;
    line-height: 1.5;
}

/* Виджет капчи растягиваем по ширине карточки */
.smart-captcha {
    width: 100%;
    min-height: 100px;
}

/* ============================================
   Пробный доступ: остаток символов и заблокированные модели (шаг 4.4)
   ============================================ */

.trial-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    font-size: 13px;
    color: #8A7A2E;
    white-space: nowrap;
}

.trial-indicator svg {
    flex-shrink: 0;
    color: #C9A227;
}

/* Недоступные модели остаются в списке как витрина: видно, что откроется после пополнения */
.form-select option:disabled,
.editor-setting-select option:disabled {
    color: #AAA;
}

/* ============================================
   PUBLIC PAGES: /pricing и юридические страницы (шаг 4.5)
   ============================================ */

/* Навигация в шапке публичных страниц */
.landing-nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
    margin-right: 24px;
}

.landing-nav-link {
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 500;
}

.landing-nav-link:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* Контент публичной страницы — отступ под фиксированную шапку */
.public-main {
    padding-top: 64px;
    min-height: calc(100vh - 220px);
}

/* Подвал: юридические ссылки + реквизиты */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--color-text-secondary);
    font-size: 14px;
}

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

.footer-requisites {
    margin-bottom: 4px;
}

/* --- Тарифы --- */
.pricing-hero {
    padding: 72px 0 16px;
    text-align: center;
}

.pricing-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.pricing-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.pricing-packages {
    padding: 40px 0 24px;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.package-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.package-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
}

.package-tokens {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.package-bonus {
    font-size: 14px;
    color: var(--color-success);
    font-weight: 500;
    margin: 8px 0 14px;
    min-height: 20px;
}

.package-price {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.package-card .btn {
    margin-top: auto;
}

/* Карточка «Своя сумма» */
.custom-amount-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.custom-amount-input {
    width: 130px;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 10px;
}

.custom-amount-currency {
    font-size: 1.3rem;
    font-weight: 600;
}

.custom-amount-limits {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 18px;
}

.pricing-stub-note {
    border: 1px solid #F0E1A8;
    background: #FFFBEB;
    color: #8A7A2E;
    border-radius: var(--radius-card);
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.pricing-note {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

/* Цены моделей */
.pricing-models {
    padding: 48px 0 72px;
}

.pricing-models-intro {
    max-width: 720px;
    margin: -24px auto 28px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.price-table-wrap {
    max-width: 720px;
    margin: 0 auto;
    overflow-x: auto;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.price-table th,
.price-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 12px 16px;
    text-align: left;
}

.price-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pricing-example,
.pricing-links {
    max-width: 720px;
    margin: 20px auto 0;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* --- Юридические страницы --- */
.legal-page {
    padding: 56px 0 72px;
}

.legal-container {
    max-width: 800px;
}

.legal-page h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.legal-updated {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 28px;
}

.legal-page h2 {
    font-size: 1.25rem;
    margin: 32px 0 12px;
}

.legal-page h3 {
    font-size: 1.05rem;
    margin: 20px 0 8px;
}

.legal-page p {
    margin-bottom: 12px;
    line-height: 1.7;
    color: var(--color-text);
}

.legal-page ul,
.legal-page ol {
    margin: 0 0 16px 24px;
    line-height: 1.7;
}

.legal-page li {
    margin-bottom: 8px;
}

.legal-requisites {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Контакты */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 24px 0 8px;
}

.contact-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 22px;
}

.contact-card h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--color-text-secondary);
}

.contact-card p {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 500;
}

.contact-note {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--color-text-muted) !important;
    line-height: 1.5;
}

/* Адаптивность публичных страниц */
@media (max-width: 900px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contacts-grid {
        grid-template-columns: 1fr;
    }

    .landing-nav {
        gap: 16px;
        margin-right: 12px;
    }
}

@media (max-width: 560px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }

    .pricing-title {
        font-size: 2rem;
    }

    .landing-nav-link {
        font-size: 14px;
    }
}

/* Согласия на форме регистрации (юр. доработка шага 4.5) */
.consent-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Контакты в подвале (требование Robokassa: связь видна на сайте) */
.footer-contacts {
    margin-bottom: 4px;
}

.footer-contacts a {
    color: var(--color-text-secondary);
}

.footer-contacts a:hover {
    color: var(--color-text);
}

/* Главная: кнопки в hero и блок стоимости услуг (требование модерации — цены на виду) */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.hero-note {
    font-size: 14px;
    color: var(--color-text-muted);
}

.landing-pricing {
    padding: 80px 0;
    border-top: 1px solid var(--color-border);
}

.landing-pricing-lead {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 640px;
    margin: -32px auto 40px;
}

.landing-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.landing-price-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px 24px;
    text-align: center;
}

.landing-price-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.landing-price-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.landing-pricing-links {
    margin-top: 32px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

@media (max-width: 900px) {
    .landing-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   АДМИНКА (шаг 5.1) — тёмное меню, отдельный layout
   ============================================ */
.admin-body {
    background: #F4F5F7;
}

.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #1E2330;
    color: #C7CCD6;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
}

.admin-brand {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding: 8px 24px 24px;
}

.admin-brand span {
    color: #7C86FF;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 24px;
    color: #C7CCD6;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.admin-nav-link:hover {
    background: #2A3040;
    color: #fff;
    text-decoration: none;
}

.admin-nav-link.active {
    background: #2A3040;
    color: #fff;
    box-shadow: inset 3px 0 0 #7C86FF;
}

.admin-nav-soon {
    color: #6B7280;
    cursor: default;
}

.admin-nav-soon:hover {
    background: none;
    color: #6B7280;
}

.admin-soon-badge {
    font-size: 11px;
    font-weight: 500;
    background: #2A3040;
    color: #8B93A7;
    padding: 2px 8px;
    border-radius: 10px;
}

.admin-sidebar-bottom {
    border-top: 1px solid #2A3040;
    padding-top: 12px;
    margin-top: 12px;
}

.admin-logout {
    color: #E6867C;
}

.admin-logout:hover {
    color: #FF9A8E;
}

.admin-main {
    flex: 1;
    margin-left: 240px;
    min-width: 0;
}

.admin-topbar {
    height: 64px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
}

.admin-page-title {
    font-size: 20px;
    font-weight: 600;
}

.admin-user {
    font-size: 14px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-role {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #EEF0FE;
    color: #5B63D3;
    padding: 3px 9px;
    border-radius: 10px;
}

.admin-content {
    padding: 32px;
}

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.admin-tile {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 22px;
}

.admin-tile-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-tile-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 6px;
}

.admin-tile-sub {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.admin-note {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 18px 22px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .admin-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .admin-sidebar {
        width: 200px;
    }
    .admin-main {
        margin-left: 200px;
    }
}

/* ============================================
   АДМИНКА: пользователи (шаг 5.2)
   ============================================ */
.admin-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-search-input {
    flex: 1;
    min-width: 220px;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: 14px;
    font-family: inherit;
}

.admin-search-select {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}

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

.admin-table-wrap {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.admin-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: #FAFBFC;
}

.admin-user-name {
    font-weight: 500;
}

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

.admin-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 32px !important;
}

.admin-link {
    color: var(--color-link);
    font-weight: 500;
}

.badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.badge-green { background: #E6F6EC; color: #1E8E4E; }
.badge-red   { background: #FDEAEA; color: #C0392B; }
.badge-gray  { background: #EEF0F2; color: #6B7280; }

/* Пагинация */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.admin-page-btn {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    color: var(--color-text);
    background: #fff;
    font-size: 14px;
}

.admin-page-btn:hover { background: #F4F5F7; text-decoration: none; }

.admin-page-info {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Карточка пользователя */
.admin-back { margin-bottom: 16px; }

.admin-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.admin-card-title { font-size: 1.4rem; font-weight: 700; }

.admin-card-sub {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.admin-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.admin-block {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px;
    margin-bottom: 20px;
}

.admin-block-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 12px;
}

.admin-balance { font-size: 1.6rem; font-weight: 700; }

.admin-block-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 8px;
    line-height: 1.5;
}

.admin-flags {
    list-style: none;
    font-size: 14px;
    line-height: 1.9;
}

.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Сообщения о результате действий в админке.
 *
 * Всплывают в правом нижнем углу, как тосты студии. Раньше это были обычные
 * блоки в потоке страницы, и под длинной таблицей (пользователи, ошибки,
 * платежи) сообщение оказывалось за пределами экрана — чтобы его увидеть,
 * приходилось прокручивать страницу вниз.
 *
 * Разметку вьюх это не меняет: элемент остаётся тем же, просто отображается
 * поверх страницы. Показ и автоскрытие — в layout'е админки, одним местом
 * для всех разделов, включая будущие.
 */
.admin-action-msg {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    margin: 0 !important;
    padding: 14px 18px;
    border-radius: var(--radius-card);
    font-size: 14px;
    min-width: 260px;
    max-width: 400px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--color-border);
    /* Появление — тем же движением, что у тостов студии */
    animation: adminMsgIn 0.25s ease;
}

@keyframes adminMsgIn {
    from { transform: translateX(20%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

/* Плавное исчезновение: класс вешает layout перед скрытием */
.admin-action-msg.fading {
    opacity: 0;
    transform: translateX(20%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.admin-action-msg.ok  { background: #E6F6EC; color: #1E8E4E; border-color: #BFE6CD; }
.admin-action-msg.err { background: #FDEAEA; color: #C0392B; border-color: #F0C3BE; }

/* На узком экране — во всю ширину снизу, иначе сообщение налезает на таблицу */
@media (max-width: 700px) {
    .admin-action-msg {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        min-width: 0;
    }
}

.admin-mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.admin-mini-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--color-border);
}

.admin-mini-table tr:last-child td { border-bottom: none; }

.amt-pos { color: #1E8E4E; font-weight: 600; text-align: right; }
.amt-neg { color: #C0392B; font-weight: 600; text-align: right; }

.admin-test-tag {
    font-size: 11px;
    background: #FFF3E0;
    color: #B26A00;
    padding: 1px 6px;
    border-radius: 8px;
}

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

/* Админка: форма начисления/списания токенов (шаг 5.3) */
.admin-balance-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.admin-adjust-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.admin-adjust-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.admin-adjust-label {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.admin-adjust-label .form-input {
    display: block;
    width: 100%;
    margin-top: 5px;
}

.admin-adjust-buttons {
    display: flex;
    gap: 10px;
}

.admin-tx-reason {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* Админка: кнопка возврата в таблице платежей (шаг 5.4) */
.admin-refund-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-error);
    font-weight: 500;
    cursor: pointer;
}

.admin-refund-btn:hover {
    text-decoration: underline;
}

.admin-refund-btn:disabled {
    color: var(--color-text-muted);
    cursor: default;
    text-decoration: none;
}

/* Админка: каталог моделей и голосов (шаг 5.5) */
.admin-cell-input {
    width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: 14px;
    font-family: inherit;
}

.admin-cell-narrow { width: 60px; }

.admin-catalog-table td { vertical-align: middle; }

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.admin-catalog-table .m-active,
.admin-table .v-active {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Широкое поле для названия модели (шаг 5.5, редактирование имени) */
.admin-cell-wide { width: 220px; margin-bottom: 4px; }

/* Админка: форма добавления голоса (Fish Audio и др.) */
.admin-add-voice {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Админка: карточки голосов с аватаром/семплом (Часть А) */
.voice-cards {
    display: grid;
    /* Адаптивно: чем шире экран, тем больше плиток. min(400px,100%) не даёт
       плитке вылезти за экран на узких устройствах. */
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}

.voice-edit-card {
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    position: relative;
}

.voice-edit-card.dragging { opacity: 0.45; }

.voice-drag-handle {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-text-muted);
    cursor: grab;
    padding: 2px;
    line-height: 0;
}

.voice-drag-handle:hover { color: var(--color-text); }
.voice-drag-handle:active { cursor: grabbing; }

.voice-edit-avatar {
    flex-shrink: 0;
    width: 110px;
    text-align: center;
}

.voice-avatar-thumb {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #EEF0F2 center/cover no-repeat;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
}

.voice-avatar-empty {
    font-size: 11px;
    color: var(--color-text-muted);
}

.voice-upload-link {
    display: inline-block;
    font-size: 12px;
    color: var(--color-link);
    cursor: pointer;
    line-height: 1.4;
}

.voice-upload-link:hover { text-decoration: underline; }

.voice-edit-fields {
    flex: 1;
    min-width: 0;
}

.voice-edit-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 10px;
    padding-right: 22px; /* место под ручку перетаскивания в углу */
}

.voice-field {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--color-text-muted);
    gap: 4px;
}

/* Поля тянутся под ширину плитки: имя занимает свободное место, пол — фиксированно */
.voice-field .admin-cell-input,
.voice-field .admin-search-select { width: 100%; }

.voice-field-name { flex: 1 1 120px; min-width: 0; }
.voice-field-gender { flex: 0 0 110px; }
.voice-field-active { flex: 0 0 auto; }

.voice-field-active {
    align-items: center;
}

.voice-field-active .v-active {
    width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer;
}

.voice-field-full { display: block; margin-bottom: 10px; }
.voice-field-full .admin-cell-input { width: 100%; }

.voice-edit-id {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.voice-edit-id span { font-family: monospace; }

.voice-edit-sample {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.voice-sample-player { height: 34px; vertical-align: middle; max-width: 100%; }

.voice-sample-empty { font-size: 13px; color: var(--color-text-muted); }

.voice-sample-actions { display: flex; align-items: center; gap: 12px; }

.voice-sample-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    border-radius: 4px;
}

.voice-sample-del:hover { background: #FDEAEA; }

.voice-edit-actions { display: flex; gap: 14px; align-items: center; }

/* ============================================
   Красивый выбор голоса (карточки голосов, Часть Б)
   ============================================ */
.vp-native { display: none !important; }

.voice-picker { position: relative; }

.voice-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.voice-picker-trigger:hover { border-color: #C7CCD6; }
.voice-picker-trigger.vp-open { border-color: var(--color-accent); }

.vp-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #EEF0F2 center/cover no-repeat;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vp-avatar-ph {
    width: 18px; height: 18px;
    background: var(--color-text-muted);
    -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E");
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E");
}

/* Кнопка play поверх аватара (появляется при наведении) */
.vp-play {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-avatar:hover .vp-play { opacity: 1; }

.vp-play::after {
    content: "";
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
    margin-left: 2px;
}

.vp-play.vp-playing { opacity: 1; }
.vp-play.vp-playing::after {
    border: none;
    width: 9px; height: 9px;
    background: #fff;
    margin: 0;
}

.vp-trigger-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.vp-trigger-text .vp-name { font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-gender { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }

.vp-chevron {
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: var(--color-text-muted) transparent transparent transparent;
    flex-shrink: 0;
}

.vp-trigger-empty { color: var(--color-text-muted); font-size: 14px; }

/* Панель со списком голосов */
.voice-picker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
}

.vp-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

.vp-option:hover { background: #F4F5F7; }
.vp-option.vp-active { background: var(--color-selected); }

.vp-option .vp-avatar { width: 44px; height: 44px; }

.vp-info { flex: 1; min-width: 0; }
.vp-line1 { display: flex; align-items: baseline; gap: 8px; }
.vp-line1 .vp-name { font-weight: 600; color: var(--color-text); }
.vp-descr {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vp-empty { padding: 16px; text-align: center; color: var(--color-text-muted); font-size: 14px; }

/* ============================================
   АДМИНКА: состояние провайдеров (шаг 5.6)
   ============================================ */
.prov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.prov-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prov-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.prov-title { font-size: 1.05rem; font-weight: 700; }

.prov-note {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.prov-key {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.prov-mask {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #F4F5F7;
    border-radius: 6px;
    padding: 2px 8px;
}

/* Результат живой проверки */
.prov-status {
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.prov-status-idle {
    background: #F7F8F9;
    color: var(--color-text-muted);
}

.prov-status-wait {
    background: #F7F8F9;
    color: var(--color-text-secondary);
}

.prov-status-ok    { background: #E6F6EC; border-color: #C7E9D4; color: #1E7A45; }
.prov-status-warn  { background: #FFF6E5; border-color: #FBE3B4; color: #926100; }
.prov-status-error { background: #FDEAEA; border-color: #F7CFCF; color: #A93226; }

.prov-status-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
}

.prov-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    margin-top: 6px;
}

.prov-metrics {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prov-metric {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 400;
}

.prov-checked {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

.prov-stats td:last-child { text-align: right; white-space: nowrap; }
.prov-dim { color: var(--color-text-muted); }

.prov-foot { margin-top: auto; }

.admin-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 32px 0 16px;
}

/* === Лента ошибок админки (шаг 5.6, часть 2) === */

.badge-yellow { background: #FFF6E5; color: #926100; }

/* Вкладки категорий. Ссылки, а не JS: каждая вкладка — свой адрес,
   его можно сохранить в закладки и прислать другому админу */
.admin-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    /* Сдвиг на пиксель вниз, чтобы подчёркивание активной вкладки
       легло ПОВЕРХ линии контейнера, а не под ней */
    margin-bottom: -1px;
    white-space: nowrap;
}

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

.admin-tab.is-active {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

/* Общее число записей — спокойное, чтобы не спорить с красным счётчиком */
.admin-tab-count {
    font-size: 12px;
    color: var(--color-text-muted);
    background: #EEF0F2;
    padding: 1px 7px;
    border-radius: 10px;
}

.admin-tab.is-active .admin-tab-count { background: #E3E7EB; }

/* Непросмотренные — единственное, ради чего сюда смотрят каждый день */
.admin-tab-badge {
    font-size: 11px;
    font-weight: 700;
    background: #C0392B;
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
}

.admin-date-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.admin-search-date {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--color-text);
}

/* Красный счётчик непросмотренных ошибок на пункте меню */
.admin-nav-badge {
    font-size: 11px;
    font-weight: 700;
    background: #C0392B;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.err-table td { vertical-align: top; }
.err-date { white-space: nowrap; }

.err-type {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.err-message {
    margin-top: 4px;
    color: var(--color-text-secondary);
    max-width: 520px;
    word-break: break-word;
}

.err-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Строка с уже ушедшими деньгами — видно без чтения */
.err-row-critical { background: #FEF6F6; }

.err-actions {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.err-details-row > td { background: #F7F8F9; }

.err-details { max-width: 900px; }
.err-details td:first-child {
    width: 220px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.err-pre {
    margin: 0;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
}

/* Счётчик ошибок на карточке провайдера */
.err-count-warn { color: #926100; font-weight: 600; }
.err-count-bad  { color: #C0392B; font-weight: 700; }

/* === Аудит действий администраторов (шаг 5.7, часть 1) === */

.audit-admin { font-weight: 600; }

/* Строки, где двигались деньги — видно без чтения всей таблицы */
.audit-row-money { background: #FBFAF5; }

.audit-changes-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 4px 0 8px;
}
.audit-details-row .admin-mini-table + .audit-changes-title { margin-top: 16px; }

/* === Настройки пользователя в кабинете === */

.settings-head { margin-bottom: 28px; }

.settings-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px;
}

/* Строка настройки: слева описание, справа действие */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid var(--color-border);
}
.settings-row:last-child,
.settings-row-last { border-bottom: 1px solid var(--color-border); }

.settings-row-title { font-weight: 600; margin-bottom: 4px; }

.settings-row-sub {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.settings-row-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.settings-balance {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.settings-lang { min-width: 150px; }

/* Раскрывающаяся форма смены пароля */
.settings-form {
    padding: 20px 0 24px;
    max-width: 420px;
}

.settings-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.settings-form-hint {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0 0 14px;
}

/* Начатая смена адреса: адрес ещё не сменился, письмо ждёт подтверждения */
.settings-pending {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin: 4px 0 0;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-btn);
}

.settings-pending-text {
    font-size: 14px;
    line-height: 1.5;
}

/* Окно подтверждения удаления аккаунта: последствия должны быть видны сразу */
.settings-danger {
    padding: 20px;
    margin: 4px 0 0;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-btn);
    max-width: 520px;
}

.settings-danger-title {
    font-size: 17px;
    font-weight: 700;
    color: #991B1B;
    margin-bottom: 12px;
}

/* Сумма сгорающих токенов — крупно: это главное, что человек должен увидеть */
.settings-danger-amount {
    font-size: 30px;
    font-weight: 700;
    color: #DC2626;
    line-height: 1.2;
    margin-bottom: 6px;
}

.settings-danger-lead {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 14px;
}

.settings-danger-list {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.settings-danger-list li { margin-bottom: 6px; }

/* На узком экране действие уезжает под описание, иначе всё сжимается */
@media (max-width: 700px) {
    .settings-row,
    .settings-pending {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .settings-form,
    .settings-danger { max-width: none; }
}

/* === Системные настройки (шаг 5.7, часть 3) === */

.admin-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 20px 0 10px;
}

/* Маска секрета: моноширинный, чтобы точки не прыгали */
.settings-mask {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    word-break: break-all;
}

/* Числовые поля настроек не должны растягиваться на всю ячейку */
.admin-table .form-input[type="number"] { max-width: 160px; }

/* === Резервные копии (шаг 5.7, часть 2) === */

/* Плашка «свежей копии нет» — единственное, что должно бросаться в глаза */
.admin-note-danger {
    border-color: #E8B4AE;
    background: #FEF6F6;
    color: #8C2F22;
}

/* Плашка «копии только на этом сервере» — предупреждение, но не тревога */
.admin-note-warn {
    border-color: #E8D5A8;
    background: #FFFBF2;
    color: #7A5A12;
}

/* === Аудит: «было → стало» === */
/* Старое приглушено и зачёркнуто, новое выделено */
.audit-was {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: #C9CDD2;
}
.audit-arrow { margin: 0 8px; color: var(--color-text-muted); }
.audit-now { font-weight: 600; }

/* ============================================
   СРОК ХРАНЕНИЯ АУДИО (оферта §6 — 30 дней)
   ============================================
   Пометка на месте пропавшего звука. Приглушённая и без красного:
   это не сбой и не вина пользователя, а штатный срок, о котором
   написано в документах. Красный цвет здесь пугал бы зря. */

.downloads-meta-expired,
.history-item-expired {
    color: var(--color-text-muted);
    font-style: italic;
}

/* В студии — ЗНАЧОК в правом верхнем углу абзаца, а не строка текста.
   ⚠️ `.paragraph-block` это flex-строка: обычный блок встал бы третьей
   колонкой рядом с текстом и отжал его вдвое (так и было в первой версии).
   position:absolute выводит значок из потока, ширины он не занимает. */
.paragraph-expired {
    position: absolute;
    top: 6px;
    /* Левее кнопки удаления (она на right:-8px, ширина 22px) — не столкнутся */
    right: 20px;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    cursor: help;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.paragraph-expired:hover { opacity: 1; }

/* Освобождаем место под значок только там, где он есть: иначе у всех
   остальных абзацев ни за что появился бы отступ справа */
.paragraph-block.has-expired .paragraph-text {
    padding-right: 44px;
}