/* ========================================
   NOVA SAPIENS - UNIFIED RESEARCH PLATFORM CSS
   For: Listing, Detail, Favorites, Profile pages
   ======================================== */

/* ===== LIGHT THEME (default) ===== */
:root[data-theme="light"] {
    /* Sidebar - приглушённый серый */
    --sidebar-bg: #f4f4f5;
    --sidebar-subtle: #ebebed;
    --sidebar-border: #e4e4e7;
    --sidebar-text: #3f3f46;
    --sidebar-text-secondary: #52525b;
    --sidebar-text-muted: #a1a1aa;

    /* Content - чистый белый для фокуса */
    --content-bg: #ffffff;
    --content-subtle: #fafafa;
    --content-muted: #f4f4f5;
    --content-border: #e4e4e7;
    --content-border-strong: #d4d4d8;
    --content-text: #18181b;
    --content-text-secondary: #3f3f46;
    --content-text-tertiary: #71717a;
    --content-text-muted: #a1a1aa;

    /* Header - темный престижный градиент */
    --header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --header-border: #1e293b;
    --header-text: #f8fafc;
    --header-text-secondary: #cbd5e1;
    --header-text-muted: #94a3b8;

    /* Functional colors */
    --color-success: #059669;
    --color-success-bg: #ecfdf5;
    --color-success-text: #047857;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;
    --color-info: #2563eb;
    --color-info-bg: #eff6ff;
    --color-info-muted: rgba(37, 99, 235, 0.1);

    /* Accent */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;

    /* Code blocks */
    --code-bg: #1e293b;
    --code-text: #e2e8f0;
}

/* ===== DARK THEME ===== */
:root[data-theme="dark"] {
    /* Neutral dark palette - смягчённые для чтения */
    --sidebar-bg: #111113;
    --sidebar-subtle: #16161a;
    --sidebar-border: #27272a;
    --sidebar-text: #ececef;
    --sidebar-text-secondary: #b4b4bb;
    --sidebar-text-muted: #5c5c66;

    /* Content */
    --content-bg: #19191d;
    --content-subtle: #1c1c21;
    --content-muted: #252529;
    --content-border: #27272a;
    --content-border-strong: #3f3f46;
    --content-text: #ececef;
    --content-text-secondary: #b4b4bb;
    --content-text-tertiary: #85858f;
    --content-text-muted: #5c5c66;

    /* Header - темный с легким градиентом */
    --header-bg: linear-gradient(135deg, #0a0a0b 0%, #16161a 100%);
    --header-border: #27272a;
    --header-text: #ececef;
    --header-text-secondary: #b4b4bb;
    --header-text-muted: #85858f;

    /* Functional colors */
    --color-success: #34d399;
    --color-success-bg: rgba(52, 211, 153, 0.12);
    --color-success-text: #34d399;
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.12);
    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.12);
    --color-info: #60a5fa;
    --color-info-bg: rgba(96, 165, 250, 0.1);
    --color-info-muted: rgba(96, 165, 250, 0.1);

    /* Accent */
    --accent: #60a5fa;
    --accent-hover: #93c5fd;

    /* Code blocks */
    --code-bg: #0a0a0b;
    --code-text: #e2e8f0;
}

/* Default to light theme */
:root {
    --sidebar-bg: #f4f4f5;
    --sidebar-subtle: #ebebed;
    --sidebar-border: #e4e4e7;
    --sidebar-text: #3f3f46;
    --sidebar-text-secondary: #52525b;
    --sidebar-text-muted: #a1a1aa;
    --content-bg: #ffffff;
    --content-subtle: #fafafa;
    --content-muted: #f4f4f5;
    --content-border: #e4e4e7;
    --content-border-strong: #d4d4d8;
    --content-text: #18181b;
    --content-text-secondary: #3f3f46;
    --content-text-tertiary: #71717a;
    --content-text-muted: #a1a1aa;
    --header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --header-border: #1e293b;
    --header-text: #f8fafc;
    --header-text-secondary: #cbd5e1;
    --header-text-muted: #94a3b8;
    --color-success: #059669;
    --color-success-bg: #ecfdf5;
    --color-success-text: #047857;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;
    --color-info: #2563eb;
    --color-info-bg: #eff6ff;
    --color-info-muted: rgba(37, 99, 235, 0.1);
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --code-bg: #1e293b;
    --code-text: #e2e8f0;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: var(--sidebar-bg);
    color: var(--content-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== HEADER (SHARED) ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 2100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

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

.logo-text {
    font-weight: 600;
    font-size: 15px;
    color: var(--header-text);
}

.logo-divider {
    color: var(--header-text-muted);
}

.logo-section {
    color: var(--header-text-secondary);
    font-weight: 400;
}

.logo:hover,
.logo:visited,
.logo:active,
.logo:focus {
    text-decoration: none;
}

.header-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    color: var(--header-text-muted);
}

.stat-value {
    color: var(--header-text-secondary);
    margin-right: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--header-text);
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.user-name {
    font-size: 13px;
    color: var(--header-text-secondary);
    font-weight: 500;
}

/* Mobile burger menu */
.burger-menu {
    display: none;
    background: none;
    border: none;
    color: var(--header-text);
    cursor: pointer;
    padding: 4px;
    margin-right: 12px;
}

.burger-menu svg {
    width: 24px;
    height: 24px;
}

/* Desktop Navigation Icons */
.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}

.nav-icon-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--header-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.nav-icon-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.nav-icon-link svg {
    flex-shrink: 0;
}

/* User Profile Dropdown */
.user-profile-dropdown {
    position: relative;
}

.user-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    color: var(--header-text);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 13px;
    font-weight: 600;
}

.user-profile-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.menu-icon {
    display: none; /* Скрыта на десктопе */
    opacity: 0.7;
    flex-shrink: 0;
}

.user-status-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.user-status-pro {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.user-status-free {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.dropdown-arrow {
    transition: transform 0.2s;
}

.user-profile-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 2200;
    display: none;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--content-text);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--content-subtle);
}

.dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

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

/* Theme Toggle in Dropdown */
.theme-toggle-item {
    justify-content: space-between;
}

.theme-toggle-item:hover {
    background: var(--content-subtle);
}

.toggle-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--content-border);
    border-radius: 24px;
    transition: all 0.3s;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 2300;
    transition: left 0.3s ease;
    overflow-y: auto;
}

.mobile-drawer.active {
    left: 0;
}

.mobile-drawer-content {
    padding: 20px 0;
}

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

.mobile-drawer-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--sidebar-text);
}

.mobile-drawer-close {
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 4px;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 15px;
    transition: background 0.15s;
}

.mobile-nav-item:hover {
    background: var(--sidebar-subtle);
}

.mobile-nav-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.mobile-nav-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 12px 20px;
}

.theme-toggle-mobile {
    justify-content: space-between;
}

/* Header Responsive */
@media (max-width: 1024px) {
    /* Hide text, show only icons */
    .nav-text {
        display: none;
    }

    .nav-icon-link {
        padding: 7px;
    }
}

@media (max-width: 960px) {
    /* Start hiding navigation icons on smaller screens */
    .header-nav {
        gap: 4px;
    }

    .nav-icon-link:nth-child(n+3) {
        display: none; /* Hide 3rd icon and beyond */
    }
}

@media (max-width: 860px) {
    .nav-icon-link:nth-child(n+2) {
        display: none; /* Hide 2nd icon and beyond */
    }
}

/* ===== HIGHLIGHT STYLES (SHARED) ===== */
.highlight-yellow {
    background: linear-gradient(120deg, #c7fef303 0%, #b0d8f159 100%);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    color: #3f4a48;
}

:root[data-theme="dark"] .highlight-yellow {
    background: linear-gradient(120deg, rgba(199, 254, 243, 0.08) 0%, rgba(176, 216, 241, 0.15) 100%);
    color: #b4d5d0;
}

/* ===== BUTTONS (SHARED) ===== */
.btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

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

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

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

.btn-secondary:hover {
    background: var(--content-muted);
}

/* ===== RATING/SCORE COLOR GRADIENTS (SHARED) ===== */

/* 95-100: score-supertop - Dark Green */
.score-supertop {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(6, 95, 70, 0.3);
}

/* 90-94: score-excellent - Green */
.score-excellent {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(4, 120, 87, 0.3);
}

/* 85-89: score-great - Teal Green */
.score-great {
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

/* 80-84: score-good - Teal */
.score-good {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

/* 75-79: score-above - Cyan */
.score-above {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
}

/* 70-74: score-mid - Orange */
.score-mid {
    background: linear-gradient(135deg, #de8e1b 0%, #f59e0b 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(222, 142, 27, 0.3);
}

/* <70: score-below - Gray */
.score-below {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.3);
}

/* Dark theme variations - enhanced shadows */
:root[data-theme="dark"] .score-supertop {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    box-shadow: 0 2px 12px rgba(6, 95, 70, 0.5);
}

:root[data-theme="dark"] .score-excellent {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 2px 12px rgba(4, 120, 87, 0.5);
}

:root[data-theme="dark"] .score-great {
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    box-shadow: 0 2px 12px rgba(5, 150, 105, 0.5);
}

:root[data-theme="dark"] .score-good {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    box-shadow: 0 2px 12px rgba(13, 148, 136, 0.5);
}

:root[data-theme="dark"] .score-above {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    box-shadow: 0 2px 12px rgba(8, 145, 178, 0.5);
}

:root[data-theme="dark"] .score-mid {
    background: linear-gradient(135deg, #de8e1b 0%, #f59e0b 100%);
    box-shadow: 0 2px 12px rgba(222, 142, 27, 0.5);
}

:root[data-theme="dark"] .score-below {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    color: #1e293b;
    box-shadow: 0 2px 12px rgba(148, 163, 184, 0.5);
}

/* ===== RESPONSIVE (SHARED) ===== */
@media (max-width: 768px) {
    .burger-menu {
        display: block;
    }

    .header-nav {
        display: none; /* Hide all navigation on mobile */
    }

    .menu-icon {
        display: block; /* Показать иконку меню на мобильных */
    }

    .header-stats {
        font-size: 11px;
        gap: 12px;
    }

    .header-stats span:last-child {
        display: none;
    }

    .logo-text {
        font-size: 14px;
    }

    .logo-section {
        display: none;
    }

.logo:hover,
.logo:visited,
.logo:active,
.logo:focus {
    text-decoration: none;
}

    .user-name {
        display: none;
    }

    .user-status-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    .dropdown-arrow {
        display: none;
    }

    .header-left {
        gap: 12px;
    }
}

/* ===== PROFILE PAGE SPECIFIC STYLES ===== */

.profile-page body {
    background: var(--sidebar-bg);
}

.profile-page .profile-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px 60px 40px;
}

.profile-page .profile-header-section {
    margin-bottom: 32px;
}

.profile-page .profile-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--content-text-tertiary);
    margin-bottom: 12px;
}

.profile-page .profile-breadcrumb a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.profile-page .profile-breadcrumb a:hover {
    color: var(--accent-hover);
}

.profile-page .profile-breadcrumb svg {
    width: 14px;
    height: 14px;
}

.profile-page .profile-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--content-text);
}

/* Profile Top Section: Two Columns */
.profile-page .profile-top-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

/* Profile Cards */
.profile-page .profile-card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.profile-page .profile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--content-border);
}

.profile-page .profile-card-header svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.profile-page .profile-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--content-text);
}

/* User Avatar */
.profile-page .profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #667eea 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* User Info */
.profile-page .profile-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--content-border);
}

.profile-page .profile-info-item:last-child {
    border-bottom: none;
}

.profile-page .profile-info-label {
    font-size: 13px;
    color: var(--content-text-tertiary);
    font-weight: 500;
}

.profile-page .profile-info-value {
    font-size: 14px;
    color: var(--content-text);
    font-weight: 500;
}

.profile-page .profile-info-value.username {
    color: var(--accent);
}

.profile-page .profile-info-value.profile-balance-inline {
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent) 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-page .profile-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-page .profile-status-badge.pro {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.profile-page .profile-status-badge svg {
    width: 12px;
    height: 12px;
}

.profile-page .profile-logout-btn {
    width: 100%;
    margin-top: 20px;
    padding: 12px 20px;
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    color: var(--content-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile-page .profile-logout-btn:hover {
    background: var(--content-muted);
    border-color: var(--content-border-strong);
    color: var(--color-error);
}

.profile-page .profile-logout-btn svg {
    width: 18px;
    height: 18px;
}

/* Balance */
.profile-page .profile-balance-display {
    text-align: center;
    padding: 24px 0;
}

.profile-page .profile-balance-amount {
    font-size: 42px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent) 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.profile-page .profile-balance-label {
    font-size: 14px;
    color: var(--content-text-tertiary);
    font-weight: 500;
}

.profile-page .profile-balance-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.profile-page .profile-balance-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
}

.profile-page .profile-balance-btn-primary {
    background: var(--accent);
    color: white;
    border: none;
}

.profile-page .profile-balance-btn-primary:hover {
    background: var(--accent-hover);
}

.profile-page .profile-balance-btn-secondary {
    background: var(--content-subtle);
    color: var(--content-text);
    border: 1px solid var(--content-border);
}

.profile-page .profile-balance-btn-secondary:hover {
    background: var(--content-muted);
}

/* History Stats */
.profile-page .profile-history-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-page .profile-history-stat {
    text-align: center;
    padding: 16px;
    background: var(--content-subtle);
    border-radius: 8px;
}

.profile-page .profile-history-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
}

.profile-page .profile-history-stat-label {
    font-size: 12px;
    color: var(--content-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-page .profile-history-link {
    display: block;
    margin-top: 16px;
    padding: 10px;
    text-align: center;
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.profile-page .profile-history-link:hover {
    background: var(--content-muted);
    border-color: var(--accent);
}

/* PaperBot Promo Block */
.profile-page .paperbot-promo {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.profile-page .paperbot-promo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%);
}

.profile-page .paperbot-promo-content {
    flex: 1;
}

.profile-page .paperbot-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--content-text);
}

.profile-page .paperbot-title svg {
    width: 24px;
    height: 24px;
    color: #0088cc;
}

.profile-page .paperbot-description {
    font-size: 14px;
    color: var(--content-text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.profile-page .paperbot-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-page .paperbot-features li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--content-text-secondary);
}

.profile-page .paperbot-features svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}

.profile-page .paperbot-promo-cta {
    flex-shrink: 0;
}

.profile-page .paperbot-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.2);
}

.profile-page .paperbot-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.35);
}

.profile-page .paperbot-cta-btn svg {
    width: 18px;
    height: 18px;
}

/* Full-width Section */
.profile-page .profile-section-full {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

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

.profile-page .profile-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-page .profile-section-title svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.profile-page .profile-section-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--content-text);
    margin: 0;
}

.profile-page .profile-view-all {
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.profile-page .profile-view-all:hover {
    color: var(--accent-hover);
}

/* Grid for items */
.profile-page .profile-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Generation Card */
.profile-page .profile-generation-card {
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.profile-page .profile-generation-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.profile-page .profile-generation-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text);
    margin-bottom: 8px;
    display: -webkit-box;

    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.profile-page .profile-generation-request {
    font-size: 13px;
    color: var(--content-text-tertiary);
    margin-bottom: 12px;
    display: -webkit-box;

    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.profile-page .profile-generation-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.profile-page .profile-generation-cost {
    font-size: 12px;
    color: var(--content-text-secondary);
    font-weight: 500;
}

.profile-page .profile-generation-date {
    font-size: 12px;
    color: var(--content-text-tertiary);
}

.profile-page .profile-generation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--content-border);
}

