/* ===== VARIABLES ===== */
:root {
    --primary-dark: #0a0e17;
    --primary-teal: #40e0d0;
    --primary-purple: #7c4dff;
    --primary-gradient: linear-gradient(135deg, #40e0d0, #7c4dff);
    
    --text-primary: #ffffff;
    --text-secondary: #b0bec5;
    --text-muted: #78909c;
    
    --bg-card: rgba(30, 40, 60, 0.8);
    --border-color: rgba(64, 224, 208, 0.2);
    
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    color: var(--text-primary);
    background-color: var(--primary-dark);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* ===== КОНТЕЙНЕР ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== КОСМИЧЕСКИЙ ФОН ===== */
.space-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(26, 35, 126, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(124, 77, 255, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(64, 224, 208, 0.1) 0%, transparent 70%),
        linear-gradient(135deg, #0a0e17 0%, #1a1a2e 50%, #0a0e17 100%);
    background-size: 200% 200%;
    animation: gradientFlow 20s ease infinite;
    z-index: -2;
}

@keyframes gradientFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ===== ШАПКА ===== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 14, 23, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
}

/* Логотип */
.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    flex: 0 0 auto;
}

.logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    margin-top: 10px;
}

.logo i {
    font-size: 1.8rem;
    color: var(--primary-teal);
}

.logo-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
    gap: 0;
}

.logo-part-1 {
    font-family: var(--font-primary);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary-teal);
}

.logo-part-2 {
    font-family: var(--font-primary);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary-purple);
}

/* Навигация */
.main-nav {
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: center;
    z-index: 1;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Компактные кнопки авторизации */
.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    flex: 0 0 auto;
    z-index: 10;
}

.btn-auth {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-auth:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--primary-teal);
}

.btn-auth-primary {
    background: var(--primary-gradient);
    border: none;
    color: white;
}

.btn-auth-primary:hover {
    background: var(--primary-gradient);
    transform: scale(1.1);
}

/* Текстовые кнопки авторизации */
.btn-auth-text {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-auth-text:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--primary-teal);
}

.btn-auth-text.btn-auth-primary {
    background: var(--primary-gradient);
    border: none;
    color: white;
}

.btn-auth-text.btn-auth-primary:hover {
    background: var(--primary-gradient);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Кнопки */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--primary-teal);
    border: 2px solid var(--primary-teal);
}

.btn-outline:hover {
    background: rgba(64, 224, 208, 0.1);
}

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

.btn-block {
    display: block;
    width: 100%;
}

/* ===== ГЛАВНЫЙ КОНТЕНТ ===== */
main {
    padding-top: 80px;
}

/* Герой секция */
.hero-section {
    padding: 80px 0;
    text-align: center;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.search-placeholder {
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 20px;
    color: var(--text-secondary);
    font-size: 1.2rem;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 18px 20px 18px 55px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.1);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.hero-buttons {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.stat {
    text-align: center;
    padding: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.stat:hover {
    transform: translateY(-5px);
    border-color: var(--primary-teal);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-teal);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Секции */
section {
    padding: 80px 0;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--primary-gradient);
    margin: 16px auto;
    border-radius: 9999px;
}

.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Особенности */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
    justify-items: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-teal);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--primary-teal);
}

.feature-card h3 {
    margin-bottom: 16px;
    font-size: 1.5rem;
}

.feature-card p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.feature-list {
    list-style: none;
    text-align: left;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.feature-list li i {
    color: var(--primary-teal);
}

/* Курсы */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.course-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.course-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-teal);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.course-header {
    padding: 20px;
    background: rgba(64, 224, 208, 0.1);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-level {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.course-level.beginner {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.course-level.advanced {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

.course-level.pro {
    background: rgba(156, 39, 176, 0.1);
    color: #ce93d8;
}

.course-duration {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.course-content {
    padding: 30px;
    flex: 1;
}

.course-content h3 {
    margin-bottom: 16px;
    font-size: 1.5rem;
}

.course-content p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.course-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.feature-tag {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary-teal);
    border-radius: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.course-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.course-price {
    display: flex;
    flex-direction: column;
}

.price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-teal);
}

.old-price {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: line-through;
}

/* AI CTA блок на главной */
.ai-cta-block {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
}

.ai-cta-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--primary-gradient);
}

.ai-cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.ai-cta-avatar {
    width: 64px;
    height: 64px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.ai-cta-left h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.ai-cta-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ai-cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ai-cta-feature i {
    color: var(--primary-teal);
    width: 16px;
    flex-shrink: 0;
}

.ai-cta-action {
    text-align: center;
    flex-shrink: 0;
    max-width: 220px;
}

.ai-cta-action p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ai-cta-block {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ai-cta-left {
        justify-content: center;
    }
    .ai-cta-features {
        grid-template-columns: 1fr;
    }
    .ai-cta-action {
        max-width: 100%;
    }
}

/* AI секция */
.ai-demo {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.ai-demo-full {
    max-width: 1400px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    height: 80vh;
    max-height: 800px;
}

.chat-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.new-chat-btn {
    width: 100%;
    padding: 12px 16px;
    background: var(--primary-gradient);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.new-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.chat-history {
    flex: 1;
    overflow-y: auto;
}

.chat-history h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-teal);
    color: var(--text-primary);
}

.history-item.active {
    background: rgba(64, 224, 208, 0.1);
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.ai-chat-full {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-chat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 500px;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(64, 224, 208, 0.1);
    border-bottom: 1px solid var(--border-color);
}

.ai-avatar {
    width: 50px;
    height: 50px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.ai-info h4 {
    margin: 0;
    font-size: 1.2rem;
}

.status {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.status.online {
    color: #4caf50;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background: #4caf50;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    display: flex;
    max-width: 80%;
}

.message.ai-message {
    align-self: flex-start;
}

.message.user-message {
    align-self: flex-end;
}

.message-content {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    line-height: 1.5;
    white-space: pre-line;
}

.ai-message .message-content {
    background: rgba(64, 224, 208, 0.1);
    border-left: 3px solid var(--primary-teal);
}

.user-message .message-content {
    background: rgba(124, 77, 255, 0.1);
    border-right: 3px solid var(--primary-purple);
}

/* ── Report file card ─────────────────────────────────────────────────── */
.report-file-card {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 8px 0;
    max-width: min(100%, 560px);
}
.report-file-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.report-file-info {
    flex: 1 1 220px;
    min-width: 0;
}
.report-file-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.report-file-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.report-download-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-teal), var(--primary-purple));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
    align-self: center;
}
.report-download-btn:hover:not(:disabled) { opacity: 0.85; }
.report-download-btn:disabled { opacity: 0.5; cursor: default; }
.report-error {
    color: #ff6b6b;
    font-size: 0.75em;
    margin-top: 2px;
    flex: 1 0 100%;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .report-file-card {
        padding: 12px;
    }
    .report-download-btn {
        width: 100%;
    }
}

.chat-input-area {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.chat-input-area input {
    flex: 1;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
}

.chat-input-area input:focus {
    outline: none;
    border-color: var(--primary-teal);
}

.ai-examples {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ai-history {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.ai-history h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.history-list-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-item-main {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-main:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-teal);
    color: var(--text-primary);
}

.history-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.examples {
    display: grid;
    gap: 10px;
}

.example-btn {
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-size: 0.9rem;
}

.example-btn:hover {
    background: rgba(64, 224, 208, 0.1);
    border-color: var(--primary-teal);
    color: var(--text-primary);
    transform: translateX(5px);
}

.ai-status {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #4caf50;
}

/* Для инвесторов */
.investors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.investor-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.investor-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-teal);
}

.investor-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--primary-teal);
}

.investor-card h3 {
    margin-bottom: 16px;
    font-size: 1.3rem;
}

.investor-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.investors-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    padding: 40px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.benefit-item {
    text-align: center;
    padding: 20px;
}

.benefit-item i {
    font-size: 2.5rem;
    color: var(--primary-teal);
    margin-bottom: 16px;
}

.benefit-item h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.benefit-item p {
    color: var(--text-secondary);
}

.cta-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 60px;
    text-align: center;
    margin-top: 60px;
}

.cta-box h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-box p {
    color: var(--text-secondary);
    margin-bottom: 40px;
    font-size: 1.2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Тарифы */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-teal);
}

.pricing-card.popular {
    border: 2px solid var(--primary-teal);
    transform: scale(1.05);
}

.pricing-card.popular:hover {
    transform: scale(1.05) translateY(-10px);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-gradient);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pricing-header {
    margin-bottom: 30px;
}

.pricing-header h3 {
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-teal);
}

.period {
    color: var(--text-secondary);
    font-size: 1rem;
}

.pricing-features {
    margin-bottom: 40px;
}