.profile-page .profile-generation-query {
    font-size: 14px;
    color: var(--content-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.profile-page .profile-generation-query strong {
    color: var(--content-text-tertiary);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.profile-page .profile-generation-paper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--content-border);
}

.profile-page .profile-generation-paper svg {
    color: var(--content-text-tertiary);
    flex-shrink: 0;
}

.profile-page .profile-generation-paper a {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-page .profile-generation-paper a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Favorites Section */
.profile-page .profile-favorites-section {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

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

.profile-page .profile-favorites-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-page .profile-favorites-title svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.profile-page .profile-favorites-title h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--content-text);
    margin: 0;
}

.profile-page .profile-view-all-link {
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.profile-page .profile-view-all-link:hover {
    color: var(--accent-hover);
}

/* Use research-card styles from listing */
.profile-page .profile-favorites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.profile-page .profile-favorite-card {
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.profile-page .profile-favorite-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.profile-page .profile-favorite-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text);
    margin-bottom: 12px;
    display: -webkit-box;

    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.profile-page .profile-favorite-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.profile-page .profile-favorite-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.profile-page .profile-favorite-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.profile-page .profile-favorite-card-date {
    font-size: 12px;
    color: var(--content-text-tertiary);
}

/* Responsive */
@media (max-width: 1024px) {
    .profile-page .profile-top-two-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-page .profile-wrapper {
        padding: 80px 24px 60px 24px;
    }

    .profile-page .profile-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .profile-page .paperbot-promo {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-page .paperbot-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .profile-page .profile-top-two-col {
        grid-template-columns: 1fr;
    }

    .profile-page .profile-wrapper {
        padding: 80px 16px 40px 16px;
    }

    .profile-page .profile-title {
        font-size: 24px;
    }

    .profile-page .profile-items-grid {
        grid-template-columns: 1fr;
    }

    .profile-page .profile-history-stats {
        grid-template-columns: 1fr;
    }

    .profile-page .profile-balance-amount {
        font-size: 36px;
    }

    .profile-page .paperbot-promo {
        padding: 20px;
    }

    .profile-page .paperbot-title {
        font-size: 20px;
    }

    .profile-page .paperbot-description {
        font-size: 14px;
    }

    .profile-page .profile-section-full {
        padding: 24px 16px;
    }
}



/* ===== RESEARCH DETAIL PAGE SPECIFIC STYLES ===== */
/* Extracted from research_detail.html - 3-column layout with tabs */
/* ===== LAYOUT ===== */
        .detail-page .app {
            display: grid;
            grid-template-columns: 280px 1fr 400px;
            margin-top: 52px;
            min-height: calc(100vh - 52px);
            overflow-x: clip;
        }

        /* ===== LEFT SIDEBAR ===== */
        .detail-page .sidebar-left {
            background: var(--sidebar-bg);
            border-right: 1px solid var(--sidebar-border);
            height: calc(100vh - 52px);
            position: sticky;
            top: 52px;
            display: flex;
            flex-direction: column;
        }

        .detail-page .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px 12px;
        }

        .detail-page .sidebar-section {
            margin-bottom: 20px;
        }

        .detail-page .sidebar-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0 10px 10px;
        }

        .detail-page .article-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .detail-page .article-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.1s, opacity 0.2s;
            text-decoration: none;
        }

        .detail-page .article-item:hover {
            background: var(--sidebar-subtle);
        }

        .detail-page .article-item.active {
            background: var(--content-bg);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .detail-page .article-item.article-pro .article-title {
            opacity: 0.5;
        }

        .detail-page .article-item.article-pro:hover .article-title {
            opacity: 0.65;
        }

        .detail-page .article-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .detail-page .article-title {
            font-size: 13px;
            color: var(--sidebar-text);
            line-height: 1.4;
        }


        .detail-page .article-date {
            font-size: 10px;
            color: var(--sidebar-text-muted);
            font-weight: 400;
        }

        /* PRO articles structure */
        .detail-page .article-date-wrapper {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .detail-page .pro-icon-mini {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 8px;
            font-weight: 600;
            color: var(--sidebar-bg);
            background: var(--sidebar-text);
            letter-spacing: 0.2px;
            padding: 2px 4px;
            border-radius: 3px;
        }

        .detail-page .article-score {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            font-weight: 500;
            min-width: 30px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            flex-shrink: 0;
        }

        /* Score badges наследуют градиенты от универсальных .score-* классов */
        /* Делаем тень мягче для маленьких бейджей в списке */
        .detail-page .article-score[class*="score-"] {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
        }

        .detail-page .article-title {
            font-size: 13px;
            font-weight: 400;
            color: var(--sidebar-text-secondary);
            line-height: 1.45;
            display: -webkit-box;

            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .detail-page .article-item.active .article-title {
            color: var(--sidebar-text);
            font-weight: 500;
        }

        /* ===== EVALUATION BLOCK (Collapsible) ===== */
        .detail-page .evaluation-block {
            background: white;
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page :root[data-theme="dark"] .evaluation-block {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .evaluation-score-badge {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 32px;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }

        /* Score color ranges for evaluation badge (right sidebar) */
        /* evaluation-score-badge наследует градиенты от универсальных .score-* классов */
        /* Усиливаем тень для большого бейджа */
        .detail-page .evaluation-score-badge[class*="score-"] {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .detail-page .evaluation-content-wrapper {
            flex: 1;
            min-width: 0;
        }

        .detail-page .evaluation-verdict {
            font-size: 16px;
            font-weight: 700;
            color: var(--sidebar-text);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }

        .detail-page .evaluation-subtitle {
            font-size: 13px;
            color: var(--sidebar-text-secondary);
            line-height: 1.5;
        }

        /* Collapsible content */
        .detail-page .evaluation-toggle {
            display: none;
        }

        .detail-page .evaluation-content {
            position: relative;
            max-height: 120px;
            overflow: hidden;
            font-size: 12px;
            line-height: 1.6;
            color: var(--sidebar-text-secondary);
        }

        .detail-page .evaluation-content::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to bottom, transparent, var(--sidebar-subtle));
            pointer-events: none;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-content {
            max-height: none;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-content::after {
            display: none;
        }

        .detail-page .evaluation-expand {
            display: block;
            width: 100%;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 500;
            color: var(--accent);
            background: none;
            border: none;
            cursor: pointer;
            text-align: center;
            padding: 4px;
            transition: opacity 0.15s;
        }

        .detail-page .evaluation-expand:hover {
            opacity: 0.7;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-expand {
            display: none;
        }

        .detail-page .evaluation-collapse {
            display: none;
            width: 100%;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 500;
            color: var(--accent);
            background: none;
            border: none;
            cursor: pointer;
            text-align: center;
            padding: 4px;
            transition: opacity 0.15s;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-collapse {
            display: block;
        }

        .detail-page .evaluation-collapse:hover {
            opacity: 0.7;
        }

        .detail-page .evaluation-content p {
            margin: 8px 0;
        }

        .detail-page .evaluation-content strong {
            font-weight: 600;
            color: var(--sidebar-text);
        }

        /* Main content (always visible) */
        .detail-page .evaluation-main-content {
            font-size: 12px;
            line-height: 1.6;
            color: var(--sidebar-text-secondary);
            margin-top: 12px;
        }

        .detail-page .evaluation-main-content p {
            margin: 8px 0;
        }

        .detail-page .evaluation-main-content strong {
            color: var(--sidebar-text);
            font-weight: 600;
        }

        /* Reasoning section (collapsible) */
        .detail-page .evaluation-reasoning {
            position: relative;
            max-height: 100px;
            overflow: hidden;
            font-size: 13px;
            line-height: 1.7;
            color: var(--sidebar-text);
        }

        .detail-page .evaluation-reasoning p {
            margin: 0 0 12px 0;
        }

        .detail-page .evaluation-reasoning strong {
            font-weight: 600;
            color: var(--sidebar-text);
        }

        .detail-page .evaluation-reasoning::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: linear-gradient(to bottom, transparent, var(--sidebar-bg));
            pointer-events: none;
        }

        .detail-page :root[data-theme="dark"] .evaluation-reasoning::after {
            background: linear-gradient(to bottom, transparent, var(--sidebar-bg));
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-reasoning {
            max-height: 1000px;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-reasoning::after {
            display: none;
        }

        /* ===== MAIN CONTENT ===== */
        .detail-page .main {
            background: var(--content-bg);
            min-height: calc(100vh - 52px);
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 40px rgba(0,0,0,0.04);
        }

        /* Subnav */
        .detail-page .subnav {
            background: var(--content-bg);
            border-bottom: 1px solid var(--content-border);
            padding: 0 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;
            position: sticky;
            top: 52px;  /* Под header */
            z-index: 50;
        }

        .detail-page .subnav-left {
            display: flex;
            align-items: center;
            gap: 12px;
            height: 100%;
        }

        .detail-page .tabs {
            display: flex;
            gap: 4px;
            height: 100%;
        }

        .detail-page .tab {
            font-size: 13px;
            font-weight: 500;
            color: var(--content-text-tertiary);
            padding: 0 14px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 6px;
            border: none;
            background: none;
            cursor: pointer;
            position: relative;
            transition: color 0.15s;
        }

        @media (max-width: 768px) {
        .detail-page .tab {
            padding: 0 6px !important;
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 1;
        }
        }

        .detail-page .tab:hover {
            color: var(--content-text-secondary);
        }

        .detail-page .tab.active {
            color: var(--accent);
        }

        .detail-page .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10px;
            right: 10px;
            height: 2px;
            background: var(--accent);
            border-radius: 2px 2px 0 0;
        }

        .detail-page .tab-icon {
            font-size: 14px;
        }

        .detail-page .action-btn {
            font-size: 13px;
            font-weight: 500;
            color: var(--content-text-tertiary);
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            padding: 7px 14px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s;
        }

        .detail-page .action-btn:hover {
            border-color: var(--color-warning);
            background: var(--color-warning-bg);
            color: var(--color-warning);
        }

        /* Favorite button in favorites state */
        .detail-page .action-btn.in-favorites {
            border-color: var(--color-warning);
            background: var(--color-warning-bg);
            color: var(--color-warning);
        }

        /* Adaptation CTA Button */
        .detail-page .adaptation-cta-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 20px 0 24px 0;
            padding: 14px 24px;
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #f7fafc;
            font-size: 14px;
            font-weight: 600;
            border-radius: 10px;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .detail-page .adaptation-cta-btn:hover {
            background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .detail-page .adaptation-cta-btn:active {
            transform: translateY(0);
        }

        .detail-page .adaptation-cta-btn svg {
            width: 18px;
            height: 18px;
        }

        .detail-page :root[data-theme="dark"] .adaptation-cta-btn {
            background: linear-gradient(135deg, #3d4453 0%, #2a2f3c 100%);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .detail-page :root[data-theme="dark"] .adaptation-cta-btn:hover {
            background: linear-gradient(135deg, #4f5666 0%, #3d4453 100%);
        }

        /* Content */
        .detail-page .content {
            flex: 1;
            padding: 32px;
            background: linear-gradient(180deg,
                var(--content-bg) 0%,
                var(--content-subtle) 100%);
        }

        .detail-page .content-wrapper {
            max-width: 700px;
            margin: 0 auto;
        }

        /* Article header */
        .detail-page .article-header {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .detail-page .meta-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .detail-page .meta-tag {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 4px;
            background: var(--content-muted);
            color: var(--content-text-tertiary);
        }

        .detail-page .meta-tag.arxiv {
            background: var(--color-error-bg);
            color: var(--color-error);
        }

        .detail-page .meta-tag.score {
            background: var(--color-success-bg);
            color: var(--color-success);
        }

        .detail-page .meta-tag.pro {
            background: var(--content-text);
            color: var(--content-bg);
        }

        .detail-page .article-title-main {
            font-family: 'Source Serif 4', Georgia, serif;
            font-size: 28px;
            font-weight: 600;
            line-height: 1.35;
            color: var(--content-text);
            margin-bottom: 14px;
            letter-spacing: -0.4px;
        }

        .detail-page .article-lead {
            font-size: 17px;
            color: var(--content-text-secondary);
            line-height: 1.65;
        }

        /* Key Result Block */
        .detail-page .key-result-block {
            background: rgba(247, 250, 252, 0.6);
            border: 1px solid var(--content-border);
            border-radius: 12px;
            padding: 20px 28px 24px 28px;
            margin: 24px 0;
        }

        .detail-page :root[data-theme="dark"] .key-result-block {
            background: rgba(30, 32, 42, 0.4);
        }

        .detail-page .key-result-label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .detail-page .key-result-text {
            font-size: 15px;
            line-height: 1.75;
            color: var(--content-text);
        }

        .detail-page .key-result-text strong {
            font-weight: 700;
            color: var(--content-text);
        }

        .detail-page .key-result-text code {
            background: var(--accent-muted);
            color: var(--accent);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            font-family: 'IBM Plex Mono', monospace;
        }

        .detail-page .key-result-text .highlight-yellow {
            background: linear-gradient(90deg, rgba(219, 234, 254, 0.5) 0%, rgba(219, 234, 254, 0.5) 70%, transparent 100%);
            padding: 0 4px 0 2px;
        }

        .detail-page :root[data-theme="dark"] .key-result-text .highlight-yellow {
            background: linear-gradient(90deg, rgba(103, 126, 234, 0.15) 0%, rgba(103, 126, 234, 0.15) 70%, transparent 100%);
            padding: 0 4px 0 2px;
        }

        /* Tab content */
        .detail-page .tab-content {
            display: none;
        }

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

        /* Cards */
        .detail-page .card {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 10px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .detail-page .card-header {
            padding: 16px 24px;
            background: var(--content-subtle);
            border-bottom: 1px solid var(--content-border);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .detail-page .card-icon {
            font-size: 18px;
        }

        .detail-page .card-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .card-body {
            padding: 24px;
        }

        .detail-page .card-body p {
            font-size: 15px;
            line-height: 1.7;
            color: var(--content-text-secondary);
            margin-bottom: 1em;
        }

        .detail-page .card-body strong {
            color: var(--content-text);
            font-weight: 600;
        }

        .detail-page .card-body h2 {
            font-size: 18px;
            font-weight: 600;
            color: var(--content-text);
            margin: 1.5em 0 0.8em;
        }

        .detail-page .card-body h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--content-text);
            margin: 1.2em 0 0.6em;
        }

        .detail-page .card-body ul, .detail-page .card-body ol {
            margin: 1em 0;
            padding-left: 1.5em;
        }

        .detail-page .card-body li {
            margin-bottom: 0.5em;
            color: var(--content-text-secondary);
            line-height: 1.7;
        }

        /* Code blocks */
        .detail-page .card-body pre {
            background: var(--code-bg);
            color: var(--code-text);
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
            margin: 1em 0;
            font-family: 'IBM Plex Mono', 'Consolas', monospace;
            font-size: 13px;
            line-height: 1.6;
        }

        .detail-page .card-body code {
            font-family: 'IBM Plex Mono', 'Consolas', monospace;
            font-size: 0.9em;
            background: var(--content-muted);
            padding: 2px 6px;
            border-radius: 3px;
            color: var(--accent);
        }

        .detail-page .card-body pre code {
            background: transparent;
            padding: 0;
            color: var(--code-text);
        }

        /* Use cases tags */
        .detail-page .usecase-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 1em 0;
        }

        .detail-page .usecase-tag {
            font-size: 13px;
            padding: 8px 14px;
            background: var(--content-muted);
            border: 1px solid var(--content-border);
            border-radius: 6px;
            color: var(--content-text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }

        .detail-page .usecase-tag:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        /* ===== RIGHT SIDEBAR ===== */
        .detail-page .sidebar-right {
            width: 400px;
            min-width: 400px;
            background: var(--sidebar-bg);
            border-left: 1px solid var(--sidebar-border);
            position: relative;
            overflow: visible;
            display: flex;
            flex-direction: column;
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.02);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
        }

        .detail-page .sidebar-tabs {
            display: flex;
            border-bottom: 1px solid var(--sidebar-border);
            background: var(--sidebar-subtle);
            height: 50px;
            align-items: center;
        }

        .detail-page .sidebar-tab {
            flex: 1;
            padding: 0 8px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            color: var(--sidebar-text-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
            background: transparent;
            border: none;
            border-right: 1px solid var(--sidebar-border);
        }

        .detail-page .sidebar-tab:last-child {
            border-right: none;
        }

        .detail-page .sidebar-tab:hover {
            color: var(--sidebar-text);
            background: var(--sidebar-bg);
        }

        .detail-page .sidebar-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            background: var(--sidebar-bg);
        }

        .detail-page .sidebar-content-tabs {
            flex: 1;
            overflow-y: visible;
            padding: 20px 20px 24px 20px;
        }

        .detail-page .sidebar-tab-panel {
            display: none;
        }

        .detail-page .sidebar-tab-panel.active {
            display: block;
        }

        .detail-page .sidebar-card {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
        }

        .detail-page .sidebar-card h3 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--content-text-muted);
            margin-bottom: 12px;
            font-weight: 600;
        }

        .detail-page .pdf-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: var(--content-subtle);
            border-radius: 6px;
            color: var(--content-text-secondary);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--content-border);
            transition: all 0.15s;
        }

        .detail-page .pdf-link:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .detail-page .category-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .detail-page .category-tag {
            padding: 6px 10px;
            background: var(--content-subtle);
            border-radius: 4px;
            font-size: 12px;
            color: var(--content-text-secondary);
            border: 1px solid var(--content-border);
            transition: all 0.15s;
        }

        .detail-page .category-tag:hover {
            cursor: default;
        }

        /* Digest specific styles */
        .detail-page .digest-section {
            margin-bottom: 24px;
        }

        .detail-page .digest-section h3 {
            font-size: 13px;
            font-weight: 600;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        .detail-page .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, #fef08a 60%);
            padding: 0 2px;
        }

        .detail-page .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, #bfdbfe 60%);
            padding: 0 2px;
        }

        .detail-page .highlight-green {
            background: linear-gradient(180deg, transparent 60%, #bbf7d0 60%);
            padding: 0 2px;
        }

        .detail-page :root[data-theme="dark"] .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, rgba(254, 240, 138, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, rgba(191, 219, 254, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .highlight-green {
            background: linear-gradient(180deg, transparent 60%, rgba(187, 247, 208, 0.3) 60%);
        }

        .detail-page .examples {
            background: var(--content-muted);
            border-radius: 8px;
            padding: 16px;
            font-family: 'IBM Plex Mono', Monaco, monospace;
            font-size: 13px;
            margin: 1em 0;
        }

        .detail-page .examples .bad {
            color: var(--color-error);
            margin-bottom: 12px;
        }

        .detail-page .examples .good {
            color: var(--color-success);
        }

        /* Concepts specific styles */
        .detail-page .concepts-stats {
            display: none;  /* Скрыть статистику */
        }

        .detail-page .concepts-stat-badge {
            background: var(--content-muted);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 12px 20px;
            text-align: center;
            flex: 1;
        }

        .detail-page .concepts-stat-number {
            font-size: 24px;
            font-weight: 600;
            color: var(--accent);
            display: block;
            margin-bottom: 4px;
        }

        .detail-page .concepts-stat-label {
            font-size: 12px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .concept-section {
            margin-bottom: 32px;
        }

        .detail-page .concept-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--content-border);
        }

        .detail-page .concept-section-icon {
            font-size: 20px;
        }

        .detail-page .concept-section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--content-text);
            flex: 1;
        }

        .detail-page .concept-section-count {
            background: var(--accent);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 12px;
        }

        .detail-page .concept-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }

        .detail-page .concept-table th {
            background: var(--content-subtle);
            color: var(--content-text-muted);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--content-border);
        }

        .detail-page .concept-table th:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
        }

        .detail-page .concept-table td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--content-border);
            font-size: 14px;
            color: var(--content-text-secondary);
            line-height: 1.6;
        }

        .detail-page .concept-table td:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .concept-table tr:last-child td {
            border-bottom: none;
        }

        .detail-page .concept-name {
            font-weight: 600;
            color: var(--content-text);
        }

        /* Concepts table (from database) - same styles as concept-table */
        .detail-page .concepts-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }

        .detail-page .concepts-table th {
            background: var(--content-subtle);
            color: var(--content-text-muted);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--content-border);
        }

        .detail-page .concepts-table th:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
        }

        .detail-page .concepts-table td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--content-border);
            font-size: 14px;
            color: var(--content-text-secondary);
            line-height: 1.6;
        }

        .detail-page .concepts-table td:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .concepts-table tr:last-child td {
            border-bottom: none;
        }

        /* Concepts card (from database) */
        .detail-page .concepts-card {
    padding: 0;
            background: var(--content-bg);
            border-radius: 12px;

            margin-bottom: 24px;
        }

        .detail-page .concepts-title {
            display: none;  /* Скрываем заголовок, есть свой */
        }

        .detail-page .arxiv-link {
            display: inline-block;
            color: var(--accent);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .detail-page .arxiv-link:hover {
            text-decoration: underline;
        }

        .detail-page .concepts-stats {
            display: none;  /* Скрываем статистику */
        }

        .detail-page .stat-badge {
            background: var(--content-subtle);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 8px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            flex: 1;
        }

        .stat-badge.problems .stat-number { color: #dc2626; }
        .stat-badge.methods .stat-number { color: #2563eb; }
        .stat-badge.theses .stat-number { color: #16a34a; }

        .detail-page .stat-number {
            font-size: 20px;
            font-weight: 700;
        }

        .detail-page .stat-label {
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .concepts-meta {
            display: none;  /* Скрываем метаданные */
        }

        .detail-page .meta-item {
            background: var(--content-subtle);
            border-radius: 6px;
            padding: 6px 12px;
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .detail-page .meta-label {
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .meta-value {
            font-size: 13px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .concepts-section {
            margin-bottom: 28px;
        }

        .detail-page .concepts-section:last-child {
            margin-bottom: 0;
        }

        .detail-page .section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--content-border);
        }

        .detail-page .section-icon {
            font-size: 18px;
            line-height: 1;
        }

        .detail-page .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--content-text);
            flex: 1;
        }

        .detail-page .section-count {
            background: var(--accent);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 24px;
            text-align: center;
        }

        /* Rating card styles - modern & balanced */
        .detail-page .rating-card {
            background: var(--sidebar-subtle);
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }

        .detail-page .rating-score {
            font-size: 52px;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 6px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--color-info) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-align: center;
        }

        .detail-page .rating-verdict {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--sidebar-text-muted);
            text-align: center;
        }

        /* Sidebar sections */
        .detail-page .sidebar-section {
            margin-bottom: 24px;
        }

        .detail-page .sidebar-section-title {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: var(--sidebar-text);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 10px;
        }

        .detail-page .sidebar-insight-box {
            background: white;
            padding: 16px 18px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.7;
            color: var(--sidebar-text);
            border: 1px solid var(--sidebar-border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page .sidebar-card-wrapper {
            margin-bottom: 20px;
        }

        .detail-page .sidebar-card-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
            padding-left: 2px;
        }

        .detail-page .sidebar-principles-box {
            background: white;
            padding: 16px 18px;
            border-radius: 12px;
            border: 1px solid var(--sidebar-border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page .sidebar-principles-box .sidebar-list {
            padding-left: 0;
        }

        .detail-page .sidebar-principles-box .sidebar-list li {
            list-style-type: none;
            padding: 8px 0 8px 20px;
        }

        .detail-page .sidebar-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .detail-page .sidebar-list li {
            font-size: 13px;
            color: var(--sidebar-text);
            padding: 10px 0 10px 20px;
            line-height: 1.6;
            position: relative;
            border-bottom: 1px solid #f1f5f9;
        }

        .detail-page .sidebar-list li:last-child {
            border-bottom: none;
        }

        .detail-page .sidebar-list li:before {
            content: "→";
            color: var(--accent);
            font-weight: 600;
            position: absolute;
            left: 0;
            top: 13px;
            line-height: 1;
        }

        .detail-page .sidebar-section-text {
            font-size: 13px;
            line-height: 1.7;
            color: var(--sidebar-text);
        }

        /* ===== CATEGORIES & USECASES ===== */

        /* Category items with percentage bars */
        .detail-page .category-item {
            margin-bottom: 12px;
        }

        .detail-page .category-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }

        .detail-page .category-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--sidebar-text);
        }

        .detail-page .category-pct {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 12px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
        }

        .detail-page .category-bar {
            height: 4px;
            background: var(--sidebar-subtle);
            border-radius: 2px;
            overflow: hidden;
        }

        .detail-page .category-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), #667eea);
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .detail-page .category-main {
            opacity: 1;
        }

        .detail-page .category-extra {
            opacity: 0.7;
            margin-left: 12px;
        }

        /* Category tags (compact version) */
        .detail-page .category-tags {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .detail-page .category-tag {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 13px;
            color: #334155;
            transition: all 0.2s;
        }

        .detail-page .category-tag:hover {
            border-color: #cbd5e1;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .detail-page :root[data-theme="dark"] .category-tag {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .category-tag span:first-child {
            font-weight: 400;
        }

        .detail-page .category-tag-pct {
            background: #f1f5f9;
            padding: 2px 8px;
            border-radius: 4px;
            color: #64748b;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            font-weight: 600;
        }

        .detail-page .category-tag-main {
            border: 1px solid #dbf5fb;
            background: #f8fcff;
        }

        .detail-page .category-tag-main span:first-child {
            font-weight: 600;
            color: #0f172a;
        }

        .detail-page .category-tag-main .category-tag-pct {
            background: #def2ff;
            color: #5c7379;
        }

        .detail-page .category-tag-expand {
            font-size: 10px;
            color: var(--accent);
        }

        /* Use cases */
        .detail-page .usecase-item {
            background: white;
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            padding: 16px 18px;
            margin-bottom: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: box-shadow 0.2s ease, transform 0.2s ease;
        }

        .detail-page .usecase-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }

        .detail-page :root[data-theme="dark"] .usecase-item {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .usecase-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--sidebar-text);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .detail-page .usecase-name::before {
            content: '→';
            color: var(--accent);
            font-weight: 700;
            font-size: 16px;
        }

        .detail-page .usecase-description {
            font-size: 12px;
            line-height: 1.7;
            color: var(--sidebar-text-secondary);
        }

        /* Collapsible usecases */
        .detail-page .usecases-toggle {
            display: none;
        }

        .detail-page .usecases-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .detail-page .usecases-toggle:checked ~ .usecases-content {
            max-height: 2000px;
        }

        .detail-page .usecases-expand-btn {
            display: block;
            width: 100%;
            margin-top: 12px;
            padding: 8px;
            background: var(--sidebar-subtle);
            border: 1px solid var(--sidebar-border);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            color: var(--accent);
            cursor: pointer;
            text-align: center;
            transition: all 0.15s;
        }

        .detail-page .usecases-expand-btn:hover {
            background: var(--sidebar-border);
        }

        .detail-page .usecases-toggle:checked ~ .usecases-expand-btn {
            display: none;
        }

        /* Thinking section - always visible */
        .detail-page .thinking-section {
            background: white;
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page :root[data-theme="dark"] .thinking-section {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .thinking-header {
            padding: 14px 18px;
            border-bottom: 1px solid var(--sidebar-border);
        }

        .detail-page .thinking-header-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .thinking-text {
            padding: 0;
            font-size: 14px;
            line-height: 1.8;
            color: var(--sidebar-text);
        }

        .detail-page .thinking-text strong {
            color: var(--sidebar-text);
            font-weight: 600;
        }

        .detail-page .thinking-text br + br {
            display: block;
            content: "";
            margin-top: 0.5em;
        }

        /* Meta info */
        .detail-page .meta-row-sidebar {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--sidebar-border);
            font-size: 12px;
        }

        .detail-page .meta-row-sidebar:last-child {
            border-bottom: none;
        }

        .detail-page .meta-label-sidebar {
            color: var(--sidebar-text-muted);
            font-weight: 500;
        }

        .detail-page .meta-value-sidebar {
            color: var(--sidebar-text);
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
        }

        /* ===== EVALUATION SECTION ===== */
        .detail-page .evaluation-section {
            background: linear-gradient(135deg, var(--accent-muted) 0%, var(--color-info-muted) 100%);
            border: 2px solid var(--accent);
            border-radius: 12px;
            padding: 24px;
            margin: 0;
        }

        .detail-page .evaluation-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--accent);
        }

        .detail-page .evaluation-icon {
            font-size: 28px;
        }

        .detail-page .evaluation-header h2 {
            margin: 0;
            font-size: 20px;
            color: var(--content-text);
        }

        .detail-page .evaluation-content {
            line-height: 1.8;
        }

        .detail-page .evaluation-content pre {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
        }

        .detail-page .evaluation-content code {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 13px;
        }

        /* ===== RICH TEXT CONTENT ===== */
        .detail-page .text-article {
            line-height: 1.8;
            color: var(--content-text-secondary);
        }

        .detail-page .text-article h1 {
            font-size: 28px;
            font-weight: 700;
            color: var(--content-text);
            margin: 32px 0 16px 0;
            line-height: 1.3;
        }

        .detail-page .text-article h2 {
            font-size: 18px;
            font-weight: 600;
            color: var(--content-text);
            margin: 4px 0 12px 0;
        }

        .detail-page .text-article h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--content-text);
            margin: 24px 0 12px 0;
        }

        .detail-page .text-article p {
            margin: 16px 0;
            line-height: 1.8;
        }

        .detail-page .text-article strong {
            color: var(--content-text);
            font-weight: 600;
        }

        .detail-page .text-article em {
            font-style: italic;
            color: var(--content-text-secondary);
        }

        .detail-page .text-article code {
            background: var(--content-muted);
            color: var(--accent);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 13px;
            font-weight: 500;
        }

        .text-article ul,
        .detail-page .text-article ol {
            margin: 16px 0;
            padding-left: 24px;
        }

        .detail-page .text-article li {
            margin: 8px 0;
            line-height: 1.7;
        }

        .detail-page .text-article li::marker {
            color: var(--accent);
        }

        .detail-page .text-article blockquote {
            background: rgba(0, 0, 0, 0.02);
            border: none;
            padding: 16px 20px;
            margin: 16px 0;
            font-size: 15px;
            line-height: 1.8;
            font-style: normal;
            color: var(--content-text-secondary);
            border-radius: 8px;
        }

        .detail-page :root[data-theme="dark"] .text-article blockquote {
            background: rgba(255, 255, 255, 0.03);
        }

        /* Professional callout blocks */
        .detail-page .section-card-body > p:first-of-type {
            font-size: 15px;
            line-height: 1.8;
            color: var(--content-text-secondary);
        }

        /* Inline badges for terms */
        .detail-page .section-card-body code {
            background: var(--accent-muted);
            color: var(--accent);
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid rgba(103, 126, 234, 0.15);
        }

        /* Important highlights */
        .section-card-body em strong,
        .detail-page .section-card-body strong em {
            background: linear-gradient(180deg, transparent 65%, rgba(103, 126, 234, 0.15) 65%);
            padding: 0 2px;
        }

        .detail-page .text-article a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.15s;
        }

        .detail-page .text-article a:hover {
            border-bottom-color: var(--accent);
        }

        .detail-page .text-article hr {
            border: none;
            border-top: 2px solid var(--content-border);
            margin: 0;
        }

        /* Code blocks with language labels */
        .detail-page .text-article pre[class*="language-"] {
            position: relative;
            padding-top: 40px;
        }

        .detail-page .text-article pre[class*="language-"]::before {
            content: attr(class);
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'IBM Plex Mono', monospace;
        }

        /* Special highlights in text */
        .detail-page .text-article .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, #fef08a 60%);
            padding: 0 2px;
        }

        .detail-page .text-article .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, #bfdbfe 60%);
            padding: 0 2px;
        }

        .detail-page .text-article .highlight-green {
            background: linear-gradient(180deg, transparent 60%, #bbf7d0 60%);
            padding: 0 2px;
        }

        .detail-page :root[data-theme="dark"] .text-article .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, rgba(254, 240, 138, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .text-article .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, rgba(191, 219, 254, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .text-article .highlight-green {
            background: linear-gradient(180deg, transparent 60%, rgba(187, 247, 208, 0.3) 60%);
        }

        /* ===== SECTION CARDS ===== */
        .detail-page .section-card {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 12px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02),
                        0 1px 2px rgba(0, 0, 0, 0.03);
            transition: box-shadow 0.2s;
        }

        .detail-page .section-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04),
                        0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .detail-page .section-card-header {
            padding: 20px 24px 0 24px;
        }

        .detail-page .section-card-icon {
            display: none;
        }

        .detail-page .section-card-title {
            display: block;
            font-size: 10px;
            font-weight: 600;
            color: var(--content-text-muted);
            margin: 0 0 8px 0;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .detail-page .section-card-body {
            padding: 0 24px 24px 24px;
            line-height: 1.8;
            font-size: 16px;
        }

        /* Subsections inside cards */
        .detail-page .section-card-body h3 {
            font-size: 14px;
            font-weight: 600;
            color: var(--content-text);
            margin: 32px 0 16px 0;
            line-height: 1.4;
        }

        .detail-page .section-card-body strong {
            font-weight: 700;
            color: var(--content-text);
        }

        /* NO visual separators inside sections - content flows naturally */

        /* ===== CODE BLOCKS WITH COPY BUTTON ===== */
        .detail-page .text-article pre {
            position: relative;
            background: var(--content-muted);
            border: none;
            border-radius: 8px;
            padding: 48px 16px 16px 16px;
            overflow-x: auto;
            margin: 16px 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            line-height: 1.4;
        }

        .detail-page .text-article pre::before {
            content: attr(data-lang);
            position: absolute;
            top: 12px;
            left: 16px;
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
        }

        .detail-page .text-article pre code {
            background: none;
            padding: 0;
            color: var(--content-text);
            border: none;
        }

        .detail-page .code-copy-btn {
            position: absolute;
            top: 8px;
            right: 12px;
            background: transparent;
            color: var(--content-text-muted);
            border: 1px solid var(--content-border);
            padding: 6px 12px;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .detail-page .code-copy-btn:hover {
            background: var(--content-subtle);
            border-color: var(--content-border-strong);
            color: var(--content-text);
        }

        .detail-page .code-copy-btn:active {
            transform: scale(0.95);
        }

        /* Columns wrapper - default single column */
        .detail-page .sidebar-columns-wrapper {
            display: block;
            overflow: visible;
        }

        .sidebar-column-left,
        .detail-page .sidebar-column-right {
            display: block;
        }

        /* ===== OVERLAY & FAB (для мобильной версии) ===== */
        .detail-page .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1400;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .detail-page .sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        .detail-page .mobile-rating-fab {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 64px;
            height: 64px;
            border-radius: 16px; /* Закругленные углы как у evaluation-score-badge */
            background: #059669; /* Цвет как evaluation-score-badge.score-great */
            box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .detail-page .mobile-rating-fab:hover {
            transform: scale(1.05);
            background: #047857; /* Darker green on hover */
            box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5);
        }

        .detail-page .mobile-rating-fab:active {
            transform: scale(0.95);
        }

        .detail-page .mobile-rating-fab span {
            font-size: 22px;
            font-weight: 700;
            color: white;
            font-family: 'IBM Plex Mono', monospace; /* Как у evaluation-score-badge */
        }

        /* ===== DIGEST STYLES ===== */
        .detail-page .digest-card {
            padding: 0;
        }

        .detail-page .digest-section {
            margin-bottom: 32px;
        }

        .detail-page .digest-section:last-child {
            margin-bottom: 0;
        }

        .detail-page .digest-section h3 {
            font-size: 18px;
            font-weight: 700;
            color: #687490;
            margin: 0 0 12px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #ede9fe;
        }

        .detail-page .digest-section .content {
            font-size: 15px;
            line-height: 1.8;
            color: var(--content-text);
            padding: 0;
            margin: 0;
        }

        .detail-page .digest-section .content strong {
            color: #1f2937;
            font-weight: 700;
        }

        .detail-page .digest-section .content em {
            font-style: italic;
            color: #4b5563;
        }

        .digest-section .content code,
        .detail-page .digest-section .content code {
            background: #f3f4f6;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.9em;
            color: #1f2937;
        }

        /* Highlights */
        .detail-page .highlight-yellow {
            background: linear-gradient(120deg, #fef3c703 0%, #fde68a82 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            color: #92400e;
        }

        .detail-page .highlight-blue {
            background: linear-gradient(120deg, #dbeafe03 0%, #bfdbfe82 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            color: #1e40af;
        }

        .detail-page .highlight-green {
            background: linear-gradient(120deg, #d1fae503 0%, #a7f3d082 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            color: #065f46;
        }

        /* Examples */
        .detail-page .digest-section .examples {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 16px;
            background: none;
            padding: 0;
            font-family: inherit;
            font-size: inherit;
        }

        .digest-section .examples .bad,
        .detail-page .digest-section .examples .good {
            padding: 16px 20px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.7;
            position: relative;
            border-left: 4px solid;
        }

        .detail-page .digest-section .examples .bad {
            background: #fef2f2;
            border-left-color: #ef4444;
            color: #7f1d1d;
        }

        .detail-page .digest-section .examples .bad strong {
            color: #991b1b;
            font-weight: 700;
        }

        .detail-page .digest-section .examples .good {
            background: #f0fdf4;
            border-left-color: #10b981;
            color: #14532d;
        }

        .detail-page .digest-section .examples .good strong {
            color: #166534;
            font-weight: 700;
        }

        /* Source and Meta */
        .detail-page .digest-card .source {
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid var(--content-border);
            font-size: 13px;
            font-style: italic;
            color: var(--content-text-muted);
        }

        .detail-page .digest-card .meta {
            margin-top: 12px;
            font-size: 12px;
            color: var(--content-text-muted);
            opacity: 0.7;
        }

        /* ===== WIDE SCREENS (2 COLUMN SIDEBAR) ===== */
        @media (min-width: 1800px) {
            /* Collapsed state for wide screens */
            .detail-page .sidebar-right.collapsed {
                width: 48px;
                min-width: 48px;
            }

            .detail-page .app:has(.sidebar-right.collapsed) {
                grid-template-columns: 280px 1fr 48px;
            }

            /* Info tab - remove default padding as parent has it */
            .detail-page #sidebar-info {
                padding: 0;
            }

            /* Evaluation block */
            .detail-page #sidebar-info > .evaluation-block {
                margin-bottom: 20px;
            }

            /* Columns wrapper becomes grid */
            .detail-page .sidebar-columns-wrapper {
                display: grid;
                grid-template-columns: 1fr 1px 1fr;
                gap: 0;
                align-items: start;
                overflow: visible;
            }

            /* Left column */
            .detail-page .sidebar-column-left {
                grid-column: 1;
                padding-right: 20px;
            }

            /* Vertical divider line */
            .detail-page .sidebar-columns-wrapper::after {
                content: '';
                grid-column: 2;
                grid-row: 1;
                background: var(--sidebar-border);
                width: 1px;
                height: 100%;
            }

            /* Right column */
            .detail-page .sidebar-column-right {
                grid-column: 3;
                padding-left: 20px;
            }
        }

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

        /* Breakpoint 1: 1500px - Уменьшить sidebar */
        @media (max-width: 1500px) {
            .detail-page .sidebar-right {
                width: 350px;
                min-width: 350px;
            }

            .detail-page .app {
                grid-template-columns: 280px 1fr 350px;
            }

            .detail-page .app:has(.sidebar-right.collapsed) {
                grid-template-columns: 280px 1fr 48px;
            }
        }

        /* Breakpoint 2: 1200px - Sidebar overlay справа */
        @media (max-width: 1200px) {
            .detail-page .sidebar-right {
                position: fixed;
                right: -400px;
                top: 52px;
                width: 400px;
                height: calc(100vh - 52px);
                z-index: 1500;
                transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .detail-page .sidebar-right.open {
                right: 0;
                box-shadow: -4px 0 20px rgba(0,0,0,0.2);
            }

            .detail-page .sidebar-tabs {
                height: 54px; /* Увеличено для планшетов */
            }

            .detail-page .sidebar-tab {
                padding: 10px 8px;
                font-size: 13px;
            }

            .detail-page .app {
                grid-template-columns: 280px 1fr;
            }


            .detail-page .mobile-rating-fab {
                display: flex;  /* Показать FAB на планшетах */
            }

        }

        /* Кнопка закрытия для мобильных - скрыта по умолчанию */
        .detail-page .sidebar-mobile-close {
            display: none;
        }

        /* Breakpoint 3: 768px - Мобильная версия снизу */
        @media (max-width: 768px) {
            .detail-page .sidebar-left {
                display: none;
            }

            .detail-page .sidebar-right {
                position: fixed;
                bottom: -80vh;
                right: 0;
                left: 0;
                top: auto;
                width: 100%;
                height: 80vh;
                border-radius: 16px 16px 0 0;
                transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                padding-top: 0;
                z-index: 1500;
                display: flex;
                flex-direction: column;
            }

            .detail-page .sidebar-right.open {
                bottom: 0;
                right: 0;
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
            }

            /* Кнопка закрытия для мобильных - полоска над блоком */
            .detail-page .sidebar-mobile-close {
                display: none; /* Скрыта по умолчанию */
                position: absolute;
                top: -40px;
                left: 0;
                width: 100%;
                height: 40px;
                padding: 0;
                background: #365bb2;
                border: none;
                border-radius: 0;
                color: #fff;
                cursor: pointer;
                z-index: 10;
                transition: all 0.2s ease;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 500;
            }

            .detail-page .sidebar-right.open .sidebar-mobile-close {
                display: flex; /* Показываем только когда sidebar открыт */
            }

            .detail-page .sidebar-mobile-close:hover {
                background: #2d4a92;
            }

            .detail-page .sidebar-mobile-close:active {
                background: #1f3366;
            }

            .detail-page .sidebar-tabs {
                height: 56px; /* Увеличено для удобства тача на мобильных */
                flex-shrink: 0;
            }

            .detail-page .sidebar-tab {
                padding: 12px 8px; /* Увеличен вертикальный padding */
                font-size: 14px;
            }

            /* Прокрутка внутри sidebar-content-tabs */
            .detail-page .sidebar-content-tabs {
                flex: 1;
                overflow-y: auto !important;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
            }

            .detail-page .sidebar-toggle-btn {
                display: none;
            }

            .detail-page .mobile-rating-fab {
                display: flex;
            }

            .detail-page .app {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .detail-page .header-stats {
                display: none;
            }

            .detail-page .article-title-main {
                font-size: 22px;
            }

            .detail-page .content {
                padding: 20px 16px;
            }
        }

        /* ===== PRO CONTENT LOCK STUB ===== */
        .detail-page .pro-content-lock {
            text-align: center;
            padding: 40px 32px 44px 32px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.03) 0%, rgba(249, 115, 22, 0.03) 100%);
            border: 2px solid rgba(251, 191, 36, 0.2);
            border-radius: 12px;
            margin: 0;
            box-shadow: 0 4px 16px rgba(251, 191, 36, 0.08);
            overflow: visible;
        }

        .detail-page .pro-lock-icon {
            width: 32px;
            height: 32px;
            margin: 0 auto 16px;
            padding: 8px;
            background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
            border-radius: 8px;
        }

        .detail-page .pro-lock-icon svg {
            width: 100%;
            height: 100%;
            stroke: white;
        }

        .detail-page .pro-lock-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--content-text);
            line-height: 1.3;
        }

        .detail-page .pro-lock-description {
            font-size: 14px;
            line-height: 1.6;
            margin: 0 auto 28px auto !important;
            padding: 0 20px;
            color: var(--content-text-secondary);
            max-width: 560px;
            text-align: center !important;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }

        .detail-page .text-article .pro-lock-description {
            margin: 0 auto 28px auto !important;
            text-align: center !important;
        }

        .detail-page .pro-lock-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
            overflow: visible;
        }

        .detail-page .pro-lock-btn {
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none !important;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            transition: all 0.2s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-sizing: border-box;
            min-height: 44px;
            border-bottom: none !important;
        }

        .pro-lock-btn:hover,
        .pro-lock-btn:focus,
        .detail-page .pro-lock-btn:active {
            text-decoration: none !important;
            border-bottom: none !important;
        }

        .text-article .pro-lock-btn,
        .text-article .pro-lock-btn:hover,
        .text-article .pro-lock-btn:focus,
        .detail-page .text-article .pro-lock-btn:active {
            border-bottom: none !important;
            text-decoration: none !important;
        }

        .detail-page .pro-lock-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .detail-page .pro-lock-btn-primary {
            background: var(--accent);
            color: white !important;
            border: 2px solid var(--accent);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
        }

        .detail-page .pro-lock-btn-primary svg {
            stroke: white;
        }

        .detail-page .pro-lock-btn-primary:hover {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
            transform: translateY(-1px);
        }

        .detail-page .pro-lock-btn-secondary {
            background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
            color: white !important;
            border: 2px solid #f97316;
            border-bottom: 2px solid #f97316 !important;
            box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
        }

        .detail-page .pro-lock-btn-secondary svg {
            stroke: white;
        }

        .detail-page .pro-lock-btn-secondary:hover {
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
            border: 2px solid #ea580c;
            border-bottom: 2px solid #ea580c !important;
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
            transform: translateY(-1px);
            color: white !important;
            text-decoration: none !important;
        }

        /* Orange button width fix for desktop */
        @media (min-width: 769px) {
            .detail-page .pro-lock-actions > .pro-lock-btn-secondary {
                width: auto;
                max-width: 220px;
                align-self: center;
                margin-top: 8px;
            }

            .detail-page .pro-lock-actions {
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
        }

        @media (max-width: 768px) {
            .detail-page .pro-content-lock {
                padding: 32px 24px;
                margin: 24px 0;
            }

            .detail-page .pro-lock-icon {
                width: 28px;
                height: 28px;
                margin-bottom: 12px;
            }

            .detail-page .pro-lock-title {
                font-size: 16px;
            }

            .detail-page .pro-lock-description {
                font-size: 12px;
                margin-bottom: 20px;
            }

            .detail-page .pro-lock-actions {
                flex-direction: column;
                gap: 10px;
            }

            .detail-page .pro-lock-btn {
                width: 100%;
                justify-content: center;
            }
        }

        /* ===== RESEARCH ADAPTATION STYLES - DARK MODE CLEAN ===== */
        .detail-page .research-adaptation-section {
            margin: 0;
            width: 100%;

            padding: 48px 0;
            background: #1a1a2e;
            border-top: 1px solid rgba(102, 126, 234, 0.2);
            border-bottom: 1px solid rgba(102, 126, 234, 0.2);
        }

        /* Inner container to constrain content width */
        .detail-page .research-adaptation-section > * {
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
        }

        .detail-page .research-adaptation-section h2 {
            color: #ffffff;
            margin-bottom: 12px;
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .detail-page .research-adaptation-section h2 .section-icon {
            flex-shrink: 0;
        }

        /* SVG Icons in buttons */
        .adapt-btn svg,
        .prompt-btn svg,
        .detail-page .adaptation-cta-btn svg {
            vertical-align: middle;
            flex-shrink: 0;
        }

        /* Spinner animation */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .detail-page .spinner-icon {
            animation: spin 1s linear infinite;
        }

        /* Button text with icons */
        .btn-text,
        .detail-page .btn-loading {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-text svg,
        .detail-page .btn-loading svg {
            flex-shrink: 0;
        }

        .detail-page .adaptation-description {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 32px;
            font-size: 15px;
            line-height: 1.6;
            text-align: center;
        }

        .detail-page .adaptation-form-container {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 28px;
            margin-bottom: 24px;
        }

        .detail-page .model-selection {
            margin-bottom: 20px;
        }

        .detail-page .form-label {
            display: block;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
            font-size: 14px;
            letter-spacing: 0.3px;
        }

        .detail-page .model-select {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            transition: all 0.3s ease;
        }

        .detail-page .model-select:focus {
            outline: none;
            border-color: rgba(102, 126, 234, 0.6);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }

        .detail-page .model-select option {
            background: #1a1a2e;
            color: #ffffff;
        }

        .detail-page .request-input-container {
            margin-bottom: 20px;
        }

        .detail-page .user-request-input {
            width: 100%;
            padding: 14px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            resize: vertical;
            min-height: 120px;
            transition: all 0.3s ease;
            line-height: 1.6;
        }

        .detail-page .user-request-input:focus {
            outline: none;
            border-color: rgba(102, 126, 234, 0.6);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }

        .detail-page .user-request-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .detail-page .textarea-bottom-panel {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            gap: 12px;
        }

        .detail-page .left-controls {
            display: flex;
            align-items: center;
        }

        .detail-page .nova-adaptation-clear-btn-compact {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.7);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .detail-page .nova-adaptation-clear-btn-compact svg {
            flex-shrink: 0;
            vertical-align: middle;
        }

        .detail-page .nova-adaptation-clear-btn-compact:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            border-color: rgba(239, 68, 68, 0.5);
            transform: translateY(-1px);
        }

        .detail-page .character-counter {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
        }

        /* ===== FORM ACTIONS ===== */
        .detail-page .form-actions {
            display: flex;
            flex-direction: row;
            gap: 16px;
            margin-top: 20px;
        }

        .detail-page .action-button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 50%;
            flex: 1;
        }

        .detail-page .adapt-btn, .detail-page .prompt-btn {
            width: 100%;
            padding: 14px 24px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.3px;
        }

        .detail-page .adapt-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .detail-page .adapt-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .detail-page .prompt-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 2px solid rgba(102, 126, 234, 0.5);
            color: #ffffff;
        }

        .detail-page .prompt-btn:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.8);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .detail-page .cost-time-indicator {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
        }

        .detail-page .cost-estimate, .detail-page .time-estimate {
            font-weight: 500;
        }

        .detail-page .cost-estimate {
            color: #ffd700;
        }

        .detail-page .time-estimate {
            color: rgba(255, 255, 255, 0.7);
        }

        /* ===== N-TOKENS BALANCE STYLES - DARK MODE ===== */
        .detail-page .n-tokens-balance-section {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            margin-bottom: 24px;
            padding: 24px;
        }

        .detail-page .token-balance-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .detail-page .token-balance-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .detail-page .balance-title {
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            flex: 1;
            font-size: 16px;
            letter-spacing: 0.3px;
        }

        .detail-page .refresh-balance-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.7);
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .detail-page .refresh-balance-btn svg {
            transition: transform 0.3s ease;
        }

        .detail-page .refresh-balance-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #ffd700;
        }

        .detail-page .refresh-balance-btn:hover svg {
            transform: rotate(180deg);
        }

        .detail-page .token-balance-info {
            display: flex;
            align-items: baseline;
            gap: 8px;
            justify-content: center;
            padding: 12px 0;
        }

        .detail-page .balance-amount {
            font-size: 42px;
            font-weight: 700;
            color: #ffd700;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            letter-spacing: -1px;
        }

        .detail-page .balance-unit {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 500;
        }

        .detail-page .balance-hint {
            text-align: center;
        }

        .detail-page .history-link {
            color: rgba(102, 126, 234, 0.9);
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.3s ease;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid rgba(102, 126, 234, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .detail-page .history-link svg {
            flex-shrink: 0;
            vertical-align: middle;
        }

        .detail-page .history-link:hover {
            color: #ffffff;
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.6);
        }

        /* ===== RESULT CONTAINER STYLES - DARK MODE ===== */
        .detail-page .result-container {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 28px;
            margin-top: 28px;
        }

        .detail-page .result-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .detail-page .result-header h3 {
            color: rgba(255, 255, 255, 0.95);
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }

        .detail-page .result-meta {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            flex-wrap: wrap;
        }

        .detail-page .result-content {
            margin-bottom: 20px;
        }

        .detail-page .result-text {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            padding: 18px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
        }

        .detail-page .result-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .detail-page .copy-btn, .detail-page .download-btn {
            padding: 10px 18px;
            border: 1px solid rgba(102, 126, 234, 0.5);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .detail-page .copy-btn:hover, .detail-page .download-btn:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        }

        .detail-page .copy-btn:active, .detail-page .download-btn:active {
            transform: translateY(0);
        }

        /* ===== RESPONSIVE ADAPTATION FORM ===== */
        @media (max-width: 768px) {
            .detail-page .research-adaptation-section {
            margin: 0;
                margin: 0;
                padding: 32px 0;
            }

            .detail-page .research-adaptation-section > * {
                padding-left: 20px;
                padding-right: 20px;
            }

            .detail-page .research-adaptation-section h2 {
                font-size: 22px;
            }

            .detail-page .adaptation-description {
                font-size: 14px;
            }

            .detail-page .adaptation-form-container {
                padding: 20px;
            }

            .detail-page .form-actions {
                flex-direction: column;
                gap: 16px;
            }

            .detail-page .action-button-group {
                width: 100%;
                flex-direction: column;
            }

            .detail-page .adapt-btn, .detail-page .prompt-btn {
                width: 100%;
                padding: 14px 24px;
            }

            .detail-page .n-tokens-balance-section {
                padding: 20px;
            }

            .detail-page .balance-amount {
                font-size: 36px;
            }

            .detail-page .result-container {
                padding: 20px;
            }

            .detail-page .result-text {
                font-size: 14px;
            }

            .detail-page .copy-btn, .detail-page .download-btn {
                width: 100%;
                justify-content: center;
            }
        }

        /* ========================================
           FILTERS DRAWER STYLES
           ======================================== */

        /* Sidebar Header with Filters Button */
        /* Filters Button - Full Width */
        .detail-page .filters-btn-full {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            margin-bottom: 16px;
            background: var(--sidebar-subtle);
            border: 1px solid var(--sidebar-border);
            border-radius: 6px;
            color: var(--sidebar-text);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .filters-btn-full:hover {
            background: var(--sidebar-bg);
            border-color: var(--accent);
            color: var(--accent);
        }

        .detail-page .filters-btn-full.active {
            border-color: var(--accent);
            color: var(--accent);
        }

        .detail-page .filters-btn-full svg {
            flex-shrink: 0;
        }

        /* Sort Group */
        .detail-page .sort-group {
            margin-top: 12px;
        }

        .detail-page .sort-buttons {
            display: flex;
            gap: 8px;
        }

        .detail-page .sort-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 12px;
            border: 1px solid var(--sidebar-border);
            border-radius: 8px;
            background: transparent;
            color: var(--sidebar-text-secondary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .sort-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .detail-page .sort-btn:hover {
            background: var(--sidebar-subtle);
            border-color: var(--sidebar-border-hover);
        }

        .detail-page .sort-btn.active {
            background: var(--sidebar-subtle);
            border-color: var(--sidebar-border-hover);
            color: var(--sidebar-text);
            font-weight: 600;
        }

        .detail-page .sort-btn.active:hover {
            background: var(--sidebar-border);
        }

        .detail-page .sort-arrow {
            margin-left: 2px;
            opacity: 0;
            transition: opacity 0.2s ease, transform 0.3s ease;
            transform: rotate(0deg);
        }

        .detail-page .sort-btn.active .sort-arrow {
            opacity: 1;
        }

        .detail-page .sort-btn[data-direction="asc"] .sort-arrow {
            transform: rotate(180deg);
        }

        /* Sidebar Footer */
        .detail-page .sidebar-footer {
            flex-shrink: 0;
            padding: 12px;
            border-top: 1px solid var(--sidebar-border);
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.9) 100%);
            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
        }

        .detail-page :root[data-theme="dark"] .sidebar-footer {
            background: linear-gradient(180deg, rgba(30, 32, 42, 0.5) 0%, rgba(20, 22, 32, 0.7) 100%);
            box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.3);
        }

        .detail-page .btn-load-more {
            width: 100%;
            padding: 10px 16px;
            background: transparent;
            border: 1.5px solid var(--sidebar-border);
            border-radius: 8px;
            color: var(--sidebar-text);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .detail-page .btn-load-more:hover {
            background: var(--sidebar-subtle);
            border-color: var(--sidebar-border-hover);
        }

        .detail-page .btn-load-more:active {
            transform: translateY(1px);
        }

        .detail-page .load-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        .detail-page .load-text {
            font-size: 14px;
        }

        .detail-page .load-count {
            display: block;
            text-align: center;
            font-size: 11px;
            color: var(--sidebar-text-muted);
            margin-top: 4px;
            font-weight: 400;
        }

        .detail-page .footer-divider {
            height: 1px;
            background: var(--sidebar-border);
            margin: 10px 0 8px 0;
            opacity: 0.5;
        }

        .detail-page .link-extended-selection {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 13px;
            color: var(--sidebar-text-secondary);
            text-decoration: none;
            transition: all 0.2s ease;
            padding: 4px 0;
        }

        .detail-page .link-extended-selection:hover {
            color: var(--sidebar-text);
        }

        .detail-page .link-extended-selection .arrow-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .detail-page .link-extended-selection:hover .arrow-icon {
            transform: translateX(3px);
        }

        /* Drawer Overlay - Full screen except header */
        .detail-page .drawer-overlay {
            position: fixed;
            top: 52px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0s 0.3s;
        }

        .detail-page .drawer-overlay.active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s ease, visibility 0s;
        }

        /* Filters Drawer */
        .detail-page .filters-drawer {
            position: fixed;
            top: 52px;
            left: 0;
            width: 400px;
            height: calc(100vh - 52px);
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
            border-right: 1px solid #cbd5e1;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .detail-page .filters-drawer.active {
            transform: translateX(0);
        }

        .detail-page .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid #e2e8f0;
            background: #ffffff;
        }

        .detail-page .drawer-header h2 {
            font-size: 18px;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
        }

        .detail-page .drawer-close {
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            color: #475569;
            cursor: pointer;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .detail-page .drawer-close:hover {
            background: #e2e8f0;
            border-color: var(--accent);
            color: var(--accent);
        }

        .detail-page .drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        .detail-page .drawer-footer {
            display: flex;
            gap: 12px;
            padding: 20px 24px;
            border-top: 1px solid #e2e8f0;
            background: #ffffff;
        }

        /* Filter Sections */
        .detail-page .filter-section {
            margin-bottom: 32px;
        }

        .detail-page .filter-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 12px;
        }

        .detail-page .filter-values {
            font-size: 12px;
            color: var(--accent);
            font-weight: 600;
        }

        /* Rating Slider */
        .detail-page .rating-slider-container {
            margin-bottom: 16px;
        }

        .detail-page .rating-distribution {
            margin-bottom: 20px;
        }

        .detail-page .distribution-bar {
            height: 8px;
            border-radius: 8px;
            /* Gradient reflects actual paper distribution: gray → orange → green */
            background: linear-gradient(
                90deg,
                #94a3b8 0%,      /* Gray 10-50: minimal papers */
                #94a3b8 8%,      /* Keep gray until 8% */
                #cbd5e1 12%,     /* Light gray 50-60 */
                #9ca3af 18%,     /* Gray 60-70: 14.9% papers */
                #fbbf24 28%,     /* Yellow 70-80: 17.0% papers */
                #f97316 50%,     /* Orange 80-90: 36.9% papers */
                #059669 75%,     /* Green 90-95 */
                #047857 100%     /* Dark green 95-100: excellent papers */
            );
            margin-bottom: 16px;
            position: relative;
            cursor: pointer;
        }

        .detail-page .selected-range {
            position: absolute;
            top: 0;
            height: 8px;
            background: linear-gradient(90deg,
                rgba(102, 126, 234, 0.5) 0%,
                rgba(118, 75, 162, 0.5) 100%
            );
            border-radius: 8px;
            pointer-events: none;
            backdrop-filter: brightness(0.9);
        }

        .detail-page .rating-handle {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background: #ffffff;
            border: 3px solid var(--accent);
            border-radius: 50%;
            cursor: grab;
            z-index: 10;
            transition: border-width 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .detail-page .rating-handle:hover {
            border-width: 4px;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .detail-page .rating-handle:active {
            cursor: grabbing;
            transform: translate(-50%, -50%) scale(0.95);
        }

        .detail-page .distribution-labels {
            position: relative;
            height: 16px;
            font-size: 10px;
            color: #64748b;
            margin-top: 4px;
        }

        .detail-page .distribution-labels span {
            position: absolute;
            transform: translateX(-50%);
        }

        .distribution-labels span:nth-child(1) { left: 0%; transform: translateX(0); }      /* 10 */
        .distribution-labels span:nth-child(2) { left: 8%; }    /* 50 - closer to start, end of gray */
        .distribution-labels span:nth-child(3) { left: 23%; }   /* 70 - yellow zone */
        .distribution-labels span:nth-child(4) { left: 39%; }   /* 80 - orange zone */
        .distribution-labels span:nth-child(5) { left: 75%; }   /* 90 - red zone */
        .distribution-labels span:nth-child(6) { left: 100%; transform: translateX(-100%); } /* 100 */



        /* Multi-Select */
        .detail-page .multiselect-wrapper {
            position: relative;
        }

        .detail-page .multiselect-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .multiselect-header:hover {
            border-color: var(--accent);
        }

        .detail-page .multiselect-header.active {
            border-color: var(--accent);
        }

        .detail-page .multiselect-placeholder {
            font-size: 13px;
            color: #475569;
        }

        .detail-page .multiselect-arrow {
            flex-shrink: 0;
            transition: transform 0.2s ease;
            color: #64748b;
        }

        .detail-page .multiselect-header.active .multiselect-arrow {
            transform: rotate(180deg);
        }

        .detail-page .multiselect-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 50;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        .detail-page .multiselect-dropdown.active {
            max-height: 300px;
            opacity: 1;
            visibility: visible;
            overflow-y: auto;
        }

        .detail-page .multiselect-search {
            padding: 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .detail-page .multiselect-search-input {
            width: 100%;
            padding: 8px 12px;
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            color: #1e293b;
            font-size: 13px;
        }

        .detail-page .multiselect-search-input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .detail-page .multiselect-options {
            padding: 8px;
            overflow-y: auto;
            max-height: 250px;
            flex: 1;
        }

        .detail-page .multiselect-apply-btn {
            position: sticky;
            bottom: 0;
            padding: 12px;
            border-top: 1px solid #e2e8f0;
            background: #ffffff;
            flex-shrink: 0;
        }

        .detail-page .multiselect-apply-btn button {
            width: 100%;
            padding: 8px 16px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .detail-page .multiselect-apply-btn button:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .detail-page .multiselect-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s ease;
        }

        .detail-page .multiselect-option:hover {
            background: #f8fafc;
        }

        .detail-page .multiselect-option input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--accent);
        }

        .detail-page .multiselect-option span {
            font-size: 13px;
            color: #475569;
        }

        /* Toggle Group */
        .detail-page .toggle-group {
            display: flex;
            gap: 12px;
        }

        .detail-page .toggle-option {
            flex: 1;
            cursor: pointer;
        }

        .detail-page .toggle-option input[type="checkbox"] {
            display: none;
        }

        .detail-page .toggle-btn {
            display: block;
            padding: 10px;
            text-align: center;
            background: #ffffff;
            border: 2px solid #cbd5e1;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
            transition: all 0.2s ease;
        }

        .detail-page .toggle-option input[type="checkbox"]:checked + .toggle-btn {
            background: rgba(37, 99, 235, 0.1);
            border-color: var(--accent);
            color: var(--accent);
        }

        /* Drawer Buttons */
        .detail-page .btn {
            flex: 1;
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .btn-reset {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
        }

        .detail-page .btn-reset:hover {
            background: #e2e8f0;
        }

        .detail-page .btn-apply {
            background: var(--accent);
            color: white;
            border: none;
        }

        .detail-page .btn-apply:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .detail-page .filters-drawer {
                width: 100%;
                max-width: 400px;
            }
        }

        /* Extra Small Screens - Full Width Cards */
        @media (max-width: 420px) {
            .detail-page .content {
                padding: 20px 0px;
            }

            .detail-page .section-card {
                border-radius: 0;
                margin-bottom: 0;
            }

            .detail-page .key-result-block {
                border-radius: 0;
                margin-bottom: 0;
            }

            .detail-page .article-title-main {
                padding-left: 24px;
                padding-right: 24px;
            }

            .detail-page .meta-row {
                padding-left: 24px;
                padding-right: 24px;
            }
        }


/* ===== RESEARCH DETAIL PAGE SPECIFIC STYLES ===== */
/* Extracted from research_detail.html - 3-column layout with tabs */
/* ===== LAYOUT ===== */
        .detail-page .app {
            display: grid;
            grid-template-columns: 280px 1fr 400px;
            margin-top: 52px;
            min-height: calc(100vh - 52px);
            overflow-x: clip;
        }

        /* ===== LEFT SIDEBAR ===== */
        .detail-page .sidebar-left {
            background: var(--sidebar-bg);
            border-right: 1px solid var(--sidebar-border);
            height: calc(100vh - 52px);
            position: sticky;
            top: 52px;
            display: flex;
            flex-direction: column;
        }

        .detail-page .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px 12px;
        }

        .detail-page .sidebar-section {
            margin-bottom: 20px;
        }

        .detail-page .sidebar-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0 10px 10px;
        }

        .detail-page .article-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .detail-page .article-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.1s, opacity 0.2s;
            text-decoration: none;
        }

        .detail-page .article-item:hover {
            background: var(--sidebar-subtle);
        }

        .detail-page .article-item.active {
            background: var(--content-bg);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .detail-page .article-item.article-pro .article-title {
            opacity: 0.5;
        }

        .detail-page .article-item.article-pro:hover .article-title {
            opacity: 0.65;
        }

        .detail-page .article-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .detail-page .article-title {
            font-size: 13px;
            color: var(--sidebar-text);
            line-height: 1.4;
        }


        .detail-page .article-date {
            font-size: 10px;
            color: var(--sidebar-text-muted);
            font-weight: 400;
        }

        /* PRO articles structure */
        .detail-page .article-date-wrapper {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .detail-page .pro-icon-mini {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 8px;
            font-weight: 600;
            color: var(--sidebar-bg);
            background: var(--sidebar-text);
            letter-spacing: 0.2px;
            padding: 2px 4px;
            border-radius: 3px;
        }

        .detail-page .article-score {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            font-weight: 500;
            min-width: 30px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            flex-shrink: 0;
        }

        /* Score badges наследуют градиенты от универсальных .score-* классов */
        /* Делаем тень мягче для маленьких бейджей в списке */
        .detail-page .article-score[class*="score-"] {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
        }

        .detail-page .article-title {
            font-size: 13px;
            font-weight: 400;
            color: var(--sidebar-text-secondary);
            line-height: 1.45;
            display: -webkit-box;

            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .detail-page .article-item.active .article-title {
            color: var(--sidebar-text);
            font-weight: 500;
        }

        /* ===== EVALUATION BLOCK (Collapsible) ===== */
        .detail-page .evaluation-block {
            background: white;
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page :root[data-theme="dark"] .evaluation-block {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .evaluation-score-badge {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 32px;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }

        /* Score color ranges for evaluation badge (right sidebar) */
        /* evaluation-score-badge наследует градиенты от универсальных .score-* классов */
        /* Усиливаем тень для большого бейджа */
        .detail-page .evaluation-score-badge[class*="score-"] {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .detail-page .evaluation-content-wrapper {
            flex: 1;
            min-width: 0;
        }

        .detail-page .evaluation-verdict {
            font-size: 16px;
            font-weight: 700;
            color: var(--sidebar-text);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }

        .detail-page .evaluation-subtitle {
            font-size: 13px;
            color: var(--sidebar-text-secondary);
            line-height: 1.5;
        }

        /* Collapsible content */
        .detail-page .evaluation-toggle {
            display: none;
        }

        .detail-page .evaluation-content {
            position: relative;
            max-height: 120px;
            overflow: hidden;
            font-size: 12px;
            line-height: 1.6;
            color: var(--sidebar-text-secondary);
        }

        .detail-page .evaluation-content::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to bottom, transparent, var(--sidebar-subtle));
            pointer-events: none;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-content {
            max-height: none;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-content::after {
            display: none;
        }

        .detail-page .evaluation-expand {
            display: block;
            width: 100%;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 500;
            color: var(--accent);
            background: none;
            border: none;
            cursor: pointer;
            text-align: center;
            padding: 4px;
            transition: opacity 0.15s;
        }

        .detail-page .evaluation-expand:hover {
            opacity: 0.7;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-expand {
            display: none;
        }

        .detail-page .evaluation-collapse {
            display: none;
            width: 100%;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 500;
            color: var(--accent);
            background: none;
            border: none;
            cursor: pointer;
            text-align: center;
            padding: 4px;
            transition: opacity 0.15s;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-collapse {
            display: block;
        }

        .detail-page .evaluation-collapse:hover {
            opacity: 0.7;
        }

        .detail-page .evaluation-content p {
            margin: 8px 0;
        }

        .detail-page .evaluation-content strong {
            font-weight: 600;
            color: var(--sidebar-text);
        }

        /* Main content (always visible) */
        .detail-page .evaluation-main-content {
            font-size: 12px;
            line-height: 1.6;
            color: var(--sidebar-text-secondary);
            margin-top: 12px;
        }

        .detail-page .evaluation-main-content p {
            margin: 8px 0;
        }

        .detail-page .evaluation-main-content strong {
            color: var(--sidebar-text);
            font-weight: 600;
        }

        /* Reasoning section (collapsible) */
        .detail-page .evaluation-reasoning {
            position: relative;
            max-height: 100px;
            overflow: hidden;
            font-size: 13px;
            line-height: 1.7;
            color: var(--sidebar-text);
        }

        .detail-page .evaluation-reasoning p {
            margin: 0 0 12px 0;
        }

        .detail-page .evaluation-reasoning strong {
            font-weight: 600;
            color: var(--sidebar-text);
        }

        .detail-page .evaluation-reasoning::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: linear-gradient(to bottom, transparent, var(--sidebar-bg));
            pointer-events: none;
        }

        .detail-page :root[data-theme="dark"] .evaluation-reasoning::after {
            background: linear-gradient(to bottom, transparent, var(--sidebar-bg));
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-reasoning {
            max-height: 1000px;
        }

        .detail-page .evaluation-toggle:checked ~ .evaluation-reasoning::after {
            display: none;
        }

        /* ===== MAIN CONTENT ===== */
        .detail-page .main {
            background: var(--content-bg);
            min-height: calc(100vh - 52px);
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 40px rgba(0,0,0,0.04);
        }

        /* Subnav */
        .detail-page .subnav {
            background: var(--content-bg);
            border-bottom: 1px solid var(--content-border);
            padding: 0 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;
            position: sticky;
            top: 52px;  /* Под header */
            z-index: 50;
        }

        @media (max-width: 768px) {
            .detail-page .subnav {
               padding: 0 8px;
            }
        }

        .detail-page .subnav-left {
            display: flex;
            align-items: center;
            gap: 12px;
            height: 100%;
        }

        .detail-page .tabs {
            display: flex;
            gap: 4px;
            height: 100%;
        }

        .detail-page .tab {
            font-size: 13px;
            font-weight: 500;
            color: var(--content-text-tertiary);
            padding: 0 14px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 6px;
            border: none;
            background: none;
            cursor: pointer;
            position: relative;
            transition: color 0.15s;
        }

        .detail-page .tab:hover {
            color: var(--content-text-secondary);
        }

        .detail-page .tab.active {
            color: var(--accent);
        }

        .detail-page .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10px;
            right: 10px;
            height: 2px;
            background: var(--accent);
            border-radius: 2px 2px 0 0;
        }

        .detail-page .tab-icon {
            font-size: 14px;
        }

        .detail-page .action-btn {
            font-size: 13px;
            font-weight: 500;
            color: var(--content-text-tertiary);
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            padding: 7px 14px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s;
        }

        .detail-page .action-btn:hover {
            border-color: var(--color-warning);
            background: var(--color-warning-bg);
            color: var(--color-warning);
        }

        /* Favorite button in favorites state */
        .detail-page .action-btn.in-favorites {
            border-color: var(--color-warning);
            background: var(--color-warning-bg);
            color: var(--color-warning);
        }

        /* Adaptation CTA Button */
        .detail-page .adaptation-cta-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 20px 0 24px 0;
            padding: 14px 24px;
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #f7fafc;
            font-size: 14px;
            font-weight: 600;
            border-radius: 10px;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .detail-page .adaptation-cta-btn:hover {
            background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .detail-page .adaptation-cta-btn:active {
            transform: translateY(0);
        }

        .detail-page .adaptation-cta-btn svg {
            width: 18px;
            height: 18px;
        }

        .detail-page :root[data-theme="dark"] .adaptation-cta-btn {
            background: linear-gradient(135deg, #3d4453 0%, #2a2f3c 100%);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .detail-page :root[data-theme="dark"] .adaptation-cta-btn:hover {
            background: linear-gradient(135deg, #4f5666 0%, #3d4453 100%);
        }

        /* Content */
        .detail-page .content {
            flex: 1;
            padding: 32px;
            background: linear-gradient(180deg,
                var(--content-bg) 0%,
                var(--content-subtle) 100%);
        }

        .detail-page .content-wrapper {
            max-width: 700px;
            margin: 0 auto;
        }

        /* Article header */
        .detail-page .article-header {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .detail-page .meta-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .detail-page .meta-tag {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 4px;
            background: var(--content-muted);
            color: var(--content-text-tertiary);
        }

        .detail-page .meta-tag.arxiv {
            background: var(--color-error-bg);
            color: var(--color-error);
        }

        .detail-page .meta-tag.score {
            background: var(--color-success-bg);
            color: var(--color-success);
        }

        .detail-page .meta-tag.pro {
            background: var(--content-text);
            color: var(--content-bg);
        }

        .detail-page .article-title-main {
            font-family: 'Source Serif 4', Georgia, serif;
            font-size: 28px;
            font-weight: 600;
            line-height: 1.35;
            color: var(--content-text);
            margin-bottom: 14px;
            letter-spacing: -0.4px;
        }

        .detail-page .article-lead {
            font-size: 17px;
            color: var(--content-text-secondary);
            line-height: 1.65;
        }

        /* Key Result Block */
        .detail-page .key-result-block {
            background: rgba(247, 250, 252, 0.6);
            border: 1px solid var(--content-border);
            border-radius: 12px;
            padding: 20px 28px 24px 28px;
            margin: 24px 0;
        }

        .detail-page :root[data-theme="dark"] .key-result-block {
            background: rgba(30, 32, 42, 0.4);
        }

        .detail-page .key-result-label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .detail-page .key-result-text {
            font-size: 15px;
            line-height: 1.75;
            color: var(--content-text);
        }

        .detail-page .key-result-text strong {
            font-weight: 700;
            color: var(--content-text);
        }

        .detail-page .key-result-text code {
            background: var(--accent-muted);
            color: var(--accent);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            font-family: 'IBM Plex Mono', monospace;
        }

        .detail-page .key-result-text .highlight-yellow {
            background: linear-gradient(90deg, rgba(219, 234, 254, 0.5) 0%, rgba(219, 234, 254, 0.5) 70%, transparent 100%);
            padding: 0 4px 0 2px;
        }

        .detail-page :root[data-theme="dark"] .key-result-text .highlight-yellow {
            background: linear-gradient(90deg, rgba(103, 126, 234, 0.15) 0%, rgba(103, 126, 234, 0.15) 70%, transparent 100%);
            padding: 0 4px 0 2px;
        }

        /* Tab content */
        .detail-page .tab-content {
            display: none;
        }

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

        /* Cards */
        .detail-page .card {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 10px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .detail-page .card-header {
            padding: 16px 24px;
            background: var(--content-subtle);
            border-bottom: 1px solid var(--content-border);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .detail-page .card-icon {
            font-size: 18px;
        }

        .detail-page .card-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .card-body {
            padding: 24px;
        }

        .detail-page .card-body p {
            font-size: 15px;
            line-height: 1.7;
            color: var(--content-text-secondary);
            margin-bottom: 1em;
        }

        .detail-page .card-body strong {
            color: var(--content-text);
            font-weight: 600;
        }

        .detail-page .card-body h2 {
            font-size: 18px;
            font-weight: 600;
            color: var(--content-text);
            margin: 1.5em 0 0.8em;
        }

        .detail-page .card-body h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--content-text);
            margin: 1.2em 0 0.6em;
        }

        .detail-page .card-body ul, .detail-page .card-body ol {
            margin: 1em 0;
            padding-left: 1.5em;
        }

        .detail-page .card-body li {
            margin-bottom: 0.5em;
            color: var(--content-text-secondary);
            line-height: 1.7;
        }

        /* Code blocks */
        .detail-page .card-body pre {
            background: var(--code-bg);
            color: var(--code-text);
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
            margin: 1em 0;
            font-family: 'IBM Plex Mono', 'Consolas', monospace;
            font-size: 13px;
            line-height: 1.6;
        }

        .detail-page .card-body code {
            font-family: 'IBM Plex Mono', 'Consolas', monospace;
            font-size: 0.9em;
            background: var(--content-muted);
            padding: 2px 6px;
            border-radius: 3px;
            color: var(--accent);
        }

        .detail-page .card-body pre code {
            background: transparent;
            padding: 0;
            color: var(--code-text);
        }

        /* Use cases tags */
        .detail-page .usecase-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 1em 0;
        }

        .detail-page .usecase-tag {
            font-size: 13px;
            padding: 8px 14px;
            background: var(--content-muted);
            border: 1px solid var(--content-border);
            border-radius: 6px;
            color: var(--content-text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }

        .detail-page .usecase-tag:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        /* ===== RIGHT SIDEBAR ===== */
        .detail-page .sidebar-right {
            width: 400px;
            min-width: 400px;
            background: var(--sidebar-bg);
            border-left: 1px solid var(--sidebar-border);
            position: relative;
            overflow: visible;
            display: flex;
            flex-direction: column;
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.02);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
        }

        .detail-page .sidebar-tabs {
            display: flex;
            border-bottom: 1px solid var(--sidebar-border);
            background: var(--sidebar-subtle);
            height: 50px;
            align-items: center;
        }

        .detail-page .sidebar-tab {
            flex: 1;
            padding: 0 8px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            color: var(--sidebar-text-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
            background: transparent;
            border: none;
            border-right: 1px solid var(--sidebar-border);
        }

        .detail-page .sidebar-tab:last-child {
            border-right: none;
        }

        .detail-page .sidebar-tab:hover {
            color: var(--sidebar-text);
            background: var(--sidebar-bg);
        }

        .detail-page .sidebar-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            background: var(--sidebar-bg);
        }

        .detail-page .sidebar-content-tabs {
            flex: 1;
            overflow-y: visible;
            padding: 20px 20px 24px 20px;
        }

        .detail-page .sidebar-tab-panel {
            display: none;
        }

        .detail-page .sidebar-tab-panel.active {
            display: block;
        }

        .detail-page .sidebar-card {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
        }

        .detail-page .sidebar-card h3 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--content-text-muted);
            margin-bottom: 12px;
            font-weight: 600;
        }

        .detail-page .pdf-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: var(--content-subtle);
            border-radius: 6px;
            color: var(--content-text-secondary);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--content-border);
            transition: all 0.15s;
        }

        .detail-page .pdf-link:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .detail-page .category-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .detail-page .category-tag {
            padding: 6px 10px;
            background: var(--content-subtle);
            border-radius: 4px;
            font-size: 12px;
            color: var(--content-text-secondary);
            border: 1px solid var(--content-border);
            transition: all 0.15s;
        }

        .detail-page .category-tag:hover {
            cursor: default;
        }

        /* Digest specific styles */
        .detail-page .digest-section {
            margin-bottom: 24px;
        }

        .detail-page .digest-section h3 {
            font-size: 13px;
            font-weight: 600;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        .detail-page .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, #fef08a 60%);
            padding: 0 2px;
        }

        .detail-page .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, #bfdbfe 60%);
            padding: 0 2px;
        }

        .detail-page .highlight-green {
            background: linear-gradient(180deg, transparent 60%, #bbf7d0 60%);
            padding: 0 2px;
        }

        .detail-page :root[data-theme="dark"] .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, rgba(254, 240, 138, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, rgba(191, 219, 254, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .highlight-green {
            background: linear-gradient(180deg, transparent 60%, rgba(187, 247, 208, 0.3) 60%);
        }

        .detail-page .examples {
            background: var(--content-muted);
            border-radius: 8px;
            padding: 16px;
            font-family: 'IBM Plex Mono', Monaco, monospace;
            font-size: 13px;
            margin: 1em 0;
        }

        .detail-page .examples .bad {
            color: var(--color-error);
            margin-bottom: 12px;
        }

        .detail-page .examples .good {
            color: var(--color-success);
        }

        /* Concepts specific styles */
        .detail-page .concepts-stats {
            display: none;  /* Скрыть статистику */
        }

        .detail-page .concepts-stat-badge {
            background: var(--content-muted);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 12px 20px;
            text-align: center;
            flex: 1;
        }

        .detail-page .concepts-stat-number {
            font-size: 24px;
            font-weight: 600;
            color: var(--accent);
            display: block;
            margin-bottom: 4px;
        }

        .detail-page .concepts-stat-label {
            font-size: 12px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .concept-section {
            margin-bottom: 32px;
        }

        .detail-page .concept-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--content-border);
        }

        .detail-page .concept-section-icon {
            font-size: 20px;
        }

        .detail-page .concept-section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--content-text);
            flex: 1;
        }

        .detail-page .concept-section-count {
            background: var(--accent);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 12px;
        }

        .detail-page .concept-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }

        .detail-page .concept-table th {
            background: var(--content-subtle);
            color: var(--content-text-muted);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--content-border);
        }

        .detail-page .concept-table th:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
        }

        .detail-page .concept-table td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--content-border);
            font-size: 14px;
            color: var(--content-text-secondary);
            line-height: 1.6;
        }

        .detail-page .concept-table td:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .concept-table tr:last-child td {
            border-bottom: none;
        }

        .detail-page .concept-name {
            font-weight: 600;
            color: var(--content-text);
        }

        /* Concepts table (from database) - same styles as concept-table */
        .detail-page .concepts-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }

        .detail-page .concepts-table th {
            background: var(--content-subtle);
            color: var(--content-text-muted);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--content-border);
        }

        .detail-page .concepts-table th:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
        }

        .detail-page .concepts-table td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--content-border);
            font-size: 14px;
            color: var(--content-text-secondary);
            line-height: 1.6;
        }

        .detail-page .concepts-table td:first-child {
            width: 180px;
            min-width: 180px;
            max-width: 180px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .concepts-table tr:last-child td {
            border-bottom: none;
        }

        /* Concepts card (from database) */
        .detail-page .concepts-card {
    padding: 0;
            background: var(--content-bg);
            border-radius: 12px;

            margin-bottom: 24px;
        }

        .detail-page .concepts-title {
            display: none;  /* Скрываем заголовок, есть свой */
        }

        .detail-page .arxiv-link {
            display: inline-block;
            color: var(--accent);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .detail-page .arxiv-link:hover {
            text-decoration: underline;
        }

        .detail-page .concepts-stats {
            display: none;  /* Скрываем статистику */
        }

        .detail-page .stat-badge {
            background: var(--content-subtle);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 8px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            flex: 1;
        }

        .stat-badge.problems .stat-number { color: #dc2626; }
        .stat-badge.methods .stat-number { color: #2563eb; }
        .stat-badge.theses .stat-number { color: #16a34a; }

        .detail-page .stat-number {
            font-size: 20px;
            font-weight: 700;
        }

        .detail-page .stat-label {
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .concepts-meta {
            display: none;  /* Скрываем метаданные */
        }

        .detail-page .meta-item {
            background: var(--content-subtle);
            border-radius: 6px;
            padding: 6px 12px;
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .detail-page .meta-label {
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .meta-value {
            font-size: 13px;
            font-weight: 600;
            color: var(--content-text);
        }

        .detail-page .concepts-section {
            margin-bottom: 28px;
        }

        .detail-page .concepts-section:last-child {
            margin-bottom: 0;
        }

        .detail-page .section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--content-border);
        }

        .detail-page .section-icon {
            font-size: 18px;
            line-height: 1;
        }

        .detail-page .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--content-text);
            flex: 1;
        }

        .detail-page .section-count {
            background: var(--accent);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 24px;
            text-align: center;
        }

        /* Rating card styles - modern & balanced */
        .detail-page .rating-card {
            background: var(--sidebar-subtle);
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }

        .detail-page .rating-score {
            font-size: 52px;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 6px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--color-info) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-align: center;
        }

        .detail-page .rating-verdict {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--sidebar-text-muted);
            text-align: center;
        }

        /* Sidebar sections */
        .detail-page .sidebar-section {
            margin-bottom: 24px;
        }

        .detail-page .sidebar-section-title {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: var(--sidebar-text);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 10px;
        }

        .detail-page .sidebar-insight-box {
            background: white;
            padding: 16px 18px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.7;
            color: var(--sidebar-text);
            border: 1px solid var(--sidebar-border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page .sidebar-card-wrapper {
            margin-bottom: 20px;
        }

        .detail-page .sidebar-card-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
            padding-left: 2px;
        }

        .detail-page .sidebar-principles-box {
            background: white;
            padding: 16px 18px;
            border-radius: 12px;
            border: 1px solid var(--sidebar-border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page .sidebar-principles-box .sidebar-list {
            padding-left: 0;
        }

        .detail-page .sidebar-principles-box .sidebar-list li {
            list-style-type: none;
            padding: 8px 0 8px 20px;
        }

        .detail-page .sidebar-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .detail-page .sidebar-list li {
            font-size: 13px;
            color: var(--sidebar-text);
            padding: 10px 0 10px 20px;
            line-height: 1.6;
            position: relative;
            border-bottom: 1px solid #f1f5f9;
        }

        .detail-page .sidebar-list li:last-child {
            border-bottom: none;
        }

        .detail-page .sidebar-list li:before {
            content: "→";
            color: var(--accent);
            font-weight: 600;
            position: absolute;
            left: 0;
            top: 13px;
            line-height: 1;
        }

        .detail-page .sidebar-section-text {
            font-size: 13px;
            line-height: 1.7;
            color: var(--sidebar-text);
        }

        /* ===== CATEGORIES & USECASES ===== */

        /* Category items with percentage bars */
        .detail-page .category-item {
            margin-bottom: 12px;
        }

        .detail-page .category-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }

        .detail-page .category-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--sidebar-text);
        }

        .detail-page .category-pct {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 12px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
        }

        .detail-page .category-bar {
            height: 4px;
            background: var(--sidebar-subtle);
            border-radius: 2px;
            overflow: hidden;
        }

        .detail-page .category-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), #667eea);
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .detail-page .category-main {
            opacity: 1;
        }

        .detail-page .category-extra {
            opacity: 0.7;
            margin-left: 12px;
        }

        /* Category tags (compact version) */
        .detail-page .category-tags {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .detail-page .category-tag {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 13px;
            color: #334155;
            transition: all 0.2s;
        }

        .detail-page .category-tag:hover {
            border-color: #cbd5e1;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .detail-page :root[data-theme="dark"] .category-tag {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .category-tag span:first-child {
            font-weight: 400;
        }

        .detail-page .category-tag-pct {
            background: #f1f5f9;
            padding: 2px 8px;
            border-radius: 4px;
            color: #64748b;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            font-weight: 600;
        }

        .detail-page .category-tag-main {
            border: 1px solid #dbf5fb;
            background: #f8fcff;
        }

        .detail-page .category-tag-main span:first-child {
            font-weight: 600;
            color: #0f172a;
        }

        .detail-page .category-tag-main .category-tag-pct {
            background: #def2ff;
            color: #5c7379;
        }

        .detail-page .category-tag-expand {
            font-size: 10px;
            color: var(--accent);
        }

        /* Use cases */
        .detail-page .usecase-item {
            background: white;
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            padding: 16px 18px;
            margin-bottom: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: box-shadow 0.2s ease, transform 0.2s ease;
        }

        .detail-page .usecase-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }

        .detail-page :root[data-theme="dark"] .usecase-item {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .usecase-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--sidebar-text);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .detail-page .usecase-name::before {
            content: '→';
            color: var(--accent);
            font-weight: 700;
            font-size: 16px;
        }

        .detail-page .usecase-description {
            font-size: 12px;
            line-height: 1.7;
            color: var(--sidebar-text-secondary);
        }

        /* Collapsible usecases */
        .detail-page .usecases-toggle {
            display: none;
        }

        .detail-page .usecases-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .detail-page .usecases-toggle:checked ~ .usecases-content {
            max-height: 2000px;
        }

        .detail-page .usecases-expand-btn {
            display: block;
            width: 100%;
            margin-top: 12px;
            padding: 8px;
            background: var(--sidebar-subtle);
            border: 1px solid var(--sidebar-border);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            color: var(--accent);
            cursor: pointer;
            text-align: center;
            transition: all 0.15s;
        }

        .detail-page .usecases-expand-btn:hover {
            background: var(--sidebar-border);
        }

        .detail-page .usecases-toggle:checked ~ .usecases-expand-btn {
            display: none;
        }

        /* Thinking section - always visible */
        .detail-page .thinking-section {
            background: white;
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .detail-page :root[data-theme="dark"] .thinking-section {
            background: rgba(255,255,255,0.03);
        }

        .detail-page .thinking-header {
            padding: 14px 18px;
            border-bottom: 1px solid var(--sidebar-border);
        }

        .detail-page .thinking-header-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-page .thinking-text {
            padding: 0;
            font-size: 14px;
            line-height: 1.8;
            color: var(--sidebar-text);
        }

        .detail-page .thinking-text strong {
            color: var(--sidebar-text);
            font-weight: 600;
        }

        .detail-page .thinking-text br + br {
            display: block;
            content: "";
            margin-top: 0.5em;
        }

        /* Meta info */
        .detail-page .meta-row-sidebar {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--sidebar-border);
            font-size: 12px;
        }

        .detail-page .meta-row-sidebar:last-child {
            border-bottom: none;
        }

        .detail-page .meta-label-sidebar {
            color: var(--sidebar-text-muted);
            font-weight: 500;
        }

        .detail-page .meta-value-sidebar {
            color: var(--sidebar-text);
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
        }

        /* ===== EVALUATION SECTION ===== */
        .detail-page .evaluation-section {
            background: linear-gradient(135deg, var(--accent-muted) 0%, var(--color-info-muted) 100%);
            border: 2px solid var(--accent);
            border-radius: 12px;
            padding: 24px;
            margin: 0;
        }

        .detail-page .evaluation-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--accent);
        }

        .detail-page .evaluation-icon {
            font-size: 28px;
        }

        .detail-page .evaluation-header h2 {
            margin: 0;
            font-size: 20px;
            color: var(--content-text);
        }

        .detail-page .evaluation-content {
            line-height: 1.8;
        }

        .detail-page .evaluation-content pre {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
        }

        .detail-page .evaluation-content code {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 13px;
        }

        /* ===== RICH TEXT CONTENT ===== */
        .detail-page .text-article {
            line-height: 1.8;
            color: var(--content-text-secondary);
        }

        .detail-page .text-article h1 {
            font-size: 28px;
            font-weight: 700;
            color: var(--content-text);
            margin: 32px 0 16px 0;
            line-height: 1.3;
        }

        .detail-page .text-article h2 {
            font-size: 18px;
            font-weight: 600;
            color: var(--content-text);
            margin: 4px 0 12px 0;
        }

        .detail-page .text-article h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--content-text);
            margin: 24px 0 12px 0;
        }

        .detail-page .text-article p {
            margin: 16px 0;
            line-height: 1.8;
        }

        .detail-page .text-article strong {
            color: var(--content-text);
            font-weight: 600;
        }

        .detail-page .text-article em {
            font-style: italic;
            color: var(--content-text-secondary);
        }

        .detail-page .text-article code {
            background: var(--content-muted);
            color: var(--accent);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 13px;
            font-weight: 500;
        }

        .text-article ul,
        .detail-page .text-article ol {
            margin: 16px 0;
            padding-left: 24px;
        }

        .detail-page .text-article li {
            margin: 8px 0;
            line-height: 1.7;
        }

        .detail-page .text-article li::marker {
            color: var(--accent);
        }

        .detail-page .text-article blockquote {
            background: rgba(0, 0, 0, 0.02);
            border: none;
            padding: 16px 20px;
            margin: 16px 0;
            font-size: 15px;
            line-height: 1.8;
            font-style: normal;
            color: var(--content-text-secondary);
            border-radius: 8px;
        }

        .detail-page :root[data-theme="dark"] .text-article blockquote {
            background: rgba(255, 255, 255, 0.03);
        }

        /* Professional callout blocks */
        .detail-page .section-card-body > p:first-of-type {
            font-size: 15px;
            line-height: 1.8;
            color: var(--content-text-secondary);
        }

        /* Inline badges for terms */
        .detail-page .section-card-body code {
            background: var(--accent-muted);
            color: var(--accent);
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid rgba(103, 126, 234, 0.15);
        }

        /* Important highlights */
        .section-card-body em strong,
        .detail-page .section-card-body strong em {
            background: linear-gradient(180deg, transparent 65%, rgba(103, 126, 234, 0.15) 65%);
            padding: 0 2px;
        }

        .detail-page .text-article a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.15s;
        }

        .detail-page .text-article a:hover {
            border-bottom-color: var(--accent);
        }

        .detail-page .text-article hr {
            border: none;
            border-top: 2px solid var(--content-border);
            margin: 0;
        }

        /* Code blocks with language labels */
        .detail-page .text-article pre[class*="language-"] {
            position: relative;
            padding-top: 40px;
        }

        .detail-page .text-article pre[class*="language-"]::before {
            content: attr(class);
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'IBM Plex Mono', monospace;
        }

        /* Special highlights in text */
        .detail-page .text-article .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, #fef08a 60%);
            padding: 0 2px;
        }

        .detail-page .text-article .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, #bfdbfe 60%);
            padding: 0 2px;
        }

        .detail-page .text-article .highlight-green {
            background: linear-gradient(180deg, transparent 60%, #bbf7d0 60%);
            padding: 0 2px;
        }

        .detail-page :root[data-theme="dark"] .text-article .highlight-yellow {
            background: linear-gradient(180deg, transparent 60%, rgba(254, 240, 138, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .text-article .highlight-blue {
            background: linear-gradient(180deg, transparent 60%, rgba(191, 219, 254, 0.3) 60%);
        }

        .detail-page :root[data-theme="dark"] .text-article .highlight-green {
            background: linear-gradient(180deg, transparent 60%, rgba(187, 247, 208, 0.3) 60%);
        }

        /* ===== SECTION CARDS ===== */
        .detail-page .section-card {
            background: var(--content-bg);
            border: 1px solid var(--content-border);
            border-radius: 12px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02),
                        0 1px 2px rgba(0, 0, 0, 0.03);
            transition: box-shadow 0.2s;
        }

        .detail-page .section-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04),
                        0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .detail-page .section-card-header {
            padding: 20px 24px 0 24px;
        }

        .detail-page .section-card-icon {
            display: none;
        }

        .detail-page .section-card-title {
            display: block;
            font-size: 10px;
            font-weight: 600;
            color: var(--content-text-muted);
            margin: 0 0 8px 0;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .detail-page .section-card-body {
            padding: 0 24px 24px 24px;
            line-height: 1.8;
            font-size: 16px;
        }

        /* Subsections inside cards */
        .detail-page .section-card-body h3 {
            font-size: 14px;
            font-weight: 600;
            color: var(--content-text);
            margin: 32px 0 16px 0;
            line-height: 1.4;
        }

        .detail-page .section-card-body strong {
            font-weight: 700;
            color: var(--content-text);
        }

        /* NO visual separators inside sections - content flows naturally */

        /* ===== CODE BLOCKS WITH COPY BUTTON ===== */
        .detail-page .text-article pre {
            position: relative;
            background: var(--content-muted);
            border: none;
            border-radius: 8px;
            padding: 48px 16px 16px 16px;
            overflow-x: auto;
            margin: 16px 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            line-height: 1.4;
        }

        .detail-page .text-article pre::before {
            content: attr(data-lang);
            position: absolute;
            top: 12px;
            left: 16px;
            font-size: 11px;
            color: var(--content-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
        }

        .detail-page .text-article pre code {
            background: none;
            padding: 0;
            color: var(--content-text);
            border: none;
        }

        .detail-page .code-copy-btn {
            position: absolute;
            top: 8px;
            right: 12px;
            background: transparent;
            color: var(--content-text-muted);
            border: 1px solid var(--content-border);
            padding: 6px 12px;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .detail-page .code-copy-btn:hover {
            background: var(--content-subtle);
            border-color: var(--content-border-strong);
            color: var(--content-text);
        }

        .detail-page .code-copy-btn:active {
            transform: scale(0.95);
        }

        /* Columns wrapper - default single column */
        .detail-page .sidebar-columns-wrapper {
            display: block;
            overflow: visible;
        }

        .sidebar-column-left,
        .detail-page .sidebar-column-right {
            display: block;
        }

        /* ===== OVERLAY & FAB (для мобильной версии) ===== */
        .detail-page .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1400;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .detail-page .sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        .detail-page .mobile-rating-fab {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 64px;
            height: 64px;
            border-radius: 16px; /* Закругленные углы как у evaluation-score-badge */
            background: #059669; /* Цвет как evaluation-score-badge.score-great */
            box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .detail-page .mobile-rating-fab:hover {
            transform: scale(1.05);
            background: #047857; /* Darker green on hover */
            box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5);
        }

        .detail-page .mobile-rating-fab:active {
            transform: scale(0.95);
        }

        .detail-page .mobile-rating-fab span {
            font-size: 22px;
            font-weight: 700;
            color: white;
            font-family: 'IBM Plex Mono', monospace; /* Как у evaluation-score-badge */
        }

        /* ===== DIGEST STYLES ===== */
        .detail-page .digest-card {
            padding: 0;
        }

        .detail-page .digest-section {
            margin-bottom: 32px;
        }

        .detail-page .digest-section:last-child {
            margin-bottom: 0;
        }

        .detail-page .digest-section h3 {
            font-size: 18px;
            font-weight: 700;
            color: #687490;
            margin: 0 0 12px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #ede9fe;
        }

        .detail-page .digest-section .content {
            font-size: 15px;
            line-height: 1.8;
            color: var(--content-text);
            padding: 0;
            margin: 0;
        }

        .detail-page .digest-section .content strong {
            color: #1f2937;
            font-weight: 700;
        }

        .detail-page .digest-section .content em {
            font-style: italic;
            color: #4b5563;
        }

        .digest-section .content code,
        .detail-page .digest-section .content code {
            background: #f3f4f6;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.9em;
            color: #1f2937;
        }

        /* Highlights */
        .detail-page .highlight-yellow {
            background: linear-gradient(120deg, #fef3c703 0%, #fde68a82 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            color: #92400e;
        }

        .detail-page .highlight-blue {
            background: linear-gradient(120deg, #dbeafe03 0%, #bfdbfe82 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            color: #1e40af;
        }

        .detail-page .highlight-green {
            background: linear-gradient(120deg, #d1fae503 0%, #a7f3d082 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            color: #065f46;
        }

        /* Examples */
        .detail-page .digest-section .examples {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 16px;
            background: none;
            padding: 0;
            font-family: inherit;
            font-size: inherit;
        }

        .digest-section .examples .bad,
        .detail-page .digest-section .examples .good {
            padding: 16px 20px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.7;
            position: relative;
            border-left: 4px solid;
        }

        .detail-page .digest-section .examples .bad {
            background: #fef2f2;
            border-left-color: #ef4444;
            color: #7f1d1d;
        }

        .detail-page .digest-section .examples .bad strong {
            color: #991b1b;
            font-weight: 700;
        }

        .detail-page .digest-section .examples .good {
            background: #f0fdf4;
            border-left-color: #10b981;
            color: #14532d;
        }

        .detail-page .digest-section .examples .good strong {
            color: #166534;
            font-weight: 700;
        }

        /* Source and Meta */
        .detail-page .digest-card .source {
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid var(--content-border);
            font-size: 13px;
            font-style: italic;
            color: var(--content-text-muted);
        }

        .detail-page .digest-card .meta {
            margin-top: 12px;
            font-size: 12px;
            color: var(--content-text-muted);
            opacity: 0.7;
        }

        /* ===== WIDE SCREENS (2 COLUMN SIDEBAR) ===== */
        @media (min-width: 1800px) {
            /* Collapsed state for wide screens */
            .detail-page .sidebar-right.collapsed {
                width: 48px;
                min-width: 48px;
            }

            .detail-page .app:has(.sidebar-right.collapsed) {
                grid-template-columns: 280px 1fr 48px;
            }

            /* Info tab - remove default padding as parent has it */
            .detail-page #sidebar-info {
                padding: 0;
            }

            /* Evaluation block */
            .detail-page #sidebar-info > .evaluation-block {
                margin-bottom: 20px;
            }

            /* Columns wrapper becomes grid */
            .detail-page .sidebar-columns-wrapper {
                display: grid;
                grid-template-columns: 1fr 1px 1fr;
                gap: 0;
                align-items: start;
                overflow: visible;
            }

            /* Left column */
            .detail-page .sidebar-column-left {
                grid-column: 1;
                padding-right: 20px;
            }

            /* Vertical divider line */
            .detail-page .sidebar-columns-wrapper::after {
                content: '';
                grid-column: 2;
                grid-row: 1;
                background: var(--sidebar-border);
                width: 1px;
                height: 100%;
            }

            /* Right column */
            .detail-page .sidebar-column-right {
                grid-column: 3;
                padding-left: 20px;
            }
        }

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

        /* Breakpoint 1: 1500px - Уменьшить sidebar */
        @media (max-width: 1500px) {
            .detail-page .sidebar-right {
                width: 350px;
                min-width: 350px;
            }

            .detail-page .app {
                grid-template-columns: 280px 1fr 350px;
            }

            .detail-page .app:has(.sidebar-right.collapsed) {
                grid-template-columns: 280px 1fr 48px;
            }
        }

        /* Breakpoint 2: 1200px - Sidebar overlay справа */
        @media (max-width: 1200px) {
            .detail-page .sidebar-right {
                position: fixed;
                right: -400px;
                top: 52px;
                width: 400px;
                height: calc(100vh - 52px);
                z-index: 1500;
                transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .detail-page .sidebar-right.open {
                right: 0;
                box-shadow: -4px 0 20px rgba(0,0,0,0.2);
            }

            .detail-page .sidebar-tabs {
                height: 54px; /* Увеличено для планшетов */
            }

            .detail-page .sidebar-tab {
                padding: 10px 8px;
                font-size: 13px;
            }

            .detail-page .app {
                grid-template-columns: 280px 1fr;
            }


            .detail-page .mobile-rating-fab {
                display: flex;  /* Показать FAB на планшетах */
            }

        }

        /* Кнопка закрытия для мобильных - скрыта по умолчанию */
        .detail-page .sidebar-mobile-close {
            display: none;
        }

        /* Breakpoint 3: 768px - Мобильная версия снизу */
        @media (max-width: 768px) {
            .detail-page .sidebar-left {
                display: none;
            }

            .detail-page .sidebar-right {
                position: fixed;
                bottom: -80vh;
                right: 0;
                left: 0;
                top: auto;
                width: 100%;
                height: 80vh;
                border-radius: 16px 16px 0 0;
                transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                padding-top: 0;
                z-index: 1500;
                display: flex;
                flex-direction: column;
            }

            .detail-page .sidebar-right.open {
                bottom: 0;
                right: 0;
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
            }

            /* Кнопка закрытия для мобильных - полоска над блоком */
            .detail-page .sidebar-mobile-close {
                display: none; /* Скрыта по умолчанию */
                position: absolute;
                top: -40px;
                left: 0;
                width: 100%;
                height: 40px;
                padding: 0;
                background: #365bb2;
                border: none;
                border-radius: 0;
                color: #fff;
                cursor: pointer;
                z-index: 10;
                transition: all 0.2s ease;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 500;
            }

            .detail-page .sidebar-right.open .sidebar-mobile-close {
                display: flex; /* Показываем только когда sidebar открыт */
            }

            .detail-page .sidebar-mobile-close:hover {
                background: #2d4a92;
            }

            .detail-page .sidebar-mobile-close:active {
                background: #1f3366;
            }

            .detail-page .sidebar-tabs {
                height: 56px; /* Увеличено для удобства тача на мобильных */
                flex-shrink: 0;
            }

            .detail-page .sidebar-tab {
                padding: 12px 8px; /* Увеличен вертикальный padding */
                font-size: 14px;
            }

            /* Прокрутка внутри sidebar-content-tabs */
            .detail-page .sidebar-content-tabs {
                flex: 1;
                overflow-y: auto !important;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
            }

            .detail-page .sidebar-toggle-btn {
                display: none;
            }

            .detail-page .mobile-rating-fab {
                display: flex;
            }

            .detail-page .app {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .detail-page .header-stats {
                display: none;
            }

            .detail-page .article-title-main {
                font-size: 22px;
            }

            .detail-page .content {
                padding: 20px 16px;
            }
        }

        /* ===== PRO CONTENT LOCK STUB ===== */
        .detail-page .pro-content-lock {
            text-align: center;
            padding: 40px 32px 44px 32px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.03) 0%, rgba(249, 115, 22, 0.03) 100%);
            border: 2px solid rgba(251, 191, 36, 0.2);
            border-radius: 12px;
            margin: 0;
            box-shadow: 0 4px 16px rgba(251, 191, 36, 0.08);
            overflow: visible;
        }

        .detail-page .pro-lock-icon {
            width: 32px;
            height: 32px;
            margin: 0 auto 16px;
            padding: 8px;
            background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
            border-radius: 8px;
        }

        .detail-page .pro-lock-icon svg {
            width: 100%;
            height: 100%;
            stroke: white;
        }

        .detail-page .pro-lock-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--content-text);
            line-height: 1.3;
        }

        .detail-page .pro-lock-description {
            font-size: 14px;
            line-height: 1.6;
            margin: 0 auto 28px auto !important;
            padding: 0 20px;
            color: var(--content-text-secondary);
            max-width: 560px;
            text-align: center !important;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }

        .detail-page .text-article .pro-lock-description {
            margin: 0 auto 28px auto !important;
            text-align: center !important;
        }

        .detail-page .pro-lock-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
            overflow: visible;
        }

        .detail-page .pro-lock-btn {
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none !important;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            transition: all 0.2s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-sizing: border-box;
            min-height: 44px;
            border-bottom: none !important;
        }

        .pro-lock-btn:hover,
        .pro-lock-btn:focus,
        .detail-page .pro-lock-btn:active {
            text-decoration: none !important;
            border-bottom: none !important;
        }

        .text-article .pro-lock-btn,
        .text-article .pro-lock-btn:hover,
        .text-article .pro-lock-btn:focus,
        .detail-page .text-article .pro-lock-btn:active {
            border-bottom: none !important;
            text-decoration: none !important;
        }

        .detail-page .pro-lock-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .detail-page .pro-lock-btn-primary {
            background: var(--accent);
            color: white !important;
            border: 2px solid var(--accent);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
        }

        .detail-page .pro-lock-btn-primary svg {
            stroke: white;
        }

        .detail-page .pro-lock-btn-primary:hover {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
            transform: translateY(-1px);
        }

        .detail-page .pro-lock-btn-secondary {
            background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
            color: white !important;
            border: 2px solid #f97316;
            border-bottom: 2px solid #f97316 !important;
            box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
        }

        .detail-page .pro-lock-btn-secondary svg {
            stroke: white;
        }

        .detail-page .pro-lock-btn-secondary:hover {
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
            border: 2px solid #ea580c;
            border-bottom: 2px solid #ea580c !important;
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
            transform: translateY(-1px);
            color: white !important;
            text-decoration: none !important;
        }

        /* Orange button width fix for desktop */
        @media (min-width: 769px) {
            .detail-page .pro-lock-actions > .pro-lock-btn-secondary {
                width: auto;
                max-width: 220px;
                align-self: center;
                margin-top: 8px;
            }

            .detail-page .pro-lock-actions {
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
        }

        @media (max-width: 768px) {
            .detail-page .pro-content-lock {
                padding: 32px 24px;
                margin: 24px 0;
            }

            .detail-page .pro-lock-icon {
                width: 28px;
                height: 28px;
                margin-bottom: 12px;
            }

            .detail-page .pro-lock-title {
                font-size: 16px;
            }

            .detail-page .pro-lock-description {
                font-size: 12px;
                margin-bottom: 20px;
            }

            .detail-page .pro-lock-actions {
                flex-direction: column;
                gap: 10px;
            }

            .detail-page .pro-lock-btn {
                width: 100%;
                justify-content: center;
            }
        }

        /* ===== RESEARCH ADAPTATION STYLES - DARK MODE CLEAN ===== */
        .detail-page .research-adaptation-section {
            margin: 0;
            width: 100%;

            padding: 48px 0;
            background: #1a1a2e;
            border-top: 1px solid rgba(102, 126, 234, 0.2);
            border-bottom: 1px solid rgba(102, 126, 234, 0.2);
        }

        /* Inner container to constrain content width */
        .detail-page .research-adaptation-section > * {
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
        }

        .detail-page .research-adaptation-section h2 {
            color: #ffffff;
            margin-bottom: 12px;
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .detail-page .research-adaptation-section h2 .section-icon {
            flex-shrink: 0;
        }

        /* SVG Icons in buttons */
        .adapt-btn svg,
        .prompt-btn svg,
        .detail-page .adaptation-cta-btn svg {
            vertical-align: middle;
            flex-shrink: 0;
        }

        /* Spinner animation */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .detail-page .spinner-icon {
            animation: spin 1s linear infinite;
        }

        /* Button text with icons */
        .btn-text,
        .detail-page .btn-loading {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-text svg,
        .detail-page .btn-loading svg {
            flex-shrink: 0;
        }

        .detail-page .adaptation-description {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 32px;
            font-size: 15px;
            line-height: 1.6;
            text-align: center;
        }

        .detail-page .adaptation-form-container {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 28px;
            margin-bottom: 24px;
        }

        .detail-page .model-selection {
            margin-bottom: 20px;
        }

        .detail-page .form-label {
            display: block;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
            font-size: 14px;
            letter-spacing: 0.3px;
        }

        .detail-page .model-select {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            transition: all 0.3s ease;
        }

        .detail-page .model-select:focus {
            outline: none;
            border-color: rgba(102, 126, 234, 0.6);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }

        .detail-page .model-select option {
            background: #1a1a2e;
            color: #ffffff;
        }

        .detail-page .request-input-container {
            margin-bottom: 20px;
        }

        .detail-page .user-request-input {
            width: 100%;
            padding: 14px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            resize: vertical;
            min-height: 120px;
            transition: all 0.3s ease;
            line-height: 1.6;
        }

        .detail-page .user-request-input:focus {
            outline: none;
            border-color: rgba(102, 126, 234, 0.6);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }

        .detail-page .user-request-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .detail-page .textarea-bottom-panel {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            gap: 12px;
        }

        .detail-page .left-controls {
            display: flex;
            align-items: center;
        }

        .detail-page .nova-adaptation-clear-btn-compact {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.7);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .detail-page .nova-adaptation-clear-btn-compact svg {
            flex-shrink: 0;
            vertical-align: middle;
        }

        .detail-page .nova-adaptation-clear-btn-compact:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            border-color: rgba(239, 68, 68, 0.5);
            transform: translateY(-1px);
        }

        .detail-page .character-counter {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
        }

        /* ===== FORM ACTIONS ===== */
        .detail-page .form-actions {
            display: flex;
            flex-direction: row;
            gap: 16px;
            margin-top: 20px;
        }

        .detail-page .action-button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 50%;
            flex: 1;
        }

        .detail-page .adapt-btn, .detail-page .prompt-btn {
            width: 100%;
            padding: 14px 24px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.3px;
        }

        .detail-page .adapt-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .detail-page .adapt-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .detail-page .prompt-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 2px solid rgba(102, 126, 234, 0.5);
            color: #ffffff;
        }

        .detail-page .prompt-btn:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.8);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .detail-page .cost-time-indicator {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
        }

        .detail-page .cost-estimate, .detail-page .time-estimate {
            font-weight: 500;
        }

        .detail-page .cost-estimate {
            color: #ffd700;
        }

        .detail-page .time-estimate {
            color: rgba(255, 255, 255, 0.7);
        }

        /* ===== N-TOKENS BALANCE STYLES - DARK MODE ===== */
        .detail-page .n-tokens-balance-section {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            margin-bottom: 24px;
            padding: 24px;
        }

        .detail-page .token-balance-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .detail-page .token-balance-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .detail-page .balance-title {
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            flex: 1;
            font-size: 16px;
            letter-spacing: 0.3px;
        }

        .detail-page .refresh-balance-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.7);
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .detail-page .refresh-balance-btn svg {
            transition: transform 0.3s ease;
        }

        .detail-page .refresh-balance-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #ffd700;
        }

        .detail-page .refresh-balance-btn:hover svg {
            transform: rotate(180deg);
        }

        .detail-page .token-balance-info {
            display: flex;
            align-items: baseline;
            gap: 8px;
            justify-content: center;
            padding: 12px 0;
        }

        .detail-page .balance-amount {
            font-size: 42px;
            font-weight: 700;
            color: #ffd700;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            letter-spacing: -1px;
        }

        .detail-page .balance-unit {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 500;
        }

        .detail-page .balance-hint {
            text-align: center;
        }

        .detail-page .history-link {
            color: rgba(102, 126, 234, 0.9);
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.3s ease;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid rgba(102, 126, 234, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .detail-page .history-link svg {
            flex-shrink: 0;
            vertical-align: middle;
        }

        .detail-page .history-link:hover {
            color: #ffffff;
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.6);
        }

        /* ===== RESULT CONTAINER STYLES - DARK MODE ===== */
        .detail-page .result-container {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 28px;
            margin-top: 28px;
        }

        .detail-page .result-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .detail-page .result-header h3 {
            color: rgba(255, 255, 255, 0.95);
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }

        .detail-page .result-meta {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            flex-wrap: wrap;
        }

        .detail-page .result-content {
            margin-bottom: 20px;
        }

        .detail-page .result-text {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            padding: 18px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
        }

        .detail-page .result-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .detail-page .copy-btn, .detail-page .download-btn {
            padding: 10px 18px;
            border: 1px solid rgba(102, 126, 234, 0.5);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .detail-page .copy-btn:hover, .detail-page .download-btn:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        }

        .detail-page .copy-btn:active, .detail-page .download-btn:active {
            transform: translateY(0);
        }

        /* ===== RESPONSIVE ADAPTATION FORM ===== */
        @media (max-width: 768px) {
            .detail-page .research-adaptation-section {
            margin: 0;
                margin: 0;
                padding: 32px 0;
            }

            .detail-page .research-adaptation-section > * {
                padding-left: 20px;
                padding-right: 20px;
            }

            .detail-page .research-adaptation-section h2 {
                font-size: 22px;
            }

            .detail-page .adaptation-description {
                font-size: 14px;
            }

            .detail-page .adaptation-form-container {
                padding: 20px;
            }

            .detail-page .form-actions {
                flex-direction: column;
                gap: 16px;
            }

            .detail-page .action-button-group {
                width: 100%;
                flex-direction: column;
            }

            .detail-page .adapt-btn, .detail-page .prompt-btn {
                width: 100%;
                padding: 14px 24px;
            }

            .detail-page .n-tokens-balance-section {
                padding: 20px;
            }

            .detail-page .balance-amount {
                font-size: 36px;
            }

            .detail-page .result-container {
                padding: 20px;
            }

            .detail-page .result-text {
                font-size: 14px;
            }

            .detail-page .copy-btn, .detail-page .download-btn {
                width: 100%;
                justify-content: center;
            }
        }

        /* ========================================
           FILTERS DRAWER STYLES
           ======================================== */

        /* Sidebar Header with Filters Button */
        /* Filters Button - Full Width */
        .detail-page .filters-btn-full {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            margin-bottom: 16px;
            background: var(--sidebar-subtle);
            border: 1px solid var(--sidebar-border);
            border-radius: 6px;
            color: var(--sidebar-text);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .filters-btn-full:hover {
            background: var(--sidebar-bg);
            border-color: var(--accent);
            color: var(--accent);
        }

        .detail-page .filters-btn-full.active {
            border-color: var(--accent);
            color: var(--accent);
        }

        .detail-page .filters-btn-full svg {
            flex-shrink: 0;
        }

        /* Sort Group */
        .detail-page .sort-group {
            margin-top: 12px;
        }

        .detail-page .sort-buttons {
            display: flex;
            gap: 8px;
        }

        .detail-page .sort-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 12px;
            border: 1px solid var(--sidebar-border);
            border-radius: 8px;
            background: transparent;
            color: var(--sidebar-text-secondary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .sort-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .detail-page .sort-btn:hover {
            background: var(--sidebar-subtle);
            border-color: var(--sidebar-border-hover);
        }

        .detail-page .sort-btn.active {
            background: var(--sidebar-subtle);
            border-color: var(--sidebar-border-hover);
            color: var(--sidebar-text);
            font-weight: 600;
        }

        .detail-page .sort-btn.active:hover {
            background: var(--sidebar-border);
        }

        .detail-page .sort-arrow {
            margin-left: 2px;
            opacity: 0;
            transition: opacity 0.2s ease, transform 0.3s ease;
            transform: rotate(0deg);
        }

        .detail-page .sort-btn.active .sort-arrow {
            opacity: 1;
        }

        .detail-page .sort-btn[data-direction="asc"] .sort-arrow {
            transform: rotate(180deg);
        }

        /* Sidebar Footer */
        .detail-page .sidebar-footer {
            flex-shrink: 0;
            padding: 12px;
            border-top: 1px solid var(--sidebar-border);
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.9) 100%);
            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
        }

        .detail-page :root[data-theme="dark"] .sidebar-footer {
            background: linear-gradient(180deg, rgba(30, 32, 42, 0.5) 0%, rgba(20, 22, 32, 0.7) 100%);
            box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.3);
        }

        .detail-page .btn-load-more {
            width: 100%;
            padding: 10px 16px;
            background: transparent;
            border: 1.5px solid var(--sidebar-border);
            border-radius: 8px;
            color: var(--sidebar-text);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .detail-page .btn-load-more:hover {
            background: var(--sidebar-subtle);
            border-color: var(--sidebar-border-hover);
        }

        .detail-page .btn-load-more:active {
            transform: translateY(1px);
        }

        .detail-page .load-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        .detail-page .load-text {
            font-size: 14px;
        }

        .detail-page .load-count {
            display: block;
            text-align: center;
            font-size: 11px;
            color: var(--sidebar-text-muted);
            margin-top: 4px;
            font-weight: 400;
        }

        .detail-page .footer-divider {
            height: 1px;
            background: var(--sidebar-border);
            margin: 10px 0 8px 0;
            opacity: 0.5;
        }

        .detail-page .link-extended-selection {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 13px;
            color: var(--sidebar-text-secondary);
            text-decoration: none;
            transition: all 0.2s ease;
            padding: 4px 0;
        }

        .detail-page .link-extended-selection:hover {
            color: var(--sidebar-text);
        }

        .detail-page .link-extended-selection .arrow-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .detail-page .link-extended-selection:hover .arrow-icon {
            transform: translateX(3px);
        }

        /* Drawer Overlay - Full screen except header */
        .detail-page .drawer-overlay {
            position: fixed;
            top: 52px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0s 0.3s;
        }

        .detail-page .drawer-overlay.active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s ease, visibility 0s;
        }

        /* Filters Drawer */
        .detail-page .filters-drawer {
            position: fixed;
            top: 52px;
            left: 0;
            width: 400px;
            height: calc(100vh - 52px);
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
            border-right: 1px solid #cbd5e1;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .detail-page .filters-drawer.active {
            transform: translateX(0);
        }

        .detail-page .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid #e2e8f0;
            background: #ffffff;
        }

        .detail-page .drawer-header h2 {
            font-size: 18px;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
        }

        .detail-page .drawer-close {
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            color: #475569;
            cursor: pointer;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .detail-page .drawer-close:hover {
            background: #e2e8f0;
            border-color: var(--accent);
            color: var(--accent);
        }

        .detail-page .drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        .detail-page .drawer-footer {
            display: flex;
            gap: 12px;
            padding: 20px 24px;
            border-top: 1px solid #e2e8f0;
            background: #ffffff;
        }

        /* Filter Sections */
        .detail-page .filter-section {
            margin-bottom: 32px;
        }

        .detail-page .filter-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 12px;
        }

        .detail-page .filter-values {
            font-size: 12px;
            color: var(--accent);
            font-weight: 600;
        }

        /* Rating Slider */
        .detail-page .rating-slider-container {
            margin-bottom: 16px;
        }

        .detail-page .rating-distribution {
            margin-bottom: 20px;
        }

        .detail-page .distribution-bar {
            height: 8px;
            border-radius: 8px;
            /* Gradient reflects actual paper distribution: gray → orange → green */
            background: linear-gradient(
                90deg,
                #94a3b8 0%,      /* Gray 10-50: minimal papers */
                #94a3b8 8%,      /* Keep gray until 8% */
                #cbd5e1 12%,     /* Light gray 50-60 */
                #9ca3af 18%,     /* Gray 60-70: 14.9% papers */
                #fbbf24 28%,     /* Yellow 70-80: 17.0% papers */
                #f97316 50%,     /* Orange 80-90: 36.9% papers */
                #059669 75%,     /* Green 90-95 */
                #047857 100%     /* Dark green 95-100: excellent papers */
            );
            margin-bottom: 16px;
            position: relative;
            cursor: pointer;
        }

        .detail-page .selected-range {
            position: absolute;
            top: 0;
            height: 8px;
            background: linear-gradient(90deg,
                rgba(102, 126, 234, 0.5) 0%,
                rgba(118, 75, 162, 0.5) 100%
            );
            border-radius: 8px;
            pointer-events: none;
            backdrop-filter: brightness(0.9);
        }

        .detail-page .rating-handle {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background: #ffffff;
            border: 3px solid var(--accent);
            border-radius: 50%;
            cursor: grab;
            z-index: 10;
            transition: border-width 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .detail-page .rating-handle:hover {
            border-width: 4px;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .detail-page .rating-handle:active {
            cursor: grabbing;
            transform: translate(-50%, -50%) scale(0.95);
        }

        .detail-page .distribution-labels {
            position: relative;
            height: 16px;
            font-size: 10px;
            color: #64748b;
            margin-top: 4px;
        }

        .detail-page .distribution-labels span {
            position: absolute;
            transform: translateX(-50%);
        }

        .distribution-labels span:nth-child(1) { left: 0%; transform: translateX(0); }      /* 10 */
        .distribution-labels span:nth-child(2) { left: 8%; }    /* 50 - closer to start, end of gray */
        .distribution-labels span:nth-child(3) { left: 23%; }   /* 70 - yellow zone */
        .distribution-labels span:nth-child(4) { left: 39%; }   /* 80 - orange zone */
        .distribution-labels span:nth-child(5) { left: 75%; }   /* 90 - red zone */
        .distribution-labels span:nth-child(6) { left: 100%; transform: translateX(-100%); } /* 100 */



        /* Multi-Select */
        .detail-page .multiselect-wrapper {
            position: relative;
        }

        .detail-page .multiselect-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .multiselect-header:hover {
            border-color: var(--accent);
        }

        .detail-page .multiselect-header.active {
            border-color: var(--accent);
        }

        .detail-page .multiselect-placeholder {
            font-size: 13px;
            color: #475569;
        }

        .detail-page .multiselect-arrow {
            flex-shrink: 0;
            transition: transform 0.2s ease;
            color: #64748b;
        }

        .detail-page .multiselect-header.active .multiselect-arrow {
            transform: rotate(180deg);
        }

        .detail-page .multiselect-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 50;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        .detail-page .multiselect-dropdown.active {
            max-height: 300px;
            opacity: 1;
            visibility: visible;
            overflow-y: auto;
        }

        .detail-page .multiselect-search {
            padding: 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .detail-page .multiselect-search-input {
            width: 100%;
            padding: 8px 12px;
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            color: #1e293b;
            font-size: 13px;
        }

        .detail-page .multiselect-search-input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .detail-page .multiselect-options {
            padding: 8px;
            overflow-y: auto;
            max-height: 250px;
            flex: 1;
        }

        .detail-page .multiselect-apply-btn {
            position: sticky;
            bottom: 0;
            padding: 12px;
            border-top: 1px solid #e2e8f0;
            background: #ffffff;
            flex-shrink: 0;
        }

        .detail-page .multiselect-apply-btn button {
            width: 100%;
            padding: 8px 16px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .detail-page .multiselect-apply-btn button:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .detail-page .multiselect-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s ease;
        }

        .detail-page .multiselect-option:hover {
            background: #f8fafc;
        }

        .detail-page .multiselect-option input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--accent);
        }

        .detail-page .multiselect-option span {
            font-size: 13px;
            color: #475569;
        }

        /* Toggle Group */
        .detail-page .toggle-group {
            display: flex;
            gap: 12px;
        }

        .detail-page .toggle-option {
            flex: 1;
            cursor: pointer;
        }

        .detail-page .toggle-option input[type="checkbox"] {
            display: none;
        }

        .detail-page .toggle-btn {
            display: block;
            padding: 10px;
            text-align: center;
            background: #ffffff;
            border: 2px solid #cbd5e1;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
            transition: all 0.2s ease;
        }

        .detail-page .toggle-option input[type="checkbox"]:checked + .toggle-btn {
            background: rgba(37, 99, 235, 0.1);
            border-color: var(--accent);
            color: var(--accent);
        }

        /* Drawer Buttons */
        .detail-page .btn {
            flex: 1;
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .detail-page .btn-reset {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
        }

        .detail-page .btn-reset:hover {
            background: #e2e8f0;
        }

        .detail-page .btn-apply {
            background: var(--accent);
            color: white;
            border: none;
        }

        .detail-page .btn-apply:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .detail-page .filters-drawer {
                width: 100%;
                max-width: 400px;
            }
        }

        /* Extra Small Screens - Full Width Cards */
        @media (max-width: 420px) {
            .detail-page .content {
                padding: 20px 0px;
            }

            .detail-page .section-card {
                border-radius: 0;
                margin-bottom: 0;
            }

            .detail-page .key-result-block {
                border-radius: 0;
                margin-bottom: 0;
            }

            .detail-page .article-title-main {
                padding-left: 24px;
                padding-right: 24px;
            }

            .detail-page .meta-row {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
/* ========================================
   RESEARCH LISTING PAGE SPECIFIC STYLES
   ======================================== */

/* Filters Sidebar (for listing page) */
.listing-page .filters-drawer {
    position: sticky;
    top: 52px;
    left: 0;
    width: 320px;
    height: calc(100vh - 52px);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    border-right: 1px solid #cbd5e1;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Dark theme for filters sidebar */
:root[data-theme="dark"] .listing-page .filters-drawer {
    background: linear-gradient(135deg, #111113 0%, #16161a 50%, #1c1c21 100%);
    border-right: 1px solid #27272a;
}

/* Hide close button on desktop for listing page */
.listing-page .drawer-close {
    display: none;
}

/* Drawer content should scroll */
.listing-page .drawer-content {
    overflow-y: auto;
    flex: 1;
}

.listing-page .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.listing-page .drawer-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.listing-page .drawer-close {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    cursor: pointer;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.listing-page .drawer-close:hover {
    background: #e2e8f0;
    border-color: var(--accent);
    color: var(--accent);
}

.listing-page .drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.listing-page .drawer-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

/* Filter Sections */
.listing-page .filter-section {
    margin-bottom: 32px;
}

.listing-page .filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.listing-page .filter-values {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
}

/* Rating Slider */
.listing-page .rating-slider-container {
    margin-bottom: 16px;
}

.listing-page .rating-distribution {
    margin-bottom: 20px;
}

.listing-page .distribution-bar {
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        #94a3b8 0%,
        #94a3b8 8%,
        #cbd5e1 12%,
        #9ca3af 18%,
        #fbbf24 28%,
        #f97316 50%,
        #059669 75%,
        #047857 100%
    );
    margin-bottom: 16px;
    position: relative;
    cursor: pointer;
}

.listing-page .selected-range {
    position: absolute;
    top: 0;
    height: 8px;
    background: linear-gradient(90deg,
        rgba(102, 126, 234, 0.5) 0%,
        rgba(118, 75, 162, 0.5) 100%
    );
    border-radius: 8px;
    pointer-events: none;
    backdrop-filter: brightness(0.9);
}

.listing-page .rating-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 3px solid var(--accent);
    border-radius: 50%;
    cursor: grab;
    z-index: 10;
    transition: border-width 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.listing-page .rating-handle:hover {
    border-width: 4px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.listing-page .rating-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(0.95);
}

.listing-page .distribution-labels {
    position: relative;
    height: 16px;
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
}

.listing-page .distribution-labels span {
    position: absolute;
    transform: translateX(-50%);
}

.listing-page .distribution-labels span:nth-child(1) { left: 0%; transform: translateX(0); }
.listing-page .distribution-labels span:nth-child(2) { left: 8%; }
.listing-page .distribution-labels span:nth-child(3) { left: 23%; }
.listing-page .distribution-labels span:nth-child(4) { left: 39%; }
.listing-page .distribution-labels span:nth-child(5) { left: 75%; }
.listing-page .distribution-labels span:nth-child(6) { left: 100%; transform: translateX(-100%); }

/* Multi-Select */
.listing-page .multiselect-wrapper {
    position: relative;
}

.listing-page .multiselect-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.listing-page .multiselect-header:hover {
    border-color: var(--accent);
}

.listing-page .multiselect-header.active {
    border-color: var(--accent);
}

.listing-page .multiselect-placeholder {
    font-size: 13px;
    color: #475569;
}

.listing-page .multiselect-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #64748b;
}

.listing-page .multiselect-header.active .multiselect-arrow {
    transform: rotate(180deg);
}

.listing-page .multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.listing-page .multiselect-dropdown.active {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
}

.listing-page .multiselect-search {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.listing-page .multiselect-search-input {
    width: 100%;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #1e293b;
    font-size: 13px;
}

.listing-page .multiselect-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.listing-page .multiselect-options {
    padding: 8px;
    overflow-y: auto;
    max-height: 250px;
    flex: 1;
}

.listing-page .multiselect-apply-btn {
    position: sticky;
    bottom: 0;
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    flex-shrink: 0;
}

.listing-page .multiselect-apply-btn button {
    width: 100%;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.listing-page .multiselect-apply-btn button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.listing-page .multiselect-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.listing-page .multiselect-option:hover {
    background: #f8fafc;
}

.listing-page .multiselect-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.listing-page .multiselect-option span {
    font-size: 13px;
    color: #475569;
}

/* Toggle Group */
.listing-page .toggle-group {
    display: flex;
    gap: 12px;
}

.listing-page .toggle-option {
    flex: 1;
    cursor: pointer;
}

.listing-page .toggle-option input[type="checkbox"] {
    display: none;
}

.listing-page .toggle-btn {
    display: block;
    padding: 10px;
    text-align: center;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s ease;
}

.listing-page .toggle-option input[type="checkbox"]:checked + .toggle-btn {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

/* Listing App Layout */
.listing-page .listing-app {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: calc(100vh - 52px);
    margin-top: 52px;
}

.listing-page .listing-main {
    padding: 0;
    background: var(--content-muted);
    width: 100%;
}

/* Page Header */
.listing-page .page-header {
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
    padding: 24px 40px 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.listing-page .page-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--content-text);
    margin: 0;
}

.listing-page .bot-cta-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    border-radius: 8px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.25);
    flex-shrink: 0;
}

.listing-page .bot-cta-compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.35);
}

.listing-page .bot-cta-compact svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.listing-page .bot-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.listing-page .bot-cta-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.listing-page .bot-cta-subtitle {
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.9;
    font-weight: 400;
}

/* Subnav Controls */
.listing-page .subnav {
    position: sticky;
    top: 52px;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
    padding: 14px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 90;
}

.listing-page .subnav-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.listing-page .research-count {
    font-size: 15px;
    color: var(--content-text-secondary);
}

.listing-page .research-count strong {
    color: var(--content-text);
    font-weight: 600;
}

.listing-page .btn-user {
    background: var(--accent);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.listing-page .btn-user:hover {
    background: var(--accent-hover);
}

.listing-page .subnav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.listing-page .view-toggle {
    display: flex;
    gap: 4px;
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    border-radius: 6px;
    padding: 2px;
}

.listing-page .view-toggle-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
    color: var(--content-text-tertiary);
}

.listing-page .view-toggle-btn:hover {
    color: var(--content-text);
}

.listing-page .view-toggle-btn.active {
    background: var(--accent);
    color: white;
}

.listing-page .sort-select {
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    padding: 8px 32px 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Research Cards Grid */
.listing-page .research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 32px 40px 48px 40px;
}

/* List View */
.listing-page .research-grid.list-view {
    grid-template-columns: 1fr;
    gap: 12px;
}

.listing-page .research-grid.list-view .research-card {
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    padding: 24px;
    padding-bottom: 24px;
}

.listing-page .research-grid.list-view .card-header {
    grid-column: 1;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
    padding-right: 32px;
    border-right: 1px solid var(--content-border);
}

.listing-page .research-grid.list-view .card-title {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.4;
}

.listing-page .research-grid.list-view .card-rating {
    margin-top: auto;
}

.listing-page .research-grid.list-view .key-result-preview {
    grid-column: 2;
    grid-row: 1 / 3;
    padding-left: 32px;
    font-size: 15px;
    line-height: 1.6;
}

.listing-page .research-grid.list-view .card-footer {
    position: static;
    grid-column: 1 / 3;
    grid-row: 3;
    margin-top: 20px;
    padding: 16px 0 0 0;
    border-top: 1px solid var(--content-border);
    border-radius: 0;
}

/* Research Card */
.listing-page .research-card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 12px;
    padding: 24px;
    padding-bottom: 70px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
}

.listing-page .research-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.listing-page .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.listing-page .card-title {
    flex: 1;
}

.listing-page .card-title a {
    font-size: 17px;
    font-weight: 600;
    color: var(--content-text);
    text-decoration: none;
    line-height: 1.5;
    display: block;
}

.listing-page .card-title a:hover {
    color: var(--accent);
}

.listing-page .card-rating {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.01em;
}

.listing-page .card-rating svg {
    width: 16px;
    height: 16px;
}

.listing-page .key-result-preview {
    font-size: 15px;
    line-height: 1.6;
    color: var(--content-text-secondary);
    margin-bottom: 16px;
}

.listing-page .key-result-preview strong {
    color: var(--content-text);
}

.listing-page .card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-top: 1px solid var(--content-border);
    background: var(--content-bg);
    border-radius: 0 0 12px 12px;
}