.pricing-features ul {
    list-style: none;
    text-align: left;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.pricing-features li i {
    width: 20px;
}

.pricing-features li i.fa-check {
    color: var(--primary-teal);
}

.pricing-features li i.fa-times {
    color: var(--text-muted);
}

/* Подвал */
.main-footer {
    background: rgba(10, 14, 23, 0.95);
    border-top: 1px solid var(--border-color);
    padding: 60px 0 30px;
    margin-top: 60px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 1.5rem;
    font-weight: 700;
}

.footer-logo i {
    color: var(--primary-teal);
}

.footer-section h4 {
    margin-bottom: 16px;
    color: var(--text-primary);
}

.footer-section a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-section a:hover {
    color: var(--primary-teal);
}

.social-links {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-link:hover {
    background: var(--primary-gradient);
    color: white;
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.footer-bottom p {
    color: var(--text-muted);
    margin-bottom: 10px;
}

.disclaimer {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== МОДАЛЬНЫЕ ОКНА ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
}

.modal-overlay.active {
    display: block;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    z-index: 2001;
    display: none;
}

.modal.active {
    display: block;
}

.modal-content {
    padding: 30px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.modal-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

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

.modal-body h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-teal);
}

.form-link {
    text-align: center;
    margin-top: 20px;
    color: var(--text-secondary);
}

.form-link a {
    color: var(--primary-teal);
    text-decoration: none;
    font-weight: 600;
}

.form-link a:hover {
    text-decoration: underline;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.8rem;
    }
    
    .ai-demo {
        grid-template-columns: 1fr;
    }
    
    .pricing-card.popular {
        transform: scale(1);
    }
    
    .pricing-card.popular:hover {
        transform: translateY(-10px);
    }
    
    .main-nav {
        gap: 15px;
    }
    
    .header-content {
        gap: 30px;
    }
    
    .ai-demo-full {
        grid-template-columns: 240px 1fr;
        height: 75vh;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .courses-grid {
        grid-template-columns: 1fr;
    }
    
    .investors-grid {
        grid-template-columns: 1fr;
    }
    
    .investors-benefits {
        grid-template-columns: 1fr;
        padding: 30px 20px;
    }
    
    .cta-box {
        padding: 40px 20px;
    }
    
    .cta-box h3 {
        font-size: 2rem;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .main-nav {
        display: none !important;
    }

    .header-content {
        gap: 20px;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .header-actions {
        width: auto !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    .logo {
        width: auto !important;
    }

    .btn-label {
        display: none;
    }

    .logo-img {
        height: 42px !important;
        width: auto !important;
    }

    .main-header {
        padding: 8px 0;
    }

    .burger-btn {
        margin-right: 6px;
    }
    
    .ai-demo-full {
        grid-template-columns: 1fr;
        height: 70vh;
    }
    
    .chat-sidebar {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .header-content {
        gap: 15px;
    }
    
    .logo-part-1, .logo-part-2 {
        font-size: 1.3rem;
    }
    
    .main-nav {
        display: none !important;
    }

    .header-actions {
        gap: 4px !important;
    }

    .btn-auth-text {
        padding: 7px 8px;
        font-size: 0.8rem;
    }
    
    .ai-demo-full {
        height: 60vh;
    }
}
/* ===== ЛИЧНЫЙ КАБИНЕТ ===== */
.personal-section {
    padding: 80px 0;
    display: none;
}

.personal-section.active {
    display: block;
}

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

.personal-header .section-title {
    margin-bottom: 0;
}

.personal-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Профиль */
.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
}

.profile-header {
    display: flex;
    gap: 30px;
    align-items: center;
}

.profile-avatar {
    position: relative;
}

.avatar-circle {
    width: 100px;
    height: 100px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
}

.profile-status {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--primary-dark);
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
}

.profile-info {
    flex: 1;
}

.profile-info h3 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.profile-tier {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.tier-badge {
    padding: 8px 16px;
    background: var(--primary-gradient);
    color: white;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.tier-badge.pro {
    background: linear-gradient(135deg, #ff9800, #ff5722);
}

.member-since {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 500px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-teal);
    margin-bottom: 5px;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Дашборд */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.dashboard-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
}

.dashboard-card.wide {
    grid-column: span 2;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.card-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
}

.card-link {
    color: var(--primary-teal);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.card-link:hover {
    color: white;
    text-decoration: underline;
}

/* Список курсов */
.courses-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.course-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.course-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-teal);
}

.course-icon {
    width: 50px;
    height: 50px;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-teal);
}

.course-details {
    flex: 1;
}

.course-details h4 {
    margin-bottom: 5px;
    font-size: 1rem;
}

.course-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 3px;
}

.progress-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

/* Подписка */
.subscription-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subscription-tier {
    display: flex;
    gap: 20px;
    align-items: center;
}

.tier-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.tier-details h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.tier-period {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.tier-features {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.subscription-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* Активность */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.activity-icon {
    width: 40px;
    height: 40px;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary-teal);
}

.activity-content {
    flex: 1;
}

.activity-content h4 {
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.activity-time {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Рекомендации */
.ai-recommendations {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recommendation {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(64, 224, 208, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(64, 224, 208, 0.2);
}

.rec-icon {
    width: 40px;
    height: 40px;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary-teal);
}

.rec-content h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.rec-content p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Быстрые действия */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.quick-action:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-teal);
    transform: translateY(-2px);
}

.quick-action i {
    font-size: 1.5rem;
    color: var(--primary-teal);
}

.quick-action span {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Статистика прогресса */
.progress-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.progress-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-info span:first-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.progress-value {
    font-weight: 600;
    color: var(--primary-teal);
}

/* Адаптивность личного кабинета */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-card.wide {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .profile-stats {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .personal-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .quick-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .profile-card {
        padding: 25px;
    }
    
    .dashboard-card {
        padding: 20px;
    }
    
    .subscription-tier {
        flex-direction: column;
        text-align: center;
    }
    
    .subscription-actions {
        flex-direction: column;
    }
}

/* ===== СЕКЦИЯ ВОЗМОЖНОСТЕЙ ===== */
.chatbot-section {
    padding: 80px 0;
}

.chatbot-section .section-title {
    margin-bottom: 12px;
}

.chatbot-tagline {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.chatbot-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 48px;
}

.chatbot-content {
    max-width: 900px;
    margin: 0 auto;
}

.chatbot-info {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

.chatbot-info-wide {
    text-align: left;
    padding: 48px 40px;
}

.chatbot-abilities-title {
    font-size: 1.5rem;
    margin-bottom: 28px;
    text-align: center;
    color: var(--text-primary);
}

.chatbot-abilities {
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
}

.chatbot-ability {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    transition: all 0.25s ease;
}

.chatbot-ability:hover {
    background: rgba(64, 224, 208, 0.06);
    border-color: rgba(64, 224, 208, 0.25);
}

.chatbot-ability i {
    color: var(--primary-teal);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.chatbot-ability span {
    flex: 1;
}

.chatbot-cta-text {
    text-align: center;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 28px;
    font-weight: 500;
}

.chatbot-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

.chatbot-ability p {
    margin: 6px 0 0;
    color: var(--text-secondary);
}

.chatbot-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
}

.chatbot-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.chatbot-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
}

.chatbot-feature-item i {
    color: var(--primary-teal);
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .chatbot-info-wide {
        padding: 28px 20px;
    }
    
    .chatbot-tagline {
        font-size: 1.2rem;
    }
    
    .chatbot-ability {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }
    
    .chatbot-actions {
        flex-direction: column;
    }
}

/* ===== РЫНОЧНЫЕ ДАННЫЕ ===== */
.market-data-section {
    padding: 80px 0;
}

.market-tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.market-tab {
    padding: 12px 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.market-tab:hover {
    border-color: var(--primary-teal);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.market-tab.active {
    background: var(--primary-gradient);
    border-color: transparent;
    color: white;
}

.news-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 160px auto;
    gap: 12px;
    margin: 12px 0 16px;
}

.news-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 14px;
    min-height: 48px;
}

.news-search i {
    color: var(--text-muted);
}

.news-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.news-select,
.news-action-btn {
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
}

.news-select {
    padding: 0 12px;
}

.news-action-btn {
    padding: 0 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-action-btn:hover,
.news-quick-topics button:hover {
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.news-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.news-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.news-category-tabs button,
.news-quick-topics button {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
}

.news-category-tabs button.active,
.news-category-tabs button:hover,
.news-quick-topics button:hover {
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.news-list-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.news-limit {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.news-meta {
    min-height: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

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

.news-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.news-card:hover {
    border-color: var(--primary-teal);
    transform: translateY(-2px);
}

.news-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.news-card h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.news-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 0.92rem;
}

.news-manual-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(64, 224, 208, 0.12);
    border: 1px solid rgba(64, 224, 208, 0.22);
    color: var(--primary-teal);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.news-card-link {
    margin-top: auto;
    color: var(--primary-teal);
    font-size: 0.86rem;
    font-weight: 700;
}

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.news-pagination button {
    min-width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
}

.news-pagination button.active,
.news-pagination button:hover:not(:disabled) {
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.news-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.market-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.market-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.market-section-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-teal);
}

.section-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 224, 208, 0.1);
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--primary-teal);
}

.market-section-card h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.market-section-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.market-content {
    margin-top: 40px;
}

.tab-content {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
}

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

.tab-content h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

.tab-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1.1rem;
}

/* ===== О НАС СЕКЦИЯ ===== */
.about-section {
    padding: 80px 0;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

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

.about-text .lead {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 20px;
    font-weight: 600;
}

.about-text p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

/* ===== АНИМИРОВАННЫЕ ВАЛЮТЫ/ТИКЕРЫ ===== */
.currency-animations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.currency-item {
    position: absolute;
    color: rgba(64, 224, 208, 0.4);
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-primary);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    top: 0;
    left: 0;
    opacity: 0.85;
    will-change: left, top;
}
/* ===== MARKET DATA PAGES ===== */
.market-page-main {
    padding-top: 80px;
}

.market-section {
    padding: 40px 0 80px;
}

.market-section .section-title {
    text-align: left;
    margin-bottom: 30px;
}

.market-section .section-title::after {
    margin: 16px 0;
}

.market-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

.market-table thead {
    background: rgba(64, 224, 208, 0.08);
}

.market-table th {
    padding: 14px 16px;
    text-align: left;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.market-table td {
    padding: 14px 16px;
    font-size: 0.95rem;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(64, 224, 208, 0.08);
    white-space: nowrap;
}

.market-table tbody tr {
    transition: background 0.2s ease;
}

.market-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.market-table tbody tr.clickable-row {
    cursor: pointer;
}

.market-table tbody tr.clickable-row:hover {
    background: rgba(64, 224, 208, 0.07);
}

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

.ticker-symbol {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--primary-teal);
}

.ticker-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ── Fund-specific table styles ── */
.fund-index-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(64, 224, 208, 0.1);
    border: 1px solid rgba(64, 224, 208, 0.25);
    color: var(--primary-teal);
    font-size: 0.78rem;
    font-weight: 600;
    margin: 1px 1px;
    white-space: nowrap;
}

/* Fund category badges */
.fund-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.fund-cat-badge i { font-size: 0.72rem; }

.cat-money  { background: rgba(0, 200, 150, 0.12); border: 1px solid rgba(0, 200, 150, 0.3); color: #4caf91; }
.cat-equity { background: rgba(33, 150, 243, 0.12); border: 1px solid rgba(33, 150, 243, 0.3); color: #64b5f6; }
.cat-bond   { background: rgba(124, 77, 255, 0.12); border: 1px solid rgba(124, 77, 255, 0.3); color: #b39ddb; }
.cat-gold   { background: rgba(255, 193, 7, 0.12);  border: 1px solid rgba(255, 193, 7, 0.35); color: #ffd54f; }
.cat-metal  { background: rgba(176, 190, 197, 0.12);border: 1px solid rgba(176, 190, 197, 0.3);color: #b0bec5; }
.cat-mixed  { background: rgba(255, 138, 101, 0.12);border: 1px solid rgba(255, 138, 101, 0.3);color: #ff8a65; }

.col-category { min-width: 140px; white-space: nowrap; }

@media (max-width: 1024px) {
    .col-isin     { display: none; }
}
@media (max-width: 768px) {
    .col-category { display: none; }
    .col-listdate { display: none; }
    .col-mgmt     { display: none; }
}

.change-positive {
    color: #4caf50;
    font-weight: 600;
}

.change-negative {
    color: #ef5350;
    font-weight: 600;
}

/* ── Crypto list rank & column widths ────────────────────────────────────── */
.col-rank {
    width: 60px;
    text-align: center;
}
.col-change7d {
    min-width: 80px;
    text-align: right;
}
.crypto-rank {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(64, 224, 208, 0.1);
    border-radius: 6px;
    padding: 2px 7px;
    min-width: 32px;
    text-align: center;
}
.crypto-rank-none {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Crypto sector badge ─────────────────────────────────────────────────── */
.crypto-sector-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: color-mix(in srgb, var(--sc, #546e7a) 18%, transparent);
    color: var(--sc, #90a4ae);
    border: 1px solid color-mix(in srgb, var(--sc, #546e7a) 40%, transparent);
}

.col-sector {
    min-width: 100px;
    white-space: nowrap;
}

/* ── Crypto filter panel redesign ────────────────────────────────────────── */
.cfp-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cfp-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
}

.cfp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: flex-start;
}

.cfp-row-bottom {
    align-items: flex-end;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 14px;
}

.cfp-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.cfp-section.cfp-reset-section {
    margin-left: auto;
}

/* Sector chips */
.cfp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fchip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    transition: all 0.18s;
    white-space: nowrap;
}

.fchip:hover {
    background: rgba(255,255,255,0.09);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.22);
}

.fchip.active {
    background: color-mix(in srgb, var(--sc, var(--accent-primary)) 20%, transparent);
    color: var(--sc, var(--accent-primary));
    border-color: color-mix(in srgb, var(--sc, var(--accent-primary)) 50%, transparent);
}

/* Rank / direction button group */
.cfp-btngroup {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.fbtn {
    padding: 5px 13px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    transition: all 0.18s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fbtn:hover {
    background: rgba(64,224,208,0.08);
    border-color: rgba(64,224,208,0.3);
    color: var(--text-primary);
}

.fbtn.active {
    background: rgba(64,224,208,0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 600;
}

.fbtn.fbtn-up.active {
    background: rgba(102,187,106,0.15);
    border-color: #66bb6a;
    color: #66bb6a;
}

.fbtn.fbtn-down.active {
    background: rgba(239,83,80,0.15);
    border-color: #ef5350;
    color: #ef5350;
}

/* ── Futures table ────────────────────────────────────────────────────────── */
.futures-group-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.group-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.group-tab:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

.group-tab.active {
    background: rgba(0,188,212,0.15);
    border-color: var(--primary-teal);
    color: var(--primary-teal);
    font-weight: 600;
}

.group-count {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.78em;
    font-weight: 600;
}

.group-tab.active .group-count {
    background: rgba(0,188,212,0.2);
}

.futures-table .col-name {
    max-width: 200px;
    min-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.futures-table .col-type { width: 50px; text-align: center; }
.futures-table .col-expiry { white-space: nowrap; }
.futures-table .col-margin { white-space: nowrap; }
.futures-table .col-lot { white-space: nowrap; }

.badge-calc {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(33,150,243,0.15);
    color: #64b5f6;
    border: 1px solid rgba(33,150,243,0.3);
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 700;
}

.badge-deliv {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255,152,0,0.15);
    color: #ffb74d;
    border: 1px solid rgba(255,152,0,0.3);
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 700;
}

/* Bond name cell — wrap text, limit width */
.bond-name-cell {
    white-space: normal !important;
    max-width: 220px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bond sector badges */
.bond-sector-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.bond-sector-gov {
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.3);
}
.bond-sector-corp {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.bond-sector-mun {
    background: rgba(255, 152, 0, 0.15);
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.3);
}
.col-emitent {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Calcmode badges (indices page) */
.calcmode-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-blue   { background: rgba(33,150,243,0.15); color: #64b5f6; border: 1px solid rgba(33,150,243,0.3); }
.badge-green  { background: rgba(76,175,80,0.15);  color: #81c784; border: 1px solid rgba(76,175,80,0.3); }
.badge-teal   { background: rgba(0,188,212,0.15);  color: #4dd0e1; border: 1px solid rgba(0,188,212,0.3); }
.badge-orange { background: rgba(255,152,0,0.15);  color: #ffb74d; border: 1px solid rgba(255,152,0,0.3); }
.badge-yellow { background: rgba(255,235,59,0.12); color: #fff176; border: 1px solid rgba(255,235,59,0.25); }
.badge-purple { background: rgba(156,39,176,0.15); color: #ce93d8; border: 1px solid rgba(156,39,176,0.3); }
.badge-gray   { background: rgba(158,158,158,0.15);color: #bdbdbd; border: 1px solid rgba(158,158,158,0.3); }
.col-type        { white-space: nowrap; }
.col-index-name  { max-width: 260px; color: var(--text-secondary); font-size: 0.9em; }

/* Filter chips (category tabs) */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.filter-chip:hover {
    background: rgba(255,255,255,0.10);
    color: var(--text-primary);
}
.filter-chip.active {
    background: rgba(99,102,241,0.2);
    border-color: rgba(99,102,241,0.5);
    color: #a5b4fc;
}
.chip-count {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    font-size: 0.75rem;
    font-weight: 600;
}
.filter-chip.active .chip-count {
    background: rgba(99,102,241,0.3);
}

.market-loading,
.market-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 16px;
}

.market-loading i {
    font-size: 2rem;
    color: var(--primary-teal);
}

.market-loading p {
    color: var(--text-secondary);
}

.market-error i {
    font-size: 2rem;
    color: #ef5350;
}

.market-error p {
    color: var(--text-secondary);
}

.market-error .btn {
    margin-top: 10px;
}

/* ===== SORTABLE TABLE HEADERS ===== */
.sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.sortable-th:hover {
    color: var(--primary-teal);
}

.sort-icon {
    margin-left: 6px;
    font-size: 0.75rem;
    vertical-align: middle;
}

.sort-inactive {
    opacity: 0.3;
}

.sort-active {
    color: var(--primary-teal);
    opacity: 1;
}

.sort-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--primary-teal);
    color: var(--primary-dark);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 3px;
    vertical-align: middle;
}

/* ===== DUAL PRICE (RUB + USD) ===== */
.price-rub {
    display: block;
}

.price-usd {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ===== CLICKABLE CRYPTO ROWS ===== */
.crypto-row {
    cursor: pointer;
}

.crypto-row:hover {
    background: rgba(64, 224, 208, 0.06) !important;
}

/* ===== CRYPTO / STOCK DETAIL PAGE ===== */
.detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 24px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.detail-back-btn:hover {
    color: var(--primary-teal);
    background: rgba(64, 224, 208, 0.08);
}

.detail-coin-header {
    margin-bottom: 24px;
}

.detail-coin-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.detail-coin-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.detail-coin-name {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.detail-coin-symbol {
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: 600;
}

.detail-coin-prices {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.detail-price-main {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-teal);
}

.detail-price-usd {
    font-size: 1rem;
    color: var(--text-muted);
}

.detail-change {
    font-size: 1rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.detail-change.change-positive {
    background: rgba(76, 175, 80, 0.15);
}

.detail-change.change-negative {
    background: rgba(239, 83, 80, 0.15);
}

/* Chart container */
.chart-container {
    background: #0f1420;
    border: 1px solid rgba(120, 144, 156, 0.24);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.chart-crosshair-tooltip {
    position: absolute;
    z-index: 12;
    min-width: 172px;
    max-width: 240px;
    padding: 10px 12px;
    background: rgba(10, 15, 28, 0.94);
    border: 1px solid rgba(64, 224, 208, 0.28);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.35;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.chart-crosshair-date {
    color: #40e0d0;
    font-weight: 700;
    margin-bottom: 7px;
}

.chart-crosshair-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
    color: var(--text-secondary);
}

.chart-crosshair-row strong {
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
}

.chart-crosshair-row.muted strong { color: #b0bec5; }
.chart-crosshair-row.ok strong { color: #40e0d0; }
.chart-crosshair-row.warn strong { color: #ffc107; }

@media (max-width: 600px) {
    .chart-crosshair-tooltip {
        min-width: 156px;
        max-width: calc(100vw - 32px);
        font-size: 11px;
        padding: 9px 10px;
    }
}

.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(120, 144, 156, 0.18);
    background: #121826;
    overflow-x: auto;
    scrollbar-width: thin;
}

.chart-toolbar-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-right: 8px;
    white-space: nowrap;
}

.tf-btn {
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tf-btn:hover {
    color: var(--text-primary);
    border-color: var(--primary-teal);
    background: rgba(64, 224, 208, 0.08);
}

.tf-btn.active {
    color: #e8f5f4;
    background: rgba(64, 224, 208, 0.16);
    border-color: rgba(64, 224, 208, 0.42);
}

.chart-tools-label {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(120, 144, 156, 0.22);
}

.chart-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
}

.chart-tool-btn i {
    font-size: 0.86rem;
}

.chart-tool-btn span {
    line-height: 1;
}

.chart-placement-mode #tradingviewChart,
.chart-placement-mode .tv-lightweight-charts {
    cursor: crosshair;
}

.chart-ohlc-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 30px;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(120, 144, 156, 0.14);
    background: rgba(15, 20, 32, 0.96);
    color: #9aa7b2;
    font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.76rem;
    line-height: 1.2;
    overflow-x: auto;
    scrollbar-width: thin;
}

.chart-ohlc-strip span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.chart-ohlc-strip b {
    color: #d7dde4;
    font-weight: 600;
}

.chart-ohlc-symbol {
    color: #e8edf2;
    font-weight: 700;
}

.chart-ohlc-change.is-up,
.chart-ohlc-change.is-up b {
    color: #40e0d0;
}

.chart-ohlc-change.is-down,
.chart-ohlc-change.is-down b {
    color: #ef5350;
}

.chart-ohlc-volume {
    color: #7d8b96;
}

.chart-drawing-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
}

.chart-measure-layer {
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.chart-measure line {
    stroke: #fbc02d;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.chart-measure text {
    fill: #f7d774;
    font: 600 11px "Roboto Mono", Consolas, monospace;
    paint-order: stroke;
    stroke: rgba(10, 14, 22, 0.94);
    stroke-width: 4px;
}

.chart-measure-handle {
    fill: #121826;
    stroke: #fbc02d;
    stroke-width: 2;
    cursor: grab;
    pointer-events: all;
}

.chart-measure-handle:active {
    cursor: grabbing;
}

.chart-settings-panel {
    position: absolute;
    top: 52px;
    right: 12px;
    z-index: 14;
    width: min(420px, calc(100% - 24px));
    max-height: min(620px, calc(100vh - 140px));
    overflow: hidden;
    border: 1px solid rgba(120, 144, 156, 0.24);
    border-radius: 8px;
    background: rgba(18, 24, 38, 0.98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    color: var(--text-secondary);
}

.chart-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(120, 144, 156, 0.18);
}

.chart-settings-header strong {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
}

.chart-settings-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(120, 144, 156, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
}

.chart-settings-close:hover {
    color: var(--text-primary);
    border-color: rgba(64, 224, 208, 0.35);
}

.chart-settings-note {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(120, 144, 156, 0.14);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.chart-settings-body {
    display: grid;
    gap: 10px;
    max-height: calc(min(620px, calc(100vh - 140px)) - 43px);
    overflow-y: auto;
    padding: 12px;
}

.chart-settings-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(120, 144, 156, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.chart-settings-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
}

.chart-settings-toggle input {
    accent-color: var(--primary-teal);
}

.chart-settings-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.chart-settings-field input,
.chart-settings-field select {
    width: 100%;
    min-height: 30px;
    border: 1px solid rgba(120, 144, 156, 0.22);
    border-radius: 4px;
    background: rgba(10, 14, 22, 0.88);
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
}

.chart-settings-field input:not([type="color"]),
.chart-settings-field select {
    padding: 5px 8px;
}

.chart-color-field input[type="color"] {
    padding: 2px;
    cursor: pointer;
}

.chart-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.chart-level-panel .chart-settings-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-level-panel .chart-settings-actions {
    grid-column: 1 / -1;
}

#tradingviewChart {
    width: 100%;
    height: 500px;
    background: #0f1420;
}

/* Detail metrics */
.detail-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.detail-metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.detail-metric-card:hover {
    border-color: var(--primary-teal);
}

.metric-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== CRYPTO ANALYTICS SECTION ===== */
.detail-analytics {
    margin-bottom: 40px;
}

.analytics-group {
    margin-bottom: 24px;
}

.analytics-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-group-title i {
    color: var(--primary-teal);
}

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

.metric-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Long/Short bar */
.ls-card {
    grid-column: span 2;
}

.ls-bar-wrap {
    margin-top: 8px;
}

.ls-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--border-color);
    margin-bottom: 6px;
}

.ls-bar-long {
    background: var(--success-color, #4caf50);
    transition: width 0.4s ease;
}

.ls-bar-short {
    background: var(--danger-color, #ef5350);
    flex: 1;
    transition: width 0.4s ease;
}

.ls-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Beta badges */
.beta-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
}

.beta-high { background: rgba(239,83,80,0.15); color: #ef5350; }
.beta-mid  { background: rgba(255,193,7,0.15);  color: #ffc107; }
.beta-low  { background: rgba(64,224,208,0.15); color: var(--primary-teal); }
.beta-neg  { background: rgba(156,39,176,0.15); color: #ab47bc; }

@media (max-width: 768px) {
    .ls-card { grid-column: span 1; }
    .analytics-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .analytics-cards { grid-template-columns: 1fr; }
}

/* ===== CRYPTO INFO SECTION ===== */
.detail-info-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 40px;
}

.coin-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 20px;
}

.coin-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.coin-cat-chip {
    background: rgba(64, 224, 208, 0.12);
    border: 1px solid rgba(64, 224, 208, 0.25);
    color: var(--primary-teal);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.coin-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.coin-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.coin-detail-icon {
    color: var(--text-muted);
    width: 14px;
}

.coin-detail-label {
    color: var(--text-muted);
}

.coin-detail-val {
    color: var(--text-primary);
    font-weight: 500;
}

.coin-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coin-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.coin-link-btn:hover {
    border-color: var(--primary-teal);
    color: var(--primary-teal);
    background: rgba(64, 224, 208, 0.07);
}

@media (max-width: 768px) {
    .detail-info-section { padding: 20px; }
    .coin-detail-row { gap: 12px; }
}

/* ===== REAL-TIME PRICE FLASH ===== */
@keyframes tick-up-anim {
    0% { background-color: rgba(76, 175, 80, 0.35); }
    100% { background-color: transparent; }
}

@keyframes tick-down-anim {
    0% { background-color: rgba(239, 83, 80, 0.35); }
    100% { background-color: transparent; }
}

.crypto-row.tick-up,
.stock-row.tick-up {
    animation: tick-up-anim 1.5s ease-out;
}

.crypto-row.tick-up .cell-price .price-rub {
    color: #4caf50;
    transition: color 1.5s ease-out;
}

.stock-row.tick-up .cell-price {
    color: #4caf50;
    transition: color 1.5s ease-out;
}

.crypto-row.tick-down,
.stock-row.tick-down {
    animation: tick-down-anim 1.5s ease-out;
}

.crypto-row.tick-down .cell-price .price-rub {
    color: #ef5350;
    transition: color 1.5s ease-out;
}

.stock-row.tick-down .cell-price {
    color: #ef5350;
    transition: color 1.5s ease-out;
}

@keyframes ws-flash-anim {
    0% { background-color: rgba(64, 224, 208, 0.25); }
    100% { background-color: transparent; }
}

.ws-flash {
    animation: ws-flash-anim 0.6s ease-out;
}

/* ===== STOCKS SEARCH + FILTER TOOLBAR ===== */
.stocks-toolbar {
    margin-bottom: 20px;
}

.stocks-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.stocks-search-wrap {
    position: relative;
    flex: 1;
}

.stocks-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.stocks-search-input {
    width: 100%;
    padding: 11px 36px 11px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.stocks-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.1);
}

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

.stocks-search-wrap {
    position: relative;
    flex: 1;
}

.stocks-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}

.stocks-search-clear:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(255,255,255,0.07));
}

.stocks-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.stocks-filter-toggle:hover,
.stocks-filter-toggle.active {
    background: rgba(64, 224, 208, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(64, 224, 208, 0.1);
    border: 1px solid rgba(64, 224, 208, 0.3);
    border-radius: 8px;
    color: var(--primary-teal);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.btn-export:hover {
    background: rgba(64, 224, 208, 0.2);
    border-color: rgba(64, 224, 208, 0.6);
}
.btn-export i { font-size: 0.9rem; }

.filter-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-primary);
    color: #0a0e1a;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Filter panel ── */
.stocks-filter-panel {
    margin-top: 12px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Custom select ── */
.csel {
    position: relative;
}

.csel-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s, background 0.2s;
}

.csel-trigger:hover,
.csel.open .csel-trigger {
    border-color: var(--accent-primary);
    background: rgba(64, 224, 208, 0.04);
}

.csel-value {
    color: var(--text-primary);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.csel-arrow {
    color: var(--text-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.csel.open .csel-arrow {
    transform: rotate(180deg);
    color: var(--accent-primary);
}

.csel-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    z-index: 200;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 224, 208, 0.3) transparent;
}

.csel-dropdown::-webkit-scrollbar {
    width: 4px;
}
.csel-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.csel-dropdown::-webkit-scrollbar-thumb {
    background: rgba(64, 224, 208, 0.3);
    border-radius: 4px;
}

.csel.open .csel-dropdown {
    display: block;
}

.csel-option {
    padding: 9px 14px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.csel-option:first-child {
    border-radius: 10px 10px 0 0;
}

.csel-option:last-child {
    border-radius: 0 0 10px 10px;
}

.csel-option:hover {
    background: rgba(64, 224, 208, 0.09);
    color: var(--text-primary);
}

.csel-option.selected {
    color: var(--accent-primary);
    background: rgba(64, 224, 208, 0.07);
    font-weight: 500;
}

/* ── Range filters ── */
.filter-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.filter-range-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-range-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-range-input {
    width: 90px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.filter-range-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.filter-range-sep {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.filter-reset-wrap {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: 1px;
}

.filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(239, 83, 80, 0.1);
    border: 1px solid rgba(239, 83, 80, 0.3);
    border-radius: 8px;
    color: #ef5350;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.filter-reset-btn:hover {
    background: rgba(239, 83, 80, 0.2);
    border-color: #ef5350;
}

/* Empty table state */
.table-empty {
    text-align: center;
    padding: 40px 20px !important;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.table-empty i {
    margin-right: 8px;
}

@media (max-width: 768px) {
    .stocks-search-row { flex-wrap: wrap; }
    .filter-grid { grid-template-columns: repeat(2, 1fr); }
    .filter-ranges { flex-direction: column; align-items: flex-start; }
    .filter-reset-wrap { margin-left: 0; }
}

/* ===== CRYPTO EXPORT ===== */
.crypto-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.crypto-export-btn:hover,
.crypto-export-btn.active {
    background: rgba(255, 183, 77, 0.1);
    border-color: #ffb74d;
    color: #ffb74d;
}

.crypto-export-panel {
    margin-top: 12px;
    padding: 20px 22px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 183, 77, 0.2);
    border-radius: 12px;
}

.exp-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.exp-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exp-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Scope selector */
.exp-scope-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.exp-scope-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.18s;
    user-select: none;
}

.exp-scope-label:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.2);
}

.exp-scope-label.active {
    background: rgba(255, 183, 77, 0.1);
    border-color: rgba(255, 183, 77, 0.45);
}

.exp-scope-radio {
    accent-color: #ffb74d;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.exp-scope-text {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 500;
}

.exp-scope-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 1px 8px;
}

.exp-scope-label.active .exp-scope-count {
    background: rgba(255, 183, 77, 0.15);
    color: #ffb74d;
}

/* Column checkboxes */
.exp-cols-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.exp-col-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    padding: 3px 0;
    transition: color 0.15s;
}

.exp-col-label:hover { color: var(--text-primary); }

.exp-col-cb {
    accent-color: #ffb74d;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.exp-col-actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.exp-col-toggle {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    font-family: inherit;
    transition: color 0.15s;
}

.exp-col-toggle:hover { color: var(--text-primary); }

/* Format buttons */
.exp-format-section {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 14px;
}

.exp-format-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.exp-format-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 28px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    min-width: 120px;
}

.exp-format-btn i {
    font-size: 1.6rem;
    margin-bottom: 2px;
}

.exp-format-btn span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.exp-format-btn small {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.exp-csv {
    border-color: rgba(102, 187, 106, 0.3);
}
.exp-csv i { color: #66bb6a; }
.exp-csv:hover {
    background: rgba(102, 187, 106, 0.1);
    border-color: #66bb6a;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(102, 187, 106, 0.15);
}

.exp-xlsx {
    border-color: rgba(41, 182, 246, 0.3);
}
.exp-xlsx i { color: #29b6f6; }
.exp-xlsx:hover {
    background: rgba(41, 182, 246, 0.1);
    border-color: #29b6f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(41, 182, 246, 0.15);
}

@media (max-width: 600px) {
    .exp-format-btn { min-width: 100px; padding: 12px 18px; }
    .exp-scope-group { flex-direction: column; }
}

/* ===== PAGINATION ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pagination-info {
    text-align: center;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.page-btn:hover:not(.disabled):not(.active) {
    background: rgba(64, 224, 208, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.page-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #0a0e1a;
    font-weight: 700;
    cursor: default;
}

.page-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-btn.page-nav {
    font-size: 0.8rem;
}

.page-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 38px;
}

/* ===== MARKET TABLE RESPONSIVE ===== */
@media (max-width: 768px) {
    .market-table th,
    .market-table td {
        padding: 12px 14px;
        font-size: 0.85rem;
    }

    .market-table .col-volume {
        display: none;
    }
    .market-table .col-optional {
        display: none;
    }
    .market-table .col-sector {
        display: none;
    }
}

@media (max-width: 480px) {
    .market-table th,
    .market-table td {
        padding: 10px 10px;
        font-size: 0.8rem;
    }

    .market-table .col-name {
        display: none;
    }
}

@media (max-width: 768px) {
    .detail-coin-name { font-size: 1.5rem; }
    .detail-coin-icon { width: 40px; height: 40px; }
    .detail-price-main { font-size: 1.3rem; }
    #tradingviewChart { min-height: unset; height: auto !important; }
    .chart-container { border-radius: 12px; overflow: visible; }
    .detail-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .detail-metrics { grid-template-columns: 1fr; }
    .detail-coin-prices { flex-direction: column; gap: 6px; }
}



/* ===== PERSONAL PAGE — always visible ===== */
.personal-main .personal-section {
    display: block;
}

/* ===== SIDEBAR & BURGER ===== */
.burger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px;
    flex-shrink: 0;
}

.burger-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--primary-teal);
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: rgba(10, 14, 23, 0.98);
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--border-color);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header .logo-part-1,
.sidebar-header .logo-part-2 {
    font-size: 1.5rem;
}

.sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--primary-teal);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--primary-teal);
}

.sidebar-link.active {
    color: var(--primary-teal);
    background: rgba(64, 224, 208, 0.08);
    border-left-color: var(--primary-teal);
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

/* ===== MACRO PAGE ===== */
.macro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 32px;
}
@media (max-width: 768px) { .macro-grid { grid-template-columns: 1fr; } }

.macro-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
}

.macro-panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-teal);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.macro-stat-card {
    background: rgba(64,224,208,0.06);
    border: 1px solid rgba(64,224,208,0.2);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.macro-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.macro-stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary-teal);
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.macro-rate-delta {
    font-size: 1rem;
    font-weight: 600;
}

.macro-stat-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.macro-subsection {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.macro-table-wrap {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
}

.macro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.macro-table th {
    background: rgba(64,224,208,0.08);
    color: var(--primary-teal);
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}

.macro-table td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-primary);
}

.macro-table tr:hover td {
    background: rgba(64,224,208,0.04);
}

.macro-date-badge {
    display: inline-block;
    background: rgba(64,224,208,0.1);
    border: 1px solid rgba(64,224,208,0.25);
    color: var(--primary-teal);
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.macro-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.change-neutral { color: var(--text-muted); }

/* ===== MARKET DATA OVERVIEW ===== */
.indicators-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.kpi-grid {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .indicators-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .indicators-grid { grid-template-columns: 1fr 1fr; } }

/* Section link (→ Все облигации) */
.md-section-link {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}
.md-section-link:hover { color: var(--accent-primary); }

.indicator-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}
.ind-card-link {
    text-decoration: none;
    display: block;
}
.ind-card-link:hover {
    border-color: var(--ind-accent, var(--accent-primary));
    transform: translateY(-2px);
}

.ind-sublabel {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Accent colour helpers for KPI icons */
.ind-accent-teal   { color: var(--primary-teal) !important; }
.ind-accent-blue   { color: #42a5f5 !important; }
.ind-accent-orange { color: #ffa726 !important; }
.ind-accent-green  { color: #66bb6a !important; }
.ind-accent-red    { color: #ef5350 !important; }
.ind-accent-yellow { color: #ffd54f !important; }
.ind-accent-purple { color: #ab47bc !important; }
.ind-accent-brown  { color: #a1887f !important; }

.ind-icon {
    font-size: 1.5rem;
    color: var(--ind-accent, var(--primary-teal));
    margin-bottom: 10px;
    opacity: 0.9;
}

.ind-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.ind-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-primary);
    margin-bottom: 4px;
}

.ind-change {
    font-size: 0.82rem;
    font-weight: 600;
}

.movers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}
@media (max-width: 700px) { .movers-grid { grid-template-columns: 1fr; } }

.movers-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.movers-panel-title {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 12px 18px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mover-row {
    display: grid;
    grid-template-columns: 70px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
}

.mover-row:hover { background: rgba(64,224,208,0.05); }
.mover-row:last-child { border-bottom: none; }

.mover-symbol {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-teal);
    font-family: var(--font-primary);
}

.mover-name {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mover-price {
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.mover-change {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

/* ===== MARKET DATA — BONDS OVERVIEW ===== */
.bonds-ov-grid,
.bonds-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}
@media (max-width: 860px) { .bonds-ov-grid, .bonds-overview-grid { grid-template-columns: 1fr; } }

.bond-ov-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.bond-ov-panel-hdr {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bond-ov-head {
    display: grid;
    grid-template-columns: 90px 1fr 72px 60px 80px 54px;
    gap: 4px;
    padding: 7px 16px;
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bond-ov-row {
    display: grid;
    grid-template-columns: 90px 1fr 72px 60px 80px 54px;
    gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-decoration: none;
    color: var(--text-primary);
    align-items: center;
    transition: background 0.15s;
    font-size: 0.84rem;
}
.bond-ov-row:hover { background: rgba(255,183,77,0.05); }
.bond-ov-row:last-child { border-bottom: none; }

.bond-ov-secid {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary-teal);
    font-family: var(--font-primary);
}
.bond-ov-name {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bond-ov-mat  { color: var(--text-muted);    font-size: 0.8rem; text-align: center; }
.bond-ov-cpn  { color: var(--text-secondary); font-size: 0.82rem; text-align: right; }
.bond-ov-yld  { font-weight: 700; font-size: 0.88rem; color: #ffa726; text-align: right; }
.bond-ov-yld-th { text-align: right; }
.bond-ov-chg  { text-align: right; font-size: 0.8rem; }

/* ===== MARKET DATA — FUTURES OVERVIEW ===== */
.fut-ov-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 16px;
}

.fut-ov-head {
    display: grid;
    grid-template-columns: 90px 1fr 110px 110px 80px 110px;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fut-ov-row {
    display: grid;
    grid-template-columns: 90px 1fr 110px 110px 80px 110px;
    gap: 8px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-decoration: none;
    color: var(--text-primary);
    align-items: center;
    transition: background 0.15s;
    font-size: 0.87rem;
}
.fut-ov-row:hover { background: rgba(64,224,208,0.04); }
.fut-ov-row:last-child { border-bottom: none; }

.fut-ov-ticker {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary-teal);
    font-family: var(--font-primary);
}
.fut-ov-base    { color: var(--text-secondary); font-size: 0.82rem; }
.fut-ov-close   { text-align: right; }
.fut-ov-settle  { text-align: right; color: var(--text-secondary); }
.fut-ov-chg     { text-align: right; font-weight: 600; }
.fut-ov-oi      { text-align: right; font-weight: 700; color: #42a5f5; }

@media (max-width: 780px) {
    .fut-ov-head, .fut-ov-row { grid-template-columns: 80px 1fr 90px 70px 90px; }
    .fut-ov-settle { display: none; }
    .fut-ov-head span:nth-child(4) { display: none; }
}
@media (max-width: 560px) {
    .fut-ov-head, .fut-ov-row { grid-template-columns: 80px 1fr 70px 70px; }
    .fut-ov-base { display: none; }
    .fut-ov-head span:nth-child(2) { display: none; }
}

/* ===== MARKET DATA — BTC/ETH CARDS ===== */
.btc-eth-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 680px;
}
@media (max-width: 600px) { .btc-eth-grid { grid-template-columns: 1fr !important; } }

.btc-eth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px 22px;
    text-decoration: none;
    display: block;
    transition: border-color 0.2s, transform 0.2s;
}
.btc-eth-card:hover {
    border-color: var(--ind-accent, var(--accent-primary));
    transform: translateY(-2px);
}

.btc-eth-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.btc-eth-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.btc-eth-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.btc-eth-sym {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.btc-eth-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-primary);
    margin-bottom: 16px;
}

.btc-eth-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btc-eth-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.btc-eth-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btc-eth-stat-val {
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.btc-eth-stat .ind-change {
    font-size: 0.9rem;
}

/* ===== MARKET DATA — MACRO BLOCK ===== */
.macro-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 16px;
}
@media (max-width: 900px) { .macro-cards-grid { grid-template-columns: 1fr; } }

.macro-big-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.macro-big-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mbc, var(--primary-teal));
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-color);
}

.macro-big-card-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-primary);
    padding: 20px 18px 4px;
}

.macro-big-card-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 4px;
}

.macro-rate-list {
    flex: 1;
    padding: 6px 0 4px;
    max-height: 230px;
    overflow-y: auto;
}

.macro-rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 0.84rem;
    gap: 8px;
}
.macro-rate-row:last-child { border-bottom: none; }

.macro-rate-current {
    background: rgba(64,224,208,0.06);
}
.macro-rate-current .macro-rate-val { color: var(--primary-teal); }

.macro-rate-date { color: var(--text-muted); flex: 1; }
.macro-rate-val  { font-weight: 700; color: var(--text-primary); }

.macro-card-delta {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 52px;
    text-align: right;
}

.macro-brent-change {
    padding: 10px 18px;
    font-size: 0.9rem;
}

.macro-big-card-link {
    margin: auto 18px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.macro-big-card-link:hover { color: var(--accent-primary); }

/* ===== PERSONAL — TOKEN PACKAGES ===== */
.token-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 6px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.token-balance-label {
    color: var(--text-secondary);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.token-balance-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-teal);
    font-family: var(--font-primary);
}

.token-balance-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.token-packages-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.token-packages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.token-package {
    background: rgba(64,224,208,0.06);
    border: 1px solid rgba(64,224,208,0.2);
    border-radius: 10px;
    padding: 14px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    color: var(--text-primary);
}

.token-package:hover {
    background: rgba(64,224,208,0.12);
    border-color: var(--primary-teal);
    transform: translateY(-2px);
}

.token-package.featured {
    background: rgba(124,77,255,0.12);
    border-color: var(--primary-purple);
}

.token-package.featured:hover {
    background: rgba(124,77,255,0.2);
}

.pkg-tokens {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-teal);
    font-family: var(--font-primary);
}

.token-package.featured .pkg-tokens { color: #b39ddb; }

.pkg-tokens small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
}

.pkg-price {
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ===== AUTH FLASH PREVENTION =====
   Inline head script sets .fc-authed on <html> before render.
   CSS handles visibility instantly — zero flash. */
#loginBtn, #registerBtn { display: none; }
#personalBtn            { display: none; }

html.fc-authed  #loginBtn,
html.fc-authed  #registerBtn { display: none  !important; }
html.fc-authed  #personalBtn { display: inline-flex !important; margin-left: 24px; }

html:not(.fc-authed) #loginBtn,
html:not(.fc-authed) #registerBtn { display: inline-flex !important; }
html:not(.fc-authed) #personalBtn { display: none  !important; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    /* Hero section */
    .hero-section { padding-top: 90px; padding-bottom: 40px; }
    .hero-title { font-size: 1.7rem; line-height: 1.25; }
    .search-input-wrapper { padding: 0 12px; }
    .search-input { font-size: 0.9rem; }

    /* Features */
    .features-section { padding: 40px 0; }
    .features-grid { grid-template-columns: 1fr; gap: 16px; }
    .feature-card { padding: 20px; }
    .feature-card h3 { font-size: 1.1rem; }
    .feature-icon { width: 56px; height: 56px; font-size: 1.4rem; }

    /* AI CTA */
    .ai-cta-block { padding: 24px; gap: 20px; }
    .ai-cta-features { grid-template-columns: 1fr; }

    /* Chatbot */
    .chatbot-section { padding: 40px 0; }
    .chatbot-info-wide { padding: 24px; }
    .chatbot-ability { align-items: flex-start; }

    /* Market tabs */
    .market-tabs { flex-wrap: wrap; gap: 8px; }
    .market-tab { padding: 10px 16px; font-size: 0.85rem; }
    .news-toolbar { grid-template-columns: 1fr; }
    .news-action-btn,
    .news-select { width: 100%; }
    .news-card { min-height: auto; }

    /* Articles */
    .articles-grid { grid-template-columns: 1fr; }
    .article-card-img { height: 160px; }

    /* Personal dashboard */
    .dashboard-grid { grid-template-columns: 1fr; }
    .profile-header { flex-direction: column; text-align: center; gap: 16px; }
    .quick-actions { grid-template-columns: 1fr 1fr; }
    .token-packages { grid-template-columns: 1fr; }

    /* Stock / crypto detail */
    .detail-metrics { grid-template-columns: repeat(2, 1fr); }
    .detail-coin-name { font-size: 1.4rem; }

    /* Footer */
    .footer-content { grid-template-columns: 1fr 1fr; gap: 24px; }
    .main-footer { padding: 40px 0 20px; }

    /* Section titles */
    .section-title { font-size: 1.6rem; }

    /* Macro page */
    .macro-grid { grid-template-columns: 1fr; }

    /* Auth buttons — icon-only */
    .btn-auth-text { padding: 8px 10px; min-width: unset; }

    /* Chart toolbar — wrap timeframe buttons */
    .chart-toolbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
    .chart-toolbar-label { width: 100%; margin-right: 0; margin-bottom: 2px; }
    .tf-btn { padding: 5px 10px; font-size: 0.78rem; }
    .chart-settings-panel {
        top: 84px;
        right: 8px;
        width: calc(100% - 16px);
        max-height: calc(100vh - 128px);
    }
    .chart-settings-group,
    .chart-level-panel .chart-settings-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* Footer single column */
    .footer-content { grid-template-columns: 1fr; }

    /* Hero */
    .hero-title { font-size: 1.4rem; }
    .hero-section { padding-top: 80px; }

    /* Personal */
    .quick-actions { grid-template-columns: 1fr; }

    /* Tables — hide low-priority columns */
    .col-volume { display: none; }
    .col-sector { display: none; }
    .futures-table .col-name   { display: none; }
    .futures-table .col-margin { display: none; }
    .futures-table .col-lot    { display: none; }

    /* Sections */
    .section-title { font-size: 1.4rem; }
}

/* Hero subtitle line */
.hero-subtitle-line {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .hero-subtitle-line { font-size: 1rem; }
}

/* ===== CHATBOT SUBLIST ===== */
.chatbot-sublist {
    list-style: disc;
    padding-left: 20px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* ===== ВИДЖЕТ ПОДДЕРЖКИ ===== */
#supportWidget {
    position: fixed;
    right: 24px;
    bottom: 80px;
    z-index: 2000;
}

#supportToggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary-gradient);
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(64, 224, 208, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#supportToggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(64, 224, 208, 0.5);
}

body.support-widget-docked #supportWidget {
    right: 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

body.support-widget-docked #supportToggle {
    width: 46px;
    height: 46px;
    border-radius: 14px 0 0 14px;
    opacity: 0.55;
    transform: translateX(36px);
    box-shadow: 0 4px 18px rgba(64, 224, 208, 0.28);
}

body.support-widget-docked #supportWidget:hover #supportToggle,
body.support-widget-docked #supportWidget.support-open #supportToggle,
body.support-widget-docked #supportToggle:focus-visible {
    opacity: 1;
    transform: translateX(0);
    box-shadow: 0 6px 24px rgba(64, 224, 208, 0.45);
}

body.support-widget-docked #supportWidget.support-open {
    right: 18px;
}

body.support-widget-docked #supportWidget.support-open #supportToggle {
    border-radius: 50%;
}

.support-panel-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
}

.support-panel-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.support-panel-hidden,
.support-panel-visible {
    position: absolute;
    bottom: 64px;
    right: 0;
    width: 340px;
    background: rgba(15, 20, 35, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}

.support-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(64, 224, 208, 0.08);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.support-panel-header button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    transition: color 0.2s;
}

.support-panel-header button:hover { color: var(--text-primary); }

.support-panel-body {
    padding: 20px;
}

.support-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.support-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.support-chip {
    background: rgba(64, 224, 208, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--primary-teal);
    font-size: 0.8rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.support-chip:hover {
    background: rgba(64, 224, 208, 0.18);
}

#supportForm input,
#supportForm textarea {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 10px;
    resize: vertical;
    font-family: var(--font-secondary);
}

#supportForm input:focus,
#supportForm textarea:focus {
    outline: none;
    border-color: var(--primary-teal);
}

#supportSuccess {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 20px 0;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    #supportWidget {
        right: 14px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    body.support-widget-docked #supportWidget {
        right: 0;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    body.support-widget-docked #supportToggle {
        width: 44px;
        height: 44px;
        transform: translateX(34px);
    }

    body.support-widget-docked #supportWidget.support-open {
        right: 12px;
    }

    .support-panel-hidden,
    .support-panel-visible {
        width: calc(100vw - 48px);
        right: 0;
    }
}

/* ===== ПОИСК — DROPDOWN ===== */
.search-placeholder {
    position: relative;
}

.search-spinner {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(15, 20, 35, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    max-height: 380px;
    overflow-y: auto;
    z-index: 500;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 224, 208, 0.3) transparent;
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.search-no-results i { margin-right: 8px; opacity: 0.5; }

/* Group header */
.search-group-hdr {
    padding: 8px 16px 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    gap: 6px;
}
.search-group-hdr:not(:first-child) {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 2px;
}

.search-result-item {
    display: grid;
    grid-template-columns: 28px 72px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover,
.search-result-item.active { background: rgba(64, 224, 208, 0.07); }

.sri-icon {
    text-align: center;
    font-size: 0.9rem;
}

.sri-ticker {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    font-family: var(--font-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sri-name {
    font-size: 0.82rem;
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.sri-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    justify-content: flex-end;
}

.sri-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    font-family: var(--font-primary);
}

.sri-chg {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}
.sri-chg-pos { color: #66bb6a; }
.sri-chg-neg { color: #ef5350; }

.sri-extra {
    font-size: 0.75rem;
    color: #ffa726;
    white-space: nowrap;
    background: rgba(255,167,38,0.1);
    padding: 1px 6px;
    border-radius: 10px;
}

.sri-isin {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: monospace;
    grid-column: 3;
    margin-top: -4px;
    display: none; /* shown only when no name */
}

@media (max-width: 600px) {
    .search-result-item { grid-template-columns: 24px 60px 1fr auto; gap: 5px; padding: 9px 12px; }
    .sri-extra { display: none; }
}

@media (max-width: 420px) {
    .sri-name { display: none; }
    .search-result-item { grid-template-columns: 24px 60px auto; }
}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ (personal.html)
   ============================================================ */

.pc-wrap {
    display: flex;
    min-height: calc(100vh - 72px);
    max-width: 1300px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    gap: 24px;
    align-items: flex-start;
}

/* ── Левый сайдбар ── */
.pc-sidebar {
    width: 230px;
    flex-shrink: 0;
    position: sticky;
    top: 88px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 10px;
}

.pc-nav-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 10px 4px;
}

.pc-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    color: var(--text-secondary);
    user-select: none;
}

.pc-nav-item:hover {
    background: rgba(64, 224, 208, 0.08);
    color: var(--text-primary);
}

.pc-nav-item.active {
    background: rgba(64, 224, 208, 0.12);
    color: var(--primary-teal);
    font-weight: 600;
}

.pc-nav-icon {
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    font-size: 13px;
}

.pc-badge {
    margin-left: auto;
    background: var(--primary-purple);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pc-badge-cyan {
    background: var(--primary-teal);
    color: #0a0e17;
}

/* ── Основной контент ── */
.pc-content {
    flex: 1;
    min-width: 0;
}

.pc-section {
    display: none;
}

.pc-section.active {
    display: block;
}

.pc-page-title {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.pc-page-sub {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

/* ── Карточка ── */
.pc-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
}

.pc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.pc-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary-teal);
    flex-shrink: 0;
}

.pc-card-title {
    font-size: 16px;
    font-weight: 600;
}

.pc-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pc-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

/* ── Профиль ── */
.pc-profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pc-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pc-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(64,224,208,.2), rgba(124,77,255,.2));
    border: 2px solid rgba(64,224,208,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    overflow: hidden;
}

.pc-online-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #4caf50;
    border: 2px solid var(--bg-card);
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.pc-profile-info {
    flex: 1;
    min-width: 0;
}

.pc-profile-info h2 {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.pc-profile-email {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 4px;
}

.pc-role-pill {
    background: rgba(64,224,208,.12);
    color: var(--primary-teal);
    border: 1px solid rgba(64,224,208,.25);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pc-since {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 6px;
    display: block;
}

.pc-profile-stats {
    display: flex;
    gap: 24px;
    margin-left: auto;
}

.pc-pstat {
    text-align: center;
}

.pc-pstat-val {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-teal), var(--primary-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pc-pstat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.pc-btn-edit {
    background: rgba(64,224,208,.1);
    border: 1px solid rgba(64,224,208,.25);
    color: var(--primary-teal);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
}

.pc-btn-edit:hover {
    background: rgba(64,224,208,.2);
}

/* ── AI Токены ── */
.pc-token-big-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0;
}

.pc-token-big {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-teal), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.pc-token-unit {
    color: var(--text-muted);
    font-size: 14px;
}

.pc-token-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pc-packages-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.pc-packages {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pc-pkg {
    flex: 1;
    min-width: 80px;
    background: rgba(64,224,208,.06);
    border: 1px solid rgba(64,224,208,.2);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.pc-pkg:hover {
    background: rgba(64,224,208,.12);
    border-color: rgba(64,224,208,.5);
}

.pc-pkg.featured {
    background: rgba(64,224,208,.12);
    border-color: var(--primary-teal);
}

.pc-pkg-tokens {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-teal);
    display: block;
}

.pc-pkg-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.pc-pkg-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Level ── */
.pc-level-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.pc-level-name {
    font-size: 18px;
    font-weight: 700;
}

.pc-level-next {
    font-size: 12px;
    color: var(--text-muted);
}

.pc-progress-track {
    height: 8px;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.pc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-teal), var(--primary-purple));
    border-radius: 8px;
    transition: width .6s ease;
}

.pc-progress-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.pc-level-perk {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* ── Статистика / Chart ── */
.pc-chart-wrap {
    height: 140px;
    display: flex;
    align-items: flex-end;
}

.pc-chart-bars {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.pc-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.pc-bar-val {
    font-size: 10px;
    color: var(--text-muted);
}

.pc-bar {
    width: 100%;
    background: linear-gradient(to top, var(--primary-teal), rgba(64,224,208,.3));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height .4s ease;
}

.pc-bar-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.pc-chart-stats {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ── Транзакции ── */
.pc-tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

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

.pc-tx-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.pc-tx-body {
    flex: 1;
}

.pc-tx-label {
    font-size: 13px;
    font-weight: 500;
}

.pc-tx-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.pc-tx-date {
    font-size: 11px;
    color: var(--text-muted);
}

.pc-tx-amount {
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Достижения ── */
.pc-ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.pc-ach-item {
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    border: 1px solid var(--border-color);
    position: relative;
    transition: transform .2s;
}

.pc-ach-item.unlocked {
    background: rgba(64,224,208,.06);
    border-color: rgba(64,224,208,.25);
}

.pc-ach-item.locked {
    opacity: 0.45;
    filter: grayscale(70%);
}

.pc-ach-item:hover {
    transform: translateY(-2px);
}

.pc-ach-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.pc-ach-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.pc-ach-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.pc-ach-done {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--primary-teal);
    font-size: 14px;
}

/* ── Рефералы ── */
.pc-ref-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.6;
}

.pc-ref-link-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pc-ref-link {
    flex: 1;
    background: rgba(10,14,23,.8);
    border: 1px solid rgba(64,224,208,.2);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: monospace;
    color: var(--primary-teal);
    word-break: break-all;
}

.pc-btn-copy {
    background: rgba(64,224,208,.12);
    border: 1px solid rgba(64,224,208,.3);
    color: var(--primary-teal);
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background .2s;
    white-space: nowrap;
}

.pc-btn-copy:hover {
    background: rgba(64,224,208,.22);
}

.pc-ref-stats {
    display: flex;
    gap: 24px;
}

.pc-ref-stat {
    text-align: center;
}

.pc-ref-val {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-teal), var(--primary-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pc-ref-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Избранное ── */
.pc-fav-search-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
}

.pc-fav-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: rgba(10,14,23,.8);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}

.pc-fav-input:focus {
    border-color: rgba(64,224,208,.5);
}

.pc-fav-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1a2035;
    border: 1px solid rgba(64,224,208,.2);
    border-radius: 12px;
    z-index: 200;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

.pc-fav-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.pc-fav-drop-item:last-child { border-bottom: none; }
.pc-fav-drop-item:hover { background: rgba(64,224,208,.08); }

.pc-fav-drop-ticker {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-teal);
    min-width: 60px;
}

.pc-fav-drop-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-fav-drop-type {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.pc-fav-drop-empty {
    padding: 16px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.pc-fav-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pc-fav-filter {
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.pc-fav-filter.active,
.pc-fav-filter:hover {
    background: rgba(64,224,208,.1);
    border-color: rgba(64,224,208,.4);
    color: var(--primary-teal);
}

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

.pc-fav-card {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    transition: border-color .2s, transform .2s;
}

.pc-fav-card:hover {
    border-color: rgba(64,224,208,.3);
    transform: translateY(-2px);
}

.pc-fav-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pc-fav-ticker {
    font-size: 16px;
    font-weight: 700;
}

.pc-fav-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.pc-fav-remove:hover {
    color: #ef5350;
    background: rgba(239,83,80,.1);
}

.pc-fav-name {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-fav-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid currentColor;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pc-fav-link {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--primary-teal);
    text-decoration: none;
    padding: 5px;
    border-radius: 6px;
    background: rgba(64,224,208,.06);
    transition: background .15s;
}

.pc-fav-link:hover {
    background: rgba(64,224,208,.14);
}

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

.pc-fav-ai-btn {
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(64,224,208,.1), rgba(124,77,255,.1));
    border: 1px solid rgba(64,224,208,.25);
    color: var(--primary-teal);
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s;
}

.pc-fav-ai-btn:hover {
    background: linear-gradient(135deg, rgba(64,224,208,.18), rgba(124,77,255,.18));
}

/* ── История запросов ── */
.pc-hist-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pc-hist-filter {
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.pc-hist-filter.active,
.pc-hist-filter:hover {
    background: rgba(64,224,208,.1);
    border-color: rgba(64,224,208,.4);
    color: var(--primary-teal);
}

.pc-hist-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pc-hist-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    border: 1px solid transparent;
}

.pc-hist-item:hover {
    background: rgba(64,224,208,.05);
    border-color: rgba(64,224,208,.12);
}

.pc-hist-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(64,224,208,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-teal);
    font-size: 14px;
    flex-shrink: 0;
}

.pc-hist-body {
    flex: 1;
    min-width: 0;
}

.pc-hist-title {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-hist-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
}

.pc-hist-type {
    font-size: 11px;
    font-weight: 600;
}

.pc-hist-date {
    font-size: 11px;
    color: var(--text-muted);
}

.pc-hist-arrow {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Мои файлы ── */
.pc-files-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.pc-file-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.pc-file-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.pc-file-body {
    flex: 1;
    min-width: 0;
}

.pc-file-title {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-file-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.pc-file-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pc-btn-dl,
.pc-btn-rm {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s;
}

.pc-btn-dl:hover {
    background: rgba(64,224,208,.12);
    color: var(--primary-teal);
}

.pc-btn-rm:hover {
    background: rgba(239,83,80,.12);
    color: #ef5350;
}

.pc-file-storage {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(255,255,255,.03);
    border-radius: 10px;
}

.pc-file-storage-track {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    overflow: hidden;
    flex: 1;
}

.pc-file-storage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-teal), var(--primary-purple));
    border-radius: 6px;
    transition: width .4s;
}

/* ── Spinner ── */
.pc-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
    color: var(--text-muted);
    font-size: 1.4rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .pc-wrap {
        flex-direction: column;
        gap: 16px;
    }

    .pc-sidebar {
        width: 100%;
        position: static;
        display: flex;
        flex-wrap: wrap;
        padding: 10px 8px;
        gap: 4px;
    }

    .pc-nav-label {
        display: none;
    }

    .pc-nav-item {
        font-size: 12px;
        padding: 8px 10px;
    }

    .pc-grid2 {
        grid-template-columns: 1fr;
    }

    .pc-profile-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .pc-profile-stats {
        margin-left: 0;
        width: 100%;
        justify-content: space-around;
    }
}

/* ── Export Block (stock-detail) ── */
.export-block {
    background: var(--card-bg, rgba(255,255,255,0.04));
    border: 1px solid rgba(64,224,208,0.15);
    border-radius: 16px;
    padding: 24px 28px;
    margin-top: 24px;
}

.export-block-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-block-title i { color: #40e0d0; }

.export-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.export-label {
    font-size: 0.85rem;
    color: var(--text-muted, #9e9e9e);
    min-width: 70px;
    font-weight: 500;
}

.export-period {
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-date-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(64,224,208,0.2);
    border-radius: 8px;
    color: var(--text-primary, #e0e0e0);
    padding: 7px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    color-scheme: dark;
}

.export-date-input:focus {
    border-color: rgba(64,224,208,0.5);
}

.export-dash {
    color: var(--text-muted, #9e9e9e);
}

.export-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.export-preset-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: var(--text-secondary, #b0bec5);
    padding: 5px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.export-preset-btn:hover,
.export-preset-btn.active {
    background: rgba(64,224,208,0.15);
    border-color: rgba(64,224,208,0.4);
    color: #40e0d0;
}

.export-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.export-col-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: var(--text-muted, #9e9e9e);
    padding: 6px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.export-col-btn.active {
    background: rgba(64,224,208,0.12);
    border-color: rgba(64,224,208,0.35);
    color: #40e0d0;
}

.export-col-btn[disabled] {
    opacity: 0.7;
    cursor: default;
}

.export-col-btn:not([disabled]):hover {
    border-color: rgba(64,224,208,0.3);
    color: var(--text-primary, #e0e0e0);
}

.export-bottom-row {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.export-format {
    display: flex;
    align-items: center;
    gap: 16px;
}

.export-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #b0bec5);
    font-size: 0.9rem;
    cursor: pointer;
}

.export-radio-label input[type="radio"] {
    accent-color: #40e0d0;
    cursor: pointer;
}

.export-download-btn {
    background: linear-gradient(135deg, #40e0d0, #7c4dff);
    border: none;
    border-radius: 10px;
    color: #fff;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.15s;
    font-family: inherit;
}

.export-download-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.export-download-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.export-status {
    font-size: 0.85rem;
    margin-top: 10px;
    min-height: 20px;
}

@media (max-width: 600px) {
    .export-block { padding: 18px 16px; }
    .export-bottom-row { flex-direction: column; align-items: flex-start; gap: 14px; }
    .export-download-btn { width: 100%; justify-content: center; }
}

/* ── cbonds blocks (dividends, emitter info, market metrics) ── */
/* Weight bar for index composition */
.weight-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.weight-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #40e0d0);
    border-radius: 3px;
    transition: width 0.4s;
    min-width: 2px;
}

.cbonds-block {
    background: var(--card-bg, rgba(255,255,255,0.04));
    border: 1px solid rgba(64,224,208,0.15);
    border-radius: 16px;
    padding: 24px 28px;
    margin-top: 24px;
}

.cbonds-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.cbonds-block-title {
    font-size: 1rem;
    font-weight: 600;
    color: #40e0d0;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbonds-block-header .cbonds-block-title {
    margin-bottom: 0;
}

.cbonds-export-btns {
    display: flex;
    gap: 8px;
}

.cbonds-export-btn {
    background: rgba(64,224,208,0.1);
    border: 1px solid rgba(64,224,208,0.3);
    border-radius: 8px;
    color: #40e0d0;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, transform 0.15s;
    font-family: inherit;
}

.cbonds-export-btn:hover {
    background: rgba(64,224,208,0.2);
    transform: translateY(-1px);
}

.cbonds-table-wrap {
    overflow-x: auto;
}

.cbonds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}

.cbonds-table thead th {
    background: rgba(64,224,208,0.08);
    color: #b0bec5;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(64,224,208,0.15);
    white-space: nowrap;
}

.cbonds-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}

.cbonds-table tbody tr:hover {
    background: rgba(64,224,208,0.04);
}

.cbonds-table tbody td {
    padding: 9px 12px;
    color: var(--text-secondary, #b0bec5);
    white-space: nowrap;
}

.cbonds-table tbody td:first-child {
    color: var(--text-primary, #e0e0e0);
    font-weight: 500;
}

/* Futures spec table */
.futures-spec-table { table-layout: fixed; }
.futures-spec-table .fspec-label {
    width: 38%;
    color: var(--text-secondary, #b0bec5);
    font-size: 0.85rem;
    padding: 9px 16px;
    white-space: nowrap;
}
.futures-spec-table .fspec-value {
    width: 62%;
    color: var(--text-primary, #e0e0e0);
    font-size: 0.88rem;
    padding: 9px 16px;
}
.futures-spec-table tr.fspec-section-hdr td {
    background: rgba(64,224,208,0.07);
    color: rgba(64,224,208,0.8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-bottom: 1px solid rgba(64,224,208,0.12);
}
.futures-spec-table tr.fspec-section-hdr:hover { background: rgba(64,224,208,0.07) !important; }
@media (max-width: 600px) {
    .futures-spec-table .fspec-label { width: 45%; padding: 8px 10px; font-size: 0.8rem; }
    .futures-spec-table .fspec-value { width: 55%; padding: 8px 10px; font-size: 0.82rem; }
}

.cbonds-empty {
    color: var(--text-muted, #78909c);
    font-size: 0.9rem;
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbonds-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0;
}

.cbonds-info-row {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.05);
}

.cbonds-info-label {
    font-size: 0.75rem;
    color: var(--text-muted, #78909c);
    font-weight: 500;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cbonds-info-value {
    font-size: 0.92rem;
    color: var(--text-primary, #e0e0e0);
    font-weight: 500;
    word-break: break-word;
}

.cbonds-info-value a {
    color: #40e0d0;
    text-decoration: none;
}

.cbonds-info-value a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .cbonds-block { padding: 18px 16px; }
    .cbonds-info-grid { grid-template-columns: 1fr; }
}