.listing-page .card-date {
    font-size: 13px;
    color: var(--content-text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.listing-page .card-date svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.listing-page .favorite-btn-catalog {
    background: transparent;
    border: 1px solid var(--content-border);
    color: var(--content-text-tertiary);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.listing-page .favorite-btn-catalog svg {
    width: 15px;
    height: 15px;
}

.listing-page .favorite-btn-catalog:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.listing-page .favorite-btn-catalog:hover svg {
    fill: white;
}

/* Pagination */
.listing-page .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 40px 48px 40px;
}

.listing-page .pagination-btn {
    padding: 8px 16px;
    background: var(--content-subtle);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.listing-page .pagination-btn:hover:not(:disabled) {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.listing-page .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.listing-page .pagination-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Items per page selector */
.listing-page .items-per-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 40px 24px 40px;
}

.listing-page .items-per-page label {
    font-size: 14px;
    color: var(--content-text-secondary);
    font-weight: 500;
}

.listing-page .items-per-page select {
    padding: 8px 32px 8px 12px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.listing-page .items-per-page select:hover {
    border-color: var(--accent);
}

.listing-page .items-per-page select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Footer */
.page-footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px 40px 20px 40px;
    margin-top: 60px;
    color: #e2e8f0;
}

:root[data-theme="dark"] .page-footer {
    background: linear-gradient(135deg, #0a0a0b 0%, #16161a 50%, #0a0a0b 100%);
    border-top: 1px solid var(--content-border);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .footer-container {
    border-bottom-color: var(--content-border);
}

.footer-column.footer-brand {
    padding-right: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-logo-mark {
    color: #60a5fa;
}

.footer-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

.footer-tagline {
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 24px;
}

.footer-stats-compact {
    display: flex;
    gap: 32px;
}

.listing-page .stat-compact {
    display: flex;
    flex-direction: column;
}

.footer-heading {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: 14px;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #60a5fa;
}

.footer-author {
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 20px;
}

.footer-author strong {
    color: #f8fafc;
    font-weight: 600;
}

.footer-telegram-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}

.footer-telegram-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 136, 204, 0.4);
}

.footer-telegram-btn svg {
    flex-shrink: 0;
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-copyright {
    font-size: 13px;
    color: #64748b;
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.footer-meta a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-meta a:hover {
    color: #94a3b8;
}

.footer-divider {
    color: #475569;
}

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

/* Responsive - 1600px */
@media (max-width: 1600px) {
    .listing-page .research-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - 1200px */
@media (max-width: 1200px) {
    .listing-page .listing-app {
        grid-template-columns: 280px 1fr;
    }

    .listing-page .filters-drawer {
        width: 280px;
    }

    .listing-page .research-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 32px 24px 48px 24px;
    }

    .listing-page .page-header {
        padding: 24px 24px 20px 24px;
    }

    .listing-page .subnav {
        padding: 14px 24px;
    }

    .listing-page .pagination {
        padding: 0 24px 48px 24px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-column.footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}

/* Responsive - 1024px */
@media (max-width: 1024px) {
    .listing-page .research-grid {
        grid-template-columns: 1fr;
    }

    .listing-page .bot-cta-title {
        font-size: 12px;
    }

    .listing-page .bot-cta-subtitle {
        font-size: 10px;
    }
}

/* Responsive - 768px (Mobile) */
@media (max-width: 768px) {
    .listing-page .listing-app {
        grid-template-columns: 1fr;
    }

    .listing-page .filters-drawer {
        position: fixed;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    .listing-page .filters-drawer.active {
        transform: translateX(0);
    }

    .listing-page .drawer-close {
        display: flex;
    }

    .listing-page #btnToggleFilters {
        display: inline-block !important;
    }

    .listing-page .page-header {
        padding: 20px 16px 16px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .listing-page .bot-cta-compact {
        padding: 8px 12px;
        gap: 8px;
        width: 100%;
    }

    .listing-page .bot-cta-title {
        font-size: 12px;
    }

    .listing-page .bot-cta-subtitle {
        font-size: 10px;
    }

    .listing-page .page-header h1 {
        font-size: 24px;
    }

    .listing-page .subnav {
        padding: 12px 16px;
    }

    .listing-page .research-grid {
        grid-template-columns: 1fr;
        padding: 24px 16px 40px 16px;
    }

    .listing-page .pagination {
        padding: 0 16px 40px 16px;
    }

    .listing-page .view-toggle {
        display: none;
    }

    /* List view responsive for mobile */
    .listing-page .research-grid.list-view .research-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 16px;
    }

    .listing-page .research-grid.list-view .card-header {
        grid-column: 1;
        grid-row: 1;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--content-border);
        padding-bottom: 12px;
    }

    .listing-page .research-grid.list-view .card-title {
        font-size: 16px;
    }

    .listing-page .research-grid.list-view .key-result-preview {
        grid-column: 1;
        grid-row: 2;
        padding-left: 0;
    }

    .listing-page .research-grid.list-view .card-footer {
        grid-column: 1;
        grid-row: 3;
    }

    .page-footer {
        padding: 40px 20px 16px 20px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-stats-compact {
        gap: 24px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-telegram-btn {
        width: 100%;
        justify-content: center;
    }
}

/* List view responsive for tablets */
@media (max-width: 1024px) and (min-width: 769px) {
    .listing-page .research-grid.list-view .research-card {
        grid-template-columns: 280px 1fr;
    }

    .listing-page .research-grid.list-view .card-header {
        border-right: 1px solid var(--content-border);
        border-bottom: none;
        padding-right: 24px;
        padding-bottom: 0;
    }

    .listing-page .research-grid.list-view .key-result-preview {
        padding-left: 24px;
    }
}

/* Hide hr tags inside section cards */
.detail-page .section-card hr,
.detail-page .section-card-body hr,
.detail-page .text-article hr {
    display: none;
}

/* =====================================================
   EVALUATION & THINKING STYLES (2026-01-11)
   ===================================================== */

/* Evaluation Summary */
.evaluation-summary {
    padding: 16px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
    margin: 12px 0 16px 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary, #64748b);
}

.evaluation-summary p {
    margin: 0 0 8px 0;
}

.evaluation-summary p:last-child {
    margin-bottom: 0;
}

.evaluation-summary strong {
    color: var(--text-primary, #1e293b);
    font-weight: 600;
}

.evaluation-summary em {
    font-style: italic;
}

.evaluation-summary ul, .evaluation-summary ol {
    margin: 8px 0;
    padding-left: 20px;
}

.evaluation-summary li {
    margin-bottom: 4px;
}

/* Key Insight */
.insight-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #1e293b);
    padding: 8px 0;
}

/* Limitation */
.limitation-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary, #64748b);
    padding: 12px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 6px;
}

/* Principles List */
.principles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.principles-list li {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary, #1e293b);
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.principles-list li:last-child {
    border-bottom: none;
}

.principles-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent, #2563eb);
    font-weight: 600;
}

/* Thinking Tab Content */
.thinking-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary, #1e293b);
    padding: 8px 0;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Evaluation Logic Items */
.eval-logic-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.eval-logic-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.eval-logic-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 4px;
}

.eval-logic-value {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary, #1e293b);
}

/* Dark Mode Overrides */
[data-theme="dark"] .evaluation-summary {
    background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .limitation-text {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-secondary, #94a3b8);
}

/* =====================================================
   TWO-COLUMN SIDEBAR LAYOUT (2026-01-11)
   ===================================================== */

/* Columns wrapper - default single column */
.sidebar-columns-wrapper {
    display: block;
    overflow: visible;
}

.sidebar-column-left,
.sidebar-column-right {
    display: block;
}

/* Desktop: two columns with divider */
@media (min-width: 1400px) {
    .sidebar-columns-wrapper {
        display: grid;
        grid-template-columns: 1fr 1px 1fr;
        gap: 0;
        align-items: start;
        overflow: visible;
    }

    .sidebar-column-left {
        grid-column: 1;
        padding-right: 16px;
    }

    .sidebar-columns-wrapper::after {
        content: '';
        grid-column: 2;
        grid-row: 1;
        background: var(--border, #e2e8f0);
        width: 1px;
        height: 100%;
    }

    .sidebar-column-right {
        grid-column: 3;
        padding-left: 16px;
    }
}

/* Insight Box */
.sidebar-insight-box {
    background: var(--bg-secondary, #f8fafc);
    padding: 16px 18px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary, #1e293b);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}

.sidebar-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Principles Box */
.sidebar-principles-box {
    background: var(--bg-secondary, #f8fafc);
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-list li {
    font-size: 13px;
    color: var(--text-primary, #1e293b);
    padding: 6px 0;
    line-height: 1.6;
    position: relative;
    padding-left: 16px;
}

.sidebar-list li:before {
    content: →;
    color: var(--accent, #2563eb);
    position: absolute;
    left: 0;
    font-weight: 600;
}

/* Section Text */
.sidebar-section-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary, #1e293b);
}

/* Thinking Section */
.thinking-section {
    padding: 0;
}

/* Thinking tab - white cards with shadow */
#sidebar-thinking .sidebar-section {
    background: var(--bg-primary, #ffffff);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border, #e2e8f0);
}

#sidebar-thinking .sidebar-section:last-child {
    margin-bottom: 0;
}

#sidebar-thinking .sidebar-section-title {
    font-size: 11px;
    margin-bottom: 10px;
    color: var(--text-muted, #94a3b8);
}

#sidebar-thinking .sidebar-section-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary, #1e293b);
}

.thinking-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary, #64748b);
}

.thinking-text p {
    margin: 0 0 12px 0;
}

.thinking-text p:last-child {
    margin-bottom: 0;
}

.thinking-text h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 18px 0 10px 0;
}

.thinking-text h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 14px 0 8px 0;
}

.thinking-text h2:first-child,
.thinking-text h3:first-child {
    margin-top: 0;
}

.thinking-text strong {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.thinking-text ol,
.thinking-text ul {
    margin: 10px 0;
    padding-left: 20px;
}

.thinking-text li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.thinking-text code {
    background: var(--bg-muted, #f1f5f9);
    color: var(--accent, #3b82f6);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-family: monospace;
}

/* Scrollbar removed - content should not scroll within thinking-text */

/* Dark mode - thinking tab */
[data-theme="dark"] #sidebar-thinking .sidebar-section {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
}

[data-theme="dark"] .thinking-text {
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .thinking-text h2,
[data-theme="dark"] .thinking-text h3,
[data-theme="dark"] .thinking-text strong {
    color: var(--text-primary, #e2e8f0);
}

[data-theme="dark"] .thinking-text code {
    background: var(--bg-tertiary, #0f172a);
    color: var(--accent, #60a5fa);
}

/* Dark Mode */
[data-theme=dark] .sidebar-insight-box,
[data-theme=dark] .sidebar-principles-box {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
}

/* Concepts card table - hide headers, add border to tbody */
.detail-page .concepts-card th {
    display: none;
}

.detail-page .concepts-card tbody {
    border-top: 1px solid gray;
}

/* Concepts card - h3 styling and table alignment */
.detail-page .concepts-card h3 {
    color: #687490;
}

.detail-page .concepts-table tr {
    vertical-align: text-top;
}

/* Concepts table - remove left padding from concept-name td */
.detail-page .concepts-table td.concept-name {
    padding-left: 0;
}

/* Concepts table - code formatting (monospace for backticks) */
.detail-page .concepts-table code {
    /* FIX: was nowrap, breaking table layout */
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.9em;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    color: #475569;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Concepts table - bold text */
.detail-page .concepts-table strong,
.detail-page .concepts-table b {
    font-weight: 600;
    color: #1e293b;
}

/* Concepts table - italic text */
.detail-page .concepts-table em,
.detail-page .concepts-table i {
    font-style: italic;
    color: #64748b;
}

/* ===== CONCEPTS MOBILE ADAPTATION (17.01.2026) ===== */
@media (max-width: 768px) {
    /* Padding for concepts content */
    .detail-page #tab-concepts {
        padding: 16px;
    }

    .detail-page .concepts-section {
        padding: 0;
        margin-bottom: 20px;
    }

    .detail-page .concepts-section h3 {
        font-size: 15px;
        margin-bottom: 12px;
        padding: 0;
    }

    /* Transform table into card layout */
    .detail-page .concepts-table {
        display: block;
        margin-top: 8px;
    }

    .detail-page .concepts-table thead {
        display: none; /* Hide table header on mobile */
    }

    .detail-page .concepts-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-top: none;
    }

    .detail-page .concepts-table tr {
        display: flex;
        flex-direction: column;
        background: var(--content-subtle, #f8fafc);
        border: 1px solid var(--content-border, #e2e8f0);
        border-radius: 10px;
        padding: 14px;
        gap: 8px;
    }

    .detail-page .concepts-table td {
        display: block;
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        padding: 0 !important;
        border: none !important;
    }

    /* First cell = concept name as card header */
    .detail-page .concepts-table td:first-child {
        font-weight: 600;
        font-size: 14px;
        color: var(--accent, #3b82f6);
        padding-bottom: 4px !important;
        border-bottom: 1px solid var(--content-border, #e2e8f0) !important;
        margin-bottom: 4px;
    }

    /* Second cell = description */
    .detail-page .concepts-table td:last-child {
        font-size: 13px;
        line-height: 1.5;
        color: var(--content-text, #334155);
    }

    /* Code in concepts on mobile */
    .detail-page .concepts-table code {
        font-size: 0.85em;
        padding: 2px 5px;
    }
}

/* Dark theme for concepts mobile cards */
:root[data-theme="dark"] .detail-page .concepts-table tr {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme="dark"] .detail-page .concepts-table td:first-child {
    color: var(--accent, #60a5fa);
    border-bottom-color: var(--content-border, #27272a) !important;
}

:root[data-theme="dark"] .detail-page .concepts-table td:last-child {
    color: var(--content-text, #e2e8f0);
}

:root[data-theme="dark"] .detail-page .concepts-table code {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

/* Mobile Sidebar FAB - hidden by default, shown only on mobile */
.detail-page .mobile-sidebar-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* background inherited from score-* class */
    border: none;
    /* box-shadow inherited from score-* class */
    cursor: pointer;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.detail-page .mobile-sidebar-fab .fab-rating {
    color: white;
    font-size: 18px;
    font-weight: 700;
}

/* Show FAB only on mobile */
@media (max-width: 768px) {
    .detail-page .mobile-sidebar-fab {
        display: flex;
    }
}

/* Footer spanning main + right sidebar in detail page */
.detail-page .page-footer {
    grid-column: 2 / 4;
    margin-top: 0;
}

/* Source Link */
.source-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.source-link:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Category Tags - Minimal Style Override */
.detail-page .sidebar-right .category-tags {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-page .sidebar-right .category-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    border-radius: 0;
}

.detail-page .sidebar-right .category-tag:last-child {
    border-bottom: none;
}

.detail-page .sidebar-right .category-tag span:first-child {
    color: var(--text-primary);
    font-weight: 400;
}

.detail-page .sidebar-right .category-tag-pct {
    font-size: 12px;
    color: var(--text-muted);
    font-family: "IBM Plex Mono", monospace;
    background: transparent;
    padding: 0;
}

.detail-page .sidebar-right .category-tag-main {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
}

.detail-page .sidebar-right .category-tag-main span:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.detail-page .sidebar-right .category-tag-main .category-tag-pct {
    background: transparent;
    color: var(--accent);
    font-weight: 600;
}

/* Source Section */
.detail-page .source-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.detail-page .source-id {
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.detail-page .source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detail-page .source-link:hover {
    color: var(--accent);
}

.detail-page .source-link svg {
    opacity: 0.6;
}

.detail-page .source-link:hover svg {
    opacity: 1;
}

/* Category tag pct color fix */
.detail-page .sidebar-right .category-tag-main .category-tag-pct {
    color: #465882;
}

/* Source based text */
.detail-page .source-based {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Source link minimal style */
.detail-page .source-section .source-link {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
}

.detail-page .source-section .source-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.detail-page .source-section .source-link svg {
    display: none;
}

/* Sidebar Filters */
.detail-page .sidebar-filters {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}


/* Drawer Overlay for detail page */
.detail-page .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.detail-page .drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Filter section styles */
.detail-page .filter-section {
    margin-bottom: 24px;
}

.detail-page .filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.detail-page .filter-values {
    font-weight: 400;
    color: var(--accent);
}

.detail-page .rating-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}

.detail-page .rating-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.detail-page .filter-checkboxes {
    display: flex;
    gap: 16px;
}

.detail-page .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.detail-page .filter-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.detail-page .filter-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.detail-page .filter-apply-btn {
    flex: 1;
    padding: 12px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.detail-page .filter-apply-btn:hover {
    background: var(--accent-hover);
}

.detail-page .filter-reset-btn {
    padding: 12px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-page .filter-reset-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.detail-page .key-result-text .highlight-yellow { color: #0e5292; }
.catalog-link:hover { background: var(--accent) \!important; color: white \!important; border-color: var(--accent) \!important; }

/* ===== ADAPTATION RESULT DARK THEME ===== */
.detail-page .adaptation-result {
    margin-top: 32px;
    background: #1a1a2e;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.detail-page .adaptation-result .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-page .adaptation-result .result-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-page .adaptation-result .result-header h3::before {
    content: '✨';
}

.detail-page .adaptation-result .copy-result-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.5);
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-page .adaptation-result .copy-result-btn:hover {
    background: rgba(102, 126, 234, 0.4);
    border-color: rgba(102, 126, 234, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

/* Adaptation Content Markdown Styles */
.detail-page .adaptation-result .result-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.8;
}

.detail-page .adaptation-result .result-content h1,
.detail-page .adaptation-result .result-content h2 {
    color: #ffffff;
    font-weight: 600;
    margin: 28px 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
}

.detail-page .adaptation-result .result-content h1 { font-size: 22px; }
.detail-page .adaptation-result .result-content h2 { font-size: 18px; }

.detail-page .adaptation-result .result-content h3,
.detail-page .adaptation-result .result-content h4 {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    margin: 24px 0 12px 0;
}

.detail-page .adaptation-result .result-content h3 { font-size: 16px; }
.detail-page .adaptation-result .result-content h4 { font-size: 14px; color: rgba(102, 126, 234, 0.9); }

.detail-page .adaptation-result .result-content p {
    margin: 0 0 16px 0;
    color: rgba(255, 255, 255, 0.85);
}

.detail-page .adaptation-result .result-content ul,
.detail-page .adaptation-result .result-content ol {
    margin: 16px 0;
    padding-left: 24px;
}

.detail-page .adaptation-result .result-content li {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
}

.detail-page .adaptation-result .result-content li::marker {
    color: rgba(102, 126, 234, 0.8);
}

.detail-page .adaptation-result .result-content strong {
    color: #ffffff;
    font-weight: 600;
}

.detail-page .adaptation-result .result-content em {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

.detail-page .adaptation-result .result-content code {
    background: rgba(102, 126, 234, 0.2);
    color: #a5b4fc;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
}

.detail-page .adaptation-result .result-content pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
}

.detail-page .adaptation-result .result-content pre code {
    background: none;
    padding: 0;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
}

.detail-page .adaptation-result .result-content blockquote {
    border-left: 4px solid rgba(102, 126, 234, 0.6);
    margin: 16px 0;
    padding: 12px 20px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 0 8px 8px 0;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

.detail-page .adaptation-result .result-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent);
    margin: 24px 0;
}

.detail-page .adaptation-result .result-content a {
    color: #a5b4fc;
    text-decoration: none;
    border-bottom: 1px solid rgba(165, 180, 252, 0.3);
    transition: all 0.2s ease;
}

.detail-page .adaptation-result .result-content a:hover {
    color: #c4b5fd;
    border-bottom-color: rgba(196, 181, 253, 0.6);
}

/* ===== BUTTON LOADING STATES ===== */
.detail-page .adapt-btn .btn-text,
.detail-page .prompt-btn .btn-text,
.detail-page .adapt-btn .btn-loading,
.detail-page .prompt-btn .btn-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.detail-page .adapt-btn .btn-icon,
.detail-page .prompt-btn .btn-icon {
    flex-shrink: 0;
}

.detail-page .spinner-icon {
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

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

.detail-page .timer-display {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 14px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
}

.detail-page .adapt-btn:disabled,
.detail-page .prompt-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.detail-page .adapt-btn:disabled:hover,
.detail-page .prompt-btn:disabled:hover {
    box-shadow: none;
}

/* ===== ADAPTATION RESULT - ENHANCED CODE BLOCKS ===== */
.detail-page .adaptation-result .result-content pre {
    position: relative;
    background: #0d1117;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    padding: 0;
    margin: 20px 0;
    overflow: hidden;
}

.detail-page .adaptation-result .result-content pre code {
    display: block;
    padding: 16px 20px;
    padding-top: 48px;
    background: transparent;
    color: #e6edf3;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    overflow-x: auto;
}

.detail-page .adaptation-result .code-block-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.15);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.detail-page .adaptation-result .code-block-lang {
    font-size: 11px;
    font-weight: 600;
    color: rgba(102, 126, 234, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-page .adaptation-result .code-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-page .adaptation-result .code-copy-btn:hover {
    background: rgba(102, 126, 234, 0.4);
    color: #ffffff;
}

.detail-page .adaptation-result .code-copy-btn.copied {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

/* ===== ADAPTATION RESULT - ACTION BUTTONS ===== */
.detail-page .adaptation-result .result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.detail-page .adaptation-result .action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-page .adaptation-result .action-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.7);
    transform: translateY(-1px);
}

.detail-page .adaptation-result .action-btn.btn-pdf {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.detail-page .adaptation-result .action-btn.btn-pdf:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.7);
}

.detail-page .adaptation-result .action-btn.btn-html {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
}

.detail-page .adaptation-result .action-btn.btn-html:hover {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.7);
}

/* Profile favorite card updates */
.profile-page .profile-favorite-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.profile-page .profile-favorite-card-desc {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
    margin-top: 8px;
}

/* Profile favorite card rating badge */
.profile-page .profile-favorite-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px;
}
.profile-page .profile-favorite-card-rating svg {
    width: 12px;
    height: 12px;
}

/* ========================================
   GENERATIONS PAGE STYLES
   ======================================== */

.profile-page .generations-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.profile-page .gen-tab {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: var(--text-primary);
}

.profile-page .gen-tab:hover {
    border-color: var(--primary-color, #667eea);
}

.profile-page .gen-tab.active {
    background: var(--primary-color, #667eea);
    color: white;
    border-color: var(--primary-color, #667eea);
}

.profile-page .generations-stats {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 20px;
    font-size: 14px;
}

.profile-page .generations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-page .generation-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-page .generation-card:hover {
    border-color: var(--primary-color, #667eea);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-page .generation-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.profile-page .generation-type {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.profile-page .generation-type.type-adaptation {
    background: #dbeafe;
    color: #1d4ed8;
}

.profile-page .generation-type.type-prompt {
    background: #f3e8ff;
    color: #7c3aed;
}

.profile-page .generation-date {
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
}

.profile-page .generation-cost {
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    margin-left: auto;
}

.profile-page .generation-query {
    font-size: 14px;
    color: var(--text-primary, #1f2937);
    line-height: 1.5;
    margin-bottom: 12px;
}

.profile-page .generation-paper {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

.profile-page .generation-paper a {
    color: var(--primary-color, #667eea);
    text-decoration: none;
}

.profile-page .generation-paper a:hover {
    text-decoration: underline;
}

.profile-page .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.profile-page .pagination-btn {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s;
}

.profile-page .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-page .pagination-btn:not(:disabled):hover {
    border-color: var(--primary-color, #667eea);
}

.profile-page .pagination-info {
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
}


/* ==========================================================================
   Generations Page - Modal & Actions (moved from inline)
   ========================================================================== */

/* Modal styles */
.gen-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    overflow-y: auto;
}
.gen-modal-content {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.gen-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.gen-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}
.gen-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    line-height: 1;
    padding: 0;
}
.gen-modal-close:hover { color: var(--text-primary, #1f2937); }
.gen-modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}
.gen-modal-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
}
.gen-modal-meta .meta-item {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}
.gen-modal-meta .meta-item strong {
    color: var(--text-primary, #1f2937);
}
.gen-modal-meta a {
    color: var(--primary-color, #667eea);
    text-decoration: none;
}
.gen-modal-meta a:hover { text-decoration: underline; }
.gen-modal-request {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color, #667eea);
}
.gen-modal-request strong {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
}
.gen-modal-request p {
    margin: 8px 0 0;
    font-style: italic;
    color: var(--text-primary, #1f2937);
}
.gen-modal-result strong {
    display: block;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.gen-result-content {
    line-height: 1.7;
    color: var(--text-primary, #1f2937);
}
.gen-result-content h1, .gen-result-content h2, .gen-result-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.gen-result-content p { margin-bottom: 1em; }
.gen-result-content ul, .gen-result-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}
.gen-result-content pre {
    background: #1e1e2e;
    color: #e2e8f0;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
}
.gen-result-content code {
    background: var(--bg-secondary, #f3f4f6);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.gen-result-content pre code {
    background: none;
    padding: 0;
}

/* Action buttons for generation cards */
.generation-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}
.generation-actions {
    display: flex;
    gap: 8px;
}
.gen-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
.gen-view-btn {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
}
.gen-view-btn:hover {
    background: var(--primary-color, #667eea);
    color: white;
}
.gen-download-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}
.gen-download-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

/* Catalog Header Subtitle - 12.01.2026 */
.page-header .page-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin: 4px 0 0 0;
    font-weight: 400;
}

/* Bot CTA Image - 12.01.2026 */
.bot-cta-image {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ========================================
   LOGIN BUTTON STYLES
   ======================================== */
.login-btn {
    background: linear-gradient(135deg, #27a7e7, #1f8dc4);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-btn:hover {
    background: linear-gradient(135deg, #1f8dc4, #176a9a);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(31, 141, 196, 0.3);
}

.login-btn:active {
    transform: translateY(0);
}

[data-theme="dark"] .login-btn {
    background: linear-gradient(135deg, #27a7e7, #2196f3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .login-btn:hover {
    background: linear-gradient(135deg, #2196f3, #1e88e5);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.4);
}

/* ========================================
   HEADER LOGIN BUTTON STYLES (Updated 2026-01-13)
   ======================================== */
.btn-header {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.btn-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.btn-header:hover::before {
    left: 100%;
}

.btn-header:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #7c3aed 100%);
}

.btn-header:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .btn-header {
    background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #a855f7 100%);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

[data-theme="dark"] .btn-header:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #9333ea 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
}

/* ========================================
   AUTH LOGIN PAGE STYLES
   ======================================== */

.auth-login-page {
    min-height: 100vh;
    background: var(--page-bg, #f8fafc);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.auth-wrapper {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 20px;
}

.auth-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--content-text-secondary, #64748b);
    margin-bottom: 24px;
}

.auth-breadcrumb a {
    color: var(--accent, #3b82f6);
    text-decoration: none;
}

.auth-breadcrumb a:hover {
    text-decoration: underline;
}

.auth-breadcrumb .breadcrumb-sep {
    color: var(--content-text-secondary, #94a3b8);
}

.auth-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--content-text, #1e293b);
    margin: 0 0 32px 0;
}

.auth-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--content-border, #e2e8f0);
    border-radius: 12px;
    padding: 32px;
}

.auth-card-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--content-border, #e2e8f0);
}

.auth-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--content-text, #1e293b);
}

.auth-description {
    font-size: 15px;
    color: var(--content-text-secondary, #64748b);
    line-height: 1.6;
    margin-bottom: 24px;
}

.telegram-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.25);
}

.telegram-auth-btn:hover {
    background: linear-gradient(135deg, #0099dd 0%, #0088cc 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.35);
    text-decoration: none;
}

.auth-benefits {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--content-border, #e2e8f0);
}

.auth-benefits-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text, #1e293b);
    margin-bottom: 16px;
}

.auth-benefit-item {
    padding: 8px 0;
    font-size: 14px;
    color: var(--content-text-secondary, #64748b);
    padding-left: 20px;
    position: relative;
}

.auth-benefit-item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent, #3b82f6);
}

.auth-back-link {
    display: inline-block;
    margin-top: 24px;
    font-size: 14px;
    color: var(--accent, #3b82f6);
    text-decoration: none;
}

.auth-back-link:hover {
    text-decoration: underline;
}

/* Dark theme for auth page */
:root[data-theme=dark] .auth-card {
    background: var(--content-subtle, #1c1c21);
    border-color: var(--content-border, #27272a);
}

:root[data-theme=dark] .auth-title,
:root[data-theme=dark] .auth-card-title,
:root[data-theme=dark] .auth-benefits-title {
    color: var(--content-text, #e2e8f0);
}

:root[data-theme=dark] .auth-description,
:root[data-theme=dark] .auth-benefit-item,
:root[data-theme=dark] .auth-breadcrumb {
    color: var(--content-text-secondary, #94a3b8);
}

:root[data-theme=dark] .auth-card-header,
:root[data-theme=dark] .auth-benefits {
    border-color: var(--content-border, #27272a);
}


/* AUTH PAGE - EXPLICIT STYLES (no CSS vars dependency) */
.auth-login-page {
    min-height: 100vh;
    background: #f8fafc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
}

.auth-login-page .header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 24px;
}

.auth-login-page .auth-wrapper {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 20px;
}

.auth-login-page .auth-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.auth-login-page .auth-title {
    font-size: 28px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 24px 0;
}

.auth-login-page .auth-card-header {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.auth-login-page .auth-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.auth-login-page .auth-description {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
}

.auth-login-page .telegram-auth-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
    transition: all 0.2s ease;
}

.auth-login-page .telegram-auth-btn:hover {
    background: linear-gradient(135deg, #0099dd 0%, #0088cc 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 136, 204, 0.4);
}

.auth-login-page .auth-benefits {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.auth-login-page .auth-benefits-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

.auth-login-page .auth-benefit-item {
    padding: 10px 0 10px 24px;
    font-size: 14px;
    color: #475569;
    position: relative;
}

.auth-login-page .auth-benefit-item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: bold;
}

.auth-login-page .auth-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
}

.auth-login-page .auth-breadcrumb a {
    color: #3b82f6;
    text-decoration: none;
}

.auth-login-page .auth-back-link {
    display: inline-block;
    margin-top: 24px;
    font-size: 14px;
    color: #3b82f6;
    text-decoration: none;
}

.auth-login-page .auth-back-link:hover {
    text-decoration: underline;
}

/* ================================================
   Loading Indicator Styles (added 2026-01-18)
   ================================================ */

.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.loading-indicator p {
    color: var(--content-text-secondary, #64748b);
    font-size: 14px;
    margin: 0;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--content-border, #e2e8f0);
    border-top-color: var(--accent, #3b82f6);
    border-radius: 50%;
    animation: spinner-rotation 1s linear infinite;
}

@keyframes spinner-rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Dark theme support for loading indicator */
:root[data-theme="dark"] .loading-indicator p {
    color: var(--content-text-secondary, #94a3b8);
}

:root[data-theme="dark"] .loading-spinner {
    border-color: var(--content-border, #27272a);
    border-top-color: var(--accent, #60a5fa);
}